- Nuiton-js-commits - mailman.cloud.codelutin.com

r239 - trunk/src/site
by echatellier＠users.nuiton.org Nov. 18, 2013

Nov. 18, 2013

Author: echatellier Date: 2013-11-18 11:07:56 +0100 (Mon, 18 Nov 2013) New Revision: 239 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/239 Log: Relocate angularjs Modified: trunk/src/site/site_en.xml Modified: trunk/src/site/site_en.xml =================================================================== --- trunk/src/site/site_en.xml 2013-11-18 10:05:53 UTC (rev 238) +++ trunk/src/site/site_en.xml 2013-11-18 10:07:56 UTC (rev 239) @@ -85,7 +85,7 @@ </menu> <menu name="Available packages"> - <item name="angular" href="nuiton-js-lib/nuiton-js-angular/index.html"/> + <item name="angular" href="nuiton-js-lib/nuiton-js-angularjs/index.html"/> <item name="backbone" href="nuiton-js-lib/nuiton-js-backbone/index.html"/> <item name="bootstrap" href="nuiton-js-lib/nuiton-js-bootstrap/index.html"/> <item name="canjs" href="nuiton-js-lib/nuiton-js-canjs/index.html"/>

1 0

r238 - tags
by echatellier＠users.nuiton.org Nov. 18, 2013

Nov. 18, 2013

Author: echatellier Date: 2013-11-18 11:05:53 +0100 (Mon, 18 Nov 2013) New Revision: 238 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/238 Log: Tag 1.2.0 Added: tags/nuiton-js-angularjs-1.2.0-1/

1 0

r237 - sandbox/nuiton-js-angularjs
by echatellier＠users.nuiton.org Nov. 18, 2013

Nov. 18, 2013

Author: echatellier Date: 2013-11-18 11:04:40 +0100 (Mon, 18 Nov 2013) New Revision: 237 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/237 Log: Prepare release Modified: sandbox/nuiton-js-angularjs/pom.xml Modified: sandbox/nuiton-js-angularjs/pom.xml =================================================================== --- sandbox/nuiton-js-angularjs/pom.xml 2013-11-18 10:03:57 UTC (rev 236) +++ sandbox/nuiton-js-angularjs/pom.xml 2013-11-18 10:04:40 UTC (rev 237) @@ -14,7 +14,7 @@ </parent> <artifactId>nuiton-js-angularjs</artifactId> - <version>1.2.0-1-SNAPSHOT</version> + <version>1.2.0-1</version> <name>Nuiton JS :: Angular</name> <description>AngularJS jar packaging</description>

1 0

r236 - sandbox/nuiton-js-angularjs
by echatellier＠users.nuiton.org Nov. 18, 2013

Nov. 18, 2013

Author: echatellier Date: 2013-11-18 11:03:57 +0100 (Mon, 18 Nov 2013) New Revision: 236 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/236 Log: Rename artifact Modified: sandbox/nuiton-js-angularjs/pom.xml Modified: sandbox/nuiton-js-angularjs/pom.xml =================================================================== --- sandbox/nuiton-js-angularjs/pom.xml 2013-11-17 20:36:59 UTC (rev 235) +++ sandbox/nuiton-js-angularjs/pom.xml 2013-11-18 10:03:57 UTC (rev 236) @@ -17,7 +17,7 @@ <version>1.2.0-1-SNAPSHOT</version> <name>Nuiton JS :: Angular</name> - <description>Angular jar packaging</description> + <description>AngularJS jar packaging</description> <url>http://angularjs.org/</url>

1 0

r235 - trunk/nuiton-js-wro/src/main/java/org/nuiton/js/wro
by echatellier＠users.nuiton.org Nov. 17, 2013

Nov. 17, 2013

Author: echatellier Date: 2013-11-17 21:36:59 +0100 (Sun, 17 Nov 2013) New Revision: 235 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/235 Log: Log root cause Modified: trunk/nuiton-js-wro/src/main/java/org/nuiton/js/wro/NuitonJsXmlModelFactory.java Modified: trunk/nuiton-js-wro/src/main/java/org/nuiton/js/wro/NuitonJsXmlModelFactory.java =================================================================== --- trunk/nuiton-js-wro/src/main/java/org/nuiton/js/wro/NuitonJsXmlModelFactory.java 2013-11-17 16:48:15 UTC (rev 234) +++ trunk/nuiton-js-wro/src/main/java/org/nuiton/js/wro/NuitonJsXmlModelFactory.java 2013-11-17 20:36:59 UTC (rev 235) @@ -90,7 +90,7 @@ } catch (WroRuntimeException eee) { // si pas de fichier utilisateur on utilisera que les lib de nuiton-js // donc on ne fait qu'afficher un warning - LOG.warn("No user wro.xml file found, use only nuiton-js declaration"); + LOG.warn("No user wro.xml file found, use only nuiton-js declaration", eee); } return model;

1 0

r234 - sandbox/nuiton-js-angularjs
by echatellier＠users.nuiton.org Nov. 17, 2013

Nov. 17, 2013

Author: echatellier Date: 2013-11-17 17:48:15 +0100 (Sun, 17 Nov 2013) New Revision: 234 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/234 Log: Rename artifact to angularjs Modified: sandbox/nuiton-js-angularjs/README.txt sandbox/nuiton-js-angularjs/pom.xml Modified: sandbox/nuiton-js-angularjs/README.txt =================================================================== --- sandbox/nuiton-js-angularjs/README.txt 2013-11-17 16:43:13 UTC (rev 233) +++ sandbox/nuiton-js-angularjs/README.txt 2013-11-17 16:48:15 UTC (rev 234) @@ -1,2 +1,2 @@ -for f in src/main/resources/nuiton-js-angular/i18n/*.js; do sed -i '1i/* %%Ignore-License */' $f; done +for f in src/main/resources/META-INF/resources/nuiton-js-angular/i18n/*.js; do sed -i '1i/* %%Ignore-License */' $f; done Modified: sandbox/nuiton-js-angularjs/pom.xml =================================================================== --- sandbox/nuiton-js-angularjs/pom.xml 2013-11-17 16:43:13 UTC (rev 233) +++ sandbox/nuiton-js-angularjs/pom.xml 2013-11-17 16:48:15 UTC (rev 234) @@ -13,7 +13,7 @@ <version>1.0.1</version> </parent> - <artifactId>nuiton-js-angular</artifactId> + <artifactId>nuiton-js-angularjs</artifactId> <version>1.2.0-1-SNAPSHOT</version> <name>Nuiton JS :: Angular</name> @@ -29,9 +29,9 @@ </licenses> <scm> - <connection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-angular-1.2.0-1</connection> - <developerConnection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-angular-1.2.0-1</developerConnection> - <url>http://www.nuiton.org/repositories/browse/nuiton-js/tags/nuiton-js-angular-…</url> + <connection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-angularjs-1.2.0-1</connection> + <developerConnection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-angularjs-1.2.0-1</developerConnection> + <url>http://www.nuiton.org/repositories/browse/nuiton-js/tags/nuiton-js-angularj…</url> </scm> </project>

1 0

r233 - sandbox
by echatellier＠users.nuiton.org Nov. 17, 2013

Nov. 17, 2013

Author: echatellier Date: 2013-11-17 17:43:13 +0100 (Sun, 17 Nov 2013) New Revision: 233 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/233 Log: Rename artifact to angularjs Added: sandbox/nuiton-js-angularjs/ Removed: sandbox/nuiton-js-angular/

1 0

r232 - in sandbox/nuiton-js-angular: . src/main/resources src/main/resources/META-INF src/main/resources/META-INF/nuiton-js src/main/resources/META-INF/resources
by echatellier＠users.nuiton.org Nov. 16, 2013

Nov. 16, 2013

Author: echatellier Date: 2013-11-16 20:38:20 +0100 (Sat, 16 Nov 2013) New Revision: 232 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/232 Log: Move resources to META-INF/resources to be servlet 3 compatible Added: sandbox/nuiton-js-angular/src/main/resources/META-INF/resources/ sandbox/nuiton-js-angular/src/main/resources/META-INF/resources/nuiton-js-angular/ Removed: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/ Modified: sandbox/nuiton-js-angular/generate-extra-group.sh sandbox/nuiton-js-angular/generate-i18n-group.sh sandbox/nuiton-js-angular/pom.xml sandbox/nuiton-js-angular/src/main/resources/META-INF/nuiton-js/wro-angular.xml Modified: sandbox/nuiton-js-angular/generate-extra-group.sh =================================================================== --- sandbox/nuiton-js-angular/generate-extra-group.sh 2013-11-16 19:37:08 UTC (rev 231) +++ sandbox/nuiton-js-angular/generate-extra-group.sh 2013-11-16 19:38:20 UTC (rev 232) @@ -3,8 +3,8 @@ # Permet de genere le code XML necessaire pour la declaration des extras # il faut ensuite mettre ce qui est genere dans le fichier META-INF/nuiton-js/nuiton-js-angular.xml # -for t in src/main/resources/nuiton-js-angular/angular-*.js; do +for t in src/main/resources/META-INF/resources/nuiton-js-angular/angular-*.js; do f=$(basename $t) n=$(basename $t .js) - echo -e " <group name='$n'>\n <js>classpath:nuiton-js-angular/$f</js>\n </group>\n" + echo -e " <group name='$n'>\n <js>classpath:META-INF/resources/nuiton-js-angular/$f</js>\n </group>\n" done Modified: sandbox/nuiton-js-angular/generate-i18n-group.sh =================================================================== --- sandbox/nuiton-js-angular/generate-i18n-group.sh 2013-11-16 19:37:08 UTC (rev 231) +++ sandbox/nuiton-js-angular/generate-i18n-group.sh 2013-11-16 19:38:20 UTC (rev 232) @@ -3,8 +3,8 @@ # Permet de genere le code XML necessaire pour la declaration i18n # il faut ensuite mettre ce qui est genere dans le fichier META-INF/nuiton-js/nuiton-js-angular.xml # -for t in src/main/resources/nuiton-js-angular/i18n/*.js; do +for t in src/main/resources/META-INF/resources/nuiton-js-angular/i18n/*.js; do f=$(basename $t) n=$(basename $t .js | sed 's/angular-locale_//g') - echo -e " <group name='angular-$n'>\n <js>classpath:nuiton-js-angular/i18n/$f</js>\n </group>\n" + echo -e " <group name='angular-$n'>\n <js>classpath:META-INF/resources/nuiton-js-angular/i18n/$f</js>\n </group>\n" done Modified: sandbox/nuiton-js-angular/pom.xml =================================================================== --- sandbox/nuiton-js-angular/pom.xml 2013-11-16 19:37:08 UTC (rev 231) +++ sandbox/nuiton-js-angular/pom.xml 2013-11-16 19:38:20 UTC (rev 232) @@ -14,7 +14,7 @@ </parent> <artifactId>nuiton-js-angular</artifactId> - <version>1.2.0-1</version> + <version>1.2.0-1-SNAPSHOT</version> <name>Nuiton JS :: Angular</name> <description>Angular jar packaging</description> Modified: sandbox/nuiton-js-angular/src/main/resources/META-INF/nuiton-js/wro-angular.xml =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/META-INF/nuiton-js/wro-angular.xml 2013-11-16 19:37:08 UTC (rev 231) +++ sandbox/nuiton-js-angular/src/main/resources/META-INF/nuiton-js/wro-angular.xml 2013-11-16 19:38:20 UTC (rev 232) @@ -23,1019 +23,1019 @@ --> <groups xmlns="http://www.isdc.ro/wro"> <group name='angular'> - <js>classpath:nuiton-js-angular/angular.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/angular.js</js> </group> <group name='angular-animate'> - <js>classpath:nuiton-js-angular/angular-animate.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/angular-animate.js</js> </group> <group name='angular-cookies'> - <js>classpath:nuiton-js-angular/angular-cookies.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/angular-cookies.js</js> </group> <group name='angular-loader'> - <js>classpath:nuiton-js-angular/angular-loader.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/angular-loader.js</js> </group> <group name='angular-mocks'> - <js>classpath:nuiton-js-angular/angular-mocks.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/angular-mocks.js</js> </group> <group name='angular-resource'> - <js>classpath:nuiton-js-angular/angular-resource.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/angular-resource.js</js> </group> <group name='angular-route'> - <js>classpath:nuiton-js-angular/angular-route.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/angular-route.js</js> </group> <group name='angular-sanitize'> - <js>classpath:nuiton-js-angular/angular-sanitize.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/angular-sanitize.js</js> </group> <group name='angular-touch'> - <js>classpath:nuiton-js-angular/angular-touch.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/angular-touch.js</js> </group> + <group name='angular-af'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_af.js</js> + </group> + <group name='angular-af-na'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_af-na.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_af-na.js</js> </group> <group name='angular-af-za'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_af-za.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_af-za.js</js> </group> - <group name='angular-af'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_af.js</js> - </group> - <group name='angular-am-et'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_am-et.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_am-et.js</js> </group> <group name='angular-am'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_am.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_am.js</js> </group> <group name='angular-ar-001'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-001.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-001.js</js> </group> <group name='angular-ar-ae'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-ae.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-ae.js</js> </group> <group name='angular-ar-bh'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-bh.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-bh.js</js> </group> <group name='angular-ar-dz'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-dz.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-dz.js</js> </group> <group name='angular-ar-eg'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-eg.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-eg.js</js> </group> <group name='angular-ar-iq'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-iq.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-iq.js</js> </group> <group name='angular-ar-jo'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-jo.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-jo.js</js> </group> + <group name='angular-ar'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar.js</js> + </group> + <group name='angular-ar-kw'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-kw.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-kw.js</js> </group> <group name='angular-ar-lb'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-lb.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-lb.js</js> </group> <group name='angular-ar-ly'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-ly.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-ly.js</js> </group> <group name='angular-ar-ma'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-ma.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-ma.js</js> </group> <group name='angular-ar-om'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-om.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-om.js</js> </group> <group name='angular-ar-qa'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-qa.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-qa.js</js> </group> <group name='angular-ar-sa'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-sa.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-sa.js</js> </group> <group name='angular-ar-sd'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-sd.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-sd.js</js> </group> <group name='angular-ar-sy'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-sy.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-sy.js</js> </group> <group name='angular-ar-tn'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-tn.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-tn.js</js> </group> <group name='angular-ar-ye'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar-ye.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ar-ye.js</js> </group> - <group name='angular-ar'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ar.js</js> - </group> - <group name='angular-bg-bg'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_bg-bg.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_bg-bg.js</js> </group> <group name='angular-bg'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_bg.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_bg.js</js> </group> <group name='angular-bn-bd'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_bn-bd.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_bn-bd.js</js> </group> <group name='angular-bn-in'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_bn-in.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_bn-in.js</js> </group> <group name='angular-bn'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_bn.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_bn.js</js> </group> <group name='angular-ca-ad'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ca-ad.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ca-ad.js</js> </group> <group name='angular-ca-es'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ca-es.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ca-es.js</js> </group> <group name='angular-ca'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ca.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ca.js</js> </group> <group name='angular-cs-cz'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_cs-cz.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_cs-cz.js</js> </group> <group name='angular-cs'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_cs.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_cs.js</js> </group> <group name='angular-da-dk'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_da-dk.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_da-dk.js</js> </group> <group name='angular-da'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_da.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_da.js</js> </group> <group name='angular-de-at'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_de-at.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_de-at.js</js> </group> <group name='angular-de-be'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_de-be.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_de-be.js</js> </group> <group name='angular-de-ch'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_de-ch.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_de-ch.js</js> </group> <group name='angular-de-de'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_de-de.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_de-de.js</js> </group> + <group name='angular-de'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_de.js</js> + </group> + <group name='angular-de-li'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_de-li.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_de-li.js</js> </group> <group name='angular-de-lu'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_de-lu.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_de-lu.js</js> </group> - <group name='angular-de'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_de.js</js> - </group> - <group name='angular-el-cy'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_el-cy.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_el-cy.js</js> </group> <group name='angular-el-gr'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_el-gr.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_el-gr.js</js> </group> <group name='angular-el'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_el.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_el.js</js> </group> <group name='angular-en-as'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-as.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-as.js</js> </group> <group name='angular-en-au'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-au.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-au.js</js> </group> <group name='angular-en-bb'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-bb.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-bb.js</js> </group> <group name='angular-en-be'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-be.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-be.js</js> </group> <group name='angular-en-bm'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-bm.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-bm.js</js> </group> <group name='angular-en-bw'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-bw.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-bw.js</js> </group> <group name='angular-en-bz'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-bz.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-bz.js</js> </group> <group name='angular-en-ca'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-ca.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-ca.js</js> </group> - <group name='angular-en-dsrt-us'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-dsrt-us.js</js> + <group name='angular-en-dsrt'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-dsrt.js</js> </group> - <group name='angular-en-dsrt'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-dsrt.js</js> + <group name='angular-en-dsrt-us'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-dsrt-us.js</js> </group> <group name='angular-en-fm'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-fm.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-fm.js</js> </group> <group name='angular-en-gb'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-gb.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-gb.js</js> </group> <group name='angular-en-gu'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-gu.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-gu.js</js> </group> <group name='angular-en-gy'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-gy.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-gy.js</js> </group> <group name='angular-en-hk'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-hk.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-hk.js</js> </group> <group name='angular-en-ie'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-ie.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-ie.js</js> </group> <group name='angular-en-in'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-in.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-in.js</js> </group> <group name='angular-en-iso'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-iso.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-iso.js</js> </group> <group name='angular-en-jm'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-jm.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-jm.js</js> </group> + <group name='angular-en'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en.js</js> + </group> + <group name='angular-en-mh'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-mh.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-mh.js</js> </group> <group name='angular-en-mp'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-mp.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-mp.js</js> </group> <group name='angular-en-mt'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-mt.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-mt.js</js> </group> <group name='angular-en-mu'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-mu.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-mu.js</js> </group> <group name='angular-en-na'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-na.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-na.js</js> </group> <group name='angular-en-nz'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-nz.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-nz.js</js> </group> <group name='angular-en-ph'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-ph.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-ph.js</js> </group> <group name='angular-en-pk'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-pk.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-pk.js</js> </group> <group name='angular-en-pr'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-pr.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-pr.js</js> </group> <group name='angular-en-pw'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-pw.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-pw.js</js> </group> <group name='angular-en-sg'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-sg.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-sg.js</js> </group> <group name='angular-en-tc'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-tc.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-tc.js</js> </group> <group name='angular-en-tt'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-tt.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-tt.js</js> </group> <group name='angular-en-um'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-um.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-um.js</js> </group> <group name='angular-en-us'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-us.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-us.js</js> </group> <group name='angular-en-vg'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-vg.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-vg.js</js> </group> <group name='angular-en-vi'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-vi.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-vi.js</js> </group> <group name='angular-en-za'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-za.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-za.js</js> </group> <group name='angular-en-zw'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en-zw.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_en-zw.js</js> </group> - <group name='angular-en'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_en.js</js> - </group> - <group name='angular-es-419'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-419.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-419.js</js> </group> <group name='angular-es-ar'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-ar.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-ar.js</js> </group> <group name='angular-es-bo'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-bo.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-bo.js</js> </group> <group name='angular-es-cl'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-cl.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-cl.js</js> </group> <group name='angular-es-co'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-co.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-co.js</js> </group> <group name='angular-es-cr'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-cr.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-cr.js</js> </group> <group name='angular-es-do'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-do.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-do.js</js> </group> <group name='angular-es-ea'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-ea.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-ea.js</js> </group> <group name='angular-es-ec'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-ec.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-ec.js</js> </group> <group name='angular-es-es'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-es.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-es.js</js> </group> <group name='angular-es-gq'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-gq.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-gq.js</js> </group> <group name='angular-es-gt'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-gt.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-gt.js</js> </group> <group name='angular-es-hn'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-hn.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-hn.js</js> </group> <group name='angular-es-ic'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-ic.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-ic.js</js> </group> + <group name='angular-es'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es.js</js> + </group> + <group name='angular-es-mx'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-mx.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-mx.js</js> </group> <group name='angular-es-ni'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-ni.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-ni.js</js> </group> <group name='angular-es-pa'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-pa.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-pa.js</js> </group> <group name='angular-es-pe'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-pe.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-pe.js</js> </group> <group name='angular-es-pr'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-pr.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-pr.js</js> </group> <group name='angular-es-py'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-py.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-py.js</js> </group> <group name='angular-es-sv'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-sv.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-sv.js</js> </group> <group name='angular-es-us'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-us.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-us.js</js> </group> <group name='angular-es-uy'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-uy.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-uy.js</js> </group> <group name='angular-es-ve'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es-ve.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_es-ve.js</js> </group> - <group name='angular-es'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_es.js</js> - </group> - <group name='angular-et-ee'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_et-ee.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_et-ee.js</js> </group> <group name='angular-et'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_et.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_et.js</js> </group> <group name='angular-eu-es'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_eu-es.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_eu-es.js</js> </group> <group name='angular-eu'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_eu.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_eu.js</js> </group> <group name='angular-fa-af'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fa-af.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fa-af.js</js> </group> <group name='angular-fa-ir'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fa-ir.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fa-ir.js</js> </group> <group name='angular-fa'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fa.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fa.js</js> </group> <group name='angular-fi-fi'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fi-fi.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fi-fi.js</js> </group> <group name='angular-fi'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fi.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fi.js</js> </group> - <group name='angular-fil-ph'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fil-ph.js</js> + <group name='angular-fil'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fil.js</js> </group> - <group name='angular-fil'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fil.js</js> + <group name='angular-fil-ph'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fil-ph.js</js> </group> <group name='angular-fr-be'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-be.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-be.js</js> </group> <group name='angular-fr-bf'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-bf.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-bf.js</js> </group> <group name='angular-fr-bi'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-bi.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-bi.js</js> </group> <group name='angular-fr-bj'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-bj.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-bj.js</js> </group> <group name='angular-fr-bl'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-bl.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-bl.js</js> </group> <group name='angular-fr-ca'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-ca.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-ca.js</js> </group> <group name='angular-fr-cd'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-cd.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-cd.js</js> </group> <group name='angular-fr-cf'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-cf.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-cf.js</js> </group> <group name='angular-fr-cg'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-cg.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-cg.js</js> </group> <group name='angular-fr-ch'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-ch.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-ch.js</js> </group> <group name='angular-fr-ci'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-ci.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-ci.js</js> </group> <group name='angular-fr-cm'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-cm.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-cm.js</js> </group> <group name='angular-fr-dj'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-dj.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-dj.js</js> </group> <group name='angular-fr-fr'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-fr.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-fr.js</js> </group> <group name='angular-fr-ga'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-ga.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-ga.js</js> </group> <group name='angular-fr-gf'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-gf.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-gf.js</js> </group> <group name='angular-fr-gn'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-gn.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-gn.js</js> </group> <group name='angular-fr-gp'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-gp.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-gp.js</js> </group> <group name='angular-fr-gq'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-gq.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-gq.js</js> </group> + <group name='angular-fr'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr.js</js> + </group> + <group name='angular-fr-km'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-km.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-km.js</js> </group> <group name='angular-fr-lu'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-lu.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-lu.js</js> </group> <group name='angular-fr-mc'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-mc.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-mc.js</js> </group> <group name='angular-fr-mf'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-mf.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-mf.js</js> </group> <group name='angular-fr-mg'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-mg.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-mg.js</js> </group> <group name='angular-fr-ml'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-ml.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-ml.js</js> </group> <group name='angular-fr-mq'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-mq.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-mq.js</js> </group> <group name='angular-fr-ne'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-ne.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-ne.js</js> </group> <group name='angular-fr-re'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-re.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-re.js</js> </group> <group name='angular-fr-yt'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr-yt.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_fr-yt.js</js> </group> - <group name='angular-fr'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_fr.js</js> - </group> - <group name='angular-gl-es'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_gl-es.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_gl-es.js</js> </group> <group name='angular-gl'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_gl.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_gl.js</js> </group> <group name='angular-gsw-ch'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_gsw-ch.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_gsw-ch.js</js> </group> <group name='angular-gsw'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_gsw.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_gsw.js</js> </group> <group name='angular-gu-in'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_gu-in.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_gu-in.js</js> </group> <group name='angular-gu'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_gu.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_gu.js</js> </group> <group name='angular-he-il'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_he-il.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_he-il.js</js> </group> <group name='angular-he'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_he.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_he.js</js> </group> <group name='angular-hi-in'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_hi-in.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_hi-in.js</js> </group> <group name='angular-hi'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_hi.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_hi.js</js> </group> <group name='angular-hr-hr'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_hr-hr.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_hr-hr.js</js> </group> <group name='angular-hr'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_hr.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_hr.js</js> </group> <group name='angular-hu-hu'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_hu-hu.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_hu-hu.js</js> </group> <group name='angular-hu'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_hu.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_hu.js</js> </group> <group name='angular-id-id'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_id-id.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_id-id.js</js> </group> <group name='angular-id'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_id.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_id.js</js> </group> <group name='angular-in'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_in.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_in.js</js> </group> <group name='angular-is-is'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_is-is.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_is-is.js</js> </group> <group name='angular-is'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_is.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_is.js</js> </group> <group name='angular-it-it'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_it-it.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_it-it.js</js> </group> - <group name='angular-it-sm'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_it-sm.js</js> + <group name='angular-it'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_it.js</js> </group> - <group name='angular-it'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_it.js</js> + <group name='angular-it-sm'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_it-sm.js</js> </group> <group name='angular-iw'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_iw.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_iw.js</js> </group> <group name='angular-ja-jp'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ja-jp.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ja-jp.js</js> </group> <group name='angular-ja'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ja.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ja.js</js> </group> <group name='angular-kn-in'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_kn-in.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_kn-in.js</js> </group> <group name='angular-kn'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_kn.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_kn.js</js> </group> - <group name='angular-ko-kr'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ko-kr.js</js> + <group name='angular-ko'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ko.js</js> </group> - <group name='angular-ko'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ko.js</js> + <group name='angular-ko-kr'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ko-kr.js</js> </group> <group name='angular-ln-cd'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ln-cd.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ln-cd.js</js> </group> <group name='angular-ln'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ln.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ln.js</js> </group> + <group name='angular-lt'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_lt.js</js> + </group> + <group name='angular-lt-lt'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_lt-lt.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_lt-lt.js</js> </group> - <group name='angular-lt'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_lt.js</js> + <group name='angular-lv'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_lv.js</js> </group> <group name='angular-lv-lv'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_lv-lv.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_lv-lv.js</js> </group> - <group name='angular-lv'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_lv.js</js> - </group> - <group name='angular-ml-in'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ml-in.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ml-in.js</js> </group> <group name='angular-ml'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ml.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ml.js</js> </group> <group name='angular-mr-in'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_mr-in.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_mr-in.js</js> </group> <group name='angular-mr'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_mr.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_mr.js</js> </group> + <group name='angular-ms'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ms.js</js> + </group> + <group name='angular-ms-my'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ms-my.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ms-my.js</js> </group> - <group name='angular-ms'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ms.js</js> + <group name='angular-mt'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_mt.js</js> </group> <group name='angular-mt-mt'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_mt-mt.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_mt-mt.js</js> </group> - <group name='angular-mt'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_mt.js</js> + <group name='angular-nl-cw'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_nl-cw.js</js> </group> - <group name='angular-nl-cw'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_nl-cw.js</js> + <group name='angular-nl'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_nl.js</js> </group> <group name='angular-nl-nl'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_nl-nl.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_nl-nl.js</js> </group> <group name='angular-nl-sx'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_nl-sx.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_nl-sx.js</js> </group> - <group name='angular-nl'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_nl.js</js> - </group> - <group name='angular-no'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_no.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_no.js</js> </group> <group name='angular-or-in'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_or-in.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_or-in.js</js> </group> <group name='angular-or'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_or.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_or.js</js> </group> - <group name='angular-pl-pl'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_pl-pl.js</js> + <group name='angular-pl'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_pl.js</js> </group> - <group name='angular-pl'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_pl.js</js> + <group name='angular-pl-pl'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_pl-pl.js</js> </group> <group name='angular-pt-br'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_pt-br.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_pt-br.js</js> </group> + <group name='angular-pt'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_pt.js</js> + </group> + <group name='angular-pt-pt'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_pt-pt.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_pt-pt.js</js> </group> - <group name='angular-pt'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_pt.js</js> + <group name='angular-ro'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ro.js</js> </group> <group name='angular-ro-ro'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ro-ro.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ro-ro.js</js> </group> - <group name='angular-ro'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ro.js</js> + <group name='angular-ru'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ru.js</js> </group> <group name='angular-ru-ru'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ru-ru.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ru-ru.js</js> </group> - <group name='angular-ru'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ru.js</js> + <group name='angular-sk'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_sk.js</js> </group> <group name='angular-sk-sk'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_sk-sk.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_sk-sk.js</js> </group> - <group name='angular-sk'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_sk.js</js> + <group name='angular-sl'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_sl.js</js> </group> <group name='angular-sl-si'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_sl-si.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_sl-si.js</js> </group> - <group name='angular-sl'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_sl.js</js> - </group> - <group name='angular-sq-al'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_sq-al.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_sq-al.js</js> </group> <group name='angular-sq'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_sq.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_sq.js</js> </group> <group name='angular-sr-cyrl-rs'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_sr-cyrl-rs.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_sr-cyrl-rs.js</js> </group> + <group name='angular-sr'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_sr.js</js> + </group> + <group name='angular-sr-latn-rs'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_sr-latn-rs.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_sr-latn-rs.js</js> </group> - <group name='angular-sr'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_sr.js</js> + <group name='angular-sv'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_sv.js</js> </group> <group name='angular-sv-se'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_sv-se.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_sv-se.js</js> </group> - <group name='angular-sv'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_sv.js</js> + <group name='angular-sw'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_sw.js</js> </group> <group name='angular-sw-tz'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_sw-tz.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_sw-tz.js</js> </group> - <group name='angular-sw'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_sw.js</js> - </group> - <group name='angular-ta-in'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ta-in.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ta-in.js</js> </group> <group name='angular-ta'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ta.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ta.js</js> </group> <group name='angular-te-in'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_te-in.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_te-in.js</js> </group> <group name='angular-te'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_te.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_te.js</js> </group> - <group name='angular-th-th'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_th-th.js</js> + <group name='angular-th'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_th.js</js> </group> - <group name='angular-th'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_th.js</js> + <group name='angular-th-th'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_th-th.js</js> </group> <group name='angular-tl'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_tl.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_tl.js</js> </group> + <group name='angular-tr'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_tr.js</js> + </group> + <group name='angular-tr-tr'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_tr-tr.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_tr-tr.js</js> </group> - <group name='angular-tr'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_tr.js</js> + <group name='angular-uk'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_uk.js</js> </group> <group name='angular-uk-ua'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_uk-ua.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_uk-ua.js</js> </group> - <group name='angular-uk'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_uk.js</js> + <group name='angular-ur'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ur.js</js> </group> <group name='angular-ur-pk'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ur-pk.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_ur-pk.js</js> </group> - <group name='angular-ur'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_ur.js</js> + <group name='angular-vi'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_vi.js</js> </group> <group name='angular-vi-vn'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_vi-vn.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_vi-vn.js</js> </group> - <group name='angular-vi'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_vi.js</js> - </group> - <group name='angular-zh-cn'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_zh-cn.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_zh-cn.js</js> </group> <group name='angular-zh-hans-cn'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_zh-hans-cn.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_zh-hans-cn.js</js> </group> <group name='angular-zh-hk'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_zh-hk.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_zh-hk.js</js> </group> + <group name='angular-zh'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_zh.js</js> + </group> + <group name='angular-zh-tw'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_zh-tw.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_zh-tw.js</js> </group> - <group name='angular-zh'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_zh.js</js> + <group name='angular-zu'> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_zu.js</js> </group> <group name='angular-zu-za'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_zu-za.js</js> + <js>classpath:META-INF/resources/nuiton-js-angular/i18n/angular-locale_zu-za.js</js> </group> - <group name='angular-zu'> - <js>classpath:nuiton-js-angular/i18n/angular-locale_zu.js</js> - </group> - </groups>

1 0

r231 - trunk/src/site/rst
by echatellier＠users.nuiton.org Nov. 16, 2013

Nov. 16, 2013

Author: echatellier Date: 2013-11-16 20:37:08 +0100 (Sat, 16 Nov 2013) New Revision: 231 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/231 Log: Update site documentation Modified: trunk/src/site/rst/index.rst.vm trunk/src/site/rst/packaging.rst.vm Modified: trunk/src/site/rst/index.rst.vm =================================================================== --- trunk/src/site/rst/index.rst.vm 2013-11-14 21:54:31 UTC (rev 230) +++ trunk/src/site/rst/index.rst.vm 2013-11-16 19:37:08 UTC (rev 231) @@ -32,14 +32,14 @@ Nuiton-js is a libraries used to: * package javascript and css libraries as `maven <http://maven.apache.org/>`_ artifacts * aggregate severals libraries into a single file - * minimize and reduce size using wro mechanisms + * minimize and reduce size using `wro4j <https://github.com/alexo/wro4j>`_ mechanisms * simply package new libraries Using Servlet 3 API ------------------- To use nuiton-js in a servlet 3 container, you just have to add following -dependencies in your project pom.xml file:: +dependencies in your project ``pom.xml`` file:: <dependency> <groupId>org.nuiton.js</groupId> @@ -107,7 +107,7 @@ Using wro to manage application own resources ============================================= -You can create a file in W``EB-INF/wro.xml`` to manage your own resources +You can create a file in ``WEB-INF/wro.xml`` to manage your own resources with wro. You can also reference libraries package by nuiton-js. Libraries group name is resources group name. For example, if you use ``nuiton-js-jquery``, group name will be ``jquery``. @@ -177,7 +177,7 @@ <plugin> <groupId>ro.isdc.wro4j</groupId> <artifactId>wro4j-maven-plugin</artifactId> - <version>1.7.0</version> + <version>1.7.2</version> <dependencies> <dependency> @@ -188,7 +188,7 @@ <dependency> <groupId>org.nuiton.js</groupId> <artifactId>nuiton-js-jquery</artifactId> - <version>1.10.1-1</version> + <version>2.0.3-1</version> </dependency> <dependency> <groupId>org.nuiton.js</groupId> Modified: trunk/src/site/rst/packaging.rst.vm =================================================================== --- trunk/src/site/rst/packaging.rst.vm 2013-11-14 21:54:31 UTC (rev 230) +++ trunk/src/site/rst/packaging.rst.vm 2013-11-16 19:37:08 UTC (rev 231) @@ -33,9 +33,9 @@ a few rules: - setup module version using the same packaged resource's version with an additional - packaging number. For example, to package jquery 1.9.1, module version have to be - ``1.9.1-1`` for the first packaging release -- put resources in directory ``src/main/resources/nuiton-js-<resource name>`` + packaging number. For example, to package jquery 1.10.2, module version have to be + ``1.10.2-1`` for the first packaging release +- put resources in directory ``src/main/resources/META-INF/resources/nuiton-js-<resource name>`` - add resource configuration file ``src/main/resources/META-INF/nuiton-js/wro-<resource name>.xml`` - define a group name according to resource name in wro configuration file @@ -51,8 +51,8 @@ <import>classpath:META-INF/nuiton-js/wro-jquery.xml</import> <group name='jquery-ui'> <group-ref>jquery</group-ref> - <js>classpath:nuiton-js-jquery-ui/js/**.js</js> - <css>classpath:nuiton-js-jquery-ui/css/**.css</css> + <js>classpath:META-INF/resource/nuiton-js-jquery-ui/js/**.js</js> + <css>classpath:META-INF/resource/nuiton-js-jquery-ui/css/**.css</css> </group> </groups>

1 0

r230 - in nuiton-js-its/trunk/src: main/webapp test/java/org/nuiton/js/its
by echatellier＠users.nuiton.org Nov. 14, 2013

Nov. 14, 2013

Author: echatellier Date: 2013-11-14 22:54:31 +0100 (Thu, 14 Nov 2013) New Revision: 230 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/230 Log: Add intregration tests for bootstrap, jqueryui, momentjs Added: nuiton-js-its/trunk/src/main/webapp/bootstrap.jsp nuiton-js-its/trunk/src/main/webapp/jqueryui.jsp nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/BootstrapIT.java nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/JqueryUiIT.java Modified: nuiton-js-its/trunk/src/main/webapp/momentjs.jsp nuiton-js-its/trunk/src/main/webapp/underscorejs.jsp nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/UnderscoreJsIT.java Added: nuiton-js-its/trunk/src/main/webapp/bootstrap.jsp =================================================================== --- nuiton-js-its/trunk/src/main/webapp/bootstrap.jsp (rev 0) +++ nuiton-js-its/trunk/src/main/webapp/bootstrap.jsp 2013-11-14 21:54:31 UTC (rev 230) @@ -0,0 +1,41 @@ +<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> +<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>NuitonJS ITS : Bootstrap</title> + <script type="text/javascript" src="<c:url value='/nuiton-js/jquery.js' />"></script> + <script type="text/javascript" src="<c:url value='/nuiton-js/bootstrap.js' />"></script> + <link href="<c:url value='/nuiton-js/bootstrap.css' />" rel="stylesheet" /> + <script type="text/javascript"> + + </script> + </head> + <body> + +  + <a href="#myModal" role="button" class="btn btn-primary btn-large" data-toggle="modal" id="openDialogButton">Launch demo modal</a> + +  + <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="closeDialogButton">×</button> + <h3 id="myModalLabel">Modal header</h3> + </div> + <div class="modal-body"> + + <div class="alert alert-block alert-error fade in"> + <button class="close" data-dismiss="alert" type="button" id="closeAlertButton">×</button> + <h4 class="alert-heading">Oh snap! You got an error!</h4> + <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> + <p> + </div> + </div> + <div class="modal-footer"> + <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> + <button class="btn btn-primary">Save changes</button> + </div> + </div> + </body> +</html> Property changes on: nuiton-js-its/trunk/src/main/webapp/bootstrap.jsp ___________________________________________________________________ Added: svn:keywords + Author Date Id Revision HeadURL Added: svn:eol-style + native Added: nuiton-js-its/trunk/src/main/webapp/jqueryui.jsp =================================================================== --- nuiton-js-its/trunk/src/main/webapp/jqueryui.jsp (rev 0) +++ nuiton-js-its/trunk/src/main/webapp/jqueryui.jsp 2013-11-14 21:54:31 UTC (rev 230) @@ -0,0 +1,21 @@ +<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> +<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>NuitonJS ITS : Jquery UI</title> + <script type="text/javascript" src="<c:url value='/nuiton-js/jquery-ui.js' />"></script> + <script type="text/javascript" src="<c:url value='/nuiton-js/jquery-ui-fr.js' />"></script> + <link href="<c:url value='/nuiton-js/jquery-ui-dark-hive.css' />" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + $('#testDatePicker').datepicker(); + }); + </script> + </head> + <body> + + <input type="text" id="testDatePicker" /> + </body> +</html> Property changes on: nuiton-js-its/trunk/src/main/webapp/jqueryui.jsp ___________________________________________________________________ Added: svn:keywords + Author Date Id Revision HeadURL Added: svn:eol-style + native Modified: nuiton-js-its/trunk/src/main/webapp/momentjs.jsp =================================================================== --- nuiton-js-its/trunk/src/main/webapp/momentjs.jsp 2013-11-14 19:10:19 UTC (rev 229) +++ nuiton-js-its/trunk/src/main/webapp/momentjs.jsp 2013-11-14 21:54:31 UTC (rev 230) @@ -7,7 +7,7 @@ <title>NuitonJS ITS : MomentJs</title> <script type="text/javascript" src="<c:url value='/nuiton-js/moment.js' />"></script> </head> - <body ng-app> + <body> <span id="testSpan"><script type="text/javascript">document.write(moment().startOf('day').fromNow());</script></span> </body> Modified: nuiton-js-its/trunk/src/main/webapp/underscorejs.jsp =================================================================== --- nuiton-js-its/trunk/src/main/webapp/underscorejs.jsp 2013-11-14 19:10:19 UTC (rev 229) +++ nuiton-js-its/trunk/src/main/webapp/underscorejs.jsp 2013-11-14 21:54:31 UTC (rev 230) @@ -7,11 +7,11 @@ <title>NuitonJS ITS : Underscore</title> <script type="text/javascript" src="<c:url value='/nuiton-js/underscore.js' />"></script> </head> - <body ng-app> + <body> <span id="testSpan"><script type="text/javascript"> var sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0); - document.write('sum = ' + sum)); + document.write('sum = ' + sum); </script></span> </body> </html> Added: nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/BootstrapIT.java =================================================================== --- nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/BootstrapIT.java (rev 0) +++ nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/BootstrapIT.java 2013-11-14 21:54:31 UTC (rev 230) @@ -0,0 +1,28 @@ +package org.nuiton.js.its; + +import static org.fest.assertions.Assertions.*; + +import org.junit.Test; + +public class BootstrapIT extends AbstractNuitonJs { + + @Test + public void testBootstrapJs() throws InterruptedException { + goTo("/bootstrap.jsp"); + + // Open modal + $("#openDialogButton").click(); + Thread.sleep(1000); + assertThat($("#closeAlertButton").first().isDisplayed()).isTrue(); + + // close alert + $("#closeAlertButton").click(); + Thread.sleep(1000); + assertThat($("#closeAlertButton").size()).isEqualTo(0); + + // close modal + $("#closeDialogButton").click(); + Thread.sleep(1000); + assertThat($("#closeDialogButton").first().isDisplayed()).isFalse(); + } +} Property changes on: nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/BootstrapIT.java ___________________________________________________________________ Added: svn:keywords + Author Date Id Revision HeadURL Added: svn:eol-style + native Added: nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/JqueryUiIT.java =================================================================== --- nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/JqueryUiIT.java (rev 0) +++ nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/JqueryUiIT.java 2013-11-14 21:54:31 UTC (rev 230) @@ -0,0 +1,21 @@ +package org.nuiton.js.its; + +import static org.fest.assertions.Assertions.assertThat; + +import org.junit.Test; + +public class JqueryUiIT extends AbstractNuitonJs { + + @Test + public void testDatePicker() throws InterruptedException { + goTo("/jqueryui.jsp"); + + $("#testDatePicker").click(); + Thread.sleep(500); // wait for display + // test fr + assertThat($(".ui-datepicker-month").getText()).isEqualTo("Novembre"); + + // test theme #EEEEEE + assertThat($(".ui-state-default").first().getElement().getCssValue("color")).isEqualTo("rgba(238, 238, 238, 1)"); + } +} Property changes on: nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/JqueryUiIT.java ___________________________________________________________________ Added: svn:keywords + Author Date Id Revision HeadURL Added: svn:eol-style + native Modified: nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/UnderscoreJsIT.java =================================================================== --- nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/UnderscoreJsIT.java 2013-11-14 19:10:19 UTC (rev 229) +++ nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/UnderscoreJsIT.java 2013-11-14 21:54:31 UTC (rev 230) @@ -6,7 +6,7 @@ public class UnderscoreJsIT extends AbstractNuitonJs { @Test - public void testBinding() { + public void testSum() { goTo("/underscorejs.jsp"); assertThat($("#testSpan").getText()).isEqualTo("sum = 6"); }

1 0

r229 - in nuiton-js-its/trunk: . src/main/webapp/WEB-INF
by echatellier＠users.nuiton.org Nov. 14, 2013

Nov. 14, 2013

Author: echatellier Date: 2013-11-14 20:10:19 +0100 (Thu, 14 Nov 2013) New Revision: 229 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/229 Log: Fix svn props Modified: nuiton-js-its/trunk/pom.xml nuiton-js-its/trunk/src/main/webapp/WEB-INF/web.xml Property changes on: nuiton-js-its/trunk/pom.xml ___________________________________________________________________ Deleted: svn:mime-type - application/xml Property changes on: nuiton-js-its/trunk/src/main/webapp/WEB-INF/web.xml ___________________________________________________________________ Deleted: svn:mime-type - application/xml

1 0

r228 - nuiton-js-its/trunk
by echatellier＠users.nuiton.org Nov. 13, 2013

Nov. 13, 2013

Author: echatellier Date: 2013-11-14 00:15:54 +0100 (Thu, 14 Nov 2013) New Revision: 228 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/228 Log: svn:ignore Modified: nuiton-js-its/trunk/ Property changes on: nuiton-js-its/trunk ___________________________________________________________________ Added: svn:ignore + .settings .classpath .project

1 0

r227 - in nuiton-js-its/trunk: . src src/main src/main/webapp src/main/webapp/WEB-INF src/test src/test/java src/test/java/org src/test/java/org/nuiton src/test/java/org/nuiton/js src/test/java/org/nuiton/js/its
by echatellier＠users.nuiton.org Nov. 13, 2013

Nov. 13, 2013

Author: echatellier Date: 2013-11-14 00:15:15 +0100 (Thu, 14 Nov 2013) New Revision: 227 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/227 Log: Initial import. Added: nuiton-js-its/trunk/LICENSE.txt nuiton-js-its/trunk/README.txt nuiton-js-its/trunk/pom.xml nuiton-js-its/trunk/src/ nuiton-js-its/trunk/src/main/ nuiton-js-its/trunk/src/main/java/ nuiton-js-its/trunk/src/main/webapp/ nuiton-js-its/trunk/src/main/webapp/WEB-INF/ nuiton-js-its/trunk/src/main/webapp/WEB-INF/web.xml nuiton-js-its/trunk/src/main/webapp/angularjs.jsp nuiton-js-its/trunk/src/main/webapp/index.jsp nuiton-js-its/trunk/src/main/webapp/momentjs.jsp nuiton-js-its/trunk/src/main/webapp/underscorejs.jsp nuiton-js-its/trunk/src/test/ nuiton-js-its/trunk/src/test/java/ nuiton-js-its/trunk/src/test/java/org/ nuiton-js-its/trunk/src/test/java/org/nuiton/ nuiton-js-its/trunk/src/test/java/org/nuiton/js/ nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/ nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/AbstractNuitonJs.java nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/AngularJsIT.java nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/MomentJsIT.java nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/UnderscoreJsIT.java Added: nuiton-js-its/trunk/LICENSE.txt =================================================================== Added: nuiton-js-its/trunk/README.txt =================================================================== Added: nuiton-js-its/trunk/pom.xml =================================================================== (Binary files differ) Property changes on: nuiton-js-its/trunk/pom.xml ___________________________________________________________________ Added: svn:mime-type + application/xml Added: nuiton-js-its/trunk/src/main/webapp/WEB-INF/web.xml =================================================================== (Binary files differ) Property changes on: nuiton-js-its/trunk/src/main/webapp/WEB-INF/web.xml ___________________________________________________________________ Added: svn:mime-type + application/xml Added: nuiton-js-its/trunk/src/main/webapp/angularjs.jsp =================================================================== --- nuiton-js-its/trunk/src/main/webapp/angularjs.jsp (rev 0) +++ nuiton-js-its/trunk/src/main/webapp/angularjs.jsp 2013-11-13 23:15:15 UTC (rev 227) @@ -0,0 +1,19 @@ +<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> +<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>NuitonJS ITS : AngularJs</title> + <script type="text/javascript" src="<c:url value='/nuiton-js/angular.js' />"></script> + </head> + <body ng-app> + + Your name : <input id="nameField" ng-model="name" /> + <hr /> + + <div ng-show="name" class="fade-animation"> + <span id="testSpan">Hello {{name}} !</span> + </div> + </body> +</html> Property changes on: nuiton-js-its/trunk/src/main/webapp/angularjs.jsp ___________________________________________________________________ Added: svn:keywords + Author Date Id Revision HeadURL Added: svn:eol-style + native Added: nuiton-js-its/trunk/src/main/webapp/index.jsp =================================================================== --- nuiton-js-its/trunk/src/main/webapp/index.jsp (rev 0) +++ nuiton-js-its/trunk/src/main/webapp/index.jsp 2013-11-13 23:15:15 UTC (rev 227) @@ -0,0 +1,11 @@ +<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>NuitonJS ITS</title> + </head> + <body> + + </body> +</html> Property changes on: nuiton-js-its/trunk/src/main/webapp/index.jsp ___________________________________________________________________ Added: svn:keywords + Author Date Id Revision HeadURL Added: svn:eol-style + native Added: nuiton-js-its/trunk/src/main/webapp/momentjs.jsp =================================================================== --- nuiton-js-its/trunk/src/main/webapp/momentjs.jsp (rev 0) +++ nuiton-js-its/trunk/src/main/webapp/momentjs.jsp 2013-11-13 23:15:15 UTC (rev 227) @@ -0,0 +1,14 @@ +<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> +<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>NuitonJS ITS : MomentJs</title> + <script type="text/javascript" src="<c:url value='/nuiton-js/moment.js' />"></script> + </head> + <body ng-app> + + <span id="testSpan"><script type="text/javascript">document.write(moment().startOf('day').fromNow());</script></span> + </body> +</html> Property changes on: nuiton-js-its/trunk/src/main/webapp/momentjs.jsp ___________________________________________________________________ Added: svn:keywords + Author Date Id Revision HeadURL Added: svn:eol-style + native Added: nuiton-js-its/trunk/src/main/webapp/underscorejs.jsp =================================================================== --- nuiton-js-its/trunk/src/main/webapp/underscorejs.jsp (rev 0) +++ nuiton-js-its/trunk/src/main/webapp/underscorejs.jsp 2013-11-13 23:15:15 UTC (rev 227) @@ -0,0 +1,17 @@ +<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> +<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>NuitonJS ITS : Underscore</title> + <script type="text/javascript" src="<c:url value='/nuiton-js/underscore.js' />"></script> + </head> + <body ng-app> + + <span id="testSpan"><script type="text/javascript"> + var sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0); + document.write('sum = ' + sum)); + </script></span> + </body> +</html> Property changes on: nuiton-js-its/trunk/src/main/webapp/underscorejs.jsp ___________________________________________________________________ Added: svn:keywords + Author Date Id Revision HeadURL Added: svn:eol-style + native Added: nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/AbstractNuitonJs.java =================================================================== --- nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/AbstractNuitonJs.java (rev 0) +++ nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/AbstractNuitonJs.java 2013-11-13 23:15:15 UTC (rev 227) @@ -0,0 +1,45 @@ +package org.nuiton.js.its; + +import java.io.File; + +import org.apache.commons.logging.Log; +import org.apache.commons.logging.LogFactory; +import org.fluentlenium.adapter.FluentTest; +import org.openqa.selenium.Capabilities; +import org.openqa.selenium.WebDriver; +import org.openqa.selenium.phantomjs.PhantomJSDriver; +import org.openqa.selenium.phantomjs.PhantomJSDriverService; +import org.openqa.selenium.remote.DesiredCapabilities; + +public abstract class AbstractNuitonJs extends FluentTest { + + private static final Log log = LogFactory.getLog(AbstractNuitonJs.class); + + protected AbstractNuitonJs() { + setSnapshotPath("target" + File.separator + "failsafe-reports"); + setSnapshotMode(Mode.TAKE_SNAPSHOT_ON_FAIL); + } + + @Override + public WebDriver getDefaultDriver() { + WebDriver driver = null; + + try { + Capabilities cap = new DesiredCapabilities(); + PhantomJSDriverService service = PhantomJSDriverService.createDefaultService(cap); + driver = new PhantomJSDriver(service, cap); + } catch (IllegalStateException ex) { + if (log.isWarnEnabled()) { + log.warn("Can't find PhantomJS. Using default", ex); + } + driver = super.getDefaultDriver(); + } + + return driver; + } + + @Override + public String getDefaultBaseUrl() { + return "http://localhost:9080"; + } +} Property changes on: nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/AbstractNuitonJs.java ___________________________________________________________________ Added: svn:keywords + Author Date Id Revision HeadURL Added: svn:eol-style + native Added: nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/AngularJsIT.java =================================================================== --- nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/AngularJsIT.java (rev 0) +++ nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/AngularJsIT.java 2013-11-13 23:15:15 UTC (rev 227) @@ -0,0 +1,14 @@ +package org.nuiton.js.its; + +import org.junit.Test; +import static org.fest.assertions.Assertions.assertThat; + +public class AngularJsIT extends AbstractNuitonJs { + + @Test + public void testBinding() { + goTo("/angular.jsp"); + $("#nameField").text("John"); + assertThat($("#testSpan").getText()).isEqualTo("Hello John !"); + } +} Property changes on: nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/AngularJsIT.java ___________________________________________________________________ Added: svn:keywords + Author Date Id Revision HeadURL Added: svn:eol-style + native Added: nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/MomentJsIT.java =================================================================== --- nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/MomentJsIT.java (rev 0) +++ nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/MomentJsIT.java 2013-11-13 23:15:15 UTC (rev 227) @@ -0,0 +1,13 @@ +package org.nuiton.js.its; + +import org.junit.Test; +import static org.fest.assertions.Assertions.assertThat; + +public class MomentJsIT extends AbstractNuitonJs { + + @Test + public void testBinding() { + goTo("/momentjs.jsp"); + assertThat($("#testSpan").getText()).isEqualTo("a day ago"); + } +} Property changes on: nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/MomentJsIT.java ___________________________________________________________________ Added: svn:keywords + Author Date Id Revision HeadURL Added: svn:eol-style + native Added: nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/UnderscoreJsIT.java =================================================================== --- nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/UnderscoreJsIT.java (rev 0) +++ nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/UnderscoreJsIT.java 2013-11-13 23:15:15 UTC (rev 227) @@ -0,0 +1,13 @@ +package org.nuiton.js.its; + +import org.junit.Test; +import static org.fest.assertions.Assertions.assertThat; + +public class UnderscoreJsIT extends AbstractNuitonJs { + + @Test + public void testBinding() { + goTo("/underscorejs.jsp"); + assertThat($("#testSpan").getText()).isEqualTo("sum = 6"); + } +} Property changes on: nuiton-js-its/trunk/src/test/java/org/nuiton/js/its/UnderscoreJsIT.java ___________________________________________________________________ Added: svn:keywords + Author Date Id Revision HeadURL Added: svn:eol-style + native

1 0

r226 - / nuiton-js-its
by echatellier＠users.nuiton.org Nov. 13, 2013

Nov. 13, 2013

Author: echatellier Date: 2013-11-14 00:09:25 +0100 (Thu, 14 Nov 2013) New Revision: 226 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/226 Log: Initial import. Added: nuiton-js-its/ nuiton-js-its/trunk/

1 0

r225 - in sandbox/nuiton-js-angular: . src/main/resources/META-INF/nuiton-js src/main/resources/nuiton-js-angular src/main/resources/nuiton-js-angular/i18n
by echatellier＠users.nuiton.org Nov. 10, 2013

Nov. 10, 2013

Author: echatellier Date: 2013-11-10 12:10:19 +0100 (Sun, 10 Nov 2013) New Revision: 225 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/225 Log: Update to angular 1.2.0 Added: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-animate.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-cookies.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-loader.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-mocks.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-resource.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-route.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-sanitize.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-touch.js Removed: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/ Modified: sandbox/nuiton-js-angular/generate-extra-group.sh sandbox/nuiton-js-angular/pom.xml sandbox/nuiton-js-angular/src/main/resources/META-INF/nuiton-js/wro-angular.xml sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_af-na.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_af-za.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_af.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_am-et.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_am.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-001.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-ae.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-bh.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-dz.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-eg.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-iq.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-jo.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-kw.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-lb.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-ly.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-ma.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-om.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-qa.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-sa.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-sd.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-sy.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-tn.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-ye.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bg-bg.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bg.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bn-bd.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bn-in.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bn.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ca-ad.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ca-es.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ca.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_cs-cz.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_cs.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_da-dk.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_da.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-at.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-be.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-ch.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-de.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-li.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-lu.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_el-cy.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_el-gr.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_el.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-as.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-au.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-bb.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-be.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-bm.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-bw.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-bz.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-ca.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-dsrt-us.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-dsrt.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-fm.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-gb.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-gu.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-gy.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-hk.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-ie.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-in.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-iso.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-jm.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-mh.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-mp.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-mt.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-mu.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-na.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-nz.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-ph.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-pk.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-pr.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-pw.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-sg.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-tc.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-tt.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-um.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-us.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-vg.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-vi.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-za.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-zw.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-419.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ar.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-bo.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-cl.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-co.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-cr.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-do.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ea.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ec.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-es.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-gq.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-gt.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-hn.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ic.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-mx.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ni.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-pa.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-pe.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-pr.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-py.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-sv.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-us.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-uy.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ve.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_et-ee.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_et.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_eu-es.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_eu.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fa-af.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fa-ir.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fa.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fi-fi.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fi.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fil-ph.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fil.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-be.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-bf.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-bi.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-bj.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-bl.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ca.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-cd.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-cf.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-cg.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ch.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ci.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-cm.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-dj.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-fr.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ga.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-gf.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-gn.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-gp.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-gq.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-km.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-lu.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-mc.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-mf.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-mg.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ml.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-mq.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ne.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-re.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-yt.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gl-es.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gl.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gsw-ch.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gsw.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gu-in.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gu.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_he-il.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_he.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hi-in.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hi.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hr-hr.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hr.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hu-hu.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hu.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_id-id.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_id.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_in.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_is-is.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_is.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_it-it.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_it-sm.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_it.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_iw.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ja-jp.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ja.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_kn-in.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_kn.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ko-kr.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ko.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ln-cd.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ln.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_lt-lt.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_lt.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_lv-lv.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_lv.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ml-in.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ml.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_mr-in.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_mr.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ms-my.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ms.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_mt-mt.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_mt.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_nl-cw.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_nl-nl.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_nl-sx.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_nl.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_no.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_or-in.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_or.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pl-pl.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pl.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pt-br.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pt-pt.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pt.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ro-ro.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ro.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ru-ru.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ru.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sk-sk.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sk.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sl-si.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sl.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sq-al.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sq.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sr-cyrl-rs.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sr-latn-rs.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sr.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sv-se.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sv.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sw-tz.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sw.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ta-in.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ta.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_te-in.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_te.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_th-th.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_th.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_tl.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_tr-tr.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_tr.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_uk-ua.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_uk.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ur-pk.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ur.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_vi-vn.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_vi.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh-cn.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh-hans-cn.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh-hk.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh-tw.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zu-za.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zu.js Modified: sandbox/nuiton-js-angular/generate-extra-group.sh =================================================================== --- sandbox/nuiton-js-angular/generate-extra-group.sh 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/generate-extra-group.sh 2013-11-10 11:10:19 UTC (rev 225) @@ -3,8 +3,8 @@ # Permet de genere le code XML necessaire pour la declaration des extras # il faut ensuite mettre ce qui est genere dans le fichier META-INF/nuiton-js/nuiton-js-angular.xml # -for t in src/main/resources/nuiton-js-angular/extra/*.js; do +for t in src/main/resources/nuiton-js-angular/angular-*.js; do f=$(basename $t) n=$(basename $t .js) - echo -e " <group name='$n'>\n <js>classpath:nuiton-js-angular/extra/$f</js>\n </group>\n" + echo -e " <group name='$n'>\n <js>classpath:nuiton-js-angular/$f</js>\n </group>\n" done Modified: sandbox/nuiton-js-angular/pom.xml =================================================================== --- sandbox/nuiton-js-angular/pom.xml 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/pom.xml 2013-11-10 11:10:19 UTC (rev 225) @@ -14,7 +14,7 @@ </parent> <artifactId>nuiton-js-angular</artifactId> - <version>1.2.0-rc3-1</version> + <version>1.2.0-1</version> <name>Nuiton JS :: Angular</name> <description>Angular jar packaging</description> @@ -29,9 +29,9 @@ </licenses> <scm> - <connection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-angular-1.2.0-rc…</connection> - <developerConnection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-angular-1.2.0-rc…</developerConnection> - <url>http://www.nuiton.org/repositories/browse/nuiton-js/tags/nuiton-js-angular-…</url> + <connection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-angular-1.2.0-1</connection> + <developerConnection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-angular-1.2.0-1</developerConnection> + <url>http://www.nuiton.org/repositories/browse/nuiton-js/tags/nuiton-js-angular-…</url> </scm> </project> Modified: sandbox/nuiton-js-angular/src/main/resources/META-INF/nuiton-js/wro-angular.xml =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/META-INF/nuiton-js/wro-angular.xml 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/META-INF/nuiton-js/wro-angular.xml 2013-11-10 11:10:19 UTC (rev 225) @@ -26,36 +26,36 @@ <js>classpath:nuiton-js-angular/angular.js</js> </group> - <group name='angular-animate'> - <js>classpath:nuiton-js-angular/extra/angular-animate.js</js> + <group name='angular-animate'> + <js>classpath:nuiton-js-angular/angular-animate.js</js> </group> <group name='angular-cookies'> - <js>classpath:nuiton-js-angular/extra/angular-cookies.js</js> + <js>classpath:nuiton-js-angular/angular-cookies.js</js> </group> <group name='angular-loader'> - <js>classpath:nuiton-js-angular/extra/angular-loader.js</js> + <js>classpath:nuiton-js-angular/angular-loader.js</js> </group> <group name='angular-mocks'> - <js>classpath:nuiton-js-angular/extra/angular-mocks.js</js> + <js>classpath:nuiton-js-angular/angular-mocks.js</js> </group> <group name='angular-resource'> - <js>classpath:nuiton-js-angular/extra/angular-resource.js</js> + <js>classpath:nuiton-js-angular/angular-resource.js</js> </group> <group name='angular-route'> - <js>classpath:nuiton-js-angular/extra/angular-route.js</js> + <js>classpath:nuiton-js-angular/angular-route.js</js> </group> <group name='angular-sanitize'> - <js>classpath:nuiton-js-angular/extra/angular-sanitize.js</js> + <js>classpath:nuiton-js-angular/angular-sanitize.js</js> </group> <group name='angular-touch'> - <js>classpath:nuiton-js-angular/extra/angular-touch.js</js> + <js>classpath:nuiton-js-angular/angular-touch.js</js> </group> <group name='angular-af-na'> Added: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-animate.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-animate.js (rev 0) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-animate.js 2013-11-10 11:10:19 UTC (rev 225) @@ -0,0 +1,1226 @@ +/** %%Ignore-License + * @license AngularJS v1.2.0 + * (c) 2010-2012 Google, Inc. http://angularjs.org + * License: MIT + */ +(function(window, angular, undefined) {'use strict'; + +/* jshint maxlen: false */ + +/** + * @ngdoc overview + * @name ngAnimate + * @description + * + * # ngAnimate + * + * The `ngAnimate` module provides support for JavaScript, CSS3 transition and CSS3 keyframe animation hooks within existing core and custom directives. + * + * {@installModule animate} + * + * <div doc-module-components="ngAnimate"></div> + * + * # Usage + * + * To see animations in action, all that is required is to define the appropriate CSS classes + * or to register a JavaScript animation via the myModule.animation() function. The directives that support animation automatically are: + * `ngRepeat`, `ngInclude`, `ngIf`, `ngSwitch`, `ngShow`, `ngHide`, `ngView` and `ngClass`. Custom directives can take advantage of animation + * by using the `$animate` service. + * + * Below is a more detailed breakdown of the supported animation events provided by pre-existing ng directives: + * + * | Directive | Supported Animations | + * |---------------------------------------------------------- |----------------------------------------------------| + * | {@link ng.directive:ngRepeat#usage_animations ngRepeat} | enter, leave and move | + * | {@link ngRoute.directive:ngView#usage_animations ngView} | enter and leave | + * | {@link ng.directive:ngInclude#usage_animations ngInclude} | enter and leave | + * | {@link ng.directive:ngSwitch#usage_animations ngSwitch} | enter and leave | + * | {@link ng.directive:ngIf#usage_animations ngIf} | enter and leave | + * | {@link ng.directive:ngClass#usage_animations ngClass} | add and remove | + * | {@link ng.directive:ngShow#usage_animations ngShow & ngHide} | add and remove (the ng-hide class value) | + * + * You can find out more information about animations upon visiting each directive page. + * + * Below is an example of how to apply animations to a directive that supports animation hooks: + * + * <pre> + * <style type="text/css"> + * .slide.ng-enter, .slide.ng-leave { + * -webkit-transition:0.5s linear all; + * transition:0.5s linear all; + * } + * + * .slide.ng-enter { } /* starting animations for enter */ + * .slide.ng-enter-active { } /* terminal animations for enter */ + * .slide.ng-leave { } /* starting animations for leave */ + * .slide.ng-leave-active { } /* terminal animations for leave */ + * </style> + * + *  + * <ANY class="slide" ng-include="..."></ANY> + * </pre> + * + * Keep in mind that if an animation is running, any child elements cannot be animated until the parent element's + * animation has completed. + * + * <h2>CSS-defined Animations</h2> + * The animate service will automatically apply two CSS classes to the animated element and these two CSS classes + * are designed to contain the start and end CSS styling. Both CSS transitions and keyframe animations are supported + * and can be used to play along with this naming structure. + * + * The following code below demonstrates how to perform animations using **CSS transitions** with Angular: + * + * <pre> + * <style type="text/css"> + * /* + * The animate class is apart of the element and the ng-enter class + * is attached to the element once the enter animation event is triggered + * */ + * .reveal-animation.ng-enter { + * -webkit-transition: 1s linear all; /* Safari/Chrome */ + * transition: 1s linear all; /* All other modern browsers and IE10+ */ + * + * /* The animation preparation code */ + * opacity: 0; + * } + * + * /* + * Keep in mind that you want to combine both CSS + * classes together to avoid any CSS-specificity + * conflicts + * */ + * .reveal-animation.ng-enter.ng-enter-active { + * /* The animation code itself */ + * opacity: 1; + * } + * </style> + * + * <div class="view-container"> + * <div ng-view class="reveal-animation"></div> + * </div> + * </pre> + * + * The following code below demonstrates how to perform animations using **CSS animations** with Angular: + * + * <pre> + * <style type="text/css"> + * .reveal-animation.ng-enter { + * -webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */ + * animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */ + * } + * &#64-webkit-keyframes enter_sequence { + * from { opacity:0; } + * to { opacity:1; } + * } + * &#64keyframes enter_sequence { + * from { opacity:0; } + * to { opacity:1; } + * } + * </style> + * + * <div class="view-container"> + * <div ng-view class="reveal-animation"></div> + * </div> + * </pre> + * + * Both CSS3 animations and transitions can be used together and the animate service will figure out the correct duration and delay timing. + * + * Upon DOM mutation, the event class is added first (something like `ng-enter`), then the browser prepares itself to add + * the active class (in this case `ng-enter-active`) which then triggers the animation. The animation module will automatically + * detect the CSS code to determine when the animation ends. Once the animation is over then both CSS classes will be + * removed from the DOM. If a browser does not support CSS transitions or CSS animations then the animation will start and end + * immediately resulting in a DOM element that is at its final state. This final state is when the DOM element + * has no CSS transition/animation classes applied to it. + * + * <h3>CSS Staggering Animations</h3> + * A Staggering animation is a collection of animations that are issued with a slight delay in between each successive operation resulting in a + * curtain-like effect. The ngAnimate module, as of 1.2.0, supports staggering animations and the stagger effect can be + * performed by creating a **ng-EVENT-stagger** CSS class and attaching that class to the base CSS class used for + * the animation. The style property expected within the stagger class can either be a **transition-delay** or an + * **animation-delay** property (or both if your animation contains both transitions and keyframe animations). + * + * <pre> + * .my-animation.ng-enter { + * /* standard transition code */ + * -webkit-transition: 1s linear all; + * transition: 1s linear all; + * opacity:0; + * } + * .my-animation.ng-enter-stagger { + * /* this will have a 100ms delay between each successive leave animation */ + * -webkit-transition-delay: 0.1s; + * transition-delay: 0.1s; + * + * /* in case the stagger doesn't work then these two values + * must be set to 0 to avoid an accidental CSS inheritance */ + * -webkit-transition-duration: 0s; + * transition-duration: 0s; + * } + * .my-animation.ng-enter.ng-enter-active { + * /* standard transition styles */ + * opacity:1; + * } + * </pre> + * + * Staggering animations work by default in ngRepeat (so long as the CSS class is defiend). Outside of ngRepeat, to use staggering animations + * on your own, they can be triggered by firing multiple calls to the same event on $animate. However, the restrictions surrounding this + * are that each of the elements must have the same CSS className value as well as the same parent element. A stagger operation + * will also be reset if more than 10ms has passed after the last animation has been fired. + * + * The following code will issue the **ng-leave-stagger** event on the element provided: + * + * <pre> + * var kids = parent.children(); + * + * $animate.leave(kids[0]); //stagger index=0 + * $animate.leave(kids[1]); //stagger index=1 + * $animate.leave(kids[2]); //stagger index=2 + * $animate.leave(kids[3]); //stagger index=3 + * $animate.leave(kids[4]); //stagger index=4 + * + * $timeout(function() { + * //stagger has reset itself + * $animate.leave(kids[5]); //stagger index=0 + * $animate.leave(kids[6]); //stagger index=1 + * }, 100, false); + * </pre> + * + * Stagger animations are currently only supported within CSS-defined animations. + * + * <h2>JavaScript-defined Animations</h2> + * In the event that you do not want to use CSS3 transitions or CSS3 animations or if you wish to offer animations on browsers that do not + * yet support CSS transitions/animations, then you can make use of JavaScript animations defined inside of your AngularJS module. + * + * <pre> + * //!annotate="YourApp" Your AngularJS Module|Replace this or ngModule with the module that you used to define your application. + * var ngModule = angular.module('YourApp', []); + * ngModule.animation('.my-crazy-animation', function() { + * return { + * enter: function(element, done) { + * //run the animation here and call done when the animation is complete + * return function(cancelled) { + * //this (optional) function will be called when the animation + * //completes or when the animation is cancelled (the cancelled + * //flag will be set to true if cancelled). + * } + * } + * leave: function(element, done) { }, + * move: function(element, done) { }, + * + * //animation that can be triggered before the class is added + * beforeAddClass: function(element, className, done) { }, + * + * //animation that can be triggered after the class is added + * addClass: function(element, className, done) { }, + * + * //animation that can be triggered before the class is removed + * beforeRemoveClass: function(element, className, done) { }, + * + * //animation that can be triggered after the class is removed + * removeClass: function(element, className, done) { } + * } + * }); + * </pre> + * + * JavaScript-defined animations are created with a CSS-like class selector and a collection of events which are set to run + * a javascript callback function. When an animation is triggered, $animate will look for a matching animation which fits + * the element's CSS class attribute value and then run the matching animation event function (if found). + * In other words, if the CSS classes present on the animated element match any of the JavaScript animations then the callback function + * be executed. It should be also noted that only simple, single class selectors are allowed (compound class selectors are not supported). + * + * Within a JavaScript animation, an object containing various event callback animation functions is expected to be returned. + * As explained above, these callbacks are triggered based on the animation event. Therefore if an enter animation is run, + * and the JavaScript animation is found, then the enter callback will handle that animation (in addition to the CSS keyframe animation + * or transition code that is defined via a stylesheet). + * + */ + +angular.module('ngAnimate', ['ng']) + + /** + * @ngdoc object + * @name ngAnimate.$animateProvider + * @description + * + * The `$animateProvider` allows developers to register JavaScript animation event handlers directly inside of a module. + * When an animation is triggered, the $animate service will query the $animate service to find any animations that match + * the provided name value. + * + * Requires the {@link ngAnimate `ngAnimate`} module to be installed. + * + * Please visit the {@link ngAnimate `ngAnimate`} module overview page learn more about how to use animations in your application. + * + */ + .config(['$provide', '$animateProvider', function($provide, $animateProvider) { + var noop = angular.noop; + var forEach = angular.forEach; + var selectors = $animateProvider.$$selectors; + + var ELEMENT_NODE = 1; + var NG_ANIMATE_STATE = '$$ngAnimateState'; + var NG_ANIMATE_CLASS_NAME = 'ng-animate'; + var rootAnimateState = {running: true}; + + $provide.decorator('$animate', ['$delegate', '$injector', '$sniffer', '$rootElement', '$timeout', '$rootScope', '$document', + function($delegate, $injector, $sniffer, $rootElement, $timeout, $rootScope, $document) { + + $rootElement.data(NG_ANIMATE_STATE, rootAnimateState); + + // disable animations during bootstrap, but once we bootstrapped, enable animations + $rootScope.$$postDigest(function() { + rootAnimateState.running = false; + }); + + function lookup(name) { + if (name) { + var matches = [], + flagMap = {}, + classes = name.substr(1).split('.'); + + //the empty string value is the default animation + //operation which performs CSS transition and keyframe + //animations sniffing. This is always included for each + //element animation procedure if the browser supports + //transitions and/or keyframe animations + if ($sniffer.transitions || $sniffer.animations) { + classes.push(''); + } + + for(var i=0; i < classes.length; i++) { + var klass = classes[i], + selectorFactoryName = selectors[klass]; + if(selectorFactoryName && !flagMap[klass]) { + matches.push($injector.get(selectorFactoryName)); + flagMap[klass] = true; + } + } + return matches; + } + } + + /** + * @ngdoc object + * @name ngAnimate.$animate + * @function + * + * @description + * The `$animate` service provides animation detection support while performing DOM operations (enter, leave and move) as well as during addClass and removeClass operations. + * When any of these operations are run, the $animate service + * will examine any JavaScript-defined animations (which are defined by using the $animateProvider provider object) + * as well as any CSS-defined animations against the CSS classes present on the element once the DOM operation is run. + * + * The `$animate` service is used behind the scenes with pre-existing directives and animation with these directives + * will work out of the box without any extra configuration. + * + * Requires the {@link ngAnimate `ngAnimate`} module to be installed. + * + * Please visit the {@link ngAnimate `ngAnimate`} module overview page learn more about how to use animations in your application. + * + */ + return { + /** + * @ngdoc function + * @name ngAnimate.$animate#enter + * @methodOf ngAnimate.$animate + * @function + * + * @description + * Appends the element to the parentElement element that resides in the document and then runs the enter animation. Once + * the animation is started, the following CSS classes will be present on the element for the duration of the animation: + * + * Below is a breakdown of each step that occurs during enter animation: + * + * | Animation Step | What the element class attribute looks like | + * |----------------------------------------------------------------------------------------------|---------------------------------------------| + * | 1. $animate.enter(...) is called | class="my-animation" | + * | 2. element is inserted into the parentElement element or beside the afterElement element | class="my-animation" | + * | 3. $animate runs any JavaScript-defined animations on the element | class="my-animation ng-animate" | + * | 4. the .ng-enter class is added to the element | class="my-animation ng-animate ng-enter" | + * | 5. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-animate ng-enter" | + * | 6. $animate waits for 10ms (this performs a reflow) | class="my-animation ng-animate ng-enter" | + * | 7. the .ng-enter-active and .ng-animate-active classes are added (this triggers the CSS transition/animation) | class="my-animation ng-animate ng-animate-active ng-enter ng-enter-active" | + * | 8. $animate waits for X milliseconds for the animation to complete | class="my-animation ng-animate ng-animate-active ng-enter ng-enter-active" | + * | 9. The animation ends and all generated CSS classes are removed from the element | class="my-animation" | + * | 10. The doneCallback() callback is fired (if provided) | class="my-animation" | + * + * @param {jQuery/jqLite element} element the element that will be the focus of the enter animation + * @param {jQuery/jqLite element} parentElement the parent element of the element that will be the focus of the enter animation + * @param {jQuery/jqLite element} afterElement the sibling element (which is the previous element) of the element that will be the focus of the enter animation + * @param {function()=} doneCallback the callback function that will be called once the animation is complete + */ + enter : function(element, parentElement, afterElement, doneCallback) { + this.enabled(false, element); + $delegate.enter(element, parentElement, afterElement); + $rootScope.$$postDigest(function() { + performAnimation('enter', 'ng-enter', element, parentElement, afterElement, noop, doneCallback); + }); + }, + + /** + * @ngdoc function + * @name ngAnimate.$animate#leave + * @methodOf ngAnimate.$animate + * @function + * + * @description + * Runs the leave animation operation and, upon completion, removes the element from the DOM. Once + * the animation is started, the following CSS classes will be added for the duration of the animation: + * + * Below is a breakdown of each step that occurs during enter animation: + * + * | Animation Step | What the element class attribute looks like | + * |----------------------------------------------------------------------------------------------|---------------------------------------------| + * | 1. $animate.leave(...) is called | class="my-animation" | + * | 2. $animate runs any JavaScript-defined animations on the element | class="my-animation ng-animate" | + * | 3. the .ng-leave class is added to the element | class="my-animation ng-animate ng-leave" | + * | 4. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-animate ng-leave" | + * | 5. $animate waits for 10ms (this performs a reflow) | class="my-animation ng-animate ng-leave" | + * | 6. the .ng-leave-active and .ng-animate-active classes is added (this triggers the CSS transition/animation) | class="my-animation ng-animate ng-animate-active ng-leave ng-leave-active" | + * | 7. $animate waits for X milliseconds for the animation to complete | class="my-animation ng-animate ng-animate-active ng-leave ng-leave-active" | + * | 8. The animation ends and all generated CSS classes are removed from the element | class="my-animation" | + * | 9. The element is removed from the DOM | ... | + * | 10. The doneCallback() callback is fired (if provided) | ... | + * + * @param {jQuery/jqLite element} element the element that will be the focus of the leave animation + * @param {function()=} doneCallback the callback function that will be called once the animation is complete + */ + leave : function(element, doneCallback) { + cancelChildAnimations(element); + this.enabled(false, element); + $rootScope.$$postDigest(function() { + performAnimation('leave', 'ng-leave', element, null, null, function() { + $delegate.leave(element); + }, doneCallback); + }); + }, + + /** + * @ngdoc function + * @name ngAnimate.$animate#move + * @methodOf ngAnimate.$animate + * @function + * + * @description + * Fires the move DOM operation. Just before the animation starts, the animate service will either append it into the parentElement container or + * add the element directly after the afterElement element if present. Then the move animation will be run. Once + * the animation is started, the following CSS classes will be added for the duration of the animation: + * + * Below is a breakdown of each step that occurs during move animation: + * + * | Animation Step | What the element class attribute looks like | + * |----------------------------------------------------------------------------------------------|---------------------------------------------| + * | 1. $animate.move(...) is called | class="my-animation" | + * | 2. element is moved into the parentElement element or beside the afterElement element | class="my-animation" | + * | 3. $animate runs any JavaScript-defined animations on the element | class="my-animation ng-animate" | + * | 4. the .ng-move class is added to the element | class="my-animation ng-animate ng-move" | + * | 5. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-animate ng-move" | + * | 6. $animate waits for 10ms (this performs a reflow) | class="my-animation ng-animate ng-move" | + * | 7. the .ng-move-active and .ng-animate-active classes is added (this triggers the CSS transition/animation) | class="my-animation ng-animate ng-animate-active ng-move ng-move-active" | + * | 8. $animate waits for X milliseconds for the animation to complete | class="my-animation ng-animate ng-animate-active ng-move ng-move-active" | + * | 9. The animation ends and all generated CSS classes are removed from the element | class="my-animation" | + * | 10. The doneCallback() callback is fired (if provided) | class="my-animation" | + * + * @param {jQuery/jqLite element} element the element that will be the focus of the move animation + * @param {jQuery/jqLite element} parentElement the parentElement element of the element that will be the focus of the move animation + * @param {jQuery/jqLite element} afterElement the sibling element (which is the previous element) of the element that will be the focus of the move animation + * @param {function()=} doneCallback the callback function that will be called once the animation is complete + */ + move : function(element, parentElement, afterElement, doneCallback) { + cancelChildAnimations(element); + this.enabled(false, element); + $delegate.move(element, parentElement, afterElement); + $rootScope.$$postDigest(function() { + performAnimation('move', 'ng-move', element, parentElement, afterElement, noop, doneCallback); + }); + }, + + /** + * @ngdoc function + * @name ngAnimate.$animate#addClass + * @methodOf ngAnimate.$animate + * + * @description + * Triggers a custom animation event based off the className variable and then attaches the className value to the element as a CSS class. + * Unlike the other animation methods, the animate service will suffix the className value with {@type -add} in order to provide + * the animate service the setup and active CSS classes in order to trigger the animation (this will be skipped if no CSS transitions + * or keyframes are defined on the -add or base CSS class). + * + * Below is a breakdown of each step that occurs during addClass animation: + * + * | Animation Step | What the element class attribute looks like | + * |------------------------------------------------------------------------------------------------|---------------------------------------------| + * | 1. $animate.addClass(element, 'super') is called | class="my-animation" | + * | 2. $animate runs any JavaScript-defined animations on the element | class="my-animation ng-animate" | + * | 3. the .super-add class are added to the element | class="my-animation ng-animate super-add" | + * | 4. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-animate super-add" | + * | 5. $animate waits for 10ms (this performs a reflow) | class="my-animation ng-animate super-add" | + * | 6. the .super, .super-add-active and .ng-animate-active classes are added (this triggers the CSS transition/animation) | class="my-animation ng-animate ng-animate-active super super-add super-add-active" | + * | 7. $animate waits for X milliseconds for the animation to complete | class="my-animation super-add super-add-active" | + * | 8. The animation ends and all generated CSS classes are removed from the element | class="my-animation super" | + * | 9. The super class is kept on the element | class="my-animation super" | + * | 10. The doneCallback() callback is fired (if provided) | class="my-animation super" | + * + * @param {jQuery/jqLite element} element the element that will be animated + * @param {string} className the CSS class that will be added to the element and then animated + * @param {function()=} doneCallback the callback function that will be called once the animation is complete + */ + addClass : function(element, className, doneCallback) { + performAnimation('addClass', className, element, null, null, function() { + $delegate.addClass(element, className); + }, doneCallback); + }, + + /** + * @ngdoc function + * @name ngAnimate.$animate#removeClass + * @methodOf ngAnimate.$animate + * + * @description + * Triggers a custom animation event based off the className variable and then removes the CSS class provided by the className value + * from the element. Unlike the other animation methods, the animate service will suffix the className value with {@type -remove} in + * order to provide the animate service the setup and active CSS classes in order to trigger the animation (this will be skipped if + * no CSS transitions or keyframes are defined on the -remove or base CSS classes). + * + * Below is a breakdown of each step that occurs during removeClass animation: + * + * | Animation Step | What the element class attribute looks like | + * |-----------------------------------------------------------------------------------------------|---------------------------------------------| + * | 1. $animate.removeClass(element, 'super') is called | class="my-animation super" | + * | 2. $animate runs any JavaScript-defined animations on the element | class="my-animation super ng-animate" | + * | 3. the .super-remove class are added to the element | class="my-animation super ng-animate super-remove"| + * | 4. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation super ng-animate super-remove" | + * | 5. $animate waits for 10ms (this performs a reflow) | class="my-animation super ng-animate super-remove" | + * | 6. the .super-remove-active and .ng-animate-active classes are added and .super is removed (this triggers the CSS transition/animation) | class="my-animation ng-animate ng-animate-active super-remove super-remove-active" | + * | 7. $animate waits for X milliseconds for the animation to complete | class="my-animation ng-animate ng-animate-active super-remove super-remove-active" | + * | 8. The animation ends and all generated CSS classes are removed from the element | class="my-animation" | + * | 9. The doneCallback() callback is fired (if provided) | class="my-animation" | + * + * + * @param {jQuery/jqLite element} element the element that will be animated + * @param {string} className the CSS class that will be animated and then removed from the element + * @param {function()=} doneCallback the callback function that will be called once the animation is complete + */ + removeClass : function(element, className, doneCallback) { + performAnimation('removeClass', className, element, null, null, function() { + $delegate.removeClass(element, className); + }, doneCallback); + }, + + /** + * @ngdoc function + * @name ngAnimate.$animate#enabled + * @methodOf ngAnimate.$animate + * @function + * + * @param {boolean=} value If provided then set the animation on or off. + * @return {boolean} Current animation state. + * + * @description + * Globally enables/disables animations. + * + */ + enabled : function(value, element) { + switch(arguments.length) { + case 2: + if(value) { + cleanup(element); + } else { + var data = element.data(NG_ANIMATE_STATE) || {}; + data.disabled = true; + element.data(NG_ANIMATE_STATE, data); + } + break; + + case 1: + rootAnimateState.disabled = !value; + break; + + default: + value = !rootAnimateState.disabled; + break; + } + return !!value; + } + }; + + /* + all animations call this shared animation triggering function internally. + The animationEvent variable refers to the JavaScript animation event that will be triggered + and the className value is the name of the animation that will be applied within the + CSS code. Element, parentElement and afterElement are provided DOM elements for the animation + and the onComplete callback will be fired once the animation is fully complete. + */ + function performAnimation(animationEvent, className, element, parentElement, afterElement, domOperation, doneCallback) { + var classes = (element.attr('class') || '') + ' ' + className; + var animationLookup = (' ' + classes).replace(/\s+/g,'.'); + if (!parentElement) { + parentElement = afterElement ? afterElement.parent() : element.parent(); + } + + var matches = lookup(animationLookup); + var isClassBased = animationEvent == 'addClass' || animationEvent == 'removeClass'; + var ngAnimateState = element.data(NG_ANIMATE_STATE) || {}; + + //skip the animation if animations are disabled, a parent is already being animated, + //the element is not currently attached to the document body or then completely close + //the animation if any matching animations are not found at all. + //NOTE: IE8 + IE9 should close properly (run closeAnimation()) in case a NO animation is not found. + if (animationsDisabled(element, parentElement) || matches.length === 0) { + domOperation(); + closeAnimation(); + return; + } + + var animations = []; + //only add animations if the currently running animation is not structural + //or if there is no animation running at all + if(!ngAnimateState.running || !(isClassBased && ngAnimateState.structural)) { + forEach(matches, function(animation) { + //add the animation to the queue to if it is allowed to be cancelled + if(!animation.allowCancel || animation.allowCancel(element, animationEvent, className)) { + var beforeFn, afterFn = animation[animationEvent]; + + //Special case for a leave animation since there is no point in performing an + //animation on a element node that has already been removed from the DOM + if(animationEvent == 'leave') { + beforeFn = afterFn; + afterFn = null; //this must be falsy so that the animation is skipped for leave + } else { + beforeFn = animation['before' + animationEvent.charAt(0).toUpperCase() + animationEvent.substr(1)]; + } + animations.push({ + before : beforeFn, + after : afterFn + }); + } + }); + } + + //this would mean that an animation was not allowed so let the existing + //animation do it's thing and close this one early + if(animations.length === 0) { + domOperation(); + fireDoneCallbackAsync(); + return; + } + + if(ngAnimateState.running) { + //if an animation is currently running on the element then lets take the steps + //to cancel that animation and fire any required callbacks + $timeout.cancel(ngAnimateState.closeAnimationTimeout); + cleanup(element); + cancelAnimations(ngAnimateState.animations); + (ngAnimateState.done || noop)(true); + } + + //There is no point in perform a class-based animation if the element already contains + //(on addClass) or doesn't contain (on removeClass) the className being animated. + //The reason why this is being called after the previous animations are cancelled + //is so that the CSS classes present on the element can be properly examined. + if((animationEvent == 'addClass' && element.hasClass(className)) || + (animationEvent == 'removeClass' && !element.hasClass(className))) { + domOperation(); + fireDoneCallbackAsync(); + return; + } + + //the ng-animate class does nothing, but it's here to allow for + //parent animations to find and cancel child animations when needed + element.addClass(NG_ANIMATE_CLASS_NAME); + + element.data(NG_ANIMATE_STATE, { + running:true, + structural:!isClassBased, + animations:animations, + done:onBeforeAnimationsComplete + }); + + //first we run the before animations and when all of those are complete + //then we perform the DOM operation and run the next set of animations + invokeRegisteredAnimationFns(animations, 'before', onBeforeAnimationsComplete); + + function onBeforeAnimationsComplete(cancelled) { + domOperation(); + if(cancelled === true) { + closeAnimation(); + return; + } + + //set the done function to the final done function + //so that the DOM event won't be executed twice by accident + //if the after animation is cancelled as well + var data = element.data(NG_ANIMATE_STATE); + if(data) { + data.done = closeAnimation; + element.data(NG_ANIMATE_STATE, data); + } + invokeRegisteredAnimationFns(animations, 'after', closeAnimation); + } + + function invokeRegisteredAnimationFns(animations, phase, allAnimationFnsComplete) { + var endFnName = phase + 'End'; + forEach(animations, function(animation, index) { + var animationPhaseCompleted = function() { + progress(index, phase); + }; + + //there are no before functions for enter + move since the DOM + //operations happen before the performAnimation method fires + if(phase == 'before' && (animationEvent == 'enter' || animationEvent == 'move')) { + animationPhaseCompleted(); + return; + } + + if(animation[phase]) { + animation[endFnName] = isClassBased ? + animation[phase](element, className, animationPhaseCompleted) : + animation[phase](element, animationPhaseCompleted); + } else { + animationPhaseCompleted(); + } + }); + + function progress(index, phase) { + var phaseCompletionFlag = phase + 'Complete'; + var currentAnimation = animations[index]; + currentAnimation[phaseCompletionFlag] = true; + (currentAnimation[endFnName] || noop)(); + + for(var i=0;i<animations.length;i++) { + if(!animations[i][phaseCompletionFlag]) return; + } + + allAnimationFnsComplete(); + } + } + + function fireDoneCallbackAsync() { + doneCallback && $timeout(doneCallback, 0, false); + } + + function closeAnimation() { + if(!closeAnimation.hasBeenRun) { + closeAnimation.hasBeenRun = true; + var data = element.data(NG_ANIMATE_STATE); + if(data) { + /* only structural animations wait for reflow before removing an + animation, but class-based animations don't. An example of this + failing would be when a parent HTML tag has a ng-class attribute + causing ALL directives below to skip animations during the digest */ + if(isClassBased) { + cleanup(element); + } else { + data.closeAnimationTimeout = $timeout(function() { + cleanup(element); + }, 0, false); + element.data(NG_ANIMATE_STATE, data); + } + } + fireDoneCallbackAsync(); + } + } + } + + function cancelChildAnimations(element) { + var node = element[0]; + if(node.nodeType != ELEMENT_NODE) { + return; + } + + forEach(node.querySelectorAll('.' + NG_ANIMATE_CLASS_NAME), function(element) { + element = angular.element(element); + var data = element.data(NG_ANIMATE_STATE); + if(data) { + cancelAnimations(data.animations); + cleanup(element); + } + }); + } + + function cancelAnimations(animations) { + var isCancelledFlag = true; + forEach(animations, function(animation) { + if(!animations['beforeComplete']) { + (animation.beforeEnd || noop)(isCancelledFlag); + } + if(!animations['afterComplete']) { + (animation.afterEnd || noop)(isCancelledFlag); + } + }); + } + + function cleanup(element) { + if(element[0] == $rootElement[0]) { + if(!rootAnimateState.disabled) { + rootAnimateState.running = false; + rootAnimateState.structural = false; + } + } else { + element.removeClass(NG_ANIMATE_CLASS_NAME); + element.removeData(NG_ANIMATE_STATE); + } + } + + function animationsDisabled(element, parentElement) { + if (rootAnimateState.disabled) return true; + + if(element[0] == $rootElement[0]) { + return rootAnimateState.disabled || rootAnimateState.running; + } + + do { + //the element did not reach the root element which means that it + //is not apart of the DOM. Therefore there is no reason to do + //any animations on it + if(parentElement.length === 0) break; + + var isRoot = parentElement[0] == $rootElement[0]; + var state = isRoot ? rootAnimateState : parentElement.data(NG_ANIMATE_STATE); + var result = state && (!!state.disabled || !!state.running); + if(isRoot || result) { + return result; + } + + if(isRoot) return true; + } + while(parentElement = parentElement.parent()); + + return true; + } + }]); + + $animateProvider.register('', ['$window', '$sniffer', '$timeout', function($window, $sniffer, $timeout) { + // Detect proper transitionend/animationend event names. + var CSS_PREFIX = '', TRANSITION_PROP, TRANSITIONEND_EVENT, ANIMATION_PROP, ANIMATIONEND_EVENT; + + // If unprefixed events are not supported but webkit-prefixed are, use the latter. + // Otherwise, just use W3C names, browsers not supporting them at all will just ignore them. + // Note: Chrome implements `window.onwebkitanimationend` and doesn't implement `window.onanimationend` + // but at the same time dispatches the `animationend` event and not `webkitAnimationEnd`. + // Register both events in case `window.onanimationend` is not supported because of that, + // do the same for `transitionend` as Safari is likely to exhibit similar behavior. + // Also, the only modern browser that uses vendor prefixes for transitions/keyframes is webkit + // therefore there is no reason to test anymore for other vendor prefixes: http://caniuse.com/#search=transition + if (window.ontransitionend === undefined && window.onwebkittransitionend !== undefined) { + CSS_PREFIX = '-webkit-'; + TRANSITION_PROP = 'WebkitTransition'; + TRANSITIONEND_EVENT = 'webkitTransitionEnd transitionend'; + } else { + TRANSITION_PROP = 'transition'; + TRANSITIONEND_EVENT = 'transitionend'; + } + + if (window.onanimationend === undefined && window.onwebkitanimationend !== undefined) { + CSS_PREFIX = '-webkit-'; + ANIMATION_PROP = 'WebkitAnimation'; + ANIMATIONEND_EVENT = 'webkitAnimationEnd animationend'; + } else { + ANIMATION_PROP = 'animation'; + ANIMATIONEND_EVENT = 'animationend'; + } + + var DURATION_KEY = 'Duration'; + var PROPERTY_KEY = 'Property'; + var DELAY_KEY = 'Delay'; + var ANIMATION_ITERATION_COUNT_KEY = 'IterationCount'; + var NG_ANIMATE_PARENT_KEY = '$$ngAnimateKey'; + var NG_ANIMATE_CSS_DATA_KEY = '$$ngAnimateCSS3Data'; + var NG_ANIMATE_FALLBACK_CLASS_NAME = 'ng-animate-start'; + var NG_ANIMATE_FALLBACK_ACTIVE_CLASS_NAME = 'ng-animate-active'; + + var lookupCache = {}; + var parentCounter = 0; + + var animationReflowQueue = [], animationTimer, timeOut = false; + function afterReflow(callback) { + animationReflowQueue.push(callback); + $timeout.cancel(animationTimer); + animationTimer = $timeout(function() { + forEach(animationReflowQueue, function(fn) { + fn(); + }); + animationReflowQueue = []; + animationTimer = null; + lookupCache = {}; + }, 10, false); + } + + function applyStyle(node, style) { + var oldStyle = node.getAttribute('style') || ''; + var newStyle = (oldStyle.length > 0 ? '; ' : '') + style; + node.setAttribute('style', newStyle); + return oldStyle; + } + + function getElementAnimationDetails(element, cacheKey) { + var data = cacheKey ? lookupCache[cacheKey] : null; + if(!data) { + var transitionDuration = 0; + var transitionDelay = 0; + var animationDuration = 0; + var animationDelay = 0; + var transitionDelayStyle; + var animationDelayStyle; + var transitionDurationStyle; + var transitionPropertyStyle; + + //we want all the styles defined before and after + forEach(element, function(element) { + if (element.nodeType == ELEMENT_NODE) { + var elementStyles = $window.getComputedStyle(element) || {}; + + transitionDurationStyle = elementStyles[TRANSITION_PROP + DURATION_KEY]; + + transitionDuration = Math.max(parseMaxTime(transitionDurationStyle), transitionDuration); + + transitionPropertyStyle = elementStyles[TRANSITION_PROP + PROPERTY_KEY]; + + transitionDelayStyle = elementStyles[TRANSITION_PROP + DELAY_KEY]; + + transitionDelay = Math.max(parseMaxTime(transitionDelayStyle), transitionDelay); + + animationDelayStyle = elementStyles[ANIMATION_PROP + DELAY_KEY]; + + animationDelay = Math.max(parseMaxTime(animationDelayStyle), animationDelay); + + var aDuration = parseMaxTime(elementStyles[ANIMATION_PROP + DURATION_KEY]); + + if(aDuration > 0) { + aDuration *= parseInt(elementStyles[ANIMATION_PROP + ANIMATION_ITERATION_COUNT_KEY], 10) || 1; + } + + animationDuration = Math.max(aDuration, animationDuration); + } + }); + data = { + total : 0, + transitionPropertyStyle: transitionPropertyStyle, + transitionDurationStyle: transitionDurationStyle, + transitionDelayStyle: transitionDelayStyle, + transitionDelay: transitionDelay, + transitionDuration: transitionDuration, + animationDelayStyle: animationDelayStyle, + animationDelay: animationDelay, + animationDuration: animationDuration + }; + if(cacheKey) { + lookupCache[cacheKey] = data; + } + } + return data; + } + + function parseMaxTime(str) { + var maxValue = 0; + var values = angular.isString(str) ? + str.split(/\s*,\s*/) : + []; + forEach(values, function(value) { + maxValue = Math.max(parseFloat(value) || 0, maxValue); + }); + return maxValue; + } + + function getCacheKey(element) { + var parentElement = element.parent(); + var parentID = parentElement.data(NG_ANIMATE_PARENT_KEY); + if(!parentID) { + parentElement.data(NG_ANIMATE_PARENT_KEY, ++parentCounter); + parentID = parentCounter; + } + return parentID + '-' + element[0].className; + } + + function animateSetup(element, className) { + var cacheKey = getCacheKey(element); + var eventCacheKey = cacheKey + ' ' + className; + var stagger = {}; + var ii = lookupCache[eventCacheKey] ? ++lookupCache[eventCacheKey].total : 0; + + if(ii > 0) { + var staggerClassName = className + '-stagger'; + var staggerCacheKey = cacheKey + ' ' + staggerClassName; + var applyClasses = !lookupCache[staggerCacheKey]; + + applyClasses && element.addClass(staggerClassName); + + stagger = getElementAnimationDetails(element, staggerCacheKey); + + applyClasses && element.removeClass(staggerClassName); + } + + element.addClass(className); + + var timings = getElementAnimationDetails(element, eventCacheKey); + + /* there is no point in performing a reflow if the animation + timeout is empty (this would cause a flicker bug normally + in the page. There is also no point in performing an animation + that only has a delay and no duration */ + var maxDuration = Math.max(timings.transitionDuration, timings.animationDuration); + if(maxDuration === 0) { + element.removeClass(className); + return false; + } + + var node = element[0]; + //temporarily disable the transition so that the enter styles + //don't animate twice (this is here to avoid a bug in Chrome/FF). + var activeClassName = ''; + if(timings.transitionDuration > 0) { + element.addClass(NG_ANIMATE_FALLBACK_CLASS_NAME); + activeClassName += NG_ANIMATE_FALLBACK_ACTIVE_CLASS_NAME + ' '; + node.style[TRANSITION_PROP + PROPERTY_KEY] = 'none'; + } + + forEach(className.split(' '), function(klass, i) { + activeClassName += (i > 0 ? ' ' : '') + klass + '-active'; + }); + + element.data(NG_ANIMATE_CSS_DATA_KEY, { + className : className, + activeClassName : activeClassName, + maxDuration : maxDuration, + classes : className + ' ' + activeClassName, + timings : timings, + stagger : stagger, + ii : ii + }); + + return true; + } + + function animateRun(element, className, activeAnimationComplete) { + var data = element.data(NG_ANIMATE_CSS_DATA_KEY); + if(!element.hasClass(className) || !data) { + activeAnimationComplete(); + return; + } + + var node = element[0]; + var timings = data.timings; + var stagger = data.stagger; + var maxDuration = data.maxDuration; + var activeClassName = data.activeClassName; + var maxDelayTime = Math.max(timings.transitionDelay, timings.animationDelay) * 1000; + var startTime = Date.now(); + var css3AnimationEvents = ANIMATIONEND_EVENT + ' ' + TRANSITIONEND_EVENT; + var formerStyle; + var ii = data.ii; + + var applyFallbackStyle, style = ''; + if(timings.transitionDuration > 0) { + node.style[TRANSITION_PROP + PROPERTY_KEY] = ''; + + var propertyStyle = timings.transitionPropertyStyle; + if(propertyStyle.indexOf('all') == -1) { + applyFallbackStyle = true; + var fallbackProperty = $sniffer.msie ? '-ms-zoom' : 'clip'; + style += CSS_PREFIX + 'transition-property: ' + propertyStyle + ', ' + fallbackProperty + '; '; + style += CSS_PREFIX + 'transition-duration: ' + timings.transitionDurationStyle + ', ' + timings.transitionDuration + 's; '; + } + } + + if(ii > 0) { + if(stagger.transitionDelay > 0 && stagger.transitionDuration === 0) { + var delayStyle = timings.transitionDelayStyle; + if(applyFallbackStyle) { + delayStyle += ', ' + timings.transitionDelay + 's'; + } + + style += CSS_PREFIX + 'transition-delay: ' + + prepareStaggerDelay(delayStyle, stagger.transitionDelay, ii) + '; '; + } + + if(stagger.animationDelay > 0 && stagger.animationDuration === 0) { + style += CSS_PREFIX + 'animation-delay: ' + + prepareStaggerDelay(timings.animationDelayStyle, stagger.animationDelay, ii) + '; '; + } + } + + if(style.length > 0) { + formerStyle = applyStyle(node, style); + } + + element.on(css3AnimationEvents, onAnimationProgress); + element.addClass(activeClassName); + + // This will automatically be called by $animate so + // there is no need to attach this internally to the + // timeout done method. + return function onEnd(cancelled) { + element.off(css3AnimationEvents, onAnimationProgress); + element.removeClass(activeClassName); + animateClose(element, className); + if(formerStyle != null) { + formerStyle.length > 0 ? + node.setAttribute('style', formerStyle) : + node.removeAttribute('style'); + } + }; + + function onAnimationProgress(event) { + event.stopPropagation(); + var ev = event.originalEvent || event; + var timeStamp = ev.$manualTimeStamp || ev.timeStamp || Date.now(); + /* $manualTimeStamp is a mocked timeStamp value which is set + * within browserTrigger(). This is only here so that tests can + * mock animations properly. Real events fallback to event.timeStamp, + * or, if they don't, then a timeStamp is automatically created for them. + * We're checking to see if the timeStamp surpasses the expected delay, + * but we're using elapsedTime instead of the timeStamp on the 2nd + * pre-condition since animations sometimes close off early */ + if(Math.max(timeStamp - startTime, 0) >= maxDelayTime && ev.elapsedTime >= maxDuration) { + activeAnimationComplete(); + } + } + } + + function prepareStaggerDelay(delayStyle, staggerDelay, index) { + var style = ''; + forEach(delayStyle.split(','), function(val, i) { + style += (i > 0 ? ',' : '') + + (index * staggerDelay + parseInt(val, 10)) + 's'; + }); + return style; + } + + function animateBefore(element, className) { + if(animateSetup(element, className)) { + return function(cancelled) { + cancelled && animateClose(element, className); + }; + } + } + + function animateAfter(element, className, afterAnimationComplete) { + if(element.data(NG_ANIMATE_CSS_DATA_KEY)) { + return animateRun(element, className, afterAnimationComplete); + } else { + animateClose(element, className); + afterAnimationComplete(); + } + } + + function animate(element, className, animationComplete) { + //If the animateSetup function doesn't bother returning a + //cancellation function then it means that there is no animation + //to perform at all + var preReflowCancellation = animateBefore(element, className); + if(!preReflowCancellation) { + animationComplete(); + return; + } + + //There are two cancellation functions: one is before the first + //reflow animation and the second is during the active state + //animation. The first function will take care of removing the + //data from the element which will not make the 2nd animation + //happen in the first place + var cancel = preReflowCancellation; + afterReflow(function() { + //once the reflow is complete then we point cancel to + //the new cancellation function which will remove all of the + //animation properties from the active animation + cancel = animateAfter(element, className, animationComplete); + }); + + return function(cancelled) { + (cancel || noop)(cancelled); + }; + } + + function animateClose(element, className) { + element.removeClass(className); + element.removeClass(NG_ANIMATE_FALLBACK_CLASS_NAME); + element.removeData(NG_ANIMATE_CSS_DATA_KEY); + } + + return { + allowCancel : function(element, animationEvent, className) { + //always cancel the current animation if it is a + //structural animation + var oldClasses = (element.data(NG_ANIMATE_CSS_DATA_KEY) || {}).classes; + if(!oldClasses || ['enter','leave','move'].indexOf(animationEvent) >= 0) { + return true; + } + + var parentElement = element.parent(); + var clone = angular.element(element[0].cloneNode()); + + //make the element super hidden and override any CSS style values + clone.attr('style','position:absolute; top:-9999px; left:-9999px'); + clone.removeAttr('id'); + clone.html(''); + + forEach(oldClasses.split(' '), function(klass) { + clone.removeClass(klass); + }); + + var suffix = animationEvent == 'addClass' ? '-add' : '-remove'; + clone.addClass(suffixClasses(className, suffix)); + parentElement.append(clone); + + var timings = getElementAnimationDetails(clone); + clone.remove(); + + return Math.max(timings.transitionDuration, timings.animationDuration) > 0; + }, + + enter : function(element, animationCompleted) { + return animate(element, 'ng-enter', animationCompleted); + }, + + leave : function(element, animationCompleted) { + return animate(element, 'ng-leave', animationCompleted); + }, + + move : function(element, animationCompleted) { + return animate(element, 'ng-move', animationCompleted); + }, + + beforeAddClass : function(element, className, animationCompleted) { + var cancellationMethod = animateBefore(element, suffixClasses(className, '-add')); + if(cancellationMethod) { + afterReflow(animationCompleted); + return cancellationMethod; + } + animationCompleted(); + }, + + addClass : function(element, className, animationCompleted) { + return animateAfter(element, suffixClasses(className, '-add'), animationCompleted); + }, + + beforeRemoveClass : function(element, className, animationCompleted) { + var cancellationMethod = animateBefore(element, suffixClasses(className, '-remove')); + if(cancellationMethod) { + afterReflow(animationCompleted); + return cancellationMethod; + } + animationCompleted(); + }, + + removeClass : function(element, className, animationCompleted) { + return animateAfter(element, suffixClasses(className, '-remove'), animationCompleted); + } + }; + + function suffixClasses(classes, suffix) { + var className = ''; + classes = angular.isArray(classes) ? classes : classes.split(/\s+/); + forEach(classes, function(klass, i) { + if(klass && klass.length > 0) { + className += (i > 0 ? ' ' : '') + klass + suffix; + } + }); + return className; + } + }]); + }]); + + +})(window, window.angular); Added: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-cookies.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-cookies.js (rev 0) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-cookies.js 2013-11-10 11:10:19 UTC (rev 225) @@ -0,0 +1,202 @@ +/** %%Ignore-License + * @license AngularJS v1.2.0 + * (c) 2010-2012 Google, Inc. http://angularjs.org + * License: MIT + */ +(function(window, angular, undefined) {'use strict'; + +/** + * @ngdoc overview + * @name ngCookies + * @description + * + * # ngCookies + * + * The `ngCookies` module provides a convenient wrapper for reading and writing browser cookies. + * + * {@installModule cookies} + * + * <div doc-module-components="ngCookies"></div> + * + * See {@link ngCookies.$cookies `$cookies`} and + * {@link ngCookies.$cookieStore `$cookieStore`} for usage. + */ + + +angular.module('ngCookies', ['ng']). + /** + * @ngdoc object + * @name ngCookies.$cookies + * @requires $browser + * + * @description + * Provides read/write access to browser's cookies. + * + * Only a simple Object is exposed and by adding or removing properties to/from + * this object, new cookies are created/deleted at the end of current $eval. + * + * Requires the {@link ngCookies `ngCookies`} module to be installed. + * + * @example + <doc:example> + <doc:source> + <script> + function ExampleController($cookies) { + // Retrieving a cookie + var favoriteCookie = $cookies.myFavorite; + // Setting a cookie + $cookies.myFavorite = 'oatmeal'; + } + </script> + </doc:source> + </doc:example> + */ + factory('$cookies', ['$rootScope', '$browser', function ($rootScope, $browser) { + var cookies = {}, + lastCookies = {}, + lastBrowserCookies, + runEval = false, + copy = angular.copy, + isUndefined = angular.isUndefined; + + //creates a poller fn that copies all cookies from the $browser to service & inits the service + $browser.addPollFn(function() { + var currentCookies = $browser.cookies(); + if (lastBrowserCookies != currentCookies) { //relies on browser.cookies() impl + lastBrowserCookies = currentCookies; + copy(currentCookies, lastCookies); + copy(currentCookies, cookies); + if (runEval) $rootScope.$apply(); + } + })(); + + runEval = true; + + //at the end of each eval, push cookies + //TODO: this should happen before the "delayed" watches fire, because if some cookies are not + // strings or browser refuses to store some cookies, we update the model in the push fn. + $rootScope.$watch(push); + + return cookies; + + + /** + * Pushes all the cookies from the service to the browser and verifies if all cookies were + * stored. + */ + function push() { + var name, + value, + browserCookies, + updated; + + //delete any cookies deleted in $cookies + for (name in lastCookies) { + if (isUndefined(cookies[name])) { + $browser.cookies(name, undefined); + } + } + + //update all cookies updated in $cookies + for(name in cookies) { + value = cookies[name]; + if (!angular.isString(value)) { + if (angular.isDefined(lastCookies[name])) { + cookies[name] = lastCookies[name]; + } else { + delete cookies[name]; + } + } else if (value !== lastCookies[name]) { + $browser.cookies(name, value); + updated = true; + } + } + + //verify what was actually stored + if (updated){ + updated = false; + browserCookies = $browser.cookies(); + + for (name in cookies) { + if (cookies[name] !== browserCookies[name]) { + //delete or reset all cookies that the browser dropped from $cookies + if (isUndefined(browserCookies[name])) { + delete cookies[name]; + } else { + cookies[name] = browserCookies[name]; + } + updated = true; + } + } + } + } + }]). + + + /** + * @ngdoc object + * @name ngCookies.$cookieStore + * @requires $cookies + * + * @description + * Provides a key-value (string-object) storage, that is backed by session cookies. + * Objects put or retrieved from this storage are automatically serialized or + * deserialized by angular's toJson/fromJson. + * + * Requires the {@link ngCookies `ngCookies`} module to be installed. + * + * @example + */ + factory('$cookieStore', ['$cookies', function($cookies) { + + return { + /** + * @ngdoc method + * @name ngCookies.$cookieStore#get + * @methodOf ngCookies.$cookieStore + * + * @description + * Returns the value of given cookie key + * + * @param {string} key Id to use for lookup. + * @returns {Object} Deserialized cookie value. + */ + get: function(key) { + var value = $cookies[key]; + return value ? angular.fromJson(value) : value; + }, + + /** + * @ngdoc method + * @name ngCookies.$cookieStore#put + * @methodOf ngCookies.$cookieStore + * + * @description + * Sets a value for given cookie key + * + * @param {string} key Id for the `value`. + * @param {Object} value Value to be stored. + */ + put: function(key, value) { + $cookies[key] = angular.toJson(value); + }, + + /** + * @ngdoc method + * @name ngCookies.$cookieStore#remove + * @methodOf ngCookies.$cookieStore + * + * @description + * Remove given cookie + * + * @param {string} key Id of the key-value pair to delete. + */ + remove: function(key) { + delete $cookies[key]; + } + }; + + }]); + + +})(window, window.angular); Added: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-loader.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-loader.js (rev 0) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-loader.js 2013-11-10 11:10:19 UTC (rev 225) @@ -0,0 +1,323 @@ +/** %%Ignore-License + * @license AngularJS v1.2.0 + * (c) 2010-2012 Google, Inc. http://angularjs.org + * License: MIT + */ + +( + +/** + * @ngdoc interface + * @name angular.Module + * @description + * + * Interface for configuring angular {@link angular.module modules}. + */ + +function setupModuleLoader(window) { + + var $injectorMinErr = minErr('$injector'); + + function ensure(obj, name, factory) { + return obj[name] || (obj[name] = factory()); + } + + return ensure(ensure(window, 'angular', Object), 'module', function() { + /** @type {Object.<string, angular.Module>} */ + var modules = {}; + + /** + * @ngdoc function + * @name angular.module + * @description + * + * The `angular.module` is a global place for creating, registering and retrieving Angular + * modules. + * All modules (angular core or 3rd party) that should be available to an application must be + * registered using this mechanism. + * + * When passed two or more arguments, a new module is created. If passed only one argument, an + * existing module (the name passed as the first argument to `module`) is retrieved. + * + * + * # Module + * + * A module is a collection of services, directives, filters, and configuration information. + * `angular.module` is used to configure the {@link AUTO.$injector $injector}. + * + * <pre> + * // Create a new module + * var myModule = angular.module('myModule', []); + * + * // register a new service + * myModule.value('appName', 'MyCoolApp'); + * + * // configure existing services inside initialization blocks. + * myModule.config(function($locationProvider) {'use strict'; + * // Configure existing providers + * $locationProvider.hashPrefix('!'); + * }); + * </pre> + * + * Then you can create an injector and load your modules like this: + * + * <pre> + * var injector = angular.injector(['ng', 'MyModule']) + * </pre> + * + * However it's more likely that you'll just use + * {@link ng.directive:ngApp ngApp} or + * {@link angular.bootstrap} to simplify this process for you. + * + * @param {!string} name The name of the module to create or retrieve. + * @param {Array.<string>=} requires If specified then new module is being created. If + * unspecified then the the module is being retrieved for further configuration. + * @param {Function} configFn Optional configuration function for the module. Same as + * {@link angular.Module#methods_config Module#config()}. + * @returns {module} new module with the {@link angular.Module} api. + */ + return function module(name, requires, configFn) { + assertNotHasOwnProperty(name, 'module'); + if (requires && modules.hasOwnProperty(name)) { + modules[name] = null; + } + return ensure(modules, name, function() { + if (!requires) { + throw $injectorMinErr('nomod', "Module '{0}' is not available! You either misspelled " + + "the module name or forgot to load it. If registering a module ensure that you " + + "specify the dependencies as the second argument.", name); + } + + /** @type {!Array.<Array.<*>>} */ + var invokeQueue = []; + + /** @type {!Array.<Function>} */ + var runBlocks = []; + + var config = invokeLater('$injector', 'invoke'); + + /** @type {angular.Module} */ + var moduleInstance = { + // Private state + _invokeQueue: invokeQueue, + _runBlocks: runBlocks, + + /** + * @ngdoc property + * @name angular.Module#requires + * @propertyOf angular.Module + * @returns {Array.<string>} List of module names which must be loaded before this module. + * @description + * Holds the list of modules which the injector will load before the current module is + * loaded. + */ + requires: requires, + + /** + * @ngdoc property + * @name angular.Module#name + * @propertyOf angular.Module + * @returns {string} Name of the module. + * @description + */ + name: name, + + + /** + * @ngdoc method + * @name angular.Module#provider + * @methodOf angular.Module + * @param {string} name service name + * @param {Function} providerType Construction function for creating new instance of the + * service. + * @description + * See {@link AUTO.$provide#provider $provide.provider()}. + */ + provider: invokeLater('$provide', 'provider'), + + /** + * @ngdoc method + * @name angular.Module#factory + * @methodOf angular.Module + * @param {string} name service name + * @param {Function} providerFunction Function for creating new instance of the service. + * @description + * See {@link AUTO.$provide#factory $provide.factory()}. + */ + factory: invokeLater('$provide', 'factory'), + + /** + * @ngdoc method + * @name angular.Module#service + * @methodOf angular.Module + * @param {string} name service name + * @param {Function} constructor A constructor function that will be instantiated. + * @description + * See {@link AUTO.$provide#service $provide.service()}. + */ + service: invokeLater('$provide', 'service'), + + /** + * @ngdoc method + * @name angular.Module#value + * @methodOf angular.Module + * @param {string} name service name + * @param {*} object Service instance object. + * @description + * See {@link AUTO.$provide#value $provide.value()}. + */ + value: invokeLater('$provide', 'value'), + + /** + * @ngdoc method + * @name angular.Module#constant + * @methodOf angular.Module + * @param {string} name constant name + * @param {*} object Constant value. + * @description + * Because the constant are fixed, they get applied before other provide methods. + * See {@link AUTO.$provide#constant $provide.constant()}. + */ + constant: invokeLater('$provide', 'constant', 'unshift'), + + /** + * @ngdoc method + * @name angular.Module#animation + * @methodOf angular.Module + * @param {string} name animation name + * @param {Function} animationFactory Factory function for creating new instance of an + * animation. + * @description + * + * **NOTE**: animations take effect only if the **ngAnimate** module is loaded. + * + * + * Defines an animation hook that can be later used with + * {@link ngAnimate.$animate $animate} service and directives that use this service. + * + * <pre> + * module.animation('.animation-name', function($inject1, $inject2) { + * return { + * eventName : function(element, done) { + * //code to run the animation + * //once complete, then run done() + * return function cancellationFunction(element) { + * //code to cancel the animation + * } + * } + * } + * }) + * </pre> + * + * See {@link ngAnimate.$animateProvider#register $animateProvider.register()} and + * {@link ngAnimate ngAnimate module} for more information. + */ + animation: invokeLater('$animateProvider', 'register'), + + /** + * @ngdoc method + * @name angular.Module#filter + * @methodOf angular.Module + * @param {string} name Filter name. + * @param {Function} filterFactory Factory function for creating new instance of filter. + * @description + * See {@link ng.$filterProvider#register $filterProvider.register()}. + */ + filter: invokeLater('$filterProvider', 'register'), + + /** + * @ngdoc method + * @name angular.Module#controller + * @methodOf angular.Module + * @param {string|Object} name Controller name, or an object map of controllers where the + * keys are the names and the values are the constructors. + * @param {Function} constructor Controller constructor function. + * @description + * See {@link ng.$controllerProvider#register $controllerProvider.register()}. + */ + controller: invokeLater('$controllerProvider', 'register'), + + /** + * @ngdoc method + * @name angular.Module#directive + * @methodOf angular.Module + * @param {string|Object} name Directive name, or an object map of directives where the + * keys are the names and the values are the factories. + * @param {Function} directiveFactory Factory function for creating new instance of + * directives. + * @description + * See {@link ng.$compileProvider#methods_directive $compileProvider.directive()}. + */ + directive: invokeLater('$compileProvider', 'directive'), + + /** + * @ngdoc method + * @name angular.Module#config + * @methodOf angular.Module + * @param {Function} configFn Execute this function on module load. Useful for service + * configuration. + * @description + * Use this method to register work which needs to be performed on module loading. + */ + config: config, + + /** + * @ngdoc method + * @name angular.Module#run + * @methodOf angular.Module + * @param {Function} initializationFn Execute this function after injector creation. + * Useful for application initialization. + * @description + * Use this method to register work which should be performed when the injector is done + * loading all modules. + */ + run: function(block) { + runBlocks.push(block); + return this; + } + }; + + if (configFn) { + config(configFn); + } + + return moduleInstance; + + /** + * @param {string} provider + * @param {string} method + * @param {String=} insertMethod + * @returns {angular.Module} + */ + function invokeLater(provider, method, insertMethod) { + return function() { + invokeQueue[insertMethod || 'push']([provider, method, arguments]); + return moduleInstance; + }; + } + }); + }; + }); + +} + +)(window); + +/** + * Closure compiler type information + * + * @typedef { { + * requires: !Array.<string>, + * invokeQueue: !Array.<Array.<*>>, + * + * service: function(string, Function):angular.Module, + * factory: function(string, Function):angular.Module, + * value: function(string, *):angular.Module, + * + * filter: function(string, Function):angular.Module, + * + * init: function(Function):angular.Module + * } } + */ +angular.Module; + Added: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-mocks.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-mocks.js (rev 0) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-mocks.js 2013-11-10 11:10:19 UTC (rev 225) @@ -0,0 +1,2130 @@ +'use strict'; + +/** %%Ignore-License + * @license AngularJS v1.2.0 + * (c) 2010-2012 Google, Inc. http://angularjs.org + * License: MIT + * + * TODO(vojta): wrap whole file into closure during build + */ + +/** + * @ngdoc overview + * @name angular.mock + * @description + * + * Namespace from 'angular-mocks.js' which contains testing related code. + */ +angular.mock = {}; + +/** + * ! This is a private undocumented service ! + * + * @name ngMock.$browser + * + * @description + * This service is a mock implementation of {@link ng.$browser}. It provides fake + * implementation for commonly used browser apis that are hard to test, e.g. setTimeout, xhr, + * cookies, etc... + * + * The api of this service is the same as that of the real {@link ng.$browser $browser}, except + * that there are several helper methods available which can be used in tests. + */ +angular.mock.$BrowserProvider = function() { + this.$get = function() { + return new angular.mock.$Browser(); + }; +}; + +angular.mock.$Browser = function() { + var self = this; + + this.isMock = true; + self.$$url = "http://server/"; + self.$$lastUrl = self.$$url; // used by url polling fn + self.pollFns = []; + + // TODO(vojta): remove this temporary api + self.$$completeOutstandingRequest = angular.noop; + self.$$incOutstandingRequestCount = angular.noop; + + + // register url polling fn + + self.onUrlChange = function(listener) { + self.pollFns.push( + function() { + if (self.$$lastUrl != self.$$url) { + self.$$lastUrl = self.$$url; + listener(self.$$url); + } + } + ); + + return listener; + }; + + self.cookieHash = {}; + self.lastCookieHash = {}; + self.deferredFns = []; + self.deferredNextId = 0; + + self.defer = function(fn, delay) { + delay = delay || 0; + self.deferredFns.push({time:(self.defer.now + delay), fn:fn, id: self.deferredNextId}); + self.deferredFns.sort(function(a,b){ return a.time - b.time;}); + return self.deferredNextId++; + }; + + + /** + * @name ngMock.$browser#defer.now + * @propertyOf ngMock.$browser + * + * @description + * Current milliseconds mock time. + */ + self.defer.now = 0; + + + self.defer.cancel = function(deferId) { + var fnIndex; + + angular.forEach(self.deferredFns, function(fn, index) { + if (fn.id === deferId) fnIndex = index; + }); + + if (fnIndex !== undefined) { + self.deferredFns.splice(fnIndex, 1); + return true; + } + + return false; + }; + + + /** + * @name ngMock.$browser#defer.flush + * @methodOf ngMock.$browser + * + * @description + * Flushes all pending requests and executes the defer callbacks. + * + * @param {number=} number of milliseconds to flush. See {@link #defer.now} + */ + self.defer.flush = function(delay) { + if (angular.isDefined(delay)) { + self.defer.now += delay; + } else { + if (self.deferredFns.length) { + self.defer.now = self.deferredFns[self.deferredFns.length-1].time; + } else { + throw new Error('No deferred tasks to be flushed'); + } + } + + while (self.deferredFns.length && self.deferredFns[0].time <= self.defer.now) { + self.deferredFns.shift().fn(); + } + }; + + self.$$baseHref = ''; + self.baseHref = function() { + return this.$$baseHref; + }; +}; +angular.mock.$Browser.prototype = { + +/** + * @name ngMock.$browser#poll + * @methodOf ngMock.$browser + * + * @description + * run all fns in pollFns + */ + poll: function poll() { + angular.forEach(this.pollFns, function(pollFn){ + pollFn(); + }); + }, + + addPollFn: function(pollFn) { + this.pollFns.push(pollFn); + return pollFn; + }, + + url: function(url, replace) { + if (url) { + this.$$url = url; + return this; + } + + return this.$$url; + }, + + cookies: function(name, value) { + if (name) { + if (angular.isUndefined(value)) { + delete this.cookieHash[name]; + } else { + if (angular.isString(value) && //strings only + value.length <= 4096) { //strict cookie storage limits + this.cookieHash[name] = value; + } + } + } else { + if (!angular.equals(this.cookieHash, this.lastCookieHash)) { + this.lastCookieHash = angular.copy(this.cookieHash); + this.cookieHash = angular.copy(this.cookieHash); + } + return this.cookieHash; + } + }, + + notifyWhenNoOutstandingRequests: function(fn) { + fn(); + } +}; + + +/** + * @ngdoc object + * @name ngMock.$exceptionHandlerProvider + * + * @description + * Configures the mock implementation of {@link ng.$exceptionHandler} to rethrow or to log errors + * passed into the `$exceptionHandler`. + */ + +/** + * @ngdoc object + * @name ngMock.$exceptionHandler + * + * @description + * Mock implementation of {@link ng.$exceptionHandler} that rethrows or logs errors passed + * into it. See {@link ngMock.$exceptionHandlerProvider $exceptionHandlerProvider} for configuration + * information. + * + * + * <pre> + * describe('$exceptionHandlerProvider', function() { + * + * it('should capture log messages and exceptions', function() { + * + * module(function($exceptionHandlerProvider) { + * $exceptionHandlerProvider.mode('log'); + * }); + * + * inject(function($log, $exceptionHandler, $timeout) { + * $timeout(function() { $log.log(1); }); + * $timeout(function() { $log.log(2); throw 'banana peel'; }); + * $timeout(function() { $log.log(3); }); + * expect($exceptionHandler.errors).toEqual([]); + * expect($log.assertEmpty()); + * $timeout.flush(); + * expect($exceptionHandler.errors).toEqual(['banana peel']); + * expect($log.log.logs).toEqual([[1], [2], [3]]); + * }); + * }); + * }); + * </pre> + */ + +angular.mock.$ExceptionHandlerProvider = function() { + var handler; + + /** + * @ngdoc method + * @name ngMock.$exceptionHandlerProvider#mode + * @methodOf ngMock.$exceptionHandlerProvider + * + * @description + * Sets the logging mode. + * + * @param {string} mode Mode of operation, defaults to `rethrow`. + * + * - `rethrow`: If any errors are passed into the handler in tests, it typically + * means that there is a bug in the application or test, so this mock will + * make these tests fail. + * - `log`: Sometimes it is desirable to test that an error is thrown, for this case the `log` + * mode stores an array of errors in `$exceptionHandler.errors`, to allow later + * assertion of them. See {@link ngMock.$log#assertEmpty assertEmpty()} and + * {@link ngMock.$log#reset reset()} + */ + this.mode = function(mode) { + switch(mode) { + case 'rethrow': + handler = function(e) { + throw e; + }; + break; + case 'log': + var errors = []; + + handler = function(e) { + if (arguments.length == 1) { + errors.push(e); + } else { + errors.push([].slice.call(arguments, 0)); + } + }; + + handler.errors = errors; + break; + default: + throw new Error("Unknown mode '" + mode + "', only 'log'/'rethrow' modes are allowed!"); + } + }; + + this.$get = function() { + return handler; + }; + + this.mode('rethrow'); +}; + + +/** + * @ngdoc service + * @name ngMock.$log + * + * @description + * Mock implementation of {@link ng.$log} that gathers all logged messages in arrays + * (one array per logging level). These arrays are exposed as `logs` property of each of the + * level-specific log function, e.g. for level `error` the array is exposed as `$log.error.logs`. + * + */ +angular.mock.$LogProvider = function() { + var debug = true; + + function concat(array1, array2, index) { + return array1.concat(Array.prototype.slice.call(array2, index)); + } + + this.debugEnabled = function(flag) { + if (angular.isDefined(flag)) { + debug = flag; + return this; + } else { + return debug; + } + }; + + this.$get = function () { + var $log = { + log: function() { $log.log.logs.push(concat([], arguments, 0)); }, + warn: function() { $log.warn.logs.push(concat([], arguments, 0)); }, + info: function() { $log.info.logs.push(concat([], arguments, 0)); }, + error: function() { $log.error.logs.push(concat([], arguments, 0)); }, + debug: function() { + if (debug) { + $log.debug.logs.push(concat([], arguments, 0)); + } + } + }; + + /** + * @ngdoc method + * @name ngMock.$log#reset + * @methodOf ngMock.$log + * + * @description + * Reset all of the logging arrays to empty. + */ + $log.reset = function () { + /** + * @ngdoc property + * @name ngMock.$log#log.logs + * @propertyOf ngMock.$log + * + * @description + * Array of messages logged using {@link ngMock.$log#log}. + * + * @example + * <pre> + * $log.log('Some Log'); + * var first = $log.log.logs.unshift(); + * </pre> + */ + $log.log.logs = []; + /** + * @ngdoc property + * @name ngMock.$log#info.logs + * @propertyOf ngMock.$log + * + * @description + * Array of messages logged using {@link ngMock.$log#info}. + * + * @example + * <pre> + * $log.info('Some Info'); + * var first = $log.info.logs.unshift(); + * </pre> + */ + $log.info.logs = []; + /** + * @ngdoc property + * @name ngMock.$log#warn.logs + * @propertyOf ngMock.$log + * + * @description + * Array of messages logged using {@link ngMock.$log#warn}. + * + * @example + * <pre> + * $log.warn('Some Warning'); + * var first = $log.warn.logs.unshift(); + * </pre> + */ + $log.warn.logs = []; + /** + * @ngdoc property + * @name ngMock.$log#error.logs + * @propertyOf ngMock.$log + * + * @description + * Array of messages logged using {@link ngMock.$log#error}. + * + * @example + * <pre> + * $log.log('Some Error'); + * var first = $log.error.logs.unshift(); + * </pre> + */ + $log.error.logs = []; + /** + * @ngdoc property + * @name ngMock.$log#debug.logs + * @propertyOf ngMock.$log + * + * @description + * Array of messages logged using {@link ngMock.$log#debug}. + * + * @example + * <pre> + * $log.debug('Some Error'); + * var first = $log.debug.logs.unshift(); + * </pre> + */ + $log.debug.logs = []; + }; + + /** + * @ngdoc method + * @name ngMock.$log#assertEmpty + * @methodOf ngMock.$log + * + * @description + * Assert that the all of the logging methods have no logged messages. If messages present, an + * exception is thrown. + */ + $log.assertEmpty = function() { + var errors = []; + angular.forEach(['error', 'warn', 'info', 'log', 'debug'], function(logLevel) { + angular.forEach($log[logLevel].logs, function(log) { + angular.forEach(log, function (logItem) { + errors.push('MOCK $log (' + logLevel + '): ' + String(logItem) + '\n' + + (logItem.stack || '')); + }); + }); + }); + if (errors.length) { + errors.unshift("Expected $log to be empty! Either a message was logged unexpectedly, or "+ + "an expected log message was not checked and removed:"); + errors.push(''); + throw new Error(errors.join('\n---------\n')); + } + }; + + $log.reset(); + return $log; + }; +}; + + +/** + * @ngdoc service + * @name ngMock.$interval + * + * @description + * Mock implementation of the $interval service. + * + * Use {@link ngMock.$interval#methods_flush `$interval.flush(millis)`} to + * move forward by `millis` milliseconds and trigger any functions scheduled to run in that + * time. + * + * @param {function()} fn A function that should be called repeatedly. + * @param {number} delay Number of milliseconds between each function call. + * @param {number=} [count=0] Number of times to repeat. If not set, or 0, will repeat + * indefinitely. + * @param {boolean=} [invokeApply=true] If set to `false` skips model dirty checking, otherwise + * will invoke `fn` within the {@link ng.$rootScope.Scope#methods_$apply $apply} block. + * @returns {promise} A promise which will be notified on each iteration. + */ +angular.mock.$IntervalProvider = function() { + this.$get = ['$rootScope', '$q', + function($rootScope, $q) { + var repeatFns = [], + nextRepeatId = 0, + now = 0; + + var $interval = function(fn, delay, count, invokeApply) { + var deferred = $q.defer(), + promise = deferred.promise, + iteration = 0, + skipApply = (angular.isDefined(invokeApply) && !invokeApply); + + count = (angular.isDefined(count)) ? count : 0, + promise.then(null, null, fn); + + promise.$$intervalId = nextRepeatId; + + function tick() { + deferred.notify(iteration++); + + if (count > 0 && iteration >= count) { + var fnIndex; + deferred.resolve(iteration); + + angular.forEach(repeatFns, function(fn, index) { + if (fn.id === promise.$$intervalId) fnIndex = index; + }); + + if (fnIndex !== undefined) { + repeatFns.splice(fnIndex, 1); + } + } + + if (!skipApply) $rootScope.$apply(); + } + + repeatFns.push({ + nextTime:(now + delay), + delay: delay, + fn: tick, + id: nextRepeatId, + deferred: deferred + }); + repeatFns.sort(function(a,b){ return a.nextTime - b.nextTime;}); + + nextRepeatId++; + return promise; + }; + + $interval.cancel = function(promise) { + var fnIndex; + + angular.forEach(repeatFns, function(fn, index) { + if (fn.id === promise.$$intervalId) fnIndex = index; + }); + + if (fnIndex !== undefined) { + repeatFns[fnIndex].deferred.reject('canceled'); + repeatFns.splice(fnIndex, 1); + return true; + } + + return false; + }; + + /** + * @ngdoc method + * @name ngMock.$interval#flush + * @methodOf ngMock.$interval + * @description + * + * Runs interval tasks scheduled to be run in the next `millis` milliseconds. + * + * @param {number=} millis maximum timeout amount to flush up until. + * + * @return {number} The amount of time moved forward. + */ + $interval.flush = function(millis) { + now += millis; + while (repeatFns.length && repeatFns[0].nextTime <= now) { + var task = repeatFns[0]; + task.fn(); + task.nextTime += task.delay; + repeatFns.sort(function(a,b){ return a.nextTime - b.nextTime;}); + } + return millis; + }; + + return $interval; + }]; +}; + + +/* jshint -W101 */ +/* The R_ISO8061_STR regex is never going to fit into the 100 char limit! + * This directive should go inside the anonymous function but a bug in JSHint means that it would + * not be enacted early enough to prevent the warning. + */ +(function() { + var R_ISO8061_STR = /^(\d{4})-?(\d\d)-?(\d\d)(?:T(\d\d)(?:\:?(\d\d)(?:\:?(\d\d)(?:\.(\d{3}))?)?)?(Z|([+-])(\d\d):?(\d\d)))?$/; + + function jsonStringToDate(string) { + var match; + if (match = string.match(R_ISO8061_STR)) { + var date = new Date(0), + tzHour = 0, + tzMin = 0; + if (match[9]) { + tzHour = int(match[9] + match[10]); + tzMin = int(match[9] + match[11]); + } + date.setUTCFullYear(int(match[1]), int(match[2]) - 1, int(match[3])); + date.setUTCHours(int(match[4]||0) - tzHour, + int(match[5]||0) - tzMin, + int(match[6]||0), + int(match[7]||0)); + return date; + } + return string; + } + + function int(str) { + return parseInt(str, 10); + } + + function padNumber(num, digits, trim) { + var neg = ''; + if (num < 0) { + neg = '-'; + num = -num; + } + num = '' + num; + while(num.length < digits) num = '0' + num; + if (trim) + num = num.substr(num.length - digits); + return neg + num; + } + + + /** + * @ngdoc object + * @name angular.mock.TzDate + * @description + * + * *NOTE*: this is not an injectable instance, just a globally available mock class of `Date`. + * + * Mock of the Date type which has its timezone specified via constructor arg. + * + * The main purpose is to create Date-like instances with timezone fixed to the specified timezone + * offset, so that we can test code that depends on local timezone settings without dependency on + * the time zone settings of the machine where the code is running. + * + * @param {number} offset Offset of the *desired* timezone in hours (fractions will be honored) + * @param {(number|string)} timestamp Timestamp representing the desired time in *UTC* + * + * @example + * !!!! WARNING !!!!! + * This is not a complete Date object so only methods that were implemented can be called safely. + * To make matters worse, TzDate instances inherit stuff from Date via a prototype. + * + * We do our best to intercept calls to "unimplemented" methods, but since the list of methods is + * incomplete we might be missing some non-standard methods. This can result in errors like: + * "Date.prototype.foo called on incompatible Object". + * + * <pre> + * var newYearInBratislava = new TzDate(-1, '2009-12-31T23:00:00Z'); + * newYearInBratislava.getTimezoneOffset() => -60; + * newYearInBratislava.getFullYear() => 2010; + * newYearInBratislava.getMonth() => 0; + * newYearInBratislava.getDate() => 1; + * newYearInBratislava.getHours() => 0; + * newYearInBratislava.getMinutes() => 0; + * newYearInBratislava.getSeconds() => 0; + * </pre> + * + */ + angular.mock.TzDate = function (offset, timestamp) { + var self = new Date(0); + if (angular.isString(timestamp)) { + var tsStr = timestamp; + + self.origDate = jsonStringToDate(timestamp); + + timestamp = self.origDate.getTime(); + if (isNaN(timestamp)) + throw { + name: "Illegal Argument", + message: "Arg '" + tsStr + "' passed into TzDate constructor is not a valid date string" + }; + } else { + self.origDate = new Date(timestamp); + } + + var localOffset = new Date(timestamp).getTimezoneOffset(); + self.offsetDiff = localOffset*60*1000 - offset*1000*60*60; + self.date = new Date(timestamp + self.offsetDiff); + + self.getTime = function() { + return self.date.getTime() - self.offsetDiff; + }; + + self.toLocaleDateString = function() { + return self.date.toLocaleDateString(); + }; + + self.getFullYear = function() { + return self.date.getFullYear(); + }; + + self.getMonth = function() { + return self.date.getMonth(); + }; + + self.getDate = function() { + return self.date.getDate(); + }; + + self.getHours = function() { + return self.date.getHours(); + }; + + self.getMinutes = function() { + return self.date.getMinutes(); + }; + + self.getSeconds = function() { + return self.date.getSeconds(); + }; + + self.getMilliseconds = function() { + return self.date.getMilliseconds(); + }; + + self.getTimezoneOffset = function() { + return offset * 60; + }; + + self.getUTCFullYear = function() { + return self.origDate.getUTCFullYear(); + }; + + self.getUTCMonth = function() { + return self.origDate.getUTCMonth(); + }; + + self.getUTCDate = function() { + return self.origDate.getUTCDate(); + }; + + self.getUTCHours = function() { + return self.origDate.getUTCHours(); + }; + + self.getUTCMinutes = function() { + return self.origDate.getUTCMinutes(); + }; + + self.getUTCSeconds = function() { + return self.origDate.getUTCSeconds(); + }; + + self.getUTCMilliseconds = function() { + return self.origDate.getUTCMilliseconds(); + }; + + self.getDay = function() { + return self.date.getDay(); + }; + + // provide this method only on browsers that already have it + if (self.toISOString) { + self.toISOString = function() { + return padNumber(self.origDate.getUTCFullYear(), 4) + '-' + + padNumber(self.origDate.getUTCMonth() + 1, 2) + '-' + + padNumber(self.origDate.getUTCDate(), 2) + 'T' + + padNumber(self.origDate.getUTCHours(), 2) + ':' + + padNumber(self.origDate.getUTCMinutes(), 2) + ':' + + padNumber(self.origDate.getUTCSeconds(), 2) + '.' + + padNumber(self.origDate.getUTCMilliseconds(), 3) + 'Z'; + }; + } + + //hide all methods not implemented in this mock that the Date prototype exposes + var unimplementedMethods = ['getUTCDay', + 'getYear', 'setDate', 'setFullYear', 'setHours', 'setMilliseconds', + 'setMinutes', 'setMonth', 'setSeconds', 'setTime', 'setUTCDate', 'setUTCFullYear', + 'setUTCHours', 'setUTCMilliseconds', 'setUTCMinutes', 'setUTCMonth', 'setUTCSeconds', + 'setYear', 'toDateString', 'toGMTString', 'toJSON', 'toLocaleFormat', 'toLocaleString', + 'toLocaleTimeString', 'toSource', 'toString', 'toTimeString', 'toUTCString', 'valueOf']; + + angular.forEach(unimplementedMethods, function(methodName) { + self[methodName] = function() { + throw new Error("Method '" + methodName + "' is not implemented in the TzDate mock"); + }; + }); + + return self; + }; + + //make "tzDateInstance instanceof Date" return true + angular.mock.TzDate.prototype = Date.prototype; +})(); +/* jshint +W101 */ + +angular.mock.animate = angular.module('mock.animate', ['ng']) + + .config(['$provide', function($provide) { + + $provide.decorator('$animate', function($delegate) { + var animate = { + queue : [], + enabled : $delegate.enabled, + flushNext : function(name) { + var tick = animate.queue.shift(); + + if (!tick) throw new Error('No animation to be flushed'); + if(tick.method !== name) { + throw new Error('The next animation is not "' + name + + '", but is "' + tick.method + '"'); + } + tick.fn(); + return tick; + } + }; + + angular.forEach(['enter','leave','move','addClass','removeClass'], function(method) { + animate[method] = function() { + var params = arguments; + animate.queue.push({ + method : method, + params : params, + element : angular.isElement(params[0]) && params[0], + parent : angular.isElement(params[1]) && params[1], + after : angular.isElement(params[2]) && params[2], + fn : function() { + $delegate[method].apply($delegate, params); + } + }); + }; + }); + + return animate; + }); + + }]); + + +/** + * @ngdoc function + * @name angular.mock.dump + * @description + * + * *NOTE*: this is not an injectable instance, just a globally available function. + * + * Method for serializing common angular objects (scope, elements, etc..) into strings, useful for + * debugging. + * + * This method is also available on window, where it can be used to display objects on debug + * console. + * + * @param {*} object - any object to turn into string. + * @return {string} a serialized string of the argument + */ +angular.mock.dump = function(object) { + return serialize(object); + + function serialize(object) { + var out; + + if (angular.isElement(object)) { + object = angular.element(object); + out = angular.element('<div></div>'); + angular.forEach(object, function(element) { + out.append(angular.element(element).clone()); + }); + out = out.html(); + } else if (angular.isArray(object)) { + out = []; + angular.forEach(object, function(o) { + out.push(serialize(o)); + }); + out = '[ ' + out.join(', ') + ' ]'; + } else if (angular.isObject(object)) { + if (angular.isFunction(object.$eval) && angular.isFunction(object.$apply)) { + out = serializeScope(object); + } else if (object instanceof Error) { + out = object.stack || ('' + object.name + ': ' + object.message); + } else { + // TODO(i): this prevents methods being logged, + // we should have a better way to serialize objects + out = angular.toJson(object, true); + } + } else { + out = String(object); + } + + return out; + } + + function serializeScope(scope, offset) { + offset = offset || ' '; + var log = [offset + 'Scope(' + scope.$id + '): {']; + for ( var key in scope ) { + if (Object.prototype.hasOwnProperty.call(scope, key) && !key.match(/^(\$|this)/)) { + log.push(' ' + key + ': ' + angular.toJson(scope[key])); + } + } + var child = scope.$$childHead; + while(child) { + log.push(serializeScope(child, offset + ' ')); + child = child.$$nextSibling; + } + log.push('}'); + return log.join('\n' + offset); + } +}; + +/** + * @ngdoc object + * @name ngMock.$httpBackend + * @description + * Fake HTTP backend implementation suitable for unit testing applications that use the + * {@link ng.$http $http service}. + * + * *Note*: For fake HTTP backend implementation suitable for end-to-end testing or backend-less + * development please see {@link ngMockE2E.$httpBackend e2e $httpBackend mock}. + * + * During unit testing, we want our unit tests to run quickly and have no external dependencies so + * we don’t want to send {@link https://developer.mozilla.org/en/xmlhttprequest XHR} or + * {@link http://en.wikipedia.org/wiki/JSONP JSONP} requests to a real server. All we really need is + * to verify whether a certain request has been sent or not, or alternatively just let the + * application make requests, respond with pre-trained responses and assert that the end result is + * what we expect it to be. + * + * This mock implementation can be used to respond with static or dynamic responses via the + * `expect` and `when` apis and their shortcuts (`expectGET`, `whenPOST`, etc). + * + * When an Angular application needs some data from a server, it calls the $http service, which + * sends the request to a real server using $httpBackend service. With dependency injection, it is + * easy to inject $httpBackend mock (which has the same API as $httpBackend) and use it to verify + * the requests and respond with some testing data without sending a request to real server. + * + * There are two ways to specify what test data should be returned as http responses by the mock + * backend when the code under test makes http requests: + * + * - `$httpBackend.expect` - specifies a request expectation + * - `$httpBackend.when` - specifies a backend definition + * + * + * # Request Expectations vs Backend Definitions + * + * Request expectations provide a way to make assertions about requests made by the application and + * to define responses for those requests. The test will fail if the expected requests are not made + * or they are made in the wrong order. + * + * Backend definitions allow you to define a fake backend for your application which doesn't assert + * if a particular request was made or not, it just returns a trained response if a request is made. + * The test will pass whether or not the request gets made during testing. + * + * + * <table class="table"> + * <tr><th width="220px"></th><th>Request expectations</th><th>Backend definitions</th></tr> + * <tr> + * <th>Syntax</th> + * <td>.expect(...).respond(...)</td> + * <td>.when(...).respond(...)</td> + * </tr> + * <tr> + * <th>Typical usage</th> + * <td>strict unit tests</td> + * <td>loose (black-box) unit testing</td> + * </tr> + * <tr> + * <th>Fulfills multiple requests</th> + * <td>NO</td> + * <td>YES</td> + * </tr> + * <tr> + * <th>Order of requests matters</th> + * <td>YES</td> + * <td>NO</td> + * </tr> + * <tr> + * <th>Request required</th> + * <td>YES</td> + * <td>NO</td> + * </tr> + * <tr> + * <th>Response required</th> + * <td>optional (see below)</td> + * <td>YES</td> + * </tr> + * </table> + * + * In cases where both backend definitions and request expectations are specified during unit + * testing, the request expectations are evaluated first. + * + * If a request expectation has no response specified, the algorithm will search your backend + * definitions for an appropriate response. + * + * If a request didn't match any expectation or if the expectation doesn't have the response + * defined, the backend definitions are evaluated in sequential order to see if any of them match + * the request. The response from the first matched definition is returned. + * + * + * # Flushing HTTP requests + * + * The $httpBackend used in production, always responds to requests with responses asynchronously. + * If we preserved this behavior in unit testing, we'd have to create async unit tests, which are + * hard to write, follow and maintain. At the same time the testing mock, can't respond + * synchronously because that would change the execution of the code under test. For this reason the + * mock $httpBackend has a `flush()` method, which allows the test to explicitly flush pending + * requests and thus preserving the async api of the backend, while allowing the test to execute + * synchronously. + * + * + * # Unit testing with mock $httpBackend + * The following code shows how to setup and use the mock backend in unit testing a controller. + * First we create the controller under test + * + <pre> + // The controller code + function MyController($scope, $http) { + var authToken; + + $http.get('/auth.py').success(function(data, status, headers) { + authToken = headers('A-Token'); + $scope.user = data; + }); + + $scope.saveMessage = function(message) { + var headers = { 'Authorization': authToken }; + $scope.status = 'Saving...'; + + $http.post('/add-msg.py', message, { headers: headers } ).success(function(response) { + $scope.status = ''; + }).error(function() { + $scope.status = 'ERROR!'; + }); + }; + } + </pre> + * + * Now we setup the mock backend and create the test specs. + * + <pre> + // testing controller + describe('MyController', function() { + var $httpBackend, $rootScope, createController; + + beforeEach(inject(function($injector) { + // Set up the mock http service responses + $httpBackend = $injector.get('$httpBackend'); + // backend definition common for all tests + $httpBackend.when('GET', '/auth.py').respond({userId: 'userX'}, {'A-Token': 'xxx'}); + + // Get hold of a scope (i.e. the root scope) + $rootScope = $injector.get('$rootScope'); + // The $controller service is used to create instances of controllers + var $controller = $injector.get('$controller'); + + createController = function() { + return $controller('MyController', {'$scope' : $rootScope }); + }; + })); + + + afterEach(function() { + $httpBackend.verifyNoOutstandingExpectation(); + $httpBackend.verifyNoOutstandingRequest(); + }); + + + it('should fetch authentication token', function() { + $httpBackend.expectGET('/auth.py'); + var controller = createController(); + $httpBackend.flush(); + }); + + + it('should send msg to server', function() { + var controller = createController(); + $httpBackend.flush(); + + // now you don’t care about the authentication, but + // the controller will still send the request and + // $httpBackend will respond without you having to + // specify the expectation and response for this request + + $httpBackend.expectPOST('/add-msg.py', 'message content').respond(201, ''); + $rootScope.saveMessage('message content'); + expect($rootScope.status).toBe('Saving...'); + $httpBackend.flush(); + expect($rootScope.status).toBe(''); + }); + + + it('should send auth header', function() { + var controller = createController(); + $httpBackend.flush(); + + $httpBackend.expectPOST('/add-msg.py', undefined, function(headers) { + // check if the header was send, if it wasn't the expectation won't + // match the request and the test will fail + return headers['Authorization'] == 'xxx'; + }).respond(201, ''); + + $rootScope.saveMessage('whatever'); + $httpBackend.flush(); + }); + }); + </pre> + */ +angular.mock.$HttpBackendProvider = function() { + this.$get = ['$rootScope', createHttpBackendMock]; +}; + +/** + * General factory function for $httpBackend mock. + * Returns instance for unit testing (when no arguments specified): + * - passing through is disabled + * - auto flushing is disabled + * + * Returns instance for e2e testing (when `$delegate` and `$browser` specified): + * - passing through (delegating request to real backend) is enabled + * - auto flushing is enabled + * + * @param {Object=} $delegate Real $httpBackend instance (allow passing through if specified) + * @param {Object=} $browser Auto-flushing enabled if specified + * @return {Object} Instance of $httpBackend mock + */ +function createHttpBackendMock($rootScope, $delegate, $browser) { + var definitions = [], + expectations = [], + responses = [], + responsesPush = angular.bind(responses, responses.push); + + function createResponse(status, data, headers) { + if (angular.isFunction(status)) return status; + + return function() { + return angular.isNumber(status) + ? [status, data, headers] + : [200, status, data]; + }; + } + + // TODO(vojta): change params to: method, url, data, headers, callback + function $httpBackend(method, url, data, callback, headers, timeout, withCredentials) { + var xhr = new MockXhr(), + expectation = expectations[0], + wasExpected = false; + + function prettyPrint(data) { + return (angular.isString(data) || angular.isFunction(data) || data instanceof RegExp) + ? data + : angular.toJson(data); + } + + function wrapResponse(wrapped) { + if (!$browser && timeout && timeout.then) timeout.then(handleTimeout); + + return handleResponse; + + function handleResponse() { + var response = wrapped.response(method, url, data, headers); + xhr.$$respHeaders = response[2]; + callback(response[0], response[1], xhr.getAllResponseHeaders()); + } + + function handleTimeout() { + for (var i = 0, ii = responses.length; i < ii; i++) { + if (responses[i] === handleResponse) { + responses.splice(i, 1); + callback(-1, undefined, ''); + break; + } + } + } + } + + if (expectation && expectation.match(method, url)) { + if (!expectation.matchData(data)) + throw new Error('Expected ' + expectation + ' with different data\n' + + 'EXPECTED: ' + prettyPrint(expectation.data) + '\nGOT: ' + data); + + if (!expectation.matchHeaders(headers)) + throw new Error('Expected ' + expectation + ' with different headers\n' + + 'EXPECTED: ' + prettyPrint(expectation.headers) + '\nGOT: ' + + prettyPrint(headers)); + + expectations.shift(); + + if (expectation.response) { + responses.push(wrapResponse(expectation)); + return; + } + wasExpected = true; + } + + var i = -1, definition; + while ((definition = definitions[++i])) { + if (definition.match(method, url, data, headers || {})) { + if (definition.response) { + // if $browser specified, we do auto flush all requests + ($browser ? $browser.defer : responsesPush)(wrapResponse(definition)); + } else if (definition.passThrough) { + $delegate(method, url, data, callback, headers, timeout, withCredentials); + } else throw new Error('No response defined !'); + return; + } + } + throw wasExpected ? + new Error('No response defined !') : + new Error('Unexpected request: ' + method + ' ' + url + '\n' + + (expectation ? 'Expected ' + expectation : 'No more request expected')); + } + + /** + * @ngdoc method + * @name ngMock.$httpBackend#when + * @methodOf ngMock.$httpBackend + * @description + * Creates a new backend definition. + * + * @param {string} method HTTP method. + * @param {string|RegExp} url HTTP url. + * @param {(string|RegExp|function(string))=} data HTTP request body or function that receives + * data string and returns true if the data is as expected. + * @param {(Object|function(Object))=} headers HTTP headers or function that receives http header + * object and returns true if the headers match the current definition. + * @returns {requestHandler} Returns an object with `respond` method that controls how a matched + * request is handled. + * + * - respond – + * `{function([status,] data[, headers])|function(function(method, url, data, headers)}` + * – The respond method takes a set of static data to be returned or a function that can return + * an array containing response status (number), response data (string) and response headers + * (Object). + */ + $httpBackend.when = function(method, url, data, headers) { + var definition = new MockHttpExpectation(method, url, data, headers), + chain = { + respond: function(status, data, headers) { + definition.response = createResponse(status, data, headers); + } + }; + + if ($browser) { + chain.passThrough = function() { + definition.passThrough = true; + }; + } + + definitions.push(definition); + return chain; + }; + + /** + * @ngdoc method + * @name ngMock.$httpBackend#whenGET + * @methodOf ngMock.$httpBackend + * @description + * Creates a new backend definition for GET requests. For more info see `when()`. + * + * @param {string|RegExp} url HTTP url. + * @param {(Object|function(Object))=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` method that control how a matched + * request is handled. + */ + + /** + * @ngdoc method + * @name ngMock.$httpBackend#whenHEAD + * @methodOf ngMock.$httpBackend + * @description + * Creates a new backend definition for HEAD requests. For more info see `when()`. + * + * @param {string|RegExp} url HTTP url. + * @param {(Object|function(Object))=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` method that control how a matched + * request is handled. + */ + + /** + * @ngdoc method + * @name ngMock.$httpBackend#whenDELETE + * @methodOf ngMock.$httpBackend + * @description + * Creates a new backend definition for DELETE requests. For more info see `when()`. + * + * @param {string|RegExp} url HTTP url. + * @param {(Object|function(Object))=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` method that control how a matched + * request is handled. + */ + + /** + * @ngdoc method + * @name ngMock.$httpBackend#whenPOST + * @methodOf ngMock.$httpBackend + * @description + * Creates a new backend definition for POST requests. For more info see `when()`. + * + * @param {string|RegExp} url HTTP url. + * @param {(string|RegExp|function(string))=} data HTTP request body or function that receives + * data string and returns true if the data is as expected. + * @param {(Object|function(Object))=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` method that control how a matched + * request is handled. + */ + + /** + * @ngdoc method + * @name ngMock.$httpBackend#whenPUT + * @methodOf ngMock.$httpBackend + * @description + * Creates a new backend definition for PUT requests. For more info see `when()`. + * + * @param {string|RegExp} url HTTP url. + * @param {(string|RegExp|function(string))=} data HTTP request body or function that receives + * data string and returns true if the data is as expected. + * @param {(Object|function(Object))=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` method that control how a matched + * request is handled. + */ + + /** + * @ngdoc method + * @name ngMock.$httpBackend#whenJSONP + * @methodOf ngMock.$httpBackend + * @description + * Creates a new backend definition for JSONP requests. For more info see `when()`. + * + * @param {string|RegExp} url HTTP url. + * @returns {requestHandler} Returns an object with `respond` method that control how a matched + * request is handled. + */ + createShortMethods('when'); + + + /** + * @ngdoc method + * @name ngMock.$httpBackend#expect + * @methodOf ngMock.$httpBackend + * @description + * Creates a new request expectation. + * + * @param {string} method HTTP method. + * @param {string|RegExp} url HTTP url. + * @param {(string|RegExp|function(string)|Object)=} data HTTP request body or function that + * receives data string and returns true if the data is as expected, or Object if request body + * is in JSON format. + * @param {(Object|function(Object))=} headers HTTP headers or function that receives http header + * object and returns true if the headers match the current expectation. + * @returns {requestHandler} Returns an object with `respond` method that control how a matched + * request is handled. + * + * - respond – + * `{function([status,] data[, headers])|function(function(method, url, data, headers)}` + * – The respond method takes a set of static data to be returned or a function that can return + * an array containing response status (number), response data (string) and response headers + * (Object). + */ + $httpBackend.expect = function(method, url, data, headers) { + var expectation = new MockHttpExpectation(method, url, data, headers); + expectations.push(expectation); + return { + respond: function(status, data, headers) { + expectation.response = createResponse(status, data, headers); + } + }; + }; + + + /** + * @ngdoc method + * @name ngMock.$httpBackend#expectGET + * @methodOf ngMock.$httpBackend + * @description + * Creates a new request expectation for GET requests. For more info see `expect()`. + * + * @param {string|RegExp} url HTTP url. + * @param {Object=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` method that control how a matched + * request is handled. See #expect for more info. + */ + + /** + * @ngdoc method + * @name ngMock.$httpBackend#expectHEAD + * @methodOf ngMock.$httpBackend + * @description + * Creates a new request expectation for HEAD requests. For more info see `expect()`. + * + * @param {string|RegExp} url HTTP url. + * @param {Object=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` method that control how a matched + * request is handled. + */ + + /** + * @ngdoc method + * @name ngMock.$httpBackend#expectDELETE + * @methodOf ngMock.$httpBackend + * @description + * Creates a new request expectation for DELETE requests. For more info see `expect()`. + * + * @param {string|RegExp} url HTTP url. + * @param {Object=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` method that control how a matched + * request is handled. + */ + + /** + * @ngdoc method + * @name ngMock.$httpBackend#expectPOST + * @methodOf ngMock.$httpBackend + * @description + * Creates a new request expectation for POST requests. For more info see `expect()`. + * + * @param {string|RegExp} url HTTP url. + * @param {(string|RegExp|function(string)|Object)=} data HTTP request body or function that + * receives data string and returns true if the data is as expected, or Object if request body + * is in JSON format. + * @param {Object=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` method that control how a matched + * request is handled. + */ + + /** + * @ngdoc method + * @name ngMock.$httpBackend#expectPUT + * @methodOf ngMock.$httpBackend + * @description + * Creates a new request expectation for PUT requests. For more info see `expect()`. + * + * @param {string|RegExp} url HTTP url. + * @param {(string|RegExp|function(string)|Object)=} data HTTP request body or function that + * receives data string and returns true if the data is as expected, or Object if request body + * is in JSON format. + * @param {Object=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` method that control how a matched + * request is handled. + */ + + /** + * @ngdoc method + * @name ngMock.$httpBackend#expectPATCH + * @methodOf ngMock.$httpBackend + * @description + * Creates a new request expectation for PATCH requests. For more info see `expect()`. + * + * @param {string|RegExp} url HTTP url. + * @param {(string|RegExp|function(string)|Object)=} data HTTP request body or function that + * receives data string and returns true if the data is as expected, or Object if request body + * is in JSON format. + * @param {Object=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` method that control how a matched + * request is handled. + */ + + /** + * @ngdoc method + * @name ngMock.$httpBackend#expectJSONP + * @methodOf ngMock.$httpBackend + * @description + * Creates a new request expectation for JSONP requests. For more info see `expect()`. + * + * @param {string|RegExp} url HTTP url. + * @returns {requestHandler} Returns an object with `respond` method that control how a matched + * request is handled. + */ + createShortMethods('expect'); + + + /** + * @ngdoc method + * @name ngMock.$httpBackend#flush + * @methodOf ngMock.$httpBackend + * @description + * Flushes all pending requests using the trained responses. + * + * @param {number=} count Number of responses to flush (in the order they arrived). If undefined, + * all pending requests will be flushed. If there are no pending requests when the flush method + * is called an exception is thrown (as this typically a sign of programming error). + */ + $httpBackend.flush = function(count) { + $rootScope.$digest(); + if (!responses.length) throw new Error('No pending request to flush !'); + + if (angular.isDefined(count)) { + while (count--) { + if (!responses.length) throw new Error('No more pending request to flush !'); + responses.shift()(); + } + } else { + while (responses.length) { + responses.shift()(); + } + } + $httpBackend.verifyNoOutstandingExpectation(); + }; + + + /** + * @ngdoc method + * @name ngMock.$httpBackend#verifyNoOutstandingExpectation + * @methodOf ngMock.$httpBackend + * @description + * Verifies that all of the requests defined via the `expect` api were made. If any of the + * requests were not made, verifyNoOutstandingExpectation throws an exception. + * + * Typically, you would call this method following each test case that asserts requests using an + * "afterEach" clause. + * + * <pre> + * afterEach($httpBackend.verifyNoOutstandingExpectation); + * </pre> + */ + $httpBackend.verifyNoOutstandingExpectation = function() { + $rootScope.$digest(); + if (expectations.length) { + throw new Error('Unsatisfied requests: ' + expectations.join(', ')); + } + }; + + + /** + * @ngdoc method + * @name ngMock.$httpBackend#verifyNoOutstandingRequest + * @methodOf ngMock.$httpBackend + * @description + * Verifies that there are no outstanding requests that need to be flushed. + * + * Typically, you would call this method following each test case that asserts requests using an + * "afterEach" clause. + * + * <pre> + * afterEach($httpBackend.verifyNoOutstandingRequest); + * </pre> + */ + $httpBackend.verifyNoOutstandingRequest = function() { + if (responses.length) { + throw new Error('Unflushed requests: ' + responses.length); + } + }; + + + /** + * @ngdoc method + * @name ngMock.$httpBackend#resetExpectations + * @methodOf ngMock.$httpBackend + * @description + * Resets all request expectations, but preserves all backend definitions. Typically, you would + * call resetExpectations during a multiple-phase test when you want to reuse the same instance of + * $httpBackend mock. + */ + $httpBackend.resetExpectations = function() { + expectations.length = 0; + responses.length = 0; + }; + + return $httpBackend; + + + function createShortMethods(prefix) { + angular.forEach(['GET', 'DELETE', 'JSONP'], function(method) { + $httpBackend[prefix + method] = function(url, headers) { + return $httpBackend[prefix](method, url, undefined, headers); + }; + }); + + angular.forEach(['PUT', 'POST', 'PATCH'], function(method) { + $httpBackend[prefix + method] = function(url, data, headers) { + return $httpBackend[prefix](method, url, data, headers); + }; + }); + } +} + +function MockHttpExpectation(method, url, data, headers) { + + this.data = data; + this.headers = headers; + + this.match = function(m, u, d, h) { + if (method != m) return false; + if (!this.matchUrl(u)) return false; + if (angular.isDefined(d) && !this.matchData(d)) return false; + if (angular.isDefined(h) && !this.matchHeaders(h)) return false; + return true; + }; + + this.matchUrl = function(u) { + if (!url) return true; + if (angular.isFunction(url.test)) return url.test(u); + return url == u; + }; + + this.matchHeaders = function(h) { + if (angular.isUndefined(headers)) return true; + if (angular.isFunction(headers)) return headers(h); + return angular.equals(headers, h); + }; + + this.matchData = function(d) { + if (angular.isUndefined(data)) return true; + if (data && angular.isFunction(data.test)) return data.test(d); + if (data && angular.isFunction(data)) return data(d); + if (data && !angular.isString(data)) return angular.toJson(data) == d; + return data == d; + }; + + this.toString = function() { + return method + ' ' + url; + }; +} + +function MockXhr() { + + // hack for testing $http, $httpBackend + MockXhr.$$lastInstance = this; + + this.open = function(method, url, async) { + this.$$method = method; + this.$$url = url; + this.$$async = async; + this.$$reqHeaders = {}; + this.$$respHeaders = {}; + }; + + this.send = function(data) { + this.$$data = data; + }; + + this.setRequestHeader = function(key, value) { + this.$$reqHeaders[key] = value; + }; + + this.getResponseHeader = function(name) { + // the lookup must be case insensitive, + // that's why we try two quick lookups first and full scan last + var header = this.$$respHeaders[name]; + if (header) return header; + + name = angular.lowercase(name); + header = this.$$respHeaders[name]; + if (header) return header; + + header = undefined; + angular.forEach(this.$$respHeaders, function(headerVal, headerName) { + if (!header && angular.lowercase(headerName) == name) header = headerVal; + }); + return header; + }; + + this.getAllResponseHeaders = function() { + var lines = []; + + angular.forEach(this.$$respHeaders, function(value, key) { + lines.push(key + ': ' + value); + }); + return lines.join('\n'); + }; + + this.abort = angular.noop; +} + + +/** + * @ngdoc function + * @name ngMock.$timeout + * @description + * + * This service is just a simple decorator for {@link ng.$timeout $timeout} service + * that adds a "flush" and "verifyNoPendingTasks" methods. + */ + +angular.mock.$TimeoutDecorator = function($delegate, $browser) { + + /** + * @ngdoc method + * @name ngMock.$timeout#flush + * @methodOf ngMock.$timeout + * @description + * + * Flushes the queue of pending tasks. + * + * @param {number=} delay maximum timeout amount to flush up until + */ + $delegate.flush = function(delay) { + $browser.defer.flush(delay); + }; + + /** + * @ngdoc method + * @name ngMock.$timeout#flushNext + * @methodOf ngMock.$timeout + * @description + * + * Flushes the next timeout in the queue and compares it to the provided delay + * + * @param {number=} expectedDelay the delay value that will be asserted against the delay of the + * next timeout function + */ + $delegate.flushNext = function(expectedDelay) { + $browser.defer.flushNext(expectedDelay); + }; + + /** + * @ngdoc method + * @name ngMock.$timeout#verifyNoPendingTasks + * @methodOf ngMock.$timeout + * @description + * + * Verifies that there are no pending tasks that need to be flushed. + */ + $delegate.verifyNoPendingTasks = function() { + if ($browser.deferredFns.length) { + throw new Error('Deferred tasks to flush (' + $browser.deferredFns.length + '): ' + + formatPendingTasksAsString($browser.deferredFns)); + } + }; + + function formatPendingTasksAsString(tasks) { + var result = []; + angular.forEach(tasks, function(task) { + result.push('{id: ' + task.id + ', ' + 'time: ' + task.time + '}'); + }); + + return result.join(', '); + } + + return $delegate; +}; + +/** + * + */ +angular.mock.$RootElementProvider = function() { + this.$get = function() { + return angular.element('<div ng-app></div>'); + }; +}; + +/** + * @ngdoc overview + * @name ngMock + * @description + * + * # ngMock + * + * The `ngMock` module providers support to inject and mock Angular services into unit tests. + * In addition, ngMock also extends various core ng services such that they can be + * inspected and controlled in a synchronous manner within test code. + * + * {@installModule mocks} + * + * <div doc-module-components="ngMock"></div> + * + */ +angular.module('ngMock', ['ng']).provider({ + $browser: angular.mock.$BrowserProvider, + $exceptionHandler: angular.mock.$ExceptionHandlerProvider, + $log: angular.mock.$LogProvider, + $interval: angular.mock.$IntervalProvider, + $httpBackend: angular.mock.$HttpBackendProvider, + $rootElement: angular.mock.$RootElementProvider +}).config(['$provide', function($provide) { + $provide.decorator('$timeout', angular.mock.$TimeoutDecorator); +}]); + +/** + * @ngdoc overview + * @name ngMockE2E + * @description + * + * The `ngMockE2E` is an angular module which contains mocks suitable for end-to-end testing. + * Currently there is only one mock present in this module - + * the {@link ngMockE2E.$httpBackend e2e $httpBackend} mock. + */ +angular.module('ngMockE2E', ['ng']).config(['$provide', function($provide) { + $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator); +}]); + +/** + * @ngdoc object + * @name ngMockE2E.$httpBackend + * @description + * Fake HTTP backend implementation suitable for end-to-end testing or backend-less development of + * applications that use the {@link ng.$http $http service}. + * + * *Note*: For fake http backend implementation suitable for unit testing please see + * {@link ngMock.$httpBackend unit-testing $httpBackend mock}. + * + * This implementation can be used to respond with static or dynamic responses via the `when` api + * and its shortcuts (`whenGET`, `whenPOST`, etc) and optionally pass through requests to the + * real $httpBackend for specific requests (e.g. to interact with certain remote apis or to fetch + * templates from a webserver). + * + * As opposed to unit-testing, in an end-to-end testing scenario or in scenario when an application + * is being developed with the real backend api replaced with a mock, it is often desirable for + * certain category of requests to bypass the mock and issue a real http request (e.g. to fetch + * templates or static files from the webserver). To configure the backend with this behavior + * use the `passThrough` request handler of `when` instead of `respond`. + * + * Additionally, we don't want to manually have to flush mocked out requests like we do during unit + * testing. For this reason the e2e $httpBackend automatically flushes mocked out requests + * automatically, closely simulating the behavior of the XMLHttpRequest object. + * + * To setup the application to run with this http backend, you have to create a module that depends + * on the `ngMockE2E` and your application modules and defines the fake backend: + * + * <pre> + * myAppDev = angular.module('myAppDev', ['myApp', 'ngMockE2E']); + * myAppDev.run(function($httpBackend) { + * phones = [{name: 'phone1'}, {name: 'phone2'}]; + * + * // returns the current list of phones + * $httpBackend.whenGET('/phones').respond(phones); + * + * // adds a new phone to the phones array + * $httpBackend.whenPOST('/phones').respond(function(method, url, data) { + * phones.push(angular.fromJson(data)); + * }); + * $httpBackend.whenGET(/^\/templates\//).passThrough(); + * //... + * }); + * </pre> + * + * Afterwards, bootstrap your app with this new module. + */ + +/** + * @ngdoc method + * @name ngMockE2E.$httpBackend#when + * @methodOf ngMockE2E.$httpBackend + * @description + * Creates a new backend definition. + * + * @param {string} method HTTP method. + * @param {string|RegExp} url HTTP url. + * @param {(string|RegExp)=} data HTTP request body. + * @param {(Object|function(Object))=} headers HTTP headers or function that receives http header + * object and returns true if the headers match the current definition. + * @returns {requestHandler} Returns an object with `respond` and `passThrough` methods that + * control how a matched request is handled. + * + * - respond – + * `{function([status,] data[, headers])|function(function(method, url, data, headers)}` + * – The respond method takes a set of static data to be returned or a function that can return + * an array containing response status (number), response data (string) and response headers + * (Object). + * - passThrough – `{function()}` – Any request matching a backend definition with `passThrough` + * handler, will be pass through to the real backend (an XHR request will be made to the + * server. + */ + +/** + * @ngdoc method + * @name ngMockE2E.$httpBackend#whenGET + * @methodOf ngMockE2E.$httpBackend + * @description + * Creates a new backend definition for GET requests. For more info see `when()`. + * + * @param {string|RegExp} url HTTP url. + * @param {(Object|function(Object))=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` and `passThrough` methods that + * control how a matched request is handled. + */ + +/** + * @ngdoc method + * @name ngMockE2E.$httpBackend#whenHEAD + * @methodOf ngMockE2E.$httpBackend + * @description + * Creates a new backend definition for HEAD requests. For more info see `when()`. + * + * @param {string|RegExp} url HTTP url. + * @param {(Object|function(Object))=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` and `passThrough` methods that + * control how a matched request is handled. + */ + +/** + * @ngdoc method + * @name ngMockE2E.$httpBackend#whenDELETE + * @methodOf ngMockE2E.$httpBackend + * @description + * Creates a new backend definition for DELETE requests. For more info see `when()`. + * + * @param {string|RegExp} url HTTP url. + * @param {(Object|function(Object))=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` and `passThrough` methods that + * control how a matched request is handled. + */ + +/** + * @ngdoc method + * @name ngMockE2E.$httpBackend#whenPOST + * @methodOf ngMockE2E.$httpBackend + * @description + * Creates a new backend definition for POST requests. For more info see `when()`. + * + * @param {string|RegExp} url HTTP url. + * @param {(string|RegExp)=} data HTTP request body. + * @param {(Object|function(Object))=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` and `passThrough` methods that + * control how a matched request is handled. + */ + +/** + * @ngdoc method + * @name ngMockE2E.$httpBackend#whenPUT + * @methodOf ngMockE2E.$httpBackend + * @description + * Creates a new backend definition for PUT requests. For more info see `when()`. + * + * @param {string|RegExp} url HTTP url. + * @param {(string|RegExp)=} data HTTP request body. + * @param {(Object|function(Object))=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` and `passThrough` methods that + * control how a matched request is handled. + */ + +/** + * @ngdoc method + * @name ngMockE2E.$httpBackend#whenPATCH + * @methodOf ngMockE2E.$httpBackend + * @description + * Creates a new backend definition for PATCH requests. For more info see `when()`. + * + * @param {string|RegExp} url HTTP url. + * @param {(string|RegExp)=} data HTTP request body. + * @param {(Object|function(Object))=} headers HTTP headers. + * @returns {requestHandler} Returns an object with `respond` and `passThrough` methods that + * control how a matched request is handled. + */ + +/** + * @ngdoc method + * @name ngMockE2E.$httpBackend#whenJSONP + * @methodOf ngMockE2E.$httpBackend + * @description + * Creates a new backend definition for JSONP requests. For more info see `when()`. + * + * @param {string|RegExp} url HTTP url. + * @returns {requestHandler} Returns an object with `respond` and `passThrough` methods that + * control how a matched request is handled. + */ +angular.mock.e2e = {}; +angular.mock.e2e.$httpBackendDecorator = + ['$rootScope', '$delegate', '$browser', createHttpBackendMock]; + + +angular.mock.clearDataCache = function() { + var key, + cache = angular.element.cache; + + for(key in cache) { + if (Object.prototype.hasOwnProperty.call(cache,key)) { + var handle = cache[key].handle; + + handle && angular.element(handle.elem).off(); + delete cache[key]; + } + } +}; + + + +(window.jasmine || window.mocha) && (function(window) { + + var currentSpec = null; + + beforeEach(function() { + currentSpec = this; + }); + + afterEach(function() { + var injector = currentSpec.$injector; + + currentSpec.$injector = null; + currentSpec.$modules = null; + currentSpec = null; + + if (injector) { + injector.get('$rootElement').off(); + injector.get('$browser').pollFns.length = 0; + } + + angular.mock.clearDataCache(); + + // clean up jquery's fragment cache + angular.forEach(angular.element.fragments, function(val, key) { + delete angular.element.fragments[key]; + }); + + MockXhr.$$lastInstance = null; + + angular.forEach(angular.callbacks, function(val, key) { + delete angular.callbacks[key]; + }); + angular.callbacks.counter = 0; + }); + + function isSpecRunning() { + return currentSpec && (window.mocha || currentSpec.queue.running); + } + + /** + * @ngdoc function + * @name angular.mock.module + * @description + * + * *NOTE*: This function is also published on window for easy access.<br> + * + * This function registers a module configuration code. It collects the configuration information + * which will be used when the injector is created by {@link angular.mock.inject inject}. + * + * See {@link angular.mock.inject inject} for usage example + * + * @param {...(string|Function|Object)} fns any number of modules which are represented as string + * aliases or as anonymous module initialization functions. The modules are used to + * configure the injector. The 'ng' and 'ngMock' modules are automatically loaded. If an + * object literal is passed they will be register as values in the module, the key being + * the module name and the value being what is returned. + */ + window.module = angular.mock.module = function() { + var moduleFns = Array.prototype.slice.call(arguments, 0); + return isSpecRunning() ? workFn() : workFn; + ///////////////////// + function workFn() { + if (currentSpec.$injector) { + throw new Error('Injector already created, can not register a module!'); + } else { + var modules = currentSpec.$modules || (currentSpec.$modules = []); + angular.forEach(moduleFns, function(module) { + if (angular.isObject(module) && !angular.isArray(module)) { + modules.push(function($provide) { + angular.forEach(module, function(value, key) { + $provide.value(key, value); + }); + }); + } else { + modules.push(module); + } + }); + } + } + }; + + /** + * @ngdoc function + * @name angular.mock.inject + * @description + * + * *NOTE*: This function is also published on window for easy access.<br> + * + * The inject function wraps a function into an injectable function. The inject() creates new + * instance of {@link AUTO.$injector $injector} per test, which is then used for + * resolving references. + * + * + * ## Resolving References (Underscore Wrapping) + * Often, we would like to inject a reference once, in a `beforeEach()` block and reuse this + * in multiple `it()` clauses. To be able to do this we must assign the reference to a variable + * that is declared in the scope of the `describe()` block. Since we would, most likely, want + * the variable to have the same name of the reference we have a problem, since the parameter + * to the `inject()` function would hide the outer variable. + * + * To help with this, the injected parameters can, optionally, be enclosed with underscores. + * These are ignored by the injector when the reference name is resolved. + * + * For example, the parameter `_myService_` would be resolved as the reference `myService`. + * Since it is available in the function body as _myService_, we can then assign it to a variable + * defined in an outer scope. + * + * ``` + * // Defined out reference variable outside + * var myService; + * + * // Wrap the parameter in underscores + * beforeEach( inject( function(_myService_){ + * myService = _myService_; + * })); + * + * // Use myService in a series of tests. + * it('makes use of myService', function() { + * myService.doStuff(); + * }); + * + * ``` + * + * See also {@link angular.mock.module angular.mock.module} + * + * ## Example + * Example of what a typical jasmine tests looks like with the inject method. + * <pre> + * + * angular.module('myApplicationModule', []) + * .value('mode', 'app') + * .value('version', 'v1.0.1'); + * + * + * describe('MyApp', function() { + * + * // You need to load modules that you want to test, + * // it loads only the "ng" module by default. + * beforeEach(module('myApplicationModule')); + * + * + * // inject() is used to inject arguments of all given functions + * it('should provide a version', inject(function(mode, version) { + * expect(version).toEqual('v1.0.1'); + * expect(mode).toEqual('app'); + * })); + * + * + * // The inject and module method can also be used inside of the it or beforeEach + * it('should override a version and test the new version is injected', function() { + * // module() takes functions or strings (module aliases) + * module(function($provide) { + * $provide.value('version', 'overridden'); // override version here + * }); + * + * inject(function(version) { + * expect(version).toEqual('overridden'); + * }); + * }); + * }); + * + * </pre> + * + * @param {...Function} fns any number of functions which will be injected using the injector. + */ + window.inject = angular.mock.inject = function() { + var blockFns = Array.prototype.slice.call(arguments, 0); + var errorForStack = new Error('Declaration Location'); + return isSpecRunning() ? workFn() : workFn; + ///////////////////// + function workFn() { + var modules = currentSpec.$modules || []; + + modules.unshift('ngMock'); + modules.unshift('ng'); + var injector = currentSpec.$injector; + if (!injector) { + injector = currentSpec.$injector = angular.injector(modules); + } + for(var i = 0, ii = blockFns.length; i < ii; i++) { + try { + /* jshint -W040 *//* Jasmine explicitly provides a `this` object when calling functions */ + injector.invoke(blockFns[i] || angular.noop, this); + /* jshint +W040 */ + } catch (e) { + if(e.stack && errorForStack) e.stack += '\n' + errorForStack.stack; + throw e; + } finally { + errorForStack = null; + } + } + } + }; +})(window); \ No newline at end of file Added: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-resource.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-resource.js (rev 0) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-resource.js 2013-11-10 11:10:19 UTC (rev 225) @@ -0,0 +1,578 @@ +/** %%Ignore-License + * @license AngularJS v1.2.0 + * (c) 2010-2012 Google, Inc. http://angularjs.org + * License: MIT + */ +(function(window, angular, undefined) {'use strict'; + +var $resourceMinErr = angular.$$minErr('$resource'); + +/** + * @ngdoc overview + * @name ngResource + * @description + * + * # ngResource + * + * The `ngResource` module provides interaction support with RESTful services + * via the $resource service. + * + * {@installModule resource} + * + * <div doc-module-components="ngResource"></div> + * + * See {@link ngResource.$resource `$resource`} for usage. + */ + +/** + * @ngdoc object + * @name ngResource.$resource + * @requires $http + * + * @description + * A factory which creates a resource object that lets you interact with + * [RESTful](http://en.wikipedia.org/wiki/Representational_State_Transfer) server-side data sources. + * + * The returned resource object has action methods which provide high-level behaviors without + * the need to interact with the low level {@link ng.$http $http} service. + * + * Requires the {@link ngResource `ngResource`} module to be installed. + * + * @param {string} url A parametrized URL template with parameters prefixed by `:` as in + * `/user/:username`. If you are using a URL with a port number (e.g. + * `http://example.com:8080/api`), it will be respected. + * + * If you are using a url with a suffix, just add the suffix, like this: + * `$resource('http://example.com/resource.json')` or `$resource('http://example.com/:id.json')` + * or even `$resource('http://example.com/resource/:resource_id.:format')` + * If the parameter before the suffix is empty, :resource_id in this case, then the `/.` will be + * collapsed down to a single `.`. If you need this sequence to appear and not collapse then you + * can escape it with `/\.`. + * + * @param {Object=} paramDefaults Default values for `url` parameters. These can be overridden in + * `actions` methods. If any of the parameter value is a function, it will be executed every time + * when a param value needs to be obtained for a request (unless the param was overridden). + * + * Each key value in the parameter object is first bound to url template if present and then any + * excess keys are appended to the url search query after the `?`. + * + * Given a template `/path/:verb` and parameter `{verb:'greet', salutation:'Hello'}` results in + * URL `/path/greet?salutation=Hello`. + * + * If the parameter value is prefixed with `@` then the value of that parameter is extracted from + * the data object (useful for non-GET operations). + * + * @param {Object.<Object>=} actions Hash with declaration of custom action that should extend the + * default set of resource actions. The declaration should be created in the format of {@link + * ng.$http#usage_parameters $http.config}: + * + * {action1: {method:?, params:?, isArray:?, headers:?, ...}, + * action2: {method:?, params:?, isArray:?, headers:?, ...}, + * ...} + * + * Where: + * + * - **`action`** – {string} – The name of action. This name becomes the name of the method on + * your resource object. + * - **`method`** – {string} – HTTP request method. Valid methods are: `GET`, `POST`, `PUT`, + * `DELETE`, and `JSONP`. + * - **`params`** – {Object=} – Optional set of pre-bound parameters for this action. If any of + * the parameter value is a function, it will be executed every time when a param value needs to + * be obtained for a request (unless the param was overridden). + * - **`url`** – {string} – action specific `url` override. The url templating is supported just + * like for the resource-level urls. + * - **`isArray`** – {boolean=} – If true then the returned object for this action is an array, + * see `returns` section. + * - **`transformRequest`** – + * `{function(data, headersGetter)|Array.<function(data, headersGetter)>}` – + * transform function or an array of such functions. The transform function takes the http + * request body and headers and returns its transformed (typically serialized) version. + * - **`transformResponse`** – + * `{function(data, headersGetter)|Array.<function(data, headersGetter)>}` – + * transform function or an array of such functions. The transform function takes the http + * response body and headers and returns its transformed (typically deserialized) version. + * - **`cache`** – `{boolean|Cache}` – If true, a default $http cache will be used to cache the + * GET request, otherwise if a cache instance built with + * {@link ng.$cacheFactory $cacheFactory}, this cache will be used for + * caching. + * - **`timeout`** – `{number|Promise}` – timeout in milliseconds, or {@link ng.$q promise} that + * should abort the request when resolved. + * - **`withCredentials`** - `{boolean}` - whether to set the `withCredentials` flag on the + * XHR object. See {@link https://developer.mozilla.org/en/http_access_control#section_5 + * requests with credentials} for more information. + * - **`responseType`** - `{string}` - see {@link + * https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#responseType requestType}. + * - **`interceptor`** - `{Object=}` - The interceptor object has two optional methods - + * `response` and `responseError`. Both `response` and `responseError` interceptors get called + * with `http response` object. See {@link ng.$http $http interceptors}. + * + * @returns {Object} A resource "class" object with methods for the default set of resource actions + * optionally extended with custom `actions`. The default set contains these actions: + * + * { 'get': {method:'GET'}, + * 'save': {method:'POST'}, + * 'query': {method:'GET', isArray:true}, + * 'remove': {method:'DELETE'}, + * 'delete': {method:'DELETE'} }; + * + * Calling these methods invoke an {@link ng.$http} with the specified http method, + * destination and parameters. When the data is returned from the server then the object is an + * instance of the resource class. The actions `save`, `remove` and `delete` are available on it + * as methods with the `$` prefix. This allows you to easily perform CRUD operations (create, + * read, update, delete) on server-side data like this: + * <pre> + var User = $resource('/user/:userId', {userId:'@id'}); + var user = User.get({userId:123}, function() { + user.abc = true; + user.$save(); + }); + </pre> + * + * It is important to realize that invoking a $resource object method immediately returns an + * empty reference (object or array depending on `isArray`). Once the data is returned from the + * server the existing reference is populated with the actual data. This is a useful trick since + * usually the resource is assigned to a model which is then rendered by the view. Having an empty + * object results in no rendering, once the data arrives from the server then the object is + * populated with the data and the view automatically re-renders itself showing the new data. This + * means that in most case one never has to write a callback function for the action methods. + * + * The action methods on the class object or instance object can be invoked with the following + * parameters: + * + * - HTTP GET "class" actions: `Resource.action([parameters], [success], [error])` + * - non-GET "class" actions: `Resource.action([parameters], postData, [success], [error])` + * - non-GET instance actions: `instance.$action([parameters], [success], [error])` + * + * Success callback is called with (value, responseHeaders) arguments. Error callback is called + * with (httpResponse) argument. + * + * Class actions return empty instance (with additional properties below). + * Instance actions return promise of the action. + * + * The Resource instances and collection have these additional properties: + * + * - `$promise`: the {@link ng.$q promise} of the original server interaction that created this + * instance or collection. + * + * On success, the promise is resolved with the same resource instance or collection object, + * updated with data from server. This makes it easy to use in + * {@link ngRoute.$routeProvider resolve section of $routeProvider.when()} to defer view + * rendering until the resource(s) are loaded. + * + * On failure, the promise is resolved with the {@link ng.$http http response} object, without + * the `resource` property. + * + * - `$resolved`: `true` after first server interaction is completed (either with success or + * rejection), `false` before that. Knowing if the Resource has been resolved is useful in + * data-binding. + * + * @example + * + * # Credit card resource + * + * <pre> + // Define CreditCard class + var CreditCard = $resource('/user/:userId/card/:cardId', + {userId:123, cardId:'@id'}, { + charge: {method:'POST', params:{charge:true}} + }); + + // We can retrieve a collection from the server + var cards = CreditCard.query(function() { + // GET: /user/123/card + // server returns: [ {id:456, number:'1234', name:'Smith'} ]; + + var card = cards[0]; + // each item is an instance of CreditCard + expect(card instanceof CreditCard).toEqual(true); + card.name = "J. Smith"; + // non GET methods are mapped onto the instances + card.$save(); + // POST: /user/123/card/456 {id:456, number:'1234', name:'J. Smith'} + // server returns: {id:456, number:'1234', name: 'J. Smith'}; + + // our custom method is mapped as well. + card.$charge({amount:9.99}); + // POST: /user/123/card/456?amount=9.99&charge=true {id:456, number:'1234', name:'J. Smith'} + }); + + // we can create an instance as well + var newCard = new CreditCard({number:'0123'}); + newCard.name = "Mike Smith"; + newCard.$save(); + // POST: /user/123/card {number:'0123', name:'Mike Smith'} + // server returns: {id:789, number:'01234', name: 'Mike Smith'}; + expect(newCard.id).toEqual(789); + * </pre> + * + * The object returned from this function execution is a resource "class" which has "static" method + * for each action in the definition. + * + * Calling these methods invoke `$http` on the `url` template with the given `method`, `params` and + * `headers`. + * When the data is returned from the server then the object is an instance of the resource type and + * all of the non-GET methods are available with `$` prefix. This allows you to easily support CRUD + * operations (create, read, update, delete) on server-side data. + + <pre> + var User = $resource('/user/:userId', {userId:'@id'}); + var user = User.get({userId:123}, function() { + user.abc = true; + user.$save(); + }); + </pre> + * + * It's worth noting that the success callback for `get`, `query` and other methods gets passed + * in the response that came from the server as well as $http header getter function, so one + * could rewrite the above example and get access to http headers as: + * + <pre> + var User = $resource('/user/:userId', {userId:'@id'}); + User.get({userId:123}, function(u, getResponseHeaders){ + u.abc = true; + u.$save(function(u, putResponseHeaders) { + //u => saved user object + //putResponseHeaders => $http header getter + }); + }); + </pre> + + * # Buzz client + + Let's look at what a buzz client created with the `$resource` service looks like: + <doc:example> + <doc:source jsfiddle="false"> + <script> + function BuzzController($resource) { + this.userId = 'googlebuzz'; + this.Activity = $resource( + 'https://www.googleapis.com/buzz/v1/activities/:userId/:visibility/:activity…', + {alt:'json', callback:'JSON_CALLBACK'}, + { + get:{method:'JSONP', params:{visibility:'@self'}}, + replies: {method:'JSONP', params:{visibility:'@self', comments:'@comments'}} + } + ); + } + + BuzzController.prototype = { + fetch: function() { + this.activities = this.Activity.get({userId:this.userId}); + }, + expandReplies: function(activity) { + activity.replies = this.Activity.replies({userId:this.userId, activityId:activity.id}); + } + }; + BuzzController.$inject = ['$resource']; + </script> + + <div ng-controller="BuzzController"> + <input ng-model="userId"/> + <button ng-click="fetch()">fetch</button> + <hr/> + <div ng-repeat="item in activities.data.items"> + <h1 style="font-size: 15px;"> + <img src="{{item.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/> + <a href="{{item.actor.profileUrl}}">{{item.actor.name}}</a> + <a href ng-click="expandReplies(item)" style="float: right;">Expand replies: + {{item.links.replies[0].count}}</a> + </h1> + {{item.object.content | html}} + <div ng-repeat="reply in item.replies.data.items" style="margin-left: 20px;"> + <img src="{{reply.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/> + <a href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a>: {{reply.content | html}} + </div> + </div> + </div> + </doc:source> + <doc:scenario> + </doc:scenario> + </doc:example> + */ +angular.module('ngResource', ['ng']). + factory('$resource', ['$http', '$parse', '$q', function($http, $parse, $q) { + var DEFAULT_ACTIONS = { + 'get': {method:'GET'}, + 'save': {method:'POST'}, + 'query': {method:'GET', isArray:true}, + 'remove': {method:'DELETE'}, + 'delete': {method:'DELETE'} + }; + var noop = angular.noop, + forEach = angular.forEach, + extend = angular.extend, + copy = angular.copy, + isFunction = angular.isFunction, + getter = function(obj, path) { + return $parse(path)(obj); + }; + + /** + * We need our custom method because encodeURIComponent is too aggressive and doesn't follow + * http://www.ietf.org/rfc/rfc3986.txt with regards to the character set (pchar) allowed in path + * segments: + * segment = *pchar + * pchar = unreserved / pct-encoded / sub-delims / ":" / "@" + * pct-encoded = "%" HEXDIG HEXDIG + * unreserved = ALPHA / DIGIT / "-" / "." / "_" / "~" + * sub-delims = "!" / "$" / "&" / "'" / "(" / ")" + * / "*" / "+" / "," / ";" / "=" + */ + function encodeUriSegment(val) { + return encodeUriQuery(val, true). + replace(/%26/gi, '&'). + replace(/%3D/gi, '='). + replace(/%2B/gi, '+'); + } + + + /** + * This method is intended for encoding *key* or *value* parts of query component. We need a + * custom method because encodeURIComponent is too aggressive and encodes stuff that doesn't + * have to be encoded per http://tools.ietf.org/html/rfc3986: + * query = *( pchar / "/" / "?" ) + * pchar = unreserved / pct-encoded / sub-delims / ":" / "@" + * unreserved = ALPHA / DIGIT / "-" / "." / "_" / "~" + * pct-encoded = "%" HEXDIG HEXDIG + * sub-delims = "!" / "$" / "&" / "'" / "(" / ")" + * / "*" / "+" / "," / ";" / "=" + */ + function encodeUriQuery(val, pctEncodeSpaces) { + return encodeURIComponent(val). + replace(/%40/gi, '@'). + replace(/%3A/gi, ':'). + replace(/%24/g, '$'). + replace(/%2C/gi, ','). + replace(/%20/g, (pctEncodeSpaces ? '%20' : '+')); + } + + function Route(template, defaults) { + this.template = template; + this.defaults = defaults || {}; + this.urlParams = {}; + } + + Route.prototype = { + setUrlParams: function(config, params, actionUrl) { + var self = this, + url = actionUrl || self.template, + val, + encodedVal; + + var urlParams = self.urlParams = {}; + forEach(url.split(/\W/), function(param){ + if (param === 'hasOwnProperty') { + throw $resourceMinErr('badname', "hasOwnProperty is not a valid parameter name."); + } + if (!(new RegExp("^\\d+$").test(param)) && param && + (new RegExp("(^|[^\\\\]):" + param + "(\\W|$)").test(url))) { + urlParams[param] = true; + } + }); + url = url.replace(/\\:/g, ':'); + + params = params || {}; + forEach(self.urlParams, function(_, urlParam){ + val = params.hasOwnProperty(urlParam) ? params[urlParam] : self.defaults[urlParam]; + if (angular.isDefined(val) && val !== null) { + encodedVal = encodeUriSegment(val); + url = url.replace(new RegExp(":" + urlParam + "(\\W|$)", "g"), encodedVal + "$1"); + } else { + url = url.replace(new RegExp("(\/?):" + urlParam + "(\\W|$)", "g"), function(match, + leadingSlashes, tail) { + if (tail.charAt(0) == '/') { + return tail; + } else { + return leadingSlashes + tail; + } + }); + } + }); + + // strip trailing slashes and set the url + url = url.replace(/\/+$/, ''); + // then replace collapse `/.` if found in the last URL path segment before the query + // E.g. `http://url.com/id./format?q=x` becomes `http://url.com/id.format?q=x` + url = url.replace(/\/\.(?=\w+($|\?))/, '.'); + // replace escaped `/\.` with `/.` + config.url = url.replace(/\/\\\./, '/.'); + + + // set params - delegate param encoding to $http + forEach(params, function(value, key){ + if (!self.urlParams[key]) { + config.params = config.params || {}; + config.params[key] = value; + } + }); + } + }; + + + function resourceFactory(url, paramDefaults, actions) { + var route = new Route(url); + + actions = extend({}, DEFAULT_ACTIONS, actions); + + function extractParams(data, actionParams){ + var ids = {}; + actionParams = extend({}, paramDefaults, actionParams); + forEach(actionParams, function(value, key){ + if (isFunction(value)) { value = value(); } + ids[key] = value && value.charAt && value.charAt(0) == '@' ? + getter(data, value.substr(1)) : value; + }); + return ids; + } + + function defaultResponseInterceptor(response) { + return response.resource; + } + + function Resource(value){ + copy(value || {}, this); + } + + forEach(actions, function(action, name) { + var hasBody = /^(POST|PUT|PATCH)$/i.test(action.method); + + Resource[name] = function(a1, a2, a3, a4) { + var params = {}, data, success, error; + + /* jshint -W086 */ /* (purposefully fall through case statements) */ + switch(arguments.length) { + case 4: + error = a4; + success = a3; + //fallthrough + case 3: + case 2: + if (isFunction(a2)) { + if (isFunction(a1)) { + success = a1; + error = a2; + break; + } + + success = a2; + error = a3; + //fallthrough + } else { + params = a1; + data = a2; + success = a3; + break; + } + case 1: + if (isFunction(a1)) success = a1; + else if (hasBody) data = a1; + else params = a1; + break; + case 0: break; + default: + throw $resourceMinErr('badargs', + "Expected up to 4 arguments [params, data, success, error], got {0} arguments", + arguments.length); + } + /* jshint +W086 */ /* (purposefully fall through case statements) */ + + var isInstanceCall = data instanceof Resource; + var value = isInstanceCall ? data : (action.isArray ? [] : new Resource(data)); + var httpConfig = {}; + var responseInterceptor = action.interceptor && action.interceptor.response || + defaultResponseInterceptor; + var responseErrorInterceptor = action.interceptor && action.interceptor.responseError || + undefined; + + forEach(action, function(value, key) { + if (key != 'params' && key != 'isArray' && key != 'interceptor') { + httpConfig[key] = copy(value); + } + }); + + if (hasBody) httpConfig.data = data; + route.setUrlParams(httpConfig, + extend({}, extractParams(data, action.params || {}), params), + action.url); + + var promise = $http(httpConfig).then(function(response) { + var data = response.data, + promise = value.$promise; + + if (data) { + // Need to convert action.isArray to boolean in case it is undefined + // jshint -W018 + if ( angular.isArray(data) !== (!!action.isArray) ) { + throw $resourceMinErr('badcfg', 'Error in resource configuration. Expected ' + + 'response to contain an {0} but got an {1}', + action.isArray?'array':'object', angular.isArray(data)?'array':'object'); + } + // jshint +W018 + if (action.isArray) { + value.length = 0; + forEach(data, function(item) { + value.push(new Resource(item)); + }); + } else { + copy(data, value); + value.$promise = promise; + } + } + + value.$resolved = true; + + response.resource = value; + + return response; + }, function(response) { + value.$resolved = true; + + (error||noop)(response); + + return $q.reject(response); + }); + + promise = promise.then( + function(response) { + var value = responseInterceptor(response); + (success||noop)(value, response.headers); + return value; + }, + responseErrorInterceptor); + + if (!isInstanceCall) { + // we are creating instance / collection + // - set the initial promise + // - return the instance / collection + value.$promise = promise; + value.$resolved = false; + + return value; + } + + // instance call + return promise; + }; + + + Resource.prototype['$' + name] = function(params, success, error) { + if (isFunction(params)) { + error = success; success = params; params = {}; + } + var result = Resource[name](params, this, success, error); + return result.$promise || result; + }; + }); + + Resource.bind = function(additionalParamDefaults){ + return resourceFactory(url, extend({}, paramDefaults, additionalParamDefaults), actions); + }; + + return Resource; + } + + return resourceFactory; + }]); + + +})(window, window.angular); Added: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-route.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-route.js (rev 0) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-route.js 2013-11-10 11:10:19 UTC (rev 225) @@ -0,0 +1,880 @@ +/** %%Ignore-License + * @license AngularJS v1.2.0 + * (c) 2010-2012 Google, Inc. http://angularjs.org + * License: MIT + */ +(function(window, angular, undefined) {'use strict'; + +/** + * @ngdoc overview + * @name ngRoute + * @description + * + * # ngRoute + * + * The `ngRoute` module provides routing and deeplinking services and directives for angular apps. + * + * {@installModule route} + * + * <div doc-module-components="ngRoute"></div> + */ + /* global -ngRouteModule */ +var ngRouteModule = angular.module('ngRoute', ['ng']). + provider('$route', $RouteProvider); + +/** + * @ngdoc object + * @name ngRoute.$routeProvider + * @function + * + * @description + * + * Used for configuring routes. See {@link ngRoute.$route $route} for an example. + * + * Requires the {@link ngRoute `ngRoute`} module to be installed. + */ +function $RouteProvider(){ + function inherit(parent, extra) { + return angular.extend(new (angular.extend(function() {}, {prototype:parent}))(), extra); + } + + var routes = {}; + + /** + * @ngdoc method + * @name ngRoute.$routeProvider#when + * @methodOf ngRoute.$routeProvider + * + * @param {string} path Route path (matched against `$location.path`). If `$location.path` + * contains redundant trailing slash or is missing one, the route will still match and the + * `$location.path` will be updated to add or drop the trailing slash to exactly match the + * route definition. + * + * * `path` can contain named groups starting with a colon (`:name`). All characters up + * to the next slash are matched and stored in `$routeParams` under the given `name` + * when the route matches. + * * `path` can contain named groups starting with a colon and ending with a star (`:name*`). + * All characters are eagerly stored in `$routeParams` under the given `name` + * when the route matches. + * * `path` can contain optional named groups with a question mark (`:name?`). + * + * For example, routes like `/color/:color/largecode/:largecode*\/edit` will match + * `/color/brown/largecode/code/with/slashs/edit` and extract: + * + * * `color: brown` + * * `largecode: code/with/slashs`. + * + * + * @param {Object} route Mapping information to be assigned to `$route.current` on route + * match. + * + * Object properties: + * + * - `controller` – `{(string|function()=}` – Controller fn that should be associated with + * newly created scope or the name of a {@link angular.Module#controller registered + * controller} if passed as a string. + * - `controllerAs` – `{string=}` – A controller alias name. If present the controller will be + * published to scope under the `controllerAs` name. + * - `template` – `{string=|function()=}` – html template as a string or a function that + * returns an html template as a string which should be used by {@link + * ngRoute.directive:ngView ngView} or {@link ng.directive:ngInclude ngInclude} directives. + * This property takes precedence over `templateUrl`. + * + * If `template` is a function, it will be called with the following parameters: + * + * - `{Array.<Object>}` - route parameters extracted from the current + * `$location.path()` by applying the current route + * + * - `templateUrl` – `{string=|function()=}` – path or function that returns a path to an html + * template that should be used by {@link ngRoute.directive:ngView ngView}. + * + * If `templateUrl` is a function, it will be called with the following parameters: + * + * - `{Array.<Object>}` - route parameters extracted from the current + * `$location.path()` by applying the current route + * + * - `resolve` - `{Object.<string, function>=}` - An optional map of dependencies which should + * be injected into the controller. If any of these dependencies are promises, the router + * will wait for them all to be resolved or one to be rejected before the controller is + * instantiated. + * If all the promises are resolved successfully, the values of the resolved promises are + * injected and {@link ngRoute.$route#$routeChangeSuccess $routeChangeSuccess} event is + * fired. If any of the promises are rejected the + * {@link ngRoute.$route#$routeChangeError $routeChangeError} event is fired. The map object + * is: + * + * - `key` – `{string}`: a name of a dependency to be injected into the controller. + * - `factory` - `{string|function}`: If `string` then it is an alias for a service. + * Otherwise if function, then it is {@link api/AUTO.$injector#invoke injected} + * and the return value is treated as the dependency. If the result is a promise, it is + * resolved before its value is injected into the controller. Be aware that + * `ngRoute.$routeParams` will still refer to the previous route within these resolve + * functions. Use `$route.current.params` to access the new route parameters, instead. + * + * - `redirectTo` – {(string|function())=} – value to update + * {@link ng.$location $location} path with and trigger route redirection. + * + * If `redirectTo` is a function, it will be called with the following parameters: + * + * - `{Object.<string>}` - route parameters extracted from the current + * `$location.path()` by applying the current route templateUrl. + * - `{string}` - current `$location.path()` + * - `{Object}` - current `$location.search()` + * + * The custom `redirectTo` function is expected to return a string which will be used + * to update `$location.path()` and `$location.search()`. + * + * - `[reloadOnSearch=true]` - {boolean=} - reload route when only `$location.search()` + * or `$location.hash()` changes. + * + * If the option is set to `false` and url in the browser changes, then + * `$routeUpdate` event is broadcasted on the root scope. + * + * - `[caseInsensitiveMatch=false]` - {boolean=} - match routes without being case sensitive + * + * If the option is set to `true`, then the particular route can be matched without being + * case sensitive + * + * @returns {Object} self + * + * @description + * Adds a new route definition to the `$route` service. + */ + this.when = function(path, route) { + routes[path] = angular.extend( + {reloadOnSearch: true}, + route, + path && pathRegExp(path, route) + ); + + // create redirection for trailing slashes + if (path) { + var redirectPath = (path[path.length-1] == '/') + ? path.substr(0, path.length-1) + : path +'/'; + + routes[redirectPath] = angular.extend( + {redirectTo: path}, + pathRegExp(redirectPath, route) + ); + } + + return this; + }; + + /** + * @param path {string} path + * @param opts {Object} options + * @return {?Object} + * + * @description + * Normalizes the given path, returning a regular expression + * and the original path. + * + * Inspired by pathRexp in visionmedia/express/lib/utils.js. + */ + function pathRegExp(path, opts) { + var insensitive = opts.caseInsensitiveMatch, + ret = { + originalPath: path, + regexp: path + }, + keys = ret.keys = []; + + path = path + .replace(/([().])/g, '\\$1') + .replace(/(\/)?:(\w+)([\?|\*])?/g, function(_, slash, key, option){ + var optional = option === '?' ? option : null; + var star = option === '*' ? option : null; + keys.push({ name: key, optional: !!optional }); + slash = slash || ''; + return '' + + (optional ? '' : slash) + + '(?:' + + (optional ? slash : '') + + (star && '(.+?)' || '([^/]+)') + + (optional || '') + + ')' + + (optional || ''); + }) + .replace(/([\/$\*])/g, '\\$1'); + + ret.regexp = new RegExp('^' + path + '$', insensitive ? 'i' : ''); + return ret; + } + + /** + * @ngdoc method + * @name ngRoute.$routeProvider#otherwise + * @methodOf ngRoute.$routeProvider + * + * @description + * Sets route definition that will be used on route change when no other route definition + * is matched. + * + * @param {Object} params Mapping information to be assigned to `$route.current`. + * @returns {Object} self + */ + this.otherwise = function(params) { + this.when(null, params); + return this; + }; + + + this.$get = ['$rootScope', + '$location', + '$routeParams', + '$q', + '$injector', + '$http', + '$templateCache', + '$sce', + function($rootScope, $location, $routeParams, $q, $injector, $http, $templateCache, $sce) { + + /** + * @ngdoc object + * @name ngRoute.$route + * @requires $location + * @requires $routeParams + * + * @property {Object} current Reference to the current route definition. + * The route definition contains: + * + * - `controller`: The controller constructor as define in route definition. + * - `locals`: A map of locals which is used by {@link ng.$controller $controller} service for + * controller instantiation. The `locals` contain + * the resolved values of the `resolve` map. Additionally the `locals` also contain: + * + * - `$scope` - The current route scope. + * - `$template` - The current route template HTML. + * + * @property {Array.<Object>} routes Array of all configured routes. + * + * @description + * `$route` is used for deep-linking URLs to controllers and views (HTML partials). + * It watches `$location.url()` and tries to map the path to an existing route definition. + * + * Requires the {@link ngRoute `ngRoute`} module to be installed. + * + * You can define routes through {@link ngRoute.$routeProvider $routeProvider}'s API. + * + * The `$route` service is typically used in conjunction with the + * {@link ngRoute.directive:ngView `ngView`} directive and the + * {@link ngRoute.$routeParams `$routeParams`} service. + * + * @example + This example shows how changing the URL hash causes the `$route` to match a route against the + URL, and the `ngView` pulls in the partial. + + Note that this example is using {@link ng.directive:script inlined templates} + to get it working on jsfiddle as well. + + <example module="ngViewExample" deps="angular-route.js"> + <file name="index.html"> + <div ng-controller="MainCntl"> + Choose: + <a href="Book/Moby">Moby</a> | + <a href="Book/Moby/ch/1">Moby: Ch1</a> | + <a href="Book/Gatsby">Gatsby</a> | + <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> | + <a href="Book/Scarlet">Scarlet Letter</a><br/> + + <div ng-view></div> + <hr /> + + <pre>$location.path() = {{$location.path()}}</pre> + <pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre> + <pre>$route.current.params = {{$route.current.params}}</pre> + <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre> + <pre>$routeParams = {{$routeParams}}</pre> + </div> + </file> + + <file name="book.html"> + controller: {{name}}<br /> + Book Id: {{params.bookId}}<br /> + </file> + + <file name="chapter.html"> + controller: {{name}}<br /> + Book Id: {{params.bookId}}<br /> + Chapter Id: {{params.chapterId}} + </file> + + <file name="script.js"> + angular.module('ngViewExample', ['ngRoute']) + + .config(function($routeProvider, $locationProvider) { + $routeProvider.when('/Book/:bookId', { + templateUrl: 'book.html', + controller: BookCntl, + resolve: { + // I will cause a 1 second delay + delay: function($q, $timeout) { + var delay = $q.defer(); + $timeout(delay.resolve, 1000); + return delay.promise; + } + } + }); + $routeProvider.when('/Book/:bookId/ch/:chapterId', { + templateUrl: 'chapter.html', + controller: ChapterCntl + }); + + // configure html5 to get links working on jsfiddle + $locationProvider.html5Mode(true); + }); + + function MainCntl($scope, $route, $routeParams, $location) { + $scope.$route = $route; + $scope.$location = $location; + $scope.$routeParams = $routeParams; + } + + function BookCntl($scope, $routeParams) { + $scope.name = "BookCntl"; + $scope.params = $routeParams; + } + + function ChapterCntl($scope, $routeParams) { + $scope.name = "ChapterCntl"; + $scope.params = $routeParams; + } + </file> + + <file name="scenario.js"> + it('should load and compile correct template', function() { + element('a:contains("Moby: Ch1")').click(); + var content = element('.doc-example-live [ng-view]').text(); + expect(content).toMatch(/controller\: ChapterCntl/); + expect(content).toMatch(/Book Id\: Moby/); + expect(content).toMatch(/Chapter Id\: 1/); + + element('a:contains("Scarlet")').click(); + sleep(2); // promises are not part of scenario waiting + content = element('.doc-example-live [ng-view]').text(); + expect(content).toMatch(/controller\: BookCntl/); + expect(content).toMatch(/Book Id\: Scarlet/); + }); + </file> + </example> + */ + + /** + * @ngdoc event + * @name ngRoute.$route#$routeChangeStart + * @eventOf ngRoute.$route + * @eventType broadcast on root scope + * @description + * Broadcasted before a route change. At this point the route services starts + * resolving all of the dependencies needed for the route change to occurs. + * Typically this involves fetching the view template as well as any dependencies + * defined in `resolve` route property. Once all of the dependencies are resolved + * `$routeChangeSuccess` is fired. + * + * @param {Object} angularEvent Synthetic event object. + * @param {Route} next Future route information. + * @param {Route} current Current route information. + */ + + /** + * @ngdoc event + * @name ngRoute.$route#$routeChangeSuccess + * @eventOf ngRoute.$route + * @eventType broadcast on root scope + * @description + * Broadcasted after a route dependencies are resolved. + * {@link ngRoute.directive:ngView ngView} listens for the directive + * to instantiate the controller and render the view. + * + * @param {Object} angularEvent Synthetic event object. + * @param {Route} current Current route information. + * @param {Route|Undefined} previous Previous route information, or undefined if current is + * first route entered. + */ + + /** + * @ngdoc event + * @name ngRoute.$route#$routeChangeError + * @eventOf ngRoute.$route + * @eventType broadcast on root scope + * @description + * Broadcasted if any of the resolve promises are rejected. + * + * @param {Object} angularEvent Synthetic event object + * @param {Route} current Current route information. + * @param {Route} previous Previous route information. + * @param {Route} rejection Rejection of the promise. Usually the error of the failed promise. + */ + + /** + * @ngdoc event + * @name ngRoute.$route#$routeUpdate + * @eventOf ngRoute.$route + * @eventType broadcast on root scope + * @description + * + * The `reloadOnSearch` property has been set to false, and we are reusing the same + * instance of the Controller. + */ + + var forceReload = false, + $route = { + routes: routes, + + /** + * @ngdoc method + * @name ngRoute.$route#reload + * @methodOf ngRoute.$route + * + * @description + * Causes `$route` service to reload the current route even if + * {@link ng.$location $location} hasn't changed. + * + * As a result of that, {@link ngRoute.directive:ngView ngView} + * creates new scope, reinstantiates the controller. + */ + reload: function() { + forceReload = true; + $rootScope.$evalAsync(updateRoute); + } + }; + + $rootScope.$on('$locationChangeSuccess', updateRoute); + + return $route; + + ///////////////////////////////////////////////////// + + /** + * @param on {string} current url + * @param route {Object} route regexp to match the url against + * @return {?Object} + * + * @description + * Check if the route matches the current url. + * + * Inspired by match in + * visionmedia/express/lib/router/router.js. + */ + function switchRouteMatcher(on, route) { + var keys = route.keys, + params = {}; + + if (!route.regexp) return null; + + var m = route.regexp.exec(on); + if (!m) return null; + + for (var i = 1, len = m.length; i < len; ++i) { + var key = keys[i - 1]; + + var val = 'string' == typeof m[i] + ? decodeURIComponent(m[i]) + : m[i]; + + if (key && val) { + params[key.name] = val; + } + } + return params; + } + + function updateRoute() { + var next = parseRoute(), + last = $route.current; + + if (next && last && next.$$route === last.$$route + && angular.equals(next.pathParams, last.pathParams) + && !next.reloadOnSearch && !forceReload) { + last.params = next.params; + angular.copy(last.params, $routeParams); + $rootScope.$broadcast('$routeUpdate', last); + } else if (next || last) { + forceReload = false; + $rootScope.$broadcast('$routeChangeStart', next, last); + $route.current = next; + if (next) { + if (next.redirectTo) { + if (angular.isString(next.redirectTo)) { + $location.path(interpolate(next.redirectTo, next.params)).search(next.params) + .replace(); + } else { + $location.url(next.redirectTo(next.pathParams, $location.path(), $location.search())) + .replace(); + } + } + } + + $q.when(next). + then(function() { + if (next) { + var locals = angular.extend({}, next.resolve), + template, templateUrl; + + angular.forEach(locals, function(value, key) { + locals[key] = angular.isString(value) ? + $injector.get(value) : $injector.invoke(value); + }); + + if (angular.isDefined(template = next.template)) { + if (angular.isFunction(template)) { + template = template(next.params); + } + } else if (angular.isDefined(templateUrl = next.templateUrl)) { + if (angular.isFunction(templateUrl)) { + templateUrl = templateUrl(next.params); + } + templateUrl = $sce.getTrustedResourceUrl(templateUrl); + if (angular.isDefined(templateUrl)) { + next.loadedTemplateUrl = templateUrl; + template = $http.get(templateUrl, {cache: $templateCache}). + then(function(response) { return response.data; }); + } + } + if (angular.isDefined(template)) { + locals['$template'] = template; + } + return $q.all(locals); + } + }). + // after route change + then(function(locals) { + if (next == $route.current) { + if (next) { + next.locals = locals; + angular.copy(next.params, $routeParams); + } + $rootScope.$broadcast('$routeChangeSuccess', next, last); + } + }, function(error) { + if (next == $route.current) { + $rootScope.$broadcast('$routeChangeError', next, last, error); + } + }); + } + } + + + /** + * @returns the current active route, by matching it against the URL + */ + function parseRoute() { + // Match a route + var params, match; + angular.forEach(routes, function(route, path) { + if (!match && (params = switchRouteMatcher($location.path(), route))) { + match = inherit(route, { + params: angular.extend({}, $location.search(), params), + pathParams: params}); + match.$$route = route; + } + }); + // No route matched; fallback to "otherwise" route + return match || routes[null] && inherit(routes[null], {params: {}, pathParams:{}}); + } + + /** + * @returns interpolation of the redirect path with the parameters + */ + function interpolate(string, params) { + var result = []; + angular.forEach((string||'').split(':'), function(segment, i) { + if (i === 0) { + result.push(segment); + } else { + var segmentMatch = segment.match(/(\w+)(.*)/); + var key = segmentMatch[1]; + result.push(params[key]); + result.push(segmentMatch[2] || ''); + delete params[key]; + } + }); + return result.join(''); + } + }]; +} + +ngRouteModule.provider('$routeParams', $RouteParamsProvider); + + +/** + * @ngdoc object + * @name ngRoute.$routeParams + * @requires $route + * + * @description + * The `$routeParams` service allows you to retrieve the current set of route parameters. + * + * Requires the {@link ngRoute `ngRoute`} module to be installed. + * + * The route parameters are a combination of {@link ng.$location `$location`}'s + * {@link ng.$location#methods_search `search()`} and {@link ng.$location#methods_path `path()`}. + * The `path` parameters are extracted when the {@link ngRoute.$route `$route`} path is matched. + * + * In case of parameter name collision, `path` params take precedence over `search` params. + * + * The service guarantees that the identity of the `$routeParams` object will remain unchanged + * (but its properties will likely change) even when a route change occurs. + * + * Note that the `$routeParams` are only updated *after* a route change completes successfully. + * This means that you cannot rely on `$routeParams` being correct in route resolve functions. + * Instead you can use `$route.current.params` to access the new route's parameters. + * + * @example + * <pre> + * // Given: + * // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby + * // Route: /Chapter/:chapterId/Section/:sectionId + * // + * // Then + * $routeParams ==> {chapterId:1, sectionId:2, search:'moby'} + * </pre> + */ +function $RouteParamsProvider() { + this.$get = function() { return {}; }; +} + +ngRouteModule.directive('ngView', ngViewFactory); + +/** + * @ngdoc directive + * @name ngRoute.directive:ngView + * @restrict ECA + * + * @description + * # Overview + * `ngView` is a directive that complements the {@link ngRoute.$route $route} service by + * including the rendered template of the current route into the main layout (`index.html`) file. + * Every time the current route changes, the included view changes with it according to the + * configuration of the `$route` service. + * + * Requires the {@link ngRoute `ngRoute`} module to be installed. + * + * @animations + * enter - animation is used to bring new content into the browser. + * leave - animation is used to animate existing content away. + * + * The enter and leave animation occur concurrently. + * + * @scope + * @priority 400 + * @example + <example module="ngViewExample" deps="angular-route.js" animations="true"> + <file name="index.html"> + <div ng-controller="MainCntl as main"> + Choose: + <a href="Book/Moby">Moby</a> | + <a href="Book/Moby/ch/1">Moby: Ch1</a> | + <a href="Book/Gatsby">Gatsby</a> | + <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> | + <a href="Book/Scarlet">Scarlet Letter</a><br/> + + <div class="view-animate-container"> + <div ng-view class="view-animate"></div> + </div> + <hr /> + + <pre>$location.path() = {{main.$location.path()}}</pre> + <pre>$route.current.templateUrl = {{main.$route.current.templateUrl}}</pre> + <pre>$route.current.params = {{main.$route.current.params}}</pre> + <pre>$route.current.scope.name = {{main.$route.current.scope.name}}</pre> + <pre>$routeParams = {{main.$routeParams}}</pre> + </div> + </file> + + <file name="book.html"> + <div> + controller: {{book.name}}<br /> + Book Id: {{book.params.bookId}}<br /> + </div> + </file> + + <file name="chapter.html"> + <div> + controller: {{chapter.name}}<br /> + Book Id: {{chapter.params.bookId}}<br /> + Chapter Id: {{chapter.params.chapterId}} + </div> + </file> + + <file name="animations.css"> + .view-animate-container { + position:relative; + height:100px!important; + position:relative; + background:white; + border:1px solid black; + height:40px; + overflow:hidden; + } + + .view-animate { + padding:10px; + } + + .view-animate.ng-enter, .view-animate.ng-leave { + -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; + transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; + + display:block; + width:100%; + border-left:1px solid black; + + position:absolute; + top:0; + left:0; + right:0; + bottom:0; + padding:10px; + } + + .view-animate.ng-enter { + left:100%; + } + .view-animate.ng-enter.ng-enter-active { + left:0; + } + .view-animate.ng-leave.ng-leave-active { + left:-100%; + } + </file> + + <file name="script.js"> + angular.module('ngViewExample', ['ngRoute', 'ngAnimate'], + function($routeProvider, $locationProvider) { + $routeProvider.when('/Book/:bookId', { + templateUrl: 'book.html', + controller: BookCntl, + controllerAs: 'book' + }); + $routeProvider.when('/Book/:bookId/ch/:chapterId', { + templateUrl: 'chapter.html', + controller: ChapterCntl, + controllerAs: 'chapter' + }); + + // configure html5 to get links working on jsfiddle + $locationProvider.html5Mode(true); + }); + + function MainCntl($route, $routeParams, $location) { + this.$route = $route; + this.$location = $location; + this.$routeParams = $routeParams; + } + + function BookCntl($routeParams) { + this.name = "BookCntl"; + this.params = $routeParams; + } + + function ChapterCntl($routeParams) { + this.name = "ChapterCntl"; + this.params = $routeParams; + } + </file> + + <file name="scenario.js"> + it('should load and compile correct template', function() { + element('a:contains("Moby: Ch1")').click(); + var content = element('.doc-example-live [ng-view]').text(); + expect(content).toMatch(/controller\: ChapterCntl/); + expect(content).toMatch(/Book Id\: Moby/); + expect(content).toMatch(/Chapter Id\: 1/); + + element('a:contains("Scarlet")').click(); + content = element('.doc-example-live [ng-view]').text(); + expect(content).toMatch(/controller\: BookCntl/); + expect(content).toMatch(/Book Id\: Scarlet/); + }); + </file> + </example> + */ + + +/** + * @ngdoc event + * @name ngRoute.directive:ngView#$viewContentLoaded + * @eventOf ngRoute.directive:ngView + * @eventType emit on the current ngView scope + * @description + * Emitted every time the ngView content is reloaded. + */ +ngViewFactory.$inject = ['$route', '$anchorScroll', '$compile', '$controller', '$animate']; +function ngViewFactory( $route, $anchorScroll, $compile, $controller, $animate) { + return { + restrict: 'ECA', + terminal: true, + priority: 400, + transclude: 'element', + compile: function(element, attr, linker) { + return function(scope, $element, attr) { + var currentScope, + currentElement, + autoScrollExp = attr.autoscroll, + onloadExp = attr.onload || ''; + + scope.$on('$routeChangeSuccess', update); + update(); + + function cleanupLastView() { + if (currentScope) { + currentScope.$destroy(); + currentScope = null; + } + if(currentElement) { + $animate.leave(currentElement); + currentElement = null; + } + } + + function update() { + var locals = $route.current && $route.current.locals, + template = locals && locals.$template; + + if (template) { + var newScope = scope.$new(); + linker(newScope, function(clone) { + clone.html(template); + $animate.enter(clone, null, currentElement || $element, function onNgViewEnter () { + if (angular.isDefined(autoScrollExp) + && (!autoScrollExp || scope.$eval(autoScrollExp))) { + $anchorScroll(); + } + }); + + cleanupLastView(); + + var link = $compile(clone.contents()), + current = $route.current; + + currentScope = current.scope = newScope; + currentElement = clone; + + if (current.controller) { + locals.$scope = currentScope; + var controller = $controller(current.controller, locals); + if (current.controllerAs) { + currentScope[current.controllerAs] = controller; + } + clone.data('$ngControllerController', controller); + clone.children().data('$ngControllerController', controller); + } + + link(currentScope); + currentScope.$emit('$viewContentLoaded'); + currentScope.$eval(onloadExp); + }); + } else { + cleanupLastView(); + } + } + }; + } + }; +} + + +})(window, window.angular); Added: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-sanitize.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-sanitize.js (rev 0) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-sanitize.js 2013-11-10 11:10:19 UTC (rev 225) @@ -0,0 +1,577 @@ +/** %%Ignore-License + * @license AngularJS v1.2.0 + * (c) 2010-2012 Google, Inc. http://angularjs.org + * License: MIT + */ +(function(window, angular, undefined) {'use strict'; + +var $sanitizeMinErr = angular.$$minErr('$sanitize'); + +/** + * @ngdoc overview + * @name ngSanitize + * @description + * + * # ngSanitize + * + * The `ngSanitize` module provides functionality to sanitize HTML. + * + * {@installModule sanitize} + * + * <div doc-module-components="ngSanitize"></div> + * + * See {@link ngSanitize.$sanitize `$sanitize`} for usage. + */ + +/* + * HTML Parser By Misko Hevery (misko(a)hevery.com) + * based on: HTML Parser By John Resig (ejohn.org) + * Original code by Erik Arvidsson, Mozilla Public License + * http://erik.eae.net/simplehtmlparser/simplehtmlparser.js + * + * // Use like so: + * htmlParser(htmlString, { + * start: function(tag, attrs, unary) {}, + * end: function(tag) {}, + * chars: function(text) {}, + * comment: function(text) {} + * }); + * + */ + + +/** + * @ngdoc service + * @name ngSanitize.$sanitize + * @function + * + * @description + * The input is sanitized by parsing the html into tokens. All safe tokens (from a whitelist) are + * then serialized back to properly escaped html string. This means that no unsafe input can make + * it into the returned string, however, since our parser is more strict than a typical browser + * parser, it's possible that some obscure input, which would be recognized as valid HTML by a + * browser, won't make it through the sanitizer. + * + * @param {string} html Html input. + * @returns {string} Sanitized html. + * + * @example + <doc:example module="ngSanitize"> + <doc:source> + <script> + function Ctrl($scope, $sce) { + $scope.snippet = + '<p style="color:blue">an html\n' + + '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' + + 'snippet</p>'; + $scope.deliberatelyTrustDangerousSnippet = function() { + return $sce.trustAsHtml($scope.snippet); + }; + } + </script> + <div ng-controller="Ctrl"> + Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea> + <table> + <tr> + <td>Directive</td> + <td>How</td> + <td>Source</td> + <td>Rendered</td> + </tr> + <tr id="bind-html-with-sanitize"> + <td>ng-bind-html</td> + <td>Automatically uses $sanitize</td> + <td><pre><div ng-bind-html="snippet"><br/></div></pre></td> + <td><div ng-bind-html="snippet"></div></td> + </tr> + <tr id="bind-html-with-trust"> + <td>ng-bind-html</td> + <td>Bypass $sanitize by explicitly trusting the dangerous value</td> + <td> + <pre><div ng-bind-html="deliberatelyTrustDangerousSnippet()"> +</div></pre> + </td> + <td><div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div></td> + </tr> + <tr id="bind-default"> + <td>ng-bind</td> + <td>Automatically escapes</td> + <td><pre><div ng-bind="snippet"><br/></div></pre></td> + <td><div ng-bind="snippet"></div></td> + </tr> + </table> + </div> + </doc:source> + <doc:scenario> + it('should sanitize the html snippet by default', function() { + expect(using('#bind-html-with-sanitize').element('div').html()). + toBe('<p>an html\n<em>click here</em>\nsnippet</p>'); + }); + + it('should inline raw snippet if bound to a trusted value', function() { + expect(using('#bind-html-with-trust').element("div").html()). + toBe("<p style=\"color:blue\">an html\n" + + "<em onmouseover=\"this.textContent='PWN3D!'\">click here</em>\n" + + "snippet</p>"); + }); + + it('should escape snippet without any filter', function() { + expect(using('#bind-default').element('div').html()). + toBe("<p style=\"color:blue\">an html\n" + + "<em onmouseover=\"this.textContent='PWN3D!'\">click here</em>\n" + + "snippet</p>"); + }); + + it('should update', function() { + input('snippet').enter('new <b onclick="alert(1)">text</b>'); + expect(using('#bind-html-with-sanitize').element('div').html()).toBe('new <b>text</b>'); + expect(using('#bind-html-with-trust').element('div').html()).toBe( + 'new <b onclick="alert(1)">text</b>'); + expect(using('#bind-default').element('div').html()).toBe( + "new <b onclick=\"alert(1)\">text</b>"); + }); + </doc:scenario> + </doc:example> + */ +var $sanitize = function(html) { + var buf = []; + htmlParser(html, htmlSanitizeWriter(buf)); + return buf.join(''); +}; + + +// Regular Expressions for parsing tags and attributes +var START_TAG_REGEXP = + /^<\s*([\w:-]+)((?:\s+[\w:-]+(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)\s*>/, + END_TAG_REGEXP = /^<\s*\/\s*([\w:-]+)[^>]*>/, + ATTR_REGEXP = /([\w:-]+)(?:\s*=\s*(?:(?:"((?:[^"])*)")|(?:'((?:[^'])*)')|([^>\s]+)))?/g, + BEGIN_TAG_REGEXP = /^</, + BEGING_END_TAGE_REGEXP = /^<\s*\//, + COMMENT_REGEXP = //g, + DOCTYPE_REGEXP = /<!DOCTYPE([^>]*?)>/i, + CDATA_REGEXP = /<!\[CDATA\[(.*?)]]>/g, + URI_REGEXP = /^((ftp|https?):\/\/|mailto:|tel:|#)/i, + // Match everything outside of normal chars and " (quote character) + NON_ALPHANUMERIC_REGEXP = /([^\#-~| |!])/g; + + +// Good source of info about elements and attributes +// http://dev.w3.org/html5/spec/Overview.html#semantics +// http://simon.html5.org/html-elements + +// Safe Void Elements - HTML5 +// http://dev.w3.org/html5/spec/Overview.html#void-elements +var voidElements = makeMap("area,br,col,hr,img,wbr"); + +// Elements that you can, intentionally, leave open (and which close themselves) +// http://dev.w3.org/html5/spec/Overview.html#optional-tags +var optionalEndTagBlockElements = makeMap("colgroup,dd,dt,li,p,tbody,td,tfoot,th,thead,tr"), + optionalEndTagInlineElements = makeMap("rp,rt"), + optionalEndTagElements = angular.extend({}, + optionalEndTagInlineElements, + optionalEndTagBlockElements); + +// Safe Block Elements - HTML5 +var blockElements = angular.extend({}, optionalEndTagBlockElements, makeMap("address,article," + + "aside,blockquote,caption,center,del,dir,div,dl,figure,figcaption,footer,h1,h2,h3,h4,h5," + + "h6,header,hgroup,hr,ins,map,menu,nav,ol,pre,script,section,table,ul")); + +// Inline Elements - HTML5 +var inlineElements = angular.extend({}, optionalEndTagInlineElements, makeMap("a,abbr,acronym,b," + + "bdi,bdo,big,br,cite,code,del,dfn,em,font,i,img,ins,kbd,label,map,mark,q,ruby,rp,rt,s," + + "samp,small,span,strike,strong,sub,sup,time,tt,u,var")); + + +// Special Elements (can contain anything) +var specialElements = makeMap("script,style"); + +var validElements = angular.extend({}, + voidElements, + blockElements, + inlineElements, + optionalEndTagElements); + +//Attributes that have href and hence need to be sanitized +var uriAttrs = makeMap("background,cite,href,longdesc,src,usemap"); +var validAttrs = angular.extend({}, uriAttrs, makeMap( + 'abbr,align,alt,axis,bgcolor,border,cellpadding,cellspacing,class,clear,'+ + 'color,cols,colspan,compact,coords,dir,face,headers,height,hreflang,hspace,'+ + 'ismap,lang,language,nohref,nowrap,rel,rev,rows,rowspan,rules,'+ + 'scope,scrolling,shape,span,start,summary,target,title,type,'+ + 'valign,value,vspace,width')); + +function makeMap(str) { + var obj = {}, items = str.split(','), i; + for (i = 0; i < items.length; i++) obj[items[i]] = true; + return obj; +} + + +/** + * @example + * htmlParser(htmlString, { + * start: function(tag, attrs, unary) {}, + * end: function(tag) {}, + * chars: function(text) {}, + * comment: function(text) {} + * }); + * + * @param {string} html string + * @param {object} handler + */ +function htmlParser( html, handler ) { + var index, chars, match, stack = [], last = html; + stack.last = function() { return stack[ stack.length - 1 ]; }; + + while ( html ) { + chars = true; + + // Make sure we're not in a script or style element + if ( !stack.last() || !specialElements[ stack.last() ] ) { + + // Comment + if ( html.indexOf("", index) === index) { + if (handler.comment) handler.comment( html.substring( 4, index ) ); + html = html.substring( index + 3 ); + chars = false; + } + // DOCTYPE + } else if ( DOCTYPE_REGEXP.test(html) ) { + match = html.match( DOCTYPE_REGEXP ); + + if ( match ) { + html = html.replace( match[0] , ''); + chars = false; + } + // end tag + } else if ( BEGING_END_TAGE_REGEXP.test(html) ) { + match = html.match( END_TAG_REGEXP ); + + if ( match ) { + html = html.substring( match[0].length ); + match[0].replace( END_TAG_REGEXP, parseEndTag ); + chars = false; + } + + // start tag + } else if ( BEGIN_TAG_REGEXP.test(html) ) { + match = html.match( START_TAG_REGEXP ); + + if ( match ) { + html = html.substring( match[0].length ); + match[0].replace( START_TAG_REGEXP, parseStartTag ); + chars = false; + } + } + + if ( chars ) { + index = html.indexOf("<"); + + var text = index < 0 ? html : html.substring( 0, index ); + html = index < 0 ? "" : html.substring( index ); + + if (handler.chars) handler.chars( decodeEntities(text) ); + } + + } else { + html = html.replace(new RegExp("(.*)<\\s*\\/\\s*" + stack.last() + "[^>]*>", 'i'), + function(all, text){ + text = text.replace(COMMENT_REGEXP, "$1").replace(CDATA_REGEXP, "$1"); + + if (handler.chars) handler.chars( decodeEntities(text) ); + + return ""; + }); + + parseEndTag( "", stack.last() ); + } + + if ( html == last ) { + throw $sanitizeMinErr('badparse', "The sanitizer was unable to parse the following block " + + "of html: {0}", html); + } + last = html; + } + + // Clean up any remaining tags + parseEndTag(); + + function parseStartTag( tag, tagName, rest, unary ) { + tagName = angular.lowercase(tagName); + if ( blockElements[ tagName ] ) { + while ( stack.last() && inlineElements[ stack.last() ] ) { + parseEndTag( "", stack.last() ); + } + } + + if ( optionalEndTagElements[ tagName ] && stack.last() == tagName ) { + parseEndTag( "", tagName ); + } + + unary = voidElements[ tagName ] || !!unary; + + if ( !unary ) + stack.push( tagName ); + + var attrs = {}; + + rest.replace(ATTR_REGEXP, + function(match, name, doubleQuotedValue, singleQuotedValue, unquotedValue) { + var value = doubleQuotedValue + || singleQuotedValue + || unquotedValue + || ''; + + attrs[name] = decodeEntities(value); + }); + if (handler.start) handler.start( tagName, attrs, unary ); + } + + function parseEndTag( tag, tagName ) { + var pos = 0, i; + tagName = angular.lowercase(tagName); + if ( tagName ) + // Find the closest opened tag of the same type + for ( pos = stack.length - 1; pos >= 0; pos-- ) + if ( stack[ pos ] == tagName ) + break; + + if ( pos >= 0 ) { + // Close all the open elements, up the stack + for ( i = stack.length - 1; i >= pos; i-- ) + if (handler.end) handler.end( stack[ i ] ); + + // Remove the open elements from the stack + stack.length = pos; + } + } +} + +/** + * decodes all entities into regular string + * @param value + * @returns {string} A string with decoded entities. + */ +var hiddenPre=document.createElement("pre"); +function decodeEntities(value) { + hiddenPre.innerHTML=value.replace(/</g,"<"); + return hiddenPre.innerText || hiddenPre.textContent || ''; +} + +/** + * Escapes all potentially dangerous characters, so that the + * resulting string can be safely inserted into attribute or + * element text. + * @param value + * @returns escaped text + */ +function encodeEntities(value) { + return value. + replace(/&/g, '&'). + replace(NON_ALPHANUMERIC_REGEXP, function(value){ + return '&#' + value.charCodeAt(0) + ';'; + }). + replace(/</g, '<'). + replace(/>/g, '>'); +} + +/** + * create an HTML/XML writer which writes to buffer + * @param {Array} buf use buf.jain('') to get out sanitized html string + * @returns {object} in the form of { + * start: function(tag, attrs, unary) {}, + * end: function(tag) {}, + * chars: function(text) {}, + * comment: function(text) {} + * } + */ +function htmlSanitizeWriter(buf){ + var ignore = false; + var out = angular.bind(buf, buf.push); + return { + start: function(tag, attrs, unary){ + tag = angular.lowercase(tag); + if (!ignore && specialElements[tag]) { + ignore = tag; + } + if (!ignore && validElements[tag] === true) { + out('<'); + out(tag); + angular.forEach(attrs, function(value, key){ + var lkey=angular.lowercase(key); + if (validAttrs[lkey]===true && (uriAttrs[lkey]!==true || value.match(URI_REGEXP))) { + out(' '); + out(key); + out('="'); + out(encodeEntities(value)); + out('"'); + } + }); + out(unary ? '/>' : '>'); + } + }, + end: function(tag){ + tag = angular.lowercase(tag); + if (!ignore && validElements[tag] === true) { + out('</'); + out(tag); + out('>'); + } + if (tag == ignore) { + ignore = false; + } + }, + chars: function(chars){ + if (!ignore) { + out(encodeEntities(chars)); + } + } + }; +} + + +// define ngSanitize module and register $sanitize service +angular.module('ngSanitize', []).value('$sanitize', $sanitize); + +/* global htmlSanitizeWriter: false */ + +/** + * @ngdoc filter + * @name ngSanitize.filter:linky + * @function + * + * @description + * Finds links in text input and turns them into html links. Supports http/https/ftp/mailto and + * plain email address links. + * + * Requires the {@link ngSanitize `ngSanitize`} module to be installed. + * + * @param {string} text Input text. + * @param {string} target Window (_blank|_self|_parent|_top) or named frame to open links in. + * @returns {string} Html-linkified text. + * + * @usage + <span ng-bind-html="linky_expression | linky"></span> + * + * @example + <doc:example module="ngSanitize"> + <doc:source> + <script> + function Ctrl($scope) { + $scope.snippet = + 'Pretty text with some links:\n'+ + 'http://angularjs.org/,\n'+ + 'mailto:us@somewhere.org,\n'+ + 'another(a)somewhere.org,\n'+ + 'and one more: ftp://127.0.0.1/.'; + $scope.snippetWithTarget = 'http://angularjs.org/'; + } + </script> + <div ng-controller="Ctrl"> + Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea> + <table> + <tr> + <td>Filter</td> + <td>Source</td> + <td>Rendered</td> + </tr> + <tr id="linky-filter"> + <td>linky filter</td> + <td> + <pre><div ng-bind-html="snippet | linky"><br></div></pre> + </td> + <td> + <div ng-bind-html="snippet | linky"></div> + </td> + </tr> + <tr id="linky-target"> + <td>linky target</td> + <td> + <pre><div ng-bind-html="snippetWithTarget | linky:'_blank'"><br></div></pre> + </td> + <td> + <div ng-bind-html="snippetWithTarget | linky:'_blank'"></div> + </td> + </tr> + <tr id="escaped-html"> + <td>no filter</td> + <td><pre><div ng-bind="snippet"><br></div></pre></td> + <td><div ng-bind="snippet"></div></td> + </tr> + </table> + </doc:source> + <doc:scenario> + it('should linkify the snippet with urls', function() { + expect(using('#linky-filter').binding('snippet | linky')). + toBe('Pretty text with some links:
' + + '<a href="http://angularjs.org/">http://angularjs.org/</a>,
' + + '<a href="mailto:us@somewhere.org">us(a)somewhere.org</a>,
' + + '<a href="mailto:another@somewhere.org">another(a)somewhere.org</a>,
' + + 'and one more: <a href="ftp://127.0.0.1/">ftp://127.0.0.1/</a>.'); + }); + + it ('should not linkify snippet without the linky filter', function() { + expect(using('#escaped-html').binding('snippet')). + toBe("Pretty text with some links:\n" + + "http://angularjs.org/,\n" + + "mailto:us@somewhere.org,\n" + + "another(a)somewhere.org,\n" + + "and one more: ftp://127.0.0.1/."); + }); + + it('should update', function() { + input('snippet').enter('new http://link.'); + expect(using('#linky-filter').binding('snippet | linky')). + toBe('new <a href="http://link">http://link</a>.'); + expect(using('#escaped-html').binding('snippet')).toBe('new http://link.'); + }); + + it('should work with the target property', function() { + expect(using('#linky-target').binding("snippetWithTarget | linky:'_blank'")). + toBe('<a target="_blank" href="http://angularjs.org/">http://angularjs.org/</a>'); + }); + </doc:scenario> + </doc:example> + */ +angular.module('ngSanitize').filter('linky', function() { + var LINKY_URL_REGEXP = + /((ftp|https?):\/\/|(mailto:)?[A-Za-z0-9._%+-]+@)\S*[^\s.;,(){}<>]/, + MAILTO_REGEXP = /^mailto:/; + + return function(text, target) { + if (!text) return text; + var match; + var raw = text; + var html = []; + // TODO(vojta): use $sanitize instead + var writer = htmlSanitizeWriter(html); + var url; + var i; + var properties = {}; + if (angular.isDefined(target)) { + properties.target = target; + } + while ((match = raw.match(LINKY_URL_REGEXP))) { + // We can not end in these as they are sometimes found at the end of the sentence + url = match[0]; + // if we did not match ftp/http/mailto then assume mailto + if (match[2] == match[3]) url = 'mailto:' + url; + i = match.index; + writer.chars(raw.substr(0, i)); + properties.href = url; + writer.start('a', properties); + writer.chars(match[0].replace(MAILTO_REGEXP, '')); + writer.end('a'); + raw = raw.substring(i + match[0].length); + } + writer.chars(raw); + return html.join(''); + }; +}); + + +})(window, window.angular); Added: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-touch.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-touch.js (rev 0) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular-touch.js 2013-11-10 11:10:19 UTC (rev 225) @@ -0,0 +1,563 @@ +/** %%Ignore-License + * @license AngularJS v1.2.0 + * (c) 2010-2012 Google, Inc. http://angularjs.org + * License: MIT + */ +(function(window, angular, undefined) {'use strict'; + +/** + * @ngdoc overview + * @name ngTouch + * @description + * + * # ngTouch + * + * The `ngTouch` module provides touch events and other helpers for touch-enabled devices. + * The implementation is based on jQuery Mobile touch event handling + * ([jquerymobile.com](http://jquerymobile.com/)) + * + * {@installModule touch} + * + * See {@link ngTouch.$swipe `$swipe`} for usage. + * + * <div doc-module-components="ngTouch"></div> + * + */ + +// define ngTouch module +/* global -ngTouch */ +var ngTouch = angular.module('ngTouch', []); + +/* global ngTouch: false */ + + /** + * @ngdoc object + * @name ngTouch.$swipe + * + * @description + * The `$swipe` service is a service that abstracts the messier details of hold-and-drag swipe + * behavior, to make implementing swipe-related directives more convenient. + * + * Requires the {@link ngTouch `ngTouch`} module to be installed. + * + * `$swipe` is used by the `ngSwipeLeft` and `ngSwipeRight` directives in `ngTouch`, and by + * `ngCarousel` in a separate component. + * + * # Usage + * The `$swipe` service is an object with a single method: `bind`. `bind` takes an element + * which is to be watched for swipes, and an object with four handler functions. See the + * documentation for `bind` below. + */ + +ngTouch.factory('$swipe', [function() { + // The total distance in any direction before we make the call on swipe vs. scroll. + var MOVE_BUFFER_RADIUS = 10; + + function getCoordinates(event) { + var touches = event.touches && event.touches.length ? event.touches : [event]; + var e = (event.changedTouches && event.changedTouches[0]) || + (event.originalEvent && event.originalEvent.changedTouches && + event.originalEvent.changedTouches[0]) || + touches[0].originalEvent || touches[0]; + + return { + x: e.clientX, + y: e.clientY + }; + } + + return { + /** + * @ngdoc method + * @name ngTouch.$swipe#bind + * @methodOf ngTouch.$swipe + * + * @description + * The main method of `$swipe`. It takes an element to be watched for swipe motions, and an + * object containing event handlers. + * + * The four events are `start`, `move`, `end`, and `cancel`. `start`, `move`, and `end` + * receive as a parameter a coordinates object of the form `{ x: 150, y: 310 }`. + * + * `start` is called on either `mousedown` or `touchstart`. After this event, `$swipe` is + * watching for `touchmove` or `mousemove` events. These events are ignored until the total + * distance moved in either dimension exceeds a small threshold. + * + * Once this threshold is exceeded, either the horizontal or vertical delta is greater. + * - If the horizontal distance is greater, this is a swipe and `move` and `end` events follow. + * - If the vertical distance is greater, this is a scroll, and we let the browser take over. + * A `cancel` event is sent. + * + * `move` is called on `mousemove` and `touchmove` after the above logic has determined that + * a swipe is in progress. + * + * `end` is called when a swipe is successfully completed with a `touchend` or `mouseup`. + * + * `cancel` is called either on a `touchcancel` from the browser, or when we begin scrolling + * as described above. + * + */ + bind: function(element, eventHandlers) { + // Absolute total movement, used to control swipe vs. scroll. + var totalX, totalY; + // Coordinates of the start position. + var startCoords; + // Last event's position. + var lastPos; + // Whether a swipe is active. + var active = false; + + element.on('touchstart mousedown', function(event) { + startCoords = getCoordinates(event); + active = true; + totalX = 0; + totalY = 0; + lastPos = startCoords; + eventHandlers['start'] && eventHandlers['start'](startCoords, event); + }); + + element.on('touchcancel', function(event) { + active = false; + eventHandlers['cancel'] && eventHandlers['cancel'](event); + }); + + element.on('touchmove mousemove', function(event) { + if (!active) return; + + // Android will send a touchcancel if it thinks we're starting to scroll. + // So when the total distance (+ or - or both) exceeds 10px in either direction, + // we either: + // - On totalX > totalY, we send preventDefault() and treat this as a swipe. + // - On totalY > totalX, we let the browser handle it as a scroll. + + if (!startCoords) return; + var coords = getCoordinates(event); + + totalX += Math.abs(coords.x - lastPos.x); + totalY += Math.abs(coords.y - lastPos.y); + + lastPos = coords; + + if (totalX < MOVE_BUFFER_RADIUS && totalY < MOVE_BUFFER_RADIUS) { + return; + } + + // One of totalX or totalY has exceeded the buffer, so decide on swipe vs. scroll. + if (totalY > totalX) { + // Allow native scrolling to take over. + active = false; + eventHandlers['cancel'] && eventHandlers['cancel'](event); + return; + } else { + // Prevent the browser from scrolling. + event.preventDefault(); + eventHandlers['move'] && eventHandlers['move'](coords, event); + } + }); + + element.on('touchend mouseup', function(event) { + if (!active) return; + active = false; + eventHandlers['end'] && eventHandlers['end'](getCoordinates(event), event); + }); + } + }; +}]); + +/* global ngTouch: false */ + +/** + * @ngdoc directive + * @name ngTouch.directive:ngClick + * + * @description + * A more powerful replacement for the default ngClick designed to be used on touchscreen + * devices. Most mobile browsers wait about 300ms after a tap-and-release before sending + * the click event. This version handles them immediately, and then prevents the + * following click event from propagating. + * + * Requires the {@link ngTouch `ngTouch`} module to be installed. + * + * This directive can fall back to using an ordinary click event, and so works on desktop + * browsers as well as mobile. + * + * This directive also sets the CSS class `ng-click-active` while the element is being held + * down (by a mouse click or touch) so you can restyle the depressed element if you wish. + * + * @element ANY + * @param {expression} ngClick {@link guide/expression Expression} to evaluate + * upon tap. (Event object is available as `$event`) + * + * @example + <doc:example> + <doc:source> + <button ng-click="count = count + 1" ng-init="count=0"> + Increment + </button> + count: {{ count }} + </doc:source> + </doc:example> + */ + +ngTouch.config(['$provide', function($provide) { + $provide.decorator('ngClickDirective', ['$delegate', function($delegate) { + // drop the default ngClick directive + $delegate.shift(); + return $delegate; + }]); +}]); + +ngTouch.directive('ngClick', ['$parse', '$timeout', '$rootElement', + function($parse, $timeout, $rootElement) { + var TAP_DURATION = 750; // Shorter than 750ms is a tap, longer is a taphold or drag. + var MOVE_TOLERANCE = 12; // 12px seems to work in most mobile browsers. + var PREVENT_DURATION = 2500; // 2.5 seconds maximum from preventGhostClick call to click + var CLICKBUSTER_THRESHOLD = 25; // 25 pixels in any dimension is the limit for busting clicks. + + var ACTIVE_CLASS_NAME = 'ng-click-active'; + var lastPreventedTime; + var touchCoordinates; + + + // TAP EVENTS AND GHOST CLICKS + // + // Why tap events? + // Mobile browsers detect a tap, then wait a moment (usually ~300ms) to see if you're + // double-tapping, and then fire a click event. + // + // This delay sucks and makes mobile apps feel unresponsive. + // So we detect touchstart, touchmove, touchcancel and touchend ourselves and determine when + // the user has tapped on something. + // + // What happens when the browser then generates a click event? + // The browser, of course, also detects the tap and fires a click after a delay. This results in + // tapping/clicking twice. So we do "clickbusting" to prevent it. + // + // How does it work? + // We attach global touchstart and click handlers, that run during the capture (early) phase. + // So the sequence for a tap is: + // - global touchstart: Sets an "allowable region" at the point touched. + // - element's touchstart: Starts a touch + // (- touchmove or touchcancel ends the touch, no click follows) + // - element's touchend: Determines if the tap is valid (didn't move too far away, didn't hold + // too long) and fires the user's tap handler. The touchend also calls preventGhostClick(). + // - preventGhostClick() removes the allowable region the global touchstart created. + // - The browser generates a click event. + // - The global click handler catches the click, and checks whether it was in an allowable region. + // - If preventGhostClick was called, the region will have been removed, the click is busted. + // - If the region is still there, the click proceeds normally. Therefore clicks on links and + // other elements without ngTap on them work normally. + // + // This is an ugly, terrible hack! + // Yeah, tell me about it. The alternatives are using the slow click events, or making our users + // deal with the ghost clicks, so I consider this the least of evils. Fortunately Angular + // encapsulates this ugly logic away from the user. + // + // Why not just put click handlers on the element? + // We do that too, just to be sure. The problem is that the tap event might have caused the DOM + // to change, so that the click fires in the same position but something else is there now. So + // the handlers are global and care only about coordinates and not elements. + + // Checks if the coordinates are close enough to be within the region. + function hit(x1, y1, x2, y2) { + return Math.abs(x1 - x2) < CLICKBUSTER_THRESHOLD && Math.abs(y1 - y2) < CLICKBUSTER_THRESHOLD; + } + + // Checks a list of allowable regions against a click location. + // Returns true if the click should be allowed. + // Splices out the allowable region from the list after it has been used. + function checkAllowableRegions(touchCoordinates, x, y) { + for (var i = 0; i < touchCoordinates.length; i += 2) { + if (hit(touchCoordinates[i], touchCoordinates[i+1], x, y)) { + touchCoordinates.splice(i, i + 2); + return true; // allowable region + } + } + return false; // No allowable region; bust it. + } + + // Global click handler that prevents the click if it's in a bustable zone and preventGhostClick + // was called recently. + function onClick(event) { + if (Date.now() - lastPreventedTime > PREVENT_DURATION) { + return; // Too old. + } + + var touches = event.touches && event.touches.length ? event.touches : [event]; + var x = touches[0].clientX; + var y = touches[0].clientY; + // Work around desktop Webkit quirk where clicking a label will fire two clicks (on the label + // and on the input element). Depending on the exact browser, this second click we don't want + // to bust has either (0,0) or negative coordinates. + if (x < 1 && y < 1) { + return; // offscreen + } + + // Look for an allowable region containing this click. + // If we find one, that means it was created by touchstart and not removed by + // preventGhostClick, so we don't bust it. + if (checkAllowableRegions(touchCoordinates, x, y)) { + return; + } + + // If we didn't find an allowable region, bust the click. + event.stopPropagation(); + event.preventDefault(); + + // Blur focused form elements + event.target && event.target.blur(); + } + + + // Global touchstart handler that creates an allowable region for a click event. + // This allowable region can be removed by preventGhostClick if we want to bust it. + function onTouchStart(event) { + var touches = event.touches && event.touches.length ? event.touches : [event]; + var x = touches[0].clientX; + var y = touches[0].clientY; + touchCoordinates.push(x, y); + + $timeout(function() { + // Remove the allowable region. + for (var i = 0; i < touchCoordinates.length; i += 2) { + if (touchCoordinates[i] == x && touchCoordinates[i+1] == y) { + touchCoordinates.splice(i, i + 2); + return; + } + } + }, PREVENT_DURATION, false); + } + + // On the first call, attaches some event handlers. Then whenever it gets called, it creates a + // zone around the touchstart where clicks will get busted. + function preventGhostClick(x, y) { + if (!touchCoordinates) { + $rootElement[0].addEventListener('click', onClick, true); + $rootElement[0].addEventListener('touchstart', onTouchStart, true); + touchCoordinates = []; + } + + lastPreventedTime = Date.now(); + + checkAllowableRegions(touchCoordinates, x, y); + } + + // Actual linking function. + return function(scope, element, attr) { + var clickHandler = $parse(attr.ngClick), + tapping = false, + tapElement, // Used to blur the element after a tap. + startTime, // Used to check if the tap was held too long. + touchStartX, + touchStartY; + + function resetState() { + tapping = false; + element.removeClass(ACTIVE_CLASS_NAME); + } + + element.on('touchstart', function(event) { + tapping = true; + tapElement = event.target ? event.target : event.srcElement; // IE uses srcElement. + // Hack for Safari, which can target text nodes instead of containers. + if(tapElement.nodeType == 3) { + tapElement = tapElement.parentNode; + } + + element.addClass(ACTIVE_CLASS_NAME); + + startTime = Date.now(); + + var touches = event.touches && event.touches.length ? event.touches : [event]; + var e = touches[0].originalEvent || touches[0]; + touchStartX = e.clientX; + touchStartY = e.clientY; + }); + + element.on('touchmove', function(event) { + resetState(); + }); + + element.on('touchcancel', function(event) { + resetState(); + }); + + element.on('touchend', function(event) { + var diff = Date.now() - startTime; + + var touches = (event.changedTouches && event.changedTouches.length) ? event.changedTouches : + ((event.touches && event.touches.length) ? event.touches : [event]); + var e = touches[0].originalEvent || touches[0]; + var x = e.clientX; + var y = e.clientY; + var dist = Math.sqrt( Math.pow(x - touchStartX, 2) + Math.pow(y - touchStartY, 2) ); + + if (tapping && diff < TAP_DURATION && dist < MOVE_TOLERANCE) { + // Call preventGhostClick so the clickbuster will catch the corresponding click. + preventGhostClick(x, y); + + // Blur the focused element (the button, probably) before firing the callback. + // This doesn't work perfectly on Android Chrome, but seems to work elsewhere. + // I couldn't get anything to work reliably on Android Chrome. + if (tapElement) { + tapElement.blur(); + } + + if (!angular.isDefined(attr.disabled) || attr.disabled === false) { + element.triggerHandler('click', [event]); + } + } + + resetState(); + }); + + // Hack for iOS Safari's benefit. It goes searching for onclick handlers and is liable to click + // something else nearby. + element.onclick = function(event) { }; + + // Actual click handler. + // There are three different kinds of clicks, only two of which reach this point. + // - On desktop browsers without touch events, their clicks will always come here. + // - On mobile browsers, the simulated "fast" click will call this. + // - But the browser's follow-up slow click will be "busted" before it reaches this handler. + // Therefore it's safe to use this directive on both mobile and desktop. + element.on('click', function(event, touchend) { + scope.$apply(function() { + clickHandler(scope, {$event: (touchend || event)}); + }); + }); + + element.on('mousedown', function(event) { + element.addClass(ACTIVE_CLASS_NAME); + }); + + element.on('mousemove mouseup', function(event) { + element.removeClass(ACTIVE_CLASS_NAME); + }); + + }; +}]); + +/* global ngTouch: false */ + +/** + * @ngdoc directive + * @name ngTouch.directive:ngSwipeLeft + * + * @description + * Specify custom behavior when an element is swiped to the left on a touchscreen device. + * A leftward swipe is a quick, right-to-left slide of the finger. + * Though ngSwipeLeft is designed for touch-based devices, it will work with a mouse click and drag + * too. + * + * Requires the {@link ngTouch `ngTouch`} module to be installed. + * + * @element ANY + * @param {expression} ngSwipeLeft {@link guide/expression Expression} to evaluate + * upon left swipe. (Event object is available as `$event`) + * + * @example + <doc:example> + <doc:source> + <div ng-show="!showActions" ng-swipe-left="showActions = true"> + Some list content, like an email in the inbox + </div> + <div ng-show="showActions" ng-swipe-right="showActions = false"> + <button ng-click="reply()">Reply</button> + <button ng-click="delete()">Delete</button> + </div> + </doc:source> + </doc:example> + */ + +/** + * @ngdoc directive + * @name ngTouch.directive:ngSwipeRight + * + * @description + * Specify custom behavior when an element is swiped to the right on a touchscreen device. + * A rightward swipe is a quick, left-to-right slide of the finger. + * Though ngSwipeRight is designed for touch-based devices, it will work with a mouse click and drag + * too. + * + * Requires the {@link ngTouch `ngTouch`} module to be installed. + * + * @element ANY + * @param {expression} ngSwipeRight {@link guide/expression Expression} to evaluate + * upon right swipe. (Event object is available as `$event`) + * + * @example + <doc:example> + <doc:source> + <div ng-show="!showActions" ng-swipe-left="showActions = true"> + Some list content, like an email in the inbox + </div> + <div ng-show="showActions" ng-swipe-right="showActions = false"> + <button ng-click="reply()">Reply</button> + <button ng-click="delete()">Delete</button> + </div> + </doc:source> + </doc:example> + */ + +function makeSwipeDirective(directiveName, direction, eventName) { + ngTouch.directive(directiveName, ['$parse', '$swipe', function($parse, $swipe) { + // The maximum vertical delta for a swipe should be less than 75px. + var MAX_VERTICAL_DISTANCE = 75; + // Vertical distance should not be more than a fraction of the horizontal distance. + var MAX_VERTICAL_RATIO = 0.3; + // At least a 30px lateral motion is necessary for a swipe. + var MIN_HORIZONTAL_DISTANCE = 30; + + return function(scope, element, attr) { + var swipeHandler = $parse(attr[directiveName]); + + var startCoords, valid; + + function validSwipe(coords) { + // Check that it's within the coordinates. + // Absolute vertical distance must be within tolerances. + // Horizontal distance, we take the current X - the starting X. + // This is negative for leftward swipes and positive for rightward swipes. + // After multiplying by the direction (-1 for left, +1 for right), legal swipes + // (ie. same direction as the directive wants) will have a positive delta and + // illegal ones a negative delta. + // Therefore this delta must be positive, and larger than the minimum. + if (!startCoords) return false; + var deltaY = Math.abs(coords.y - startCoords.y); + var deltaX = (coords.x - startCoords.x) * direction; + return valid && // Short circuit for already-invalidated swipes. + deltaY < MAX_VERTICAL_DISTANCE && + deltaX > 0 && + deltaX > MIN_HORIZONTAL_DISTANCE && + deltaY / deltaX < MAX_VERTICAL_RATIO; + } + + $swipe.bind(element, { + 'start': function(coords, event) { + startCoords = coords; + valid = true; + }, + 'cancel': function(event) { + valid = false; + }, + 'end': function(coords, event) { + if (validSwipe(coords)) { + scope.$apply(function() { + element.triggerHandler(eventName); + swipeHandler(scope, {$event: event}); + }); + } + } + }); + }; + }]); +} + +// Left is negative X-coordinate, right is positive. +makeSwipeDirective('ngSwipeLeft', -1, 'swipeleft'); +makeSwipeDirective('ngSwipeRight', 1, 'swiperight'); + + + +})(window, window.angular); Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,5 +1,5 @@ /** %%Ignore-License - * @license AngularJS v1.2.0-rc.3 + * @license AngularJS v1.2.0 * (c) 2010-2012 Google, Inc. http://angularjs.org * License: MIT */ @@ -79,6 +79,90 @@ }; } +/* We need to tell jshint what variables are being exported */ +/* global + -angular, + -msie, + -jqLite, + -jQuery, + -slice, + -push, + -toString, + -ngMinErr, + -_angular, + -angularModule, + -nodeName_, + -uid, + + -lowercase, + -uppercase, + -manualLowercase, + -manualUppercase, + -nodeName_, + -isArrayLike, + -forEach, + -sortedKeys, + -forEachSorted, + -reverseParams, + -nextUid, + -setHashKey, + -extend, + -int, + -inherit, + -noop, + -identity, + -valueFn, + -isUndefined, + -isDefined, + -isObject, + -isString, + -isNumber, + -isDate, + -isArray, + -isFunction, + -isRegExp, + -isWindow, + -isScope, + -isFile, + -isBoolean, + -trim, + -isElement, + -makeMap, + -map, + -size, + -includes, + -indexOf, + -arrayRemove, + -isLeafNode, + -copy, + -shallowCopy, + -equals, + -csp, + -concat, + -sliceArgs, + -bind, + -toJsonReplacer, + -toJson, + -fromJson, + -toBoolean, + -startingTag, + -tryDecodeURIComponent, + -parseKeyValue, + -toKeyValue, + -encodeUriSegment, + -encodeUriQuery, + -angularInit, + -bootstrap, + -snake_case, + -bindJQuery, + -assertArg, + -assertArgFn, + -assertNotHasOwnProperty, + -getter, + -getBlockElements + +*/ + //////////////////////////////////// /** @@ -106,11 +190,13 @@ var manualLowercase = function(s) { + /* jshint bitwise: false */ return isString(s) ? s.replace(/[A-Z]/g, function(ch) {return String.fromCharCode(ch.charCodeAt(0) | 32);}) : s; }; var manualUppercase = function(s) { + /* jshint bitwise: false */ return isString(s) ? s.replace(/[a-z]/g, function(ch) {return String.fromCharCode(ch.charCodeAt(0) & ~32);}) : s; @@ -156,7 +242,8 @@ /** * @private * @param {*} obj - * @return {boolean} Returns true if `obj` is an array or array-like object (NodeList, Arguments, String ...) + * @return {boolean} Returns true if `obj` is an array or array-like object (NodeList, Arguments, + * String ...) */ function isArrayLike(obj) { if (obj == null || isWindow(obj)) { @@ -250,7 +337,7 @@ * @returns {function(*, string)} */ function reverseParams(iteratorFn) { - return function(value, key) { iteratorFn(key, value) }; + return function(value, key) { iteratorFn(key, value); }; } /** @@ -609,17 +696,17 @@ * @returns {number} The size of `obj` or `0` if `obj` is neither an object nor an array. */ function size(obj, ownPropsOnly) { - var size = 0, key; + var count = 0, key; if (isArray(obj) || isString(obj)) { return obj.length; } else if (isObject(obj)){ for (key in obj) if (!ownPropsOnly || obj.hasOwnProperty(key)) - size++; + count++; } - return size; + return count; } @@ -669,9 +756,6 @@ * * If `source` is not an object or array (inc. `null` and `undefined`), `source` is returned. * * If `source` is identical to 'destination' an exception will be thrown. * - * Note: this function is used to augment the Object type in Angular expressions. See - * {@link ng.$filter} for more information about Angular arrays. - * * @param {*} source The source that will be used to make a copy. * Can be any type, including primitives, `null`, and `undefined`. * @param {(Object|Array)=} destination Destination into which the source is copied. If @@ -716,7 +800,8 @@ */ function copy(source, destination){ if (isWindow(source) || isScope(source)) { - throw ngMinErr('cpws', "Can't copy! Making copies of Window or Scope instances is not supported."); + throw ngMinErr('cpws', + "Can't copy! Making copies of Window or Scope instances is not supported."); } if (!destination) { @@ -733,7 +818,8 @@ } } } else { - if (source === destination) throw ngMinErr('cpi', "Can't copy! Source and destination are identical."); + if (source === destination) throw ngMinErr('cpi', + "Can't copy! Source and destination are identical."); if (isArray(source)) { destination.length = 0; for ( var i = 0; i < source.length; i++) { @@ -777,13 +863,14 @@ * @function * * @description - * Determines if two objects or two values are equivalent. Supports value types, regular expressions, arrays and - * objects. + * Determines if two objects or two values are equivalent. Supports value types, regular + * expressions, arrays and objects. * * Two objects or values are considered equivalent if at least one of the following is true: * * * Both objects or values pass `===` comparison. - * * Both objects or values are of the same type and all of their properties pass `===` comparison. + * * Both objects or values are of the same type and all of their properties are equal by + * comparing them with `angular.equals`. * * Both values are NaN. (In JavaScript, NaN == NaN => false. But we consider two NaN as equal) * * Both values represent the same regular expression (In JavasScript, * /abc/ == /abc/ => false. But we consider two regular expressions as equal when their textual @@ -839,6 +926,13 @@ } +function csp() { + return (document.securityPolicy && document.securityPolicy.isActive) || + (document.querySelector && + !!(document.querySelector('[ng-csp]') || document.querySelector('[data-ng-csp]'))); +} + + function concat(array1, array2, index) { return array1.concat(slice.call(array2, index)); } @@ -848,6 +942,7 @@ } +/* jshint -W101 */ /** * @ngdoc function * @name angular.bind @@ -856,14 +951,15 @@ * @description * Returns a function which calls function `fn` bound to `self` (`self` becomes the `this` for * `fn`). You can supply optional `args` that are prebound to the function. This feature is also - * known as [partial application](http://en.wikipedia.org/wiki/Partial_application), as distinguished - * from [function currying](http://en.wikipedia.org/wiki/Currying#Contrast_with_partial_funct…. + * known as [partial application](http://en.wikipedia.org/wiki/Partial_application), as + * distinguished from [function currying](http://en.wikipedia.org/wiki/Currying#Contrast_with_partial_funct…. * * @param {Object} self Context which `fn` should be evaluated in. * @param {function()} fn Function to be bound. * @param {...*} args Optional arguments to be prebound to the `fn` function call. * @returns {function()} Function that wraps the `fn` with all the specified bindings. */ +/* jshint +W101 */ function bind(self, fn) { var curryArgs = arguments.length > 2 ? sliceArgs(arguments, 2) : []; if (isFunction(fn) && !(fn instanceof RegExp)) { @@ -1023,10 +1119,12 @@ forEach(obj, function(value, key) { if (isArray(value)) { forEach(value, function(arrayValue) { - parts.push(encodeUriQuery(key, true) + (arrayValue === true ? '' : '=' + encodeUriQuery(arrayValue, true))); + parts.push(encodeUriQuery(key, true) + + (arrayValue === true ? '' : '=' + encodeUriQuery(arrayValue, true))); }); } else { - parts.push(encodeUriQuery(key, true) + (value === true ? '' : '=' + encodeUriQuery(value, true))); + parts.push(encodeUriQuery(key, true) + + (value === true ? '' : '=' + encodeUriQuery(value, true))); } }); return parts.length ? parts.join('&') : ''; @@ -1088,8 +1186,8 @@ * designates the root of the application and is typically placed * at the root of the page. * - * The first ngApp found in the document will be auto-bootstrapped. To use multiple applications in an - * HTML document you must manually bootstrap them using {@link angular.bootstrap}. + * The first ngApp found in the document will be auto-bootstrapped. To use multiple applications in + * an HTML document you must manually bootstrap them using {@link angular.bootstrap}. * Applications cannot be nested. * * In the example below if the `ngApp` directive were not placed @@ -1163,7 +1261,8 @@ * @param {Element} element DOM element which is the root of angular application. * @param {Array<String|Function|Array>=} modules an array of modules to load into the application. * Each item in the array should be the name of a predefined module or a (DI annotated) - * function that will be invoked by the injector as a run block. See: {@link angular.module modules} + * function that will be invoked by the injector as a run block. + * See: {@link angular.module modules} * @returns {AUTO.$injector} Returns the newly created injector for this app. */ function bootstrap(element, modules) { @@ -1187,7 +1286,6 @@ element.data('$injector', injector); compile(element)(scope); }); - animate.enabled(true); }] ); return injector; @@ -1224,14 +1322,16 @@ jqLite = jQuery; extend(jQuery.fn, { scope: JQLitePrototype.scope, + isolateScope: JQLitePrototype.isolateScope, controller: JQLitePrototype.controller, injector: JQLitePrototype.injector, inheritedData: JQLitePrototype.inheritedData }); - // Method signature: JQLitePatchJQueryRemove(name, dispatchThis, filterElems, getterIfNoArguments) - JQLitePatchJQueryRemove('remove', true, true, false); - JQLitePatchJQueryRemove('empty', false, false, false); - JQLitePatchJQueryRemove('html', false, false, true); + // Method signature: + // jqLitePatchJQueryRemove(name, dispatchThis, filterElems, getterIfNoArguments) + jqLitePatchJQueryRemove('remove', true, true, false); + jqLitePatchJQueryRemove('empty', false, false, false); + jqLitePatchJQueryRemove('html', false, false, true); } else { jqLite = JQLite; } @@ -1297,6 +1397,28 @@ } /** + * Return the siblings between `startNode` and `endNode`, inclusive + * @param {Object} object with `startNode` and `endNode` properties + * @returns jQlite object containing the elements + */ +function getBlockElements(block) { + if (block.startNode === block.endNode) { + return jqLite(block.startNode); + } + + var element = block.startNode; + var elements = [element]; + + do { + element = element.nextSibling; + if (!element) break; + elements.push(element); + } while (element !== block.endNode); + + return jqLite(elements); +} + +/** * @ngdoc interface * @name angular.Module * @description @@ -1321,7 +1443,8 @@ * @name angular.module * @description * - * The `angular.module` is a global place for creating, registering and retrieving Angular modules. + * The `angular.module` is a global place for creating, registering and retrieving Angular + * modules. * All modules (angular core or 3rd party) that should be available to an application must be * registered using this mechanism. * @@ -1359,10 +1482,10 @@ * {@link angular.bootstrap} to simplify this process for you. * * @param {!string} name The name of the module to create or retrieve. - * @param {Array.<string>=} requires If specified then new module is being created. If unspecified then the - * the module is being retrieved for further configuration. + * @param {Array.<string>=} requires If specified then new module is being created. If + * unspecified then the the module is being retrieved for further configuration. * @param {Function} configFn Optional configuration function for the module. Same as - * {@link angular.Module#config Module#config()}. + * {@link angular.Module#methods_config Module#config()}. * @returns {module} new module with the {@link angular.Module} api. */ return function module(name, requires, configFn) { @@ -1372,9 +1495,9 @@ } return ensure(modules, name, function() { if (!requires) { - throw $injectorMinErr('nomod', "Module '{0}' is not available! You either misspelled the module name " + - "or forgot to load it. If registering a module ensure that you specify the dependencies as the second " + - "argument.", name); + throw $injectorMinErr('nomod', "Module '{0}' is not available! You either misspelled " + + "the module name or forgot to load it. If registering a module ensure that you " + + "specify the dependencies as the second argument.", name); } /** @type {!Array.<Array.<*>>} */ @@ -1397,7 +1520,8 @@ * @propertyOf angular.Module * @returns {Array.<string>} List of module names which must be loaded before this module. * @description - * Holds the list of modules which the injector will load before the current module is loaded. + * Holds the list of modules which the injector will load before the current module is + * loaded. */ requires: requires, @@ -1416,7 +1540,8 @@ * @name angular.Module#provider * @methodOf angular.Module * @param {string} name service name - * @param {Function} providerType Construction function for creating new instance of the service. + * @param {Function} providerType Construction function for creating new instance of the + * service. * @description * See {@link AUTO.$provide#provider $provide.provider()}. */ @@ -1472,14 +1597,15 @@ * @name angular.Module#animation * @methodOf angular.Module * @param {string} name animation name - * @param {Function} animationFactory Factory function for creating new instance of an animation. + * @param {Function} animationFactory Factory function for creating new instance of an + * animation. * @description * * **NOTE**: animations take effect only if the **ngAnimate** module is loaded. * * - * Defines an animation hook that can be later used with {@link ngAnimate.$animate $animate} service and - * directives that use this service. + * Defines an animation hook that can be later used with + * {@link ngAnimate.$animate $animate} service and directives that use this service. * * <pre> * module.animation('.animation-name', function($inject1, $inject2) { @@ -1532,7 +1658,7 @@ * @param {Function} directiveFactory Factory function for creating new instance of * directives. * @description - * See {@link ng.$compileProvider#directive $compileProvider.directive()}. + * See {@link ng.$compileProvider#methods_directive $compileProvider.directive()}. */ directive: invokeLater('$compileProvider', 'directive'), @@ -1579,7 +1705,7 @@ return function() { invokeQueue[insertMethod || 'push']([provider, method, arguments]); return moduleInstance; - } + }; } }); }; @@ -1587,6 +1713,80 @@ } +/* global + angularModule: true, + version: true, + + $LocaleProvider, + $CompileProvider, + + htmlAnchorDirective, + inputDirective, + inputDirective, + formDirective, + scriptDirective, + selectDirective, + styleDirective, + optionDirective, + ngBindDirective, + ngBindHtmlDirective, + ngBindTemplateDirective, + ngClassDirective, + ngClassEvenDirective, + ngClassOddDirective, + ngCspDirective, + ngCloakDirective, + ngControllerDirective, + ngFormDirective, + ngHideDirective, + ngIfDirective, + ngIncludeDirective, + ngInitDirective, + ngNonBindableDirective, + ngPluralizeDirective, + ngRepeatDirective, + ngShowDirective, + ngStyleDirective, + ngSwitchDirective, + ngSwitchWhenDirective, + ngSwitchDefaultDirective, + ngOptionsDirective, + ngTranscludeDirective, + ngModelDirective, + ngListDirective, + ngChangeDirective, + requiredDirective, + requiredDirective, + ngValueDirective, + ngAttributeAliasDirectives, + ngEventDirectives, + + $AnchorScrollProvider, + $AnimateProvider, + $BrowserProvider, + $CacheFactoryProvider, + $ControllerProvider, + $DocumentProvider, + $ExceptionHandlerProvider, + $FilterProvider, + $InterpolateProvider, + $IntervalProvider, + $HttpProvider, + $HttpBackendProvider, + $LocationProvider, + $LogProvider, + $ParseProvider, + $RootScopeProvider, + $QProvider, + $SceProvider, + $SceDelegateProvider, + $SnifferProvider, + $TemplateCacheProvider, + $TimeoutProvider, + $WindowProvider +*/ + + /** * @ngdoc property * @name angular.version @@ -1601,11 +1801,11 @@ * - `codeName` – `{string}` – Code name of the release, such as "jiggling-armfat". */ var version = { - full: '1.2.0-rc.3', // all of these placeholder strings will be replaced by grunt's + full: '1.2.0', // all of these placeholder strings will be replaced by grunt's major: 1, // package task - minor: 2, + minor: "NG_VERSION_MINOR", dot: 0, - codeName: 'ferocious-twitch' + codeName: 'timely-delivery' }; @@ -1631,12 +1831,13 @@ 'isNumber': isNumber, 'isElement': isElement, 'isArray': isArray, - '$$minErr': minErr, 'version': version, 'isDate': isDate, 'lowercase': lowercase, 'uppercase': uppercase, - 'callbacks': {counter: 0} + 'callbacks': {counter: 0}, + '$$minErr': minErr, + '$$csp': csp }); angularModule = setupModuleLoader(window); @@ -1664,7 +1865,6 @@ ngClass: ngClassDirective, ngClassEven: ngClassEvenDirective, ngClassOdd: ngClassOddDirective, - ngCsp: ngCspDirective, ngCloak: ngCloakDirective, ngController: ngControllerDirective, ngForm: ngFormDirective, @@ -1720,6 +1920,14 @@ ]); } +/* global + + -JQLitePrototype, + -addEventListenerFn, + -removeEventListenerFn, + -BOOLEAN_ATTR +*/ + ////////////////////////////////// //JQLite ////////////////////////////////// @@ -1797,6 +2005,9 @@ * - `injector()` - retrieves the injector of the current element or its parent. * - `scope()` - retrieves the {@link api/ng.$rootScope.Scope scope} of the current * element or its parent. + * - `isolateScope()` - retrieves an isolate {@link api/ng.$rootScope.Scope scope} if one is attached directly to the + * current element. This getter should be used only on elements that contain a directive which starts a new isolate + * scope. Calling `scope()` on this element always returns the original non-isolate scope. * - `inheritedData()` - same as `data()`, but walks up the DOM until a value is found or the top * parent element is reached. * @@ -1842,13 +2053,14 @@ // ///////////////////////////////////////////// -function JQLitePatchJQueryRemove(name, dispatchThis, filterElems, getterIfNoArguments) { +function jqLitePatchJQueryRemove(name, dispatchThis, filterElems, getterIfNoArguments) { var originalJqFn = jQuery.fn[name]; originalJqFn = originalJqFn.$original || originalJqFn; removePatch.$original = originalJqFn; jQuery.fn[name] = removePatch; function removePatch(param) { + // jshint -W040 var list = filterElems && param ? [this.filter(param)] : [this], fireEvent = dispatchThis, set, setIndex, setLength, @@ -1894,30 +2106,30 @@ // http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx div.innerHTML = '<div> </div>' + element; // IE insanity to make NoScope elements work! div.removeChild(div.firstChild); // remove the superfluous div - JQLiteAddNodes(this, div.childNodes); + jqLiteAddNodes(this, div.childNodes); var fragment = jqLite(document.createDocumentFragment()); fragment.append(this); // detach the elements from the temporary DOM div. } else { - JQLiteAddNodes(this, element); + jqLiteAddNodes(this, element); } } -function JQLiteClone(element) { +function jqLiteClone(element) { return element.cloneNode(true); } -function JQLiteDealoc(element){ - JQLiteRemoveData(element); +function jqLiteDealoc(element){ + jqLiteRemoveData(element); for ( var i = 0, children = element.childNodes || []; i < children.length; i++) { - JQLiteDealoc(children[i]); + jqLiteDealoc(children[i]); } } -function JQLiteOff(element, type, fn, unsupported) { +function jqLiteOff(element, type, fn, unsupported) { if (isDefined(unsupported)) throw jqLiteMinErr('offargs', 'jqLite#off() does not support the `selector` argument'); - var events = JQLiteExpandoStore(element, 'events'), - handle = JQLiteExpandoStore(element, 'handle'); + var events = jqLiteExpandoStore(element, 'events'), + handle = jqLiteExpandoStore(element, 'handle'); if (!handle) return; //no listeners registered @@ -1938,7 +2150,7 @@ } } -function JQLiteRemoveData(element, name) { +function jqLiteRemoveData(element, name) { var expandoId = element[jqName], expandoStore = jqCache[expandoId]; @@ -1950,14 +2162,14 @@ if (expandoStore.handle) { expandoStore.events.$destroy && expandoStore.handle({}, '$destroy'); - JQLiteOff(element); + jqLiteOff(element); } delete jqCache[expandoId]; element[jqName] = undefined; // ie does not allow deletion of attributes on elements. } } -function JQLiteExpandoStore(element, key, value) { +function jqLiteExpandoStore(element, key, value) { var expandoId = element[jqName], expandoStore = jqCache[expandoId || -1]; @@ -1972,14 +2184,14 @@ } } -function JQLiteData(element, key, value) { - var data = JQLiteExpandoStore(element, 'data'), +function jqLiteData(element, key, value) { + var data = jqLiteExpandoStore(element, 'data'), isSetter = isDefined(value), keyDefined = !isSetter && isDefined(key), isSimpleGetter = keyDefined && !isObject(key); if (!data && !isSimpleGetter) { - JQLiteExpandoStore(element, 'data', data = {}); + jqLiteExpandoStore(element, 'data', data = {}); } if (isSetter) { @@ -1998,13 +2210,13 @@ } } -function JQLiteHasClass(element, selector) { +function jqLiteHasClass(element, selector) { if (!element.getAttribute) return false; return ((" " + (element.getAttribute('class') || '') + " ").replace(/[\n\t]/g, " "). indexOf( " " + selector + " " ) > -1); } -function JQLiteRemoveClass(element, cssClasses) { +function jqLiteRemoveClass(element, cssClasses) { if (cssClasses && element.setAttribute) { forEach(cssClasses.split(' '), function(cssClass) { element.setAttribute('class', trim( @@ -2016,7 +2228,7 @@ } } -function JQLiteAddClass(element, cssClasses) { +function jqLiteAddClass(element, cssClasses) { if (cssClasses && element.setAttribute) { var existingClasses = (' ' + (element.getAttribute('class') || '') + ' ') .replace(/[\n\t]/g, " "); @@ -2032,7 +2244,7 @@ } } -function JQLiteAddNodes(root, elements) { +function jqLiteAddNodes(root, elements) { if (elements) { elements = (!elements.nodeName && isDefined(elements.length) && !isWindow(elements)) ? elements @@ -2043,11 +2255,11 @@ } } -function JQLiteController(element, name) { - return JQLiteInheritedData(element, '$' + (name || 'ngController' ) + 'Controller'); +function jqLiteController(element, name) { + return jqLiteInheritedData(element, '$' + (name || 'ngController' ) + 'Controller'); } -function JQLiteInheritedData(element, name, value) { +function jqLiteInheritedData(element, name, value) { element = jqLite(element); // if element is the document object work with the html element instead @@ -2055,9 +2267,13 @@ if(element[0].nodeType == 9) { element = element.find('html'); } + var names = isArray(name) ? name : [name]; while (element.length) { - if ((value = element.data(name)) !== undefined) return value; + + for (var i = 0, ii = names.length; i < ii; i++) { + if ((value = element.data(names[i])) !== undefined) return value; + } element = element.parent(); } } @@ -2081,7 +2297,9 @@ } else { this.on('DOMContentLoaded', trigger); // works for modern browsers and IE9 // we can not use jqLite since we are not done loading and jQuery could be loaded later. + // jshint -W064 JQLite(window).on('load', trigger); // fallback to window.onload for others + // jshint +W064 } }, toString: function() { @@ -2123,24 +2341,30 @@ } forEach({ - data: JQLiteData, - inheritedData: JQLiteInheritedData, + data: jqLiteData, + inheritedData: jqLiteInheritedData, scope: function(element) { - return JQLiteInheritedData(element, '$scope'); + // Can't use jqLiteData here directly so we stay compatible with jQuery! + return jqLite(element).data('$scope') || jqLiteInheritedData(element.parentNode || element, ['$isolateScope', '$scope']); }, - controller: JQLiteController , + isolateScope: function(element) { + // Can't use jqLiteData here directly so we stay compatible with jQuery! + return jqLite(element).data('$isolateScope') || jqLite(element).data('$isolateScopeNoTemplate'); + }, + controller: jqLiteController , + injector: function(element) { - return JQLiteInheritedData(element, '$injector'); + return jqLiteInheritedData(element, '$injector'); }, removeAttr: function(element,name) { element.removeAttribute(name); }, - hasClass: JQLiteHasClass, + hasClass: jqLiteHasClass, css: function(element, name, value) { name = camelCase(name); @@ -2216,7 +2440,7 @@ return getText; function getText(element, value) { - var textProp = NODE_TYPE_TEXT_PROPERTY[element.nodeType] + var textProp = NODE_TYPE_TEXT_PROPERTY[element.nodeType]; if (isUndefined(value)) { return textProp ? element[textProp] : ''; } @@ -2245,7 +2469,7 @@ return element.innerHTML; } for (var i = 0, childNodes = element.childNodes; i < childNodes.length; i++) { - JQLiteDealoc(childNodes[i]); + jqLiteDealoc(childNodes[i]); } element.innerHTML = value; } @@ -2256,14 +2480,14 @@ JQLite.prototype[name] = function(arg1, arg2) { var i, key; - // JQLiteHasClass has only two arguments, but is a getter-only fn, so we need to special-case it + // jqLiteHasClass has only two arguments, but is a getter-only fn, so we need to special-case it // in a way that survives minification. - if (((fn.length == 2 && (fn !== JQLiteHasClass && fn !== JQLiteController)) ? arg1 : arg2) === undefined) { + if (((fn.length == 2 && (fn !== jqLiteHasClass && fn !== jqLiteController)) ? arg1 : arg2) === undefined) { if (isObject(arg1)) { // we are a write, but the object properties are the key/values for(i=0; i < this.length; i++) { - if (fn === JQLiteData) { + if (fn === jqLiteData) { // data() takes the whole object in jQuery fn(this[i], arg1); } else { @@ -2278,7 +2502,7 @@ // we are a read, so read the first child. var value = fn.$dv; // Only if we have $dv do we iterate over all, otherwise it is just the first element. - var jj = value == undefined ? Math.min(this.length, 1) : this.length; + var jj = (value === undefined) ? Math.min(this.length, 1) : this.length; for (var j = 0; j < jj; j++) { var nodeValue = fn(this[j], arg1, arg2); value = value ? value + nodeValue : nodeValue; @@ -2324,7 +2548,7 @@ } event.isDefaultPrevented = function() { - return event.defaultPrevented || event.returnValue == false; + return event.defaultPrevented || event.returnValue === false; }; forEach(events[type || event.type], function(fn) { @@ -2355,18 +2579,18 @@ // selector. ////////////////////////////////////////// forEach({ - removeData: JQLiteRemoveData, + removeData: jqLiteRemoveData, - dealoc: JQLiteDealoc, + dealoc: jqLiteDealoc, on: function onFn(element, type, fn, unsupported){ if (isDefined(unsupported)) throw jqLiteMinErr('onargs', 'jqLite#on() does not support the `selector` or `eventData` parameters'); - var events = JQLiteExpandoStore(element, 'events'), - handle = JQLiteExpandoStore(element, 'handle'); + var events = jqLiteExpandoStore(element, 'events'), + handle = jqLiteExpandoStore(element, 'handle'); - if (!events) JQLiteExpandoStore(element, 'events', events = {}); - if (!handle) JQLiteExpandoStore(element, 'handle', handle = createEventHandler(element, events)); + if (!events) jqLiteExpandoStore(element, 'events', events = {}); + if (!handle) jqLiteExpandoStore(element, 'handle', handle = createEventHandler(element, events)); forEach(type.split(' '), function(type){ var eventFns = events[type]; @@ -2375,6 +2599,7 @@ if (type == 'mouseenter' || type == 'mouseleave') { var contains = document.body.contains || document.body.compareDocumentPosition ? function( a, b ) { + // jshint bitwise: false var adown = a.nodeType === 9 ? a.documentElement : a, bup = b && b.parentNode; return a === bup || !!( bup && bup.nodeType === 1 && ( @@ -2414,17 +2639,17 @@ addEventListenerFn(element, type, handle); events[type] = []; } - eventFns = events[type] + eventFns = events[type]; } eventFns.push(fn); }); }, - off: JQLiteOff, + off: jqLiteOff, replaceWith: function(element, replaceNode) { var index, parent = element.parentNode; - JQLiteDealoc(element); + jqLiteDealoc(element); forEach(new JQLite(replaceNode), function(node){ if (index) { parent.insertBefore(node, index.nextSibling); @@ -2475,7 +2700,7 @@ }, remove: function(element) { - JQLiteDealoc(element); + jqLiteDealoc(element); var parent = element.parentNode; if (parent) parent.removeChild(element); }, @@ -2488,14 +2713,14 @@ }); }, - addClass: JQLiteAddClass, - removeClass: JQLiteRemoveClass, + addClass: jqLiteAddClass, + removeClass: jqLiteRemoveClass, toggleClass: function(element, selector, condition) { if (isUndefined(condition)) { - condition = !JQLiteHasClass(element, selector); + condition = !jqLiteHasClass(element, selector); } - (condition ? JQLiteAddClass : JQLiteRemoveClass)(element, selector); + (condition ? jqLiteAddClass : jqLiteRemoveClass)(element, selector); }, parent: function(element) { @@ -2520,11 +2745,11 @@ return element.getElementsByTagName(selector); }, - clone: JQLiteClone, + clone: jqLiteClone, triggerHandler: function(element, eventName, eventData) { - var eventFns = (JQLiteExpandoStore(element, 'events') || {})[eventName]; - + var eventFns = (jqLiteExpandoStore(element, 'events') || {})[eventName]; + eventData = eventData || []; var event = [{ @@ -2543,17 +2768,17 @@ JQLite.prototype[name] = function(arg1, arg2, arg3) { var value; for(var i=0; i < this.length; i++) { - if (value == undefined) { + if (isUndefined(value)) { value = fn(this[i], arg1, arg2, arg3); - if (value !== undefined) { + if (isDefined(value)) { // any function which returns a value needs to be wrapped value = jqLite(value); } } else { - JQLiteAddNodes(value, fn(this[i], arg1, arg2, arg3)); + jqLiteAddNodes(value, fn(this[i], arg1, arg2, arg3)); } } - return value == undefined ? this : value; + return isDefined(value) ? value : this; }; // bind legacy bind/unbind to on/off @@ -2742,9 +2967,9 @@ * * ## Inference * - * In JavaScript calling `toString()` on a function returns the function definition. The definition can then be - * parsed and the function arguments can be extracted. *NOTE:* This does not work with minification, and obfuscation - * tools since these tools change the argument names. + * In JavaScript calling `toString()` on a function returns the function definition. The definition + * can then be parsed and the function arguments can be extracted. *NOTE:* This does not work with + * minification, and obfuscation tools since these tools change the argument names. * * ## `$inject` Annotation * By adding a `$inject` property onto a function the injection parameters can be specified. @@ -2776,8 +3001,8 @@ * @param {!function} fn The function to invoke. Function parameters are injected according to the * {@link guide/di $inject Annotation} rules. * @param {Object=} self The `this` for the invoked method. - * @param {Object=} locals Optional object. If preset then any argument names are read from this object first, before - * the `$injector` is consulted. + * @param {Object=} locals Optional object. If preset then any argument names are read from this + * object first, before the `$injector` is consulted. * @returns {*} the value returned by the invoked `fn` function. */ @@ -2798,12 +3023,13 @@ * @name AUTO.$injector#instantiate * @methodOf AUTO.$injector * @description - * Create a new instance of JS type. The method takes a constructor function invokes the new operator and supplies - * all of the arguments to the constructor function as specified by the constructor annotation. + * Create a new instance of JS type. The method takes a constructor function invokes the new + * operator and supplies all of the arguments to the constructor function as specified by the + * constructor annotation. * * @param {function} Type Annotated constructor function. - * @param {Object=} locals Optional object. If preset then any argument names are read from this object first, before - * the `$injector` is consulted. + * @param {Object=} locals Optional object. If preset then any argument names are read from this + * object first, before the `$injector` is consulted. * @returns {Object} new instance of `Type`. */ @@ -2813,14 +3039,16 @@ * @methodOf AUTO.$injector * * @description - * Returns an array of service names which the function is requesting for injection. This API is used by the injector - * to determine which services need to be injected into the function when the function is invoked. There are three - * ways in which the function can be annotated with the needed dependencies. + * Returns an array of service names which the function is requesting for injection. This API is + * used by the injector to determine which services need to be injected into the function when the + * function is invoked. There are three ways in which the function can be annotated with the needed + * dependencies. * * # Argument names * - * The simplest form is to extract the dependencies from the arguments of the function. This is done by converting - * the function into a string using `toString()` method and extracting the argument names. + * The simplest form is to extract the dependencies from the arguments of the function. This is done + * by converting the function into a string using `toString()` method and extracting the argument + * names. * <pre> * // Given * function MyController($scope, $route) { @@ -2831,13 +3059,13 @@ * expect(injector.annotate(MyController)).toEqual(['$scope', '$route']); * </pre> * - * This method does not work with code minification / obfuscation. For this reason the following annotation strategies - * are supported. + * This method does not work with code minification / obfuscation. For this reason the following + * annotation strategies are supported. * * # The `$inject` property * - * If a function has an `$inject` property and its value is an array of strings, then the strings represent names of - * services to be injected into the function. + * If a function has an `$inject` property and its value is an array of strings, then the strings + * represent names of services to be injected into the function. * <pre> * // Given * var MyController = function(obfuscatedScope, obfuscatedRoute) { @@ -2852,9 +3080,9 @@ * * # The array notation * - * It is often desirable to inline Injected functions and that's when setting the `$inject` property is very - * inconvenient. In these situations using the array notation to specify the dependencies in a way that survives - * minification is a better choice: + * It is often desirable to inline Injected functions and that's when setting the `$inject` property + * is very inconvenient. In these situations using the array notation to specify the dependencies in + * a way that survives minification is a better choice: * * <pre> * // We wish to write this (not minification / obfuscation safe) @@ -2880,8 +3108,8 @@ * ).toEqual(['$compile', '$rootScope']); * </pre> * - * @param {function|Array.<string|Function>} fn Function for which dependent service names need to be retrieved as described - * above. + * @param {function|Array.<string|Function>} fn Function for which dependent service names need to + * be retrieved as described above. * * @returns {Array.<string>} The names of the services which the function requires. */ @@ -2895,35 +3123,36 @@ * * @description * - * The {@link AUTO.$provide $provide} service has a number of methods for registering components with - * the {@link AUTO.$injector $injector}. Many of these functions are also exposed on {@link angular.Module}. + * The {@link AUTO.$provide $provide} service has a number of methods for registering components + * with the {@link AUTO.$injector $injector}. Many of these functions are also exposed on + * {@link angular.Module}. * * An Angular **service** is a singleton object created by a **service factory**. These **service * factories** are functions which, in turn, are created by a **service provider**. - * The **service providers** are constructor functions. When instantiated they must contain a property - * called `$get`, which holds the **service factory** function. - * + * The **service providers** are constructor functions. When instantiated they must contain a + * property called `$get`, which holds the **service factory** function. + * * When you request a service, the {@link AUTO.$injector $injector} is responsible for finding the * correct **service provider**, instantiating it and then calling its `$get` **service factory** * function to get the instance of the **service**. - * + * * Often services have no configuration options and there is no need to add methods to the service * provider. The provider will be no more than a constructor function with a `$get` property. For * these cases the {@link AUTO.$provide $provide} service has additional helper methods to register * services without specifying a provider. * - * * {@link AUTO.$provide#provider provider(provider)} - registers a **service provider** with the + * * {@link AUTO.$provide#methods_provider provider(provider)} - registers a **service provider** with the * {@link AUTO.$injector $injector} - * * {@link AUTO.$provide#constant constant(obj)} - registers a value/object that can be accessed by + * * {@link AUTO.$provide#methods_constant constant(obj)} - registers a value/object that can be accessed by * providers and services. - * * {@link AUTO.$provide#value value(obj)} - registers a value/object that can only be accessed by + * * {@link AUTO.$provide#methods_value value(obj)} - registers a value/object that can only be accessed by * services, not providers. - * * {@link AUTO.$provide#factory factory(fn)} - registers a service **factory function**, `fn`, that - * will be wrapped in a **service provider** object, whose `$get` property will contain the given - * factory function. - * * {@link AUTO.$provide#service service(class)} - registers a **constructor function**, `class` that - * will be wrapped in a **service provider** object, whose `$get` property will instantiate a new - * object using the given constructor function. + * * {@link AUTO.$provide#methods_factory factory(fn)} - registers a service **factory function**, `fn`, + * that will be wrapped in a **service provider** object, whose `$get` property will contain the + * given factory function. + * * {@link AUTO.$provide#methods_service service(class)} - registers a **constructor function**, `class` that + * that will be wrapped in a **service provider** object, whose `$get` property will instantiate + * a new object using the given constructor function. * * See the individual methods for more information and examples. */ @@ -2934,33 +3163,38 @@ * @methodOf AUTO.$provide * @description * - * Register a **provider function** with the {@link AUTO.$injector $injector}. Provider functions are - * constructor functions, whose instances are responsible for "providing" a factory for a service. - * + * Register a **provider function** with the {@link AUTO.$injector $injector}. Provider functions + * are constructor functions, whose instances are responsible for "providing" a factory for a + * service. + * * Service provider names start with the name of the service they provide followed by `Provider`. - * For example, the {@link ng.$log $log} service has a provider called {@link ng.$logProvider $logProvider}. + * For example, the {@link ng.$log $log} service has a provider called + * {@link ng.$logProvider $logProvider}. * - * Service provider objects can have additional methods which allow configuration of the provider and - * its service. Importantly, you can configure what kind of service is created by the `$get` method, - * or how that service will act. For example, the {@link ng.$logProvider $logProvider} has a method - * {@link ng.$logProvider#debugEnabled debugEnabled} + * Service provider objects can have additional methods which allow configuration of the provider + * and its service. Importantly, you can configure what kind of service is created by the `$get` + * method, or how that service will act. For example, the {@link ng.$logProvider $logProvider} has a + * method {@link ng.$logProvider#debugEnabled debugEnabled} * which lets you specify whether the {@link ng.$log $log} service will log debug messages to the * console or not. * - * @param {string} name The name of the instance. NOTE: the provider will be available under `name + 'Provider'` key. + * @param {string} name The name of the instance. NOTE: the provider will be available under `name + + 'Provider'` key. * @param {(Object|function())} provider If the provider is: * * - `Object`: then it should have a `$get` method. The `$get` method will be invoked using - * {@link AUTO.$injector#invoke $injector.invoke()} when an instance needs to be created. + * {@link AUTO.$injector#invoke $injector.invoke()} when an instance needs to be + * created. * - `Constructor`: a new instance of the provider will be created using - * {@link AUTO.$injector#instantiate $injector.instantiate()}, then treated as `object`. + * {@link AUTO.$injector#instantiate $injector.instantiate()}, then treated as + * `object`. * * @returns {Object} registered provider instance * @example * * The following example shows how to create a simple event tracking service and register it using - * {@link AUTO.$provide#provider $provide.provider()}. + * {@link AUTO.$provide#methods_provider $provide.provider()}. * * <pre> * // Define the eventTracker provider @@ -3031,16 +3265,16 @@ * Register a **service factory**, which will be called to return the service instance. * This is short for registering a service where its provider consists of only a `$get` property, * which is the given service factory function. - * You should use {@link AUTO.$provide#factory $provide.factor(getFn)} if you do not need to configure - * your service in a provider. + * You should use {@link AUTO.$provide#factory $provide.factory(getFn)} if you do not need to + * configure your service in a provider. * * @param {string} name The name of the instance. - * @param {function()} $getFn The $getFn for the instance creation. Internally this is a short hand for - * `$provide.provider(name, {$get: $getFn})`. + * @param {function()} $getFn The $getFn for the instance creation. Internally this is a short hand + * for `$provide.provider(name, {$get: $getFn})`. * @returns {Object} registered provider instance * * @example - * Here is an example of registering a service + * Here is an example of registering a service * <pre> * $provide.factory('ping', ['$http', function($http) { * return function ping() { @@ -3063,11 +3297,12 @@ * @methodOf AUTO.$provide * @description * - * Register a **service constructor**, which will be invoked with `new` to create the service instance. + * Register a **service constructor**, which will be invoked with `new` to create the service + * instance. * This is short for registering a service where its provider's `$get` property is the service * constructor function that will be used to instantiate the service instance. * - * You should use {@link AUTO.$provide#service $provide.service(class)} if you define your service + * You should use {@link AUTO.$provide#methods_service $provide.service(class)} if you define your service * as a type/class. This is common when using {@link http://coffeescript.org CoffeeScript}. * * @param {string} name The name of the instance. @@ -3075,14 +3310,14 @@ * @returns {Object} registered provider instance * * @example - * Here is an example of registering a service using {@link AUTO.$provide#service $provide.service(class)} - * that is defined as a CoffeeScript class. + * Here is an example of registering a service using + * {@link AUTO.$provide#methods_service $provide.service(class)} that is defined as a CoffeeScript class. * <pre> * class Ping * constructor: (@$http)-> * send: ()=> * @$http.get('/ping') - * + * * $provide.service('ping', ['$http', Ping]) * </pre> * You would then inject and use this service like this: @@ -3100,14 +3335,16 @@ * @methodOf AUTO.$provide * @description * - * Register a **value service** with the {@link AUTO.$injector $injector}, such as a string, a number, - * an array, an object or a function. This is short for registering a service where its provider's - * `$get` property is a factory function that takes no arguments and returns the **value service**. + * Register a **value service** with the {@link AUTO.$injector $injector}, such as a string, a + * number, an array, an object or a function. This is short for registering a service where its + * provider's `$get` property is a factory function that takes no arguments and returns the **value + * service**. * - * Value services are similar to constant services, except that they cannot be injected into a module - * configuration function (see {@link angular.Module#config}) but they can be overridden by an Angular + * Value services are similar to constant services, except that they cannot be injected into a + * module configuration function (see {@link angular.Module#config}) but they can be overridden by + * an Angular * {@link AUTO.$provide#decorator decorator}. - * + * * @param {string} name The name of the instance. * @param {*} value The value. * @returns {Object} registered provider instance @@ -3116,9 +3353,9 @@ * Here are some examples of creating value services. * <pre> * $provide.constant('ADMIN_USER', 'admin'); - * + * * $provide.constant('RoleLookup', { admin: 0, writer: 1, reader: 2 }); - * + * * $provide.constant('halfOf', function(value) { * return value / 2; * }); @@ -3132,10 +3369,10 @@ * @methodOf AUTO.$provide * @description * - * Register a **constant service**, such as a string, a number, an array, an object or a function, with - * the {@link AUTO.$injector $injector}. Unlike {@link AUTO.$provide#value value} it can be injected - * into a module configuration function (see {@link angular.Module#config}) and it cannot be - * overridden by an Angular {@link AUTO.$provide#decorator decorator}. + * Register a **constant service**, such as a string, a number, an array, an object or a function, + * with the {@link AUTO.$injector $injector}. Unlike {@link AUTO.$provide#value value} it can be + * injected into a module configuration function (see {@link angular.Module#config}) and it cannot + * be overridden by an Angular {@link AUTO.$provide#decorator decorator}. * * @param {string} name The name of the constant. * @param {*} value The constant value. @@ -3145,9 +3382,9 @@ * Here a some examples of creating constants: * <pre> * $provide.constant('SHARD_HEIGHT', 306); - * + * * $provide.constant('MY_COLOURS', ['red', 'blue', 'grey']); - * + * * $provide.constant('double', function(value) { * return value * 2; * }); @@ -3163,8 +3400,8 @@ * * Register a **service decorator** with the {@link AUTO.$injector $injector}. A service decorator * intercepts the creation of a service, allowing it to override or modify the behaviour of the - * service. The object returned by the decorator may be the original service, or a new service object - * which replaces or wraps and delegates to the original service. + * service. The object returned by the decorator may be the original service, or a new service + * object which replaces or wraps and delegates to the original service. * * @param {string} name The name of the service to decorate. * @param {function()} decorator This function will be invoked when the service needs to be @@ -3229,7 +3466,7 @@ } else { return delegate(key, value); } - } + }; } function provider(name, provider_) { @@ -3251,7 +3488,7 @@ }]); } - function value(name, value) { return factory(name, valueFn(value)); } + function value(name, val) { return factory(name, valueFn(val)); } function constant(name, value) { assertNotHasOwnProperty(name, 'constant'); @@ -3273,17 +3510,17 @@ // Module Loading //////////////////////////////////// function loadModules(modulesToLoad){ - var runBlocks = []; + var runBlocks = [], moduleFn, invokeQueue, i, ii; forEach(modulesToLoad, function(module) { if (loadedModules.get(module)) return; loadedModules.put(module, true); try { if (isString(module)) { - var moduleFn = angularModule(module); + moduleFn = angularModule(module); runBlocks = runBlocks.concat(loadModules(moduleFn.requires)).concat(moduleFn._runBlocks); - for(var invokeQueue = moduleFn._invokeQueue, i = 0, ii = invokeQueue.length; i < ii; i++) { + for(invokeQueue = moduleFn._invokeQueue, i = 0, ii = invokeQueue.length; i < ii; i++) { var invokeArgs = invokeQueue[i], provider = providerInjector.get(invokeArgs[0]); @@ -3301,12 +3538,15 @@ module = module[module.length - 1]; } if (e.message && e.stack && e.stack.indexOf(e.message) == -1) { - // Safari & FF's stack traces don't contain error.message content unlike those of Chrome and IE + // Safari & FF's stack traces don't contain error.message content + // unlike those of Chrome and IE // So if stack doesn't contain message, we create a new string that contains both. // Since error.stack is read-only in Safari, I'm overriding e and not e.stack here. + /* jshint -W022 */ e = e.message + '\n' + e.stack; } - throw $injectorMinErr('modulerr', "Failed to instantiate module {0} due to:\n{1}", module, e.stack || e.message || e); + throw $injectorMinErr('modulerr', "Failed to instantiate module {0} due to:\n{1}", + module, e.stack || e.message || e); } }); return runBlocks; @@ -3344,7 +3584,8 @@ for(i = 0, length = $inject.length; i < length; i++) { key = $inject[i]; if (typeof key !== 'string') { - throw $injectorMinErr('itkn', 'Incorrect injection token! Expected service name as string, got {0}', key); + throw $injectorMinErr('itkn', + 'Incorrect injection token! Expected service name as string, got {0}', key); } args.push( locals && locals.hasOwnProperty(key) @@ -3369,8 +3610,10 @@ case 6: return fn(args[0], args[1], args[2], args[3], args[4], args[5]); case 7: return fn(args[0], args[1], args[2], args[3], args[4], args[5], args[6]); case 8: return fn(args[0], args[1], args[2], args[3], args[4], args[5], args[6], args[7]); - case 9: return fn(args[0], args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]); - case 10: return fn(args[0], args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8], args[9]); + case 9: return fn(args[0], args[1], args[2], args[3], args[4], args[5], args[6], args[7], + args[8]); + case 10: return fn(args[0], args[1], args[2], args[3], args[4], args[5], args[6], args[7], + args[8], args[9]); default: return fn.apply(self, args); } } @@ -3385,7 +3628,7 @@ instance = new Constructor(); returnedValue = invoke(Type, instance, locals); - return isObject(returnedValue) ? returnedValue : instance; + return isObject(returnedValue) || isFunction(returnedValue) ? returnedValue : instance; } return { @@ -3400,7 +3643,6 @@ } } - /** * @ngdoc function * @name ng.$anchorScroll @@ -3508,7 +3750,8 @@ * @name ng.$animateProvider * * @description - * Default implementation of $animate that doesn't perform any animations, instead just synchronously performs DOM + * Default implementation of $animate that doesn't perform any animations, instead just + * synchronously performs DOM * updates and calls done() callbacks. * * In order to enable animations the ngAnimate module has to be loaded. @@ -3517,6 +3760,7 @@ */ var $AnimateProvider = ['$provide', function($provide) { + this.$$selectors = {}; @@ -3526,12 +3770,14 @@ * @methodOf ng.$animateProvider * * @description - * Registers a new injectable animation factory function. The factory function produces the animation object which - * contains callback functions for each event that is expected to be animated. + * Registers a new injectable animation factory function. The factory function produces the + * animation object which contains callback functions for each event that is expected to be + * animated. * - * * `eventFn`: `function(Element, doneFunction)` The element to animate, the `doneFunction` must be called once the - * element animation is complete. If a function is returned then the animation service will use this function to - * cancel the animation whenever a cancel event is triggered. + * * `eventFn`: `function(Element, doneFunction)` The element to animate, the `doneFunction` + * must be called once the element animation is complete. If a function is returned then the + * animation service will use this function to cancel the animation whenever a cancel event is + * triggered. * * *<pre> @@ -3547,7 +3793,8 @@ *</pre> * * @param {string} name The name of the animation. - * @param {function} factory The factory function that will be executed to return the animation object. + * @param {function} factory The factory function that will be executed to return the animation + * object. */ this.register = function(name, factory) { var key = name + '-animation'; @@ -3560,36 +3807,39 @@ this.$get = ['$timeout', function($timeout) { /** + * * @ngdoc object * @name ng.$animate + * @description The $animate service provides rudimentary DOM manipulation functions to + * insert, remove and move elements within the DOM, as well as adding and removing classes. + * This service is the core service used by the ngAnimate $animator service which provides + * high-level animation hooks for CSS and JavaScript. * - * @description - * The $animate service provides rudimentary DOM manipulation functions to insert, remove and move elements within - * the DOM, as well as adding and removing classes. This service is the core service used by the ngAnimate $animator - * service which provides high-level animation hooks for CSS and JavaScript. + * $animate is available in the AngularJS core, however, the ngAnimate module must be included + * to enable full out animation support. Otherwise, $animate will only perform simple DOM + * manipulation operations. * - * $animate is available in the AngularJS core, however, the ngAnimate module must be included to enable full out - * animation support. Otherwise, $animate will only perform simple DOM manipulation operations. - * - * To learn more about enabling animation support, click here to visit the {@link ngAnimate ngAnimate module page} - * as well as the {@link ngAnimate.$animate ngAnimate $animate service page}. + * To learn more about enabling animation support, click here to visit the {@link ngAnimate + * ngAnimate module page} as well as the {@link ngAnimate.$animate ngAnimate $animate service + * page}. */ return { /** + * * @ngdoc function * @name ng.$animate#enter * @methodOf ng.$animate * @function - * - * @description - * Inserts the element into the DOM either after the `after` element or within the `parent` element. Once complete, - * the done() callback will be fired (if provided). - * + * @description Inserts the element into the DOM either after the `after` element or within + * the `parent` element. Once complete, the done() callback will be fired (if provided). * @param {jQuery/jqLite element} element the element which will be inserted into the DOM - * @param {jQuery/jqLite element} parent the parent element which will append the element as a child (if the after element is not present) - * @param {jQuery/jqLite element} after the sibling element which will append the element after itself - * @param {function=} done callback function that will be called after the element has been inserted into the DOM + * @param {jQuery/jqLite element} parent the parent element which will append the element as + * a child (if the after element is not present) + * @param {jQuery/jqLite element} after the sibling element which will append the element + * after itself + * @param {function=} done callback function that will be called after the element has been + * inserted into the DOM */ enter : function(element, parent, after, done) { var afterNode = after && after[after.length - 1]; @@ -3603,16 +3853,16 @@ }, /** + * * @ngdoc function * @name ng.$animate#leave * @methodOf ng.$animate * @function - * - * @description - * Removes the element from the DOM. Once complete, the done() callback will be fired (if provided). - * + * @description Removes the element from the DOM. Once complete, the done() callback will be + * fired (if provided). * @param {jQuery/jqLite element} element the element which will be removed from the DOM - * @param {function=} done callback function that will be called after the element has been removed from the DOM + * @param {function=} done callback function that will be called after the element has been + * removed from the DOM */ leave : function(element, done) { element.remove(); @@ -3620,19 +3870,23 @@ }, /** + * * @ngdoc function * @name ng.$animate#move * @methodOf ng.$animate * @function - * - * @description - * Moves the position of the provided element within the DOM to be placed either after the `after` element or inside of the `parent` element. - * Once complete, the done() callback will be fired (if provided). - * - * @param {jQuery/jqLite element} element the element which will be moved around within the DOM - * @param {jQuery/jqLite element} parent the parent element where the element will be inserted into (if the after element is not present) - * @param {jQuery/jqLite element} after the sibling element where the element will be positioned next to - * @param {function=} done the callback function (if provided) that will be fired after the element has been moved to its new position + * @description Moves the position of the provided element within the DOM to be placed + * either after the `after` element or inside of the `parent` element. Once complete, the + * done() callback will be fired (if provided). + * + * @param {jQuery/jqLite element} element the element which will be moved around within the + * DOM + * @param {jQuery/jqLite element} parent the parent element where the element will be + * inserted into (if the after element is not present) + * @param {jQuery/jqLite element} after the sibling element where the element will be + * positioned next to + * @param {function=} done the callback function (if provided) that will be fired after the + * element has been moved to its new position */ move : function(element, parent, after, done) { // Do not remove element before insert. Removing will cause data associated with the @@ -3641,47 +3895,49 @@ }, /** + * * @ngdoc function * @name ng.$animate#addClass * @methodOf ng.$animate * @function - * - * @description - * Adds the provided className CSS class value to the provided element. Once complete, the done() callback will be fired (if provided). - * - * @param {jQuery/jqLite element} element the element which will have the className value added to it + * @description Adds the provided className CSS class value to the provided element. Once + * complete, the done() callback will be fired (if provided). + * @param {jQuery/jqLite element} element the element which will have the className value + * added to it * @param {string} className the CSS class which will be added to the element - * @param {function=} done the callback function (if provided) that will be fired after the className value has been added to the element + * @param {function=} done the callback function (if provided) that will be fired after the + * className value has been added to the element */ addClass : function(element, className, done) { className = isString(className) ? className : isArray(className) ? className.join(' ') : ''; forEach(element, function (element) { - JQLiteAddClass(element, className); + jqLiteAddClass(element, className); }); done && $timeout(done, 0, false); }, /** + * * @ngdoc function * @name ng.$animate#removeClass * @methodOf ng.$animate * @function - * - * @description - * Removes the provided className CSS class value from the provided element. Once complete, the done() callback will be fired (if provided). - * - * @param {jQuery/jqLite element} element the element which will have the className value removed from it + * @description Removes the provided className CSS class value from the provided element. + * Once complete, the done() callback will be fired (if provided). + * @param {jQuery/jqLite element} element the element which will have the className value + * removed from it * @param {string} className the CSS class which will be removed from the element - * @param {function=} done the callback function (if provided) that will be fired after the className value has been removed from the element + * @param {function=} done the callback function (if provided) that will be fired after the + * className value has been removed from the element */ removeClass : function(element, className, done) { className = isString(className) ? className : isArray(className) ? className.join(' ') : ''; forEach(element, function (element) { - JQLiteRemoveClass(element, className); + jqLiteRemoveClass(element, className); }); done && $timeout(done, 0, false); }, @@ -3965,30 +4221,35 @@ * It is not meant to be used directly, use the $cookie service instead. * * The return values vary depending on the arguments that the method was called with as follows: - * <ul> - * <li>cookies() -> hash of all cookies, this is NOT a copy of the internal state, so do not modify it</li> - * <li>cookies(name, value) -> set name to value, if value is undefined delete the cookie</li> - * <li>cookies(name) -> the same as (name, undefined) == DELETES (no one calls it right now that way)</li> - * </ul> - * + * + * - cookies() -> hash of all cookies, this is NOT a copy of the internal state, so do not modify + * it + * - cookies(name, value) -> set name to value, if value is undefined delete the cookie + * - cookies(name) -> the same as (name, undefined) == DELETES (no one calls it right now that + * way) + * * @returns {Object} Hash of all cookies (if called without any parameter) */ self.cookies = function(name, value) { + /* global escape: false, unescape: false */ var cookieLength, cookieArray, cookie, i, index; if (name) { if (value === undefined) { - rawDocument.cookie = escape(name) + "=;path=" + cookiePath + ";expires=Thu, 01 Jan 1970 00:00:00 GMT"; + rawDocument.cookie = escape(name) + "=;path=" + cookiePath + + ";expires=Thu, 01 Jan 1970 00:00:00 GMT"; } else { if (isString(value)) { - cookieLength = (rawDocument.cookie = escape(name) + '=' + escape(value) + ';path=' + cookiePath).length + 1; + cookieLength = (rawDocument.cookie = escape(name) + '=' + escape(value) + + ';path=' + cookiePath).length + 1; // per http://www.ietf.org/rfc/rfc2109.txt browser must allow at minimum: // - 300 cookies // - 20 cookies per unique domain // - 4096 bytes per cookie if (cookieLength > 4096) { - $log.warn("Cookie '"+ name +"' possibly not set or overflowed because it was too large ("+ + $log.warn("Cookie '"+ name + + "' possibly not set or overflowed because it was too large ("+ cookieLength + " > 4096 bytes)!"); } } @@ -4003,7 +4264,7 @@ cookie = cookieArray[i]; index = cookie.indexOf('='); if (index > 0) { //ignore nameless cookies - var name = unescape(cookie.substring(0, index)); + name = unescape(cookie.substring(0, index)); // the first value that is seen for a cookie is the most // specific one. values for the same cookie name that // follow are for less specific paths. @@ -4053,7 +4314,8 @@ * Cancels a deferred task identified with `deferId`. * * @param {*} deferId Token returned by the `$browser.defer` function. - * @returns {boolean} Returns `true` if the task hasn't executed yet and was successfully canceled. + * @returns {boolean} Returns `true` if the task hasn't executed yet and was successfully + * canceled. */ self.defer.cancel = function(deferId) { if (pendingDeferIds[deferId]) { @@ -4089,9 +4351,10 @@ * * cache.put("key", "value"); * cache.put("another key", "another value"); + * + * // We've specified no options on creation + * expect(cache.info()).toEqual({id: 'cacheId', size: 2}); * - * expect(cache.info()).toEqual({id: 'cacheId', size: 2}); // Since we've specified no options on creation - * * </pre> * * @@ -4103,7 +4366,8 @@ * @returns {object} Newly created cache object with the following set of methods: * * - `{object}` `info()` — Returns id, size, and options of cache. - * - `{{*}}` `put({string} key, {*} value)` — Puts a new key-value pair into the cache and returns it. + * - `{{*}}` `put({string} key, {*} value)` — Puts a new key-value pair into the cache and returns + * it. * - `{{*}}` `get({string} key)` — Returns cached value for `key` or undefined for cache miss. * - `{void}` `remove({string} key)` — Removes a key-value pair from the cache. * - `{void}` `removeAll()` — Removes all cached values. @@ -4270,9 +4534,9 @@ * @name ng.$templateCache * * @description - * The first time a template is used, it is loaded in the template cache for quick retrieval. You can - * load templates directly into the cache in a `script` tag, or by consuming the `$templateCache` - * service directly. + * The first time a template is used, it is loaded in the template cache for quick retrieval. You + * can load templates directly into the cache in a `script` tag, or by consuming the + * `$templateCache` service directly. * * Adding via the `script` tag: * <pre> @@ -4286,8 +4550,8 @@ * </html> * </pre> * - * **Note:** the `script` tag containing the template does not need to be included in the `head` of the document, but - * it must be below the `ng-app` definition. + * **Note:** the `script` tag containing the template does not need to be included in the `head` of + * the document, but it must be below the `ng-app` definition. * * Adding via the $templateCache service: * @@ -4342,21 +4606,355 @@ * * @description * Compiles a piece of HTML string or DOM into a template and produces a template function, which - * can then be used to link {@link ng.$rootScope.Scope scope} and the template together. + * can then be used to link {@link ng.$rootScope.Scope `scope`} and the template together. * - * The compilation is a process of walking the DOM tree and trying to match DOM elements to - * {@link ng.$compileProvider#directive directives}. For each match it - * executes corresponding template function and collects the - * instance functions into a single template function which is then returned. + * The compilation is a process of walking the DOM tree and matching DOM elements to + * {@link ng.$compileProvider#methods_directive directives}. * - * The template function can then be used once to produce the view or as it is the case with - * {@link ng.directive:ngRepeat repeater} many-times, in which - * case each call results in a view that is a DOM clone of the original template. + * <div class="alert alert-warning"> + * **Note:** This document is an in-depth reference of all directive options. + * For a gentle introduction to directives with examples of common use cases, + * see the {@link guide/directive directive guide}. + * </div> * + * ## Comprehensive Directive API + * + * There are many different options for a directive. + * + * The difference resides in the return value of the factory function. + * You can either return a "Directive Definition Object" (see below) that defines the directive properties, + * or just the `postLink` function (all other properties will have the default values). + * + * <div class="alert alert-success"> + * **Best Practice:** It's recommended to use the "directive definition object" form. + * </div> + * + * Here's an example directive declared with a Directive Definition Object: + * + * <pre> + * var myModule = angular.module(...); + * + * myModule.directive('directiveName', function factory(injectables) { + * var directiveDefinitionObject = { + * priority: 0, + * template: '<div></div>', // or // function(tElement, tAttrs) { ... }, + * // or + * // templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... }, + * replace: false, + * transclude: false, + * restrict: 'A', + * scope: false, + * controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... }, + * require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'], + * compile: function compile(tElement, tAttrs, transclude) { + * return { + * pre: function preLink(scope, iElement, iAttrs, controller) { ... }, + * post: function postLink(scope, iElement, iAttrs, controller) { ... } + * } + * // or + * // return function postLink( ... ) { ... } + * }, + * // or + * // link: { + * // pre: function preLink(scope, iElement, iAttrs, controller) { ... }, + * // post: function postLink(scope, iElement, iAttrs, controller) { ... } + * // } + * // or + * // link: function postLink( ... ) { ... } + * }; + * return directiveDefinitionObject; + * }); + * </pre> + * + * <div class="alert alert-warning"> + * **Note:** Any unspecified options will use the default value. You can see the default values below. + * </div> + * + * Therefore the above can be simplified as: + * + * <pre> + * var myModule = angular.module(...); + * + * myModule.directive('directiveName', function factory(injectables) { + * var directiveDefinitionObject = { + * link: function postLink(scope, iElement, iAttrs) { ... } + * }; + * return directiveDefinitionObject; + * // or + * // return function postLink(scope, iElement, iAttrs) { ... } + * }); + * </pre> + * + * + * + * ### Directive Definition Object + * + * The directive definition object provides instructions to the {@link api/ng.$compile + * compiler}. The attributes are: + * + * #### `priority` + * When there are multiple directives defined on a single DOM element, sometimes it + * is necessary to specify the order in which the directives are applied. The `priority` is used + * to sort the directives before their `compile` functions get called. Priority is defined as a + * number. Directives with greater numerical `priority` are compiled first. The order of directives with + * the same priority is undefined. The default priority is `0`. + * + * #### `terminal` + * If set to true then the current `priority` will be the last set of directives + * which will execute (any directives at the current priority will still execute + * as the order of execution on same `priority` is undefined). + * + * #### `scope` + * **If set to `true`,** then a new scope will be created for this directive. If multiple directives on the + * same element request a new scope, only one new scope is created. The new scope rule does not + * apply for the root of the template since the root of the template always gets a new scope. + * + * **If set to `{}` (object hash),** then a new "isolate" scope is created. The 'isolate' scope differs from + * normal scope in that it does not prototypically inherit from the parent scope. This is useful + * when creating reusable components, which should not accidentally read or modify data in the + * parent scope. + * + * The 'isolate' scope takes an object hash which defines a set of local scope properties + * derived from the parent scope. These local properties are useful for aliasing values for + * templates. Locals definition is a hash of local scope property to its source: + * + * * `@` or `@attr` - bind a local scope property to the value of DOM attribute. The result is + * always a string since DOM attributes are strings. If no `attr` name is specified then the + * attribute name is assumed to be the same as the local name. + * Given `<widget my-attr="hello {{name}}">` and widget definition + * of `scope: { localName:'@myAttr' }`, then widget scope property `localName` will reflect + * the interpolated value of `hello {{name}}`. As the `name` attribute changes so will the + * `localName` property on the widget scope. The `name` is read from the parent scope (not + * component scope). + * + * * `=` or `=attr` - set up bi-directional binding between a local scope property and the + * parent scope property of name defined via the value of the `attr` attribute. If no `attr` + * name is specified then the attribute name is assumed to be the same as the local name. + * Given `<widget my-attr="parentModel">` and widget definition of + * `scope: { localModel:'=myAttr' }`, then widget scope property `localModel` will reflect the + * value of `parentModel` on the parent scope. Any changes to `parentModel` will be reflected + * in `localModel` and any changes in `localModel` will reflect in `parentModel`. If the parent + * scope property doesn't exist, it will throw a NON_ASSIGNABLE_MODEL_EXPRESSION exception. You + * can avoid this behavior using `=?` or `=?attr` in order to flag the property as optional. + * + * * `&` or `&attr` - provides a way to execute an expression in the context of the parent scope. + * If no `attr` name is specified then the attribute name is assumed to be the same as the + * local name. Given `<widget my-attr="count = count + value">` and widget definition of + * `scope: { localFn:'&myAttr' }`, then isolate scope property `localFn` will point to + * a function wrapper for the `count = count + value` expression. Often it's desirable to + * pass data from the isolated scope via an expression and to the parent scope, this can be + * done by passing a map of local variable names and values into the expression wrapper fn. + * For example, if the expression is `increment(amount)` then we can specify the amount value + * by calling the `localFn` as `localFn({amount: 22})`. + * + * + * + * #### `controller` + * Controller constructor function. The controller is instantiated before the + * pre-linking phase and it is shared with other directives (see + * `require` attribute). This allows the directives to communicate with each other and augment + * each other's behavior. The controller is injectable (and supports bracket notation) with the following locals: + * + * * `$scope` - Current scope associated with the element + * * `$element` - Current element + * * `$attrs` - Current attributes object for the element + * * `$transclude` - A transclude linking function pre-bound to the correct transclusion scope: + * `function(cloneLinkingFn)`. + * + * + * #### `require` + * Require another directive and inject its controller as the fourth argument to the linking function. The + * `require` takes a string name (or array of strings) of the directive(s) to pass in. If an array is used, the + * injected argument will be an array in corresponding order. If no such directive can be + * found, or if the directive does not have a controller, then an error is raised. The name can be prefixed with: + * + * * (no prefix) - Locate the required controller on the current element. Throw an error if not found. + * * `?` - Attempt to locate the required controller or pass `null` to the `link` fn if not found. + * * `^` - Locate the required controller by searching the element's parents. Throw an error if not found. + * * `?^` - Attempt to locate the required controller by searching the element's parentsor pass `null` to the + * `link` fn if not found. + * + * + * #### `controllerAs` + * Controller alias at the directive scope. An alias for the controller so it + * can be referenced at the directive template. The directive needs to define a scope for this + * configuration to be used. Useful in the case when directive is used as component. + * + * + * #### `restrict` + * String of subset of `EACM` which restricts the directive to a specific directive + * declaration style. If omitted, the default (attributes only) is used. + * + * * `E` - Element name: `<my-directive></my-directive>` + * * `A` - Attribute (default): `<div my-directive="exp"></div>` + * * `C` - Class: `<div class="my-directive: exp;"></div>` + * * `M` - Comment: `` + * + * + * #### `template` + * replace the current element with the contents of the HTML. The replacement process + * migrates all of the attributes / classes from the old element to the new one. See the + * {@link guide/directive#creating-custom-directives_creating-directives_template-expanding-directive + * Directives Guide} for an example. + * + * You can specify `template` as a string representing the template or as a function which takes + * two arguments `tElement` and `tAttrs` (described in the `compile` function api below) and + * returns a string value representing the template. + * + * + * #### `templateUrl` + * Same as `template` but the template is loaded from the specified URL. Because + * the template loading is asynchronous the compilation/linking is suspended until the template + * is loaded. + * + * You can specify `templateUrl` as a string representing the URL or as a function which takes two + * arguments `tElement` and `tAttrs` (described in the `compile` function api below) and returns + * a string value representing the url. In either case, the template URL is passed through {@link + * api/ng.$sce#methods_getTrustedResourceUrl $sce.getTrustedResourceUrl}. + * + * + * #### `replace` + * specify where the template should be inserted. Defaults to `false`. + * + * * `true` - the template will replace the current element. + * * `false` - the template will replace the contents of the current element. + * + * + * #### `transclude` + * compile the content of the element and make it available to the directive. + * Typically used with {@link api/ng.directive:ngTransclude + * ngTransclude}. The advantage of transclusion is that the linking function receives a + * transclusion function which is pre-bound to the correct scope. In a typical setup the widget + * creates an `isolate` scope, but the transclusion is not a child, but a sibling of the `isolate` + * scope. This makes it possible for the widget to have private state, and the transclusion to + * be bound to the parent (pre-`isolate`) scope. + * + * * `true` - transclude the content of the directive. + * * `'element'` - transclude the whole element including any directives defined at lower priority. + * + * + * #### `compile` + * + * <pre> + * function compile(tElement, tAttrs, transclude) { ... } + * </pre> + * + * The compile function deals with transforming the template DOM. Since most directives do not do + * template transformation, it is not used often. Examples that require compile functions are + * directives that transform template DOM, such as {@link + * api/ng.directive:ngRepeat ngRepeat}, or load the contents + * asynchronously, such as {@link api/ngRoute.directive:ngView ngView}. The + * compile function takes the following arguments. + * + * * `tElement` - template element - The element where the directive has been declared. It is + * safe to do template transformation on the element and child elements only. + * + * * `tAttrs` - template attributes - Normalized list of attributes declared on this element shared + * between all directive compile functions. + * + * * `transclude` - A transclude linking function: `function(scope, cloneLinkingFn)`. + * + * <div class="alert alert-warning"> + * **Note:** The template instance and the link instance may be different objects if the template has + * been cloned. For this reason it is **not** safe to do anything other than DOM transformations that + * apply to all cloned DOM nodes within the compile function. Specifically, DOM listener registration + * should be done in a linking function rather than in a compile function. + * </div> + * + * A compile function can have a return value which can be either a function or an object. + * + * * returning a (post-link) function - is equivalent to registering the linking function via the + * `link` property of the config object when the compile function is empty. + * + * * returning an object with function(s) registered via `pre` and `post` properties - allows you to + * control when a linking function should be called during the linking phase. See info about + * pre-linking and post-linking functions below. + * + * + * #### `link` + * This property is used only if the `compile` property is not defined. + * + * <pre> + * function link(scope, iElement, iAttrs, controller) { ... } + * </pre> + * + * The link function is responsible for registering DOM listeners as well as updating the DOM. It is + * executed after the template has been cloned. This is where most of the directive logic will be + * put. + * + * * `scope` - {@link api/ng.$rootScope.Scope Scope} - The scope to be used by the + * directive for registering {@link api/ng.$rootScope.Scope#methods_$watch watches}. + * + * * `iElement` - instance element - The element where the directive is to be used. It is safe to + * manipulate the children of the element only in `postLink` function since the children have + * already been linked. + * + * * `iAttrs` - instance attributes - Normalized list of attributes declared on this element shared + * between all directive linking functions. + * + * * `controller` - a controller instance - A controller instance if at least one directive on the + * element defines a controller. The controller is shared among all the directives, which allows + * the directives to use the controllers as a communication channel. + * + * + * + * #### Pre-linking function + * + * Executed before the child elements are linked. Not safe to do DOM transformation since the + * compiler linking function will fail to locate the correct elements for linking. + * + * #### Post-linking function + * + * Executed after the child elements are linked. It is safe to do DOM transformation in the post-linking function. + * + * <a name="Attributes"></a> + * ### Attributes + * + * The {@link api/ng.$compile.directive.Attributes Attributes} object - passed as a parameter in the + * `link()` or `compile()` functions. It has a variety of uses. + * + * accessing *Normalized attribute names:* + * Directives like 'ngBind' can be expressed in many ways: 'ng:bind', `data-ng-bind`, or 'x-ng-bind'. + * the attributes object allows for normalized access to + * the attributes. + * + * * *Directive inter-communication:* All directives share the same instance of the attributes + * object which allows the directives to use the attributes object as inter directive + * communication. + * + * * *Supports interpolation:* Interpolation attributes are assigned to the attribute object + * allowing other directives to read the interpolated value. + * + * * *Observing interpolated attributes:* Use `$observe` to observe the value changes of attributes + * that contain interpolation (e.g. `src="{{bar}}"`). Not only is this very efficient but it's also + * the only way to easily get the actual value because during the linking phase the interpolation + * hasn't been evaluated yet and so the value is at this time set to `undefined`. + * + * <pre> + * function linkingFn(scope, elm, attrs, ctrl) { + * // get the attribute value + * console.log(attrs.ngModel); + * + * // change the attribute + * attrs.$set('ngModel', 'new value'); + * + * // observe changes to interpolated attribute + * attrs.$observe('ngModel', function(value) { + * console.log('ngModel has changed value to ' + value); + * }); + * } + * </pre> + * + * Below is an example using `$compileProvider`. + * + * <div class="alert alert-warning"> + * **Note**: Typically directives are registered with `module.directive`. The example below is + * to illustrate how `$compile` works. + * </div> + * <doc:example module="compile"> <doc:source> <script> - // declare a new module, and inject the $compileProvider angular.module('compile', [], function($compileProvider) { // configure new 'compile' directive by passing a directive // factory function. The factory function injects the '$compile' @@ -4414,16 +5012,16 @@ * (a DOM element/tree) to a scope. Where: * * * `scope` - A {@link ng.$rootScope.Scope Scope} to bind to. - * * `cloneAttachFn` - If `cloneAttachFn` is provided, then the link function will clone the `template` - * and call the `cloneAttachFn` function allowing the caller to attach the + * * `cloneAttachFn` - If `cloneAttachFn` is provided, then the link function will clone the + * `template` and call the `cloneAttachFn` function allowing the caller to attach the * cloned elements to the DOM document at the appropriate place. The `cloneAttachFn` is * called as: <br> `cloneAttachFn(clonedElement, scope)` where: * * * `clonedElement` - is a clone of the original `element` passed into the compiler. * * `scope` - is the current scope with which the linking function is working with. * - * Calling the linking function returns the element of the template. It is either the original element - * passed in, or the clone of the element if the `cloneAttachFn` is provided. + * Calling the linking function returns the element of the template. It is either the original + * element passed in, or the clone of the element if the `cloneAttachFn` is provided. * * After linking the view is not updated until after a call to $digest which typically is done by * Angular automatically. @@ -4574,10 +5172,10 @@ * * The sanitization is a security measure aimed at prevent XSS attacks via html links. * - * Any url about to be assigned to img[src] via data-binding is first normalized and turned into an - * absolute url. Afterwards, the url is matched against the `imgSrcSanitizationWhitelist` regular - * expression. If a match is found, the original url is written into the dom. Otherwise, the - * absolute url is prefixed with `'unsafe:'` string and only then is it written into the DOM. + * Any url about to be assigned to img[src] via data-binding is first normalized and turned into + * an absolute url. Afterwards, the url is matched against the `imgSrcSanitizationWhitelist` + * regular expression. If a match is found, the original url is written into the dom. Otherwise, + * the absolute url is prefixed with `'unsafe:'` string and only then is it written into the DOM. * * @param {RegExp=} regexp New regexp to whitelist urls with. * @returns {RegExp|ng.$compileProvider} Current RegExp if called without value or self for @@ -4632,8 +5230,8 @@ * @function * * @description - * Removes the CSS class value specified by the classVal parameter from the element. If animations - * are enabled then an animation will be triggered for the class removal. + * Removes the CSS class value specified by the classVal parameter from the element. If + * animations are enabled then an animation will be triggered for the class removal. * * @param {string} classVal The className value that will be removed from the element */ @@ -4733,7 +5331,7 @@ values.push(token); } return values; - }; + } }, @@ -4786,9 +5384,11 @@ //================================ - function compile($compileNodes, transcludeFn, maxPriority, ignoreDirective, previousCompileContext) { + function compile($compileNodes, transcludeFn, maxPriority, ignoreDirective, + previousCompileContext) { if (!($compileNodes instanceof jqLite)) { - // jquery always rewraps, whereas we need to preserve the original selector so that we can modify it. + // jquery always rewraps, whereas we need to preserve the original selector so that we can + // modify it. $compileNodes = jqLite($compileNodes); } // We can not compile top level text elements since text nodes can be merged and we will @@ -4798,7 +5398,9 @@ $compileNodes[index] = node = jqLite(node).wrap('<span></span>').parent()[0]; } }); - var compositeLinkFn = compileNodes($compileNodes, transcludeFn, $compileNodes, maxPriority, ignoreDirective, previousCompileContext); + var compositeLinkFn = + compileNodes($compileNodes, transcludeFn, $compileNodes, + maxPriority, ignoreDirective, previousCompileContext); return function publicLinkFn(scope, cloneConnectFn){ assertArg(scope, 'scope'); // important!!: we must call our jqLite.clone() since the jQuery one is trying to be smart @@ -4839,13 +5441,14 @@ * @param {NodeList} nodeList an array of nodes or NodeList to compile * @param {function(angular.Scope[, cloneAttachFn]} transcludeFn A linking function, where the * scope argument is auto-generated to the new child of the transcluded parent scope. - * @param {DOMElement=} $rootElement If the nodeList is the root of the compilation tree then the - * rootElement must be set the jqLite collection of the compile root. This is + * @param {DOMElement=} $rootElement If the nodeList is the root of the compilation tree then + * the rootElement must be set the jqLite collection of the compile root. This is * needed so that the jqLite collection items can be replaced with widgets. * @param {number=} max directive priority * @returns {?function} A composite linking function of all of the matched directives or null. */ - function compileNodes(nodeList, transcludeFn, $rootElement, maxPriority, ignoreDirective, previousCompileContext) { + function compileNodes(nodeList, transcludeFn, $rootElement, maxPriority, ignoreDirective, + previousCompileContext) { var linkFns = [], nodeLinkFn, childLinkFn, directives, attrs, linkFnFound; @@ -4853,13 +5456,17 @@ attrs = new Attributes(); // we must always refer to nodeList[i] since the nodes can be replaced underneath us. - directives = collectDirectives(nodeList[i], [], attrs, i == 0 ? maxPriority : undefined, ignoreDirective); + directives = collectDirectives(nodeList[i], [], attrs, i === 0 ? maxPriority : undefined, + ignoreDirective); nodeLinkFn = (directives.length) - ? applyDirectivesToNode(directives, nodeList[i], attrs, transcludeFn, $rootElement, null, [], [], previousCompileContext) + ? applyDirectivesToNode(directives, nodeList[i], attrs, transcludeFn, $rootElement, + null, [], [], previousCompileContext) : null; - childLinkFn = (nodeLinkFn && nodeLinkFn.terminal || !nodeList[i].childNodes || !nodeList[i].childNodes.length) + childLinkFn = (nodeLinkFn && nodeLinkFn.terminal || + !nodeList[i].childNodes || + !nodeList[i].childNodes.length) ? null : compileNodes(nodeList[i].childNodes, nodeLinkFn ? nodeLinkFn.transclude : transcludeFn); @@ -4867,14 +5474,15 @@ linkFns.push(nodeLinkFn); linkFns.push(childLinkFn); linkFnFound = (linkFnFound || nodeLinkFn || childLinkFn); - previousCompileContext = null; //use the previous context only for the first element in the virtual group + //use the previous context only for the first element in the virtual group + previousCompileContext = null; } // return a linking function if we have found anything, null otherwise return linkFnFound ? compositeLinkFn : null; function compositeLinkFn(scope, nodeList, $rootElement, boundTranscludeFn) { - var nodeLinkFn, childLinkFn, node, childScope, childTranscludeFn, i, ii, n; + var nodeLinkFn, childLinkFn, node, $node, childScope, childTranscludeFn, i, ii, n; // copy nodeList so that linking doesn't break due to live list updates. var stableNodeList = []; @@ -4886,11 +5494,13 @@ node = stableNodeList[n]; nodeLinkFn = linkFns[i++]; childLinkFn = linkFns[i++]; + $node = jqLite(node); if (nodeLinkFn) { if (nodeLinkFn.scope) { - childScope = scope.$new(isObject(nodeLinkFn.scope)); - jqLite(node).data('$scope', childScope); + childScope = scope.$new(); + $node.data('$scope', childScope); + safeAddClass($node, 'ng-scope'); } else { childScope = scope; } @@ -4971,7 +5581,8 @@ attrs[nName] = true; // presence means true } addAttrInterpolateDirective(node, directives, value, nName); - addDirective(directives, nName, 'A', maxPriority, ignoreDirective, attrStartName, attrEndName); + addDirective(directives, nName, 'A', maxPriority, ignoreDirective, attrStartName, + attrEndName); } } @@ -5000,7 +5611,8 @@ } } } catch (e) { - // turns out that under some circumstances IE9 throws errors when one attempts to read comment's node value. + // turns out that under some circumstances IE9 throws errors when one attempts to read + // comment's node value. // Just ignore it and continue. (Can't seem to reproduce in test case.) } break; @@ -5011,7 +5623,8 @@ } /** - * Given a node with an directive-start it collects all of the siblings until it find directive-end. + * Given a node with an directive-start it collects all of the siblings until it finds + * directive-end. * @param node * @param attrStart * @param attrEnd @@ -5024,7 +5637,9 @@ var startNode = node; do { if (!node) { - throw $compileMinErr('uterdir', "Unterminated attribute, found '{0}' but no matching '{1}' found.", attrStart, attrEnd); + throw $compileMinErr('uterdir', + "Unterminated attribute, found '{0}' but no matching '{1}' found.", + attrStart, attrEnd); } if (node.nodeType == 1 /** Element **/) { if (node.hasAttribute(attrStart)) depth++; @@ -5052,7 +5667,7 @@ return function(scope, element, attrs, controllers) { element = groupScan(element[0], attrStart, attrEnd); return linkFn(scope, element, attrs, controllers); - } + }; } /** @@ -5065,32 +5680,36 @@ * @param {Node} compileNode The raw DOM node to apply the compile functions to * @param {Object} templateAttrs The shared attribute function * @param {function(angular.Scope[, cloneAttachFn]} transcludeFn A linking function, where the - * scope argument is auto-generated to the new child of the transcluded parent scope. + * scope argument is auto-generated to the new + * child of the transcluded parent scope. * @param {JQLite} jqCollection If we are working on the root of the compile tree then this - * argument has the root jqLite array so that we can replace nodes on it. - * @param {Object=} originalReplaceDirective An optional directive that will be ignored when compiling - * the transclusion. + * argument has the root jqLite array so that we can replace nodes + * on it. + * @param {Object=} originalReplaceDirective An optional directive that will be ignored when + * compiling the transclusion. * @param {Array.<Function>} preLinkFns * @param {Array.<Function>} postLinkFns - * @param {Object} previousCompileContext Context used for previous compilation of the current node + * @param {Object} previousCompileContext Context used for previous compilation of the current + * node * @returns linkFn */ - function applyDirectivesToNode(directives, compileNode, templateAttrs, transcludeFn, jqCollection, - originalReplaceDirective, preLinkFns, postLinkFns, previousCompileContext) { + function applyDirectivesToNode(directives, compileNode, templateAttrs, transcludeFn, + jqCollection, originalReplaceDirective, preLinkFns, postLinkFns, + previousCompileContext) { previousCompileContext = previousCompileContext || {}; var terminalPriority = -Number.MAX_VALUE, newScopeDirective, + controllerDirectives = previousCompileContext.controllerDirectives, newIsolateScopeDirective = previousCompileContext.newIsolateScopeDirective, templateDirective = previousCompileContext.templateDirective, + transcludeDirective = previousCompileContext.transcludeDirective, $compileNode = templateAttrs.$$element = jqLite(compileNode), directive, directiveName, $template, - transcludeDirective = previousCompileContext.transcludeDirective, replaceDirective = originalReplaceDirective, childTranscludeFn = transcludeFn, - controllerDirectives, linkFn, directiveValue; @@ -5102,7 +5721,7 @@ // collect multiblock sections if (attrStart) { - $compileNode = groupScan(compileNode, attrStart, attrEnd) + $compileNode = groupScan(compileNode, attrStart, attrEnd); } $template = undefined; @@ -5113,15 +5732,14 @@ if (directiveValue = directive.scope) { newScopeDirective = newScopeDirective || directive; - // skip the check for directives with async templates, we'll check the derived sync directive when - // the template arrives + // skip the check for directives with async templates, we'll check the derived sync + // directive when the template arrives if (!directive.templateUrl) { - assertNoDuplicate('new/isolated scope', newIsolateScopeDirective, directive, $compileNode); + assertNoDuplicate('new/isolated scope', newIsolateScopeDirective, directive, + $compileNode); if (isObject(directiveValue)) { - safeAddClass($compileNode, 'ng-isolate-scope'); newIsolateScopeDirective = directive; } - safeAddClass($compileNode, 'ng-scope'); } } @@ -5136,9 +5754,10 @@ } if (directiveValue = directive.transclude) { - // Special case ngRepeat so that we don't complain about duplicate transclusion, ngRepeat knows how to handle - // this on its own. - if (directiveName !== 'ngRepeat') { + // Special case ngIf and ngRepeat so that we don't complain about duplicate transclusion. + // This option should only be used by directives that know how to how to safely handle element transclusion, + // where the transcluded nodes are added or replaced after linking. + if (!directive.$$tlb) { assertNoDuplicate('transclusion', transcludeDirective, directive, $compileNode); transcludeDirective = directive; } @@ -5147,18 +5766,24 @@ terminalPriority = directive.priority; $template = groupScan(compileNode, attrStart, attrEnd); $compileNode = templateAttrs.$$element = - jqLite(document.createComment(' ' + directiveName + ': ' + templateAttrs[directiveName] + ' ')); + jqLite(document.createComment(' ' + directiveName + ': ' + + templateAttrs[directiveName] + ' ')); compileNode = $compileNode[0]; replaceWith(jqCollection, jqLite(sliceArgs($template)), compileNode); childTranscludeFn = compile($template, transcludeFn, terminalPriority, replaceDirective && replaceDirective.name, { - newIsolateScopeDirective: newIsolateScopeDirective, - transcludeDirective: transcludeDirective, - templateDirective: templateDirective + // Don't pass in: + // - controllerDirectives - otherwise we'll create duplicates controllers + // - newIsolateScopeDirective or templateDirective - combining templates with + // element transclusion doesn't make sense. + // + // We need only transcludeDirective so that we prevent putting transclusion + // on the same element more than once. + transcludeDirective: transcludeDirective }); } else { - $template = jqLite(JQLiteClone(compileNode)).contents(); + $template = jqLite(jqLiteClone(compileNode)).contents(); $compileNode.html(''); // clear contents childTranscludeFn = compile($template, transcludeFn); } @@ -5182,7 +5807,9 @@ compileNode = $template[0]; if ($template.length != 1 || compileNode.nodeType !== 1) { - throw $compileMinErr('tplrt', "Template for directive '{0}' must have exactly one root element. {1}", directiveName, ''); + throw $compileMinErr('tplrt', + "Template for directive '{0}' must have exactly one root element. {1}", + directiveName, ''); } replaceWith(jqCollection, $compileNode, compileNode); @@ -5191,16 +5818,16 @@ // combine directives from the original node and from the template: // - take the array of directives for this element - // - split it into two parts, those that were already applied and those that weren't - // - collect directives from the template, add them to the second group and sort them - // - append the second group with new directives to the first group - directives = directives.concat( - collectDirectives( - compileNode, - directives.splice(i + 1, directives.length - (i + 1)), - newTemplateAttrs - ) - ); + // - split it into two parts, those that already applied (processed) and those that weren't (unprocessed) + // - collect directives from the template and sort them by priority + // - combine directives as: processed + template + unprocessed + var templateDirectives = collectDirectives(compileNode, [], newTemplateAttrs); + var unprocessedDirectives = directives.splice(i + 1, directives.length - (i + 1)); + + if (newIsolateScopeDirective) { + markDirectivesAsIsolate(templateDirectives); + } + directives = directives.concat(templateDirectives).concat(unprocessedDirectives); mergeTemplateAttributes(templateAttrs, newTemplateAttrs); ii = directives.length; @@ -5219,9 +5846,10 @@ nodeLinkFn = compileTemplateUrl(directives.splice(i, directives.length - i), $compileNode, templateAttrs, jqCollection, childTranscludeFn, preLinkFns, postLinkFns, { + controllerDirectives: controllerDirectives, newIsolateScopeDirective: newIsolateScopeDirective, - transcludeDirective: transcludeDirective, - templateDirective: templateDirective + templateDirective: templateDirective, + transcludeDirective: transcludeDirective }); ii = directives.length; } else if (directive.compile) { @@ -5244,7 +5872,7 @@ } - nodeLinkFn.scope = newScopeDirective && newScopeDirective.scope; + nodeLinkFn.scope = newScopeDirective && newScopeDirective.scope === true; nodeLinkFn.transclude = transcludeDirective && childTranscludeFn; // might be normal or delayed nodeLinkFn depending on if templateUrl is present @@ -5256,11 +5884,17 @@ if (pre) { if (attrStart) pre = groupElementsLinkFnWrapper(pre, attrStart, attrEnd); pre.require = directive.require; + if (newIsolateScopeDirective === directive || directive.$$isolateScope) { + pre = cloneAndAnnotateFn(pre, {isolateScope: true}); + } preLinkFns.push(pre); } if (post) { if (attrStart) post = groupElementsLinkFnWrapper(post, attrStart, attrEnd); post.require = directive.require; + if (newIsolateScopeDirective === directive || directive.$$isolateScope) { + post = cloneAndAnnotateFn(post, {isolateScope: true}); + } postLinkFns.push(post); } } @@ -5285,7 +5919,9 @@ } if (!value && !optional) { - throw $compileMinErr('ctreq', "Controller '{0}', required by directive '{1}', can't be found!", require, directiveName); + throw $compileMinErr('ctreq', + "Controller '{0}', required by directive '{1}', can't be found!", + require, directiveName); } return value; } else if (isArray(require)) { @@ -5299,7 +5935,7 @@ function nodeLinkFn(childLinkFn, scope, linkNode, $rootElement, boundTranscludeFn) { - var attrs, $element, i, ii, linkFn, controller; + var attrs, $element, i, ii, linkFn, controller, isolateScope; if (compileNode === linkNode) { attrs = templateAttrs; @@ -5310,9 +5946,20 @@ if (newIsolateScopeDirective) { var LOCAL_REGEXP = /^\s*([@=&])(\??)\s*(\w*)\s*$/; + var $linkNode = jqLite(linkNode); - var parentScope = scope.$parent || scope; + isolateScope = scope.$new(true); + if (templateDirective && (templateDirective === newIsolateScopeDirective.$$originalDirective)) { + $linkNode.data('$isolateScope', isolateScope) ; + } else { + $linkNode.data('$isolateScopeNoTemplate', isolateScope); + } + + + + safeAddClass($linkNode, 'ng-isolate-scope'); + forEach(newIsolateScopeDirective.scope, function(definition, scopeName) { var match = definition.match(LOCAL_REGEXP) || [], attrName = match[3] || scopeName, @@ -5321,64 +5968,64 @@ lastValue, parentGet, parentSet; - scope.$$isolateBindings[scopeName] = mode + attrName; + isolateScope.$$isolateBindings[scopeName] = mode + attrName; switch (mode) { - case '@': { + case '@': attrs.$observe(attrName, function(value) { - scope[scopeName] = value; + isolateScope[scopeName] = value; }); - attrs.$$observers[attrName].$$scope = parentScope; + attrs.$$observers[attrName].$$scope = scope; if( attrs[attrName] ) { - // If the attribute has been provided then we trigger an interpolation to ensure the value is there for use in the link fn - scope[scopeName] = $interpolate(attrs[attrName])(parentScope); + // If the attribute has been provided then we trigger an interpolation to ensure + // the value is there for use in the link fn + isolateScope[scopeName] = $interpolate(attrs[attrName])(scope); } break; - } - case '=': { + case '=': if (optional && !attrs[attrName]) { return; } parentGet = $parse(attrs[attrName]); parentSet = parentGet.assign || function() { // reset the change, or we will throw this exception on every $digest - lastValue = scope[scopeName] = parentGet(parentScope); - throw $compileMinErr('nonassign', "Expression '{0}' used with directive '{1}' is non-assignable!", + lastValue = isolateScope[scopeName] = parentGet(scope); + throw $compileMinErr('nonassign', + "Expression '{0}' used with directive '{1}' is non-assignable!", attrs[attrName], newIsolateScopeDirective.name); }; - lastValue = scope[scopeName] = parentGet(parentScope); - scope.$watch(function parentValueWatch() { - var parentValue = parentGet(parentScope); + lastValue = isolateScope[scopeName] = parentGet(scope); + isolateScope.$watch(function parentValueWatch() { + var parentValue = parentGet(scope); - if (parentValue !== scope[scopeName]) { + if (parentValue !== isolateScope[scopeName]) { // we are out of sync and need to copy if (parentValue !== lastValue) { // parent changed and it has precedence - lastValue = scope[scopeName] = parentValue; + lastValue = isolateScope[scopeName] = parentValue; } else { // if the parent can be assigned then do so - parentSet(parentScope, parentValue = lastValue = scope[scopeName]); + parentSet(scope, parentValue = lastValue = isolateScope[scopeName]); } } return parentValue; }); break; - } - case '&': { + case '&': parentGet = $parse(attrs[attrName]); - scope[scopeName] = function(locals) { - return parentGet(parentScope, locals); + isolateScope[scopeName] = function(locals) { + return parentGet(scope, locals); }; break; - } - default: { - throw $compileMinErr('iscp', "Invalid isolate scope definition for directive '{0}'. Definition: {... {1}: '{2}' ...}", + default: + throw $compileMinErr('iscp', + "Invalid isolate scope definition for directive '{0}'." + + " Definition: {... {1}: '{2}' ...}", newIsolateScopeDirective.name, scopeName, definition); - } } }); } @@ -5386,7 +6033,7 @@ if (controllerDirectives) { forEach(controllerDirectives, function(directive) { var locals = { - $scope: scope, + $scope: directive === newIsolateScopeDirective || directive.$$isolateScope ? isolateScope : scope, $element: $element, $attrs: attrs, $transclude: boundTranscludeFn @@ -5418,7 +6065,7 @@ for(i = 0, ii = preLinkFns.length; i < ii; i++) { try { linkFn = preLinkFns[i]; - linkFn(scope, $element, attrs, + linkFn(linkFn.isolateScope ? isolateScope : scope, $element, attrs, linkFn.require && getControllers(linkFn.require, $element)); } catch (e) { $exceptionHandler(e, startingTag($element)); @@ -5426,13 +6073,19 @@ } // RECURSION - childLinkFn && childLinkFn(scope, linkNode.childNodes, undefined, boundTranscludeFn); + // We only pass the isolate scope, if the isolate directive has a template, + // otherwise the child elements do not belong to the isolate directive. + var scopeToChild = scope; + if (newIsolateScopeDirective && (newIsolateScopeDirective.template || newIsolateScopeDirective.templateUrl === null)) { + scopeToChild = isolateScope; + } + childLinkFn && childLinkFn(scopeToChild, linkNode.childNodes, undefined, boundTranscludeFn); // POSTLINKING for(i = postLinkFns.length - 1; i >= 0; i--) { try { linkFn = postLinkFns[i]; - linkFn(scope, $element, attrs, + linkFn(linkFn.isolateScope ? isolateScope : scope, $element, attrs, linkFn.require && getControllers(linkFn.require, $element)); } catch (e) { $exceptionHandler(e, startingTag($element)); @@ -5441,6 +6094,12 @@ } } + function markDirectivesAsIsolate(directives) { + // mark all directives as needing isolate scope. + for (var j = 0, jj = directives.length; j < jj; j++) { + directives[j] = inherit(directives[j], {$$isolateScope: true}); + } + } /** * looks up the directive and decorates it with exception handling and proper parameters. We @@ -5456,7 +6115,8 @@ * * `M`: comment * @returns true if directive was added. */ - function addDirective(tDirectives, name, location, maxPriority, ignoreDirective, startAttrName, endAttrName) { + function addDirective(tDirectives, name, location, maxPriority, ignoreDirective, startAttrName, + endAttrName) { if (name === ignoreDirective) return null; var match = null; if (hasDirectives.hasOwnProperty(name)) { @@ -5529,7 +6189,7 @@ origAsyncDirective = directives.shift(), // The fact that we have to copy and patch the directive seems wrong! derivedSyncDirective = extend({}, origAsyncDirective, { - templateUrl: null, transclude: null, replace: null + templateUrl: null, transclude: null, replace: null, $$originalDirective: origAsyncDirective }), templateUrl = (isFunction(origAsyncDirective.templateUrl)) ? origAsyncDirective.templateUrl($compileNode, tAttrs) @@ -5548,13 +6208,19 @@ compileNode = $template[0]; if ($template.length != 1 || compileNode.nodeType !== 1) { - throw $compileMinErr('tplrt', "Template for directive '{0}' must have exactly one root element. {1}", + throw $compileMinErr('tplrt', + "Template for directive '{0}' must have exactly one root element. {1}", origAsyncDirective.name, templateUrl); } tempTemplateAttrs = {$attr: {}}; replaceWith($rootElement, $compileNode, compileNode); - collectDirectives(compileNode, directives, tempTemplateAttrs); + var templateDirectives = collectDirectives(compileNode, [], tempTemplateAttrs); + + if (isObject(origAsyncDirective.scope)) { + markDirectivesAsIsolate(templateDirectives); + } + directives = templateDirectives.concat(directives); mergeTemplateAttributes(tAttrs, tempTemplateAttrs); } else { compileNode = beforeTemplateCompileNode; @@ -5564,7 +6230,8 @@ directives.unshift(derivedSyncDirective); afterTemplateNodeLinkFn = applyDirectivesToNode(directives, compileNode, tAttrs, - childTranscludeFn, $compileNode, origAsyncDirective, preLinkFns, postLinkFns, previousCompileContext); + childTranscludeFn, $compileNode, origAsyncDirective, preLinkFns, postLinkFns, + previousCompileContext); forEach($rootElement, function(node, i) { if (node == compileNode) { $rootElement[i] = $compileNode[0]; @@ -5582,11 +6249,12 @@ if (beforeTemplateLinkNode !== beforeTemplateCompileNode) { // it was cloned therefore we have to clone as well. - linkNode = JQLiteClone(compileNode); + linkNode = jqLiteClone(compileNode); replaceWith(linkRootElement, jqLite(beforeTemplateLinkNode), linkNode); } - afterTemplateNodeLinkFn(afterTemplateChildLinkFn, scope, linkNode, $rootElement, controller); + afterTemplateNodeLinkFn(afterTemplateChildLinkFn, scope, linkNode, $rootElement, + controller); } linkQueue = null; }). @@ -5663,37 +6331,43 @@ if (name === "multiple" && nodeName_(node) === "SELECT") { - throw $compileMinErr("selmulti", "Binding to the 'multiple' attribute is not supported. Element: {0}", + throw $compileMinErr("selmulti", + "Binding to the 'multiple' attribute is not supported. Element: {0}", startingTag(node)); } directives.push({ - priority: -100, - compile: valueFn(function attrInterpolateLinkFn(scope, element, attr) { - var $$observers = (attr.$$observers || (attr.$$observers = {})); + priority: 100, + compile: function() { + return { + pre: function attrInterpolatePreLinkFn(scope, element, attr) { + var $$observers = (attr.$$observers || (attr.$$observers = {})); - if (EVENT_HANDLER_ATTR_REGEXP.test(name)) { - throw $compileMinErr('nodomevents', - "Interpolations for HTML DOM event attributes are disallowed. Please use the ng- " + - "versions (such as ng-click instead of onclick) instead."); - } + if (EVENT_HANDLER_ATTR_REGEXP.test(name)) { + throw $compileMinErr('nodomevents', + "Interpolations for HTML DOM event attributes are disallowed. Please use the " + + "ng- versions (such as ng-click instead of onclick) instead."); + } - // we need to interpolate again, in case the attribute value has been updated - // (e.g. by another directive's compile function) - interpolateFn = $interpolate(attr[name], true, getTrustedContext(node, name)); + // we need to interpolate again, in case the attribute value has been updated + // (e.g. by another directive's compile function) + interpolateFn = $interpolate(attr[name], true, getTrustedContext(node, name)); - // if attribute was updated so that there is no interpolation going on we don't want to - // register any observers - if (!interpolateFn) return; + // if attribute was updated so that there is no interpolation going on we don't want to + // register any observers + if (!interpolateFn) return; - // TODO(i): this should likely be attr.$set(name, iterpolateFn(scope) so that we reset the actual attr value - attr[name] = interpolateFn(scope); - ($$observers[name] || ($$observers[name] = [])).$$inter = true; - (attr.$$observers && attr.$$observers[name].$$scope || scope). - $watch(interpolateFn, function interpolateFnWatchAction(value) { - attr.$set(name, value); - }); - }) + // TODO(i): this should likely be attr.$set(name, iterpolateFn(scope) so that we reset the + // actual attr value + attr[name] = interpolateFn(scope); + ($$observers[name] || ($$observers[name] = [])).$$inter = true; + (attr.$$observers && attr.$$observers[name].$$scope || scope). + $watch(interpolateFn, function interpolateFnWatchAction(value) { + attr.$set(name, value); + }); + } + }; + } }); } @@ -5703,9 +6377,9 @@ * have no parents, provided that the containing jqLite collection is provided. * * @param {JqLite=} $rootElement The root of the compile tree. Used so that we can replace nodes - * in the root of the tree. - * @param {JqLite} elementsToRemove The jqLite element which we are going to replace. We keep the shell, - * but replace its DOM node reference. + * in the root of the tree. + * @param {JqLite} elementsToRemove The jqLite element which we are going to replace. We keep + * the shell, but replace its DOM node reference. * @param {Node} newNode The new DOM node. */ function replaceWith($rootElement, elementsToRemove, newNode) { @@ -5747,8 +6421,13 @@ } elementsToRemove[0] = newNode; - elementsToRemove.length = 1 + elementsToRemove.length = 1; } + + + function cloneAndAnnotateFn(fn, annotation) { + return extend(function() { return fn.apply(null, arguments); }, fn, annotation); + } }]; } @@ -5771,13 +6450,13 @@ /** * @ngdoc object * @name ng.$compile.directive.Attributes + * * @description + * A shared object between directive compile / linking functions which contains normalized DOM + * element attributes. The values reflect current binding state `{{ }}`. The normalization is + * needed since all of these are treated as equivalent in Angular: * - * A shared object between directive compile / linking functions which contains normalized DOM element - * attributes. The the values reflect current binding state `{{ }}`. The normalization is needed - * since all of these are treated as equivalent in Angular: - * - * <span ng:bind="a" ng-bind="a" data-ng-bind="a" x-ng-bind="a"> + * <span ng:bind="a" ng-bind="a" data-ng-bind="a" x-ng-bind="a"> */ /** @@ -5785,7 +6464,7 @@ * @name ng.$compile.directive.Attributes#$attr * @propertyOf ng.$compile.directive.Attributes * @returns {object} A map of DOM element attribute names to the normalized name. This is - * needed to do reverse lookup from normalized name back to actual name. + * needed to do reverse lookup from normalized name back to actual name. */ @@ -5834,7 +6513,7 @@ * controllers. * * This provider allows controller registration via the - * {@link ng.$controllerProvider#register register} method. + * {@link ng.$controllerProvider#methods_register register} method. */ function $ControllerProvider() { var controllers = {}, @@ -5853,7 +6532,7 @@ this.register = function(name, constructor) { assertNotHasOwnProperty(name, 'controller'); if (isObject(name)) { - extend(controllers, name) + extend(controllers, name); } else { controllers[name] = constructor; } @@ -5903,7 +6582,9 @@ if (identifier) { if (!(locals && typeof locals.$scope == 'object')) { - throw minErr('$controller')('noscp', "Cannot export controller '{0}' as '{1}'! No $scope object provided via `locals`.", constructor || expression.name, identifier); + throw minErr('$controller')('noscp', + "Cannot export controller '{0}' as '{1}'! No $scope object provided via `locals`.", + constructor || expression.name, identifier); } locals.$scope[identifier] = instance; @@ -6193,11 +6874,11 @@ * called for such responses. * * # Calling $http from outside AngularJS - * The `$http` service will not actually send the request until the next `$digest()` is executed. - * Normally this is not an issue, since almost all the time your call to `$http` will be from within - * a `$apply()` block. - * If you are calling `$http` from outside Angular, then you should wrap it in a call to `$apply` - * to cause a $digest to occur and also to handle errors in the block correctly. + * The `$http` service will not actually send the request until the next `$digest()` is + * executed. Normally this is not an issue, since almost all the time your call to `$http` will + * be from within a `$apply()` block. + * If you are calling `$http` from outside Angular, then you should wrap it in a call to + * `$apply` to cause a $digest to occur and also to handle errors in the block correctly. * * ``` * $scope.$apply(function() { @@ -6206,10 +6887,11 @@ * ``` * * # Writing Unit Tests that use $http - * When unit testing you are mostly responsible for scheduling the `$digest` cycle. If you do not - * trigger a `$digest` before calling `$httpBackend.flush()` then the request will not have been - * made and `$httpBackend.expect(...)` expectations will fail. The solution is to run the code - * that calls the `$http()` method inside a $apply block as explained in the previous section. + * When unit testing you are mostly responsible for scheduling the `$digest` cycle. If you do + * not trigger a `$digest` before calling `$httpBackend.flush()` then the request will not have + * been made and `$httpBackend.expect(...)` expectations will fail. The solution is to run the + * code that calls the `$http()` method inside a $apply block as explained in the previous + * section. * * ``` * $httpBackend.expectGET(...); @@ -6232,12 +6914,12 @@ * * Complete list of shortcut methods: * - * - {@link ng.$http#get $http.get} - * - {@link ng.$http#head $http.head} - * - {@link ng.$http#post $http.post} - * - {@link ng.$http#put $http.put} - * - {@link ng.$http#delete $http.delete} - * - {@link ng.$http#jsonp $http.jsonp} + * - {@link ng.$http#methods_get $http.get} + * - {@link ng.$http#methods_head $http.head} + * - {@link ng.$http#methods_post $http.post} + * - {@link ng.$http#methods_put $http.put} + * - {@link ng.$http#methods_delete $http.delete} + * - {@link ng.$http#methods_jsonp $http.jsonp} * * * # Setting HTTP Headers @@ -6258,8 +6940,9 @@ * with the lowercased HTTP method name as the key, e.g. * `$httpProvider.defaults.headers.get = { 'My-Header' : 'value' }. * - * Additionally, the defaults can be set at runtime via the `$http.defaults` object in the same - * fashion. + * The defaults can also be set at runtime via the `$http.defaults` object in the same + * fashion. In addition, you can supply a `headers` property in the config object passed when + * calling `$http(config)`, which overrides the defaults without changing them globally. * * * # Transforming Requests and Responses @@ -6269,22 +6952,24 @@ * * Request transformations: * - * - If the `data` property of the request configuration object contains an object, serialize it into - * JSON format. + * - If the `data` property of the request configuration object contains an object, serialize it + * into JSON format. * * Response transformations: * * - If XSRF prefix is detected, strip it (see Security Considerations section below). * - If JSON response is detected, deserialize it using a JSON parser. * - * To globally augment or override the default transforms, modify the `$httpProvider.defaults.transformRequest` and - * `$httpProvider.defaults.transformResponse` properties. These properties are by default an - * array of transform functions, which allows you to `push` or `unshift` a new transformation function into the - * transformation chain. You can also decide to completely override any default transformations by assigning your + * To globally augment or override the default transforms, modify the + * `$httpProvider.defaults.transformRequest` and `$httpProvider.defaults.transformResponse` + * properties. These properties are by default an array of transform functions, which allows you + * to `push` or `unshift` a new transformation function into the transformation chain. You can + * also decide to completely override any default transformations by assigning your * transformation functions to these properties directly without the array wrapper. * - * Similarly, to locally override the request/response transforms, augment the `transformRequest` and/or - * `transformResponse` properties of the configuration object passed into `$http`. + * Similarly, to locally override the request/response transforms, augment the + * `transformRequest` and/or `transformResponse` properties of the configuration object passed + * into `$http`. * * * # Caching @@ -6322,16 +7007,16 @@ * * There are two kinds of interceptors (and two kinds of rejection interceptors): * - * * `request`: interceptors get called with http `config` object. The function is free to modify - * the `config` or create a new one. The function needs to return the `config` directly or as a - * promise. - * * `requestError`: interceptor gets called when a previous interceptor threw an error or resolved - * with a rejection. - * * `response`: interceptors get called with http `response` object. The function is free to modify - * the `response` or create a new one. The function needs to return the `response` directly or as a - * promise. - * * `responseError`: interceptor gets called when a previous interceptor threw an error or resolved - * with a rejection. + * * `request`: interceptors get called with http `config` object. The function is free to + * modify the `config` or create a new one. The function needs to return the `config` + * directly or as a promise. + * * `requestError`: interceptor gets called when a previous interceptor threw an error or + * resolved with a rejection. + * * `response`: interceptors get called with http `response` object. The function is free to + * modify the `response` or create a new one. The function needs to return the `response` + * directly or as a promise. + * * `responseError`: interceptor gets called when a previous interceptor threw an error or + * resolved with a rejection. * * * <pre> @@ -6384,6 +7069,7 @@ * 'response': function(response) { * // same as above * } + * }; * }); * </pre> * @@ -6480,9 +7166,10 @@ * cookie called `XSRF-TOKEN` on the first HTTP GET request. On subsequent XHR requests the * server can verify that the cookie matches `X-XSRF-TOKEN` HTTP header, and therefore be sure * that only JavaScript running on your domain could have sent the request. The token must be - * unique for each user and must be verifiable by the server (to prevent the JavaScript from making - * up its own tokens). We recommend that the token is a digest of your site's authentication - * cookie with a {@link https://en.wikipedia.org/wiki/Salt_(cryptography) salt} for added security. + * unique for each user and must be verifiable by the server (to prevent the JavaScript from + * making up its own tokens). We recommend that the token is a digest of your site's + * authentication cookie with a {@link https://en.wikipedia.org/wiki/Salt_(cryptography) salt} + * for added security. * * The name of the headers can be specified using the xsrfHeaderName and xsrfCookieName * properties of either $httpProvider.defaults, or the per-request config object. @@ -6493,18 +7180,21 @@ * * - **method** – `{string}` – HTTP method (e.g. 'GET', 'POST', etc) * - **url** – `{string}` – Absolute or relative URL of the resource that is being requested. - * - **params** – `{Object.<string|Object>}` – Map of strings or objects which will be turned to - * `?key1=value1&key2=value2` after the url. If the value is not a string, it will be JSONified. + * - **params** – `{Object.<string|Object>}` – Map of strings or objects which will be turned + * to `?key1=value1&key2=value2` after the url. If the value is not a string, it will be + * JSONified. * - **data** – `{string|Object}` – Data to be sent as the request message data. * - **headers** – `{Object}` – Map of strings or functions which return strings representing - * HTTP headers to send to the server. If the return value of a function is null, the header will - * not be sent. + * HTTP headers to send to the server. If the return value of a function is null, the + * header will not be sent. * - **xsrfHeaderName** – `{string}` – Name of HTTP header to populate with the XSRF token. * - **xsrfCookieName** – `{string}` – Name of cookie containing the XSRF token. - * - **transformRequest** – `{function(data, headersGetter)|Array.<function(data, headersGetter)>}` – + * - **transformRequest** – + * `{function(data, headersGetter)|Array.<function(data, headersGetter)>}` – * transform function or an array of such functions. The transform function takes the http * request body and headers and returns its transformed (typically serialized) version. - * - **transformResponse** – `{function(data, headersGetter)|Array.<function(data, headersGetter)>}` – + * - **transformResponse** – + * `{function(data, headersGetter)|Array.<function(data, headersGetter)>}` – * transform function or an array of such functions. The transform function takes the http * response body and headers and returns its transformed (typically deserialized) version. * - **cache** – `{boolean|Cache}` – If true, a default $http cache will be used to cache the @@ -6527,7 +7217,8 @@ * these functions are destructured representation of the response object passed into the * `then` method. The response object has these properties: * - * - **data** – `{string|Object}` – The response body transformed with the transform functions. + * - **data** – `{string|Object}` – The response body transformed with the transform + * functions. * - **status** – `{number}` – HTTP status code of the response. * - **headers** – `{function([headerName])}` – Header getter function. * - **config** – `{Object}` – The configuration object that was used to generate the request. @@ -6537,75 +7228,82 @@ * * * @example - <example> - <file name="index.html"> - <div ng-controller="FetchCtrl"> - <select ng-model="method"> - <option>GET</option> - <option>JSONP</option> - </select> - <input type="text" ng-model="url" size="80"/> - <button ng-click="fetch()">fetch</button><br> - <button ng-click="updateModel('GET', 'http-hello.html')">Sample GET</button> - <button ng-click="updateModel('JSONP', 'http://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero')">Sample JSONP</button> - <button ng-click="updateModel('JSONP', 'http://angularjs.org/doesntexist&callback=JSON_CALLBACK')">Invalid JSONP</button> - <pre>http status code: {{status}}</pre> - <pre>http response data: {{data}}</pre> - </div> - </file> - <file name="script.js"> - function FetchCtrl($scope, $http, $templateCache) { - $scope.method = 'GET'; - $scope.url = 'http-hello.html'; +<example> +<file name="index.html"> + <div ng-controller="FetchCtrl"> + <select ng-model="method"> + <option>GET</option> + <option>JSONP</option> + </select> + <input type="text" ng-model="url" size="80"/> + <button ng-click="fetch()">fetch</button><br> + <button ng-click="updateModel('GET', 'http-hello.html')">Sample GET</button> + <button + ng-click="updateModel('JSONP', + 'http://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero')"> + Sample JSONP + </button> + <button + ng-click="updateModel('JSONP', 'http://angularjs.org/doesntexist&callback=JSON_CALLBACK')"> + Invalid JSONP + </button> + <pre>http status code: {{status}}</pre> + <pre>http response data: {{data}}</pre> + </div> +</file> +<file name="script.js"> + function FetchCtrl($scope, $http, $templateCache) { + $scope.method = 'GET'; + $scope.url = 'http-hello.html'; - $scope.fetch = function() { - $scope.code = null; - $scope.response = null; + $scope.fetch = function() { + $scope.code = null; + $scope.response = null; - $http({method: $scope.method, url: $scope.url, cache: $templateCache}). - success(function(data, status) { - $scope.status = status; - $scope.data = data; - }). - error(function(data, status) { - $scope.data = data || "Request failed"; - $scope.status = status; - }); - }; + $http({method: $scope.method, url: $scope.url, cache: $templateCache}). + success(function(data, status) { + $scope.status = status; + $scope.data = data; + }). + error(function(data, status) { + $scope.data = data || "Request failed"; + $scope.status = status; + }); + }; - $scope.updateModel = function(method, url) { - $scope.method = method; - $scope.url = url; - }; - } - </file> - <file name="http-hello.html"> - Hello, $http! - </file> - <file name="scenario.js"> - it('should make an xhr GET request', function() { - element(':button:contains("Sample GET")').click(); - element(':button:contains("fetch")').click(); - expect(binding('status')).toBe('200'); - expect(binding('data')).toMatch(/Hello, \$http!/); - }); + $scope.updateModel = function(method, url) { + $scope.method = method; + $scope.url = url; + }; + } +</file> +<file name="http-hello.html"> + Hello, $http! +</file> +<file name="scenario.js"> + it('should make an xhr GET request', function() { + element(':button:contains("Sample GET")').click(); + element(':button:contains("fetch")').click(); + expect(binding('status')).toBe('200'); + expect(binding('data')).toMatch(/Hello, \$http!/); + }); - it('should make a JSONP request to angularjs.org', function() { - element(':button:contains("Sample JSONP")').click(); - element(':button:contains("fetch")').click(); - expect(binding('status')).toBe('200'); - expect(binding('data')).toMatch(/Super Hero!/); - }); + it('should make a JSONP request to angularjs.org', function() { + element(':button:contains("Sample JSONP")').click(); + element(':button:contains("fetch")').click(); + expect(binding('status')).toBe('200'); + expect(binding('data')).toMatch(/Super Hero!/); + }); - it('should make JSONP request to invalid URL and invoke the error handler', - function() { - element(':button:contains("Invalid JSONP")').click(); - element(':button:contains("fetch")').click(); - expect(binding('status')).toBe('0'); - expect(binding('data')).toBe('Request failed'); - }); - </file> - </example> + it('should make JSONP request to invalid URL and invoke the error handler', + function() { + element(':button:contains("Invalid JSONP")').click(); + element(':button:contains("fetch")').click(); + expect(binding('status')).toBe('0'); + expect(binding('data')).toBe('Request failed'); + }); +</file> +</example> */ function $http(requestConfig) { var config = { @@ -6965,7 +7663,7 @@ if (!params) return url; var parts = []; forEachSorted(params, function(value, key) { - if (value == null || value == undefined) return; + if (value === null || isUndefined(value)) return; if (!isArray(value)) value = [value]; forEach(value, function(v) { @@ -6984,6 +7682,7 @@ } var XHR = window.XMLHttpRequest || function() { + /* global ActiveXObject */ try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e1) {} try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e2) {} try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e3) {} @@ -7054,7 +7753,7 @@ var responseHeaders = xhr.getAllResponseHeaders(); // responseText is the old-school way of retrieving response (supported by IE8 & 9) - // response and responseType properties were introduced in XHR Level2 spec (supported by IE10) + // response/responseType properties were introduced in XHR Level2 spec (supported by IE10) completeRequest(callback, status || xhr.status, (xhr.responseType ? xhr.response : xhr.responseText), @@ -7142,31 +7841,31 @@ * Used for configuring the interpolation markup. Defaults to `{{` and `}}`. * * @example - <doc:example module="customInterpolationApp"> - <doc:source> - <script> - var customInterpolationApp = angular.module('customInterpolationApp', []); +<doc:example module="customInterpolationApp"> +<doc:source> +<script> + var customInterpolationApp = angular.module('customInterpolationApp', []); - customInterpolationApp.config(function($interpolateProvider) { - $interpolateProvider.startSymbol('//'); - $interpolateProvider.endSymbol('//'); - }); + customInterpolationApp.config(function($interpolateProvider) { + $interpolateProvider.startSymbol('//'); + $interpolateProvider.endSymbol('//'); + }); - customInterpolationApp.controller('DemoController', function DemoController() { - this.label = "This bindings is brought you you by // interpolation symbols."; - }); - </script> - <div ng-app="App" ng-controller="DemoController as demo"> - //demo.label// - </div> - </doc:source> - <doc:scenario> - it('should interpolate binding with custom symbols', function() { - expect(binding('demo.label')).toBe('This bindings is brought you you by // interpolation symbols.'); - }); - </doc:scenario> - </doc:example> + customInterpolationApp.controller('DemoController', function DemoController() { + this.label = "This binding is brought you by // interpolation symbols."; + }); +</script> +<div ng-app="App" ng-controller="DemoController as demo"> + //demo.label// +</div> +</doc:source> +<doc:scenario> + it('should interpolate binding with custom symbols', function() { + expect(binding('demo.label')).toBe('This binding is brought you by // interpolation symbols.'); + }); +</doc:scenario> +</doc:example> */ function $InterpolateProvider() { var startSymbol = '{{'; @@ -7243,11 +7942,11 @@ * embedded expression in order to return an interpolation function. Strings with no * embedded expression will return null for the interpolation function. * @param {string=} trustedContext when provided, the returned function passes the interpolated - * result through {@link ng.$sce#getTrusted $sce.getTrusted(interpolatedResult, + * result through {@link ng.$sce#methods_getTrusted $sce.getTrusted(interpolatedResult, * trustedContext)} before returning it. Refer to the {@link ng.$sce $sce} service that * provides Strict Contextual Escaping for details. - * @returns {function(context)} an interpolation function which is used to compute the interpolated - * string. The function has these parameters: + * @returns {function(context)} an interpolation function which is used to compute the + * interpolated string. The function has these parameters: * * * `context`: an object against which any expressions embedded in the strings are evaluated * against. @@ -7285,12 +7984,12 @@ length = 1; } - // Concatenating expressions makes it hard to reason about whether some combination of concatenated - // values are unsafe to use and could easily lead to XSS. By requiring that a single - // expression be used for iframe[src], object[src], etc., we ensure that the value that's used - // is assigned or constructed by some JS code somewhere that is more testable or make it - // obvious that you bound the value to some user controlled value. This helps reduce the load - // when auditing for XSS issues. + // Concatenating expressions makes it hard to reason about whether some combination of + // concatenated values are unsafe to use and could easily lead to XSS. By requiring that a + // single expression be used for iframe[src], object[src], etc., we ensure that the value + // that's used is assigned or constructed by some JS code somewhere that is more testable or + // make it obvious that you bound the value to some user controlled value. This helps reduce + // the load when auditing for XSS issues. if (trustedContext && parts.length > 1) { throw $interpolateMinErr('noconcat', "Error while interpolating: {0}\nStrict Contextual Escaping disallows " + @@ -7310,7 +8009,7 @@ } else { part = $sce.valueOf(part); } - if (part == null || part == undefined) { + if (part === null || isUndefined(part)) { part = ''; } else if (typeof part != 'string') { part = toJson(part); @@ -7321,7 +8020,8 @@ return concat.join(''); } catch(err) { - var newErr = $interpolateMinErr('interr', "Can't interpolate: {0}\n{1}", text, err.toString()); + var newErr = $interpolateMinErr('interr', "Can't interpolate: {0}\n{1}", text, + err.toString()); $exceptionHandler(newErr); } }; @@ -7346,7 +8046,7 @@ */ $interpolate.startSymbol = function() { return startSymbol; - } + }; /** @@ -7363,7 +8063,7 @@ */ $interpolate.endSymbol = function() { return endSymbol; - } + }; return $interpolate; }]; @@ -7389,7 +8089,7 @@ * number of iterations that have run. * To cancel an interval, call `$interval.cancel(promise)`. * - * In tests you can use {@link ngMock.$interval#flush `$interval.flush(millis)`} to + * In tests you can use {@link ngMock.$interval#methods_flush `$interval.flush(millis)`} to * move forward by `millis` milliseconds and trigger any functions scheduled to run in that * time. * @@ -7398,18 +8098,18 @@ * @param {number=} [count=0] Number of times to repeat. If not set, or 0, will repeat * indefinitely. * @param {boolean=} [invokeApply=true] If set to `false` skips model dirty checking, otherwise - * will invoke `fn` within the {@link ng.$rootScope.Scope#$apply $apply} block. + * will invoke `fn` within the {@link ng.$rootScope.Scope#methods_$apply $apply} block. * @returns {promise} A promise which will be notified on each iteration. */ function interval(fn, delay, count, invokeApply) { var setInterval = $window.setInterval, - clearInterval = $window.clearInterval; - - var deferred = $q.defer(), + clearInterval = $window.clearInterval, + deferred = $q.defer(), promise = deferred.promise, - count = (isDefined(count)) ? count : 0, iteration = 0, skipApply = (isDefined(invokeApply) && !invokeApply); + + count = isDefined(count) ? count : 0, promise.then(null, null, fn); @@ -7502,8 +8202,9 @@ }, DATETIME_FORMATS: { - MONTH: 'January,February,March,April,May,June,July,August,September,October,November,December' - .split(','), + MONTH: + 'January,February,March,April,May,June,July,August,September,October,November,December' + .split(','), SHORTMONTH: 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split(','), DAY: 'Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday'.split(','), SHORTDAY: 'Sun,Mon,Tue,Wed,Thu,Fri,Sat'.split(','), @@ -7565,12 +8266,15 @@ relativeUrl = '/' + relativeUrl; } var match = urlResolve(relativeUrl); - locationObj.$$path = decodeURIComponent(prefixed && match.pathname.charAt(0) === '/' ? match.pathname.substring(1) : match.pathname); + locationObj.$$path = decodeURIComponent(prefixed && match.pathname.charAt(0) === '/' ? + match.pathname.substring(1) : match.pathname); locationObj.$$search = parseKeyValue(match.search); locationObj.$$hash = decodeURIComponent(match.hash); // make sure path starts with '/'; - if (locationObj.$$path && locationObj.$$path.charAt(0) != '/') locationObj.$$path = '/' + locationObj.$$path; + if (locationObj.$$path && locationObj.$$path.charAt(0) != '/') { + locationObj.$$path = '/' + locationObj.$$path; + } } @@ -7578,10 +8282,11 @@ * * @param {string} begin * @param {string} whole - * @returns {string} returns text from whole after begin or undefined if it does not begin with expected string. + * @returns {string} returns text from whole after begin or undefined if it does not begin with + * expected string. */ function beginsWith(begin, whole) { - if (whole.indexOf(begin) == 0) { + if (whole.indexOf(begin) === 0) { return whole.substr(begin.length); } } @@ -7626,7 +8331,8 @@ this.$$parse = function(url) { var pathUrl = beginsWith(appBaseNoFile, url); if (!isString(pathUrl)) { - throw $locationMinErr('ipthprfx', 'Invalid url "{0}", missing path prefix "{1}".', url, appBaseNoFile); + throw $locationMinErr('ipthprfx', 'Invalid url "{0}", missing path prefix "{1}".', url, + appBaseNoFile); } parseAppUrl(pathUrl, this); @@ -7665,7 +8371,7 @@ } else if (appBaseNoFile == url + '/') { return appBaseNoFile; } - } + }; } @@ -7698,7 +8404,8 @@ : ''; if (!isString(withoutHashUrl)) { - throw $locationMinErr('ihshprfx', 'Invalid url "{0}", missing hash prefix "{1}".', url, hashPrefix); + throw $locationMinErr('ihshprfx', 'Invalid url "{0}", missing hash prefix "{1}".', url, + hashPrefix); } parseAppUrl(withoutHashUrl, this); this.$$compose(); @@ -7720,7 +8427,7 @@ if(stripHash(appBase) == stripHash(url)) { return url; } - } + }; } @@ -7749,7 +8456,7 @@ } else if ( appBaseNoFile === url + '/') { return appBaseNoFile; } - } + }; } @@ -7888,11 +8595,14 @@ * * Change search part when called with parameter and return `$location`. * - * @param {string|Object.<string>|Object.<Array.<string>>} search New search params - string or hash object. Hash object - * may contain an array of values, which will be decoded as duplicates in the url. - * @param {string=} paramValue If `search` is a string, then `paramValue` will override only a - * single search parameter. If the value is `null`, the parameter will be deleted. + * @param {string|Object.<string>|Object.<Array.<string>>} search New search params - string or + * hash object. Hash object may contain an array of values, which will be decoded as duplicates in + * the url. * + * @param {(string|Array<string>)=} paramValue If `search` is a string, then `paramValue` will override only a + * single search parameter. If `paramValue` is an array, it will set the parameter as a + * comma-separated value. If `paramValue` is `null`, the parameter will be deleted. + * * @return {string} search */ search: function(search, paramValue) { @@ -7905,11 +8615,12 @@ } else if (isObject(search)) { this.$$search = search; } else { - throw $locationMinErr('isrcharg', 'The first argument of the `$location#search()` call must be a string or an object.'); + throw $locationMinErr('isrcharg', + 'The first argument of the `$location#search()` call must be a string or an object.'); } break; default: - if (paramValue == undefined || paramValue == null) { + if (isUndefined(paramValue) || paramValue === null) { delete this.$$search[search]; } else { this.$$search[search] = paramValue; @@ -8045,6 +8756,35 @@ } }; + /** + * @ngdoc event + * @name ng.$location#$locationChangeStart + * @eventOf ng.$location + * @eventType broadcast on root scope + * @description + * Broadcasted before a URL will change. This change can be prevented by calling + * `preventDefault` method of the event. See {@link ng.$rootScope.Scope#$on} for more + * details about event object. Upon successful change + * {@link ng.$location#$locationChangeSuccess $locationChangeSuccess} is fired. + * + * @param {Object} angularEvent Synthetic event object. + * @param {string} newUrl New URL + * @param {string=} oldUrl URL that was before it was changed. + */ + + /** + * @ngdoc event + * @name ng.$location#$locationChangeSuccess + * @eventOf ng.$location + * @eventType broadcast on root scope + * @description + * Broadcasted after a URL was changed. + * + * @param {Object} angularEvent Synthetic event object. + * @param {string} newUrl New URL + * @param {string=} oldUrl URL that was before it was changed. + */ + this.$get = ['$rootScope', '$browser', '$sniffer', '$rootElement', function( $rootScope, $browser, $sniffer, $rootElement) { var $location, @@ -8101,7 +8841,8 @@ // update $location when $browser url changes $browser.onUrlChange(function(newUrl) { if ($location.absUrl() != newUrl) { - if ($rootScope.$broadcast('$locationChangeStart', newUrl, $location.absUrl()).defaultPrevented) { + if ($rootScope.$broadcast('$locationChangeStart', newUrl, + $location.absUrl()).defaultPrevented) { $browser.url($location.absUrl()); return; } @@ -8152,7 +8893,7 @@ * @requires $window * * @description - * Simple service for logging. Default implementation writes the message + * Simple service for logging. Default implementation safely writes the message * into the browser's console (if present). * * The main purpose of this service is to simplify debugging and troubleshooting. @@ -8201,12 +8942,12 @@ * @returns {*} current value if used as getter or itself (chaining) if used as setter */ this.debugEnabled = function(flag) { - if (isDefined(flag)) { - debug = flag; - return this; - } else { - return debug; - } + if (isDefined(flag)) { + debug = flag; + return this; + } else { + return debug; + } }; this.$get = ['$window', function($window){ @@ -8260,13 +9001,13 @@ * Write a debug message */ debug: (function () { - var fn = consoleLog('debug'); - - return function() { - if (debug) { - fn.apply(self, arguments); - } - } + var fn = consoleLog('debug'); + + return function() { + if (debug) { + fn.apply(self, arguments); + } + }; }()) }; @@ -8301,7 +9042,7 @@ // or we are IE where console.log doesn't have apply so we log at least first 2 args return function(arg1, arg2) { logFn(arg1, arg2 == null ? '' : arg2); - } + }; } }]; } @@ -8312,58 +9053,78 @@ // Sandboxing Angular Expressions // ------------------------------ -// Angular expressions are generally considered safe because these expressions only have direct access to $scope and -// locals. However, one can obtain the ability to execute arbitrary JS code by obtaining a reference to native JS -// functions such as the Function constructor. +// Angular expressions are generally considered safe because these expressions only have direct +// access to $scope and locals. However, one can obtain the ability to execute arbitrary JS code by +// obtaining a reference to native JS functions such as the Function constructor, the global Window +// or Document object. In addition, many powerful functions for use by JavaScript code are +// published on scope that shouldn't be available from within an Angular expression. // // As an example, consider the following Angular expression: // // {}.toString.constructor(alert("evil JS code")) // -// We want to prevent this type of access. For the sake of performance, during the lexing phase we disallow any "dotted" -// access to any member named "constructor". +// We want to prevent this type of access. For the sake of performance, during the lexing phase we +// disallow any "dotted" access to any member named "constructor" or to any member whose name begins +// or ends with an underscore. The latter allows one to exclude the private / JavaScript only API +// available on the scope and controllers from the context of an Angular expression. // -// For reflective calls (a[b]) we check that the value of the lookup is not the Function constructor while evaluating -// the expression, which is a stronger but more expensive test. Since reflective calls are expensive anyway, this is not -// such a big deal compared to static dereferencing. +// For reflective calls (a[b]), we check that the value of the lookup is not the Function +// constructor, Window or DOM node while evaluating the expression, which is a stronger but more +// expensive test. Since reflective calls are expensive anyway, this is not such a big deal compared +// to static dereferencing. // -// This sandboxing technique is not perfect and doesn't aim to be. The goal is to prevent exploits against the -// expression language, but not to prevent exploits that were enabled by exposing sensitive JavaScript or browser apis -// on Scope. Exposing such objects on a Scope is never a good practice and therefore we are not even trying to protect -// against interaction with an object explicitly exposed in this way. +// This sandboxing technique is not perfect and doesn't aim to be. The goal is to prevent exploits +// against the expression language, but not to prevent exploits that were enabled by exposing +// sensitive JavaScript or browser apis on Scope. Exposing such objects on a Scope is never a good +// practice and therefore we are not even trying to protect against interaction with an object +// explicitly exposed in this way. // -// A developer could foil the name check by aliasing the Function constructor under a different name on the scope. +// A developer could foil the name check by aliasing the Function constructor under a different +// name on the scope. // -// In general, it is not possible to access a Window object from an angular expression unless a window or some DOM -// object that has a reference to window is published onto a Scope. +// In general, it is not possible to access a Window object from an angular expression unless a +// window or some DOM object that has a reference to window is published onto a Scope. -function ensureSafeMemberName(name, fullExpression) { - if (name === "constructor") { +function ensureSafeMemberName(name, fullExpression, allowConstructor) { + if (typeof name !== 'string' && toString.apply(name) !== "[object String]") { + return name; + } + if (name === "constructor" && !allowConstructor) { throw $parseMinErr('isecfld', - 'Referencing "constructor" field in Angular expressions is disallowed! Expression: {0}', fullExpression); + 'Referencing "constructor" field in Angular expressions is disallowed! Expression: {0}', + fullExpression); } + if (name.charAt(0) === '_' || name.charAt(name.length-1) === '_') { + throw $parseMinErr('isecprv', + 'Referencing private fields in Angular expressions is disallowed! Expression: {0}', + fullExpression); + } return name; -}; +} function ensureSafeObject(obj, fullExpression) { // nifty check if obj is Function that is fast and works across iframes and other contexts if (obj && obj.constructor === obj) { throw $parseMinErr('isecfn', - 'Referencing Function in Angular expressions is disallowed! Expression: {0}', fullExpression); + 'Referencing Function in Angular expressions is disallowed! Expression: {0}', + fullExpression); } else if (// isWindow(obj) obj && obj.document && obj.location && obj.alert && obj.setInterval) { throw $parseMinErr('isecwindow', - 'Referencing the Window in Angular expressions is disallowed! Expression: {0}', fullExpression); + 'Referencing the Window in Angular expressions is disallowed! Expression: {0}', + fullExpression); } else if (// isElement(obj) obj && (obj.nodeName || (obj.on && obj.find))) { throw $parseMinErr('isecdom', - 'Referencing DOM nodes in Angular expressions is disallowed! Expression: {0}', fullExpression); + 'Referencing DOM nodes in Angular expressions is disallowed! Expression: {0}', + fullExpression); } else { return obj; } } var OPERATORS = { + /* jshint bitwise : false */ 'null':function(){return null;}, 'true':function(){return true;}, 'false':function(){return false;}, @@ -8377,7 +9138,10 @@ return a; } return isDefined(b)?b:undefined;}, - '-':function(self, locals, a,b){a=a(self, locals); b=b(self, locals); return (isDefined(a)?a:0)-(isDefined(b)?b:0);}, + '-':function(self, locals, a,b){ + a=a(self, locals); b=b(self, locals); + return (isDefined(a)?a:0)-(isDefined(b)?b:0); + }, '*':function(self, locals, a,b){return a(self, locals)*b(self, locals);}, '/':function(self, locals, a,b){return a(self, locals)/b(self, locals);}, '%':function(self, locals, a,b){return a(self, locals)%b(self, locals);}, @@ -8398,6 +9162,7 @@ '|':function(self, locals, a,b){return b(self, locals)(self, locals, a(self, locals));}, '!':function(self, locals, a){return !a(self, locals);} }; +/* jshint bitwise: true */ var ESCAPE = {"n":"\n", "f":"\f", "r":"\r", "t":"\t", "v":"\v", "'":"'", '"':'"'}; @@ -8498,8 +9263,9 @@ }, isWhitespace: function(ch) { + // IE treats non-breaking space as \u00A0 return (ch === ' ' || ch === '\r' || ch === '\t' || - ch === '\n' || ch === '\v' || ch === '\u00A0'); // IE treats non-breaking space as \u00A0 + ch === '\n' || ch === '\v' || ch === '\u00A0'); }, isIdent: function(ch) { @@ -9016,7 +9782,10 @@ return extend(function(self, locals) { var o = obj(self, locals), - i = indexFn(self, locals), + // In the getter, we will not block looking up "constructor" by name in order to support user defined + // constructors. However, if value looked up is the Function constructor, we will still block it in the + // ensureSafeObject call right after we look up o[i] (a few lines below.) + i = ensureSafeMemberName(indexFn(self, locals), parser.text, true /* allowConstructor */), v, p; if (!o) return undefined; @@ -9032,7 +9801,7 @@ return v; }, { assign: function(self, value, locals) { - var key = indexFn(self, locals); + var key = ensureSafeMemberName(indexFn(self, locals), parser.text); // prevent overwriting of Function.constructor which would break ensureSafeObject check var safe = ensureSafeObject(obj(self, locals), parser.text); return safe[key] = value; @@ -9060,6 +9829,7 @@ } var fnPtr = fn(scope, locals, context) || noop; + ensureSafeObject(context, parser.text); ensureSafeObject(fnPtr, parser.text); // IE stupidity! (IE doesn't have apply for some native functions) @@ -9265,7 +10035,7 @@ pathVal = pathVal.$$v; } return pathVal; - } + }; } function getterFn(path, options, fullExp) { @@ -9281,20 +10051,22 @@ fn; if (options.csp) { - fn = (pathKeysLength < 6) - ? cspSafeGetterFn(pathKeys[0], pathKeys[1], pathKeys[2], pathKeys[3], pathKeys[4], fullExp, options) - : function(scope, locals) { - var i = 0, val; - do { - val = cspSafeGetterFn( - pathKeys[i++], pathKeys[i++], pathKeys[i++], pathKeys[i++], pathKeys[i++], fullExp, options - )(scope, locals); + if (pathKeysLength < 6) { + fn = cspSafeGetterFn(pathKeys[0], pathKeys[1], pathKeys[2], pathKeys[3], pathKeys[4], fullExp, + options); + } else { + fn = function(scope, locals) { + var i = 0, val; + do { + val = cspSafeGetterFn(pathKeys[i++], pathKeys[i++], pathKeys[i++], pathKeys[i++], + pathKeys[i++], fullExp, options)(scope, locals); - locals = undefined; // clear after first iteration - scope = val; - } while (i < pathKeysLength); - return val; - } + locals = undefined; // clear after first iteration + scope = val; + } while (i < pathKeysLength); + return val; + }; + } } else { var code = 'var l, fn, p;\n'; forEach(pathKeys, function(key, index) { @@ -9320,7 +10092,9 @@ }); code += 'return s;'; - var evaledFnGetter = Function('s', 'k', 'pw', code); // s=scope, k=locals, pw=promiseWarning + /* jshint -W054 */ + var evaledFnGetter = new Function('s', 'k', 'pw', code); // s=scope, k=locals, pw=promiseWarning + /* jshint +W054 */ evaledFnGetter.toString = function() { return code; }; fn = function(scope, locals) { return evaledFnGetter(scope, locals, promiseWarning); @@ -9384,7 +10158,8 @@ * @function * * @description - * `$parseProvider` can be used for configuring the default behavior of the {@link ng.$parse $parse} service. + * `$parseProvider` can be used for configuring the default behavior of the {@link ng.$parse $parse} + * service. */ function $ParseProvider() { var cache = {}; @@ -9406,35 +10181,40 @@ * * **This feature is deprecated, see deprecation notes below for more info** * - * If set to true (default is false), $parse will unwrap promises automatically when a promise is found at any part of - * the expression. In other words, if set to true, the expression will always result in a non-promise value. + * If set to true (default is false), $parse will unwrap promises automatically when a promise is + * found at any part of the expression. In other words, if set to true, the expression will always + * result in a non-promise value. * - * While the promise is unresolved, it's treated as undefined, but once resolved and fulfilled, the fulfillment value - * is used in place of the promise while evaluating the expression. + * While the promise is unresolved, it's treated as undefined, but once resolved and fulfilled, + * the fulfillment value is used in place of the promise while evaluating the expression. * * **Deprecation notice** * - * This is a feature that didn't prove to be wildly useful or popular, primarily because of the dichotomy between data - * access in templates (accessed as raw values) and controller code (accessed as promises). + * This is a feature that didn't prove to be wildly useful or popular, primarily because of the + * dichotomy between data access in templates (accessed as raw values) and controller code + * (accessed as promises). * - * In most code we ended up resolving promises manually in controllers anyway and thus unifying the model access there. + * In most code we ended up resolving promises manually in controllers anyway and thus unifying + * the model access there. * * Other downsides of automatic promise unwrapping: * * - when building components it's often desirable to receive the raw promises * - adds complexity and slows down expression evaluation - * - makes expression code pre-generation unattractive due to the amount of code that needs to be generated + * - makes expression code pre-generation unattractive due to the amount of code that needs to be + * generated * - makes IDE auto-completion and tool support hard * * **Warning Logs** * - * If the unwrapping is enabled, Angular will log a warning about each expression that unwraps a promise (to reduce - * the noise, each expression is logged only once). To disable this logging use + * If the unwrapping is enabled, Angular will log a warning about each expression that unwraps a + * promise (to reduce the noise, each expression is logged only once). To disable this logging use * `$parseProvider.logPromiseWarnings(false)` api. * * * @param {boolean=} value New value. - * @returns {boolean|self} Returns the current setting when used as getter and self if used as setter. + * @returns {boolean|self} Returns the current setting when used as getter and self if used as + * setter. */ this.unwrapPromises = function(value) { if (isDefined(value)) { @@ -9461,7 +10241,8 @@ * This setting applies only if `$parseProvider.unwrapPromises` setting is set to true as well. * * @param {boolean=} value New value. - * @returns {boolean|self} Returns the current setting when used as getter and self if used as setter. + * @returns {boolean|self} Returns the current setting when used as getter and self if used as + * setter. */ this.logPromiseWarnings = function(value) { if (isDefined(value)) { @@ -9565,8 +10346,8 @@ * </pre> * * At first it might not be obvious why this extra complexity is worth the trouble. The payoff - * comes in the way of - * [guarantees that promise and deferred APIs make](https://github.com/kriskowal/uncommonjs/blob/master/promises/specific…. + * comes in the way of guarantees that promise and deferred APIs make, see + * https://github.com/kriskowal/uncommonjs/blob/master/promises/specification.…. * * Additionally the promise api allows for composition that is very hard to do with the * traditional callback ([CPS](http://en.wikipedia.org/wiki/Continuation-passing_style)) approach. @@ -9613,8 +10394,9 @@ * provide a progress indication, before the promise is resolved or rejected. * * This method *returns a new promise* which is resolved or rejected via the return value of the - * `successCallback`, `errorCallback`. It also notifies via the return value of the `notifyCallback` - * method. The promise can not be resolved or rejected from the notifyCallback method. + * `successCallback`, `errorCallback`. It also notifies via the return value of the + * `notifyCallback` method. The promise can not be resolved or rejected from the notifyCallback + * method. * * - `catch(errorCallback)` – shorthand for `promise.then(null, errorCallback)` * @@ -9630,8 +10412,8 @@ * * # Chaining promises * - * Because calling the `then` method of a promise returns a new derived promise, it is easily possible - * to create a chain of promises: + * Because calling the `then` method of a promise returns a new derived promise, it is easily + * possible to create a chain of promises: * * <pre> * promiseB = promiseA.then(function(result) { @@ -9655,8 +10437,6 @@ * - $q is integrated with the {@link ng.$rootScope.Scope} Scope model observation * mechanism in angular, which means faster propagation of resolution or rejection into your * models and avoiding unnecessary browser repaints, which would result in flickering UI. - * - $q promises are recognized by the templating engine in angular, which means that in templates - * you can treat promises attached to a scope as if they were the resulting values. * - Q has many more features than $q, but that comes at a cost of bytes. $q is tiny, but contains * all the important functionality needed for common async tasks. * @@ -9994,9 +10774,9 @@ * * @param {Array.<Promise>|Object.<Promise>} promises An array or hash of promises. * @returns {Promise} Returns a single promise that will be resolved with an array/hash of values, - * each value corresponding to the promise at the same index/key in the `promises` array/hash. If any of - * the promises is resolved with a rejection, this resulting promise will be rejected with the - * same rejection value. + * each value corresponding to the promise at the same index/key in the `promises` array/hash. + * If any of the promises is resolved with a rejection, this resulting promise will be rejected + * with the same rejection value. */ function all(promises) { var deferred = defer(), @@ -10070,11 +10850,19 @@ * @methodOf ng.$rootScopeProvider * @description * - * Sets the number of digest iterations the scope should attempt to execute before giving up and + * Sets the number of `$digest` iterations the scope should attempt to execute before giving up and * assuming that the model is unstable. * * The current default is 10 iterations. * + * In complex applications it's possible that the dependencies between `$watch`s will result in + * several digest iterations. However if an application needs more than the default 10 digest + * iterations for its model to stabilize then you should investigate what is causing the model to + * continuously change during the digest. + * + * Increasing the TTL could have performance implications, so you should not change it without + * proper justification. + * * @param {number} limit The number of digest iterations. */ @@ -10111,7 +10899,7 @@ * @description * A root scope can be retrieved using the {@link ng.$rootScope $rootScope} key from the * {@link AUTO.$injector $injector}. Child scopes are created using the - * {@link ng.$rootScope.Scope#$new $new()} method. (Most scopes are created automatically when + * {@link ng.$rootScope.Scope#methods_$new $new()} method. (Most scopes are created automatically when * compiled HTML template is executed.) * * Here is a simple scope snippet to show how you can interact with the scope. @@ -10135,11 +10923,12 @@ * </pre> * * - * @param {Object.<string, function()>=} providers Map of service factory which need to be provided - * for the current scope. Defaults to {@link ng}. + * @param {Object.<string, function()>=} providers Map of service factory which need to be + * provided for the current scope. Defaults to {@link ng}. * @param {Object.<string, *>=} instanceCache Provides pre-instantiated services which should - * append/override services provided by `providers`. This is handy when unit-testing and having - * the need to override a default service. + * append/override services provided by `providers`. This is handy + * when unit-testing and having the need to override a default + * service. * @returns {Object} Newly created scope. * */ @@ -10177,12 +10966,12 @@ * Creates a new child {@link ng.$rootScope.Scope scope}. * * The parent scope will propagate the {@link ng.$rootScope.Scope#$digest $digest()} and - * {@link ng.$rootScope.Scope#$digest $digest()} events. The scope can be removed from the scope - * hierarchy using {@link ng.$rootScope.Scope#$destroy $destroy()}. + * {@link ng.$rootScope.Scope#$digest $digest()} events. The scope can be removed from the + * scope hierarchy using {@link ng.$rootScope.Scope#$destroy $destroy()}. * - * {@link ng.$rootScope.Scope#$destroy $destroy()} must be called on a scope when it is desired for - * the scope and its child scopes to be permanently detached from the parent and thus stop - * participating in model change detection and listener notification by invoking. + * {@link ng.$rootScope.Scope#$destroy $destroy()} must be called on a scope when it is + * desired for the scope and its child scopes to be permanently detached from the parent and + * thus stop participating in model change detection and listener notification by invoking. * * @param {boolean} isolate If true, then the scope does not prototypically inherit from the * parent scope. The scope is isolated, as it can not see parent scope properties. @@ -10233,25 +11022,26 @@ * @description * Registers a `listener` callback to be executed whenever the `watchExpression` changes. * - * - The `watchExpression` is called on every call to {@link ng.$rootScope.Scope#$digest $digest()} and - * should return the value that will be watched. (Since {@link ng.$rootScope.Scope#$digest $digest()} - * reruns when it detects changes the `watchExpression` can execute multiple times per + * - The `watchExpression` is called on every call to {@link ng.$rootScope.Scope#$digest + * $digest()} and should return the value that will be watched. (Since + * {@link ng.$rootScope.Scope#$digest $digest()} reruns when it detects changes the + * `watchExpression` can execute multiple times per * {@link ng.$rootScope.Scope#$digest $digest()} and should be idempotent.) * - The `listener` is called only when the value from the current `watchExpression` and the * previous call to `watchExpression` are not equal (with the exception of the initial run, * see below). The inequality is determined according to - * {@link angular.equals} function. To save the value of the object for later comparison, the - * {@link angular.copy} function is used. It also means that watching complex options will - * have adverse memory and performance implications. - * - The watch `listener` may change the model, which may trigger other `listener`s to fire. This - * is achieved by rerunning the watchers until no changes are detected. The rerun iteration - * limit is 10 to prevent an infinite loop deadlock. + * {@link angular.equals} function. To save the value of the object for later comparison, + * the {@link angular.copy} function is used. It also means that watching complex options + * will have adverse memory and performance implications. + * - The watch `listener` may change the model, which may trigger other `listener`s to fire. + * This is achieved by rerunning the watchers until no changes are detected. The rerun + * iteration limit is 10 to prevent an infinite loop deadlock. * * * If you want to be notified whenever {@link ng.$rootScope.Scope#$digest $digest} is called, * you can register a `watchExpression` function with no `listener`. (Since `watchExpression` - * can execute multiple times per {@link ng.$rootScope.Scope#$digest $digest} cycle when a change is - * detected, be prepared for multiple calls to your listener.) + * can execute multiple times per {@link ng.$rootScope.Scope#$digest $digest} cycle when a + * change is detected, be prepared for multiple calls to your listener.) * * After a watcher is registered with the scope, the `listener` fn is called asynchronously * (via {@link ng.$rootScope.Scope#$evalAsync $evalAsync}) to initialize the @@ -10260,7 +11050,9 @@ * can compare the `newVal` and `oldVal`. If these two values are identical (`===`) then the * listener was called due to initialization. * + * The example below contains an illustration of using a function as your $watch listener * + * * # Example * <pre> // let's assume that scope was dependency injected as the $rootScope @@ -10269,7 +11061,9 @@ scope.counter = 0; expect(scope.counter).toEqual(0); - scope.$watch('name', function(newValue, oldValue) { scope.counter = scope.counter + 1; }); + scope.$watch('name', function(newValue, oldValue) { + scope.counter = scope.counter + 1; + }); expect(scope.counter).toEqual(0); scope.$digest(); @@ -10279,13 +11073,43 @@ scope.name = 'adam'; scope.$digest(); expect(scope.counter).toEqual(1); + + + + // Using a listener function + var food; + scope.foodCounter = 0; + expect(scope.foodCounter).toEqual(0); + scope.$watch( + // This is the listener function + function() { return food; }, + // This is the change handler + function(newValue, oldValue) { + if ( newValue !== oldValue ) { + // Only increment the counter if the value changed + scope.foodCounter = scope.foodCounter + 1; + } + } + ); + // No digest has been run so the counter will be zero + expect(scope.foodCounter).toEqual(0); + + // Run the digest but since food has not changed cout will still be zero + scope.$digest(); + expect(scope.foodCounter).toEqual(0); + + // Update food and run digest. Now the counter will increment + food = 'cheeseburger'; + scope.$digest(); + expect(scope.foodCounter).toEqual(1); + * </pre> * * * * @param {(function()|string)} watchExpression Expression that is evaluated on each - * {@link ng.$rootScope.Scope#$digest $digest} cycle. A change in the return value triggers a - * call to the `listener`. + * {@link ng.$rootScope.Scope#$digest $digest} cycle. A change in the return value triggers + * a call to the `listener`. * * - `string`: Evaluated as {@link guide/expression expression} * - `function(scope)`: called with current `scope` as a parameter. @@ -10293,7 +11117,8 @@ * the `watchExpression` changes. * * - `string`: Evaluated as {@link guide/expression expression} - * - `function(newValue, oldValue, scope)`: called with current and previous values as parameters. + * - `function(newValue, oldValue, scope)`: called with current and previous values as + * parameters. * * @param {boolean=} objectEquality Compare object for equality rather than for reference. * @returns {function()} Returns a deregistration function for this listener. @@ -10345,13 +11170,13 @@ * * @description * Shallow watches the properties of an object and fires whenever any of the properties change - * (for arrays, this implies watching the array items; for object maps, this implies watching the properties). - * If a change is detected, the `listener` callback is fired. + * (for arrays, this implies watching the array items; for object maps, this implies watching + * the properties). If a change is detected, the `listener` callback is fired. * - * - The `obj` collection is observed via standard $watch operation and is examined on every call to $digest() to - * see if any items have been added, removed, or moved. - * - The `listener` is called whenever anything within the `obj` has changed. Examples include adding, removing, - * and moving items belonging to an object or array. + * - The `obj` collection is observed via standard $watch operation and is examined on every + * call to $digest() to see if any items have been added, removed, or moved. + * - The `listener` is called whenever anything within the `obj` has changed. Examples include + * adding, removing, and moving items belonging to an object or array. * * * # Example @@ -10377,19 +11202,19 @@ * </pre> * * - * @param {string|Function(scope)} obj Evaluated as {@link guide/expression expression}. The expression value - * should evaluate to an object or an array which is observed on each - * {@link ng.$rootScope.Scope#$digest $digest} cycle. Any shallow change within the collection will trigger - * a call to the `listener`. + * @param {string|Function(scope)} obj Evaluated as {@link guide/expression expression}. The + * expression value should evaluate to an object or an array which is observed on each + * {@link ng.$rootScope.Scope#$digest $digest} cycle. Any shallow change within the + * collection will trigger a call to the `listener`. * - * @param {function(newCollection, oldCollection, scope)} listener a callback function that is fired with both - * the `newCollection` and `oldCollection` as parameters. - * The `newCollection` object is the newly modified data obtained from the `obj` expression and the - * `oldCollection` object is a copy of the former collection data. + * @param {function(newCollection, oldCollection, scope)} listener a callback function that is + * fired with both the `newCollection` and `oldCollection` as parameters. + * The `newCollection` object is the newly modified data obtained from the `obj` expression + * and the `oldCollection` object is a copy of the former collection data. * The `scope` refers to the current scope. * - * @returns {function()} Returns a de-registration function for this listener. When the de-registration function - * is executed, the internal watch operation is terminated. + * @returns {function()} Returns a de-registration function for this listener. When the + * de-registration function is executed, the internal watch operation is terminated. */ $watchCollection: function(obj, listener) { var self = this; @@ -10484,21 +11309,22 @@ * @function * * @description - * Processes all of the {@link ng.$rootScope.Scope#$watch watchers} of the current scope and its children. - * Because a {@link ng.$rootScope.Scope#$watch watcher}'s listener can change the model, the - * `$digest()` keeps calling the {@link ng.$rootScope.Scope#$watch watchers} until no more listeners are - * firing. This means that it is possible to get into an infinite loop. This function will throw - * `'Maximum iteration limit exceeded.'` if the number of iterations exceeds 10. + * Processes all of the {@link ng.$rootScope.Scope#$watch watchers} of the current scope and + * its children. Because a {@link ng.$rootScope.Scope#$watch watcher}'s listener can change + * the model, the `$digest()` keeps calling the {@link ng.$rootScope.Scope#$watch watchers} + * until no more listeners are firing. This means that it is possible to get into an infinite + * loop. This function will throw `'Maximum iteration limit exceeded.'` if the number of + * iterations exceeds 10. * * Usually, you don't call `$digest()` directly in * {@link ng.directive:ngController controllers} or in - * {@link ng.$compileProvider#directive directives}. - * Instead, you should call {@link ng.$rootScope.Scope#$apply $apply()} (typically from within a - * {@link ng.$compileProvider#directive directives}), which will force a `$digest()`. + * {@link ng.$compileProvider#methods_directive directives}. + * Instead, you should call {@link ng.$rootScope.Scope#$apply $apply()} (typically from within + * a {@link ng.$compileProvider#methods_directive directives}), which will force a `$digest()`. * * If you want to be notified whenever `$digest()` is called, - * you can register a `watchExpression` function with {@link ng.$rootScope.Scope#$watch $watch()} - * with no `listener`. + * you can register a `watchExpression` function with + * {@link ng.$rootScope.Scope#$watch $watch()} with no `listener`. * * In unit tests, you may need to call `$digest()` to simulate the scope life cycle. * @@ -10596,7 +11422,8 @@ if(dirty && !(ttl--)) { clearPhase(); throw $rootScopeMinErr('infdig', - '{0} $digest() iterations reached. Aborting!\nWatchers fired in the last 5 iterations: {1}', + '{0} $digest() iterations reached. Aborting!\n' + + 'Watchers fired in the last 5 iterations: {1}', TTL, toJson(watchLog)); } } while (dirty || asyncQueue.length); @@ -10675,8 +11502,9 @@ * @function * * @description - * Executes the `expression` on the current scope and returns the result. Any exceptions in the - * expression are propagated (uncaught). This is useful when evaluating Angular expressions. + * Executes the `expression` on the current scope and returns the result. Any exceptions in + * the expression are propagated (uncaught). This is useful when evaluating Angular + * expressions. * * # Example * <pre> @@ -10692,7 +11520,8 @@ * * - `string`: execute using the rules as defined in {@link guide/expression expression}. * - `function(scope)`: execute the function with the current `scope` parameter. - * + * + * @param {(object)=} locals Local variables object, useful for overriding values in scope. * @returns {*} The result of evaluating the expression. */ $eval: function(expr, locals) { @@ -10708,17 +11537,20 @@ * @description * Executes the expression on the current scope at a later point in time. * - * The `$evalAsync` makes no guarantees as to when the `expression` will be executed, only that: + * The `$evalAsync` makes no guarantees as to when the `expression` will be executed, only + * that: * - * - it will execute after the function that scheduled the evaluation (preferably before DOM rendering). - * - at least one {@link ng.$rootScope.Scope#$digest $digest cycle} will be performed after `expression` execution. + * - it will execute after the function that scheduled the evaluation (preferably before DOM + * rendering). + * - at least one {@link ng.$rootScope.Scope#$digest $digest cycle} will be performed after + * `expression` execution. * * Any exceptions from the execution of the expression are forwarded to the * {@link ng.$exceptionHandler $exceptionHandler} service. * - * __Note:__ if this function is called outside of a `$digest` cycle, a new `$digest` cycle will be scheduled. - * However, it is encouraged to always call code that changes the model from within an `$apply` call. - * That includes code evaluated via `$evalAsync`. + * __Note:__ if this function is called outside of a `$digest` cycle, a new `$digest` cycle + * will be scheduled. However, it is encouraged to always call code that changes the model + * from within an `$apply` call. That includes code evaluated via `$evalAsync`. * * @param {(string|function())=} expression An angular expression to be executed. * @@ -10727,8 +11559,8 @@ * */ $evalAsync: function(expr) { - // if we are outside of an $digest loop and this is the first time we are scheduling async task also schedule - // async auto-flush + // if we are outside of an $digest loop and this is the first time we are scheduling async + // task also schedule async auto-flush if (!$rootScope.$$phase && !$rootScope.$$asyncQueue.length) { $browser.defer(function() { if ($rootScope.$$asyncQueue.length) { @@ -10751,10 +11583,10 @@ * @function * * @description - * `$apply()` is used to execute an expression in angular from outside of the angular framework. - * (For example from browser DOM events, setTimeout, XHR or third party libraries). - * Because we are calling into the angular framework we need to perform proper scope life cycle - * of {@link ng.$exceptionHandler exception handling}, + * `$apply()` is used to execute an expression in angular from outside of the angular + * framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). + * Because we are calling into the angular framework we need to perform proper scope life + * cycle of {@link ng.$exceptionHandler exception handling}, * {@link ng.$rootScope.Scope#$digest executing watches}. * * ## Life cycle @@ -10779,8 +11611,8 @@ * {@link ng.$rootScope.Scope#$eval $eval()} method. * 2. Any exceptions from the execution of the expression are forwarded to the * {@link ng.$exceptionHandler $exceptionHandler} service. - * 3. The {@link ng.$rootScope.Scope#$watch watch} listeners are fired immediately after the expression - * was executed using the {@link ng.$rootScope.Scope#$digest $digest()} method. + * 3. The {@link ng.$rootScope.Scope#$watch watch} listeners are fired immediately after the + * expression was executed using the {@link ng.$rootScope.Scope#$digest $digest()} method. * * * @param {(string|function())=} exp An angular expression to be executed. @@ -10814,18 +11646,20 @@ * @function * * @description - * Listens on events of a given type. See {@link ng.$rootScope.Scope#$emit $emit} for discussion of - * event life cycle. + * Listens on events of a given type. See {@link ng.$rootScope.Scope#$emit $emit} for + * discussion of event life cycle. * * The event listener function format is: `function(event, args...)`. The `event` object * passed into the listener has the following attributes: * - * - `targetScope` - `{Scope}`: the scope on which the event was `$emit`-ed or `$broadcast`-ed. + * - `targetScope` - `{Scope}`: the scope on which the event was `$emit`-ed or + * `$broadcast`-ed. * - `currentScope` - `{Scope}`: the current scope which is handling the event. * - `name` - `{string}`: name of the event. - * - `stopPropagation` - `{function=}`: calling `stopPropagation` function will cancel further event - * propagation (available only for events that were `$emit`-ed). - * - `preventDefault` - `{function}`: calling `preventDefault` sets `defaultPrevented` flag to true. + * - `stopPropagation` - `{function=}`: calling `stopPropagation` function will cancel + * further event propagation (available only for events that were `$emit`-ed). + * - `preventDefault` - `{function}`: calling `preventDefault` sets `defaultPrevented` flag + * to true. * - `defaultPrevented` - `{boolean}`: true if `preventDefault` was called. * * @param {string} name Event name to listen on. @@ -10856,9 +11690,10 @@ * registered {@link ng.$rootScope.Scope#$on} listeners. * * The event life cycle starts at the scope on which `$emit` was called. All - * {@link ng.$rootScope.Scope#$on listeners} listening for `name` event on this scope get notified. - * Afterwards, the event traverses upwards toward the root scope and calls all registered - * listeners along the way. The event will stop propagating if one of the listeners cancels it. + * {@link ng.$rootScope.Scope#$on listeners} listening for `name` event on this scope get + * notified. Afterwards, the event traverses upwards toward the root scope and calls all + * registered listeners along the way. The event will stop propagating if one of the listeners + * cancels it. * * Any exception emitted from the {@link ng.$rootScope.Scope#$on listeners} will be passed * onto the {@link ng.$exceptionHandler $exceptionHandler} service. @@ -10924,9 +11759,9 @@ * registered {@link ng.$rootScope.Scope#$on} listeners. * * The event life cycle starts at the scope on which `$broadcast` was called. All - * {@link ng.$rootScope.Scope#$on listeners} listening for `name` event on this scope get notified. - * Afterwards, the event propagates to all direct and indirect scopes of the current scope and - * calls all registered listeners along the way. The event cannot be canceled. + * {@link ng.$rootScope.Scope#$on listeners} listening for `name` event on this scope get + * notified. Afterwards, the event propagates to all direct and indirect scopes of the current + * scope and calls all registered listeners along the way. The event cannot be canceled. * * Any exception emitted from the {@link ng.$rootScope.Scope#$on listeners} will be passed * onto the {@link ng.$exceptionHandler $exceptionHandler} service. @@ -11036,7 +11871,7 @@ function escapeForRegexp(s) { return s.replace(/([-()\[\]{}+?*.$\^|,:#<!\\])/g, '\\$1'). replace(/\x08/g, '\\x08'); -}; +} function adjustMatcher(matcher) { @@ -11100,9 +11935,9 @@ * can override it completely to change the behavior of `$sce`, the common case would * involve configuring the {@link ng.$sceDelegateProvider $sceDelegateProvider} instead by setting * your own whitelists and blacklists for trusting URLs used for loading AngularJS resources such as - * templates. Refer {@link ng.$sceDelegateProvider#resourceUrlWhitelist + * templates. Refer {@link ng.$sceDelegateProvider#methods_resourceUrlWhitelist * $sceDelegateProvider.resourceUrlWhitelist} and {@link - * ng.$sceDelegateProvider#resourceUrlBlacklist $sceDelegateProvider.resourceUrlBlacklist} + * ng.$sceDelegateProvider#methods_resourceUrlBlacklist $sceDelegateProvider.resourceUrlBlacklist} */ /** @@ -11113,8 +11948,8 @@ * The `$sceDelegateProvider` provider allows developers to configure the {@link ng.$sceDelegate * $sceDelegate} service. This allows one to get/set the whitelists and blacklists used to ensure * that the URLs used for sourcing Angular templates are safe. Refer {@link - * ng.$sceDelegateProvider#resourceUrlWhitelist $sceDelegateProvider.resourceUrlWhitelist} and - * {@link ng.$sceDelegateProvider#resourceUrlBlacklist $sceDelegateProvider.resourceUrlBlacklist} + * ng.$sceDelegateProvider#methods_resourceUrlWhitelist $sceDelegateProvider.resourceUrlWhitelist} and + * {@link ng.$sceDelegateProvider#methods_resourceUrlBlacklist $sceDelegateProvider.resourceUrlBlacklist} * * For the general details about this service in Angular, read the main page for {@link ng.$sce * Strict Contextual Escaping (SCE)}. @@ -11160,8 +11995,8 @@ * provided. This must be an array or null. A snapshot of this array is used so further * changes to the array are ignored. * - * Follow {@link ng.$sce#resourceUrlPatternItem this link} for a description of the items allowed in - * this array. + * Follow {@link ng.$sce#resourceUrlPatternItem this link} for a description of the items + * allowed in this array. * * Note: **an empty whitelist array will block all URLs**! * @@ -11190,19 +12025,19 @@ * provided. This must be an array or null. A snapshot of this array is used so further * changes to the array are ignored. * - * Follow {@link ng.$sce#resourceUrlPatternItem this link} for a description of the items allowed in - * this array. + * Follow {@link ng.$sce#resourceUrlPatternItem this link} for a description of the items + * allowed in this array. * - * The typical usage for the blacklist is to **block [open redirects](http://cwe.mitre.org/data/definitions/601.html)** - * served by your domain as these would otherwise be trusted but actually return content from the redirected - * domain. + * The typical usage for the blacklist is to **block + * [open redirects](http://cwe.mitre.org/data/definitions/601.html)** served by your domain as + * these would otherwise be trusted but actually return content from the redirected domain. * * Finally, **the blacklist overrides the whitelist** and has the final say. * * @return {Array} the currently set blacklist array. * - * The **default value** when no whitelist has been explicitly set is the empty array (i.e. there is - * no blacklist.) + * The **default value** when no whitelist has been explicitly set is the empty array (i.e. there + * is no blacklist.) * * @description * Sets/Gets the blacklist of trusted resource URLs. @@ -11258,21 +12093,21 @@ return allowed; } - function generateHolderType(base) { + function generateHolderType(Base) { var holderType = function TrustedValueHolderType(trustedValue) { this.$$unwrapTrustedValue = function() { return trustedValue; }; }; - if (base) { - holderType.prototype = new base(); + if (Base) { + holderType.prototype = new Base(); } holderType.prototype.valueOf = function sceValueOf() { return this.$$unwrapTrustedValue(); - } + }; holderType.prototype.toString = function sceToString() { return this.$$unwrapTrustedValue().toString(); - } + }; return holderType; } @@ -11304,9 +12139,10 @@ * where Angular expects a $sce.trustAs() return value. */ function trustAs(type, trustedValue) { - var constructor = (byType.hasOwnProperty(type) ? byType[type] : null); - if (!constructor) { - throw $sceMinErr('icontext', 'Attempted to trust a value in invalid context. Context: {0}; Value: {1}', + var Constructor = (byType.hasOwnProperty(type) ? byType[type] : null); + if (!Constructor) { + throw $sceMinErr('icontext', + 'Attempted to trust a value in invalid context. Context: {0}; Value: {1}', type, trustedValue); } if (trustedValue === null || trustedValue === undefined || trustedValue === '') { @@ -11319,7 +12155,7 @@ 'Attempted to trust a non-string value in a content requiring a string: Context: {0}', type); } - return new constructor(trustedValue); + return new Constructor(trustedValue); } /** @@ -11328,18 +12164,18 @@ * @methodOf ng.$sceDelegate * * @description - * If the passed parameter had been returned by a prior call to {@link ng.$sceDelegate#trustAs + * If the passed parameter had been returned by a prior call to {@link ng.$sceDelegate#methods_trustAs * `$sceDelegate.trustAs`}, returns the value that had been passed to {@link - * ng.$sceDelegate#trustAs `$sceDelegate.trustAs`}. + * ng.$sceDelegate#methods_trustAs `$sceDelegate.trustAs`}. * * If the passed parameter is not a value that had been returned by {@link - * ng.$sceDelegate#trustAs `$sceDelegate.trustAs`}, returns it as-is. + * ng.$sceDelegate#methods_trustAs `$sceDelegate.trustAs`}, returns it as-is. * - * @param {*} value The result of a prior {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs`} + * @param {*} value The result of a prior {@link ng.$sceDelegate#methods_trustAs `$sceDelegate.trustAs`} * call or anything else. - * @returns {*} The value the was originally provided to {@link ng.$sceDelegate#trustAs - * `$sceDelegate.trustAs`} if `value` is the result of such a call. Otherwise, returns `value` - * unchanged. + * @returns {*} The value the was originally provided to {@link ng.$sceDelegate#methods_trustAs + * `$sceDelegate.trustAs`} if `value` is the result of such a call. Otherwise, returns + * `value` unchanged. */ function valueOf(maybeTrusted) { if (maybeTrusted instanceof trustedValueHolderBase) { @@ -11355,14 +12191,14 @@ * @methodOf ng.$sceDelegate * * @description - * Takes the result of a {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs`} call and returns the - * originally supplied value if the queried context type is a supertype of the created type. If - * this condition isn't satisfied, throws an exception. + * Takes the result of a {@link ng.$sceDelegate#methods_trustAs `$sceDelegate.trustAs`} call and + * returns the originally supplied value if the queried context type is a supertype of the + * created type. If this condition isn't satisfied, throws an exception. * * @param {string} type The kind of context in which this value is to be used. - * @param {*} maybeTrusted The result of a prior {@link ng.$sceDelegate#trustAs - * `$sceDelegate.trustAs`} call. - * @returns {*} The value the was originally provided to {@link ng.$sceDelegate#trustAs + * @param {*} maybeTrusted The result of a prior {@link ng.$sceDelegate#methods_trustAs + * `$sceDelegate.trustAs`} call. + * @returns {*} The value the was originally provided to {@link ng.$sceDelegate#methods_trustAs * `$sceDelegate.trustAs`} if valid in this context. Otherwise, throws an exception. */ function getTrusted(type, maybeTrusted) { @@ -11381,7 +12217,8 @@ return maybeTrusted; } else { throw $sceMinErr('insecurl', - 'Blocked loading resource from url not allowed by $sceDelegate policy. URL: {0}', maybeTrusted.toString()); + 'Blocked loading resource from url not allowed by $sceDelegate policy. URL: {0}', + maybeTrusted.toString()); } } else if (type === SCE_CONTEXTS.HTML) { return htmlSanitizer(maybeTrusted); @@ -11408,6 +12245,8 @@ * Read more about {@link ng.$sce Strict Contextual Escaping (SCE)}. */ +/* jshint maxlen: false*/ + /** * @ngdoc service * @name ng.$sce @@ -11464,20 +12303,20 @@ * allowing only the files in a specific directory to do this. Ensuring that the internal API * exposed by that code doesn't markup arbitrary values as safe then becomes a more manageable task. * - * In the case of AngularJS' SCE service, one uses {@link ng.$sce#trustAs $sce.trustAs} (and shorthand - * methods such as {@link ng.$sce#trustAsHtml $sce.trustAsHtml}, etc.) to obtain values that will be - * accepted by SCE / privileged contexts. + * In the case of AngularJS' SCE service, one uses {@link ng.$sce#methods_trustAs $sce.trustAs} + * (and shorthand methods such as {@link ng.$sce#methods_trustAsHtml $sce.trustAsHtml}, etc.) to + * obtain values that will be accepted by SCE / privileged contexts. * * * ## How does it work? * - * In privileged contexts, directives and code will bind to the result of {@link ng.$sce#getTrusted + * In privileged contexts, directives and code will bind to the result of {@link ng.$sce#methods_getTrusted * $sce.getTrusted(context, value)} rather than to the value directly. Directives use {@link - * ng.$sce#parse $sce.parseAs} rather than `$parse` to watch attribute bindings, which performs the - * {@link ng.$sce#getTrusted $sce.getTrusted} behind the scenes on non-constant literals. + * ng.$sce#methods_parse $sce.parseAs} rather than `$parse` to watch attribute bindings, which performs the + * {@link ng.$sce#methods_getTrusted $sce.getTrusted} behind the scenes on non-constant literals. * * As an example, {@link ng.directive:ngBindHtml ngBindHtml} uses {@link - * ng.$sce#parseAsHtml $sce.parseAsHtml(binding expression)}. Here's the actual code (slightly + * ng.$sce#methods_parseAsHtml $sce.parseAsHtml(binding expression)}. Here's the actual code (slightly * simplified): * * <pre class="prettyprint"> @@ -11496,10 +12335,10 @@ * `templateUrl`'s specified by {@link guide/directive directives}. * * By default, Angular only loads templates from the same domain and protocol as the application - * document. This is done by calling {@link ng.$sce#getTrustedResourceUrl + * document. This is done by calling {@link ng.$sce#methods_getTrustedResourceUrl * $sce.getTrustedResourceUrl} on the template URL. To load templates from other domains and/or - * protocols, you may either either {@link ng.$sceDelegateProvider#resourceUrlWhitelist whitelist - * them} or {@link ng.$sce#trustAsResourceUrl wrap it} into a trusted value. + * protocols, you may either either {@link ng.$sceDelegateProvider#methods_resourceUrlWhitelist whitelist + * them} or {@link ng.$sce#methods_trustAsResourceUrl wrap it} into a trusted value. * * *Please note*: * The browser's @@ -11519,20 +12358,21 @@ * `<div ng-html-bind-unsafe="'<b>implicitly trusted</b>'"></div>`) just works. * * Additionally, `a[href]` and `img[src]` automatically sanitize their URLs and do not pass them - * through {@link ng.$sce#getTrusted $sce.getTrusted}. SCE doesn't play a role here. + * through {@link ng.$sce#methods_getTrusted $sce.getTrusted}. SCE doesn't play a role here. * * The included {@link ng.$sceDelegate $sceDelegate} comes with sane defaults to allow you to load * templates in `ng-include` from your application's domain without having to even know about SCE. * It blocks loading templates from other domains or loading templates over http from an https * served document. You can change these by setting your own custom {@link - * ng.$sceDelegateProvider#resourceUrlWhitelist whitelists} and {@link - * ng.$sceDelegateProvider#resourceUrlBlacklist blacklists} for matching such URLs. + * ng.$sceDelegateProvider#methods_resourceUrlWhitelist whitelists} and {@link + * ng.$sceDelegateProvider#methods_resourceUrlBlacklist blacklists} for matching such URLs. * * This significantly reduces the overhead. It is far easier to pay the small overhead and have an * application that's secure and can be audited to verify that with much more ease than bolting * security onto an application later. * - * ## What trusted context types are supported?<a name="contexts"></a> + * <a name="contexts"></a> + * ## What trusted context types are supported? * * | Context | Notes | * |---------------------|----------------| @@ -11542,7 +12382,7 @@ * | `$sce.RESOURCE_URL` | For URLs that are not only safe to follow as links, but whose contens are also safe to include in your application. Examples include `ng-include`, `src` / `ngSrc` bindings for tags other than `IMG` (e.g. `IFRAME`, `OBJECT`, etc.) <br><br>Note that `$sce.RESOURCE_URL` makes a stronger statement about the URL than `$sce.URL` does and therefore contexts requiring values trusted for `$sce.RESOURCE_URL` can be used anywhere that values trusted for `$sce.URL` are required. | * | `$sce.JS` | For JavaScript that is safe to execute in your application's context. Currently unused. Feel free to use it in your own directives. | * - * ## Format of items in {@link ng.$sceDelegateProvider#resourceUrlWhitelist resourceUrlWhitelist}/{@link ng.$sceDelegateProvider#resourceUrlBlacklist Blacklist} <a name="resourceUrlPatternItem"></a> + * ## Format of items in {@link ng.$sceDelegateProvider#methods_resourceUrlWhitelist resourceUrlWhitelist}/{@link ng.$sceDelegateProvider#methods_resourceUrlBlacklist Blacklist} <a name="resourceUrlPatternItem"></a> * * Each element in these arrays must be one of the following: * @@ -11587,65 +12427,68 @@ * Closure library's [goog.string.regExpEscape(s)]( * http://docs.closure-library.googlecode.com/git/closure_goog_string_string.j…) * - * Refer {@link ng.$sceDelegateProvider#example $sceDelegateProvider} for an example. + * Refer {@link ng.$sceDelegateProvider $sceDelegateProvider} for an example. * * ## Show me an example using SCE. * * @example - <example module="mySceApp"> - <file name="index.html"> - <div ng-controller="myAppController as myCtrl"> - <i ng-bind-html="myCtrl.explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i><br><br> - <b>User comments</b><br> - By default, HTML that isn't explicitly trusted (e.g. Alice's comment) is sanitized when $sanitize is available. If $sanitize isn't available, this results in an error instead of an exploit. - <div class="well"> - <div ng-repeat="userComment in myCtrl.userComments"> - <b>{{userComment.name}}</b>: - <span ng-bind-html="userComment.htmlComment" class="htmlComment"></span> - <br> - </div> +<example module="mySceApp"> +<file name="index.html"> + <div ng-controller="myAppController as myCtrl"> + <i ng-bind-html="myCtrl.explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i><br><br> + <b>User comments</b><br> + By default, HTML that isn't explicitly trusted (e.g. Alice's comment) is sanitized when + $sanitize is available. If $sanitize isn't available, this results in an error instead of an + exploit. + <div class="well"> + <div ng-repeat="userComment in myCtrl.userComments"> + <b>{{userComment.name}}</b>: + <span ng-bind-html="userComment.htmlComment" class="htmlComment"></span> + <br> </div> </div> - </file> + </div> +</file> - <file name="script.js"> - var mySceApp = angular.module('mySceApp', ['ngSanitize']); +<file name="script.js"> + var mySceApp = angular.module('mySceApp', ['ngSanitize']); - mySceApp.controller("myAppController", function myAppController($http, $templateCache, $sce) { - var self = this; - $http.get("test_data.json", {cache: $templateCache}).success(function(userComments) { - self.userComments = userComments; - }); - self.explicitlyTrustedHtml = $sce.trustAsHtml( - '<span onmouseover="this.textContent="Explicitly trusted HTML bypasses ' + - 'sanitization."">Hover over this text.</span>'); + mySceApp.controller("myAppController", function myAppController($http, $templateCache, $sce) { + var self = this; + $http.get("test_data.json", {cache: $templateCache}).success(function(userComments) { + self.userComments = userComments; }); - </file> + self.explicitlyTrustedHtml = $sce.trustAsHtml( + '<span onmouseover="this.textContent="Explicitly trusted HTML bypasses ' + + 'sanitization."">Hover over this text.</span>'); + }); +</file> - <file name="test_data.json"> - [ - { "name": "Alice", - "htmlComment": "<span onmouseover='this.textContent=\"PWN3D!\"'>Is <i>anyone</i> reading this?</span>" - }, - { "name": "Bob", - "htmlComment": "<i>Yes!</i> Am I the only other one?" - } - ] - </file> +<file name="test_data.json"> +[ + { "name": "Alice", + "htmlComment": + "<span onmouseover='this.textContent=\"PWN3D!\"'>Is <i>anyone</i> reading this?</span>" + }, + { "name": "Bob", + "htmlComment": "<i>Yes!</i> Am I the only other one?" + } +] +</file> - <file name="scenario.js"> - describe('SCE doc demo', function() { - it('should sanitize untrusted values', function() { - expect(element('.htmlComment').html()).toBe('<span>Is <i>anyone</i> reading this?</span>'); - }); - it('should NOT sanitize explicitly trusted values', function() { - expect(element('#explicitlyTrustedHtml').html()).toBe( - '<span onmouseover="this.textContent="Explicitly trusted HTML bypasses ' + - 'sanitization."">Hover over this text.</span>'); - }); +<file name="scenario.js"> + describe('SCE doc demo', function() { + it('should sanitize untrusted values', function() { + expect(element('.htmlComment').html()).toBe('<span>Is <i>anyone</i> reading this?</span>'); }); - </file> - </example> + it('should NOT sanitize explicitly trusted values', function() { + expect(element('#explicitlyTrustedHtml').html()).toBe( + '<span onmouseover="this.textContent="Explicitly trusted HTML bypasses ' + + 'sanitization."">Hover over this text.</span>'); + }); + }); +</file> +</example> * * * @@ -11668,6 +12511,7 @@ * </pre> * */ +/* jshint maxlen: 100 */ function $SceProvider() { var enabled = true; @@ -11713,13 +12557,13 @@ * This function should return the a value that is safe to use in the context specified by * contextEnum or throw and exception otherwise. * - * NOTE: This contract deliberately does NOT state that values returned by trustAs() must be opaque - * or wrapped in some holder object. That happens to be an implementation detail. For instance, - * an implementation could maintain a registry of all trusted objects by context. In such a case, - * trustAs() would return the same object that was passed in. getTrusted() would return the same - * object passed in if it was found in the registry under a compatible context or throw an - * exception otherwise. An implementation might only wrap values some of the time based on - * some criteria. getTrusted() might return a value and not throw an exception for special + * NOTE: This contract deliberately does NOT state that values returned by trustAs() must be + * opaque or wrapped in some holder object. That happens to be an implementation detail. For + * instance, an implementation could maintain a registry of all trusted objects by context. In + * such a case, trustAs() would return the same object that was passed in. getTrusted() would + * return the same object passed in if it was found in the registry under a compatible context or + * throw an exception otherwise. An implementation might only wrap values some of the time based + * on some criteria. getTrusted() might return a value and not throw an exception for special * constants or objects even if not wrapped. All such implementations fulfill this contract. * * @@ -11774,8 +12618,8 @@ sce.valueOf = $sceDelegate.valueOf; if (!enabled) { - sce.trustAs = sce.getTrusted = function(type, value) { return value; }, - sce.valueOf = identity + sce.trustAs = sce.getTrusted = function(type, value) { return value; }; + sce.valueOf = identity; } /** @@ -11786,7 +12630,7 @@ * @description * Converts Angular {@link guide/expression expression} into a function. This is like {@link * ng.$parse $parse} and is identical when the expression is a literal constant. Otherwise, it - * wraps the expression in a call to {@link ng.$sce#getTrusted $sce.getTrusted(*type*, + * wraps the expression in a call to {@link ng.$sce#methods_getTrusted $sce.getTrusted(*type*, * *result*)} * * @param {string} type The kind of SCE context in which this result will be used. @@ -11805,7 +12649,7 @@ } else { return function sceParseAsTrusted(self, locals) { return sce.getTrusted(type, parsed(self, locals)); - } + }; } }; @@ -11815,11 +12659,12 @@ * @methodOf ng.$sce * * @description - * Delegates to {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs`}. As such, returns an object - * that is trusted by angular for use in specified strict contextual escaping contexts (such as - * ng-html-bind-unsafe, ng-include, any src attribute interpolation, any dom event binding - * attribute interpolation such as for onclick, etc.) that uses the provided value. See * - * {@link ng.$sce $sce} for enabling strict contextual escaping. + * Delegates to {@link ng.$sceDelegate#methods_trustAs `$sceDelegate.trustAs`}. As such, + * returns an objectthat is trusted by angular for use in specified strict contextual + * escaping contexts (such as ng-html-bind-unsafe, ng-include, any src attribute + * interpolation, any dom event binding attribute interpolation such as for onclick, etc.) + * that uses the provided value. See * {@link ng.$sce $sce} for enabling strict contextual + * escaping. * * @param {string} type The kind of context in which this value is safe for use. e.g. url, * resource_url, html, js and css. @@ -11834,13 +12679,14 @@ * @methodOf ng.$sce * * @description - * Shorthand method. `$sce.trustAsHtml(value)` → {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs($sce.HTML, value)`} + * Shorthand method. `$sce.trustAsHtml(value)` → + * {@link ng.$sceDelegate#methods_trustAs `$sceDelegate.trustAs($sce.HTML, value)`} * * @param {*} value The value to trustAs. - * @returns {*} An object that can be passed to {@link ng.$sce#getTrustedHtml + * @returns {*} An object that can be passed to {@link ng.$sce#methods_getTrustedHtml * $sce.getTrustedHtml(value)} to obtain the original value. (privileged directives * only accept expressions that are either literal constants or are the - * return value of {@link ng.$sce#trustAs $sce.trustAs}.) + * return value of {@link ng.$sce#methods_trustAs $sce.trustAs}.) */ /** @@ -11849,13 +12695,14 @@ * @methodOf ng.$sce * * @description - * Shorthand method. `$sce.trustAsUrl(value)` → {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs($sce.URL, value)`} + * Shorthand method. `$sce.trustAsUrl(value)` → + * {@link ng.$sceDelegate#methods_trustAs `$sceDelegate.trustAs($sce.URL, value)`} * * @param {*} value The value to trustAs. - * @returns {*} An object that can be passed to {@link ng.$sce#getTrustedUrl + * @returns {*} An object that can be passed to {@link ng.$sce#methods_getTrustedUrl * $sce.getTrustedUrl(value)} to obtain the original value. (privileged directives * only accept expressions that are either literal constants or are the - * return value of {@link ng.$sce#trustAs $sce.trustAs}.) + * return value of {@link ng.$sce#methods_trustAs $sce.trustAs}.) */ /** @@ -11864,13 +12711,14 @@ * @methodOf ng.$sce * * @description - * Shorthand method. `$sce.trustAsResourceUrl(value)` → {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs($sce.RESOURCE_URL, value)`} + * Shorthand method. `$sce.trustAsResourceUrl(value)` → + * {@link ng.$sceDelegate#methods_trustAs `$sceDelegate.trustAs($sce.RESOURCE_URL, value)`} * * @param {*} value The value to trustAs. - * @returns {*} An object that can be passed to {@link ng.$sce#getTrustedResourceUrl + * @returns {*} An object that can be passed to {@link ng.$sce#methods_getTrustedResourceUrl * $sce.getTrustedResourceUrl(value)} to obtain the original value. (privileged directives * only accept expressions that are either literal constants or are the return - * value of {@link ng.$sce#trustAs $sce.trustAs}.) + * value of {@link ng.$sce#methods_trustAs $sce.trustAs}.) */ /** @@ -11879,13 +12727,14 @@ * @methodOf ng.$sce * * @description - * Shorthand method. `$sce.trustAsJs(value)` → {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs($sce.JS, value)`} + * Shorthand method. `$sce.trustAsJs(value)` → + * {@link ng.$sceDelegate#methods_trustAs `$sceDelegate.trustAs($sce.JS, value)`} * * @param {*} value The value to trustAs. - * @returns {*} An object that can be passed to {@link ng.$sce#getTrustedJs + * @returns {*} An object that can be passed to {@link ng.$sce#methods_getTrustedJs * $sce.getTrustedJs(value)} to obtain the original value. (privileged directives * only accept expressions that are either literal constants or are the - * return value of {@link ng.$sce#trustAs $sce.trustAs}.) + * return value of {@link ng.$sce#methods_trustAs $sce.trustAs}.) */ /** @@ -11894,15 +12743,17 @@ * @methodOf ng.$sce * * @description - * Delegates to {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted`}. As such, takes - * the result of a {@link ng.$sce#trustAs `$sce.trustAs`}() call and returns the originally supplied - * value if the queried context type is a supertype of the created type. If this condition - * isn't satisfied, throws an exception. + * Delegates to {@link ng.$sceDelegate#methods_getTrusted `$sceDelegate.getTrusted`}. As such, + * takes the result of a {@link ng.$sce#methods_trustAs `$sce.trustAs`}() call and returns the + * originally supplied value if the queried context type is a supertype of the created type. + * If this condition isn't satisfied, throws an exception. * * @param {string} type The kind of context in which this value is to be used. - * @param {*} maybeTrusted The result of a prior {@link ng.$sce#trustAs `$sce.trustAs`} call. - * @returns {*} The value the was originally provided to {@link ng.$sce#trustAs `$sce.trustAs`} if - * valid in this context. Otherwise, throws an exception. + * @param {*} maybeTrusted The result of a prior {@link ng.$sce#methods_trustAs `$sce.trustAs`} + * call. + * @returns {*} The value the was originally provided to + * {@link ng.$sce#methods_trustAs `$sce.trustAs`} if valid in this context. + * Otherwise, throws an exception. */ /** @@ -11911,7 +12762,8 @@ * @methodOf ng.$sce * * @description - * Shorthand method. `$sce.getTrustedHtml(value)` → {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted($sce.HTML, value)`} + * Shorthand method. `$sce.getTrustedHtml(value)` → + * {@link ng.$sceDelegate#methods_getTrusted `$sceDelegate.getTrusted($sce.HTML, value)`} * * @param {*} value The value to pass to `$sce.getTrusted`. * @returns {*} The return value of `$sce.getTrusted($sce.HTML, value)` @@ -11923,7 +12775,8 @@ * @methodOf ng.$sce * * @description - * Shorthand method. `$sce.getTrustedCss(value)` → {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted($sce.CSS, value)`} + * Shorthand method. `$sce.getTrustedCss(value)` → + * {@link ng.$sceDelegate#methods_getTrusted `$sceDelegate.getTrusted($sce.CSS, value)`} * * @param {*} value The value to pass to `$sce.getTrusted`. * @returns {*} The return value of `$sce.getTrusted($sce.CSS, value)` @@ -11935,7 +12788,8 @@ * @methodOf ng.$sce * * @description - * Shorthand method. `$sce.getTrustedUrl(value)` → {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted($sce.URL, value)`} + * Shorthand method. `$sce.getTrustedUrl(value)` → + * {@link ng.$sceDelegate#methods_getTrusted `$sceDelegate.getTrusted($sce.URL, value)`} * * @param {*} value The value to pass to `$sce.getTrusted`. * @returns {*} The return value of `$sce.getTrusted($sce.URL, value)` @@ -11947,7 +12801,8 @@ * @methodOf ng.$sce * * @description - * Shorthand method. `$sce.getTrustedResourceUrl(value)` → {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted($sce.RESOURCE_URL, value)`} + * Shorthand method. `$sce.getTrustedResourceUrl(value)` → + * {@link ng.$sceDelegate#methods_getTrusted `$sceDelegate.getTrusted($sce.RESOURCE_URL, value)`} * * @param {*} value The value to pass to `$sceDelegate.getTrusted`. * @returns {*} The return value of `$sce.getTrusted($sce.RESOURCE_URL, value)` @@ -11959,7 +12814,8 @@ * @methodOf ng.$sce * * @description - * Shorthand method. `$sce.getTrustedJs(value)` → {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted($sce.JS, value)`} + * Shorthand method. `$sce.getTrustedJs(value)` → + * {@link ng.$sceDelegate#methods_getTrusted `$sceDelegate.getTrusted($sce.JS, value)`} * * @param {*} value The value to pass to `$sce.getTrusted`. * @returns {*} The return value of `$sce.getTrusted($sce.JS, value)` @@ -11971,7 +12827,8 @@ * @methodOf ng.$sce * * @description - * Shorthand method. `$sce.parseAsHtml(expression string)` → {@link ng.$sce#parse `$sce.parseAs($sce.HTML, value)`} + * Shorthand method. `$sce.parseAsHtml(expression string)` → + * {@link ng.$sce#methods_parse `$sce.parseAs($sce.HTML, value)`} * * @param {string} expression String expression to compile. * @returns {function(context, locals)} a function which represents the compiled expression: @@ -11988,7 +12845,8 @@ * @methodOf ng.$sce * * @description - * Shorthand method. `$sce.parseAsCss(value)` → {@link ng.$sce#parse `$sce.parseAs($sce.CSS, value)`} + * Shorthand method. `$sce.parseAsCss(value)` → + * {@link ng.$sce#methods_parse `$sce.parseAs($sce.CSS, value)`} * * @param {string} expression String expression to compile. * @returns {function(context, locals)} a function which represents the compiled expression: @@ -12005,7 +12863,8 @@ * @methodOf ng.$sce * * @description - * Shorthand method. `$sce.parseAsUrl(value)` → {@link ng.$sce#parse `$sce.parseAs($sce.URL, value)`} + * Shorthand method. `$sce.parseAsUrl(value)` → + * {@link ng.$sce#methods_parse `$sce.parseAs($sce.URL, value)`} * * @param {string} expression String expression to compile. * @returns {function(context, locals)} a function which represents the compiled expression: @@ -12022,7 +12881,8 @@ * @methodOf ng.$sce * * @description - * Shorthand method. `$sce.parseAsResourceUrl(value)` → {@link ng.$sce#parse `$sce.parseAs($sce.RESOURCE_URL, value)`} + * Shorthand method. `$sce.parseAsResourceUrl(value)` → + * {@link ng.$sce#methods_parse `$sce.parseAs($sce.RESOURCE_URL, value)`} * * @param {string} expression String expression to compile. * @returns {function(context, locals)} a function which represents the compiled expression: @@ -12039,7 +12899,8 @@ * @methodOf ng.$sce * * @description - * Shorthand method. `$sce.parseAsJs(value)` → {@link ng.$sce#parse `$sce.parseAs($sce.JS, value)`} + * Shorthand method. `$sce.parseAsJs(value)` → + * {@link ng.$sce#methods_parse `$sce.parseAs($sce.JS, value)`} * * @param {string} expression String expression to compile. * @returns {function(context, locals)} a function which represents the compiled expression: @@ -12059,13 +12920,13 @@ var lName = lowercase(name); sce[camelCase("parse_as_" + lName)] = function (expr) { return parse(enumValue, expr); - } + }; sce[camelCase("get_trusted_" + lName)] = function (value) { return getTrusted(enumValue, value); - } + }; sce[camelCase("trust_as_" + lName)] = function (value) { return trustAs(enumValue, value); - } + }; }); return sce; @@ -12090,7 +12951,8 @@ function $SnifferProvider() { this.$get = ['$window', '$document', function($window, $document) { var eventSupport = {}, - android = int((/android (\d+)/.exec(lowercase(($window.navigator || {}).userAgent)) || [])[1]), + android = + int((/android (\d+)/.exec(lowercase(($window.navigator || {}).userAgent)) || [])[1]), boxee = /Boxee/i.test(($window.navigator || {}).userAgent), document = $document[0] || {}, vendorPrefix, @@ -12131,7 +12993,10 @@ // older webit browser (533.9) on Boxee box has exactly the same problem as Android has // so let's not use the history API also + // We are purposefully using `!(android < 4)` to cover the case when `android` is undefined + // jshint -W018 history: !!($window.history && $window.history.pushState && !(android < 4) && !boxee), + // jshint +W018 hashchange: 'onhashchange' in $window && // IE8 compatible mode lies (!document.documentMode || document.documentMode > 7), @@ -12148,10 +13013,11 @@ return eventSupport[event]; }, - csp: document.securityPolicy ? document.securityPolicy.isActive : false, + csp: csp(), vendorPrefix: vendorPrefix, transitions : transitions, - animations : animations + animations : animations, + msie : msie }; }]; } @@ -12183,7 +13049,7 @@ * @param {function()} fn A function, whose execution should be delayed. * @param {number=} [delay=0] Delay in milliseconds. * @param {boolean=} [invokeApply=true] If set to `false` skips model dirty checking, otherwise - * will invoke `fn` within the {@link ng.$rootScope.Scope#$apply $apply} block. + * will invoke `fn` within the {@link ng.$rootScope.Scope#methods_$apply $apply} block. * @returns {Promise} Promise that will be resolved when the timeout is reached. The value this * promise will be resolved with is the return value of the `fn` function. * @@ -12410,7 +13276,8 @@ hash: urlParsingNode.hash ? urlParsingNode.hash.replace(/^#/, '') : '', hostname: urlParsingNode.hostname, port: urlParsingNode.port, - pathname: urlParsingNode.pathname && urlParsingNode.pathname.charAt(0) === '/' ? urlParsingNode.pathname : '/' + urlParsingNode.pathname + pathname: urlParsingNode.pathname && urlParsingNode.pathname.charAt(0) === '/' ? + urlParsingNode.pathname : '/' + urlParsingNode.pathname }; } @@ -12475,9 +13342,9 @@ * @name ng.$filterProvider * @description * - * Filters are just functions which transform input to an output. However filters need to be Dependency Injected. To - * achieve this a filter definition consists of a factory function which is annotated with dependencies and is - * responsible for creating a filter function. + * Filters are just functions which transform input to an output. However filters need to be + * Dependency Injected. To achieve this a filter definition consists of a factory function which is + * annotated with dependencies and is responsible for creating a filter function. * * <pre> * // Filter registration @@ -12500,7 +13367,9 @@ * } * </pre> * - * The filter function is registered with the `$injector` under the filter name suffix with `Filter`. + * The filter function is registered with the `$injector` under the filter name suffix with + * `Filter`. + * * <pre> * it('should be the same instance', inject( * function($filterProvider) { @@ -12515,8 +13384,7 @@ * * * For more information about how angular filters work, and how to create your own filters, see - * {@link guide/dev_guide.templates.filters Understanding Angular Filters} in the angular Developer - * Guide. + * {@link guide/filter Filters} in the Angular Developer Guide. */ /** * @ngdoc method @@ -12577,6 +13445,18 @@ }]; //////////////////////////////////////// + + /* global + currencyFilter: false, + dateFilter: false, + filterFilter: false, + jsonFilter: false, + limitToFilter: false, + lowercaseFilter: false, + numberFilter: false, + orderByFilter: false, + uppercaseFilter: false, + */ register('currency', currencyFilter); register('date', dateFilter); @@ -12597,9 +13477,6 @@ * @description * Selects a subset of items from `array` and returns it as a new array. * - * Note: This function is used to augment the `Array` type in Angular expressions. See - * {@link ng.$filter} for more information about Angular arrays. - * * @param {Array} array The source array. * @param {string|Object|function()} expression The predicate to be used for selecting items from * `array`. @@ -12694,9 +13571,12 @@ </doc:example> */ function filterFilter() { - return function(array, expression, comperator) { + return function(array, expression, comparator) { if (!isArray(array)) return array; - var predicates = []; + + var comparatorType = typeof(comparator), + predicates = []; + predicates.check = function(value) { for (var j = 0; j < predicates.length; j++) { if(!predicates[j](value)) { @@ -12705,22 +13585,20 @@ } return true; }; - switch(typeof comperator) { - case "function": - break; - case "boolean": - if(comperator == true) { - comperator = function(obj, text) { - return angular.equals(obj, text); - } - break; - } - default: - comperator = function(obj, text) { + + if (comparatorType !== 'function') { + if (comparatorType === 'boolean' && comparator) { + comparator = function(obj, text) { + return angular.equals(obj, text); + }; + } else { + comparator = function(obj, text) { text = (''+text).toLowerCase(); return (''+obj).toLowerCase().indexOf(text) > -1; }; + } } + var search = function(obj, text){ if (typeof text == 'string' && text.charAt(0) === '!') { return !search(obj, text.substr(1)); @@ -12729,12 +13607,11 @@ case "boolean": case "number": case "string": - return comperator(obj, text); + return comparator(obj, text); case "object": switch (typeof text) { case "object": - return comperator(obj, text); - break; + return comparator(obj, text); default: for ( var objKey in obj) { if (objKey.charAt(0) !== '$' && search(obj[objKey], text)) { @@ -12759,13 +13636,16 @@ case "boolean": case "number": case "string": + // Set up expression object and fall through expression = {$:expression}; + // jshint -W086 case "object": + // jshint +W086 for (var key in expression) { if (key == '$') { (function() { if (!expression[key]) return; - var path = key + var path = key; predicates.push(function(value) { return search(value, expression[path]); }); @@ -12795,7 +13675,7 @@ } } return filtered; - } + }; } /** @@ -12942,13 +13822,13 @@ var whole = fraction[0]; fraction = fraction[1] || ''; - var pos = 0, + var i, pos = 0, lgroup = pattern.lgSize, group = pattern.gSize; if (whole.length >= (lgroup + group)) { pos = whole.length - lgroup; - for (var i = 0; i < pos; i++) { + for (i = 0; i < pos; i++) { if ((pos - i)%group === 0 && i !== 0) { formatedText += groupSep; } @@ -13162,7 +14042,7 @@ } dateSetter.call(date, int(match[1]), int(match[2]) - 1, int(match[3])); var h = int(match[4]||0) - tzHour; - var m = int(match[5]||0) - tzMin + var m = int(match[5]||0) - tzMin; var s = int(match[6]||0); var ms = Math.round(parseFloat('0.' + (match[7]||0)) * 1000); timeSetter.call(date, h, m, s, ms); @@ -13283,9 +14163,6 @@ * are taken from either the beginning or the end of the source array or string, as specified by * the value and sign (positive or negative) of `limit`. * - * Note: This function is used to augment the `Array` type in Angular expressions. See - * {@link ng.$filter} for more information about Angular arrays. - * * @param {Array|string} input Source array or string to be limited. * @param {string|number} limit The length of the returned array or string. If the `limit` number * is positive, `limit` number of items from the beginning of the source array/string are copied. @@ -13373,7 +14250,7 @@ } return out; - } + }; } /** @@ -13384,9 +14261,6 @@ * @description * Orders a specified `array` by the `expression` predicate. * - * Note: this function is used to augment the `Array` type in Angular expressions. See - * {@link ng.$filter} for more information about Angular arrays. - * * @param {Array} array The array to sort. * @param {function(*)|string|Array.<(function(*)|string)>} expression A predicate to be * used by the comparator to determine the order of elements. @@ -13511,14 +14385,14 @@ return t1 < t2 ? -1 : 1; } } - } + }; } function ngDirective(directive) { if (isFunction(directive)) { directive = { link: directive - } + }; } directive.restrict = directive.restrict || 'AC'; return valueFn(directive); @@ -13563,7 +14437,7 @@ event.preventDefault(); } }); - } + }; } }); @@ -13916,6 +14790,7 @@ }; }); +/* global -nullFormCtrl */ var nullFormCtrl = { $addControl: noop, $removeControl: noop, @@ -14121,7 +14996,7 @@ * does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a * sub-group of controls needs to be determined. * - * @param {string=} name|ngForm Name of the form. If specified, the form controller will be published into + * @param {string=} ngForm|name Name of the form. If specified, the form controller will be published into * related scope, under this name. * */ @@ -14180,7 +15055,7 @@ * * - If a form has only one input field then hitting enter in this field triggers form submit * (`ngSubmit`) - * - if a form has has 2+ input fields and no buttons or input[type=submit] then hitting enter + * - if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter * doesn't trigger submit * - if a form has one or more input fields and one or more buttons or input[type=submit] then * hitting enter in any of the input fields will trigger the click handler on the *first* button or @@ -14281,6 +15156,14 @@ var formDirective = formDirectiveFactory(); var ngFormDirective = formDirectiveFactory(true); +/* global + + -VALID_CLASS, + -INVALID_CLASS, + -PRISTINE_CLASS, + -DIRTY_CLASS +*/ + var URL_REGEXP = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/; var EMAIL_REGEXP = /^[A-Za-z0-9._%+-]+(a)[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$/; var NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))\s*$/; @@ -14309,8 +15192,7 @@ * patterns defined as scope expressions. * @param {string=} ngChange Angular expression to be executed when input changes due to user * interaction with the input element. - * @param {boolean=} [ngTrim=true] If set to false Angular will not automatically trimming the - * input. + * @param {boolean=} [ngTrim=true] If set to false Angular will not automatically trim the input. * * @example <doc:example> @@ -14817,8 +15699,8 @@ }); if (attr.min) { - var min = parseFloat(attr.min); var minValidator = function(value) { + var min = parseFloat(attr.min); if (!ctrl.$isEmpty(value) && value < min) { ctrl.$setValidity('min', false); return undefined; @@ -14833,8 +15715,8 @@ } if (attr.max) { - var max = parseFloat(attr.max); var maxValidator = function(value) { + var max = parseFloat(attr.max); if (!ctrl.$isEmpty(value) && value > max) { ctrl.$setValidity('max', false); return undefined; @@ -15099,7 +15981,7 @@ the control reads value from the DOM. Each function is called, in turn, passing the value through to the next. Used to sanitize / convert the value as well as validation. For validation, the parsers should update the validity state using - {@link ng.directive:ngModel.NgModelController#$setValidity $setValidity()}, + {@link ng.directive:ngModel.NgModelController#methods_$setValidity $setValidity()}, and return `undefined` for invalid values. * @@ -15212,30 +16094,31 @@ * Note that if you have a directive with an isolated scope, you cannot require `ngModel` * since the model value will be looked up on the isolated scope rather than the outer scope. * When the directive updates the model value, calling `ngModel.$setViewValue()` the property - * on the outer scope will not be updated. + * on the outer scope will not be updated. However you can get around this by using $parent. * - * Here is an example of this situation. You'll notice that even though both 'input' and 'div' - * seem to be attached to the same model, they are not kept in synch. + * Here is an example of this situation. You'll notice that the first div is not updating the input. + * However the second div can update the input properly. * * <example module="badIsolatedDirective"> <file name="script.js"> - angular.module('badIsolatedDirective', []).directive('bad', function() { - return { - require: 'ngModel', - scope: { }, - template: '<input ng-model="innerModel">', - link: function(scope, element, attrs, ngModel) { - scope.$watch('innerModel', function(value) { - console.log(value); - ngModel.$setViewValue(value); - }); - } - }; + angular.module('badIsolatedDirective', []).directive('isolate', function() { + return { + require: 'ngModel', + scope: { }, + template: '<input ng-model="innerModel">', + link: function(scope, element, attrs, ngModel) { + scope.$watch('innerModel', function(value) { + console.log(value); + ngModel.$setViewValue(value); + }); + } + }; }); </file> <file name="index.html"> - <input ng-model="someModel"> - <div bad ng-model="someModel"></div> + <input ng-model="someModel"/> + <div isolate ng-model="someModel"></div> + <div isolate ng-model="$parent.someModel"></div> </file> * </example> * @@ -15280,10 +16163,10 @@ * * @description * This is called when we need to determine if the value of the input is empty. - * + * * For instance, the required directive does this to work out if the input has data or not. * The default `$isEmpty` function checks whether the value is `undefined`, `''`, `null` or `NaN`. - * + * * You can override this for input directives whose concept of being empty is different to the * default. The `checkboxInputType` directive does this because in its case a value of `false` * implies empty. @@ -15328,7 +16211,10 @@ * @param {boolean} isValid Whether the current state is valid (true) or invalid (false). */ this.$setValidity = function(validationErrorKey, isValid) { + // Purposeful use of ! here to cast isValid to boolean in case it is undefined + // jshint -W018 if ($error[validationErrorKey] === !isValid) return; + // jshint +W018 if (isValid) { if ($error[validationErrorKey]) invalidCount--; @@ -15408,7 +16294,7 @@ } catch(e) { $exceptionHandler(e); } - }) + }); } }; @@ -15491,7 +16377,7 @@ formCtrl.$addControl(modelCtrl); - element.on('$destroy', function() { + scope.$on('$destroy', function() { formCtrl.$removeControl(modelCtrl); }); } @@ -15757,8 +16643,8 @@ * Typically, you don't use `ngBind` directly, but instead you use the double curly markup like * `{{ expression }}` which is similar but less verbose. * - * It is preferrable to use `ngBind` instead of `{{ expression }}` when a template is momentarily - * displayed by the browser in its raw state before Angular compiles it. Since `ngBind` is an + * It is preferrable to use `ngBind` instead of `{{ expression }}` when a template is momentarily + * displayed by the browser in its raw state before Angular compiles it. Since `ngBind` is an * element attribute, it makes the bindings invisible to the user while the page is loading. * * An alternative solution to this problem would be using the @@ -15794,6 +16680,9 @@ var ngBindDirective = ngDirective(function(scope, element, attr) { element.addClass('ng-binding').data('$binding', attr.ngBind); scope.$watch(attr.ngBind, function ngBindWatchAction(value) { + // We are purposefully using == here rather than === because we want to + // catch when value is "null or undefined" + // jshint -W041 element.text(value == undefined ? '' : value); }); }); @@ -15855,7 +16744,7 @@ attr.$observe('ngBindTemplate', function(value) { element.text(value); }); - } + }; }]; @@ -15869,7 +16758,7 @@ * ngSanitize.$sanitize $sanitize} service. To utilize this functionality, ensure that `$sanitize` * is available, for example, by including {@link ngSanitize} in your module's dependencies (not in * core Angular.) You may also bypass sanitization for values you know are safe. To do so, bind to - * an explicitly trusted value via {@link ng.$sce#trustAsHtml $sce.trustAsHtml}. See the example + * an explicitly trusted value via {@link ng.$sce#methods_trustAsHtml $sce.trustAsHtml}. See the example * under {@link ng.$sce#Example Strict Contextual Escaping (SCE)}. * * Note: If a `$sanitize` service is unavailable and the bound value isn't explicitly trusted, you @@ -15877,6 +16766,29 @@ * * @element ANY * @param {expression} ngBindHtml {@link guide/expression Expression} to evaluate. + * + * @example + * Try it here: enter text in text box and watch the greeting change. + <doc:example module="ngBindHtmlExample" deps="angular-sanitize.js" > + <doc:source> + <script> + angular.module('ngBindHtmlExample', ['ngSanitize']) + + .controller('ngBindHtmlCtrl', ['$scope', function ngBindHtmlCtrl($scope) { + $scope.myHTML = 'I am an <code>HTML</code>string with <a href="#">links!</a> and other <em>stuff</em>'; + }]); + </script> + <div ng-controller="ngBindHtmlCtrl"> + <p ng-bind-html="myHTML"></p> + </div> + </doc:source> + <doc:scenario> + it('should check ng-bind-html', function() { + expect(using('.doc-example-live').binding('myHTML')). + toBe('I am an <code>HTML</code>string with <a href="#">links!</a> and other <em>stuff</em>'); + }); + </doc:scenario> + </doc:example> */ var ngBindHtmlDirective = ['$sce', '$parse', function($sce, $parse) { return function(scope, element, attr) { @@ -15897,7 +16809,7 @@ return { restrict: 'AC', link: function(scope, element, attr) { - var oldVal = undefined; + var oldVal; scope.$watch(attr[name], ngClassWatchAction, true); @@ -15908,6 +16820,7 @@ if (name !== 'ngClass') { scope.$watch('$index', function($index, old$index) { + // jshint bitwise: false var mod = $index & 1; if (mod !== old$index & 1) { if (mod === selector) { @@ -15954,7 +16867,7 @@ } return classVal; - }; + } } }; }; @@ -15985,7 +16898,7 @@ * names of the properties whose values are truthy will be added as css classes to the * element. * - * @example Example that demostrates basic bindings via ngClass directive. + * @example Example that demonstrates basic bindings via ngClass directive. <example> <file name="index.html"> <p ng-class="{strike: strike, bold: bold, red: red}">Map Syntax Example</p> @@ -16050,26 +16963,18 @@ <input type="button" value="set" ng-click="myVar='my-class'"> <input type="button" value="clear" ng-click="myVar=''"> <br> - <span ng-class="myVar">Sample Text</span> + <span class="base-class" ng-class="myVar">Sample Text</span> </file> <file name="style.css"> - .my-class-add, .my-class-remove { + .base-class { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; - -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; - -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; } - .my-class, - .my-class-add.my-class-add-active { + .base-class.my-class { color: red; font-size:3em; } - - .my-class-remove.my-class-remove-active { - font-size:1.0em; - color:black; - } </file> <file name="scenario.js"> it('should check ng-class', function() { @@ -16092,10 +16997,10 @@ ## ngClass and pre-existing CSS3 Transitions/Animations The ngClass directive still supports CSS3 Transitions/Animations even if they do not follow the ngAnimate CSS naming structure. - Therefore, if any CSS3 Transition/Animation styles (outside of ngAnimate) are set on the element, then, if a ngClass animation - is triggered, the ngClass animation will be skipped so that ngAnimate can allow for the pre-existing transition or animation to - take over. This restriction allows for ngClass to still work with standard CSS3 Transitions/Animations that are defined - outside of ngAnimate. + Upon animation ngAnimate will apply supplementary CSS classes to track the start and end of an animation, but this will not hinder + any pre-existing CSS transitions already on the element. To get an idea of what happens during a class-based animation, be sure + to view the step by step details of {@link ngAnimate.$animate#methods_addclass $animate.addClass} and + {@link ngAnimate.$animate#methods_removeclass $animate.removeClass}. */ var ngClassDirective = classDirective('', true); @@ -16210,7 +17115,8 @@ * of the browser view. * * `ngCloak` works in cooperation with the following css rule embedded within `angular.js` and - * `angular.min.js`: + * `angular.min.js`. + * For CSP mode please add `angular-csp.css` to your html file (see {@link ng.directive:ngCsp ngCsp}). * * <pre> * [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { @@ -16273,7 +17179,10 @@ * * Controller — The `ngController` directive specifies a Controller class; the class contains business * logic behind the application to decorate the scope with functions and values * - * Note that an alternative way to define controllers is via the {@link ngRoute.$route $route} service. + * Note that you can also attach controllers to the DOM by declaring it in a route definition + * via the {@link ngRoute.$route $route} service. A common mistake is to declare the controller + * again using `ng-controller` in the template itself. This will cause the controller to be attached + * and executed twice. * * @element ANY * @scope @@ -16428,25 +17337,30 @@ /** * @ngdoc directive * @name ng.directive:ngCsp - * @priority 1000 * * @element html * @description * Enables [CSP (Content Security Policy)](https://developer.mozilla.org/en/Security/CSP) support. - * + * * This is necessary when developing things like Google Chrome Extensions. - * + * * CSP forbids apps to use `eval` or `Function(string)` generated functions (among other things). * For us to be compatible, we just need to implement the "getterFn" in $parse without violating * any of these restrictions. - * + * * AngularJS uses `Function(string)` generated functions as a speed optimization. Applying the `ngCsp` * directive will cause Angular to use CSP compatibility mode. When this mode is on AngularJS will * evaluate all expressions up to 30% slower than in non-CSP mode, but no security violations will * be raised. - * + * + * CSP forbids JavaScript to inline stylesheet rules. In non CSP mode Angular automatically + * includes some CSS rules (e.g. {@link ng.directive:ngCloak ngCloak}). + * To make those directives work in CSP mode, include the `angular-csp.css` manually. + * * In order to use this feature put the `ngCsp` directive on the root element of the application. - * + * + * *Note: This directive is only available in the `ng-csp` and `data-ng-csp` attribute form.* + * * @example * This example shows how to apply the `ngCsp` directive to the `html` tag. <pre> @@ -16458,14 +17372,9 @@ </pre> */ -var ngCspDirective = ['$sniffer', function($sniffer) { - return { - priority: 1000, - compile: function() { - $sniffer.csp = true; - } - }; -}]; +// ngCsp is not implemented as a proper directive any more, because we need it be processed while we bootstrap +// the system (before $parse is instantiated), for this reason we just have a csp() fn that looks for ng-csp attribute +// anywhere in the current doc /** * @ngdoc directive @@ -16508,13 +17417,17 @@ function(name) { var directiveName = directiveNormalize('ng-' + name); ngEventDirectives[directiveName] = ['$parse', function($parse) { - return function(scope, element, attr) { - var fn = $parse(attr[directiveName]); - element.on(lowercase(name), function(event) { - scope.$apply(function() { - fn(scope, {$event:event}); - }); - }); + return { + compile: function($element, attr) { + var fn = $parse(attr[directiveName]); + return function(scope, element, attr) { + element.on(lowercase(name), function(event) { + scope.$apply(function() { + fn(scope, {$event:event}); + }); + }); + }; + } }; }]; } @@ -16848,7 +17761,7 @@ * @priority 600 * @param {expression} ngIf If the {@link guide/expression expression} is falsy then * the element is removed from the DOM tree. If it is truthy a copy of the compiled - * eleent is added to the DOM tree. + * element is added to the DOM tree. * * @example <example animations="true"> @@ -16866,10 +17779,11 @@ padding:10px; } + /* + The transition styles can also be placed on the CSS base class above + */ .animate-if.ng-enter, .animate-if.ng-leave { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; - -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; - -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; } @@ -16878,8 +17792,8 @@ opacity:0; } - .animate-if.ng-enter.ng-enter-active, - .animate-if.ng-leave { + .animate-if.ng-leave, + .animate-if.ng-enter.ng-enter-active { opacity:1; } </file> @@ -16891,29 +17805,39 @@ priority: 600, terminal: true, restrict: 'A', + $$tlb: true, compile: function (element, attr, transclude) { return function ($scope, $element, $attr) { - var childElement, childScope; + var block, childScope; $scope.$watch($attr.ngIf, function ngIfWatchAction(value) { - if (childElement) { - $animate.leave(childElement); - childElement = undefined; - } - if (childScope) { - childScope.$destroy(); - childScope = undefined; - } + if (toBoolean(value)) { + childScope = $scope.$new(); transclude(childScope, function (clone) { - childElement = clone; + block = { + startNode: clone[0], + endNode: clone[clone.length++] = document.createComment(' end ngIf: ' + $attr.ngIf + ' ') + }; $animate.enter(clone, $element.parent(), $element); }); + + } else { + + if (childScope) { + childScope.$destroy(); + childScope = null; + } + + if (block) { + $animate.leave(getBlockElements(block)); + block = null; + } } }); - } + }; } - } + }; }]; /** @@ -16925,10 +17849,10 @@ * Fetches, compiles and includes an external HTML fragment. * * By default, the template URL is restricted to the same domain and protocol as the - * application document. This is done by calling {@link ng.$sce#getTrustedResourceUrl + * application document. This is done by calling {@link ng.$sce#methods_getTrustedResourceUrl * $sce.getTrustedResourceUrl} on it. To load templates from other domains or protocols - * you may either {@link ng.$sceDelegateProvider#resourceUrlWhitelist whitelist them} or - * {@link ng.$sce#trustAsResourceUrl wrap them} as trusted values. Refer to Angular's {@link + * you may either {@link ng.$sceDelegateProvider#methods_resourceUrlWhitelist whitelist them} or + * {@link ng.$sce#methods_trustAsResourceUrl wrap them} as trusted values. Refer to Angular's {@link * ng.$sce Strict Contextual Escaping}. * * In addition, the browser's @@ -16967,8 +17891,8 @@ </select> url of the template: <tt>{{template.url}}</tt> <hr/> - <div class="example-animate-container"> - <div class="include-example" ng-include="template.url"></div> + <div class="slide-animate-container"> + <div class="slide-animate" ng-include="template.url"></div> </div> </div> </file> @@ -16987,7 +17911,7 @@ Content of template2.html </file> <file name="animations.css"> - .example-animate-container { + .slide-animate-container { position:relative; background:white; border:1px solid black; @@ -16995,14 +17919,12 @@ overflow:hidden; } - .example-animate-container > div { + .slide-animate { padding:10px; } - .include-example.ng-enter, .include-example.ng-leave { + .slide-animate.ng-enter, .slide-animate.ng-leave { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; - -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; - -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; position:absolute; @@ -17014,17 +17936,17 @@ padding:10px; } - .include-example.ng-enter { + .slide-animate.ng-enter { top:-50px; } - .include-example.ng-enter.ng-enter-active { + .slide-animate.ng-enter.ng-enter-active { top:0; } - .include-example.ng-leave { + .slide-animate.ng-leave { top:0; } - .include-example.ng-leave.ng-leave-active { + .slide-animate.ng-leave.ng-leave-active { top:50px; } </file> @@ -17094,6 +18016,11 @@ }; scope.$watch($sce.parseAsResourceUrl(srcExp), function ngIncludeWatchAction(src) { + var afterAnimation = function() { + if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) { + $anchorScroll(); + } + }; var thisChangeId = ++changeCounter; if (src) { @@ -17108,13 +18035,8 @@ currentElement = clone; currentElement.html(response); - $animate.enter(currentElement, null, $element); + $animate.enter(currentElement, null, $element, afterAnimation); $compile(currentElement.contents())(currentScope); - - if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) { - $anchorScroll(); - } - currentScope.$emit('$includeContentLoaded'); scope.$eval(onloadExp); }); @@ -17143,7 +18065,7 @@ * <div class="alert alert-error"> * The only appropriate use of `ngInit` for aliasing special properties of * {@link api/ng.directive:ngRepeat `ngRepeat`}, as seen in the demo below. Besides this case, you - * should use {@link guide/dev_guide.mvc.understanding_controller controllers} rather than `ngInit` + * should use {@link guide/controller controllers} rather than `ngInit` * to initialize values on a scope. * </div> * @@ -17183,7 +18105,7 @@ pre: function(scope, element, attrs) { scope.$eval(attrs.ngInit); } - } + }; } }); @@ -17197,7 +18119,7 @@ * The `ngNonBindable` directive tells Angular not to compile or bind the contents of the current * DOM element. This is useful if the element contains what appears to be Angular directives and * bindings but which should be ignored by Angular. This could be the case if you have a site that - * displays snippets of code. for instance. + * displays snippets of code, for instance. * * @element ANY * @@ -17574,49 +18496,35 @@ border:1px solid black; list-style:none; margin:0; - padding:0; + padding:0 10px; } - .example-animate-container > li { - padding:10px; + .animate-repeat { + line-height:40px; list-style:none; + box-sizing:border-box; } + .animate-repeat.ng-move, .animate-repeat.ng-enter, - .animate-repeat.ng-leave, - .animate-repeat.ng-move { + .animate-repeat.ng-leave { -webkit-transition:all linear 0.5s; - -moz-transition:all linear 0.5s; - -o-transition:all linear 0.5s; transition:all linear 0.5s; } + .animate-repeat.ng-leave.ng-leave-active, + .animate-repeat.ng-move, .animate-repeat.ng-enter { - line-height:0; opacity:0; - padding-top:0; - padding-bottom:0; + max-height:0; } + + .animate-repeat.ng-leave, + .animate-repeat.ng-move.ng-move-active, .animate-repeat.ng-enter.ng-enter-active { - line-height:20px; opacity:1; - padding:10px; + max-height:40px; } - - .animate-repeat.ng-leave { - opacity:1; - line-height:20px; - padding:10px; - } - .animate-repeat.ng-leave.ng-leave-active { - opacity:0; - line-height:0; - padding-top:0; - padding-bottom:0; - } - - .animate-repeat.ng-move { } - .animate-repeat.ng-move.ng-move-active { } </file> <file name="scenario.js"> it('should render initial data set', function() { @@ -17648,6 +18556,7 @@ transclude: 'element', priority: 1000, terminal: true, + $$tlb: true, compile: function(element, attr, linker) { return function($scope, $element, $attr){ var expression = $attr.ngRepeat; @@ -17677,10 +18586,10 @@ } else { trackByIdArrayFn = function(key, value) { return hashKey(value); - } + }; trackByIdObjFn = function(key) { return key; - } + }; } match = lhs.match(/^(?:([\$\w]+)|$([\$\w]+)\s*,\s*([\$\w]+)$)$/); @@ -17742,7 +18651,7 @@ trackById = trackByIdFn(key, value, index); assertNotHasOwnProperty(trackById, '`track by` id'); if(lastBlockMap.hasOwnProperty(trackById)) { - block = lastBlockMap[trackById] + block = lastBlockMap[trackById]; delete lastBlockMap[trackById]; nextBlockMap[trackById] = block; nextBlockOrder[index] = block; @@ -17790,9 +18699,7 @@ nextNode = nextNode.nextSibling; } while(nextNode && nextNode[NG_REMOVED]); - if (block.startNode == nextNode) { - // do nothing - } else { + if (block.startNode != nextNode) { // existing item which got moved $animate.move(getBlockElements(block), null, jqLite(previousNode)); } @@ -17808,7 +18715,9 @@ childScope.$first = (index === 0); childScope.$last = (index === (arrayLength - 1)); childScope.$middle = !(childScope.$first || childScope.$last); - childScope.$odd = !(childScope.$even = index%2==0); + // jshint bitwise: false + childScope.$odd = !(childScope.$even = (index&1) === 0); + // jshint bitwise: true if (!block.startNode) { linker(childScope, function(clone) { @@ -17827,23 +18736,6 @@ }; } }; - - function getBlockElements(block) { - if (block.startNode === block.endNode) { - return jqLite(block.startNode); - } - - var element = block.startNode; - var elements = [element]; - - do { - element = element.nextSibling; - if (!element) break; - elements.push(element); - } while (element !== block.endNode); - - return jqLite(elements); - } }]; /** @@ -17855,6 +18747,7 @@ * provided to the ngShow attribute. The element is shown or hidden by removing or adding * the `ng-hide` CSS class onto the element. The `.ng-hide` CSS class is predefined * in AngularJS and sets the display style to none (using an !important flag). + * For CSP mode please add `angular-csp.css` to your html file (see {@link ng.directive:ngCsp ngCsp}). * * <pre> *  @@ -17945,31 +18838,27 @@ </div> </file> <file name="animations.css"> - .animate-show.ng-hide-add, - .animate-show.ng-hide-remove { + .animate-show { -webkit-transition:all linear 0.5s; - -moz-transition:all linear 0.5s; - -o-transition:all linear 0.5s; transition:all linear 0.5s; + line-height:20px; + opacity:1; + padding:10px; + border:1px solid black; + background:white; + } + + .animate-show.ng-hide-add, + .animate-show.ng-hide-remove { display:block!important; } - .animate-show.ng-hide-add.ng-hide-add-active, - .animate-show.ng-hide-remove { + .animate-show.ng-hide { line-height:0; opacity:0; padding:0 10px; } - .animate-show.ng-hide-add, - .animate-show.ng-hide-remove.ng-hide-remove-active { - line-height:20px; - opacity:1; - padding:10px; - border:1px solid black; - background:white; - } - .check-element { padding:10px; border:1px solid black; @@ -18007,6 +18896,7 @@ * provided to the ngHide attribute. The element is shown or hidden by removing or adding * the `ng-hide` CSS class onto the element. The `.ng-hide` CSS class is predefined * in AngularJS and sets the display style to none (using an !important flag). + * For CSP mode please add `angular-csp.css` to your html file (see {@link ng.directive:ngCsp ngCsp}). * * <pre> *  @@ -18097,31 +18987,27 @@ </div> </file> <file name="animations.css"> - .animate-hide.ng-hide-add, - .animate-hide.ng-hide-remove { + .animate-hide { -webkit-transition:all linear 0.5s; - -moz-transition:all linear 0.5s; - -o-transition:all linear 0.5s; transition:all linear 0.5s; + line-height:20px; + opacity:1; + padding:10px; + border:1px solid black; + background:white; + } + + .animate-hide.ng-hide-add, + .animate-hide.ng-hide-remove { display:block!important; } - .animate-hide.ng-hide-add.ng-hide-add-active, - .animate-hide.ng-hide-remove { + .animate-hide.ng-hide { line-height:0; opacity:0; padding:0 10px; } - .animate-hide.ng-hide-add, - .animate-hide.ng-hide-remove.ng-hide-remove-active { - line-height:20px; - opacity:1; - padding:10px; - border:1px solid black; - background:white; - } - .check-element { padding:10px; border:1px solid black; @@ -18250,9 +19136,9 @@ <hr/> <div class="animate-switch-container" ng-switch on="selection"> - <div ng-switch-when="settings">Settings Div</div> - <div ng-switch-when="home">Home Span</div> - <div ng-switch-default>default</div> + <div class="animate-switch" ng-switch-when="settings">Settings Div</div> + <div class="animate-switch" ng-switch-when="home">Home Span</div> + <div class="animate-switch" ng-switch-default>default</div> </div> </div> </file> @@ -18271,15 +19157,12 @@ overflow:hidden; } - .animate-switch-container > div { + .animate-switch { padding:10px; } - .animate-switch-container > .ng-enter, - .animate-switch-container > .ng-leave { + .animate-switch.ng-animate { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; - -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; - -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; position:absolute; @@ -18289,19 +19172,14 @@ bottom:0; } - .animate-switch-container > .ng-enter { + .animate-switch.ng-leave.ng-leave-active, + .animate-switch.ng-enter { top:-50px; } - .animate-switch-container > .ng-enter.ng-enter-active { + .animate-switch.ng-leave, + .animate-switch.ng-enter.ng-enter-active { top:0; } - - .animate-switch-container > .ng-leave { - top:0; - } - .animate-switch-container > .ng-leave.ng-leave-active { - top:50px; - } </file> <file name="scenario.js"> it('should start in settings', function() { @@ -18357,7 +19235,7 @@ } }); } - } + }; }]; var ngSwitchWhenDirective = ngDirective({ @@ -18600,7 +19478,7 @@ Color (null allowed): <span class="nullable"> <select ng-model="color" ng-options="c.name for c in colors"> - <option value="">-- chose color --</option> + <option value="">-- choose color --</option> </select> </span><br/> @@ -18630,10 +19508,12 @@ */ var ngOptionsDirective = valueFn({ terminal: true }); +// jshint maxlen: false var selectDirective = ['$compile', '$parse', function($compile, $parse) { //0000111110000000000022220000000000000000000000333300000000000000444444444444444000000000555555555555555000000066666666666666600000000000000007777000000000000000000088888 var NG_OPTIONS_REGEXP = /^\s*(.*?)(?:\s+as\s+(.*?))?(?:\s+group\s+by\s+(.*))?\s+for\s+(?:([\$\w][\$\w]*)|(?:$\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*$))\s+in\s+(.*?)(?:\s+track\s+by\s+(.*?))?$/, nullModelCtrl = {$setViewValue: noop}; +// jshint maxlen: 100 return { restrict: 'E', @@ -18714,7 +19594,7 @@ // find "null" option for(var i = 0, children = element.children(), ii = children.length; i < ii; i++) { - if (children[i].value == '') { + if (children[i].value === '') { emptyOption = nullOption = children.eq(i); break; } @@ -18737,16 +19617,16 @@ }); } - if (optionsExp) Options(scope, element, ngModelCtrl); - else if (multiple) Multiple(scope, element, ngModelCtrl); - else Single(scope, element, ngModelCtrl, selectCtrl); + if (optionsExp) setupAsOptions(scope, element, ngModelCtrl); + else if (multiple) setupAsMultiple(scope, element, ngModelCtrl); + else setupAsSingle(scope, element, ngModelCtrl, selectCtrl); //////////////////////////// - function Single(scope, selectElement, ngModelCtrl, selectCtrl) { + function setupAsSingle(scope, selectElement, ngModelCtrl, selectCtrl) { ngModelCtrl.$render = function() { var viewValue = ngModelCtrl.$viewValue; @@ -18771,7 +19651,7 @@ }); } - function Multiple(scope, selectElement, ctrl) { + function setupAsMultiple(scope, selectElement, ctrl) { var lastView; ctrl.$render = function() { var items = new HashMap(ctrl.$viewValue); @@ -18802,12 +19682,14 @@ }); } - function Options(scope, selectElement, ctrl) { + function setupAsOptions(scope, selectElement, ctrl) { var match; if (! (match = optionsExp.match(NG_OPTIONS_REGEXP))) { throw ngOptionsMinErr('iexp', - "Expected expression in form of '_select_ (as _label_)? for (_key_,)?_value_ in _collection_' but got '{0}'. Element: {1}", + "Expected expression in form of " + + "'_select_ (as _label_)? for (_key_,)?_value_ in _collection_'" + + " but got '{0}'. Element: {1}", optionsExp, startingTag(selectElement)); } @@ -18819,9 +19701,10 @@ valuesFn = $parse(match[7]), track = match[8], trackFn = track ? $parse(match[8]) : null, - // This is an array of array of existing option groups in DOM. We try to reuse these if possible - // optionGroupsCache[0] is the options with no option group - // optionGroupsCache[?][0] is the parent: either the SELECT or OPTGROUP element + // This is an array of array of existing option groups in DOM. + // We try to reuse these if possible + // - optionGroupsCache[0] is the options with no option group + // - optionGroupsCache[?][0] is the parent: either the SELECT or OPTGROUP element optionGroupsCache = [[{element: selectElement, label:''}]]; if (nullOption) { @@ -18875,7 +19758,7 @@ key = selectElement.val(); if (key == '?') { value = undefined; - } else if (key == ''){ + } else if (key === ''){ value = null; } else { if (trackFn) { @@ -18903,7 +19786,8 @@ scope.$watch(render); function render() { - var optionGroups = {'':[]}, // Temporary location for the option groups before we render them + // Temporary location for the option groups before we render them + var optionGroups = {'':[]}, optionGroupNames = [''], optionGroupName, optionGroup, @@ -18952,7 +19836,9 @@ optionGroupNames.push(optionGroupName); } if (multiple) { - selected = selectedSet.remove(trackFn ? trackFn(scope, locals) : valueFn(scope, locals)) !== undefined; + selected = isDefined( + selectedSet.remove(trackFn ? trackFn(scope, locals) : valueFn(scope, locals)) + ); } else { if (trackFn) { var modelCast = {}; @@ -18964,9 +19850,12 @@ selectedSet = selectedSet || selected; // see if at least one item is selected } label = displayFn(scope, locals); // what will be seen by the user - label = label === undefined ? '' : label; // doing displayFn(scope, locals) || '' overwrites zero values + + // doing displayFn(scope, locals) || '' overwrites zero values + label = isDefined(label) ? label : ''; optionGroup.push({ - id: trackFn ? trackFn(scope, locals) : (keyName ? keys[index] : index), // either the index into array or key from object + // either the index into array or key from object + id: trackFn ? trackFn(scope, locals) : (keyName ? keys[index] : index), label: label, selected: selected // determine if we should be selected }); @@ -19138,4 +20027,5 @@ }); })(window, document); -angular.element(document).find('head').prepend('<style type="text/css">@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\\:form{display:block;}</style>'); \ No newline at end of file + +!angular.$$csp() && angular.element(document).find('head').prepend('<style type="text/css">@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\\:form{display:block;}.ng-animate-start{clip:rect(0,auto,auto,0);-ms-zoom:1.0001;}.ng-animate-active{clip:rect(-1px,auto,auto,0);-ms-zoom:1;}</style>'); \ No newline at end of file Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_af-na.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_af-na.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_af-na.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_af-za.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_af-za.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_af-za.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_af.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_af.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_af.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_am-et.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_am-et.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_am-et.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_am.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_am.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_am.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-001.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-001.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-001.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-ae.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-ae.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-ae.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-bh.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-bh.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-bh.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-dz.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-dz.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-dz.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-eg.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-eg.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-eg.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-iq.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-iq.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-iq.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-jo.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-jo.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-jo.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-kw.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-kw.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-kw.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-lb.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-lb.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-lb.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-ly.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-ly.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-ly.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-ma.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-ma.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-ma.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-om.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-om.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-om.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-qa.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-qa.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-qa.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-sa.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-sa.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-sa.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-sd.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-sd.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-sd.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-sy.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-sy.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-sy.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-tn.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-tn.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-tn.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-ye.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-ye.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar-ye.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ar.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bg-bg.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bg-bg.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bg-bg.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bg.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bg.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bg.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bn-bd.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bn-bd.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bn-bd.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bn-in.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bn-in.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bn-in.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bn.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bn.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_bn.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ca-ad.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ca-ad.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ca-ad.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ca-es.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ca-es.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ca-es.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ca.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ca.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ca.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_cs-cz.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_cs-cz.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_cs-cz.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_cs.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_cs.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_cs.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_da-dk.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_da-dk.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_da-dk.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_da.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_da.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_da.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-at.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-at.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-at.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-be.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-be.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-be.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-ch.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-ch.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-ch.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-de.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-de.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-de.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-li.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-li.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-li.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-lu.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-lu.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de-lu.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_de.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_el-cy.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_el-cy.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_el-cy.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_el-gr.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_el-gr.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_el-gr.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_el.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_el.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_el.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-as.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-as.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-as.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-au.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-au.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-au.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-bb.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-bb.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-bb.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-be.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-be.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-be.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-bm.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-bm.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-bm.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-bw.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-bw.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-bw.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-bz.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-bz.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-bz.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-ca.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-ca.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-ca.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-dsrt-us.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-dsrt-us.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-dsrt-us.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-dsrt.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-dsrt.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-dsrt.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-fm.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-fm.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-fm.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-gb.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-gb.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-gb.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-gu.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-gu.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-gu.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-gy.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-gy.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-gy.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-hk.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-hk.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-hk.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-ie.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-ie.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-ie.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-in.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-in.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-in.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-iso.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-iso.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-iso.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-jm.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-jm.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-jm.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-mh.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-mh.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-mh.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-mp.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-mp.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-mp.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-mt.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-mt.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-mt.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-mu.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-mu.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-mu.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-na.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-na.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-na.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-nz.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-nz.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-nz.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-ph.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-ph.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-ph.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-pk.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-pk.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-pk.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-pr.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-pr.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-pr.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-pw.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-pw.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-pw.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-sg.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-sg.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-sg.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-tc.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-tc.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-tc.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-tt.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-tt.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-tt.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-um.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-um.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-um.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-us.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-us.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-us.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-vg.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-vg.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-vg.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-vi.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-vi.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-vi.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-za.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-za.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-za.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-zw.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-zw.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en-zw.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_en.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-419.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-419.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-419.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ar.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ar.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ar.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-bo.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-bo.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-bo.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-cl.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-cl.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-cl.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-co.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-co.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-co.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-cr.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-cr.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-cr.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-do.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-do.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-do.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ea.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ea.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ea.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ec.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ec.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ec.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-es.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-es.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-es.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-gq.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-gq.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-gq.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-gt.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-gt.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-gt.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-hn.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-hn.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-hn.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ic.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ic.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ic.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-mx.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-mx.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-mx.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ni.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ni.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ni.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-pa.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-pa.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-pa.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-pe.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-pe.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-pe.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-pr.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-pr.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-pr.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-py.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-py.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-py.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-sv.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-sv.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-sv.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-us.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-us.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-us.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-uy.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-uy.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-uy.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ve.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ve.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es-ve.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_es.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_et-ee.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_et-ee.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_et-ee.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_et.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_et.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_et.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_eu-es.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_eu-es.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_eu-es.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_eu.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_eu.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_eu.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fa-af.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fa-af.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fa-af.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fa-ir.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fa-ir.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fa-ir.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fa.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fa.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fa.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fi-fi.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fi-fi.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fi-fi.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fi.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fi.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fi.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fil-ph.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fil-ph.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fil-ph.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fil.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fil.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fil.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-be.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-be.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-be.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-bf.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-bf.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-bf.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-bi.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-bi.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-bi.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-bj.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-bj.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-bj.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-bl.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-bl.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-bl.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ca.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ca.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ca.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-cd.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-cd.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-cd.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-cf.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-cf.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-cf.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-cg.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-cg.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-cg.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ch.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ch.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ch.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ci.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ci.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ci.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-cm.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-cm.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-cm.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-dj.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-dj.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-dj.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-fr.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-fr.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-fr.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ga.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ga.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ga.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-gf.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-gf.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-gf.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-gn.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-gn.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-gn.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-gp.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-gp.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-gp.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-gq.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-gq.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-gq.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-km.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-km.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-km.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-lu.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-lu.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-lu.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-mc.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-mc.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-mc.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-mf.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-mf.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-mf.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-mg.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-mg.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-mg.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ml.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ml.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ml.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-mq.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-mq.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-mq.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ne.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ne.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-ne.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-re.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-re.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-re.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-yt.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-yt.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr-yt.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_fr.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gl-es.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gl-es.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gl-es.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gl.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gl.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gl.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gsw-ch.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gsw-ch.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gsw-ch.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gsw.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gsw.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gsw.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gu-in.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gu-in.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gu-in.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gu.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gu.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_gu.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_he-il.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_he-il.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_he-il.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_he.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_he.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_he.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hi-in.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hi-in.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hi-in.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hi.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hi.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hi.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hr-hr.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hr-hr.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hr-hr.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hr.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hr.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hr.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hu-hu.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hu-hu.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hu-hu.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hu.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hu.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_hu.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_id-id.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_id-id.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_id-id.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_id.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_id.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_id.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_in.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_in.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_in.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_is-is.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_is-is.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_is-is.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_is.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_is.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_is.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_it-it.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_it-it.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_it-it.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_it-sm.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_it-sm.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_it-sm.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_it.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_it.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_it.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_iw.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_iw.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_iw.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ja-jp.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ja-jp.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ja-jp.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ja.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ja.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ja.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_kn-in.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_kn-in.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_kn-in.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_kn.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_kn.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_kn.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ko-kr.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ko-kr.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ko-kr.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ko.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ko.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ko.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ln-cd.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ln-cd.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ln-cd.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ln.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ln.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ln.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_lt-lt.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_lt-lt.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_lt-lt.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_lt.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_lt.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_lt.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_lv-lv.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_lv-lv.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_lv-lv.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_lv.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_lv.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_lv.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ml-in.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ml-in.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ml-in.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ml.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ml.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ml.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_mr-in.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_mr-in.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_mr-in.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_mr.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_mr.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_mr.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ms-my.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ms-my.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ms-my.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ms.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ms.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ms.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_mt-mt.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_mt-mt.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_mt-mt.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_mt.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_mt.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_mt.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_nl-cw.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_nl-cw.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_nl-cw.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_nl-nl.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_nl-nl.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_nl-nl.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_nl-sx.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_nl-sx.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_nl-sx.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_nl.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_nl.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_nl.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_no.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_no.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_no.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_or-in.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_or-in.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_or-in.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_or.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_or.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_or.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pl-pl.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pl-pl.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pl-pl.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pl.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pl.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pl.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pt-br.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pt-br.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pt-br.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pt-pt.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pt-pt.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pt-pt.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pt.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pt.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_pt.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ro-ro.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ro-ro.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ro-ro.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ro.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ro.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ro.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ru-ru.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ru-ru.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ru-ru.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ru.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ru.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ru.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sk-sk.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sk-sk.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sk-sk.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sk.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sk.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sk.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sl-si.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sl-si.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sl-si.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sl.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sl.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sl.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sq-al.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sq-al.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sq-al.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sq.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sq.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sq.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sr-cyrl-rs.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sr-cyrl-rs.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sr-cyrl-rs.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sr-latn-rs.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sr-latn-rs.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sr-latn-rs.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sr.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sr.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sr.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sv-se.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sv-se.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sv-se.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sv.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sv.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sv.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sw-tz.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sw-tz.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sw-tz.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sw.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sw.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_sw.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ta-in.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ta-in.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ta-in.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ta.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ta.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ta.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_te-in.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_te-in.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_te-in.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_te.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_te.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_te.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_th-th.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_th-th.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_th-th.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_th.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_th.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_th.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_tl.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_tl.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_tl.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_tr-tr.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_tr-tr.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_tr-tr.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_tr.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_tr.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_tr.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_uk-ua.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_uk-ua.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_uk-ua.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_uk.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_uk.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_uk.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ur-pk.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ur-pk.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ur-pk.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ur.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ur.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_ur.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_vi-vn.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_vi-vn.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_vi-vn.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_vi.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_vi.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_vi.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh-cn.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh-cn.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh-cn.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh-hans-cn.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh-hans-cn.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh-hans-cn.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh-hk.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh-hk.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh-hk.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh-tw.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh-tw.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh-tw.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zh.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zu-za.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zu-za.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zu-za.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zu.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zu.js 2013-11-10 10:51:35 UTC (rev 224) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/i18n/angular-locale_zu.js 2013-11-10 11:10:19 UTC (rev 225) @@ -1,4 +1,5 @@ /* %%Ignore-License */ +'use strict'; angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"}; $provide.value("$locale", {

1 0

r224 - trunk
by echatellier＠users.nuiton.org Nov. 10, 2013

Nov. 10, 2013

Author: echatellier Date: 2013-11-10 11:51:35 +0100 (Sun, 10 Nov 2013) New Revision: 224 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/224 Log: fixes #2906: Update to wro4j 1.7.2 Modified: trunk/pom.xml Modified: trunk/pom.xml =================================================================== --- trunk/pom.xml 2013-10-21 09:13:57 UTC (rev 223) +++ trunk/pom.xml 2013-11-10 10:51:35 UTC (rev 224) @@ -107,7 +107,7 @@ <properties> - <wroVersion>1.7.0</wroVersion> + <wroVersion>1.7.2</wroVersion> <slf4jVersion>1.7.5</slf4jVersion> <servletApiVersion>2.5</servletApiVersion>

1 0

r223 - tags
by echatellier＠users.nuiton.org Oct. 21, 2013

Oct. 21, 2013

Author: echatellier Date: 2013-10-21 11:13:57 +0200 (Mon, 21 Oct 2013) New Revision: 223 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/223 Log: Tag for release Added: tags/nuiton-js-jsplumb-1.5.3-1/

1 0

r222 - sandbox/nuiton-js-jsplumb
by echatellier＠users.nuiton.org Oct. 21, 2013

Oct. 21, 2013

Author: echatellier Date: 2013-10-21 11:13:03 +0200 (Mon, 21 Oct 2013) New Revision: 222 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/222 Log: Prepare release Modified: sandbox/nuiton-js-jsplumb/pom.xml Modified: sandbox/nuiton-js-jsplumb/pom.xml =================================================================== --- sandbox/nuiton-js-jsplumb/pom.xml 2013-10-21 09:09:59 UTC (rev 221) +++ sandbox/nuiton-js-jsplumb/pom.xml 2013-10-21 09:13:03 UTC (rev 222) @@ -14,7 +14,7 @@ </parent> <artifactId>nuiton-js-jsplumb</artifactId> - <version>1.5.3-1-SNAPSHOT</version> + <version>1.5.3-1</version> <name>Nuiton JS :: jsPlumb</name> <description>jsPlumb jar packaging</description>

1 0

r221 - tags
by echatellier＠users.nuiton.org Oct. 21, 2013

Oct. 21, 2013

Author: echatellier Date: 2013-10-21 11:09:59 +0200 (Mon, 21 Oct 2013) New Revision: 221 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/221 Log: Tag for release Added: tags/nuiton-js-angular-1.2.0-rc3-1/

1 0

r220 - sandbox/nuiton-js-angular
by echatellier＠users.nuiton.org Oct. 21, 2013

Oct. 21, 2013

Author: echatellier Date: 2013-10-21 11:09:31 +0200 (Mon, 21 Oct 2013) New Revision: 220 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/220 Log: Prepare release Modified: sandbox/nuiton-js-angular/pom.xml Modified: sandbox/nuiton-js-angular/pom.xml =================================================================== --- sandbox/nuiton-js-angular/pom.xml 2013-10-15 08:30:43 UTC (rev 219) +++ sandbox/nuiton-js-angular/pom.xml 2013-10-21 09:09:31 UTC (rev 220) @@ -14,7 +14,7 @@ </parent> <artifactId>nuiton-js-angular</artifactId> - <version>1.2.0-rc3-1-SNAPSHOT</version> + <version>1.2.0-rc3-1</version> <name>Nuiton JS :: Angular</name> <description>Angular jar packaging</description>

1 0

r219 - in sandbox/nuiton-js-jsplumb: . src src/main/resources/META-INF/nuiton-js src/main/resources/nuiton-js-jsplumb
by echatellier＠users.nuiton.org Oct. 15, 2013

Oct. 15, 2013

Author: echatellier Date: 2013-10-15 10:30:43 +0200 (Tue, 15 Oct 2013) New Revision: 219 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/219 Log: jsPlumb 1.5.3 (version bump) Added: sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/jquery.jsPlumb-1.5.3.js sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/mootools.jsPlumb-1.5.3.js sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/yui.jsPlumb-1.5.3.js sandbox/nuiton-js-jsplumb/src/test/ Removed: sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/jquery.jsPlumb-1.5.2.js sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/mootools.jsPlumb-1.5.2.js sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/yui.jsPlumb-1.5.2.js Modified: sandbox/nuiton-js-jsplumb/pom.xml sandbox/nuiton-js-jsplumb/src/main/resources/META-INF/nuiton-js/wro-jsplumb.xml Modified: sandbox/nuiton-js-jsplumb/pom.xml =================================================================== --- sandbox/nuiton-js-jsplumb/pom.xml 2013-10-15 08:29:48 UTC (rev 218) +++ sandbox/nuiton-js-jsplumb/pom.xml 2013-10-15 08:30:43 UTC (rev 219) @@ -14,7 +14,7 @@ </parent> <artifactId>nuiton-js-jsplumb</artifactId> - <version>1.5.2-2-SNAPSHOT</version> + <version>1.5.3-1-SNAPSHOT</version> <name>Nuiton JS :: jsPlumb</name> <description>jsPlumb jar packaging</description> @@ -29,9 +29,9 @@ </licenses> <scm> - <connection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-jsplumb-1.5.2-2</connection> - <developerConnection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-jsplumb-1.5.2-2</developerConnection> - <url>http://www.nuiton.org/repositories/browse/nuiton-js/tags/nuiton-js-jsplumb-…</url> + <connection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-jsplumb-1.5.3-1</connection> + <developerConnection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-jsplumb-1.5.3-1</developerConnection> + <url>http://www.nuiton.org/repositories/browse/nuiton-js/tags/nuiton-js-jsplumb-…</url> </scm> </project> Modified: sandbox/nuiton-js-jsplumb/src/main/resources/META-INF/nuiton-js/wro-jsplumb.xml =================================================================== --- sandbox/nuiton-js-jsplumb/src/main/resources/META-INF/nuiton-js/wro-jsplumb.xml 2013-10-15 08:29:48 UTC (rev 218) +++ sandbox/nuiton-js-jsplumb/src/main/resources/META-INF/nuiton-js/wro-jsplumb.xml 2013-10-15 08:30:43 UTC (rev 219) @@ -23,12 +23,12 @@ --> <groups xmlns="http://www.isdc.ro/wro"> <group name='jsplumb-jquery'> - <js>classpath:nuiton-js-jsplumb/jquery.jsPlumb-1.5.2.js</js> + <js>classpath:nuiton-js-jsplumb/jquery.jsPlumb-1.5.3.js</js> </group> <group name='jsplumb-mootools'> - <js>classpath:nuiton-js-jsplumb/mootools.jsPlumb-1.5.2.js</js> + <js>classpath:nuiton-js-jsplumb/mootools.jsPlumb-1.5.3.js</js> </group> <group name='jsplumb-yui'> - <js>classpath:nuiton-js-jsplumb/yui.jsPlumb-1.5.2.js</js> + <js>classpath:nuiton-js-jsplumb/yui.jsPlumb-1.5.3.js</js> </group> </groups> Deleted: sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/jquery.jsPlumb-1.5.2.js =================================================================== --- sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/jquery.jsPlumb-1.5.2.js 2013-10-15 08:29:48 UTC (rev 218) +++ sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/jquery.jsPlumb-1.5.2.js 2013-10-15 08:30:43 UTC (rev 219) @@ -1,10973 +0,0 @@ -/** %%Ignore-License -* jsBezier-0.6 -* -* Copyright (c) 2010 - 2013 Simon Porritt (simon.porritt(a)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)); - }; - - var _isPoint = function(curve) { - return curve[0].x == curve[1].x && curve[0].y == curve[1].y; - }; - - /** - * 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) { - - if (_isPoint(curve)) { - return { - point:curve[0], - location:location - }; - } - - 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) { - if (_isPoint(curve)) return 0; - - 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 - }; -})(); - -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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 _isa = function(a) { return Object.prototype.toString.call(a) === "[object Array]"; }, - _isnum = function(n) { return Object.prototype.toString.call(n) === "[object Number]"; }, - _iss = function(s) { return typeof s === "string"; }, - _isb = function(s) { return typeof s === "boolean"; }, - _isnull = function(s) { return s == null; }, - _iso = function(o) { return o == null ? false : Object.prototype.toString.call(o) === "[object Object]"; }, - _isd = function(o) { return Object.prototype.toString.call(o) === "[object Date]"; }, - _isf = function(o) { return Object.prototype.toString.call(o) === "[object Function]"; }, - _ise = function(o) { - for (var i in o) { if (o.hasOwnProperty(i)) return false; } - return true; - }, - pointHelper = function(p1, p2, fn) { - p1 = _isa(p1) ? p1 : [p1.x, p1.y]; - p2 = _isa(p2) ? p2 : [p2.x, p2.y]; - return fn(p1, p2); - }; - - jsPlumbUtil = { - isArray : _isa, - isString : _iss, - isBoolean: _isb, - isNull : _isnull, - isObject : _iso, - isDate : _isd, - isFunction: _isf, - isEmpty:_ise, - isNumber:_isnum, - clone : function(a) { - if (_iss(a)) return "" + a; - else if (_isb(a)) return !!a; - else if (_isd(a)) return new Date(a.getTime()); - else if (_isf(a)) return a; - else if (_isa(a)) { - var b = []; - for (var i = 0; i < a.length; i++) - b.push(this.clone(a[i])); - return b; - } - else if (_iso(a)) { - var c = {}; - for (var j in a) - c[j] = this.clone(a[j]); - return c; - } - else return a; - }, - merge : function(a, b) { - var c = this.clone(a); - for (var i in b) { - if (c[i] == null || _iss(b[i]) || _isb(b[i])) - c[i] = b[i]; - else { - if (_isa(b[i])/* && this.isArray(c[i])*/) { - var ar = []; - // if c's object is also an array we can keep its values. - if (_isa(c[i])) ar.push.apply(ar, c[i]); - ar.push.apply(ar, b[i]); - c[i] = ar; - } - else if(_iso(b[i])) { - // overwite c's value with an object if it is not already one. - if (!_iso(c[i])) - c[i] = {}; - for (var j in b[i]) - c[i][j] = b[i][j]; - } - } - } - return c; - }, - copyValues:function(names, from, to) { - for (var i = 0; i < names.length; i++) - to[names[i]] = from[names[i]]; - }, - // - // 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 != null) { - fromString = fromString.replace(matches[i], val); - } - } - } - return fromString; - }, - // process one entry. - _one = function(d) { - if (d != null) { - if (_iss(d)) { - return getValue(d); - } - else if (_isa(d)) { - var r = []; - for (var i = 0; i < d.length; i++) - r.push(_one(d[i])); - return r; - } - else if (_iso(d)) { - var s = {}; - for (var j in d) { - s[j] = _one(d[j]); - } - return s; - } - 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 }; - }, - 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, insertAtStart) { - var l = map[key]; - if (l == null) { - l = []; - map[key] = l; - } - l[insertAtStart ? "unshift" : "push"](value); - return l; - }, - // - // extends the given obj (which can be an array) with the given constructor function, prototype functions, and - // class members, any of which may be null. - // - extend : function(child, parent, _protoFn, _protoAtts) { - _protoFn = _protoFn || {}; - _protoAtts = _protoAtts || {}; - parent = _isa(parent) ? parent : [ parent ]; - - for (var i = 0; i < parent.length; i++) { - for (var j in parent[i].prototype) { - if(parent[i].prototype.hasOwnProperty(j)) { - child.prototype[j] = parent[i].prototype[j]; - } - } - } - - var _makeFn = function(name) { - return function() { - for (var i = 0; i < parent.length; i++) { - if (parent[i].prototype[name]) - parent[i].prototype[name].apply(this, arguments); - } - return _protoFn[name].apply(this, arguments); - }; - }; - - for (var k in _protoFn) { - child.prototype[k] = _makeFn(k); - } - - return child; - }, - uuid : function() { - return ('xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { - var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); - return v.toString(16); - })); - }, - 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]); - }, - /* - * Function: sizeElement - * Helper to size and position an element. You would typically use - * this when writing your own Connector or Endpoint implementation. - * - * Parameters: - * x - [int] x position for the element origin - * y - [int] y position for the element origin - * w - [int] width of the element - * h - [int] height of the element - * - */ - sizeElement : function(el, x, y, w, h) { - if (el) { - el.style.height = h + "px"; - el.height = h; - el.style.width = w + "px"; - el.width = w; - el.style.left = x + "px"; - el.style.top = y + "px"; - } - }, - /** - * @name jsPlumbUtil.wrap - * @desc Wraps one function with another, creating a placeholder for the - * wrapped function if it was null. this is used to wrap the various - * drag/drop event functions - to allow jsPlumb to be notified of - * important lifecycle events without imposing itself on the user's - * drag/drop functionality. - * @param {Function} wrappedFunction original function to wrap; may be null. - * @param {Function} newFunction function to wrap the original with. - * @param {Object} [returnOnThisValue] Optional. Indicates that the wrappedFunction should - * not be executed if the newFunction returns a value matching 'returnOnThisValue'. - * note that this is a simple comparison and only works for primitives right now. - */ - wrap : function(wrappedFunction, newFunction, returnOnThisValue) { - wrappedFunction = wrappedFunction || function() { }; - newFunction = newFunction || function() { }; - return function() { - var r = null; - try { - r = newFunction.apply(this, arguments); - } catch (e) { - jsPlumbUtil.log("jsPlumb function failed : " + e); - } - if (returnOnThisValue == null || (r !== returnOnThisValue)) { - try { - r = wrappedFunction.apply(this, arguments); - } catch (e) { - jsPlumbUtil.log("wrapped function failed : " + e); - } - } - return r; - }; - } - }; - - - jsPlumbUtil.EventGenerator = function() { - var _listeners = {}, 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" ]; - - this.bind = function(event, listener, insertAtStart) { - jsPlumbUtil.addToList(_listeners, event, listener, true); - return this; - }; - - this.fire = function(event, value, originalEvent) { - if (!eventsSuspended && _listeners[event]) { - // instead of looping through the array we get a counter and a length, because it is possible - // that an event fired from here could cause the object to get cleaned up, which would throw - // away the listeners. so after each cycle through the loop we check to ensure we haven't - // been nuked. - var l = _listeners[event].length, i = 0, _gone = false, ret = null; - if (!this.shouldFireEvent || this.shouldFireEvent(event, value, originalEvent)) { - while (!_gone && i < l && ret !== false) { - - // 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 { - ret = _listeners[event][i](value, originalEvent); - } catch (e) { - jsPlumbUtil.log("jsPlumb: fire failed for event " + event + " : " + e); - } - } - i++; - if (_listeners == null || _listeners[event] == null) _gone = true; - } - } - } - return this; - }; - - this.unbind = function(event) { - if (event) - delete _listeners[event]; - else { - _listeners = {}; - } - return this; - }; - - this.getListener = function(forEvent) { - return _listeners[forEvent]; - }; - this.setSuspendEvents = function(val) { - eventsSuspended = val; - }; - this.isSuspendEvents = function() { - return eventsSuspended; - }; - this.cleanupListeners = function() { - for (var i in _listeners) { - _listeners[i].splice(0); - delete _listeners[i]; - } - }; - }; - - - jsPlumbUtil.EventGenerator.prototype = { - cleanup:function() { - this.cleanupListeners(); - } - }; - - - // thanks MDC - // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Ob… - if (!Function.prototype.bind) { - Function.prototype.bind = function (oThis) { - if (typeof this !== "function") { - // closest thing possible to the ECMAScript 5 internal IsCallable function - throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); - } - - var aArgs = Array.prototype.slice.call(arguments, 1), - fToBind = this, - fNOP = function () {}, - fBound = function () { - return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, - aArgs.concat(Array.prototype.slice.call(arguments))); - }; - - fNOP.prototype = this.prototype; - fBound.prototype = new fNOP(); - - return fBound; - }; - } - -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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… - 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; - if (b != null && b.style != null) { - b.style.behavior = "url(#default#VML)"; - vmlAvailable.vml = b ? typeof b.adj == "object": true; - } - else - vmlAvailable.vml = false; - 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), - id = _currentInstance.getId(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(p.childNodes[i], 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(el); - }; - - // refresh the offsets for child elements of this element. - this.updateOffsets = function(elId) { - var jpcl = jsPlumb.CurrentLibrary, - el = jpcl.getElementObject(elId), - domEl = jpcl.getDOMElement(el), - id = _currentInstance.getId(domEl), - 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.getElementObject(el), - cLoc = jsPlumb.CurrentLibrary.getOffset(c), - p = el.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) { - _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, - - getAttribute:function(el, attName) { - return el.getAttribute(attName); - }, - - setAttribute:function(el, a, v) { - el.setAttribute(a, v); - }, - - 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; - } - }; - - - /* - - addClass: - - add: function( elem, classNames ) { - jQuery.each((classNames || "").split(/\s+/), function(i, className){ - if ( elem.nodeType == 1 && !jQuery.className.has( elem.className, className ) ) - elem.className += (elem.className ? " " : "") + className; - }); - }, - */ - - /* - - removeClass: - - elem.className = classNames !== undefined ? - jQuery.grep(elem.className.split(/\s+/), function(className){ - return !jQuery.className.has( classNames, className ); - }).join(" ") : - -*/ - -})(); -/** - * @module jsPlumb - * @description Provides a way to visually connect elements on an HTML page, using either SVG, Canvas - * elements, or VML. - * - * - [Demo Site](http://jsplumb.org) - * - [GitHub](http://github.com/sporritt/jsplumb) - * - * Dual licensed under the MIT and GPL2 licenses. - * - * Copyright (c) 2010 - 2013 Simon Porritt (simon.porritt(a)gmail.com) - */ -;(function() { - - var _ju = jsPlumbUtil, - _addClass = function(el, clazz) { jsPlumb.CurrentLibrary.addClass(_gel(el), clazz); }, - _hasClass = function(el, clazz) { return jsPlumb.CurrentLibrary.hasClass(_gel(el), clazz); }, - _removeClass = function(el, clazz) { jsPlumb.CurrentLibrary.removeClass(_gel(el), clazz); }, - _gel = function(el) { return jsPlumb.CurrentLibrary.getElementObject(el); }, - _dom = function(el) { return jsPlumb.CurrentLibrary.getDOMElement(el); }, - _getOffset = function(el, _instance) { - var o = jsPlumb.CurrentLibrary.getOffset(_gel(el)); - if (_instance != null) { - var z = _instance.getZoom(); - return {left:o.left / z, top:o.top / z }; - } - else - return o; - }, - _getSize = function(el) { - return jsPlumb.CurrentLibrary.getSize(_gel(el)); - }, - - /** - * creates a timestamp, using milliseconds since 1970, but as a string. - */ - _timestamp = function() { return "" + (new Date()).getTime(); }, - - // helper method to update the hover style whenever it, or paintStyle, changes. - // we use paintStyle as the foundation and merge hoverPaintStyle over the - // top. - _updateHoverStyle = function(component) { - if (component._jsPlumb.paintStyle && component._jsPlumb.hoverPaintStyle) { - var mergedHoverStyle = {}; - jsPlumb.extend(mergedHoverStyle, component._jsPlumb.paintStyle); - jsPlumb.extend(mergedHoverStyle, component._jsPlumb.hoverPaintStyle); - delete component._jsPlumb.hoverPaintStyle; - // we want the fillStyle of paintStyle to override a gradient, if possible. - if (mergedHoverStyle.gradient && component._jsPlumb.paintStyle.fillStyle) - delete mergedHoverStyle.gradient; - component._jsPlumb.hoverPaintStyle = mergedHoverStyle; - } - }, - events = [ "click", "dblclick", "mouseenter", "mouseout", "mousemove", "mousedown", "mouseup", "contextmenu" ], - eventFilters = { "mouseout":"mouseexit" }, - _updateAttachedElements = function(component, state, timestamp, sourceElement) { - var affectedElements = component.getAttachedElements(); - if (affectedElements) { - for (var i = 0, j = affectedElements.length; i < j; i++) { - if (!sourceElement || sourceElement != affectedElements[i]) - affectedElements[i].setHover(state, true, timestamp); // tell the attached elements not to inform their own attached elements. - } - } - }, - _splitType = function(t) { return t == null ? null : t.split(" "); }, - _applyTypes = function(component, params, doNotRepaint) { - if (component.getDefaultType) { - var td = component.getTypeDescriptor(); - - var o = _ju.merge({}, component.getDefaultType()); - for (var i = 0, j = component._jsPlumb.types.length; i < j; i++) - o = _ju.merge(o, component._jsPlumb.instance.getType(component._jsPlumb.types[i], td)); - - if (params) { - o = _ju.populate(o, params); - } - - component.applyType(o, doNotRepaint); - if (!doNotRepaint) component.repaint(); - } - }, - -// ------------------------------ BEGIN jsPlumbUIComponent -------------------------------------------- - - jsPlumbUIComponent = window.jsPlumbUIComponent = function(params) { - - jsPlumbUtil.EventGenerator.apply(this, arguments); - - var self = this, - a = arguments, - idPrefix = self.idPrefix, - id = idPrefix + (new Date()).getTime(), - jpcl = jsPlumb.CurrentLibrary; - - this._jsPlumb = { - instance: params._jsPlumb, - parameters:params.parameters || {}, - paintStyle:null, - hoverPaintStyle:null, - paintStyleInUse:null, - hover:false, - beforeDetach:params.beforeDetach, - beforeDrop:params.beforeDrop, - overlayPlacements : [], - hoverClass: params.hoverClass || params._jsPlumb.Defaults.HoverClass || jsPlumb.Defaults.HoverClass, - types:[] - }; - - this.getId = function() { return id; }; - - // all components can generate events - - if (params.events) { - for (var i in params.events) - self.bind(i, params.events[i]); - } - - // all components get this clone function. - // TODO issue 116 showed a problem with this - it seems 'a' that is in - // the clone function's scope is shared by all invocations of it, the classic - // JS closure problem. for now, jsPlumb does a version of this inline where - // it used to call clone. but it would be nice to find some time to look - // further at this. - this.clone = function() { - var o = {};//new Object(); - this.constructor.apply(o, a); - return o; - }.bind(this); - - - // user can supply a beforeDetach callback, which will be executed before a detach - // is performed; returning false prevents the detach. - this.isDetachAllowed = function(connection) { - var r = true; - if (this._jsPlumb.beforeDetach) { - try { - r = this._jsPlumb.beforeDetach(connection); - } - catch (e) { _ju.log("jsPlumb: beforeDetach callback failed", e); } - } - return r; - }; - - // user can supply a beforeDrop callback, which will be executed before a dropped - // connection is confirmed. user can return false to reject connection. - this.isDropAllowed = function(sourceId, targetId, scope, connection, dropEndpoint) { - var r = this._jsPlumb.instance.checkCondition("beforeDrop", { - sourceId:sourceId, - targetId:targetId, - scope:scope, - connection:connection, - dropEndpoint:dropEndpoint - }); - if (this._jsPlumb.beforeDrop) { - try { - r = this._jsPlumb.beforeDrop({ - sourceId:sourceId, - targetId:targetId, - scope:scope, - connection:connection, - dropEndpoint:dropEndpoint - }); - } - catch (e) { _ju.log("jsPlumb: beforeDrop callback failed", e); } - } - return r; - }; - - var boundListeners = [], - bindAListener = function(obj, type, fn) { - boundListeners.push([obj, type, fn]); - obj.bind(type, fn); - }, - domListeners = [], - bindOne = function(o, c, evt) { - var filteredEvent = eventFilters[evt] || evt, - fn = function(ee) { - c.fire(filteredEvent, c, ee); - }; - domListeners.push([o, evt, fn]); - jpcl.bind(o, evt, fn); - }, - unbindOne = function(o, evt, fn) { - var filteredEvent = eventFilters[evt] || evt; - jpcl.unbind(o, evt, fn); - }; - - this.bindListeners = function(obj, _self, _hoverFunction) { - bindAListener(obj, "click", function(ep, e) { _self.fire("click", _self, e); }); - bindAListener(obj, "dblclick", function(ep, e) { _self.fire("dblclick", _self, e); }); - bindAListener(obj, "contextmenu", function(ep, e) { _self.fire("contextmenu", _self, e); }); - bindAListener(obj, "mouseenter", function(ep, e) { - if (!_self.isHover()) { - _hoverFunction(true); - _self.fire("mouseenter", _self, e); - } - }); - bindAListener(obj, "mouseexit", function(ep, e) { - if (_self.isHover()) { - _hoverFunction(false); - _self.fire("mouseexit", _self, e); - } - }); - bindAListener(obj, "mousedown", function(ep, e) { _self.fire("mousedown", _self, e); }); - bindAListener(obj, "mouseup", function(ep, e) { _self.fire("mouseup", _self, e); }); - }; - - this.unbindListeners = function() { - for (var i = 0; i < boundListeners.length; i++) { - var o = boundListeners[i]; - o[0].unbind(o[1], o[2]); - } - boundListeners = null; - }; - - this.attachListeners = function(o, c) { - for (var i = 0, j = events.length; i < j; i++) { - bindOne(o, c, events[i]); - } - }; - this.detachListeners = function() { - for (var i = 0; i < domListeners.length; i++) { - unbindOne(domListeners[i][0], domListeners[i][1], domListeners[i][2]); - } - domListeners = null; - }; - - this.reattachListenersForElement = function(o) { - if (arguments.length > 1) { - for (var i = 0, j = events.length; i < j; i++) - unbindOne(o, events[i]); - for (i = 1, j = arguments.length; i < j; i++) - this.attachListeners(o, arguments[i]); - } - }; - }; - - jsPlumbUtil.extend(jsPlumbUIComponent, jsPlumbUtil.EventGenerator, { - - getParameter : function(name) { - return this._jsPlumb.parameters[name]; - }, - - setParameter : function(name, value) { - this._jsPlumb.parameters[name] = value; - }, - - getParameters : function() { - return this._jsPlumb.parameters; - }, - - setParameters : function(p) { - this._jsPlumb.parameters = p; - }, - - addClass : function(clazz) { - if (this.canvas != null) - _addClass(this.canvas, clazz); - }, - - removeClass : function(clazz) { - if (this.canvas != null) - _removeClass(this.canvas, clazz); - }, - - setType : function(typeId, params, doNotRepaint) { - this._jsPlumb.types = _splitType(typeId) || []; - _applyTypes(this, params, doNotRepaint); - }, - - getType : function() { - return this._jsPlumb.types; - }, - - reapplyTypes : function(params, doNotRepaint) { - _applyTypes(this, params, doNotRepaint); - }, - - hasType : function(typeId) { - return jsPlumbUtil.indexOf(this._jsPlumb.types, typeId) != -1; - }, - - addType : function(typeId, params, doNotRepaint) { - var t = _splitType(typeId), _cont = false; - if (t != null) { - for (var i = 0, j = t.length; i < j; i++) { - if (!this.hasType(t[i])) { - this._jsPlumb.types.push(t[i]); - _cont = true; - } - } - if (_cont) _applyTypes(this, params, doNotRepaint); - } - }, - - removeType : function(typeId, doNotRepaint) { - var t = _splitType(typeId), _cont = false, _one = function(tt) { - var idx = _ju.indexOf(this._jsPlumb.types, tt); - if (idx != -1) { - this._jsPlumb.types.splice(idx, 1); - return true; - } - return false; - }.bind(this); - - if (t != null) { - for (var i = 0,j = t.length; i < j; i++) { - _cont = _one(t[i]) || _cont; - } - if (_cont) _applyTypes(this, null, doNotRepaint); - } - }, - - toggleType : function(typeId, params, doNotRepaint) { - var t = _splitType(typeId); - if (t != null) { - for (var i = 0, j = t.length; i < j; i++) { - var idx = jsPlumbUtil.indexOf(this._jsPlumb.types, t[i]); - if (idx != -1) - this._jsPlumb.types.splice(idx, 1); - else - this._jsPlumb.types.push(t[i]); - } - - _applyTypes(this, params, doNotRepaint); - } - }, - applyType : function(t, doNotRepaint) { - this.setPaintStyle(t.paintStyle, doNotRepaint); - this.setHoverPaintStyle(t.hoverPaintStyle, doNotRepaint); - if (t.parameters){ - for (var i in t.parameters) - this.setParameter(i, t.parameters[i]); - } - }, - setPaintStyle : function(style, doNotRepaint) { -// this._jsPlumb.paintStyle = jsPlumb.extend({}, style); -// TODO figure out if we want components to clone paintStyle so as not to share it. - this._jsPlumb.paintStyle = style; - this._jsPlumb.paintStyleInUse = this._jsPlumb.paintStyle; - _updateHoverStyle(this); - if (!doNotRepaint) this.repaint(); - }, - getPaintStyle : function() { - return this._jsPlumb.paintStyle; - }, - setHoverPaintStyle : function(style, doNotRepaint) { - //this._jsPlumb.hoverPaintStyle = jsPlumb.extend({}, style); -// TODO figure out if we want components to clone paintStyle so as not to share it. - this._jsPlumb.hoverPaintStyle = style; - _updateHoverStyle(this); - if (!doNotRepaint) this.repaint(); - }, - getHoverPaintStyle : function() { - return this._jsPlumb.hoverPaintStyle; - }, - cleanup:function() { - this.unbindListeners(); - this.detachListeners(); - }, - destroy:function() { - this.cleanupListeners(); - this.clone = null; - this._jsPlumb = null; - }, - - isHover : function() { return this._jsPlumb.hover; }, - - setHover : function(hover, ignoreAttachedElements, timestamp) { - var jpcl = jsPlumb.CurrentLibrary; - // while dragging, we ignore these events. this keeps the UI from flashing and - // swishing and whatevering. - if (this._jsPlumb && !this._jsPlumb.instance.currentlyDragging && !this._jsPlumb.instance.isHoverSuspended()) { - - this._jsPlumb.hover = hover; - - if (this.canvas != null) { - if (this._jsPlumb.instance.hoverClass != null) { - jpcl[hover ? "addClass" : "removeClass"](this.canvas, this._jsPlumb.instance.hoverClass); - } - } - if (this._jsPlumb.hoverPaintStyle != null) { - this._jsPlumb.paintStyleInUse = hover ? this._jsPlumb.hoverPaintStyle : this._jsPlumb.paintStyle; - if (!this._jsPlumb.instance.isSuspendDrawing()) { - timestamp = timestamp || _timestamp(); - this.repaint({timestamp:timestamp, recalc:false}); - } - } - // get the list of other affected elements, if supported by this component. - // for a connection, its the endpoints. for an endpoint, its the connections! surprise. - if (this.getAttachedElements && !ignoreAttachedElements) - _updateAttachedElements(this, hover, _timestamp(), this); - } - } - }); - -// ------------------------------ END jsPlumbUIComponent -------------------------------------------- - -// ------------------------------ BEGIN OverlayCapablejsPlumbUIComponent -------------------------------------------- - - var _internalLabelOverlayId = "__label", - // helper to get the index of some overlay - _getOverlayIndex = function(component, id) { - var idx = -1; - for (var i = 0, j = component._jsPlumb.overlays.length; i < j; i++) { - if (id === component._jsPlumb.overlays[i].id) { - idx = i; - break; - } - } - return idx; - }, - // this is a shortcut helper method to let people add a label as - // overlay. - _makeLabelOverlay = function(component, params) { - - var _params = { - cssClass:params.cssClass, - labelStyle : component.labelStyle, - id:_internalLabelOverlayId, - component:component, - _jsPlumb:component._jsPlumb.instance // TODO not necessary, since the instance can be accessed through the component. - }, - mergedParams = jsPlumb.extend(_params, params); - - return new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()].Label( mergedParams ); - }, - _processOverlay = function(component, o) { - var _newOverlay = null; - if (_ju.isArray(o)) { // this is for the shorthand ["Arrow", { width:50 }] syntax - // there's also a three arg version: - // ["Arrow", { width:50 }, {location:0.7}] - // which merges the 3rd arg into the 2nd. - var type = o[0], - // make a copy of the object so as not to mess up anyone else's reference... - p = jsPlumb.extend({component:component, _jsPlumb:component._jsPlumb.instance}, o[1]); - if (o.length == 3) jsPlumb.extend(p, o[2]); - _newOverlay = new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()][type](p); - } else if (o.constructor == String) { - _newOverlay = new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()][o]({component:component, _jsPlumb:component._jsPlumb.instance}); - } else { - _newOverlay = o; - } - - component._jsPlumb.overlays.push(_newOverlay); - }, - _calculateOverlaysToAdd = function(component, params) { - var defaultKeys = component.defaultOverlayKeys || [], o = params.overlays, - checkKey = function(k) { - return component._jsPlumb.instance.Defaults[k] || jsPlumb.Defaults[k] || []; - }; - - if (!o) o = []; - - for (var i = 0, j = defaultKeys.length; i < j; i++) - o.unshift.apply(o, checkKey(defaultKeys[i])); - - return o; - }, - OverlayCapableJsPlumbUIComponent = window.OverlayCapableJsPlumbUIComponent = function(params) { - - jsPlumbUIComponent.apply(this, arguments); - this._jsPlumb.overlays = []; - - var _overlays = _calculateOverlaysToAdd(this, params); - if (_overlays) { - for (var i = 0, j = _overlays.length; i < j; i++) { - _processOverlay(this, _overlays[i]); - } - } - - if (params.label) { - var loc = params.labelLocation || this.defaultLabelLocation || 0.5, - labelStyle = params.labelStyle || this._jsPlumb.instance.Defaults.LabelStyle || jsPlumb.Defaults.LabelStyle; - - this._jsPlumb.overlays.push(_makeLabelOverlay(this, { - label:params.label, - location:loc, - labelStyle:labelStyle - })); - } - }; - - jsPlumbUtil.extend(OverlayCapableJsPlumbUIComponent, jsPlumbUIComponent, { - applyType : function(t, doNotRepaint) { - this.removeAllOverlays(doNotRepaint); - if (t.overlays) { - for (var i = 0, j = t.overlays.length; i < j; i++) - this.addOverlay(t.overlays[i], true); - } - }, - setHover : function(hover, ignoreAttachedElements, timestamp) { - if (this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) { - for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) { - this._jsPlumb.overlays[i][hover ? "addClass":"removeClass"](this._jsPlumb.instance.hoverClass); - } - } - }, - addOverlay : function(overlay, doNotRepaint) { - _processOverlay(this, overlay); - if (!doNotRepaint) this.repaint(); - }, - getOverlay : function(id) { - var idx = _getOverlayIndex(this, id); - return idx >= 0 ? this._jsPlumb.overlays[idx] : null; - }, - getOverlays : function() { - return this._jsPlumb.overlays; - }, - hideOverlay : function(id) { - var o = this.getOverlay(id); - if (o) o.hide(); - }, - hideOverlays : function() { - for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) - this._jsPlumb.overlays[i].hide(); - }, - showOverlay : function(id) { - var o = this.getOverlay(id); - if (o) o.show(); - }, - showOverlays : function() { - for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) - this._jsPlumb.overlays[i].show(); - }, - removeAllOverlays : function(doNotRepaint) { - for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) { - if (this._jsPlumb.overlays[i].cleanup) this._jsPlumb.overlays[i].cleanup(); - } - - this._jsPlumb.overlays.splice(0, this._jsPlumb.overlays.length); - if (!doNotRepaint) - this.repaint(); - }, - removeOverlay : function(overlayId) { - var idx = _getOverlayIndex(this, overlayId); - if (idx != -1) { - var o = this._jsPlumb.overlays[idx]; - if (o.cleanup) o.cleanup(); - this._jsPlumb.overlays.splice(idx, 1); - } - }, - removeOverlays : function() { - for (var i = 0, j = arguments.length; i < j; i++) - this.removeOverlay(arguments[i]); - }, - getLabel : function() { - var lo = this.getOverlay(_internalLabelOverlayId); - return lo != null ? lo.getLabel() : null; - }, - getLabelOverlay : function() { - return this.getOverlay(_internalLabelOverlayId); - }, - setLabel : function(l) { - var lo = this.getOverlay(_internalLabelOverlayId); - if (!lo) { - var params = l.constructor == String || l.constructor == Function ? { label:l } : l; - lo = _makeLabelOverlay(this, params); - this._jsPlumb.overlays.push(lo); - } - else { - if (l.constructor == String || l.constructor == Function) lo.setLabel(l); - else { - if (l.label) lo.setLabel(l.label); - if (l.location) lo.setLocation(l.location); - } - } - - if (!this._jsPlumb.instance.isSuspendDrawing()) - this.repaint(); - }, - cleanup:function() { - for (var i = 0; i < this._jsPlumb.overlays.length; i++) { - this._jsPlumb.overlays[i].cleanup(); - this._jsPlumb.overlays[i].destroy(); - } - this._jsPlumb.overlays.splice(0); - } - }); - -// ------------------------------ END OverlayCapablejsPlumbUIComponent -------------------------------------------- - - var _jsPlumbInstanceIndex = 0, - getInstanceIndex = function() { - var i = _jsPlumbInstanceIndex + 1; - _jsPlumbInstanceIndex++; - return i; - }; - - var jsPlumbInstance = window.jsPlumbInstance = function(_defaults) { - - this.Defaults = { - Anchor : "BottomCenter", - Anchors : [ null, null ], - ConnectionsDetachable : true, - ConnectionOverlays : [ ], - Connector : "Bezier", - Container : null, - DoNotThrowErrors:false, - DragOptions : { }, - DropOptions : { }, - Endpoint : "Dot", - EndpointOverlays : [ ], - Endpoints : [ null, null ], - EndpointStyle : { fillStyle : "#456" }, - EndpointStyles : [ null, null ], - EndpointHoverStyle : null, - EndpointHoverStyles : [ null, null ], - HoverPaintStyle : null, - LabelStyle : { color : "black" }, - LogEnabled : false, - Overlays : [ ], - MaxConnections : 1, - PaintStyle : { lineWidth : 8, strokeStyle : "#456" }, - ReattachConnections:false, - RenderMode : "svg", - Scope : "jsPlumb_DefaultScope" - }; - if (_defaults) jsPlumb.extend(this.Defaults, _defaults); - - this.logEnabled = this.Defaults.LogEnabled; - this._connectionTypes = {}; - this._endpointTypes = {}; - - jsPlumbUtil.EventGenerator.apply(this); - - var _currentInstance = this, - _instanceIndex = getInstanceIndex(), - _bb = _currentInstance.bind, - _initialDefaults = {}, - _zoom = 1, - _info = function(el) { - var _el = _dom(el); - return { el:_el, id:(jsPlumbUtil.isString(el) && _el == null) ? el : _getId(_el) }; - }; - - this.getInstanceIndex = function() { return _instanceIndex; }; - - this.setZoom = function(z, repaintEverything) { - _zoom = z; - if (repaintEverything) _currentInstance.repaintEverything(); - }; - this.getZoom = function() { return _zoom; }; - - for (var i in this.Defaults) - _initialDefaults[i] = this.Defaults[i]; - - this.bind = function(event, fn) { - if ("ready" === event && initialized) fn(); - else _bb.apply(_currentInstance,[event, fn]); - }; - - _currentInstance.importDefaults = function(d) { - for (var i in d) { - _currentInstance.Defaults[i] = d[i]; - } - return _currentInstance; - }; - - _currentInstance.restoreDefaults = function() { - _currentInstance.Defaults = jsPlumb.extend({}, _initialDefaults); - return _currentInstance; - }; - - var log = null, - resizeTimer = null, - initialized = false, - // TODO remove from window scope - connections = [], - // map of element id -> endpoint lists. an element can have an arbitrary - // number of endpoints on it, and not all of them have to be connected - // to anything. - endpointsByElement = {}, - endpointsByUUID = {}, - offsets = {}, - offsetTimestamps = {}, - floatingConnections = {}, - draggableStates = {}, - connectionBeingDragged = false, - sizes = [], - _suspendDrawing = false, - _suspendedAt = null, - DEFAULT_SCOPE = this.Defaults.Scope, - renderMode = null, // will be set in init() - _curIdStamp = 1, - _idstamp = function() { return "" + _curIdStamp++; }, - - // - // appends an element to some other element, which is calculated as follows: - // - // 1. if _currentInstance.Defaults.Container exists, use that element. - // 2. if the 'parent' parameter exists, use that. - // 3. otherwise just use the root element (for DOM usage, the document body). - // - // - _appendElement = function(el, parent) { - if (_currentInstance.Defaults.Container) - jsPlumb.CurrentLibrary.appendElement(el, _currentInstance.Defaults.Container); - else if (!parent) - jsPlumbAdapter.appendToRoot(el); - else - jsPlumb.CurrentLibrary.appendElement(el, parent); - }, - - // - // YUI, for some reason, put the result of a Y.all call into an object that contains - // a '_nodes' array, instead of handing back an array-like object like the other - // libraries do. - // - _convertYUICollection = function(c) { - return c._nodes ? c._nodes : c; - }, - - // - // Draws an endpoint and its connections. this is the main entry point into drawing connections as well - // as endpoints, since jsPlumb is endpoint-centric under the hood. - // - // @param element element to draw (of type library specific element object) - // @param ui UI object from current library's event system. optional. - // @param timestamp timestamp for this paint cycle. used to speed things up a little by cutting down the amount of offset calculations we do. - // @param clearEdits defaults to false; indicates that mouse edits for connectors should be cleared - /// - _draw = function(element, ui, timestamp, clearEdits) { - - // TODO is it correct to filter by headless at this top level? how would a headless adapter ever repaint? - if (!jsPlumbAdapter.headless && !_suspendDrawing) { - var id = _getId(element), - repaintEls = _currentInstance.dragManager.getElementsForDraggable(id); - - if (timestamp == null) timestamp = _timestamp(); - - // update the offset of everything _before_ we try to draw anything. - var o = _updateOffset( { elId : id, offset : ui, recalc : false, timestamp : timestamp }); - - if (repaintEls) { - for (var i in repaintEls) { - _updateOffset( { - elId : repaintEls[i].id, - offset : { - left:o.o.left + repaintEls[i].offset.left, - top:o.o.top + repaintEls[i].offset.top - }, - recalc : false, - timestamp : timestamp - }); - } - } - - - _currentInstance.anchorManager.redraw(id, ui, timestamp, null, clearEdits); - - if (repaintEls) { - for (var j in repaintEls) { - _currentInstance.anchorManager.redraw(repaintEls[j].id, ui, timestamp, repaintEls[j].offset, clearEdits, true); - } - } - } - }, - - // - // executes the given function against the given element if the first - // argument is an object, or the list of elements, if the first argument - // is a list. the function passed in takes (element, elementId) as - // arguments. - // - _elementProxy = function(element, fn) { - var retVal = null, el, id; - if (_ju.isArray(element)) { - retVal = []; - for ( var i = 0, j = element.length; i < j; i++) { - el = _gel(element[i]); - id = _currentInstance.getAttribute(el, "id"); - retVal.push(fn(el, id)); // append return values to what we will return - } - } else { - el = _gel(element); - id = _currentInstance.getAttribute(el, "id"); - retVal = fn(el, id); - } - return retVal; - }, - - // - // gets an Endpoint by uuid. - // - _getEndpoint = function(uuid) { return endpointsByUUID[uuid]; }, - - /** - * inits a draggable if it's not already initialised. - * TODO: somehow abstract this to the adapter, because the concept of "draggable" has no - * place on the server. - */ - _initDraggableIfNecessary = function(element, isDraggable, dragOptions) { - // TODO move to DragManager? - if (!jsPlumbAdapter.headless) { - var _draggable = isDraggable == null ? false : isDraggable, jpcl = jsPlumb.CurrentLibrary; - if (_draggable) { - if (jpcl.isDragSupported(element) && !jpcl.isAlreadyDraggable(element)) { - var options = dragOptions || _currentInstance.Defaults.DragOptions || jsPlumb.Defaults.DragOptions; - options = jsPlumb.extend( {}, options); // make a copy. - var dragEvent = jpcl.dragEvents.drag, - stopEvent = jpcl.dragEvents.stop, - startEvent = jpcl.dragEvents.start; - - options[startEvent] = _ju.wrap(options[startEvent], function() { - _currentInstance.setHoverSuspended(true); - _currentInstance.select({source:element}).addClass(_currentInstance.elementDraggingClass + " " + _currentInstance.sourceElementDraggingClass, true); - _currentInstance.select({target:element}).addClass(_currentInstance.elementDraggingClass + " " + _currentInstance.targetElementDraggingClass, true); - _currentInstance.setConnectionBeingDragged(true); - }); - - options[dragEvent] = _ju.wrap(options[dragEvent], function() { - var ui = jpcl.getUIPosition(arguments, _currentInstance.getZoom()); - _draw(element, ui, null, true); - _addClass(element, "jsPlumb_dragged"); - }); - options[stopEvent] = _ju.wrap(options[stopEvent], function() { - var ui = jpcl.getUIPosition(arguments, _currentInstance.getZoom()); - _draw(element, ui); - _removeClass(element, "jsPlumb_dragged"); - _currentInstance.setHoverSuspended(false); - _currentInstance.select({source:element}).removeClass(_currentInstance.elementDraggingClass + " " + _currentInstance.sourceElementDraggingClass, true); - _currentInstance.select({target:element}).removeClass(_currentInstance.elementDraggingClass + " " + _currentInstance.targetElementDraggingClass, true); - _currentInstance.setConnectionBeingDragged(false); - }); - var elId = _getId(element); // need ID - draggableStates[elId] = true; - var draggable = draggableStates[elId]; - options.disabled = draggable == null ? false : !draggable; - jpcl.initDraggable(element, options, false, _currentInstance); - _currentInstance.dragManager.register(element); - } - } - } - }, - - /* - * prepares a final params object that can be passed to _newConnection, taking into account defaults, events, etc. - */ - _prepareConnectionParams = function(params, referenceParams) { - var _p = jsPlumb.extend( { }, params); - if (referenceParams) jsPlumb.extend(_p, referenceParams); - - // hotwire endpoints passed as source or target to sourceEndpoint/targetEndpoint, respectively. - if (_p.source) { - if (_p.source.endpoint) - _p.sourceEndpoint = _p.source; - else - _p.source = _dom(_p.source); - } - if (_p.target) { - if (_p.target.endpoint) - _p.targetEndpoint = _p.target; - else - _p.target = _dom(_p.target); - } - - // test for endpoint uuids to connect - if (params.uuids) { - _p.sourceEndpoint = _getEndpoint(params.uuids[0]); - _p.targetEndpoint = _getEndpoint(params.uuids[1]); - } - - // now ensure that if we do have Endpoints already, they're not full. - // source: - if (_p.sourceEndpoint && _p.sourceEndpoint.isFull()) { - _ju.log(_currentInstance, "could not add connection; source endpoint is full"); - return; - } - - // target: - if (_p.targetEndpoint && _p.targetEndpoint.isFull()) { - _ju.log(_currentInstance, "could not add connection; target endpoint is full"); - return; - } - - // if source endpoint mandates connection type and nothing specified in our params, use it. - if (!_p.type && _p.sourceEndpoint) - _p.type = _p.sourceEndpoint.connectionType; - - // copy in any connectorOverlays that were specified on the source endpoint. - // it doesnt copy target endpoint overlays. i'm not sure if we want it to or not. - if (_p.sourceEndpoint && _p.sourceEndpoint.connectorOverlays) { - _p.overlays = _p.overlays || []; - for (var i = 0, j = _p.sourceEndpoint.connectorOverlays.length; i < j; i++) { - _p.overlays.push(_p.sourceEndpoint.connectorOverlays[i]); - } - } - - // pointer events - if (!_p["pointer-events"] && _p.sourceEndpoint && _p.sourceEndpoint.connectorPointerEvents) - _p["pointer-events"] = _p.sourceEndpoint.connectorPointerEvents; - - // if there's a target specified (which of course there should be), and there is no - // target endpoint specified, and 'newConnection' was not set to true, then we check to - // see if a prior call to makeTarget has provided us with the specs for the target endpoint, and - // we use those if so. additionally, if the makeTarget call was specified with 'uniqueEndpoint' set - // to true, then if that target endpoint has already been created, we re-use it. - - var tid, tep, existingUniqueEndpoint, newEndpoint; - - // TODO: this code can be refactored to be a little dry. - if (_p.target && !_p.target.endpoint && !_p.targetEndpoint && !_p.newConnection) { - tid = _getId(_p.target); - tep =_targetEndpointDefinitions[tid]; - existingUniqueEndpoint = _targetEndpoints[tid]; - - if (tep) { - // if target not enabled, return. - if (!_targetsEnabled[tid]) return; - - tep.isTarget = true; - // check for max connections?? - newEndpoint = existingUniqueEndpoint != null ? existingUniqueEndpoint : _currentInstance.addEndpoint(_p.target, tep); - if (_targetEndpointsUnique[tid]) _targetEndpoints[tid] = newEndpoint; - _p.targetEndpoint = newEndpoint; - // TODO test options to makeTarget to see if we should do this? - newEndpoint._doNotDeleteOnDetach = false; // reset. - newEndpoint._deleteOnDetach = true; - } - } - - // same thing, but for source. - if (_p.source && !_p.source.endpoint && !_p.sourceEndpoint && !_p.newConnection) { - tid = _getId(_p.source); - tep = _sourceEndpointDefinitions[tid]; - existingUniqueEndpoint = _sourceEndpoints[tid]; - - if (tep) { - // if source not enabled, return. - if (!_sourcesEnabled[tid]) return; - - newEndpoint = existingUniqueEndpoint != null ? existingUniqueEndpoint : _currentInstance.addEndpoint(_p.source, tep); - if (_sourceEndpointsUnique[tid]) _sourceEndpoints[tid] = newEndpoint; - _p.sourceEndpoint = newEndpoint; - // TODO test options to makeSource to see if we should do this? - newEndpoint._doNotDeleteOnDetach = false; // reset. - newEndpoint._deleteOnDetach = true; - } - } - - return _p; - }, - - _newConnection = function(params) { - var connectionFunc = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), - endpointFunc = _currentInstance.Defaults.EndpointType || jsPlumb.Endpoint, - parent = jsPlumb.CurrentLibrary.getParent; - - if (params.container) - params.parent = params.container; - else { - if (params.sourceEndpoint) - params.parent = params.sourceEndpoint.parent; - else if (params.source.constructor == endpointFunc) - params.parent = params.source.parent; - else params.parent = parent(params.source); - } - - params._jsPlumb = _currentInstance; - params.newConnection = _newConnection; - params.newEndpoint = _newEndpoint; - params.endpointsByUUID = endpointsByUUID; - params.endpointsByElement = endpointsByElement; - params.finaliseConnection = _finaliseConnection; - var con = new connectionFunc(params); - con.id = "con_" + _idstamp(); - _eventFireProxy("click", "click", con); - _eventFireProxy("dblclick", "dblclick", con); - _eventFireProxy("contextmenu", "contextmenu", con); - return con; - }, - - // - // adds the connection to the backing model, fires an event if necessary and then redraws - // - _finaliseConnection = function(jpc, params, originalEvent, doInformAnchorManager) { - params = params || {}; - // add to list of connections (by scope). - if (!jpc.suspendedEndpoint) - connections.push(jpc); - - // always inform the anchor manager - // except that if jpc has a suspended endpoint it's not true to say the - // connection is new; it has just (possibly) moved. the question is whether - // to make that call here or in the anchor manager. i think perhaps here. - if (jpc.suspendedEndpoint == null || doInformAnchorManager) - _currentInstance.anchorManager.newConnection(jpc); - - // force a paint - _draw(jpc.source); - - // fire an event - if (!params.doNotFireConnectionEvent && params.fireEvent !== false) { - - var eventArgs = { - connection:jpc, - source : jpc.source, target : jpc.target, - sourceId : jpc.sourceId, targetId : jpc.targetId, - sourceEndpoint : jpc.endpoints[0], targetEndpoint : jpc.endpoints[1] - }; - - _currentInstance.fire("connection", eventArgs, originalEvent); - } - }, - - _eventFireProxy = function(event, proxyEvent, obj) { - obj.bind(event, function(originalObject, originalEvent) { - _currentInstance.fire(proxyEvent, obj, originalEvent); - }); - }, - - /* - * for the given endpoint params, returns an appropriate parent element for the UI elements that will be added. - * this function is used by _newEndpoint (directly below), and also in the makeSource function in jsPlumb. - * - * the logic is to first look for a "container" member of params, and pass that back if found. otherwise we - * handoff to the 'getParent' function in the current library. - */ - _getParentFromParams = function(params) { - if (params.container) - return params.container; - else { - var tag = jsPlumb.CurrentLibrary.getTagName(params.source), - p = jsPlumb.CurrentLibrary.getParent(params.source); - if (tag && tag.toLowerCase() === "td") - return jsPlumb.CurrentLibrary.getParent(p); - else return p; - } - }, - - /* - factory method to prepare a new endpoint. this should always be used instead of creating Endpoints - manually, since this method attaches event listeners and an id. - */ - _newEndpoint = function(params) { - var endpointFunc = _currentInstance.Defaults.EndpointType || jsPlumb.Endpoint; - var _p = jsPlumb.extend({}, params); - _p.parent = _getParentFromParams(_p); - _p._jsPlumb = _currentInstance; - _p.newConnection = _newConnection; - _p.newEndpoint = _newEndpoint; - _p.endpointsByUUID = endpointsByUUID; - _p.endpointsByElement = endpointsByElement; - _p.finaliseConnection = _finaliseConnection; - _p.fireDetachEvent = fireDetachEvent; - _p.floatingConnections = floatingConnections; - _p.getParentFromParams = _getParentFromParams; - _p.elementId = _getId(_p.source); - var ep = new endpointFunc(_p); - ep.id = "ep_" + _idstamp(); - _eventFireProxy("click", "endpointClick", ep); - _eventFireProxy("dblclick", "endpointDblClick", ep); - _eventFireProxy("contextmenu", "contextmenu", ep); - if (!jsPlumbAdapter.headless) - _currentInstance.dragManager.endpointAdded(_p.source); - return ep; - }, - - /* - * performs the given function operation on all the connections found - * for the given element id; this means we find all the endpoints for - * the given element, and then for each endpoint find the connectors - * connected to it. then we pass each connection in to the given - * function. - */ - _operation = function(elId, func, endpointFunc) { - var endpoints = endpointsByElement[elId]; - if (endpoints && endpoints.length) { - for ( var i = 0, ii = endpoints.length; i < ii; i++) { - for ( var j = 0, jj = endpoints[i].connections.length; j < jj; j++) { - var retVal = func(endpoints[i].connections[j]); - // if the function passed in returns true, we exit. - // most functions return false. - if (retVal) return; - } - if (endpointFunc) endpointFunc(endpoints[i]); - } - } - }, - - _setDraggable = function(element, draggable) { - return _elementProxy(element, function(el, id) { - draggableStates[id] = draggable; - if (jsPlumb.CurrentLibrary.isDragSupported(el)) { - jsPlumb.CurrentLibrary.setDraggable(el, draggable); - } - }); - }, - /* - * private method to do the business of hiding/showing. - * - * @param el - * either Id of the element in question or a library specific - * object for the element. - * @param state - * String specifying a value for the css 'display' property - * ('block' or 'none'). - */ - _setVisible = function(el, state, alsoChangeEndpoints) { - state = state === "block"; - var endpointFunc = null; - if (alsoChangeEndpoints) { - if (state) endpointFunc = function(ep) { - ep.setVisible(true, true, true); - }; - else endpointFunc = function(ep) { - ep.setVisible(false, true, true); - }; - } - var info = _info(el); - _operation(info.id, function(jpc) { - if (state && alsoChangeEndpoints) { - // this test is necessary because this functionality is new, and i wanted to maintain backwards compatibility. - // this block will only set a connection to be visible if the other endpoint in the connection is also visible. - var oidx = jpc.sourceId === info.id ? 1 : 0; - if (jpc.endpoints[oidx].isVisible()) jpc.setVisible(true); - } - else // the default behaviour for show, and what always happens for hide, is to just set the visibility without getting clever. - jpc.setVisible(state); - }, endpointFunc); - }, - /* - * toggles the draggable state of the given element(s). - * el is either an id, or an element object, or a list of ids/element objects. - */ - _toggleDraggable = function(el) { - return _elementProxy(el, function(el, elId) { - var state = draggableStates[elId] == null ? false : draggableStates[elId]; - state = !state; - draggableStates[elId] = state; - jsPlumb.CurrentLibrary.setDraggable(el, state); - return state; - }); - }, - /** - * private method to do the business of toggling hiding/showing. - */ - _toggleVisible = function(elId, changeEndpoints) { - var endpointFunc = null; - if (changeEndpoints) { - endpointFunc = function(ep) { - var state = ep.isVisible(); - ep.setVisible(!state); - }; - } - _operation(elId, function(jpc) { - var state = jpc.isVisible(); - jpc.setVisible(!state); - }, endpointFunc); - // todo this should call _elementProxy, and pass in the - // _operation(elId, f) call as a function. cos _toggleDraggable does - // that. - }, - /** - * updates the offset and size for a given element, and stores the - * values. if 'offset' is not null we use that (it would have been - * passed in from a drag call) because it's faster; but if it is null, - * or if 'recalc' is true in order to force a recalculation, we get the current values. - */ - _updateOffset = function(params) { - var timestamp = params.timestamp, recalc = params.recalc, offset = params.offset, elId = params.elId, s; - if (_suspendDrawing && !timestamp) timestamp = _suspendedAt; - if (!recalc) { - if (timestamp && timestamp === offsetTimestamps[elId]) { - return {o:params.offset || offsets[elId], s:sizes[elId]}; - } - } - if (recalc || !offset) { // if forced repaint or no offset available, we recalculate. - // get the current size and offset, and store them - s = _gel(elId); - if (s != null) { - sizes[elId] = _getSize(s); - offsets[elId] = _getOffset(s, _currentInstance); - offsetTimestamps[elId] = timestamp; - } - } else { - offsets[elId] = offset; - if (sizes[elId] == null) { - s = _gel(elId); - if (s != null) sizes[elId] = _getSize(s); - } - offsetTimestamps[elId] = timestamp; - } - - if(offsets[elId] && !offsets[elId].right) { - offsets[elId].right = offsets[elId].left + sizes[elId][0]; - offsets[elId].bottom = offsets[elId].top + sizes[elId][1]; - offsets[elId].width = sizes[elId][0]; - offsets[elId].height = sizes[elId][1]; - offsets[elId].centerx = offsets[elId].left + (offsets[elId].width / 2); - offsets[elId].centery = offsets[elId].top + (offsets[elId].height / 2); - } - return {o:offsets[elId], s:sizes[elId]}; - }, - - // TODO comparison performance - _getCachedData = function(elId) { - var o = offsets[elId]; - if (!o) - return _updateOffset({elId:elId}); - else - return {o:o, s:sizes[elId]}; - }, - - /** - * gets an id for the given element, creating and setting one if - * necessary. the id is of the form - * - * jsPlumb_<instance index>_<index in instance> - * - * where "index in instance" is a monotonically increasing integer that starts at 0, - * for each instance. this method is used not only to assign ids to elements that do not - * have them but also to connections and endpoints. - */ - _getId = function(element, uuid, doNotCreateIfNotFound) { - if (jsPlumbUtil.isString(element)) return element; - if (element == null) return null; - var id = jsPlumbAdapter.getAttribute(element, "id"); - if (!id || id === "undefined") { - // check if fixed uuid parameter is given - if (arguments.length == 2 && arguments[1] !== undefined) - id = uuid; - else if (arguments.length == 1 || (arguments.length == 3 && !arguments[2])) - id = "jsPlumb_" + _instanceIndex + "_" + _idstamp(); - - if (!doNotCreateIfNotFound) jsPlumbAdapter.setAttribute(element, "id", id); - } - return id; - }; - - this.setConnectionBeingDragged = function(v) { - connectionBeingDragged = v; - }; - this.isConnectionBeingDragged = function() { - return connectionBeingDragged; - }; - - this.connectorClass = "_jsPlumb_connector"; - this.hoverClass = "_jsPlumb_hover"; - this.endpointClass = "_jsPlumb_endpoint"; - this.endpointConnectedClass = "_jsPlumb_endpoint_connected"; - this.endpointFullClass = "_jsPlumb_endpoint_full"; - this.endpointDropAllowedClass = "_jsPlumb_endpoint_drop_allowed"; - this.endpointDropForbiddenClass = "_jsPlumb_endpoint_drop_forbidden"; - this.overlayClass = "_jsPlumb_overlay"; - this.draggingClass = "_jsPlumb_dragging"; - this.elementDraggingClass = "_jsPlumb_element_dragging"; - this.sourceElementDraggingClass = "_jsPlumb_source_element_dragging"; - this.targetElementDraggingClass = "_jsPlumb_target_element_dragging"; - this.endpointAnchorClassPrefix = "_jsPlumb_endpoint_anchor"; - this.hoverSourceClass = "_jsPlumb_source_hover"; - this.hoverTargetClass = "_jsPlumb_target_hover"; - this.dragSelectClass = "_jsPlumb_drag_select"; - - this.Anchors = {}; - this.Connectors = { "canvas":{}, "svg":{}, "vml":{} }; - this.Endpoints = { "canvas":{}, "svg":{}, "vml":{} }; - this.Overlays = { "canvas":{}, "svg":{}, "vml":{}}; - this.ConnectorRenderers = {}; - this.SVG = "svg"; - this.CANVAS = "canvas"; - this.VML = "vml"; - - -// --------------------------- jsPLumbInstance public API --------------------------------------------------------- - - - this.addEndpoint = function(el, params, referenceParams) { - referenceParams = referenceParams || {}; - var p = jsPlumb.extend({}, referenceParams); - jsPlumb.extend(p, params); - p.endpoint = p.endpoint || _currentInstance.Defaults.Endpoint || jsPlumb.Defaults.Endpoint; - p.paintStyle = p.paintStyle || _currentInstance.Defaults.EndpointStyle || jsPlumb.Defaults.EndpointStyle; - // YUI wrapper - el = _convertYUICollection(el); - - var results = [], - inputs = (_ju.isArray(el) || (el.length != null && !_ju.isString(el))) ? el : [ el ]; - - for (var i = 0, j = inputs.length; i < j; i++) { - var _el = _dom(inputs[i]), id = _getId(_el); - p.source = _el; - - _updateOffset({ elId : id, timestamp:_suspendedAt }); - var e = _newEndpoint(p); - if (p.parentAnchor) e.parentAnchor = p.parentAnchor; - _ju.addToList(endpointsByElement, id, e); - var myOffset = offsets[id], - myWH = sizes[id], - anchorLoc = e.anchor.compute( { xy : [ myOffset.left, myOffset.top ], wh : myWH, element : e, timestamp:_suspendedAt }), - endpointPaintParams = { anchorLoc : anchorLoc, timestamp:_suspendedAt }; - - if (_suspendDrawing) endpointPaintParams.recalc = false; - if (!_suspendDrawing) e.paint(endpointPaintParams); - - results.push(e); - e._doNotDeleteOnDetach = true; // mark this as being added via addEndpoint. - } - - return results.length == 1 ? results[0] : results; - }; - - - this.addEndpoints = function(el, endpoints, referenceParams) { - var results = []; - for ( var i = 0, j = endpoints.length; i < j; i++) { - var e = _currentInstance.addEndpoint(el, endpoints[i], referenceParams); - if (_ju.isArray(e)) - Array.prototype.push.apply(results, e); - else results.push(e); - } - return results; - }; - - this.animate = function(el, properties, options) { - options = options || {}; - var ele = _gel(el), - id = _getId(el), - stepFunction = jsPlumb.CurrentLibrary.dragEvents.step, - completeFunction = jsPlumb.CurrentLibrary.dragEvents.complete; - - options[stepFunction] = _ju.wrap(options[stepFunction], function() { - _currentInstance.repaint(id); - }); - - // onComplete repaints, just to make sure everything looks good at the end of the animation. - options[completeFunction] = _ju.wrap(options[completeFunction], function() { - _currentInstance.repaint(id); - }); - - jsPlumb.CurrentLibrary.animate(ele, properties, options); - }; - - /** - * checks for a listener for the given condition, executing it if found, passing in the given value. - * condition listeners would have been attached using "bind" (which is, you could argue, now overloaded, since - * firing click events etc is a bit different to what this does). i thought about adding a "bindCondition" - * or something, but decided against it, for the sake of simplicity. jsPlumb will never fire one of these - * condition events anyway. - */ - this.checkCondition = function(conditionName, value) { - var l = _currentInstance.getListener(conditionName), - r = true; - - if (l && l.length > 0) { - try { - for (var i = 0, j = l.length; i < j; i++) { - r = r && l[i](value); - } - } - catch (e) { - _ju.log(_currentInstance, "cannot check condition [" + conditionName + "]" + e); - } - } - return r; - }; - - /** - * checks a condition asynchronously: fires the event handler and passes the handler - * a 'proceed' function and a 'stop' function. The handler MUST execute one or other - * of these once it has made up its mind. - * - * Note that although this reads the listener list for the given condition, it - * does not loop through and hit each listener, because that, with asynchronous - * callbacks, would be messy. so it uses only the first listener registered. - */ - this.checkASyncCondition = function(conditionName, value, proceed, stop) { - var l = _currentInstance.getListener(conditionName); - - if (l && l.length > 0) { - try { - l[0](value, proceed, stop); - } - catch (e) { - _ju.log(_currentInstance, "cannot asynchronously check condition [" + conditionName + "]" + e); - } - } - }; - - - this.connect = function(params, referenceParams) { - // prepare a final set of parameters to create connection with - var _p = _prepareConnectionParams(params, referenceParams), jpc; - // TODO probably a nicer return value if the connection was not made. _prepareConnectionParams - // will return null (and log something) if either endpoint was full. what would be nicer is to - // create a dedicated 'error' object. - if (_p) { - // create the connection. it is not yet registered - jpc = _newConnection(_p); - // now add it the model, fire an event, and redraw - _finaliseConnection(jpc, _p); - } - return jpc; - }; - - this.deleteEndpoint = function(object, doNotRepaintAfterwards) { - var _is = _currentInstance.setSuspendDrawing(true); - var endpoint = (typeof object == "string") ? endpointsByUUID[object] : object; - if (endpoint) { - _currentInstance.deleteObject({endpoint:endpoint}); - } - if(!_is) _currentInstance.setSuspendDrawing(false, doNotRepaintAfterwards); - return _currentInstance; - }; - - - this.deleteEveryEndpoint = function() { - var _is = _currentInstance.setSuspendDrawing(true); - for ( var id in endpointsByElement) { - var endpoints = endpointsByElement[id]; - if (endpoints && endpoints.length) { - for ( var i = 0, j = endpoints.length; i < j; i++) { - _currentInstance.deleteEndpoint(endpoints[i], true); - } - } - } - endpointsByElement = {}; - endpointsByUUID = {}; - _currentInstance.anchorManager.reset(); - _currentInstance.dragManager.reset(); - if(!_is) _currentInstance.setSuspendDrawing(false); - return _currentInstance; - }; - - var fireDetachEvent = function(jpc, doFireEvent, originalEvent) { - // may have been given a connection, or in special cases, an object - var connType = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), - argIsConnection = jpc.constructor == connType, - params = argIsConnection ? { - connection:jpc, - source : jpc.source, target : jpc.target, - sourceId : jpc.sourceId, targetId : jpc.targetId, - sourceEndpoint : jpc.endpoints[0], targetEndpoint : jpc.endpoints[1] - } : jpc; - - if (doFireEvent) - _currentInstance.fire("connectionDetached", params, originalEvent); - - _currentInstance.anchorManager.connectionDetached(params); - }; - - this.unregisterEndpoint = function(endpoint) { - if (endpoint._jsPlumb.uuid) endpointsByUUID[endpoint._jsPlumb.uuid] = null; - _currentInstance.anchorManager.deleteEndpoint(endpoint); - // TODO at least replace this with a removeWithFunction call. - for (var e in endpointsByElement) { - var endpoints = endpointsByElement[e]; - if (endpoints) { - var newEndpoints = []; - for (var i = 0, j = endpoints.length; i < j; i++) - if (endpoints[i] != endpoint) newEndpoints.push(endpoints[i]); - - endpointsByElement[e] = newEndpoints; - } - if(endpointsByElement[e].length <1){ - delete endpointsByElement[e]; - } - } - }; - - this.detach = function() { - - if (arguments.length === 0) return; - var connType = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), - firstArgIsConnection = arguments[0].constructor == connType, - params = arguments.length == 2 ? firstArgIsConnection ? (arguments[1] || {}) : arguments[0] : arguments[0], - fireEvent = (params.fireEvent !== false), - forceDetach = params.forceDetach, - conn = firstArgIsConnection ? arguments[0] : params.connection; - - if (conn) { - if (forceDetach || jsPlumbUtil.functionChain(true, false, [ - [ conn.endpoints[0], "isDetachAllowed", [ conn ] ], - [ conn.endpoints[1], "isDetachAllowed", [ conn ] ], - [ conn, "isDetachAllowed", [ conn ] ], - [ _currentInstance, "checkCondition", [ "beforeDetach", conn ] ] ])) { - - conn.endpoints[0].detach(conn, false, true, fireEvent); - } - } - else { - var _p = jsPlumb.extend( {}, params); // a backwards compatibility hack: source should be thought of as 'params' in this case. - // test for endpoint uuids to detach - if (_p.uuids) { - _getEndpoint(_p.uuids[0]).detachFrom(_getEndpoint(_p.uuids[1]), fireEvent); - } else if (_p.sourceEndpoint && _p.targetEndpoint) { - _p.sourceEndpoint.detachFrom(_p.targetEndpoint); - } else { - var sourceId = _getId(_dom(_p.source)), - targetId = _getId(_dom(_p.target)); - _operation(sourceId, function(jpc) { - if ((jpc.sourceId == sourceId && jpc.targetId == targetId) || (jpc.targetId == sourceId && jpc.sourceId == targetId)) { - if (_currentInstance.checkCondition("beforeDetach", jpc)) { - jpc.endpoints[0].detach(jpc, false, true, fireEvent); - } - } - }); - } - } - }; - - this.detachAllConnections = function(el, params) { - params = params || {}; - el = _dom(el); - var id = _getId(el), - endpoints = endpointsByElement[id]; - if (endpoints && endpoints.length) { - for ( var i = 0, j = endpoints.length; i < j; i++) { - endpoints[i].detachAll(params.fireEvent !== false); - } - } - return _currentInstance; - }; - - this.detachEveryConnection = function(params) { - params = params || {}; - _currentInstance.doWhileSuspended(function() { - for ( var id in endpointsByElement) { - var endpoints = endpointsByElement[id]; - if (endpoints && endpoints.length) { - for ( var i = 0, j = endpoints.length; i < j; i++) { - endpoints[i].detachAll(params.fireEvent !== false); - } - } - } - connections.splice(0); - }); - return _currentInstance; - }; - - /// not public. but of course its exposed. how to change this. - this.deleteObject = function(params) { - var result = { - endpoints : {}, - connections : {}, - endpointCount:0, - connectionCount:0 - }, - fireEvent = params.fireEvent !== false, - deleteAttachedObjects = params.deleteAttachedObjects !== false; - - var unravelConnection = function(connection) { - if(connection != null && result.connections[connection.id] == null) { - connection._jsPlumb && connection.setHover(false); - result.connections[connection.id] = connection; - result.connectionCount++; - if (deleteAttachedObjects) { - for (var j = 0; j < connection.endpoints.length; j++) { - if (connection.endpoints[j]._deleteOnDetach) - unravelEndpoint(connection.endpoints[j]); - } - } - } - }; - var unravelEndpoint = function(endpoint) { - if(endpoint != null && result.endpoints[endpoint.id] == null) { - endpoint._jsPlumb && endpoint.setHover(false); - result.endpoints[endpoint.id] = endpoint; - result.endpointCount++; - - if (deleteAttachedObjects) { - for (var i = 0; i < endpoint.connections.length; i++) { - var c = endpoint.connections[i]; - unravelConnection(c); - } - } - } - }; - - if (params.connection) - unravelConnection(params.connection); - else unravelEndpoint(params.endpoint); - - // loop through connections - for (var i in result.connections) { - var c = result.connections[i]; - c.endpoints[0].detachFromConnection(c); - c.endpoints[1].detachFromConnection(c); - //_currentInstance.unregisterConnection(c); - jsPlumbUtil.removeWithFunction(connections, function(_c) { - return c.id == _c.id; - }); - fireDetachEvent(c, fireEvent, params.originalEvent); - c.cleanup(); - c.destroy(); - } - - // loop through endpoints - for (var j in result.endpoints) { - var e = result.endpoints[j]; - _currentInstance.unregisterEndpoint(e); - // FIRE some endpoint deleted event? - e.cleanup(); - e.destroy(); - } - - return result; - }; - - this.draggable = function(el, options) { - var i,j,ele; - // allows for array or jquery/mootools selector - if (typeof el == 'object' && el.length) { - for (i = 0, j = el.length; i < j; i++) { - ele = _dom(el[i]); - if (ele) _initDraggableIfNecessary(ele, true, options); - } - } - // allows for YUI selector - else if (el._nodes) { // TODO this is YUI specific; really the logic should be forced - // into the library adapters (for jquery and mootools aswell) - for (i = 0, j = el._nodes.length; i < j; i++) { - ele = _dom(el._nodes[i]); - if (ele) _initDraggableIfNecessary(ele, true, options); - } - } - else { - ele = _dom(el); - if (ele) _initDraggableIfNecessary(ele, true, options); - } - return _currentInstance; - }; - - - // just a library-agnostic wrapper. - this.extend = function(o1, o2) { - return jsPlumb.CurrentLibrary.extend(o1, o2); - }; - - // helpers for select/selectEndpoints - var _setOperation = function(list, func, args, selector) { - for (var i = 0, j = list.length; i < j; i++) { - list[i][func].apply(list[i], args); - } - return selector(list); - }, - _getOperation = function(list, func, args) { - var out = []; - for (var i = 0, j = list.length; i < j; i++) { - out.push([ list[i][func].apply(list[i], args), list[i] ]); - } - return out; - }, - setter = function(list, func, selector) { - return function() { - return _setOperation(list, func, arguments, selector); - }; - }, - getter = function(list, func) { - return function() { - return _getOperation(list, func, arguments); - }; - }, - prepareList = function(input, doNotGetIds) { - var r = []; - if (input) { - if (typeof input == 'string') { - if (input === "*") return input; - r.push(input); - } - else { - input = _gel(input); - if (doNotGetIds) r = input; - else { - for (var i = 0, j = input.length; i < j; i++) - r.push(_info(input[i]).id); - } - } - } - return r; - }, - filterList = function(list, value, missingIsFalse) { - if (list === "*") return true; - return list.length > 0 ? jsPlumbUtil.indexOf(list, value) != -1 : !missingIsFalse; - }; - - // get some connections, specifying source/target/scope - this.getConnections = function(options, flat) { - if (!options) { - options = {}; - } else if (options.constructor == String) { - options = { "scope": options }; - } - var scope = options.scope || _currentInstance.getDefaultScope(), - scopes = prepareList(scope, true), - sources = prepareList(options.source), - targets = prepareList(options.target), - results = (!flat && scopes.length > 1) ? {} : [], - _addOne = function(scope, obj) { - if (!flat && scopes.length > 1) { - var ss = results[scope]; - if (ss == null) { - ss = results[scope] = []; - } - ss.push(obj); - } else results.push(obj); - }; - - for ( var j = 0, jj = connections.length; j < jj; j++) { - var c = connections[j]; - if (filterList(scopes, c.scope) && filterList(sources, c.sourceId) && filterList(targets, c.targetId)) - _addOne(c.scope, c); - } - - return results; - }; - - var _curryEach = function(list, executor) { - return function(f) { - for (var i = 0, ii = list.length; i < ii; i++) { - f(list[i]); - } - return executor(list); - }; - }, - _curryGet = function(list) { - return function(idx) { - return list[idx]; - }; - }; - - var _makeCommonSelectHandler = function(list, executor) { - var out = { - length:list.length, - each:_curryEach(list, executor), - get:_curryGet(list) - }, - setters = ["setHover", "removeAllOverlays", "setLabel", "addClass", "addOverlay", "removeOverlay", - "removeOverlays", "showOverlay", "hideOverlay", "showOverlays", "hideOverlays", "setPaintStyle", - "setHoverPaintStyle", "setSuspendEvents", "setParameter", "setParameters", "setVisible", - "repaint", "addType", "toggleType", "removeType", "removeClass", "setType", "bind", "unbind" ], - - getters = ["getLabel", "getOverlay", "isHover", "getParameter", "getParameters", "getPaintStyle", - "getHoverPaintStyle", "isVisible", "hasType", "getType", "isSuspendEvents" ], - i, ii; - - for (i = 0, ii = setters.length; i < ii; i++) - out[setters[i]] = setter(list, setters[i], executor); - - for (i = 0, ii = getters.length; i < ii; i++) - out[getters[i]] = getter(list, getters[i]); - - return out; - }; - - var _makeConnectionSelectHandler = function(list) { - var common = _makeCommonSelectHandler(list, _makeConnectionSelectHandler); - return jsPlumb.CurrentLibrary.extend(common, { - // setters - setDetachable:setter(list, "setDetachable", _makeConnectionSelectHandler), - setReattach:setter(list, "setReattach", _makeConnectionSelectHandler), - setConnector:setter(list, "setConnector", _makeConnectionSelectHandler), - detach:function() { - for (var i = 0, ii = list.length; i < ii; i++) - _currentInstance.detach(list[i]); - }, - // getters - isDetachable:getter(list, "isDetachable"), - isReattach:getter(list, "isReattach") - }); - }; - - var _makeEndpointSelectHandler = function(list) { - var common = _makeCommonSelectHandler(list, _makeEndpointSelectHandler); - return jsPlumb.CurrentLibrary.extend(common, { - setEnabled:setter(list, "setEnabled", _makeEndpointSelectHandler), - setAnchor:setter(list, "setAnchor", _makeEndpointSelectHandler), - isEnabled:getter(list, "isEnabled"), - detachAll:function() { - for (var i = 0, ii = list.length; i < ii; i++) - list[i].detachAll(); - }, - "remove":function() { - for (var i = 0, ii = list.length; i < ii; i++) - _currentInstance.deleteObject({endpoint:list[i]}); - } - }); - }; - - - this.select = function(params) { - params = params || {}; - params.scope = params.scope || "*"; - return _makeConnectionSelectHandler(params.connections || _currentInstance.getConnections(params, true)); - }; - - this.selectEndpoints = function(params) { - params = params || {}; - params.scope = params.scope || "*"; - var noElementFilters = !params.element && !params.source && !params.target, - elements = noElementFilters ? "*" : prepareList(params.element), - sources = noElementFilters ? "*" : prepareList(params.source), - targets = noElementFilters ? "*" : prepareList(params.target), - scopes = prepareList(params.scope, true); - - var ep = []; - - for (var el in endpointsByElement) { - var either = filterList(elements, el, true), - source = filterList(sources, el, true), - sourceMatchExact = sources != "*", - target = filterList(targets, el, true), - targetMatchExact = targets != "*"; - - // if they requested 'either' then just match scope. otherwise if they requested 'source' (not as a wildcard) then we have to match only endpoints that have isSource set to to true, and the same thing with isTarget. - if ( either || source || target ) { - inner: - for (var i = 0, ii = endpointsByElement[el].length; i < ii; i++) { - var _ep = endpointsByElement[el][i]; - if (filterList(scopes, _ep.scope, true)) { - - var noMatchSource = (sourceMatchExact && sources.length > 0 && !_ep.isSource), - noMatchTarget = (targetMatchExact && targets.length > 0 && !_ep.isTarget); - - if (noMatchSource || noMatchTarget) - continue inner; - - ep.push(_ep); - } - } - } - } - - return _makeEndpointSelectHandler(ep); - }; - - // get all connections managed by the instance of jsplumb. - this.getAllConnections = function() { return connections; }; - this.getDefaultScope = function() { return DEFAULT_SCOPE; }; - // get an endpoint by uuid. - this.getEndpoint = _getEndpoint; - // get endpoints for some element. - this.getEndpoints = function(el) { return endpointsByElement[_info(el).id]; }; - // gets the default endpoint type. used when subclassing. see wiki. - this.getDefaultEndpointType = function() { return jsPlumb.Endpoint; }; - // gets the default connection type. used when subclassing. see wiki. - this.getDefaultConnectionType = function() { return jsPlumb.Connection; }; - /* - * Gets an element's id, creating one if necessary. really only exposed - * for the lib-specific functionality to access; would be better to pass - * the current instance into the lib-specific code (even though this is - * a static call. i just don't want to expose it to the public API). - */ - this.getId = _getId; - this.getOffset = function(id) { - var o = offsets[id]; - return _updateOffset({elId:id}); - }; - - this.getSelector = function() { - return jsPlumb.CurrentLibrary.getSelector.apply(null, arguments); - }; - - // get the size of the element with the given id, perhaps from cache. - this.getSize = function(id) { - var s = sizes[id]; - if (!s) _updateOffset({elId:id}); - return sizes[id]; - }; - - this.appendElement = _appendElement; - - var _hoverSuspended = false; - this.isHoverSuspended = function() { return _hoverSuspended; }; - this.setHoverSuspended = function(s) { _hoverSuspended = s; }; - - var _isAvailable = function(m) { - return function() { - return jsPlumbAdapter.isRenderModeAvailable(m); - }; - }; - this.isCanvasAvailable = _isAvailable("canvas"); - this.isSVGAvailable = _isAvailable("svg"); - this.isVMLAvailable = _isAvailable("vml"); - - // set an element's connections to be hidden - this.hide = function(el, changeEndpoints) { - _setVisible(el, "none", changeEndpoints); - return _currentInstance; - }; - - // exposed for other objects to use to get a unique id. - this.idstamp = _idstamp; - - this.connectorsInitialized = false; - var connectorTypes = [], rendererTypes = ["canvas", "svg", "vml"]; - this.registerConnectorType = function(connector, name) { - connectorTypes.push([connector, name]); - }; - - /** - * callback from the current library to tell us to prepare ourselves (attach - * mouse listeners etc; can't do that until the library has provided a bind method) - */ - this.init = function() { - var _oneType = function(renderer, name, fn) { - jsPlumb.Connectors[renderer][name] = function() { - fn.apply(this, arguments); - jsPlumb.ConnectorRenderers[renderer].apply(this, arguments); - }; - jsPlumbUtil.extend(jsPlumb.Connectors[renderer][name], [ fn, jsPlumb.ConnectorRenderers[renderer]]); - }; - - if (!jsPlumb.connectorsInitialized) { - for (var i = 0; i < connectorTypes.length; i++) { - for (var j = 0; j < rendererTypes.length; j++) { - _oneType(rendererTypes[j], connectorTypes[i][1], connectorTypes[i][0]); - } - - } - jsPlumb.connectorsInitialized = true; - } - - if (!initialized) { - _currentInstance.anchorManager = new jsPlumb.AnchorManager({jsPlumbInstance:_currentInstance}); - _currentInstance.setRenderMode(_currentInstance.Defaults.RenderMode); // calling the method forces the capability logic to be run. - initialized = true; - _currentInstance.fire("ready", _currentInstance); - } - }.bind(this); - - this.log = log; - this.jsPlumbUIComponent = jsPlumbUIComponent; - - /* - * Creates an anchor with the given params. - * - * - * Returns: The newly created Anchor. - * Throws: an error if a named anchor was not found. - */ - this.makeAnchor = function() { - var _a = function(t, p) { - if (jsPlumb.Anchors[t]) return new jsPlumb.Anchors[t](p); - if (!_currentInstance.Defaults.DoNotThrowErrors) - throw { msg:"jsPlumb: unknown anchor type '" + t + "'" }; - }; - if (arguments.length === 0) return null; - var specimen = arguments[0], elementId = arguments[1], jsPlumbInstance = arguments[2], newAnchor = null; - // if it appears to be an anchor already... - if (specimen.compute && specimen.getOrientation) return specimen; //TODO hazy here about whether it should be added or is already added somehow. - // is it the name of an anchor type? - else if (typeof specimen == "string") { - newAnchor = _a(arguments[0], {elementId:elementId, jsPlumbInstance:_currentInstance}); - } - // is it an array? it will be one of: - // an array of [name, params] - this defines a single anchor - // an array of arrays - this defines some dynamic anchors - // an array of numbers - this defines a single anchor. - else if (_ju.isArray(specimen)) { - if (_ju.isArray(specimen[0]) || _ju.isString(specimen[0])) { - if (specimen.length == 2 && _ju.isString(specimen[0]) && _ju.isObject(specimen[1])) { - var pp = jsPlumb.extend({elementId:elementId, jsPlumbInstance:_currentInstance}, specimen[1]); - newAnchor = _a(specimen[0], pp); - } - else - newAnchor = new jsPlumb.DynamicAnchor({anchors:specimen, selector:null, elementId:elementId, jsPlumbInstance:jsPlumbInstance}); - } - else { - var anchorParams = { - x:specimen[0], y:specimen[1], - orientation : (specimen.length >= 4) ? [ specimen[2], specimen[3] ] : [0,0], - offsets : (specimen.length >= 6) ? [ specimen[4], specimen[5] ] : [ 0, 0 ], - elementId:elementId, - jsPlumbInstance:jsPlumbInstance, - cssClass:specimen.length == 7 ? specimen[6] : null - }; - newAnchor = new jsPlumb.Anchor(anchorParams); - newAnchor.clone = function() { return new jsPlumb.Anchor(anchorParams); }; - } - } - - if (!newAnchor.id) newAnchor.id = "anchor_" + _idstamp(); - return newAnchor; - }; - - /** - * makes a list of anchors from the given list of types or coords, eg - * ["TopCenter", "RightMiddle", "BottomCenter", [0, 1, -1, -1] ] - */ - this.makeAnchors = function(types, elementId, jsPlumbInstance) { - var r = []; - for ( var i = 0, ii = types.length; i < ii; i++) { - if (typeof types[i] == "string") - r.push(jsPlumb.Anchors[types[i]]({elementId:elementId, jsPlumbInstance:jsPlumbInstance})); - else if (_ju.isArray(types[i])) - r.push(_currentInstance.makeAnchor(types[i], elementId, jsPlumbInstance)); - } - return r; - }; - - /** - * Makes a dynamic anchor from the given list of anchors (which may be in shorthand notation as strings or dimension arrays, or Anchor - * objects themselves) and the given, optional, anchorSelector function (jsPlumb uses a default if this is not provided; most people will - * not need to provide this - i think). - */ - this.makeDynamicAnchor = function(anchors, anchorSelector) { - return new jsPlumb.DynamicAnchor({anchors:anchors, selector:anchorSelector, elementId:null, jsPlumbInstance:_currentInstance}); - }; - -// --------------------- makeSource/makeTarget ---------------------------------------------- - - var _targetEndpointDefinitions = {}, - _targetEndpoints = {}, - _targetEndpointsUnique = {}, - _targetMaxConnections = {}, - _setEndpointPaintStylesAndAnchor = function(ep, epIndex) { - ep.paintStyle = ep.paintStyle || - _currentInstance.Defaults.EndpointStyles[epIndex] || - _currentInstance.Defaults.EndpointStyle || - jsPlumb.Defaults.EndpointStyles[epIndex] || - jsPlumb.Defaults.EndpointStyle; - ep.hoverPaintStyle = ep.hoverPaintStyle || - _currentInstance.Defaults.EndpointHoverStyles[epIndex] || - _currentInstance.Defaults.EndpointHoverStyle || - jsPlumb.Defaults.EndpointHoverStyles[epIndex] || - jsPlumb.Defaults.EndpointHoverStyle; - - ep.anchor = ep.anchor || - _currentInstance.Defaults.Anchors[epIndex] || - _currentInstance.Defaults.Anchor || - jsPlumb.Defaults.Anchors[epIndex] || - jsPlumb.Defaults.Anchor; - - ep.endpoint = ep.endpoint || - _currentInstance.Defaults.Endpoints[epIndex] || - _currentInstance.Defaults.Endpoint || - jsPlumb.Defaults.Endpoints[epIndex] || - jsPlumb.Defaults.Endpoint; - }, - // TODO put all the source stuff inside one parent, keyed by id. - _sourceEndpointDefinitions = {}, - _sourceEndpoints = {}, - _sourceEndpointsUnique = {}, - _sourcesEnabled = {}, - _sourceTriggers = {}, - _sourceMaxConnections = {}, - _targetsEnabled = {}, - selectorFilter = function(evt, _el, selector) { - var t = evt.target || evt.srcElement, ok = false, - sel = _currentInstance.getSelector(_el, selector); - for (var j = 0; j < sel.length; j++) { - if (sel[j] == t) { - ok = true; - break; - } - } - return ok; - }; - - // see API docs - this.makeTarget = function(el, params, referenceParams) { - - // put jsplumb ref into params without altering the params passed in - var p = jsPlumb.extend({_jsPlumb:_currentInstance}, referenceParams); - jsPlumb.extend(p, params); - - // calculate appropriate paint styles and anchor from the params given - _setEndpointPaintStylesAndAnchor(p, 1); - - var jpcl = jsPlumb.CurrentLibrary, - targetScope = p.scope || _currentInstance.Defaults.Scope, - deleteEndpointsOnDetach = !(p.deleteEndpointsOnDetach === false), - maxConnections = p.maxConnections || -1, - onMaxConnections = p.onMaxConnections; - - _doOne = function(el) { - - // get the element's id and store the endpoint definition for it. jsPlumb.connect calls will look for one of these, - // and use the endpoint definition if found. - // decode the info for this element (id and element) - var elInfo = _info(el), - elid = elInfo.id, - proxyComponent = new jsPlumbUIComponent(p), - dropOptions = jsPlumb.extend({}, p.dropOptions || {}); - - // store the definitions keyed against the element id. - _targetEndpointDefinitions[elid] = p; - _targetEndpointsUnique[elid] = p.uniqueEndpoint; - _targetMaxConnections[elid] = maxConnections; - _targetsEnabled[elid] = true; - - var _drop = function() { - _currentInstance.currentlyDragging = false; - var originalEvent = jsPlumb.CurrentLibrary.getDropEvent(arguments), - targetCount = _currentInstance.select({target:elid}).length, - draggable = _gel(jpcl.getDragObject(arguments)), - id = _currentInstance.getAttribute(draggable, "dragId"), - scope = _currentInstance.getAttribute(draggable, "originalScope"), - jpc = floatingConnections[id], - idx = jpc.endpoints[0].isFloating() ? 0 : 1, - // this is not necessarily correct. if the source is being dragged, - // then the source endpoint is actually the currently suspended endpoint. - source = jpc.endpoints[0], - _endpoint = p.endpoint ? jsPlumb.extend({}, p.endpoint) : {}; - - if (!_targetsEnabled[elid] || _targetMaxConnections[elid] > 0 && targetCount >= _targetMaxConnections[elid]){ - if (onMaxConnections) { - // TODO here we still have the id of the floating element, not the - // actual target. - onMaxConnections({ - element:elInfo.el, - connection:jpc - }, originalEvent); - } - return false; - } - - // unlock the source anchor to allow it to refresh its position if necessary - source.anchor.locked = false; - - // restore the original scope if necessary (issue 57) - if (scope) jpcl.setDragScope(draggable, scope); - - // check if drop is allowed here. - // if the source is being dragged then in fact - // the source and target ids to pass into the drop interceptor are - // source - elid - // target - jpc's targetId - // - // otherwise the ids are - // source - jpc.sourceId - // target - elid - // - var _continue = proxyComponent.isDropAllowed(idx === 0 ? elid : jpc.sourceId, idx === 0 ? jpc.targetId : elid, jpc.scope, jpc, null); - - // reinstate any suspended endpoint; this just puts the connection back into - // a state in which it will report sensible values if someone asks it about - // its target. we're going to throw this connection away shortly so it doesnt matter - // if we manipulate it a bit. - if (jpc.suspendedEndpoint) { - jpc[idx ? "targetId" : "sourceId"] = jpc.suspendedEndpoint.elementId; - jpc[idx ? "target" : "source"] = jpc.suspendedEndpoint.element; - jpc.endpoints[idx] = jpc.suspendedEndpoint; - } - - if (_continue) { - - // make a new Endpoint for the target - var _el = jpcl.getElementObject(elInfo.el), - newEndpoint = _targetEndpoints[elid] || _currentInstance.addEndpoint(_el, p); - - if (p.uniqueEndpoint) _targetEndpoints[elid] = newEndpoint; // may of course just store what it just pulled out. that's ok. - // TODO test options to makeTarget to see if we should do this? - newEndpoint._doNotDeleteOnDetach = false; // reset. - newEndpoint._deleteOnDetach = true; - - // if the anchor has a 'positionFinder' set, then delegate to that function to find - // out where to locate the anchor. - if (newEndpoint.anchor.positionFinder != null) { - var dropPosition = jpcl.getUIPosition(arguments, _currentInstance.getZoom()), - elPosition = _getOffset(_el, _currentInstance), - elSize = _getSize(_el), - ap = newEndpoint.anchor.positionFinder(dropPosition, elPosition, elSize, newEndpoint.anchor.constructorParams); - newEndpoint.anchor.x = ap[0]; - newEndpoint.anchor.y = ap[1]; - // now figure an orientation for it..kind of hard to know what to do actually. probably the best thing i can do is to - // support specifying an orientation in the anchor's spec. if one is not supplied then i will make the orientation - // be what will cause the most natural link to the source: it will be pointing at the source, but it needs to be - // specified in one axis only, and so how to make that choice? i think i will use whichever axis is the one in which - // the target is furthest away from the source. - } - - // change the target endpoint and target element information. really this should be - // done on a method on connection - jpc[idx ? "target" : "source"] = newEndpoint.element; - jpc[idx ? "targetId" : "sourceId"] = newEndpoint.elementId; - jpc.endpoints[idx].detachFromConnection(jpc); - if (jpc.endpoints[idx]._deleteOnDetach) - jpc.endpoints[idx].deleteAfterDragStop = true; // tell this endpoint to delet itself after drag stop. - // set new endpoint, and configure the settings for endpoints to delete on detach - newEndpoint.addConnection(jpc); - jpc.endpoints[idx] = newEndpoint; - jpc.deleteEndpointsOnDetach = deleteEndpointsOnDetach; - - // inform the anchor manager to update its target endpoint for this connection. - // TODO refactor to make this a single method. - if (idx == 1) - _currentInstance.anchorManager.updateOtherEndpoint(jpc.sourceId, jpc.suspendedElementId, jpc.targetId, jpc); - else - _currentInstance.anchorManager.sourceChanged(jpc.suspendedEndpoint.elementId, jpc.sourceId, jpc); - - _finaliseConnection(jpc, null, originalEvent); - - } - // if not allowed to drop... - else { - // TODO this code is identical (pretty much) to what happens when a connection - // dragged from a normal endpoint is in this situation. refactor. - // is this an existing connection, and will we reattach? - // TODO also this assumes the source needs to detach - is that always valid? - if (jpc.suspendedEndpoint) { - if (jpc.isReattach()) { - jpc.setHover(false); - jpc.floatingAnchorIndex = null; - jpc.suspendedEndpoint.addConnection(jpc); - _currentInstance.repaint(source.elementId); - } - else - source.detach(jpc, false, true, true, originalEvent); // otherwise, detach the connection and tell everyone about it. - } - - } - }; - - // wrap drop events as needed and initialise droppable - var dropEvent = jpcl.dragEvents.drop; - dropOptions.scope = dropOptions.scope || targetScope; - dropOptions[dropEvent] = _ju.wrap(dropOptions[dropEvent], _drop); - jpcl.initDroppable(_gel(elInfo.el), dropOptions, true); - }; - - // YUI collection fix - el = _convertYUICollection(el); - // make an array if only given one element - var inputs = el.length && el.constructor != String ? el : [ el ]; - - // register each one in the list. - for (var i = 0, ii = inputs.length; i < ii; i++) { - _doOne(inputs[i]); - } - - return _currentInstance; - }; - - // see api docs - this.unmakeTarget = function(el, doNotClearArrays) { - var info = _info(el); - - jsPlumb.CurrentLibrary.destroyDroppable(info.el); - // TODO this is not an exhaustive unmake of a target, since it does not remove the droppable stuff from - // the element. the effect will be to prevent it from behaving as a target, but it's not completely purged. - if (!doNotClearArrays) { - delete _targetEndpointDefinitions[info.id]; - delete _targetEndpointsUnique[info.id]; - delete _targetMaxConnections[info.id]; - delete _targetsEnabled[info.id]; - } - - return _currentInstance; - }; - - // see api docs - this.makeSource = function(el, params, referenceParams) { - var p = jsPlumb.extend({}, referenceParams); - jsPlumb.extend(p, params); - _setEndpointPaintStylesAndAnchor(p, 0); - var jpcl = jsPlumb.CurrentLibrary, - maxConnections = p.maxConnections || -1, - onMaxConnections = p.onMaxConnections, - _doOne = function(elInfo) { - // get the element's id and store the endpoint definition for it. jsPlumb.connect calls will look for one of these, - // and use the endpoint definition if found. - var elid = elInfo.id, - _el = _gel(elInfo.el), - parentElement = function() { - return p.parent == null ? null : p.parent === "parent" ? elInfo.el.parentNode : _dom(p.parent); - }, - idToRegisterAgainst = p.parent != null ? _currentInstance.getId(parentElement()) : elid; - - _sourceEndpointDefinitions[idToRegisterAgainst] = p; - _sourceEndpointsUnique[idToRegisterAgainst] = p.uniqueEndpoint; - _sourcesEnabled[idToRegisterAgainst] = true; - - var stopEvent = jpcl.dragEvents.stop, - dragEvent = jpcl.dragEvents.drag, - dragOptions = jsPlumb.extend({ }, p.dragOptions || {}), - existingDrag = dragOptions.drag, - existingStop = dragOptions.stop, - ep = null, - endpointAddedButNoDragYet = false; - - _sourceMaxConnections[idToRegisterAgainst] = maxConnections; - - // set scope if its not set in dragOptions but was passed in in params - dragOptions.scope = dragOptions.scope || p.scope; - - dragOptions[dragEvent] = _ju.wrap(dragOptions[dragEvent], function() { - if (existingDrag) existingDrag.apply(this, arguments); - endpointAddedButNoDragYet = false; - }); - - dragOptions[stopEvent] = _ju.wrap(dragOptions[stopEvent], function() { - - if (existingStop) existingStop.apply(this, arguments); - _currentInstance.currentlyDragging = false; - if (ep._jsPlumb != null) { // if not cleaned up... - - jpcl.unbind(ep.canvas, "mousedown"); - - // reset the anchor to the anchor that was initially provided. the one we were using to drag - // the connection was just a placeholder that was located at the place the user pressed the - // mouse button to initiate the drag. - var anchorDef = p.anchor || _currentInstance.Defaults.Anchor, - oldAnchor = ep.anchor, - oldConnection = ep.connections[0]; - - ep.setAnchor(_currentInstance.makeAnchor(anchorDef, elid, _currentInstance), true); - - if (p.parent) { - var parent = parentElement(); - if (parent) { - var currentId = ep.elementId, - potentialParent = p.container || _currentInstance.Defaults.Container || jsPlumb.Defaults.Container; - - ep.setElement(parent, potentialParent); - ep.endpointWillMoveAfterConnection = false; - //_currentInstance.anchorManager.rehomeEndpoint(ep, currentId, parent); - oldConnection.previousConnection = null; - // remove from connectionsByScope - jsPlumbUtil.removeWithFunction(connections, function(c) { - return c.id === oldConnection.id; - }); - _currentInstance.anchorManager.connectionDetached({ - sourceId:oldConnection.sourceId, - targetId:oldConnection.targetId, - connection:oldConnection - }); - _finaliseConnection(oldConnection); - } - } - - ep.repaint(); - _currentInstance.repaint(ep.elementId); - _currentInstance.repaint(oldConnection.targetId); - } - }); - // when the user presses the mouse, add an Endpoint, if we are enabled. - var mouseDownListener = function(e) { - - // if disabled, return. - if (!_sourcesEnabled[idToRegisterAgainst]) return; - - // if a filter was given, run it, and return if it says no. - if (p.filter) { - var evt = jpcl.getOriginalEvent(e), - r = jsPlumbUtil.isString(p.filter) ? selectorFilter(evt, _el, p.filter) : p.filter(evt, _el); - - if (r === false) return; - } - - // if maxConnections reached - var sourceCount = _currentInstance.select({source:idToRegisterAgainst}).length; - if (_sourceMaxConnections[idToRegisterAgainst] >= 0 && sourceCount >= _sourceMaxConnections[idToRegisterAgainst]) { - if (onMaxConnections) { - onMaxConnections({ - element:_el, - maxConnections:maxConnections - }, e); - } - return false; - } - - // make sure we have the latest offset for this div - var myOffsetInfo = _updateOffset({elId:elid}).o, - z = _currentInstance.getZoom(), - x = ( ((e.pageX || e.page.x) / z) - myOffsetInfo.left) / myOffsetInfo.width, - y = ( ((e.pageY || e.page.y) / z) - myOffsetInfo.top) / myOffsetInfo.height, - parentX = x, - parentY = y; - - // if there is a parent, the endpoint will actually be added to it now, rather than the div - // that was the source. in that case, we have to adjust the anchor position so it refers to - // the parent. - if (p.parent) { - var pEl = parentElement(), pId = _getId(pEl); - myOffsetInfo = _updateOffset({elId:pId}).o; - parentX = ((e.pageX || e.page.x) - myOffsetInfo.left) / myOffsetInfo.width; - parentY = ((e.pageY || e.page.y) - myOffsetInfo.top) / myOffsetInfo.height; - } - - // we need to override the anchor in here, and force 'isSource', but we don't want to mess with - // the params passed in, because after a connection is established we're going to reset the endpoint - // to have the anchor we were given. - var tempEndpointParams = {}; - jsPlumb.extend(tempEndpointParams, p); - tempEndpointParams.isSource = true; - tempEndpointParams.anchor = [x,y,0,0]; - tempEndpointParams.parentAnchor = [ parentX, parentY, 0, 0 ]; - tempEndpointParams.dragOptions = dragOptions; - // if a parent was given we need to turn that into a "container" argument. this is, by default, - // the parent of the element we will move to, so parent of p.parent in this case. however, if - // the user has specified a 'container' on the endpoint definition or on - // the defaults, we should use that. - if (p.parent) { - var potentialParent = tempEndpointParams.container || _currentInstance.Defaults.Container || jsPlumb.Defaults.Container; - if (potentialParent) - tempEndpointParams.container = potentialParent; - else - tempEndpointParams.container = jsPlumb.CurrentLibrary.getParent(parentElement()); - } - - ep = _currentInstance.addEndpoint(elid, tempEndpointParams); - - endpointAddedButNoDragYet = true; - // we set this to prevent connections from firing attach events before this function has had a chance - // to move the endpoint. - ep.endpointWillMoveAfterConnection = p.parent != null; - ep.endpointWillMoveTo = p.parent ? parentElement() : null; - - // TODO test options to makeSource to see if we should do this? - ep._doNotDeleteOnDetach = false; // reset. - ep._deleteOnDetach = true; - - var _delTempEndpoint = function() { - // this mouseup event is fired only if no dragging occurred, by jquery and yui, but for mootools - // it is fired even if dragging has occurred, in which case we would blow away a perfectly - // legitimate endpoint, were it not for this check. the flag is set after adding an - // endpoint and cleared in a drag listener we set in the dragOptions above. - if(endpointAddedButNoDragYet) { - endpointAddedButNoDragYet = false; - _currentInstance.deleteEndpoint(ep); - } - }; - - _currentInstance.registerListener(ep.canvas, "mouseup", _delTempEndpoint); - _currentInstance.registerListener(_el, "mouseup", _delTempEndpoint); - - // and then trigger its mousedown event, which will kick off a drag, which will start dragging - // a new connection from this endpoint. - jpcl.trigger(ep.canvas, "mousedown", e); - - }; - - // register this on jsPlumb so that it can be cleared by a reset. - _currentInstance.registerListener(_el, "mousedown", mouseDownListener); - _sourceTriggers[elid] = mouseDownListener; - - // lastly, if a filter was provided, set it as a dragFilter on the element, - // to prevent the element drag function from kicking in when we want to - // drag a new connection - if (p.filter && jsPlumbUtil.isString(p.filter)) { - jpcl.setDragFilter(_el, p.filter); - } - }; - - el = _convertYUICollection(el); - - var inputs = el.length && el.constructor != String ? el : [ el ]; - - for (var i = 0, ii = inputs.length; i < ii; i++) { - _doOne(_info(inputs[i])); - } - - return _currentInstance; - }; - - // see api docs - this.unmakeSource = function(el, doNotClearArrays) { - var info = _info(el), - mouseDownListener = _sourceTriggers[info.id]; - - if (mouseDownListener) - _currentInstance.unregisterListener(info.el, "mousedown", mouseDownListener); - - if (!doNotClearArrays) { - delete _sourceEndpointDefinitions[info.id]; - delete _sourceEndpointsUnique[info.id]; - delete _sourcesEnabled[info.id]; - delete _sourceTriggers[info.id]; - delete _sourceMaxConnections[info.id]; - } - - return _currentInstance; - }; - - // see api docs - this.unmakeEverySource = function() { - for (var i in _sourcesEnabled) - _currentInstance.unmakeSource(i, true); - - _sourceEndpointDefinitions = {}; - _sourceEndpointsUnique = {}; - _sourcesEnabled = {}; - _sourceTriggers = {}; - }; - - // see api docs - this.unmakeEveryTarget = function() { - for (var i in _targetsEnabled) - _currentInstance.unmakeTarget(i, true); - - _targetEndpointDefinitions = {}; - _targetEndpointsUnique = {}; - _targetMaxConnections = {}; - _targetsEnabled = {}; - - return _currentInstance; - }; - - // does the work of setting a source enabled or disabled. - var _setEnabled = function(type, el, state, toggle) { - var a = type == "source" ? _sourcesEnabled : _targetsEnabled; - el = _convertYUICollection(el); - - if (_ju.isString(el)) a[el] = toggle ? !a[el] : state; - else if (el.length) { - for (var i = 0, ii = el.length; i < ii; i++) { - var info = _info(el[i]); - a[info.id] = toggle ? !a[info.id] : state; - } - } - return _currentInstance; - }; - - this.toggleSourceEnabled = function(el) { - _setEnabled("source", el, null, true); - return _currentInstance.isSourceEnabled(el); - }; - - this.setSourceEnabled = function(el, state) { return _setEnabled("source", el, state); }; - this.isSource = function(el) { return _sourcesEnabled[_info(el).id] != null; }; - this.isSourceEnabled = function(el) { return _sourcesEnabled[_info(el).id] === true; }; - - this.toggleTargetEnabled = function(el) { - _setEnabled("target", el, null, true); - return _currentInstance.isTargetEnabled(el); - }; - - this.isTarget = function(el) { return _targetsEnabled[_info(el).id] != null; }; - this.isTargetEnabled = function(el) { return _targetsEnabled[_info(el).id] === true; }; - this.setTargetEnabled = function(el, state) { return _setEnabled("target", el, state); }; - -// --------------------- end makeSource/makeTarget ---------------------------------------------- - - this.ready = function(fn) { - _currentInstance.bind("ready", fn); - }; - - // repaint some element's endpoints and connections - this.repaint = function(el, ui, timestamp) { - // support both lists... - if (typeof el == 'object' && el.length) - for ( var i = 0, ii = el.length; i < ii; i++) { - _draw(el[i], ui, timestamp); - } - else // ...and single strings. - _draw(el, ui, timestamp); - - return _currentInstance; - }; - - // repaint every endpoint and connection. - this.repaintEverything = function() { - // TODO this timestamp causes continuous anchors to not repaint properly. - // fix this. do not just take out the timestamp. it runs a lot faster with - // the timestamp included. - var timestamp = _timestamp(); - for ( var elId in endpointsByElement) { - _draw(elId, null, timestamp); - } - return _currentInstance; - /*for (var i = 0; i < connections.length; i++) - connections[i].repaint({timestamp:timestamp});*/ - }; - - - this.removeAllEndpoints = function(el, recurse) { - var _one = function(_el) { - var info = _info(_el), - ebe = endpointsByElement[info.id], - i, ii; - - if (ebe) { - for ( i = 0, ii = ebe.length; i < ii; i++) - _currentInstance.deleteEndpoint(ebe[i]); - } - delete endpointsByElement[info.id]; - - if (recurse) { - if (info.el && info.el.nodeType != 3 && info.el.nodeType != 8 ) { - for ( i = 0, ii = info.el.childNodes.length; i < ii; i++) { - _one(info.el.childNodes[i]); - } - } - } - - }; - _one(el); - return _currentInstance; - }; - - /** - * Remove the given element, including cleaning up all endpoints registered for it. - * This is exposed in the public API but also used internally by jsPlumb when removing the - * element associated with a connection drag. - */ - this.remove = function(el, doNotRepaint) { - var info = _info(el); - _currentInstance.doWhileSuspended(function() { - _currentInstance.removeAllEndpoints(info.id, true); - _currentInstance.dragManager.elementRemoved(info.id); - delete floatingConnections[info.id]; - _currentInstance.anchorManager.clearFor(info.id); - _currentInstance.anchorManager.removeFloatingConnection(info.id); - }, doNotRepaint === false); - if(info.el) jsPlumb.CurrentLibrary.removeElement(info.el); - }; - - var _registeredListeners = {}, - _unbindRegisteredListeners = function() { - for (var i in _registeredListeners) { - for (var j = 0, jj = _registeredListeners[i].length; j < jj; j++) { - var info = _registeredListeners[i][j]; - jsPlumb.CurrentLibrary.unbind(info.el, info.event, info.listener); - } - } - _registeredListeners = {}; - }; - - // internal register listener method. gives us a hook to clean things up - // with if the user calls jsPlumb.reset. - this.registerListener = function(el, type, listener) { - jsPlumb.CurrentLibrary.bind(el, type, listener); - jsPlumbUtil.addToList(_registeredListeners, type, {el:el, event:type, listener:listener}); - }; - - this.unregisterListener = function(el, type, listener) { - jsPlumb.CurrentLibrary.unbind(el, type, listener); - jsPlumbUtil.removeWithFunction(_registeredListeners, function(rl) { - return rl.type == type && rl.listener == listener; - }); - }; - - this.reset = function() { - _currentInstance.deleteEveryEndpoint(); - _currentInstance.unbind(); - _targetEndpointDefinitions = {}; - _targetEndpoints = {}; - _targetEndpointsUnique = {}; - _targetMaxConnections = {}; - _sourceEndpointDefinitions = {}; - _sourceEndpoints = {}; - _sourceEndpointsUnique = {}; - _sourceMaxConnections = {}; - connections.splice(0); - _unbindRegisteredListeners(); - _currentInstance.anchorManager.reset(); - if (!jsPlumbAdapter.headless) - _currentInstance.dragManager.reset(); - }; - - - this.setDefaultScope = function(scope) { - DEFAULT_SCOPE = scope; - return _currentInstance; - }; - - // sets whether or not some element should be currently draggable. - this.setDraggable = _setDraggable; - - // sets the id of some element, changing whatever we need to to keep track. - this.setId = function(el, newId, doNotSetAttribute) { - // - var id; - - if (jsPlumbUtil.isString(el)) { - id = el; - } - else { - el = _dom(el); - id = _currentInstance.getId(el); - } - - var sConns = _currentInstance.getConnections({source:id, scope:'*'}, true), - tConns = _currentInstance.getConnections({target:id, scope:'*'}, true); - - newId = "" + newId; - - if (!doNotSetAttribute) { - el = _dom(id); - jsPlumbAdapter.setAttribute(el, "id", newId); - } - else - el = _dom(newId); - - endpointsByElement[newId] = endpointsByElement[id] || []; - for (var i = 0, ii = endpointsByElement[newId].length; i < ii; i++) { - endpointsByElement[newId][i].setElementId(newId); - endpointsByElement[newId][i].setReferenceElement(el); - } - delete endpointsByElement[id]; - - _currentInstance.anchorManager.changeId(id, newId); - if (!jsPlumbAdapter.headless) - _currentInstance.dragManager.changeId(id, newId); - - var _conns = function(list, epIdx, type) { - for (var i = 0, ii = list.length; i < ii; i++) { - list[i].endpoints[epIdx].setElementId(newId); - list[i].endpoints[epIdx].setReferenceElement(el); - list[i][type + "Id"] = newId; - list[i][type] = el; - } - }; - _conns(sConns, 0, "source"); - _conns(tConns, 1, "target"); - - _currentInstance.repaint(newId); - }; - - this.setDebugLog = function(debugLog) { - log = debugLog; - }; - - this.setSuspendDrawing = function(val, repaintAfterwards) { - var curVal = _suspendDrawing; - _suspendDrawing = val; - if (val) _suspendedAt = new Date().getTime(); else _suspendedAt = null; - if (repaintAfterwards) _currentInstance.repaintEverything(); - return curVal; - }; - - // returns whether or not drawing is currently suspended. - this.isSuspendDrawing = function() { - return _suspendDrawing; - }; - - // return timestamp for when drawing was suspended. - this.getSuspendedAt = function() { return _suspendedAt; }; - - /** - * @doc function - * @name jsPlumb.class:doWhileSuspended - * @param {function} fn Function to run while suspended. - * @param {boolean} doNotRepaintAfterwards If true, jsPlumb won't run a full repaint. Otherwise it will. - * @description Suspends drawing, runs the given function, then re-enables drawing (and repaints, unless you tell it not to) - */ - this.doWhileSuspended = function(fn, doNotRepaintAfterwards) { - var _wasSuspended = _currentInstance.isSuspendDrawing(); - if (!_wasSuspended) - _currentInstance.setSuspendDrawing(true); - try { - fn(); - } - catch (e) { - _ju.log("Function run while suspended failed", e); - } - if (!_wasSuspended) - _currentInstance.setSuspendDrawing(false, !doNotRepaintAfterwards); - }; - - this.updateOffset = _updateOffset; - this.getOffset = function(elId) { return offsets[elId]; }; - this.getSize = function(elId) { return sizes[elId]; }; - this.getCachedData = _getCachedData; - this.timestamp = _timestamp; - - - - /** - * @doc function - * @name jsPlumb.class:setRenderMode - * @param {string} mode One of `jsPlumb.SVG, `jsPlumb.VML` or `jsPlumb.CANVAS`. - * @description Sets render mode. jsPlumb will fall back to VML if it determines that - * what you asked for is not supported (and that VML is). If you asked for VML but the browser does - * not support it, jsPlumb uses SVG. - * @return {string} The render mode that jsPlumb set, which of course may be different from that requested. - */ - this.setRenderMode = function(mode) { - renderMode = jsPlumbAdapter.setRenderMode(mode); - var i, ii; - // only add this if the renderer is canvas; we dont want these listeners registered on te - // entire document otherwise. - if (renderMode == jsPlumb.CANVAS) { - var bindOne = function(event) { - jsPlumb.CurrentLibrary.bind(document, event, function(e) { - if (!_currentInstance.currentlyDragging && renderMode == jsPlumb.CANVAS) { - // try connections first - for (i = 0, ii = connections.length; i < ii; i++ ) { - var t = connections[i].getConnector()[event](e); - if (t) return; - } - for (var el in endpointsByElement) { - var ee = endpointsByElement[el]; - for ( i = 0, ii = ee.length; i < ii; i++ ) { - if (ee[i].endpoint[event] && ee[i].endpoint[event](e)) return; - } - } - } - }); - }; - bindOne("click");bindOne("dblclick");bindOne("mousemove");bindOne("mousedown");bindOne("mouseup");bindOne("contextmenu"); - } - - return renderMode; - }; - - /** - * @doc function - * @name jsPlumb.class:getRenderMode - * @description Gets the current render mode for this instance of jsPlumb. - * @return {string} The current render mode - "canvas", "svg" or "vml". - */ - this.getRenderMode = function() { return renderMode; }; - - this.show = function(el, changeEndpoints) { - _setVisible(el, "block", changeEndpoints); - return _currentInstance; - }; - - /** - * gets some test hooks. nothing writable. - */ - this.getTestHarness = function() { - return { - endpointsByElement : endpointsByElement, - endpointCount : function(elId) { - var e = endpointsByElement[elId]; - return e ? e.length : 0; - }, - connectionCount : function(scope) { - scope = scope || DEFAULT_SCOPE; - var c = _currentInstance.getConnections({scope:scope}); - return c ? c.length : 0; - }, - getId : _getId, - makeAnchor:self.makeAnchor, - makeDynamicAnchor:self.makeDynamicAnchor - }; - }; - - - // TODO: update this method to return the current state. - this.toggleVisible = _toggleVisible; - this.toggleDraggable = _toggleDraggable; - this.addListener = this.bind; - - /* - helper method to take an xy location and adjust it for the parent's offset and scroll. - */ - this.adjustForParentOffsetAndScroll = function(xy, el) { - - var offsetParent = null, result = xy; - if (el.tagName.toLowerCase() === "svg" && el.parentNode) { - offsetParent = el.parentNode; - } - else if (el.offsetParent) { - offsetParent = el.offsetParent; - } - if (offsetParent != null) { - var po = offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : _getOffset(offsetParent, _currentInstance), - so = offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : {left:offsetParent.scrollLeft, top:offsetParent.scrollTop}; - - // i thought it might be cool to do this: - // lastReturnValue[0] = lastReturnValue[0] - offsetParent.offsetLeft + offsetParent.scrollLeft; - // lastReturnValue[1] = lastReturnValue[1] - offsetParent.offsetTop + offsetParent.scrollTop; - // but i think it ignores margins. my reasoning was that it's quicker to not hand off to some underlying - // library. - - result[0] = xy[0] - po.left + so.left; - result[1] = xy[1] - po.top + so.top; - } - - return result; - - }; - - if (!jsPlumbAdapter.headless) { - _currentInstance.dragManager = jsPlumbAdapter.getDragManager(_currentInstance); - _currentInstance.recalculateOffsets = _currentInstance.dragManager.updateOffsets; - } - - }; - - jsPlumbUtil.extend(jsPlumbInstance, jsPlumbUtil.EventGenerator, { - setAttribute : function(el, a, v) { - jsPlumbAdapter.setAttribute(el, a, v); - }, - getAttribute : function(el, a) { - return jsPlumbAdapter.getAttribute(jsPlumb.CurrentLibrary.getDOMElement(el), a); - }, - registerConnectionType : function(id, type) { - this._connectionTypes[id] = jsPlumb.extend({}, type); - }, - /** - * @doc function - * @name jsPlumb.class:registerConnectionTypes - * @param {object} types Object containing the type specifications. - * @description - * Registers all of the given connection types on this instance of jsPlumb. `types` is expected - * to contain keys with typeids and values with type specification objects. - */ - registerConnectionTypes : function(types) { - for (var i in types) - this._connectionTypes[i] = jsPlumb.extend({}, types[i]); - }, - /** - * @doc function - * @name jsPlumb.class:registerEndpointType - * @param {string} typeId Id of the type - * @param {object} type Object containing the type specification. - * @description - * Registers the given endpoint type on this instance of jsPlumb. - */ - registerEndpointType : function(id, type) { - this._endpointTypes[id] = jsPlumb.extend({}, type); - }, - /** - * @doc function - * @name jsPlumb.class:registerEndpointTypes - * @param {object} types Object containing the type specifications. - * @description - * Registers all of the given endpoint types on this instance of jsPlumb. `types` is expected - * to contain keys with typeids and values with type specification objects. - */ - registerEndpointTypes : function(types) { - for (var i in types) - this._endpointTypes[i] = jsPlumb.extend({}, types[i]); - }, - /** - * @doc function - * @name jsPlumb.class:getType - * @param {string} id Id of the type to retrieve - * @param {string} typeDescriptor `"connection"` or `"endpoint"` - the type of Type to get. - * @description - * Returns the given type's specification. - * @return {object} Type specification, it if exists, null otherwise. - */ - getType : function(id, typeDescriptor) { - return typeDescriptor === "connection" ? this._connectionTypes[id] : this._endpointTypes[id]; - }, - /** - * @doc function - * @name jsPlumb.class:setIdChanged - * @param {oldId} string Previous id - * @param {newId} string Element's new id. - * @description called to notify us that an id WAS changed, and we should do our changes, but we - * dont need to change the element's DOM attribute. note that this does not work if the an element with - * the new id is not in the DOM. - */ - setIdChanged : function(oldId, newId) { - this.setId(oldId, newId, true); - } - }); - -// --------------------- static instance + AMD registration ------------------------------------------- - -// create static instance and assign to window if window exists. - var jsPlumb = new jsPlumbInstance(); - // register on window if defined (lets us run on server) - if (typeof window != 'undefined') window.jsPlumb = jsPlumb; - // add 'getInstance' method to static instance - /** - * @name jsPlumb.getInstance - * @param {object} [_defaults] Optional default settings for the new instance. - * @desc Gets a new instance of jsPlumb. - */ - jsPlumb.getInstance = function(_defaults) { - var j = new jsPlumbInstance(_defaults); - j.init(); - return j; - }; -// maybe register static instance as an AMD module, and getInstance method too. - if ( typeof define === "function") { - define( "jsplumb", [], function () { return jsPlumb; } ); - define( "jsplumbinstance", [], function () { return jsPlumb.getInstance(); } ); - } - // CommonJS - if (typeof exports !== 'undefined') { - exports.jsPlumb = jsPlumb; - } - - -// --------------------- end static instance + AMD registration ------------------------------------------- - -})(); - - -;(function() { - - // create the drag handler for a connection - 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(n); - _jsPlumb.updateOffset( { elId : id }); - // create and assign an id, and initialize the offset. - placeholder.id = id; - placeholder.element = n;//placeholderDragElement; - }; - - // create a floating endpoint (for drag connections) - 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" }); - }; - - var typeParameters = [ "connectorStyle", "connectorHoverStyle", "connectorOverlays", - "connector", "connectionType", "connectorClass", "connectorHoverClass" ]; - - // 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(ep, elementWithPrecedence) { - var idx = 0; - if (elementWithPrecedence != null) { - for (var i = 0; i < ep.connections.length; i++) { - if (ep.connections[i].sourceId == elementWithPrecedence || ep.connections[i].targetId == elementWithPrecedence) { - idx = i; - break; - } - } - } - - return ep.connections[idx]; - }; - - var findConnectionIndex = function(conn, ep) { - return jsPlumbUtil.findWithFunction(ep.connections, function(c) { return c.id == conn.id; }); - }; - - jsPlumb.Endpoint = function(params) { - var _jsPlumb = params._jsPlumb, - jpcl = jsPlumb.CurrentLibrary, - _att = jsPlumbAdapter.getAttribute, - _gel = jpcl.getElementObject, - _dom = jpcl.getDOMElement, - _ju = jsPlumbUtil, - _newConnection = params.newConnection, - _newEndpoint = params.newEndpoint, - _finaliseConnection = params.finaliseConnection, - _fireDetachEvent = params.fireDetachEvent, - floatingConnections = params.floatingConnections; - - this.idPrefix = "_jsplumb_e_"; - this.defaultLabelLocation = [ 0.5, 0.5 ]; - this.defaultOverlayKeys = ["Overlays", "EndpointOverlays"]; - this.parent = params.parent; - OverlayCapableJsPlumbUIComponent.apply(this, arguments); - -// TYPE - - this.getDefaultType = function() { - return { - parameters:{}, - scope:null, - maxConnections:this._jsPlumb.instance.Defaults.MaxConnections, - paintStyle:this._jsPlumb.instance.Defaults.EndpointStyle || jsPlumb.Defaults.EndpointStyle, - endpoint:this._jsPlumb.instance.Defaults.Endpoint || jsPlumb.Defaults.Endpoint, - hoverPaintStyle:this._jsPlumb.instance.Defaults.EndpointHoverStyle || jsPlumb.Defaults.EndpointHoverStyle, - overlays:this._jsPlumb.instance.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 - }; - }; - -// END TYPE - - this._jsPlumb.enabled = !(params.enabled === false); - this._jsPlumb.visible = true; - this.element = _dom(params.source); - this._jsPlumb.uuid = params.uuid; - this._jsPlumb.floatingEndpoint = null; - var inPlaceCopy = null; - if (this._jsPlumb.uuid) params.endpointsByUUID[this._jsPlumb.uuid] = this; - this.elementId = params.elementId; - - this._jsPlumb.connectionCost = params.connectionCost; - this._jsPlumb.connectionsDirected = params.connectionsDirected; - this._jsPlumb.currentAnchorClass = ""; - this._jsPlumb.events = {}; - - var _updateAnchorClass = function() { - jpcl.removeClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - this.removeClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - this._jsPlumb.currentAnchorClass = this.anchor.getCssClass(); - this.addClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - jpcl.addClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - }.bind(this); - - this.setAnchor = function(anchorParams, doNotRepaint) { - this._jsPlumb.instance.continuousAnchorFactory.clear(this.elementId); - this.anchor = this._jsPlumb.instance.makeAnchor(anchorParams, this.elementId, _jsPlumb); - _updateAnchorClass(); - this.anchor.bind("anchorChanged", function(currentAnchor) { - this.fire("anchorChanged", {endpoint:this, anchor:currentAnchor}); - _updateAnchorClass(); - }.bind(this)); - if (!doNotRepaint) - this._jsPlumb.instance.repaint(this.elementId); - return this; - }; - - var anchorParamsToUse = params.anchor ? params.anchor : params.anchors ? params.anchors : (_jsPlumb.Defaults.Anchor || "Top"); - this.setAnchor(anchorParamsToUse, true); - - // endpoint delegates to first connection for hover, if there is one. - var internalHover = function(state) { - if (this.connections.length > 0) - this.connections[0].setHover(state, false); - else - this.setHover(state); - }.bind(this); - - // 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. - this._jsPlumb.instance.anchorManager.add(this, this.elementId); - - this.setEndpoint = function(ep) { - - if (this.endpoint != null) { - this.endpoint.cleanup(); - this.endpoint.destroy(); - } - - var _e = function(t, p) { - var rm = _jsPlumb.getRenderMode(); - if (jsPlumb.Endpoints[rm][t]) return new jsPlumb.Endpoints[rm][t](p); - if (!_jsPlumb.Defaults.DoNotThrowErrors) - throw { msg:"jsPlumb: unknown endpoint type '" + t + "'" }; - }; - - var endpointArgs = { - _jsPlumb:this._jsPlumb.instance, - cssClass:params.cssClass, - parent:params.parent, - container:params.container, - tooltip:params.tooltip, - connectorTooltip:params.connectorTooltip, - endpoint:this - }; - if (_ju.isString(ep)) - this.endpoint = _e(ep, endpointArgs); - else if (_ju.isArray(ep)) { - endpointArgs = _ju.merge(ep[1], endpointArgs); - this.endpoint = _e(ep[0], endpointArgs); - } - else { - this.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); - this.endpoint.clone = function() { - // TODO this, and the code above, can be refactored to be more dry. - if (_ju.isString(ep)) - return _e(ep, endpointArgs); - else if (_ju.isArray(ep)) { - endpointArgs = _ju.merge(ep[1], endpointArgs); - return _e(ep[0], endpointArgs); - } - }.bind(this); - - this.type = this.endpoint.type; - // bind listeners from endpoint to self, with the internal hover function defined above. - this.bindListeners(this.endpoint, this, internalHover); - }; - - this.setEndpoint(params.endpoint || _jsPlumb.Defaults.Endpoint || jsPlumb.Defaults.Endpoint || "Dot"); - 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._jsPlumb.paintStyleInUse = this.getPaintStyle(); - - _ju.copyValues(typeParameters, params, this); - - this.isSource = params.isSource || false; - this.isTarget = params.isTarget || false; - this._jsPlumb.maxConnections = params.maxConnections || _jsPlumb.Defaults.MaxConnections; // maximum number of connections this endpoint can be the source of. - this.canvas = this.endpoint.canvas; - // add anchor class (need to do this on construction because we set anchor first) - this.addClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - jpcl.addClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - this.connections = params.connections || []; - this.connectorPointerEvents = params["connector-pointer-events"]; - - this.scope = params.scope || _jsPlumb.getDefaultScope(); - this.timestamp = null; - this.reattachConnections = params.reattach || _jsPlumb.Defaults.ReattachConnections; - this.connectionsDetachable = _jsPlumb.Defaults.ConnectionsDetachable; - if (params.connectionsDetachable === false || params.detachable === false) - this.connectionsDetachable = false; - this.dragAllowedWhenFull = params.dragAllowedWhenFull || true; - - if (params.onMaxConnections) - this.bind("maxConnections", params.onMaxConnections); - - // - // add a connection. not part of public API. - // - this.addConnection = function(connection) { - this.connections.push(connection); - this[(this.connections.length > 0 ? "add" : "remove") + "Class"](_jsPlumb.endpointConnectedClass); - this[(this.isFull() ? "add" : "remove") + "Class"](_jsPlumb.endpointFullClass); - }; - - this.detachFromConnection = function(connection, idx) { - idx = idx == null ? findConnectionIndex(connection, this) : idx; - if (idx >= 0) { - this.connections.splice(idx, 1); - this[(this.connections.length > 0 ? "add" : "remove") + "Class"](_jsPlumb.endpointConnectedClass); - this[(this.isFull() ? "add" : "remove") + "Class"](_jsPlumb.endpointFullClass); - } - }; - - this.detach = function(connection, ignoreTarget, forceDetach, fireEvent, originalEvent, endpointBeingDeleted, connectionIndex) { - - var idx = connectionIndex == null ? findConnectionIndex(connection, this) : connectionIndex, - actuallyDetached = false; - fireEvent = (fireEvent !== false); - - if (idx >= 0) { - if (forceDetach || connection._forceDetach || (connection.isDetachable() && connection.isDetachAllowed(connection) && this.isDetachAllowed(connection) )) { - - //connection.setHover(false); - - _jsPlumb.deleteObject({ - connection:connection, - fireEvent:(!ignoreTarget && fireEvent), - originalEvent:originalEvent - }); - actuallyDetached = true; - } - } - return actuallyDetached; - }; - - this.detachAll = function(fireEvent, originalEvent) { - while (this.connections.length > 0) { - // TODO this could pass the index in to the detach method to save some time (index will always be zero in this while loop) - // TODO now it defaults to fireEvent true. will that mess with things? - this.detach(this.connections[0], false, true, fireEvent !== false, originalEvent, this, 0); - } - return this; - }; - this.detachFrom = function(targetEndpoint, fireEvent, originalEvent) { - var c = []; - for ( var i = 0; i < this.connections.length; i++) { - if (this.connections[i].endpoints[1] == targetEndpoint || this.connections[i].endpoints[0] == targetEndpoint) { - c.push(this.connections[i]); - } - } - for ( var j = 0; j < c.length; j++) { - this.detach(c[j], false, true, fireEvent, originalEvent); - } - return this; - }; - - this.getElement = function() { - return this.element; - }; - - // container not supported in 1.5.2; you cannot change the container once it is set. - // it might come back int a future release. - this.setElement = function(el/*, container*/) { - var parentId = this._jsPlumb.instance.getId(el), - curId = this.elementId; - // remove the endpoint from the list for the current endpoint's element - _ju.removeWithFunction(params.endpointsByElement[this.elementId], function(e) { - return e.id == this.id; - }.bind(this)); - this.element = _dom(el); - this.elementId = _jsPlumb.getId(this.element); - _jsPlumb.anchorManager.rehomeEndpoint(this, curId, this.element); - _jsPlumb.dragManager.endpointAdded(this.element); - _ju.addToList(params.endpointsByElement, parentId, this); - return this; - }; - - /** - * private but must be exposed. - */ - this.makeInPlaceCopy = function() { - var loc = this.anchor.getCurrentLocation({element:this}), - o = this.anchor.getOrientation(this), - acc = this.anchor.getCssClass(), - inPlaceAnchor = { - bind:function() { }, - compute:function() { return [ loc[0], loc[1] ]; }, - getCurrentLocation : function() { return [ loc[0], loc[1] ]; }, - getOrientation:function() { return o; }, - getCssClass:function() { return acc; } - }; - - return _newEndpoint( { - anchor : inPlaceAnchor, - source : this.element, - paintStyle : this.getPaintStyle(), - endpoint : params.hideOnDrag ? "Blank" : this.endpoint, - _transient:true, - scope:this.scope - }); - }; - - - /** - * private but needs to be exposed. - */ - this.isFloating = function() { - return this.anchor != null && this.anchor.isFloating; - }; - - /** - * 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 = this.connections[0]; - if (this.isTarget && candidate) return candidate; - else { - return (this.connections.length < this._jsPlumb.maxConnections) || this._jsPlumb.maxConnections == -1 ? null : candidate; - } - }; - - this.setStyle = this.setPaintStyle; - - this.paint = function(params) { - params = params || {}; - var timestamp = params.timestamp, recalc = !(params.recalc === false); - if (!timestamp || this.timestamp !== timestamp) { - - // TODO check: is this is a safe performance enhancement? - var info = _jsPlumb.updateOffset({ elId:this.elementId, timestamp:timestamp/*, recalc:recalc*/ }); - //var info = _jsPlumb.updateOffset({ elId:_elementId, timestamp:timestamp, recalc:recalc }); - - var xy = params.offset ? params.offset.o : info.o; - if(xy != null) { - var ap = params.anchorPoint,connectorPaintStyle = params.connectorPaintStyle; - if (ap == null) { - var wh = params.dimensions || info.s, - anchorParams = { xy : [ xy.left, xy.top ], wh : wh, element : this, timestamp : timestamp }; - if (recalc && this.anchor.isDynamic && this.connections.length > 0) { - var c = findConnectionToUseForDynamicAnchor(this, params.elementWithPrecedence), - oIdx = c.endpoints[0] == this ? 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 = this.anchor.compute(anchorParams); - } - - this.endpoint.compute(ap, this.anchor.getOrientation(this), this._jsPlumb.paintStyleInUse, connectorPaintStyle || this.paintStyleInUse); - this.endpoint.paint(this._jsPlumb.paintStyleInUse, this.anchor); - this.timestamp = timestamp; - - // paint overlays - for ( var i = 0; i < this._jsPlumb.overlays.length; i++) { - var o = this._jsPlumb.overlays[i]; - if (o.isVisible()) { - this._jsPlumb.overlayPlacements[i] = o.draw(this.endpoint, this._jsPlumb.paintStyleInUse); - o.paint(this._jsPlumb.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(this.element) && (this.isSource || this.isTarget)) { - 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 = this.connectorSelector(); - var _continue = true; - // if not enabled, return - if (!this.isEnabled()) _continue = false; - // if no connection and we're not a source, return. - if (jpc == null && !this.isSource) _continue = false; - // otherwise if we're full and not allowed to drag, also return false. - if (this.isSource && this.isFull() && !this.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; - } - - // clear hover for all connections for this endpoint before continuing. - for (var i = 0; i < this.connections.length; i++) - this.connections[i].setHover(false); - - this.addClass("endpointDrag"); - _jsPlumb.setConnectionBeingDragged(true); - - // if we're not full but there was a connection, make it null. we'll create a new one. - if (jpc && !this.isFull() && this.isSource) jpc = null; - - _jsPlumb.updateOffset( { elId : this.elementId }); - inPlaceCopy = this.makeInPlaceCopy(); - inPlaceCopy.referenceEndpoint = this; - inPlaceCopy.paint(); - - _makeDraggablePlaceholder(placeholderInfo, this.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 = jsPlumb.CurrentLibrary.getOffset(ipcoel, _jsPlumb), - po = _jsPlumb.adjustForParentOffsetAndScroll([ipco.left, ipco.top], inPlaceCopy.canvas), - canvasElement = _gel(this.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 (this.parentAnchor) this.anchor = _jsPlumb.makeAnchor(this.parentAnchor, this.elementId, _jsPlumb); - - // store the id of the dragging div and the source element. the drop function will pick these up. - _jsPlumb.setAttribute(this.canvas, "dragId", placeholderInfo.id); - _jsPlumb.setAttribute(this.canvas, "elId", this.elementId); - - this._jsPlumb.floatingEndpoint = _makeFloatingEndpoint(this.getPaintStyle(), this.anchor, this.endpoint, this.canvas, placeholderInfo.element, _jsPlumb, _newEndpoint); - // TODO we should not know about DOM here. make the library adapter do this (or the - // dom adapter) - this.canvas.style.visibility = "hidden"; - - if (jpc == null) { - this.anchor.locked = true; - this.setHover(false, false); - // create a connection. one end is this endpoint, the other is a floating endpoint. - jpc = _newConnection({ - sourceEndpoint : this, - targetEndpoint : this._jsPlumb.floatingEndpoint, - source : this.endpointWillMoveTo || this.element, // for makeSource with parent option. ensure source element is represented correctly. - target : placeholderInfo.element, - anchors : [ this.anchor, this._jsPlumb.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:this.connectionType, - cssClass:this.connectorClass, - hoverClass:this.connectorHoverClass - }); - jpc.addClass(_jsPlumb.draggingClass); - this._jsPlumb.floatingEndpoint.addClass(_jsPlumb.draggingClass); - // 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 == this.id ? 0 : 1; - jpc.floatingAnchorIndex = anchorIdx; // save our anchor index as the connection's floating index. - this.detachFromConnection(jpc); // detach from the connection while dragging is occurring. - - // store the original scope (issue 57) - var dragScope = jsPlumb.CurrentLibrary.getDragScope(canvasElement); - _jsPlumb.setAttribute(this.canvas, "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); - - // fire an event that informs that a connection is being dragged. we do this before - // replacing the original target with the floating element info. - _jsPlumb.fire("connectionDrag", jpc); - - // now we replace ourselves with the temporary div we created above: - if (anchorIdx === 0) { - existingJpcParams = [ jpc.source, jpc.sourceId, canvasElement, dragScope ]; - jpc.source = placeholderInfo.element; - jpc.sourceId = placeholderInfo.id; - } else { - existingJpcParams = [ jpc.target, jpc.targetId, canvasElement, 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]; - - // PROVIDE THE SUSPENDED ELEMENT, BE IT A SOURCE OR TARGET (ISSUE 39) - jpc.suspendedElement = jpc.endpoints[anchorIdx].getElement(); - jpc.suspendedElementId = jpc.endpoints[anchorIdx].elementId; - jpc.suspendedElementType = anchorIdx === 0 ? "source" : "target"; - - jpc.suspendedEndpoint.setHover(false); - this._jsPlumb.floatingEndpoint.referenceEndpoint = jpc.suspendedEndpoint; - jpc.endpoints[anchorIdx] = this._jsPlumb.floatingEndpoint; - - jpc.addClass(_jsPlumb.draggingClass); - this._jsPlumb.floatingEndpoint.addClass(_jsPlumb.draggingClass); - - } - // register it and register connection on it. - floatingConnections[placeholderInfo.id] = jpc; - _jsPlumb.anchorManager.addFloatingConnection(placeholderInfo.id, 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, this._jsPlumb.floatingEndpoint); - // tell jsplumb about it - _jsPlumb.currentlyDragging = true; - }.bind(this); - - 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 || this.scope; - dragOptions[startEvent] = _ju.wrap(dragOptions[startEvent], start, false); - // extracted drag handler function so can be used by makeSource - dragOptions[dragEvent] = _ju.wrap(dragOptions[dragEvent], _dragHandler.drag); - dragOptions[stopEvent] = _ju.wrap(dragOptions[stopEvent], - function() { - - _jsPlumb.setConnectionBeingDragged(false); - // get the actual drop event (decode from library args to stop function) - var originalEvent = jpcl.getDropEvent(arguments); - // unlock the other endpoint (if it is dynamic, it would have been locked at drag start) - var idx = jpc.floatingAnchorIndex == null ? 1 : jpc.floatingAnchorIndex; - jpc.endpoints[idx === 0 ? 1 : 0].anchor.locked = false; - // WHY does this need to happen? i suppose because the connection might not get - // deleted. TODO: i dont want to know about css classes inside jsplumb, ideally. - jpc.removeClass(_jsPlumb.draggingClass); - - // if we have the floating endpoint then the connection has not been dropped - // on another endpoint. If it is a new connection we throw it away. If it is an - // existing connection we check to see if we should reattach it, throwing it away - // if not. - if (jpc.endpoints[idx] == this._jsPlumb.floatingEndpoint) { - // 6a. 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 the connection should be reattached, or the other endpoint refuses detach, then - // reset the connection to its original state - 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._forceDetach = null; - jpc._forceReattach = null; - this._jsPlumb.floatingEndpoint.detachFromConnection(jpc); - jpc.suspendedEndpoint.addConnection(jpc); - _jsPlumb.repaint(existingJpcParams[1]); - } - } - } - - // remove the element associated with the floating endpoint - // (and its associated floating endpoint and visual artefacts) - // TODO we need a way to say that the connection should be kept, if - _jsPlumb.remove(placeholderInfo.element, false); - // remove the inplace copy - _jsPlumb.remove(inPlaceCopy.canvas, false); - - // makeTargets sets this flag, to tell us we have been replaced and should delete ourself. - if (this.deleteAfterDragStop) { - _jsPlumb.deleteObject({endpoint:this}); - } - else { - if (this._jsPlumb) { - this._jsPlumb.floatingEndpoint = null; - // repaint this endpoint. - // make our canvas visible (TODO: hand off to library; we should not know about DOM) - this.canvas.style.visibility = "visible"; - // unlock our anchor - this.anchor.locked = false; - this.paint({recalc:false}); - } - } - - // TODO can this stay here? the connection is no longer valid. - _jsPlumb.fire("connectionDragStop", jpc); - - // tell jsplumb that dragging is finished. - _jsPlumb.currentlyDragging = false; - - jpc = null; - - }.bind(this)); - - var i = _gel(this.canvas); - jpcl.initDraggable(i, dragOptions, true, _jsPlumb); - } - - // 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 ((this.isTarget || forceInit) && jpcl.isDropSupported(this.element)) { - var dropOptions = params.dropOptions || _jsPlumb.Defaults.DropOptions || jsPlumb.Defaults.DropOptions; - dropOptions = jsPlumb.extend( {}, dropOptions); - dropOptions.scope = dropOptions.scope || this.scope; - var dropEvent = jpcl.dragEvents.drop, - overEvent = jpcl.dragEvents.over, - outEvent = jpcl.dragEvents.out, - drop = function() { - - this.removeClass(_jsPlumb.endpointDropAllowedClass); - this.removeClass(_jsPlumb.endpointDropForbiddenClass); - - var originalEvent = jpcl.getDropEvent(arguments), - draggable = _gel(jpcl.getDragObject(arguments)), - id = _jsPlumb.getAttribute(draggable, "dragId"), - elId = _jsPlumb.getAttribute(draggable, "elId"), - scope = _jsPlumb.getAttribute(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 == this.id || - this.referenceEndpoint && jpc.suspendedEndpoint.id == this.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 (this.isFull()) { - this.fire("maxConnections", { - endpoint:this, - connection:jpc, - maxConnections:this._jsPlumb.maxConnections - }, originalEvent); - } - - if (!this.isFull() && !(idx === 0 && !this.isSource) && !(idx == 1 && !this.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 != this.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 = this.element; - jpc.sourceId = this.elementId; - } else { - jpc.target = this.element; - jpc.targetId = this.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] = this; - this.addConnection(jpc); - - // copy our parameters in to the connection: - var params = this.getParameters(); - for (var aParam in params) - jpc.setParameter(aParam, params[aParam]); - - if (!jpc.suspendedEndpoint) { - if (params.draggable) - jsPlumb.CurrentLibrary.initDraggable(this.element, dragOptions, true, _jsPlumb); - } - 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); - } - - // TODO this is like the makeTarget drop code. - if (idx == 1) - _jsPlumb.anchorManager.updateOtherEndpoint(jpc.sourceId, jpc.suspendedElementId, jpc.targetId, jpc); - else - _jsPlumb.anchorManager.sourceChanged(jpc.suspendedEndpoint.elementId, jpc.sourceId, jpc); - - // finalise will inform the anchor manager and also add to - // connectionsByScope if necessary. - _finaliseConnection(jpc, null, originalEvent, true); - - commonFunction(); - }.bind(this); - - 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 && this.isDropAllowed(jpc.sourceId, jpc.targetId, jpc.scope, jpc, this); - - if (_doContinue) { - continueFunction(); - } - else { - dontContinueFunction(); - } - } - _jsPlumb.currentlyDragging = false; - } - }.bind(this); - - dropOptions[dropEvent] = _ju.wrap(dropOptions[dropEvent], drop); - dropOptions[overEvent] = _ju.wrap(dropOptions[overEvent], function() { - var draggable = jpcl.getDragObject(arguments), - id = _jsPlumb.getAttribute(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 = (this.isTarget && _jpc.floatingAnchorIndex !== 0) || (_jpc.suspendedEndpoint && this.referenceEndpoint && this.referenceEndpoint.id == _jpc.suspendedEndpoint.id); - if (_cont) { - var bb = _jsPlumb.checkCondition("checkDropAllowed", { - sourceEndpoint:_jpc.endpoints[idx], - targetEndpoint:this, - connection:_jpc - }); - this[(bb ? "add" : "remove") + "Class"](_jsPlumb.endpointDropAllowedClass); - this[(bb ? "remove" : "add") + "Class"](_jsPlumb.endpointDropForbiddenClass); - _jpc.endpoints[idx].anchor.over(this.anchor, this); - } - } - }.bind(this)); - - dropOptions[outEvent] = _ju.wrap(dropOptions[outEvent], function() { - var draggable = jpcl.getDragObject(arguments), - id = _jsPlumb.getAttribute( draggable, "dragId"), - _jpc = floatingConnections[id]; - - if (_jpc != null) { - var idx = _jpc.floatingAnchorIndex == null ? 1 : _jpc.floatingAnchorIndex; - var _cont = (this.isTarget && _jpc.floatingAnchorIndex !== 0) || (_jpc.suspendedEndpoint && this.referenceEndpoint && this.referenceEndpoint.id == _jpc.suspendedEndpoint.id); - if (_cont) { - this.removeClass(_jsPlumb.endpointDropAllowedClass); - this.removeClass(_jsPlumb.endpointDropForbiddenClass); - _jpc.endpoints[idx].anchor.out(); - } - } - }.bind(this)); - jpcl.initDroppable(canvas, dropOptions, true, isTransient); - } - }.bind(this); - - // 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(this.canvas), true, !(params._transient || this.anchor.isFloating), this); - - // finally, set type if it was provided - if (params.type) - this.addType(params.type, params.data, _jsPlumb.isSuspendDrawing()); - - return this; - }; - - jsPlumbUtil.extend(jsPlumb.Endpoint, OverlayCapableJsPlumbUIComponent, { - getTypeDescriptor : function() { return "endpoint"; }, - isVisible : function() { return this._jsPlumb.visible; }, - setVisible : function(v, doNotChangeConnections, doNotNotifyOtherEndpoint) { - this._jsPlumb.visible = v; - if (this.canvas) this.canvas.style.display = v ? "block" : "none"; - this[v ? "showOverlays" : "hideOverlays"](); - if (!doNotChangeConnections) { - for (var i = 0; i < this.connections.length; i++) { - this.connections[i].setVisible(v); - if (!doNotNotifyOtherEndpoint) { - var oIdx = this === this.connections[i].endpoints[0] ? 1 : 0; - // only change the other endpoint if this is its only connection. - if (this.connections[i].endpoints[oIdx].connections.length == 1) this.connections[i].endpoints[oIdx].setVisible(v, true, true); - } - } - } - }, - getAttachedElements : function() { - return this.connections; - }, - applyType : function(t, doNotRepaint) { - if (t.maxConnections != null) this._jsPlumb.maxConnections = t.maxConnections; - if (t.scope) this.scope = t.scope; - jsPlumbUtil.copyValues(typeParameters, t, this); - }, - isEnabled : function() { return this._jsPlumb.enabled; }, - setEnabled : function(e) { this._jsPlumb.enabled = e; }, - cleanup : function() { - jsPlumb.CurrentLibrary.removeClass(this.element, this._jsPlumb.instance.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - this.anchor = null; - this.endpoint.cleanup(); - this.endpoint.destroy(); - this.endpoint = null; - // drag/drop - var i = jsPlumb.CurrentLibrary.getElementObject(this.canvas); - jsPlumb.CurrentLibrary.destroyDraggable(i); - jsPlumb.CurrentLibrary.destroyDroppable(i); - }, - setHover : function(h) { - if (this.endpoint && this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) - this.endpoint.setHover(h); - }, - isFull : function() { - return !(this.isFloating() || this._jsPlumb.maxConnections < 1 || this.connections.length < this._jsPlumb.maxConnections); - }, - getConnectionCost : function() { return this._jsPlumb.connectionCost; }, - setConnectionCost : function(c) { - this._jsPlumb.connectionCost = c; - }, - areConnectionsDirected : function() { return this._jsPlumb.connectionsDirected; }, - setConnectionsDirected : function(b) { this._jsPlumb.connectionsDirected = b; }, - setElementId : function(_elId) { - this.elementId = _elId; - this.anchor.elementId = _elId; - }, - setReferenceElement : function(_el) { - this.element = jsPlumb.CurrentLibrary.getDOMElement(_el); - }, - setDragAllowedWhenFull : function(allowed) { - this.dragAllowedWhenFull = allowed; - }, - equals : function(endpoint) { - return this.anchor.equals(endpoint.anchor); - }, - getUuid : function() { - return this._jsPlumb.uuid; - }, - computeAnchor : function(params) { - return this.anchor.compute(params); - } - }); -})(); -;(function() { - - var makeConnector = function(_jsPlumb, renderMode, connectorName, connectorArgs) { - if (!_jsPlumb.Defaults.DoNotThrowErrors && jsPlumb.Connectors[renderMode][connectorName] == null) - throw { msg:"jsPlumb: unknown connector type '" + connectorName + "'" }; - - return new jsPlumb.Connectors[renderMode][connectorName](connectorArgs); - }, - _makeAnchor = function(anchorParams, elementId, _jsPlumb) { - return (anchorParams) ? _jsPlumb.makeAnchor(anchorParams, elementId, _jsPlumb) : null; - }, - prepareEndpoint = function(_jsPlumb, _newEndpoint, conn, existing, index, params, element, elementId, connectorPaintStyle, connectorHoverPaintStyle) { - var e; - if (existing) { - conn.endpoints[index] = existing; - existing.addConnection(conn); - } 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, _jsPlumb) || - _makeAnchor(jsPlumb.Defaults.Anchors[index], elementId,_jsPlumb) || - _makeAnchor(_jsPlumb.Defaults.Anchor, elementId,_jsPlumb) || - _makeAnchor(jsPlumb.Defaults.Anchor, elementId, _jsPlumb), - u = params.uuids ? params.uuids[index] : null; - e = _newEndpoint({ - paintStyle : es, hoverPaintStyle:ehs, endpoint : ep, connections : [ conn ], - uuid : u, anchor : a, source : element, scope : params.scope, container:params.container, - reattach:params.reattach || _jsPlumb.Defaults.ReattachConnections, - detachable:params.detachable || _jsPlumb.Defaults.ConnectionsDetachable - }); - conn.endpoints[index] = e; - - if (params.drawEndpoints === false) e.setVisible(false, true, true); - - } - return e; - }; - - jsPlumb.Connection = function(params) { - var _newConnection = params.newConnection, - _newEndpoint = params.newEndpoint, - jpcl = jsPlumb.CurrentLibrary, - _att = jpcl.getAttribute, - _gel = jpcl.getElementObject, - _dom = jpcl.getDOMElement, - _ju = jsPlumbUtil, - _getOffset = jpcl.getOffset; - - this.connector = null; - this.idPrefix = "_jsplumb_c_"; - this.defaultLabelLocation = 0.5; - this.defaultOverlayKeys = ["Overlays", "ConnectionOverlays"]; - this.parent = params.parent; - // 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. - this.previousConnection = params.previousConnection; - this.source = _dom(params.source); - this.target = _dom(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(); - - OverlayCapableJsPlumbUIComponent.apply(this, arguments); - - this.sourceId = this._jsPlumb.instance.getId(this.source); - this.targetId = this._jsPlumb.instance.getId(this.target); - 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 = []; - - var _jsPlumb = this._jsPlumb.instance; - this._jsPlumb.visible = true; - this._jsPlumb.editable = params.editable === true; - this._jsPlumb.params = { - parent:params.parent, - cssClass:params.cssClass, - container:params.container, - "pointer-events":params["pointer-events"], - editorParams:params.editorParams - }; - this._jsPlumb.lastPaintedAt = null; - this.getDefaultType = function() { - return { - parameters:{}, - scope:null, - detachable:this._jsPlumb.instance.Defaults.ConnectionsDetachable, - rettach:this._jsPlumb.instance.Defaults.ReattachConnections, - paintStyle:this._jsPlumb.instance.Defaults.PaintStyle || jsPlumb.Defaults.PaintStyle, - connector:this._jsPlumb.instance.Defaults.Connector || jsPlumb.Defaults.Connector, - hoverPaintStyle:this._jsPlumb.instance.Defaults.HoverPaintStyle || jsPlumb.Defaults.HoverPaintStyle, - overlays:this._jsPlumb.instance.Defaults.ConnectorOverlays || jsPlumb.Defaults.ConnectorOverlays - }; - }; - -// INITIALISATION CODE - - // wrapped the main function to return null if no input given. this lets us cascade defaults properly. - - var eS = prepareEndpoint(_jsPlumb, _newEndpoint, this, params.sourceEndpoint, 0, params, this.source, this.sourceId, params.paintStyle, params.hoverPaintStyle); - if (eS) _ju.addToList(params.endpointsByElement, this.sourceId, eS); - var eT = prepareEndpoint(_jsPlumb, _newEndpoint, this, params.targetEndpoint, 1, params, this.target, this.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 explicitly told to (or not to) delete endpoints on detach, override endpoint's preferences - if (params.deleteEndpointsOnDetach != null) { - this.endpoints[0]._deleteOnDetach = params.deleteEndpointsOnDetach; - this.endpoints[1]._deleteOnDetach = params.deleteEndpointsOnDetach; - } - else { - // otherwise, unless the endpoints say otherwise, mark them for deletion. - if (!this.endpoints[0]._doNotDeleteOnDetach) this.endpoints[0]._deleteOnDetach = true; - if (!this.endpoints[1]._doNotDeleteOnDetach) this.endpoints[1]._deleteOnDetach = true; - } - - // TODO these could surely be refactored into some method that tries them one at a time until something exists - this.setConnector(this.endpoints[0].connector || - this.endpoints[1].connector || - params.connector || - _jsPlumb.Defaults.Connector || - jsPlumb.Defaults.Connector, true); - - if (params.path) - this.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._jsPlumb.paintStyleInUse = this.getPaintStyle(); - - var _suspendedAt = _jsPlumb.getSuspendedAt(); - _jsPlumb.updateOffset( { elId : this.sourceId, timestamp:_suspendedAt }); - _jsPlumb.updateOffset( { elId : this.targetId, timestamp:_suspendedAt }); - -//* - if(!_jsPlumb.isSuspendDrawing()) { - // 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 - this._jsPlumb.detachable = _jsPlumb.Defaults.ConnectionsDetachable; - if (params.detachable === false) this._jsPlumb.detachable = false; - if(this.endpoints[0].connectionsDetachable === false) this._jsPlumb.detachable = false; - if(this.endpoints[1].connectionsDetachable === false) this._jsPlumb.detachable = false; -// REATTACH - this._jsPlumb.reattach = params.reattach || this.endpoints[0].reattachConnections || this.endpoints[1].reattachConnections || _jsPlumb.Defaults.ReattachConnections; -// COST + DIRECTIONALITY - // if cost not supplied, try to inherit from source endpoint - this._jsPlumb.cost = params.cost || this.endpoints[0].getConnectionCost(); - this._jsPlumb.directed = params.directed; - // inherit directed flag if set no source endpoint - if (params.directed == null) this._jsPlumb.directed = this.endpoints[0].areConnectionsDirected(); -// END COST + DIRECTIONALITY - -// PARAMETERS - // merge all the parameters objects into the connection. parameters set - // on the connection take precedence; then source endpoint params, then - // finally target 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[1].getParameters()); - jsPlumb.extend(_p, this.endpoints[0].getParameters()); - jsPlumb.extend(_p, this.getParameters()); - this.setParameters(_p); -// END PARAMETERS - -// PAINTING - - // the very last thing we do is check to see if a 'type' was supplied in the params - var _type = params.type || this.endpoints[0].connectionType || this.endpoints[1].connectionType; - if (_type) - this.addType(_type, params.data, true); - -// END PAINTING - }; - - jsPlumbUtil.extend(jsPlumb.Connection, OverlayCapableJsPlumbUIComponent, { - applyType : function(t, doNotRepaint) { - if (t.detachable != null) this.setDetachable(t.detachable); - if (t.reattach != null) this.setReattach(t.reattach); - if (t.scope) this.scope = t.scope; - //editable = t.editable; // TODO - this.setConnector(t.connector, doNotRepaint); - }, - getTypeDescriptor : function() { return "connection"; }, - getAttachedElements : function() { - return this.endpoints; - }, - addClass : function(c, informEndpoints) { - if (informEndpoints) { - this.endpoints[0].addClass(c); - this.endpoints[1].addClass(c); - if (this.suspendedEndpoint) this.suspendedEndpoint.addClass(c); - } - if (this.connector) { - this.connector.addClass(c); - } - }, - removeClass : function(c, informEndpoints) { - if (informEndpoints) { - this.endpoints[0].removeClass(c); - this.endpoints[1].removeClass(c); - if (this.suspendedEndpoint) this.suspendedEndpoint.removeClass(c); - } - if (this.connector) { - this.connector.removeClass(c); - } - }, - isVisible : function() { return this._jsPlumb.visible; }, - setVisible : function(v) { - this._jsPlumb.visible = v; - this[v ? "showOverlays" : "hideOverlays"](); - if (this.connector && this.connector.canvas) this.connector.canvas.style.display = v ? "block" : "none"; - this.repaint(); - }, - setEditable : function(e) { - if (this.connector && this.connector.isEditable()) - this._jsPlumb.editable = e; - - return this._jsPlumb.editable; - }, - isEditable : function() { return this._jsPlumb.editable; }, - editStarted : function() { - this.setSuspendEvents(true); - this.fire("editStarted", { - path:this.connector.getPath() - }); - this._jsPlumb.instance.setHoverSuspended(true); - }, - editCompleted : function() { - this.fire("editCompleted", { - path:this.connector.getPath() - }); - this.setSuspendEvents(false); - this.setHover(false); - this._jsPlumb.instance.setHoverSuspended(false); - }, - editCanceled : function() { - this.fire("editCanceled", { - path:this.connector.getPath() - }); - this.setHover(false); - this._jsPlumb.instance.setHoverSuspended(false); - }, - cleanup:function() { - //this.endpointsToDeleteOnDetach = null; - this.endpoints = null; - this.source = null; - this.target = null; - if (this.connector != null) { - this.connector.cleanup(); - this.connector.destroy(); - } - this.connector = null; - }, - isDetachable : function() { - return this._jsPlumb.detachable === true; - }, - setDetachable : function(detachable) { - this._jsPlumb.detachable = detachable === true; - }, - isReattach : function() { - return this._jsPlumb.reattach === true; - }, - setReattach : function(reattach) { - this._jsPlumb.reattach = reattach === true; - }, - setHover : function(state) { - if (this.connector && this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) { - this.connector.setHover(state); - jsPlumb.CurrentLibrary[state ? "addClass" : "removeClass"](this.source, this._jsPlumb.instance.hoverSourceClass); - jsPlumb.CurrentLibrary[state ? "addClass" : "removeClass"](this.target, this._jsPlumb.instance.hoverTargetClass); - } - }, - getCost : function() { return this._jsPlumb.cost; }, - setCost : function(c) { this._jsPlumb.cost = c; }, - isDirected : function() { return this._jsPlumb.directed === true; }, - // - // changes the parent element of this connection to newParent. not exposed for the public API. - // - // TODO ensure moveParent method still works (the overlay stuff in particular) - moveParent : function(newParent) { - var jpcl = jsPlumb.CurrentLibrary, curParent = jpcl.getParent(this.connector.canvas); - if (this.connector.bgCanvas) { - jpcl.removeElement(this.connector.bgCanvas); - jpcl.appendElement(this.connector.bgCanvas, newParent); - } - jpcl.removeElement(this.connector.canvas); - jpcl.appendElement(this.connector.canvas, newParent); - // this only applies for DOMOverlays - for (var i = 0; i < this._jsPlumb.overlays.length; i++) { - if (this._jsPlumb.overlays[i].isAppendedAtTopLevel) { - jpcl.removeElement(this._jsPlumb.overlays[i].canvas); - jpcl.appendElement(this._jsPlumb.overlays[i].canvas, newParent); - if (this._jsPlumb.overlays[i].reattachListeners) - this._jsPlumb.overlays[i].reattachListeners(this.connector); - } - } - if (this.connector.reattachListeners) // this is for SVG/VML; change an element's parent and you have to reinit its listeners. - this.connector.reattachListeners(); // the Canvas implementation doesn't have to care about this - }, - getConnector : function() { return this.connector; }, - setConnector : function(connectorSpec, doNotRepaint) { - var _ju = jsPlumbUtil; - if (this.connector != null) { - this.connector.cleanup(); - this.connector.destroy(); - } - - var connectorArgs = { - _jsPlumb:this._jsPlumb.instance, - parent:this._jsPlumb.params.parent, - cssClass:this._jsPlumb.params.cssClass, - container:this._jsPlumb.params.container, - "pointer-events":this._jsPlumb.params["pointer-events"] - }, - renderMode = this._jsPlumb.instance.getRenderMode(); - - if (_ju.isString(connectorSpec)) - this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec, connectorArgs); // lets you use a string as shorthand. - else if (_ju.isArray(connectorSpec)) { - if (connectorSpec.length == 1) - this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec[0], connectorArgs); - else - this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec[0], _ju.merge(connectorSpec[1], connectorArgs)); - } - // binds mouse listeners to the current connector. - this.bindListeners(this.connector, this, function(state) { - this.setHover(state, false); - }.bind(this)); - - this.canvas = this.connector.canvas; - - if (this._jsPlumb.editable && jsPlumb.ConnectorEditors != null && jsPlumb.ConnectorEditors[this.connector.type] && this.connector.isEditable()) { - new jsPlumb.ConnectorEditors[this.connector.type]({ - connector:this.connector, - connection:this, - params:this._jsPlumb.params.editorParams || { } - }); - } - else { - editable = false; - } - - if (!doNotRepaint) this.repaint(); - }, - paint : function(params) { - - if (!this._jsPlumb.instance.isSuspendDrawing() && this._jsPlumb.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 != this._jsPlumb.lastPaintedAt) { - var sourceInfo = this._jsPlumb.instance.updateOffset( { elId : sId, offset : ui, recalc : recalc, timestamp : timestamp }).o, - targetInfo = this._jsPlumb.instance.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(); - this.connector.setEdited(false); - } - - var sAnchorP = sE.anchor.getCurrentLocation({xy:[sourceInfo.left,sourceInfo.top], wh:[sourceInfo.width, sourceInfo.height], element:sE, timestamp:timestamp}), - tAnchorP = tE.anchor.getCurrentLocation({xy:[targetInfo.left,targetInfo.top], wh:[targetInfo.width, targetInfo.height], element:tE, timestamp:timestamp}); - - this.connector.resetBounds(); - - this.connector.compute({ - sourcePos:sAnchorP, - targetPos:tAnchorP, - sourceEndpoint:this.endpoints[sIdx], - targetEndpoint:this.endpoints[tIdx], - lineWidth:this._jsPlumb.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 < this._jsPlumb.overlays.length; i++) { - var o = this._jsPlumb.overlays[i]; - if (o.isVisible()) { - this._jsPlumb.overlayPlacements[i] = o.draw(this.connector, this._jsPlumb.paintStyleInUse); - overlayExtents.minX = Math.min(overlayExtents.minX, this._jsPlumb.overlayPlacements[i].minX); - overlayExtents.maxX = Math.max(overlayExtents.maxX, this._jsPlumb.overlayPlacements[i].maxX); - overlayExtents.minY = Math.min(overlayExtents.minY, this._jsPlumb.overlayPlacements[i].minY); - overlayExtents.maxY = Math.max(overlayExtents.maxY, this._jsPlumb.overlayPlacements[i].maxY); - } - } - - var lineWidth = parseFloat(this._jsPlumb.paintStyleInUse.lineWidth || 1) / 2, - outlineWidth = parseFloat(this._jsPlumb.paintStyleInUse.lineWidth || 0), - extents = { - xmin : Math.min(this.connector.bounds.minX - (lineWidth + outlineWidth), overlayExtents.minX), - ymin : Math.min(this.connector.bounds.minY - (lineWidth + outlineWidth), overlayExtents.minY), - xmax : Math.max(this.connector.bounds.maxX + (lineWidth + outlineWidth), overlayExtents.maxX), - ymax : Math.max(this.connector.bounds.maxY + (lineWidth + outlineWidth), overlayExtents.maxY) - }; - - // paint the connector. - this.connector.paint(this._jsPlumb.paintStyleInUse, null, extents); - // and then the overlays - for ( var j = 0; j < this._jsPlumb.overlays.length; j++) { - var p = this._jsPlumb.overlays[j]; - if (p.isVisible()) { - p.paint(this._jsPlumb.overlayPlacements[j], extents); - } - } - } - this._jsPlumb.lastPaintedAt = timestamp; - } - }, - /* - * Function: repaint - * Repaints the Connection. No parameters exposed to public API. - */ - repaint : function(params) { - params = params || {}; - this.paint({ elId : this.sourceId, recalc : !(params.recalc === false), timestamp:params.timestamp, clearEdits:params.clearEdits }); - } - - }); // END Connection class -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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(a)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 - 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];*/ - r = a[0][0] < b[0][0]; - } - else { - /*if (a[0][0] > b[0][0]) - r= true; - else - r =a[0][1] > b[0][1]; - */ - r = a[0][0] > b[0][0]; - } - 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":function(a, b) { return a[0] > b[0] ? 1 : -1; }, - "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); - }; - var removeEndpointFromAnchorLists = function(endpoint) { - (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); - } - })(anchorLists[endpoint.elementId], endpoint.id); - }; - this.connectionDetached = function(connInfo) { - var connection = connInfo.connection || connInfo, - sourceId = connInfo.sourceId, - targetId = connInfo.targetId, - ep = connection.endpoints, - removeConnection = function(otherIndex, otherEndpoint, otherAnchor, elId, c) { - if (otherAnchor != null && 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 - removeEndpointFromAnchorLists(connection.endpoints[0]); - removeEndpointFromAnchorLists(connection.endpoints[1]); - - self.redraw(connection.sourceId); - self.redraw(connection.targetId); - }; - 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; - }); - removeEndpointFromAnchorLists(endpoint); - }; - 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; }); - jsPlumbUtil.addWithFunction(endpointsToPaint, listToRemoveFrom[i][1].endpoints[oIdx], function(e) { return e.id == listToRemoveFrom[i][1].endpoints[oIdx].id; }); - } - } - } - - for (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; }); - jsPlumbUtil.addWithFunction(endpointsToPaint, listToAddTo[i][1].endpoints[oIdx], function(e) { return e.id == listToAddTo[i][1].endpoints[oIdx].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; - }; - - // - // find the entry in an endpoint's list for this connection and update its target endpoint - // with the current target in the connection. - // - // - this.updateOtherEndpoint = function(elId, oldTargetId, newTargetId, connection) { - var sIndex = jsPlumbUtil.findWithFunction(connectionsByElementId[elId], function(i) { - return i[0].id === connection.id; - }), - tIndex = jsPlumbUtil.findWithFunction(connectionsByElementId[oldTargetId], function(i) { - return i[0].id === connection.id; - }); - - // update or add data for source - if (sIndex != -1) { - connectionsByElementId[elId][sIndex][0] = connection; - connectionsByElementId[elId][sIndex][1] = connection.endpoints[1]; - connectionsByElementId[elId][sIndex][2] = connection.endpoints[1].anchor.constructor == jsPlumb.DynamicAnchor; - } - - // remove entry for previous target (if there) - if (tIndex > -1) { - - connectionsByElementId[oldTargetId].splice(tIndex, 1); - // add entry for new target - jsPlumbUtil.addToList(connectionsByElementId, newTargetId, [connection, connection.endpoints[0], connection.endpoints[0].anchor.constructor == jsPlumb.DynamicAnchor]); - } - }; - - // - // notification that the connection given has changed source from the originalId to the newId. - // This involves: - // 1. removing the connection from the list of connections stored for the originalId - // 2. updating the source information for the target of the connection - // 3. re-registering the connection in connectionsByElementId with the newId - // - this.sourceChanged = function(originalId, newId, connection) { - // remove the entry that points from the old source to the target - jsPlumbUtil.removeWithFunction(connectionsByElementId[originalId], function(info) { - return info[0].id === connection.id; - }); - // find entry for target and update it - var tIdx = jsPlumbUtil.findWithFunction(connectionsByElementId[connection.targetId], function(i) { - return i[0].id === connection.id; - }); - if (tIdx > -1) { - connectionsByElementId[connection.targetId][tIdx][0] = connection; - connectionsByElementId[connection.targetId][tIdx][1] = connection.endpoints[0]; - connectionsByElementId[connection.targetId][tIdx][2] = connection.endpoints[0].anchor.constructor == jsPlumb.DynamicAnchor; - } - // add entry for new source - jsPlumbUtil.addToList(connectionsByElementId, newId, [connection, connection.endpoints[1], connection.endpoints[1].anchor.constructor == jsPlumb.DynamicAnchor]); - }; - - // - // moves the given endpoint from `currentId` to `element`. - // This involves: - // - // 1. changing the key in _amEndpoints under which the endpoint is stored - // 2. changing the source or target values in all of the endpoint's connections - // 3. changing the array in connectionsByElementId in which the endpoint's connections - // are stored (done by either sourceChanged or updateOtherEndpoint) - // - this.rehomeEndpoint = function(ep, currentId, element) { - var eps = _amEndpoints[currentId] || [], - elementId = jsPlumbInstance.getId(element); - - if (elementId !== currentId) { - var idx = jsPlumbUtil.indexOf(eps, ep); - if (idx > -1) { - var _ep = eps.splice(idx, 1)[0]; - self.add(_ep, elementId); - } - } - - for (var i = 0; i < ep.connections.length; i++) { - if (ep.connections[i].sourceId == currentId) { - ep.connections[i].sourceId = ep.elementId; - ep.connections[i].source = ep.element; - self.sourceChanged(currentId, ep.elementId, ep.connections[i]); - } - else if(ep.connections[i].targetId == currentId) { - ep.connections[i].targetId = ep.elementId; - ep.connections[i].target = ep.element; - self.updateOtherEndpoint(ep.connections[i].sourceId, currentId, ep.elementId, ep.connections[i]); - } - } - }; - - this.redraw = function(elementId, ui, timestamp, offsetToUI, clearEdits, doNotRecalcEndpoint) { - - 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 }), - 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 (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 (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 (i = 0; i < ep.length; i++) { - ep[i].paint( { timestamp : timestamp, offset : myOffset, dimensions : myOffset.s, recalc:doNotRecalcEndpoint !== true }); - } - // ... and any other endpoints we came across as a result of the continuous anchors. - for (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 (i = 0; i < endpointConnections.length; i++) { - var otherEndpoint = endpointConnections[i][1]; - if (otherEndpoint.anchor.constructor == jsPlumb.DynamicAnchor) { - otherEndpoint.paint({ elementWithPrecedence:elementId, timestamp:timestamp }); - 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 (i = 0; i < connectionsToPaint.length; i++) { - connectionsToPaint[i].paint({elId:elementId, timestamp:timestamp, recalc:false, clearEdits:clearEdits}); - } - } - }; - - var ContinuousAnchor = function(anchorParams) { - jsPlumbUtil.EventGenerator.apply(this); - 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, - cssClass = anchorParams.cssClass || ""; - - for (var i = 0; i < faces.length; i++) { availableFaces[faces[i]] = true; } - - // if the given edge is supported, 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(params) { - return userDefinedContinuousAnchorLocations[params.element.id] || continuousAnchorLocations[params.element.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; - }; - this.getCssClass = function() { return cssClass; }; - this.setCssClass = function(c) { cssClass = c; }; - }; - - // continuous anchors - jsPlumbInstance.continuousAnchorFactory = { - get:function(params) { - var existing = continuousAnchors[params.elementId]; - if (!existing) { - existing = new ContinuousAnchor(params); - continuousAnchors[params.elementId] = existing; - } - return existing; - }, - clear:function(elementId) { - delete continuousAnchors[elementId]; - } - }; - }; - - /** - * 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) { - this.x = params.x || 0; - this.y = params.y || 0; - this.elementId = params.elementId; - this.cssClass = params.cssClass || ""; - this.userDefinedLocation = null; - this.orientation = params.orientation || [ 0, 0 ]; - - jsPlumbUtil.EventGenerator.apply(this); - - var jsPlumbInstance = params.jsPlumbInstance;//, - //lastTimestamp = null;//, lastReturnValue = null; - - this.lastReturnValue = null; - this.offsets = params.offsets || [ 0, 0 ]; - this.timestamp = null; - this.compute = function(params) { - - var xy = params.xy, wh = params.wh, element = params.element, timestamp = params.timestamp; - - if(params.clearUserDefinedLocation) - this.userDefinedLocation = null; - - if (timestamp && timestamp === self.timestamp) - return this.lastReturnValue; - - if (this.userDefinedLocation != null) { - this.lastReturnValue = this.userDefinedLocation; - } - else { - - this.lastReturnValue = [ xy[0] + (this.x * wh[0]) + this.offsets[0], xy[1] + (this.y * wh[1]) + this.offsets[1] ]; - // adjust loc if there is an offsetParent - this.lastReturnValue = jsPlumbInstance.adjustForParentOffsetAndScroll(this.lastReturnValue, element.canvas); - } - - this.timestamp = timestamp; - return this.lastReturnValue; - }; - - this.getCurrentLocation = function(params) { - return (this.lastReturnValue == null || (params.timestamp != null && this.timestamp != params.timestamp)) ? this.compute(params) : this.lastReturnValue; - }; - }; - jsPlumbUtil.extend(jsPlumb.Anchor, jsPlumbUtil.EventGenerator, { - equals : function(anchor) { - if (!anchor) return false; - var ao = anchor.getOrientation(), - 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]; - }, - getUserDefinedLocation : function() { - return this.userDefinedLocation; - }, - setUserDefinedLocation : function(l) { - this.userDefinedLocation = l; - }, - clearUserDefinedLocation : function() { - this.userDefinedLocation = null; - }, - getOrientation : function(_endpoint) { return this.orientation; }, - getCssClass : function() { return this.cssClass; } - }); - - /** - * 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; - - // clear from parent. we want floating anchor orientation to always be computed. - this.orientation = 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, endpoint) { - orientation = anchor.getOrientation(endpoint); - }; - - /** - * 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(params) { return _lastResult == null ? this.compute(params) : _lastResult; }; - }; - jsPlumbUtil.extend(jsPlumb.FloatingAnchor, jsPlumb.Anchor); - - var _convertAnchor = function(anchor, jsPlumbInstance, elementId) { - return anchor.constructor == jsPlumb.Anchor ? anchor: jsPlumbInstance.makeAnchor(anchor, elementId, jsPlumbInstance); - }; - - /* - * 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(params) { - jsPlumb.Anchor.apply(this, arguments); - - this.isSelective = true; - this.isDynamic = true; - this.anchors = []; - this.elementId = params.elementId; - this.jsPlumbInstance = params.jsPlumbInstance; - - for (var i = 0; i < params.anchors.length; i++) - this.anchors[i] = _convertAnchor(params.anchors[i], this.jsPlumbInstance, this.elementId); - this.addAnchor = function(anchor) { this.anchors.push(_convertAnchor(anchor, this.jsPlumbInstance, this.elementId)); }; - this.getAnchors = function() { return this.anchors; }; - this.locked = false; - var _curAnchor = this.anchors.length > 0 ? this.anchors[0] : null, - _curIndex = this.anchors.length > 0 ? 0 : -1, - _lastAnchor = _curAnchor, - 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 = params.selector || 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; - - this.timestamp = timestamp; - - 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 (this.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, this.anchors); - this.x = _curAnchor.x; - this.y = _curAnchor.y; - - if (_curAnchor != _lastAnchor) - this.fire("anchorChanged", _curAnchor); - - _lastAnchor = _curAnchor; - - return _curAnchor.compute(params); - }; - - this.getCurrentLocation = function(params) { - return this.getUserDefinedLocation() || (_curAnchor != null ? _curAnchor.getCurrentLocation(params) : null); - }; - - this.getOrientation = function(_endpoint) { return _curAnchor != null ? _curAnchor.getOrientation(_endpoint) : [ 0, 0 ]; }; - this.over = function(anchor, endpoint) { if (_curAnchor != null) _curAnchor.over(anchor, endpoint); }; - this.out = function() { if (_curAnchor != null) _curAnchor.out(); }; - - this.getCssClass = function() { return (_curAnchor && _curAnchor.getCssClass()) || ""; }; - }; - jsPlumbUtil.extend(jsPlumb.DynamicAnchor, jsPlumb.Anchor); - -// -------- 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.2: 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 j = 0; j < p.length; j++) { - p[j][4] = p[j][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; - }; -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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 = jsPlumbUtil.extend(jsPlumb.jsPlumbUIComponent, function(params) { - // 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.2, 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 _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"; - - this.getLength = function() { return length; }; - this.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 = this.pointOnPath(location, absolute), - farAwayPoint = distance <= 0 ? {x:x1, y:y1} : {x:x2, y:y2 }; - - /* - location == 1 ? { - x:x1 + ((x2 - x1) * 10), - y:y1 + ((y1 - y2) * 10) - } : - */ - - 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 _super = jsPlumb.Segments.AbstractSegment.apply(this, arguments), - _calcAngle = function(_x, _y) { - return jsPlumbUtil.theta([params.cx, params.cy], [_x, _y]); - }, - _calcAngleForLocation = function(segment, location) { - if (segment.anticlockwise) { - var sa = segment.startAngle < segment.endAngle ? segment.startAngle + TWO_PI : segment.startAngle, - s = Math.abs(sa - segment.endAngle); - return sa - (s * location); - } - else { - var ea = segment.endAngle < segment.startAngle ? segment.endAngle + TWO_PI : segment.endAngle, - ss = Math.abs (ea - segment.startAngle); - - return segment.startAngle + (ss * 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 + (this.radius * Math.cos(params.startAngle)); - this.y1 = params.cy + (this.radius * Math.sin(params.startAngle)); - this.x2 = params.cx + (this.radius * Math.cos(params.endAngle)); - this.y2 = params.cy + (this.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 = this.endAngle < this.startAngle ? this.endAngle + TWO_PI : this.endAngle; - this.sweep = Math.abs (ea - this.startAngle); - if (this.anticlockwise) this.sweep = TWO_PI - this.sweep; - var circumference = 2 * Math.PI * this.radius, - frac = this.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:this.x1, y:this.y1, theta:this.startAngle }; - } - else if (location == 1) { - return { x:this.x2, y:this.y2, theta:this.endAngle }; - } - - if (absolute) { - location = location / length; - } - - var angle = _calcAngleForLocation(this, 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 = this.pointOnPath(location, absolute); - var m = jsPlumbUtil.normal( [ params.cx, params.cy ], [p.x, p.y ] ); - if (!this.anticlockwise && (m == Infinity || m == -Infinity)) m *= -1; - return m; - }; - - this.pointAlongPathFrom = function(location, distance, absolute) { - var p = this.pointOnPath(location, absolute), - arcSpan = distance / circumference * 2 * Math.PI, - dir = this.anticlockwise ? -1 : 1, - startAngle = p.theta + (dir * arcSpan), - startX = params.cx + (this.radius * Math.cos(startAngle)), - startY = params.cy + (this.radius * Math.sin(startAngle)); - - return {x:startX, y:startY}; - }; - }, - - Bezier : function(params) { - var _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() { - this.resetBounds = function() { - this.bounds = { minX:Infinity, minY:Infinity, maxX:-Infinity, maxY:-Infinity }; - }; - this.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(conn, type, params) { - if (params.x1 == params.x2 && params.y1 == params.y2) return; - var s = new jsPlumb.Segments[type](params); - segments.push(s); - totalLength += s.getLength(); - conn.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) { - this.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.sourceEndpoint.anchor.orientation || params.sourceEndpoint.anchor.getOrientation(params.sourceEndpoint), - to = params.targetEndpoint.anchor.orientation || params.targetEndpoint.anchor.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; }; - - this.updateBounds = function(segment) { - var segBounds = segment.getBounds(); - this.bounds.minX = Math.min(this.bounds.minX, segBounds.minX); - this.bounds.maxX = Math.max(this.bounds.maxX, segBounds.maxX); - this.bounds.minY = Math.min(this.bounds.minY, segBounds.minY); - this.bounds.maxY = Math.max(this.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) { - var seg = _findSegmentForLocation(location, absolute); - return seg.segment && seg.segment.pointOnPath(seg.proportion, absolute) || [0,0]; - }; - - this.gradientAtPoint = function(location) { - var seg = _findSegmentForLocation(location, absolute); - return seg.segment && seg.segment.gradientAtPoint(seg.proportion, absolute) || 0; - }; - - this.pointAlongPathFrom = function(location, distance, absolute) { - var seg = _findSegmentForLocation(location, absolute); - // TODO what happens if this crosses to the next segment? - return seg.segment && seg.segment.pointAlongPathFrom(seg.proportion, distance, false) || [0,0]; - }; - - this.compute = function(params) { - if (!edited) - paintInfo = _prepareCompute(params); - - _clearSegments(); - this._compute(paintInfo, params); - this.x = paintInfo.points[0]; - this.y = paintInfo.points[1]; - this.w = paintInfo.points[2]; - this.h = paintInfo.points[3]; - this.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) - }; - }; - jsPlumbUtil.extend(jsPlumb.Connectors.AbstractConnector, AbstractComponent); - - /** - * Class: Connectors.Straight - * The Straight connector draws a simple straight line between the two anchor points. It does not have any constructor parameters. - */ - var Straight = function() { - this.type = "Straight"; - var _super = jsPlumb.Connectors.AbstractConnector.apply(this, arguments); - - this._compute = function(paintInfo, _) { - _super.addSegment(this, "Straight", {x1:paintInfo.sx, y1:paintInfo.sy, x2:paintInfo.startStubX, y2:paintInfo.startStubY}); - _super.addSegment(this, "Straight", {x1:paintInfo.startStubX, y1:paintInfo.startStubY, x2:paintInfo.endStubX, y2:paintInfo.endStubY}); - _super.addSegment(this, "Straight", {x1:paintInfo.endStubX, y1:paintInfo.endStubY, x2:paintInfo.tx, y2:paintInfo.ty}); - }; - }; - jsPlumbUtil.extend(jsPlumb.Connectors.Straight, jsPlumb.Connectors.AbstractConnector); - jsPlumb.registerConnectorType(Straight, "Straight"); - - /** - * 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. - * - */ - var Bezier = function(params) { - params = params || {}; - - var _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) { - // 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 = sourceEndpoint.anchor.getOrientation(sourceEndpoint), - too = targetEndpoint.anchor.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 = this._findControlPoint([_sx, _sy], sp, tp, p.sourceEndpoint, p.targetEndpoint), - _CP2 = this._findControlPoint([_tx, _ty], tp, sp, p.targetEndpoint, p.sourceEndpoint); - - _super.addSegment(this, "Bezier", { - x1:_sx, y1:_sy, x2:_tx, y2:_ty, - cp1x:_CP[0], cp1y:_CP[1], cp2x:_CP2[0], cp2y:_CP2[1] - }); - }; - }; - jsPlumbUtil.extend(Bezier, jsPlumb.Connectors.AbstractConnector); - jsPlumb.registerConnectorType(Bezier, "Bezier"); - - // ********************************* END OF CONNECTOR TYPES ******************************************************************* - - // ********************************* ENDPOINT TYPES ******************************************************************* - - jsPlumb.Endpoints.AbstractEndpoint = function(params) { - AbstractComponent.apply(this, arguments); - var compute = this.compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { - var out = this._compute.apply(this, arguments); - this.x = out[0]; - this.y = out[1]; - this.w = out[2]; - this.h = out[3]; - this.bounds.minX = this.x; - this.bounds.minY = this.y; - this.bounds.maxX = this.x + this.w; - this.bounds.maxY = this.y + this.h; - return out; - }; - return { - compute:compute, - cssClass:params.cssClass - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.AbstractEndpoint, AbstractComponent); - - /** - * 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 _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) { - this.radius = endpointStyle.radius || this.radius; - var x = anchorPoint[0] - this.radius, - y = anchorPoint[1] - this.radius, - w = this.radius * 2, - h = this.radius * 2; - - if (endpointStyle.strokeStyle) { - var lw = endpointStyle.lineWidth || 1; - x -= lw; - y -= lw; - w += (lw * 2); - h += (lw * 2); - } - return [ x, y, w, h, this.radius ]; - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.Dot, jsPlumb.Endpoints.AbstractEndpoint); - - /** - * 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 _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 || this.width, - height = endpointStyle.height || this.height, - x = anchorPoint[0] - (width/2), - y = anchorPoint[1] - (height/2); - - return [ x, y, width, height]; - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.Rectangle, jsPlumb.Endpoints.AbstractEndpoint); - - - var DOMElementEndpoint = function(params) { - jsPlumb.DOMElementComponent.apply(this, arguments); - this._jsPlumb.displayElements = [ ]; - }; - jsPlumbUtil.extend(DOMElementEndpoint, jsPlumb.DOMElementComponent, { - // jsPlumb.Endpoints.AbstractEndpoint - getDisplayElements : function() { - return this._jsPlumb.displayElements; - }, - appendDisplayElement : function(el) { - this._jsPlumb.displayElements.push(el); - } - }); - - /** - * Class: Endpoints.Image - * Draws an image as the Endpoint. - */ - /** - * Function: Constructor - * - * Parameters: - * - * src - location of the image to use. - - TODO: multiple references to self. not sure quite how to get rid of them entirely. perhaps self = null in the cleanup - function will suffice - - TODO this class still leaks memory. - - */ - jsPlumb.Endpoints.Image = function(params) { - - this.type = "Image"; - DOMElementEndpoint.apply(this, arguments); - jsPlumb.Endpoints.AbstractEndpoint.apply(this, arguments); - - var _onload = params.onload, - src = params.src || params.url, - parent = params.parent, - clazz = params.cssClass ? " " + params.cssClass : ""; - - this._jsPlumb.img = new Image(); - this._jsPlumb.ready = false; - this._jsPlumb.initialized = false; - this._jsPlumb.deleted = false; - this._jsPlumb.widthToUse = params.width; - this._jsPlumb.heightToUse = params.height; - this._jsPlumb.endpoint = params.endpoint; - - this._jsPlumb.img.onload = function() { - // check we weren't actually discarded before use (in fact mostly happens in tests) - if (this._jsPlumb != null) { - this._jsPlumb.ready = true; - this._jsPlumb.widthToUse = this._jsPlumb.widthToUse || this._jsPlumb.img.width; - this._jsPlumb.heightToUse = this._jsPlumb.heightToUse || this._jsPlumb.img.height; - if (_onload) { - _onload(this); - } - } - }.bind(this); - - /* - 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. - */ - this._jsPlumb.endpoint.setImage = function(_img, onload) { - var s = _img.constructor == String ? _img : _img.src; - _onload = onload; - this._jsPlumb.img.src = s; - - if (this.canvas != null) - this.canvas.setAttribute("src", this._jsPlumb.img.src); - }.bind(this); - - this._jsPlumb.endpoint.setImage(src, _onload); - /* - var s = src.constructor == String ? src : src.src; - //_onload = onload; - this._jsPlumb.img.src = src; - - if (this.canvas != null) - this.canvas.setAttribute("src", this._jsPlumb.img.src); - // }.bind(this); - - //this._jsPlumb.endpoint.setImage(src, _onload);*/ - - this._compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { - this.anchorPoint = anchorPoint; - if (this._jsPlumb.ready) return [anchorPoint[0] - this._jsPlumb.widthToUse / 2, anchorPoint[1] - this._jsPlumb.heightToUse / 2, - this._jsPlumb.widthToUse, this._jsPlumb.heightToUse]; - else return [0,0,0,0]; - }; - - this.canvas = document.createElement("img"); - this.canvas.style.margin = 0; - this.canvas.style.padding = 0; - this.canvas.style.outline = 0; - this.canvas.style.position = "absolute"; - this.canvas.className = this._jsPlumb.instance.endpointClass + clazz; - if (this._jsPlumb.widthToUse) this.canvas.setAttribute("width", this._jsPlumb.widthToUse); - if (this._jsPlumb.heightToUse) this.canvas.setAttribute("height", this._jsPlumb.heightToUse); - this._jsPlumb.instance.appendElement(this.canvas, parent); - this.attachListeners(this.canvas, this); - - this.actuallyPaint = function(d, style, anchor) { - if (!this._jsPlumb.deleted) { - if (!this._jsPlumb.initialized) { - this.canvas.setAttribute("src", this._jsPlumb.img.src); - this.appendDisplayElement(this.canvas); - this._jsPlumb.initialized = true; - } - var x = this.anchorPoint[0] - (this._jsPlumb.widthToUse / 2), - y = this.anchorPoint[1] - (this._jsPlumb.heightToUse / 2); - jsPlumbUtil.sizeElement(this.canvas, x, y, this._jsPlumb.widthToUse, this._jsPlumb.heightToUse); - } - }; - - this.paint = function(style, anchor) { - if (this._jsPlumb != null) { // may have been deleted - if (this._jsPlumb.ready) { - this.actuallyPaint(style, anchor); - } - else { - window.setTimeout(function() { - this.paint(style, anchor); - }.bind(this), 200); - } - } - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.Image, [ DOMElementEndpoint, jsPlumb.Endpoints.AbstractEndpoint ], { - cleanup : function() { - this._jsPlumb.deleted = true; - jsPlumbUtil.removeElement(this.canvas); - this.canvas = null; - } - }); - - /* - * 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 _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]; - }; - - this.canvas = document.createElement("div"); - this.canvas.style.display = "block"; - this.canvas.style.width = "1px"; - this.canvas.style.height = "1px"; - this.canvas.style.background = "transparent"; - this.canvas.style.position = "absolute"; - this.canvas.className = this._jsPlumb.endpointClass; - jsPlumb.appendElement(this.canvas, params.parent); - - this.paint = function(style, anchor) { - jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.Blank, [jsPlumb.Endpoints.AbstractEndpoint, DOMElementEndpoint], { - cleanup:function() { - if (this.canvas) { - this.canvas.parentNode.removeChild(this.canvas); - } - } - }); - - /* - * 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 _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) { - this.visible = true; - 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.; - }; - AbstractOverlay.prototype = { - cleanup:function() { - this.component = null; - this.canvas = null; - this.endpointLoc = null; - }, - setVisible : function(val) { - this.visible = val; - this.component.repaint(); - }, - isVisible : function() { return this.visible; }, - hide : function() { this.setVisible(false); }, - show : function() { this.setVisible(true); }, - - incrementLocation : function(amount) { - this.loc += amount; - this.component.repaint(); - }, - setLocation : function(l) { - this.loc = l; - this.component.repaint(); - }, - getLocation : function() { - return this.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 _ju = jsPlumbUtil; - - 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 (_ju.isString(this.loc) || this.loc > 1 || this.loc < 0) { - var l = parseInt(this.loc, 10); - hxy = component.pointAlongPathFrom(l, direction * this.length / 2, true); - mid = component.pointOnPath(l, true); - txy = _ju.pointOnLine(hxy, mid, this.length); - } - else if (this.loc == 1) { - hxy = component.pointOnPath(this.loc); - mid = component.pointAlongPathFrom(this.loc, -(this.length)); - txy = _ju.pointOnLine(hxy, mid, this.length); - - if (direction == -1) { - var _ = txy; - txy = hxy; - hxy = _; - } - } - else if (this.loc === 0) { - txy = component.pointOnPath(this.loc); - mid = component.pointAlongPathFrom(this.loc, this.length); - hxy = _ju.pointOnLine(txy, mid, this.length); - if (direction == -1) { - var __ = txy; - txy = hxy; - hxy = __; - } - } - else { - hxy = component.pointAlongPathFrom(this.loc, direction * this.length / 2); - mid = component.pointOnPath(this.loc); - txy = _ju.pointOnLine(hxy, mid, this.length); - } - - tail = _ju.perpendicularLineTo(hxy, txy, this.width); - cxy = _ju.pointOnLine(hxy, txy, foldback * this.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}; - }; - }; - jsPlumbUtil.extend(jsPlumb.Overlays.Arrow, AbstractOverlay); - - /* - * 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"; - }; - jsPlumbUtil.extend(jsPlumb.Overlays.PlainArrow, jsPlumb.Overlays.Arrow); - - /* - * 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"; - }; - jsPlumbUtil.extend(jsPlumb.Overlays.Diamond, jsPlumb.Overlays.Arrow); - - var _getDimensions = function(component) { - if (component._jsPlumb.cachedDimensions == null) - component._jsPlumb.cachedDimensions = component.getDimensions(); - return component._jsPlumb.cachedDimensions; - }; - - // 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 jpcl = jsPlumb.CurrentLibrary; - this.id = params.id; - this._jsPlumb.div = null; - this._jsPlumb.initialised = false; - this._jsPlumb.component = params.component; - this._jsPlumb.cachedDimensions = null; - this._jsPlumb.create = params.create; - - this.getElement = function() { - if (this._jsPlumb.div == null) { - var div = this._jsPlumb.div = jpcl.getDOMElement(this._jsPlumb.create(this._jsPlumb.component)); - div.style.position = "absolute"; - var clazz = params._jsPlumb.overlayClass + " " + - (this.cssClass ? this.cssClass : - params.cssClass ? params.cssClass : ""); - div.className = clazz; - this._jsPlumb.instance.appendElement(div, this._jsPlumb.component.parent); - this._jsPlumb.instance.getId(div); - this.attachListeners(div, this); - this.canvas = div; - } - return this._jsPlumb.div; - }; - - /* - this.paint = function(p, containerExtents) { - if (!this._jsPlumb.initialised) { - this.getElement(); - p.component.appendDisplayElement(this._jsPlumb.div); - this.attachListeners(this._jsPlumb.div, p.component); - this._jsPlumb.initialised = true; - } - this._jsPlumb.div.style.left = (p.component.x + p.d.minx) + "px"; - this._jsPlumb.div.style.top = (p.component.y + p.d.miny) + "px"; - };*/ - - this.draw = function(component, currentConnectionPaintStyle) { - var td = _getDimensions(this); - if (td != null && td.length == 2) { - var cxy = {x:0,y:0}; - if (component.pointOnPath) { - var loc = this.loc, absolute = false; - if (jsPlumbUtil.isString(this.loc) || this.loc < 0 || this.loc > 1) { - loc = parseInt(this.loc, 10); - absolute = true; - } - cxy = component.pointOnPath(loc, absolute); // a connection - } - else { - var locToUse = this.loc.constructor == Array ? this.loc : this.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}; - }; - }; - jsPlumbUtil.extend(AbstractDOMOverlay, [jsPlumb.DOMElementComponent, AbstractOverlay], { - getDimensions : function() { - return jsPlumb.CurrentLibrary.getSize(jsPlumb.CurrentLibrary.getElementObject(this.getElement())); - }, - setVisible : function(state) { - this._jsPlumb.div.style.display = state ? "block" : "none"; - }, - /* - * 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. - */ - clearCachedDimensions : function() { - this._jsPlumb.cachedDimensions = null; - }, - cleanup : function() { - if (this._jsPlumb.div != null) - jsPlumb.CurrentLibrary.removeElement(this._jsPlumb.div); - }, - computeMaxSize : function() { - var td = _getDimensions(this); - return Math.max(td[0], td[1]); - }, - reattachListeners : function(connector) { - if (this._jsPlumb.div) { - this.reattachListenersForElement(this._jsPlumb.div, this, connector); - } - }, - paint : function(p, containerExtents) { - if (!this._jsPlumb.initialised) { - this.getElement(); - p.component.appendDisplayElement(this._jsPlumb.div); - this.attachListeners(this._jsPlumb.div, p.component); - this._jsPlumb.initialised = true; - } - this._jsPlumb.div.style.left = (p.component.x + p.d.minx) + "px"; - this._jsPlumb.div.style.top = (p.component.y + p.d.miny) + "px"; - } - }); - - /* - * 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); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.Custom, AbstractDOMOverlay); - - 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) { - this.labelStyle = params.labelStyle || jsPlumb.Defaults.LabelStyle; - this.cssClass = this.labelStyle != null ? this.labelStyle.cssClass : null; - var p = jsPlumb.extend({ - create : function() { - return document.createElement("div"); - }}, params); - jsPlumb.Overlays.Custom.call(this, p); - this.type = "Label"; - this.label = params.label || ""; - this.labelText = null; - }; - jsPlumbUtil.extend(jsPlumb.Overlays.Label, jsPlumb.Overlays.Custom, { - cleanup:function() { - this.div = null; - this.label = null; - this.labelText = null; - this.cssClass = null; - this.labelStyle = null; - }, - getLabel : function() { - return this.label; - }, - /* - * 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. - */ - setLabel : function(l) { - this.label = l; - this.labelText = null; - this.clearCachedDimensions(); - this.update(); - this.component.repaint(); - }, - getDimensions : function() { - this.update(); - return AbstractDOMOverlay.prototype.getDimensions.apply(this, arguments); - }, - update : function() { - if (typeof this.label == "function") { - var lt = this.label(this); - this.getElement().innerHTML = lt.replace(/\r\n/g, "<br/>"); - } - else { - if (this.labelText == null) { - this.labelText = this.label; - this.getElement().innerHTML = this.labelText.replace(/\r\n/g, "<br/>"); - } - } - } - }); - - // ********************************* END OF OVERLAY DEFINITIONS *********************************************************************** - -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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(a)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). - * alwaysRespectStubs - defaults to false. whether or not the connectors should always draw the stub, or, if the two elements - are in close proximity to each other (closer than the sum of the two stubs), to adjust the stubs. - */ - var Flowchart = function(params) { - this.type = "Flowchart"; - params = params || {}; - params.stub = params.stub == null ? 30 : params.stub; - var self = this, - _super = jsPlumb.Connectors.AbstractConnector.apply(this, arguments), - midpoint = params.midpoint == null ? 0.5 : params.midpoint, - points = [], segments = [], - grid = params.grid, - alwaysRespectStubs = params.alwaysRespectStubs, - userSuppliedSegments = null, - lastx = null, lasty = null, lastOrientation, - cornerRadius = params.cornerRadius != null ? params.cornerRadius : 0, - sgn = function(n) { return n < 0 ? -1 : n === 0 ? 0 : 1; }, - /** - * helper method to add a segment. - */ - addSegment = function(segments, x, y, paintInfo) { - if (lastx == x && lasty == y) return; - var lx = lastx == null ? paintInfo.sx : lastx, - ly = lasty == null ? paintInfo.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(conn, 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(conn, "Straight", { - x1:current[0], y1:current[1], x2:current[2], y2:current[3] - }); - - _super.addSegment(conn, "Arc", { - r:radiusToUse, - x1:current[2], - y1:current[3], - x2:next[0], - y2:next[1], - cx:cx, - cy:cy, - ac:ac - }); - } - else { - // dx + dy are used to adjust for line width. - var dx = (current[2] == current[0]) ? 0 : (current[2] > current[0]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2), - dy = (current[3] == current[1]) ? 0 : (current[3] > current[1]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2); - _super.addSegment(conn, "Straight", { - x1:current[0]- dx, y1:current[1]-dy, x2:current[2] + dx, y2:current[3] + dy - }); - } - current = next; - } - // last segment - _super.addSegment(conn, "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(this, 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); - - var findClearedLine = function(start, mult, anchorPos, dimension) { - return start + (mult * (( 1 - anchorPos) * dimension) + _super.maxStub); - }, - orientations = { x:[ 0, 1 ], y:[ 1, 0 ] }, - commonStubCalculator = function(axis) { - return [ paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY ]; - }, - stubCalculators = { - perpendicular:commonStubCalculator, - orthogonal:commonStubCalculator, - opposite:function(axis) { - var pi = paintInfo, - idx = axis == "x" ? 0 : 1, - areInProximity = { - "x":function() { - return ( (pi.so[idx] == 1 && ( - ( (pi.startStubX > pi.endStubX) && (pi.tx > pi.startStubX) ) || - ( (pi.sx > pi.endStubX) && (pi.tx > pi.sx))))) || - - ( (pi.so[idx] == -1 && ( - ( (pi.startStubX < pi.endStubX) && (pi.tx < pi.startStubX) ) || - ( (pi.sx < pi.endStubX) && (pi.tx < pi.sx))))); - }, - "y":function() { - return ( (pi.so[idx] == 1 && ( - ( (pi.startStubY > pi.endStubY) && (pi.ty > pi.startStubY) ) || - ( (pi.sy > pi.endStubY) && (pi.ty > pi.sy))))) || - - ( (pi.so[idx] == -1 && ( - ( (pi.startStubY < pi.endStubY) && (pi.ty < pi.startStubY) ) || - ( (pi.sy < pi.endStubY) && (pi.ty < pi.sy))))); - } - }; - - if (!alwaysRespectStubs && areInProximity[axis]()) { - return { - "x":[(paintInfo.sx + paintInfo.tx) / 2, paintInfo.startStubY, (paintInfo.sx + paintInfo.tx) / 2, paintInfo.endStubY], - "y":[paintInfo.startStubX, (paintInfo.sy + paintInfo.ty) / 2, paintInfo.endStubX, (paintInfo.sy + paintInfo.ty) / 2] - }[axis]; - } - else { - return [ paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY ]; - } - } - }, - lineCalculators = { - perpendicular : function(axis, ss, oss, es, oes) { - var pi = paintInfo, - 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:[ [ pi.startStubX, pi.endStubX ] , null, [ pi.endStubX, pi.startStubX ] ], - y:[ [ pi.startStubY, pi.endStubY ] , null, [ pi.endStubY, pi.startStubY ] ] - }, - midLines = { - x:[ [ midx, pi.startStubY ], [ midx, pi.endStubY ] ], - y:[ [ pi.startStubX, midy ], [ pi.endStubX, midy ] ] - }, - linesToEnd = { - x:[ [ pi.endStubX, pi.startStubY ] ], - y:[ [ pi.startStubX, pi.endStubY ] ] - }, - startToEnd = { - x:[ [ pi.startStubX, pi.endStubY ], [ pi.endStubX, pi.endStubY ] ], - y:[ [ pi.endStubX, pi.startStubY ], [ pi.endStubX, pi.endStubY ] ] - }, - startToMidToEnd = { - x:[ [ pi.startStubX, midy ], [ pi.endStubX, midy ], [ pi.endStubX, pi.endStubY ] ], - y:[ [ midx, pi.startStubY ], [ midx, pi.endStubY ], [ pi.endStubX, pi.endStubY ] ] - }, - otherStubs = { - x:[ pi.startStubY, pi.endStubY ], - y:[ pi.startStubX, pi.endStubX ] - }, - soIdx = orientations[axis][0], toIdx = orientations[axis][1], - _so = pi.so[soIdx] + 1, - _to = pi.to[toIdx] + 1, - otherFlipped = (pi.to[toIdx] == -1 && (otherStubs[axis][1] < otherStubs[axis][0])) || (pi.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 (pi.segment == segmentIndexes[3] || (pi.segment == segmentIndexes[2] && otherFlipped)) { - return midLines[axis]; - } - else if (pi.segment == segmentIndexes[2] && stub2 < stub1) { - return linesToEnd[axis]; - } - else if ((pi.segment == segmentIndexes[2] && stub2 >= stub1) || (pi.segment == segmentIndexes[1] && !otherFlipped)) { - return startToMidToEnd[axis]; - } - else if (pi.segment == segmentIndexes[0] || (pi.segment == segmentIndexes[1] && otherFlipped)) { - return startToEnd[axis]; - } - }, - orthogonal : function(axis, startStub, otherStartStub, endStub, otherEndStub) { - var pi = paintInfo, - extent = { - "x":pi.so[0] == -1 ? Math.min(startStub, endStub) : Math.max(startStub, endStub), - "y":pi.so[1] == -1 ? Math.min(startStub, endStub) : Math.max(startStub, endStub) - }[axis]; - - return { - "x":[ [ extent, otherStartStub ],[ extent, otherEndStub ], [ endStub, otherEndStub ] ], - "y":[ [ otherStartStub, extent ], [ otherEndStub, extent ], [ otherEndStub, endStub ] ] - }[axis]; - }, - opposite : function(axis, ss, oss, es, oes) { - var pi = paintInfo, - otherAxis = {"x":"y","y":"x"}[axis], - dim = {"x":"height","y":"width"}[axis], - comparator = pi["is" + axis.toUpperCase() + "GreaterThanStubTimes2"]; - - if (params.sourceEndpoint.elementId == params.targetEndpoint.elementId) { - var _val = oss + ((1 - params.sourceEndpoint.anchor[otherAxis]) * params.sourceInfo[dim]) + _super.maxStub; - return { - "x":[ [ ss, _val ], [ es, _val ] ], - "y":[ [ _val, ss ], [ _val, es ] ] - }[axis]; - - } - else if (!comparator || (pi.so[idx] == 1 && ss > es) || (pi.so[idx] == -1 && ss < es)) { - return { - "x":[[ ss, midy ], [ es, midy ]], - "y":[[ midx, ss ], [ midx, es ]] - }[axis]; - } - else if ((pi.so[idx] == 1 && ss < es) || (pi.so[idx] == -1 && ss > es)) { - return { - "x":[[ midx, pi.sy ], [ midx, pi.ty ]], - "y":[[ pi.sx, midy ], [ pi.tx, midy ]] - }[axis]; - } - } - }; - - var stubs = stubCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis), - idx = paintInfo.sourceAxis == "x" ? 0 : 1, - oidx = paintInfo.sourceAxis == "x" ? 1 : 0, - ss = stubs[idx], - oss = stubs[oidx], - es = stubs[idx + 2], - oes = stubs[oidx + 2]; - - // add the start stub segment. - addSegment(segments, stubs[0], stubs[1], paintInfo); - - // compute the rest of the line - var p = lineCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis, ss, oss, es, oes); - if (p) { - for (var i = 0; i < p.length; i++) { - addSegment(segments, p[i][0], p[i][1], paintInfo); - } - } - - // line to end stub - addSegment(segments, stubs[2], stubs[3], paintInfo); - - // end stub to end - addSegment(segments, paintInfo.tx, paintInfo.ty, paintInfo); - - writeSegments(this, 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]); - } - }; - }; - - jsPlumbUtil.extend(Flowchart, jsPlumb.Connectors.AbstractConnector); - jsPlumb.registerConnectorType(Flowchart, "Flowchart"); -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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(a)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 = [], xInt, yInt; - - // try top face - // the equation of the top face is y = (0 * x) + b; y = b. - 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 - yInt = (this.m * (x + w)) + this.b; - if (yInt >= y && yInt <= (y + h)) results.push([ (yInt - this.b) / this.m, yInt ]); - - // bottom face - 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 - 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. - */ - var 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(this, "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(this, "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 - }); - } - }; - }; - jsPlumb.registerConnectorType(StateMachine, "StateMachine"); -})(); - -/* - // 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]); -// } -// } - // } - // } - //} - */ - -;(function() { - - var 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) { - // 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 = sourceEndpoint.anchor.getOrientation(sourceEndpoint), - too = targetEndpoint.anchor.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), - _CP2 = self._findControlPoint([_tx, _ty], tp, sp, p.targetEndpoint, p.sourceEndpoint); - - _super.addSegment(this, "Bezier", { - x1:_sx, y1:_sy, x2:_tx, y2:_ty, - cp1x:_CP[0], cp1y:_CP[1], cp2x:_CP2[0], cp2y:_CP2[1] - }); - }; - }; - - jsPlumb.registerConnectorType(Bezier, "Bezier"); - -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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.2. - * 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() { - - -// ********************************* 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 = window.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; - }; - }; - jsPlumbUtil.extend(CanvasMouseAdapter, [ jsPlumb.jsPlumbUIComponent, jsPlumbUtil.EventGenerator ]); - - var _newCanvas = function(params) { - var canvas = document.createElement("canvas"); - params._jsPlumb.instance.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.instance.getId(canvas, params.uuid); - if (params.tooltip) canvas.setAttribute("title", params.tooltip); - - return canvas; - }; - - var CanvasComponent = window.CanvasComponent = function(params) { - CanvasMouseAdapter.apply(this, arguments); - - var displayElements = [ ]; - this.getDisplayElements = function() { return displayElements; }; - this.appendDisplayElement = function(el) { displayElements.push(el); }; - }; - jsPlumbUtil.extend(CanvasComponent, CanvasMouseAdapter); - - 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, dx, dy) { - ({ - "Straight":function(segment, ctx, style, dx, dy) { - var d = segment.params; - ctx.save(); - maybeMakeGradient(ctx, style, function() { return ctx.createLinearGradient(d.x1, d.y1, d.x2, d.y2); }); - ctx.beginPath(); - ctx.translate(dx, dy); - 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(); - - ctx.restore(); - }, - "Bezier":function(segment, ctx, style, dx, dy) { - var d = segment.params; - ctx.save(); - maybeMakeGradient(ctx, style, function() { return ctx.createLinearGradient(d.x2 + dx, d.y2 + dy, d.x1 + dx, d.y1 + dy); }); - ctx.beginPath(); - ctx.translate(dx, dy); - ctx.moveTo(d.x1, d.y1); - ctx.bezierCurveTo(d.cp1x, d.cp1y, d.cp2x, d.cp2y, d.x2, d.y2); - ctx.stroke(); - ctx.restore(); - }, - "Arc":function(segment, ctx, style, dx, dy) { - var d = segment.params; - ctx.save(); - ctx.beginPath(); - ctx.translate(dx, dy); - ctx.arc(d.cx, d.cy, d.r, segment.startAngle, segment.endAngle, d.ac); - ctx.stroke(); - ctx.restore(); - } - })[segment.type](segment, ctx, style, dx, dy); - }; - - /** - * Class:CanvasConnector - * Superclass for Canvas Connector renderers. - */ - var CanvasConnector = jsPlumb.ConnectorRenderers.canvas = function(params) { - CanvasComponent.apply(this, arguments); - - var _paintOneStyle = function(aStyle, dx, dy) { - this.ctx.save(); - jsPlumb.extend(this.ctx, aStyle); - - var segments = this.getSegments(); - for (var i = 0; i < segments.length; i++) { - segmentRenderer(segments[i], this.ctx, aStyle, dx, dy); - } - this.ctx.restore(); - }.bind(this); - - var clazz = this._jsPlumb.instance.connectorClass + " " + (params.cssClass || ""); - this.canvas = _newCanvas({ - "class":clazz, - _jsPlumb:this._jsPlumb, - parent:params.parent - }); - this.ctx = this.canvas.getContext("2d"); - - this.appendDisplayElement(this.canvas); - - this.paint = function(style, anchor, extents) { - if (style != null) { - - var xy = [ this.x, this.y ], wh = [ this.w, this.h ], p, - dx = 0, dy = 0; - - if (extents != null) { - if (extents.xmin < 0) { - xy[0] += extents.xmin; - dx = -extents.xmin; - } - if (extents.ymin < 0) { - xy[1] += extents.ymin; - dy = -extents.ymin; - } - wh[0] = extents.xmax + ((extents.xmin < 0) ? -extents.xmin : 0); - wh[1] = extents.ymax + ((extents.ymin < 0) ? -extents.ymin : 0); - } - - this.translateX = dx; - this.translateY = dy; - - jsPlumbUtil.sizeElement(this.canvas, xy[0], xy[1], wh[0], wh[1]); - - if (style.outlineColor != null) { - var outlineWidth = style.outlineWidth || 1, - outlineStrokeWidth = style.lineWidth + (2 * outlineWidth), - outlineStyle = { - strokeStyle:style.outlineColor, - lineWidth:outlineStrokeWidth - }; - _paintOneStyle(outlineStyle, dx, dy); - } - _paintOneStyle(style, dx, dy); - } - }; - }; - jsPlumbUtil.extend(CanvasConnector, CanvasComponent); - - - /** - * Class:CanvasEndpoint - * Superclass for Canvas Endpoint renderers. - */ - var CanvasEndpoint = function(params) { - CanvasComponent.apply(this, arguments); - var clazz = this._jsPlumb.instance.endpointClass + " " + (params.cssClass || ""), - canvasParams = { - "class":clazz, - _jsPlumb:this._jsPlumb, - parent:params.parent, - tooltip:self.tooltip - }; - this.canvas = _newCanvas(canvasParams); - this.ctx = this.canvas.getContext("2d"); - - this.appendDisplayElement(this.canvas); - - this.paint = function(style, anchor, extents) { - jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); - if (style.outlineColor != null) { - var outlineWidth = style.outlineWidth || 1, - outlineStrokeWidth = style.lineWidth + (2 * outlineWidth); - var outlineStyle = { - strokeStyle:style.outlineColor, - lineWidth:outlineStrokeWidth - }; - } - - this._paint.apply(this, arguments); - }; - }; - jsPlumbUtil.extend(CanvasEndpoint, CanvasComponent); - - 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, 10); } - catch(e) { - if (value.substring(value.length - 1) == '%') - return parseInt(value.substring(0, value - 1), 10); - } - }, - calculateAdjustments = function(gradient) { - var offsetAdjustment = self.defaultOffset, innerRadius = self.defaultInnerRadius; - if (gradient.offset) offsetAdjustment = parseValue(gradient.offset); - if (gradient.innerRadius) innerRadius = parseValue(gradient.innerRadius); - return [offsetAdjustment, innerRadius]; - }; - this._paint = function(style) { - if (style != null) { - var ctx = self.canvas.getContext('2d'), - orientation = params.endpoint.anchor.getOrientation(params.endpoint); - - 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(self.radius, self.radius, self.radius, self.radius + xAdjust, self.radius + 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.translate(dx, dy); - ctx.arc(self.radius, self.radius, self.radius, 0, Math.PI*2, true); - ctx.closePath(); - if (style.fillStyle || style.gradient) ctx.fill(); - if (style.strokeStyle) ctx.stroke(); - } - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Dot, [ jsPlumb.Endpoints.Dot, CanvasEndpoint ]); - - jsPlumb.Endpoints.canvas.Rectangle = function(params) { - - var self = this; - jsPlumb.Endpoints.Rectangle.apply(this, arguments); - CanvasEndpoint.apply(this, arguments); - - this._paint = function(style) { - - var ctx = self.canvas.getContext("2d"), - orientation = params.endpoint.anchor.getOrientation(params.endpoint); - - 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 ? self.h : orientation[1] === 0 ? self.h / 2 : 0; - var y2 = orientation[1] == -1 ? self.h : orientation[1] === 0 ? self.h / 2 : 0; - var x1 = orientation[0] == 1 ? self.w : orientation[0] === 0 ? self.w / 2 : 0; - var x2 = orientation[0] == -1 ? self.w : orientation[0] === 0 ? self.w / 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, self.w, self.h); - ctx.closePath(); - if (style.fillStyle || style.gradient) ctx.fill(); - if (style.strokeStyle) ctx.stroke(); - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Rectangle, [ jsPlumb.Endpoints.Rectangle, CanvasEndpoint ]); - - jsPlumb.Endpoints.canvas.Triangle = function(params) { - - var self = this; - jsPlumb.Endpoints.Triangle.apply(this, arguments); - CanvasEndpoint.apply(this, arguments); - - this._paint = function(style) { - var ctx = self.canvas.getContext('2d'), - offsetX = 0, offsetY = 0, angle = 0, - orientation = params.endpoint.anchor.getOrientation(params.endpoint); - - if( orientation[0] == 1 ) { - offsetX = self.width; - offsetY = self.height; - angle = 180; - } - if( orientation[1] == -1 ) { - offsetX = self.width; - angle = 90; - } - if( orientation[1] == 1 ) { - offsetY = self.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(self.width/2, self.height/2); - ctx.lineTo(0, self.height); - ctx.closePath(); - if (style.fillStyle || style.gradient) ctx.fill(); - if (style.strokeStyle) ctx.stroke(); - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Triangle, [ jsPlumb.Endpoints.Triangle, CanvasEndpoint ]); - - /* - * 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); - }; - jsPlumbUtil.extend(jsPlumb.Connectors.canvas.Bezier, [ jsPlumb.Connectors.Bezier, CanvasConnector ]); - - /* - * 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); - }; - jsPlumbUtil.extend(jsPlumb.Connectors.canvas.Straight, [ jsPlumb.Connectors.Straight, CanvasConnector ]); - - jsPlumb.Connectors.canvas.Flowchart = function() { - jsPlumb.Connectors.Flowchart.apply(this, arguments); - CanvasConnector.apply(this, arguments); - }; - jsPlumbUtil.extend(jsPlumb.Connectors.canvas.Flowchart, [ jsPlumb.Connectors.Flowchart, CanvasConnector ]); - - */ -// ********************************* 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); - }; - jsPlumbUtil.extend(CanvasOverlay, jsPlumb.jsPlumbUIComponent); - - var AbstractCanvasArrowOverlay = function(superclass, originalArgs) { - superclass.apply(this, originalArgs); - CanvasOverlay.apply(this, originalArgs); - this.paint = function(params, containerExtents) { - var ctx = params.component.ctx, d = params.d; - - if (d) { - ctx.save(); - ctx.lineWidth = params.lineWidth; - ctx.beginPath(); - ctx.translate(params.component.translateX, params.component.translateY); - 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 (params.strokeStyle) { - ctx.strokeStyle = params.strokeStyle; - ctx.stroke(); - } - if (params.fillStyle) { - ctx.fillStyle = params.fillStyle; - ctx.fill(); - } - ctx.restore(); - } - }; - }; - - jsPlumb.Overlays.canvas.Arrow = function() { - AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.canvas.Arrow, [ jsPlumb.Overlays.Arrow, CanvasOverlay ] ); - - jsPlumb.Overlays.canvas.PlainArrow = function() { - AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.canvas.PlainArrow, [ jsPlumb.Overlays.PlainArrow, CanvasOverlay ] ); - - jsPlumb.Overlays.canvas.Diamond = function() { - AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.canvas.Diamond, [ jsPlumb.Overlays.Diamond, CanvasOverlay ] ); -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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.instance.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 pointerEventsSpec = params.pointerEventsSpec || "all", renderer = {}; - - jsPlumb.jsPlumbUIComponent.apply(this, params.originalArgs); - this.canvas = null;this.path = null;this.svg = null; - - var clazz = params.cssClass + " " + (params.originalArgs[0].cssClass || ""), - svgParams = { - "style":"", - "width":0, - "height":0, - "pointer-events":pointerEventsSpec, - "position":"absolute" - }; - this.svg = _node("svg", svgParams); - if (params.useDivWrapper) { - this.canvas = document.createElement("div"); - this.canvas.style.position = "absolute"; - jsPlumbUtil.sizeElement(this.canvas,0,0,1,1); - this.canvas.className = clazz; - } - else { - _attr(this.svg, { "class":clazz }); - this.canvas = this.svg; - } - - params._jsPlumb.appendElement(this.canvas, params.originalArgs[0].parent); - if (params.useDivWrapper) this.canvas.appendChild(this.svg); - - // TODO this displayElement stuff is common between all components, across all - // renderers. would be best moved to jsPlumbUIComponent. - var displayElements = [ this.canvas ]; - this.getDisplayElements = function() { - return displayElements; - }; - - this.appendDisplayElement = function(el) { - displayElements.push(el); - }; - - this.paint = function(style, anchor, extents) { - if (style != null) { - - var xy = [ this.x, this.y ], wh = [ this.w, this.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) { - jsPlumbUtil.sizeElement(this.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(this.svg, { - "style":p, - "width": wh[0], - "height": wh[1] - }); - } - }; - - return { - renderer:renderer - }; - }; - jsPlumbUtil.extend(SvgComponent, jsPlumb.jsPlumbUIComponent, { - cleanup:function() { - jsPlumbUtil.removeElement(this.canvas); - this.svg = null; - this.canvas = null; - this.path = null; - } - }); - - /* - * 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 - } ]); - - /*this.pointOnPath = function(location, absolute) { - if (!self.path) return [0,0]; - var p = absolute ? location : location * self.path.getTotalLength(); - return self.path.getPointAtLength(p); - };*/ - - _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 (this.bgPath) this.reattachListenersForElement(this.bgPath, this); - if (this.path) this.reattachListenersForElement(this.path, this); - }; - }; - jsPlumbUtil.extend(jsPlumb.ConnectorRenderers.svg, SvgComponent); - -// ******************************* 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 _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 (this.node == null) { - this.node = this.makeNode(s); - this.svg.appendChild(this.node); - this.attachListeners(this.node, this); - } - else if (this.updateNode != null) { - this.updateNode(this.node); - } - _applyStyles(this.svg, this.node, s, [ this.x, this.y, this.w, this.h ], this); - _pos(this.node, [ this.x, this.y ]); - }.bind(this); - - }; - jsPlumbUtil.extend(SvgEndpoint, SvgComponent, { - reattachListeners : function() { - if (this.node) this.reattachListenersForElement(this.node, this); - } - }); - - /* - * 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.radius - }); - }; - this.updateNode = function(node) { - _attr(node, { - "cx":this.w / 2, - "cy":this.h / 2, - "r":this.radius - }); - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.svg.Dot, [jsPlumb.Endpoints.Dot, SvgEndpoint]); - - /* - * 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 - }); - }; - this.updateNode = function(node) { - _attr(node, { - "width":this.w, - "height":this.h - }); - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.svg.Rectangle, [jsPlumb.Endpoints.Rectangle, SvgEndpoint]); - - /* - * 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; - this.path = null; - this.paint = function(params, containerExtents) { - // only draws on connections, not endpoints. - if (params.component.svg && containerExtents) { - if (this.path == null) { - this.path = _node("path", { - "pointer-events":"all" - }); - params.component.svg.appendChild(this.path); - - this.attachListeners(this.path, params.component); - this.attachListeners(this.path, this); - } - 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(this.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 (this.path) this.reattachListenersForElement(this.path, this); - }; - }; - jsPlumbUtil.extend(AbstractSvgArrowOverlay, jsPlumb.jsPlumbUIComponent, { - cleanup : function() { - if (this.path != null) jsPlumb.CurrentLibrary.removeElement(this.path); - } - }); - - jsPlumb.Overlays.svg.Arrow = function() { - AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.svg.Arrow, [ jsPlumb.Overlays.Arrow, AbstractSvgArrowOverlay ]); - - jsPlumb.Overlays.svg.PlainArrow = function() { - AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.svg.PlainArrow, [ jsPlumb.Overlays.PlainArrow, AbstractSvgArrowOverlay ]); - - jsPlumb.Overlays.svg.Diamond = function() { - AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.svg.Diamond, [ jsPlumb.Overlays.Diamond, AbstractSvgArrowOverlay ]); - - // 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; - }; - }; - jsPlumbUtil.extend(jsPlumb.Overlays.svg.GuideLines, jsPlumb.Overlays.GuideLines); -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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-b… - // http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-… - - 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-… - // 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. - //jsPlumb.CurrentLibrary.getDOMElement(container).appendChild(g); - //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-… - //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.instance); - self.opacityNodes.fill = _node("fill", [0,0,1,1], {opacity:"0.0"}, vml, self._jsPlumb.instance); - }; - 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); - }; - }; - jsPlumbUtil.extend(VmlComponent, jsPlumb.jsPlumbUIComponent, { - cleanup:function() { - if (this.bgCanvas) jsPlumbUtil.removeElement(this.bgCanvas); - jsPlumbUtil.removeElement(this.canvas); - } - }); - - /* - * Base class for Vml connectors. extends VmlComponent. - */ - var VmlConnector = jsPlumb.ConnectorRenderers.vml = function(params) { - this.strokeNode = null; - this.canvas = null; - VmlComponent.apply(this, arguments); - var clazz = this._jsPlumb.instance.connectorClass + (params.cssClass ? (" " + params.cssClass) : ""); - this.paint = function(style) { - if (style !== null) { - - // we need to be at least 1 pixel in each direction, because otherwise coordsize gets set to - // 0 and overlays cannot paint. - this.w = Math.max(this.w, 1); - this.h = Math.max(this.h, 1); - - var segments = this.getSegments(), p = { "path":"" }, - d = [this.x, this.y, this.w, this.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 (this.bgCanvas == null) { - p["class"] = clazz; - p.coordsize = (d[2] * scale) + "," + (d[3] * scale); - this.bgCanvas = _node("shape", d, p, params.parent, this._jsPlumb.instance, true); - _pos(this.bgCanvas, d); - this.appendDisplayElement(this.bgCanvas, true); - this.attachListeners(this.bgCanvas, this); - this.initOpacityNodes(this.bgCanvas, ["stroke"]); - } - else { - p.coordsize = (d[2] * scale) + "," + (d[3] * scale); - _pos(this.bgCanvas, d); - _atts(this.bgCanvas, p); - } - - _applyStyles(this.bgCanvas, outlineStyle, this); - } - //*/ - - if (this.canvas == null) { - p["class"] = clazz; - p.coordsize = (d[2] * scale) + "," + (d[3] * scale); - this.canvas = _node("shape", d, p, params.parent, this._jsPlumb.instance, 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 - - this.appendDisplayElement(this.canvas, true); - this.attachListeners(this.canvas, this); - this.initOpacityNodes(this.canvas, ["stroke"]); - } - else { - p.coordsize = (d[2] * scale) + "," + (d[3] * scale); - _pos(this.canvas, d); - _atts(this.canvas, p); - } - - _applyStyles(this.canvas, style, this, this._jsPlumb.instance); - } - }; - - }; - jsPlumbUtil.extend(VmlConnector, VmlComponent, { - reattachListeners : function() { - if (this.canvas) this.reattachListenersForElement(this.canvas, this); - } - }); - - /* - * - * Base class for Vml Endpoints. extends VmlComponent. - * - */ - var VmlEndpoint = window.VmlEndpoint = function(params) { - VmlComponent.apply(this, arguments); - this._jsPlumb.vml = null;//, opacityStrokeNode = null, opacityFillNode = null; - this.canvas = document.createElement("div"); - this.canvas.style.position = "absolute"; - this._jsPlumb.clazz = this._jsPlumb.instance.endpointClass + (params.cssClass ? (" " + params.cssClass) : ""); - - // TODO vml endpoint adds class to VML at constructor time. but the addClass method adds VML - // to the enclosing DIV. what to do? seems like it would be better to just target the div. - // HOWEVER...vml connection has no containing div. why not? it feels like it should. - - //var group = _getGroup(params.parent); - //group.appendChild(self.canvas); - params._jsPlumb.appendElement(this.canvas, params.parent); - - this.paint = function(style, anchor) { - var p = { }, vml = this._jsPlumb.vml; - - jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); - if (this._jsPlumb.vml == null) { - p["class"] = this._jsPlumb.clazz; - vml = this._jsPlumb.vml = this.getVml([0,0, this.w, this.h], p, anchor, this.canvas, this._jsPlumb.instance); - this.attachListeners(vml, this); - - this.appendDisplayElement(vml, true); - this.appendDisplayElement(this.canvas, true); - - this.initOpacityNodes(vml, ["fill"]); - } - else { - _pos(vml, [0,0, this.w, this.h]); - _atts(vml, p); - } - - _applyStyles(vml, style, this); - }; - }; - jsPlumbUtil.extend(VmlEndpoint, VmlComponent, { - reattachListeners : function() { - if (this._jsPlumb.vml) this.reattachListenersForElement(this._jsPlumb.vml, this); - } - }); - -// ******************************* 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); }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.vml.Dot, VmlEndpoint); - - 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); }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.vml.Rectangle, VmlEndpoint); - - /* - * 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.component; - 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.instance, 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); - }; - }; - jsPlumbUtil.extend(AbstractVmlArrowOverlay, VmlComponent); - - jsPlumb.Overlays.vml.Arrow = function() { - AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.vml.Arrow, [ jsPlumb.Overlays.Arrow, AbstractVmlArrowOverlay ]); - - jsPlumb.Overlays.vml.PlainArrow = function() { - AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.vml.PlainArrow, [ jsPlumb.Overlays.PlainArrow, AbstractVmlArrowOverlay ]); - - jsPlumb.Overlays.vml.Diamond = function() { - AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.vml.Diamond, [ jsPlumb.Overlays.Diamond, AbstractVmlArrowOverlay ]); - -// ******************************* /vml overlays ***************************************************** - -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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. - * 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. - * setDragFilter sets a filter for some element that indicates areas of the element that should not respond to dragging. - * 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; - - var _getElementObject = function(el) { - return typeof(el) == "string" ? $("#" + el) : $(el); - }; - - jsPlumb.CurrentLibrary = { - - /** - * adds the given class to the element object. - */ - addClass : function(el, clazz) { - el = _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. - -TODO: REMOVE! - - */ - appendElement : function(child, parent) { - _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 = _getElementObject(el); - el.bind(event, callback); - }, - - destroyDraggable : function(el) { - if ($(el).data("draggable")) - $(el).draggable("destroy"); - }, - - destroyDroppable : function(el) { - if ($(el).data("droppable")) - $(el).droppable("destroy"); - }, - - /** - * 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); - }, - - 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 (el == null) return null; - 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 : _getElementObject, - - /** - * 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 _getElementObject(el).parent(); - }, - - getScrollLeft : function(el) { - return el.scrollLeft(); - }, - - getScrollTop : function(el) { - return el.scrollTop(); - }, - - getSelector : function(context, spec) { - if (arguments.length == 2) - return _getElementObject(context).find(spec); - else - return $(context); - }, - - /** - * gets the size for the element object, in an array : [ width, height ]. - */ - getSize : function(el) { - el = $(el); - return [el.outerWidth(), el.outerHeight()]; - }, - - getTagName : function(el) { - var e = _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, _jsPlumb) { - options = options || {}; - el = $(el); - -/* - // css3 transforms - // http://gungfoo.wordpress.com/2013/02/15/jquery-ui-resizabledraggable-with-t… - options.start = _jsPlumb.wrap(options["start"], function(e, ui) { - // TODO why is this 0? - ui.position.left = 0; - ui.position.top = 0; - }); - - options.drag = _jsPlumb.wrap(options["drag"], function(e, ui) { - - console.log("original", ui.originalPosition.left, ui.originalPosition.top); - console.log("current", ui.position.left, ui.position.top); - - //var changeLeft = ui.position.left - ui.originalPosition.left; // find change in left - //var newLeft = ui.originalPosition.left + (changeLeft * _jsPlumb.getZoom()); // adjust new left by our zoomScale - - //var changeTop = ui.position.top - ui.originalPosition.top; // find change in top - //var newTop = ui.originalPosition.top + (changeTop * _jsPlumb.getZoom()); // adjust new top by our zoomScale - - //ui.position.left = newLeft; - //ui.position.top = newTop; - - ui.position.left *= _jsPlumb.getZoom(); - ui.position.top *= _jsPlumb.getZoom(); - - }); -*/ - - options["start"] = jsPlumbUtil.wrap(options["start"], function() { - $("body").addClass(_jsPlumb.dragSelectClass); - }, false); - - options["stop"] = jsPlumbUtil.wrap(options["stop"], function() { - $("body").removeClass(_jsPlumb.dragSelectClass); - }); - - // 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) { - 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 = _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) { - _getElementObject(element).remove(); - }, - - setDragFilter : function(el, filter) { - if (jsPlumb.CurrentLibrary.isAlreadyDraggable(el)) - el.draggable("option", "cancel", filter); - }, - - setDraggable : function(el, draggable) { - el.draggable("option", "disabled", !draggable); - }, - - setDragScope : function(el, scope) { - el.draggable("option", "scope", scope); - }, - - setOffset : function(el, o) { - _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) { - var h = jQuery._data(_getElementObject(el)[0], "handle"); - h(originalEvent); - }, - - unbind : function(el, event, callback) { - el = _getElementObject(el); - el.unbind(event, callback); - } - }; - - $(document).ready(jsPlumb.init); - -})(jQuery); - Added: sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/jquery.jsPlumb-1.5.3.js =================================================================== --- sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/jquery.jsPlumb-1.5.3.js (rev 0) +++ sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/jquery.jsPlumb-1.5.3.js 2013-10-15 08:30:43 UTC (rev 219) @@ -0,0 +1,11170 @@ +/** +* jsBezier-0.6 +* +* Copyright (c) 2010 - 2013 Simon Porritt (simon.porritt(a)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)); + }; + + var _isPoint = function(curve) { + return curve[0].x == curve[1].x && curve[0].y == curve[1].y; + }; + + /** + * 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) { + + if (_isPoint(curve)) { + return { + point:curve[0], + location:location + }; + } + + 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) { + if (_isPoint(curve)) return 0; + + 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 + }; +})(); + +/** + * jsPlumbGeom v0.1 + * + * Various geometry functions written as part of jsPlumb and perhaps useful for others. + * + * Copyright (c) 2013 Simon Porritt + * + * Permission is hereby granted, free of charge, to any person + * obtaining a copy of this software and associated documentation + * files (the "Software"), to deal in the Software without + * restriction, including without limitation the rights to use, + * copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the + * Software is furnished to do so, subject to the following + * conditions: + * + * The above copyright notice and this permission notice shall be + * included in all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, + * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES + * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND + * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT + * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, + * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR + * OTHER DEALINGS IN THE SOFTWARE. + */ +;(function() { + + + "use strict"; + + // Establish the root object, `window` in the browser, or `global` on the server. + var root = this; + var jsPlumbGeom; + if (typeof exports !== 'undefined') { + jsPlumbGeom = exports; + } else { + jsPlumbGeom = root.jsPlumbGeom = {}; + } + + var _isa = function(a) { return Object.prototype.toString.call(a) === "[object Array]"; }, + _pointHelper = function(p1, p2, fn) { + p1 = _isa(p1) ? p1 : [p1.x, p1.y]; + p2 = _isa(p2) ? p2 : [p2.x, p2.y]; + return fn(p1, p2); + }, + /** + * @name jsPlumbGeom.gradient + * @function + * @desc Calculates the gradient of a line between the two points. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Float} The gradient of a line between the two points. + */ + _gradient = jsPlumbGeom.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]); + }); + }, + /** + * @name jsPlumbGeom.normal + * @function + * @desc Calculates the gradient of a normal to a line between the two points. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Float} The gradient of a normal to a line between the two points. + */ + _normal = jsPlumbGeom.normal = function(p1, p2) { + return -1 / _gradient(p1, p2); + }, + /** + * @name jsPlumbGeom.lineLength + * @function + * @desc Calculates the length of a line between the two points. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Float} The length of a line between the two points. + */ + _lineLength = jsPlumbGeom.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)); + }); + }, + /** + * @name jsPlumbGeom.quadrant + * @function + * @desc Calculates the quadrant in which the angle between the two points lies. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Integer} The quadrant - 1 for upper right, 2 for lower right, 3 for lower left, 4 for upper left. + */ + _quadrant = jsPlumbGeom.quadrant = 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; + } + }); + }, + /** + * @name jsPlumbGeom.theta + * @function + * @desc Calculates the angle between the two points. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Float} The angle between the two points. + */ + _theta = jsPlumbGeom.theta = function(p1, p2) { + return _pointHelper(p1, p2, function(_p1, _p2) { + var m = _gradient(_p1, _p2), + t = Math.atan(m), + s = _quadrant(_p1, _p2); + if ((s == 4 || s== 3)) t += Math.PI; + if (t < 0) t += (2 * Math.PI); + + return t; + }); + }, + /** + * @name jsPlumbGeom.intersects + * @function + * @desc Calculates whether or not the two rectangles intersect. + * @param {Rectangle} r1 First rectangle, as a js object in the form `{x:.., y:.., w:.., h:..}` + * @param {Rectangle} r2 Second rectangle, as a js object in the form `{x:.., y:.., w:.., h:..}` + * @return {Boolean} True if the rectangles intersect, false otherwise. + */ + _intersects = jsPlumbGeom.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] ], + /** + * @name jsPlumbGeom.pointOnLine + * @function + * @desc Calculates a point on the line from `fromPoint` to `toPoint` that is `distance` units along the length of the line. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Point} Point on the line, in the form `{ x:..., y:... }`. + */ + _pointOnLine = jsPlumbGeom.pointOnLine = function(fromPoint, toPoint, distance) { + var m = _gradient(fromPoint, toPoint), + s = _quadrant(fromPoint, toPoint), + segmentMultiplier = distance > 0 ? _segmentMultipliers[s] : _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 }; + }, + /** + * @name jsPlumbGeom.perpendicularLineTo + * @function + * @desc Calculates a line of length `length` that is perpendicular to the line from `fromPoint` to `toPoint` and passes through `toPoint`. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Line} Perpendicular line, in the form `[ { x:..., y:... }, { x:..., y:... } ]`. + */ + _perpendicularLineTo = jsPlumbGeom.perpendicularLineTo = function(fromPoint, toPoint, length) { + var m = _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}]; + }; +}).call(this); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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 _isa = function(a) { return Object.prototype.toString.call(a) === "[object Array]"; }, + _isnum = function(n) { return Object.prototype.toString.call(n) === "[object Number]"; }, + _iss = function(s) { return typeof s === "string"; }, + _isb = function(s) { return typeof s === "boolean"; }, + _isnull = function(s) { return s == null; }, + _iso = function(o) { return o == null ? false : Object.prototype.toString.call(o) === "[object Object]"; }, + _isd = function(o) { return Object.prototype.toString.call(o) === "[object Date]"; }, + _isf = function(o) { return Object.prototype.toString.call(o) === "[object Function]"; }, + _ise = function(o) { + for (var i in o) { if (o.hasOwnProperty(i)) return false; } + return true; + }, + pointHelper = function(p1, p2, fn) { + p1 = _isa(p1) ? p1 : [p1.x, p1.y]; + p2 = _isa(p2) ? p2 : [p2.x, p2.y]; + return fn(p1, p2); + }; + + jsPlumbUtil = { + isArray : _isa, + isString : _iss, + isBoolean: _isb, + isNull : _isnull, + isObject : _iso, + isDate : _isd, + isFunction: _isf, + isEmpty:_ise, + isNumber:_isnum, + clone : function(a) { + if (_iss(a)) return "" + a; + else if (_isb(a)) return !!a; + else if (_isd(a)) return new Date(a.getTime()); + else if (_isf(a)) return a; + else if (_isa(a)) { + var b = []; + for (var i = 0; i < a.length; i++) + b.push(this.clone(a[i])); + return b; + } + else if (_iso(a)) { + var c = {}; + for (var j in a) + c[j] = this.clone(a[j]); + return c; + } + else return a; + }, + merge : function(a, b) { + var c = this.clone(a); + for (var i in b) { + if (c[i] == null || _iss(b[i]) || _isb(b[i])) + c[i] = b[i]; + else { + if (_isa(b[i])/* && this.isArray(c[i])*/) { + var ar = []; + // if c's object is also an array we can keep its values. + if (_isa(c[i])) ar.push.apply(ar, c[i]); + ar.push.apply(ar, b[i]); + c[i] = ar; + } + else if(_iso(b[i])) { + // overwite c's value with an object if it is not already one. + if (!_iso(c[i])) + c[i] = {}; + for (var j in b[i]) + c[i][j] = b[i][j]; + } + } + } + return c; + }, + copyValues:function(names, from, to) { + for (var i = 0; i < names.length; i++) + to[names[i]] = from[names[i]]; + }, + // + // 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 != null) { + fromString = fromString.replace(matches[i], val); + } + } + } + return fromString; + }, + // process one entry. + _one = function(d) { + if (d != null) { + if (_iss(d)) { + return getValue(d); + } + else if (_isa(d)) { + var r = []; + for (var i = 0; i < d.length; i++) + r.push(_one(d[i])); + return r; + } + else if (_iso(d)) { + var s = {}; + for (var j in d) { + s[j] = _one(d[j]); + } + return s; + } + 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; + }, + 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, insertAtStart) { + var l = map[key]; + if (l == null) { + l = []; + map[key] = l; + } + l[insertAtStart ? "unshift" : "push"](value); + return l; + }, + // + // extends the given obj (which can be an array) with the given constructor function, prototype functions, and + // class members, any of which may be null. + // + extend : function(child, parent, _protoFn, _protoAtts) { + _protoFn = _protoFn || {}; + _protoAtts = _protoAtts || {}; + parent = _isa(parent) ? parent : [ parent ]; + + for (var i = 0; i < parent.length; i++) { + for (var j in parent[i].prototype) { + if(parent[i].prototype.hasOwnProperty(j)) { + child.prototype[j] = parent[i].prototype[j]; + } + } + } + + var _makeFn = function(name) { + return function() { + for (var i = 0; i < parent.length; i++) { + if (parent[i].prototype[name]) + parent[i].prototype[name].apply(this, arguments); + } + return _protoFn[name].apply(this, arguments); + }; + }; + + for (var k in _protoFn) { + child.prototype[k] = _makeFn(k); + } + + return child; + }, + uuid : function() { + return ('xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { + var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); + return v.toString(16); + })); + }, + 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]); + }, + /* + * Function: sizeElement + * Helper to size and position an element. You would typically use + * this when writing your own Connector or Endpoint implementation. + * + * Parameters: + * x - [int] x position for the element origin + * y - [int] y position for the element origin + * w - [int] width of the element + * h - [int] height of the element + * + */ + sizeElement : function(el, x, y, w, h) { + if (el) { + el.style.height = h + "px"; + el.height = h; + el.style.width = w + "px"; + el.width = w; + el.style.left = x + "px"; + el.style.top = y + "px"; + } + }, + /** + * @name jsPlumbUtil.wrap + * @desc Wraps one function with another, creating a placeholder for the + * wrapped function if it was null. this is used to wrap the various + * drag/drop event functions - to allow jsPlumb to be notified of + * important lifecycle events without imposing itself on the user's + * drag/drop functionality. + * @param {Function} wrappedFunction original function to wrap; may be null. + * @param {Function} newFunction function to wrap the original with. + * @param {Object} [returnOnThisValue] Optional. Indicates that the wrappedFunction should + * not be executed if the newFunction returns a value matching 'returnOnThisValue'. + * note that this is a simple comparison and only works for primitives right now. + */ + wrap : function(wrappedFunction, newFunction, returnOnThisValue) { + wrappedFunction = wrappedFunction || function() { }; + newFunction = newFunction || function() { }; + return function() { + var r = null; + try { + r = newFunction.apply(this, arguments); + } catch (e) { + jsPlumbUtil.log("jsPlumb function failed : " + e); + } + if (returnOnThisValue == null || (r !== returnOnThisValue)) { + try { + r = wrappedFunction.apply(this, arguments); + } catch (e) { + jsPlumbUtil.log("wrapped function failed : " + e); + } + } + return r; + }; + } + }; + + + jsPlumbUtil.EventGenerator = function() { + var _listeners = {}, 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" ]; + + this.bind = function(event, listener, insertAtStart) { + jsPlumbUtil.addToList(_listeners, event, listener, insertAtStart); + return this; + }; + + this.fire = function(event, value, originalEvent) { + if (!eventsSuspended && _listeners[event]) { + // instead of looping through the array we get a counter and a length, because it is possible + // that an event fired from here could cause the object to get cleaned up, which would throw + // away the listeners. so after each cycle through the loop we check to ensure we haven't + // been nuked. + var l = _listeners[event].length, i = 0, _gone = false, ret = null; + if (!this.shouldFireEvent || this.shouldFireEvent(event, value, originalEvent)) { + while (!_gone && i < l && ret !== false) { + + // 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 { + ret = _listeners[event][i](value, originalEvent); + } catch (e) { + jsPlumbUtil.log("jsPlumb: fire failed for event " + event + " : " + e); + } + } + i++; + if (_listeners == null || _listeners[event] == null) _gone = true; + } + } + } + return this; + }; + + this.unbind = function(event) { + if (event) + delete _listeners[event]; + else { + _listeners = {}; + } + return this; + }; + + this.getListener = function(forEvent) { + return _listeners[forEvent]; + }; + this.setSuspendEvents = function(val) { + eventsSuspended = val; + }; + this.isSuspendEvents = function() { + return eventsSuspended; + }; + this.cleanupListeners = function() { + for (var i in _listeners) { + _listeners[i].splice(0); + delete _listeners[i]; + } + }; + }; + + + jsPlumbUtil.EventGenerator.prototype = { + cleanup:function() { + this.cleanupListeners(); + } + }; + + + // thanks MDC + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Ob… + if (!Function.prototype.bind) { + Function.prototype.bind = function (oThis) { + if (typeof this !== "function") { + // closest thing possible to the ECMAScript 5 internal IsCallable function + throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); + } + + var aArgs = Array.prototype.slice.call(arguments, 1), + fToBind = this, + fNOP = function () {}, + fBound = function () { + return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, + aArgs.concat(Array.prototype.slice.call(arguments))); + }; + + fNOP.prototype = this.prototype; + fBound.prototype = new fNOP(); + + return fBound; + }; + } + +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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… + 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; + if (b != null && b.style != null) { + b.style.behavior = "url(#default#VML)"; + vmlAvailable.vml = b ? typeof b.adj == "object": true; + } + else + vmlAvailable.vml = false; + 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), + id = _currentInstance.getId(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(p.childNodes[i], 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(el); + }; + + // refresh the offsets for child elements of this element. + this.updateOffsets = function(elId) { + var jpcl = jsPlumb.CurrentLibrary, + el = jpcl.getElementObject(elId), + domEl = jpcl.getDOMElement(el), + id = _currentInstance.getId(domEl), + 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.getElementObject(el), + cLoc = jsPlumb.CurrentLibrary.getOffset(c), + p = el.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) { + _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 = {}; + }; + + // + // notification drag ended. from 1.5.3 we check automatically if need to update some + // ancestor's offsets. + // + this.dragEnded = function(el) { + var id = _currentInstance.getId(el), + ancestor = _draggablesForElements[id]; + + if (ancestor) this.updateOffsets(ancestor); + }; + + this.setParent = function(el, elId, p, pId) { + var current = _draggablesForElements[elId]; + if (current) { + if (!_delements[pId]) + _delements[pId] = {}; + _delements[pId][elId] = _delements[current][elId]; + delete _delements[current][elId]; + var pLoc = jsPlumb.CurrentLibrary.getOffset(p), + cLoc = jsPlumb.CurrentLibrary.getOffset(el); + _delements[pId][elId].offset = { + left:cLoc.left - pLoc.left, + top:cLoc.top - pLoc.top + }; + _draggablesForElements[elId] = pId; + } + }; + + }; + + // 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, + + getAttribute:function(el, attName) { + return el.getAttribute(attName); + }, + + setAttribute:function(el, a, v) { + el.setAttribute(a, v); + }, + + 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; + } + }; + + + /* + + addClass: + + add: function( elem, classNames ) { + jQuery.each((classNames || "").split(/\s+/), function(i, className){ + if ( elem.nodeType == 1 && !jQuery.className.has( elem.className, className ) ) + elem.className += (elem.className ? " " : "") + className; + }); + }, + */ + + /* + + removeClass: + + elem.className = classNames !== undefined ? + jQuery.grep(elem.className.split(/\s+/), function(className){ + return !jQuery.className.has( classNames, className ); + }).join(" ") : + +*/ + +})(); +/** + * @module jsPlumb + * @description Provides a way to visually connect elements on an HTML page, using either SVG, Canvas + * elements, or VML. + * + * - [Demo Site](http://jsplumb.org) + * - [GitHub](http://github.com/sporritt/jsplumb) + * + * Dual licensed under the MIT and GPL2 licenses. + * + * Copyright (c) 2010 - 2013 Simon Porritt (simon.porritt(a)gmail.com) + */ +;(function() { + + var _ju = jsPlumbUtil, + _addClass = function(el, clazz) { jsPlumb.CurrentLibrary.addClass(_gel(el), clazz); }, + _hasClass = function(el, clazz) { return jsPlumb.CurrentLibrary.hasClass(_gel(el), clazz); }, + _removeClass = function(el, clazz) { jsPlumb.CurrentLibrary.removeClass(_gel(el), clazz); }, + _gel = function(el) { return jsPlumb.CurrentLibrary.getElementObject(el); }, + _dom = function(el) { return jsPlumb.CurrentLibrary.getDOMElement(el); }, + _getOffset = function(el, _instance) { + var o = jsPlumb.CurrentLibrary.getOffset(_gel(el)); + if (_instance != null) { + var z = _instance.getZoom(); + return {left:o.left / z, top:o.top / z }; + } + else + return o; + }, + _getSize = function(el) { + return jsPlumb.CurrentLibrary.getSize(_gel(el)); + }, + + /** + * creates a timestamp, using milliseconds since 1970, but as a string. + */ + _timestamp = function() { return "" + (new Date()).getTime(); }, + + // helper method to update the hover style whenever it, or paintStyle, changes. + // we use paintStyle as the foundation and merge hoverPaintStyle over the + // top. + _updateHoverStyle = function(component) { + if (component._jsPlumb.paintStyle && component._jsPlumb.hoverPaintStyle) { + var mergedHoverStyle = {}; + jsPlumb.extend(mergedHoverStyle, component._jsPlumb.paintStyle); + jsPlumb.extend(mergedHoverStyle, component._jsPlumb.hoverPaintStyle); + delete component._jsPlumb.hoverPaintStyle; + // we want the fillStyle of paintStyle to override a gradient, if possible. + if (mergedHoverStyle.gradient && component._jsPlumb.paintStyle.fillStyle) + delete mergedHoverStyle.gradient; + component._jsPlumb.hoverPaintStyle = mergedHoverStyle; + } + }, + events = [ "click", "dblclick", "mouseenter", "mouseout", "mousemove", "mousedown", "mouseup", "contextmenu" ], + eventFilters = { "mouseout":"mouseexit" }, + _updateAttachedElements = function(component, state, timestamp, sourceElement) { + var affectedElements = component.getAttachedElements(); + if (affectedElements) { + for (var i = 0, j = affectedElements.length; i < j; i++) { + if (!sourceElement || sourceElement != affectedElements[i]) + affectedElements[i].setHover(state, true, timestamp); // tell the attached elements not to inform their own attached elements. + } + } + }, + _splitType = function(t) { return t == null ? null : t.split(" "); }, + _applyTypes = function(component, params, doNotRepaint) { + if (component.getDefaultType) { + var td = component.getTypeDescriptor(); + + var o = _ju.merge({}, component.getDefaultType()); + for (var i = 0, j = component._jsPlumb.types.length; i < j; i++) + o = _ju.merge(o, component._jsPlumb.instance.getType(component._jsPlumb.types[i], td)); + + if (params) { + o = _ju.populate(o, params); + } + + component.applyType(o, doNotRepaint); + if (!doNotRepaint) component.repaint(); + } + }, + +// ------------------------------ BEGIN jsPlumbUIComponent -------------------------------------------- + + jsPlumbUIComponent = window.jsPlumbUIComponent = function(params) { + + jsPlumbUtil.EventGenerator.apply(this, arguments); + + var self = this, + a = arguments, + idPrefix = self.idPrefix, + id = idPrefix + (new Date()).getTime(), + jpcl = jsPlumb.CurrentLibrary; + + this._jsPlumb = { + instance: params._jsPlumb, + parameters:params.parameters || {}, + paintStyle:null, + hoverPaintStyle:null, + paintStyleInUse:null, + hover:false, + beforeDetach:params.beforeDetach, + beforeDrop:params.beforeDrop, + overlayPlacements : [], + hoverClass: params.hoverClass || params._jsPlumb.Defaults.HoverClass || jsPlumb.Defaults.HoverClass, + types:[] + }; + + this.getId = function() { return id; }; + + // all components can generate events + + if (params.events) { + for (var i in params.events) + self.bind(i, params.events[i]); + } + + // all components get this clone function. + // TODO issue 116 showed a problem with this - it seems 'a' that is in + // the clone function's scope is shared by all invocations of it, the classic + // JS closure problem. for now, jsPlumb does a version of this inline where + // it used to call clone. but it would be nice to find some time to look + // further at this. + this.clone = function() { + var o = {};//new Object(); + this.constructor.apply(o, a); + return o; + }.bind(this); + + // user can supply a beforeDetach callback, which will be executed before a detach + // is performed; returning false prevents the detach. + this.isDetachAllowed = function(connection) { + var r = true; + if (this._jsPlumb.beforeDetach) { + try { + r = this._jsPlumb.beforeDetach(connection); + } + catch (e) { _ju.log("jsPlumb: beforeDetach callback failed", e); } + } + return r; + }; + + // user can supply a beforeDrop callback, which will be executed before a dropped + // connection is confirmed. user can return false to reject connection. + this.isDropAllowed = function(sourceId, targetId, scope, connection, dropEndpoint) { + var r = this._jsPlumb.instance.checkCondition("beforeDrop", { + sourceId:sourceId, + targetId:targetId, + scope:scope, + connection:connection, + dropEndpoint:dropEndpoint + }); + if (this._jsPlumb.beforeDrop) { + try { + r = this._jsPlumb.beforeDrop({ + sourceId:sourceId, + targetId:targetId, + scope:scope, + connection:connection, + dropEndpoint:dropEndpoint + }); + } + catch (e) { _ju.log("jsPlumb: beforeDrop callback failed", e); } + } + return r; + }; + + var boundListeners = [], + bindAListener = function(obj, type, fn) { + boundListeners.push([obj, type, fn]); + obj.bind(type, fn); + }, + domListeners = [], + bindOne = function(o, c, evt) { + var filteredEvent = eventFilters[evt] || evt, + fn = function(ee) { + c.fire(filteredEvent, c, ee); + }; + domListeners.push([o, evt, fn]); + jpcl.bind(o, evt, fn); + }, + unbindOne = function(o, evt, fn) { + var filteredEvent = eventFilters[evt] || evt; + jpcl.unbind(o, evt, fn); + }; + + this.bindListeners = function(obj, _self, _hoverFunction) { + bindAListener(obj, "click", function(ep, e) { _self.fire("click", _self, e); }); + bindAListener(obj, "dblclick", function(ep, e) { _self.fire("dblclick", _self, e); }); + bindAListener(obj, "contextmenu", function(ep, e) { _self.fire("contextmenu", _self, e); }); + bindAListener(obj, "mouseenter", function(ep, e) { + if (!_self.isHover()) { + _hoverFunction(true); + _self.fire("mouseenter", _self, e); + } + }); + bindAListener(obj, "mouseexit", function(ep, e) { + if (_self.isHover()) { + _hoverFunction(false); + _self.fire("mouseexit", _self, e); + } + }); + bindAListener(obj, "mousedown", function(ep, e) { _self.fire("mousedown", _self, e); }); + bindAListener(obj, "mouseup", function(ep, e) { _self.fire("mouseup", _self, e); }); + }; + + this.unbindListeners = function() { + for (var i = 0; i < boundListeners.length; i++) { + var o = boundListeners[i]; + o[0].unbind(o[1], o[2]); + } + boundListeners = null; + }; + + this.attachListeners = function(o, c) { + for (var i = 0, j = events.length; i < j; i++) { + bindOne(o, c, events[i]); + } + }; + this.detachListeners = function() { + for (var i = 0; i < domListeners.length; i++) { + unbindOne(domListeners[i][0], domListeners[i][1], domListeners[i][2]); + } + domListeners = null; + }; + + this.reattachListenersForElement = function(o) { + if (arguments.length > 1) { + for (var i = 0, j = events.length; i < j; i++) + unbindOne(o, events[i]); + for (i = 1, j = arguments.length; i < j; i++) + this.attachListeners(o, arguments[i]); + } + }; + }; + + jsPlumbUtil.extend(jsPlumbUIComponent, jsPlumbUtil.EventGenerator, { + + getParameter : function(name) { + return this._jsPlumb.parameters[name]; + }, + + setParameter : function(name, value) { + this._jsPlumb.parameters[name] = value; + }, + + getParameters : function() { + return this._jsPlumb.parameters; + }, + + setParameters : function(p) { + this._jsPlumb.parameters = p; + }, + + addClass : function(clazz) { + if (this.canvas != null) + _addClass(this.canvas, clazz); + }, + + removeClass : function(clazz) { + if (this.canvas != null) + _removeClass(this.canvas, clazz); + }, + + setType : function(typeId, params, doNotRepaint) { + this._jsPlumb.types = _splitType(typeId) || []; + _applyTypes(this, params, doNotRepaint); + }, + + getType : function() { + return this._jsPlumb.types; + }, + + reapplyTypes : function(params, doNotRepaint) { + _applyTypes(this, params, doNotRepaint); + }, + + hasType : function(typeId) { + return jsPlumbUtil.indexOf(this._jsPlumb.types, typeId) != -1; + }, + + addType : function(typeId, params, doNotRepaint) { + var t = _splitType(typeId), _cont = false; + if (t != null) { + for (var i = 0, j = t.length; i < j; i++) { + if (!this.hasType(t[i])) { + this._jsPlumb.types.push(t[i]); + _cont = true; + } + } + if (_cont) _applyTypes(this, params, doNotRepaint); + } + }, + + removeType : function(typeId, doNotRepaint) { + var t = _splitType(typeId), _cont = false, _one = function(tt) { + var idx = _ju.indexOf(this._jsPlumb.types, tt); + if (idx != -1) { + this._jsPlumb.types.splice(idx, 1); + return true; + } + return false; + }.bind(this); + + if (t != null) { + for (var i = 0,j = t.length; i < j; i++) { + _cont = _one(t[i]) || _cont; + } + if (_cont) _applyTypes(this, null, doNotRepaint); + } + }, + + toggleType : function(typeId, params, doNotRepaint) { + var t = _splitType(typeId); + if (t != null) { + for (var i = 0, j = t.length; i < j; i++) { + var idx = jsPlumbUtil.indexOf(this._jsPlumb.types, t[i]); + if (idx != -1) + this._jsPlumb.types.splice(idx, 1); + else + this._jsPlumb.types.push(t[i]); + } + + _applyTypes(this, params, doNotRepaint); + } + }, + applyType : function(t, doNotRepaint) { + this.setPaintStyle(t.paintStyle, doNotRepaint); + this.setHoverPaintStyle(t.hoverPaintStyle, doNotRepaint); + if (t.parameters){ + for (var i in t.parameters) + this.setParameter(i, t.parameters[i]); + } + }, + setPaintStyle : function(style, doNotRepaint) { +// this._jsPlumb.paintStyle = jsPlumb.extend({}, style); +// TODO figure out if we want components to clone paintStyle so as not to share it. + this._jsPlumb.paintStyle = style; + this._jsPlumb.paintStyleInUse = this._jsPlumb.paintStyle; + _updateHoverStyle(this); + if (!doNotRepaint) this.repaint(); + }, + getPaintStyle : function() { + return this._jsPlumb.paintStyle; + }, + setHoverPaintStyle : function(style, doNotRepaint) { + //this._jsPlumb.hoverPaintStyle = jsPlumb.extend({}, style); +// TODO figure out if we want components to clone paintStyle so as not to share it. + this._jsPlumb.hoverPaintStyle = style; + _updateHoverStyle(this); + if (!doNotRepaint) this.repaint(); + }, + getHoverPaintStyle : function() { + return this._jsPlumb.hoverPaintStyle; + }, + cleanup:function() { + this.unbindListeners(); + this.detachListeners(); + }, + destroy:function() { + this.cleanupListeners(); + this.clone = null; + this._jsPlumb = null; + }, + + isHover : function() { return this._jsPlumb.hover; }, + + setHover : function(hover, ignoreAttachedElements, timestamp) { + var jpcl = jsPlumb.CurrentLibrary; + // while dragging, we ignore these events. this keeps the UI from flashing and + // swishing and whatevering. + if (this._jsPlumb && !this._jsPlumb.instance.currentlyDragging && !this._jsPlumb.instance.isHoverSuspended()) { + + this._jsPlumb.hover = hover; + + if (this.canvas != null) { + if (this._jsPlumb.instance.hoverClass != null) { + jpcl[hover ? "addClass" : "removeClass"](this.canvas, this._jsPlumb.instance.hoverClass); + } + } + if (this._jsPlumb.hoverPaintStyle != null) { + this._jsPlumb.paintStyleInUse = hover ? this._jsPlumb.hoverPaintStyle : this._jsPlumb.paintStyle; + if (!this._jsPlumb.instance.isSuspendDrawing()) { + timestamp = timestamp || _timestamp(); + this.repaint({timestamp:timestamp, recalc:false}); + } + } + // get the list of other affected elements, if supported by this component. + // for a connection, its the endpoints. for an endpoint, its the connections! surprise. + if (this.getAttachedElements && !ignoreAttachedElements) + _updateAttachedElements(this, hover, _timestamp(), this); + } + } + }); + +// ------------------------------ END jsPlumbUIComponent -------------------------------------------- + +// ------------------------------ BEGIN OverlayCapablejsPlumbUIComponent -------------------------------------------- + + var _internalLabelOverlayId = "__label", + // helper to get the index of some overlay + _getOverlayIndex = function(component, id) { + var idx = -1; + for (var i = 0, j = component._jsPlumb.overlays.length; i < j; i++) { + if (id === component._jsPlumb.overlays[i].id) { + idx = i; + break; + } + } + return idx; + }, + // this is a shortcut helper method to let people add a label as + // overlay. + _makeLabelOverlay = function(component, params) { + + var _params = { + cssClass:params.cssClass, + labelStyle : component.labelStyle, + id:_internalLabelOverlayId, + component:component, + _jsPlumb:component._jsPlumb.instance // TODO not necessary, since the instance can be accessed through the component. + }, + mergedParams = jsPlumb.extend(_params, params); + + return new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()].Label( mergedParams ); + }, + _processOverlay = function(component, o) { + var _newOverlay = null; + if (_ju.isArray(o)) { // this is for the shorthand ["Arrow", { width:50 }] syntax + // there's also a three arg version: + // ["Arrow", { width:50 }, {location:0.7}] + // which merges the 3rd arg into the 2nd. + var type = o[0], + // make a copy of the object so as not to mess up anyone else's reference... + p = jsPlumb.extend({component:component, _jsPlumb:component._jsPlumb.instance}, o[1]); + if (o.length == 3) jsPlumb.extend(p, o[2]); + _newOverlay = new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()][type](p); + } else if (o.constructor == String) { + _newOverlay = new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()][o]({component:component, _jsPlumb:component._jsPlumb.instance}); + } else { + _newOverlay = o; + } + + component._jsPlumb.overlays.push(_newOverlay); + }, + _calculateOverlaysToAdd = function(component, params) { + var defaultKeys = component.defaultOverlayKeys || [], o = params.overlays, + checkKey = function(k) { + return component._jsPlumb.instance.Defaults[k] || jsPlumb.Defaults[k] || []; + }; + + if (!o) o = []; + + for (var i = 0, j = defaultKeys.length; i < j; i++) + o.unshift.apply(o, checkKey(defaultKeys[i])); + + return o; + }, + OverlayCapableJsPlumbUIComponent = window.OverlayCapableJsPlumbUIComponent = function(params) { + + jsPlumbUIComponent.apply(this, arguments); + this._jsPlumb.overlays = []; + + var _overlays = _calculateOverlaysToAdd(this, params); + if (_overlays) { + for (var i = 0, j = _overlays.length; i < j; i++) { + _processOverlay(this, _overlays[i]); + } + } + + if (params.label) { + var loc = params.labelLocation || this.defaultLabelLocation || 0.5, + labelStyle = params.labelStyle || this._jsPlumb.instance.Defaults.LabelStyle || jsPlumb.Defaults.LabelStyle; + + this._jsPlumb.overlays.push(_makeLabelOverlay(this, { + label:params.label, + location:loc, + labelStyle:labelStyle + })); + } + }; + + jsPlumbUtil.extend(OverlayCapableJsPlumbUIComponent, jsPlumbUIComponent, { + applyType : function(t, doNotRepaint) { + this.removeAllOverlays(doNotRepaint); + if (t.overlays) { + for (var i = 0, j = t.overlays.length; i < j; i++) + this.addOverlay(t.overlays[i], true); + } + }, + setHover : function(hover, ignoreAttachedElements, timestamp) { + if (this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) { + for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) { + this._jsPlumb.overlays[i][hover ? "addClass":"removeClass"](this._jsPlumb.instance.hoverClass); + } + } + }, + addOverlay : function(overlay, doNotRepaint) { + _processOverlay(this, overlay); + if (!doNotRepaint) this.repaint(); + }, + getOverlay : function(id) { + var idx = _getOverlayIndex(this, id); + return idx >= 0 ? this._jsPlumb.overlays[idx] : null; + }, + getOverlays : function() { + return this._jsPlumb.overlays; + }, + hideOverlay : function(id) { + var o = this.getOverlay(id); + if (o) o.hide(); + }, + hideOverlays : function() { + for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) + this._jsPlumb.overlays[i].hide(); + }, + showOverlay : function(id) { + var o = this.getOverlay(id); + if (o) o.show(); + }, + showOverlays : function() { + for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) + this._jsPlumb.overlays[i].show(); + }, + removeAllOverlays : function(doNotRepaint) { + for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) { + if (this._jsPlumb.overlays[i].cleanup) this._jsPlumb.overlays[i].cleanup(); + } + + this._jsPlumb.overlays.splice(0, this._jsPlumb.overlays.length); + if (!doNotRepaint) + this.repaint(); + }, + removeOverlay : function(overlayId) { + var idx = _getOverlayIndex(this, overlayId); + if (idx != -1) { + var o = this._jsPlumb.overlays[idx]; + if (o.cleanup) o.cleanup(); + this._jsPlumb.overlays.splice(idx, 1); + } + }, + removeOverlays : function() { + for (var i = 0, j = arguments.length; i < j; i++) + this.removeOverlay(arguments[i]); + }, + getLabel : function() { + var lo = this.getOverlay(_internalLabelOverlayId); + return lo != null ? lo.getLabel() : null; + }, + getLabelOverlay : function() { + return this.getOverlay(_internalLabelOverlayId); + }, + setLabel : function(l) { + var lo = this.getOverlay(_internalLabelOverlayId); + if (!lo) { + var params = l.constructor == String || l.constructor == Function ? { label:l } : l; + lo = _makeLabelOverlay(this, params); + this._jsPlumb.overlays.push(lo); + } + else { + if (l.constructor == String || l.constructor == Function) lo.setLabel(l); + else { + if (l.label) lo.setLabel(l.label); + if (l.location) lo.setLocation(l.location); + } + } + + if (!this._jsPlumb.instance.isSuspendDrawing()) + this.repaint(); + }, + cleanup:function() { + for (var i = 0; i < this._jsPlumb.overlays.length; i++) { + this._jsPlumb.overlays[i].cleanup(); + this._jsPlumb.overlays[i].destroy(); + } + this._jsPlumb.overlays.splice(0); + }, + setVisible:function(v) { + this[v ? "showOverlays" : "hideOverlays"](); + } + }); + +// ------------------------------ END OverlayCapablejsPlumbUIComponent -------------------------------------------- + + var _jsPlumbInstanceIndex = 0, + getInstanceIndex = function() { + var i = _jsPlumbInstanceIndex + 1; + _jsPlumbInstanceIndex++; + return i; + }; + + var jsPlumbInstance = window.jsPlumbInstance = function(_defaults) { + + this.Defaults = { + Anchor : "BottomCenter", + Anchors : [ null, null ], + ConnectionsDetachable : true, + ConnectionOverlays : [ ], + Connector : "Bezier", + Container : null, + DoNotThrowErrors:false, + DragOptions : { }, + DropOptions : { }, + Endpoint : "Dot", + EndpointOverlays : [ ], + Endpoints : [ null, null ], + EndpointStyle : { fillStyle : "#456" }, + EndpointStyles : [ null, null ], + EndpointHoverStyle : null, + EndpointHoverStyles : [ null, null ], + HoverPaintStyle : null, + LabelStyle : { color : "black" }, + LogEnabled : false, + Overlays : [ ], + MaxConnections : 1, + PaintStyle : { lineWidth : 8, strokeStyle : "#456" }, + ReattachConnections:false, + RenderMode : "svg", + Scope : "jsPlumb_DefaultScope" + }; + if (_defaults) jsPlumb.extend(this.Defaults, _defaults); + + this.logEnabled = this.Defaults.LogEnabled; + this._connectionTypes = {}; + this._endpointTypes = {}; + + jsPlumbUtil.EventGenerator.apply(this); + + var _currentInstance = this, + _instanceIndex = getInstanceIndex(), + _bb = _currentInstance.bind, + _initialDefaults = {}, + _zoom = 1, + _info = function(el) { + var _el = _dom(el); + return { el:_el, id:(jsPlumbUtil.isString(el) && _el == null) ? el : _getId(_el) }; + }; + + this.getInstanceIndex = function() { return _instanceIndex; }; + + this.setZoom = function(z, repaintEverything) { + _zoom = z; + if (repaintEverything) _currentInstance.repaintEverything(); + }; + this.getZoom = function() { return _zoom; }; + + for (var i in this.Defaults) + _initialDefaults[i] = this.Defaults[i]; + + this.bind = function(event, fn) { + if ("ready" === event && initialized) fn(); + else _bb.apply(_currentInstance,[event, fn]); + }; + + _currentInstance.importDefaults = function(d) { + for (var i in d) { + _currentInstance.Defaults[i] = d[i]; + } + return _currentInstance; + }; + + _currentInstance.restoreDefaults = function() { + _currentInstance.Defaults = jsPlumb.extend({}, _initialDefaults); + return _currentInstance; + }; + + var log = null, + resizeTimer = null, + initialized = false, + // TODO remove from window scope + connections = [], + // map of element id -> endpoint lists. an element can have an arbitrary + // number of endpoints on it, and not all of them have to be connected + // to anything. + endpointsByElement = {}, + endpointsByUUID = {}, + offsets = {}, + offsetTimestamps = {}, + floatingConnections = {}, + draggableStates = {}, + connectionBeingDragged = false, + sizes = [], + _suspendDrawing = false, + _suspendedAt = null, + DEFAULT_SCOPE = this.Defaults.Scope, + renderMode = null, // will be set in init() + _curIdStamp = 1, + _idstamp = function() { return "" + _curIdStamp++; }, + + // + // appends an element to some other element, which is calculated as follows: + // + // 1. if _currentInstance.Defaults.Container exists, use that element. + // 2. if the 'parent' parameter exists, use that. + // 3. otherwise just use the root element (for DOM usage, the document body). + // + // + _appendElement = function(el, parent) { + if (_currentInstance.Defaults.Container) + jsPlumb.CurrentLibrary.appendElement(el, _currentInstance.Defaults.Container); + else if (!parent) + jsPlumbAdapter.appendToRoot(el); + else + jsPlumb.CurrentLibrary.appendElement(el, parent); + }, + + // + // YUI, for some reason, put the result of a Y.all call into an object that contains + // a '_nodes' array, instead of handing back an array-like object like the other + // libraries do. + // + _convertYUICollection = function(c) { + return c._nodes ? c._nodes : c; + }, + + // + // Draws an endpoint and its connections. this is the main entry point into drawing connections as well + // as endpoints, since jsPlumb is endpoint-centric under the hood. + // + // @param element element to draw (of type library specific element object) + // @param ui UI object from current library's event system. optional. + // @param timestamp timestamp for this paint cycle. used to speed things up a little by cutting down the amount of offset calculations we do. + // @param clearEdits defaults to false; indicates that mouse edits for connectors should be cleared + /// + _draw = function(element, ui, timestamp, clearEdits) { + + // TODO is it correct to filter by headless at this top level? how would a headless adapter ever repaint? + if (!jsPlumbAdapter.headless && !_suspendDrawing) { + var id = _getId(element), + repaintEls = _currentInstance.dragManager.getElementsForDraggable(id); + + if (timestamp == null) timestamp = _timestamp(); + + // update the offset of everything _before_ we try to draw anything. + var o = _updateOffset( { elId : id, offset : ui, recalc : false, timestamp : timestamp }); + + if (repaintEls) { + for (var i in repaintEls) { + // TODO this seems to cause a lag, but we provide the offset, so in theory it + // should not. is the timestamp failing? + _updateOffset( { + elId : repaintEls[i].id, + offset : { + left:o.o.left + repaintEls[i].offset.left, + top:o.o.top + repaintEls[i].offset.top + }, + recalc : false, + timestamp : timestamp + }); + } + } + + + _currentInstance.anchorManager.redraw(id, ui, timestamp, null, clearEdits); + + if (repaintEls) { + for (var j in repaintEls) { + _currentInstance.anchorManager.redraw(repaintEls[j].id, ui, timestamp, repaintEls[j].offset, clearEdits, true); + } + } + } + }, + + // + // executes the given function against the given element if the first + // argument is an object, or the list of elements, if the first argument + // is a list. the function passed in takes (element, elementId) as + // arguments. + // + _elementProxy = function(element, fn) { + var retVal = null, el, id; + if (_ju.isArray(element)) { + retVal = []; + for ( var i = 0, j = element.length; i < j; i++) { + el = _gel(element[i]); + id = _currentInstance.getAttribute(el, "id"); + retVal.push(fn(el, id)); // append return values to what we will return + } + } else { + el = _gel(element); + id = _currentInstance.getAttribute(el, "id"); + retVal = fn(el, id); + } + return retVal; + }, + + // + // gets an Endpoint by uuid. + // + _getEndpoint = function(uuid) { return endpointsByUUID[uuid]; }, + + /** + * inits a draggable if it's not already initialised. + * TODO: somehow abstract this to the adapter, because the concept of "draggable" has no + * place on the server. + */ + _initDraggableIfNecessary = function(element, isDraggable, dragOptions) { + // TODO move to DragManager? + if (!jsPlumbAdapter.headless) { + var _draggable = isDraggable == null ? false : isDraggable, jpcl = jsPlumb.CurrentLibrary; + if (_draggable) { + if (jpcl.isDragSupported(element) && !jpcl.isAlreadyDraggable(element)) { + var options = dragOptions || _currentInstance.Defaults.DragOptions || jsPlumb.Defaults.DragOptions; + options = jsPlumb.extend( {}, options); // make a copy. + var dragEvent = jpcl.dragEvents.drag, + stopEvent = jpcl.dragEvents.stop, + startEvent = jpcl.dragEvents.start; + + options[startEvent] = _ju.wrap(options[startEvent], function() { + _currentInstance.setHoverSuspended(true); + _currentInstance.select({source:element}).addClass(_currentInstance.elementDraggingClass + " " + _currentInstance.sourceElementDraggingClass, true); + _currentInstance.select({target:element}).addClass(_currentInstance.elementDraggingClass + " " + _currentInstance.targetElementDraggingClass, true); + _currentInstance.setConnectionBeingDragged(true); + }); + + options[dragEvent] = _ju.wrap(options[dragEvent], function() { + var ui = jpcl.getUIPosition(arguments, _currentInstance.getZoom()); + _draw(element, ui, null, true); + _addClass(element, "jsPlumb_dragged"); + }); + options[stopEvent] = _ju.wrap(options[stopEvent], function() { + var ui = jpcl.getUIPosition(arguments, _currentInstance.getZoom()); + _draw(element, ui); + _removeClass(element, "jsPlumb_dragged"); + _currentInstance.setHoverSuspended(false); + _currentInstance.select({source:element}).removeClass(_currentInstance.elementDraggingClass + " " + _currentInstance.sourceElementDraggingClass, true); + _currentInstance.select({target:element}).removeClass(_currentInstance.elementDraggingClass + " " + _currentInstance.targetElementDraggingClass, true); + _currentInstance.setConnectionBeingDragged(false); + _currentInstance.dragManager.dragEnded(element); + }); + var elId = _getId(element); // need ID + draggableStates[elId] = true; + var draggable = draggableStates[elId]; + options.disabled = draggable == null ? false : !draggable; + jpcl.initDraggable(element, options, false, _currentInstance); + _currentInstance.dragManager.register(element); + } + } + } + }, + + /* + * prepares a final params object that can be passed to _newConnection, taking into account defaults, events, etc. + */ + _prepareConnectionParams = function(params, referenceParams) { + var _p = jsPlumb.extend( { }, params); + if (referenceParams) jsPlumb.extend(_p, referenceParams); + + // hotwire endpoints passed as source or target to sourceEndpoint/targetEndpoint, respectively. + if (_p.source) { + if (_p.source.endpoint) + _p.sourceEndpoint = _p.source; + else + _p.source = _dom(_p.source); + } + if (_p.target) { + if (_p.target.endpoint) + _p.targetEndpoint = _p.target; + else + _p.target = _dom(_p.target); + } + + // test for endpoint uuids to connect + if (params.uuids) { + _p.sourceEndpoint = _getEndpoint(params.uuids[0]); + _p.targetEndpoint = _getEndpoint(params.uuids[1]); + } + + // now ensure that if we do have Endpoints already, they're not full. + // source: + if (_p.sourceEndpoint && _p.sourceEndpoint.isFull()) { + _ju.log(_currentInstance, "could not add connection; source endpoint is full"); + return; + } + + // target: + if (_p.targetEndpoint && _p.targetEndpoint.isFull()) { + _ju.log(_currentInstance, "could not add connection; target endpoint is full"); + return; + } + + // if source endpoint mandates connection type and nothing specified in our params, use it. + if (!_p.type && _p.sourceEndpoint) + _p.type = _p.sourceEndpoint.connectionType; + + // copy in any connectorOverlays that were specified on the source endpoint. + // it doesnt copy target endpoint overlays. i'm not sure if we want it to or not. + if (_p.sourceEndpoint && _p.sourceEndpoint.connectorOverlays) { + _p.overlays = _p.overlays || []; + for (var i = 0, j = _p.sourceEndpoint.connectorOverlays.length; i < j; i++) { + _p.overlays.push(_p.sourceEndpoint.connectorOverlays[i]); + } + } + + // pointer events + if (!_p["pointer-events"] && _p.sourceEndpoint && _p.sourceEndpoint.connectorPointerEvents) + _p["pointer-events"] = _p.sourceEndpoint.connectorPointerEvents; + + // if there's a target specified (which of course there should be), and there is no + // target endpoint specified, and 'newConnection' was not set to true, then we check to + // see if a prior call to makeTarget has provided us with the specs for the target endpoint, and + // we use those if so. additionally, if the makeTarget call was specified with 'uniqueEndpoint' set + // to true, then if that target endpoint has already been created, we re-use it. + + var tid, tep, existingUniqueEndpoint, newEndpoint; + + // TODO: this code can be refactored to be a little dry. + if (_p.target && !_p.target.endpoint && !_p.targetEndpoint && !_p.newConnection) { + tid = _getId(_p.target); + tep =_targetEndpointDefinitions[tid]; + existingUniqueEndpoint = _targetEndpoints[tid]; + + if (tep) { + // if target not enabled, return. + if (!_targetsEnabled[tid]) return; + + // TODO this is dubious. i think it is there so that the endpoint can subsequently + // be dragged (ie it kicks off the draggable registration). but it is dubious. + tep.isTarget = true; + + // check for max connections?? + newEndpoint = existingUniqueEndpoint != null ? existingUniqueEndpoint : _currentInstance.addEndpoint(_p.target, tep); + if (_targetEndpointsUnique[tid]) _targetEndpoints[tid] = newEndpoint; + _p.targetEndpoint = newEndpoint; + // TODO test options to makeTarget to see if we should do this? + newEndpoint._doNotDeleteOnDetach = false; // reset. + newEndpoint._deleteOnDetach = true; + } + } + + // same thing, but for source. + if (_p.source && !_p.source.endpoint && !_p.sourceEndpoint && !_p.newConnection) { + tid = _getId(_p.source); + tep = _sourceEndpointDefinitions[tid]; + existingUniqueEndpoint = _sourceEndpoints[tid]; + + if (tep) { + // if source not enabled, return. + if (!_sourcesEnabled[tid]) return; + + // TODO this is dubious. i think it is there so that the endpoint can subsequently + // be dragged (ie it kicks off the draggable registration). but it is dubious. + //tep.isSource = true; + + newEndpoint = existingUniqueEndpoint != null ? existingUniqueEndpoint : _currentInstance.addEndpoint(_p.source, tep); + if (_sourceEndpointsUnique[tid]) _sourceEndpoints[tid] = newEndpoint; + _p.sourceEndpoint = newEndpoint; + // TODO test options to makeSource to see if we should do this? + newEndpoint._doNotDeleteOnDetach = false; // reset. + newEndpoint._deleteOnDetach = true; + } + } + + return _p; + }, + + _newConnection = function(params) { + var connectionFunc = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), + endpointFunc = _currentInstance.Defaults.EndpointType || jsPlumb.Endpoint, + parent = jsPlumb.CurrentLibrary.getParent; + + if (params.container) + params.parent = params.container; + else { + if (params.sourceEndpoint) + params.parent = params.sourceEndpoint.parent; + else if (params.source.constructor == endpointFunc) + params.parent = params.source.parent; + else params.parent = parent(params.source); + } + + params._jsPlumb = _currentInstance; + params.newConnection = _newConnection; + params.newEndpoint = _newEndpoint; + params.endpointsByUUID = endpointsByUUID; + params.endpointsByElement = endpointsByElement; + params.finaliseConnection = _finaliseConnection; + var con = new connectionFunc(params); + con.id = "con_" + _idstamp(); + _eventFireProxy("click", "click", con); + _eventFireProxy("dblclick", "dblclick", con); + _eventFireProxy("contextmenu", "contextmenu", con); + + // if the connection is draggable, then maybe we need to tell the target endpoint to init the + // dragging code. it won't run again if it already configured to be draggable. + if (con.isDetachable()) { + con.endpoints[0].initDraggable(); + con.endpoints[1].initDraggable(); + } + + return con; + }, + + // + // adds the connection to the backing model, fires an event if necessary and then redraws + // + _finaliseConnection = function(jpc, params, originalEvent, doInformAnchorManager) { + params = params || {}; + // add to list of connections (by scope). + if (!jpc.suspendedEndpoint) + connections.push(jpc); + + // always inform the anchor manager + // except that if jpc has a suspended endpoint it's not true to say the + // connection is new; it has just (possibly) moved. the question is whether + // to make that call here or in the anchor manager. i think perhaps here. + if (jpc.suspendedEndpoint == null || doInformAnchorManager) + _currentInstance.anchorManager.newConnection(jpc); + + // force a paint + _draw(jpc.source); + + // fire an event + if (!params.doNotFireConnectionEvent && params.fireEvent !== false) { + + var eventArgs = { + connection:jpc, + source : jpc.source, target : jpc.target, + sourceId : jpc.sourceId, targetId : jpc.targetId, + sourceEndpoint : jpc.endpoints[0], targetEndpoint : jpc.endpoints[1] + }; + + _currentInstance.fire("connection", eventArgs, originalEvent); + } + }, + + _eventFireProxy = function(event, proxyEvent, obj) { + obj.bind(event, function(originalObject, originalEvent) { + _currentInstance.fire(proxyEvent, obj, originalEvent); + }); + }, + + /* + * for the given endpoint params, returns an appropriate parent element for the UI elements that will be added. + * this function is used by _newEndpoint (directly below), and also in the makeSource function in jsPlumb. + * + * the logic is to first look for a "container" member of params, and pass that back if found. otherwise we + * handoff to the 'getParent' function in the current library. + */ + _getParentFromParams = function(params) { + if (params.container) + return params.container; + else { + var tag = jsPlumb.CurrentLibrary.getTagName(params.source), + p = jsPlumb.CurrentLibrary.getParent(params.source); + if (tag && tag.toLowerCase() === "td") + return jsPlumb.CurrentLibrary.getParent(p); + else return p; + } + }, + + /* + factory method to prepare a new endpoint. this should always be used instead of creating Endpoints + manually, since this method attaches event listeners and an id. + */ + _newEndpoint = function(params) { + var endpointFunc = _currentInstance.Defaults.EndpointType || jsPlumb.Endpoint; + var _p = jsPlumb.extend({}, params); + _p.parent = _getParentFromParams(_p); + _p._jsPlumb = _currentInstance; + _p.newConnection = _newConnection; + _p.newEndpoint = _newEndpoint; + _p.endpointsByUUID = endpointsByUUID; + _p.endpointsByElement = endpointsByElement; + _p.finaliseConnection = _finaliseConnection; + _p.fireDetachEvent = fireDetachEvent; + _p.fireMoveEvent = fireMoveEvent; + _p.floatingConnections = floatingConnections; + _p.getParentFromParams = _getParentFromParams; + _p.elementId = _getId(_p.source); + var ep = new endpointFunc(_p); + ep.id = "ep_" + _idstamp(); + _eventFireProxy("click", "endpointClick", ep); + _eventFireProxy("dblclick", "endpointDblClick", ep); + _eventFireProxy("contextmenu", "contextmenu", ep); + if (!jsPlumbAdapter.headless) + _currentInstance.dragManager.endpointAdded(_p.source); + return ep; + }, + + /* + * performs the given function operation on all the connections found + * for the given element id; this means we find all the endpoints for + * the given element, and then for each endpoint find the connectors + * connected to it. then we pass each connection in to the given + * function. + */ + _operation = function(elId, func, endpointFunc) { + var endpoints = endpointsByElement[elId]; + if (endpoints && endpoints.length) { + for ( var i = 0, ii = endpoints.length; i < ii; i++) { + for ( var j = 0, jj = endpoints[i].connections.length; j < jj; j++) { + var retVal = func(endpoints[i].connections[j]); + // if the function passed in returns true, we exit. + // most functions return false. + if (retVal) return; + } + if (endpointFunc) endpointFunc(endpoints[i]); + } + } + }, + + _setDraggable = function(element, draggable) { + return _elementProxy(element, function(el, id) { + draggableStates[id] = draggable; + if (jsPlumb.CurrentLibrary.isDragSupported(el)) { + jsPlumb.CurrentLibrary.setDraggable(el, draggable); + } + }); + }, + /* + * private method to do the business of hiding/showing. + * + * @param el + * either Id of the element in question or a library specific + * object for the element. + * @param state + * String specifying a value for the css 'display' property + * ('block' or 'none'). + */ + _setVisible = function(el, state, alsoChangeEndpoints) { + state = state === "block"; + var endpointFunc = null; + if (alsoChangeEndpoints) { + if (state) endpointFunc = function(ep) { + ep.setVisible(true, true, true); + }; + else endpointFunc = function(ep) { + ep.setVisible(false, true, true); + }; + } + var info = _info(el); + _operation(info.id, function(jpc) { + if (state && alsoChangeEndpoints) { + // this test is necessary because this functionality is new, and i wanted to maintain backwards compatibility. + // this block will only set a connection to be visible if the other endpoint in the connection is also visible. + var oidx = jpc.sourceId === info.id ? 1 : 0; + if (jpc.endpoints[oidx].isVisible()) jpc.setVisible(true); + } + else // the default behaviour for show, and what always happens for hide, is to just set the visibility without getting clever. + jpc.setVisible(state); + }, endpointFunc); + }, + /* + * toggles the draggable state of the given element(s). + * el is either an id, or an element object, or a list of ids/element objects. + */ + _toggleDraggable = function(el) { + return _elementProxy(el, function(el, elId) { + var state = draggableStates[elId] == null ? false : draggableStates[elId]; + state = !state; + draggableStates[elId] = state; + jsPlumb.CurrentLibrary.setDraggable(el, state); + return state; + }); + }, + /** + * private method to do the business of toggling hiding/showing. + */ + _toggleVisible = function(elId, changeEndpoints) { + var endpointFunc = null; + if (changeEndpoints) { + endpointFunc = function(ep) { + var state = ep.isVisible(); + ep.setVisible(!state); + }; + } + _operation(elId, function(jpc) { + var state = jpc.isVisible(); + jpc.setVisible(!state); + }, endpointFunc); + // todo this should call _elementProxy, and pass in the + // _operation(elId, f) call as a function. cos _toggleDraggable does + // that. + }, + /** + * updates the offset and size for a given element, and stores the + * values. if 'offset' is not null we use that (it would have been + * passed in from a drag call) because it's faster; but if it is null, + * or if 'recalc' is true in order to force a recalculation, we get the current values. + */ + _updateOffset = function(params) { + var timestamp = params.timestamp, recalc = params.recalc, offset = params.offset, elId = params.elId, s; + if (_suspendDrawing && !timestamp) timestamp = _suspendedAt; + if (!recalc) { + if (timestamp && timestamp === offsetTimestamps[elId]) { + return {o:params.offset || offsets[elId], s:sizes[elId]}; + } + } + if (recalc || !offset) { // if forced repaint or no offset available, we recalculate. + // get the current size and offset, and store them + s = _gel(elId); + if (s != null) { + sizes[elId] = _getSize(s); + offsets[elId] = _getOffset(s, _currentInstance); + offsetTimestamps[elId] = timestamp; + } + } else { + offsets[elId] = offset; + if (sizes[elId] == null) { + s = _gel(elId); + if (s != null) sizes[elId] = _getSize(s); + } + offsetTimestamps[elId] = timestamp; + } + + if(offsets[elId] && !offsets[elId].right) { + offsets[elId].right = offsets[elId].left + sizes[elId][0]; + offsets[elId].bottom = offsets[elId].top + sizes[elId][1]; + offsets[elId].width = sizes[elId][0]; + offsets[elId].height = sizes[elId][1]; + offsets[elId].centerx = offsets[elId].left + (offsets[elId].width / 2); + offsets[elId].centery = offsets[elId].top + (offsets[elId].height / 2); + } + return {o:offsets[elId], s:sizes[elId]}; + }, + + // TODO comparison performance + _getCachedData = function(elId) { + var o = offsets[elId]; + if (!o) + return _updateOffset({elId:elId}); + else + return {o:o, s:sizes[elId]}; + }, + + /** + * gets an id for the given element, creating and setting one if + * necessary. the id is of the form + * + * jsPlumb_<instance index>_<index in instance> + * + * where "index in instance" is a monotonically increasing integer that starts at 0, + * for each instance. this method is used not only to assign ids to elements that do not + * have them but also to connections and endpoints. + */ + _getId = function(element, uuid, doNotCreateIfNotFound) { + if (jsPlumbUtil.isString(element)) return element; + if (element == null) return null; + var id = jsPlumbAdapter.getAttribute(element, "id"); + if (!id || id === "undefined") { + // check if fixed uuid parameter is given + if (arguments.length == 2 && arguments[1] !== undefined) + id = uuid; + else if (arguments.length == 1 || (arguments.length == 3 && !arguments[2])) + id = "jsPlumb_" + _instanceIndex + "_" + _idstamp(); + + if (!doNotCreateIfNotFound) jsPlumbAdapter.setAttribute(element, "id", id); + } + return id; + }; + + this.setConnectionBeingDragged = function(v) { + connectionBeingDragged = v; + }; + this.isConnectionBeingDragged = function() { + return connectionBeingDragged; + }; + + this.connectorClass = "_jsPlumb_connector"; + this.hoverClass = "_jsPlumb_hover"; + this.endpointClass = "_jsPlumb_endpoint"; + this.endpointConnectedClass = "_jsPlumb_endpoint_connected"; + this.endpointFullClass = "_jsPlumb_endpoint_full"; + this.endpointDropAllowedClass = "_jsPlumb_endpoint_drop_allowed"; + this.endpointDropForbiddenClass = "_jsPlumb_endpoint_drop_forbidden"; + this.overlayClass = "_jsPlumb_overlay"; + this.draggingClass = "_jsPlumb_dragging"; + this.elementDraggingClass = "_jsPlumb_element_dragging"; + this.sourceElementDraggingClass = "_jsPlumb_source_element_dragging"; + this.targetElementDraggingClass = "_jsPlumb_target_element_dragging"; + this.endpointAnchorClassPrefix = "_jsPlumb_endpoint_anchor"; + this.hoverSourceClass = "_jsPlumb_source_hover"; + this.hoverTargetClass = "_jsPlumb_target_hover"; + this.dragSelectClass = "_jsPlumb_drag_select"; + + this.Anchors = {}; + this.Connectors = { "canvas":{}, "svg":{}, "vml":{} }; + this.Endpoints = { "canvas":{}, "svg":{}, "vml":{} }; + this.Overlays = { "canvas":{}, "svg":{}, "vml":{}}; + this.ConnectorRenderers = {}; + this.SVG = "svg"; + this.CANVAS = "canvas"; + this.VML = "vml"; + + +// --------------------------- jsPLumbInstance public API --------------------------------------------------------- + + + this.addEndpoint = function(el, params, referenceParams) { + referenceParams = referenceParams || {}; + var p = jsPlumb.extend({}, referenceParams); + jsPlumb.extend(p, params); + p.endpoint = p.endpoint || _currentInstance.Defaults.Endpoint || jsPlumb.Defaults.Endpoint; + p.paintStyle = p.paintStyle || _currentInstance.Defaults.EndpointStyle || jsPlumb.Defaults.EndpointStyle; + // YUI wrapper + el = _convertYUICollection(el); + + var results = [], + inputs = (_ju.isArray(el) || (el.length != null && !_ju.isString(el))) ? el : [ el ]; + + for (var i = 0, j = inputs.length; i < j; i++) { + var _el = _dom(inputs[i]), id = _getId(_el); + p.source = _el; + + _updateOffset({ elId : id, timestamp:_suspendedAt }); + var e = _newEndpoint(p); + if (p.parentAnchor) e.parentAnchor = p.parentAnchor; + _ju.addToList(endpointsByElement, id, e); + var myOffset = offsets[id], + myWH = sizes[id], + anchorLoc = e.anchor.compute( { xy : [ myOffset.left, myOffset.top ], wh : myWH, element : e, timestamp:_suspendedAt }), + endpointPaintParams = { anchorLoc : anchorLoc, timestamp:_suspendedAt }; + + if (_suspendDrawing) endpointPaintParams.recalc = false; + if (!_suspendDrawing) e.paint(endpointPaintParams); + + results.push(e); + e._doNotDeleteOnDetach = true; // mark this as being added via addEndpoint. + } + + return results.length == 1 ? results[0] : results; + }; + + + this.addEndpoints = function(el, endpoints, referenceParams) { + var results = []; + for ( var i = 0, j = endpoints.length; i < j; i++) { + var e = _currentInstance.addEndpoint(el, endpoints[i], referenceParams); + if (_ju.isArray(e)) + Array.prototype.push.apply(results, e); + else results.push(e); + } + return results; + }; + + this.animate = function(el, properties, options) { + options = options || {}; + var ele = _gel(el), + id = _getId(el), + stepFunction = jsPlumb.CurrentLibrary.dragEvents.step, + completeFunction = jsPlumb.CurrentLibrary.dragEvents.complete; + + options[stepFunction] = _ju.wrap(options[stepFunction], function() { + _currentInstance.repaint(id); + }); + + // onComplete repaints, just to make sure everything looks good at the end of the animation. + options[completeFunction] = _ju.wrap(options[completeFunction], function() { + _currentInstance.repaint(id); + }); + + jsPlumb.CurrentLibrary.animate(ele, properties, options); + }; + + /** + * checks for a listener for the given condition, executing it if found, passing in the given value. + * condition listeners would have been attached using "bind" (which is, you could argue, now overloaded, since + * firing click events etc is a bit different to what this does). i thought about adding a "bindCondition" + * or something, but decided against it, for the sake of simplicity. jsPlumb will never fire one of these + * condition events anyway. + */ + this.checkCondition = function(conditionName, value) { + var l = _currentInstance.getListener(conditionName), + r = true; + + if (l && l.length > 0) { + try { + for (var i = 0, j = l.length; i < j; i++) { + r = r && l[i](value); + } + } + catch (e) { + _ju.log(_currentInstance, "cannot check condition [" + conditionName + "]" + e); + } + } + return r; + }; + + /** + * checks a condition asynchronously: fires the event handler and passes the handler + * a 'proceed' function and a 'stop' function. The handler MUST execute one or other + * of these once it has made up its mind. + * + * Note that although this reads the listener list for the given condition, it + * does not loop through and hit each listener, because that, with asynchronous + * callbacks, would be messy. so it uses only the first listener registered. + */ + this.checkASyncCondition = function(conditionName, value, proceed, stop) { + var l = _currentInstance.getListener(conditionName); + + if (l && l.length > 0) { + try { + l[0](value, proceed, stop); + } + catch (e) { + _ju.log(_currentInstance, "cannot asynchronously check condition [" + conditionName + "]" + e); + } + } + }; + + + this.connect = function(params, referenceParams) { + // prepare a final set of parameters to create connection with + var _p = _prepareConnectionParams(params, referenceParams), jpc; + // TODO probably a nicer return value if the connection was not made. _prepareConnectionParams + // will return null (and log something) if either endpoint was full. what would be nicer is to + // create a dedicated 'error' object. + if (_p) { + // create the connection. it is not yet registered + jpc = _newConnection(_p); + // now add it the model, fire an event, and redraw + _finaliseConnection(jpc, _p); + } + return jpc; + }; + + this.deleteEndpoint = function(object, doNotRepaintAfterwards) { + var _is = _currentInstance.setSuspendDrawing(true); + var endpoint = (typeof object == "string") ? endpointsByUUID[object] : object; + if (endpoint) { + _currentInstance.deleteObject({ + endpoint:endpoint + }); + } + if(!_is) _currentInstance.setSuspendDrawing(false, doNotRepaintAfterwards); + return _currentInstance; + }; + + this.deleteEveryEndpoint = function() { + var _is = _currentInstance.setSuspendDrawing(true); + for ( var id in endpointsByElement) { + var endpoints = endpointsByElement[id]; + if (endpoints && endpoints.length) { + for ( var i = 0, j = endpoints.length; i < j; i++) { + _currentInstance.deleteEndpoint(endpoints[i], true); + } + } + } + endpointsByElement = {}; + endpointsByUUID = {}; + _currentInstance.anchorManager.reset(); + _currentInstance.dragManager.reset(); + if(!_is) _currentInstance.setSuspendDrawing(false); + return _currentInstance; + }; + + var fireDetachEvent = function(jpc, doFireEvent, originalEvent) { + // may have been given a connection, or in special cases, an object + var connType = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), + argIsConnection = jpc.constructor == connType, + params = argIsConnection ? { + connection:jpc, + source : jpc.source, target : jpc.target, + sourceId : jpc.sourceId, targetId : jpc.targetId, + sourceEndpoint : jpc.endpoints[0], targetEndpoint : jpc.endpoints[1] + } : jpc; + + if (doFireEvent) + _currentInstance.fire("connectionDetached", params, originalEvent); + + _currentInstance.anchorManager.connectionDetached(params); + }; + + var fireMoveEvent = function(params, evt) { + _currentInstance.fire("connectionMoved", params, evt); + }; + + this.unregisterEndpoint = function(endpoint) { + if (endpoint._jsPlumb.uuid) endpointsByUUID[endpoint._jsPlumb.uuid] = null; + _currentInstance.anchorManager.deleteEndpoint(endpoint); + // TODO at least replace this with a removeWithFunction call. + for (var e in endpointsByElement) { + var endpoints = endpointsByElement[e]; + if (endpoints) { + var newEndpoints = []; + for (var i = 0, j = endpoints.length; i < j; i++) + if (endpoints[i] != endpoint) newEndpoints.push(endpoints[i]); + + endpointsByElement[e] = newEndpoints; + } + if(endpointsByElement[e].length <1){ + delete endpointsByElement[e]; + } + } + }; + + this.detach = function() { + + if (arguments.length === 0) return; + var connType = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), + firstArgIsConnection = arguments[0].constructor == connType, + params = arguments.length == 2 ? firstArgIsConnection ? (arguments[1] || {}) : arguments[0] : arguments[0], + fireEvent = (params.fireEvent !== false), + forceDetach = params.forceDetach, + conn = firstArgIsConnection ? arguments[0] : params.connection; + + if (conn) { + if (forceDetach || jsPlumbUtil.functionChain(true, false, [ + [ conn.endpoints[0], "isDetachAllowed", [ conn ] ], + [ conn.endpoints[1], "isDetachAllowed", [ conn ] ], + [ conn, "isDetachAllowed", [ conn ] ], + [ _currentInstance, "checkCondition", [ "beforeDetach", conn ] ] ])) { + + conn.endpoints[0].detach(conn, false, true, fireEvent); + } + } + else { + var _p = jsPlumb.extend( {}, params); // a backwards compatibility hack: source should be thought of as 'params' in this case. + // test for endpoint uuids to detach + if (_p.uuids) { + _getEndpoint(_p.uuids[0]).detachFrom(_getEndpoint(_p.uuids[1]), fireEvent); + } else if (_p.sourceEndpoint && _p.targetEndpoint) { + _p.sourceEndpoint.detachFrom(_p.targetEndpoint); + } else { + var sourceId = _getId(_dom(_p.source)), + targetId = _getId(_dom(_p.target)); + _operation(sourceId, function(jpc) { + if ((jpc.sourceId == sourceId && jpc.targetId == targetId) || (jpc.targetId == sourceId && jpc.sourceId == targetId)) { + if (_currentInstance.checkCondition("beforeDetach", jpc)) { + jpc.endpoints[0].detach(jpc, false, true, fireEvent); + } + } + }); + } + } + }; + + this.detachAllConnections = function(el, params) { + params = params || {}; + el = _dom(el); + var id = _getId(el), + endpoints = endpointsByElement[id]; + if (endpoints && endpoints.length) { + for ( var i = 0, j = endpoints.length; i < j; i++) { + endpoints[i].detachAll(params.fireEvent !== false); + } + } + return _currentInstance; + }; + + this.detachEveryConnection = function(params) { + params = params || {}; + _currentInstance.doWhileSuspended(function() { + for ( var id in endpointsByElement) { + var endpoints = endpointsByElement[id]; + if (endpoints && endpoints.length) { + for ( var i = 0, j = endpoints.length; i < j; i++) { + endpoints[i].detachAll(params.fireEvent !== false); + } + } + } + connections.splice(0); + }); + return _currentInstance; + }; + + /// not public. but of course its exposed. how to change this. + this.deleteObject = function(params) { + var result = { + endpoints : {}, + connections : {}, + endpointCount:0, + connectionCount:0 + }, + fireEvent = params.fireEvent !== false, + deleteAttachedObjects = params.deleteAttachedObjects !== false; + + var unravelConnection = function(connection) { + if(connection != null && result.connections[connection.id] == null) { + if (connection._jsPlumb != null) connection.setHover(false); + result.connections[connection.id] = connection; + result.connectionCount++; + if (deleteAttachedObjects) { + for (var j = 0; j < connection.endpoints.length; j++) { + if (connection.endpoints[j]._deleteOnDetach) + unravelEndpoint(connection.endpoints[j]); + } + } + } + }; + var unravelEndpoint = function(endpoint) { + if(endpoint != null && result.endpoints[endpoint.id] == null) { + if (endpoint._jsPlumb != null) endpoint.setHover(false); + result.endpoints[endpoint.id] = endpoint; + result.endpointCount++; + + if (deleteAttachedObjects) { + for (var i = 0; i < endpoint.connections.length; i++) { + var c = endpoint.connections[i]; + unravelConnection(c); + } + } + } + }; + + if (params.connection) + unravelConnection(params.connection); + else unravelEndpoint(params.endpoint); + + // loop through connections + for (var i in result.connections) { + var c = result.connections[i]; + c.endpoints[0].detachFromConnection(c); + c.endpoints[1].detachFromConnection(c); + //_currentInstance.unregisterConnection(c); + jsPlumbUtil.removeWithFunction(connections, function(_c) { + return c.id == _c.id; + }); + fireDetachEvent(c, fireEvent, params.originalEvent); + c.cleanup(); + c.destroy(); + } + + // loop through endpoints + for (var j in result.endpoints) { + var e = result.endpoints[j]; + _currentInstance.unregisterEndpoint(e); + // FIRE some endpoint deleted event? + e.cleanup(); + e.destroy(); + } + + return result; + }; + + this.draggable = function(el, options) { + var i,j,ele; + // allows for array or jquery/mootools selector + if (typeof el == 'object' && el.length) { + for (i = 0, j = el.length; i < j; i++) { + ele = _dom(el[i]); + if (ele) _initDraggableIfNecessary(ele, true, options); + } + } + // allows for YUI selector + else if (el._nodes) { // TODO this is YUI specific; really the logic should be forced + // into the library adapters (for jquery and mootools aswell) + for (i = 0, j = el._nodes.length; i < j; i++) { + ele = _dom(el._nodes[i]); + if (ele) _initDraggableIfNecessary(ele, true, options); + } + } + else { + ele = _dom(el); + if (ele) _initDraggableIfNecessary(ele, true, options); + } + return _currentInstance; + }; + + + // just a library-agnostic wrapper. + this.extend = function(o1, o2) { + return jsPlumb.CurrentLibrary.extend(o1, o2); + }; + + // helpers for select/selectEndpoints + var _setOperation = function(list, func, args, selector) { + for (var i = 0, j = list.length; i < j; i++) { + list[i][func].apply(list[i], args); + } + return selector(list); + }, + _getOperation = function(list, func, args) { + var out = []; + for (var i = 0, j = list.length; i < j; i++) { + out.push([ list[i][func].apply(list[i], args), list[i] ]); + } + return out; + }, + setter = function(list, func, selector) { + return function() { + return _setOperation(list, func, arguments, selector); + }; + }, + getter = function(list, func) { + return function() { + return _getOperation(list, func, arguments); + }; + }, + prepareList = function(input, doNotGetIds) { + var r = []; + if (input) { + if (typeof input == 'string') { + if (input === "*") return input; + r.push(input); + } + else { + input = _gel(input); + if (doNotGetIds) r = input; + else { + for (var i = 0, j = input.length; i < j; i++) + r.push(_info(input[i]).id); + } + } + } + return r; + }, + filterList = function(list, value, missingIsFalse) { + if (list === "*") return true; + return list.length > 0 ? jsPlumbUtil.indexOf(list, value) != -1 : !missingIsFalse; + }; + + // get some connections, specifying source/target/scope + this.getConnections = function(options, flat) { + if (!options) { + options = {}; + } else if (options.constructor == String) { + options = { "scope": options }; + } + var scope = options.scope || _currentInstance.getDefaultScope(), + scopes = prepareList(scope, true), + sources = prepareList(options.source), + targets = prepareList(options.target), + results = (!flat && scopes.length > 1) ? {} : [], + _addOne = function(scope, obj) { + if (!flat && scopes.length > 1) { + var ss = results[scope]; + if (ss == null) { + ss = results[scope] = []; + } + ss.push(obj); + } else results.push(obj); + }; + + for ( var j = 0, jj = connections.length; j < jj; j++) { + var c = connections[j]; + if (filterList(scopes, c.scope) && filterList(sources, c.sourceId) && filterList(targets, c.targetId)) + _addOne(c.scope, c); + } + + return results; + }; + + var _curryEach = function(list, executor) { + return function(f) { + for (var i = 0, ii = list.length; i < ii; i++) { + f(list[i]); + } + return executor(list); + }; + }, + _curryGet = function(list) { + return function(idx) { + return list[idx]; + }; + }; + + var _makeCommonSelectHandler = function(list, executor) { + var out = { + length:list.length, + each:_curryEach(list, executor), + get:_curryGet(list) + }, + setters = ["setHover", "removeAllOverlays", "setLabel", "addClass", "addOverlay", "removeOverlay", + "removeOverlays", "showOverlay", "hideOverlay", "showOverlays", "hideOverlays", "setPaintStyle", + "setHoverPaintStyle", "setSuspendEvents", "setParameter", "setParameters", "setVisible", + "repaint", "addType", "toggleType", "removeType", "removeClass", "setType", "bind", "unbind" ], + + getters = ["getLabel", "getOverlay", "isHover", "getParameter", "getParameters", "getPaintStyle", + "getHoverPaintStyle", "isVisible", "hasType", "getType", "isSuspendEvents" ], + i, ii; + + for (i = 0, ii = setters.length; i < ii; i++) + out[setters[i]] = setter(list, setters[i], executor); + + for (i = 0, ii = getters.length; i < ii; i++) + out[getters[i]] = getter(list, getters[i]); + + return out; + }; + + var _makeConnectionSelectHandler = function(list) { + var common = _makeCommonSelectHandler(list, _makeConnectionSelectHandler); + return jsPlumb.CurrentLibrary.extend(common, { + // setters + setDetachable:setter(list, "setDetachable", _makeConnectionSelectHandler), + setReattach:setter(list, "setReattach", _makeConnectionSelectHandler), + setConnector:setter(list, "setConnector", _makeConnectionSelectHandler), + detach:function() { + for (var i = 0, ii = list.length; i < ii; i++) + _currentInstance.detach(list[i]); + }, + // getters + isDetachable:getter(list, "isDetachable"), + isReattach:getter(list, "isReattach") + }); + }; + + var _makeEndpointSelectHandler = function(list) { + var common = _makeCommonSelectHandler(list, _makeEndpointSelectHandler); + return jsPlumb.CurrentLibrary.extend(common, { + setEnabled:setter(list, "setEnabled", _makeEndpointSelectHandler), + setAnchor:setter(list, "setAnchor", _makeEndpointSelectHandler), + isEnabled:getter(list, "isEnabled"), + detachAll:function() { + for (var i = 0, ii = list.length; i < ii; i++) + list[i].detachAll(); + }, + "remove":function() { + for (var i = 0, ii = list.length; i < ii; i++) + _currentInstance.deleteObject({endpoint:list[i]}); + } + }); + }; + + + this.select = function(params) { + params = params || {}; + params.scope = params.scope || "*"; + return _makeConnectionSelectHandler(params.connections || _currentInstance.getConnections(params, true)); + }; + + this.selectEndpoints = function(params) { + params = params || {}; + params.scope = params.scope || "*"; + var noElementFilters = !params.element && !params.source && !params.target, + elements = noElementFilters ? "*" : prepareList(params.element), + sources = noElementFilters ? "*" : prepareList(params.source), + targets = noElementFilters ? "*" : prepareList(params.target), + scopes = prepareList(params.scope, true); + + var ep = []; + + for (var el in endpointsByElement) { + var either = filterList(elements, el, true), + source = filterList(sources, el, true), + sourceMatchExact = sources != "*", + target = filterList(targets, el, true), + targetMatchExact = targets != "*"; + + // if they requested 'either' then just match scope. otherwise if they requested 'source' (not as a wildcard) then we have to match only endpoints that have isSource set to to true, and the same thing with isTarget. + if ( either || source || target ) { + inner: + for (var i = 0, ii = endpointsByElement[el].length; i < ii; i++) { + var _ep = endpointsByElement[el][i]; + if (filterList(scopes, _ep.scope, true)) { + + var noMatchSource = (sourceMatchExact && sources.length > 0 && !_ep.isSource), + noMatchTarget = (targetMatchExact && targets.length > 0 && !_ep.isTarget); + + if (noMatchSource || noMatchTarget) + continue inner; + + ep.push(_ep); + } + } + } + } + + return _makeEndpointSelectHandler(ep); + }; + + // get all connections managed by the instance of jsplumb. + this.getAllConnections = function() { return connections; }; + this.getDefaultScope = function() { return DEFAULT_SCOPE; }; + // get an endpoint by uuid. + this.getEndpoint = _getEndpoint; + // get endpoints for some element. + this.getEndpoints = function(el) { return endpointsByElement[_info(el).id]; }; + // gets the default endpoint type. used when subclassing. see wiki. + this.getDefaultEndpointType = function() { return jsPlumb.Endpoint; }; + // gets the default connection type. used when subclassing. see wiki. + this.getDefaultConnectionType = function() { return jsPlumb.Connection; }; + /* + * Gets an element's id, creating one if necessary. really only exposed + * for the lib-specific functionality to access; would be better to pass + * the current instance into the lib-specific code (even though this is + * a static call. i just don't want to expose it to the public API). + */ + this.getId = _getId; + this.getOffset = function(id) { + var o = offsets[id]; + return _updateOffset({elId:id}); + }; + + this.getSelector = function() { + return jsPlumb.CurrentLibrary.getSelector.apply(null, arguments); + }; + + // get the size of the element with the given id, perhaps from cache. + this.getSize = function(id) { + var s = sizes[id]; + if (!s) _updateOffset({elId:id}); + return sizes[id]; + }; + + this.appendElement = _appendElement; + + var _hoverSuspended = false; + this.isHoverSuspended = function() { return _hoverSuspended; }; + this.setHoverSuspended = function(s) { _hoverSuspended = s; }; + + var _isAvailable = function(m) { + return function() { + return jsPlumbAdapter.isRenderModeAvailable(m); + }; + }; + this.isCanvasAvailable = _isAvailable("canvas"); + this.isSVGAvailable = _isAvailable("svg"); + this.isVMLAvailable = _isAvailable("vml"); + + // set an element's connections to be hidden + this.hide = function(el, changeEndpoints) { + _setVisible(el, "none", changeEndpoints); + return _currentInstance; + }; + + // exposed for other objects to use to get a unique id. + this.idstamp = _idstamp; + + this.connectorsInitialized = false; + var connectorTypes = [], rendererTypes = ["canvas", "svg", "vml"]; + this.registerConnectorType = function(connector, name) { + connectorTypes.push([connector, name]); + }; + + /** + * callback from the current library to tell us to prepare ourselves (attach + * mouse listeners etc; can't do that until the library has provided a bind method) + */ + this.init = function() { + var _oneType = function(renderer, name, fn) { + jsPlumb.Connectors[renderer][name] = function() { + fn.apply(this, arguments); + jsPlumb.ConnectorRenderers[renderer].apply(this, arguments); + }; + jsPlumbUtil.extend(jsPlumb.Connectors[renderer][name], [ fn, jsPlumb.ConnectorRenderers[renderer]]); + }; + + if (!jsPlumb.connectorsInitialized) { + for (var i = 0; i < connectorTypes.length; i++) { + for (var j = 0; j < rendererTypes.length; j++) { + _oneType(rendererTypes[j], connectorTypes[i][1], connectorTypes[i][0]); + } + + } + jsPlumb.connectorsInitialized = true; + } + + if (!initialized) { + _currentInstance.anchorManager = new jsPlumb.AnchorManager({jsPlumbInstance:_currentInstance}); + _currentInstance.setRenderMode(_currentInstance.Defaults.RenderMode); // calling the method forces the capability logic to be run. + initialized = true; + _currentInstance.fire("ready", _currentInstance); + } + }.bind(this); + + this.log = log; + this.jsPlumbUIComponent = jsPlumbUIComponent; + + /* + * Creates an anchor with the given params. + * + * + * Returns: The newly created Anchor. + * Throws: an error if a named anchor was not found. + */ + this.makeAnchor = function() { + var pp, _a = function(t, p) { + if (jsPlumb.Anchors[t]) return new jsPlumb.Anchors[t](p); + if (!_currentInstance.Defaults.DoNotThrowErrors) + throw { msg:"jsPlumb: unknown anchor type '" + t + "'" }; + }; + if (arguments.length === 0) return null; + var specimen = arguments[0], elementId = arguments[1], jsPlumbInstance = arguments[2], newAnchor = null; + // if it appears to be an anchor already... + if (specimen.compute && specimen.getOrientation) return specimen; //TODO hazy here about whether it should be added or is already added somehow. + // is it the name of an anchor type? + else if (typeof specimen == "string") { + newAnchor = _a(arguments[0], {elementId:elementId, jsPlumbInstance:_currentInstance}); + } + // is it an array? it will be one of: + // an array of [spec, params] - this defines a single anchor, which may be dynamic, but has parameters. + // an array of arrays - this defines some dynamic anchors + // an array of numbers - this defines a single anchor. + else if (_ju.isArray(specimen)) { + if (_ju.isArray(specimen[0]) || _ju.isString(specimen[0])) { + // if [spec, params] format + if (specimen.length == 2 && _ju.isObject(specimen[1])) { + // if first arg is a string, its a named anchor with params + if (_ju.isString(specimen[0])) { + pp = jsPlumb.extend({elementId:elementId, jsPlumbInstance:_currentInstance}, specimen[1]); + newAnchor = _a(specimen[0], pp); + } + // otherwise first arg is array, second is params. we treat as a dynamic anchor, which is fine + // even if the first arg has only one entry. you could argue all anchors should be implicitly dynamic in fact. + else { + pp = jsPlumb.extend({elementId:elementId, jsPlumbInstance:_currentInstance, anchors:specimen[0]}, specimen[1]); + newAnchor = new jsPlumb.DynamicAnchor(pp); + } + } + else + newAnchor = new jsPlumb.DynamicAnchor({anchors:specimen, selector:null, elementId:elementId, jsPlumbInstance:jsPlumbInstance}); + + } + else { + var anchorParams = { + x:specimen[0], y:specimen[1], + orientation : (specimen.length >= 4) ? [ specimen[2], specimen[3] ] : [0,0], + offsets : (specimen.length >= 6) ? [ specimen[4], specimen[5] ] : [ 0, 0 ], + elementId:elementId, + jsPlumbInstance:jsPlumbInstance, + cssClass:specimen.length == 7 ? specimen[6] : null + }; + newAnchor = new jsPlumb.Anchor(anchorParams); + newAnchor.clone = function() { return new jsPlumb.Anchor(anchorParams); }; + } + } + + if (!newAnchor.id) newAnchor.id = "anchor_" + _idstamp(); + return newAnchor; + }; + + /** + * makes a list of anchors from the given list of types or coords, eg + * ["TopCenter", "RightMiddle", "BottomCenter", [0, 1, -1, -1] ] + */ + this.makeAnchors = function(types, elementId, jsPlumbInstance) { + var r = []; + for ( var i = 0, ii = types.length; i < ii; i++) { + if (typeof types[i] == "string") + r.push(jsPlumb.Anchors[types[i]]({elementId:elementId, jsPlumbInstance:jsPlumbInstance})); + else if (_ju.isArray(types[i])) + r.push(_currentInstance.makeAnchor(types[i], elementId, jsPlumbInstance)); + } + return r; + }; + + /** + * Makes a dynamic anchor from the given list of anchors (which may be in shorthand notation as strings or dimension arrays, or Anchor + * objects themselves) and the given, optional, anchorSelector function (jsPlumb uses a default if this is not provided; most people will + * not need to provide this - i think). + */ + this.makeDynamicAnchor = function(anchors, anchorSelector) { + return new jsPlumb.DynamicAnchor({anchors:anchors, selector:anchorSelector, elementId:null, jsPlumbInstance:_currentInstance}); + }; + +// --------------------- makeSource/makeTarget ---------------------------------------------- + + var _targetEndpointDefinitions = {}, + _targetEndpoints = {}, + _targetEndpointsUnique = {}, + _targetMaxConnections = {}, + _setEndpointPaintStylesAndAnchor = function(ep, epIndex) { + ep.paintStyle = ep.paintStyle || + _currentInstance.Defaults.EndpointStyles[epIndex] || + _currentInstance.Defaults.EndpointStyle || + jsPlumb.Defaults.EndpointStyles[epIndex] || + jsPlumb.Defaults.EndpointStyle; + ep.hoverPaintStyle = ep.hoverPaintStyle || + _currentInstance.Defaults.EndpointHoverStyles[epIndex] || + _currentInstance.Defaults.EndpointHoverStyle || + jsPlumb.Defaults.EndpointHoverStyles[epIndex] || + jsPlumb.Defaults.EndpointHoverStyle; + + ep.anchor = ep.anchor || + _currentInstance.Defaults.Anchors[epIndex] || + _currentInstance.Defaults.Anchor || + jsPlumb.Defaults.Anchors[epIndex] || + jsPlumb.Defaults.Anchor; + + ep.endpoint = ep.endpoint || + _currentInstance.Defaults.Endpoints[epIndex] || + _currentInstance.Defaults.Endpoint || + jsPlumb.Defaults.Endpoints[epIndex] || + jsPlumb.Defaults.Endpoint; + }, + // TODO put all the source stuff inside one parent, keyed by id. + _sourceEndpointDefinitions = {}, + _sourceEndpoints = {}, + _sourceEndpointsUnique = {}, + _sourcesEnabled = {}, + _sourceTriggers = {}, + _sourceMaxConnections = {}, + _targetsEnabled = {}, + selectorFilter = function(evt, _el, selector) { + var t = evt.target || evt.srcElement, ok = false, + sel = _currentInstance.getSelector(_el, selector); + for (var j = 0; j < sel.length; j++) { + if (sel[j] == t) { + ok = true; + break; + } + } + return ok; + }; + + // see API docs + this.makeTarget = function(el, params, referenceParams) { + + // put jsplumb ref into params without altering the params passed in + var p = jsPlumb.extend({_jsPlumb:_currentInstance}, referenceParams); + jsPlumb.extend(p, params); + + // calculate appropriate paint styles and anchor from the params given + _setEndpointPaintStylesAndAnchor(p, 1); + + var jpcl = jsPlumb.CurrentLibrary, + targetScope = p.scope || _currentInstance.Defaults.Scope, + deleteEndpointsOnDetach = !(p.deleteEndpointsOnDetach === false), + maxConnections = p.maxConnections || -1, + onMaxConnections = p.onMaxConnections, + + _doOne = function(el) { + + // get the element's id and store the endpoint definition for it. jsPlumb.connect calls will look for one of these, + // and use the endpoint definition if found. + // decode the info for this element (id and element) + var elInfo = _info(el), + elid = elInfo.id, + proxyComponent = new jsPlumbUIComponent(p), + dropOptions = jsPlumb.extend({}, p.dropOptions || {}); + + // store the definitions keyed against the element id. + _targetEndpointDefinitions[elid] = p; + _targetEndpointsUnique[elid] = p.uniqueEndpoint; + _targetMaxConnections[elid] = maxConnections; + _targetsEnabled[elid] = true; + + var _drop = function() { + _currentInstance.currentlyDragging = false; + var originalEvent = jsPlumb.CurrentLibrary.getDropEvent(arguments), + targetCount = _currentInstance.select({target:elid}).length, + draggable = _gel(jpcl.getDragObject(arguments)), + id = _currentInstance.getAttribute(draggable, "dragId"), + scope = _currentInstance.getAttribute(draggable, "originalScope"), + jpc = floatingConnections[id], + idx = jpc.endpoints[0].isFloating() ? 0 : 1, + // this is not necessarily correct. if the source is being dragged, + // then the source endpoint is actually the currently suspended endpoint. + source = jpc.endpoints[0], + _endpoint = p.endpoint ? jsPlumb.extend({}, p.endpoint) : {}; + + if (!_targetsEnabled[elid] || _targetMaxConnections[elid] > 0 && targetCount >= _targetMaxConnections[elid]){ + if (onMaxConnections) { + // TODO here we still have the id of the floating element, not the + // actual target. + onMaxConnections({ + element:elInfo.el, + connection:jpc + }, originalEvent); + } + return false; + } + + // unlock the source anchor to allow it to refresh its position if necessary + source.anchor.locked = false; + + // restore the original scope if necessary (issue 57) + if (scope) jpcl.setDragScope(draggable, scope); + + // if no suspendedEndpoint and not pending, it is likely there was a drop on two + // elements that are on top of each other. abort. + if (jpc.suspendedEndpoint == null && !jpc.pending) + return false; + + // check if drop is allowed here. + // if the source is being dragged then in fact + // the source and target ids to pass into the drop interceptor are + // source - elid + // target - jpc's targetId + // + // otherwise the ids are + // source - jpc.sourceId + // target - elid + // + var _continue = proxyComponent.isDropAllowed(idx === 0 ? elid : jpc.sourceId, idx === 0 ? jpc.targetId : elid, jpc.scope, jpc, null); + + // reinstate any suspended endpoint; this just puts the connection back into + // a state in which it will report sensible values if someone asks it about + // its target. we're going to throw this connection away shortly so it doesnt matter + // if we manipulate it a bit. + if (jpc.suspendedEndpoint) { + jpc[idx ? "targetId" : "sourceId"] = jpc.suspendedEndpoint.elementId; + jpc[idx ? "target" : "source"] = jpc.suspendedEndpoint.element; + jpc.endpoints[idx] = jpc.suspendedEndpoint; + } + + if (_continue) { + + // make a new Endpoint for the target + var _el = jpcl.getElementObject(elInfo.el), + newEndpoint = _targetEndpoints[elid] || _currentInstance.addEndpoint(_el, p); + + if (p.uniqueEndpoint) _targetEndpoints[elid] = newEndpoint; // may of course just store what it just pulled out. that's ok. + // TODO test options to makeTarget to see if we should do this? + newEndpoint._doNotDeleteOnDetach = false; // reset. + newEndpoint._deleteOnDetach = true; + + // if the anchor has a 'positionFinder' set, then delegate to that function to find + // out where to locate the anchor. + if (newEndpoint.anchor.positionFinder != null) { + var dropPosition = jpcl.getUIPosition(arguments, _currentInstance.getZoom()), + elPosition = _getOffset(_el, _currentInstance), + elSize = _getSize(_el), + ap = newEndpoint.anchor.positionFinder(dropPosition, elPosition, elSize, newEndpoint.anchor.constructorParams); + newEndpoint.anchor.x = ap[0]; + newEndpoint.anchor.y = ap[1]; + // now figure an orientation for it..kind of hard to know what to do actually. probably the best thing i can do is to + // support specifying an orientation in the anchor's spec. if one is not supplied then i will make the orientation + // be what will cause the most natural link to the source: it will be pointing at the source, but it needs to be + // specified in one axis only, and so how to make that choice? i think i will use whichever axis is the one in which + // the target is furthest away from the source. + } + + // change the target endpoint and target element information. really this should be + // done on a method on connection + jpc[idx ? "target" : "source"] = newEndpoint.element; + jpc[idx ? "targetId" : "sourceId"] = newEndpoint.elementId; + jpc.endpoints[idx].detachFromConnection(jpc); + if (jpc.endpoints[idx]._deleteOnDetach) + jpc.endpoints[idx].deleteAfterDragStop = true; // tell this endpoint to delet itself after drag stop. + // set new endpoint, and configure the settings for endpoints to delete on detach + newEndpoint.addConnection(jpc); + jpc.endpoints[idx] = newEndpoint; + jpc.deleteEndpointsOnDetach = deleteEndpointsOnDetach; + + // inform the anchor manager to update its target endpoint for this connection. + // TODO refactor to make this a single method. + if (idx == 1) + _currentInstance.anchorManager.updateOtherEndpoint(jpc.sourceId, jpc.suspendedElementId, jpc.targetId, jpc); + else + _currentInstance.anchorManager.sourceChanged(jpc.suspendedEndpoint.elementId, jpc.sourceId, jpc); + + _finaliseConnection(jpc, null, originalEvent); + jpc.pending = false; + + } + // if not allowed to drop... + else { + // TODO this code is identical (pretty much) to what happens when a connection + // dragged from a normal endpoint is in this situation. refactor. + // is this an existing connection, and will we reattach? + // TODO also this assumes the source needs to detach - is that always valid? + if (jpc.suspendedEndpoint) { + if (jpc.isReattach()) { + jpc.setHover(false); + jpc.floatingAnchorIndex = null; + jpc.suspendedEndpoint.addConnection(jpc); + _currentInstance.repaint(source.elementId); + } + else + source.detach(jpc, false, true, true, originalEvent); // otherwise, detach the connection and tell everyone about it. + } + + } + }; + + // wrap drop events as needed and initialise droppable + var dropEvent = jpcl.dragEvents.drop; + dropOptions.scope = dropOptions.scope || targetScope; + dropOptions[dropEvent] = _ju.wrap(dropOptions[dropEvent], _drop); + jpcl.initDroppable(_gel(elInfo.el), dropOptions, true); + }; + + // YUI collection fix + el = _convertYUICollection(el); + // make an array if only given one element + var inputs = el.length && el.constructor != String ? el : [ el ]; + + // register each one in the list. + for (var i = 0, ii = inputs.length; i < ii; i++) { + _doOne(inputs[i]); + } + + return _currentInstance; + }; + + // see api docs + this.unmakeTarget = function(el, doNotClearArrays) { + var info = _info(el); + + jsPlumb.CurrentLibrary.destroyDroppable(info.el); + // TODO this is not an exhaustive unmake of a target, since it does not remove the droppable stuff from + // the element. the effect will be to prevent it from behaving as a target, but it's not completely purged. + if (!doNotClearArrays) { + delete _targetEndpointDefinitions[info.id]; + delete _targetEndpointsUnique[info.id]; + delete _targetMaxConnections[info.id]; + delete _targetsEnabled[info.id]; + } + + return _currentInstance; + }; + + // see api docs + this.makeSource = function(el, params, referenceParams) { + var p = jsPlumb.extend({}, referenceParams); + jsPlumb.extend(p, params); + _setEndpointPaintStylesAndAnchor(p, 0); + var jpcl = jsPlumb.CurrentLibrary, + maxConnections = p.maxConnections || -1, + onMaxConnections = p.onMaxConnections, + _doOne = function(elInfo) { + // get the element's id and store the endpoint definition for it. jsPlumb.connect calls will look for one of these, + // and use the endpoint definition if found. + var elid = elInfo.id, + _el = _gel(elInfo.el), + parentElement = function() { + return p.parent == null ? null : p.parent === "parent" ? elInfo.el.parentNode : _dom(p.parent); + }, + idToRegisterAgainst = p.parent != null ? _currentInstance.getId(parentElement()) : elid; + + _sourceEndpointDefinitions[idToRegisterAgainst] = p; + _sourceEndpointsUnique[idToRegisterAgainst] = p.uniqueEndpoint; + _sourcesEnabled[idToRegisterAgainst] = true; + + var stopEvent = jpcl.dragEvents.stop, + dragEvent = jpcl.dragEvents.drag, + dragOptions = jsPlumb.extend({ }, p.dragOptions || {}), + existingDrag = dragOptions.drag, + existingStop = dragOptions.stop, + ep = null, + endpointAddedButNoDragYet = false; + + _sourceMaxConnections[idToRegisterAgainst] = maxConnections; + + // set scope if its not set in dragOptions but was passed in in params + dragOptions.scope = dragOptions.scope || p.scope; + + dragOptions[dragEvent] = _ju.wrap(dragOptions[dragEvent], function() { + if (existingDrag) existingDrag.apply(this, arguments); + endpointAddedButNoDragYet = false; + }); + + dragOptions[stopEvent] = _ju.wrap(dragOptions[stopEvent], function() { + + if (existingStop) existingStop.apply(this, arguments); + _currentInstance.currentlyDragging = false; + if (ep._jsPlumb != null) { // if not cleaned up... + + jpcl.unbind(ep.canvas, "mousedown"); + + // reset the anchor to the anchor that was initially provided. the one we were using to drag + // the connection was just a placeholder that was located at the place the user pressed the + // mouse button to initiate the drag. + var anchorDef = p.anchor || _currentInstance.Defaults.Anchor, + oldAnchor = ep.anchor, + oldConnection = ep.connections[0]; + + ep.setAnchor(_currentInstance.makeAnchor(anchorDef, elid, _currentInstance), true); + + if (p.parent) { + var parent = parentElement(); + if (parent) { + var currentId = ep.elementId, + potentialParent = p.container || _currentInstance.Defaults.Container || jsPlumb.Defaults.Container; + + ep.setElement(parent, potentialParent); + ep.endpointWillMoveAfterConnection = false; + //_currentInstance.anchorManager.rehomeEndpoint(ep, currentId, parent); + oldConnection.previousConnection = null; + // remove from connectionsByScope + jsPlumbUtil.removeWithFunction(connections, function(c) { + return c.id === oldConnection.id; + }); + _currentInstance.anchorManager.connectionDetached({ + sourceId:oldConnection.sourceId, + targetId:oldConnection.targetId, + connection:oldConnection + }); + _finaliseConnection(oldConnection); + } + } + + ep.repaint(); + _currentInstance.repaint(ep.elementId); + _currentInstance.repaint(oldConnection.targetId); + } + }); + // when the user presses the mouse, add an Endpoint, if we are enabled. + var mouseDownListener = function(e) { + + // if disabled, return. + if (!_sourcesEnabled[idToRegisterAgainst]) return; + + // if a filter was given, run it, and return if it says no. + if (p.filter) { + var evt = jpcl.getOriginalEvent(e), + r = jsPlumbUtil.isString(p.filter) ? selectorFilter(evt, _el, p.filter) : p.filter(evt, _el); + + if (r === false) return; + } + + // if maxConnections reached + var sourceCount = _currentInstance.select({source:idToRegisterAgainst}).length; + if (_sourceMaxConnections[idToRegisterAgainst] >= 0 && sourceCount >= _sourceMaxConnections[idToRegisterAgainst]) { + if (onMaxConnections) { + onMaxConnections({ + element:_el, + maxConnections:maxConnections + }, e); + } + return false; + } + + // make sure we have the latest offset for this div + var myOffsetInfo = _updateOffset({elId:elid}).o, + z = _currentInstance.getZoom(), + x = ( ((e.pageX || e.page.x) / z) - myOffsetInfo.left) / myOffsetInfo.width, + y = ( ((e.pageY || e.page.y) / z) - myOffsetInfo.top) / myOffsetInfo.height, + parentX = x, + parentY = y; + + // if there is a parent, the endpoint will actually be added to it now, rather than the div + // that was the source. in that case, we have to adjust the anchor position so it refers to + // the parent. + if (p.parent) { + var pEl = parentElement(), pId = _getId(pEl); + myOffsetInfo = _updateOffset({elId:pId}).o; + parentX = ((e.pageX || e.page.x) - myOffsetInfo.left) / myOffsetInfo.width; + parentY = ((e.pageY || e.page.y) - myOffsetInfo.top) / myOffsetInfo.height; + } + + // we need to override the anchor in here, and force 'isSource', but we don't want to mess with + // the params passed in, because after a connection is established we're going to reset the endpoint + // to have the anchor we were given. + var tempEndpointParams = {}; + jsPlumb.extend(tempEndpointParams, p); + tempEndpointParams.isSource = true; + tempEndpointParams.anchor = [x,y,0,0]; + tempEndpointParams.parentAnchor = [ parentX, parentY, 0, 0 ]; + tempEndpointParams.dragOptions = dragOptions; + // if a parent was given we need to turn that into a "container" argument. this is, by default, + // the parent of the element we will move to, so parent of p.parent in this case. however, if + // the user has specified a 'container' on the endpoint definition or on + // the defaults, we should use that. + if (p.parent) { + var potentialParent = tempEndpointParams.container || _currentInstance.Defaults.Container || jsPlumb.Defaults.Container; + if (potentialParent) + tempEndpointParams.container = potentialParent; + else + tempEndpointParams.container = jsPlumb.CurrentLibrary.getParent(parentElement()); + } + + ep = _currentInstance.addEndpoint(elid, tempEndpointParams); + + endpointAddedButNoDragYet = true; + // we set this to prevent connections from firing attach events before this function has had a chance + // to move the endpoint. + ep.endpointWillMoveAfterConnection = p.parent != null; + ep.endpointWillMoveTo = p.parent ? parentElement() : null; + + // TODO test options to makeSource to see if we should do this? + ep._doNotDeleteOnDetach = false; // reset. + ep._deleteOnDetach = true; + + var _delTempEndpoint = function() { + // this mouseup event is fired only if no dragging occurred, by jquery and yui, but for mootools + // it is fired even if dragging has occurred, in which case we would blow away a perfectly + // legitimate endpoint, were it not for this check. the flag is set after adding an + // endpoint and cleared in a drag listener we set in the dragOptions above. + if(endpointAddedButNoDragYet) { + endpointAddedButNoDragYet = false; + _currentInstance.deleteEndpoint(ep); + } + }; + + _currentInstance.registerListener(ep.canvas, "mouseup", _delTempEndpoint); + _currentInstance.registerListener(_el, "mouseup", _delTempEndpoint); + + // and then trigger its mousedown event, which will kick off a drag, which will start dragging + // a new connection from this endpoint. + jpcl.trigger(ep.canvas, "mousedown", e); + + }; + + // register this on jsPlumb so that it can be cleared by a reset. + _currentInstance.registerListener(_el, "mousedown", mouseDownListener); + _sourceTriggers[elid] = mouseDownListener; + + // lastly, if a filter was provided, set it as a dragFilter on the element, + // to prevent the element drag function from kicking in when we want to + // drag a new connection + if (p.filter && jsPlumbUtil.isString(p.filter)) { + jpcl.setDragFilter(_el, p.filter); + } + }; + + el = _convertYUICollection(el); + + var inputs = el.length && el.constructor != String ? el : [ el ]; + + for (var i = 0, ii = inputs.length; i < ii; i++) { + _doOne(_info(inputs[i])); + } + + return _currentInstance; + }; + + // see api docs + this.unmakeSource = function(el, doNotClearArrays) { + var info = _info(el), + mouseDownListener = _sourceTriggers[info.id]; + + if (mouseDownListener) + _currentInstance.unregisterListener(info.el, "mousedown", mouseDownListener); + + if (!doNotClearArrays) { + delete _sourceEndpointDefinitions[info.id]; + delete _sourceEndpointsUnique[info.id]; + delete _sourcesEnabled[info.id]; + delete _sourceTriggers[info.id]; + delete _sourceMaxConnections[info.id]; + } + + return _currentInstance; + }; + + // see api docs + this.unmakeEverySource = function() { + for (var i in _sourcesEnabled) + _currentInstance.unmakeSource(i, true); + + _sourceEndpointDefinitions = {}; + _sourceEndpointsUnique = {}; + _sourcesEnabled = {}; + _sourceTriggers = {}; + }; + + // see api docs + this.unmakeEveryTarget = function() { + for (var i in _targetsEnabled) + _currentInstance.unmakeTarget(i, true); + + _targetEndpointDefinitions = {}; + _targetEndpointsUnique = {}; + _targetMaxConnections = {}; + _targetsEnabled = {}; + + return _currentInstance; + }; + + // does the work of setting a source enabled or disabled. + var _setEnabled = function(type, el, state, toggle) { + var a = type == "source" ? _sourcesEnabled : _targetsEnabled; + el = _convertYUICollection(el); + + if (_ju.isString(el)) a[el] = toggle ? !a[el] : state; + else if (el.length) { + for (var i = 0, ii = el.length; i < ii; i++) { + var info = _info(el[i]); + a[info.id] = toggle ? !a[info.id] : state; + } + } + return _currentInstance; + }; + + this.toggleSourceEnabled = function(el) { + _setEnabled("source", el, null, true); + return _currentInstance.isSourceEnabled(el); + }; + + this.setSourceEnabled = function(el, state) { return _setEnabled("source", el, state); }; + this.isSource = function(el) { return _sourcesEnabled[_info(el).id] != null; }; + this.isSourceEnabled = function(el) { return _sourcesEnabled[_info(el).id] === true; }; + + this.toggleTargetEnabled = function(el) { + _setEnabled("target", el, null, true); + return _currentInstance.isTargetEnabled(el); + }; + + this.isTarget = function(el) { return _targetsEnabled[_info(el).id] != null; }; + this.isTargetEnabled = function(el) { return _targetsEnabled[_info(el).id] === true; }; + this.setTargetEnabled = function(el, state) { return _setEnabled("target", el, state); }; + +// --------------------- end makeSource/makeTarget ---------------------------------------------- + + this.ready = function(fn) { + _currentInstance.bind("ready", fn); + }; + + // repaint some element's endpoints and connections + this.repaint = function(el, ui, timestamp) { + // support both lists... + if (typeof el == 'object' && el.length) + for ( var i = 0, ii = el.length; i < ii; i++) { + _draw(el[i], ui, timestamp); + } + else // ...and single strings. + _draw(el, ui, timestamp); + + return _currentInstance; + }; + + // repaint every endpoint and connection. + this.repaintEverything = function() { + // TODO this timestamp causes continuous anchors to not repaint properly. + // fix this. do not just take out the timestamp. it runs a lot faster with + // the timestamp included. + //var timestamp = null; + var timestamp = _timestamp(); + for ( var elId in endpointsByElement) { + _draw(elId, null, timestamp); + } + return _currentInstance; + }; + + + this.removeAllEndpoints = function(el, recurse) { + var _one = function(_el) { + var info = _info(_el), + ebe = endpointsByElement[info.id], + i, ii; + + if (ebe) { + for ( i = 0, ii = ebe.length; i < ii; i++) + _currentInstance.deleteEndpoint(ebe[i]); + } + delete endpointsByElement[info.id]; + + if (recurse) { + if (info.el && info.el.nodeType != 3 && info.el.nodeType != 8 ) { + for ( i = 0, ii = info.el.childNodes.length; i < ii; i++) { + _one(info.el.childNodes[i]); + } + } + } + + }; + _one(el); + return _currentInstance; + }; + + /** + * Remove the given element, including cleaning up all endpoints registered for it. + * This is exposed in the public API but also used internally by jsPlumb when removing the + * element associated with a connection drag. + */ + this.remove = function(el, doNotRepaint) { + var info = _info(el); + _currentInstance.doWhileSuspended(function() { + _currentInstance.removeAllEndpoints(info.id, true); + _currentInstance.dragManager.elementRemoved(info.id); + delete floatingConnections[info.id]; + _currentInstance.anchorManager.clearFor(info.id); + _currentInstance.anchorManager.removeFloatingConnection(info.id); + }, doNotRepaint === false); + if(info.el) jsPlumb.CurrentLibrary.removeElement(info.el); + }; + + var _registeredListeners = {}, + _unbindRegisteredListeners = function() { + for (var i in _registeredListeners) { + for (var j = 0, jj = _registeredListeners[i].length; j < jj; j++) { + var info = _registeredListeners[i][j]; + jsPlumb.CurrentLibrary.unbind(info.el, info.event, info.listener); + } + } + _registeredListeners = {}; + }; + + // internal register listener method. gives us a hook to clean things up + // with if the user calls jsPlumb.reset. + this.registerListener = function(el, type, listener) { + jsPlumb.CurrentLibrary.bind(el, type, listener); + jsPlumbUtil.addToList(_registeredListeners, type, {el:el, event:type, listener:listener}); + }; + + this.unregisterListener = function(el, type, listener) { + jsPlumb.CurrentLibrary.unbind(el, type, listener); + jsPlumbUtil.removeWithFunction(_registeredListeners, function(rl) { + return rl.type == type && rl.listener == listener; + }); + }; + + this.reset = function() { + _currentInstance.deleteEveryEndpoint(); + _currentInstance.unbind(); + _targetEndpointDefinitions = {}; + _targetEndpoints = {}; + _targetEndpointsUnique = {}; + _targetMaxConnections = {}; + _sourceEndpointDefinitions = {}; + _sourceEndpoints = {}; + _sourceEndpointsUnique = {}; + _sourceMaxConnections = {}; + connections.splice(0); + _unbindRegisteredListeners(); + _currentInstance.anchorManager.reset(); + if (!jsPlumbAdapter.headless) + _currentInstance.dragManager.reset(); + }; + + + this.setDefaultScope = function(scope) { + DEFAULT_SCOPE = scope; + return _currentInstance; + }; + + // sets whether or not some element should be currently draggable. + this.setDraggable = _setDraggable; + + // sets the id of some element, changing whatever we need to to keep track. + this.setId = function(el, newId, doNotSetAttribute) { + // + var id; + + if (jsPlumbUtil.isString(el)) { + id = el; + } + else { + el = _dom(el); + id = _currentInstance.getId(el); + } + + var sConns = _currentInstance.getConnections({source:id, scope:'*'}, true), + tConns = _currentInstance.getConnections({target:id, scope:'*'}, true); + + newId = "" + newId; + + if (!doNotSetAttribute) { + el = _dom(id); + jsPlumbAdapter.setAttribute(el, "id", newId); + } + else + el = _dom(newId); + + endpointsByElement[newId] = endpointsByElement[id] || []; + for (var i = 0, ii = endpointsByElement[newId].length; i < ii; i++) { + endpointsByElement[newId][i].setElementId(newId); + endpointsByElement[newId][i].setReferenceElement(el); + } + delete endpointsByElement[id]; + + _currentInstance.anchorManager.changeId(id, newId); + if (!jsPlumbAdapter.headless) + _currentInstance.dragManager.changeId(id, newId); + + var _conns = function(list, epIdx, type) { + for (var i = 0, ii = list.length; i < ii; i++) { + list[i].endpoints[epIdx].setElementId(newId); + list[i].endpoints[epIdx].setReferenceElement(el); + list[i][type + "Id"] = newId; + list[i][type] = el; + } + }; + _conns(sConns, 0, "source"); + _conns(tConns, 1, "target"); + + _currentInstance.repaint(newId); + }; + + this.setDebugLog = function(debugLog) { + log = debugLog; + }; + + this.setSuspendDrawing = function(val, repaintAfterwards) { + var curVal = _suspendDrawing; + _suspendDrawing = val; + if (val) _suspendedAt = new Date().getTime(); else _suspendedAt = null; + if (repaintAfterwards) _currentInstance.repaintEverything(); + return curVal; + }; + + // returns whether or not drawing is currently suspended. + this.isSuspendDrawing = function() { + return _suspendDrawing; + }; + + // return timestamp for when drawing was suspended. + this.getSuspendedAt = function() { return _suspendedAt; }; + + /** + * @doc function + * @name jsPlumb.class:doWhileSuspended + * @param {function} fn Function to run while suspended. + * @param {boolean} doNotRepaintAfterwards If true, jsPlumb won't run a full repaint. Otherwise it will. + * @description Suspends drawing, runs the given function, then re-enables drawing (and repaints, unless you tell it not to) + */ + this.doWhileSuspended = function(fn, doNotRepaintAfterwards) { + var _wasSuspended = _currentInstance.isSuspendDrawing(); + if (!_wasSuspended) + _currentInstance.setSuspendDrawing(true); + try { + fn(); + } + catch (e) { + _ju.log("Function run while suspended failed", e); + } + if (!_wasSuspended) + _currentInstance.setSuspendDrawing(false, !doNotRepaintAfterwards); + }; + + this.updateOffset = _updateOffset; + this.getOffset = function(elId) { return offsets[elId]; }; + this.getSize = function(elId) { return sizes[elId]; }; + this.getCachedData = _getCachedData; + this.timestamp = _timestamp; + + + + /** + * @doc function + * @name jsPlumb.class:setRenderMode + * @param {string} mode One of `jsPlumb.SVG, `jsPlumb.VML` or `jsPlumb.CANVAS`. + * @description Sets render mode. jsPlumb will fall back to VML if it determines that + * what you asked for is not supported (and that VML is). If you asked for VML but the browser does + * not support it, jsPlumb uses SVG. + * @return {string} The render mode that jsPlumb set, which of course may be different from that requested. + */ + this.setRenderMode = function(mode) { + renderMode = jsPlumbAdapter.setRenderMode(mode); + var i, ii; + // only add this if the renderer is canvas; we dont want these listeners registered on te + // entire document otherwise. + if (renderMode == jsPlumb.CANVAS) { + var bindOne = function(event) { + jsPlumb.CurrentLibrary.bind(document, event, function(e) { + if (!_currentInstance.currentlyDragging && renderMode == jsPlumb.CANVAS) { + // try connections first + for (i = 0, ii = connections.length; i < ii; i++ ) { + var t = connections[i].getConnector()[event](e); + if (t) return; + } + for (var el in endpointsByElement) { + var ee = endpointsByElement[el]; + for ( i = 0, ii = ee.length; i < ii; i++ ) { + if (ee[i].endpoint[event] && ee[i].endpoint[event](e)) return; + } + } + } + }); + }; + bindOne("click");bindOne("dblclick");bindOne("mousemove");bindOne("mousedown");bindOne("mouseup");bindOne("contextmenu"); + } + + return renderMode; + }; + + /** + * @doc function + * @name jsPlumb.class:getRenderMode + * @description Gets the current render mode for this instance of jsPlumb. + * @return {string} The current render mode - "canvas", "svg" or "vml". + */ + this.getRenderMode = function() { return renderMode; }; + + this.show = function(el, changeEndpoints) { + _setVisible(el, "block", changeEndpoints); + return _currentInstance; + }; + + /** + * gets some test hooks. nothing writable. + */ + this.getTestHarness = function() { + return { + endpointsByElement : endpointsByElement, + endpointCount : function(elId) { + var e = endpointsByElement[elId]; + return e ? e.length : 0; + }, + connectionCount : function(scope) { + scope = scope || DEFAULT_SCOPE; + var c = _currentInstance.getConnections({scope:scope}); + return c ? c.length : 0; + }, + getId : _getId, + makeAnchor:self.makeAnchor, + makeDynamicAnchor:self.makeDynamicAnchor + }; + }; + + + // TODO: update this method to return the current state. + this.toggleVisible = _toggleVisible; + this.toggleDraggable = _toggleDraggable; + this.addListener = this.bind; + + /* + helper method to take an xy location and adjust it for the parent's offset and scroll. + */ + this.adjustForParentOffsetAndScroll = function(xy, el) { + + var offsetParent = null, result = xy; + if (el.tagName.toLowerCase() === "svg" && el.parentNode) { + offsetParent = el.parentNode; + } + else if (el.offsetParent) { + offsetParent = el.offsetParent; + } + if (offsetParent != null) { + var po = offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : _getOffset(offsetParent, _currentInstance), + so = offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : {left:offsetParent.scrollLeft, top:offsetParent.scrollTop}; + + // i thought it might be cool to do this: + // lastReturnValue[0] = lastReturnValue[0] - offsetParent.offsetLeft + offsetParent.scrollLeft; + // lastReturnValue[1] = lastReturnValue[1] - offsetParent.offsetTop + offsetParent.scrollTop; + // but i think it ignores margins. my reasoning was that it's quicker to not hand off to some underlying + // library. + + result[0] = xy[0] - po.left + so.left; + result[1] = xy[1] - po.top + so.top; + } + + return result; + + }; + + if (!jsPlumbAdapter.headless) { + _currentInstance.dragManager = jsPlumbAdapter.getDragManager(_currentInstance); + _currentInstance.recalculateOffsets = _currentInstance.dragManager.updateOffsets; + } + + }; + + jsPlumbUtil.extend(jsPlumbInstance, jsPlumbUtil.EventGenerator, { + setAttribute : function(el, a, v) { + jsPlumbAdapter.setAttribute(el, a, v); + }, + getAttribute : function(el, a) { + return jsPlumbAdapter.getAttribute(jsPlumb.CurrentLibrary.getDOMElement(el), a); + }, + registerConnectionType : function(id, type) { + this._connectionTypes[id] = jsPlumb.extend({}, type); + }, + registerConnectionTypes : function(types) { + for (var i in types) + this._connectionTypes[i] = jsPlumb.extend({}, types[i]); + }, + registerEndpointType : function(id, type) { + this._endpointTypes[id] = jsPlumb.extend({}, type); + }, + registerEndpointTypes : function(types) { + for (var i in types) + this._endpointTypes[i] = jsPlumb.extend({}, types[i]); + }, + getType : function(id, typeDescriptor) { + return typeDescriptor === "connection" ? this._connectionTypes[id] : this._endpointTypes[id]; + }, + setIdChanged : function(oldId, newId) { + this.setId(oldId, newId, true); + }, + // set parent: change the parent for some node and update all the registrations we need to. + setParent : function(el, newParent) { + var jpcl = jsPlumb.CurrentLibrary, + _el = jpcl.getElementObject(el), + _dom = jpcl.getDOMElement(_el), + _id = this.getId(_dom), + _pel = jpcl.getElementObject(newParent), + _pdom = jpcl.getDOMElement(_pel), + _pid = this.getId(_pdom); + + _dom.parentNode.removeChild(_dom); + _pdom.appendChild(_dom); + this.dragManager.setParent(_el, _id, _pel, _pid); + } + }); + +// --------------------- static instance + AMD registration ------------------------------------------- + +// create static instance and assign to window if window exists. + var jsPlumb = new jsPlumbInstance(); + // register on window if defined (lets us run on server) + if (typeof window != 'undefined') window.jsPlumb = jsPlumb; + // add 'getInstance' method to static instance + /** + * @name jsPlumb.getInstance + * @param {object} [_defaults] Optional default settings for the new instance. + * @desc Gets a new instance of jsPlumb. + */ + jsPlumb.getInstance = function(_defaults) { + var j = new jsPlumbInstance(_defaults); + j.init(); + return j; + }; +// maybe register static instance as an AMD module, and getInstance method too. + if ( typeof define === "function") { + define( "jsplumb", [], function () { return jsPlumb; } ); + define( "jsplumbinstance", [], function () { return jsPlumb.getInstance(); } ); + } + // CommonJS + if (typeof exports !== 'undefined') { + exports.jsPlumb = jsPlumb; + } + + +// --------------------- end static instance + AMD registration ------------------------------------------- + +})(); + + +;(function() { + + // create the drag handler for a connection + 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(n); + _jsPlumb.updateOffset( { elId : id }); + // create and assign an id, and initialize the offset. + placeholder.id = id; + placeholder.element = n; + }; + + // create a floating endpoint (for drag connections) + 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" }); + }; + + var typeParameters = [ "connectorStyle", "connectorHoverStyle", "connectorOverlays", + "connector", "connectionType", "connectorClass", "connectorHoverClass" ]; + + // 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(ep, elementWithPrecedence) { + var idx = 0; + if (elementWithPrecedence != null) { + for (var i = 0; i < ep.connections.length; i++) { + if (ep.connections[i].sourceId == elementWithPrecedence || ep.connections[i].targetId == elementWithPrecedence) { + idx = i; + break; + } + } + } + + return ep.connections[idx]; + }; + + var findConnectionIndex = function(conn, ep) { + return jsPlumbUtil.findWithFunction(ep.connections, function(c) { return c.id == conn.id; }); + }; + + jsPlumb.Endpoint = function(params) { + var _jsPlumb = params._jsPlumb, + jpcl = jsPlumb.CurrentLibrary, + _att = jsPlumbAdapter.getAttribute, + _gel = jpcl.getElementObject, + _dom = jpcl.getDOMElement, + _ju = jsPlumbUtil, + _newConnection = params.newConnection, + _newEndpoint = params.newEndpoint, + _finaliseConnection = params.finaliseConnection, + _fireDetachEvent = params.fireDetachEvent, + _fireMoveEvent = params.fireMoveEvent, + floatingConnections = params.floatingConnections; + + this.idPrefix = "_jsplumb_e_"; + this.defaultLabelLocation = [ 0.5, 0.5 ]; + this.defaultOverlayKeys = ["Overlays", "EndpointOverlays"]; + this.parent = params.parent; + OverlayCapableJsPlumbUIComponent.apply(this, arguments); + +// TYPE + + this.getDefaultType = function() { + return { + parameters:{}, + scope:null, + maxConnections:this._jsPlumb.instance.Defaults.MaxConnections, + paintStyle:this._jsPlumb.instance.Defaults.EndpointStyle || jsPlumb.Defaults.EndpointStyle, + endpoint:this._jsPlumb.instance.Defaults.Endpoint || jsPlumb.Defaults.Endpoint, + hoverPaintStyle:this._jsPlumb.instance.Defaults.EndpointHoverStyle || jsPlumb.Defaults.EndpointHoverStyle, + overlays:this._jsPlumb.instance.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 + }; + }; + +// END TYPE + + this._jsPlumb.enabled = !(params.enabled === false); + this._jsPlumb.visible = true; + this.element = _dom(params.source); + this._jsPlumb.uuid = params.uuid; + this._jsPlumb.floatingEndpoint = null; + var inPlaceCopy = null; + if (this._jsPlumb.uuid) params.endpointsByUUID[this._jsPlumb.uuid] = this; + this.elementId = params.elementId; + + this._jsPlumb.connectionCost = params.connectionCost; + this._jsPlumb.connectionsDirected = params.connectionsDirected; + this._jsPlumb.currentAnchorClass = ""; + this._jsPlumb.events = {}; + + var _updateAnchorClass = function() { + jpcl.removeClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + this.removeClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + this._jsPlumb.currentAnchorClass = this.anchor.getCssClass(); + this.addClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + jpcl.addClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + }.bind(this); + + this.setAnchor = function(anchorParams, doNotRepaint) { + this._jsPlumb.instance.continuousAnchorFactory.clear(this.elementId); + this.anchor = this._jsPlumb.instance.makeAnchor(anchorParams, this.elementId, _jsPlumb); + _updateAnchorClass(); + this.anchor.bind("anchorChanged", function(currentAnchor) { + this.fire("anchorChanged", {endpoint:this, anchor:currentAnchor}); + _updateAnchorClass(); + }.bind(this)); + if (!doNotRepaint) + this._jsPlumb.instance.repaint(this.elementId); + return this; + }; + + var anchorParamsToUse = params.anchor ? params.anchor : params.anchors ? params.anchors : (_jsPlumb.Defaults.Anchor || "Top"); + this.setAnchor(anchorParamsToUse, true); + + // endpoint delegates to first connection for hover, if there is one. + var internalHover = function(state) { + if (this.connections.length > 0) + this.connections[0].setHover(state, false); + else + this.setHover(state); + }.bind(this); + + // 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. + this._jsPlumb.instance.anchorManager.add(this, this.elementId); + + this.setEndpoint = function(ep) { + + if (this.endpoint != null) { + this.endpoint.cleanup(); + this.endpoint.destroy(); + } + + var _e = function(t, p) { + var rm = _jsPlumb.getRenderMode(); + if (jsPlumb.Endpoints[rm][t]) return new jsPlumb.Endpoints[rm][t](p); + if (!_jsPlumb.Defaults.DoNotThrowErrors) + throw { msg:"jsPlumb: unknown endpoint type '" + t + "'" }; + }; + + var endpointArgs = { + _jsPlumb:this._jsPlumb.instance, + cssClass:params.cssClass, + parent:params.parent, + container:params.container, + tooltip:params.tooltip, + connectorTooltip:params.connectorTooltip, + endpoint:this + }; + if (_ju.isString(ep)) + this.endpoint = _e(ep, endpointArgs); + else if (_ju.isArray(ep)) { + endpointArgs = _ju.merge(ep[1], endpointArgs); + this.endpoint = _e(ep[0], endpointArgs); + } + else { + this.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); + this.endpoint.clone = function() { + // TODO this, and the code above, can be refactored to be more dry. + if (_ju.isString(ep)) + return _e(ep, endpointArgs); + else if (_ju.isArray(ep)) { + endpointArgs = _ju.merge(ep[1], endpointArgs); + return _e(ep[0], endpointArgs); + } + }.bind(this); + + this.type = this.endpoint.type; + // bind listeners from endpoint to self, with the internal hover function defined above. + this.bindListeners(this.endpoint, this, internalHover); + }; + + this.setEndpoint(params.endpoint || _jsPlumb.Defaults.Endpoint || jsPlumb.Defaults.Endpoint || "Dot"); + 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._jsPlumb.paintStyleInUse = this.getPaintStyle(); + + _ju.copyValues(typeParameters, params, this); + + this.isSource = params.isSource || false; + this.isTarget = params.isTarget || false; + this._jsPlumb.maxConnections = params.maxConnections || _jsPlumb.Defaults.MaxConnections; // maximum number of connections this endpoint can be the source of. + this.canvas = this.endpoint.canvas; + // add anchor class (need to do this on construction because we set anchor first) + this.addClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + jpcl.addClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + this.connections = params.connections || []; + this.connectorPointerEvents = params["connector-pointer-events"]; + + this.scope = params.scope || _jsPlumb.getDefaultScope(); + this.timestamp = null; + this.reattachConnections = params.reattach || _jsPlumb.Defaults.ReattachConnections; + this.connectionsDetachable = _jsPlumb.Defaults.ConnectionsDetachable; + if (params.connectionsDetachable === false || params.detachable === false) + this.connectionsDetachable = false; + this.dragAllowedWhenFull = params.dragAllowedWhenFull || true; + + if (params.onMaxConnections) + this.bind("maxConnections", params.onMaxConnections); + + // + // add a connection. not part of public API. + // + this.addConnection = function(connection) { + this.connections.push(connection); + this[(this.connections.length > 0 ? "add" : "remove") + "Class"](_jsPlumb.endpointConnectedClass); + this[(this.isFull() ? "add" : "remove") + "Class"](_jsPlumb.endpointFullClass); + }; + + this.detachFromConnection = function(connection, idx) { + idx = idx == null ? findConnectionIndex(connection, this) : idx; + if (idx >= 0) { + this.connections.splice(idx, 1); + this[(this.connections.length > 0 ? "add" : "remove") + "Class"](_jsPlumb.endpointConnectedClass); + this[(this.isFull() ? "add" : "remove") + "Class"](_jsPlumb.endpointFullClass); + } + }; + + this.detach = function(connection, ignoreTarget, forceDetach, fireEvent, originalEvent, endpointBeingDeleted, connectionIndex) { + + var idx = connectionIndex == null ? findConnectionIndex(connection, this) : connectionIndex, + actuallyDetached = false; + fireEvent = (fireEvent !== false); + + if (idx >= 0) { + if (forceDetach || connection._forceDetach || (connection.isDetachable() && connection.isDetachAllowed(connection) && this.isDetachAllowed(connection) )) { + + //connection.setHover(false); + + _jsPlumb.deleteObject({ + connection:connection, + fireEvent:(!ignoreTarget && fireEvent), + originalEvent:originalEvent + }); + actuallyDetached = true; + } + } + return actuallyDetached; + }; + + this.detachAll = function(fireEvent, originalEvent) { + while (this.connections.length > 0) { + // TODO this could pass the index in to the detach method to save some time (index will always be zero in this while loop) + // TODO now it defaults to fireEvent true. will that mess with things? + this.detach(this.connections[0], false, true, fireEvent !== false, originalEvent, this, 0); + } + return this; + }; + this.detachFrom = function(targetEndpoint, fireEvent, originalEvent) { + var c = []; + for ( var i = 0; i < this.connections.length; i++) { + if (this.connections[i].endpoints[1] == targetEndpoint || this.connections[i].endpoints[0] == targetEndpoint) { + c.push(this.connections[i]); + } + } + for ( var j = 0; j < c.length; j++) { + this.detach(c[j], false, true, fireEvent, originalEvent); + } + return this; + }; + + this.getElement = function() { + return this.element; + }; + + // container not supported in 1.5.3; you cannot change the container once it is set. + // it might come back int a future release. + this.setElement = function(el/*, container*/) { + var parentId = this._jsPlumb.instance.getId(el), + curId = this.elementId; + // remove the endpoint from the list for the current endpoint's element + _ju.removeWithFunction(params.endpointsByElement[this.elementId], function(e) { + return e.id == this.id; + }.bind(this)); + this.element = _dom(el); + this.elementId = _jsPlumb.getId(this.element); + _jsPlumb.anchorManager.rehomeEndpoint(this, curId, this.element); + _jsPlumb.dragManager.endpointAdded(this.element); + _ju.addToList(params.endpointsByElement, parentId, this); + return this; + }; + + /** + * private but must be exposed. + */ + this.makeInPlaceCopy = function() { + var loc = this.anchor.getCurrentLocation({element:this}), + o = this.anchor.getOrientation(this), + acc = this.anchor.getCssClass(), + inPlaceAnchor = { + bind:function() { }, + compute:function() { return [ loc[0], loc[1] ]; }, + getCurrentLocation : function() { return [ loc[0], loc[1] ]; }, + getOrientation:function() { return o; }, + getCssClass:function() { return acc; } + }; + + return _newEndpoint( { + anchor : inPlaceAnchor, + source : this.element, + paintStyle : this.getPaintStyle(), + endpoint : params.hideOnDrag ? "Blank" : this.endpoint, + _transient:true, + scope:this.scope + }); + }; + + + /** + * private but needs to be exposed. + */ + this.isFloating = function() { + return this.anchor != null && this.anchor.isFloating; + }; + + /** + * 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 = this.connections[0]; + if (this.isTarget && candidate) return candidate; + else { + return (this.connections.length < this._jsPlumb.maxConnections) || this._jsPlumb.maxConnections == -1 ? null : candidate; + } + }; + + this.setStyle = this.setPaintStyle; + + this.paint = function(params) { + params = params || {}; + var timestamp = params.timestamp, recalc = !(params.recalc === false); + if (!timestamp || this.timestamp !== timestamp) { + + // TODO check: is this is a safe performance enhancement? + var info = _jsPlumb.updateOffset({ elId:this.elementId, timestamp:timestamp/*, recalc:recalc*/ }); + + var xy = params.offset ? params.offset.o : info.o; + if(xy != null) { + var ap = params.anchorPoint,connectorPaintStyle = params.connectorPaintStyle; + if (ap == null) { + var wh = params.dimensions || info.s, + anchorParams = { xy : [ xy.left, xy.top ], wh : wh, element : this, timestamp : timestamp }; + if (recalc && this.anchor.isDynamic && this.connections.length > 0) { + var c = findConnectionToUseForDynamicAnchor(this, params.elementWithPrecedence), + oIdx = c.endpoints[0] == this ? 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 = this.anchor.compute(anchorParams); + } + + this.endpoint.compute(ap, this.anchor.getOrientation(this), this._jsPlumb.paintStyleInUse, connectorPaintStyle || this.paintStyleInUse); + this.endpoint.paint(this._jsPlumb.paintStyleInUse, this.anchor); + this.timestamp = timestamp; + + // paint overlays + for ( var i = 0; i < this._jsPlumb.overlays.length; i++) { + var o = this._jsPlumb.overlays[i]; + if (o.isVisible()) { + this._jsPlumb.overlayPlacements[i] = o.draw(this.endpoint, this._jsPlumb.paintStyleInUse); + o.paint(this._jsPlumb.overlayPlacements[i]); + } + } + } + } + }; + + this.repaint = this.paint; + + var draggingInitialised = false; + this.initDraggable = function() { + // is this a connection source? we make it draggable and have the + // drag listener maintain a connection with a floating endpoint. + if (!draggingInitialised && jpcl.isDragSupported(this.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 = this.connectorSelector(); + var _continue = true; + // if not enabled, return + if (!this.isEnabled()) _continue = false; + // if no connection and we're not a source, return. + if (jpc == null && !this.isSource) _continue = false; + // otherwise if we're full and not allowed to drag, also return false. + if (this.isSource && this.isFull() && !this.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; + } + + // clear hover for all connections for this endpoint before continuing. + for (var i = 0; i < this.connections.length; i++) + this.connections[i].setHover(false); + + this.addClass("endpointDrag"); + _jsPlumb.setConnectionBeingDragged(true); + + // if we're not full but there was a connection, make it null. we'll create a new one. + if (jpc && !this.isFull() && this.isSource) jpc = null; + + _jsPlumb.updateOffset( { elId : this.elementId }); + inPlaceCopy = this.makeInPlaceCopy(); + inPlaceCopy.referenceEndpoint = this; + inPlaceCopy.paint(); + + _makeDraggablePlaceholder(placeholderInfo, this.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 = jsPlumb.CurrentLibrary.getOffset(ipcoel, _jsPlumb), + po = _jsPlumb.adjustForParentOffsetAndScroll([ipco.left, ipco.top], inPlaceCopy.canvas), + canvasElement = _gel(this.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 (this.parentAnchor) this.anchor = _jsPlumb.makeAnchor(this.parentAnchor, this.elementId, _jsPlumb); + + // store the id of the dragging div and the source element. the drop function will pick these up. + _jsPlumb.setAttribute(this.canvas, "dragId", placeholderInfo.id); + _jsPlumb.setAttribute(this.canvas, "elId", this.elementId); + + this._jsPlumb.floatingEndpoint = _makeFloatingEndpoint(this.getPaintStyle(), this.anchor, this.endpoint, this.canvas, placeholderInfo.element, _jsPlumb, _newEndpoint); + // TODO we should not know about DOM here. make the library adapter do this (or the + // dom adapter) + this.canvas.style.visibility = "hidden"; + + if (jpc == null) { + this.anchor.locked = true; + this.setHover(false, false); + // create a connection. one end is this endpoint, the other is a floating endpoint. + jpc = _newConnection({ + sourceEndpoint : this, + targetEndpoint : this._jsPlumb.floatingEndpoint, + source : this.endpointWillMoveTo || this.element, // for makeSource with parent option. ensure source element is represented correctly. + target : placeholderInfo.element, + anchors : [ this.anchor, this._jsPlumb.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:this.connectionType, + cssClass:this.connectorClass, + hoverClass:this.connectorHoverClass + }); + jpc.pending = true; // mark this connection as not having been established. + jpc.addClass(_jsPlumb.draggingClass); + this._jsPlumb.floatingEndpoint.addClass(_jsPlumb.draggingClass); + // 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 == this.id ? 0 : 1; + jpc.floatingAnchorIndex = anchorIdx; // save our anchor index as the connection's floating index. + this.detachFromConnection(jpc); // detach from the connection while dragging is occurring. + + // store the original scope (issue 57) + var dragScope = jsPlumb.CurrentLibrary.getDragScope(canvasElement); + _jsPlumb.setAttribute(this.canvas, "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); + + // fire an event that informs that a connection is being dragged. we do this before + // replacing the original target with the floating element info. + _jsPlumb.fire("connectionDrag", jpc); + + // now we replace ourselves with the temporary div we created above: + if (anchorIdx === 0) { + existingJpcParams = [ jpc.source, jpc.sourceId, canvasElement, dragScope ]; + jpc.source = placeholderInfo.element; + jpc.sourceId = placeholderInfo.id; + } else { + existingJpcParams = [ jpc.target, jpc.targetId, canvasElement, 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]; + + // PROVIDE THE SUSPENDED ELEMENT, BE IT A SOURCE OR TARGET (ISSUE 39) + jpc.suspendedElement = jpc.endpoints[anchorIdx].getElement(); + jpc.suspendedElementId = jpc.endpoints[anchorIdx].elementId; + jpc.suspendedElementType = anchorIdx === 0 ? "source" : "target"; + + jpc.suspendedEndpoint.setHover(false); + this._jsPlumb.floatingEndpoint.referenceEndpoint = jpc.suspendedEndpoint; + jpc.endpoints[anchorIdx] = this._jsPlumb.floatingEndpoint; + + jpc.addClass(_jsPlumb.draggingClass); + this._jsPlumb.floatingEndpoint.addClass(_jsPlumb.draggingClass); + + } + // register it and register connection on it. + floatingConnections[placeholderInfo.id] = jpc; + _jsPlumb.anchorManager.addFloatingConnection(placeholderInfo.id, 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, this._jsPlumb.floatingEndpoint); + // tell jsplumb about it + _jsPlumb.currentlyDragging = true; + }.bind(this); + + 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 || this.scope; + dragOptions[startEvent] = _ju.wrap(dragOptions[startEvent], start, false); + // extracted drag handler function so can be used by makeSource + dragOptions[dragEvent] = _ju.wrap(dragOptions[dragEvent], _dragHandler.drag); + dragOptions[stopEvent] = _ju.wrap(dragOptions[stopEvent], + function() { + + _jsPlumb.setConnectionBeingDragged(false); + // if no endpoints, jpc already cleaned up. + if (jpc.endpoints != null) { + // get the actual drop event (decode from library args to stop function) + var originalEvent = jpcl.getDropEvent(arguments); + // unlock the other endpoint (if it is dynamic, it would have been locked at drag start) + var idx = jpc.floatingAnchorIndex == null ? 1 : jpc.floatingAnchorIndex; + jpc.endpoints[idx === 0 ? 1 : 0].anchor.locked = false; + // WHY does this need to happen? i suppose because the connection might not get + // deleted. TODO: i dont want to know about css classes inside jsplumb, ideally. + jpc.removeClass(_jsPlumb.draggingClass); + + // if we have the floating endpoint then the connection has not been dropped + // on another endpoint. If it is a new connection we throw it away. If it is an + // existing connection we check to see if we should reattach it, throwing it away + // if not. + if (jpc.endpoints[idx] == this._jsPlumb.floatingEndpoint) { + // 6a. 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 the connection should be reattached, or the other endpoint refuses detach, then + // reset the connection to its original state + 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._forceDetach = null; + jpc._forceReattach = null; + this._jsPlumb.floatingEndpoint.detachFromConnection(jpc); + jpc.suspendedEndpoint.addConnection(jpc); + _jsPlumb.repaint(existingJpcParams[1]); + } + } + } + } + + // remove the element associated with the floating endpoint + // (and its associated floating endpoint and visual artefacts) + _jsPlumb.remove(placeholderInfo.element, false); + // remove the inplace copy + _jsPlumb.remove(inPlaceCopy.canvas, false); + + // makeTargets sets this flag, to tell us we have been replaced and should delete ourself. + if (this.deleteAfterDragStop) { + _jsPlumb.deleteObject({endpoint:this}); + } + else { + if (this._jsPlumb) { + this._jsPlumb.floatingEndpoint = null; + // repaint this endpoint. + // make our canvas visible (TODO: hand off to library; we should not know about DOM) + this.canvas.style.visibility = "visible"; + // unlock our anchor + this.anchor.locked = false; + this.paint({recalc:false}); + } + } + + // TODO can this stay here? the connection is no longer valid. + _jsPlumb.fire("connectionDragStop", jpc); + + // tell jsplumb that dragging is finished. + _jsPlumb.currentlyDragging = false; + + jpc = null; + + }.bind(this)); + + var i = _gel(this.canvas); + jpcl.initDraggable(i, dragOptions, true, _jsPlumb); + + draggingInitialised = true; + } + }; + + // if marked as source or target at create time, init the dragging. + if (this.isSource || this.isTarget) + this.initDraggable(); + + // 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 ((this.isTarget || forceInit) && jpcl.isDropSupported(this.element)) { + var dropOptions = params.dropOptions || _jsPlumb.Defaults.DropOptions || jsPlumb.Defaults.DropOptions; + dropOptions = jsPlumb.extend( {}, dropOptions); + dropOptions.scope = dropOptions.scope || this.scope; + var dropEvent = jpcl.dragEvents.drop, + overEvent = jpcl.dragEvents.over, + outEvent = jpcl.dragEvents.out, + drop = function() { + + this.removeClass(_jsPlumb.endpointDropAllowedClass); + this.removeClass(_jsPlumb.endpointDropForbiddenClass); + + var originalEvent = jpcl.getDropEvent(arguments), + draggable = _gel(jpcl.getDragObject(arguments)), + id = _jsPlumb.getAttribute(draggable, "dragId"), + elId = _jsPlumb.getAttribute(draggable, "elId"), + scope = _jsPlumb.getAttribute(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 == this.id || + this.referenceEndpoint && jpc.suspendedEndpoint.id == this.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 (this.isFull()) { + this.fire("maxConnections", { + endpoint:this, + connection:jpc, + maxConnections:this._jsPlumb.maxConnections + }, originalEvent); + } + + if (!this.isFull() && !(idx === 0 && !this.isSource) && !(idx == 1 && !this.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 != this.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 = this.element; + jpc.sourceId = this.elementId; + } else { + jpc.target = this.element; + jpc.targetId = this.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() { + jpc.pending = false; + + // remove this jpc from the current endpoint + jpc.endpoints[idx].detachFromConnection(jpc); + if (jpc.suspendedEndpoint) jpc.suspendedEndpoint.detachFromConnection(jpc); + jpc.endpoints[idx] = this; + this.addConnection(jpc); + + // copy our parameters in to the connection: + var params = this.getParameters(); + for (var aParam in params) + jpc.setParameter(aParam, params[aParam]); + + if (!jpc.suspendedEndpoint) { + // if not an existing connection and + if (params.draggable) + jsPlumb.CurrentLibrary.initDraggable(this.element, dragOptions, true, _jsPlumb); + } + else { + var suspendedElement = jpc.suspendedEndpoint.getElement(), suspendedElementId = jpc.suspendedEndpoint.elementId; + _fireMoveEvent({ + index:idx, + originalSourceId:idx === 0 ? suspendedElementId : jpc.sourceId, + newSourceId:idx === 0 ? this.elementId : jpc.sourceId, + originalTargetId:idx == 1 ? suspendedElementId : jpc.targetId, + newTargetId:idx == 1 ? this.elementId : jpc.targetId, + originalSourceEndpoint:idx === 0 ? jpc.suspendedEndpoint : jpc.endpoints[0], + newSourceEndpoint:idx === 0 ? this : jpc.endpoints[0], + originalTargetEndpoint:idx == 1 ? jpc.suspendedEndpoint : jpc.endpoints[1], + newTargetEndpoint:idx == 1 ? this : jpc.endpoints[1], + connection:jpc + }, originalEvent); + /* 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);*/ + } + + // TODO this is like the makeTarget drop code. + if (idx == 1) + _jsPlumb.anchorManager.updateOtherEndpoint(jpc.sourceId, jpc.suspendedElementId, jpc.targetId, jpc); + else + _jsPlumb.anchorManager.sourceChanged(jpc.suspendedEndpoint.elementId, jpc.sourceId, jpc); + + // finalise will inform the anchor manager and also add to + // connectionsByScope if necessary. + // TODO if this is not set to true, then dragging a connection's target to a new + // target causes the connection to be forgotten. however if it IS set to true, then + // the opposite happens: dragging by source causes the connection to get forgotten + // about and then if you delete it jsplumb breaks. + _finaliseConnection(jpc, null, originalEvent/*, true*/); + + commonFunction(); + }.bind(this); + + 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 && this.isDropAllowed(jpc.sourceId, jpc.targetId, jpc.scope, jpc, this); + + if (_doContinue) { + continueFunction(); + } + else { + dontContinueFunction(); + } + } + _jsPlumb.currentlyDragging = false; + } + }.bind(this); + + dropOptions[dropEvent] = _ju.wrap(dropOptions[dropEvent], drop); + dropOptions[overEvent] = _ju.wrap(dropOptions[overEvent], function() { + var draggable = jpcl.getDragObject(arguments), + id = _jsPlumb.getAttribute(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 = (this.isTarget && _jpc.floatingAnchorIndex !== 0) || (_jpc.suspendedEndpoint && this.referenceEndpoint && this.referenceEndpoint.id == _jpc.suspendedEndpoint.id); + if (_cont) { + var bb = _jsPlumb.checkCondition("checkDropAllowed", { + sourceEndpoint:_jpc.endpoints[idx], + targetEndpoint:this, + connection:_jpc + }); + this[(bb ? "add" : "remove") + "Class"](_jsPlumb.endpointDropAllowedClass); + this[(bb ? "remove" : "add") + "Class"](_jsPlumb.endpointDropForbiddenClass); + _jpc.endpoints[idx].anchor.over(this.anchor, this); + } + } + }.bind(this)); + + dropOptions[outEvent] = _ju.wrap(dropOptions[outEvent], function() { + var draggable = jpcl.getDragObject(arguments), + id = _jsPlumb.getAttribute( draggable, "dragId"), + _jpc = floatingConnections[id]; + + if (_jpc != null) { + var idx = _jpc.floatingAnchorIndex == null ? 1 : _jpc.floatingAnchorIndex; + var _cont = (this.isTarget && _jpc.floatingAnchorIndex !== 0) || (_jpc.suspendedEndpoint && this.referenceEndpoint && this.referenceEndpoint.id == _jpc.suspendedEndpoint.id); + if (_cont) { + this.removeClass(_jsPlumb.endpointDropAllowedClass); + this.removeClass(_jsPlumb.endpointDropForbiddenClass); + _jpc.endpoints[idx].anchor.out(); + } + } + }.bind(this)); + jpcl.initDroppable(canvas, dropOptions, true, isTransient); + } + }.bind(this); + + // 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(this.canvas), true, !(params._transient || this.anchor.isFloating), this); + + // finally, set type if it was provided + if (params.type) + this.addType(params.type, params.data, _jsPlumb.isSuspendDrawing()); + + return this; + }; + + jsPlumbUtil.extend(jsPlumb.Endpoint, OverlayCapableJsPlumbUIComponent, { + getTypeDescriptor : function() { return "endpoint"; }, + isVisible : function() { return this._jsPlumb.visible; }, + setVisible : function(v, doNotChangeConnections, doNotNotifyOtherEndpoint) { + this._jsPlumb.visible = v; + if (this.canvas) this.canvas.style.display = v ? "block" : "none"; + this[v ? "showOverlays" : "hideOverlays"](); + if (!doNotChangeConnections) { + for (var i = 0; i < this.connections.length; i++) { + this.connections[i].setVisible(v); + if (!doNotNotifyOtherEndpoint) { + var oIdx = this === this.connections[i].endpoints[0] ? 1 : 0; + // only change the other endpoint if this is its only connection. + if (this.connections[i].endpoints[oIdx].connections.length == 1) this.connections[i].endpoints[oIdx].setVisible(v, true, true); + } + } + } + }, + getAttachedElements : function() { + return this.connections; + }, + applyType : function(t, doNotRepaint) { + if (t.maxConnections != null) this._jsPlumb.maxConnections = t.maxConnections; + if (t.scope) this.scope = t.scope; + jsPlumbUtil.copyValues(typeParameters, t, this); + if (t.anchor) { + this.anchor = this._jsPlumb.instance.makeAnchor(t.anchor); + } + }, + isEnabled : function() { return this._jsPlumb.enabled; }, + setEnabled : function(e) { this._jsPlumb.enabled = e; }, + cleanup : function() { + jsPlumb.CurrentLibrary.removeClass(this.element, this._jsPlumb.instance.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + this.anchor = null; + this.endpoint.cleanup(); + this.endpoint.destroy(); + this.endpoint = null; + // drag/drop + var i = jsPlumb.CurrentLibrary.getElementObject(this.canvas); + jsPlumb.CurrentLibrary.destroyDraggable(i); + jsPlumb.CurrentLibrary.destroyDroppable(i); + }, + setHover : function(h) { + if (this.endpoint && this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) + this.endpoint.setHover(h); + }, + isFull : function() { + return !(this.isFloating() || this._jsPlumb.maxConnections < 1 || this.connections.length < this._jsPlumb.maxConnections); + }, + getConnectionCost : function() { return this._jsPlumb.connectionCost; }, + setConnectionCost : function(c) { + this._jsPlumb.connectionCost = c; + }, + areConnectionsDirected : function() { return this._jsPlumb.connectionsDirected; }, + setConnectionsDirected : function(b) { this._jsPlumb.connectionsDirected = b; }, + setElementId : function(_elId) { + this.elementId = _elId; + this.anchor.elementId = _elId; + }, + setReferenceElement : function(_el) { + this.element = jsPlumb.CurrentLibrary.getDOMElement(_el); + }, + setDragAllowedWhenFull : function(allowed) { + this.dragAllowedWhenFull = allowed; + }, + equals : function(endpoint) { + return this.anchor.equals(endpoint.anchor); + }, + getUuid : function() { + return this._jsPlumb.uuid; + }, + computeAnchor : function(params) { + return this.anchor.compute(params); + } + }); +})(); +;(function() { + + var makeConnector = function(_jsPlumb, renderMode, connectorName, connectorArgs) { + if (!_jsPlumb.Defaults.DoNotThrowErrors && jsPlumb.Connectors[renderMode][connectorName] == null) + throw { msg:"jsPlumb: unknown connector type '" + connectorName + "'" }; + + return new jsPlumb.Connectors[renderMode][connectorName](connectorArgs); + }, + _makeAnchor = function(anchorParams, elementId, _jsPlumb) { + return (anchorParams) ? _jsPlumb.makeAnchor(anchorParams, elementId, _jsPlumb) : null; + }, + prepareEndpoint = function(_jsPlumb, _newEndpoint, conn, existing, index, params, element, elementId, connectorPaintStyle, connectorHoverPaintStyle) { + var e; + if (existing) { + conn.endpoints[index] = existing; + existing.addConnection(conn); + } 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, _jsPlumb) || + _makeAnchor(jsPlumb.Defaults.Anchors[index], elementId,_jsPlumb) || + _makeAnchor(_jsPlumb.Defaults.Anchor, elementId,_jsPlumb) || + _makeAnchor(jsPlumb.Defaults.Anchor, elementId, _jsPlumb), + u = params.uuids ? params.uuids[index] : null; + e = _newEndpoint({ + paintStyle : es, hoverPaintStyle:ehs, endpoint : ep, connections : [ conn ], + uuid : u, anchor : a, source : element, scope : params.scope, container:params.container, + reattach:params.reattach || _jsPlumb.Defaults.ReattachConnections, + detachable:params.detachable || _jsPlumb.Defaults.ConnectionsDetachable + }); + conn.endpoints[index] = e; + + if (params.drawEndpoints === false) e.setVisible(false, true, true); + + } + return e; + }; + + jsPlumb.Connection = function(params) { + var _newConnection = params.newConnection, + _newEndpoint = params.newEndpoint, + jpcl = jsPlumb.CurrentLibrary, + _att = jpcl.getAttribute, + _gel = jpcl.getElementObject, + _dom = jpcl.getDOMElement, + _ju = jsPlumbUtil, + _getOffset = jpcl.getOffset; + + this.connector = null; + this.idPrefix = "_jsplumb_c_"; + this.defaultLabelLocation = 0.5; + this.defaultOverlayKeys = ["Overlays", "ConnectionOverlays"]; + this.parent = params.parent; + // 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. + this.previousConnection = params.previousConnection; + this.source = _dom(params.source); + this.target = _dom(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(); + + OverlayCapableJsPlumbUIComponent.apply(this, arguments); + + this.sourceId = this._jsPlumb.instance.getId(this.source); + this.targetId = this._jsPlumb.instance.getId(this.target); + 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 = []; + + var _jsPlumb = this._jsPlumb.instance; + this._jsPlumb.visible = true; + this._jsPlumb.editable = params.editable === true; + this._jsPlumb.params = { + parent:params.parent, + cssClass:params.cssClass, + container:params.container, + "pointer-events":params["pointer-events"], + editorParams:params.editorParams + }; + this._jsPlumb.lastPaintedAt = null; + this.getDefaultType = function() { + return { + parameters:{}, + scope:null, + detachable:this._jsPlumb.instance.Defaults.ConnectionsDetachable, + rettach:this._jsPlumb.instance.Defaults.ReattachConnections, + paintStyle:this._jsPlumb.instance.Defaults.PaintStyle || jsPlumb.Defaults.PaintStyle, + connector:this._jsPlumb.instance.Defaults.Connector || jsPlumb.Defaults.Connector, + hoverPaintStyle:this._jsPlumb.instance.Defaults.HoverPaintStyle || jsPlumb.Defaults.HoverPaintStyle, + overlays:this._jsPlumb.instance.Defaults.ConnectorOverlays || jsPlumb.Defaults.ConnectorOverlays + }; + }; + +// INITIALISATION CODE + + // wrapped the main function to return null if no input given. this lets us cascade defaults properly. + + var eS = prepareEndpoint(_jsPlumb, _newEndpoint, this, params.sourceEndpoint, 0, params, this.source, this.sourceId, params.paintStyle, params.hoverPaintStyle); + if (eS) _ju.addToList(params.endpointsByElement, this.sourceId, eS); + var eT = prepareEndpoint(_jsPlumb, _newEndpoint, this, params.targetEndpoint, 1, params, this.target, this.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 explicitly told to (or not to) delete endpoints on detach, override endpoint's preferences + if (params.deleteEndpointsOnDetach != null) { + this.endpoints[0]._deleteOnDetach = params.deleteEndpointsOnDetach; + this.endpoints[1]._deleteOnDetach = params.deleteEndpointsOnDetach; + } + else { + // otherwise, unless the endpoints say otherwise, mark them for deletion. + if (!this.endpoints[0]._doNotDeleteOnDetach) this.endpoints[0]._deleteOnDetach = true; + if (!this.endpoints[1]._doNotDeleteOnDetach) this.endpoints[1]._deleteOnDetach = true; + } + + // TODO these could surely be refactored into some method that tries them one at a time until something exists + this.setConnector(this.endpoints[0].connector || + this.endpoints[1].connector || + params.connector || + _jsPlumb.Defaults.Connector || + jsPlumb.Defaults.Connector, true); + + if (params.path) + this.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._jsPlumb.paintStyleInUse = this.getPaintStyle(); + + var _suspendedAt = _jsPlumb.getSuspendedAt(); + _jsPlumb.updateOffset( { elId : this.sourceId, timestamp:_suspendedAt }); + _jsPlumb.updateOffset( { elId : this.targetId, timestamp:_suspendedAt }); + +//* + if(!_jsPlumb.isSuspendDrawing()) { + // 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 + this._jsPlumb.detachable = _jsPlumb.Defaults.ConnectionsDetachable; + if (params.detachable === false) this._jsPlumb.detachable = false; + if(this.endpoints[0].connectionsDetachable === false) this._jsPlumb.detachable = false; + if(this.endpoints[1].connectionsDetachable === false) this._jsPlumb.detachable = false; +// REATTACH + this._jsPlumb.reattach = params.reattach || this.endpoints[0].reattachConnections || this.endpoints[1].reattachConnections || _jsPlumb.Defaults.ReattachConnections; +// COST + DIRECTIONALITY + // if cost not supplied, try to inherit from source endpoint + this._jsPlumb.cost = params.cost || this.endpoints[0].getConnectionCost(); + this._jsPlumb.directed = params.directed; + // inherit directed flag if set no source endpoint + if (params.directed == null) this._jsPlumb.directed = this.endpoints[0].areConnectionsDirected(); +// END COST + DIRECTIONALITY + +// PARAMETERS + // merge all the parameters objects into the connection. parameters set + // on the connection take precedence; then source endpoint params, then + // finally target 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[1].getParameters()); + jsPlumb.extend(_p, this.endpoints[0].getParameters()); + jsPlumb.extend(_p, this.getParameters()); + this.setParameters(_p); +// END PARAMETERS + +// PAINTING + + // the very last thing we do is check to see if a 'type' was supplied in the params + var _type = params.type || this.endpoints[0].connectionType || this.endpoints[1].connectionType; + if (_type) + this.addType(_type, params.data, true); + +// END PAINTING + }; + + jsPlumbUtil.extend(jsPlumb.Connection, OverlayCapableJsPlumbUIComponent, { + applyType : function(t, doNotRepaint) { + if (t.detachable != null) this.setDetachable(t.detachable); + if (t.reattach != null) this.setReattach(t.reattach); + if (t.scope) this.scope = t.scope; + //editable = t.editable; // TODO + this.setConnector(t.connector, doNotRepaint); + }, + getTypeDescriptor : function() { return "connection"; }, + getAttachedElements : function() { + return this.endpoints; + }, + addClass : function(c, informEndpoints) { + if (informEndpoints) { + this.endpoints[0].addClass(c); + this.endpoints[1].addClass(c); + if (this.suspendedEndpoint) this.suspendedEndpoint.addClass(c); + } + if (this.connector) { + this.connector.addClass(c); + } + }, + removeClass : function(c, informEndpoints) { + if (informEndpoints) { + this.endpoints[0].removeClass(c); + this.endpoints[1].removeClass(c); + if (this.suspendedEndpoint) this.suspendedEndpoint.removeClass(c); + } + if (this.connector) { + this.connector.removeClass(c); + } + }, + isVisible : function() { return this._jsPlumb.visible; }, + setVisible : function(v) { + this._jsPlumb.visible = v; + //this[v ? "showOverlays" : "hideOverlays"](); + if (this.connector) + this.connector.setVisible(v); + this.repaint(); + }, + setEditable : function(e) { + if (this.connector && this.connector.isEditable()) + this._jsPlumb.editable = e; + + return this._jsPlumb.editable; + }, + isEditable : function() { return this._jsPlumb.editable; }, + editStarted : function() { + this.setSuspendEvents(true); + this.fire("editStarted", { + path:this.connector.getPath() + }); + this._jsPlumb.instance.setHoverSuspended(true); + }, + editCompleted : function() { + this.fire("editCompleted", { + path:this.connector.getPath() + }); + this.setSuspendEvents(false); + this.setHover(false); + this._jsPlumb.instance.setHoverSuspended(false); + }, + editCanceled : function() { + this.fire("editCanceled", { + path:this.connector.getPath() + }); + this.setHover(false); + this._jsPlumb.instance.setHoverSuspended(false); + }, + cleanup:function() { + //this.endpointsToDeleteOnDetach = null; + this.endpoints = null; + this.source = null; + this.target = null; + if (this.connector != null) { + this.connector.cleanup(); + this.connector.destroy(); + } + this.connector = null; + }, + isDetachable : function() { + return this._jsPlumb.detachable === true; + }, + setDetachable : function(detachable) { + this._jsPlumb.detachable = detachable === true; + }, + isReattach : function() { + return this._jsPlumb.reattach === true; + }, + setReattach : function(reattach) { + this._jsPlumb.reattach = reattach === true; + }, + setHover : function(state) { + if (this.connector && this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) { + this.connector.setHover(state); + jsPlumb.CurrentLibrary[state ? "addClass" : "removeClass"](this.source, this._jsPlumb.instance.hoverSourceClass); + jsPlumb.CurrentLibrary[state ? "addClass" : "removeClass"](this.target, this._jsPlumb.instance.hoverTargetClass); + } + }, + getCost : function() { return this._jsPlumb.cost; }, + setCost : function(c) { this._jsPlumb.cost = c; }, + isDirected : function() { return this._jsPlumb.directed === true; }, + // + // changes the parent element of this connection to newParent. not exposed for the public API. + // + // TODO ensure moveParent method still works (the overlay stuff in particular) + moveParent : function(newParent) { + var jpcl = jsPlumb.CurrentLibrary, curParent = jpcl.getParent(this.connector.canvas); + if (this.connector.bgCanvas) { + jpcl.removeElement(this.connector.bgCanvas); + jpcl.appendElement(this.connector.bgCanvas, newParent); + } + jpcl.removeElement(this.connector.canvas); + jpcl.appendElement(this.connector.canvas, newParent); + // this only applies for DOMOverlays + for (var i = 0; i < this._jsPlumb.overlays.length; i++) { + if (this._jsPlumb.overlays[i].isAppendedAtTopLevel) { + jpcl.removeElement(this._jsPlumb.overlays[i].canvas); + jpcl.appendElement(this._jsPlumb.overlays[i].canvas, newParent); + if (this._jsPlumb.overlays[i].reattachListeners) + this._jsPlumb.overlays[i].reattachListeners(this.connector); + } + } + if (this.connector.reattachListeners) // this is for SVG/VML; change an element's parent and you have to reinit its listeners. + this.connector.reattachListeners(); // the Canvas implementation doesn't have to care about this + }, + getConnector : function() { return this.connector; }, + setConnector : function(connectorSpec, doNotRepaint) { + var _ju = jsPlumbUtil; + if (this.connector != null) { + this.connector.cleanup(); + this.connector.destroy(); + } + + var connectorArgs = { + _jsPlumb:this._jsPlumb.instance, + parent:this._jsPlumb.params.parent, + cssClass:this._jsPlumb.params.cssClass, + container:this._jsPlumb.params.container, + "pointer-events":this._jsPlumb.params["pointer-events"] + }, + renderMode = this._jsPlumb.instance.getRenderMode(); + + if (_ju.isString(connectorSpec)) + this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec, connectorArgs); // lets you use a string as shorthand. + else if (_ju.isArray(connectorSpec)) { + if (connectorSpec.length == 1) + this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec[0], connectorArgs); + else + this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec[0], _ju.merge(connectorSpec[1], connectorArgs)); + } + // binds mouse listeners to the current connector. + this.bindListeners(this.connector, this, function(state) { + this.setHover(state, false); + }.bind(this)); + + this.canvas = this.connector.canvas; + + if (this._jsPlumb.editable && jsPlumb.ConnectorEditors != null && jsPlumb.ConnectorEditors[this.connector.type] && this.connector.isEditable()) { + new jsPlumb.ConnectorEditors[this.connector.type]({ + connector:this.connector, + connection:this, + params:this._jsPlumb.params.editorParams || { } + }); + } + else { + this._jsPlumb.editable = false; + } + + if (!doNotRepaint) this.repaint(); + }, + paint : function(params) { + + if (!this._jsPlumb.instance.isSuspendDrawing() && this._jsPlumb.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 != this._jsPlumb.lastPaintedAt) { + var sourceInfo = this._jsPlumb.instance.updateOffset( { elId : sId, offset : ui, recalc : recalc, timestamp : timestamp }).o, + targetInfo = this._jsPlumb.instance.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(); + this.connector.setEdited(false); + } + + var sAnchorP = sE.anchor.getCurrentLocation({xy:[sourceInfo.left,sourceInfo.top], wh:[sourceInfo.width, sourceInfo.height], element:sE, timestamp:timestamp}), + tAnchorP = tE.anchor.getCurrentLocation({xy:[targetInfo.left,targetInfo.top], wh:[targetInfo.width, targetInfo.height], element:tE, timestamp:timestamp}); + + this.connector.resetBounds(); + + this.connector.compute({ + sourcePos:sAnchorP, + targetPos:tAnchorP, + sourceEndpoint:this.endpoints[sIdx], + targetEndpoint:this.endpoints[tIdx], + lineWidth:this._jsPlumb.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 < this._jsPlumb.overlays.length; i++) { + var o = this._jsPlumb.overlays[i]; + if (o.isVisible()) { + this._jsPlumb.overlayPlacements[i] = o.draw(this.connector, this._jsPlumb.paintStyleInUse); + overlayExtents.minX = Math.min(overlayExtents.minX, this._jsPlumb.overlayPlacements[i].minX); + overlayExtents.maxX = Math.max(overlayExtents.maxX, this._jsPlumb.overlayPlacements[i].maxX); + overlayExtents.minY = Math.min(overlayExtents.minY, this._jsPlumb.overlayPlacements[i].minY); + overlayExtents.maxY = Math.max(overlayExtents.maxY, this._jsPlumb.overlayPlacements[i].maxY); + } + } + + var lineWidth = parseFloat(this._jsPlumb.paintStyleInUse.lineWidth || 1) / 2, + outlineWidth = parseFloat(this._jsPlumb.paintStyleInUse.lineWidth || 0), + extents = { + xmin : Math.min(this.connector.bounds.minX - (lineWidth + outlineWidth), overlayExtents.minX), + ymin : Math.min(this.connector.bounds.minY - (lineWidth + outlineWidth), overlayExtents.minY), + xmax : Math.max(this.connector.bounds.maxX + (lineWidth + outlineWidth), overlayExtents.maxX), + ymax : Math.max(this.connector.bounds.maxY + (lineWidth + outlineWidth), overlayExtents.maxY) + }; + + // paint the connector. + this.connector.paint(this._jsPlumb.paintStyleInUse, null, extents); + // and then the overlays + for ( var j = 0; j < this._jsPlumb.overlays.length; j++) { + var p = this._jsPlumb.overlays[j]; + if (p.isVisible()) { + p.paint(this._jsPlumb.overlayPlacements[j], extents); + } + } + } + this._jsPlumb.lastPaintedAt = timestamp; + } + }, + /* + * Function: repaint + * Repaints the Connection. No parameters exposed to public API. + */ + repaint : function(params) { + params = params || {}; + this.paint({ elId : this.sourceId, recalc : !(params.recalc === false), timestamp:params.timestamp, clearEdits:params.clearEdits }); + } + + }); // END Connection class +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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(a)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 + 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];*/ + r = a[0][0] < b[0][0]; + } + else { + /*if (a[0][0] > b[0][0]) + r= true; + else + r =a[0][1] > b[0][1]; + */ + r = a[0][0] > b[0][0]; + } + 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":function(a, b) { return a[0] > b[0] ? 1 : -1; }, + "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); + }; + var removeEndpointFromAnchorLists = function(endpoint) { + (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); + } + })(anchorLists[endpoint.elementId], endpoint.id); + }; + this.connectionDetached = function(connInfo) { + var connection = connInfo.connection || connInfo, + sourceId = connInfo.sourceId, + targetId = connInfo.targetId, + ep = connection.endpoints, + removeConnection = function(otherIndex, otherEndpoint, otherAnchor, elId, c) { + if (otherAnchor != null && 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 + removeEndpointFromAnchorLists(connection.endpoints[0]); + removeEndpointFromAnchorLists(connection.endpoints[1]); + + self.redraw(connection.sourceId); + self.redraw(connection.targetId); + }; + 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; + }); + removeEndpointFromAnchorLists(endpoint); + }; + 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; }); + jsPlumbUtil.addWithFunction(endpointsToPaint, listToRemoveFrom[i][1].endpoints[oIdx], function(e) { return e.id == listToRemoveFrom[i][1].endpoints[oIdx].id; }); + } + } + } + + for (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; }); + jsPlumbUtil.addWithFunction(endpointsToPaint, listToAddTo[i][1].endpoints[oIdx], function(e) { return e.id == listToAddTo[i][1].endpoints[oIdx].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; + }; + + // + // find the entry in an endpoint's list for this connection and update its target endpoint + // with the current target in the connection. + // + // + this.updateOtherEndpoint = function(elId, oldTargetId, newTargetId, connection) { + var sIndex = jsPlumbUtil.findWithFunction(connectionsByElementId[elId], function(i) { + return i[0].id === connection.id; + }), + tIndex = jsPlumbUtil.findWithFunction(connectionsByElementId[oldTargetId], function(i) { + return i[0].id === connection.id; + }); + + // update or add data for source + if (sIndex != -1) { + connectionsByElementId[elId][sIndex][0] = connection; + connectionsByElementId[elId][sIndex][1] = connection.endpoints[1]; + connectionsByElementId[elId][sIndex][2] = connection.endpoints[1].anchor.constructor == jsPlumb.DynamicAnchor; + } + + // remove entry for previous target (if there) + if (tIndex > -1) { + + connectionsByElementId[oldTargetId].splice(tIndex, 1); + // add entry for new target + jsPlumbUtil.addToList(connectionsByElementId, newTargetId, [connection, connection.endpoints[0], connection.endpoints[0].anchor.constructor == jsPlumb.DynamicAnchor]); + } + }; + + // + // notification that the connection given has changed source from the originalId to the newId. + // This involves: + // 1. removing the connection from the list of connections stored for the originalId + // 2. updating the source information for the target of the connection + // 3. re-registering the connection in connectionsByElementId with the newId + // + this.sourceChanged = function(originalId, newId, connection) { + // remove the entry that points from the old source to the target + jsPlumbUtil.removeWithFunction(connectionsByElementId[originalId], function(info) { + return info[0].id === connection.id; + }); + // find entry for target and update it + var tIdx = jsPlumbUtil.findWithFunction(connectionsByElementId[connection.targetId], function(i) { + return i[0].id === connection.id; + }); + if (tIdx > -1) { + connectionsByElementId[connection.targetId][tIdx][0] = connection; + connectionsByElementId[connection.targetId][tIdx][1] = connection.endpoints[0]; + connectionsByElementId[connection.targetId][tIdx][2] = connection.endpoints[0].anchor.constructor == jsPlumb.DynamicAnchor; + } + // add entry for new source + jsPlumbUtil.addToList(connectionsByElementId, newId, [connection, connection.endpoints[1], connection.endpoints[1].anchor.constructor == jsPlumb.DynamicAnchor]); + }; + + // + // moves the given endpoint from `currentId` to `element`. + // This involves: + // + // 1. changing the key in _amEndpoints under which the endpoint is stored + // 2. changing the source or target values in all of the endpoint's connections + // 3. changing the array in connectionsByElementId in which the endpoint's connections + // are stored (done by either sourceChanged or updateOtherEndpoint) + // + this.rehomeEndpoint = function(ep, currentId, element) { + var eps = _amEndpoints[currentId] || [], + elementId = jsPlumbInstance.getId(element); + + if (elementId !== currentId) { + var idx = jsPlumbUtil.indexOf(eps, ep); + if (idx > -1) { + var _ep = eps.splice(idx, 1)[0]; + self.add(_ep, elementId); + } + } + + for (var i = 0; i < ep.connections.length; i++) { + if (ep.connections[i].sourceId == currentId) { + ep.connections[i].sourceId = ep.elementId; + ep.connections[i].source = ep.element; + self.sourceChanged(currentId, ep.elementId, ep.connections[i]); + } + else if(ep.connections[i].targetId == currentId) { + ep.connections[i].targetId = ep.elementId; + ep.connections[i].target = ep.element; + self.updateOtherEndpoint(ep.connections[i].sourceId, currentId, ep.elementId, ep.connections[i]); + } + } + }; + + this.redraw = function(elementId, ui, timestamp, offsetToUI, clearEdits, doNotRecalcEndpoint) { + + 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 }), + 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 (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 (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 (i = 0; i < ep.length; i++) { + ep[i].paint( { timestamp : timestamp, offset : myOffset, dimensions : myOffset.s, recalc:doNotRecalcEndpoint !== true }); + } + // ... and any other endpoints we came across as a result of the continuous anchors. + for (i = 0; i < endpointsToPaint.length; i++) { + var cd = jsPlumbInstance.getCachedData(endpointsToPaint[i].elementId); + // dont use timestamp for this endpoint, as it is not for the current element and we may + // have needed to recalculate anchor position due to the element for the endpoint moving. + //endpointsToPaint[i].paint( { timestamp : null, offset : cd, dimensions : cd.s }); + + 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 (i = 0; i < endpointConnections.length; i++) { + var otherEndpoint = endpointConnections[i][1]; + if (otherEndpoint.anchor.constructor == jsPlumb.DynamicAnchor) { + otherEndpoint.paint({ elementWithPrecedence:elementId, timestamp:timestamp }); + 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 (i = 0; i < connectionsToPaint.length; i++) { + // if not a connection between the two elements in question dont use the timestamp. + var ts =timestamp;// ((connectionsToPaint[i].sourceId == sourceId && connectionsToPaint[i].targetId == targetId) || + //(connectionsToPaint[i].sourceId == targetId && connectionsToPaint[i].targetId == sourceId)) ? timestamp : null; + connectionsToPaint[i].paint({elId:elementId, timestamp:ts, recalc:false, clearEdits:clearEdits}); + } + } + }; + + var ContinuousAnchor = function(anchorParams) { + jsPlumbUtil.EventGenerator.apply(this); + 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, + cssClass = anchorParams.cssClass || ""; + + for (var i = 0; i < faces.length; i++) { availableFaces[faces[i]] = true; } + + // if the given edge is supported, 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(params) { + return userDefinedContinuousAnchorLocations[params.element.id] || continuousAnchorLocations[params.element.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; + }; + this.getCssClass = function() { return cssClass; }; + this.setCssClass = function(c) { cssClass = c; }; + }; + + // continuous anchors + jsPlumbInstance.continuousAnchorFactory = { + get:function(params) { + var existing = continuousAnchors[params.elementId]; + if (!existing) { + existing = new ContinuousAnchor(params); + continuousAnchors[params.elementId] = existing; + } + return existing; + }, + clear:function(elementId) { + delete continuousAnchors[elementId]; + } + }; + }; + + /** + * 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) { + this.x = params.x || 0; + this.y = params.y || 0; + this.elementId = params.elementId; + this.cssClass = params.cssClass || ""; + this.userDefinedLocation = null; + this.orientation = params.orientation || [ 0, 0 ]; + + jsPlumbUtil.EventGenerator.apply(this); + + var jsPlumbInstance = params.jsPlumbInstance;//, + //lastTimestamp = null;//, lastReturnValue = null; + + this.lastReturnValue = null; + this.offsets = params.offsets || [ 0, 0 ]; + this.timestamp = null; + this.compute = function(params) { + + var xy = params.xy, wh = params.wh, element = params.element, timestamp = params.timestamp; + + if(params.clearUserDefinedLocation) + this.userDefinedLocation = null; + + if (timestamp && timestamp === self.timestamp) + return this.lastReturnValue; + + if (this.userDefinedLocation != null) { + this.lastReturnValue = this.userDefinedLocation; + } + else { + + this.lastReturnValue = [ xy[0] + (this.x * wh[0]) + this.offsets[0], xy[1] + (this.y * wh[1]) + this.offsets[1] ]; + // adjust loc if there is an offsetParent + this.lastReturnValue = jsPlumbInstance.adjustForParentOffsetAndScroll(this.lastReturnValue, element.canvas); + } + + this.timestamp = timestamp; + return this.lastReturnValue; + }; + + this.getCurrentLocation = function(params) { + return (this.lastReturnValue == null || (params.timestamp != null && this.timestamp != params.timestamp)) ? this.compute(params) : this.lastReturnValue; + }; + }; + jsPlumbUtil.extend(jsPlumb.Anchor, jsPlumbUtil.EventGenerator, { + equals : function(anchor) { + if (!anchor) return false; + var ao = anchor.getOrientation(), + 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]; + }, + getUserDefinedLocation : function() { + return this.userDefinedLocation; + }, + setUserDefinedLocation : function(l) { + this.userDefinedLocation = l; + }, + clearUserDefinedLocation : function() { + this.userDefinedLocation = null; + }, + getOrientation : function(_endpoint) { return this.orientation; }, + getCssClass : function() { return this.cssClass; } + }); + + /** + * 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; + + // clear from parent. we want floating anchor orientation to always be computed. + this.orientation = 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, endpoint) { + orientation = anchor.getOrientation(endpoint); + }; + + /** + * 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(params) { return _lastResult == null ? this.compute(params) : _lastResult; }; + }; + jsPlumbUtil.extend(jsPlumb.FloatingAnchor, jsPlumb.Anchor); + + var _convertAnchor = function(anchor, jsPlumbInstance, elementId) { + return anchor.constructor == jsPlumb.Anchor ? anchor: jsPlumbInstance.makeAnchor(anchor, elementId, jsPlumbInstance); + }; + + /* + * 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(params) { + jsPlumb.Anchor.apply(this, arguments); + + this.isSelective = true; + this.isDynamic = true; + this.anchors = []; + this.elementId = params.elementId; + this.jsPlumbInstance = params.jsPlumbInstance; + + for (var i = 0; i < params.anchors.length; i++) + this.anchors[i] = _convertAnchor(params.anchors[i], this.jsPlumbInstance, this.elementId); + this.addAnchor = function(anchor) { this.anchors.push(_convertAnchor(anchor, this.jsPlumbInstance, this.elementId)); }; + this.getAnchors = function() { return this.anchors; }; + this.locked = false; + var _curAnchor = this.anchors.length > 0 ? this.anchors[0] : null, + _curIndex = this.anchors.length > 0 ? 0 : -1, + _lastAnchor = _curAnchor, + 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 = params.selector || 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; + + this.timestamp = timestamp; + + 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 (this.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, this.anchors); + this.x = _curAnchor.x; + this.y = _curAnchor.y; + + if (_curAnchor != _lastAnchor) + this.fire("anchorChanged", _curAnchor); + + _lastAnchor = _curAnchor; + + return _curAnchor.compute(params); + }; + + this.getCurrentLocation = function(params) { + return this.getUserDefinedLocation() || (_curAnchor != null ? _curAnchor.getCurrentLocation(params) : null); + }; + + this.getOrientation = function(_endpoint) { return _curAnchor != null ? _curAnchor.getOrientation(_endpoint) : [ 0, 0 ]; }; + this.over = function(anchor, endpoint) { if (_curAnchor != null) _curAnchor.over(anchor, endpoint); }; + this.out = function() { if (_curAnchor != null) _curAnchor.out(); }; + + this.getCssClass = function() { return (_curAnchor && _curAnchor.getCssClass()) || ""; }; + }; + jsPlumbUtil.extend(jsPlumb.DynamicAnchor, jsPlumb.Anchor); + +// -------- 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.2: 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 j = 0; j < p.length; j++) { + p[j][4] = p[j][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; + }; +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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 = jsPlumbUtil.extend(jsPlumb.jsPlumbUIComponent, function(params) { + // 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.2, 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 _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 = jsPlumbGeom.gradient({x:x1, y:y1}, {x:x2, y:y2}); + m2 = -1 / m; + }; + + this.type = "Straight"; + + this.getLength = function() { return length; }; + this.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 jsPlumbGeom.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 = this.pointOnPath(location, absolute), + farAwayPoint = distance <= 0 ? {x:x1, y:y1} : {x:x2, y:y2 }; + + /* + location == 1 ? { + x:x1 + ((x2 - x1) * 10), + y:y1 + ((y1 - y2) * 10) + } : + */ + + if (distance <= 0 && Math.abs(distance) > 1) distance *= -1; + + return jsPlumbGeom.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 = jsPlumbGeom.lineLength([ x, y ], [ _x1, _y1 ]), + fractionInSegment = jsPlumbGeom.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 _super = jsPlumb.Segments.AbstractSegment.apply(this, arguments), + _calcAngle = function(_x, _y) { + return jsPlumbGeom.theta([params.cx, params.cy], [_x, _y]); + }, + _calcAngleForLocation = function(segment, location) { + if (segment.anticlockwise) { + var sa = segment.startAngle < segment.endAngle ? segment.startAngle + TWO_PI : segment.startAngle, + s = Math.abs(sa - segment.endAngle); + return sa - (s * location); + } + else { + var ea = segment.endAngle < segment.startAngle ? segment.endAngle + TWO_PI : segment.endAngle, + ss = Math.abs (ea - segment.startAngle); + + return segment.startAngle + (ss * 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 + (this.radius * Math.cos(params.startAngle)); + this.y1 = params.cy + (this.radius * Math.sin(params.startAngle)); + this.x2 = params.cx + (this.radius * Math.cos(params.endAngle)); + this.y2 = params.cy + (this.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 = jsPlumbGeom.quadrant([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 = this.endAngle < this.startAngle ? this.endAngle + TWO_PI : this.endAngle; + this.sweep = Math.abs (ea - this.startAngle); + if (this.anticlockwise) this.sweep = TWO_PI - this.sweep; + var circumference = 2 * Math.PI * this.radius, + frac = this.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:this.x1, y:this.y1, theta:this.startAngle }; + } + else if (location == 1) { + return { x:this.x2, y:this.y2, theta:this.endAngle }; + } + + if (absolute) { + location = location / length; + } + + var angle = _calcAngleForLocation(this, 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 = this.pointOnPath(location, absolute); + var m = jsPlumbGeom.normal( [ params.cx, params.cy ], [p.x, p.y ] ); + if (!this.anticlockwise && (m == Infinity || m == -Infinity)) m *= -1; + return m; + }; + + this.pointAlongPathFrom = function(location, distance, absolute) { + var p = this.pointOnPath(location, absolute), + arcSpan = distance / circumference * 2 * Math.PI, + dir = this.anticlockwise ? -1 : 1, + startAngle = p.theta + (dir * arcSpan), + startX = params.cx + (this.radius * Math.cos(startAngle)), + startY = params.cy + (this.radius * Math.sin(startAngle)); + + return {x:startX, y:startY}; + }; + }, + + Bezier : function(params) { + var _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() { + this.resetBounds = function() { + this.bounds = { minX:Infinity, minY:Infinity, maxX:-Infinity, maxY:-Infinity }; + }; + this.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(conn, type, params) { + if (params.x1 == params.x2 && params.y1 == params.y2) return; + var s = new jsPlumb.Segments[type](params); + segments.push(s); + totalLength += s.getLength(); + conn.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) { + this.lineWidth = params.lineWidth; + var segment = jsPlumbGeom.quadrant(params.sourcePos, params.targetPos), + swapX = params.targetPos[0] < params.sourcePos[0], + swapY = params.targetPos[1] < params.sourcePos[1], + lw = params.lineWidth || 1, + so = params.sourceEndpoint.anchor.getOrientation(params.sourceEndpoint), + to = params.targetEndpoint.anchor.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; }; + + this.updateBounds = function(segment) { + var segBounds = segment.getBounds(); + this.bounds.minX = Math.min(this.bounds.minX, segBounds.minX); + this.bounds.maxX = Math.max(this.bounds.maxX, segBounds.maxX); + this.bounds.minY = Math.min(this.bounds.minY, segBounds.minY); + this.bounds.maxY = Math.max(this.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) { + var seg = _findSegmentForLocation(location, absolute); + return seg.segment && seg.segment.pointOnPath(seg.proportion, absolute) || [0,0]; + }; + + this.gradientAtPoint = function(location) { + var seg = _findSegmentForLocation(location, absolute); + return seg.segment && seg.segment.gradientAtPoint(seg.proportion, absolute) || 0; + }; + + this.pointAlongPathFrom = function(location, distance, absolute) { + var seg = _findSegmentForLocation(location, absolute); + // TODO what happens if this crosses to the next segment? + return seg.segment && seg.segment.pointAlongPathFrom(seg.proportion, distance, false) || [0,0]; + }; + + this.compute = function(params) { + if (!edited) + paintInfo = _prepareCompute.call(this, params); + + _clearSegments(); + this._compute(paintInfo, params); + this.x = paintInfo.points[0]; + this.y = paintInfo.points[1]; + this.w = paintInfo.points[2]; + this.h = paintInfo.points[3]; + this.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) + }; + }; + jsPlumbUtil.extend(jsPlumb.Connectors.AbstractConnector, AbstractComponent); + + /** + * Class: Connectors.Straight + * The Straight connector draws a simple straight line between the two anchor points. It does not have any constructor parameters. + */ + var Straight = jsPlumb.Connectors.Straight = function() { + this.type = "Straight"; + var _super = jsPlumb.Connectors.AbstractConnector.apply(this, arguments); + + this._compute = function(paintInfo, _) { + _super.addSegment(this, "Straight", {x1:paintInfo.sx, y1:paintInfo.sy, x2:paintInfo.startStubX, y2:paintInfo.startStubY}); + _super.addSegment(this, "Straight", {x1:paintInfo.startStubX, y1:paintInfo.startStubY, x2:paintInfo.endStubX, y2:paintInfo.endStubY}); + _super.addSegment(this, "Straight", {x1:paintInfo.endStubX, y1:paintInfo.endStubY, x2:paintInfo.tx, y2:paintInfo.ty}); + }; + }; + jsPlumbUtil.extend(jsPlumb.Connectors.Straight, jsPlumb.Connectors.AbstractConnector); + jsPlumb.registerConnectorType(Straight, "Straight"); + + /** + * 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. + * + */ + var Bezier = function(params) { + params = params || {}; + + var _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) { + // 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 = sourceEndpoint.anchor.getOrientation(sourceEndpoint), + too = targetEndpoint.anchor.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 = this._findControlPoint([_sx, _sy], sp, tp, p.sourceEndpoint, p.targetEndpoint), + _CP2 = this._findControlPoint([_tx, _ty], tp, sp, p.targetEndpoint, p.sourceEndpoint); + + _super.addSegment(this, "Bezier", { + x1:_sx, y1:_sy, x2:_tx, y2:_ty, + cp1x:_CP[0], cp1y:_CP[1], cp2x:_CP2[0], cp2y:_CP2[1] + }); + }; + }; + jsPlumbUtil.extend(Bezier, jsPlumb.Connectors.AbstractConnector); + jsPlumb.registerConnectorType(Bezier, "Bezier"); + + // ********************************* END OF CONNECTOR TYPES ******************************************************************* + + // ********************************* ENDPOINT TYPES ******************************************************************* + + jsPlumb.Endpoints.AbstractEndpoint = function(params) { + AbstractComponent.apply(this, arguments); + var compute = this.compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { + var out = this._compute.apply(this, arguments); + this.x = out[0]; + this.y = out[1]; + this.w = out[2]; + this.h = out[3]; + this.bounds.minX = this.x; + this.bounds.minY = this.y; + this.bounds.maxX = this.x + this.w; + this.bounds.maxY = this.y + this.h; + return out; + }; + return { + compute:compute, + cssClass:params.cssClass + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.AbstractEndpoint, AbstractComponent); + + /** + * 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 _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) { + this.radius = endpointStyle.radius || this.radius; + var x = anchorPoint[0] - this.radius, + y = anchorPoint[1] - this.radius, + w = this.radius * 2, + h = this.radius * 2; + + if (endpointStyle.strokeStyle) { + var lw = endpointStyle.lineWidth || 1; + x -= lw; + y -= lw; + w += (lw * 2); + h += (lw * 2); + } + return [ x, y, w, h, this.radius ]; + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.Dot, jsPlumb.Endpoints.AbstractEndpoint); + + /** + * 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 _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 || this.width, + height = endpointStyle.height || this.height, + x = anchorPoint[0] - (width/2), + y = anchorPoint[1] - (height/2); + + return [ x, y, width, height]; + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.Rectangle, jsPlumb.Endpoints.AbstractEndpoint); + + + var DOMElementEndpoint = function(params) { + jsPlumb.DOMElementComponent.apply(this, arguments); + this._jsPlumb.displayElements = [ ]; + }; + jsPlumbUtil.extend(DOMElementEndpoint, jsPlumb.DOMElementComponent, { + // jsPlumb.Endpoints.AbstractEndpoint + getDisplayElements : function() { + return this._jsPlumb.displayElements; + }, + appendDisplayElement : function(el) { + this._jsPlumb.displayElements.push(el); + } + }); + + /** + * Class: Endpoints.Image + * Draws an image as the Endpoint. + */ + /** + * Function: Constructor + * + * Parameters: + * + * src - location of the image to use. + + TODO: multiple references to self. not sure quite how to get rid of them entirely. perhaps self = null in the cleanup + function will suffice + + TODO this class still leaks memory. + + */ + jsPlumb.Endpoints.Image = function(params) { + + this.type = "Image"; + DOMElementEndpoint.apply(this, arguments); + jsPlumb.Endpoints.AbstractEndpoint.apply(this, arguments); + + var _onload = params.onload, + src = params.src || params.url, + parent = params.parent, + clazz = params.cssClass ? " " + params.cssClass : ""; + + this._jsPlumb.img = new Image(); + this._jsPlumb.ready = false; + this._jsPlumb.initialized = false; + this._jsPlumb.deleted = false; + this._jsPlumb.widthToUse = params.width; + this._jsPlumb.heightToUse = params.height; + this._jsPlumb.endpoint = params.endpoint; + + this._jsPlumb.img.onload = function() { + // check we weren't actually discarded before use (in fact mostly happens in tests) + if (this._jsPlumb != null) { + this._jsPlumb.ready = true; + this._jsPlumb.widthToUse = this._jsPlumb.widthToUse || this._jsPlumb.img.width; + this._jsPlumb.heightToUse = this._jsPlumb.heightToUse || this._jsPlumb.img.height; + if (_onload) { + _onload(this); + } + } + }.bind(this); + + /* + 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. + */ + this._jsPlumb.endpoint.setImage = function(_img, onload) { + var s = _img.constructor == String ? _img : _img.src; + _onload = onload; + this._jsPlumb.img.src = s; + + if (this.canvas != null) + this.canvas.setAttribute("src", this._jsPlumb.img.src); + }.bind(this); + + this._jsPlumb.endpoint.setImage(src, _onload); + /* + var s = src.constructor == String ? src : src.src; + //_onload = onload; + this._jsPlumb.img.src = src; + + if (this.canvas != null) + this.canvas.setAttribute("src", this._jsPlumb.img.src); + // }.bind(this); + + //this._jsPlumb.endpoint.setImage(src, _onload);*/ + + this._compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { + this.anchorPoint = anchorPoint; + if (this._jsPlumb.ready) return [anchorPoint[0] - this._jsPlumb.widthToUse / 2, anchorPoint[1] - this._jsPlumb.heightToUse / 2, + this._jsPlumb.widthToUse, this._jsPlumb.heightToUse]; + else return [0,0,0,0]; + }; + + this.canvas = document.createElement("img"); + this.canvas.style.margin = 0; + this.canvas.style.padding = 0; + this.canvas.style.outline = 0; + this.canvas.style.position = "absolute"; + this.canvas.className = this._jsPlumb.instance.endpointClass + clazz; + if (this._jsPlumb.widthToUse) this.canvas.setAttribute("width", this._jsPlumb.widthToUse); + if (this._jsPlumb.heightToUse) this.canvas.setAttribute("height", this._jsPlumb.heightToUse); + this._jsPlumb.instance.appendElement(this.canvas, parent); + this.attachListeners(this.canvas, this); + + this.actuallyPaint = function(d, style, anchor) { + if (!this._jsPlumb.deleted) { + if (!this._jsPlumb.initialized) { + this.canvas.setAttribute("src", this._jsPlumb.img.src); + this.appendDisplayElement(this.canvas); + this._jsPlumb.initialized = true; + } + var x = this.anchorPoint[0] - (this._jsPlumb.widthToUse / 2), + y = this.anchorPoint[1] - (this._jsPlumb.heightToUse / 2); + jsPlumbUtil.sizeElement(this.canvas, x, y, this._jsPlumb.widthToUse, this._jsPlumb.heightToUse); + } + }; + + this.paint = function(style, anchor) { + if (this._jsPlumb != null) { // may have been deleted + if (this._jsPlumb.ready) { + this.actuallyPaint(style, anchor); + } + else { + window.setTimeout(function() { + this.paint(style, anchor); + }.bind(this), 200); + } + } + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.Image, [ DOMElementEndpoint, jsPlumb.Endpoints.AbstractEndpoint ], { + cleanup : function() { + this._jsPlumb.deleted = true; + jsPlumbUtil.removeElement(this.canvas); + this.canvas = null; + } + }); + + /* + * 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 _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]; + }; + + this.canvas = document.createElement("div"); + this.canvas.style.display = "block"; + this.canvas.style.width = "1px"; + this.canvas.style.height = "1px"; + this.canvas.style.background = "transparent"; + this.canvas.style.position = "absolute"; + this.canvas.className = this._jsPlumb.endpointClass; + jsPlumb.appendElement(this.canvas, params.parent); + + this.paint = function(style, anchor) { + jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.Blank, [jsPlumb.Endpoints.AbstractEndpoint, DOMElementEndpoint], { + cleanup:function() { + if (this.canvas) { + this.canvas.parentNode.removeChild(this.canvas); + } + } + }); + + /* + * 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 _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) { + this.visible = true; + 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.; + }; + AbstractOverlay.prototype = { + cleanup:function() { + this.component = null; + this.canvas = null; + this.endpointLoc = null; + }, + setVisible : function(val) { + this.visible = val; + // TODO this is only actually necessary for canvas. so, the Canvas overlay should + // override setVisible and call this. + //this.component.repaint(); + }, + isVisible : function() { return this.visible; }, + hide : function() { this.setVisible(false); }, + show : function() { this.setVisible(true); }, + + incrementLocation : function(amount) { + this.loc += amount; + this.component.repaint(); + }, + setLocation : function(l) { + this.loc = l; + this.component.repaint(); + }, + getLocation : function() { + return this.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 _ju = jsPlumbUtil, _jg = jsPlumbGeom; + + 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 (_ju.isString(this.loc) || this.loc > 1 || this.loc < 0) { + var l = parseInt(this.loc, 10), + fromLoc = this.loc < 0 ? 1 : 0; + hxy = component.pointAlongPathFrom(fromLoc, l, false); + mid = component.pointAlongPathFrom(fromLoc, l - (direction * this.length / 2), false); + txy = _jg.pointOnLine(hxy, mid, this.length); + } + else if (this.loc == 1) { + hxy = component.pointOnPath(this.loc); + mid = component.pointAlongPathFrom(this.loc, -(this.length)); + txy = _jg.pointOnLine(hxy, mid, this.length); + + if (direction == -1) { + var _ = txy; + txy = hxy; + hxy = _; + } + } + else if (this.loc === 0) { + txy = component.pointOnPath(this.loc); + mid = component.pointAlongPathFrom(this.loc, this.length); + hxy = _jg.pointOnLine(txy, mid, this.length); + if (direction == -1) { + var __ = txy; + txy = hxy; + hxy = __; + } + } + else { + hxy = component.pointAlongPathFrom(this.loc, direction * this.length / 2); + mid = component.pointOnPath(this.loc); + txy = _jg.pointOnLine(hxy, mid, this.length); + } + + tail = _jg.perpendicularLineTo(hxy, txy, this.width); + cxy = _jg.pointOnLine(hxy, txy, foldback * this.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}; + }; + }; + jsPlumbUtil.extend(jsPlumb.Overlays.Arrow, AbstractOverlay); + + /* + * 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"; + }; + jsPlumbUtil.extend(jsPlumb.Overlays.PlainArrow, jsPlumb.Overlays.Arrow); + + /* + * 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"; + }; + jsPlumbUtil.extend(jsPlumb.Overlays.Diamond, jsPlumb.Overlays.Arrow); + + var _getDimensions = function(component) { + if (component._jsPlumb.cachedDimensions == null) + component._jsPlumb.cachedDimensions = component.getDimensions(); + return component._jsPlumb.cachedDimensions; + }; + + // 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 jpcl = jsPlumb.CurrentLibrary; + this.id = params.id; + this._jsPlumb.div = null; + this._jsPlumb.initialised = false; + this._jsPlumb.component = params.component; + this._jsPlumb.cachedDimensions = null; + this._jsPlumb.create = params.create; + + this.getElement = function() { + if (this._jsPlumb.div == null) { + var div = this._jsPlumb.div = jpcl.getDOMElement(this._jsPlumb.create(this._jsPlumb.component)); + div.style.position = "absolute"; + var clazz = params._jsPlumb.overlayClass + " " + + (this.cssClass ? this.cssClass : + params.cssClass ? params.cssClass : ""); + div.className = clazz; + this._jsPlumb.instance.appendElement(div, this._jsPlumb.component.parent); + this._jsPlumb.instance.getId(div); + this.attachListeners(div, this); + this.canvas = div; + } + return this._jsPlumb.div; + }; + + /* + this.paint = function(p, containerExtents) { + if (!this._jsPlumb.initialised) { + this.getElement(); + p.component.appendDisplayElement(this._jsPlumb.div); + this.attachListeners(this._jsPlumb.div, p.component); + this._jsPlumb.initialised = true; + } + this._jsPlumb.div.style.left = (p.component.x + p.d.minx) + "px"; + this._jsPlumb.div.style.top = (p.component.y + p.d.miny) + "px"; + };*/ + + this.draw = function(component, currentConnectionPaintStyle) { + var td = _getDimensions(this); + if (td != null && td.length == 2) { + var cxy = {x:0,y:0}; + if (component.pointOnPath) { + var loc = this.loc, absolute = false; + if (jsPlumbUtil.isString(this.loc) || this.loc < 0 || this.loc > 1) { + loc = parseInt(this.loc, 10); + absolute = true; + } + cxy = component.pointOnPath(loc, absolute); // a connection + } + else { + var locToUse = this.loc.constructor == Array ? this.loc : this.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}; + }; + }; + jsPlumbUtil.extend(AbstractDOMOverlay, [jsPlumb.DOMElementComponent, AbstractOverlay], { + getDimensions : function() { + return jsPlumb.CurrentLibrary.getSize(jsPlumb.CurrentLibrary.getElementObject(this.getElement())); + }, + setVisible : function(state) { + this._jsPlumb.div.style.display = state ? "block" : "none"; + }, + /* + * 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. + */ + clearCachedDimensions : function() { + this._jsPlumb.cachedDimensions = null; + }, + cleanup : function() { + if (this._jsPlumb.div != null) + jsPlumb.CurrentLibrary.removeElement(this._jsPlumb.div); + }, + computeMaxSize : function() { + var td = _getDimensions(this); + return Math.max(td[0], td[1]); + }, + reattachListeners : function(connector) { + if (this._jsPlumb.div) { + this.reattachListenersForElement(this._jsPlumb.div, this, connector); + } + }, + paint : function(p, containerExtents) { + if (!this._jsPlumb.initialised) { + this.getElement(); + p.component.appendDisplayElement(this._jsPlumb.div); + this.attachListeners(this._jsPlumb.div, p.component); + this._jsPlumb.initialised = true; + } + this._jsPlumb.div.style.left = (p.component.x + p.d.minx) + "px"; + this._jsPlumb.div.style.top = (p.component.y + p.d.miny) + "px"; + } + }); + + /* + * 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); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.Custom, AbstractDOMOverlay); + + 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 = jsPlumbGeom.pointOnLine(head, mid, self.length), + tailLine = jsPlumbGeom.perpendicularLineTo(head, tail, 40), + headLine = jsPlumbGeom.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 + + */ + /* + * 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) { + this.labelStyle = params.labelStyle; + + var labelWidth = null, labelHeight = null, labelText = null, labelPadding = null; + this.cssClass = this.labelStyle != null ? this.labelStyle.cssClass : null; + var p = jsPlumb.extend({ + create : function() { + return document.createElement("div"); + }}, params); + jsPlumb.Overlays.Custom.call(this, p); + this.type = "Label"; + this.label = params.label || ""; + this.labelText = null; + if (this.labelStyle) { + var el = this.getElement(); + this.labelStyle.font = this.labelStyle.font || "12px sans-serif"; + el.style.font = this.labelStyle.font; + el.style.color = this.labelStyle.color || "black"; + if (this.labelStyle.fillStyle) el.style.background = this.labelStyle.fillStyle; + if (this.labelStyle.borderWidth > 0) { + var dStyle = this.labelStyle.borderStyle ? this.labelStyle.borderStyle : "black"; + el.style.border = this.labelStyle.borderWidth + "px solid " + dStyle; + } + if (this.labelStyle.padding) el.style.padding = this.labelStyle.padding; + } + + }; + jsPlumbUtil.extend(jsPlumb.Overlays.Label, jsPlumb.Overlays.Custom, { + cleanup:function() { + this.div = null; + this.label = null; + this.labelText = null; + this.cssClass = null; + this.labelStyle = null; + }, + getLabel : function() { + return this.label; + }, + /* + * 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. + */ + setLabel : function(l) { + this.label = l; + this.labelText = null; + this.clearCachedDimensions(); + this.update(); + this.component.repaint(); + }, + getDimensions : function() { + this.update(); + return AbstractDOMOverlay.prototype.getDimensions.apply(this, arguments); + }, + update : function() { + if (typeof this.label == "function") { + var lt = this.label(this); + this.getElement().innerHTML = lt.replace(/\r\n/g, "<br/>"); + } + else { + if (this.labelText == null) { + this.labelText = this.label; + this.getElement().innerHTML = this.labelText.replace(/\r\n/g, "<br/>"); + } + } + } + }); + + // ********************************* END OF OVERLAY DEFINITIONS *********************************************************************** + +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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(a)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). + * alwaysRespectStubs - defaults to false. whether or not the connectors should always draw the stub, or, if the two elements + are in close proximity to each other (closer than the sum of the two stubs), to adjust the stubs. + */ + var Flowchart = function(params) { + this.type = "Flowchart"; + params = params || {}; + params.stub = params.stub == null ? 30 : params.stub; + var self = this, + _super = jsPlumb.Connectors.AbstractConnector.apply(this, arguments), + midpoint = params.midpoint == null ? 0.5 : params.midpoint, + points = [], segments = [], + grid = params.grid, + alwaysRespectStubs = params.alwaysRespectStubs, + userSuppliedSegments = null, + lastx = null, lasty = null, lastOrientation, + cornerRadius = params.cornerRadius != null ? params.cornerRadius : 0, + sgn = function(n) { return n < 0 ? -1 : n === 0 ? 0 : 1; }, + /** + * helper method to add a segment. + */ + addSegment = function(segments, x, y, paintInfo) { + if (lastx == x && lasty == y) return; + var lx = lastx == null ? paintInfo.sx : lastx, + ly = lasty == null ? paintInfo.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(conn, 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(conn, "Straight", { + x1:current[0], y1:current[1], x2:current[2], y2:current[3] + }); + + _super.addSegment(conn, "Arc", { + r:radiusToUse, + x1:current[2], + y1:current[3], + x2:next[0], + y2:next[1], + cx:cx, + cy:cy, + ac:ac + }); + } + else { + // dx + dy are used to adjust for line width. + var dx = (current[2] == current[0]) ? 0 : (current[2] > current[0]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2), + dy = (current[3] == current[1]) ? 0 : (current[3] > current[1]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2); + _super.addSegment(conn, "Straight", { + x1:current[0]- dx, y1:current[1]-dy, x2:current[2] + dx, y2:current[3] + dy + }); + } + current = next; + } + // last segment + _super.addSegment(conn, "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(this, 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); + + var findClearedLine = function(start, mult, anchorPos, dimension) { + return start + (mult * (( 1 - anchorPos) * dimension) + _super.maxStub); + }, + orientations = { x:[ 0, 1 ], y:[ 1, 0 ] }, + commonStubCalculator = function(axis) { + return [ paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY ]; + }, + stubCalculators = { + perpendicular:commonStubCalculator, + orthogonal:commonStubCalculator, + opposite:function(axis) { + var pi = paintInfo, + idx = axis == "x" ? 0 : 1, + areInProximity = { + "x":function() { + return ( (pi.so[idx] == 1 && ( + ( (pi.startStubX > pi.endStubX) && (pi.tx > pi.startStubX) ) || + ( (pi.sx > pi.endStubX) && (pi.tx > pi.sx))))) || + + ( (pi.so[idx] == -1 && ( + ( (pi.startStubX < pi.endStubX) && (pi.tx < pi.startStubX) ) || + ( (pi.sx < pi.endStubX) && (pi.tx < pi.sx))))); + }, + "y":function() { + return ( (pi.so[idx] == 1 && ( + ( (pi.startStubY > pi.endStubY) && (pi.ty > pi.startStubY) ) || + ( (pi.sy > pi.endStubY) && (pi.ty > pi.sy))))) || + + ( (pi.so[idx] == -1 && ( + ( (pi.startStubY < pi.endStubY) && (pi.ty < pi.startStubY) ) || + ( (pi.sy < pi.endStubY) && (pi.ty < pi.sy))))); + } + }; + + if (!alwaysRespectStubs && areInProximity[axis]()) { + return { + "x":[(paintInfo.sx + paintInfo.tx) / 2, paintInfo.startStubY, (paintInfo.sx + paintInfo.tx) / 2, paintInfo.endStubY], + "y":[paintInfo.startStubX, (paintInfo.sy + paintInfo.ty) / 2, paintInfo.endStubX, (paintInfo.sy + paintInfo.ty) / 2] + }[axis]; + } + else { + return [ paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY ]; + } + } + }, + lineCalculators = { + perpendicular : function(axis, ss, oss, es, oes) { + var pi = paintInfo, + 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:[ [ pi.startStubX, pi.endStubX ] , null, [ pi.endStubX, pi.startStubX ] ], + y:[ [ pi.startStubY, pi.endStubY ] , null, [ pi.endStubY, pi.startStubY ] ] + }, + midLines = { + x:[ [ midx, pi.startStubY ], [ midx, pi.endStubY ] ], + y:[ [ pi.startStubX, midy ], [ pi.endStubX, midy ] ] + }, + linesToEnd = { + x:[ [ pi.endStubX, pi.startStubY ] ], + y:[ [ pi.startStubX, pi.endStubY ] ] + }, + startToEnd = { + x:[ [ pi.startStubX, pi.endStubY ], [ pi.endStubX, pi.endStubY ] ], + y:[ [ pi.endStubX, pi.startStubY ], [ pi.endStubX, pi.endStubY ] ] + }, + startToMidToEnd = { + x:[ [ pi.startStubX, midy ], [ pi.endStubX, midy ], [ pi.endStubX, pi.endStubY ] ], + y:[ [ midx, pi.startStubY ], [ midx, pi.endStubY ], [ pi.endStubX, pi.endStubY ] ] + }, + otherStubs = { + x:[ pi.startStubY, pi.endStubY ], + y:[ pi.startStubX, pi.endStubX ] + }, + soIdx = orientations[axis][0], toIdx = orientations[axis][1], + _so = pi.so[soIdx] + 1, + _to = pi.to[toIdx] + 1, + otherFlipped = (pi.to[toIdx] == -1 && (otherStubs[axis][1] < otherStubs[axis][0])) || (pi.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 (pi.segment == segmentIndexes[3] || (pi.segment == segmentIndexes[2] && otherFlipped)) { + return midLines[axis]; + } + else if (pi.segment == segmentIndexes[2] && stub2 < stub1) { + return linesToEnd[axis]; + } + else if ((pi.segment == segmentIndexes[2] && stub2 >= stub1) || (pi.segment == segmentIndexes[1] && !otherFlipped)) { + return startToMidToEnd[axis]; + } + else if (pi.segment == segmentIndexes[0] || (pi.segment == segmentIndexes[1] && otherFlipped)) { + return startToEnd[axis]; + } + }, + orthogonal : function(axis, startStub, otherStartStub, endStub, otherEndStub) { + var pi = paintInfo, + extent = { + "x":pi.so[0] == -1 ? Math.min(startStub, endStub) : Math.max(startStub, endStub), + "y":pi.so[1] == -1 ? Math.min(startStub, endStub) : Math.max(startStub, endStub) + }[axis]; + + return { + "x":[ [ extent, otherStartStub ],[ extent, otherEndStub ], [ endStub, otherEndStub ] ], + "y":[ [ otherStartStub, extent ], [ otherEndStub, extent ], [ otherEndStub, endStub ] ] + }[axis]; + }, + opposite : function(axis, ss, oss, es, oes) { + var pi = paintInfo, + otherAxis = {"x":"y","y":"x"}[axis], + dim = {"x":"height","y":"width"}[axis], + comparator = pi["is" + axis.toUpperCase() + "GreaterThanStubTimes2"]; + + if (params.sourceEndpoint.elementId == params.targetEndpoint.elementId) { + var _val = oss + ((1 - params.sourceEndpoint.anchor[otherAxis]) * params.sourceInfo[dim]) + _super.maxStub; + return { + "x":[ [ ss, _val ], [ es, _val ] ], + "y":[ [ _val, ss ], [ _val, es ] ] + }[axis]; + + } + else if (!comparator || (pi.so[idx] == 1 && ss > es) || (pi.so[idx] == -1 && ss < es)) { + return { + "x":[[ ss, midy ], [ es, midy ]], + "y":[[ midx, ss ], [ midx, es ]] + }[axis]; + } + else if ((pi.so[idx] == 1 && ss < es) || (pi.so[idx] == -1 && ss > es)) { + return { + "x":[[ midx, pi.sy ], [ midx, pi.ty ]], + "y":[[ pi.sx, midy ], [ pi.tx, midy ]] + }[axis]; + } + } + }; + + var stubs = stubCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis), + idx = paintInfo.sourceAxis == "x" ? 0 : 1, + oidx = paintInfo.sourceAxis == "x" ? 1 : 0, + ss = stubs[idx], + oss = stubs[oidx], + es = stubs[idx + 2], + oes = stubs[oidx + 2]; + + // add the start stub segment. + addSegment(segments, stubs[0], stubs[1], paintInfo); + + // compute the rest of the line + var p = lineCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis, ss, oss, es, oes); + if (p) { + for (var i = 0; i < p.length; i++) { + addSegment(segments, p[i][0], p[i][1], paintInfo); + } + } + + // line to end stub + addSegment(segments, stubs[2], stubs[3], paintInfo); + + // end stub to end + addSegment(segments, paintInfo.tx, paintInfo.ty, paintInfo); + + writeSegments(this, 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]); + } + }; + }; + + jsPlumbUtil.extend(Flowchart, jsPlumb.Connectors.AbstractConnector); + jsPlumb.registerConnectorType(Flowchart, "Flowchart"); +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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(a)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 = [], xInt, yInt; + + // try top face + // the equation of the top face is y = (0 * x) + b; y = b. + 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 + yInt = (this.m * (x + w)) + this.b; + if (yInt >= y && yInt <= (y + h)) results.push([ (yInt - this.b) / this.m, yInt ]); + + // bottom face + 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 + 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. + */ + var 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(this, "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(this, "Arc", { + loopback:true, + 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 + }); + } + }; + }; + jsPlumb.registerConnectorType(StateMachine, "StateMachine"); +})(); + +/* + // 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]); +// } +// } + // } + // } + //} + */ + +;(function() { + + var 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) { + // 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 = sourceEndpoint.anchor.getOrientation(sourceEndpoint), + too = targetEndpoint.anchor.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), + _CP2 = self._findControlPoint([_tx, _ty], tp, sp, p.targetEndpoint, p.sourceEndpoint); + + _super.addSegment(this, "Bezier", { + x1:_sx, y1:_sy, x2:_tx, y2:_ty, + cp1x:_CP[0], cp1y:_CP[1], cp2x:_CP2[0], cp2y:_CP2[1] + }); + }; + }; + + jsPlumb.registerConnectorType(Bezier, "Bezier"); + +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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.2. + * 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() { + + +// ********************************* 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 = window.CanvasMouseAdapter = function() { + var self = this; + this.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; + }; + }; + jsPlumbUtil.extend(CanvasMouseAdapter, [ jsPlumb.jsPlumbUIComponent, jsPlumbUtil.EventGenerator ]); + + var _newCanvas = function(params) { + var canvas = document.createElement("canvas"); + params._jsPlumb.instance.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.instance.getId(canvas, params.uuid); + if (params.tooltip) canvas.setAttribute("title", params.tooltip); + + return canvas; + }; + + var CanvasComponent = window.CanvasComponent = function(params) { + CanvasMouseAdapter.apply(this, arguments); + + var displayElements = [ ]; + this.getDisplayElements = function() { return displayElements; }; + this.appendDisplayElement = function(el) { displayElements.push(el); }; + }; + jsPlumbUtil.extend(CanvasComponent, CanvasMouseAdapter, { + setVisible:function(state) { + this.canvas.style.display = state ? "block" : "none"; + } + }); + + 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, dx, dy) { + ({ + "Straight":function(segment, ctx, style, dx, dy) { + var d = segment.params; + ctx.save(); + maybeMakeGradient(ctx, style, function() { return ctx.createLinearGradient(d.x1, d.y1, d.x2, d.y2); }); + ctx.beginPath(); + ctx.translate(dx, dy); + 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(); + + ctx.restore(); + }, + "Bezier":function(segment, ctx, style, dx, dy) { + var d = segment.params; + ctx.save(); + maybeMakeGradient(ctx, style, function() { return ctx.createLinearGradient(d.x2 + dx, d.y2 + dy, d.x1 + dx, d.y1 + dy); }); + ctx.beginPath(); + ctx.translate(dx, dy); + ctx.moveTo(d.x1, d.y1); + ctx.bezierCurveTo(d.cp1x, d.cp1y, d.cp2x, d.cp2y, d.x2, d.y2); + ctx.stroke(); + ctx.restore(); + }, + "Arc":function(segment, ctx, style, dx, dy) { + var d = segment.params; + ctx.save(); + ctx.beginPath(); + ctx.translate(dx, dy); + ctx.arc(d.cx, d.cy, d.r, segment.startAngle, segment.endAngle, d.ac); + ctx.stroke(); + ctx.restore(); + } + })[segment.type](segment, ctx, style, dx, dy); + }; + + /** + * Class:CanvasConnector + * Superclass for Canvas Connector renderers. + */ + var CanvasConnector = jsPlumb.ConnectorRenderers.canvas = function(params) { + CanvasComponent.apply(this, arguments); + + var _paintOneStyle = function(aStyle, dx, dy) { + this.ctx.save(); + jsPlumb.extend(this.ctx, aStyle); + + var segments = this.getSegments(); + for (var i = 0; i < segments.length; i++) { + segmentRenderer(segments[i], this.ctx, aStyle, dx, dy); + } + this.ctx.restore(); + }.bind(this); + + var clazz = this._jsPlumb.instance.connectorClass + " " + (params.cssClass || ""); + this.canvas = _newCanvas({ + "class":clazz, + _jsPlumb:this._jsPlumb, + parent:params.parent + }); + this.ctx = this.canvas.getContext("2d"); + + this.appendDisplayElement(this.canvas); + + this.paint = function(style, anchor, extents) { + if (style != null) { + + var xy = [ this.x, this.y ], wh = [ this.w, this.h ], p, + dx = 0, dy = 0; + + if (extents != null) { + if (extents.xmin < 0) { + xy[0] += extents.xmin; + dx = -extents.xmin; + } + if (extents.ymin < 0) { + xy[1] += extents.ymin; + dy = -extents.ymin; + } + wh[0] = extents.xmax + ((extents.xmin < 0) ? -extents.xmin : 0); + wh[1] = extents.ymax + ((extents.ymin < 0) ? -extents.ymin : 0); + } + + this.translateX = dx; + this.translateY = dy; + + jsPlumbUtil.sizeElement(this.canvas, xy[0], xy[1], wh[0], wh[1]); + + if (style.outlineColor != null) { + var outlineWidth = style.outlineWidth || 1, + outlineStrokeWidth = style.lineWidth + (2 * outlineWidth), + outlineStyle = { + strokeStyle:style.outlineColor, + lineWidth:outlineStrokeWidth + }; + _paintOneStyle(outlineStyle, dx, dy); + } + _paintOneStyle(style, dx, dy); + } + }; + }; + jsPlumbUtil.extend(CanvasConnector, CanvasComponent); + + + /** + * Class:CanvasEndpoint + * Superclass for Canvas Endpoint renderers. + */ + var CanvasEndpoint = function(params) { + CanvasComponent.apply(this, arguments); + var clazz = this._jsPlumb.instance.endpointClass + " " + (params.cssClass || ""), + canvasParams = { + "class":clazz, + _jsPlumb:this._jsPlumb, + parent:params.parent, + tooltip:self.tooltip + }; + this.canvas = _newCanvas(canvasParams); + this.ctx = this.canvas.getContext("2d"); + + this.appendDisplayElement(this.canvas); + + this.paint = function(style, anchor, extents) { + jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); + if (style.outlineColor != null) { + var outlineWidth = style.outlineWidth || 1, + outlineStrokeWidth = style.lineWidth + (2 * outlineWidth); + var outlineStyle = { + strokeStyle:style.outlineColor, + lineWidth:outlineStrokeWidth + }; + } + + this._paint.apply(this, arguments); + }; + }; + jsPlumbUtil.extend(CanvasEndpoint, CanvasComponent); + + 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, 10); } + catch(e) { + if (value.substring(value.length - 1) == '%') + return parseInt(value.substring(0, value - 1), 10); + } + }, + calculateAdjustments = function(gradient) { + var offsetAdjustment = self.defaultOffset, innerRadius = self.defaultInnerRadius; + if (gradient.offset) offsetAdjustment = parseValue(gradient.offset); + if (gradient.innerRadius) innerRadius = parseValue(gradient.innerRadius); + return [offsetAdjustment, innerRadius]; + }; + this._paint = function(style) { + if (style != null) { + var ctx = self.canvas.getContext('2d'), + orientation = params.endpoint.anchor.getOrientation(params.endpoint); + + 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(self.radius, self.radius, self.radius, self.radius + xAdjust, self.radius + 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.translate(dx, dy); + ctx.arc(self.radius, self.radius, self.radius, 0, Math.PI*2, true); + ctx.closePath(); + if (style.fillStyle || style.gradient) ctx.fill(); + if (style.strokeStyle) ctx.stroke(); + } + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Dot, [ jsPlumb.Endpoints.Dot, CanvasEndpoint ]); + + jsPlumb.Endpoints.canvas.Rectangle = function(params) { + + var self = this; + jsPlumb.Endpoints.Rectangle.apply(this, arguments); + CanvasEndpoint.apply(this, arguments); + + this._paint = function(style) { + + var ctx = self.canvas.getContext("2d"), + orientation = params.endpoint.anchor.getOrientation(params.endpoint); + + 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 ? self.h : orientation[1] === 0 ? self.h / 2 : 0; + var y2 = orientation[1] == -1 ? self.h : orientation[1] === 0 ? self.h / 2 : 0; + var x1 = orientation[0] == 1 ? self.w : orientation[0] === 0 ? self.w / 2 : 0; + var x2 = orientation[0] == -1 ? self.w : orientation[0] === 0 ? self.w / 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, self.w, self.h); + ctx.closePath(); + if (style.fillStyle || style.gradient) ctx.fill(); + if (style.strokeStyle) ctx.stroke(); + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Rectangle, [ jsPlumb.Endpoints.Rectangle, CanvasEndpoint ]); + + jsPlumb.Endpoints.canvas.Triangle = function(params) { + + var self = this; + jsPlumb.Endpoints.Triangle.apply(this, arguments); + CanvasEndpoint.apply(this, arguments); + + this._paint = function(style) { + var ctx = self.canvas.getContext('2d'), + offsetX = 0, offsetY = 0, angle = 0, + orientation = params.endpoint.anchor.getOrientation(params.endpoint); + + if( orientation[0] == 1 ) { + offsetX = self.width; + offsetY = self.height; + angle = 180; + } + if( orientation[1] == -1 ) { + offsetX = self.width; + angle = 90; + } + if( orientation[1] == 1 ) { + offsetY = self.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(self.width/2, self.height/2); + ctx.lineTo(0, self.height); + ctx.closePath(); + if (style.fillStyle || style.gradient) ctx.fill(); + if (style.strokeStyle) ctx.stroke(); + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Triangle, [ jsPlumb.Endpoints.Triangle, CanvasEndpoint ]); + + /* + * 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; + +// ********************************* 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); + }; + jsPlumbUtil.extend(CanvasOverlay, jsPlumb.jsPlumbUIComponent, { + setVisible : function(state) { + this.visible = state; + this.component.repaint(); + } + }); + + var AbstractCanvasArrowOverlay = function(superclass, originalArgs) { + superclass.apply(this, originalArgs); + CanvasOverlay.apply(this, originalArgs); + this.paint = function(params, containerExtents) { + var ctx = params.component.ctx, d = params.d; + + if (d) { + ctx.save(); + ctx.lineWidth = params.lineWidth; + ctx.beginPath(); + ctx.translate(params.component.translateX, params.component.translateY); + 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 (params.strokeStyle) { + ctx.strokeStyle = params.strokeStyle; + ctx.stroke(); + } + if (params.fillStyle) { + ctx.fillStyle = params.fillStyle; + ctx.fill(); + } + ctx.restore(); + } + }; + }; + + jsPlumb.Overlays.canvas.Arrow = function() { + AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.canvas.Arrow, [ jsPlumb.Overlays.Arrow, CanvasOverlay ] ); + + jsPlumb.Overlays.canvas.PlainArrow = function() { + AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.canvas.PlainArrow, [ jsPlumb.Overlays.PlainArrow, CanvasOverlay ] ); + + jsPlumb.Overlays.canvas.Diamond = function() { + AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.canvas.Diamond, [ jsPlumb.Overlays.Diamond, CanvasOverlay ] ); +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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.instance.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 pointerEventsSpec = params.pointerEventsSpec || "all", renderer = {}; + + jsPlumb.jsPlumbUIComponent.apply(this, params.originalArgs); + this.canvas = null;this.path = null;this.svg = null; + + var clazz = params.cssClass + " " + (params.originalArgs[0].cssClass || ""), + svgParams = { + "style":"", + "width":0, + "height":0, + "pointer-events":pointerEventsSpec, + "position":"absolute" + }; + this.svg = _node("svg", svgParams); + if (params.useDivWrapper) { + this.canvas = document.createElement("div"); + this.canvas.style.position = "absolute"; + jsPlumbUtil.sizeElement(this.canvas,0,0,1,1); + this.canvas.className = clazz; + } + else { + _attr(this.svg, { "class":clazz }); + this.canvas = this.svg; + } + + params._jsPlumb.appendElement(this.canvas, params.originalArgs[0].parent); + if (params.useDivWrapper) this.canvas.appendChild(this.svg); + + // TODO this displayElement stuff is common between all components, across all + // renderers. would be best moved to jsPlumbUIComponent. + var displayElements = [ this.canvas ]; + this.getDisplayElements = function() { + return displayElements; + }; + + this.appendDisplayElement = function(el) { + displayElements.push(el); + }; + + this.paint = function(style, anchor, extents) { + if (style != null) { + + var xy = [ this.x, this.y ], wh = [ this.w, this.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) { + jsPlumbUtil.sizeElement(this.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(this.svg, { + "style":p, + "width": wh[0], + "height": wh[1] + }); + } + }; + + return { + renderer:renderer + }; + }; + jsPlumbUtil.extend(SvgComponent, jsPlumb.jsPlumbUIComponent, { + cleanup:function() { + jsPlumbUtil.removeElement(this.canvas); + this.svg = null; + this.canvas = null; + this.path = null; + }, + setVisible:function(v) { + if (this.canvas) { + this.canvas.style.display = v ? "block" : "none"; + } + if (this.bgCanvas) { + this.bgCanvas.style.display = v ? "block" : "none"; + } + } + }); + + /* + * 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 + } ]); + + /*this.pointOnPath = function(location, absolute) { + if (!self.path) return [0,0]; + var p = absolute ? location : location * self.path.getTotalLength(); + return self.path.getPointAtLength(p); + };*/ + + _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 (this.bgPath) this.reattachListenersForElement(this.bgPath, this); + if (this.path) this.reattachListenersForElement(this.path, this); + }; + }; + jsPlumbUtil.extend(jsPlumb.ConnectorRenderers.svg, SvgComponent); + +// ******************************* 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 _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 (this.node == null) { + this.node = this.makeNode(s); + this.svg.appendChild(this.node); + this.attachListeners(this.node, this); + } + else if (this.updateNode != null) { + this.updateNode(this.node); + } + _applyStyles(this.svg, this.node, s, [ this.x, this.y, this.w, this.h ], this); + _pos(this.node, [ this.x, this.y ]); + }.bind(this); + + }; + jsPlumbUtil.extend(SvgEndpoint, SvgComponent, { + reattachListeners : function() { + if (this.node) this.reattachListenersForElement(this.node, this); + } + }); + + /* + * 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.radius + }); + }; + this.updateNode = function(node) { + _attr(node, { + "cx":this.w / 2, + "cy":this.h / 2, + "r":this.radius + }); + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.svg.Dot, [jsPlumb.Endpoints.Dot, SvgEndpoint]); + + /* + * 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 + }); + }; + this.updateNode = function(node) { + _attr(node, { + "width":this.w, + "height":this.h + }); + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.svg.Rectangle, [jsPlumb.Endpoints.Rectangle, SvgEndpoint]); + + /* + * 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; + this.path = null; + this.paint = function(params, containerExtents) { + // only draws on connections, not endpoints. + if (params.component.svg && containerExtents) { + if (this.path == null) { + this.path = _node("path", { + "pointer-events":"all" + }); + params.component.svg.appendChild(this.path); + + this.attachListeners(this.path, params.component); + this.attachListeners(this.path, this); + } + 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(this.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 (this.path) this.reattachListenersForElement(this.path, this); + }; + }; + jsPlumbUtil.extend(AbstractSvgArrowOverlay, [jsPlumb.jsPlumbUIComponent, jsPlumb.Overlays.AbstractOverlay], { + cleanup : function() { + if (this.path != null) jsPlumb.CurrentLibrary.removeElement(this.path); + }, + setVisible:function(v) { + if(this.path != null) (this.path.style.display = (v ? "block" : "none")); + } + }); + + jsPlumb.Overlays.svg.Arrow = function() { + AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.svg.Arrow, [ jsPlumb.Overlays.Arrow, AbstractSvgArrowOverlay ]); + + jsPlumb.Overlays.svg.PlainArrow = function() { + AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.svg.PlainArrow, [ jsPlumb.Overlays.PlainArrow, AbstractSvgArrowOverlay ]); + + jsPlumb.Overlays.svg.Diamond = function() { + AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.svg.Diamond, [ jsPlumb.Overlays.Diamond, AbstractSvgArrowOverlay ]); + + // 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; + }; + }; + jsPlumbUtil.extend(jsPlumb.Overlays.svg.GuideLines, jsPlumb.Overlays.GuideLines); +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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-b… + // http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-… + + 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-… + // 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. + //jsPlumb.CurrentLibrary.getDOMElement(container).appendChild(g); + //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-… + //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.instance); + self.opacityNodes.fill = _node("fill", [0,0,1,1], {opacity:"0.0"}, vml, self._jsPlumb.instance); + }; + 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); + }; + }; + jsPlumbUtil.extend(VmlComponent, jsPlumb.jsPlumbUIComponent, { + cleanup:function() { + if (this.bgCanvas) jsPlumbUtil.removeElement(this.bgCanvas); + jsPlumbUtil.removeElement(this.canvas); + } + }); + + /* + * Base class for Vml connectors. extends VmlComponent. + */ + var VmlConnector = jsPlumb.ConnectorRenderers.vml = function(params) { + this.strokeNode = null; + this.canvas = null; + VmlComponent.apply(this, arguments); + var clazz = this._jsPlumb.instance.connectorClass + (params.cssClass ? (" " + params.cssClass) : ""); + this.paint = function(style) { + if (style !== null) { + + // we need to be at least 1 pixel in each direction, because otherwise coordsize gets set to + // 0 and overlays cannot paint. + this.w = Math.max(this.w, 1); + this.h = Math.max(this.h, 1); + + var segments = this.getSegments(), p = { "path":"" }, + d = [this.x, this.y, this.w, this.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 (this.bgCanvas == null) { + p["class"] = clazz; + p.coordsize = (d[2] * scale) + "," + (d[3] * scale); + this.bgCanvas = _node("shape", d, p, params.parent, this._jsPlumb.instance, true); + _pos(this.bgCanvas, d); + this.appendDisplayElement(this.bgCanvas, true); + this.attachListeners(this.bgCanvas, this); + this.initOpacityNodes(this.bgCanvas, ["stroke"]); + } + else { + p.coordsize = (d[2] * scale) + "," + (d[3] * scale); + _pos(this.bgCanvas, d); + _atts(this.bgCanvas, p); + } + + _applyStyles(this.bgCanvas, outlineStyle, this); + } + //*/ + + if (this.canvas == null) { + p["class"] = clazz; + p.coordsize = (d[2] * scale) + "," + (d[3] * scale); + this.canvas = _node("shape", d, p, params.parent, this._jsPlumb.instance, 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 + + this.appendDisplayElement(this.canvas, true); + this.attachListeners(this.canvas, this); + this.initOpacityNodes(this.canvas, ["stroke"]); + } + else { + p.coordsize = (d[2] * scale) + "," + (d[3] * scale); + _pos(this.canvas, d); + _atts(this.canvas, p); + } + + _applyStyles(this.canvas, style, this, this._jsPlumb.instance); + } + }; + + }; + jsPlumbUtil.extend(VmlConnector, VmlComponent, { + reattachListeners : function() { + if (this.canvas) this.reattachListenersForElement(this.canvas, this); + }, + setVisible:function(v) { + if (this.canvas) { + this.canvas.style.display = v ? "block" : "none"; + } + if (this.bgCanvas) { + this.bgCanvas.style.display = v ? "block" : "none"; + } + } + }); + + /* + * + * Base class for Vml Endpoints. extends VmlComponent. + * + */ + var VmlEndpoint = window.VmlEndpoint = function(params) { + VmlComponent.apply(this, arguments); + this._jsPlumb.vml = null;//, opacityStrokeNode = null, opacityFillNode = null; + this.canvas = document.createElement("div"); + this.canvas.style.position = "absolute"; + this._jsPlumb.clazz = this._jsPlumb.instance.endpointClass + (params.cssClass ? (" " + params.cssClass) : ""); + + // TODO vml endpoint adds class to VML at constructor time. but the addClass method adds VML + // to the enclosing DIV. what to do? seems like it would be better to just target the div. + // HOWEVER...vml connection has no containing div. why not? it feels like it should. + + //var group = _getGroup(params.parent); + //group.appendChild(self.canvas); + params._jsPlumb.appendElement(this.canvas, params.parent); + + this.paint = function(style, anchor) { + var p = { }, vml = this._jsPlumb.vml; + + jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); + if (this._jsPlumb.vml == null) { + p["class"] = this._jsPlumb.clazz; + vml = this._jsPlumb.vml = this.getVml([0,0, this.w, this.h], p, anchor, this.canvas, this._jsPlumb.instance); + this.attachListeners(vml, this); + + this.appendDisplayElement(vml, true); + this.appendDisplayElement(this.canvas, true); + + this.initOpacityNodes(vml, ["fill"]); + } + else { + _pos(vml, [0,0, this.w, this.h]); + _atts(vml, p); + } + + _applyStyles(vml, style, this); + }; + }; + jsPlumbUtil.extend(VmlEndpoint, VmlComponent, { + reattachListeners : function() { + if (this._jsPlumb.vml) this.reattachListenersForElement(this._jsPlumb.vml, this); + } + }); + +// ******************************* 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() { + if (d.loopback) + return "0,0," + _conv(2*d.r) + "," + _conv(2 * d.r); + + 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); }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.vml.Dot, VmlEndpoint); + + 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); }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.vml.Rectangle, VmlEndpoint); + + /* + * 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) { + // only draws for connectors, not endpoints. + if (params.component.canvas && containerExtents) { + var p = {}, d = params.d, connector = params.component; + 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.instance, 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); + }; + }; + jsPlumbUtil.extend(AbstractVmlArrowOverlay, [VmlComponent, jsPlumb.Overlays.AbstractOverlay], { + setVisible : function(state) { + this.canvas.style.display = state ? "block" : "none"; + } + }); + + jsPlumb.Overlays.vml.Arrow = function() { + AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.vml.Arrow, [ jsPlumb.Overlays.Arrow, AbstractVmlArrowOverlay ]); + + jsPlumb.Overlays.vml.PlainArrow = function() { + AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.vml.PlainArrow, [ jsPlumb.Overlays.PlainArrow, AbstractVmlArrowOverlay ]); + + jsPlumb.Overlays.vml.Diamond = function() { + AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.vml.Diamond, [ jsPlumb.Overlays.Diamond, AbstractVmlArrowOverlay ]); + +// ******************************* /vml overlays ***************************************************** + +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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. + * 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. + * setDragFilter sets a filter for some element that indicates areas of the element that should not respond to dragging. + * 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; + + var _getElementObject = function(el) { + return typeof(el) == "string" ? $("#" + el) : $(el); + }; + + jsPlumb.CurrentLibrary = { + + /** + * adds the given class to the element object. + */ + addClass : function(el, clazz) { + el = _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. + +TODO: REMOVE! + + */ + appendElement : function(child, parent) { + _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 = _getElementObject(el); + el.bind(event, callback); + }, + + destroyDraggable : function(el) { + if ($(el).data("draggable")) + $(el).draggable("destroy"); + }, + + destroyDroppable : function(el) { + if ($(el).data("droppable")) + $(el).droppable("destroy"); + }, + + /** + * 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); + }, + + 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 (el == null) return null; + 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 : _getElementObject, + + /** + * 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 _getElementObject(el).parent(); + }, + + getScrollLeft : function(el) { + return el.scrollLeft(); + }, + + getScrollTop : function(el) { + return el.scrollTop(); + }, + + getSelector : function(context, spec) { + if (arguments.length == 2) + return _getElementObject(context).find(spec); + else + return $(context); + }, + + /** + * gets the size for the element object, in an array : [ width, height ]. + */ + getSize : function(el) { + el = $(el); + return [el.outerWidth(), el.outerHeight()]; + }, + + getTagName : function(el) { + var e = _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, _jsPlumb) { + options = options || {}; + el = $(el); + + options.start = jsPlumbUtil.wrap(options.start, function() { + $("body").addClass(_jsPlumb.dragSelectClass); + }, false); + + options.stop = jsPlumbUtil.wrap(options.stop, function() { + $("body").removeClass(_jsPlumb.dragSelectClass); + }); + + // 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) { + 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 = _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) { + _getElementObject(element).remove(); + }, + + setDragFilter : function(el, filter) { + if (jsPlumb.CurrentLibrary.isAlreadyDraggable(el)) + el.draggable("option", "cancel", filter); + }, + + setDraggable : function(el, draggable) { + el.draggable("option", "disabled", !draggable); + }, + + setDragScope : function(el, scope) { + el.draggable("option", "scope", scope); + }, + + setOffset : function(el, o) { + _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) { + var h = jQuery._data(_getElementObject(el)[0], "handle"); + h(originalEvent); + }, + + unbind : function(el, event, callback) { + el = _getElementObject(el); + el.unbind(event, callback); + } + }; + + $(document).ready(jsPlumb.init); + +})(jQuery); + Deleted: sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/mootools.jsPlumb-1.5.2.js =================================================================== --- sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/mootools.jsPlumb-1.5.2.js 2013-10-15 08:29:48 UTC (rev 218) +++ sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/mootools.jsPlumb-1.5.2.js 2013-10-15 08:30:43 UTC (rev 219) @@ -1,11006 +0,0 @@ -/** %%Ignore-License -* jsBezier-0.6 -* -* Copyright (c) 2010 - 2013 Simon Porritt (simon.porritt(a)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)); - }; - - var _isPoint = function(curve) { - return curve[0].x == curve[1].x && curve[0].y == curve[1].y; - }; - - /** - * 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) { - - if (_isPoint(curve)) { - return { - point:curve[0], - location:location - }; - } - - 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) { - if (_isPoint(curve)) return 0; - - 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 - }; -})(); - -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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 _isa = function(a) { return Object.prototype.toString.call(a) === "[object Array]"; }, - _isnum = function(n) { return Object.prototype.toString.call(n) === "[object Number]"; }, - _iss = function(s) { return typeof s === "string"; }, - _isb = function(s) { return typeof s === "boolean"; }, - _isnull = function(s) { return s == null; }, - _iso = function(o) { return o == null ? false : Object.prototype.toString.call(o) === "[object Object]"; }, - _isd = function(o) { return Object.prototype.toString.call(o) === "[object Date]"; }, - _isf = function(o) { return Object.prototype.toString.call(o) === "[object Function]"; }, - _ise = function(o) { - for (var i in o) { if (o.hasOwnProperty(i)) return false; } - return true; - }, - pointHelper = function(p1, p2, fn) { - p1 = _isa(p1) ? p1 : [p1.x, p1.y]; - p2 = _isa(p2) ? p2 : [p2.x, p2.y]; - return fn(p1, p2); - }; - - jsPlumbUtil = { - isArray : _isa, - isString : _iss, - isBoolean: _isb, - isNull : _isnull, - isObject : _iso, - isDate : _isd, - isFunction: _isf, - isEmpty:_ise, - isNumber:_isnum, - clone : function(a) { - if (_iss(a)) return "" + a; - else if (_isb(a)) return !!a; - else if (_isd(a)) return new Date(a.getTime()); - else if (_isf(a)) return a; - else if (_isa(a)) { - var b = []; - for (var i = 0; i < a.length; i++) - b.push(this.clone(a[i])); - return b; - } - else if (_iso(a)) { - var c = {}; - for (var j in a) - c[j] = this.clone(a[j]); - return c; - } - else return a; - }, - merge : function(a, b) { - var c = this.clone(a); - for (var i in b) { - if (c[i] == null || _iss(b[i]) || _isb(b[i])) - c[i] = b[i]; - else { - if (_isa(b[i])/* && this.isArray(c[i])*/) { - var ar = []; - // if c's object is also an array we can keep its values. - if (_isa(c[i])) ar.push.apply(ar, c[i]); - ar.push.apply(ar, b[i]); - c[i] = ar; - } - else if(_iso(b[i])) { - // overwite c's value with an object if it is not already one. - if (!_iso(c[i])) - c[i] = {}; - for (var j in b[i]) - c[i][j] = b[i][j]; - } - } - } - return c; - }, - copyValues:function(names, from, to) { - for (var i = 0; i < names.length; i++) - to[names[i]] = from[names[i]]; - }, - // - // 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 != null) { - fromString = fromString.replace(matches[i], val); - } - } - } - return fromString; - }, - // process one entry. - _one = function(d) { - if (d != null) { - if (_iss(d)) { - return getValue(d); - } - else if (_isa(d)) { - var r = []; - for (var i = 0; i < d.length; i++) - r.push(_one(d[i])); - return r; - } - else if (_iso(d)) { - var s = {}; - for (var j in d) { - s[j] = _one(d[j]); - } - return s; - } - 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 }; - }, - 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, insertAtStart) { - var l = map[key]; - if (l == null) { - l = []; - map[key] = l; - } - l[insertAtStart ? "unshift" : "push"](value); - return l; - }, - // - // extends the given obj (which can be an array) with the given constructor function, prototype functions, and - // class members, any of which may be null. - // - extend : function(child, parent, _protoFn, _protoAtts) { - _protoFn = _protoFn || {}; - _protoAtts = _protoAtts || {}; - parent = _isa(parent) ? parent : [ parent ]; - - for (var i = 0; i < parent.length; i++) { - for (var j in parent[i].prototype) { - if(parent[i].prototype.hasOwnProperty(j)) { - child.prototype[j] = parent[i].prototype[j]; - } - } - } - - var _makeFn = function(name) { - return function() { - for (var i = 0; i < parent.length; i++) { - if (parent[i].prototype[name]) - parent[i].prototype[name].apply(this, arguments); - } - return _protoFn[name].apply(this, arguments); - }; - }; - - for (var k in _protoFn) { - child.prototype[k] = _makeFn(k); - } - - return child; - }, - uuid : function() { - return ('xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { - var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); - return v.toString(16); - })); - }, - 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]); - }, - /* - * Function: sizeElement - * Helper to size and position an element. You would typically use - * this when writing your own Connector or Endpoint implementation. - * - * Parameters: - * x - [int] x position for the element origin - * y - [int] y position for the element origin - * w - [int] width of the element - * h - [int] height of the element - * - */ - sizeElement : function(el, x, y, w, h) { - if (el) { - el.style.height = h + "px"; - el.height = h; - el.style.width = w + "px"; - el.width = w; - el.style.left = x + "px"; - el.style.top = y + "px"; - } - }, - /** - * @name jsPlumbUtil.wrap - * @desc Wraps one function with another, creating a placeholder for the - * wrapped function if it was null. this is used to wrap the various - * drag/drop event functions - to allow jsPlumb to be notified of - * important lifecycle events without imposing itself on the user's - * drag/drop functionality. - * @param {Function} wrappedFunction original function to wrap; may be null. - * @param {Function} newFunction function to wrap the original with. - * @param {Object} [returnOnThisValue] Optional. Indicates that the wrappedFunction should - * not be executed if the newFunction returns a value matching 'returnOnThisValue'. - * note that this is a simple comparison and only works for primitives right now. - */ - wrap : function(wrappedFunction, newFunction, returnOnThisValue) { - wrappedFunction = wrappedFunction || function() { }; - newFunction = newFunction || function() { }; - return function() { - var r = null; - try { - r = newFunction.apply(this, arguments); - } catch (e) { - jsPlumbUtil.log("jsPlumb function failed : " + e); - } - if (returnOnThisValue == null || (r !== returnOnThisValue)) { - try { - r = wrappedFunction.apply(this, arguments); - } catch (e) { - jsPlumbUtil.log("wrapped function failed : " + e); - } - } - return r; - }; - } - }; - - - jsPlumbUtil.EventGenerator = function() { - var _listeners = {}, 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" ]; - - this.bind = function(event, listener, insertAtStart) { - jsPlumbUtil.addToList(_listeners, event, listener, true); - return this; - }; - - this.fire = function(event, value, originalEvent) { - if (!eventsSuspended && _listeners[event]) { - // instead of looping through the array we get a counter and a length, because it is possible - // that an event fired from here could cause the object to get cleaned up, which would throw - // away the listeners. so after each cycle through the loop we check to ensure we haven't - // been nuked. - var l = _listeners[event].length, i = 0, _gone = false, ret = null; - if (!this.shouldFireEvent || this.shouldFireEvent(event, value, originalEvent)) { - while (!_gone && i < l && ret !== false) { - - // 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 { - ret = _listeners[event][i](value, originalEvent); - } catch (e) { - jsPlumbUtil.log("jsPlumb: fire failed for event " + event + " : " + e); - } - } - i++; - if (_listeners == null || _listeners[event] == null) _gone = true; - } - } - } - return this; - }; - - this.unbind = function(event) { - if (event) - delete _listeners[event]; - else { - _listeners = {}; - } - return this; - }; - - this.getListener = function(forEvent) { - return _listeners[forEvent]; - }; - this.setSuspendEvents = function(val) { - eventsSuspended = val; - }; - this.isSuspendEvents = function() { - return eventsSuspended; - }; - this.cleanupListeners = function() { - for (var i in _listeners) { - _listeners[i].splice(0); - delete _listeners[i]; - } - }; - }; - - - jsPlumbUtil.EventGenerator.prototype = { - cleanup:function() { - this.cleanupListeners(); - } - }; - - - // thanks MDC - // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Ob… - if (!Function.prototype.bind) { - Function.prototype.bind = function (oThis) { - if (typeof this !== "function") { - // closest thing possible to the ECMAScript 5 internal IsCallable function - throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); - } - - var aArgs = Array.prototype.slice.call(arguments, 1), - fToBind = this, - fNOP = function () {}, - fBound = function () { - return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, - aArgs.concat(Array.prototype.slice.call(arguments))); - }; - - fNOP.prototype = this.prototype; - fBound.prototype = new fNOP(); - - return fBound; - }; - } - -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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… - 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; - if (b != null && b.style != null) { - b.style.behavior = "url(#default#VML)"; - vmlAvailable.vml = b ? typeof b.adj == "object": true; - } - else - vmlAvailable.vml = false; - 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), - id = _currentInstance.getId(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(p.childNodes[i], 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(el); - }; - - // refresh the offsets for child elements of this element. - this.updateOffsets = function(elId) { - var jpcl = jsPlumb.CurrentLibrary, - el = jpcl.getElementObject(elId), - domEl = jpcl.getDOMElement(el), - id = _currentInstance.getId(domEl), - 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.getElementObject(el), - cLoc = jsPlumb.CurrentLibrary.getOffset(c), - p = el.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) { - _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, - - getAttribute:function(el, attName) { - return el.getAttribute(attName); - }, - - setAttribute:function(el, a, v) { - el.setAttribute(a, v); - }, - - 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; - } - }; - - - /* - - addClass: - - add: function( elem, classNames ) { - jQuery.each((classNames || "").split(/\s+/), function(i, className){ - if ( elem.nodeType == 1 && !jQuery.className.has( elem.className, className ) ) - elem.className += (elem.className ? " " : "") + className; - }); - }, - */ - - /* - - removeClass: - - elem.className = classNames !== undefined ? - jQuery.grep(elem.className.split(/\s+/), function(className){ - return !jQuery.className.has( classNames, className ); - }).join(" ") : - -*/ - -})(); -/** - * @module jsPlumb - * @description Provides a way to visually connect elements on an HTML page, using either SVG, Canvas - * elements, or VML. - * - * - [Demo Site](http://jsplumb.org) - * - [GitHub](http://github.com/sporritt/jsplumb) - * - * Dual licensed under the MIT and GPL2 licenses. - * - * Copyright (c) 2010 - 2013 Simon Porritt (simon.porritt(a)gmail.com) - */ -;(function() { - - var _ju = jsPlumbUtil, - _addClass = function(el, clazz) { jsPlumb.CurrentLibrary.addClass(_gel(el), clazz); }, - _hasClass = function(el, clazz) { return jsPlumb.CurrentLibrary.hasClass(_gel(el), clazz); }, - _removeClass = function(el, clazz) { jsPlumb.CurrentLibrary.removeClass(_gel(el), clazz); }, - _gel = function(el) { return jsPlumb.CurrentLibrary.getElementObject(el); }, - _dom = function(el) { return jsPlumb.CurrentLibrary.getDOMElement(el); }, - _getOffset = function(el, _instance) { - var o = jsPlumb.CurrentLibrary.getOffset(_gel(el)); - if (_instance != null) { - var z = _instance.getZoom(); - return {left:o.left / z, top:o.top / z }; - } - else - return o; - }, - _getSize = function(el) { - return jsPlumb.CurrentLibrary.getSize(_gel(el)); - }, - - /** - * creates a timestamp, using milliseconds since 1970, but as a string. - */ - _timestamp = function() { return "" + (new Date()).getTime(); }, - - // helper method to update the hover style whenever it, or paintStyle, changes. - // we use paintStyle as the foundation and merge hoverPaintStyle over the - // top. - _updateHoverStyle = function(component) { - if (component._jsPlumb.paintStyle && component._jsPlumb.hoverPaintStyle) { - var mergedHoverStyle = {}; - jsPlumb.extend(mergedHoverStyle, component._jsPlumb.paintStyle); - jsPlumb.extend(mergedHoverStyle, component._jsPlumb.hoverPaintStyle); - delete component._jsPlumb.hoverPaintStyle; - // we want the fillStyle of paintStyle to override a gradient, if possible. - if (mergedHoverStyle.gradient && component._jsPlumb.paintStyle.fillStyle) - delete mergedHoverStyle.gradient; - component._jsPlumb.hoverPaintStyle = mergedHoverStyle; - } - }, - events = [ "click", "dblclick", "mouseenter", "mouseout", "mousemove", "mousedown", "mouseup", "contextmenu" ], - eventFilters = { "mouseout":"mouseexit" }, - _updateAttachedElements = function(component, state, timestamp, sourceElement) { - var affectedElements = component.getAttachedElements(); - if (affectedElements) { - for (var i = 0, j = affectedElements.length; i < j; i++) { - if (!sourceElement || sourceElement != affectedElements[i]) - affectedElements[i].setHover(state, true, timestamp); // tell the attached elements not to inform their own attached elements. - } - } - }, - _splitType = function(t) { return t == null ? null : t.split(" "); }, - _applyTypes = function(component, params, doNotRepaint) { - if (component.getDefaultType) { - var td = component.getTypeDescriptor(); - - var o = _ju.merge({}, component.getDefaultType()); - for (var i = 0, j = component._jsPlumb.types.length; i < j; i++) - o = _ju.merge(o, component._jsPlumb.instance.getType(component._jsPlumb.types[i], td)); - - if (params) { - o = _ju.populate(o, params); - } - - component.applyType(o, doNotRepaint); - if (!doNotRepaint) component.repaint(); - } - }, - -// ------------------------------ BEGIN jsPlumbUIComponent -------------------------------------------- - - jsPlumbUIComponent = window.jsPlumbUIComponent = function(params) { - - jsPlumbUtil.EventGenerator.apply(this, arguments); - - var self = this, - a = arguments, - idPrefix = self.idPrefix, - id = idPrefix + (new Date()).getTime(), - jpcl = jsPlumb.CurrentLibrary; - - this._jsPlumb = { - instance: params._jsPlumb, - parameters:params.parameters || {}, - paintStyle:null, - hoverPaintStyle:null, - paintStyleInUse:null, - hover:false, - beforeDetach:params.beforeDetach, - beforeDrop:params.beforeDrop, - overlayPlacements : [], - hoverClass: params.hoverClass || params._jsPlumb.Defaults.HoverClass || jsPlumb.Defaults.HoverClass, - types:[] - }; - - this.getId = function() { return id; }; - - // all components can generate events - - if (params.events) { - for (var i in params.events) - self.bind(i, params.events[i]); - } - - // all components get this clone function. - // TODO issue 116 showed a problem with this - it seems 'a' that is in - // the clone function's scope is shared by all invocations of it, the classic - // JS closure problem. for now, jsPlumb does a version of this inline where - // it used to call clone. but it would be nice to find some time to look - // further at this. - this.clone = function() { - var o = {};//new Object(); - this.constructor.apply(o, a); - return o; - }.bind(this); - - - // user can supply a beforeDetach callback, which will be executed before a detach - // is performed; returning false prevents the detach. - this.isDetachAllowed = function(connection) { - var r = true; - if (this._jsPlumb.beforeDetach) { - try { - r = this._jsPlumb.beforeDetach(connection); - } - catch (e) { _ju.log("jsPlumb: beforeDetach callback failed", e); } - } - return r; - }; - - // user can supply a beforeDrop callback, which will be executed before a dropped - // connection is confirmed. user can return false to reject connection. - this.isDropAllowed = function(sourceId, targetId, scope, connection, dropEndpoint) { - var r = this._jsPlumb.instance.checkCondition("beforeDrop", { - sourceId:sourceId, - targetId:targetId, - scope:scope, - connection:connection, - dropEndpoint:dropEndpoint - }); - if (this._jsPlumb.beforeDrop) { - try { - r = this._jsPlumb.beforeDrop({ - sourceId:sourceId, - targetId:targetId, - scope:scope, - connection:connection, - dropEndpoint:dropEndpoint - }); - } - catch (e) { _ju.log("jsPlumb: beforeDrop callback failed", e); } - } - return r; - }; - - var boundListeners = [], - bindAListener = function(obj, type, fn) { - boundListeners.push([obj, type, fn]); - obj.bind(type, fn); - }, - domListeners = [], - bindOne = function(o, c, evt) { - var filteredEvent = eventFilters[evt] || evt, - fn = function(ee) { - c.fire(filteredEvent, c, ee); - }; - domListeners.push([o, evt, fn]); - jpcl.bind(o, evt, fn); - }, - unbindOne = function(o, evt, fn) { - var filteredEvent = eventFilters[evt] || evt; - jpcl.unbind(o, evt, fn); - }; - - this.bindListeners = function(obj, _self, _hoverFunction) { - bindAListener(obj, "click", function(ep, e) { _self.fire("click", _self, e); }); - bindAListener(obj, "dblclick", function(ep, e) { _self.fire("dblclick", _self, e); }); - bindAListener(obj, "contextmenu", function(ep, e) { _self.fire("contextmenu", _self, e); }); - bindAListener(obj, "mouseenter", function(ep, e) { - if (!_self.isHover()) { - _hoverFunction(true); - _self.fire("mouseenter", _self, e); - } - }); - bindAListener(obj, "mouseexit", function(ep, e) { - if (_self.isHover()) { - _hoverFunction(false); - _self.fire("mouseexit", _self, e); - } - }); - bindAListener(obj, "mousedown", function(ep, e) { _self.fire("mousedown", _self, e); }); - bindAListener(obj, "mouseup", function(ep, e) { _self.fire("mouseup", _self, e); }); - }; - - this.unbindListeners = function() { - for (var i = 0; i < boundListeners.length; i++) { - var o = boundListeners[i]; - o[0].unbind(o[1], o[2]); - } - boundListeners = null; - }; - - this.attachListeners = function(o, c) { - for (var i = 0, j = events.length; i < j; i++) { - bindOne(o, c, events[i]); - } - }; - this.detachListeners = function() { - for (var i = 0; i < domListeners.length; i++) { - unbindOne(domListeners[i][0], domListeners[i][1], domListeners[i][2]); - } - domListeners = null; - }; - - this.reattachListenersForElement = function(o) { - if (arguments.length > 1) { - for (var i = 0, j = events.length; i < j; i++) - unbindOne(o, events[i]); - for (i = 1, j = arguments.length; i < j; i++) - this.attachListeners(o, arguments[i]); - } - }; - }; - - jsPlumbUtil.extend(jsPlumbUIComponent, jsPlumbUtil.EventGenerator, { - - getParameter : function(name) { - return this._jsPlumb.parameters[name]; - }, - - setParameter : function(name, value) { - this._jsPlumb.parameters[name] = value; - }, - - getParameters : function() { - return this._jsPlumb.parameters; - }, - - setParameters : function(p) { - this._jsPlumb.parameters = p; - }, - - addClass : function(clazz) { - if (this.canvas != null) - _addClass(this.canvas, clazz); - }, - - removeClass : function(clazz) { - if (this.canvas != null) - _removeClass(this.canvas, clazz); - }, - - setType : function(typeId, params, doNotRepaint) { - this._jsPlumb.types = _splitType(typeId) || []; - _applyTypes(this, params, doNotRepaint); - }, - - getType : function() { - return this._jsPlumb.types; - }, - - reapplyTypes : function(params, doNotRepaint) { - _applyTypes(this, params, doNotRepaint); - }, - - hasType : function(typeId) { - return jsPlumbUtil.indexOf(this._jsPlumb.types, typeId) != -1; - }, - - addType : function(typeId, params, doNotRepaint) { - var t = _splitType(typeId), _cont = false; - if (t != null) { - for (var i = 0, j = t.length; i < j; i++) { - if (!this.hasType(t[i])) { - this._jsPlumb.types.push(t[i]); - _cont = true; - } - } - if (_cont) _applyTypes(this, params, doNotRepaint); - } - }, - - removeType : function(typeId, doNotRepaint) { - var t = _splitType(typeId), _cont = false, _one = function(tt) { - var idx = _ju.indexOf(this._jsPlumb.types, tt); - if (idx != -1) { - this._jsPlumb.types.splice(idx, 1); - return true; - } - return false; - }.bind(this); - - if (t != null) { - for (var i = 0,j = t.length; i < j; i++) { - _cont = _one(t[i]) || _cont; - } - if (_cont) _applyTypes(this, null, doNotRepaint); - } - }, - - toggleType : function(typeId, params, doNotRepaint) { - var t = _splitType(typeId); - if (t != null) { - for (var i = 0, j = t.length; i < j; i++) { - var idx = jsPlumbUtil.indexOf(this._jsPlumb.types, t[i]); - if (idx != -1) - this._jsPlumb.types.splice(idx, 1); - else - this._jsPlumb.types.push(t[i]); - } - - _applyTypes(this, params, doNotRepaint); - } - }, - applyType : function(t, doNotRepaint) { - this.setPaintStyle(t.paintStyle, doNotRepaint); - this.setHoverPaintStyle(t.hoverPaintStyle, doNotRepaint); - if (t.parameters){ - for (var i in t.parameters) - this.setParameter(i, t.parameters[i]); - } - }, - setPaintStyle : function(style, doNotRepaint) { -// this._jsPlumb.paintStyle = jsPlumb.extend({}, style); -// TODO figure out if we want components to clone paintStyle so as not to share it. - this._jsPlumb.paintStyle = style; - this._jsPlumb.paintStyleInUse = this._jsPlumb.paintStyle; - _updateHoverStyle(this); - if (!doNotRepaint) this.repaint(); - }, - getPaintStyle : function() { - return this._jsPlumb.paintStyle; - }, - setHoverPaintStyle : function(style, doNotRepaint) { - //this._jsPlumb.hoverPaintStyle = jsPlumb.extend({}, style); -// TODO figure out if we want components to clone paintStyle so as not to share it. - this._jsPlumb.hoverPaintStyle = style; - _updateHoverStyle(this); - if (!doNotRepaint) this.repaint(); - }, - getHoverPaintStyle : function() { - return this._jsPlumb.hoverPaintStyle; - }, - cleanup:function() { - this.unbindListeners(); - this.detachListeners(); - }, - destroy:function() { - this.cleanupListeners(); - this.clone = null; - this._jsPlumb = null; - }, - - isHover : function() { return this._jsPlumb.hover; }, - - setHover : function(hover, ignoreAttachedElements, timestamp) { - var jpcl = jsPlumb.CurrentLibrary; - // while dragging, we ignore these events. this keeps the UI from flashing and - // swishing and whatevering. - if (this._jsPlumb && !this._jsPlumb.instance.currentlyDragging && !this._jsPlumb.instance.isHoverSuspended()) { - - this._jsPlumb.hover = hover; - - if (this.canvas != null) { - if (this._jsPlumb.instance.hoverClass != null) { - jpcl[hover ? "addClass" : "removeClass"](this.canvas, this._jsPlumb.instance.hoverClass); - } - } - if (this._jsPlumb.hoverPaintStyle != null) { - this._jsPlumb.paintStyleInUse = hover ? this._jsPlumb.hoverPaintStyle : this._jsPlumb.paintStyle; - if (!this._jsPlumb.instance.isSuspendDrawing()) { - timestamp = timestamp || _timestamp(); - this.repaint({timestamp:timestamp, recalc:false}); - } - } - // get the list of other affected elements, if supported by this component. - // for a connection, its the endpoints. for an endpoint, its the connections! surprise. - if (this.getAttachedElements && !ignoreAttachedElements) - _updateAttachedElements(this, hover, _timestamp(), this); - } - } - }); - -// ------------------------------ END jsPlumbUIComponent -------------------------------------------- - -// ------------------------------ BEGIN OverlayCapablejsPlumbUIComponent -------------------------------------------- - - var _internalLabelOverlayId = "__label", - // helper to get the index of some overlay - _getOverlayIndex = function(component, id) { - var idx = -1; - for (var i = 0, j = component._jsPlumb.overlays.length; i < j; i++) { - if (id === component._jsPlumb.overlays[i].id) { - idx = i; - break; - } - } - return idx; - }, - // this is a shortcut helper method to let people add a label as - // overlay. - _makeLabelOverlay = function(component, params) { - - var _params = { - cssClass:params.cssClass, - labelStyle : component.labelStyle, - id:_internalLabelOverlayId, - component:component, - _jsPlumb:component._jsPlumb.instance // TODO not necessary, since the instance can be accessed through the component. - }, - mergedParams = jsPlumb.extend(_params, params); - - return new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()].Label( mergedParams ); - }, - _processOverlay = function(component, o) { - var _newOverlay = null; - if (_ju.isArray(o)) { // this is for the shorthand ["Arrow", { width:50 }] syntax - // there's also a three arg version: - // ["Arrow", { width:50 }, {location:0.7}] - // which merges the 3rd arg into the 2nd. - var type = o[0], - // make a copy of the object so as not to mess up anyone else's reference... - p = jsPlumb.extend({component:component, _jsPlumb:component._jsPlumb.instance}, o[1]); - if (o.length == 3) jsPlumb.extend(p, o[2]); - _newOverlay = new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()][type](p); - } else if (o.constructor == String) { - _newOverlay = new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()][o]({component:component, _jsPlumb:component._jsPlumb.instance}); - } else { - _newOverlay = o; - } - - component._jsPlumb.overlays.push(_newOverlay); - }, - _calculateOverlaysToAdd = function(component, params) { - var defaultKeys = component.defaultOverlayKeys || [], o = params.overlays, - checkKey = function(k) { - return component._jsPlumb.instance.Defaults[k] || jsPlumb.Defaults[k] || []; - }; - - if (!o) o = []; - - for (var i = 0, j = defaultKeys.length; i < j; i++) - o.unshift.apply(o, checkKey(defaultKeys[i])); - - return o; - }, - OverlayCapableJsPlumbUIComponent = window.OverlayCapableJsPlumbUIComponent = function(params) { - - jsPlumbUIComponent.apply(this, arguments); - this._jsPlumb.overlays = []; - - var _overlays = _calculateOverlaysToAdd(this, params); - if (_overlays) { - for (var i = 0, j = _overlays.length; i < j; i++) { - _processOverlay(this, _overlays[i]); - } - } - - if (params.label) { - var loc = params.labelLocation || this.defaultLabelLocation || 0.5, - labelStyle = params.labelStyle || this._jsPlumb.instance.Defaults.LabelStyle || jsPlumb.Defaults.LabelStyle; - - this._jsPlumb.overlays.push(_makeLabelOverlay(this, { - label:params.label, - location:loc, - labelStyle:labelStyle - })); - } - }; - - jsPlumbUtil.extend(OverlayCapableJsPlumbUIComponent, jsPlumbUIComponent, { - applyType : function(t, doNotRepaint) { - this.removeAllOverlays(doNotRepaint); - if (t.overlays) { - for (var i = 0, j = t.overlays.length; i < j; i++) - this.addOverlay(t.overlays[i], true); - } - }, - setHover : function(hover, ignoreAttachedElements, timestamp) { - if (this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) { - for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) { - this._jsPlumb.overlays[i][hover ? "addClass":"removeClass"](this._jsPlumb.instance.hoverClass); - } - } - }, - addOverlay : function(overlay, doNotRepaint) { - _processOverlay(this, overlay); - if (!doNotRepaint) this.repaint(); - }, - getOverlay : function(id) { - var idx = _getOverlayIndex(this, id); - return idx >= 0 ? this._jsPlumb.overlays[idx] : null; - }, - getOverlays : function() { - return this._jsPlumb.overlays; - }, - hideOverlay : function(id) { - var o = this.getOverlay(id); - if (o) o.hide(); - }, - hideOverlays : function() { - for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) - this._jsPlumb.overlays[i].hide(); - }, - showOverlay : function(id) { - var o = this.getOverlay(id); - if (o) o.show(); - }, - showOverlays : function() { - for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) - this._jsPlumb.overlays[i].show(); - }, - removeAllOverlays : function(doNotRepaint) { - for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) { - if (this._jsPlumb.overlays[i].cleanup) this._jsPlumb.overlays[i].cleanup(); - } - - this._jsPlumb.overlays.splice(0, this._jsPlumb.overlays.length); - if (!doNotRepaint) - this.repaint(); - }, - removeOverlay : function(overlayId) { - var idx = _getOverlayIndex(this, overlayId); - if (idx != -1) { - var o = this._jsPlumb.overlays[idx]; - if (o.cleanup) o.cleanup(); - this._jsPlumb.overlays.splice(idx, 1); - } - }, - removeOverlays : function() { - for (var i = 0, j = arguments.length; i < j; i++) - this.removeOverlay(arguments[i]); - }, - getLabel : function() { - var lo = this.getOverlay(_internalLabelOverlayId); - return lo != null ? lo.getLabel() : null; - }, - getLabelOverlay : function() { - return this.getOverlay(_internalLabelOverlayId); - }, - setLabel : function(l) { - var lo = this.getOverlay(_internalLabelOverlayId); - if (!lo) { - var params = l.constructor == String || l.constructor == Function ? { label:l } : l; - lo = _makeLabelOverlay(this, params); - this._jsPlumb.overlays.push(lo); - } - else { - if (l.constructor == String || l.constructor == Function) lo.setLabel(l); - else { - if (l.label) lo.setLabel(l.label); - if (l.location) lo.setLocation(l.location); - } - } - - if (!this._jsPlumb.instance.isSuspendDrawing()) - this.repaint(); - }, - cleanup:function() { - for (var i = 0; i < this._jsPlumb.overlays.length; i++) { - this._jsPlumb.overlays[i].cleanup(); - this._jsPlumb.overlays[i].destroy(); - } - this._jsPlumb.overlays.splice(0); - } - }); - -// ------------------------------ END OverlayCapablejsPlumbUIComponent -------------------------------------------- - - var _jsPlumbInstanceIndex = 0, - getInstanceIndex = function() { - var i = _jsPlumbInstanceIndex + 1; - _jsPlumbInstanceIndex++; - return i; - }; - - var jsPlumbInstance = window.jsPlumbInstance = function(_defaults) { - - this.Defaults = { - Anchor : "BottomCenter", - Anchors : [ null, null ], - ConnectionsDetachable : true, - ConnectionOverlays : [ ], - Connector : "Bezier", - Container : null, - DoNotThrowErrors:false, - DragOptions : { }, - DropOptions : { }, - Endpoint : "Dot", - EndpointOverlays : [ ], - Endpoints : [ null, null ], - EndpointStyle : { fillStyle : "#456" }, - EndpointStyles : [ null, null ], - EndpointHoverStyle : null, - EndpointHoverStyles : [ null, null ], - HoverPaintStyle : null, - LabelStyle : { color : "black" }, - LogEnabled : false, - Overlays : [ ], - MaxConnections : 1, - PaintStyle : { lineWidth : 8, strokeStyle : "#456" }, - ReattachConnections:false, - RenderMode : "svg", - Scope : "jsPlumb_DefaultScope" - }; - if (_defaults) jsPlumb.extend(this.Defaults, _defaults); - - this.logEnabled = this.Defaults.LogEnabled; - this._connectionTypes = {}; - this._endpointTypes = {}; - - jsPlumbUtil.EventGenerator.apply(this); - - var _currentInstance = this, - _instanceIndex = getInstanceIndex(), - _bb = _currentInstance.bind, - _initialDefaults = {}, - _zoom = 1, - _info = function(el) { - var _el = _dom(el); - return { el:_el, id:(jsPlumbUtil.isString(el) && _el == null) ? el : _getId(_el) }; - }; - - this.getInstanceIndex = function() { return _instanceIndex; }; - - this.setZoom = function(z, repaintEverything) { - _zoom = z; - if (repaintEverything) _currentInstance.repaintEverything(); - }; - this.getZoom = function() { return _zoom; }; - - for (var i in this.Defaults) - _initialDefaults[i] = this.Defaults[i]; - - this.bind = function(event, fn) { - if ("ready" === event && initialized) fn(); - else _bb.apply(_currentInstance,[event, fn]); - }; - - _currentInstance.importDefaults = function(d) { - for (var i in d) { - _currentInstance.Defaults[i] = d[i]; - } - return _currentInstance; - }; - - _currentInstance.restoreDefaults = function() { - _currentInstance.Defaults = jsPlumb.extend({}, _initialDefaults); - return _currentInstance; - }; - - var log = null, - resizeTimer = null, - initialized = false, - // TODO remove from window scope - connections = [], - // map of element id -> endpoint lists. an element can have an arbitrary - // number of endpoints on it, and not all of them have to be connected - // to anything. - endpointsByElement = {}, - endpointsByUUID = {}, - offsets = {}, - offsetTimestamps = {}, - floatingConnections = {}, - draggableStates = {}, - connectionBeingDragged = false, - sizes = [], - _suspendDrawing = false, - _suspendedAt = null, - DEFAULT_SCOPE = this.Defaults.Scope, - renderMode = null, // will be set in init() - _curIdStamp = 1, - _idstamp = function() { return "" + _curIdStamp++; }, - - // - // appends an element to some other element, which is calculated as follows: - // - // 1. if _currentInstance.Defaults.Container exists, use that element. - // 2. if the 'parent' parameter exists, use that. - // 3. otherwise just use the root element (for DOM usage, the document body). - // - // - _appendElement = function(el, parent) { - if (_currentInstance.Defaults.Container) - jsPlumb.CurrentLibrary.appendElement(el, _currentInstance.Defaults.Container); - else if (!parent) - jsPlumbAdapter.appendToRoot(el); - else - jsPlumb.CurrentLibrary.appendElement(el, parent); - }, - - // - // YUI, for some reason, put the result of a Y.all call into an object that contains - // a '_nodes' array, instead of handing back an array-like object like the other - // libraries do. - // - _convertYUICollection = function(c) { - return c._nodes ? c._nodes : c; - }, - - // - // Draws an endpoint and its connections. this is the main entry point into drawing connections as well - // as endpoints, since jsPlumb is endpoint-centric under the hood. - // - // @param element element to draw (of type library specific element object) - // @param ui UI object from current library's event system. optional. - // @param timestamp timestamp for this paint cycle. used to speed things up a little by cutting down the amount of offset calculations we do. - // @param clearEdits defaults to false; indicates that mouse edits for connectors should be cleared - /// - _draw = function(element, ui, timestamp, clearEdits) { - - // TODO is it correct to filter by headless at this top level? how would a headless adapter ever repaint? - if (!jsPlumbAdapter.headless && !_suspendDrawing) { - var id = _getId(element), - repaintEls = _currentInstance.dragManager.getElementsForDraggable(id); - - if (timestamp == null) timestamp = _timestamp(); - - // update the offset of everything _before_ we try to draw anything. - var o = _updateOffset( { elId : id, offset : ui, recalc : false, timestamp : timestamp }); - - if (repaintEls) { - for (var i in repaintEls) { - _updateOffset( { - elId : repaintEls[i].id, - offset : { - left:o.o.left + repaintEls[i].offset.left, - top:o.o.top + repaintEls[i].offset.top - }, - recalc : false, - timestamp : timestamp - }); - } - } - - - _currentInstance.anchorManager.redraw(id, ui, timestamp, null, clearEdits); - - if (repaintEls) { - for (var j in repaintEls) { - _currentInstance.anchorManager.redraw(repaintEls[j].id, ui, timestamp, repaintEls[j].offset, clearEdits, true); - } - } - } - }, - - // - // executes the given function against the given element if the first - // argument is an object, or the list of elements, if the first argument - // is a list. the function passed in takes (element, elementId) as - // arguments. - // - _elementProxy = function(element, fn) { - var retVal = null, el, id; - if (_ju.isArray(element)) { - retVal = []; - for ( var i = 0, j = element.length; i < j; i++) { - el = _gel(element[i]); - id = _currentInstance.getAttribute(el, "id"); - retVal.push(fn(el, id)); // append return values to what we will return - } - } else { - el = _gel(element); - id = _currentInstance.getAttribute(el, "id"); - retVal = fn(el, id); - } - return retVal; - }, - - // - // gets an Endpoint by uuid. - // - _getEndpoint = function(uuid) { return endpointsByUUID[uuid]; }, - - /** - * inits a draggable if it's not already initialised. - * TODO: somehow abstract this to the adapter, because the concept of "draggable" has no - * place on the server. - */ - _initDraggableIfNecessary = function(element, isDraggable, dragOptions) { - // TODO move to DragManager? - if (!jsPlumbAdapter.headless) { - var _draggable = isDraggable == null ? false : isDraggable, jpcl = jsPlumb.CurrentLibrary; - if (_draggable) { - if (jpcl.isDragSupported(element) && !jpcl.isAlreadyDraggable(element)) { - var options = dragOptions || _currentInstance.Defaults.DragOptions || jsPlumb.Defaults.DragOptions; - options = jsPlumb.extend( {}, options); // make a copy. - var dragEvent = jpcl.dragEvents.drag, - stopEvent = jpcl.dragEvents.stop, - startEvent = jpcl.dragEvents.start; - - options[startEvent] = _ju.wrap(options[startEvent], function() { - _currentInstance.setHoverSuspended(true); - _currentInstance.select({source:element}).addClass(_currentInstance.elementDraggingClass + " " + _currentInstance.sourceElementDraggingClass, true); - _currentInstance.select({target:element}).addClass(_currentInstance.elementDraggingClass + " " + _currentInstance.targetElementDraggingClass, true); - _currentInstance.setConnectionBeingDragged(true); - }); - - options[dragEvent] = _ju.wrap(options[dragEvent], function() { - var ui = jpcl.getUIPosition(arguments, _currentInstance.getZoom()); - _draw(element, ui, null, true); - _addClass(element, "jsPlumb_dragged"); - }); - options[stopEvent] = _ju.wrap(options[stopEvent], function() { - var ui = jpcl.getUIPosition(arguments, _currentInstance.getZoom()); - _draw(element, ui); - _removeClass(element, "jsPlumb_dragged"); - _currentInstance.setHoverSuspended(false); - _currentInstance.select({source:element}).removeClass(_currentInstance.elementDraggingClass + " " + _currentInstance.sourceElementDraggingClass, true); - _currentInstance.select({target:element}).removeClass(_currentInstance.elementDraggingClass + " " + _currentInstance.targetElementDraggingClass, true); - _currentInstance.setConnectionBeingDragged(false); - }); - var elId = _getId(element); // need ID - draggableStates[elId] = true; - var draggable = draggableStates[elId]; - options.disabled = draggable == null ? false : !draggable; - jpcl.initDraggable(element, options, false, _currentInstance); - _currentInstance.dragManager.register(element); - } - } - } - }, - - /* - * prepares a final params object that can be passed to _newConnection, taking into account defaults, events, etc. - */ - _prepareConnectionParams = function(params, referenceParams) { - var _p = jsPlumb.extend( { }, params); - if (referenceParams) jsPlumb.extend(_p, referenceParams); - - // hotwire endpoints passed as source or target to sourceEndpoint/targetEndpoint, respectively. - if (_p.source) { - if (_p.source.endpoint) - _p.sourceEndpoint = _p.source; - else - _p.source = _dom(_p.source); - } - if (_p.target) { - if (_p.target.endpoint) - _p.targetEndpoint = _p.target; - else - _p.target = _dom(_p.target); - } - - // test for endpoint uuids to connect - if (params.uuids) { - _p.sourceEndpoint = _getEndpoint(params.uuids[0]); - _p.targetEndpoint = _getEndpoint(params.uuids[1]); - } - - // now ensure that if we do have Endpoints already, they're not full. - // source: - if (_p.sourceEndpoint && _p.sourceEndpoint.isFull()) { - _ju.log(_currentInstance, "could not add connection; source endpoint is full"); - return; - } - - // target: - if (_p.targetEndpoint && _p.targetEndpoint.isFull()) { - _ju.log(_currentInstance, "could not add connection; target endpoint is full"); - return; - } - - // if source endpoint mandates connection type and nothing specified in our params, use it. - if (!_p.type && _p.sourceEndpoint) - _p.type = _p.sourceEndpoint.connectionType; - - // copy in any connectorOverlays that were specified on the source endpoint. - // it doesnt copy target endpoint overlays. i'm not sure if we want it to or not. - if (_p.sourceEndpoint && _p.sourceEndpoint.connectorOverlays) { - _p.overlays = _p.overlays || []; - for (var i = 0, j = _p.sourceEndpoint.connectorOverlays.length; i < j; i++) { - _p.overlays.push(_p.sourceEndpoint.connectorOverlays[i]); - } - } - - // pointer events - if (!_p["pointer-events"] && _p.sourceEndpoint && _p.sourceEndpoint.connectorPointerEvents) - _p["pointer-events"] = _p.sourceEndpoint.connectorPointerEvents; - - // if there's a target specified (which of course there should be), and there is no - // target endpoint specified, and 'newConnection' was not set to true, then we check to - // see if a prior call to makeTarget has provided us with the specs for the target endpoint, and - // we use those if so. additionally, if the makeTarget call was specified with 'uniqueEndpoint' set - // to true, then if that target endpoint has already been created, we re-use it. - - var tid, tep, existingUniqueEndpoint, newEndpoint; - - // TODO: this code can be refactored to be a little dry. - if (_p.target && !_p.target.endpoint && !_p.targetEndpoint && !_p.newConnection) { - tid = _getId(_p.target); - tep =_targetEndpointDefinitions[tid]; - existingUniqueEndpoint = _targetEndpoints[tid]; - - if (tep) { - // if target not enabled, return. - if (!_targetsEnabled[tid]) return; - - tep.isTarget = true; - // check for max connections?? - newEndpoint = existingUniqueEndpoint != null ? existingUniqueEndpoint : _currentInstance.addEndpoint(_p.target, tep); - if (_targetEndpointsUnique[tid]) _targetEndpoints[tid] = newEndpoint; - _p.targetEndpoint = newEndpoint; - // TODO test options to makeTarget to see if we should do this? - newEndpoint._doNotDeleteOnDetach = false; // reset. - newEndpoint._deleteOnDetach = true; - } - } - - // same thing, but for source. - if (_p.source && !_p.source.endpoint && !_p.sourceEndpoint && !_p.newConnection) { - tid = _getId(_p.source); - tep = _sourceEndpointDefinitions[tid]; - existingUniqueEndpoint = _sourceEndpoints[tid]; - - if (tep) { - // if source not enabled, return. - if (!_sourcesEnabled[tid]) return; - - newEndpoint = existingUniqueEndpoint != null ? existingUniqueEndpoint : _currentInstance.addEndpoint(_p.source, tep); - if (_sourceEndpointsUnique[tid]) _sourceEndpoints[tid] = newEndpoint; - _p.sourceEndpoint = newEndpoint; - // TODO test options to makeSource to see if we should do this? - newEndpoint._doNotDeleteOnDetach = false; // reset. - newEndpoint._deleteOnDetach = true; - } - } - - return _p; - }, - - _newConnection = function(params) { - var connectionFunc = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), - endpointFunc = _currentInstance.Defaults.EndpointType || jsPlumb.Endpoint, - parent = jsPlumb.CurrentLibrary.getParent; - - if (params.container) - params.parent = params.container; - else { - if (params.sourceEndpoint) - params.parent = params.sourceEndpoint.parent; - else if (params.source.constructor == endpointFunc) - params.parent = params.source.parent; - else params.parent = parent(params.source); - } - - params._jsPlumb = _currentInstance; - params.newConnection = _newConnection; - params.newEndpoint = _newEndpoint; - params.endpointsByUUID = endpointsByUUID; - params.endpointsByElement = endpointsByElement; - params.finaliseConnection = _finaliseConnection; - var con = new connectionFunc(params); - con.id = "con_" + _idstamp(); - _eventFireProxy("click", "click", con); - _eventFireProxy("dblclick", "dblclick", con); - _eventFireProxy("contextmenu", "contextmenu", con); - return con; - }, - - // - // adds the connection to the backing model, fires an event if necessary and then redraws - // - _finaliseConnection = function(jpc, params, originalEvent, doInformAnchorManager) { - params = params || {}; - // add to list of connections (by scope). - if (!jpc.suspendedEndpoint) - connections.push(jpc); - - // always inform the anchor manager - // except that if jpc has a suspended endpoint it's not true to say the - // connection is new; it has just (possibly) moved. the question is whether - // to make that call here or in the anchor manager. i think perhaps here. - if (jpc.suspendedEndpoint == null || doInformAnchorManager) - _currentInstance.anchorManager.newConnection(jpc); - - // force a paint - _draw(jpc.source); - - // fire an event - if (!params.doNotFireConnectionEvent && params.fireEvent !== false) { - - var eventArgs = { - connection:jpc, - source : jpc.source, target : jpc.target, - sourceId : jpc.sourceId, targetId : jpc.targetId, - sourceEndpoint : jpc.endpoints[0], targetEndpoint : jpc.endpoints[1] - }; - - _currentInstance.fire("connection", eventArgs, originalEvent); - } - }, - - _eventFireProxy = function(event, proxyEvent, obj) { - obj.bind(event, function(originalObject, originalEvent) { - _currentInstance.fire(proxyEvent, obj, originalEvent); - }); - }, - - /* - * for the given endpoint params, returns an appropriate parent element for the UI elements that will be added. - * this function is used by _newEndpoint (directly below), and also in the makeSource function in jsPlumb. - * - * the logic is to first look for a "container" member of params, and pass that back if found. otherwise we - * handoff to the 'getParent' function in the current library. - */ - _getParentFromParams = function(params) { - if (params.container) - return params.container; - else { - var tag = jsPlumb.CurrentLibrary.getTagName(params.source), - p = jsPlumb.CurrentLibrary.getParent(params.source); - if (tag && tag.toLowerCase() === "td") - return jsPlumb.CurrentLibrary.getParent(p); - else return p; - } - }, - - /* - factory method to prepare a new endpoint. this should always be used instead of creating Endpoints - manually, since this method attaches event listeners and an id. - */ - _newEndpoint = function(params) { - var endpointFunc = _currentInstance.Defaults.EndpointType || jsPlumb.Endpoint; - var _p = jsPlumb.extend({}, params); - _p.parent = _getParentFromParams(_p); - _p._jsPlumb = _currentInstance; - _p.newConnection = _newConnection; - _p.newEndpoint = _newEndpoint; - _p.endpointsByUUID = endpointsByUUID; - _p.endpointsByElement = endpointsByElement; - _p.finaliseConnection = _finaliseConnection; - _p.fireDetachEvent = fireDetachEvent; - _p.floatingConnections = floatingConnections; - _p.getParentFromParams = _getParentFromParams; - _p.elementId = _getId(_p.source); - var ep = new endpointFunc(_p); - ep.id = "ep_" + _idstamp(); - _eventFireProxy("click", "endpointClick", ep); - _eventFireProxy("dblclick", "endpointDblClick", ep); - _eventFireProxy("contextmenu", "contextmenu", ep); - if (!jsPlumbAdapter.headless) - _currentInstance.dragManager.endpointAdded(_p.source); - return ep; - }, - - /* - * performs the given function operation on all the connections found - * for the given element id; this means we find all the endpoints for - * the given element, and then for each endpoint find the connectors - * connected to it. then we pass each connection in to the given - * function. - */ - _operation = function(elId, func, endpointFunc) { - var endpoints = endpointsByElement[elId]; - if (endpoints && endpoints.length) { - for ( var i = 0, ii = endpoints.length; i < ii; i++) { - for ( var j = 0, jj = endpoints[i].connections.length; j < jj; j++) { - var retVal = func(endpoints[i].connections[j]); - // if the function passed in returns true, we exit. - // most functions return false. - if (retVal) return; - } - if (endpointFunc) endpointFunc(endpoints[i]); - } - } - }, - - _setDraggable = function(element, draggable) { - return _elementProxy(element, function(el, id) { - draggableStates[id] = draggable; - if (jsPlumb.CurrentLibrary.isDragSupported(el)) { - jsPlumb.CurrentLibrary.setDraggable(el, draggable); - } - }); - }, - /* - * private method to do the business of hiding/showing. - * - * @param el - * either Id of the element in question or a library specific - * object for the element. - * @param state - * String specifying a value for the css 'display' property - * ('block' or 'none'). - */ - _setVisible = function(el, state, alsoChangeEndpoints) { - state = state === "block"; - var endpointFunc = null; - if (alsoChangeEndpoints) { - if (state) endpointFunc = function(ep) { - ep.setVisible(true, true, true); - }; - else endpointFunc = function(ep) { - ep.setVisible(false, true, true); - }; - } - var info = _info(el); - _operation(info.id, function(jpc) { - if (state && alsoChangeEndpoints) { - // this test is necessary because this functionality is new, and i wanted to maintain backwards compatibility. - // this block will only set a connection to be visible if the other endpoint in the connection is also visible. - var oidx = jpc.sourceId === info.id ? 1 : 0; - if (jpc.endpoints[oidx].isVisible()) jpc.setVisible(true); - } - else // the default behaviour for show, and what always happens for hide, is to just set the visibility without getting clever. - jpc.setVisible(state); - }, endpointFunc); - }, - /* - * toggles the draggable state of the given element(s). - * el is either an id, or an element object, or a list of ids/element objects. - */ - _toggleDraggable = function(el) { - return _elementProxy(el, function(el, elId) { - var state = draggableStates[elId] == null ? false : draggableStates[elId]; - state = !state; - draggableStates[elId] = state; - jsPlumb.CurrentLibrary.setDraggable(el, state); - return state; - }); - }, - /** - * private method to do the business of toggling hiding/showing. - */ - _toggleVisible = function(elId, changeEndpoints) { - var endpointFunc = null; - if (changeEndpoints) { - endpointFunc = function(ep) { - var state = ep.isVisible(); - ep.setVisible(!state); - }; - } - _operation(elId, function(jpc) { - var state = jpc.isVisible(); - jpc.setVisible(!state); - }, endpointFunc); - // todo this should call _elementProxy, and pass in the - // _operation(elId, f) call as a function. cos _toggleDraggable does - // that. - }, - /** - * updates the offset and size for a given element, and stores the - * values. if 'offset' is not null we use that (it would have been - * passed in from a drag call) because it's faster; but if it is null, - * or if 'recalc' is true in order to force a recalculation, we get the current values. - */ - _updateOffset = function(params) { - var timestamp = params.timestamp, recalc = params.recalc, offset = params.offset, elId = params.elId, s; - if (_suspendDrawing && !timestamp) timestamp = _suspendedAt; - if (!recalc) { - if (timestamp && timestamp === offsetTimestamps[elId]) { - return {o:params.offset || offsets[elId], s:sizes[elId]}; - } - } - if (recalc || !offset) { // if forced repaint or no offset available, we recalculate. - // get the current size and offset, and store them - s = _gel(elId); - if (s != null) { - sizes[elId] = _getSize(s); - offsets[elId] = _getOffset(s, _currentInstance); - offsetTimestamps[elId] = timestamp; - } - } else { - offsets[elId] = offset; - if (sizes[elId] == null) { - s = _gel(elId); - if (s != null) sizes[elId] = _getSize(s); - } - offsetTimestamps[elId] = timestamp; - } - - if(offsets[elId] && !offsets[elId].right) { - offsets[elId].right = offsets[elId].left + sizes[elId][0]; - offsets[elId].bottom = offsets[elId].top + sizes[elId][1]; - offsets[elId].width = sizes[elId][0]; - offsets[elId].height = sizes[elId][1]; - offsets[elId].centerx = offsets[elId].left + (offsets[elId].width / 2); - offsets[elId].centery = offsets[elId].top + (offsets[elId].height / 2); - } - return {o:offsets[elId], s:sizes[elId]}; - }, - - // TODO comparison performance - _getCachedData = function(elId) { - var o = offsets[elId]; - if (!o) - return _updateOffset({elId:elId}); - else - return {o:o, s:sizes[elId]}; - }, - - /** - * gets an id for the given element, creating and setting one if - * necessary. the id is of the form - * - * jsPlumb_<instance index>_<index in instance> - * - * where "index in instance" is a monotonically increasing integer that starts at 0, - * for each instance. this method is used not only to assign ids to elements that do not - * have them but also to connections and endpoints. - */ - _getId = function(element, uuid, doNotCreateIfNotFound) { - if (jsPlumbUtil.isString(element)) return element; - if (element == null) return null; - var id = jsPlumbAdapter.getAttribute(element, "id"); - if (!id || id === "undefined") { - // check if fixed uuid parameter is given - if (arguments.length == 2 && arguments[1] !== undefined) - id = uuid; - else if (arguments.length == 1 || (arguments.length == 3 && !arguments[2])) - id = "jsPlumb_" + _instanceIndex + "_" + _idstamp(); - - if (!doNotCreateIfNotFound) jsPlumbAdapter.setAttribute(element, "id", id); - } - return id; - }; - - this.setConnectionBeingDragged = function(v) { - connectionBeingDragged = v; - }; - this.isConnectionBeingDragged = function() { - return connectionBeingDragged; - }; - - this.connectorClass = "_jsPlumb_connector"; - this.hoverClass = "_jsPlumb_hover"; - this.endpointClass = "_jsPlumb_endpoint"; - this.endpointConnectedClass = "_jsPlumb_endpoint_connected"; - this.endpointFullClass = "_jsPlumb_endpoint_full"; - this.endpointDropAllowedClass = "_jsPlumb_endpoint_drop_allowed"; - this.endpointDropForbiddenClass = "_jsPlumb_endpoint_drop_forbidden"; - this.overlayClass = "_jsPlumb_overlay"; - this.draggingClass = "_jsPlumb_dragging"; - this.elementDraggingClass = "_jsPlumb_element_dragging"; - this.sourceElementDraggingClass = "_jsPlumb_source_element_dragging"; - this.targetElementDraggingClass = "_jsPlumb_target_element_dragging"; - this.endpointAnchorClassPrefix = "_jsPlumb_endpoint_anchor"; - this.hoverSourceClass = "_jsPlumb_source_hover"; - this.hoverTargetClass = "_jsPlumb_target_hover"; - this.dragSelectClass = "_jsPlumb_drag_select"; - - this.Anchors = {}; - this.Connectors = { "canvas":{}, "svg":{}, "vml":{} }; - this.Endpoints = { "canvas":{}, "svg":{}, "vml":{} }; - this.Overlays = { "canvas":{}, "svg":{}, "vml":{}}; - this.ConnectorRenderers = {}; - this.SVG = "svg"; - this.CANVAS = "canvas"; - this.VML = "vml"; - - -// --------------------------- jsPLumbInstance public API --------------------------------------------------------- - - - this.addEndpoint = function(el, params, referenceParams) { - referenceParams = referenceParams || {}; - var p = jsPlumb.extend({}, referenceParams); - jsPlumb.extend(p, params); - p.endpoint = p.endpoint || _currentInstance.Defaults.Endpoint || jsPlumb.Defaults.Endpoint; - p.paintStyle = p.paintStyle || _currentInstance.Defaults.EndpointStyle || jsPlumb.Defaults.EndpointStyle; - // YUI wrapper - el = _convertYUICollection(el); - - var results = [], - inputs = (_ju.isArray(el) || (el.length != null && !_ju.isString(el))) ? el : [ el ]; - - for (var i = 0, j = inputs.length; i < j; i++) { - var _el = _dom(inputs[i]), id = _getId(_el); - p.source = _el; - - _updateOffset({ elId : id, timestamp:_suspendedAt }); - var e = _newEndpoint(p); - if (p.parentAnchor) e.parentAnchor = p.parentAnchor; - _ju.addToList(endpointsByElement, id, e); - var myOffset = offsets[id], - myWH = sizes[id], - anchorLoc = e.anchor.compute( { xy : [ myOffset.left, myOffset.top ], wh : myWH, element : e, timestamp:_suspendedAt }), - endpointPaintParams = { anchorLoc : anchorLoc, timestamp:_suspendedAt }; - - if (_suspendDrawing) endpointPaintParams.recalc = false; - if (!_suspendDrawing) e.paint(endpointPaintParams); - - results.push(e); - e._doNotDeleteOnDetach = true; // mark this as being added via addEndpoint. - } - - return results.length == 1 ? results[0] : results; - }; - - - this.addEndpoints = function(el, endpoints, referenceParams) { - var results = []; - for ( var i = 0, j = endpoints.length; i < j; i++) { - var e = _currentInstance.addEndpoint(el, endpoints[i], referenceParams); - if (_ju.isArray(e)) - Array.prototype.push.apply(results, e); - else results.push(e); - } - return results; - }; - - this.animate = function(el, properties, options) { - options = options || {}; - var ele = _gel(el), - id = _getId(el), - stepFunction = jsPlumb.CurrentLibrary.dragEvents.step, - completeFunction = jsPlumb.CurrentLibrary.dragEvents.complete; - - options[stepFunction] = _ju.wrap(options[stepFunction], function() { - _currentInstance.repaint(id); - }); - - // onComplete repaints, just to make sure everything looks good at the end of the animation. - options[completeFunction] = _ju.wrap(options[completeFunction], function() { - _currentInstance.repaint(id); - }); - - jsPlumb.CurrentLibrary.animate(ele, properties, options); - }; - - /** - * checks for a listener for the given condition, executing it if found, passing in the given value. - * condition listeners would have been attached using "bind" (which is, you could argue, now overloaded, since - * firing click events etc is a bit different to what this does). i thought about adding a "bindCondition" - * or something, but decided against it, for the sake of simplicity. jsPlumb will never fire one of these - * condition events anyway. - */ - this.checkCondition = function(conditionName, value) { - var l = _currentInstance.getListener(conditionName), - r = true; - - if (l && l.length > 0) { - try { - for (var i = 0, j = l.length; i < j; i++) { - r = r && l[i](value); - } - } - catch (e) { - _ju.log(_currentInstance, "cannot check condition [" + conditionName + "]" + e); - } - } - return r; - }; - - /** - * checks a condition asynchronously: fires the event handler and passes the handler - * a 'proceed' function and a 'stop' function. The handler MUST execute one or other - * of these once it has made up its mind. - * - * Note that although this reads the listener list for the given condition, it - * does not loop through and hit each listener, because that, with asynchronous - * callbacks, would be messy. so it uses only the first listener registered. - */ - this.checkASyncCondition = function(conditionName, value, proceed, stop) { - var l = _currentInstance.getListener(conditionName); - - if (l && l.length > 0) { - try { - l[0](value, proceed, stop); - } - catch (e) { - _ju.log(_currentInstance, "cannot asynchronously check condition [" + conditionName + "]" + e); - } - } - }; - - - this.connect = function(params, referenceParams) { - // prepare a final set of parameters to create connection with - var _p = _prepareConnectionParams(params, referenceParams), jpc; - // TODO probably a nicer return value if the connection was not made. _prepareConnectionParams - // will return null (and log something) if either endpoint was full. what would be nicer is to - // create a dedicated 'error' object. - if (_p) { - // create the connection. it is not yet registered - jpc = _newConnection(_p); - // now add it the model, fire an event, and redraw - _finaliseConnection(jpc, _p); - } - return jpc; - }; - - this.deleteEndpoint = function(object, doNotRepaintAfterwards) { - var _is = _currentInstance.setSuspendDrawing(true); - var endpoint = (typeof object == "string") ? endpointsByUUID[object] : object; - if (endpoint) { - _currentInstance.deleteObject({endpoint:endpoint}); - } - if(!_is) _currentInstance.setSuspendDrawing(false, doNotRepaintAfterwards); - return _currentInstance; - }; - - - this.deleteEveryEndpoint = function() { - var _is = _currentInstance.setSuspendDrawing(true); - for ( var id in endpointsByElement) { - var endpoints = endpointsByElement[id]; - if (endpoints && endpoints.length) { - for ( var i = 0, j = endpoints.length; i < j; i++) { - _currentInstance.deleteEndpoint(endpoints[i], true); - } - } - } - endpointsByElement = {}; - endpointsByUUID = {}; - _currentInstance.anchorManager.reset(); - _currentInstance.dragManager.reset(); - if(!_is) _currentInstance.setSuspendDrawing(false); - return _currentInstance; - }; - - var fireDetachEvent = function(jpc, doFireEvent, originalEvent) { - // may have been given a connection, or in special cases, an object - var connType = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), - argIsConnection = jpc.constructor == connType, - params = argIsConnection ? { - connection:jpc, - source : jpc.source, target : jpc.target, - sourceId : jpc.sourceId, targetId : jpc.targetId, - sourceEndpoint : jpc.endpoints[0], targetEndpoint : jpc.endpoints[1] - } : jpc; - - if (doFireEvent) - _currentInstance.fire("connectionDetached", params, originalEvent); - - _currentInstance.anchorManager.connectionDetached(params); - }; - - this.unregisterEndpoint = function(endpoint) { - if (endpoint._jsPlumb.uuid) endpointsByUUID[endpoint._jsPlumb.uuid] = null; - _currentInstance.anchorManager.deleteEndpoint(endpoint); - // TODO at least replace this with a removeWithFunction call. - for (var e in endpointsByElement) { - var endpoints = endpointsByElement[e]; - if (endpoints) { - var newEndpoints = []; - for (var i = 0, j = endpoints.length; i < j; i++) - if (endpoints[i] != endpoint) newEndpoints.push(endpoints[i]); - - endpointsByElement[e] = newEndpoints; - } - if(endpointsByElement[e].length <1){ - delete endpointsByElement[e]; - } - } - }; - - this.detach = function() { - - if (arguments.length === 0) return; - var connType = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), - firstArgIsConnection = arguments[0].constructor == connType, - params = arguments.length == 2 ? firstArgIsConnection ? (arguments[1] || {}) : arguments[0] : arguments[0], - fireEvent = (params.fireEvent !== false), - forceDetach = params.forceDetach, - conn = firstArgIsConnection ? arguments[0] : params.connection; - - if (conn) { - if (forceDetach || jsPlumbUtil.functionChain(true, false, [ - [ conn.endpoints[0], "isDetachAllowed", [ conn ] ], - [ conn.endpoints[1], "isDetachAllowed", [ conn ] ], - [ conn, "isDetachAllowed", [ conn ] ], - [ _currentInstance, "checkCondition", [ "beforeDetach", conn ] ] ])) { - - conn.endpoints[0].detach(conn, false, true, fireEvent); - } - } - else { - var _p = jsPlumb.extend( {}, params); // a backwards compatibility hack: source should be thought of as 'params' in this case. - // test for endpoint uuids to detach - if (_p.uuids) { - _getEndpoint(_p.uuids[0]).detachFrom(_getEndpoint(_p.uuids[1]), fireEvent); - } else if (_p.sourceEndpoint && _p.targetEndpoint) { - _p.sourceEndpoint.detachFrom(_p.targetEndpoint); - } else { - var sourceId = _getId(_dom(_p.source)), - targetId = _getId(_dom(_p.target)); - _operation(sourceId, function(jpc) { - if ((jpc.sourceId == sourceId && jpc.targetId == targetId) || (jpc.targetId == sourceId && jpc.sourceId == targetId)) { - if (_currentInstance.checkCondition("beforeDetach", jpc)) { - jpc.endpoints[0].detach(jpc, false, true, fireEvent); - } - } - }); - } - } - }; - - this.detachAllConnections = function(el, params) { - params = params || {}; - el = _dom(el); - var id = _getId(el), - endpoints = endpointsByElement[id]; - if (endpoints && endpoints.length) { - for ( var i = 0, j = endpoints.length; i < j; i++) { - endpoints[i].detachAll(params.fireEvent !== false); - } - } - return _currentInstance; - }; - - this.detachEveryConnection = function(params) { - params = params || {}; - _currentInstance.doWhileSuspended(function() { - for ( var id in endpointsByElement) { - var endpoints = endpointsByElement[id]; - if (endpoints && endpoints.length) { - for ( var i = 0, j = endpoints.length; i < j; i++) { - endpoints[i].detachAll(params.fireEvent !== false); - } - } - } - connections.splice(0); - }); - return _currentInstance; - }; - - /// not public. but of course its exposed. how to change this. - this.deleteObject = function(params) { - var result = { - endpoints : {}, - connections : {}, - endpointCount:0, - connectionCount:0 - }, - fireEvent = params.fireEvent !== false, - deleteAttachedObjects = params.deleteAttachedObjects !== false; - - var unravelConnection = function(connection) { - if(connection != null && result.connections[connection.id] == null) { - connection._jsPlumb && connection.setHover(false); - result.connections[connection.id] = connection; - result.connectionCount++; - if (deleteAttachedObjects) { - for (var j = 0; j < connection.endpoints.length; j++) { - if (connection.endpoints[j]._deleteOnDetach) - unravelEndpoint(connection.endpoints[j]); - } - } - } - }; - var unravelEndpoint = function(endpoint) { - if(endpoint != null && result.endpoints[endpoint.id] == null) { - endpoint._jsPlumb && endpoint.setHover(false); - result.endpoints[endpoint.id] = endpoint; - result.endpointCount++; - - if (deleteAttachedObjects) { - for (var i = 0; i < endpoint.connections.length; i++) { - var c = endpoint.connections[i]; - unravelConnection(c); - } - } - } - }; - - if (params.connection) - unravelConnection(params.connection); - else unravelEndpoint(params.endpoint); - - // loop through connections - for (var i in result.connections) { - var c = result.connections[i]; - c.endpoints[0].detachFromConnection(c); - c.endpoints[1].detachFromConnection(c); - //_currentInstance.unregisterConnection(c); - jsPlumbUtil.removeWithFunction(connections, function(_c) { - return c.id == _c.id; - }); - fireDetachEvent(c, fireEvent, params.originalEvent); - c.cleanup(); - c.destroy(); - } - - // loop through endpoints - for (var j in result.endpoints) { - var e = result.endpoints[j]; - _currentInstance.unregisterEndpoint(e); - // FIRE some endpoint deleted event? - e.cleanup(); - e.destroy(); - } - - return result; - }; - - this.draggable = function(el, options) { - var i,j,ele; - // allows for array or jquery/mootools selector - if (typeof el == 'object' && el.length) { - for (i = 0, j = el.length; i < j; i++) { - ele = _dom(el[i]); - if (ele) _initDraggableIfNecessary(ele, true, options); - } - } - // allows for YUI selector - else if (el._nodes) { // TODO this is YUI specific; really the logic should be forced - // into the library adapters (for jquery and mootools aswell) - for (i = 0, j = el._nodes.length; i < j; i++) { - ele = _dom(el._nodes[i]); - if (ele) _initDraggableIfNecessary(ele, true, options); - } - } - else { - ele = _dom(el); - if (ele) _initDraggableIfNecessary(ele, true, options); - } - return _currentInstance; - }; - - - // just a library-agnostic wrapper. - this.extend = function(o1, o2) { - return jsPlumb.CurrentLibrary.extend(o1, o2); - }; - - // helpers for select/selectEndpoints - var _setOperation = function(list, func, args, selector) { - for (var i = 0, j = list.length; i < j; i++) { - list[i][func].apply(list[i], args); - } - return selector(list); - }, - _getOperation = function(list, func, args) { - var out = []; - for (var i = 0, j = list.length; i < j; i++) { - out.push([ list[i][func].apply(list[i], args), list[i] ]); - } - return out; - }, - setter = function(list, func, selector) { - return function() { - return _setOperation(list, func, arguments, selector); - }; - }, - getter = function(list, func) { - return function() { - return _getOperation(list, func, arguments); - }; - }, - prepareList = function(input, doNotGetIds) { - var r = []; - if (input) { - if (typeof input == 'string') { - if (input === "*") return input; - r.push(input); - } - else { - input = _gel(input); - if (doNotGetIds) r = input; - else { - for (var i = 0, j = input.length; i < j; i++) - r.push(_info(input[i]).id); - } - } - } - return r; - }, - filterList = function(list, value, missingIsFalse) { - if (list === "*") return true; - return list.length > 0 ? jsPlumbUtil.indexOf(list, value) != -1 : !missingIsFalse; - }; - - // get some connections, specifying source/target/scope - this.getConnections = function(options, flat) { - if (!options) { - options = {}; - } else if (options.constructor == String) { - options = { "scope": options }; - } - var scope = options.scope || _currentInstance.getDefaultScope(), - scopes = prepareList(scope, true), - sources = prepareList(options.source), - targets = prepareList(options.target), - results = (!flat && scopes.length > 1) ? {} : [], - _addOne = function(scope, obj) { - if (!flat && scopes.length > 1) { - var ss = results[scope]; - if (ss == null) { - ss = results[scope] = []; - } - ss.push(obj); - } else results.push(obj); - }; - - for ( var j = 0, jj = connections.length; j < jj; j++) { - var c = connections[j]; - if (filterList(scopes, c.scope) && filterList(sources, c.sourceId) && filterList(targets, c.targetId)) - _addOne(c.scope, c); - } - - return results; - }; - - var _curryEach = function(list, executor) { - return function(f) { - for (var i = 0, ii = list.length; i < ii; i++) { - f(list[i]); - } - return executor(list); - }; - }, - _curryGet = function(list) { - return function(idx) { - return list[idx]; - }; - }; - - var _makeCommonSelectHandler = function(list, executor) { - var out = { - length:list.length, - each:_curryEach(list, executor), - get:_curryGet(list) - }, - setters = ["setHover", "removeAllOverlays", "setLabel", "addClass", "addOverlay", "removeOverlay", - "removeOverlays", "showOverlay", "hideOverlay", "showOverlays", "hideOverlays", "setPaintStyle", - "setHoverPaintStyle", "setSuspendEvents", "setParameter", "setParameters", "setVisible", - "repaint", "addType", "toggleType", "removeType", "removeClass", "setType", "bind", "unbind" ], - - getters = ["getLabel", "getOverlay", "isHover", "getParameter", "getParameters", "getPaintStyle", - "getHoverPaintStyle", "isVisible", "hasType", "getType", "isSuspendEvents" ], - i, ii; - - for (i = 0, ii = setters.length; i < ii; i++) - out[setters[i]] = setter(list, setters[i], executor); - - for (i = 0, ii = getters.length; i < ii; i++) - out[getters[i]] = getter(list, getters[i]); - - return out; - }; - - var _makeConnectionSelectHandler = function(list) { - var common = _makeCommonSelectHandler(list, _makeConnectionSelectHandler); - return jsPlumb.CurrentLibrary.extend(common, { - // setters - setDetachable:setter(list, "setDetachable", _makeConnectionSelectHandler), - setReattach:setter(list, "setReattach", _makeConnectionSelectHandler), - setConnector:setter(list, "setConnector", _makeConnectionSelectHandler), - detach:function() { - for (var i = 0, ii = list.length; i < ii; i++) - _currentInstance.detach(list[i]); - }, - // getters - isDetachable:getter(list, "isDetachable"), - isReattach:getter(list, "isReattach") - }); - }; - - var _makeEndpointSelectHandler = function(list) { - var common = _makeCommonSelectHandler(list, _makeEndpointSelectHandler); - return jsPlumb.CurrentLibrary.extend(common, { - setEnabled:setter(list, "setEnabled", _makeEndpointSelectHandler), - setAnchor:setter(list, "setAnchor", _makeEndpointSelectHandler), - isEnabled:getter(list, "isEnabled"), - detachAll:function() { - for (var i = 0, ii = list.length; i < ii; i++) - list[i].detachAll(); - }, - "remove":function() { - for (var i = 0, ii = list.length; i < ii; i++) - _currentInstance.deleteObject({endpoint:list[i]}); - } - }); - }; - - - this.select = function(params) { - params = params || {}; - params.scope = params.scope || "*"; - return _makeConnectionSelectHandler(params.connections || _currentInstance.getConnections(params, true)); - }; - - this.selectEndpoints = function(params) { - params = params || {}; - params.scope = params.scope || "*"; - var noElementFilters = !params.element && !params.source && !params.target, - elements = noElementFilters ? "*" : prepareList(params.element), - sources = noElementFilters ? "*" : prepareList(params.source), - targets = noElementFilters ? "*" : prepareList(params.target), - scopes = prepareList(params.scope, true); - - var ep = []; - - for (var el in endpointsByElement) { - var either = filterList(elements, el, true), - source = filterList(sources, el, true), - sourceMatchExact = sources != "*", - target = filterList(targets, el, true), - targetMatchExact = targets != "*"; - - // if they requested 'either' then just match scope. otherwise if they requested 'source' (not as a wildcard) then we have to match only endpoints that have isSource set to to true, and the same thing with isTarget. - if ( either || source || target ) { - inner: - for (var i = 0, ii = endpointsByElement[el].length; i < ii; i++) { - var _ep = endpointsByElement[el][i]; - if (filterList(scopes, _ep.scope, true)) { - - var noMatchSource = (sourceMatchExact && sources.length > 0 && !_ep.isSource), - noMatchTarget = (targetMatchExact && targets.length > 0 && !_ep.isTarget); - - if (noMatchSource || noMatchTarget) - continue inner; - - ep.push(_ep); - } - } - } - } - - return _makeEndpointSelectHandler(ep); - }; - - // get all connections managed by the instance of jsplumb. - this.getAllConnections = function() { return connections; }; - this.getDefaultScope = function() { return DEFAULT_SCOPE; }; - // get an endpoint by uuid. - this.getEndpoint = _getEndpoint; - // get endpoints for some element. - this.getEndpoints = function(el) { return endpointsByElement[_info(el).id]; }; - // gets the default endpoint type. used when subclassing. see wiki. - this.getDefaultEndpointType = function() { return jsPlumb.Endpoint; }; - // gets the default connection type. used when subclassing. see wiki. - this.getDefaultConnectionType = function() { return jsPlumb.Connection; }; - /* - * Gets an element's id, creating one if necessary. really only exposed - * for the lib-specific functionality to access; would be better to pass - * the current instance into the lib-specific code (even though this is - * a static call. i just don't want to expose it to the public API). - */ - this.getId = _getId; - this.getOffset = function(id) { - var o = offsets[id]; - return _updateOffset({elId:id}); - }; - - this.getSelector = function() { - return jsPlumb.CurrentLibrary.getSelector.apply(null, arguments); - }; - - // get the size of the element with the given id, perhaps from cache. - this.getSize = function(id) { - var s = sizes[id]; - if (!s) _updateOffset({elId:id}); - return sizes[id]; - }; - - this.appendElement = _appendElement; - - var _hoverSuspended = false; - this.isHoverSuspended = function() { return _hoverSuspended; }; - this.setHoverSuspended = function(s) { _hoverSuspended = s; }; - - var _isAvailable = function(m) { - return function() { - return jsPlumbAdapter.isRenderModeAvailable(m); - }; - }; - this.isCanvasAvailable = _isAvailable("canvas"); - this.isSVGAvailable = _isAvailable("svg"); - this.isVMLAvailable = _isAvailable("vml"); - - // set an element's connections to be hidden - this.hide = function(el, changeEndpoints) { - _setVisible(el, "none", changeEndpoints); - return _currentInstance; - }; - - // exposed for other objects to use to get a unique id. - this.idstamp = _idstamp; - - this.connectorsInitialized = false; - var connectorTypes = [], rendererTypes = ["canvas", "svg", "vml"]; - this.registerConnectorType = function(connector, name) { - connectorTypes.push([connector, name]); - }; - - /** - * callback from the current library to tell us to prepare ourselves (attach - * mouse listeners etc; can't do that until the library has provided a bind method) - */ - this.init = function() { - var _oneType = function(renderer, name, fn) { - jsPlumb.Connectors[renderer][name] = function() { - fn.apply(this, arguments); - jsPlumb.ConnectorRenderers[renderer].apply(this, arguments); - }; - jsPlumbUtil.extend(jsPlumb.Connectors[renderer][name], [ fn, jsPlumb.ConnectorRenderers[renderer]]); - }; - - if (!jsPlumb.connectorsInitialized) { - for (var i = 0; i < connectorTypes.length; i++) { - for (var j = 0; j < rendererTypes.length; j++) { - _oneType(rendererTypes[j], connectorTypes[i][1], connectorTypes[i][0]); - } - - } - jsPlumb.connectorsInitialized = true; - } - - if (!initialized) { - _currentInstance.anchorManager = new jsPlumb.AnchorManager({jsPlumbInstance:_currentInstance}); - _currentInstance.setRenderMode(_currentInstance.Defaults.RenderMode); // calling the method forces the capability logic to be run. - initialized = true; - _currentInstance.fire("ready", _currentInstance); - } - }.bind(this); - - this.log = log; - this.jsPlumbUIComponent = jsPlumbUIComponent; - - /* - * Creates an anchor with the given params. - * - * - * Returns: The newly created Anchor. - * Throws: an error if a named anchor was not found. - */ - this.makeAnchor = function() { - var _a = function(t, p) { - if (jsPlumb.Anchors[t]) return new jsPlumb.Anchors[t](p); - if (!_currentInstance.Defaults.DoNotThrowErrors) - throw { msg:"jsPlumb: unknown anchor type '" + t + "'" }; - }; - if (arguments.length === 0) return null; - var specimen = arguments[0], elementId = arguments[1], jsPlumbInstance = arguments[2], newAnchor = null; - // if it appears to be an anchor already... - if (specimen.compute && specimen.getOrientation) return specimen; //TODO hazy here about whether it should be added or is already added somehow. - // is it the name of an anchor type? - else if (typeof specimen == "string") { - newAnchor = _a(arguments[0], {elementId:elementId, jsPlumbInstance:_currentInstance}); - } - // is it an array? it will be one of: - // an array of [name, params] - this defines a single anchor - // an array of arrays - this defines some dynamic anchors - // an array of numbers - this defines a single anchor. - else if (_ju.isArray(specimen)) { - if (_ju.isArray(specimen[0]) || _ju.isString(specimen[0])) { - if (specimen.length == 2 && _ju.isString(specimen[0]) && _ju.isObject(specimen[1])) { - var pp = jsPlumb.extend({elementId:elementId, jsPlumbInstance:_currentInstance}, specimen[1]); - newAnchor = _a(specimen[0], pp); - } - else - newAnchor = new jsPlumb.DynamicAnchor({anchors:specimen, selector:null, elementId:elementId, jsPlumbInstance:jsPlumbInstance}); - } - else { - var anchorParams = { - x:specimen[0], y:specimen[1], - orientation : (specimen.length >= 4) ? [ specimen[2], specimen[3] ] : [0,0], - offsets : (specimen.length >= 6) ? [ specimen[4], specimen[5] ] : [ 0, 0 ], - elementId:elementId, - jsPlumbInstance:jsPlumbInstance, - cssClass:specimen.length == 7 ? specimen[6] : null - }; - newAnchor = new jsPlumb.Anchor(anchorParams); - newAnchor.clone = function() { return new jsPlumb.Anchor(anchorParams); }; - } - } - - if (!newAnchor.id) newAnchor.id = "anchor_" + _idstamp(); - return newAnchor; - }; - - /** - * makes a list of anchors from the given list of types or coords, eg - * ["TopCenter", "RightMiddle", "BottomCenter", [0, 1, -1, -1] ] - */ - this.makeAnchors = function(types, elementId, jsPlumbInstance) { - var r = []; - for ( var i = 0, ii = types.length; i < ii; i++) { - if (typeof types[i] == "string") - r.push(jsPlumb.Anchors[types[i]]({elementId:elementId, jsPlumbInstance:jsPlumbInstance})); - else if (_ju.isArray(types[i])) - r.push(_currentInstance.makeAnchor(types[i], elementId, jsPlumbInstance)); - } - return r; - }; - - /** - * Makes a dynamic anchor from the given list of anchors (which may be in shorthand notation as strings or dimension arrays, or Anchor - * objects themselves) and the given, optional, anchorSelector function (jsPlumb uses a default if this is not provided; most people will - * not need to provide this - i think). - */ - this.makeDynamicAnchor = function(anchors, anchorSelector) { - return new jsPlumb.DynamicAnchor({anchors:anchors, selector:anchorSelector, elementId:null, jsPlumbInstance:_currentInstance}); - }; - -// --------------------- makeSource/makeTarget ---------------------------------------------- - - var _targetEndpointDefinitions = {}, - _targetEndpoints = {}, - _targetEndpointsUnique = {}, - _targetMaxConnections = {}, - _setEndpointPaintStylesAndAnchor = function(ep, epIndex) { - ep.paintStyle = ep.paintStyle || - _currentInstance.Defaults.EndpointStyles[epIndex] || - _currentInstance.Defaults.EndpointStyle || - jsPlumb.Defaults.EndpointStyles[epIndex] || - jsPlumb.Defaults.EndpointStyle; - ep.hoverPaintStyle = ep.hoverPaintStyle || - _currentInstance.Defaults.EndpointHoverStyles[epIndex] || - _currentInstance.Defaults.EndpointHoverStyle || - jsPlumb.Defaults.EndpointHoverStyles[epIndex] || - jsPlumb.Defaults.EndpointHoverStyle; - - ep.anchor = ep.anchor || - _currentInstance.Defaults.Anchors[epIndex] || - _currentInstance.Defaults.Anchor || - jsPlumb.Defaults.Anchors[epIndex] || - jsPlumb.Defaults.Anchor; - - ep.endpoint = ep.endpoint || - _currentInstance.Defaults.Endpoints[epIndex] || - _currentInstance.Defaults.Endpoint || - jsPlumb.Defaults.Endpoints[epIndex] || - jsPlumb.Defaults.Endpoint; - }, - // TODO put all the source stuff inside one parent, keyed by id. - _sourceEndpointDefinitions = {}, - _sourceEndpoints = {}, - _sourceEndpointsUnique = {}, - _sourcesEnabled = {}, - _sourceTriggers = {}, - _sourceMaxConnections = {}, - _targetsEnabled = {}, - selectorFilter = function(evt, _el, selector) { - var t = evt.target || evt.srcElement, ok = false, - sel = _currentInstance.getSelector(_el, selector); - for (var j = 0; j < sel.length; j++) { - if (sel[j] == t) { - ok = true; - break; - } - } - return ok; - }; - - // see API docs - this.makeTarget = function(el, params, referenceParams) { - - // put jsplumb ref into params without altering the params passed in - var p = jsPlumb.extend({_jsPlumb:_currentInstance}, referenceParams); - jsPlumb.extend(p, params); - - // calculate appropriate paint styles and anchor from the params given - _setEndpointPaintStylesAndAnchor(p, 1); - - var jpcl = jsPlumb.CurrentLibrary, - targetScope = p.scope || _currentInstance.Defaults.Scope, - deleteEndpointsOnDetach = !(p.deleteEndpointsOnDetach === false), - maxConnections = p.maxConnections || -1, - onMaxConnections = p.onMaxConnections; - - _doOne = function(el) { - - // get the element's id and store the endpoint definition for it. jsPlumb.connect calls will look for one of these, - // and use the endpoint definition if found. - // decode the info for this element (id and element) - var elInfo = _info(el), - elid = elInfo.id, - proxyComponent = new jsPlumbUIComponent(p), - dropOptions = jsPlumb.extend({}, p.dropOptions || {}); - - // store the definitions keyed against the element id. - _targetEndpointDefinitions[elid] = p; - _targetEndpointsUnique[elid] = p.uniqueEndpoint; - _targetMaxConnections[elid] = maxConnections; - _targetsEnabled[elid] = true; - - var _drop = function() { - _currentInstance.currentlyDragging = false; - var originalEvent = jsPlumb.CurrentLibrary.getDropEvent(arguments), - targetCount = _currentInstance.select({target:elid}).length, - draggable = _gel(jpcl.getDragObject(arguments)), - id = _currentInstance.getAttribute(draggable, "dragId"), - scope = _currentInstance.getAttribute(draggable, "originalScope"), - jpc = floatingConnections[id], - idx = jpc.endpoints[0].isFloating() ? 0 : 1, - // this is not necessarily correct. if the source is being dragged, - // then the source endpoint is actually the currently suspended endpoint. - source = jpc.endpoints[0], - _endpoint = p.endpoint ? jsPlumb.extend({}, p.endpoint) : {}; - - if (!_targetsEnabled[elid] || _targetMaxConnections[elid] > 0 && targetCount >= _targetMaxConnections[elid]){ - if (onMaxConnections) { - // TODO here we still have the id of the floating element, not the - // actual target. - onMaxConnections({ - element:elInfo.el, - connection:jpc - }, originalEvent); - } - return false; - } - - // unlock the source anchor to allow it to refresh its position if necessary - source.anchor.locked = false; - - // restore the original scope if necessary (issue 57) - if (scope) jpcl.setDragScope(draggable, scope); - - // check if drop is allowed here. - // if the source is being dragged then in fact - // the source and target ids to pass into the drop interceptor are - // source - elid - // target - jpc's targetId - // - // otherwise the ids are - // source - jpc.sourceId - // target - elid - // - var _continue = proxyComponent.isDropAllowed(idx === 0 ? elid : jpc.sourceId, idx === 0 ? jpc.targetId : elid, jpc.scope, jpc, null); - - // reinstate any suspended endpoint; this just puts the connection back into - // a state in which it will report sensible values if someone asks it about - // its target. we're going to throw this connection away shortly so it doesnt matter - // if we manipulate it a bit. - if (jpc.suspendedEndpoint) { - jpc[idx ? "targetId" : "sourceId"] = jpc.suspendedEndpoint.elementId; - jpc[idx ? "target" : "source"] = jpc.suspendedEndpoint.element; - jpc.endpoints[idx] = jpc.suspendedEndpoint; - } - - if (_continue) { - - // make a new Endpoint for the target - var _el = jpcl.getElementObject(elInfo.el), - newEndpoint = _targetEndpoints[elid] || _currentInstance.addEndpoint(_el, p); - - if (p.uniqueEndpoint) _targetEndpoints[elid] = newEndpoint; // may of course just store what it just pulled out. that's ok. - // TODO test options to makeTarget to see if we should do this? - newEndpoint._doNotDeleteOnDetach = false; // reset. - newEndpoint._deleteOnDetach = true; - - // if the anchor has a 'positionFinder' set, then delegate to that function to find - // out where to locate the anchor. - if (newEndpoint.anchor.positionFinder != null) { - var dropPosition = jpcl.getUIPosition(arguments, _currentInstance.getZoom()), - elPosition = _getOffset(_el, _currentInstance), - elSize = _getSize(_el), - ap = newEndpoint.anchor.positionFinder(dropPosition, elPosition, elSize, newEndpoint.anchor.constructorParams); - newEndpoint.anchor.x = ap[0]; - newEndpoint.anchor.y = ap[1]; - // now figure an orientation for it..kind of hard to know what to do actually. probably the best thing i can do is to - // support specifying an orientation in the anchor's spec. if one is not supplied then i will make the orientation - // be what will cause the most natural link to the source: it will be pointing at the source, but it needs to be - // specified in one axis only, and so how to make that choice? i think i will use whichever axis is the one in which - // the target is furthest away from the source. - } - - // change the target endpoint and target element information. really this should be - // done on a method on connection - jpc[idx ? "target" : "source"] = newEndpoint.element; - jpc[idx ? "targetId" : "sourceId"] = newEndpoint.elementId; - jpc.endpoints[idx].detachFromConnection(jpc); - if (jpc.endpoints[idx]._deleteOnDetach) - jpc.endpoints[idx].deleteAfterDragStop = true; // tell this endpoint to delet itself after drag stop. - // set new endpoint, and configure the settings for endpoints to delete on detach - newEndpoint.addConnection(jpc); - jpc.endpoints[idx] = newEndpoint; - jpc.deleteEndpointsOnDetach = deleteEndpointsOnDetach; - - // inform the anchor manager to update its target endpoint for this connection. - // TODO refactor to make this a single method. - if (idx == 1) - _currentInstance.anchorManager.updateOtherEndpoint(jpc.sourceId, jpc.suspendedElementId, jpc.targetId, jpc); - else - _currentInstance.anchorManager.sourceChanged(jpc.suspendedEndpoint.elementId, jpc.sourceId, jpc); - - _finaliseConnection(jpc, null, originalEvent); - - } - // if not allowed to drop... - else { - // TODO this code is identical (pretty much) to what happens when a connection - // dragged from a normal endpoint is in this situation. refactor. - // is this an existing connection, and will we reattach? - // TODO also this assumes the source needs to detach - is that always valid? - if (jpc.suspendedEndpoint) { - if (jpc.isReattach()) { - jpc.setHover(false); - jpc.floatingAnchorIndex = null; - jpc.suspendedEndpoint.addConnection(jpc); - _currentInstance.repaint(source.elementId); - } - else - source.detach(jpc, false, true, true, originalEvent); // otherwise, detach the connection and tell everyone about it. - } - - } - }; - - // wrap drop events as needed and initialise droppable - var dropEvent = jpcl.dragEvents.drop; - dropOptions.scope = dropOptions.scope || targetScope; - dropOptions[dropEvent] = _ju.wrap(dropOptions[dropEvent], _drop); - jpcl.initDroppable(_gel(elInfo.el), dropOptions, true); - }; - - // YUI collection fix - el = _convertYUICollection(el); - // make an array if only given one element - var inputs = el.length && el.constructor != String ? el : [ el ]; - - // register each one in the list. - for (var i = 0, ii = inputs.length; i < ii; i++) { - _doOne(inputs[i]); - } - - return _currentInstance; - }; - - // see api docs - this.unmakeTarget = function(el, doNotClearArrays) { - var info = _info(el); - - jsPlumb.CurrentLibrary.destroyDroppable(info.el); - // TODO this is not an exhaustive unmake of a target, since it does not remove the droppable stuff from - // the element. the effect will be to prevent it from behaving as a target, but it's not completely purged. - if (!doNotClearArrays) { - delete _targetEndpointDefinitions[info.id]; - delete _targetEndpointsUnique[info.id]; - delete _targetMaxConnections[info.id]; - delete _targetsEnabled[info.id]; - } - - return _currentInstance; - }; - - // see api docs - this.makeSource = function(el, params, referenceParams) { - var p = jsPlumb.extend({}, referenceParams); - jsPlumb.extend(p, params); - _setEndpointPaintStylesAndAnchor(p, 0); - var jpcl = jsPlumb.CurrentLibrary, - maxConnections = p.maxConnections || -1, - onMaxConnections = p.onMaxConnections, - _doOne = function(elInfo) { - // get the element's id and store the endpoint definition for it. jsPlumb.connect calls will look for one of these, - // and use the endpoint definition if found. - var elid = elInfo.id, - _el = _gel(elInfo.el), - parentElement = function() { - return p.parent == null ? null : p.parent === "parent" ? elInfo.el.parentNode : _dom(p.parent); - }, - idToRegisterAgainst = p.parent != null ? _currentInstance.getId(parentElement()) : elid; - - _sourceEndpointDefinitions[idToRegisterAgainst] = p; - _sourceEndpointsUnique[idToRegisterAgainst] = p.uniqueEndpoint; - _sourcesEnabled[idToRegisterAgainst] = true; - - var stopEvent = jpcl.dragEvents.stop, - dragEvent = jpcl.dragEvents.drag, - dragOptions = jsPlumb.extend({ }, p.dragOptions || {}), - existingDrag = dragOptions.drag, - existingStop = dragOptions.stop, - ep = null, - endpointAddedButNoDragYet = false; - - _sourceMaxConnections[idToRegisterAgainst] = maxConnections; - - // set scope if its not set in dragOptions but was passed in in params - dragOptions.scope = dragOptions.scope || p.scope; - - dragOptions[dragEvent] = _ju.wrap(dragOptions[dragEvent], function() { - if (existingDrag) existingDrag.apply(this, arguments); - endpointAddedButNoDragYet = false; - }); - - dragOptions[stopEvent] = _ju.wrap(dragOptions[stopEvent], function() { - - if (existingStop) existingStop.apply(this, arguments); - _currentInstance.currentlyDragging = false; - if (ep._jsPlumb != null) { // if not cleaned up... - - jpcl.unbind(ep.canvas, "mousedown"); - - // reset the anchor to the anchor that was initially provided. the one we were using to drag - // the connection was just a placeholder that was located at the place the user pressed the - // mouse button to initiate the drag. - var anchorDef = p.anchor || _currentInstance.Defaults.Anchor, - oldAnchor = ep.anchor, - oldConnection = ep.connections[0]; - - ep.setAnchor(_currentInstance.makeAnchor(anchorDef, elid, _currentInstance), true); - - if (p.parent) { - var parent = parentElement(); - if (parent) { - var currentId = ep.elementId, - potentialParent = p.container || _currentInstance.Defaults.Container || jsPlumb.Defaults.Container; - - ep.setElement(parent, potentialParent); - ep.endpointWillMoveAfterConnection = false; - //_currentInstance.anchorManager.rehomeEndpoint(ep, currentId, parent); - oldConnection.previousConnection = null; - // remove from connectionsByScope - jsPlumbUtil.removeWithFunction(connections, function(c) { - return c.id === oldConnection.id; - }); - _currentInstance.anchorManager.connectionDetached({ - sourceId:oldConnection.sourceId, - targetId:oldConnection.targetId, - connection:oldConnection - }); - _finaliseConnection(oldConnection); - } - } - - ep.repaint(); - _currentInstance.repaint(ep.elementId); - _currentInstance.repaint(oldConnection.targetId); - } - }); - // when the user presses the mouse, add an Endpoint, if we are enabled. - var mouseDownListener = function(e) { - - // if disabled, return. - if (!_sourcesEnabled[idToRegisterAgainst]) return; - - // if a filter was given, run it, and return if it says no. - if (p.filter) { - var evt = jpcl.getOriginalEvent(e), - r = jsPlumbUtil.isString(p.filter) ? selectorFilter(evt, _el, p.filter) : p.filter(evt, _el); - - if (r === false) return; - } - - // if maxConnections reached - var sourceCount = _currentInstance.select({source:idToRegisterAgainst}).length; - if (_sourceMaxConnections[idToRegisterAgainst] >= 0 && sourceCount >= _sourceMaxConnections[idToRegisterAgainst]) { - if (onMaxConnections) { - onMaxConnections({ - element:_el, - maxConnections:maxConnections - }, e); - } - return false; - } - - // make sure we have the latest offset for this div - var myOffsetInfo = _updateOffset({elId:elid}).o, - z = _currentInstance.getZoom(), - x = ( ((e.pageX || e.page.x) / z) - myOffsetInfo.left) / myOffsetInfo.width, - y = ( ((e.pageY || e.page.y) / z) - myOffsetInfo.top) / myOffsetInfo.height, - parentX = x, - parentY = y; - - // if there is a parent, the endpoint will actually be added to it now, rather than the div - // that was the source. in that case, we have to adjust the anchor position so it refers to - // the parent. - if (p.parent) { - var pEl = parentElement(), pId = _getId(pEl); - myOffsetInfo = _updateOffset({elId:pId}).o; - parentX = ((e.pageX || e.page.x) - myOffsetInfo.left) / myOffsetInfo.width; - parentY = ((e.pageY || e.page.y) - myOffsetInfo.top) / myOffsetInfo.height; - } - - // we need to override the anchor in here, and force 'isSource', but we don't want to mess with - // the params passed in, because after a connection is established we're going to reset the endpoint - // to have the anchor we were given. - var tempEndpointParams = {}; - jsPlumb.extend(tempEndpointParams, p); - tempEndpointParams.isSource = true; - tempEndpointParams.anchor = [x,y,0,0]; - tempEndpointParams.parentAnchor = [ parentX, parentY, 0, 0 ]; - tempEndpointParams.dragOptions = dragOptions; - // if a parent was given we need to turn that into a "container" argument. this is, by default, - // the parent of the element we will move to, so parent of p.parent in this case. however, if - // the user has specified a 'container' on the endpoint definition or on - // the defaults, we should use that. - if (p.parent) { - var potentialParent = tempEndpointParams.container || _currentInstance.Defaults.Container || jsPlumb.Defaults.Container; - if (potentialParent) - tempEndpointParams.container = potentialParent; - else - tempEndpointParams.container = jsPlumb.CurrentLibrary.getParent(parentElement()); - } - - ep = _currentInstance.addEndpoint(elid, tempEndpointParams); - - endpointAddedButNoDragYet = true; - // we set this to prevent connections from firing attach events before this function has had a chance - // to move the endpoint. - ep.endpointWillMoveAfterConnection = p.parent != null; - ep.endpointWillMoveTo = p.parent ? parentElement() : null; - - // TODO test options to makeSource to see if we should do this? - ep._doNotDeleteOnDetach = false; // reset. - ep._deleteOnDetach = true; - - var _delTempEndpoint = function() { - // this mouseup event is fired only if no dragging occurred, by jquery and yui, but for mootools - // it is fired even if dragging has occurred, in which case we would blow away a perfectly - // legitimate endpoint, were it not for this check. the flag is set after adding an - // endpoint and cleared in a drag listener we set in the dragOptions above. - if(endpointAddedButNoDragYet) { - endpointAddedButNoDragYet = false; - _currentInstance.deleteEndpoint(ep); - } - }; - - _currentInstance.registerListener(ep.canvas, "mouseup", _delTempEndpoint); - _currentInstance.registerListener(_el, "mouseup", _delTempEndpoint); - - // and then trigger its mousedown event, which will kick off a drag, which will start dragging - // a new connection from this endpoint. - jpcl.trigger(ep.canvas, "mousedown", e); - - }; - - // register this on jsPlumb so that it can be cleared by a reset. - _currentInstance.registerListener(_el, "mousedown", mouseDownListener); - _sourceTriggers[elid] = mouseDownListener; - - // lastly, if a filter was provided, set it as a dragFilter on the element, - // to prevent the element drag function from kicking in when we want to - // drag a new connection - if (p.filter && jsPlumbUtil.isString(p.filter)) { - jpcl.setDragFilter(_el, p.filter); - } - }; - - el = _convertYUICollection(el); - - var inputs = el.length && el.constructor != String ? el : [ el ]; - - for (var i = 0, ii = inputs.length; i < ii; i++) { - _doOne(_info(inputs[i])); - } - - return _currentInstance; - }; - - // see api docs - this.unmakeSource = function(el, doNotClearArrays) { - var info = _info(el), - mouseDownListener = _sourceTriggers[info.id]; - - if (mouseDownListener) - _currentInstance.unregisterListener(info.el, "mousedown", mouseDownListener); - - if (!doNotClearArrays) { - delete _sourceEndpointDefinitions[info.id]; - delete _sourceEndpointsUnique[info.id]; - delete _sourcesEnabled[info.id]; - delete _sourceTriggers[info.id]; - delete _sourceMaxConnections[info.id]; - } - - return _currentInstance; - }; - - // see api docs - this.unmakeEverySource = function() { - for (var i in _sourcesEnabled) - _currentInstance.unmakeSource(i, true); - - _sourceEndpointDefinitions = {}; - _sourceEndpointsUnique = {}; - _sourcesEnabled = {}; - _sourceTriggers = {}; - }; - - // see api docs - this.unmakeEveryTarget = function() { - for (var i in _targetsEnabled) - _currentInstance.unmakeTarget(i, true); - - _targetEndpointDefinitions = {}; - _targetEndpointsUnique = {}; - _targetMaxConnections = {}; - _targetsEnabled = {}; - - return _currentInstance; - }; - - // does the work of setting a source enabled or disabled. - var _setEnabled = function(type, el, state, toggle) { - var a = type == "source" ? _sourcesEnabled : _targetsEnabled; - el = _convertYUICollection(el); - - if (_ju.isString(el)) a[el] = toggle ? !a[el] : state; - else if (el.length) { - for (var i = 0, ii = el.length; i < ii; i++) { - var info = _info(el[i]); - a[info.id] = toggle ? !a[info.id] : state; - } - } - return _currentInstance; - }; - - this.toggleSourceEnabled = function(el) { - _setEnabled("source", el, null, true); - return _currentInstance.isSourceEnabled(el); - }; - - this.setSourceEnabled = function(el, state) { return _setEnabled("source", el, state); }; - this.isSource = function(el) { return _sourcesEnabled[_info(el).id] != null; }; - this.isSourceEnabled = function(el) { return _sourcesEnabled[_info(el).id] === true; }; - - this.toggleTargetEnabled = function(el) { - _setEnabled("target", el, null, true); - return _currentInstance.isTargetEnabled(el); - }; - - this.isTarget = function(el) { return _targetsEnabled[_info(el).id] != null; }; - this.isTargetEnabled = function(el) { return _targetsEnabled[_info(el).id] === true; }; - this.setTargetEnabled = function(el, state) { return _setEnabled("target", el, state); }; - -// --------------------- end makeSource/makeTarget ---------------------------------------------- - - this.ready = function(fn) { - _currentInstance.bind("ready", fn); - }; - - // repaint some element's endpoints and connections - this.repaint = function(el, ui, timestamp) { - // support both lists... - if (typeof el == 'object' && el.length) - for ( var i = 0, ii = el.length; i < ii; i++) { - _draw(el[i], ui, timestamp); - } - else // ...and single strings. - _draw(el, ui, timestamp); - - return _currentInstance; - }; - - // repaint every endpoint and connection. - this.repaintEverything = function() { - // TODO this timestamp causes continuous anchors to not repaint properly. - // fix this. do not just take out the timestamp. it runs a lot faster with - // the timestamp included. - var timestamp = _timestamp(); - for ( var elId in endpointsByElement) { - _draw(elId, null, timestamp); - } - return _currentInstance; - /*for (var i = 0; i < connections.length; i++) - connections[i].repaint({timestamp:timestamp});*/ - }; - - - this.removeAllEndpoints = function(el, recurse) { - var _one = function(_el) { - var info = _info(_el), - ebe = endpointsByElement[info.id], - i, ii; - - if (ebe) { - for ( i = 0, ii = ebe.length; i < ii; i++) - _currentInstance.deleteEndpoint(ebe[i]); - } - delete endpointsByElement[info.id]; - - if (recurse) { - if (info.el && info.el.nodeType != 3 && info.el.nodeType != 8 ) { - for ( i = 0, ii = info.el.childNodes.length; i < ii; i++) { - _one(info.el.childNodes[i]); - } - } - } - - }; - _one(el); - return _currentInstance; - }; - - /** - * Remove the given element, including cleaning up all endpoints registered for it. - * This is exposed in the public API but also used internally by jsPlumb when removing the - * element associated with a connection drag. - */ - this.remove = function(el, doNotRepaint) { - var info = _info(el); - _currentInstance.doWhileSuspended(function() { - _currentInstance.removeAllEndpoints(info.id, true); - _currentInstance.dragManager.elementRemoved(info.id); - delete floatingConnections[info.id]; - _currentInstance.anchorManager.clearFor(info.id); - _currentInstance.anchorManager.removeFloatingConnection(info.id); - }, doNotRepaint === false); - if(info.el) jsPlumb.CurrentLibrary.removeElement(info.el); - }; - - var _registeredListeners = {}, - _unbindRegisteredListeners = function() { - for (var i in _registeredListeners) { - for (var j = 0, jj = _registeredListeners[i].length; j < jj; j++) { - var info = _registeredListeners[i][j]; - jsPlumb.CurrentLibrary.unbind(info.el, info.event, info.listener); - } - } - _registeredListeners = {}; - }; - - // internal register listener method. gives us a hook to clean things up - // with if the user calls jsPlumb.reset. - this.registerListener = function(el, type, listener) { - jsPlumb.CurrentLibrary.bind(el, type, listener); - jsPlumbUtil.addToList(_registeredListeners, type, {el:el, event:type, listener:listener}); - }; - - this.unregisterListener = function(el, type, listener) { - jsPlumb.CurrentLibrary.unbind(el, type, listener); - jsPlumbUtil.removeWithFunction(_registeredListeners, function(rl) { - return rl.type == type && rl.listener == listener; - }); - }; - - this.reset = function() { - _currentInstance.deleteEveryEndpoint(); - _currentInstance.unbind(); - _targetEndpointDefinitions = {}; - _targetEndpoints = {}; - _targetEndpointsUnique = {}; - _targetMaxConnections = {}; - _sourceEndpointDefinitions = {}; - _sourceEndpoints = {}; - _sourceEndpointsUnique = {}; - _sourceMaxConnections = {}; - connections.splice(0); - _unbindRegisteredListeners(); - _currentInstance.anchorManager.reset(); - if (!jsPlumbAdapter.headless) - _currentInstance.dragManager.reset(); - }; - - - this.setDefaultScope = function(scope) { - DEFAULT_SCOPE = scope; - return _currentInstance; - }; - - // sets whether or not some element should be currently draggable. - this.setDraggable = _setDraggable; - - // sets the id of some element, changing whatever we need to to keep track. - this.setId = function(el, newId, doNotSetAttribute) { - // - var id; - - if (jsPlumbUtil.isString(el)) { - id = el; - } - else { - el = _dom(el); - id = _currentInstance.getId(el); - } - - var sConns = _currentInstance.getConnections({source:id, scope:'*'}, true), - tConns = _currentInstance.getConnections({target:id, scope:'*'}, true); - - newId = "" + newId; - - if (!doNotSetAttribute) { - el = _dom(id); - jsPlumbAdapter.setAttribute(el, "id", newId); - } - else - el = _dom(newId); - - endpointsByElement[newId] = endpointsByElement[id] || []; - for (var i = 0, ii = endpointsByElement[newId].length; i < ii; i++) { - endpointsByElement[newId][i].setElementId(newId); - endpointsByElement[newId][i].setReferenceElement(el); - } - delete endpointsByElement[id]; - - _currentInstance.anchorManager.changeId(id, newId); - if (!jsPlumbAdapter.headless) - _currentInstance.dragManager.changeId(id, newId); - - var _conns = function(list, epIdx, type) { - for (var i = 0, ii = list.length; i < ii; i++) { - list[i].endpoints[epIdx].setElementId(newId); - list[i].endpoints[epIdx].setReferenceElement(el); - list[i][type + "Id"] = newId; - list[i][type] = el; - } - }; - _conns(sConns, 0, "source"); - _conns(tConns, 1, "target"); - - _currentInstance.repaint(newId); - }; - - this.setDebugLog = function(debugLog) { - log = debugLog; - }; - - this.setSuspendDrawing = function(val, repaintAfterwards) { - var curVal = _suspendDrawing; - _suspendDrawing = val; - if (val) _suspendedAt = new Date().getTime(); else _suspendedAt = null; - if (repaintAfterwards) _currentInstance.repaintEverything(); - return curVal; - }; - - // returns whether or not drawing is currently suspended. - this.isSuspendDrawing = function() { - return _suspendDrawing; - }; - - // return timestamp for when drawing was suspended. - this.getSuspendedAt = function() { return _suspendedAt; }; - - /** - * @doc function - * @name jsPlumb.class:doWhileSuspended - * @param {function} fn Function to run while suspended. - * @param {boolean} doNotRepaintAfterwards If true, jsPlumb won't run a full repaint. Otherwise it will. - * @description Suspends drawing, runs the given function, then re-enables drawing (and repaints, unless you tell it not to) - */ - this.doWhileSuspended = function(fn, doNotRepaintAfterwards) { - var _wasSuspended = _currentInstance.isSuspendDrawing(); - if (!_wasSuspended) - _currentInstance.setSuspendDrawing(true); - try { - fn(); - } - catch (e) { - _ju.log("Function run while suspended failed", e); - } - if (!_wasSuspended) - _currentInstance.setSuspendDrawing(false, !doNotRepaintAfterwards); - }; - - this.updateOffset = _updateOffset; - this.getOffset = function(elId) { return offsets[elId]; }; - this.getSize = function(elId) { return sizes[elId]; }; - this.getCachedData = _getCachedData; - this.timestamp = _timestamp; - - - - /** - * @doc function - * @name jsPlumb.class:setRenderMode - * @param {string} mode One of `jsPlumb.SVG, `jsPlumb.VML` or `jsPlumb.CANVAS`. - * @description Sets render mode. jsPlumb will fall back to VML if it determines that - * what you asked for is not supported (and that VML is). If you asked for VML but the browser does - * not support it, jsPlumb uses SVG. - * @return {string} The render mode that jsPlumb set, which of course may be different from that requested. - */ - this.setRenderMode = function(mode) { - renderMode = jsPlumbAdapter.setRenderMode(mode); - var i, ii; - // only add this if the renderer is canvas; we dont want these listeners registered on te - // entire document otherwise. - if (renderMode == jsPlumb.CANVAS) { - var bindOne = function(event) { - jsPlumb.CurrentLibrary.bind(document, event, function(e) { - if (!_currentInstance.currentlyDragging && renderMode == jsPlumb.CANVAS) { - // try connections first - for (i = 0, ii = connections.length; i < ii; i++ ) { - var t = connections[i].getConnector()[event](e); - if (t) return; - } - for (var el in endpointsByElement) { - var ee = endpointsByElement[el]; - for ( i = 0, ii = ee.length; i < ii; i++ ) { - if (ee[i].endpoint[event] && ee[i].endpoint[event](e)) return; - } - } - } - }); - }; - bindOne("click");bindOne("dblclick");bindOne("mousemove");bindOne("mousedown");bindOne("mouseup");bindOne("contextmenu"); - } - - return renderMode; - }; - - /** - * @doc function - * @name jsPlumb.class:getRenderMode - * @description Gets the current render mode for this instance of jsPlumb. - * @return {string} The current render mode - "canvas", "svg" or "vml". - */ - this.getRenderMode = function() { return renderMode; }; - - this.show = function(el, changeEndpoints) { - _setVisible(el, "block", changeEndpoints); - return _currentInstance; - }; - - /** - * gets some test hooks. nothing writable. - */ - this.getTestHarness = function() { - return { - endpointsByElement : endpointsByElement, - endpointCount : function(elId) { - var e = endpointsByElement[elId]; - return e ? e.length : 0; - }, - connectionCount : function(scope) { - scope = scope || DEFAULT_SCOPE; - var c = _currentInstance.getConnections({scope:scope}); - return c ? c.length : 0; - }, - getId : _getId, - makeAnchor:self.makeAnchor, - makeDynamicAnchor:self.makeDynamicAnchor - }; - }; - - - // TODO: update this method to return the current state. - this.toggleVisible = _toggleVisible; - this.toggleDraggable = _toggleDraggable; - this.addListener = this.bind; - - /* - helper method to take an xy location and adjust it for the parent's offset and scroll. - */ - this.adjustForParentOffsetAndScroll = function(xy, el) { - - var offsetParent = null, result = xy; - if (el.tagName.toLowerCase() === "svg" && el.parentNode) { - offsetParent = el.parentNode; - } - else if (el.offsetParent) { - offsetParent = el.offsetParent; - } - if (offsetParent != null) { - var po = offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : _getOffset(offsetParent, _currentInstance), - so = offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : {left:offsetParent.scrollLeft, top:offsetParent.scrollTop}; - - // i thought it might be cool to do this: - // lastReturnValue[0] = lastReturnValue[0] - offsetParent.offsetLeft + offsetParent.scrollLeft; - // lastReturnValue[1] = lastReturnValue[1] - offsetParent.offsetTop + offsetParent.scrollTop; - // but i think it ignores margins. my reasoning was that it's quicker to not hand off to some underlying - // library. - - result[0] = xy[0] - po.left + so.left; - result[1] = xy[1] - po.top + so.top; - } - - return result; - - }; - - if (!jsPlumbAdapter.headless) { - _currentInstance.dragManager = jsPlumbAdapter.getDragManager(_currentInstance); - _currentInstance.recalculateOffsets = _currentInstance.dragManager.updateOffsets; - } - - }; - - jsPlumbUtil.extend(jsPlumbInstance, jsPlumbUtil.EventGenerator, { - setAttribute : function(el, a, v) { - jsPlumbAdapter.setAttribute(el, a, v); - }, - getAttribute : function(el, a) { - return jsPlumbAdapter.getAttribute(jsPlumb.CurrentLibrary.getDOMElement(el), a); - }, - registerConnectionType : function(id, type) { - this._connectionTypes[id] = jsPlumb.extend({}, type); - }, - /** - * @doc function - * @name jsPlumb.class:registerConnectionTypes - * @param {object} types Object containing the type specifications. - * @description - * Registers all of the given connection types on this instance of jsPlumb. `types` is expected - * to contain keys with typeids and values with type specification objects. - */ - registerConnectionTypes : function(types) { - for (var i in types) - this._connectionTypes[i] = jsPlumb.extend({}, types[i]); - }, - /** - * @doc function - * @name jsPlumb.class:registerEndpointType - * @param {string} typeId Id of the type - * @param {object} type Object containing the type specification. - * @description - * Registers the given endpoint type on this instance of jsPlumb. - */ - registerEndpointType : function(id, type) { - this._endpointTypes[id] = jsPlumb.extend({}, type); - }, - /** - * @doc function - * @name jsPlumb.class:registerEndpointTypes - * @param {object} types Object containing the type specifications. - * @description - * Registers all of the given endpoint types on this instance of jsPlumb. `types` is expected - * to contain keys with typeids and values with type specification objects. - */ - registerEndpointTypes : function(types) { - for (var i in types) - this._endpointTypes[i] = jsPlumb.extend({}, types[i]); - }, - /** - * @doc function - * @name jsPlumb.class:getType - * @param {string} id Id of the type to retrieve - * @param {string} typeDescriptor `"connection"` or `"endpoint"` - the type of Type to get. - * @description - * Returns the given type's specification. - * @return {object} Type specification, it if exists, null otherwise. - */ - getType : function(id, typeDescriptor) { - return typeDescriptor === "connection" ? this._connectionTypes[id] : this._endpointTypes[id]; - }, - /** - * @doc function - * @name jsPlumb.class:setIdChanged - * @param {oldId} string Previous id - * @param {newId} string Element's new id. - * @description called to notify us that an id WAS changed, and we should do our changes, but we - * dont need to change the element's DOM attribute. note that this does not work if the an element with - * the new id is not in the DOM. - */ - setIdChanged : function(oldId, newId) { - this.setId(oldId, newId, true); - } - }); - -// --------------------- static instance + AMD registration ------------------------------------------- - -// create static instance and assign to window if window exists. - var jsPlumb = new jsPlumbInstance(); - // register on window if defined (lets us run on server) - if (typeof window != 'undefined') window.jsPlumb = jsPlumb; - // add 'getInstance' method to static instance - /** - * @name jsPlumb.getInstance - * @param {object} [_defaults] Optional default settings for the new instance. - * @desc Gets a new instance of jsPlumb. - */ - jsPlumb.getInstance = function(_defaults) { - var j = new jsPlumbInstance(_defaults); - j.init(); - return j; - }; -// maybe register static instance as an AMD module, and getInstance method too. - if ( typeof define === "function") { - define( "jsplumb", [], function () { return jsPlumb; } ); - define( "jsplumbinstance", [], function () { return jsPlumb.getInstance(); } ); - } - // CommonJS - if (typeof exports !== 'undefined') { - exports.jsPlumb = jsPlumb; - } - - -// --------------------- end static instance + AMD registration ------------------------------------------- - -})(); - - -;(function() { - - // create the drag handler for a connection - 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(n); - _jsPlumb.updateOffset( { elId : id }); - // create and assign an id, and initialize the offset. - placeholder.id = id; - placeholder.element = n;//placeholderDragElement; - }; - - // create a floating endpoint (for drag connections) - 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" }); - }; - - var typeParameters = [ "connectorStyle", "connectorHoverStyle", "connectorOverlays", - "connector", "connectionType", "connectorClass", "connectorHoverClass" ]; - - // 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(ep, elementWithPrecedence) { - var idx = 0; - if (elementWithPrecedence != null) { - for (var i = 0; i < ep.connections.length; i++) { - if (ep.connections[i].sourceId == elementWithPrecedence || ep.connections[i].targetId == elementWithPrecedence) { - idx = i; - break; - } - } - } - - return ep.connections[idx]; - }; - - var findConnectionIndex = function(conn, ep) { - return jsPlumbUtil.findWithFunction(ep.connections, function(c) { return c.id == conn.id; }); - }; - - jsPlumb.Endpoint = function(params) { - var _jsPlumb = params._jsPlumb, - jpcl = jsPlumb.CurrentLibrary, - _att = jsPlumbAdapter.getAttribute, - _gel = jpcl.getElementObject, - _dom = jpcl.getDOMElement, - _ju = jsPlumbUtil, - _newConnection = params.newConnection, - _newEndpoint = params.newEndpoint, - _finaliseConnection = params.finaliseConnection, - _fireDetachEvent = params.fireDetachEvent, - floatingConnections = params.floatingConnections; - - this.idPrefix = "_jsplumb_e_"; - this.defaultLabelLocation = [ 0.5, 0.5 ]; - this.defaultOverlayKeys = ["Overlays", "EndpointOverlays"]; - this.parent = params.parent; - OverlayCapableJsPlumbUIComponent.apply(this, arguments); - -// TYPE - - this.getDefaultType = function() { - return { - parameters:{}, - scope:null, - maxConnections:this._jsPlumb.instance.Defaults.MaxConnections, - paintStyle:this._jsPlumb.instance.Defaults.EndpointStyle || jsPlumb.Defaults.EndpointStyle, - endpoint:this._jsPlumb.instance.Defaults.Endpoint || jsPlumb.Defaults.Endpoint, - hoverPaintStyle:this._jsPlumb.instance.Defaults.EndpointHoverStyle || jsPlumb.Defaults.EndpointHoverStyle, - overlays:this._jsPlumb.instance.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 - }; - }; - -// END TYPE - - this._jsPlumb.enabled = !(params.enabled === false); - this._jsPlumb.visible = true; - this.element = _dom(params.source); - this._jsPlumb.uuid = params.uuid; - this._jsPlumb.floatingEndpoint = null; - var inPlaceCopy = null; - if (this._jsPlumb.uuid) params.endpointsByUUID[this._jsPlumb.uuid] = this; - this.elementId = params.elementId; - - this._jsPlumb.connectionCost = params.connectionCost; - this._jsPlumb.connectionsDirected = params.connectionsDirected; - this._jsPlumb.currentAnchorClass = ""; - this._jsPlumb.events = {}; - - var _updateAnchorClass = function() { - jpcl.removeClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - this.removeClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - this._jsPlumb.currentAnchorClass = this.anchor.getCssClass(); - this.addClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - jpcl.addClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - }.bind(this); - - this.setAnchor = function(anchorParams, doNotRepaint) { - this._jsPlumb.instance.continuousAnchorFactory.clear(this.elementId); - this.anchor = this._jsPlumb.instance.makeAnchor(anchorParams, this.elementId, _jsPlumb); - _updateAnchorClass(); - this.anchor.bind("anchorChanged", function(currentAnchor) { - this.fire("anchorChanged", {endpoint:this, anchor:currentAnchor}); - _updateAnchorClass(); - }.bind(this)); - if (!doNotRepaint) - this._jsPlumb.instance.repaint(this.elementId); - return this; - }; - - var anchorParamsToUse = params.anchor ? params.anchor : params.anchors ? params.anchors : (_jsPlumb.Defaults.Anchor || "Top"); - this.setAnchor(anchorParamsToUse, true); - - // endpoint delegates to first connection for hover, if there is one. - var internalHover = function(state) { - if (this.connections.length > 0) - this.connections[0].setHover(state, false); - else - this.setHover(state); - }.bind(this); - - // 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. - this._jsPlumb.instance.anchorManager.add(this, this.elementId); - - this.setEndpoint = function(ep) { - - if (this.endpoint != null) { - this.endpoint.cleanup(); - this.endpoint.destroy(); - } - - var _e = function(t, p) { - var rm = _jsPlumb.getRenderMode(); - if (jsPlumb.Endpoints[rm][t]) return new jsPlumb.Endpoints[rm][t](p); - if (!_jsPlumb.Defaults.DoNotThrowErrors) - throw { msg:"jsPlumb: unknown endpoint type '" + t + "'" }; - }; - - var endpointArgs = { - _jsPlumb:this._jsPlumb.instance, - cssClass:params.cssClass, - parent:params.parent, - container:params.container, - tooltip:params.tooltip, - connectorTooltip:params.connectorTooltip, - endpoint:this - }; - if (_ju.isString(ep)) - this.endpoint = _e(ep, endpointArgs); - else if (_ju.isArray(ep)) { - endpointArgs = _ju.merge(ep[1], endpointArgs); - this.endpoint = _e(ep[0], endpointArgs); - } - else { - this.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); - this.endpoint.clone = function() { - // TODO this, and the code above, can be refactored to be more dry. - if (_ju.isString(ep)) - return _e(ep, endpointArgs); - else if (_ju.isArray(ep)) { - endpointArgs = _ju.merge(ep[1], endpointArgs); - return _e(ep[0], endpointArgs); - } - }.bind(this); - - this.type = this.endpoint.type; - // bind listeners from endpoint to self, with the internal hover function defined above. - this.bindListeners(this.endpoint, this, internalHover); - }; - - this.setEndpoint(params.endpoint || _jsPlumb.Defaults.Endpoint || jsPlumb.Defaults.Endpoint || "Dot"); - 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._jsPlumb.paintStyleInUse = this.getPaintStyle(); - - _ju.copyValues(typeParameters, params, this); - - this.isSource = params.isSource || false; - this.isTarget = params.isTarget || false; - this._jsPlumb.maxConnections = params.maxConnections || _jsPlumb.Defaults.MaxConnections; // maximum number of connections this endpoint can be the source of. - this.canvas = this.endpoint.canvas; - // add anchor class (need to do this on construction because we set anchor first) - this.addClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - jpcl.addClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - this.connections = params.connections || []; - this.connectorPointerEvents = params["connector-pointer-events"]; - - this.scope = params.scope || _jsPlumb.getDefaultScope(); - this.timestamp = null; - this.reattachConnections = params.reattach || _jsPlumb.Defaults.ReattachConnections; - this.connectionsDetachable = _jsPlumb.Defaults.ConnectionsDetachable; - if (params.connectionsDetachable === false || params.detachable === false) - this.connectionsDetachable = false; - this.dragAllowedWhenFull = params.dragAllowedWhenFull || true; - - if (params.onMaxConnections) - this.bind("maxConnections", params.onMaxConnections); - - // - // add a connection. not part of public API. - // - this.addConnection = function(connection) { - this.connections.push(connection); - this[(this.connections.length > 0 ? "add" : "remove") + "Class"](_jsPlumb.endpointConnectedClass); - this[(this.isFull() ? "add" : "remove") + "Class"](_jsPlumb.endpointFullClass); - }; - - this.detachFromConnection = function(connection, idx) { - idx = idx == null ? findConnectionIndex(connection, this) : idx; - if (idx >= 0) { - this.connections.splice(idx, 1); - this[(this.connections.length > 0 ? "add" : "remove") + "Class"](_jsPlumb.endpointConnectedClass); - this[(this.isFull() ? "add" : "remove") + "Class"](_jsPlumb.endpointFullClass); - } - }; - - this.detach = function(connection, ignoreTarget, forceDetach, fireEvent, originalEvent, endpointBeingDeleted, connectionIndex) { - - var idx = connectionIndex == null ? findConnectionIndex(connection, this) : connectionIndex, - actuallyDetached = false; - fireEvent = (fireEvent !== false); - - if (idx >= 0) { - if (forceDetach || connection._forceDetach || (connection.isDetachable() && connection.isDetachAllowed(connection) && this.isDetachAllowed(connection) )) { - - //connection.setHover(false); - - _jsPlumb.deleteObject({ - connection:connection, - fireEvent:(!ignoreTarget && fireEvent), - originalEvent:originalEvent - }); - actuallyDetached = true; - } - } - return actuallyDetached; - }; - - this.detachAll = function(fireEvent, originalEvent) { - while (this.connections.length > 0) { - // TODO this could pass the index in to the detach method to save some time (index will always be zero in this while loop) - // TODO now it defaults to fireEvent true. will that mess with things? - this.detach(this.connections[0], false, true, fireEvent !== false, originalEvent, this, 0); - } - return this; - }; - this.detachFrom = function(targetEndpoint, fireEvent, originalEvent) { - var c = []; - for ( var i = 0; i < this.connections.length; i++) { - if (this.connections[i].endpoints[1] == targetEndpoint || this.connections[i].endpoints[0] == targetEndpoint) { - c.push(this.connections[i]); - } - } - for ( var j = 0; j < c.length; j++) { - this.detach(c[j], false, true, fireEvent, originalEvent); - } - return this; - }; - - this.getElement = function() { - return this.element; - }; - - // container not supported in 1.5.2; you cannot change the container once it is set. - // it might come back int a future release. - this.setElement = function(el/*, container*/) { - var parentId = this._jsPlumb.instance.getId(el), - curId = this.elementId; - // remove the endpoint from the list for the current endpoint's element - _ju.removeWithFunction(params.endpointsByElement[this.elementId], function(e) { - return e.id == this.id; - }.bind(this)); - this.element = _dom(el); - this.elementId = _jsPlumb.getId(this.element); - _jsPlumb.anchorManager.rehomeEndpoint(this, curId, this.element); - _jsPlumb.dragManager.endpointAdded(this.element); - _ju.addToList(params.endpointsByElement, parentId, this); - return this; - }; - - /** - * private but must be exposed. - */ - this.makeInPlaceCopy = function() { - var loc = this.anchor.getCurrentLocation({element:this}), - o = this.anchor.getOrientation(this), - acc = this.anchor.getCssClass(), - inPlaceAnchor = { - bind:function() { }, - compute:function() { return [ loc[0], loc[1] ]; }, - getCurrentLocation : function() { return [ loc[0], loc[1] ]; }, - getOrientation:function() { return o; }, - getCssClass:function() { return acc; } - }; - - return _newEndpoint( { - anchor : inPlaceAnchor, - source : this.element, - paintStyle : this.getPaintStyle(), - endpoint : params.hideOnDrag ? "Blank" : this.endpoint, - _transient:true, - scope:this.scope - }); - }; - - - /** - * private but needs to be exposed. - */ - this.isFloating = function() { - return this.anchor != null && this.anchor.isFloating; - }; - - /** - * 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 = this.connections[0]; - if (this.isTarget && candidate) return candidate; - else { - return (this.connections.length < this._jsPlumb.maxConnections) || this._jsPlumb.maxConnections == -1 ? null : candidate; - } - }; - - this.setStyle = this.setPaintStyle; - - this.paint = function(params) { - params = params || {}; - var timestamp = params.timestamp, recalc = !(params.recalc === false); - if (!timestamp || this.timestamp !== timestamp) { - - // TODO check: is this is a safe performance enhancement? - var info = _jsPlumb.updateOffset({ elId:this.elementId, timestamp:timestamp/*, recalc:recalc*/ }); - //var info = _jsPlumb.updateOffset({ elId:_elementId, timestamp:timestamp, recalc:recalc }); - - var xy = params.offset ? params.offset.o : info.o; - if(xy != null) { - var ap = params.anchorPoint,connectorPaintStyle = params.connectorPaintStyle; - if (ap == null) { - var wh = params.dimensions || info.s, - anchorParams = { xy : [ xy.left, xy.top ], wh : wh, element : this, timestamp : timestamp }; - if (recalc && this.anchor.isDynamic && this.connections.length > 0) { - var c = findConnectionToUseForDynamicAnchor(this, params.elementWithPrecedence), - oIdx = c.endpoints[0] == this ? 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 = this.anchor.compute(anchorParams); - } - - this.endpoint.compute(ap, this.anchor.getOrientation(this), this._jsPlumb.paintStyleInUse, connectorPaintStyle || this.paintStyleInUse); - this.endpoint.paint(this._jsPlumb.paintStyleInUse, this.anchor); - this.timestamp = timestamp; - - // paint overlays - for ( var i = 0; i < this._jsPlumb.overlays.length; i++) { - var o = this._jsPlumb.overlays[i]; - if (o.isVisible()) { - this._jsPlumb.overlayPlacements[i] = o.draw(this.endpoint, this._jsPlumb.paintStyleInUse); - o.paint(this._jsPlumb.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(this.element) && (this.isSource || this.isTarget)) { - 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 = this.connectorSelector(); - var _continue = true; - // if not enabled, return - if (!this.isEnabled()) _continue = false; - // if no connection and we're not a source, return. - if (jpc == null && !this.isSource) _continue = false; - // otherwise if we're full and not allowed to drag, also return false. - if (this.isSource && this.isFull() && !this.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; - } - - // clear hover for all connections for this endpoint before continuing. - for (var i = 0; i < this.connections.length; i++) - this.connections[i].setHover(false); - - this.addClass("endpointDrag"); - _jsPlumb.setConnectionBeingDragged(true); - - // if we're not full but there was a connection, make it null. we'll create a new one. - if (jpc && !this.isFull() && this.isSource) jpc = null; - - _jsPlumb.updateOffset( { elId : this.elementId }); - inPlaceCopy = this.makeInPlaceCopy(); - inPlaceCopy.referenceEndpoint = this; - inPlaceCopy.paint(); - - _makeDraggablePlaceholder(placeholderInfo, this.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 = jsPlumb.CurrentLibrary.getOffset(ipcoel, _jsPlumb), - po = _jsPlumb.adjustForParentOffsetAndScroll([ipco.left, ipco.top], inPlaceCopy.canvas), - canvasElement = _gel(this.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 (this.parentAnchor) this.anchor = _jsPlumb.makeAnchor(this.parentAnchor, this.elementId, _jsPlumb); - - // store the id of the dragging div and the source element. the drop function will pick these up. - _jsPlumb.setAttribute(this.canvas, "dragId", placeholderInfo.id); - _jsPlumb.setAttribute(this.canvas, "elId", this.elementId); - - this._jsPlumb.floatingEndpoint = _makeFloatingEndpoint(this.getPaintStyle(), this.anchor, this.endpoint, this.canvas, placeholderInfo.element, _jsPlumb, _newEndpoint); - // TODO we should not know about DOM here. make the library adapter do this (or the - // dom adapter) - this.canvas.style.visibility = "hidden"; - - if (jpc == null) { - this.anchor.locked = true; - this.setHover(false, false); - // create a connection. one end is this endpoint, the other is a floating endpoint. - jpc = _newConnection({ - sourceEndpoint : this, - targetEndpoint : this._jsPlumb.floatingEndpoint, - source : this.endpointWillMoveTo || this.element, // for makeSource with parent option. ensure source element is represented correctly. - target : placeholderInfo.element, - anchors : [ this.anchor, this._jsPlumb.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:this.connectionType, - cssClass:this.connectorClass, - hoverClass:this.connectorHoverClass - }); - jpc.addClass(_jsPlumb.draggingClass); - this._jsPlumb.floatingEndpoint.addClass(_jsPlumb.draggingClass); - // 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 == this.id ? 0 : 1; - jpc.floatingAnchorIndex = anchorIdx; // save our anchor index as the connection's floating index. - this.detachFromConnection(jpc); // detach from the connection while dragging is occurring. - - // store the original scope (issue 57) - var dragScope = jsPlumb.CurrentLibrary.getDragScope(canvasElement); - _jsPlumb.setAttribute(this.canvas, "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); - - // fire an event that informs that a connection is being dragged. we do this before - // replacing the original target with the floating element info. - _jsPlumb.fire("connectionDrag", jpc); - - // now we replace ourselves with the temporary div we created above: - if (anchorIdx === 0) { - existingJpcParams = [ jpc.source, jpc.sourceId, canvasElement, dragScope ]; - jpc.source = placeholderInfo.element; - jpc.sourceId = placeholderInfo.id; - } else { - existingJpcParams = [ jpc.target, jpc.targetId, canvasElement, 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]; - - // PROVIDE THE SUSPENDED ELEMENT, BE IT A SOURCE OR TARGET (ISSUE 39) - jpc.suspendedElement = jpc.endpoints[anchorIdx].getElement(); - jpc.suspendedElementId = jpc.endpoints[anchorIdx].elementId; - jpc.suspendedElementType = anchorIdx === 0 ? "source" : "target"; - - jpc.suspendedEndpoint.setHover(false); - this._jsPlumb.floatingEndpoint.referenceEndpoint = jpc.suspendedEndpoint; - jpc.endpoints[anchorIdx] = this._jsPlumb.floatingEndpoint; - - jpc.addClass(_jsPlumb.draggingClass); - this._jsPlumb.floatingEndpoint.addClass(_jsPlumb.draggingClass); - - } - // register it and register connection on it. - floatingConnections[placeholderInfo.id] = jpc; - _jsPlumb.anchorManager.addFloatingConnection(placeholderInfo.id, 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, this._jsPlumb.floatingEndpoint); - // tell jsplumb about it - _jsPlumb.currentlyDragging = true; - }.bind(this); - - 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 || this.scope; - dragOptions[startEvent] = _ju.wrap(dragOptions[startEvent], start, false); - // extracted drag handler function so can be used by makeSource - dragOptions[dragEvent] = _ju.wrap(dragOptions[dragEvent], _dragHandler.drag); - dragOptions[stopEvent] = _ju.wrap(dragOptions[stopEvent], - function() { - - _jsPlumb.setConnectionBeingDragged(false); - // get the actual drop event (decode from library args to stop function) - var originalEvent = jpcl.getDropEvent(arguments); - // unlock the other endpoint (if it is dynamic, it would have been locked at drag start) - var idx = jpc.floatingAnchorIndex == null ? 1 : jpc.floatingAnchorIndex; - jpc.endpoints[idx === 0 ? 1 : 0].anchor.locked = false; - // WHY does this need to happen? i suppose because the connection might not get - // deleted. TODO: i dont want to know about css classes inside jsplumb, ideally. - jpc.removeClass(_jsPlumb.draggingClass); - - // if we have the floating endpoint then the connection has not been dropped - // on another endpoint. If it is a new connection we throw it away. If it is an - // existing connection we check to see if we should reattach it, throwing it away - // if not. - if (jpc.endpoints[idx] == this._jsPlumb.floatingEndpoint) { - // 6a. 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 the connection should be reattached, or the other endpoint refuses detach, then - // reset the connection to its original state - 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._forceDetach = null; - jpc._forceReattach = null; - this._jsPlumb.floatingEndpoint.detachFromConnection(jpc); - jpc.suspendedEndpoint.addConnection(jpc); - _jsPlumb.repaint(existingJpcParams[1]); - } - } - } - - // remove the element associated with the floating endpoint - // (and its associated floating endpoint and visual artefacts) - // TODO we need a way to say that the connection should be kept, if - _jsPlumb.remove(placeholderInfo.element, false); - // remove the inplace copy - _jsPlumb.remove(inPlaceCopy.canvas, false); - - // makeTargets sets this flag, to tell us we have been replaced and should delete ourself. - if (this.deleteAfterDragStop) { - _jsPlumb.deleteObject({endpoint:this}); - } - else { - if (this._jsPlumb) { - this._jsPlumb.floatingEndpoint = null; - // repaint this endpoint. - // make our canvas visible (TODO: hand off to library; we should not know about DOM) - this.canvas.style.visibility = "visible"; - // unlock our anchor - this.anchor.locked = false; - this.paint({recalc:false}); - } - } - - // TODO can this stay here? the connection is no longer valid. - _jsPlumb.fire("connectionDragStop", jpc); - - // tell jsplumb that dragging is finished. - _jsPlumb.currentlyDragging = false; - - jpc = null; - - }.bind(this)); - - var i = _gel(this.canvas); - jpcl.initDraggable(i, dragOptions, true, _jsPlumb); - } - - // 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 ((this.isTarget || forceInit) && jpcl.isDropSupported(this.element)) { - var dropOptions = params.dropOptions || _jsPlumb.Defaults.DropOptions || jsPlumb.Defaults.DropOptions; - dropOptions = jsPlumb.extend( {}, dropOptions); - dropOptions.scope = dropOptions.scope || this.scope; - var dropEvent = jpcl.dragEvents.drop, - overEvent = jpcl.dragEvents.over, - outEvent = jpcl.dragEvents.out, - drop = function() { - - this.removeClass(_jsPlumb.endpointDropAllowedClass); - this.removeClass(_jsPlumb.endpointDropForbiddenClass); - - var originalEvent = jpcl.getDropEvent(arguments), - draggable = _gel(jpcl.getDragObject(arguments)), - id = _jsPlumb.getAttribute(draggable, "dragId"), - elId = _jsPlumb.getAttribute(draggable, "elId"), - scope = _jsPlumb.getAttribute(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 == this.id || - this.referenceEndpoint && jpc.suspendedEndpoint.id == this.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 (this.isFull()) { - this.fire("maxConnections", { - endpoint:this, - connection:jpc, - maxConnections:this._jsPlumb.maxConnections - }, originalEvent); - } - - if (!this.isFull() && !(idx === 0 && !this.isSource) && !(idx == 1 && !this.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 != this.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 = this.element; - jpc.sourceId = this.elementId; - } else { - jpc.target = this.element; - jpc.targetId = this.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] = this; - this.addConnection(jpc); - - // copy our parameters in to the connection: - var params = this.getParameters(); - for (var aParam in params) - jpc.setParameter(aParam, params[aParam]); - - if (!jpc.suspendedEndpoint) { - if (params.draggable) - jsPlumb.CurrentLibrary.initDraggable(this.element, dragOptions, true, _jsPlumb); - } - 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); - } - - // TODO this is like the makeTarget drop code. - if (idx == 1) - _jsPlumb.anchorManager.updateOtherEndpoint(jpc.sourceId, jpc.suspendedElementId, jpc.targetId, jpc); - else - _jsPlumb.anchorManager.sourceChanged(jpc.suspendedEndpoint.elementId, jpc.sourceId, jpc); - - // finalise will inform the anchor manager and also add to - // connectionsByScope if necessary. - _finaliseConnection(jpc, null, originalEvent, true); - - commonFunction(); - }.bind(this); - - 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 && this.isDropAllowed(jpc.sourceId, jpc.targetId, jpc.scope, jpc, this); - - if (_doContinue) { - continueFunction(); - } - else { - dontContinueFunction(); - } - } - _jsPlumb.currentlyDragging = false; - } - }.bind(this); - - dropOptions[dropEvent] = _ju.wrap(dropOptions[dropEvent], drop); - dropOptions[overEvent] = _ju.wrap(dropOptions[overEvent], function() { - var draggable = jpcl.getDragObject(arguments), - id = _jsPlumb.getAttribute(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 = (this.isTarget && _jpc.floatingAnchorIndex !== 0) || (_jpc.suspendedEndpoint && this.referenceEndpoint && this.referenceEndpoint.id == _jpc.suspendedEndpoint.id); - if (_cont) { - var bb = _jsPlumb.checkCondition("checkDropAllowed", { - sourceEndpoint:_jpc.endpoints[idx], - targetEndpoint:this, - connection:_jpc - }); - this[(bb ? "add" : "remove") + "Class"](_jsPlumb.endpointDropAllowedClass); - this[(bb ? "remove" : "add") + "Class"](_jsPlumb.endpointDropForbiddenClass); - _jpc.endpoints[idx].anchor.over(this.anchor, this); - } - } - }.bind(this)); - - dropOptions[outEvent] = _ju.wrap(dropOptions[outEvent], function() { - var draggable = jpcl.getDragObject(arguments), - id = _jsPlumb.getAttribute( draggable, "dragId"), - _jpc = floatingConnections[id]; - - if (_jpc != null) { - var idx = _jpc.floatingAnchorIndex == null ? 1 : _jpc.floatingAnchorIndex; - var _cont = (this.isTarget && _jpc.floatingAnchorIndex !== 0) || (_jpc.suspendedEndpoint && this.referenceEndpoint && this.referenceEndpoint.id == _jpc.suspendedEndpoint.id); - if (_cont) { - this.removeClass(_jsPlumb.endpointDropAllowedClass); - this.removeClass(_jsPlumb.endpointDropForbiddenClass); - _jpc.endpoints[idx].anchor.out(); - } - } - }.bind(this)); - jpcl.initDroppable(canvas, dropOptions, true, isTransient); - } - }.bind(this); - - // 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(this.canvas), true, !(params._transient || this.anchor.isFloating), this); - - // finally, set type if it was provided - if (params.type) - this.addType(params.type, params.data, _jsPlumb.isSuspendDrawing()); - - return this; - }; - - jsPlumbUtil.extend(jsPlumb.Endpoint, OverlayCapableJsPlumbUIComponent, { - getTypeDescriptor : function() { return "endpoint"; }, - isVisible : function() { return this._jsPlumb.visible; }, - setVisible : function(v, doNotChangeConnections, doNotNotifyOtherEndpoint) { - this._jsPlumb.visible = v; - if (this.canvas) this.canvas.style.display = v ? "block" : "none"; - this[v ? "showOverlays" : "hideOverlays"](); - if (!doNotChangeConnections) { - for (var i = 0; i < this.connections.length; i++) { - this.connections[i].setVisible(v); - if (!doNotNotifyOtherEndpoint) { - var oIdx = this === this.connections[i].endpoints[0] ? 1 : 0; - // only change the other endpoint if this is its only connection. - if (this.connections[i].endpoints[oIdx].connections.length == 1) this.connections[i].endpoints[oIdx].setVisible(v, true, true); - } - } - } - }, - getAttachedElements : function() { - return this.connections; - }, - applyType : function(t, doNotRepaint) { - if (t.maxConnections != null) this._jsPlumb.maxConnections = t.maxConnections; - if (t.scope) this.scope = t.scope; - jsPlumbUtil.copyValues(typeParameters, t, this); - }, - isEnabled : function() { return this._jsPlumb.enabled; }, - setEnabled : function(e) { this._jsPlumb.enabled = e; }, - cleanup : function() { - jsPlumb.CurrentLibrary.removeClass(this.element, this._jsPlumb.instance.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - this.anchor = null; - this.endpoint.cleanup(); - this.endpoint.destroy(); - this.endpoint = null; - // drag/drop - var i = jsPlumb.CurrentLibrary.getElementObject(this.canvas); - jsPlumb.CurrentLibrary.destroyDraggable(i); - jsPlumb.CurrentLibrary.destroyDroppable(i); - }, - setHover : function(h) { - if (this.endpoint && this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) - this.endpoint.setHover(h); - }, - isFull : function() { - return !(this.isFloating() || this._jsPlumb.maxConnections < 1 || this.connections.length < this._jsPlumb.maxConnections); - }, - getConnectionCost : function() { return this._jsPlumb.connectionCost; }, - setConnectionCost : function(c) { - this._jsPlumb.connectionCost = c; - }, - areConnectionsDirected : function() { return this._jsPlumb.connectionsDirected; }, - setConnectionsDirected : function(b) { this._jsPlumb.connectionsDirected = b; }, - setElementId : function(_elId) { - this.elementId = _elId; - this.anchor.elementId = _elId; - }, - setReferenceElement : function(_el) { - this.element = jsPlumb.CurrentLibrary.getDOMElement(_el); - }, - setDragAllowedWhenFull : function(allowed) { - this.dragAllowedWhenFull = allowed; - }, - equals : function(endpoint) { - return this.anchor.equals(endpoint.anchor); - }, - getUuid : function() { - return this._jsPlumb.uuid; - }, - computeAnchor : function(params) { - return this.anchor.compute(params); - } - }); -})(); -;(function() { - - var makeConnector = function(_jsPlumb, renderMode, connectorName, connectorArgs) { - if (!_jsPlumb.Defaults.DoNotThrowErrors && jsPlumb.Connectors[renderMode][connectorName] == null) - throw { msg:"jsPlumb: unknown connector type '" + connectorName + "'" }; - - return new jsPlumb.Connectors[renderMode][connectorName](connectorArgs); - }, - _makeAnchor = function(anchorParams, elementId, _jsPlumb) { - return (anchorParams) ? _jsPlumb.makeAnchor(anchorParams, elementId, _jsPlumb) : null; - }, - prepareEndpoint = function(_jsPlumb, _newEndpoint, conn, existing, index, params, element, elementId, connectorPaintStyle, connectorHoverPaintStyle) { - var e; - if (existing) { - conn.endpoints[index] = existing; - existing.addConnection(conn); - } 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, _jsPlumb) || - _makeAnchor(jsPlumb.Defaults.Anchors[index], elementId,_jsPlumb) || - _makeAnchor(_jsPlumb.Defaults.Anchor, elementId,_jsPlumb) || - _makeAnchor(jsPlumb.Defaults.Anchor, elementId, _jsPlumb), - u = params.uuids ? params.uuids[index] : null; - e = _newEndpoint({ - paintStyle : es, hoverPaintStyle:ehs, endpoint : ep, connections : [ conn ], - uuid : u, anchor : a, source : element, scope : params.scope, container:params.container, - reattach:params.reattach || _jsPlumb.Defaults.ReattachConnections, - detachable:params.detachable || _jsPlumb.Defaults.ConnectionsDetachable - }); - conn.endpoints[index] = e; - - if (params.drawEndpoints === false) e.setVisible(false, true, true); - - } - return e; - }; - - jsPlumb.Connection = function(params) { - var _newConnection = params.newConnection, - _newEndpoint = params.newEndpoint, - jpcl = jsPlumb.CurrentLibrary, - _att = jpcl.getAttribute, - _gel = jpcl.getElementObject, - _dom = jpcl.getDOMElement, - _ju = jsPlumbUtil, - _getOffset = jpcl.getOffset; - - this.connector = null; - this.idPrefix = "_jsplumb_c_"; - this.defaultLabelLocation = 0.5; - this.defaultOverlayKeys = ["Overlays", "ConnectionOverlays"]; - this.parent = params.parent; - // 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. - this.previousConnection = params.previousConnection; - this.source = _dom(params.source); - this.target = _dom(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(); - - OverlayCapableJsPlumbUIComponent.apply(this, arguments); - - this.sourceId = this._jsPlumb.instance.getId(this.source); - this.targetId = this._jsPlumb.instance.getId(this.target); - 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 = []; - - var _jsPlumb = this._jsPlumb.instance; - this._jsPlumb.visible = true; - this._jsPlumb.editable = params.editable === true; - this._jsPlumb.params = { - parent:params.parent, - cssClass:params.cssClass, - container:params.container, - "pointer-events":params["pointer-events"], - editorParams:params.editorParams - }; - this._jsPlumb.lastPaintedAt = null; - this.getDefaultType = function() { - return { - parameters:{}, - scope:null, - detachable:this._jsPlumb.instance.Defaults.ConnectionsDetachable, - rettach:this._jsPlumb.instance.Defaults.ReattachConnections, - paintStyle:this._jsPlumb.instance.Defaults.PaintStyle || jsPlumb.Defaults.PaintStyle, - connector:this._jsPlumb.instance.Defaults.Connector || jsPlumb.Defaults.Connector, - hoverPaintStyle:this._jsPlumb.instance.Defaults.HoverPaintStyle || jsPlumb.Defaults.HoverPaintStyle, - overlays:this._jsPlumb.instance.Defaults.ConnectorOverlays || jsPlumb.Defaults.ConnectorOverlays - }; - }; - -// INITIALISATION CODE - - // wrapped the main function to return null if no input given. this lets us cascade defaults properly. - - var eS = prepareEndpoint(_jsPlumb, _newEndpoint, this, params.sourceEndpoint, 0, params, this.source, this.sourceId, params.paintStyle, params.hoverPaintStyle); - if (eS) _ju.addToList(params.endpointsByElement, this.sourceId, eS); - var eT = prepareEndpoint(_jsPlumb, _newEndpoint, this, params.targetEndpoint, 1, params, this.target, this.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 explicitly told to (or not to) delete endpoints on detach, override endpoint's preferences - if (params.deleteEndpointsOnDetach != null) { - this.endpoints[0]._deleteOnDetach = params.deleteEndpointsOnDetach; - this.endpoints[1]._deleteOnDetach = params.deleteEndpointsOnDetach; - } - else { - // otherwise, unless the endpoints say otherwise, mark them for deletion. - if (!this.endpoints[0]._doNotDeleteOnDetach) this.endpoints[0]._deleteOnDetach = true; - if (!this.endpoints[1]._doNotDeleteOnDetach) this.endpoints[1]._deleteOnDetach = true; - } - - // TODO these could surely be refactored into some method that tries them one at a time until something exists - this.setConnector(this.endpoints[0].connector || - this.endpoints[1].connector || - params.connector || - _jsPlumb.Defaults.Connector || - jsPlumb.Defaults.Connector, true); - - if (params.path) - this.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._jsPlumb.paintStyleInUse = this.getPaintStyle(); - - var _suspendedAt = _jsPlumb.getSuspendedAt(); - _jsPlumb.updateOffset( { elId : this.sourceId, timestamp:_suspendedAt }); - _jsPlumb.updateOffset( { elId : this.targetId, timestamp:_suspendedAt }); - -//* - if(!_jsPlumb.isSuspendDrawing()) { - // 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 - this._jsPlumb.detachable = _jsPlumb.Defaults.ConnectionsDetachable; - if (params.detachable === false) this._jsPlumb.detachable = false; - if(this.endpoints[0].connectionsDetachable === false) this._jsPlumb.detachable = false; - if(this.endpoints[1].connectionsDetachable === false) this._jsPlumb.detachable = false; -// REATTACH - this._jsPlumb.reattach = params.reattach || this.endpoints[0].reattachConnections || this.endpoints[1].reattachConnections || _jsPlumb.Defaults.ReattachConnections; -// COST + DIRECTIONALITY - // if cost not supplied, try to inherit from source endpoint - this._jsPlumb.cost = params.cost || this.endpoints[0].getConnectionCost(); - this._jsPlumb.directed = params.directed; - // inherit directed flag if set no source endpoint - if (params.directed == null) this._jsPlumb.directed = this.endpoints[0].areConnectionsDirected(); -// END COST + DIRECTIONALITY - -// PARAMETERS - // merge all the parameters objects into the connection. parameters set - // on the connection take precedence; then source endpoint params, then - // finally target 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[1].getParameters()); - jsPlumb.extend(_p, this.endpoints[0].getParameters()); - jsPlumb.extend(_p, this.getParameters()); - this.setParameters(_p); -// END PARAMETERS - -// PAINTING - - // the very last thing we do is check to see if a 'type' was supplied in the params - var _type = params.type || this.endpoints[0].connectionType || this.endpoints[1].connectionType; - if (_type) - this.addType(_type, params.data, true); - -// END PAINTING - }; - - jsPlumbUtil.extend(jsPlumb.Connection, OverlayCapableJsPlumbUIComponent, { - applyType : function(t, doNotRepaint) { - if (t.detachable != null) this.setDetachable(t.detachable); - if (t.reattach != null) this.setReattach(t.reattach); - if (t.scope) this.scope = t.scope; - //editable = t.editable; // TODO - this.setConnector(t.connector, doNotRepaint); - }, - getTypeDescriptor : function() { return "connection"; }, - getAttachedElements : function() { - return this.endpoints; - }, - addClass : function(c, informEndpoints) { - if (informEndpoints) { - this.endpoints[0].addClass(c); - this.endpoints[1].addClass(c); - if (this.suspendedEndpoint) this.suspendedEndpoint.addClass(c); - } - if (this.connector) { - this.connector.addClass(c); - } - }, - removeClass : function(c, informEndpoints) { - if (informEndpoints) { - this.endpoints[0].removeClass(c); - this.endpoints[1].removeClass(c); - if (this.suspendedEndpoint) this.suspendedEndpoint.removeClass(c); - } - if (this.connector) { - this.connector.removeClass(c); - } - }, - isVisible : function() { return this._jsPlumb.visible; }, - setVisible : function(v) { - this._jsPlumb.visible = v; - this[v ? "showOverlays" : "hideOverlays"](); - if (this.connector && this.connector.canvas) this.connector.canvas.style.display = v ? "block" : "none"; - this.repaint(); - }, - setEditable : function(e) { - if (this.connector && this.connector.isEditable()) - this._jsPlumb.editable = e; - - return this._jsPlumb.editable; - }, - isEditable : function() { return this._jsPlumb.editable; }, - editStarted : function() { - this.setSuspendEvents(true); - this.fire("editStarted", { - path:this.connector.getPath() - }); - this._jsPlumb.instance.setHoverSuspended(true); - }, - editCompleted : function() { - this.fire("editCompleted", { - path:this.connector.getPath() - }); - this.setSuspendEvents(false); - this.setHover(false); - this._jsPlumb.instance.setHoverSuspended(false); - }, - editCanceled : function() { - this.fire("editCanceled", { - path:this.connector.getPath() - }); - this.setHover(false); - this._jsPlumb.instance.setHoverSuspended(false); - }, - cleanup:function() { - //this.endpointsToDeleteOnDetach = null; - this.endpoints = null; - this.source = null; - this.target = null; - if (this.connector != null) { - this.connector.cleanup(); - this.connector.destroy(); - } - this.connector = null; - }, - isDetachable : function() { - return this._jsPlumb.detachable === true; - }, - setDetachable : function(detachable) { - this._jsPlumb.detachable = detachable === true; - }, - isReattach : function() { - return this._jsPlumb.reattach === true; - }, - setReattach : function(reattach) { - this._jsPlumb.reattach = reattach === true; - }, - setHover : function(state) { - if (this.connector && this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) { - this.connector.setHover(state); - jsPlumb.CurrentLibrary[state ? "addClass" : "removeClass"](this.source, this._jsPlumb.instance.hoverSourceClass); - jsPlumb.CurrentLibrary[state ? "addClass" : "removeClass"](this.target, this._jsPlumb.instance.hoverTargetClass); - } - }, - getCost : function() { return this._jsPlumb.cost; }, - setCost : function(c) { this._jsPlumb.cost = c; }, - isDirected : function() { return this._jsPlumb.directed === true; }, - // - // changes the parent element of this connection to newParent. not exposed for the public API. - // - // TODO ensure moveParent method still works (the overlay stuff in particular) - moveParent : function(newParent) { - var jpcl = jsPlumb.CurrentLibrary, curParent = jpcl.getParent(this.connector.canvas); - if (this.connector.bgCanvas) { - jpcl.removeElement(this.connector.bgCanvas); - jpcl.appendElement(this.connector.bgCanvas, newParent); - } - jpcl.removeElement(this.connector.canvas); - jpcl.appendElement(this.connector.canvas, newParent); - // this only applies for DOMOverlays - for (var i = 0; i < this._jsPlumb.overlays.length; i++) { - if (this._jsPlumb.overlays[i].isAppendedAtTopLevel) { - jpcl.removeElement(this._jsPlumb.overlays[i].canvas); - jpcl.appendElement(this._jsPlumb.overlays[i].canvas, newParent); - if (this._jsPlumb.overlays[i].reattachListeners) - this._jsPlumb.overlays[i].reattachListeners(this.connector); - } - } - if (this.connector.reattachListeners) // this is for SVG/VML; change an element's parent and you have to reinit its listeners. - this.connector.reattachListeners(); // the Canvas implementation doesn't have to care about this - }, - getConnector : function() { return this.connector; }, - setConnector : function(connectorSpec, doNotRepaint) { - var _ju = jsPlumbUtil; - if (this.connector != null) { - this.connector.cleanup(); - this.connector.destroy(); - } - - var connectorArgs = { - _jsPlumb:this._jsPlumb.instance, - parent:this._jsPlumb.params.parent, - cssClass:this._jsPlumb.params.cssClass, - container:this._jsPlumb.params.container, - "pointer-events":this._jsPlumb.params["pointer-events"] - }, - renderMode = this._jsPlumb.instance.getRenderMode(); - - if (_ju.isString(connectorSpec)) - this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec, connectorArgs); // lets you use a string as shorthand. - else if (_ju.isArray(connectorSpec)) { - if (connectorSpec.length == 1) - this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec[0], connectorArgs); - else - this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec[0], _ju.merge(connectorSpec[1], connectorArgs)); - } - // binds mouse listeners to the current connector. - this.bindListeners(this.connector, this, function(state) { - this.setHover(state, false); - }.bind(this)); - - this.canvas = this.connector.canvas; - - if (this._jsPlumb.editable && jsPlumb.ConnectorEditors != null && jsPlumb.ConnectorEditors[this.connector.type] && this.connector.isEditable()) { - new jsPlumb.ConnectorEditors[this.connector.type]({ - connector:this.connector, - connection:this, - params:this._jsPlumb.params.editorParams || { } - }); - } - else { - editable = false; - } - - if (!doNotRepaint) this.repaint(); - }, - paint : function(params) { - - if (!this._jsPlumb.instance.isSuspendDrawing() && this._jsPlumb.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 != this._jsPlumb.lastPaintedAt) { - var sourceInfo = this._jsPlumb.instance.updateOffset( { elId : sId, offset : ui, recalc : recalc, timestamp : timestamp }).o, - targetInfo = this._jsPlumb.instance.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(); - this.connector.setEdited(false); - } - - var sAnchorP = sE.anchor.getCurrentLocation({xy:[sourceInfo.left,sourceInfo.top], wh:[sourceInfo.width, sourceInfo.height], element:sE, timestamp:timestamp}), - tAnchorP = tE.anchor.getCurrentLocation({xy:[targetInfo.left,targetInfo.top], wh:[targetInfo.width, targetInfo.height], element:tE, timestamp:timestamp}); - - this.connector.resetBounds(); - - this.connector.compute({ - sourcePos:sAnchorP, - targetPos:tAnchorP, - sourceEndpoint:this.endpoints[sIdx], - targetEndpoint:this.endpoints[tIdx], - lineWidth:this._jsPlumb.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 < this._jsPlumb.overlays.length; i++) { - var o = this._jsPlumb.overlays[i]; - if (o.isVisible()) { - this._jsPlumb.overlayPlacements[i] = o.draw(this.connector, this._jsPlumb.paintStyleInUse); - overlayExtents.minX = Math.min(overlayExtents.minX, this._jsPlumb.overlayPlacements[i].minX); - overlayExtents.maxX = Math.max(overlayExtents.maxX, this._jsPlumb.overlayPlacements[i].maxX); - overlayExtents.minY = Math.min(overlayExtents.minY, this._jsPlumb.overlayPlacements[i].minY); - overlayExtents.maxY = Math.max(overlayExtents.maxY, this._jsPlumb.overlayPlacements[i].maxY); - } - } - - var lineWidth = parseFloat(this._jsPlumb.paintStyleInUse.lineWidth || 1) / 2, - outlineWidth = parseFloat(this._jsPlumb.paintStyleInUse.lineWidth || 0), - extents = { - xmin : Math.min(this.connector.bounds.minX - (lineWidth + outlineWidth), overlayExtents.minX), - ymin : Math.min(this.connector.bounds.minY - (lineWidth + outlineWidth), overlayExtents.minY), - xmax : Math.max(this.connector.bounds.maxX + (lineWidth + outlineWidth), overlayExtents.maxX), - ymax : Math.max(this.connector.bounds.maxY + (lineWidth + outlineWidth), overlayExtents.maxY) - }; - - // paint the connector. - this.connector.paint(this._jsPlumb.paintStyleInUse, null, extents); - // and then the overlays - for ( var j = 0; j < this._jsPlumb.overlays.length; j++) { - var p = this._jsPlumb.overlays[j]; - if (p.isVisible()) { - p.paint(this._jsPlumb.overlayPlacements[j], extents); - } - } - } - this._jsPlumb.lastPaintedAt = timestamp; - } - }, - /* - * Function: repaint - * Repaints the Connection. No parameters exposed to public API. - */ - repaint : function(params) { - params = params || {}; - this.paint({ elId : this.sourceId, recalc : !(params.recalc === false), timestamp:params.timestamp, clearEdits:params.clearEdits }); - } - - }); // END Connection class -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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(a)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 - 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];*/ - r = a[0][0] < b[0][0]; - } - else { - /*if (a[0][0] > b[0][0]) - r= true; - else - r =a[0][1] > b[0][1]; - */ - r = a[0][0] > b[0][0]; - } - 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":function(a, b) { return a[0] > b[0] ? 1 : -1; }, - "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); - }; - var removeEndpointFromAnchorLists = function(endpoint) { - (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); - } - })(anchorLists[endpoint.elementId], endpoint.id); - }; - this.connectionDetached = function(connInfo) { - var connection = connInfo.connection || connInfo, - sourceId = connInfo.sourceId, - targetId = connInfo.targetId, - ep = connection.endpoints, - removeConnection = function(otherIndex, otherEndpoint, otherAnchor, elId, c) { - if (otherAnchor != null && 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 - removeEndpointFromAnchorLists(connection.endpoints[0]); - removeEndpointFromAnchorLists(connection.endpoints[1]); - - self.redraw(connection.sourceId); - self.redraw(connection.targetId); - }; - 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; - }); - removeEndpointFromAnchorLists(endpoint); - }; - 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; }); - jsPlumbUtil.addWithFunction(endpointsToPaint, listToRemoveFrom[i][1].endpoints[oIdx], function(e) { return e.id == listToRemoveFrom[i][1].endpoints[oIdx].id; }); - } - } - } - - for (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; }); - jsPlumbUtil.addWithFunction(endpointsToPaint, listToAddTo[i][1].endpoints[oIdx], function(e) { return e.id == listToAddTo[i][1].endpoints[oIdx].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; - }; - - // - // find the entry in an endpoint's list for this connection and update its target endpoint - // with the current target in the connection. - // - // - this.updateOtherEndpoint = function(elId, oldTargetId, newTargetId, connection) { - var sIndex = jsPlumbUtil.findWithFunction(connectionsByElementId[elId], function(i) { - return i[0].id === connection.id; - }), - tIndex = jsPlumbUtil.findWithFunction(connectionsByElementId[oldTargetId], function(i) { - return i[0].id === connection.id; - }); - - // update or add data for source - if (sIndex != -1) { - connectionsByElementId[elId][sIndex][0] = connection; - connectionsByElementId[elId][sIndex][1] = connection.endpoints[1]; - connectionsByElementId[elId][sIndex][2] = connection.endpoints[1].anchor.constructor == jsPlumb.DynamicAnchor; - } - - // remove entry for previous target (if there) - if (tIndex > -1) { - - connectionsByElementId[oldTargetId].splice(tIndex, 1); - // add entry for new target - jsPlumbUtil.addToList(connectionsByElementId, newTargetId, [connection, connection.endpoints[0], connection.endpoints[0].anchor.constructor == jsPlumb.DynamicAnchor]); - } - }; - - // - // notification that the connection given has changed source from the originalId to the newId. - // This involves: - // 1. removing the connection from the list of connections stored for the originalId - // 2. updating the source information for the target of the connection - // 3. re-registering the connection in connectionsByElementId with the newId - // - this.sourceChanged = function(originalId, newId, connection) { - // remove the entry that points from the old source to the target - jsPlumbUtil.removeWithFunction(connectionsByElementId[originalId], function(info) { - return info[0].id === connection.id; - }); - // find entry for target and update it - var tIdx = jsPlumbUtil.findWithFunction(connectionsByElementId[connection.targetId], function(i) { - return i[0].id === connection.id; - }); - if (tIdx > -1) { - connectionsByElementId[connection.targetId][tIdx][0] = connection; - connectionsByElementId[connection.targetId][tIdx][1] = connection.endpoints[0]; - connectionsByElementId[connection.targetId][tIdx][2] = connection.endpoints[0].anchor.constructor == jsPlumb.DynamicAnchor; - } - // add entry for new source - jsPlumbUtil.addToList(connectionsByElementId, newId, [connection, connection.endpoints[1], connection.endpoints[1].anchor.constructor == jsPlumb.DynamicAnchor]); - }; - - // - // moves the given endpoint from `currentId` to `element`. - // This involves: - // - // 1. changing the key in _amEndpoints under which the endpoint is stored - // 2. changing the source or target values in all of the endpoint's connections - // 3. changing the array in connectionsByElementId in which the endpoint's connections - // are stored (done by either sourceChanged or updateOtherEndpoint) - // - this.rehomeEndpoint = function(ep, currentId, element) { - var eps = _amEndpoints[currentId] || [], - elementId = jsPlumbInstance.getId(element); - - if (elementId !== currentId) { - var idx = jsPlumbUtil.indexOf(eps, ep); - if (idx > -1) { - var _ep = eps.splice(idx, 1)[0]; - self.add(_ep, elementId); - } - } - - for (var i = 0; i < ep.connections.length; i++) { - if (ep.connections[i].sourceId == currentId) { - ep.connections[i].sourceId = ep.elementId; - ep.connections[i].source = ep.element; - self.sourceChanged(currentId, ep.elementId, ep.connections[i]); - } - else if(ep.connections[i].targetId == currentId) { - ep.connections[i].targetId = ep.elementId; - ep.connections[i].target = ep.element; - self.updateOtherEndpoint(ep.connections[i].sourceId, currentId, ep.elementId, ep.connections[i]); - } - } - }; - - this.redraw = function(elementId, ui, timestamp, offsetToUI, clearEdits, doNotRecalcEndpoint) { - - 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 }), - 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 (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 (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 (i = 0; i < ep.length; i++) { - ep[i].paint( { timestamp : timestamp, offset : myOffset, dimensions : myOffset.s, recalc:doNotRecalcEndpoint !== true }); - } - // ... and any other endpoints we came across as a result of the continuous anchors. - for (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 (i = 0; i < endpointConnections.length; i++) { - var otherEndpoint = endpointConnections[i][1]; - if (otherEndpoint.anchor.constructor == jsPlumb.DynamicAnchor) { - otherEndpoint.paint({ elementWithPrecedence:elementId, timestamp:timestamp }); - 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 (i = 0; i < connectionsToPaint.length; i++) { - connectionsToPaint[i].paint({elId:elementId, timestamp:timestamp, recalc:false, clearEdits:clearEdits}); - } - } - }; - - var ContinuousAnchor = function(anchorParams) { - jsPlumbUtil.EventGenerator.apply(this); - 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, - cssClass = anchorParams.cssClass || ""; - - for (var i = 0; i < faces.length; i++) { availableFaces[faces[i]] = true; } - - // if the given edge is supported, 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(params) { - return userDefinedContinuousAnchorLocations[params.element.id] || continuousAnchorLocations[params.element.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; - }; - this.getCssClass = function() { return cssClass; }; - this.setCssClass = function(c) { cssClass = c; }; - }; - - // continuous anchors - jsPlumbInstance.continuousAnchorFactory = { - get:function(params) { - var existing = continuousAnchors[params.elementId]; - if (!existing) { - existing = new ContinuousAnchor(params); - continuousAnchors[params.elementId] = existing; - } - return existing; - }, - clear:function(elementId) { - delete continuousAnchors[elementId]; - } - }; - }; - - /** - * 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) { - this.x = params.x || 0; - this.y = params.y || 0; - this.elementId = params.elementId; - this.cssClass = params.cssClass || ""; - this.userDefinedLocation = null; - this.orientation = params.orientation || [ 0, 0 ]; - - jsPlumbUtil.EventGenerator.apply(this); - - var jsPlumbInstance = params.jsPlumbInstance;//, - //lastTimestamp = null;//, lastReturnValue = null; - - this.lastReturnValue = null; - this.offsets = params.offsets || [ 0, 0 ]; - this.timestamp = null; - this.compute = function(params) { - - var xy = params.xy, wh = params.wh, element = params.element, timestamp = params.timestamp; - - if(params.clearUserDefinedLocation) - this.userDefinedLocation = null; - - if (timestamp && timestamp === self.timestamp) - return this.lastReturnValue; - - if (this.userDefinedLocation != null) { - this.lastReturnValue = this.userDefinedLocation; - } - else { - - this.lastReturnValue = [ xy[0] + (this.x * wh[0]) + this.offsets[0], xy[1] + (this.y * wh[1]) + this.offsets[1] ]; - // adjust loc if there is an offsetParent - this.lastReturnValue = jsPlumbInstance.adjustForParentOffsetAndScroll(this.lastReturnValue, element.canvas); - } - - this.timestamp = timestamp; - return this.lastReturnValue; - }; - - this.getCurrentLocation = function(params) { - return (this.lastReturnValue == null || (params.timestamp != null && this.timestamp != params.timestamp)) ? this.compute(params) : this.lastReturnValue; - }; - }; - jsPlumbUtil.extend(jsPlumb.Anchor, jsPlumbUtil.EventGenerator, { - equals : function(anchor) { - if (!anchor) return false; - var ao = anchor.getOrientation(), - 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]; - }, - getUserDefinedLocation : function() { - return this.userDefinedLocation; - }, - setUserDefinedLocation : function(l) { - this.userDefinedLocation = l; - }, - clearUserDefinedLocation : function() { - this.userDefinedLocation = null; - }, - getOrientation : function(_endpoint) { return this.orientation; }, - getCssClass : function() { return this.cssClass; } - }); - - /** - * 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; - - // clear from parent. we want floating anchor orientation to always be computed. - this.orientation = 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, endpoint) { - orientation = anchor.getOrientation(endpoint); - }; - - /** - * 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(params) { return _lastResult == null ? this.compute(params) : _lastResult; }; - }; - jsPlumbUtil.extend(jsPlumb.FloatingAnchor, jsPlumb.Anchor); - - var _convertAnchor = function(anchor, jsPlumbInstance, elementId) { - return anchor.constructor == jsPlumb.Anchor ? anchor: jsPlumbInstance.makeAnchor(anchor, elementId, jsPlumbInstance); - }; - - /* - * 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(params) { - jsPlumb.Anchor.apply(this, arguments); - - this.isSelective = true; - this.isDynamic = true; - this.anchors = []; - this.elementId = params.elementId; - this.jsPlumbInstance = params.jsPlumbInstance; - - for (var i = 0; i < params.anchors.length; i++) - this.anchors[i] = _convertAnchor(params.anchors[i], this.jsPlumbInstance, this.elementId); - this.addAnchor = function(anchor) { this.anchors.push(_convertAnchor(anchor, this.jsPlumbInstance, this.elementId)); }; - this.getAnchors = function() { return this.anchors; }; - this.locked = false; - var _curAnchor = this.anchors.length > 0 ? this.anchors[0] : null, - _curIndex = this.anchors.length > 0 ? 0 : -1, - _lastAnchor = _curAnchor, - 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 = params.selector || 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; - - this.timestamp = timestamp; - - 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 (this.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, this.anchors); - this.x = _curAnchor.x; - this.y = _curAnchor.y; - - if (_curAnchor != _lastAnchor) - this.fire("anchorChanged", _curAnchor); - - _lastAnchor = _curAnchor; - - return _curAnchor.compute(params); - }; - - this.getCurrentLocation = function(params) { - return this.getUserDefinedLocation() || (_curAnchor != null ? _curAnchor.getCurrentLocation(params) : null); - }; - - this.getOrientation = function(_endpoint) { return _curAnchor != null ? _curAnchor.getOrientation(_endpoint) : [ 0, 0 ]; }; - this.over = function(anchor, endpoint) { if (_curAnchor != null) _curAnchor.over(anchor, endpoint); }; - this.out = function() { if (_curAnchor != null) _curAnchor.out(); }; - - this.getCssClass = function() { return (_curAnchor && _curAnchor.getCssClass()) || ""; }; - }; - jsPlumbUtil.extend(jsPlumb.DynamicAnchor, jsPlumb.Anchor); - -// -------- 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.2: 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 j = 0; j < p.length; j++) { - p[j][4] = p[j][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; - }; -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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 = jsPlumbUtil.extend(jsPlumb.jsPlumbUIComponent, function(params) { - // 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.2, 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 _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"; - - this.getLength = function() { return length; }; - this.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 = this.pointOnPath(location, absolute), - farAwayPoint = distance <= 0 ? {x:x1, y:y1} : {x:x2, y:y2 }; - - /* - location == 1 ? { - x:x1 + ((x2 - x1) * 10), - y:y1 + ((y1 - y2) * 10) - } : - */ - - 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 _super = jsPlumb.Segments.AbstractSegment.apply(this, arguments), - _calcAngle = function(_x, _y) { - return jsPlumbUtil.theta([params.cx, params.cy], [_x, _y]); - }, - _calcAngleForLocation = function(segment, location) { - if (segment.anticlockwise) { - var sa = segment.startAngle < segment.endAngle ? segment.startAngle + TWO_PI : segment.startAngle, - s = Math.abs(sa - segment.endAngle); - return sa - (s * location); - } - else { - var ea = segment.endAngle < segment.startAngle ? segment.endAngle + TWO_PI : segment.endAngle, - ss = Math.abs (ea - segment.startAngle); - - return segment.startAngle + (ss * 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 + (this.radius * Math.cos(params.startAngle)); - this.y1 = params.cy + (this.radius * Math.sin(params.startAngle)); - this.x2 = params.cx + (this.radius * Math.cos(params.endAngle)); - this.y2 = params.cy + (this.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 = this.endAngle < this.startAngle ? this.endAngle + TWO_PI : this.endAngle; - this.sweep = Math.abs (ea - this.startAngle); - if (this.anticlockwise) this.sweep = TWO_PI - this.sweep; - var circumference = 2 * Math.PI * this.radius, - frac = this.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:this.x1, y:this.y1, theta:this.startAngle }; - } - else if (location == 1) { - return { x:this.x2, y:this.y2, theta:this.endAngle }; - } - - if (absolute) { - location = location / length; - } - - var angle = _calcAngleForLocation(this, 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 = this.pointOnPath(location, absolute); - var m = jsPlumbUtil.normal( [ params.cx, params.cy ], [p.x, p.y ] ); - if (!this.anticlockwise && (m == Infinity || m == -Infinity)) m *= -1; - return m; - }; - - this.pointAlongPathFrom = function(location, distance, absolute) { - var p = this.pointOnPath(location, absolute), - arcSpan = distance / circumference * 2 * Math.PI, - dir = this.anticlockwise ? -1 : 1, - startAngle = p.theta + (dir * arcSpan), - startX = params.cx + (this.radius * Math.cos(startAngle)), - startY = params.cy + (this.radius * Math.sin(startAngle)); - - return {x:startX, y:startY}; - }; - }, - - Bezier : function(params) { - var _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() { - this.resetBounds = function() { - this.bounds = { minX:Infinity, minY:Infinity, maxX:-Infinity, maxY:-Infinity }; - }; - this.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(conn, type, params) { - if (params.x1 == params.x2 && params.y1 == params.y2) return; - var s = new jsPlumb.Segments[type](params); - segments.push(s); - totalLength += s.getLength(); - conn.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) { - this.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.sourceEndpoint.anchor.orientation || params.sourceEndpoint.anchor.getOrientation(params.sourceEndpoint), - to = params.targetEndpoint.anchor.orientation || params.targetEndpoint.anchor.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; }; - - this.updateBounds = function(segment) { - var segBounds = segment.getBounds(); - this.bounds.minX = Math.min(this.bounds.minX, segBounds.minX); - this.bounds.maxX = Math.max(this.bounds.maxX, segBounds.maxX); - this.bounds.minY = Math.min(this.bounds.minY, segBounds.minY); - this.bounds.maxY = Math.max(this.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) { - var seg = _findSegmentForLocation(location, absolute); - return seg.segment && seg.segment.pointOnPath(seg.proportion, absolute) || [0,0]; - }; - - this.gradientAtPoint = function(location) { - var seg = _findSegmentForLocation(location, absolute); - return seg.segment && seg.segment.gradientAtPoint(seg.proportion, absolute) || 0; - }; - - this.pointAlongPathFrom = function(location, distance, absolute) { - var seg = _findSegmentForLocation(location, absolute); - // TODO what happens if this crosses to the next segment? - return seg.segment && seg.segment.pointAlongPathFrom(seg.proportion, distance, false) || [0,0]; - }; - - this.compute = function(params) { - if (!edited) - paintInfo = _prepareCompute(params); - - _clearSegments(); - this._compute(paintInfo, params); - this.x = paintInfo.points[0]; - this.y = paintInfo.points[1]; - this.w = paintInfo.points[2]; - this.h = paintInfo.points[3]; - this.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) - }; - }; - jsPlumbUtil.extend(jsPlumb.Connectors.AbstractConnector, AbstractComponent); - - /** - * Class: Connectors.Straight - * The Straight connector draws a simple straight line between the two anchor points. It does not have any constructor parameters. - */ - var Straight = function() { - this.type = "Straight"; - var _super = jsPlumb.Connectors.AbstractConnector.apply(this, arguments); - - this._compute = function(paintInfo, _) { - _super.addSegment(this, "Straight", {x1:paintInfo.sx, y1:paintInfo.sy, x2:paintInfo.startStubX, y2:paintInfo.startStubY}); - _super.addSegment(this, "Straight", {x1:paintInfo.startStubX, y1:paintInfo.startStubY, x2:paintInfo.endStubX, y2:paintInfo.endStubY}); - _super.addSegment(this, "Straight", {x1:paintInfo.endStubX, y1:paintInfo.endStubY, x2:paintInfo.tx, y2:paintInfo.ty}); - }; - }; - jsPlumbUtil.extend(jsPlumb.Connectors.Straight, jsPlumb.Connectors.AbstractConnector); - jsPlumb.registerConnectorType(Straight, "Straight"); - - /** - * 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. - * - */ - var Bezier = function(params) { - params = params || {}; - - var _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) { - // 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 = sourceEndpoint.anchor.getOrientation(sourceEndpoint), - too = targetEndpoint.anchor.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 = this._findControlPoint([_sx, _sy], sp, tp, p.sourceEndpoint, p.targetEndpoint), - _CP2 = this._findControlPoint([_tx, _ty], tp, sp, p.targetEndpoint, p.sourceEndpoint); - - _super.addSegment(this, "Bezier", { - x1:_sx, y1:_sy, x2:_tx, y2:_ty, - cp1x:_CP[0], cp1y:_CP[1], cp2x:_CP2[0], cp2y:_CP2[1] - }); - }; - }; - jsPlumbUtil.extend(Bezier, jsPlumb.Connectors.AbstractConnector); - jsPlumb.registerConnectorType(Bezier, "Bezier"); - - // ********************************* END OF CONNECTOR TYPES ******************************************************************* - - // ********************************* ENDPOINT TYPES ******************************************************************* - - jsPlumb.Endpoints.AbstractEndpoint = function(params) { - AbstractComponent.apply(this, arguments); - var compute = this.compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { - var out = this._compute.apply(this, arguments); - this.x = out[0]; - this.y = out[1]; - this.w = out[2]; - this.h = out[3]; - this.bounds.minX = this.x; - this.bounds.minY = this.y; - this.bounds.maxX = this.x + this.w; - this.bounds.maxY = this.y + this.h; - return out; - }; - return { - compute:compute, - cssClass:params.cssClass - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.AbstractEndpoint, AbstractComponent); - - /** - * 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 _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) { - this.radius = endpointStyle.radius || this.radius; - var x = anchorPoint[0] - this.radius, - y = anchorPoint[1] - this.radius, - w = this.radius * 2, - h = this.radius * 2; - - if (endpointStyle.strokeStyle) { - var lw = endpointStyle.lineWidth || 1; - x -= lw; - y -= lw; - w += (lw * 2); - h += (lw * 2); - } - return [ x, y, w, h, this.radius ]; - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.Dot, jsPlumb.Endpoints.AbstractEndpoint); - - /** - * 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 _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 || this.width, - height = endpointStyle.height || this.height, - x = anchorPoint[0] - (width/2), - y = anchorPoint[1] - (height/2); - - return [ x, y, width, height]; - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.Rectangle, jsPlumb.Endpoints.AbstractEndpoint); - - - var DOMElementEndpoint = function(params) { - jsPlumb.DOMElementComponent.apply(this, arguments); - this._jsPlumb.displayElements = [ ]; - }; - jsPlumbUtil.extend(DOMElementEndpoint, jsPlumb.DOMElementComponent, { - // jsPlumb.Endpoints.AbstractEndpoint - getDisplayElements : function() { - return this._jsPlumb.displayElements; - }, - appendDisplayElement : function(el) { - this._jsPlumb.displayElements.push(el); - } - }); - - /** - * Class: Endpoints.Image - * Draws an image as the Endpoint. - */ - /** - * Function: Constructor - * - * Parameters: - * - * src - location of the image to use. - - TODO: multiple references to self. not sure quite how to get rid of them entirely. perhaps self = null in the cleanup - function will suffice - - TODO this class still leaks memory. - - */ - jsPlumb.Endpoints.Image = function(params) { - - this.type = "Image"; - DOMElementEndpoint.apply(this, arguments); - jsPlumb.Endpoints.AbstractEndpoint.apply(this, arguments); - - var _onload = params.onload, - src = params.src || params.url, - parent = params.parent, - clazz = params.cssClass ? " " + params.cssClass : ""; - - this._jsPlumb.img = new Image(); - this._jsPlumb.ready = false; - this._jsPlumb.initialized = false; - this._jsPlumb.deleted = false; - this._jsPlumb.widthToUse = params.width; - this._jsPlumb.heightToUse = params.height; - this._jsPlumb.endpoint = params.endpoint; - - this._jsPlumb.img.onload = function() { - // check we weren't actually discarded before use (in fact mostly happens in tests) - if (this._jsPlumb != null) { - this._jsPlumb.ready = true; - this._jsPlumb.widthToUse = this._jsPlumb.widthToUse || this._jsPlumb.img.width; - this._jsPlumb.heightToUse = this._jsPlumb.heightToUse || this._jsPlumb.img.height; - if (_onload) { - _onload(this); - } - } - }.bind(this); - - /* - 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. - */ - this._jsPlumb.endpoint.setImage = function(_img, onload) { - var s = _img.constructor == String ? _img : _img.src; - _onload = onload; - this._jsPlumb.img.src = s; - - if (this.canvas != null) - this.canvas.setAttribute("src", this._jsPlumb.img.src); - }.bind(this); - - this._jsPlumb.endpoint.setImage(src, _onload); - /* - var s = src.constructor == String ? src : src.src; - //_onload = onload; - this._jsPlumb.img.src = src; - - if (this.canvas != null) - this.canvas.setAttribute("src", this._jsPlumb.img.src); - // }.bind(this); - - //this._jsPlumb.endpoint.setImage(src, _onload);*/ - - this._compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { - this.anchorPoint = anchorPoint; - if (this._jsPlumb.ready) return [anchorPoint[0] - this._jsPlumb.widthToUse / 2, anchorPoint[1] - this._jsPlumb.heightToUse / 2, - this._jsPlumb.widthToUse, this._jsPlumb.heightToUse]; - else return [0,0,0,0]; - }; - - this.canvas = document.createElement("img"); - this.canvas.style.margin = 0; - this.canvas.style.padding = 0; - this.canvas.style.outline = 0; - this.canvas.style.position = "absolute"; - this.canvas.className = this._jsPlumb.instance.endpointClass + clazz; - if (this._jsPlumb.widthToUse) this.canvas.setAttribute("width", this._jsPlumb.widthToUse); - if (this._jsPlumb.heightToUse) this.canvas.setAttribute("height", this._jsPlumb.heightToUse); - this._jsPlumb.instance.appendElement(this.canvas, parent); - this.attachListeners(this.canvas, this); - - this.actuallyPaint = function(d, style, anchor) { - if (!this._jsPlumb.deleted) { - if (!this._jsPlumb.initialized) { - this.canvas.setAttribute("src", this._jsPlumb.img.src); - this.appendDisplayElement(this.canvas); - this._jsPlumb.initialized = true; - } - var x = this.anchorPoint[0] - (this._jsPlumb.widthToUse / 2), - y = this.anchorPoint[1] - (this._jsPlumb.heightToUse / 2); - jsPlumbUtil.sizeElement(this.canvas, x, y, this._jsPlumb.widthToUse, this._jsPlumb.heightToUse); - } - }; - - this.paint = function(style, anchor) { - if (this._jsPlumb != null) { // may have been deleted - if (this._jsPlumb.ready) { - this.actuallyPaint(style, anchor); - } - else { - window.setTimeout(function() { - this.paint(style, anchor); - }.bind(this), 200); - } - } - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.Image, [ DOMElementEndpoint, jsPlumb.Endpoints.AbstractEndpoint ], { - cleanup : function() { - this._jsPlumb.deleted = true; - jsPlumbUtil.removeElement(this.canvas); - this.canvas = null; - } - }); - - /* - * 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 _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]; - }; - - this.canvas = document.createElement("div"); - this.canvas.style.display = "block"; - this.canvas.style.width = "1px"; - this.canvas.style.height = "1px"; - this.canvas.style.background = "transparent"; - this.canvas.style.position = "absolute"; - this.canvas.className = this._jsPlumb.endpointClass; - jsPlumb.appendElement(this.canvas, params.parent); - - this.paint = function(style, anchor) { - jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.Blank, [jsPlumb.Endpoints.AbstractEndpoint, DOMElementEndpoint], { - cleanup:function() { - if (this.canvas) { - this.canvas.parentNode.removeChild(this.canvas); - } - } - }); - - /* - * 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 _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) { - this.visible = true; - 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.; - }; - AbstractOverlay.prototype = { - cleanup:function() { - this.component = null; - this.canvas = null; - this.endpointLoc = null; - }, - setVisible : function(val) { - this.visible = val; - this.component.repaint(); - }, - isVisible : function() { return this.visible; }, - hide : function() { this.setVisible(false); }, - show : function() { this.setVisible(true); }, - - incrementLocation : function(amount) { - this.loc += amount; - this.component.repaint(); - }, - setLocation : function(l) { - this.loc = l; - this.component.repaint(); - }, - getLocation : function() { - return this.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 _ju = jsPlumbUtil; - - 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 (_ju.isString(this.loc) || this.loc > 1 || this.loc < 0) { - var l = parseInt(this.loc, 10); - hxy = component.pointAlongPathFrom(l, direction * this.length / 2, true); - mid = component.pointOnPath(l, true); - txy = _ju.pointOnLine(hxy, mid, this.length); - } - else if (this.loc == 1) { - hxy = component.pointOnPath(this.loc); - mid = component.pointAlongPathFrom(this.loc, -(this.length)); - txy = _ju.pointOnLine(hxy, mid, this.length); - - if (direction == -1) { - var _ = txy; - txy = hxy; - hxy = _; - } - } - else if (this.loc === 0) { - txy = component.pointOnPath(this.loc); - mid = component.pointAlongPathFrom(this.loc, this.length); - hxy = _ju.pointOnLine(txy, mid, this.length); - if (direction == -1) { - var __ = txy; - txy = hxy; - hxy = __; - } - } - else { - hxy = component.pointAlongPathFrom(this.loc, direction * this.length / 2); - mid = component.pointOnPath(this.loc); - txy = _ju.pointOnLine(hxy, mid, this.length); - } - - tail = _ju.perpendicularLineTo(hxy, txy, this.width); - cxy = _ju.pointOnLine(hxy, txy, foldback * this.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}; - }; - }; - jsPlumbUtil.extend(jsPlumb.Overlays.Arrow, AbstractOverlay); - - /* - * 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"; - }; - jsPlumbUtil.extend(jsPlumb.Overlays.PlainArrow, jsPlumb.Overlays.Arrow); - - /* - * 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"; - }; - jsPlumbUtil.extend(jsPlumb.Overlays.Diamond, jsPlumb.Overlays.Arrow); - - var _getDimensions = function(component) { - if (component._jsPlumb.cachedDimensions == null) - component._jsPlumb.cachedDimensions = component.getDimensions(); - return component._jsPlumb.cachedDimensions; - }; - - // 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 jpcl = jsPlumb.CurrentLibrary; - this.id = params.id; - this._jsPlumb.div = null; - this._jsPlumb.initialised = false; - this._jsPlumb.component = params.component; - this._jsPlumb.cachedDimensions = null; - this._jsPlumb.create = params.create; - - this.getElement = function() { - if (this._jsPlumb.div == null) { - var div = this._jsPlumb.div = jpcl.getDOMElement(this._jsPlumb.create(this._jsPlumb.component)); - div.style.position = "absolute"; - var clazz = params._jsPlumb.overlayClass + " " + - (this.cssClass ? this.cssClass : - params.cssClass ? params.cssClass : ""); - div.className = clazz; - this._jsPlumb.instance.appendElement(div, this._jsPlumb.component.parent); - this._jsPlumb.instance.getId(div); - this.attachListeners(div, this); - this.canvas = div; - } - return this._jsPlumb.div; - }; - - /* - this.paint = function(p, containerExtents) { - if (!this._jsPlumb.initialised) { - this.getElement(); - p.component.appendDisplayElement(this._jsPlumb.div); - this.attachListeners(this._jsPlumb.div, p.component); - this._jsPlumb.initialised = true; - } - this._jsPlumb.div.style.left = (p.component.x + p.d.minx) + "px"; - this._jsPlumb.div.style.top = (p.component.y + p.d.miny) + "px"; - };*/ - - this.draw = function(component, currentConnectionPaintStyle) { - var td = _getDimensions(this); - if (td != null && td.length == 2) { - var cxy = {x:0,y:0}; - if (component.pointOnPath) { - var loc = this.loc, absolute = false; - if (jsPlumbUtil.isString(this.loc) || this.loc < 0 || this.loc > 1) { - loc = parseInt(this.loc, 10); - absolute = true; - } - cxy = component.pointOnPath(loc, absolute); // a connection - } - else { - var locToUse = this.loc.constructor == Array ? this.loc : this.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}; - }; - }; - jsPlumbUtil.extend(AbstractDOMOverlay, [jsPlumb.DOMElementComponent, AbstractOverlay], { - getDimensions : function() { - return jsPlumb.CurrentLibrary.getSize(jsPlumb.CurrentLibrary.getElementObject(this.getElement())); - }, - setVisible : function(state) { - this._jsPlumb.div.style.display = state ? "block" : "none"; - }, - /* - * 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. - */ - clearCachedDimensions : function() { - this._jsPlumb.cachedDimensions = null; - }, - cleanup : function() { - if (this._jsPlumb.div != null) - jsPlumb.CurrentLibrary.removeElement(this._jsPlumb.div); - }, - computeMaxSize : function() { - var td = _getDimensions(this); - return Math.max(td[0], td[1]); - }, - reattachListeners : function(connector) { - if (this._jsPlumb.div) { - this.reattachListenersForElement(this._jsPlumb.div, this, connector); - } - }, - paint : function(p, containerExtents) { - if (!this._jsPlumb.initialised) { - this.getElement(); - p.component.appendDisplayElement(this._jsPlumb.div); - this.attachListeners(this._jsPlumb.div, p.component); - this._jsPlumb.initialised = true; - } - this._jsPlumb.div.style.left = (p.component.x + p.d.minx) + "px"; - this._jsPlumb.div.style.top = (p.component.y + p.d.miny) + "px"; - } - }); - - /* - * 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); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.Custom, AbstractDOMOverlay); - - 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) { - this.labelStyle = params.labelStyle || jsPlumb.Defaults.LabelStyle; - this.cssClass = this.labelStyle != null ? this.labelStyle.cssClass : null; - var p = jsPlumb.extend({ - create : function() { - return document.createElement("div"); - }}, params); - jsPlumb.Overlays.Custom.call(this, p); - this.type = "Label"; - this.label = params.label || ""; - this.labelText = null; - }; - jsPlumbUtil.extend(jsPlumb.Overlays.Label, jsPlumb.Overlays.Custom, { - cleanup:function() { - this.div = null; - this.label = null; - this.labelText = null; - this.cssClass = null; - this.labelStyle = null; - }, - getLabel : function() { - return this.label; - }, - /* - * 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. - */ - setLabel : function(l) { - this.label = l; - this.labelText = null; - this.clearCachedDimensions(); - this.update(); - this.component.repaint(); - }, - getDimensions : function() { - this.update(); - return AbstractDOMOverlay.prototype.getDimensions.apply(this, arguments); - }, - update : function() { - if (typeof this.label == "function") { - var lt = this.label(this); - this.getElement().innerHTML = lt.replace(/\r\n/g, "<br/>"); - } - else { - if (this.labelText == null) { - this.labelText = this.label; - this.getElement().innerHTML = this.labelText.replace(/\r\n/g, "<br/>"); - } - } - } - }); - - // ********************************* END OF OVERLAY DEFINITIONS *********************************************************************** - -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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(a)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). - * alwaysRespectStubs - defaults to false. whether or not the connectors should always draw the stub, or, if the two elements - are in close proximity to each other (closer than the sum of the two stubs), to adjust the stubs. - */ - var Flowchart = function(params) { - this.type = "Flowchart"; - params = params || {}; - params.stub = params.stub == null ? 30 : params.stub; - var self = this, - _super = jsPlumb.Connectors.AbstractConnector.apply(this, arguments), - midpoint = params.midpoint == null ? 0.5 : params.midpoint, - points = [], segments = [], - grid = params.grid, - alwaysRespectStubs = params.alwaysRespectStubs, - userSuppliedSegments = null, - lastx = null, lasty = null, lastOrientation, - cornerRadius = params.cornerRadius != null ? params.cornerRadius : 0, - sgn = function(n) { return n < 0 ? -1 : n === 0 ? 0 : 1; }, - /** - * helper method to add a segment. - */ - addSegment = function(segments, x, y, paintInfo) { - if (lastx == x && lasty == y) return; - var lx = lastx == null ? paintInfo.sx : lastx, - ly = lasty == null ? paintInfo.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(conn, 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(conn, "Straight", { - x1:current[0], y1:current[1], x2:current[2], y2:current[3] - }); - - _super.addSegment(conn, "Arc", { - r:radiusToUse, - x1:current[2], - y1:current[3], - x2:next[0], - y2:next[1], - cx:cx, - cy:cy, - ac:ac - }); - } - else { - // dx + dy are used to adjust for line width. - var dx = (current[2] == current[0]) ? 0 : (current[2] > current[0]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2), - dy = (current[3] == current[1]) ? 0 : (current[3] > current[1]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2); - _super.addSegment(conn, "Straight", { - x1:current[0]- dx, y1:current[1]-dy, x2:current[2] + dx, y2:current[3] + dy - }); - } - current = next; - } - // last segment - _super.addSegment(conn, "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(this, 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); - - var findClearedLine = function(start, mult, anchorPos, dimension) { - return start + (mult * (( 1 - anchorPos) * dimension) + _super.maxStub); - }, - orientations = { x:[ 0, 1 ], y:[ 1, 0 ] }, - commonStubCalculator = function(axis) { - return [ paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY ]; - }, - stubCalculators = { - perpendicular:commonStubCalculator, - orthogonal:commonStubCalculator, - opposite:function(axis) { - var pi = paintInfo, - idx = axis == "x" ? 0 : 1, - areInProximity = { - "x":function() { - return ( (pi.so[idx] == 1 && ( - ( (pi.startStubX > pi.endStubX) && (pi.tx > pi.startStubX) ) || - ( (pi.sx > pi.endStubX) && (pi.tx > pi.sx))))) || - - ( (pi.so[idx] == -1 && ( - ( (pi.startStubX < pi.endStubX) && (pi.tx < pi.startStubX) ) || - ( (pi.sx < pi.endStubX) && (pi.tx < pi.sx))))); - }, - "y":function() { - return ( (pi.so[idx] == 1 && ( - ( (pi.startStubY > pi.endStubY) && (pi.ty > pi.startStubY) ) || - ( (pi.sy > pi.endStubY) && (pi.ty > pi.sy))))) || - - ( (pi.so[idx] == -1 && ( - ( (pi.startStubY < pi.endStubY) && (pi.ty < pi.startStubY) ) || - ( (pi.sy < pi.endStubY) && (pi.ty < pi.sy))))); - } - }; - - if (!alwaysRespectStubs && areInProximity[axis]()) { - return { - "x":[(paintInfo.sx + paintInfo.tx) / 2, paintInfo.startStubY, (paintInfo.sx + paintInfo.tx) / 2, paintInfo.endStubY], - "y":[paintInfo.startStubX, (paintInfo.sy + paintInfo.ty) / 2, paintInfo.endStubX, (paintInfo.sy + paintInfo.ty) / 2] - }[axis]; - } - else { - return [ paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY ]; - } - } - }, - lineCalculators = { - perpendicular : function(axis, ss, oss, es, oes) { - var pi = paintInfo, - 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:[ [ pi.startStubX, pi.endStubX ] , null, [ pi.endStubX, pi.startStubX ] ], - y:[ [ pi.startStubY, pi.endStubY ] , null, [ pi.endStubY, pi.startStubY ] ] - }, - midLines = { - x:[ [ midx, pi.startStubY ], [ midx, pi.endStubY ] ], - y:[ [ pi.startStubX, midy ], [ pi.endStubX, midy ] ] - }, - linesToEnd = { - x:[ [ pi.endStubX, pi.startStubY ] ], - y:[ [ pi.startStubX, pi.endStubY ] ] - }, - startToEnd = { - x:[ [ pi.startStubX, pi.endStubY ], [ pi.endStubX, pi.endStubY ] ], - y:[ [ pi.endStubX, pi.startStubY ], [ pi.endStubX, pi.endStubY ] ] - }, - startToMidToEnd = { - x:[ [ pi.startStubX, midy ], [ pi.endStubX, midy ], [ pi.endStubX, pi.endStubY ] ], - y:[ [ midx, pi.startStubY ], [ midx, pi.endStubY ], [ pi.endStubX, pi.endStubY ] ] - }, - otherStubs = { - x:[ pi.startStubY, pi.endStubY ], - y:[ pi.startStubX, pi.endStubX ] - }, - soIdx = orientations[axis][0], toIdx = orientations[axis][1], - _so = pi.so[soIdx] + 1, - _to = pi.to[toIdx] + 1, - otherFlipped = (pi.to[toIdx] == -1 && (otherStubs[axis][1] < otherStubs[axis][0])) || (pi.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 (pi.segment == segmentIndexes[3] || (pi.segment == segmentIndexes[2] && otherFlipped)) { - return midLines[axis]; - } - else if (pi.segment == segmentIndexes[2] && stub2 < stub1) { - return linesToEnd[axis]; - } - else if ((pi.segment == segmentIndexes[2] && stub2 >= stub1) || (pi.segment == segmentIndexes[1] && !otherFlipped)) { - return startToMidToEnd[axis]; - } - else if (pi.segment == segmentIndexes[0] || (pi.segment == segmentIndexes[1] && otherFlipped)) { - return startToEnd[axis]; - } - }, - orthogonal : function(axis, startStub, otherStartStub, endStub, otherEndStub) { - var pi = paintInfo, - extent = { - "x":pi.so[0] == -1 ? Math.min(startStub, endStub) : Math.max(startStub, endStub), - "y":pi.so[1] == -1 ? Math.min(startStub, endStub) : Math.max(startStub, endStub) - }[axis]; - - return { - "x":[ [ extent, otherStartStub ],[ extent, otherEndStub ], [ endStub, otherEndStub ] ], - "y":[ [ otherStartStub, extent ], [ otherEndStub, extent ], [ otherEndStub, endStub ] ] - }[axis]; - }, - opposite : function(axis, ss, oss, es, oes) { - var pi = paintInfo, - otherAxis = {"x":"y","y":"x"}[axis], - dim = {"x":"height","y":"width"}[axis], - comparator = pi["is" + axis.toUpperCase() + "GreaterThanStubTimes2"]; - - if (params.sourceEndpoint.elementId == params.targetEndpoint.elementId) { - var _val = oss + ((1 - params.sourceEndpoint.anchor[otherAxis]) * params.sourceInfo[dim]) + _super.maxStub; - return { - "x":[ [ ss, _val ], [ es, _val ] ], - "y":[ [ _val, ss ], [ _val, es ] ] - }[axis]; - - } - else if (!comparator || (pi.so[idx] == 1 && ss > es) || (pi.so[idx] == -1 && ss < es)) { - return { - "x":[[ ss, midy ], [ es, midy ]], - "y":[[ midx, ss ], [ midx, es ]] - }[axis]; - } - else if ((pi.so[idx] == 1 && ss < es) || (pi.so[idx] == -1 && ss > es)) { - return { - "x":[[ midx, pi.sy ], [ midx, pi.ty ]], - "y":[[ pi.sx, midy ], [ pi.tx, midy ]] - }[axis]; - } - } - }; - - var stubs = stubCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis), - idx = paintInfo.sourceAxis == "x" ? 0 : 1, - oidx = paintInfo.sourceAxis == "x" ? 1 : 0, - ss = stubs[idx], - oss = stubs[oidx], - es = stubs[idx + 2], - oes = stubs[oidx + 2]; - - // add the start stub segment. - addSegment(segments, stubs[0], stubs[1], paintInfo); - - // compute the rest of the line - var p = lineCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis, ss, oss, es, oes); - if (p) { - for (var i = 0; i < p.length; i++) { - addSegment(segments, p[i][0], p[i][1], paintInfo); - } - } - - // line to end stub - addSegment(segments, stubs[2], stubs[3], paintInfo); - - // end stub to end - addSegment(segments, paintInfo.tx, paintInfo.ty, paintInfo); - - writeSegments(this, 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]); - } - }; - }; - - jsPlumbUtil.extend(Flowchart, jsPlumb.Connectors.AbstractConnector); - jsPlumb.registerConnectorType(Flowchart, "Flowchart"); -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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(a)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 = [], xInt, yInt; - - // try top face - // the equation of the top face is y = (0 * x) + b; y = b. - 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 - yInt = (this.m * (x + w)) + this.b; - if (yInt >= y && yInt <= (y + h)) results.push([ (yInt - this.b) / this.m, yInt ]); - - // bottom face - 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 - 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. - */ - var 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(this, "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(this, "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 - }); - } - }; - }; - jsPlumb.registerConnectorType(StateMachine, "StateMachine"); -})(); - -/* - // 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]); -// } -// } - // } - // } - //} - */ - -;(function() { - - var 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) { - // 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 = sourceEndpoint.anchor.getOrientation(sourceEndpoint), - too = targetEndpoint.anchor.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), - _CP2 = self._findControlPoint([_tx, _ty], tp, sp, p.targetEndpoint, p.sourceEndpoint); - - _super.addSegment(this, "Bezier", { - x1:_sx, y1:_sy, x2:_tx, y2:_ty, - cp1x:_CP[0], cp1y:_CP[1], cp2x:_CP2[0], cp2y:_CP2[1] - }); - }; - }; - - jsPlumb.registerConnectorType(Bezier, "Bezier"); - -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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.2. - * 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() { - - -// ********************************* 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 = window.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; - }; - }; - jsPlumbUtil.extend(CanvasMouseAdapter, [ jsPlumb.jsPlumbUIComponent, jsPlumbUtil.EventGenerator ]); - - var _newCanvas = function(params) { - var canvas = document.createElement("canvas"); - params._jsPlumb.instance.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.instance.getId(canvas, params.uuid); - if (params.tooltip) canvas.setAttribute("title", params.tooltip); - - return canvas; - }; - - var CanvasComponent = window.CanvasComponent = function(params) { - CanvasMouseAdapter.apply(this, arguments); - - var displayElements = [ ]; - this.getDisplayElements = function() { return displayElements; }; - this.appendDisplayElement = function(el) { displayElements.push(el); }; - }; - jsPlumbUtil.extend(CanvasComponent, CanvasMouseAdapter); - - 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, dx, dy) { - ({ - "Straight":function(segment, ctx, style, dx, dy) { - var d = segment.params; - ctx.save(); - maybeMakeGradient(ctx, style, function() { return ctx.createLinearGradient(d.x1, d.y1, d.x2, d.y2); }); - ctx.beginPath(); - ctx.translate(dx, dy); - 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(); - - ctx.restore(); - }, - "Bezier":function(segment, ctx, style, dx, dy) { - var d = segment.params; - ctx.save(); - maybeMakeGradient(ctx, style, function() { return ctx.createLinearGradient(d.x2 + dx, d.y2 + dy, d.x1 + dx, d.y1 + dy); }); - ctx.beginPath(); - ctx.translate(dx, dy); - ctx.moveTo(d.x1, d.y1); - ctx.bezierCurveTo(d.cp1x, d.cp1y, d.cp2x, d.cp2y, d.x2, d.y2); - ctx.stroke(); - ctx.restore(); - }, - "Arc":function(segment, ctx, style, dx, dy) { - var d = segment.params; - ctx.save(); - ctx.beginPath(); - ctx.translate(dx, dy); - ctx.arc(d.cx, d.cy, d.r, segment.startAngle, segment.endAngle, d.ac); - ctx.stroke(); - ctx.restore(); - } - })[segment.type](segment, ctx, style, dx, dy); - }; - - /** - * Class:CanvasConnector - * Superclass for Canvas Connector renderers. - */ - var CanvasConnector = jsPlumb.ConnectorRenderers.canvas = function(params) { - CanvasComponent.apply(this, arguments); - - var _paintOneStyle = function(aStyle, dx, dy) { - this.ctx.save(); - jsPlumb.extend(this.ctx, aStyle); - - var segments = this.getSegments(); - for (var i = 0; i < segments.length; i++) { - segmentRenderer(segments[i], this.ctx, aStyle, dx, dy); - } - this.ctx.restore(); - }.bind(this); - - var clazz = this._jsPlumb.instance.connectorClass + " " + (params.cssClass || ""); - this.canvas = _newCanvas({ - "class":clazz, - _jsPlumb:this._jsPlumb, - parent:params.parent - }); - this.ctx = this.canvas.getContext("2d"); - - this.appendDisplayElement(this.canvas); - - this.paint = function(style, anchor, extents) { - if (style != null) { - - var xy = [ this.x, this.y ], wh = [ this.w, this.h ], p, - dx = 0, dy = 0; - - if (extents != null) { - if (extents.xmin < 0) { - xy[0] += extents.xmin; - dx = -extents.xmin; - } - if (extents.ymin < 0) { - xy[1] += extents.ymin; - dy = -extents.ymin; - } - wh[0] = extents.xmax + ((extents.xmin < 0) ? -extents.xmin : 0); - wh[1] = extents.ymax + ((extents.ymin < 0) ? -extents.ymin : 0); - } - - this.translateX = dx; - this.translateY = dy; - - jsPlumbUtil.sizeElement(this.canvas, xy[0], xy[1], wh[0], wh[1]); - - if (style.outlineColor != null) { - var outlineWidth = style.outlineWidth || 1, - outlineStrokeWidth = style.lineWidth + (2 * outlineWidth), - outlineStyle = { - strokeStyle:style.outlineColor, - lineWidth:outlineStrokeWidth - }; - _paintOneStyle(outlineStyle, dx, dy); - } - _paintOneStyle(style, dx, dy); - } - }; - }; - jsPlumbUtil.extend(CanvasConnector, CanvasComponent); - - - /** - * Class:CanvasEndpoint - * Superclass for Canvas Endpoint renderers. - */ - var CanvasEndpoint = function(params) { - CanvasComponent.apply(this, arguments); - var clazz = this._jsPlumb.instance.endpointClass + " " + (params.cssClass || ""), - canvasParams = { - "class":clazz, - _jsPlumb:this._jsPlumb, - parent:params.parent, - tooltip:self.tooltip - }; - this.canvas = _newCanvas(canvasParams); - this.ctx = this.canvas.getContext("2d"); - - this.appendDisplayElement(this.canvas); - - this.paint = function(style, anchor, extents) { - jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); - if (style.outlineColor != null) { - var outlineWidth = style.outlineWidth || 1, - outlineStrokeWidth = style.lineWidth + (2 * outlineWidth); - var outlineStyle = { - strokeStyle:style.outlineColor, - lineWidth:outlineStrokeWidth - }; - } - - this._paint.apply(this, arguments); - }; - }; - jsPlumbUtil.extend(CanvasEndpoint, CanvasComponent); - - 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, 10); } - catch(e) { - if (value.substring(value.length - 1) == '%') - return parseInt(value.substring(0, value - 1), 10); - } - }, - calculateAdjustments = function(gradient) { - var offsetAdjustment = self.defaultOffset, innerRadius = self.defaultInnerRadius; - if (gradient.offset) offsetAdjustment = parseValue(gradient.offset); - if (gradient.innerRadius) innerRadius = parseValue(gradient.innerRadius); - return [offsetAdjustment, innerRadius]; - }; - this._paint = function(style) { - if (style != null) { - var ctx = self.canvas.getContext('2d'), - orientation = params.endpoint.anchor.getOrientation(params.endpoint); - - 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(self.radius, self.radius, self.radius, self.radius + xAdjust, self.radius + 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.translate(dx, dy); - ctx.arc(self.radius, self.radius, self.radius, 0, Math.PI*2, true); - ctx.closePath(); - if (style.fillStyle || style.gradient) ctx.fill(); - if (style.strokeStyle) ctx.stroke(); - } - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Dot, [ jsPlumb.Endpoints.Dot, CanvasEndpoint ]); - - jsPlumb.Endpoints.canvas.Rectangle = function(params) { - - var self = this; - jsPlumb.Endpoints.Rectangle.apply(this, arguments); - CanvasEndpoint.apply(this, arguments); - - this._paint = function(style) { - - var ctx = self.canvas.getContext("2d"), - orientation = params.endpoint.anchor.getOrientation(params.endpoint); - - 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 ? self.h : orientation[1] === 0 ? self.h / 2 : 0; - var y2 = orientation[1] == -1 ? self.h : orientation[1] === 0 ? self.h / 2 : 0; - var x1 = orientation[0] == 1 ? self.w : orientation[0] === 0 ? self.w / 2 : 0; - var x2 = orientation[0] == -1 ? self.w : orientation[0] === 0 ? self.w / 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, self.w, self.h); - ctx.closePath(); - if (style.fillStyle || style.gradient) ctx.fill(); - if (style.strokeStyle) ctx.stroke(); - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Rectangle, [ jsPlumb.Endpoints.Rectangle, CanvasEndpoint ]); - - jsPlumb.Endpoints.canvas.Triangle = function(params) { - - var self = this; - jsPlumb.Endpoints.Triangle.apply(this, arguments); - CanvasEndpoint.apply(this, arguments); - - this._paint = function(style) { - var ctx = self.canvas.getContext('2d'), - offsetX = 0, offsetY = 0, angle = 0, - orientation = params.endpoint.anchor.getOrientation(params.endpoint); - - if( orientation[0] == 1 ) { - offsetX = self.width; - offsetY = self.height; - angle = 180; - } - if( orientation[1] == -1 ) { - offsetX = self.width; - angle = 90; - } - if( orientation[1] == 1 ) { - offsetY = self.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(self.width/2, self.height/2); - ctx.lineTo(0, self.height); - ctx.closePath(); - if (style.fillStyle || style.gradient) ctx.fill(); - if (style.strokeStyle) ctx.stroke(); - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Triangle, [ jsPlumb.Endpoints.Triangle, CanvasEndpoint ]); - - /* - * 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); - }; - jsPlumbUtil.extend(jsPlumb.Connectors.canvas.Bezier, [ jsPlumb.Connectors.Bezier, CanvasConnector ]); - - /* - * 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); - }; - jsPlumbUtil.extend(jsPlumb.Connectors.canvas.Straight, [ jsPlumb.Connectors.Straight, CanvasConnector ]); - - jsPlumb.Connectors.canvas.Flowchart = function() { - jsPlumb.Connectors.Flowchart.apply(this, arguments); - CanvasConnector.apply(this, arguments); - }; - jsPlumbUtil.extend(jsPlumb.Connectors.canvas.Flowchart, [ jsPlumb.Connectors.Flowchart, CanvasConnector ]); - - */ -// ********************************* 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); - }; - jsPlumbUtil.extend(CanvasOverlay, jsPlumb.jsPlumbUIComponent); - - var AbstractCanvasArrowOverlay = function(superclass, originalArgs) { - superclass.apply(this, originalArgs); - CanvasOverlay.apply(this, originalArgs); - this.paint = function(params, containerExtents) { - var ctx = params.component.ctx, d = params.d; - - if (d) { - ctx.save(); - ctx.lineWidth = params.lineWidth; - ctx.beginPath(); - ctx.translate(params.component.translateX, params.component.translateY); - 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 (params.strokeStyle) { - ctx.strokeStyle = params.strokeStyle; - ctx.stroke(); - } - if (params.fillStyle) { - ctx.fillStyle = params.fillStyle; - ctx.fill(); - } - ctx.restore(); - } - }; - }; - - jsPlumb.Overlays.canvas.Arrow = function() { - AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.canvas.Arrow, [ jsPlumb.Overlays.Arrow, CanvasOverlay ] ); - - jsPlumb.Overlays.canvas.PlainArrow = function() { - AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.canvas.PlainArrow, [ jsPlumb.Overlays.PlainArrow, CanvasOverlay ] ); - - jsPlumb.Overlays.canvas.Diamond = function() { - AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.canvas.Diamond, [ jsPlumb.Overlays.Diamond, CanvasOverlay ] ); -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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.instance.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 pointerEventsSpec = params.pointerEventsSpec || "all", renderer = {}; - - jsPlumb.jsPlumbUIComponent.apply(this, params.originalArgs); - this.canvas = null;this.path = null;this.svg = null; - - var clazz = params.cssClass + " " + (params.originalArgs[0].cssClass || ""), - svgParams = { - "style":"", - "width":0, - "height":0, - "pointer-events":pointerEventsSpec, - "position":"absolute" - }; - this.svg = _node("svg", svgParams); - if (params.useDivWrapper) { - this.canvas = document.createElement("div"); - this.canvas.style.position = "absolute"; - jsPlumbUtil.sizeElement(this.canvas,0,0,1,1); - this.canvas.className = clazz; - } - else { - _attr(this.svg, { "class":clazz }); - this.canvas = this.svg; - } - - params._jsPlumb.appendElement(this.canvas, params.originalArgs[0].parent); - if (params.useDivWrapper) this.canvas.appendChild(this.svg); - - // TODO this displayElement stuff is common between all components, across all - // renderers. would be best moved to jsPlumbUIComponent. - var displayElements = [ this.canvas ]; - this.getDisplayElements = function() { - return displayElements; - }; - - this.appendDisplayElement = function(el) { - displayElements.push(el); - }; - - this.paint = function(style, anchor, extents) { - if (style != null) { - - var xy = [ this.x, this.y ], wh = [ this.w, this.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) { - jsPlumbUtil.sizeElement(this.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(this.svg, { - "style":p, - "width": wh[0], - "height": wh[1] - }); - } - }; - - return { - renderer:renderer - }; - }; - jsPlumbUtil.extend(SvgComponent, jsPlumb.jsPlumbUIComponent, { - cleanup:function() { - jsPlumbUtil.removeElement(this.canvas); - this.svg = null; - this.canvas = null; - this.path = null; - } - }); - - /* - * 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 - } ]); - - /*this.pointOnPath = function(location, absolute) { - if (!self.path) return [0,0]; - var p = absolute ? location : location * self.path.getTotalLength(); - return self.path.getPointAtLength(p); - };*/ - - _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 (this.bgPath) this.reattachListenersForElement(this.bgPath, this); - if (this.path) this.reattachListenersForElement(this.path, this); - }; - }; - jsPlumbUtil.extend(jsPlumb.ConnectorRenderers.svg, SvgComponent); - -// ******************************* 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 _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 (this.node == null) { - this.node = this.makeNode(s); - this.svg.appendChild(this.node); - this.attachListeners(this.node, this); - } - else if (this.updateNode != null) { - this.updateNode(this.node); - } - _applyStyles(this.svg, this.node, s, [ this.x, this.y, this.w, this.h ], this); - _pos(this.node, [ this.x, this.y ]); - }.bind(this); - - }; - jsPlumbUtil.extend(SvgEndpoint, SvgComponent, { - reattachListeners : function() { - if (this.node) this.reattachListenersForElement(this.node, this); - } - }); - - /* - * 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.radius - }); - }; - this.updateNode = function(node) { - _attr(node, { - "cx":this.w / 2, - "cy":this.h / 2, - "r":this.radius - }); - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.svg.Dot, [jsPlumb.Endpoints.Dot, SvgEndpoint]); - - /* - * 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 - }); - }; - this.updateNode = function(node) { - _attr(node, { - "width":this.w, - "height":this.h - }); - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.svg.Rectangle, [jsPlumb.Endpoints.Rectangle, SvgEndpoint]); - - /* - * 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; - this.path = null; - this.paint = function(params, containerExtents) { - // only draws on connections, not endpoints. - if (params.component.svg && containerExtents) { - if (this.path == null) { - this.path = _node("path", { - "pointer-events":"all" - }); - params.component.svg.appendChild(this.path); - - this.attachListeners(this.path, params.component); - this.attachListeners(this.path, this); - } - 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(this.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 (this.path) this.reattachListenersForElement(this.path, this); - }; - }; - jsPlumbUtil.extend(AbstractSvgArrowOverlay, jsPlumb.jsPlumbUIComponent, { - cleanup : function() { - if (this.path != null) jsPlumb.CurrentLibrary.removeElement(this.path); - } - }); - - jsPlumb.Overlays.svg.Arrow = function() { - AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.svg.Arrow, [ jsPlumb.Overlays.Arrow, AbstractSvgArrowOverlay ]); - - jsPlumb.Overlays.svg.PlainArrow = function() { - AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.svg.PlainArrow, [ jsPlumb.Overlays.PlainArrow, AbstractSvgArrowOverlay ]); - - jsPlumb.Overlays.svg.Diamond = function() { - AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.svg.Diamond, [ jsPlumb.Overlays.Diamond, AbstractSvgArrowOverlay ]); - - // 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; - }; - }; - jsPlumbUtil.extend(jsPlumb.Overlays.svg.GuideLines, jsPlumb.Overlays.GuideLines); -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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-b… - // http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-… - - 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-… - // 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. - //jsPlumb.CurrentLibrary.getDOMElement(container).appendChild(g); - //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-… - //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.instance); - self.opacityNodes.fill = _node("fill", [0,0,1,1], {opacity:"0.0"}, vml, self._jsPlumb.instance); - }; - 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); - }; - }; - jsPlumbUtil.extend(VmlComponent, jsPlumb.jsPlumbUIComponent, { - cleanup:function() { - if (this.bgCanvas) jsPlumbUtil.removeElement(this.bgCanvas); - jsPlumbUtil.removeElement(this.canvas); - } - }); - - /* - * Base class for Vml connectors. extends VmlComponent. - */ - var VmlConnector = jsPlumb.ConnectorRenderers.vml = function(params) { - this.strokeNode = null; - this.canvas = null; - VmlComponent.apply(this, arguments); - var clazz = this._jsPlumb.instance.connectorClass + (params.cssClass ? (" " + params.cssClass) : ""); - this.paint = function(style) { - if (style !== null) { - - // we need to be at least 1 pixel in each direction, because otherwise coordsize gets set to - // 0 and overlays cannot paint. - this.w = Math.max(this.w, 1); - this.h = Math.max(this.h, 1); - - var segments = this.getSegments(), p = { "path":"" }, - d = [this.x, this.y, this.w, this.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 (this.bgCanvas == null) { - p["class"] = clazz; - p.coordsize = (d[2] * scale) + "," + (d[3] * scale); - this.bgCanvas = _node("shape", d, p, params.parent, this._jsPlumb.instance, true); - _pos(this.bgCanvas, d); - this.appendDisplayElement(this.bgCanvas, true); - this.attachListeners(this.bgCanvas, this); - this.initOpacityNodes(this.bgCanvas, ["stroke"]); - } - else { - p.coordsize = (d[2] * scale) + "," + (d[3] * scale); - _pos(this.bgCanvas, d); - _atts(this.bgCanvas, p); - } - - _applyStyles(this.bgCanvas, outlineStyle, this); - } - //*/ - - if (this.canvas == null) { - p["class"] = clazz; - p.coordsize = (d[2] * scale) + "," + (d[3] * scale); - this.canvas = _node("shape", d, p, params.parent, this._jsPlumb.instance, 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 - - this.appendDisplayElement(this.canvas, true); - this.attachListeners(this.canvas, this); - this.initOpacityNodes(this.canvas, ["stroke"]); - } - else { - p.coordsize = (d[2] * scale) + "," + (d[3] * scale); - _pos(this.canvas, d); - _atts(this.canvas, p); - } - - _applyStyles(this.canvas, style, this, this._jsPlumb.instance); - } - }; - - }; - jsPlumbUtil.extend(VmlConnector, VmlComponent, { - reattachListeners : function() { - if (this.canvas) this.reattachListenersForElement(this.canvas, this); - } - }); - - /* - * - * Base class for Vml Endpoints. extends VmlComponent. - * - */ - var VmlEndpoint = window.VmlEndpoint = function(params) { - VmlComponent.apply(this, arguments); - this._jsPlumb.vml = null;//, opacityStrokeNode = null, opacityFillNode = null; - this.canvas = document.createElement("div"); - this.canvas.style.position = "absolute"; - this._jsPlumb.clazz = this._jsPlumb.instance.endpointClass + (params.cssClass ? (" " + params.cssClass) : ""); - - // TODO vml endpoint adds class to VML at constructor time. but the addClass method adds VML - // to the enclosing DIV. what to do? seems like it would be better to just target the div. - // HOWEVER...vml connection has no containing div. why not? it feels like it should. - - //var group = _getGroup(params.parent); - //group.appendChild(self.canvas); - params._jsPlumb.appendElement(this.canvas, params.parent); - - this.paint = function(style, anchor) { - var p = { }, vml = this._jsPlumb.vml; - - jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); - if (this._jsPlumb.vml == null) { - p["class"] = this._jsPlumb.clazz; - vml = this._jsPlumb.vml = this.getVml([0,0, this.w, this.h], p, anchor, this.canvas, this._jsPlumb.instance); - this.attachListeners(vml, this); - - this.appendDisplayElement(vml, true); - this.appendDisplayElement(this.canvas, true); - - this.initOpacityNodes(vml, ["fill"]); - } - else { - _pos(vml, [0,0, this.w, this.h]); - _atts(vml, p); - } - - _applyStyles(vml, style, this); - }; - }; - jsPlumbUtil.extend(VmlEndpoint, VmlComponent, { - reattachListeners : function() { - if (this._jsPlumb.vml) this.reattachListenersForElement(this._jsPlumb.vml, this); - } - }); - -// ******************************* 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); }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.vml.Dot, VmlEndpoint); - - 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); }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.vml.Rectangle, VmlEndpoint); - - /* - * 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.component; - 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.instance, 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); - }; - }; - jsPlumbUtil.extend(AbstractVmlArrowOverlay, VmlComponent); - - jsPlumb.Overlays.vml.Arrow = function() { - AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.vml.Arrow, [ jsPlumb.Overlays.Arrow, AbstractVmlArrowOverlay ]); - - jsPlumb.Overlays.vml.PlainArrow = function() { - AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.vml.PlainArrow, [ jsPlumb.Overlays.PlainArrow, AbstractVmlArrowOverlay ]); - - jsPlumb.Overlays.vml.Diamond = function() { - AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.vml.Diamond, [ jsPlumb.Overlays.Diamond, AbstractVmlArrowOverlay ]); - -// ******************************* /vml overlays ***************************************************** - -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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); - }, - - destroyDraggable : function(el) { - // TODO - var id = jsPlumb.getId(el), d = _draggablesById[id]; - if (d) { - for (var i = 0; i < d.length; i++) - d[i].detach(); - - delete _draggablesById[id]; - } - }, - - destroyDroppable : function(el) { - // TODO - }, - - 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); - }, - - 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) { - if (el == null) return null; - // 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, _jsPlumb) { - var id = jsPlumb.getId(el); - var drag = _draggablesById[id]; - if (!drag) { - var originalZIndex = 0, - originalCursor = null, - dragZIndex = jsPlumb.Defaults.DragOptions.zIndex || 2000; - - options.onStart = jsPlumbUtil.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); - } - $(document.body).addClass(_jsPlumb.dragSelectClass); - }); - - options.onComplete = jsPlumbUtil.wrap(options.onComplete, function() { - this.element.setStyle('z-index', originalZIndex); - if (originalCursor) { - this.element.setStyle('cursor', originalCursor); - } - $(document.body).removeClass(_jsPlumb.dragSelectClass); - }); - - // 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 = jsPlumbUtil.wrap(options.onLeave, function(el, dr) { - if (dr) { - _checkHover(dr, false); - _executeDroppableOption(el, dr, 'onLeave'); - } - }); - options.onEnter = jsPlumbUtil.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(); // ?? - }, - - setDragFilter : function(el, filter) { - jsPlumb.log("NOT IMPLEMENTED: setDragFilter"); - }, - - 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); -})(); Added: sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/mootools.jsPlumb-1.5.3.js =================================================================== --- sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/mootools.jsPlumb-1.5.3.js (rev 0) +++ sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/mootools.jsPlumb-1.5.3.js 2013-10-15 08:30:43 UTC (rev 219) @@ -0,0 +1,11232 @@ +/** +* jsBezier-0.6 +* +* Copyright (c) 2010 - 2013 Simon Porritt (simon.porritt(a)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)); + }; + + var _isPoint = function(curve) { + return curve[0].x == curve[1].x && curve[0].y == curve[1].y; + }; + + /** + * 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) { + + if (_isPoint(curve)) { + return { + point:curve[0], + location:location + }; + } + + 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) { + if (_isPoint(curve)) return 0; + + 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 + }; +})(); + +/** + * jsPlumbGeom v0.1 + * + * Various geometry functions written as part of jsPlumb and perhaps useful for others. + * + * Copyright (c) 2013 Simon Porritt + * + * Permission is hereby granted, free of charge, to any person + * obtaining a copy of this software and associated documentation + * files (the "Software"), to deal in the Software without + * restriction, including without limitation the rights to use, + * copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the + * Software is furnished to do so, subject to the following + * conditions: + * + * The above copyright notice and this permission notice shall be + * included in all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, + * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES + * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND + * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT + * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, + * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR + * OTHER DEALINGS IN THE SOFTWARE. + */ +;(function() { + + + "use strict"; + + // Establish the root object, `window` in the browser, or `global` on the server. + var root = this; + var jsPlumbGeom; + if (typeof exports !== 'undefined') { + jsPlumbGeom = exports; + } else { + jsPlumbGeom = root.jsPlumbGeom = {}; + } + + var _isa = function(a) { return Object.prototype.toString.call(a) === "[object Array]"; }, + _pointHelper = function(p1, p2, fn) { + p1 = _isa(p1) ? p1 : [p1.x, p1.y]; + p2 = _isa(p2) ? p2 : [p2.x, p2.y]; + return fn(p1, p2); + }, + /** + * @name jsPlumbGeom.gradient + * @function + * @desc Calculates the gradient of a line between the two points. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Float} The gradient of a line between the two points. + */ + _gradient = jsPlumbGeom.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]); + }); + }, + /** + * @name jsPlumbGeom.normal + * @function + * @desc Calculates the gradient of a normal to a line between the two points. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Float} The gradient of a normal to a line between the two points. + */ + _normal = jsPlumbGeom.normal = function(p1, p2) { + return -1 / _gradient(p1, p2); + }, + /** + * @name jsPlumbGeom.lineLength + * @function + * @desc Calculates the length of a line between the two points. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Float} The length of a line between the two points. + */ + _lineLength = jsPlumbGeom.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)); + }); + }, + /** + * @name jsPlumbGeom.quadrant + * @function + * @desc Calculates the quadrant in which the angle between the two points lies. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Integer} The quadrant - 1 for upper right, 2 for lower right, 3 for lower left, 4 for upper left. + */ + _quadrant = jsPlumbGeom.quadrant = 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; + } + }); + }, + /** + * @name jsPlumbGeom.theta + * @function + * @desc Calculates the angle between the two points. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Float} The angle between the two points. + */ + _theta = jsPlumbGeom.theta = function(p1, p2) { + return _pointHelper(p1, p2, function(_p1, _p2) { + var m = _gradient(_p1, _p2), + t = Math.atan(m), + s = _quadrant(_p1, _p2); + if ((s == 4 || s== 3)) t += Math.PI; + if (t < 0) t += (2 * Math.PI); + + return t; + }); + }, + /** + * @name jsPlumbGeom.intersects + * @function + * @desc Calculates whether or not the two rectangles intersect. + * @param {Rectangle} r1 First rectangle, as a js object in the form `{x:.., y:.., w:.., h:..}` + * @param {Rectangle} r2 Second rectangle, as a js object in the form `{x:.., y:.., w:.., h:..}` + * @return {Boolean} True if the rectangles intersect, false otherwise. + */ + _intersects = jsPlumbGeom.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] ], + /** + * @name jsPlumbGeom.pointOnLine + * @function + * @desc Calculates a point on the line from `fromPoint` to `toPoint` that is `distance` units along the length of the line. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Point} Point on the line, in the form `{ x:..., y:... }`. + */ + _pointOnLine = jsPlumbGeom.pointOnLine = function(fromPoint, toPoint, distance) { + var m = _gradient(fromPoint, toPoint), + s = _quadrant(fromPoint, toPoint), + segmentMultiplier = distance > 0 ? _segmentMultipliers[s] : _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 }; + }, + /** + * @name jsPlumbGeom.perpendicularLineTo + * @function + * @desc Calculates a line of length `length` that is perpendicular to the line from `fromPoint` to `toPoint` and passes through `toPoint`. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Line} Perpendicular line, in the form `[ { x:..., y:... }, { x:..., y:... } ]`. + */ + _perpendicularLineTo = jsPlumbGeom.perpendicularLineTo = function(fromPoint, toPoint, length) { + var m = _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}]; + }; +}).call(this); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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 _isa = function(a) { return Object.prototype.toString.call(a) === "[object Array]"; }, + _isnum = function(n) { return Object.prototype.toString.call(n) === "[object Number]"; }, + _iss = function(s) { return typeof s === "string"; }, + _isb = function(s) { return typeof s === "boolean"; }, + _isnull = function(s) { return s == null; }, + _iso = function(o) { return o == null ? false : Object.prototype.toString.call(o) === "[object Object]"; }, + _isd = function(o) { return Object.prototype.toString.call(o) === "[object Date]"; }, + _isf = function(o) { return Object.prototype.toString.call(o) === "[object Function]"; }, + _ise = function(o) { + for (var i in o) { if (o.hasOwnProperty(i)) return false; } + return true; + }, + pointHelper = function(p1, p2, fn) { + p1 = _isa(p1) ? p1 : [p1.x, p1.y]; + p2 = _isa(p2) ? p2 : [p2.x, p2.y]; + return fn(p1, p2); + }; + + jsPlumbUtil = { + isArray : _isa, + isString : _iss, + isBoolean: _isb, + isNull : _isnull, + isObject : _iso, + isDate : _isd, + isFunction: _isf, + isEmpty:_ise, + isNumber:_isnum, + clone : function(a) { + if (_iss(a)) return "" + a; + else if (_isb(a)) return !!a; + else if (_isd(a)) return new Date(a.getTime()); + else if (_isf(a)) return a; + else if (_isa(a)) { + var b = []; + for (var i = 0; i < a.length; i++) + b.push(this.clone(a[i])); + return b; + } + else if (_iso(a)) { + var c = {}; + for (var j in a) + c[j] = this.clone(a[j]); + return c; + } + else return a; + }, + merge : function(a, b) { + var c = this.clone(a); + for (var i in b) { + if (c[i] == null || _iss(b[i]) || _isb(b[i])) + c[i] = b[i]; + else { + if (_isa(b[i])/* && this.isArray(c[i])*/) { + var ar = []; + // if c's object is also an array we can keep its values. + if (_isa(c[i])) ar.push.apply(ar, c[i]); + ar.push.apply(ar, b[i]); + c[i] = ar; + } + else if(_iso(b[i])) { + // overwite c's value with an object if it is not already one. + if (!_iso(c[i])) + c[i] = {}; + for (var j in b[i]) + c[i][j] = b[i][j]; + } + } + } + return c; + }, + copyValues:function(names, from, to) { + for (var i = 0; i < names.length; i++) + to[names[i]] = from[names[i]]; + }, + // + // 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 != null) { + fromString = fromString.replace(matches[i], val); + } + } + } + return fromString; + }, + // process one entry. + _one = function(d) { + if (d != null) { + if (_iss(d)) { + return getValue(d); + } + else if (_isa(d)) { + var r = []; + for (var i = 0; i < d.length; i++) + r.push(_one(d[i])); + return r; + } + else if (_iso(d)) { + var s = {}; + for (var j in d) { + s[j] = _one(d[j]); + } + return s; + } + 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; + }, + 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, insertAtStart) { + var l = map[key]; + if (l == null) { + l = []; + map[key] = l; + } + l[insertAtStart ? "unshift" : "push"](value); + return l; + }, + // + // extends the given obj (which can be an array) with the given constructor function, prototype functions, and + // class members, any of which may be null. + // + extend : function(child, parent, _protoFn, _protoAtts) { + _protoFn = _protoFn || {}; + _protoAtts = _protoAtts || {}; + parent = _isa(parent) ? parent : [ parent ]; + + for (var i = 0; i < parent.length; i++) { + for (var j in parent[i].prototype) { + if(parent[i].prototype.hasOwnProperty(j)) { + child.prototype[j] = parent[i].prototype[j]; + } + } + } + + var _makeFn = function(name) { + return function() { + for (var i = 0; i < parent.length; i++) { + if (parent[i].prototype[name]) + parent[i].prototype[name].apply(this, arguments); + } + return _protoFn[name].apply(this, arguments); + }; + }; + + for (var k in _protoFn) { + child.prototype[k] = _makeFn(k); + } + + return child; + }, + uuid : function() { + return ('xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { + var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); + return v.toString(16); + })); + }, + 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]); + }, + /* + * Function: sizeElement + * Helper to size and position an element. You would typically use + * this when writing your own Connector or Endpoint implementation. + * + * Parameters: + * x - [int] x position for the element origin + * y - [int] y position for the element origin + * w - [int] width of the element + * h - [int] height of the element + * + */ + sizeElement : function(el, x, y, w, h) { + if (el) { + el.style.height = h + "px"; + el.height = h; + el.style.width = w + "px"; + el.width = w; + el.style.left = x + "px"; + el.style.top = y + "px"; + } + }, + /** + * @name jsPlumbUtil.wrap + * @desc Wraps one function with another, creating a placeholder for the + * wrapped function if it was null. this is used to wrap the various + * drag/drop event functions - to allow jsPlumb to be notified of + * important lifecycle events without imposing itself on the user's + * drag/drop functionality. + * @param {Function} wrappedFunction original function to wrap; may be null. + * @param {Function} newFunction function to wrap the original with. + * @param {Object} [returnOnThisValue] Optional. Indicates that the wrappedFunction should + * not be executed if the newFunction returns a value matching 'returnOnThisValue'. + * note that this is a simple comparison and only works for primitives right now. + */ + wrap : function(wrappedFunction, newFunction, returnOnThisValue) { + wrappedFunction = wrappedFunction || function() { }; + newFunction = newFunction || function() { }; + return function() { + var r = null; + try { + r = newFunction.apply(this, arguments); + } catch (e) { + jsPlumbUtil.log("jsPlumb function failed : " + e); + } + if (returnOnThisValue == null || (r !== returnOnThisValue)) { + try { + r = wrappedFunction.apply(this, arguments); + } catch (e) { + jsPlumbUtil.log("wrapped function failed : " + e); + } + } + return r; + }; + } + }; + + + jsPlumbUtil.EventGenerator = function() { + var _listeners = {}, 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" ]; + + this.bind = function(event, listener, insertAtStart) { + jsPlumbUtil.addToList(_listeners, event, listener, insertAtStart); + return this; + }; + + this.fire = function(event, value, originalEvent) { + if (!eventsSuspended && _listeners[event]) { + // instead of looping through the array we get a counter and a length, because it is possible + // that an event fired from here could cause the object to get cleaned up, which would throw + // away the listeners. so after each cycle through the loop we check to ensure we haven't + // been nuked. + var l = _listeners[event].length, i = 0, _gone = false, ret = null; + if (!this.shouldFireEvent || this.shouldFireEvent(event, value, originalEvent)) { + while (!_gone && i < l && ret !== false) { + + // 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 { + ret = _listeners[event][i](value, originalEvent); + } catch (e) { + jsPlumbUtil.log("jsPlumb: fire failed for event " + event + " : " + e); + } + } + i++; + if (_listeners == null || _listeners[event] == null) _gone = true; + } + } + } + return this; + }; + + this.unbind = function(event) { + if (event) + delete _listeners[event]; + else { + _listeners = {}; + } + return this; + }; + + this.getListener = function(forEvent) { + return _listeners[forEvent]; + }; + this.setSuspendEvents = function(val) { + eventsSuspended = val; + }; + this.isSuspendEvents = function() { + return eventsSuspended; + }; + this.cleanupListeners = function() { + for (var i in _listeners) { + _listeners[i].splice(0); + delete _listeners[i]; + } + }; + }; + + + jsPlumbUtil.EventGenerator.prototype = { + cleanup:function() { + this.cleanupListeners(); + } + }; + + + // thanks MDC + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Ob… + if (!Function.prototype.bind) { + Function.prototype.bind = function (oThis) { + if (typeof this !== "function") { + // closest thing possible to the ECMAScript 5 internal IsCallable function + throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); + } + + var aArgs = Array.prototype.slice.call(arguments, 1), + fToBind = this, + fNOP = function () {}, + fBound = function () { + return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, + aArgs.concat(Array.prototype.slice.call(arguments))); + }; + + fNOP.prototype = this.prototype; + fBound.prototype = new fNOP(); + + return fBound; + }; + } + +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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… + 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; + if (b != null && b.style != null) { + b.style.behavior = "url(#default#VML)"; + vmlAvailable.vml = b ? typeof b.adj == "object": true; + } + else + vmlAvailable.vml = false; + 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), + id = _currentInstance.getId(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(p.childNodes[i], 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(el); + }; + + // refresh the offsets for child elements of this element. + this.updateOffsets = function(elId) { + var jpcl = jsPlumb.CurrentLibrary, + el = jpcl.getElementObject(elId), + domEl = jpcl.getDOMElement(el), + id = _currentInstance.getId(domEl), + 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.getElementObject(el), + cLoc = jsPlumb.CurrentLibrary.getOffset(c), + p = el.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) { + _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 = {}; + }; + + // + // notification drag ended. from 1.5.3 we check automatically if need to update some + // ancestor's offsets. + // + this.dragEnded = function(el) { + var id = _currentInstance.getId(el), + ancestor = _draggablesForElements[id]; + + if (ancestor) this.updateOffsets(ancestor); + }; + + this.setParent = function(el, elId, p, pId) { + var current = _draggablesForElements[elId]; + if (current) { + if (!_delements[pId]) + _delements[pId] = {}; + _delements[pId][elId] = _delements[current][elId]; + delete _delements[current][elId]; + var pLoc = jsPlumb.CurrentLibrary.getOffset(p), + cLoc = jsPlumb.CurrentLibrary.getOffset(el); + _delements[pId][elId].offset = { + left:cLoc.left - pLoc.left, + top:cLoc.top - pLoc.top + }; + _draggablesForElements[elId] = pId; + } + }; + + }; + + // 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, + + getAttribute:function(el, attName) { + return el.getAttribute(attName); + }, + + setAttribute:function(el, a, v) { + el.setAttribute(a, v); + }, + + 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; + } + }; + + + /* + + addClass: + + add: function( elem, classNames ) { + jQuery.each((classNames || "").split(/\s+/), function(i, className){ + if ( elem.nodeType == 1 && !jQuery.className.has( elem.className, className ) ) + elem.className += (elem.className ? " " : "") + className; + }); + }, + */ + + /* + + removeClass: + + elem.className = classNames !== undefined ? + jQuery.grep(elem.className.split(/\s+/), function(className){ + return !jQuery.className.has( classNames, className ); + }).join(" ") : + +*/ + +})(); +/** + * @module jsPlumb + * @description Provides a way to visually connect elements on an HTML page, using either SVG, Canvas + * elements, or VML. + * + * - [Demo Site](http://jsplumb.org) + * - [GitHub](http://github.com/sporritt/jsplumb) + * + * Dual licensed under the MIT and GPL2 licenses. + * + * Copyright (c) 2010 - 2013 Simon Porritt (simon.porritt(a)gmail.com) + */ +;(function() { + + var _ju = jsPlumbUtil, + _addClass = function(el, clazz) { jsPlumb.CurrentLibrary.addClass(_gel(el), clazz); }, + _hasClass = function(el, clazz) { return jsPlumb.CurrentLibrary.hasClass(_gel(el), clazz); }, + _removeClass = function(el, clazz) { jsPlumb.CurrentLibrary.removeClass(_gel(el), clazz); }, + _gel = function(el) { return jsPlumb.CurrentLibrary.getElementObject(el); }, + _dom = function(el) { return jsPlumb.CurrentLibrary.getDOMElement(el); }, + _getOffset = function(el, _instance) { + var o = jsPlumb.CurrentLibrary.getOffset(_gel(el)); + if (_instance != null) { + var z = _instance.getZoom(); + return {left:o.left / z, top:o.top / z }; + } + else + return o; + }, + _getSize = function(el) { + return jsPlumb.CurrentLibrary.getSize(_gel(el)); + }, + + /** + * creates a timestamp, using milliseconds since 1970, but as a string. + */ + _timestamp = function() { return "" + (new Date()).getTime(); }, + + // helper method to update the hover style whenever it, or paintStyle, changes. + // we use paintStyle as the foundation and merge hoverPaintStyle over the + // top. + _updateHoverStyle = function(component) { + if (component._jsPlumb.paintStyle && component._jsPlumb.hoverPaintStyle) { + var mergedHoverStyle = {}; + jsPlumb.extend(mergedHoverStyle, component._jsPlumb.paintStyle); + jsPlumb.extend(mergedHoverStyle, component._jsPlumb.hoverPaintStyle); + delete component._jsPlumb.hoverPaintStyle; + // we want the fillStyle of paintStyle to override a gradient, if possible. + if (mergedHoverStyle.gradient && component._jsPlumb.paintStyle.fillStyle) + delete mergedHoverStyle.gradient; + component._jsPlumb.hoverPaintStyle = mergedHoverStyle; + } + }, + events = [ "click", "dblclick", "mouseenter", "mouseout", "mousemove", "mousedown", "mouseup", "contextmenu" ], + eventFilters = { "mouseout":"mouseexit" }, + _updateAttachedElements = function(component, state, timestamp, sourceElement) { + var affectedElements = component.getAttachedElements(); + if (affectedElements) { + for (var i = 0, j = affectedElements.length; i < j; i++) { + if (!sourceElement || sourceElement != affectedElements[i]) + affectedElements[i].setHover(state, true, timestamp); // tell the attached elements not to inform their own attached elements. + } + } + }, + _splitType = function(t) { return t == null ? null : t.split(" "); }, + _applyTypes = function(component, params, doNotRepaint) { + if (component.getDefaultType) { + var td = component.getTypeDescriptor(); + + var o = _ju.merge({}, component.getDefaultType()); + for (var i = 0, j = component._jsPlumb.types.length; i < j; i++) + o = _ju.merge(o, component._jsPlumb.instance.getType(component._jsPlumb.types[i], td)); + + if (params) { + o = _ju.populate(o, params); + } + + component.applyType(o, doNotRepaint); + if (!doNotRepaint) component.repaint(); + } + }, + +// ------------------------------ BEGIN jsPlumbUIComponent -------------------------------------------- + + jsPlumbUIComponent = window.jsPlumbUIComponent = function(params) { + + jsPlumbUtil.EventGenerator.apply(this, arguments); + + var self = this, + a = arguments, + idPrefix = self.idPrefix, + id = idPrefix + (new Date()).getTime(), + jpcl = jsPlumb.CurrentLibrary; + + this._jsPlumb = { + instance: params._jsPlumb, + parameters:params.parameters || {}, + paintStyle:null, + hoverPaintStyle:null, + paintStyleInUse:null, + hover:false, + beforeDetach:params.beforeDetach, + beforeDrop:params.beforeDrop, + overlayPlacements : [], + hoverClass: params.hoverClass || params._jsPlumb.Defaults.HoverClass || jsPlumb.Defaults.HoverClass, + types:[] + }; + + this.getId = function() { return id; }; + + // all components can generate events + + if (params.events) { + for (var i in params.events) + self.bind(i, params.events[i]); + } + + // all components get this clone function. + // TODO issue 116 showed a problem with this - it seems 'a' that is in + // the clone function's scope is shared by all invocations of it, the classic + // JS closure problem. for now, jsPlumb does a version of this inline where + // it used to call clone. but it would be nice to find some time to look + // further at this. + this.clone = function() { + var o = {};//new Object(); + this.constructor.apply(o, a); + return o; + }.bind(this); + + // user can supply a beforeDetach callback, which will be executed before a detach + // is performed; returning false prevents the detach. + this.isDetachAllowed = function(connection) { + var r = true; + if (this._jsPlumb.beforeDetach) { + try { + r = this._jsPlumb.beforeDetach(connection); + } + catch (e) { _ju.log("jsPlumb: beforeDetach callback failed", e); } + } + return r; + }; + + // user can supply a beforeDrop callback, which will be executed before a dropped + // connection is confirmed. user can return false to reject connection. + this.isDropAllowed = function(sourceId, targetId, scope, connection, dropEndpoint) { + var r = this._jsPlumb.instance.checkCondition("beforeDrop", { + sourceId:sourceId, + targetId:targetId, + scope:scope, + connection:connection, + dropEndpoint:dropEndpoint + }); + if (this._jsPlumb.beforeDrop) { + try { + r = this._jsPlumb.beforeDrop({ + sourceId:sourceId, + targetId:targetId, + scope:scope, + connection:connection, + dropEndpoint:dropEndpoint + }); + } + catch (e) { _ju.log("jsPlumb: beforeDrop callback failed", e); } + } + return r; + }; + + var boundListeners = [], + bindAListener = function(obj, type, fn) { + boundListeners.push([obj, type, fn]); + obj.bind(type, fn); + }, + domListeners = [], + bindOne = function(o, c, evt) { + var filteredEvent = eventFilters[evt] || evt, + fn = function(ee) { + c.fire(filteredEvent, c, ee); + }; + domListeners.push([o, evt, fn]); + jpcl.bind(o, evt, fn); + }, + unbindOne = function(o, evt, fn) { + var filteredEvent = eventFilters[evt] || evt; + jpcl.unbind(o, evt, fn); + }; + + this.bindListeners = function(obj, _self, _hoverFunction) { + bindAListener(obj, "click", function(ep, e) { _self.fire("click", _self, e); }); + bindAListener(obj, "dblclick", function(ep, e) { _self.fire("dblclick", _self, e); }); + bindAListener(obj, "contextmenu", function(ep, e) { _self.fire("contextmenu", _self, e); }); + bindAListener(obj, "mouseenter", function(ep, e) { + if (!_self.isHover()) { + _hoverFunction(true); + _self.fire("mouseenter", _self, e); + } + }); + bindAListener(obj, "mouseexit", function(ep, e) { + if (_self.isHover()) { + _hoverFunction(false); + _self.fire("mouseexit", _self, e); + } + }); + bindAListener(obj, "mousedown", function(ep, e) { _self.fire("mousedown", _self, e); }); + bindAListener(obj, "mouseup", function(ep, e) { _self.fire("mouseup", _self, e); }); + }; + + this.unbindListeners = function() { + for (var i = 0; i < boundListeners.length; i++) { + var o = boundListeners[i]; + o[0].unbind(o[1], o[2]); + } + boundListeners = null; + }; + + this.attachListeners = function(o, c) { + for (var i = 0, j = events.length; i < j; i++) { + bindOne(o, c, events[i]); + } + }; + this.detachListeners = function() { + for (var i = 0; i < domListeners.length; i++) { + unbindOne(domListeners[i][0], domListeners[i][1], domListeners[i][2]); + } + domListeners = null; + }; + + this.reattachListenersForElement = function(o) { + if (arguments.length > 1) { + for (var i = 0, j = events.length; i < j; i++) + unbindOne(o, events[i]); + for (i = 1, j = arguments.length; i < j; i++) + this.attachListeners(o, arguments[i]); + } + }; + }; + + jsPlumbUtil.extend(jsPlumbUIComponent, jsPlumbUtil.EventGenerator, { + + getParameter : function(name) { + return this._jsPlumb.parameters[name]; + }, + + setParameter : function(name, value) { + this._jsPlumb.parameters[name] = value; + }, + + getParameters : function() { + return this._jsPlumb.parameters; + }, + + setParameters : function(p) { + this._jsPlumb.parameters = p; + }, + + addClass : function(clazz) { + if (this.canvas != null) + _addClass(this.canvas, clazz); + }, + + removeClass : function(clazz) { + if (this.canvas != null) + _removeClass(this.canvas, clazz); + }, + + setType : function(typeId, params, doNotRepaint) { + this._jsPlumb.types = _splitType(typeId) || []; + _applyTypes(this, params, doNotRepaint); + }, + + getType : function() { + return this._jsPlumb.types; + }, + + reapplyTypes : function(params, doNotRepaint) { + _applyTypes(this, params, doNotRepaint); + }, + + hasType : function(typeId) { + return jsPlumbUtil.indexOf(this._jsPlumb.types, typeId) != -1; + }, + + addType : function(typeId, params, doNotRepaint) { + var t = _splitType(typeId), _cont = false; + if (t != null) { + for (var i = 0, j = t.length; i < j; i++) { + if (!this.hasType(t[i])) { + this._jsPlumb.types.push(t[i]); + _cont = true; + } + } + if (_cont) _applyTypes(this, params, doNotRepaint); + } + }, + + removeType : function(typeId, doNotRepaint) { + var t = _splitType(typeId), _cont = false, _one = function(tt) { + var idx = _ju.indexOf(this._jsPlumb.types, tt); + if (idx != -1) { + this._jsPlumb.types.splice(idx, 1); + return true; + } + return false; + }.bind(this); + + if (t != null) { + for (var i = 0,j = t.length; i < j; i++) { + _cont = _one(t[i]) || _cont; + } + if (_cont) _applyTypes(this, null, doNotRepaint); + } + }, + + toggleType : function(typeId, params, doNotRepaint) { + var t = _splitType(typeId); + if (t != null) { + for (var i = 0, j = t.length; i < j; i++) { + var idx = jsPlumbUtil.indexOf(this._jsPlumb.types, t[i]); + if (idx != -1) + this._jsPlumb.types.splice(idx, 1); + else + this._jsPlumb.types.push(t[i]); + } + + _applyTypes(this, params, doNotRepaint); + } + }, + applyType : function(t, doNotRepaint) { + this.setPaintStyle(t.paintStyle, doNotRepaint); + this.setHoverPaintStyle(t.hoverPaintStyle, doNotRepaint); + if (t.parameters){ + for (var i in t.parameters) + this.setParameter(i, t.parameters[i]); + } + }, + setPaintStyle : function(style, doNotRepaint) { +// this._jsPlumb.paintStyle = jsPlumb.extend({}, style); +// TODO figure out if we want components to clone paintStyle so as not to share it. + this._jsPlumb.paintStyle = style; + this._jsPlumb.paintStyleInUse = this._jsPlumb.paintStyle; + _updateHoverStyle(this); + if (!doNotRepaint) this.repaint(); + }, + getPaintStyle : function() { + return this._jsPlumb.paintStyle; + }, + setHoverPaintStyle : function(style, doNotRepaint) { + //this._jsPlumb.hoverPaintStyle = jsPlumb.extend({}, style); +// TODO figure out if we want components to clone paintStyle so as not to share it. + this._jsPlumb.hoverPaintStyle = style; + _updateHoverStyle(this); + if (!doNotRepaint) this.repaint(); + }, + getHoverPaintStyle : function() { + return this._jsPlumb.hoverPaintStyle; + }, + cleanup:function() { + this.unbindListeners(); + this.detachListeners(); + }, + destroy:function() { + this.cleanupListeners(); + this.clone = null; + this._jsPlumb = null; + }, + + isHover : function() { return this._jsPlumb.hover; }, + + setHover : function(hover, ignoreAttachedElements, timestamp) { + var jpcl = jsPlumb.CurrentLibrary; + // while dragging, we ignore these events. this keeps the UI from flashing and + // swishing and whatevering. + if (this._jsPlumb && !this._jsPlumb.instance.currentlyDragging && !this._jsPlumb.instance.isHoverSuspended()) { + + this._jsPlumb.hover = hover; + + if (this.canvas != null) { + if (this._jsPlumb.instance.hoverClass != null) { + jpcl[hover ? "addClass" : "removeClass"](this.canvas, this._jsPlumb.instance.hoverClass); + } + } + if (this._jsPlumb.hoverPaintStyle != null) { + this._jsPlumb.paintStyleInUse = hover ? this._jsPlumb.hoverPaintStyle : this._jsPlumb.paintStyle; + if (!this._jsPlumb.instance.isSuspendDrawing()) { + timestamp = timestamp || _timestamp(); + this.repaint({timestamp:timestamp, recalc:false}); + } + } + // get the list of other affected elements, if supported by this component. + // for a connection, its the endpoints. for an endpoint, its the connections! surprise. + if (this.getAttachedElements && !ignoreAttachedElements) + _updateAttachedElements(this, hover, _timestamp(), this); + } + } + }); + +// ------------------------------ END jsPlumbUIComponent -------------------------------------------- + +// ------------------------------ BEGIN OverlayCapablejsPlumbUIComponent -------------------------------------------- + + var _internalLabelOverlayId = "__label", + // helper to get the index of some overlay + _getOverlayIndex = function(component, id) { + var idx = -1; + for (var i = 0, j = component._jsPlumb.overlays.length; i < j; i++) { + if (id === component._jsPlumb.overlays[i].id) { + idx = i; + break; + } + } + return idx; + }, + // this is a shortcut helper method to let people add a label as + // overlay. + _makeLabelOverlay = function(component, params) { + + var _params = { + cssClass:params.cssClass, + labelStyle : component.labelStyle, + id:_internalLabelOverlayId, + component:component, + _jsPlumb:component._jsPlumb.instance // TODO not necessary, since the instance can be accessed through the component. + }, + mergedParams = jsPlumb.extend(_params, params); + + return new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()].Label( mergedParams ); + }, + _processOverlay = function(component, o) { + var _newOverlay = null; + if (_ju.isArray(o)) { // this is for the shorthand ["Arrow", { width:50 }] syntax + // there's also a three arg version: + // ["Arrow", { width:50 }, {location:0.7}] + // which merges the 3rd arg into the 2nd. + var type = o[0], + // make a copy of the object so as not to mess up anyone else's reference... + p = jsPlumb.extend({component:component, _jsPlumb:component._jsPlumb.instance}, o[1]); + if (o.length == 3) jsPlumb.extend(p, o[2]); + _newOverlay = new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()][type](p); + } else if (o.constructor == String) { + _newOverlay = new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()][o]({component:component, _jsPlumb:component._jsPlumb.instance}); + } else { + _newOverlay = o; + } + + component._jsPlumb.overlays.push(_newOverlay); + }, + _calculateOverlaysToAdd = function(component, params) { + var defaultKeys = component.defaultOverlayKeys || [], o = params.overlays, + checkKey = function(k) { + return component._jsPlumb.instance.Defaults[k] || jsPlumb.Defaults[k] || []; + }; + + if (!o) o = []; + + for (var i = 0, j = defaultKeys.length; i < j; i++) + o.unshift.apply(o, checkKey(defaultKeys[i])); + + return o; + }, + OverlayCapableJsPlumbUIComponent = window.OverlayCapableJsPlumbUIComponent = function(params) { + + jsPlumbUIComponent.apply(this, arguments); + this._jsPlumb.overlays = []; + + var _overlays = _calculateOverlaysToAdd(this, params); + if (_overlays) { + for (var i = 0, j = _overlays.length; i < j; i++) { + _processOverlay(this, _overlays[i]); + } + } + + if (params.label) { + var loc = params.labelLocation || this.defaultLabelLocation || 0.5, + labelStyle = params.labelStyle || this._jsPlumb.instance.Defaults.LabelStyle || jsPlumb.Defaults.LabelStyle; + + this._jsPlumb.overlays.push(_makeLabelOverlay(this, { + label:params.label, + location:loc, + labelStyle:labelStyle + })); + } + }; + + jsPlumbUtil.extend(OverlayCapableJsPlumbUIComponent, jsPlumbUIComponent, { + applyType : function(t, doNotRepaint) { + this.removeAllOverlays(doNotRepaint); + if (t.overlays) { + for (var i = 0, j = t.overlays.length; i < j; i++) + this.addOverlay(t.overlays[i], true); + } + }, + setHover : function(hover, ignoreAttachedElements, timestamp) { + if (this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) { + for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) { + this._jsPlumb.overlays[i][hover ? "addClass":"removeClass"](this._jsPlumb.instance.hoverClass); + } + } + }, + addOverlay : function(overlay, doNotRepaint) { + _processOverlay(this, overlay); + if (!doNotRepaint) this.repaint(); + }, + getOverlay : function(id) { + var idx = _getOverlayIndex(this, id); + return idx >= 0 ? this._jsPlumb.overlays[idx] : null; + }, + getOverlays : function() { + return this._jsPlumb.overlays; + }, + hideOverlay : function(id) { + var o = this.getOverlay(id); + if (o) o.hide(); + }, + hideOverlays : function() { + for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) + this._jsPlumb.overlays[i].hide(); + }, + showOverlay : function(id) { + var o = this.getOverlay(id); + if (o) o.show(); + }, + showOverlays : function() { + for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) + this._jsPlumb.overlays[i].show(); + }, + removeAllOverlays : function(doNotRepaint) { + for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) { + if (this._jsPlumb.overlays[i].cleanup) this._jsPlumb.overlays[i].cleanup(); + } + + this._jsPlumb.overlays.splice(0, this._jsPlumb.overlays.length); + if (!doNotRepaint) + this.repaint(); + }, + removeOverlay : function(overlayId) { + var idx = _getOverlayIndex(this, overlayId); + if (idx != -1) { + var o = this._jsPlumb.overlays[idx]; + if (o.cleanup) o.cleanup(); + this._jsPlumb.overlays.splice(idx, 1); + } + }, + removeOverlays : function() { + for (var i = 0, j = arguments.length; i < j; i++) + this.removeOverlay(arguments[i]); + }, + getLabel : function() { + var lo = this.getOverlay(_internalLabelOverlayId); + return lo != null ? lo.getLabel() : null; + }, + getLabelOverlay : function() { + return this.getOverlay(_internalLabelOverlayId); + }, + setLabel : function(l) { + var lo = this.getOverlay(_internalLabelOverlayId); + if (!lo) { + var params = l.constructor == String || l.constructor == Function ? { label:l } : l; + lo = _makeLabelOverlay(this, params); + this._jsPlumb.overlays.push(lo); + } + else { + if (l.constructor == String || l.constructor == Function) lo.setLabel(l); + else { + if (l.label) lo.setLabel(l.label); + if (l.location) lo.setLocation(l.location); + } + } + + if (!this._jsPlumb.instance.isSuspendDrawing()) + this.repaint(); + }, + cleanup:function() { + for (var i = 0; i < this._jsPlumb.overlays.length; i++) { + this._jsPlumb.overlays[i].cleanup(); + this._jsPlumb.overlays[i].destroy(); + } + this._jsPlumb.overlays.splice(0); + }, + setVisible:function(v) { + this[v ? "showOverlays" : "hideOverlays"](); + } + }); + +// ------------------------------ END OverlayCapablejsPlumbUIComponent -------------------------------------------- + + var _jsPlumbInstanceIndex = 0, + getInstanceIndex = function() { + var i = _jsPlumbInstanceIndex + 1; + _jsPlumbInstanceIndex++; + return i; + }; + + var jsPlumbInstance = window.jsPlumbInstance = function(_defaults) { + + this.Defaults = { + Anchor : "BottomCenter", + Anchors : [ null, null ], + ConnectionsDetachable : true, + ConnectionOverlays : [ ], + Connector : "Bezier", + Container : null, + DoNotThrowErrors:false, + DragOptions : { }, + DropOptions : { }, + Endpoint : "Dot", + EndpointOverlays : [ ], + Endpoints : [ null, null ], + EndpointStyle : { fillStyle : "#456" }, + EndpointStyles : [ null, null ], + EndpointHoverStyle : null, + EndpointHoverStyles : [ null, null ], + HoverPaintStyle : null, + LabelStyle : { color : "black" }, + LogEnabled : false, + Overlays : [ ], + MaxConnections : 1, + PaintStyle : { lineWidth : 8, strokeStyle : "#456" }, + ReattachConnections:false, + RenderMode : "svg", + Scope : "jsPlumb_DefaultScope" + }; + if (_defaults) jsPlumb.extend(this.Defaults, _defaults); + + this.logEnabled = this.Defaults.LogEnabled; + this._connectionTypes = {}; + this._endpointTypes = {}; + + jsPlumbUtil.EventGenerator.apply(this); + + var _currentInstance = this, + _instanceIndex = getInstanceIndex(), + _bb = _currentInstance.bind, + _initialDefaults = {}, + _zoom = 1, + _info = function(el) { + var _el = _dom(el); + return { el:_el, id:(jsPlumbUtil.isString(el) && _el == null) ? el : _getId(_el) }; + }; + + this.getInstanceIndex = function() { return _instanceIndex; }; + + this.setZoom = function(z, repaintEverything) { + _zoom = z; + if (repaintEverything) _currentInstance.repaintEverything(); + }; + this.getZoom = function() { return _zoom; }; + + for (var i in this.Defaults) + _initialDefaults[i] = this.Defaults[i]; + + this.bind = function(event, fn) { + if ("ready" === event && initialized) fn(); + else _bb.apply(_currentInstance,[event, fn]); + }; + + _currentInstance.importDefaults = function(d) { + for (var i in d) { + _currentInstance.Defaults[i] = d[i]; + } + return _currentInstance; + }; + + _currentInstance.restoreDefaults = function() { + _currentInstance.Defaults = jsPlumb.extend({}, _initialDefaults); + return _currentInstance; + }; + + var log = null, + resizeTimer = null, + initialized = false, + // TODO remove from window scope + connections = [], + // map of element id -> endpoint lists. an element can have an arbitrary + // number of endpoints on it, and not all of them have to be connected + // to anything. + endpointsByElement = {}, + endpointsByUUID = {}, + offsets = {}, + offsetTimestamps = {}, + floatingConnections = {}, + draggableStates = {}, + connectionBeingDragged = false, + sizes = [], + _suspendDrawing = false, + _suspendedAt = null, + DEFAULT_SCOPE = this.Defaults.Scope, + renderMode = null, // will be set in init() + _curIdStamp = 1, + _idstamp = function() { return "" + _curIdStamp++; }, + + // + // appends an element to some other element, which is calculated as follows: + // + // 1. if _currentInstance.Defaults.Container exists, use that element. + // 2. if the 'parent' parameter exists, use that. + // 3. otherwise just use the root element (for DOM usage, the document body). + // + // + _appendElement = function(el, parent) { + if (_currentInstance.Defaults.Container) + jsPlumb.CurrentLibrary.appendElement(el, _currentInstance.Defaults.Container); + else if (!parent) + jsPlumbAdapter.appendToRoot(el); + else + jsPlumb.CurrentLibrary.appendElement(el, parent); + }, + + // + // YUI, for some reason, put the result of a Y.all call into an object that contains + // a '_nodes' array, instead of handing back an array-like object like the other + // libraries do. + // + _convertYUICollection = function(c) { + return c._nodes ? c._nodes : c; + }, + + // + // Draws an endpoint and its connections. this is the main entry point into drawing connections as well + // as endpoints, since jsPlumb is endpoint-centric under the hood. + // + // @param element element to draw (of type library specific element object) + // @param ui UI object from current library's event system. optional. + // @param timestamp timestamp for this paint cycle. used to speed things up a little by cutting down the amount of offset calculations we do. + // @param clearEdits defaults to false; indicates that mouse edits for connectors should be cleared + /// + _draw = function(element, ui, timestamp, clearEdits) { + + // TODO is it correct to filter by headless at this top level? how would a headless adapter ever repaint? + if (!jsPlumbAdapter.headless && !_suspendDrawing) { + var id = _getId(element), + repaintEls = _currentInstance.dragManager.getElementsForDraggable(id); + + if (timestamp == null) timestamp = _timestamp(); + + // update the offset of everything _before_ we try to draw anything. + var o = _updateOffset( { elId : id, offset : ui, recalc : false, timestamp : timestamp }); + + if (repaintEls) { + for (var i in repaintEls) { + // TODO this seems to cause a lag, but we provide the offset, so in theory it + // should not. is the timestamp failing? + _updateOffset( { + elId : repaintEls[i].id, + offset : { + left:o.o.left + repaintEls[i].offset.left, + top:o.o.top + repaintEls[i].offset.top + }, + recalc : false, + timestamp : timestamp + }); + } + } + + + _currentInstance.anchorManager.redraw(id, ui, timestamp, null, clearEdits); + + if (repaintEls) { + for (var j in repaintEls) { + _currentInstance.anchorManager.redraw(repaintEls[j].id, ui, timestamp, repaintEls[j].offset, clearEdits, true); + } + } + } + }, + + // + // executes the given function against the given element if the first + // argument is an object, or the list of elements, if the first argument + // is a list. the function passed in takes (element, elementId) as + // arguments. + // + _elementProxy = function(element, fn) { + var retVal = null, el, id; + if (_ju.isArray(element)) { + retVal = []; + for ( var i = 0, j = element.length; i < j; i++) { + el = _gel(element[i]); + id = _currentInstance.getAttribute(el, "id"); + retVal.push(fn(el, id)); // append return values to what we will return + } + } else { + el = _gel(element); + id = _currentInstance.getAttribute(el, "id"); + retVal = fn(el, id); + } + return retVal; + }, + + // + // gets an Endpoint by uuid. + // + _getEndpoint = function(uuid) { return endpointsByUUID[uuid]; }, + + /** + * inits a draggable if it's not already initialised. + * TODO: somehow abstract this to the adapter, because the concept of "draggable" has no + * place on the server. + */ + _initDraggableIfNecessary = function(element, isDraggable, dragOptions) { + // TODO move to DragManager? + if (!jsPlumbAdapter.headless) { + var _draggable = isDraggable == null ? false : isDraggable, jpcl = jsPlumb.CurrentLibrary; + if (_draggable) { + if (jpcl.isDragSupported(element) && !jpcl.isAlreadyDraggable(element)) { + var options = dragOptions || _currentInstance.Defaults.DragOptions || jsPlumb.Defaults.DragOptions; + options = jsPlumb.extend( {}, options); // make a copy. + var dragEvent = jpcl.dragEvents.drag, + stopEvent = jpcl.dragEvents.stop, + startEvent = jpcl.dragEvents.start; + + options[startEvent] = _ju.wrap(options[startEvent], function() { + _currentInstance.setHoverSuspended(true); + _currentInstance.select({source:element}).addClass(_currentInstance.elementDraggingClass + " " + _currentInstance.sourceElementDraggingClass, true); + _currentInstance.select({target:element}).addClass(_currentInstance.elementDraggingClass + " " + _currentInstance.targetElementDraggingClass, true); + _currentInstance.setConnectionBeingDragged(true); + }); + + options[dragEvent] = _ju.wrap(options[dragEvent], function() { + var ui = jpcl.getUIPosition(arguments, _currentInstance.getZoom()); + _draw(element, ui, null, true); + _addClass(element, "jsPlumb_dragged"); + }); + options[stopEvent] = _ju.wrap(options[stopEvent], function() { + var ui = jpcl.getUIPosition(arguments, _currentInstance.getZoom()); + _draw(element, ui); + _removeClass(element, "jsPlumb_dragged"); + _currentInstance.setHoverSuspended(false); + _currentInstance.select({source:element}).removeClass(_currentInstance.elementDraggingClass + " " + _currentInstance.sourceElementDraggingClass, true); + _currentInstance.select({target:element}).removeClass(_currentInstance.elementDraggingClass + " " + _currentInstance.targetElementDraggingClass, true); + _currentInstance.setConnectionBeingDragged(false); + _currentInstance.dragManager.dragEnded(element); + }); + var elId = _getId(element); // need ID + draggableStates[elId] = true; + var draggable = draggableStates[elId]; + options.disabled = draggable == null ? false : !draggable; + jpcl.initDraggable(element, options, false, _currentInstance); + _currentInstance.dragManager.register(element); + } + } + } + }, + + /* + * prepares a final params object that can be passed to _newConnection, taking into account defaults, events, etc. + */ + _prepareConnectionParams = function(params, referenceParams) { + var _p = jsPlumb.extend( { }, params); + if (referenceParams) jsPlumb.extend(_p, referenceParams); + + // hotwire endpoints passed as source or target to sourceEndpoint/targetEndpoint, respectively. + if (_p.source) { + if (_p.source.endpoint) + _p.sourceEndpoint = _p.source; + else + _p.source = _dom(_p.source); + } + if (_p.target) { + if (_p.target.endpoint) + _p.targetEndpoint = _p.target; + else + _p.target = _dom(_p.target); + } + + // test for endpoint uuids to connect + if (params.uuids) { + _p.sourceEndpoint = _getEndpoint(params.uuids[0]); + _p.targetEndpoint = _getEndpoint(params.uuids[1]); + } + + // now ensure that if we do have Endpoints already, they're not full. + // source: + if (_p.sourceEndpoint && _p.sourceEndpoint.isFull()) { + _ju.log(_currentInstance, "could not add connection; source endpoint is full"); + return; + } + + // target: + if (_p.targetEndpoint && _p.targetEndpoint.isFull()) { + _ju.log(_currentInstance, "could not add connection; target endpoint is full"); + return; + } + + // if source endpoint mandates connection type and nothing specified in our params, use it. + if (!_p.type && _p.sourceEndpoint) + _p.type = _p.sourceEndpoint.connectionType; + + // copy in any connectorOverlays that were specified on the source endpoint. + // it doesnt copy target endpoint overlays. i'm not sure if we want it to or not. + if (_p.sourceEndpoint && _p.sourceEndpoint.connectorOverlays) { + _p.overlays = _p.overlays || []; + for (var i = 0, j = _p.sourceEndpoint.connectorOverlays.length; i < j; i++) { + _p.overlays.push(_p.sourceEndpoint.connectorOverlays[i]); + } + } + + // pointer events + if (!_p["pointer-events"] && _p.sourceEndpoint && _p.sourceEndpoint.connectorPointerEvents) + _p["pointer-events"] = _p.sourceEndpoint.connectorPointerEvents; + + // if there's a target specified (which of course there should be), and there is no + // target endpoint specified, and 'newConnection' was not set to true, then we check to + // see if a prior call to makeTarget has provided us with the specs for the target endpoint, and + // we use those if so. additionally, if the makeTarget call was specified with 'uniqueEndpoint' set + // to true, then if that target endpoint has already been created, we re-use it. + + var tid, tep, existingUniqueEndpoint, newEndpoint; + + // TODO: this code can be refactored to be a little dry. + if (_p.target && !_p.target.endpoint && !_p.targetEndpoint && !_p.newConnection) { + tid = _getId(_p.target); + tep =_targetEndpointDefinitions[tid]; + existingUniqueEndpoint = _targetEndpoints[tid]; + + if (tep) { + // if target not enabled, return. + if (!_targetsEnabled[tid]) return; + + // TODO this is dubious. i think it is there so that the endpoint can subsequently + // be dragged (ie it kicks off the draggable registration). but it is dubious. + tep.isTarget = true; + + // check for max connections?? + newEndpoint = existingUniqueEndpoint != null ? existingUniqueEndpoint : _currentInstance.addEndpoint(_p.target, tep); + if (_targetEndpointsUnique[tid]) _targetEndpoints[tid] = newEndpoint; + _p.targetEndpoint = newEndpoint; + // TODO test options to makeTarget to see if we should do this? + newEndpoint._doNotDeleteOnDetach = false; // reset. + newEndpoint._deleteOnDetach = true; + } + } + + // same thing, but for source. + if (_p.source && !_p.source.endpoint && !_p.sourceEndpoint && !_p.newConnection) { + tid = _getId(_p.source); + tep = _sourceEndpointDefinitions[tid]; + existingUniqueEndpoint = _sourceEndpoints[tid]; + + if (tep) { + // if source not enabled, return. + if (!_sourcesEnabled[tid]) return; + + // TODO this is dubious. i think it is there so that the endpoint can subsequently + // be dragged (ie it kicks off the draggable registration). but it is dubious. + //tep.isSource = true; + + newEndpoint = existingUniqueEndpoint != null ? existingUniqueEndpoint : _currentInstance.addEndpoint(_p.source, tep); + if (_sourceEndpointsUnique[tid]) _sourceEndpoints[tid] = newEndpoint; + _p.sourceEndpoint = newEndpoint; + // TODO test options to makeSource to see if we should do this? + newEndpoint._doNotDeleteOnDetach = false; // reset. + newEndpoint._deleteOnDetach = true; + } + } + + return _p; + }, + + _newConnection = function(params) { + var connectionFunc = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), + endpointFunc = _currentInstance.Defaults.EndpointType || jsPlumb.Endpoint, + parent = jsPlumb.CurrentLibrary.getParent; + + if (params.container) + params.parent = params.container; + else { + if (params.sourceEndpoint) + params.parent = params.sourceEndpoint.parent; + else if (params.source.constructor == endpointFunc) + params.parent = params.source.parent; + else params.parent = parent(params.source); + } + + params._jsPlumb = _currentInstance; + params.newConnection = _newConnection; + params.newEndpoint = _newEndpoint; + params.endpointsByUUID = endpointsByUUID; + params.endpointsByElement = endpointsByElement; + params.finaliseConnection = _finaliseConnection; + var con = new connectionFunc(params); + con.id = "con_" + _idstamp(); + _eventFireProxy("click", "click", con); + _eventFireProxy("dblclick", "dblclick", con); + _eventFireProxy("contextmenu", "contextmenu", con); + + // if the connection is draggable, then maybe we need to tell the target endpoint to init the + // dragging code. it won't run again if it already configured to be draggable. + if (con.isDetachable()) { + con.endpoints[0].initDraggable(); + con.endpoints[1].initDraggable(); + } + + return con; + }, + + // + // adds the connection to the backing model, fires an event if necessary and then redraws + // + _finaliseConnection = function(jpc, params, originalEvent, doInformAnchorManager) { + params = params || {}; + // add to list of connections (by scope). + if (!jpc.suspendedEndpoint) + connections.push(jpc); + + // always inform the anchor manager + // except that if jpc has a suspended endpoint it's not true to say the + // connection is new; it has just (possibly) moved. the question is whether + // to make that call here or in the anchor manager. i think perhaps here. + if (jpc.suspendedEndpoint == null || doInformAnchorManager) + _currentInstance.anchorManager.newConnection(jpc); + + // force a paint + _draw(jpc.source); + + // fire an event + if (!params.doNotFireConnectionEvent && params.fireEvent !== false) { + + var eventArgs = { + connection:jpc, + source : jpc.source, target : jpc.target, + sourceId : jpc.sourceId, targetId : jpc.targetId, + sourceEndpoint : jpc.endpoints[0], targetEndpoint : jpc.endpoints[1] + }; + + _currentInstance.fire("connection", eventArgs, originalEvent); + } + }, + + _eventFireProxy = function(event, proxyEvent, obj) { + obj.bind(event, function(originalObject, originalEvent) { + _currentInstance.fire(proxyEvent, obj, originalEvent); + }); + }, + + /* + * for the given endpoint params, returns an appropriate parent element for the UI elements that will be added. + * this function is used by _newEndpoint (directly below), and also in the makeSource function in jsPlumb. + * + * the logic is to first look for a "container" member of params, and pass that back if found. otherwise we + * handoff to the 'getParent' function in the current library. + */ + _getParentFromParams = function(params) { + if (params.container) + return params.container; + else { + var tag = jsPlumb.CurrentLibrary.getTagName(params.source), + p = jsPlumb.CurrentLibrary.getParent(params.source); + if (tag && tag.toLowerCase() === "td") + return jsPlumb.CurrentLibrary.getParent(p); + else return p; + } + }, + + /* + factory method to prepare a new endpoint. this should always be used instead of creating Endpoints + manually, since this method attaches event listeners and an id. + */ + _newEndpoint = function(params) { + var endpointFunc = _currentInstance.Defaults.EndpointType || jsPlumb.Endpoint; + var _p = jsPlumb.extend({}, params); + _p.parent = _getParentFromParams(_p); + _p._jsPlumb = _currentInstance; + _p.newConnection = _newConnection; + _p.newEndpoint = _newEndpoint; + _p.endpointsByUUID = endpointsByUUID; + _p.endpointsByElement = endpointsByElement; + _p.finaliseConnection = _finaliseConnection; + _p.fireDetachEvent = fireDetachEvent; + _p.fireMoveEvent = fireMoveEvent; + _p.floatingConnections = floatingConnections; + _p.getParentFromParams = _getParentFromParams; + _p.elementId = _getId(_p.source); + var ep = new endpointFunc(_p); + ep.id = "ep_" + _idstamp(); + _eventFireProxy("click", "endpointClick", ep); + _eventFireProxy("dblclick", "endpointDblClick", ep); + _eventFireProxy("contextmenu", "contextmenu", ep); + if (!jsPlumbAdapter.headless) + _currentInstance.dragManager.endpointAdded(_p.source); + return ep; + }, + + /* + * performs the given function operation on all the connections found + * for the given element id; this means we find all the endpoints for + * the given element, and then for each endpoint find the connectors + * connected to it. then we pass each connection in to the given + * function. + */ + _operation = function(elId, func, endpointFunc) { + var endpoints = endpointsByElement[elId]; + if (endpoints && endpoints.length) { + for ( var i = 0, ii = endpoints.length; i < ii; i++) { + for ( var j = 0, jj = endpoints[i].connections.length; j < jj; j++) { + var retVal = func(endpoints[i].connections[j]); + // if the function passed in returns true, we exit. + // most functions return false. + if (retVal) return; + } + if (endpointFunc) endpointFunc(endpoints[i]); + } + } + }, + + _setDraggable = function(element, draggable) { + return _elementProxy(element, function(el, id) { + draggableStates[id] = draggable; + if (jsPlumb.CurrentLibrary.isDragSupported(el)) { + jsPlumb.CurrentLibrary.setDraggable(el, draggable); + } + }); + }, + /* + * private method to do the business of hiding/showing. + * + * @param el + * either Id of the element in question or a library specific + * object for the element. + * @param state + * String specifying a value for the css 'display' property + * ('block' or 'none'). + */ + _setVisible = function(el, state, alsoChangeEndpoints) { + state = state === "block"; + var endpointFunc = null; + if (alsoChangeEndpoints) { + if (state) endpointFunc = function(ep) { + ep.setVisible(true, true, true); + }; + else endpointFunc = function(ep) { + ep.setVisible(false, true, true); + }; + } + var info = _info(el); + _operation(info.id, function(jpc) { + if (state && alsoChangeEndpoints) { + // this test is necessary because this functionality is new, and i wanted to maintain backwards compatibility. + // this block will only set a connection to be visible if the other endpoint in the connection is also visible. + var oidx = jpc.sourceId === info.id ? 1 : 0; + if (jpc.endpoints[oidx].isVisible()) jpc.setVisible(true); + } + else // the default behaviour for show, and what always happens for hide, is to just set the visibility without getting clever. + jpc.setVisible(state); + }, endpointFunc); + }, + /* + * toggles the draggable state of the given element(s). + * el is either an id, or an element object, or a list of ids/element objects. + */ + _toggleDraggable = function(el) { + return _elementProxy(el, function(el, elId) { + var state = draggableStates[elId] == null ? false : draggableStates[elId]; + state = !state; + draggableStates[elId] = state; + jsPlumb.CurrentLibrary.setDraggable(el, state); + return state; + }); + }, + /** + * private method to do the business of toggling hiding/showing. + */ + _toggleVisible = function(elId, changeEndpoints) { + var endpointFunc = null; + if (changeEndpoints) { + endpointFunc = function(ep) { + var state = ep.isVisible(); + ep.setVisible(!state); + }; + } + _operation(elId, function(jpc) { + var state = jpc.isVisible(); + jpc.setVisible(!state); + }, endpointFunc); + // todo this should call _elementProxy, and pass in the + // _operation(elId, f) call as a function. cos _toggleDraggable does + // that. + }, + /** + * updates the offset and size for a given element, and stores the + * values. if 'offset' is not null we use that (it would have been + * passed in from a drag call) because it's faster; but if it is null, + * or if 'recalc' is true in order to force a recalculation, we get the current values. + */ + _updateOffset = function(params) { + var timestamp = params.timestamp, recalc = params.recalc, offset = params.offset, elId = params.elId, s; + if (_suspendDrawing && !timestamp) timestamp = _suspendedAt; + if (!recalc) { + if (timestamp && timestamp === offsetTimestamps[elId]) { + return {o:params.offset || offsets[elId], s:sizes[elId]}; + } + } + if (recalc || !offset) { // if forced repaint or no offset available, we recalculate. + // get the current size and offset, and store them + s = _gel(elId); + if (s != null) { + sizes[elId] = _getSize(s); + offsets[elId] = _getOffset(s, _currentInstance); + offsetTimestamps[elId] = timestamp; + } + } else { + offsets[elId] = offset; + if (sizes[elId] == null) { + s = _gel(elId); + if (s != null) sizes[elId] = _getSize(s); + } + offsetTimestamps[elId] = timestamp; + } + + if(offsets[elId] && !offsets[elId].right) { + offsets[elId].right = offsets[elId].left + sizes[elId][0]; + offsets[elId].bottom = offsets[elId].top + sizes[elId][1]; + offsets[elId].width = sizes[elId][0]; + offsets[elId].height = sizes[elId][1]; + offsets[elId].centerx = offsets[elId].left + (offsets[elId].width / 2); + offsets[elId].centery = offsets[elId].top + (offsets[elId].height / 2); + } + return {o:offsets[elId], s:sizes[elId]}; + }, + + // TODO comparison performance + _getCachedData = function(elId) { + var o = offsets[elId]; + if (!o) + return _updateOffset({elId:elId}); + else + return {o:o, s:sizes[elId]}; + }, + + /** + * gets an id for the given element, creating and setting one if + * necessary. the id is of the form + * + * jsPlumb_<instance index>_<index in instance> + * + * where "index in instance" is a monotonically increasing integer that starts at 0, + * for each instance. this method is used not only to assign ids to elements that do not + * have them but also to connections and endpoints. + */ + _getId = function(element, uuid, doNotCreateIfNotFound) { + if (jsPlumbUtil.isString(element)) return element; + if (element == null) return null; + var id = jsPlumbAdapter.getAttribute(element, "id"); + if (!id || id === "undefined") { + // check if fixed uuid parameter is given + if (arguments.length == 2 && arguments[1] !== undefined) + id = uuid; + else if (arguments.length == 1 || (arguments.length == 3 && !arguments[2])) + id = "jsPlumb_" + _instanceIndex + "_" + _idstamp(); + + if (!doNotCreateIfNotFound) jsPlumbAdapter.setAttribute(element, "id", id); + } + return id; + }; + + this.setConnectionBeingDragged = function(v) { + connectionBeingDragged = v; + }; + this.isConnectionBeingDragged = function() { + return connectionBeingDragged; + }; + + this.connectorClass = "_jsPlumb_connector"; + this.hoverClass = "_jsPlumb_hover"; + this.endpointClass = "_jsPlumb_endpoint"; + this.endpointConnectedClass = "_jsPlumb_endpoint_connected"; + this.endpointFullClass = "_jsPlumb_endpoint_full"; + this.endpointDropAllowedClass = "_jsPlumb_endpoint_drop_allowed"; + this.endpointDropForbiddenClass = "_jsPlumb_endpoint_drop_forbidden"; + this.overlayClass = "_jsPlumb_overlay"; + this.draggingClass = "_jsPlumb_dragging"; + this.elementDraggingClass = "_jsPlumb_element_dragging"; + this.sourceElementDraggingClass = "_jsPlumb_source_element_dragging"; + this.targetElementDraggingClass = "_jsPlumb_target_element_dragging"; + this.endpointAnchorClassPrefix = "_jsPlumb_endpoint_anchor"; + this.hoverSourceClass = "_jsPlumb_source_hover"; + this.hoverTargetClass = "_jsPlumb_target_hover"; + this.dragSelectClass = "_jsPlumb_drag_select"; + + this.Anchors = {}; + this.Connectors = { "canvas":{}, "svg":{}, "vml":{} }; + this.Endpoints = { "canvas":{}, "svg":{}, "vml":{} }; + this.Overlays = { "canvas":{}, "svg":{}, "vml":{}}; + this.ConnectorRenderers = {}; + this.SVG = "svg"; + this.CANVAS = "canvas"; + this.VML = "vml"; + + +// --------------------------- jsPLumbInstance public API --------------------------------------------------------- + + + this.addEndpoint = function(el, params, referenceParams) { + referenceParams = referenceParams || {}; + var p = jsPlumb.extend({}, referenceParams); + jsPlumb.extend(p, params); + p.endpoint = p.endpoint || _currentInstance.Defaults.Endpoint || jsPlumb.Defaults.Endpoint; + p.paintStyle = p.paintStyle || _currentInstance.Defaults.EndpointStyle || jsPlumb.Defaults.EndpointStyle; + // YUI wrapper + el = _convertYUICollection(el); + + var results = [], + inputs = (_ju.isArray(el) || (el.length != null && !_ju.isString(el))) ? el : [ el ]; + + for (var i = 0, j = inputs.length; i < j; i++) { + var _el = _dom(inputs[i]), id = _getId(_el); + p.source = _el; + + _updateOffset({ elId : id, timestamp:_suspendedAt }); + var e = _newEndpoint(p); + if (p.parentAnchor) e.parentAnchor = p.parentAnchor; + _ju.addToList(endpointsByElement, id, e); + var myOffset = offsets[id], + myWH = sizes[id], + anchorLoc = e.anchor.compute( { xy : [ myOffset.left, myOffset.top ], wh : myWH, element : e, timestamp:_suspendedAt }), + endpointPaintParams = { anchorLoc : anchorLoc, timestamp:_suspendedAt }; + + if (_suspendDrawing) endpointPaintParams.recalc = false; + if (!_suspendDrawing) e.paint(endpointPaintParams); + + results.push(e); + e._doNotDeleteOnDetach = true; // mark this as being added via addEndpoint. + } + + return results.length == 1 ? results[0] : results; + }; + + + this.addEndpoints = function(el, endpoints, referenceParams) { + var results = []; + for ( var i = 0, j = endpoints.length; i < j; i++) { + var e = _currentInstance.addEndpoint(el, endpoints[i], referenceParams); + if (_ju.isArray(e)) + Array.prototype.push.apply(results, e); + else results.push(e); + } + return results; + }; + + this.animate = function(el, properties, options) { + options = options || {}; + var ele = _gel(el), + id = _getId(el), + stepFunction = jsPlumb.CurrentLibrary.dragEvents.step, + completeFunction = jsPlumb.CurrentLibrary.dragEvents.complete; + + options[stepFunction] = _ju.wrap(options[stepFunction], function() { + _currentInstance.repaint(id); + }); + + // onComplete repaints, just to make sure everything looks good at the end of the animation. + options[completeFunction] = _ju.wrap(options[completeFunction], function() { + _currentInstance.repaint(id); + }); + + jsPlumb.CurrentLibrary.animate(ele, properties, options); + }; + + /** + * checks for a listener for the given condition, executing it if found, passing in the given value. + * condition listeners would have been attached using "bind" (which is, you could argue, now overloaded, since + * firing click events etc is a bit different to what this does). i thought about adding a "bindCondition" + * or something, but decided against it, for the sake of simplicity. jsPlumb will never fire one of these + * condition events anyway. + */ + this.checkCondition = function(conditionName, value) { + var l = _currentInstance.getListener(conditionName), + r = true; + + if (l && l.length > 0) { + try { + for (var i = 0, j = l.length; i < j; i++) { + r = r && l[i](value); + } + } + catch (e) { + _ju.log(_currentInstance, "cannot check condition [" + conditionName + "]" + e); + } + } + return r; + }; + + /** + * checks a condition asynchronously: fires the event handler and passes the handler + * a 'proceed' function and a 'stop' function. The handler MUST execute one or other + * of these once it has made up its mind. + * + * Note that although this reads the listener list for the given condition, it + * does not loop through and hit each listener, because that, with asynchronous + * callbacks, would be messy. so it uses only the first listener registered. + */ + this.checkASyncCondition = function(conditionName, value, proceed, stop) { + var l = _currentInstance.getListener(conditionName); + + if (l && l.length > 0) { + try { + l[0](value, proceed, stop); + } + catch (e) { + _ju.log(_currentInstance, "cannot asynchronously check condition [" + conditionName + "]" + e); + } + } + }; + + + this.connect = function(params, referenceParams) { + // prepare a final set of parameters to create connection with + var _p = _prepareConnectionParams(params, referenceParams), jpc; + // TODO probably a nicer return value if the connection was not made. _prepareConnectionParams + // will return null (and log something) if either endpoint was full. what would be nicer is to + // create a dedicated 'error' object. + if (_p) { + // create the connection. it is not yet registered + jpc = _newConnection(_p); + // now add it the model, fire an event, and redraw + _finaliseConnection(jpc, _p); + } + return jpc; + }; + + this.deleteEndpoint = function(object, doNotRepaintAfterwards) { + var _is = _currentInstance.setSuspendDrawing(true); + var endpoint = (typeof object == "string") ? endpointsByUUID[object] : object; + if (endpoint) { + _currentInstance.deleteObject({ + endpoint:endpoint + }); + } + if(!_is) _currentInstance.setSuspendDrawing(false, doNotRepaintAfterwards); + return _currentInstance; + }; + + this.deleteEveryEndpoint = function() { + var _is = _currentInstance.setSuspendDrawing(true); + for ( var id in endpointsByElement) { + var endpoints = endpointsByElement[id]; + if (endpoints && endpoints.length) { + for ( var i = 0, j = endpoints.length; i < j; i++) { + _currentInstance.deleteEndpoint(endpoints[i], true); + } + } + } + endpointsByElement = {}; + endpointsByUUID = {}; + _currentInstance.anchorManager.reset(); + _currentInstance.dragManager.reset(); + if(!_is) _currentInstance.setSuspendDrawing(false); + return _currentInstance; + }; + + var fireDetachEvent = function(jpc, doFireEvent, originalEvent) { + // may have been given a connection, or in special cases, an object + var connType = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), + argIsConnection = jpc.constructor == connType, + params = argIsConnection ? { + connection:jpc, + source : jpc.source, target : jpc.target, + sourceId : jpc.sourceId, targetId : jpc.targetId, + sourceEndpoint : jpc.endpoints[0], targetEndpoint : jpc.endpoints[1] + } : jpc; + + if (doFireEvent) + _currentInstance.fire("connectionDetached", params, originalEvent); + + _currentInstance.anchorManager.connectionDetached(params); + }; + + var fireMoveEvent = function(params, evt) { + _currentInstance.fire("connectionMoved", params, evt); + }; + + this.unregisterEndpoint = function(endpoint) { + if (endpoint._jsPlumb.uuid) endpointsByUUID[endpoint._jsPlumb.uuid] = null; + _currentInstance.anchorManager.deleteEndpoint(endpoint); + // TODO at least replace this with a removeWithFunction call. + for (var e in endpointsByElement) { + var endpoints = endpointsByElement[e]; + if (endpoints) { + var newEndpoints = []; + for (var i = 0, j = endpoints.length; i < j; i++) + if (endpoints[i] != endpoint) newEndpoints.push(endpoints[i]); + + endpointsByElement[e] = newEndpoints; + } + if(endpointsByElement[e].length <1){ + delete endpointsByElement[e]; + } + } + }; + + this.detach = function() { + + if (arguments.length === 0) return; + var connType = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), + firstArgIsConnection = arguments[0].constructor == connType, + params = arguments.length == 2 ? firstArgIsConnection ? (arguments[1] || {}) : arguments[0] : arguments[0], + fireEvent = (params.fireEvent !== false), + forceDetach = params.forceDetach, + conn = firstArgIsConnection ? arguments[0] : params.connection; + + if (conn) { + if (forceDetach || jsPlumbUtil.functionChain(true, false, [ + [ conn.endpoints[0], "isDetachAllowed", [ conn ] ], + [ conn.endpoints[1], "isDetachAllowed", [ conn ] ], + [ conn, "isDetachAllowed", [ conn ] ], + [ _currentInstance, "checkCondition", [ "beforeDetach", conn ] ] ])) { + + conn.endpoints[0].detach(conn, false, true, fireEvent); + } + } + else { + var _p = jsPlumb.extend( {}, params); // a backwards compatibility hack: source should be thought of as 'params' in this case. + // test for endpoint uuids to detach + if (_p.uuids) { + _getEndpoint(_p.uuids[0]).detachFrom(_getEndpoint(_p.uuids[1]), fireEvent); + } else if (_p.sourceEndpoint && _p.targetEndpoint) { + _p.sourceEndpoint.detachFrom(_p.targetEndpoint); + } else { + var sourceId = _getId(_dom(_p.source)), + targetId = _getId(_dom(_p.target)); + _operation(sourceId, function(jpc) { + if ((jpc.sourceId == sourceId && jpc.targetId == targetId) || (jpc.targetId == sourceId && jpc.sourceId == targetId)) { + if (_currentInstance.checkCondition("beforeDetach", jpc)) { + jpc.endpoints[0].detach(jpc, false, true, fireEvent); + } + } + }); + } + } + }; + + this.detachAllConnections = function(el, params) { + params = params || {}; + el = _dom(el); + var id = _getId(el), + endpoints = endpointsByElement[id]; + if (endpoints && endpoints.length) { + for ( var i = 0, j = endpoints.length; i < j; i++) { + endpoints[i].detachAll(params.fireEvent !== false); + } + } + return _currentInstance; + }; + + this.detachEveryConnection = function(params) { + params = params || {}; + _currentInstance.doWhileSuspended(function() { + for ( var id in endpointsByElement) { + var endpoints = endpointsByElement[id]; + if (endpoints && endpoints.length) { + for ( var i = 0, j = endpoints.length; i < j; i++) { + endpoints[i].detachAll(params.fireEvent !== false); + } + } + } + connections.splice(0); + }); + return _currentInstance; + }; + + /// not public. but of course its exposed. how to change this. + this.deleteObject = function(params) { + var result = { + endpoints : {}, + connections : {}, + endpointCount:0, + connectionCount:0 + }, + fireEvent = params.fireEvent !== false, + deleteAttachedObjects = params.deleteAttachedObjects !== false; + + var unravelConnection = function(connection) { + if(connection != null && result.connections[connection.id] == null) { + if (connection._jsPlumb != null) connection.setHover(false); + result.connections[connection.id] = connection; + result.connectionCount++; + if (deleteAttachedObjects) { + for (var j = 0; j < connection.endpoints.length; j++) { + if (connection.endpoints[j]._deleteOnDetach) + unravelEndpoint(connection.endpoints[j]); + } + } + } + }; + var unravelEndpoint = function(endpoint) { + if(endpoint != null && result.endpoints[endpoint.id] == null) { + if (endpoint._jsPlumb != null) endpoint.setHover(false); + result.endpoints[endpoint.id] = endpoint; + result.endpointCount++; + + if (deleteAttachedObjects) { + for (var i = 0; i < endpoint.connections.length; i++) { + var c = endpoint.connections[i]; + unravelConnection(c); + } + } + } + }; + + if (params.connection) + unravelConnection(params.connection); + else unravelEndpoint(params.endpoint); + + // loop through connections + for (var i in result.connections) { + var c = result.connections[i]; + c.endpoints[0].detachFromConnection(c); + c.endpoints[1].detachFromConnection(c); + //_currentInstance.unregisterConnection(c); + jsPlumbUtil.removeWithFunction(connections, function(_c) { + return c.id == _c.id; + }); + fireDetachEvent(c, fireEvent, params.originalEvent); + c.cleanup(); + c.destroy(); + } + + // loop through endpoints + for (var j in result.endpoints) { + var e = result.endpoints[j]; + _currentInstance.unregisterEndpoint(e); + // FIRE some endpoint deleted event? + e.cleanup(); + e.destroy(); + } + + return result; + }; + + this.draggable = function(el, options) { + var i,j,ele; + // allows for array or jquery/mootools selector + if (typeof el == 'object' && el.length) { + for (i = 0, j = el.length; i < j; i++) { + ele = _dom(el[i]); + if (ele) _initDraggableIfNecessary(ele, true, options); + } + } + // allows for YUI selector + else if (el._nodes) { // TODO this is YUI specific; really the logic should be forced + // into the library adapters (for jquery and mootools aswell) + for (i = 0, j = el._nodes.length; i < j; i++) { + ele = _dom(el._nodes[i]); + if (ele) _initDraggableIfNecessary(ele, true, options); + } + } + else { + ele = _dom(el); + if (ele) _initDraggableIfNecessary(ele, true, options); + } + return _currentInstance; + }; + + + // just a library-agnostic wrapper. + this.extend = function(o1, o2) { + return jsPlumb.CurrentLibrary.extend(o1, o2); + }; + + // helpers for select/selectEndpoints + var _setOperation = function(list, func, args, selector) { + for (var i = 0, j = list.length; i < j; i++) { + list[i][func].apply(list[i], args); + } + return selector(list); + }, + _getOperation = function(list, func, args) { + var out = []; + for (var i = 0, j = list.length; i < j; i++) { + out.push([ list[i][func].apply(list[i], args), list[i] ]); + } + return out; + }, + setter = function(list, func, selector) { + return function() { + return _setOperation(list, func, arguments, selector); + }; + }, + getter = function(list, func) { + return function() { + return _getOperation(list, func, arguments); + }; + }, + prepareList = function(input, doNotGetIds) { + var r = []; + if (input) { + if (typeof input == 'string') { + if (input === "*") return input; + r.push(input); + } + else { + input = _gel(input); + if (doNotGetIds) r = input; + else { + for (var i = 0, j = input.length; i < j; i++) + r.push(_info(input[i]).id); + } + } + } + return r; + }, + filterList = function(list, value, missingIsFalse) { + if (list === "*") return true; + return list.length > 0 ? jsPlumbUtil.indexOf(list, value) != -1 : !missingIsFalse; + }; + + // get some connections, specifying source/target/scope + this.getConnections = function(options, flat) { + if (!options) { + options = {}; + } else if (options.constructor == String) { + options = { "scope": options }; + } + var scope = options.scope || _currentInstance.getDefaultScope(), + scopes = prepareList(scope, true), + sources = prepareList(options.source), + targets = prepareList(options.target), + results = (!flat && scopes.length > 1) ? {} : [], + _addOne = function(scope, obj) { + if (!flat && scopes.length > 1) { + var ss = results[scope]; + if (ss == null) { + ss = results[scope] = []; + } + ss.push(obj); + } else results.push(obj); + }; + + for ( var j = 0, jj = connections.length; j < jj; j++) { + var c = connections[j]; + if (filterList(scopes, c.scope) && filterList(sources, c.sourceId) && filterList(targets, c.targetId)) + _addOne(c.scope, c); + } + + return results; + }; + + var _curryEach = function(list, executor) { + return function(f) { + for (var i = 0, ii = list.length; i < ii; i++) { + f(list[i]); + } + return executor(list); + }; + }, + _curryGet = function(list) { + return function(idx) { + return list[idx]; + }; + }; + + var _makeCommonSelectHandler = function(list, executor) { + var out = { + length:list.length, + each:_curryEach(list, executor), + get:_curryGet(list) + }, + setters = ["setHover", "removeAllOverlays", "setLabel", "addClass", "addOverlay", "removeOverlay", + "removeOverlays", "showOverlay", "hideOverlay", "showOverlays", "hideOverlays", "setPaintStyle", + "setHoverPaintStyle", "setSuspendEvents", "setParameter", "setParameters", "setVisible", + "repaint", "addType", "toggleType", "removeType", "removeClass", "setType", "bind", "unbind" ], + + getters = ["getLabel", "getOverlay", "isHover", "getParameter", "getParameters", "getPaintStyle", + "getHoverPaintStyle", "isVisible", "hasType", "getType", "isSuspendEvents" ], + i, ii; + + for (i = 0, ii = setters.length; i < ii; i++) + out[setters[i]] = setter(list, setters[i], executor); + + for (i = 0, ii = getters.length; i < ii; i++) + out[getters[i]] = getter(list, getters[i]); + + return out; + }; + + var _makeConnectionSelectHandler = function(list) { + var common = _makeCommonSelectHandler(list, _makeConnectionSelectHandler); + return jsPlumb.CurrentLibrary.extend(common, { + // setters + setDetachable:setter(list, "setDetachable", _makeConnectionSelectHandler), + setReattach:setter(list, "setReattach", _makeConnectionSelectHandler), + setConnector:setter(list, "setConnector", _makeConnectionSelectHandler), + detach:function() { + for (var i = 0, ii = list.length; i < ii; i++) + _currentInstance.detach(list[i]); + }, + // getters + isDetachable:getter(list, "isDetachable"), + isReattach:getter(list, "isReattach") + }); + }; + + var _makeEndpointSelectHandler = function(list) { + var common = _makeCommonSelectHandler(list, _makeEndpointSelectHandler); + return jsPlumb.CurrentLibrary.extend(common, { + setEnabled:setter(list, "setEnabled", _makeEndpointSelectHandler), + setAnchor:setter(list, "setAnchor", _makeEndpointSelectHandler), + isEnabled:getter(list, "isEnabled"), + detachAll:function() { + for (var i = 0, ii = list.length; i < ii; i++) + list[i].detachAll(); + }, + "remove":function() { + for (var i = 0, ii = list.length; i < ii; i++) + _currentInstance.deleteObject({endpoint:list[i]}); + } + }); + }; + + + this.select = function(params) { + params = params || {}; + params.scope = params.scope || "*"; + return _makeConnectionSelectHandler(params.connections || _currentInstance.getConnections(params, true)); + }; + + this.selectEndpoints = function(params) { + params = params || {}; + params.scope = params.scope || "*"; + var noElementFilters = !params.element && !params.source && !params.target, + elements = noElementFilters ? "*" : prepareList(params.element), + sources = noElementFilters ? "*" : prepareList(params.source), + targets = noElementFilters ? "*" : prepareList(params.target), + scopes = prepareList(params.scope, true); + + var ep = []; + + for (var el in endpointsByElement) { + var either = filterList(elements, el, true), + source = filterList(sources, el, true), + sourceMatchExact = sources != "*", + target = filterList(targets, el, true), + targetMatchExact = targets != "*"; + + // if they requested 'either' then just match scope. otherwise if they requested 'source' (not as a wildcard) then we have to match only endpoints that have isSource set to to true, and the same thing with isTarget. + if ( either || source || target ) { + inner: + for (var i = 0, ii = endpointsByElement[el].length; i < ii; i++) { + var _ep = endpointsByElement[el][i]; + if (filterList(scopes, _ep.scope, true)) { + + var noMatchSource = (sourceMatchExact && sources.length > 0 && !_ep.isSource), + noMatchTarget = (targetMatchExact && targets.length > 0 && !_ep.isTarget); + + if (noMatchSource || noMatchTarget) + continue inner; + + ep.push(_ep); + } + } + } + } + + return _makeEndpointSelectHandler(ep); + }; + + // get all connections managed by the instance of jsplumb. + this.getAllConnections = function() { return connections; }; + this.getDefaultScope = function() { return DEFAULT_SCOPE; }; + // get an endpoint by uuid. + this.getEndpoint = _getEndpoint; + // get endpoints for some element. + this.getEndpoints = function(el) { return endpointsByElement[_info(el).id]; }; + // gets the default endpoint type. used when subclassing. see wiki. + this.getDefaultEndpointType = function() { return jsPlumb.Endpoint; }; + // gets the default connection type. used when subclassing. see wiki. + this.getDefaultConnectionType = function() { return jsPlumb.Connection; }; + /* + * Gets an element's id, creating one if necessary. really only exposed + * for the lib-specific functionality to access; would be better to pass + * the current instance into the lib-specific code (even though this is + * a static call. i just don't want to expose it to the public API). + */ + this.getId = _getId; + this.getOffset = function(id) { + var o = offsets[id]; + return _updateOffset({elId:id}); + }; + + this.getSelector = function() { + return jsPlumb.CurrentLibrary.getSelector.apply(null, arguments); + }; + + // get the size of the element with the given id, perhaps from cache. + this.getSize = function(id) { + var s = sizes[id]; + if (!s) _updateOffset({elId:id}); + return sizes[id]; + }; + + this.appendElement = _appendElement; + + var _hoverSuspended = false; + this.isHoverSuspended = function() { return _hoverSuspended; }; + this.setHoverSuspended = function(s) { _hoverSuspended = s; }; + + var _isAvailable = function(m) { + return function() { + return jsPlumbAdapter.isRenderModeAvailable(m); + }; + }; + this.isCanvasAvailable = _isAvailable("canvas"); + this.isSVGAvailable = _isAvailable("svg"); + this.isVMLAvailable = _isAvailable("vml"); + + // set an element's connections to be hidden + this.hide = function(el, changeEndpoints) { + _setVisible(el, "none", changeEndpoints); + return _currentInstance; + }; + + // exposed for other objects to use to get a unique id. + this.idstamp = _idstamp; + + this.connectorsInitialized = false; + var connectorTypes = [], rendererTypes = ["canvas", "svg", "vml"]; + this.registerConnectorType = function(connector, name) { + connectorTypes.push([connector, name]); + }; + + /** + * callback from the current library to tell us to prepare ourselves (attach + * mouse listeners etc; can't do that until the library has provided a bind method) + */ + this.init = function() { + var _oneType = function(renderer, name, fn) { + jsPlumb.Connectors[renderer][name] = function() { + fn.apply(this, arguments); + jsPlumb.ConnectorRenderers[renderer].apply(this, arguments); + }; + jsPlumbUtil.extend(jsPlumb.Connectors[renderer][name], [ fn, jsPlumb.ConnectorRenderers[renderer]]); + }; + + if (!jsPlumb.connectorsInitialized) { + for (var i = 0; i < connectorTypes.length; i++) { + for (var j = 0; j < rendererTypes.length; j++) { + _oneType(rendererTypes[j], connectorTypes[i][1], connectorTypes[i][0]); + } + + } + jsPlumb.connectorsInitialized = true; + } + + if (!initialized) { + _currentInstance.anchorManager = new jsPlumb.AnchorManager({jsPlumbInstance:_currentInstance}); + _currentInstance.setRenderMode(_currentInstance.Defaults.RenderMode); // calling the method forces the capability logic to be run. + initialized = true; + _currentInstance.fire("ready", _currentInstance); + } + }.bind(this); + + this.log = log; + this.jsPlumbUIComponent = jsPlumbUIComponent; + + /* + * Creates an anchor with the given params. + * + * + * Returns: The newly created Anchor. + * Throws: an error if a named anchor was not found. + */ + this.makeAnchor = function() { + var pp, _a = function(t, p) { + if (jsPlumb.Anchors[t]) return new jsPlumb.Anchors[t](p); + if (!_currentInstance.Defaults.DoNotThrowErrors) + throw { msg:"jsPlumb: unknown anchor type '" + t + "'" }; + }; + if (arguments.length === 0) return null; + var specimen = arguments[0], elementId = arguments[1], jsPlumbInstance = arguments[2], newAnchor = null; + // if it appears to be an anchor already... + if (specimen.compute && specimen.getOrientation) return specimen; //TODO hazy here about whether it should be added or is already added somehow. + // is it the name of an anchor type? + else if (typeof specimen == "string") { + newAnchor = _a(arguments[0], {elementId:elementId, jsPlumbInstance:_currentInstance}); + } + // is it an array? it will be one of: + // an array of [spec, params] - this defines a single anchor, which may be dynamic, but has parameters. + // an array of arrays - this defines some dynamic anchors + // an array of numbers - this defines a single anchor. + else if (_ju.isArray(specimen)) { + if (_ju.isArray(specimen[0]) || _ju.isString(specimen[0])) { + // if [spec, params] format + if (specimen.length == 2 && _ju.isObject(specimen[1])) { + // if first arg is a string, its a named anchor with params + if (_ju.isString(specimen[0])) { + pp = jsPlumb.extend({elementId:elementId, jsPlumbInstance:_currentInstance}, specimen[1]); + newAnchor = _a(specimen[0], pp); + } + // otherwise first arg is array, second is params. we treat as a dynamic anchor, which is fine + // even if the first arg has only one entry. you could argue all anchors should be implicitly dynamic in fact. + else { + pp = jsPlumb.extend({elementId:elementId, jsPlumbInstance:_currentInstance, anchors:specimen[0]}, specimen[1]); + newAnchor = new jsPlumb.DynamicAnchor(pp); + } + } + else + newAnchor = new jsPlumb.DynamicAnchor({anchors:specimen, selector:null, elementId:elementId, jsPlumbInstance:jsPlumbInstance}); + + } + else { + var anchorParams = { + x:specimen[0], y:specimen[1], + orientation : (specimen.length >= 4) ? [ specimen[2], specimen[3] ] : [0,0], + offsets : (specimen.length >= 6) ? [ specimen[4], specimen[5] ] : [ 0, 0 ], + elementId:elementId, + jsPlumbInstance:jsPlumbInstance, + cssClass:specimen.length == 7 ? specimen[6] : null + }; + newAnchor = new jsPlumb.Anchor(anchorParams); + newAnchor.clone = function() { return new jsPlumb.Anchor(anchorParams); }; + } + } + + if (!newAnchor.id) newAnchor.id = "anchor_" + _idstamp(); + return newAnchor; + }; + + /** + * makes a list of anchors from the given list of types or coords, eg + * ["TopCenter", "RightMiddle", "BottomCenter", [0, 1, -1, -1] ] + */ + this.makeAnchors = function(types, elementId, jsPlumbInstance) { + var r = []; + for ( var i = 0, ii = types.length; i < ii; i++) { + if (typeof types[i] == "string") + r.push(jsPlumb.Anchors[types[i]]({elementId:elementId, jsPlumbInstance:jsPlumbInstance})); + else if (_ju.isArray(types[i])) + r.push(_currentInstance.makeAnchor(types[i], elementId, jsPlumbInstance)); + } + return r; + }; + + /** + * Makes a dynamic anchor from the given list of anchors (which may be in shorthand notation as strings or dimension arrays, or Anchor + * objects themselves) and the given, optional, anchorSelector function (jsPlumb uses a default if this is not provided; most people will + * not need to provide this - i think). + */ + this.makeDynamicAnchor = function(anchors, anchorSelector) { + return new jsPlumb.DynamicAnchor({anchors:anchors, selector:anchorSelector, elementId:null, jsPlumbInstance:_currentInstance}); + }; + +// --------------------- makeSource/makeTarget ---------------------------------------------- + + var _targetEndpointDefinitions = {}, + _targetEndpoints = {}, + _targetEndpointsUnique = {}, + _targetMaxConnections = {}, + _setEndpointPaintStylesAndAnchor = function(ep, epIndex) { + ep.paintStyle = ep.paintStyle || + _currentInstance.Defaults.EndpointStyles[epIndex] || + _currentInstance.Defaults.EndpointStyle || + jsPlumb.Defaults.EndpointStyles[epIndex] || + jsPlumb.Defaults.EndpointStyle; + ep.hoverPaintStyle = ep.hoverPaintStyle || + _currentInstance.Defaults.EndpointHoverStyles[epIndex] || + _currentInstance.Defaults.EndpointHoverStyle || + jsPlumb.Defaults.EndpointHoverStyles[epIndex] || + jsPlumb.Defaults.EndpointHoverStyle; + + ep.anchor = ep.anchor || + _currentInstance.Defaults.Anchors[epIndex] || + _currentInstance.Defaults.Anchor || + jsPlumb.Defaults.Anchors[epIndex] || + jsPlumb.Defaults.Anchor; + + ep.endpoint = ep.endpoint || + _currentInstance.Defaults.Endpoints[epIndex] || + _currentInstance.Defaults.Endpoint || + jsPlumb.Defaults.Endpoints[epIndex] || + jsPlumb.Defaults.Endpoint; + }, + // TODO put all the source stuff inside one parent, keyed by id. + _sourceEndpointDefinitions = {}, + _sourceEndpoints = {}, + _sourceEndpointsUnique = {}, + _sourcesEnabled = {}, + _sourceTriggers = {}, + _sourceMaxConnections = {}, + _targetsEnabled = {}, + selectorFilter = function(evt, _el, selector) { + var t = evt.target || evt.srcElement, ok = false, + sel = _currentInstance.getSelector(_el, selector); + for (var j = 0; j < sel.length; j++) { + if (sel[j] == t) { + ok = true; + break; + } + } + return ok; + }; + + // see API docs + this.makeTarget = function(el, params, referenceParams) { + + // put jsplumb ref into params without altering the params passed in + var p = jsPlumb.extend({_jsPlumb:_currentInstance}, referenceParams); + jsPlumb.extend(p, params); + + // calculate appropriate paint styles and anchor from the params given + _setEndpointPaintStylesAndAnchor(p, 1); + + var jpcl = jsPlumb.CurrentLibrary, + targetScope = p.scope || _currentInstance.Defaults.Scope, + deleteEndpointsOnDetach = !(p.deleteEndpointsOnDetach === false), + maxConnections = p.maxConnections || -1, + onMaxConnections = p.onMaxConnections, + + _doOne = function(el) { + + // get the element's id and store the endpoint definition for it. jsPlumb.connect calls will look for one of these, + // and use the endpoint definition if found. + // decode the info for this element (id and element) + var elInfo = _info(el), + elid = elInfo.id, + proxyComponent = new jsPlumbUIComponent(p), + dropOptions = jsPlumb.extend({}, p.dropOptions || {}); + + // store the definitions keyed against the element id. + _targetEndpointDefinitions[elid] = p; + _targetEndpointsUnique[elid] = p.uniqueEndpoint; + _targetMaxConnections[elid] = maxConnections; + _targetsEnabled[elid] = true; + + var _drop = function() { + _currentInstance.currentlyDragging = false; + var originalEvent = jsPlumb.CurrentLibrary.getDropEvent(arguments), + targetCount = _currentInstance.select({target:elid}).length, + draggable = _gel(jpcl.getDragObject(arguments)), + id = _currentInstance.getAttribute(draggable, "dragId"), + scope = _currentInstance.getAttribute(draggable, "originalScope"), + jpc = floatingConnections[id], + idx = jpc.endpoints[0].isFloating() ? 0 : 1, + // this is not necessarily correct. if the source is being dragged, + // then the source endpoint is actually the currently suspended endpoint. + source = jpc.endpoints[0], + _endpoint = p.endpoint ? jsPlumb.extend({}, p.endpoint) : {}; + + if (!_targetsEnabled[elid] || _targetMaxConnections[elid] > 0 && targetCount >= _targetMaxConnections[elid]){ + if (onMaxConnections) { + // TODO here we still have the id of the floating element, not the + // actual target. + onMaxConnections({ + element:elInfo.el, + connection:jpc + }, originalEvent); + } + return false; + } + + // unlock the source anchor to allow it to refresh its position if necessary + source.anchor.locked = false; + + // restore the original scope if necessary (issue 57) + if (scope) jpcl.setDragScope(draggable, scope); + + // if no suspendedEndpoint and not pending, it is likely there was a drop on two + // elements that are on top of each other. abort. + if (jpc.suspendedEndpoint == null && !jpc.pending) + return false; + + // check if drop is allowed here. + // if the source is being dragged then in fact + // the source and target ids to pass into the drop interceptor are + // source - elid + // target - jpc's targetId + // + // otherwise the ids are + // source - jpc.sourceId + // target - elid + // + var _continue = proxyComponent.isDropAllowed(idx === 0 ? elid : jpc.sourceId, idx === 0 ? jpc.targetId : elid, jpc.scope, jpc, null); + + // reinstate any suspended endpoint; this just puts the connection back into + // a state in which it will report sensible values if someone asks it about + // its target. we're going to throw this connection away shortly so it doesnt matter + // if we manipulate it a bit. + if (jpc.suspendedEndpoint) { + jpc[idx ? "targetId" : "sourceId"] = jpc.suspendedEndpoint.elementId; + jpc[idx ? "target" : "source"] = jpc.suspendedEndpoint.element; + jpc.endpoints[idx] = jpc.suspendedEndpoint; + } + + if (_continue) { + + // make a new Endpoint for the target + var _el = jpcl.getElementObject(elInfo.el), + newEndpoint = _targetEndpoints[elid] || _currentInstance.addEndpoint(_el, p); + + if (p.uniqueEndpoint) _targetEndpoints[elid] = newEndpoint; // may of course just store what it just pulled out. that's ok. + // TODO test options to makeTarget to see if we should do this? + newEndpoint._doNotDeleteOnDetach = false; // reset. + newEndpoint._deleteOnDetach = true; + + // if the anchor has a 'positionFinder' set, then delegate to that function to find + // out where to locate the anchor. + if (newEndpoint.anchor.positionFinder != null) { + var dropPosition = jpcl.getUIPosition(arguments, _currentInstance.getZoom()), + elPosition = _getOffset(_el, _currentInstance), + elSize = _getSize(_el), + ap = newEndpoint.anchor.positionFinder(dropPosition, elPosition, elSize, newEndpoint.anchor.constructorParams); + newEndpoint.anchor.x = ap[0]; + newEndpoint.anchor.y = ap[1]; + // now figure an orientation for it..kind of hard to know what to do actually. probably the best thing i can do is to + // support specifying an orientation in the anchor's spec. if one is not supplied then i will make the orientation + // be what will cause the most natural link to the source: it will be pointing at the source, but it needs to be + // specified in one axis only, and so how to make that choice? i think i will use whichever axis is the one in which + // the target is furthest away from the source. + } + + // change the target endpoint and target element information. really this should be + // done on a method on connection + jpc[idx ? "target" : "source"] = newEndpoint.element; + jpc[idx ? "targetId" : "sourceId"] = newEndpoint.elementId; + jpc.endpoints[idx].detachFromConnection(jpc); + if (jpc.endpoints[idx]._deleteOnDetach) + jpc.endpoints[idx].deleteAfterDragStop = true; // tell this endpoint to delet itself after drag stop. + // set new endpoint, and configure the settings for endpoints to delete on detach + newEndpoint.addConnection(jpc); + jpc.endpoints[idx] = newEndpoint; + jpc.deleteEndpointsOnDetach = deleteEndpointsOnDetach; + + // inform the anchor manager to update its target endpoint for this connection. + // TODO refactor to make this a single method. + if (idx == 1) + _currentInstance.anchorManager.updateOtherEndpoint(jpc.sourceId, jpc.suspendedElementId, jpc.targetId, jpc); + else + _currentInstance.anchorManager.sourceChanged(jpc.suspendedEndpoint.elementId, jpc.sourceId, jpc); + + _finaliseConnection(jpc, null, originalEvent); + jpc.pending = false; + + } + // if not allowed to drop... + else { + // TODO this code is identical (pretty much) to what happens when a connection + // dragged from a normal endpoint is in this situation. refactor. + // is this an existing connection, and will we reattach? + // TODO also this assumes the source needs to detach - is that always valid? + if (jpc.suspendedEndpoint) { + if (jpc.isReattach()) { + jpc.setHover(false); + jpc.floatingAnchorIndex = null; + jpc.suspendedEndpoint.addConnection(jpc); + _currentInstance.repaint(source.elementId); + } + else + source.detach(jpc, false, true, true, originalEvent); // otherwise, detach the connection and tell everyone about it. + } + + } + }; + + // wrap drop events as needed and initialise droppable + var dropEvent = jpcl.dragEvents.drop; + dropOptions.scope = dropOptions.scope || targetScope; + dropOptions[dropEvent] = _ju.wrap(dropOptions[dropEvent], _drop); + jpcl.initDroppable(_gel(elInfo.el), dropOptions, true); + }; + + // YUI collection fix + el = _convertYUICollection(el); + // make an array if only given one element + var inputs = el.length && el.constructor != String ? el : [ el ]; + + // register each one in the list. + for (var i = 0, ii = inputs.length; i < ii; i++) { + _doOne(inputs[i]); + } + + return _currentInstance; + }; + + // see api docs + this.unmakeTarget = function(el, doNotClearArrays) { + var info = _info(el); + + jsPlumb.CurrentLibrary.destroyDroppable(info.el); + // TODO this is not an exhaustive unmake of a target, since it does not remove the droppable stuff from + // the element. the effect will be to prevent it from behaving as a target, but it's not completely purged. + if (!doNotClearArrays) { + delete _targetEndpointDefinitions[info.id]; + delete _targetEndpointsUnique[info.id]; + delete _targetMaxConnections[info.id]; + delete _targetsEnabled[info.id]; + } + + return _currentInstance; + }; + + // see api docs + this.makeSource = function(el, params, referenceParams) { + var p = jsPlumb.extend({}, referenceParams); + jsPlumb.extend(p, params); + _setEndpointPaintStylesAndAnchor(p, 0); + var jpcl = jsPlumb.CurrentLibrary, + maxConnections = p.maxConnections || -1, + onMaxConnections = p.onMaxConnections, + _doOne = function(elInfo) { + // get the element's id and store the endpoint definition for it. jsPlumb.connect calls will look for one of these, + // and use the endpoint definition if found. + var elid = elInfo.id, + _el = _gel(elInfo.el), + parentElement = function() { + return p.parent == null ? null : p.parent === "parent" ? elInfo.el.parentNode : _dom(p.parent); + }, + idToRegisterAgainst = p.parent != null ? _currentInstance.getId(parentElement()) : elid; + + _sourceEndpointDefinitions[idToRegisterAgainst] = p; + _sourceEndpointsUnique[idToRegisterAgainst] = p.uniqueEndpoint; + _sourcesEnabled[idToRegisterAgainst] = true; + + var stopEvent = jpcl.dragEvents.stop, + dragEvent = jpcl.dragEvents.drag, + dragOptions = jsPlumb.extend({ }, p.dragOptions || {}), + existingDrag = dragOptions.drag, + existingStop = dragOptions.stop, + ep = null, + endpointAddedButNoDragYet = false; + + _sourceMaxConnections[idToRegisterAgainst] = maxConnections; + + // set scope if its not set in dragOptions but was passed in in params + dragOptions.scope = dragOptions.scope || p.scope; + + dragOptions[dragEvent] = _ju.wrap(dragOptions[dragEvent], function() { + if (existingDrag) existingDrag.apply(this, arguments); + endpointAddedButNoDragYet = false; + }); + + dragOptions[stopEvent] = _ju.wrap(dragOptions[stopEvent], function() { + + if (existingStop) existingStop.apply(this, arguments); + _currentInstance.currentlyDragging = false; + if (ep._jsPlumb != null) { // if not cleaned up... + + jpcl.unbind(ep.canvas, "mousedown"); + + // reset the anchor to the anchor that was initially provided. the one we were using to drag + // the connection was just a placeholder that was located at the place the user pressed the + // mouse button to initiate the drag. + var anchorDef = p.anchor || _currentInstance.Defaults.Anchor, + oldAnchor = ep.anchor, + oldConnection = ep.connections[0]; + + ep.setAnchor(_currentInstance.makeAnchor(anchorDef, elid, _currentInstance), true); + + if (p.parent) { + var parent = parentElement(); + if (parent) { + var currentId = ep.elementId, + potentialParent = p.container || _currentInstance.Defaults.Container || jsPlumb.Defaults.Container; + + ep.setElement(parent, potentialParent); + ep.endpointWillMoveAfterConnection = false; + //_currentInstance.anchorManager.rehomeEndpoint(ep, currentId, parent); + oldConnection.previousConnection = null; + // remove from connectionsByScope + jsPlumbUtil.removeWithFunction(connections, function(c) { + return c.id === oldConnection.id; + }); + _currentInstance.anchorManager.connectionDetached({ + sourceId:oldConnection.sourceId, + targetId:oldConnection.targetId, + connection:oldConnection + }); + _finaliseConnection(oldConnection); + } + } + + ep.repaint(); + _currentInstance.repaint(ep.elementId); + _currentInstance.repaint(oldConnection.targetId); + } + }); + // when the user presses the mouse, add an Endpoint, if we are enabled. + var mouseDownListener = function(e) { + + // if disabled, return. + if (!_sourcesEnabled[idToRegisterAgainst]) return; + + // if a filter was given, run it, and return if it says no. + if (p.filter) { + var evt = jpcl.getOriginalEvent(e), + r = jsPlumbUtil.isString(p.filter) ? selectorFilter(evt, _el, p.filter) : p.filter(evt, _el); + + if (r === false) return; + } + + // if maxConnections reached + var sourceCount = _currentInstance.select({source:idToRegisterAgainst}).length; + if (_sourceMaxConnections[idToRegisterAgainst] >= 0 && sourceCount >= _sourceMaxConnections[idToRegisterAgainst]) { + if (onMaxConnections) { + onMaxConnections({ + element:_el, + maxConnections:maxConnections + }, e); + } + return false; + } + + // make sure we have the latest offset for this div + var myOffsetInfo = _updateOffset({elId:elid}).o, + z = _currentInstance.getZoom(), + x = ( ((e.pageX || e.page.x) / z) - myOffsetInfo.left) / myOffsetInfo.width, + y = ( ((e.pageY || e.page.y) / z) - myOffsetInfo.top) / myOffsetInfo.height, + parentX = x, + parentY = y; + + // if there is a parent, the endpoint will actually be added to it now, rather than the div + // that was the source. in that case, we have to adjust the anchor position so it refers to + // the parent. + if (p.parent) { + var pEl = parentElement(), pId = _getId(pEl); + myOffsetInfo = _updateOffset({elId:pId}).o; + parentX = ((e.pageX || e.page.x) - myOffsetInfo.left) / myOffsetInfo.width; + parentY = ((e.pageY || e.page.y) - myOffsetInfo.top) / myOffsetInfo.height; + } + + // we need to override the anchor in here, and force 'isSource', but we don't want to mess with + // the params passed in, because after a connection is established we're going to reset the endpoint + // to have the anchor we were given. + var tempEndpointParams = {}; + jsPlumb.extend(tempEndpointParams, p); + tempEndpointParams.isSource = true; + tempEndpointParams.anchor = [x,y,0,0]; + tempEndpointParams.parentAnchor = [ parentX, parentY, 0, 0 ]; + tempEndpointParams.dragOptions = dragOptions; + // if a parent was given we need to turn that into a "container" argument. this is, by default, + // the parent of the element we will move to, so parent of p.parent in this case. however, if + // the user has specified a 'container' on the endpoint definition or on + // the defaults, we should use that. + if (p.parent) { + var potentialParent = tempEndpointParams.container || _currentInstance.Defaults.Container || jsPlumb.Defaults.Container; + if (potentialParent) + tempEndpointParams.container = potentialParent; + else + tempEndpointParams.container = jsPlumb.CurrentLibrary.getParent(parentElement()); + } + + ep = _currentInstance.addEndpoint(elid, tempEndpointParams); + + endpointAddedButNoDragYet = true; + // we set this to prevent connections from firing attach events before this function has had a chance + // to move the endpoint. + ep.endpointWillMoveAfterConnection = p.parent != null; + ep.endpointWillMoveTo = p.parent ? parentElement() : null; + + // TODO test options to makeSource to see if we should do this? + ep._doNotDeleteOnDetach = false; // reset. + ep._deleteOnDetach = true; + + var _delTempEndpoint = function() { + // this mouseup event is fired only if no dragging occurred, by jquery and yui, but for mootools + // it is fired even if dragging has occurred, in which case we would blow away a perfectly + // legitimate endpoint, were it not for this check. the flag is set after adding an + // endpoint and cleared in a drag listener we set in the dragOptions above. + if(endpointAddedButNoDragYet) { + endpointAddedButNoDragYet = false; + _currentInstance.deleteEndpoint(ep); + } + }; + + _currentInstance.registerListener(ep.canvas, "mouseup", _delTempEndpoint); + _currentInstance.registerListener(_el, "mouseup", _delTempEndpoint); + + // and then trigger its mousedown event, which will kick off a drag, which will start dragging + // a new connection from this endpoint. + jpcl.trigger(ep.canvas, "mousedown", e); + + }; + + // register this on jsPlumb so that it can be cleared by a reset. + _currentInstance.registerListener(_el, "mousedown", mouseDownListener); + _sourceTriggers[elid] = mouseDownListener; + + // lastly, if a filter was provided, set it as a dragFilter on the element, + // to prevent the element drag function from kicking in when we want to + // drag a new connection + if (p.filter && jsPlumbUtil.isString(p.filter)) { + jpcl.setDragFilter(_el, p.filter); + } + }; + + el = _convertYUICollection(el); + + var inputs = el.length && el.constructor != String ? el : [ el ]; + + for (var i = 0, ii = inputs.length; i < ii; i++) { + _doOne(_info(inputs[i])); + } + + return _currentInstance; + }; + + // see api docs + this.unmakeSource = function(el, doNotClearArrays) { + var info = _info(el), + mouseDownListener = _sourceTriggers[info.id]; + + if (mouseDownListener) + _currentInstance.unregisterListener(info.el, "mousedown", mouseDownListener); + + if (!doNotClearArrays) { + delete _sourceEndpointDefinitions[info.id]; + delete _sourceEndpointsUnique[info.id]; + delete _sourcesEnabled[info.id]; + delete _sourceTriggers[info.id]; + delete _sourceMaxConnections[info.id]; + } + + return _currentInstance; + }; + + // see api docs + this.unmakeEverySource = function() { + for (var i in _sourcesEnabled) + _currentInstance.unmakeSource(i, true); + + _sourceEndpointDefinitions = {}; + _sourceEndpointsUnique = {}; + _sourcesEnabled = {}; + _sourceTriggers = {}; + }; + + // see api docs + this.unmakeEveryTarget = function() { + for (var i in _targetsEnabled) + _currentInstance.unmakeTarget(i, true); + + _targetEndpointDefinitions = {}; + _targetEndpointsUnique = {}; + _targetMaxConnections = {}; + _targetsEnabled = {}; + + return _currentInstance; + }; + + // does the work of setting a source enabled or disabled. + var _setEnabled = function(type, el, state, toggle) { + var a = type == "source" ? _sourcesEnabled : _targetsEnabled; + el = _convertYUICollection(el); + + if (_ju.isString(el)) a[el] = toggle ? !a[el] : state; + else if (el.length) { + for (var i = 0, ii = el.length; i < ii; i++) { + var info = _info(el[i]); + a[info.id] = toggle ? !a[info.id] : state; + } + } + return _currentInstance; + }; + + this.toggleSourceEnabled = function(el) { + _setEnabled("source", el, null, true); + return _currentInstance.isSourceEnabled(el); + }; + + this.setSourceEnabled = function(el, state) { return _setEnabled("source", el, state); }; + this.isSource = function(el) { return _sourcesEnabled[_info(el).id] != null; }; + this.isSourceEnabled = function(el) { return _sourcesEnabled[_info(el).id] === true; }; + + this.toggleTargetEnabled = function(el) { + _setEnabled("target", el, null, true); + return _currentInstance.isTargetEnabled(el); + }; + + this.isTarget = function(el) { return _targetsEnabled[_info(el).id] != null; }; + this.isTargetEnabled = function(el) { return _targetsEnabled[_info(el).id] === true; }; + this.setTargetEnabled = function(el, state) { return _setEnabled("target", el, state); }; + +// --------------------- end makeSource/makeTarget ---------------------------------------------- + + this.ready = function(fn) { + _currentInstance.bind("ready", fn); + }; + + // repaint some element's endpoints and connections + this.repaint = function(el, ui, timestamp) { + // support both lists... + if (typeof el == 'object' && el.length) + for ( var i = 0, ii = el.length; i < ii; i++) { + _draw(el[i], ui, timestamp); + } + else // ...and single strings. + _draw(el, ui, timestamp); + + return _currentInstance; + }; + + // repaint every endpoint and connection. + this.repaintEverything = function() { + // TODO this timestamp causes continuous anchors to not repaint properly. + // fix this. do not just take out the timestamp. it runs a lot faster with + // the timestamp included. + //var timestamp = null; + var timestamp = _timestamp(); + for ( var elId in endpointsByElement) { + _draw(elId, null, timestamp); + } + return _currentInstance; + }; + + + this.removeAllEndpoints = function(el, recurse) { + var _one = function(_el) { + var info = _info(_el), + ebe = endpointsByElement[info.id], + i, ii; + + if (ebe) { + for ( i = 0, ii = ebe.length; i < ii; i++) + _currentInstance.deleteEndpoint(ebe[i]); + } + delete endpointsByElement[info.id]; + + if (recurse) { + if (info.el && info.el.nodeType != 3 && info.el.nodeType != 8 ) { + for ( i = 0, ii = info.el.childNodes.length; i < ii; i++) { + _one(info.el.childNodes[i]); + } + } + } + + }; + _one(el); + return _currentInstance; + }; + + /** + * Remove the given element, including cleaning up all endpoints registered for it. + * This is exposed in the public API but also used internally by jsPlumb when removing the + * element associated with a connection drag. + */ + this.remove = function(el, doNotRepaint) { + var info = _info(el); + _currentInstance.doWhileSuspended(function() { + _currentInstance.removeAllEndpoints(info.id, true); + _currentInstance.dragManager.elementRemoved(info.id); + delete floatingConnections[info.id]; + _currentInstance.anchorManager.clearFor(info.id); + _currentInstance.anchorManager.removeFloatingConnection(info.id); + }, doNotRepaint === false); + if(info.el) jsPlumb.CurrentLibrary.removeElement(info.el); + }; + + var _registeredListeners = {}, + _unbindRegisteredListeners = function() { + for (var i in _registeredListeners) { + for (var j = 0, jj = _registeredListeners[i].length; j < jj; j++) { + var info = _registeredListeners[i][j]; + jsPlumb.CurrentLibrary.unbind(info.el, info.event, info.listener); + } + } + _registeredListeners = {}; + }; + + // internal register listener method. gives us a hook to clean things up + // with if the user calls jsPlumb.reset. + this.registerListener = function(el, type, listener) { + jsPlumb.CurrentLibrary.bind(el, type, listener); + jsPlumbUtil.addToList(_registeredListeners, type, {el:el, event:type, listener:listener}); + }; + + this.unregisterListener = function(el, type, listener) { + jsPlumb.CurrentLibrary.unbind(el, type, listener); + jsPlumbUtil.removeWithFunction(_registeredListeners, function(rl) { + return rl.type == type && rl.listener == listener; + }); + }; + + this.reset = function() { + _currentInstance.deleteEveryEndpoint(); + _currentInstance.unbind(); + _targetEndpointDefinitions = {}; + _targetEndpoints = {}; + _targetEndpointsUnique = {}; + _targetMaxConnections = {}; + _sourceEndpointDefinitions = {}; + _sourceEndpoints = {}; + _sourceEndpointsUnique = {}; + _sourceMaxConnections = {}; + connections.splice(0); + _unbindRegisteredListeners(); + _currentInstance.anchorManager.reset(); + if (!jsPlumbAdapter.headless) + _currentInstance.dragManager.reset(); + }; + + + this.setDefaultScope = function(scope) { + DEFAULT_SCOPE = scope; + return _currentInstance; + }; + + // sets whether or not some element should be currently draggable. + this.setDraggable = _setDraggable; + + // sets the id of some element, changing whatever we need to to keep track. + this.setId = function(el, newId, doNotSetAttribute) { + // + var id; + + if (jsPlumbUtil.isString(el)) { + id = el; + } + else { + el = _dom(el); + id = _currentInstance.getId(el); + } + + var sConns = _currentInstance.getConnections({source:id, scope:'*'}, true), + tConns = _currentInstance.getConnections({target:id, scope:'*'}, true); + + newId = "" + newId; + + if (!doNotSetAttribute) { + el = _dom(id); + jsPlumbAdapter.setAttribute(el, "id", newId); + } + else + el = _dom(newId); + + endpointsByElement[newId] = endpointsByElement[id] || []; + for (var i = 0, ii = endpointsByElement[newId].length; i < ii; i++) { + endpointsByElement[newId][i].setElementId(newId); + endpointsByElement[newId][i].setReferenceElement(el); + } + delete endpointsByElement[id]; + + _currentInstance.anchorManager.changeId(id, newId); + if (!jsPlumbAdapter.headless) + _currentInstance.dragManager.changeId(id, newId); + + var _conns = function(list, epIdx, type) { + for (var i = 0, ii = list.length; i < ii; i++) { + list[i].endpoints[epIdx].setElementId(newId); + list[i].endpoints[epIdx].setReferenceElement(el); + list[i][type + "Id"] = newId; + list[i][type] = el; + } + }; + _conns(sConns, 0, "source"); + _conns(tConns, 1, "target"); + + _currentInstance.repaint(newId); + }; + + this.setDebugLog = function(debugLog) { + log = debugLog; + }; + + this.setSuspendDrawing = function(val, repaintAfterwards) { + var curVal = _suspendDrawing; + _suspendDrawing = val; + if (val) _suspendedAt = new Date().getTime(); else _suspendedAt = null; + if (repaintAfterwards) _currentInstance.repaintEverything(); + return curVal; + }; + + // returns whether or not drawing is currently suspended. + this.isSuspendDrawing = function() { + return _suspendDrawing; + }; + + // return timestamp for when drawing was suspended. + this.getSuspendedAt = function() { return _suspendedAt; }; + + /** + * @doc function + * @name jsPlumb.class:doWhileSuspended + * @param {function} fn Function to run while suspended. + * @param {boolean} doNotRepaintAfterwards If true, jsPlumb won't run a full repaint. Otherwise it will. + * @description Suspends drawing, runs the given function, then re-enables drawing (and repaints, unless you tell it not to) + */ + this.doWhileSuspended = function(fn, doNotRepaintAfterwards) { + var _wasSuspended = _currentInstance.isSuspendDrawing(); + if (!_wasSuspended) + _currentInstance.setSuspendDrawing(true); + try { + fn(); + } + catch (e) { + _ju.log("Function run while suspended failed", e); + } + if (!_wasSuspended) + _currentInstance.setSuspendDrawing(false, !doNotRepaintAfterwards); + }; + + this.updateOffset = _updateOffset; + this.getOffset = function(elId) { return offsets[elId]; }; + this.getSize = function(elId) { return sizes[elId]; }; + this.getCachedData = _getCachedData; + this.timestamp = _timestamp; + + + + /** + * @doc function + * @name jsPlumb.class:setRenderMode + * @param {string} mode One of `jsPlumb.SVG, `jsPlumb.VML` or `jsPlumb.CANVAS`. + * @description Sets render mode. jsPlumb will fall back to VML if it determines that + * what you asked for is not supported (and that VML is). If you asked for VML but the browser does + * not support it, jsPlumb uses SVG. + * @return {string} The render mode that jsPlumb set, which of course may be different from that requested. + */ + this.setRenderMode = function(mode) { + renderMode = jsPlumbAdapter.setRenderMode(mode); + var i, ii; + // only add this if the renderer is canvas; we dont want these listeners registered on te + // entire document otherwise. + if (renderMode == jsPlumb.CANVAS) { + var bindOne = function(event) { + jsPlumb.CurrentLibrary.bind(document, event, function(e) { + if (!_currentInstance.currentlyDragging && renderMode == jsPlumb.CANVAS) { + // try connections first + for (i = 0, ii = connections.length; i < ii; i++ ) { + var t = connections[i].getConnector()[event](e); + if (t) return; + } + for (var el in endpointsByElement) { + var ee = endpointsByElement[el]; + for ( i = 0, ii = ee.length; i < ii; i++ ) { + if (ee[i].endpoint[event] && ee[i].endpoint[event](e)) return; + } + } + } + }); + }; + bindOne("click");bindOne("dblclick");bindOne("mousemove");bindOne("mousedown");bindOne("mouseup");bindOne("contextmenu"); + } + + return renderMode; + }; + + /** + * @doc function + * @name jsPlumb.class:getRenderMode + * @description Gets the current render mode for this instance of jsPlumb. + * @return {string} The current render mode - "canvas", "svg" or "vml". + */ + this.getRenderMode = function() { return renderMode; }; + + this.show = function(el, changeEndpoints) { + _setVisible(el, "block", changeEndpoints); + return _currentInstance; + }; + + /** + * gets some test hooks. nothing writable. + */ + this.getTestHarness = function() { + return { + endpointsByElement : endpointsByElement, + endpointCount : function(elId) { + var e = endpointsByElement[elId]; + return e ? e.length : 0; + }, + connectionCount : function(scope) { + scope = scope || DEFAULT_SCOPE; + var c = _currentInstance.getConnections({scope:scope}); + return c ? c.length : 0; + }, + getId : _getId, + makeAnchor:self.makeAnchor, + makeDynamicAnchor:self.makeDynamicAnchor + }; + }; + + + // TODO: update this method to return the current state. + this.toggleVisible = _toggleVisible; + this.toggleDraggable = _toggleDraggable; + this.addListener = this.bind; + + /* + helper method to take an xy location and adjust it for the parent's offset and scroll. + */ + this.adjustForParentOffsetAndScroll = function(xy, el) { + + var offsetParent = null, result = xy; + if (el.tagName.toLowerCase() === "svg" && el.parentNode) { + offsetParent = el.parentNode; + } + else if (el.offsetParent) { + offsetParent = el.offsetParent; + } + if (offsetParent != null) { + var po = offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : _getOffset(offsetParent, _currentInstance), + so = offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : {left:offsetParent.scrollLeft, top:offsetParent.scrollTop}; + + // i thought it might be cool to do this: + // lastReturnValue[0] = lastReturnValue[0] - offsetParent.offsetLeft + offsetParent.scrollLeft; + // lastReturnValue[1] = lastReturnValue[1] - offsetParent.offsetTop + offsetParent.scrollTop; + // but i think it ignores margins. my reasoning was that it's quicker to not hand off to some underlying + // library. + + result[0] = xy[0] - po.left + so.left; + result[1] = xy[1] - po.top + so.top; + } + + return result; + + }; + + if (!jsPlumbAdapter.headless) { + _currentInstance.dragManager = jsPlumbAdapter.getDragManager(_currentInstance); + _currentInstance.recalculateOffsets = _currentInstance.dragManager.updateOffsets; + } + + }; + + jsPlumbUtil.extend(jsPlumbInstance, jsPlumbUtil.EventGenerator, { + setAttribute : function(el, a, v) { + jsPlumbAdapter.setAttribute(el, a, v); + }, + getAttribute : function(el, a) { + return jsPlumbAdapter.getAttribute(jsPlumb.CurrentLibrary.getDOMElement(el), a); + }, + registerConnectionType : function(id, type) { + this._connectionTypes[id] = jsPlumb.extend({}, type); + }, + registerConnectionTypes : function(types) { + for (var i in types) + this._connectionTypes[i] = jsPlumb.extend({}, types[i]); + }, + registerEndpointType : function(id, type) { + this._endpointTypes[id] = jsPlumb.extend({}, type); + }, + registerEndpointTypes : function(types) { + for (var i in types) + this._endpointTypes[i] = jsPlumb.extend({}, types[i]); + }, + getType : function(id, typeDescriptor) { + return typeDescriptor === "connection" ? this._connectionTypes[id] : this._endpointTypes[id]; + }, + setIdChanged : function(oldId, newId) { + this.setId(oldId, newId, true); + }, + // set parent: change the parent for some node and update all the registrations we need to. + setParent : function(el, newParent) { + var jpcl = jsPlumb.CurrentLibrary, + _el = jpcl.getElementObject(el), + _dom = jpcl.getDOMElement(_el), + _id = this.getId(_dom), + _pel = jpcl.getElementObject(newParent), + _pdom = jpcl.getDOMElement(_pel), + _pid = this.getId(_pdom); + + _dom.parentNode.removeChild(_dom); + _pdom.appendChild(_dom); + this.dragManager.setParent(_el, _id, _pel, _pid); + } + }); + +// --------------------- static instance + AMD registration ------------------------------------------- + +// create static instance and assign to window if window exists. + var jsPlumb = new jsPlumbInstance(); + // register on window if defined (lets us run on server) + if (typeof window != 'undefined') window.jsPlumb = jsPlumb; + // add 'getInstance' method to static instance + /** + * @name jsPlumb.getInstance + * @param {object} [_defaults] Optional default settings for the new instance. + * @desc Gets a new instance of jsPlumb. + */ + jsPlumb.getInstance = function(_defaults) { + var j = new jsPlumbInstance(_defaults); + j.init(); + return j; + }; +// maybe register static instance as an AMD module, and getInstance method too. + if ( typeof define === "function") { + define( "jsplumb", [], function () { return jsPlumb; } ); + define( "jsplumbinstance", [], function () { return jsPlumb.getInstance(); } ); + } + // CommonJS + if (typeof exports !== 'undefined') { + exports.jsPlumb = jsPlumb; + } + + +// --------------------- end static instance + AMD registration ------------------------------------------- + +})(); + + +;(function() { + + // create the drag handler for a connection + 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(n); + _jsPlumb.updateOffset( { elId : id }); + // create and assign an id, and initialize the offset. + placeholder.id = id; + placeholder.element = n; + }; + + // create a floating endpoint (for drag connections) + 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" }); + }; + + var typeParameters = [ "connectorStyle", "connectorHoverStyle", "connectorOverlays", + "connector", "connectionType", "connectorClass", "connectorHoverClass" ]; + + // 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(ep, elementWithPrecedence) { + var idx = 0; + if (elementWithPrecedence != null) { + for (var i = 0; i < ep.connections.length; i++) { + if (ep.connections[i].sourceId == elementWithPrecedence || ep.connections[i].targetId == elementWithPrecedence) { + idx = i; + break; + } + } + } + + return ep.connections[idx]; + }; + + var findConnectionIndex = function(conn, ep) { + return jsPlumbUtil.findWithFunction(ep.connections, function(c) { return c.id == conn.id; }); + }; + + jsPlumb.Endpoint = function(params) { + var _jsPlumb = params._jsPlumb, + jpcl = jsPlumb.CurrentLibrary, + _att = jsPlumbAdapter.getAttribute, + _gel = jpcl.getElementObject, + _dom = jpcl.getDOMElement, + _ju = jsPlumbUtil, + _newConnection = params.newConnection, + _newEndpoint = params.newEndpoint, + _finaliseConnection = params.finaliseConnection, + _fireDetachEvent = params.fireDetachEvent, + _fireMoveEvent = params.fireMoveEvent, + floatingConnections = params.floatingConnections; + + this.idPrefix = "_jsplumb_e_"; + this.defaultLabelLocation = [ 0.5, 0.5 ]; + this.defaultOverlayKeys = ["Overlays", "EndpointOverlays"]; + this.parent = params.parent; + OverlayCapableJsPlumbUIComponent.apply(this, arguments); + +// TYPE + + this.getDefaultType = function() { + return { + parameters:{}, + scope:null, + maxConnections:this._jsPlumb.instance.Defaults.MaxConnections, + paintStyle:this._jsPlumb.instance.Defaults.EndpointStyle || jsPlumb.Defaults.EndpointStyle, + endpoint:this._jsPlumb.instance.Defaults.Endpoint || jsPlumb.Defaults.Endpoint, + hoverPaintStyle:this._jsPlumb.instance.Defaults.EndpointHoverStyle || jsPlumb.Defaults.EndpointHoverStyle, + overlays:this._jsPlumb.instance.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 + }; + }; + +// END TYPE + + this._jsPlumb.enabled = !(params.enabled === false); + this._jsPlumb.visible = true; + this.element = _dom(params.source); + this._jsPlumb.uuid = params.uuid; + this._jsPlumb.floatingEndpoint = null; + var inPlaceCopy = null; + if (this._jsPlumb.uuid) params.endpointsByUUID[this._jsPlumb.uuid] = this; + this.elementId = params.elementId; + + this._jsPlumb.connectionCost = params.connectionCost; + this._jsPlumb.connectionsDirected = params.connectionsDirected; + this._jsPlumb.currentAnchorClass = ""; + this._jsPlumb.events = {}; + + var _updateAnchorClass = function() { + jpcl.removeClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + this.removeClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + this._jsPlumb.currentAnchorClass = this.anchor.getCssClass(); + this.addClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + jpcl.addClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + }.bind(this); + + this.setAnchor = function(anchorParams, doNotRepaint) { + this._jsPlumb.instance.continuousAnchorFactory.clear(this.elementId); + this.anchor = this._jsPlumb.instance.makeAnchor(anchorParams, this.elementId, _jsPlumb); + _updateAnchorClass(); + this.anchor.bind("anchorChanged", function(currentAnchor) { + this.fire("anchorChanged", {endpoint:this, anchor:currentAnchor}); + _updateAnchorClass(); + }.bind(this)); + if (!doNotRepaint) + this._jsPlumb.instance.repaint(this.elementId); + return this; + }; + + var anchorParamsToUse = params.anchor ? params.anchor : params.anchors ? params.anchors : (_jsPlumb.Defaults.Anchor || "Top"); + this.setAnchor(anchorParamsToUse, true); + + // endpoint delegates to first connection for hover, if there is one. + var internalHover = function(state) { + if (this.connections.length > 0) + this.connections[0].setHover(state, false); + else + this.setHover(state); + }.bind(this); + + // 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. + this._jsPlumb.instance.anchorManager.add(this, this.elementId); + + this.setEndpoint = function(ep) { + + if (this.endpoint != null) { + this.endpoint.cleanup(); + this.endpoint.destroy(); + } + + var _e = function(t, p) { + var rm = _jsPlumb.getRenderMode(); + if (jsPlumb.Endpoints[rm][t]) return new jsPlumb.Endpoints[rm][t](p); + if (!_jsPlumb.Defaults.DoNotThrowErrors) + throw { msg:"jsPlumb: unknown endpoint type '" + t + "'" }; + }; + + var endpointArgs = { + _jsPlumb:this._jsPlumb.instance, + cssClass:params.cssClass, + parent:params.parent, + container:params.container, + tooltip:params.tooltip, + connectorTooltip:params.connectorTooltip, + endpoint:this + }; + if (_ju.isString(ep)) + this.endpoint = _e(ep, endpointArgs); + else if (_ju.isArray(ep)) { + endpointArgs = _ju.merge(ep[1], endpointArgs); + this.endpoint = _e(ep[0], endpointArgs); + } + else { + this.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); + this.endpoint.clone = function() { + // TODO this, and the code above, can be refactored to be more dry. + if (_ju.isString(ep)) + return _e(ep, endpointArgs); + else if (_ju.isArray(ep)) { + endpointArgs = _ju.merge(ep[1], endpointArgs); + return _e(ep[0], endpointArgs); + } + }.bind(this); + + this.type = this.endpoint.type; + // bind listeners from endpoint to self, with the internal hover function defined above. + this.bindListeners(this.endpoint, this, internalHover); + }; + + this.setEndpoint(params.endpoint || _jsPlumb.Defaults.Endpoint || jsPlumb.Defaults.Endpoint || "Dot"); + 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._jsPlumb.paintStyleInUse = this.getPaintStyle(); + + _ju.copyValues(typeParameters, params, this); + + this.isSource = params.isSource || false; + this.isTarget = params.isTarget || false; + this._jsPlumb.maxConnections = params.maxConnections || _jsPlumb.Defaults.MaxConnections; // maximum number of connections this endpoint can be the source of. + this.canvas = this.endpoint.canvas; + // add anchor class (need to do this on construction because we set anchor first) + this.addClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + jpcl.addClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + this.connections = params.connections || []; + this.connectorPointerEvents = params["connector-pointer-events"]; + + this.scope = params.scope || _jsPlumb.getDefaultScope(); + this.timestamp = null; + this.reattachConnections = params.reattach || _jsPlumb.Defaults.ReattachConnections; + this.connectionsDetachable = _jsPlumb.Defaults.ConnectionsDetachable; + if (params.connectionsDetachable === false || params.detachable === false) + this.connectionsDetachable = false; + this.dragAllowedWhenFull = params.dragAllowedWhenFull || true; + + if (params.onMaxConnections) + this.bind("maxConnections", params.onMaxConnections); + + // + // add a connection. not part of public API. + // + this.addConnection = function(connection) { + this.connections.push(connection); + this[(this.connections.length > 0 ? "add" : "remove") + "Class"](_jsPlumb.endpointConnectedClass); + this[(this.isFull() ? "add" : "remove") + "Class"](_jsPlumb.endpointFullClass); + }; + + this.detachFromConnection = function(connection, idx) { + idx = idx == null ? findConnectionIndex(connection, this) : idx; + if (idx >= 0) { + this.connections.splice(idx, 1); + this[(this.connections.length > 0 ? "add" : "remove") + "Class"](_jsPlumb.endpointConnectedClass); + this[(this.isFull() ? "add" : "remove") + "Class"](_jsPlumb.endpointFullClass); + } + }; + + this.detach = function(connection, ignoreTarget, forceDetach, fireEvent, originalEvent, endpointBeingDeleted, connectionIndex) { + + var idx = connectionIndex == null ? findConnectionIndex(connection, this) : connectionIndex, + actuallyDetached = false; + fireEvent = (fireEvent !== false); + + if (idx >= 0) { + if (forceDetach || connection._forceDetach || (connection.isDetachable() && connection.isDetachAllowed(connection) && this.isDetachAllowed(connection) )) { + + //connection.setHover(false); + + _jsPlumb.deleteObject({ + connection:connection, + fireEvent:(!ignoreTarget && fireEvent), + originalEvent:originalEvent + }); + actuallyDetached = true; + } + } + return actuallyDetached; + }; + + this.detachAll = function(fireEvent, originalEvent) { + while (this.connections.length > 0) { + // TODO this could pass the index in to the detach method to save some time (index will always be zero in this while loop) + // TODO now it defaults to fireEvent true. will that mess with things? + this.detach(this.connections[0], false, true, fireEvent !== false, originalEvent, this, 0); + } + return this; + }; + this.detachFrom = function(targetEndpoint, fireEvent, originalEvent) { + var c = []; + for ( var i = 0; i < this.connections.length; i++) { + if (this.connections[i].endpoints[1] == targetEndpoint || this.connections[i].endpoints[0] == targetEndpoint) { + c.push(this.connections[i]); + } + } + for ( var j = 0; j < c.length; j++) { + this.detach(c[j], false, true, fireEvent, originalEvent); + } + return this; + }; + + this.getElement = function() { + return this.element; + }; + + // container not supported in 1.5.3; you cannot change the container once it is set. + // it might come back int a future release. + this.setElement = function(el/*, container*/) { + var parentId = this._jsPlumb.instance.getId(el), + curId = this.elementId; + // remove the endpoint from the list for the current endpoint's element + _ju.removeWithFunction(params.endpointsByElement[this.elementId], function(e) { + return e.id == this.id; + }.bind(this)); + this.element = _dom(el); + this.elementId = _jsPlumb.getId(this.element); + _jsPlumb.anchorManager.rehomeEndpoint(this, curId, this.element); + _jsPlumb.dragManager.endpointAdded(this.element); + _ju.addToList(params.endpointsByElement, parentId, this); + return this; + }; + + /** + * private but must be exposed. + */ + this.makeInPlaceCopy = function() { + var loc = this.anchor.getCurrentLocation({element:this}), + o = this.anchor.getOrientation(this), + acc = this.anchor.getCssClass(), + inPlaceAnchor = { + bind:function() { }, + compute:function() { return [ loc[0], loc[1] ]; }, + getCurrentLocation : function() { return [ loc[0], loc[1] ]; }, + getOrientation:function() { return o; }, + getCssClass:function() { return acc; } + }; + + return _newEndpoint( { + anchor : inPlaceAnchor, + source : this.element, + paintStyle : this.getPaintStyle(), + endpoint : params.hideOnDrag ? "Blank" : this.endpoint, + _transient:true, + scope:this.scope + }); + }; + + + /** + * private but needs to be exposed. + */ + this.isFloating = function() { + return this.anchor != null && this.anchor.isFloating; + }; + + /** + * 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 = this.connections[0]; + if (this.isTarget && candidate) return candidate; + else { + return (this.connections.length < this._jsPlumb.maxConnections) || this._jsPlumb.maxConnections == -1 ? null : candidate; + } + }; + + this.setStyle = this.setPaintStyle; + + this.paint = function(params) { + params = params || {}; + var timestamp = params.timestamp, recalc = !(params.recalc === false); + if (!timestamp || this.timestamp !== timestamp) { + + // TODO check: is this is a safe performance enhancement? + var info = _jsPlumb.updateOffset({ elId:this.elementId, timestamp:timestamp/*, recalc:recalc*/ }); + + var xy = params.offset ? params.offset.o : info.o; + if(xy != null) { + var ap = params.anchorPoint,connectorPaintStyle = params.connectorPaintStyle; + if (ap == null) { + var wh = params.dimensions || info.s, + anchorParams = { xy : [ xy.left, xy.top ], wh : wh, element : this, timestamp : timestamp }; + if (recalc && this.anchor.isDynamic && this.connections.length > 0) { + var c = findConnectionToUseForDynamicAnchor(this, params.elementWithPrecedence), + oIdx = c.endpoints[0] == this ? 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 = this.anchor.compute(anchorParams); + } + + this.endpoint.compute(ap, this.anchor.getOrientation(this), this._jsPlumb.paintStyleInUse, connectorPaintStyle || this.paintStyleInUse); + this.endpoint.paint(this._jsPlumb.paintStyleInUse, this.anchor); + this.timestamp = timestamp; + + // paint overlays + for ( var i = 0; i < this._jsPlumb.overlays.length; i++) { + var o = this._jsPlumb.overlays[i]; + if (o.isVisible()) { + this._jsPlumb.overlayPlacements[i] = o.draw(this.endpoint, this._jsPlumb.paintStyleInUse); + o.paint(this._jsPlumb.overlayPlacements[i]); + } + } + } + } + }; + + this.repaint = this.paint; + + var draggingInitialised = false; + this.initDraggable = function() { + // is this a connection source? we make it draggable and have the + // drag listener maintain a connection with a floating endpoint. + if (!draggingInitialised && jpcl.isDragSupported(this.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 = this.connectorSelector(); + var _continue = true; + // if not enabled, return + if (!this.isEnabled()) _continue = false; + // if no connection and we're not a source, return. + if (jpc == null && !this.isSource) _continue = false; + // otherwise if we're full and not allowed to drag, also return false. + if (this.isSource && this.isFull() && !this.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; + } + + // clear hover for all connections for this endpoint before continuing. + for (var i = 0; i < this.connections.length; i++) + this.connections[i].setHover(false); + + this.addClass("endpointDrag"); + _jsPlumb.setConnectionBeingDragged(true); + + // if we're not full but there was a connection, make it null. we'll create a new one. + if (jpc && !this.isFull() && this.isSource) jpc = null; + + _jsPlumb.updateOffset( { elId : this.elementId }); + inPlaceCopy = this.makeInPlaceCopy(); + inPlaceCopy.referenceEndpoint = this; + inPlaceCopy.paint(); + + _makeDraggablePlaceholder(placeholderInfo, this.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 = jsPlumb.CurrentLibrary.getOffset(ipcoel, _jsPlumb), + po = _jsPlumb.adjustForParentOffsetAndScroll([ipco.left, ipco.top], inPlaceCopy.canvas), + canvasElement = _gel(this.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 (this.parentAnchor) this.anchor = _jsPlumb.makeAnchor(this.parentAnchor, this.elementId, _jsPlumb); + + // store the id of the dragging div and the source element. the drop function will pick these up. + _jsPlumb.setAttribute(this.canvas, "dragId", placeholderInfo.id); + _jsPlumb.setAttribute(this.canvas, "elId", this.elementId); + + this._jsPlumb.floatingEndpoint = _makeFloatingEndpoint(this.getPaintStyle(), this.anchor, this.endpoint, this.canvas, placeholderInfo.element, _jsPlumb, _newEndpoint); + // TODO we should not know about DOM here. make the library adapter do this (or the + // dom adapter) + this.canvas.style.visibility = "hidden"; + + if (jpc == null) { + this.anchor.locked = true; + this.setHover(false, false); + // create a connection. one end is this endpoint, the other is a floating endpoint. + jpc = _newConnection({ + sourceEndpoint : this, + targetEndpoint : this._jsPlumb.floatingEndpoint, + source : this.endpointWillMoveTo || this.element, // for makeSource with parent option. ensure source element is represented correctly. + target : placeholderInfo.element, + anchors : [ this.anchor, this._jsPlumb.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:this.connectionType, + cssClass:this.connectorClass, + hoverClass:this.connectorHoverClass + }); + jpc.pending = true; // mark this connection as not having been established. + jpc.addClass(_jsPlumb.draggingClass); + this._jsPlumb.floatingEndpoint.addClass(_jsPlumb.draggingClass); + // 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 == this.id ? 0 : 1; + jpc.floatingAnchorIndex = anchorIdx; // save our anchor index as the connection's floating index. + this.detachFromConnection(jpc); // detach from the connection while dragging is occurring. + + // store the original scope (issue 57) + var dragScope = jsPlumb.CurrentLibrary.getDragScope(canvasElement); + _jsPlumb.setAttribute(this.canvas, "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); + + // fire an event that informs that a connection is being dragged. we do this before + // replacing the original target with the floating element info. + _jsPlumb.fire("connectionDrag", jpc); + + // now we replace ourselves with the temporary div we created above: + if (anchorIdx === 0) { + existingJpcParams = [ jpc.source, jpc.sourceId, canvasElement, dragScope ]; + jpc.source = placeholderInfo.element; + jpc.sourceId = placeholderInfo.id; + } else { + existingJpcParams = [ jpc.target, jpc.targetId, canvasElement, 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]; + + // PROVIDE THE SUSPENDED ELEMENT, BE IT A SOURCE OR TARGET (ISSUE 39) + jpc.suspendedElement = jpc.endpoints[anchorIdx].getElement(); + jpc.suspendedElementId = jpc.endpoints[anchorIdx].elementId; + jpc.suspendedElementType = anchorIdx === 0 ? "source" : "target"; + + jpc.suspendedEndpoint.setHover(false); + this._jsPlumb.floatingEndpoint.referenceEndpoint = jpc.suspendedEndpoint; + jpc.endpoints[anchorIdx] = this._jsPlumb.floatingEndpoint; + + jpc.addClass(_jsPlumb.draggingClass); + this._jsPlumb.floatingEndpoint.addClass(_jsPlumb.draggingClass); + + } + // register it and register connection on it. + floatingConnections[placeholderInfo.id] = jpc; + _jsPlumb.anchorManager.addFloatingConnection(placeholderInfo.id, 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, this._jsPlumb.floatingEndpoint); + // tell jsplumb about it + _jsPlumb.currentlyDragging = true; + }.bind(this); + + 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 || this.scope; + dragOptions[startEvent] = _ju.wrap(dragOptions[startEvent], start, false); + // extracted drag handler function so can be used by makeSource + dragOptions[dragEvent] = _ju.wrap(dragOptions[dragEvent], _dragHandler.drag); + dragOptions[stopEvent] = _ju.wrap(dragOptions[stopEvent], + function() { + + _jsPlumb.setConnectionBeingDragged(false); + // if no endpoints, jpc already cleaned up. + if (jpc.endpoints != null) { + // get the actual drop event (decode from library args to stop function) + var originalEvent = jpcl.getDropEvent(arguments); + // unlock the other endpoint (if it is dynamic, it would have been locked at drag start) + var idx = jpc.floatingAnchorIndex == null ? 1 : jpc.floatingAnchorIndex; + jpc.endpoints[idx === 0 ? 1 : 0].anchor.locked = false; + // WHY does this need to happen? i suppose because the connection might not get + // deleted. TODO: i dont want to know about css classes inside jsplumb, ideally. + jpc.removeClass(_jsPlumb.draggingClass); + + // if we have the floating endpoint then the connection has not been dropped + // on another endpoint. If it is a new connection we throw it away. If it is an + // existing connection we check to see if we should reattach it, throwing it away + // if not. + if (jpc.endpoints[idx] == this._jsPlumb.floatingEndpoint) { + // 6a. 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 the connection should be reattached, or the other endpoint refuses detach, then + // reset the connection to its original state + 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._forceDetach = null; + jpc._forceReattach = null; + this._jsPlumb.floatingEndpoint.detachFromConnection(jpc); + jpc.suspendedEndpoint.addConnection(jpc); + _jsPlumb.repaint(existingJpcParams[1]); + } + } + } + } + + // remove the element associated with the floating endpoint + // (and its associated floating endpoint and visual artefacts) + _jsPlumb.remove(placeholderInfo.element, false); + // remove the inplace copy + _jsPlumb.remove(inPlaceCopy.canvas, false); + + // makeTargets sets this flag, to tell us we have been replaced and should delete ourself. + if (this.deleteAfterDragStop) { + _jsPlumb.deleteObject({endpoint:this}); + } + else { + if (this._jsPlumb) { + this._jsPlumb.floatingEndpoint = null; + // repaint this endpoint. + // make our canvas visible (TODO: hand off to library; we should not know about DOM) + this.canvas.style.visibility = "visible"; + // unlock our anchor + this.anchor.locked = false; + this.paint({recalc:false}); + } + } + + // TODO can this stay here? the connection is no longer valid. + _jsPlumb.fire("connectionDragStop", jpc); + + // tell jsplumb that dragging is finished. + _jsPlumb.currentlyDragging = false; + + jpc = null; + + }.bind(this)); + + var i = _gel(this.canvas); + jpcl.initDraggable(i, dragOptions, true, _jsPlumb); + + draggingInitialised = true; + } + }; + + // if marked as source or target at create time, init the dragging. + if (this.isSource || this.isTarget) + this.initDraggable(); + + // 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 ((this.isTarget || forceInit) && jpcl.isDropSupported(this.element)) { + var dropOptions = params.dropOptions || _jsPlumb.Defaults.DropOptions || jsPlumb.Defaults.DropOptions; + dropOptions = jsPlumb.extend( {}, dropOptions); + dropOptions.scope = dropOptions.scope || this.scope; + var dropEvent = jpcl.dragEvents.drop, + overEvent = jpcl.dragEvents.over, + outEvent = jpcl.dragEvents.out, + drop = function() { + + this.removeClass(_jsPlumb.endpointDropAllowedClass); + this.removeClass(_jsPlumb.endpointDropForbiddenClass); + + var originalEvent = jpcl.getDropEvent(arguments), + draggable = _gel(jpcl.getDragObject(arguments)), + id = _jsPlumb.getAttribute(draggable, "dragId"), + elId = _jsPlumb.getAttribute(draggable, "elId"), + scope = _jsPlumb.getAttribute(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 == this.id || + this.referenceEndpoint && jpc.suspendedEndpoint.id == this.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 (this.isFull()) { + this.fire("maxConnections", { + endpoint:this, + connection:jpc, + maxConnections:this._jsPlumb.maxConnections + }, originalEvent); + } + + if (!this.isFull() && !(idx === 0 && !this.isSource) && !(idx == 1 && !this.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 != this.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 = this.element; + jpc.sourceId = this.elementId; + } else { + jpc.target = this.element; + jpc.targetId = this.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() { + jpc.pending = false; + + // remove this jpc from the current endpoint + jpc.endpoints[idx].detachFromConnection(jpc); + if (jpc.suspendedEndpoint) jpc.suspendedEndpoint.detachFromConnection(jpc); + jpc.endpoints[idx] = this; + this.addConnection(jpc); + + // copy our parameters in to the connection: + var params = this.getParameters(); + for (var aParam in params) + jpc.setParameter(aParam, params[aParam]); + + if (!jpc.suspendedEndpoint) { + // if not an existing connection and + if (params.draggable) + jsPlumb.CurrentLibrary.initDraggable(this.element, dragOptions, true, _jsPlumb); + } + else { + var suspendedElement = jpc.suspendedEndpoint.getElement(), suspendedElementId = jpc.suspendedEndpoint.elementId; + _fireMoveEvent({ + index:idx, + originalSourceId:idx === 0 ? suspendedElementId : jpc.sourceId, + newSourceId:idx === 0 ? this.elementId : jpc.sourceId, + originalTargetId:idx == 1 ? suspendedElementId : jpc.targetId, + newTargetId:idx == 1 ? this.elementId : jpc.targetId, + originalSourceEndpoint:idx === 0 ? jpc.suspendedEndpoint : jpc.endpoints[0], + newSourceEndpoint:idx === 0 ? this : jpc.endpoints[0], + originalTargetEndpoint:idx == 1 ? jpc.suspendedEndpoint : jpc.endpoints[1], + newTargetEndpoint:idx == 1 ? this : jpc.endpoints[1], + connection:jpc + }, originalEvent); + /* 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);*/ + } + + // TODO this is like the makeTarget drop code. + if (idx == 1) + _jsPlumb.anchorManager.updateOtherEndpoint(jpc.sourceId, jpc.suspendedElementId, jpc.targetId, jpc); + else + _jsPlumb.anchorManager.sourceChanged(jpc.suspendedEndpoint.elementId, jpc.sourceId, jpc); + + // finalise will inform the anchor manager and also add to + // connectionsByScope if necessary. + // TODO if this is not set to true, then dragging a connection's target to a new + // target causes the connection to be forgotten. however if it IS set to true, then + // the opposite happens: dragging by source causes the connection to get forgotten + // about and then if you delete it jsplumb breaks. + _finaliseConnection(jpc, null, originalEvent/*, true*/); + + commonFunction(); + }.bind(this); + + 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 && this.isDropAllowed(jpc.sourceId, jpc.targetId, jpc.scope, jpc, this); + + if (_doContinue) { + continueFunction(); + } + else { + dontContinueFunction(); + } + } + _jsPlumb.currentlyDragging = false; + } + }.bind(this); + + dropOptions[dropEvent] = _ju.wrap(dropOptions[dropEvent], drop); + dropOptions[overEvent] = _ju.wrap(dropOptions[overEvent], function() { + var draggable = jpcl.getDragObject(arguments), + id = _jsPlumb.getAttribute(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 = (this.isTarget && _jpc.floatingAnchorIndex !== 0) || (_jpc.suspendedEndpoint && this.referenceEndpoint && this.referenceEndpoint.id == _jpc.suspendedEndpoint.id); + if (_cont) { + var bb = _jsPlumb.checkCondition("checkDropAllowed", { + sourceEndpoint:_jpc.endpoints[idx], + targetEndpoint:this, + connection:_jpc + }); + this[(bb ? "add" : "remove") + "Class"](_jsPlumb.endpointDropAllowedClass); + this[(bb ? "remove" : "add") + "Class"](_jsPlumb.endpointDropForbiddenClass); + _jpc.endpoints[idx].anchor.over(this.anchor, this); + } + } + }.bind(this)); + + dropOptions[outEvent] = _ju.wrap(dropOptions[outEvent], function() { + var draggable = jpcl.getDragObject(arguments), + id = _jsPlumb.getAttribute( draggable, "dragId"), + _jpc = floatingConnections[id]; + + if (_jpc != null) { + var idx = _jpc.floatingAnchorIndex == null ? 1 : _jpc.floatingAnchorIndex; + var _cont = (this.isTarget && _jpc.floatingAnchorIndex !== 0) || (_jpc.suspendedEndpoint && this.referenceEndpoint && this.referenceEndpoint.id == _jpc.suspendedEndpoint.id); + if (_cont) { + this.removeClass(_jsPlumb.endpointDropAllowedClass); + this.removeClass(_jsPlumb.endpointDropForbiddenClass); + _jpc.endpoints[idx].anchor.out(); + } + } + }.bind(this)); + jpcl.initDroppable(canvas, dropOptions, true, isTransient); + } + }.bind(this); + + // 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(this.canvas), true, !(params._transient || this.anchor.isFloating), this); + + // finally, set type if it was provided + if (params.type) + this.addType(params.type, params.data, _jsPlumb.isSuspendDrawing()); + + return this; + }; + + jsPlumbUtil.extend(jsPlumb.Endpoint, OverlayCapableJsPlumbUIComponent, { + getTypeDescriptor : function() { return "endpoint"; }, + isVisible : function() { return this._jsPlumb.visible; }, + setVisible : function(v, doNotChangeConnections, doNotNotifyOtherEndpoint) { + this._jsPlumb.visible = v; + if (this.canvas) this.canvas.style.display = v ? "block" : "none"; + this[v ? "showOverlays" : "hideOverlays"](); + if (!doNotChangeConnections) { + for (var i = 0; i < this.connections.length; i++) { + this.connections[i].setVisible(v); + if (!doNotNotifyOtherEndpoint) { + var oIdx = this === this.connections[i].endpoints[0] ? 1 : 0; + // only change the other endpoint if this is its only connection. + if (this.connections[i].endpoints[oIdx].connections.length == 1) this.connections[i].endpoints[oIdx].setVisible(v, true, true); + } + } + } + }, + getAttachedElements : function() { + return this.connections; + }, + applyType : function(t, doNotRepaint) { + if (t.maxConnections != null) this._jsPlumb.maxConnections = t.maxConnections; + if (t.scope) this.scope = t.scope; + jsPlumbUtil.copyValues(typeParameters, t, this); + if (t.anchor) { + this.anchor = this._jsPlumb.instance.makeAnchor(t.anchor); + } + }, + isEnabled : function() { return this._jsPlumb.enabled; }, + setEnabled : function(e) { this._jsPlumb.enabled = e; }, + cleanup : function() { + jsPlumb.CurrentLibrary.removeClass(this.element, this._jsPlumb.instance.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + this.anchor = null; + this.endpoint.cleanup(); + this.endpoint.destroy(); + this.endpoint = null; + // drag/drop + var i = jsPlumb.CurrentLibrary.getElementObject(this.canvas); + jsPlumb.CurrentLibrary.destroyDraggable(i); + jsPlumb.CurrentLibrary.destroyDroppable(i); + }, + setHover : function(h) { + if (this.endpoint && this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) + this.endpoint.setHover(h); + }, + isFull : function() { + return !(this.isFloating() || this._jsPlumb.maxConnections < 1 || this.connections.length < this._jsPlumb.maxConnections); + }, + getConnectionCost : function() { return this._jsPlumb.connectionCost; }, + setConnectionCost : function(c) { + this._jsPlumb.connectionCost = c; + }, + areConnectionsDirected : function() { return this._jsPlumb.connectionsDirected; }, + setConnectionsDirected : function(b) { this._jsPlumb.connectionsDirected = b; }, + setElementId : function(_elId) { + this.elementId = _elId; + this.anchor.elementId = _elId; + }, + setReferenceElement : function(_el) { + this.element = jsPlumb.CurrentLibrary.getDOMElement(_el); + }, + setDragAllowedWhenFull : function(allowed) { + this.dragAllowedWhenFull = allowed; + }, + equals : function(endpoint) { + return this.anchor.equals(endpoint.anchor); + }, + getUuid : function() { + return this._jsPlumb.uuid; + }, + computeAnchor : function(params) { + return this.anchor.compute(params); + } + }); +})(); +;(function() { + + var makeConnector = function(_jsPlumb, renderMode, connectorName, connectorArgs) { + if (!_jsPlumb.Defaults.DoNotThrowErrors && jsPlumb.Connectors[renderMode][connectorName] == null) + throw { msg:"jsPlumb: unknown connector type '" + connectorName + "'" }; + + return new jsPlumb.Connectors[renderMode][connectorName](connectorArgs); + }, + _makeAnchor = function(anchorParams, elementId, _jsPlumb) { + return (anchorParams) ? _jsPlumb.makeAnchor(anchorParams, elementId, _jsPlumb) : null; + }, + prepareEndpoint = function(_jsPlumb, _newEndpoint, conn, existing, index, params, element, elementId, connectorPaintStyle, connectorHoverPaintStyle) { + var e; + if (existing) { + conn.endpoints[index] = existing; + existing.addConnection(conn); + } 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, _jsPlumb) || + _makeAnchor(jsPlumb.Defaults.Anchors[index], elementId,_jsPlumb) || + _makeAnchor(_jsPlumb.Defaults.Anchor, elementId,_jsPlumb) || + _makeAnchor(jsPlumb.Defaults.Anchor, elementId, _jsPlumb), + u = params.uuids ? params.uuids[index] : null; + e = _newEndpoint({ + paintStyle : es, hoverPaintStyle:ehs, endpoint : ep, connections : [ conn ], + uuid : u, anchor : a, source : element, scope : params.scope, container:params.container, + reattach:params.reattach || _jsPlumb.Defaults.ReattachConnections, + detachable:params.detachable || _jsPlumb.Defaults.ConnectionsDetachable + }); + conn.endpoints[index] = e; + + if (params.drawEndpoints === false) e.setVisible(false, true, true); + + } + return e; + }; + + jsPlumb.Connection = function(params) { + var _newConnection = params.newConnection, + _newEndpoint = params.newEndpoint, + jpcl = jsPlumb.CurrentLibrary, + _att = jpcl.getAttribute, + _gel = jpcl.getElementObject, + _dom = jpcl.getDOMElement, + _ju = jsPlumbUtil, + _getOffset = jpcl.getOffset; + + this.connector = null; + this.idPrefix = "_jsplumb_c_"; + this.defaultLabelLocation = 0.5; + this.defaultOverlayKeys = ["Overlays", "ConnectionOverlays"]; + this.parent = params.parent; + // 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. + this.previousConnection = params.previousConnection; + this.source = _dom(params.source); + this.target = _dom(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(); + + OverlayCapableJsPlumbUIComponent.apply(this, arguments); + + this.sourceId = this._jsPlumb.instance.getId(this.source); + this.targetId = this._jsPlumb.instance.getId(this.target); + 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 = []; + + var _jsPlumb = this._jsPlumb.instance; + this._jsPlumb.visible = true; + this._jsPlumb.editable = params.editable === true; + this._jsPlumb.params = { + parent:params.parent, + cssClass:params.cssClass, + container:params.container, + "pointer-events":params["pointer-events"], + editorParams:params.editorParams + }; + this._jsPlumb.lastPaintedAt = null; + this.getDefaultType = function() { + return { + parameters:{}, + scope:null, + detachable:this._jsPlumb.instance.Defaults.ConnectionsDetachable, + rettach:this._jsPlumb.instance.Defaults.ReattachConnections, + paintStyle:this._jsPlumb.instance.Defaults.PaintStyle || jsPlumb.Defaults.PaintStyle, + connector:this._jsPlumb.instance.Defaults.Connector || jsPlumb.Defaults.Connector, + hoverPaintStyle:this._jsPlumb.instance.Defaults.HoverPaintStyle || jsPlumb.Defaults.HoverPaintStyle, + overlays:this._jsPlumb.instance.Defaults.ConnectorOverlays || jsPlumb.Defaults.ConnectorOverlays + }; + }; + +// INITIALISATION CODE + + // wrapped the main function to return null if no input given. this lets us cascade defaults properly. + + var eS = prepareEndpoint(_jsPlumb, _newEndpoint, this, params.sourceEndpoint, 0, params, this.source, this.sourceId, params.paintStyle, params.hoverPaintStyle); + if (eS) _ju.addToList(params.endpointsByElement, this.sourceId, eS); + var eT = prepareEndpoint(_jsPlumb, _newEndpoint, this, params.targetEndpoint, 1, params, this.target, this.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 explicitly told to (or not to) delete endpoints on detach, override endpoint's preferences + if (params.deleteEndpointsOnDetach != null) { + this.endpoints[0]._deleteOnDetach = params.deleteEndpointsOnDetach; + this.endpoints[1]._deleteOnDetach = params.deleteEndpointsOnDetach; + } + else { + // otherwise, unless the endpoints say otherwise, mark them for deletion. + if (!this.endpoints[0]._doNotDeleteOnDetach) this.endpoints[0]._deleteOnDetach = true; + if (!this.endpoints[1]._doNotDeleteOnDetach) this.endpoints[1]._deleteOnDetach = true; + } + + // TODO these could surely be refactored into some method that tries them one at a time until something exists + this.setConnector(this.endpoints[0].connector || + this.endpoints[1].connector || + params.connector || + _jsPlumb.Defaults.Connector || + jsPlumb.Defaults.Connector, true); + + if (params.path) + this.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._jsPlumb.paintStyleInUse = this.getPaintStyle(); + + var _suspendedAt = _jsPlumb.getSuspendedAt(); + _jsPlumb.updateOffset( { elId : this.sourceId, timestamp:_suspendedAt }); + _jsPlumb.updateOffset( { elId : this.targetId, timestamp:_suspendedAt }); + +//* + if(!_jsPlumb.isSuspendDrawing()) { + // 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 + this._jsPlumb.detachable = _jsPlumb.Defaults.ConnectionsDetachable; + if (params.detachable === false) this._jsPlumb.detachable = false; + if(this.endpoints[0].connectionsDetachable === false) this._jsPlumb.detachable = false; + if(this.endpoints[1].connectionsDetachable === false) this._jsPlumb.detachable = false; +// REATTACH + this._jsPlumb.reattach = params.reattach || this.endpoints[0].reattachConnections || this.endpoints[1].reattachConnections || _jsPlumb.Defaults.ReattachConnections; +// COST + DIRECTIONALITY + // if cost not supplied, try to inherit from source endpoint + this._jsPlumb.cost = params.cost || this.endpoints[0].getConnectionCost(); + this._jsPlumb.directed = params.directed; + // inherit directed flag if set no source endpoint + if (params.directed == null) this._jsPlumb.directed = this.endpoints[0].areConnectionsDirected(); +// END COST + DIRECTIONALITY + +// PARAMETERS + // merge all the parameters objects into the connection. parameters set + // on the connection take precedence; then source endpoint params, then + // finally target 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[1].getParameters()); + jsPlumb.extend(_p, this.endpoints[0].getParameters()); + jsPlumb.extend(_p, this.getParameters()); + this.setParameters(_p); +// END PARAMETERS + +// PAINTING + + // the very last thing we do is check to see if a 'type' was supplied in the params + var _type = params.type || this.endpoints[0].connectionType || this.endpoints[1].connectionType; + if (_type) + this.addType(_type, params.data, true); + +// END PAINTING + }; + + jsPlumbUtil.extend(jsPlumb.Connection, OverlayCapableJsPlumbUIComponent, { + applyType : function(t, doNotRepaint) { + if (t.detachable != null) this.setDetachable(t.detachable); + if (t.reattach != null) this.setReattach(t.reattach); + if (t.scope) this.scope = t.scope; + //editable = t.editable; // TODO + this.setConnector(t.connector, doNotRepaint); + }, + getTypeDescriptor : function() { return "connection"; }, + getAttachedElements : function() { + return this.endpoints; + }, + addClass : function(c, informEndpoints) { + if (informEndpoints) { + this.endpoints[0].addClass(c); + this.endpoints[1].addClass(c); + if (this.suspendedEndpoint) this.suspendedEndpoint.addClass(c); + } + if (this.connector) { + this.connector.addClass(c); + } + }, + removeClass : function(c, informEndpoints) { + if (informEndpoints) { + this.endpoints[0].removeClass(c); + this.endpoints[1].removeClass(c); + if (this.suspendedEndpoint) this.suspendedEndpoint.removeClass(c); + } + if (this.connector) { + this.connector.removeClass(c); + } + }, + isVisible : function() { return this._jsPlumb.visible; }, + setVisible : function(v) { + this._jsPlumb.visible = v; + //this[v ? "showOverlays" : "hideOverlays"](); + if (this.connector) + this.connector.setVisible(v); + this.repaint(); + }, + setEditable : function(e) { + if (this.connector && this.connector.isEditable()) + this._jsPlumb.editable = e; + + return this._jsPlumb.editable; + }, + isEditable : function() { return this._jsPlumb.editable; }, + editStarted : function() { + this.setSuspendEvents(true); + this.fire("editStarted", { + path:this.connector.getPath() + }); + this._jsPlumb.instance.setHoverSuspended(true); + }, + editCompleted : function() { + this.fire("editCompleted", { + path:this.connector.getPath() + }); + this.setSuspendEvents(false); + this.setHover(false); + this._jsPlumb.instance.setHoverSuspended(false); + }, + editCanceled : function() { + this.fire("editCanceled", { + path:this.connector.getPath() + }); + this.setHover(false); + this._jsPlumb.instance.setHoverSuspended(false); + }, + cleanup:function() { + //this.endpointsToDeleteOnDetach = null; + this.endpoints = null; + this.source = null; + this.target = null; + if (this.connector != null) { + this.connector.cleanup(); + this.connector.destroy(); + } + this.connector = null; + }, + isDetachable : function() { + return this._jsPlumb.detachable === true; + }, + setDetachable : function(detachable) { + this._jsPlumb.detachable = detachable === true; + }, + isReattach : function() { + return this._jsPlumb.reattach === true; + }, + setReattach : function(reattach) { + this._jsPlumb.reattach = reattach === true; + }, + setHover : function(state) { + if (this.connector && this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) { + this.connector.setHover(state); + jsPlumb.CurrentLibrary[state ? "addClass" : "removeClass"](this.source, this._jsPlumb.instance.hoverSourceClass); + jsPlumb.CurrentLibrary[state ? "addClass" : "removeClass"](this.target, this._jsPlumb.instance.hoverTargetClass); + } + }, + getCost : function() { return this._jsPlumb.cost; }, + setCost : function(c) { this._jsPlumb.cost = c; }, + isDirected : function() { return this._jsPlumb.directed === true; }, + // + // changes the parent element of this connection to newParent. not exposed for the public API. + // + // TODO ensure moveParent method still works (the overlay stuff in particular) + moveParent : function(newParent) { + var jpcl = jsPlumb.CurrentLibrary, curParent = jpcl.getParent(this.connector.canvas); + if (this.connector.bgCanvas) { + jpcl.removeElement(this.connector.bgCanvas); + jpcl.appendElement(this.connector.bgCanvas, newParent); + } + jpcl.removeElement(this.connector.canvas); + jpcl.appendElement(this.connector.canvas, newParent); + // this only applies for DOMOverlays + for (var i = 0; i < this._jsPlumb.overlays.length; i++) { + if (this._jsPlumb.overlays[i].isAppendedAtTopLevel) { + jpcl.removeElement(this._jsPlumb.overlays[i].canvas); + jpcl.appendElement(this._jsPlumb.overlays[i].canvas, newParent); + if (this._jsPlumb.overlays[i].reattachListeners) + this._jsPlumb.overlays[i].reattachListeners(this.connector); + } + } + if (this.connector.reattachListeners) // this is for SVG/VML; change an element's parent and you have to reinit its listeners. + this.connector.reattachListeners(); // the Canvas implementation doesn't have to care about this + }, + getConnector : function() { return this.connector; }, + setConnector : function(connectorSpec, doNotRepaint) { + var _ju = jsPlumbUtil; + if (this.connector != null) { + this.connector.cleanup(); + this.connector.destroy(); + } + + var connectorArgs = { + _jsPlumb:this._jsPlumb.instance, + parent:this._jsPlumb.params.parent, + cssClass:this._jsPlumb.params.cssClass, + container:this._jsPlumb.params.container, + "pointer-events":this._jsPlumb.params["pointer-events"] + }, + renderMode = this._jsPlumb.instance.getRenderMode(); + + if (_ju.isString(connectorSpec)) + this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec, connectorArgs); // lets you use a string as shorthand. + else if (_ju.isArray(connectorSpec)) { + if (connectorSpec.length == 1) + this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec[0], connectorArgs); + else + this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec[0], _ju.merge(connectorSpec[1], connectorArgs)); + } + // binds mouse listeners to the current connector. + this.bindListeners(this.connector, this, function(state) { + this.setHover(state, false); + }.bind(this)); + + this.canvas = this.connector.canvas; + + if (this._jsPlumb.editable && jsPlumb.ConnectorEditors != null && jsPlumb.ConnectorEditors[this.connector.type] && this.connector.isEditable()) { + new jsPlumb.ConnectorEditors[this.connector.type]({ + connector:this.connector, + connection:this, + params:this._jsPlumb.params.editorParams || { } + }); + } + else { + this._jsPlumb.editable = false; + } + + if (!doNotRepaint) this.repaint(); + }, + paint : function(params) { + + if (!this._jsPlumb.instance.isSuspendDrawing() && this._jsPlumb.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 != this._jsPlumb.lastPaintedAt) { + var sourceInfo = this._jsPlumb.instance.updateOffset( { elId : sId, offset : ui, recalc : recalc, timestamp : timestamp }).o, + targetInfo = this._jsPlumb.instance.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(); + this.connector.setEdited(false); + } + + var sAnchorP = sE.anchor.getCurrentLocation({xy:[sourceInfo.left,sourceInfo.top], wh:[sourceInfo.width, sourceInfo.height], element:sE, timestamp:timestamp}), + tAnchorP = tE.anchor.getCurrentLocation({xy:[targetInfo.left,targetInfo.top], wh:[targetInfo.width, targetInfo.height], element:tE, timestamp:timestamp}); + + this.connector.resetBounds(); + + this.connector.compute({ + sourcePos:sAnchorP, + targetPos:tAnchorP, + sourceEndpoint:this.endpoints[sIdx], + targetEndpoint:this.endpoints[tIdx], + lineWidth:this._jsPlumb.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 < this._jsPlumb.overlays.length; i++) { + var o = this._jsPlumb.overlays[i]; + if (o.isVisible()) { + this._jsPlumb.overlayPlacements[i] = o.draw(this.connector, this._jsPlumb.paintStyleInUse); + overlayExtents.minX = Math.min(overlayExtents.minX, this._jsPlumb.overlayPlacements[i].minX); + overlayExtents.maxX = Math.max(overlayExtents.maxX, this._jsPlumb.overlayPlacements[i].maxX); + overlayExtents.minY = Math.min(overlayExtents.minY, this._jsPlumb.overlayPlacements[i].minY); + overlayExtents.maxY = Math.max(overlayExtents.maxY, this._jsPlumb.overlayPlacements[i].maxY); + } + } + + var lineWidth = parseFloat(this._jsPlumb.paintStyleInUse.lineWidth || 1) / 2, + outlineWidth = parseFloat(this._jsPlumb.paintStyleInUse.lineWidth || 0), + extents = { + xmin : Math.min(this.connector.bounds.minX - (lineWidth + outlineWidth), overlayExtents.minX), + ymin : Math.min(this.connector.bounds.minY - (lineWidth + outlineWidth), overlayExtents.minY), + xmax : Math.max(this.connector.bounds.maxX + (lineWidth + outlineWidth), overlayExtents.maxX), + ymax : Math.max(this.connector.bounds.maxY + (lineWidth + outlineWidth), overlayExtents.maxY) + }; + + // paint the connector. + this.connector.paint(this._jsPlumb.paintStyleInUse, null, extents); + // and then the overlays + for ( var j = 0; j < this._jsPlumb.overlays.length; j++) { + var p = this._jsPlumb.overlays[j]; + if (p.isVisible()) { + p.paint(this._jsPlumb.overlayPlacements[j], extents); + } + } + } + this._jsPlumb.lastPaintedAt = timestamp; + } + }, + /* + * Function: repaint + * Repaints the Connection. No parameters exposed to public API. + */ + repaint : function(params) { + params = params || {}; + this.paint({ elId : this.sourceId, recalc : !(params.recalc === false), timestamp:params.timestamp, clearEdits:params.clearEdits }); + } + + }); // END Connection class +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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(a)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 + 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];*/ + r = a[0][0] < b[0][0]; + } + else { + /*if (a[0][0] > b[0][0]) + r= true; + else + r =a[0][1] > b[0][1]; + */ + r = a[0][0] > b[0][0]; + } + 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":function(a, b) { return a[0] > b[0] ? 1 : -1; }, + "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); + }; + var removeEndpointFromAnchorLists = function(endpoint) { + (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); + } + })(anchorLists[endpoint.elementId], endpoint.id); + }; + this.connectionDetached = function(connInfo) { + var connection = connInfo.connection || connInfo, + sourceId = connInfo.sourceId, + targetId = connInfo.targetId, + ep = connection.endpoints, + removeConnection = function(otherIndex, otherEndpoint, otherAnchor, elId, c) { + if (otherAnchor != null && 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 + removeEndpointFromAnchorLists(connection.endpoints[0]); + removeEndpointFromAnchorLists(connection.endpoints[1]); + + self.redraw(connection.sourceId); + self.redraw(connection.targetId); + }; + 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; + }); + removeEndpointFromAnchorLists(endpoint); + }; + 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; }); + jsPlumbUtil.addWithFunction(endpointsToPaint, listToRemoveFrom[i][1].endpoints[oIdx], function(e) { return e.id == listToRemoveFrom[i][1].endpoints[oIdx].id; }); + } + } + } + + for (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; }); + jsPlumbUtil.addWithFunction(endpointsToPaint, listToAddTo[i][1].endpoints[oIdx], function(e) { return e.id == listToAddTo[i][1].endpoints[oIdx].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; + }; + + // + // find the entry in an endpoint's list for this connection and update its target endpoint + // with the current target in the connection. + // + // + this.updateOtherEndpoint = function(elId, oldTargetId, newTargetId, connection) { + var sIndex = jsPlumbUtil.findWithFunction(connectionsByElementId[elId], function(i) { + return i[0].id === connection.id; + }), + tIndex = jsPlumbUtil.findWithFunction(connectionsByElementId[oldTargetId], function(i) { + return i[0].id === connection.id; + }); + + // update or add data for source + if (sIndex != -1) { + connectionsByElementId[elId][sIndex][0] = connection; + connectionsByElementId[elId][sIndex][1] = connection.endpoints[1]; + connectionsByElementId[elId][sIndex][2] = connection.endpoints[1].anchor.constructor == jsPlumb.DynamicAnchor; + } + + // remove entry for previous target (if there) + if (tIndex > -1) { + + connectionsByElementId[oldTargetId].splice(tIndex, 1); + // add entry for new target + jsPlumbUtil.addToList(connectionsByElementId, newTargetId, [connection, connection.endpoints[0], connection.endpoints[0].anchor.constructor == jsPlumb.DynamicAnchor]); + } + }; + + // + // notification that the connection given has changed source from the originalId to the newId. + // This involves: + // 1. removing the connection from the list of connections stored for the originalId + // 2. updating the source information for the target of the connection + // 3. re-registering the connection in connectionsByElementId with the newId + // + this.sourceChanged = function(originalId, newId, connection) { + // remove the entry that points from the old source to the target + jsPlumbUtil.removeWithFunction(connectionsByElementId[originalId], function(info) { + return info[0].id === connection.id; + }); + // find entry for target and update it + var tIdx = jsPlumbUtil.findWithFunction(connectionsByElementId[connection.targetId], function(i) { + return i[0].id === connection.id; + }); + if (tIdx > -1) { + connectionsByElementId[connection.targetId][tIdx][0] = connection; + connectionsByElementId[connection.targetId][tIdx][1] = connection.endpoints[0]; + connectionsByElementId[connection.targetId][tIdx][2] = connection.endpoints[0].anchor.constructor == jsPlumb.DynamicAnchor; + } + // add entry for new source + jsPlumbUtil.addToList(connectionsByElementId, newId, [connection, connection.endpoints[1], connection.endpoints[1].anchor.constructor == jsPlumb.DynamicAnchor]); + }; + + // + // moves the given endpoint from `currentId` to `element`. + // This involves: + // + // 1. changing the key in _amEndpoints under which the endpoint is stored + // 2. changing the source or target values in all of the endpoint's connections + // 3. changing the array in connectionsByElementId in which the endpoint's connections + // are stored (done by either sourceChanged or updateOtherEndpoint) + // + this.rehomeEndpoint = function(ep, currentId, element) { + var eps = _amEndpoints[currentId] || [], + elementId = jsPlumbInstance.getId(element); + + if (elementId !== currentId) { + var idx = jsPlumbUtil.indexOf(eps, ep); + if (idx > -1) { + var _ep = eps.splice(idx, 1)[0]; + self.add(_ep, elementId); + } + } + + for (var i = 0; i < ep.connections.length; i++) { + if (ep.connections[i].sourceId == currentId) { + ep.connections[i].sourceId = ep.elementId; + ep.connections[i].source = ep.element; + self.sourceChanged(currentId, ep.elementId, ep.connections[i]); + } + else if(ep.connections[i].targetId == currentId) { + ep.connections[i].targetId = ep.elementId; + ep.connections[i].target = ep.element; + self.updateOtherEndpoint(ep.connections[i].sourceId, currentId, ep.elementId, ep.connections[i]); + } + } + }; + + this.redraw = function(elementId, ui, timestamp, offsetToUI, clearEdits, doNotRecalcEndpoint) { + + 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 }), + 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 (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 (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 (i = 0; i < ep.length; i++) { + ep[i].paint( { timestamp : timestamp, offset : myOffset, dimensions : myOffset.s, recalc:doNotRecalcEndpoint !== true }); + } + // ... and any other endpoints we came across as a result of the continuous anchors. + for (i = 0; i < endpointsToPaint.length; i++) { + var cd = jsPlumbInstance.getCachedData(endpointsToPaint[i].elementId); + // dont use timestamp for this endpoint, as it is not for the current element and we may + // have needed to recalculate anchor position due to the element for the endpoint moving. + //endpointsToPaint[i].paint( { timestamp : null, offset : cd, dimensions : cd.s }); + + 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 (i = 0; i < endpointConnections.length; i++) { + var otherEndpoint = endpointConnections[i][1]; + if (otherEndpoint.anchor.constructor == jsPlumb.DynamicAnchor) { + otherEndpoint.paint({ elementWithPrecedence:elementId, timestamp:timestamp }); + 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 (i = 0; i < connectionsToPaint.length; i++) { + // if not a connection between the two elements in question dont use the timestamp. + var ts =timestamp;// ((connectionsToPaint[i].sourceId == sourceId && connectionsToPaint[i].targetId == targetId) || + //(connectionsToPaint[i].sourceId == targetId && connectionsToPaint[i].targetId == sourceId)) ? timestamp : null; + connectionsToPaint[i].paint({elId:elementId, timestamp:ts, recalc:false, clearEdits:clearEdits}); + } + } + }; + + var ContinuousAnchor = function(anchorParams) { + jsPlumbUtil.EventGenerator.apply(this); + 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, + cssClass = anchorParams.cssClass || ""; + + for (var i = 0; i < faces.length; i++) { availableFaces[faces[i]] = true; } + + // if the given edge is supported, 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(params) { + return userDefinedContinuousAnchorLocations[params.element.id] || continuousAnchorLocations[params.element.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; + }; + this.getCssClass = function() { return cssClass; }; + this.setCssClass = function(c) { cssClass = c; }; + }; + + // continuous anchors + jsPlumbInstance.continuousAnchorFactory = { + get:function(params) { + var existing = continuousAnchors[params.elementId]; + if (!existing) { + existing = new ContinuousAnchor(params); + continuousAnchors[params.elementId] = existing; + } + return existing; + }, + clear:function(elementId) { + delete continuousAnchors[elementId]; + } + }; + }; + + /** + * 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) { + this.x = params.x || 0; + this.y = params.y || 0; + this.elementId = params.elementId; + this.cssClass = params.cssClass || ""; + this.userDefinedLocation = null; + this.orientation = params.orientation || [ 0, 0 ]; + + jsPlumbUtil.EventGenerator.apply(this); + + var jsPlumbInstance = params.jsPlumbInstance;//, + //lastTimestamp = null;//, lastReturnValue = null; + + this.lastReturnValue = null; + this.offsets = params.offsets || [ 0, 0 ]; + this.timestamp = null; + this.compute = function(params) { + + var xy = params.xy, wh = params.wh, element = params.element, timestamp = params.timestamp; + + if(params.clearUserDefinedLocation) + this.userDefinedLocation = null; + + if (timestamp && timestamp === self.timestamp) + return this.lastReturnValue; + + if (this.userDefinedLocation != null) { + this.lastReturnValue = this.userDefinedLocation; + } + else { + + this.lastReturnValue = [ xy[0] + (this.x * wh[0]) + this.offsets[0], xy[1] + (this.y * wh[1]) + this.offsets[1] ]; + // adjust loc if there is an offsetParent + this.lastReturnValue = jsPlumbInstance.adjustForParentOffsetAndScroll(this.lastReturnValue, element.canvas); + } + + this.timestamp = timestamp; + return this.lastReturnValue; + }; + + this.getCurrentLocation = function(params) { + return (this.lastReturnValue == null || (params.timestamp != null && this.timestamp != params.timestamp)) ? this.compute(params) : this.lastReturnValue; + }; + }; + jsPlumbUtil.extend(jsPlumb.Anchor, jsPlumbUtil.EventGenerator, { + equals : function(anchor) { + if (!anchor) return false; + var ao = anchor.getOrientation(), + 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]; + }, + getUserDefinedLocation : function() { + return this.userDefinedLocation; + }, + setUserDefinedLocation : function(l) { + this.userDefinedLocation = l; + }, + clearUserDefinedLocation : function() { + this.userDefinedLocation = null; + }, + getOrientation : function(_endpoint) { return this.orientation; }, + getCssClass : function() { return this.cssClass; } + }); + + /** + * 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; + + // clear from parent. we want floating anchor orientation to always be computed. + this.orientation = 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, endpoint) { + orientation = anchor.getOrientation(endpoint); + }; + + /** + * 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(params) { return _lastResult == null ? this.compute(params) : _lastResult; }; + }; + jsPlumbUtil.extend(jsPlumb.FloatingAnchor, jsPlumb.Anchor); + + var _convertAnchor = function(anchor, jsPlumbInstance, elementId) { + return anchor.constructor == jsPlumb.Anchor ? anchor: jsPlumbInstance.makeAnchor(anchor, elementId, jsPlumbInstance); + }; + + /* + * 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(params) { + jsPlumb.Anchor.apply(this, arguments); + + this.isSelective = true; + this.isDynamic = true; + this.anchors = []; + this.elementId = params.elementId; + this.jsPlumbInstance = params.jsPlumbInstance; + + for (var i = 0; i < params.anchors.length; i++) + this.anchors[i] = _convertAnchor(params.anchors[i], this.jsPlumbInstance, this.elementId); + this.addAnchor = function(anchor) { this.anchors.push(_convertAnchor(anchor, this.jsPlumbInstance, this.elementId)); }; + this.getAnchors = function() { return this.anchors; }; + this.locked = false; + var _curAnchor = this.anchors.length > 0 ? this.anchors[0] : null, + _curIndex = this.anchors.length > 0 ? 0 : -1, + _lastAnchor = _curAnchor, + 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 = params.selector || 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; + + this.timestamp = timestamp; + + 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 (this.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, this.anchors); + this.x = _curAnchor.x; + this.y = _curAnchor.y; + + if (_curAnchor != _lastAnchor) + this.fire("anchorChanged", _curAnchor); + + _lastAnchor = _curAnchor; + + return _curAnchor.compute(params); + }; + + this.getCurrentLocation = function(params) { + return this.getUserDefinedLocation() || (_curAnchor != null ? _curAnchor.getCurrentLocation(params) : null); + }; + + this.getOrientation = function(_endpoint) { return _curAnchor != null ? _curAnchor.getOrientation(_endpoint) : [ 0, 0 ]; }; + this.over = function(anchor, endpoint) { if (_curAnchor != null) _curAnchor.over(anchor, endpoint); }; + this.out = function() { if (_curAnchor != null) _curAnchor.out(); }; + + this.getCssClass = function() { return (_curAnchor && _curAnchor.getCssClass()) || ""; }; + }; + jsPlumbUtil.extend(jsPlumb.DynamicAnchor, jsPlumb.Anchor); + +// -------- 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.2: 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 j = 0; j < p.length; j++) { + p[j][4] = p[j][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; + }; +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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 = jsPlumbUtil.extend(jsPlumb.jsPlumbUIComponent, function(params) { + // 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.2, 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 _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 = jsPlumbGeom.gradient({x:x1, y:y1}, {x:x2, y:y2}); + m2 = -1 / m; + }; + + this.type = "Straight"; + + this.getLength = function() { return length; }; + this.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 jsPlumbGeom.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 = this.pointOnPath(location, absolute), + farAwayPoint = distance <= 0 ? {x:x1, y:y1} : {x:x2, y:y2 }; + + /* + location == 1 ? { + x:x1 + ((x2 - x1) * 10), + y:y1 + ((y1 - y2) * 10) + } : + */ + + if (distance <= 0 && Math.abs(distance) > 1) distance *= -1; + + return jsPlumbGeom.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 = jsPlumbGeom.lineLength([ x, y ], [ _x1, _y1 ]), + fractionInSegment = jsPlumbGeom.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 _super = jsPlumb.Segments.AbstractSegment.apply(this, arguments), + _calcAngle = function(_x, _y) { + return jsPlumbGeom.theta([params.cx, params.cy], [_x, _y]); + }, + _calcAngleForLocation = function(segment, location) { + if (segment.anticlockwise) { + var sa = segment.startAngle < segment.endAngle ? segment.startAngle + TWO_PI : segment.startAngle, + s = Math.abs(sa - segment.endAngle); + return sa - (s * location); + } + else { + var ea = segment.endAngle < segment.startAngle ? segment.endAngle + TWO_PI : segment.endAngle, + ss = Math.abs (ea - segment.startAngle); + + return segment.startAngle + (ss * 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 + (this.radius * Math.cos(params.startAngle)); + this.y1 = params.cy + (this.radius * Math.sin(params.startAngle)); + this.x2 = params.cx + (this.radius * Math.cos(params.endAngle)); + this.y2 = params.cy + (this.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 = jsPlumbGeom.quadrant([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 = this.endAngle < this.startAngle ? this.endAngle + TWO_PI : this.endAngle; + this.sweep = Math.abs (ea - this.startAngle); + if (this.anticlockwise) this.sweep = TWO_PI - this.sweep; + var circumference = 2 * Math.PI * this.radius, + frac = this.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:this.x1, y:this.y1, theta:this.startAngle }; + } + else if (location == 1) { + return { x:this.x2, y:this.y2, theta:this.endAngle }; + } + + if (absolute) { + location = location / length; + } + + var angle = _calcAngleForLocation(this, 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 = this.pointOnPath(location, absolute); + var m = jsPlumbGeom.normal( [ params.cx, params.cy ], [p.x, p.y ] ); + if (!this.anticlockwise && (m == Infinity || m == -Infinity)) m *= -1; + return m; + }; + + this.pointAlongPathFrom = function(location, distance, absolute) { + var p = this.pointOnPath(location, absolute), + arcSpan = distance / circumference * 2 * Math.PI, + dir = this.anticlockwise ? -1 : 1, + startAngle = p.theta + (dir * arcSpan), + startX = params.cx + (this.radius * Math.cos(startAngle)), + startY = params.cy + (this.radius * Math.sin(startAngle)); + + return {x:startX, y:startY}; + }; + }, + + Bezier : function(params) { + var _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() { + this.resetBounds = function() { + this.bounds = { minX:Infinity, minY:Infinity, maxX:-Infinity, maxY:-Infinity }; + }; + this.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(conn, type, params) { + if (params.x1 == params.x2 && params.y1 == params.y2) return; + var s = new jsPlumb.Segments[type](params); + segments.push(s); + totalLength += s.getLength(); + conn.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) { + this.lineWidth = params.lineWidth; + var segment = jsPlumbGeom.quadrant(params.sourcePos, params.targetPos), + swapX = params.targetPos[0] < params.sourcePos[0], + swapY = params.targetPos[1] < params.sourcePos[1], + lw = params.lineWidth || 1, + so = params.sourceEndpoint.anchor.getOrientation(params.sourceEndpoint), + to = params.targetEndpoint.anchor.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; }; + + this.updateBounds = function(segment) { + var segBounds = segment.getBounds(); + this.bounds.minX = Math.min(this.bounds.minX, segBounds.minX); + this.bounds.maxX = Math.max(this.bounds.maxX, segBounds.maxX); + this.bounds.minY = Math.min(this.bounds.minY, segBounds.minY); + this.bounds.maxY = Math.max(this.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) { + var seg = _findSegmentForLocation(location, absolute); + return seg.segment && seg.segment.pointOnPath(seg.proportion, absolute) || [0,0]; + }; + + this.gradientAtPoint = function(location) { + var seg = _findSegmentForLocation(location, absolute); + return seg.segment && seg.segment.gradientAtPoint(seg.proportion, absolute) || 0; + }; + + this.pointAlongPathFrom = function(location, distance, absolute) { + var seg = _findSegmentForLocation(location, absolute); + // TODO what happens if this crosses to the next segment? + return seg.segment && seg.segment.pointAlongPathFrom(seg.proportion, distance, false) || [0,0]; + }; + + this.compute = function(params) { + if (!edited) + paintInfo = _prepareCompute.call(this, params); + + _clearSegments(); + this._compute(paintInfo, params); + this.x = paintInfo.points[0]; + this.y = paintInfo.points[1]; + this.w = paintInfo.points[2]; + this.h = paintInfo.points[3]; + this.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) + }; + }; + jsPlumbUtil.extend(jsPlumb.Connectors.AbstractConnector, AbstractComponent); + + /** + * Class: Connectors.Straight + * The Straight connector draws a simple straight line between the two anchor points. It does not have any constructor parameters. + */ + var Straight = jsPlumb.Connectors.Straight = function() { + this.type = "Straight"; + var _super = jsPlumb.Connectors.AbstractConnector.apply(this, arguments); + + this._compute = function(paintInfo, _) { + _super.addSegment(this, "Straight", {x1:paintInfo.sx, y1:paintInfo.sy, x2:paintInfo.startStubX, y2:paintInfo.startStubY}); + _super.addSegment(this, "Straight", {x1:paintInfo.startStubX, y1:paintInfo.startStubY, x2:paintInfo.endStubX, y2:paintInfo.endStubY}); + _super.addSegment(this, "Straight", {x1:paintInfo.endStubX, y1:paintInfo.endStubY, x2:paintInfo.tx, y2:paintInfo.ty}); + }; + }; + jsPlumbUtil.extend(jsPlumb.Connectors.Straight, jsPlumb.Connectors.AbstractConnector); + jsPlumb.registerConnectorType(Straight, "Straight"); + + /** + * 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. + * + */ + var Bezier = function(params) { + params = params || {}; + + var _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) { + // 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 = sourceEndpoint.anchor.getOrientation(sourceEndpoint), + too = targetEndpoint.anchor.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 = this._findControlPoint([_sx, _sy], sp, tp, p.sourceEndpoint, p.targetEndpoint), + _CP2 = this._findControlPoint([_tx, _ty], tp, sp, p.targetEndpoint, p.sourceEndpoint); + + _super.addSegment(this, "Bezier", { + x1:_sx, y1:_sy, x2:_tx, y2:_ty, + cp1x:_CP[0], cp1y:_CP[1], cp2x:_CP2[0], cp2y:_CP2[1] + }); + }; + }; + jsPlumbUtil.extend(Bezier, jsPlumb.Connectors.AbstractConnector); + jsPlumb.registerConnectorType(Bezier, "Bezier"); + + // ********************************* END OF CONNECTOR TYPES ******************************************************************* + + // ********************************* ENDPOINT TYPES ******************************************************************* + + jsPlumb.Endpoints.AbstractEndpoint = function(params) { + AbstractComponent.apply(this, arguments); + var compute = this.compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { + var out = this._compute.apply(this, arguments); + this.x = out[0]; + this.y = out[1]; + this.w = out[2]; + this.h = out[3]; + this.bounds.minX = this.x; + this.bounds.minY = this.y; + this.bounds.maxX = this.x + this.w; + this.bounds.maxY = this.y + this.h; + return out; + }; + return { + compute:compute, + cssClass:params.cssClass + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.AbstractEndpoint, AbstractComponent); + + /** + * 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 _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) { + this.radius = endpointStyle.radius || this.radius; + var x = anchorPoint[0] - this.radius, + y = anchorPoint[1] - this.radius, + w = this.radius * 2, + h = this.radius * 2; + + if (endpointStyle.strokeStyle) { + var lw = endpointStyle.lineWidth || 1; + x -= lw; + y -= lw; + w += (lw * 2); + h += (lw * 2); + } + return [ x, y, w, h, this.radius ]; + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.Dot, jsPlumb.Endpoints.AbstractEndpoint); + + /** + * 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 _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 || this.width, + height = endpointStyle.height || this.height, + x = anchorPoint[0] - (width/2), + y = anchorPoint[1] - (height/2); + + return [ x, y, width, height]; + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.Rectangle, jsPlumb.Endpoints.AbstractEndpoint); + + + var DOMElementEndpoint = function(params) { + jsPlumb.DOMElementComponent.apply(this, arguments); + this._jsPlumb.displayElements = [ ]; + }; + jsPlumbUtil.extend(DOMElementEndpoint, jsPlumb.DOMElementComponent, { + // jsPlumb.Endpoints.AbstractEndpoint + getDisplayElements : function() { + return this._jsPlumb.displayElements; + }, + appendDisplayElement : function(el) { + this._jsPlumb.displayElements.push(el); + } + }); + + /** + * Class: Endpoints.Image + * Draws an image as the Endpoint. + */ + /** + * Function: Constructor + * + * Parameters: + * + * src - location of the image to use. + + TODO: multiple references to self. not sure quite how to get rid of them entirely. perhaps self = null in the cleanup + function will suffice + + TODO this class still leaks memory. + + */ + jsPlumb.Endpoints.Image = function(params) { + + this.type = "Image"; + DOMElementEndpoint.apply(this, arguments); + jsPlumb.Endpoints.AbstractEndpoint.apply(this, arguments); + + var _onload = params.onload, + src = params.src || params.url, + parent = params.parent, + clazz = params.cssClass ? " " + params.cssClass : ""; + + this._jsPlumb.img = new Image(); + this._jsPlumb.ready = false; + this._jsPlumb.initialized = false; + this._jsPlumb.deleted = false; + this._jsPlumb.widthToUse = params.width; + this._jsPlumb.heightToUse = params.height; + this._jsPlumb.endpoint = params.endpoint; + + this._jsPlumb.img.onload = function() { + // check we weren't actually discarded before use (in fact mostly happens in tests) + if (this._jsPlumb != null) { + this._jsPlumb.ready = true; + this._jsPlumb.widthToUse = this._jsPlumb.widthToUse || this._jsPlumb.img.width; + this._jsPlumb.heightToUse = this._jsPlumb.heightToUse || this._jsPlumb.img.height; + if (_onload) { + _onload(this); + } + } + }.bind(this); + + /* + 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. + */ + this._jsPlumb.endpoint.setImage = function(_img, onload) { + var s = _img.constructor == String ? _img : _img.src; + _onload = onload; + this._jsPlumb.img.src = s; + + if (this.canvas != null) + this.canvas.setAttribute("src", this._jsPlumb.img.src); + }.bind(this); + + this._jsPlumb.endpoint.setImage(src, _onload); + /* + var s = src.constructor == String ? src : src.src; + //_onload = onload; + this._jsPlumb.img.src = src; + + if (this.canvas != null) + this.canvas.setAttribute("src", this._jsPlumb.img.src); + // }.bind(this); + + //this._jsPlumb.endpoint.setImage(src, _onload);*/ + + this._compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { + this.anchorPoint = anchorPoint; + if (this._jsPlumb.ready) return [anchorPoint[0] - this._jsPlumb.widthToUse / 2, anchorPoint[1] - this._jsPlumb.heightToUse / 2, + this._jsPlumb.widthToUse, this._jsPlumb.heightToUse]; + else return [0,0,0,0]; + }; + + this.canvas = document.createElement("img"); + this.canvas.style.margin = 0; + this.canvas.style.padding = 0; + this.canvas.style.outline = 0; + this.canvas.style.position = "absolute"; + this.canvas.className = this._jsPlumb.instance.endpointClass + clazz; + if (this._jsPlumb.widthToUse) this.canvas.setAttribute("width", this._jsPlumb.widthToUse); + if (this._jsPlumb.heightToUse) this.canvas.setAttribute("height", this._jsPlumb.heightToUse); + this._jsPlumb.instance.appendElement(this.canvas, parent); + this.attachListeners(this.canvas, this); + + this.actuallyPaint = function(d, style, anchor) { + if (!this._jsPlumb.deleted) { + if (!this._jsPlumb.initialized) { + this.canvas.setAttribute("src", this._jsPlumb.img.src); + this.appendDisplayElement(this.canvas); + this._jsPlumb.initialized = true; + } + var x = this.anchorPoint[0] - (this._jsPlumb.widthToUse / 2), + y = this.anchorPoint[1] - (this._jsPlumb.heightToUse / 2); + jsPlumbUtil.sizeElement(this.canvas, x, y, this._jsPlumb.widthToUse, this._jsPlumb.heightToUse); + } + }; + + this.paint = function(style, anchor) { + if (this._jsPlumb != null) { // may have been deleted + if (this._jsPlumb.ready) { + this.actuallyPaint(style, anchor); + } + else { + window.setTimeout(function() { + this.paint(style, anchor); + }.bind(this), 200); + } + } + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.Image, [ DOMElementEndpoint, jsPlumb.Endpoints.AbstractEndpoint ], { + cleanup : function() { + this._jsPlumb.deleted = true; + jsPlumbUtil.removeElement(this.canvas); + this.canvas = null; + } + }); + + /* + * 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 _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]; + }; + + this.canvas = document.createElement("div"); + this.canvas.style.display = "block"; + this.canvas.style.width = "1px"; + this.canvas.style.height = "1px"; + this.canvas.style.background = "transparent"; + this.canvas.style.position = "absolute"; + this.canvas.className = this._jsPlumb.endpointClass; + jsPlumb.appendElement(this.canvas, params.parent); + + this.paint = function(style, anchor) { + jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.Blank, [jsPlumb.Endpoints.AbstractEndpoint, DOMElementEndpoint], { + cleanup:function() { + if (this.canvas) { + this.canvas.parentNode.removeChild(this.canvas); + } + } + }); + + /* + * 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 _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) { + this.visible = true; + 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.; + }; + AbstractOverlay.prototype = { + cleanup:function() { + this.component = null; + this.canvas = null; + this.endpointLoc = null; + }, + setVisible : function(val) { + this.visible = val; + // TODO this is only actually necessary for canvas. so, the Canvas overlay should + // override setVisible and call this. + //this.component.repaint(); + }, + isVisible : function() { return this.visible; }, + hide : function() { this.setVisible(false); }, + show : function() { this.setVisible(true); }, + + incrementLocation : function(amount) { + this.loc += amount; + this.component.repaint(); + }, + setLocation : function(l) { + this.loc = l; + this.component.repaint(); + }, + getLocation : function() { + return this.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 _ju = jsPlumbUtil, _jg = jsPlumbGeom; + + 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 (_ju.isString(this.loc) || this.loc > 1 || this.loc < 0) { + var l = parseInt(this.loc, 10), + fromLoc = this.loc < 0 ? 1 : 0; + hxy = component.pointAlongPathFrom(fromLoc, l, false); + mid = component.pointAlongPathFrom(fromLoc, l - (direction * this.length / 2), false); + txy = _jg.pointOnLine(hxy, mid, this.length); + } + else if (this.loc == 1) { + hxy = component.pointOnPath(this.loc); + mid = component.pointAlongPathFrom(this.loc, -(this.length)); + txy = _jg.pointOnLine(hxy, mid, this.length); + + if (direction == -1) { + var _ = txy; + txy = hxy; + hxy = _; + } + } + else if (this.loc === 0) { + txy = component.pointOnPath(this.loc); + mid = component.pointAlongPathFrom(this.loc, this.length); + hxy = _jg.pointOnLine(txy, mid, this.length); + if (direction == -1) { + var __ = txy; + txy = hxy; + hxy = __; + } + } + else { + hxy = component.pointAlongPathFrom(this.loc, direction * this.length / 2); + mid = component.pointOnPath(this.loc); + txy = _jg.pointOnLine(hxy, mid, this.length); + } + + tail = _jg.perpendicularLineTo(hxy, txy, this.width); + cxy = _jg.pointOnLine(hxy, txy, foldback * this.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}; + }; + }; + jsPlumbUtil.extend(jsPlumb.Overlays.Arrow, AbstractOverlay); + + /* + * 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"; + }; + jsPlumbUtil.extend(jsPlumb.Overlays.PlainArrow, jsPlumb.Overlays.Arrow); + + /* + * 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"; + }; + jsPlumbUtil.extend(jsPlumb.Overlays.Diamond, jsPlumb.Overlays.Arrow); + + var _getDimensions = function(component) { + if (component._jsPlumb.cachedDimensions == null) + component._jsPlumb.cachedDimensions = component.getDimensions(); + return component._jsPlumb.cachedDimensions; + }; + + // 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 jpcl = jsPlumb.CurrentLibrary; + this.id = params.id; + this._jsPlumb.div = null; + this._jsPlumb.initialised = false; + this._jsPlumb.component = params.component; + this._jsPlumb.cachedDimensions = null; + this._jsPlumb.create = params.create; + + this.getElement = function() { + if (this._jsPlumb.div == null) { + var div = this._jsPlumb.div = jpcl.getDOMElement(this._jsPlumb.create(this._jsPlumb.component)); + div.style.position = "absolute"; + var clazz = params._jsPlumb.overlayClass + " " + + (this.cssClass ? this.cssClass : + params.cssClass ? params.cssClass : ""); + div.className = clazz; + this._jsPlumb.instance.appendElement(div, this._jsPlumb.component.parent); + this._jsPlumb.instance.getId(div); + this.attachListeners(div, this); + this.canvas = div; + } + return this._jsPlumb.div; + }; + + /* + this.paint = function(p, containerExtents) { + if (!this._jsPlumb.initialised) { + this.getElement(); + p.component.appendDisplayElement(this._jsPlumb.div); + this.attachListeners(this._jsPlumb.div, p.component); + this._jsPlumb.initialised = true; + } + this._jsPlumb.div.style.left = (p.component.x + p.d.minx) + "px"; + this._jsPlumb.div.style.top = (p.component.y + p.d.miny) + "px"; + };*/ + + this.draw = function(component, currentConnectionPaintStyle) { + var td = _getDimensions(this); + if (td != null && td.length == 2) { + var cxy = {x:0,y:0}; + if (component.pointOnPath) { + var loc = this.loc, absolute = false; + if (jsPlumbUtil.isString(this.loc) || this.loc < 0 || this.loc > 1) { + loc = parseInt(this.loc, 10); + absolute = true; + } + cxy = component.pointOnPath(loc, absolute); // a connection + } + else { + var locToUse = this.loc.constructor == Array ? this.loc : this.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}; + }; + }; + jsPlumbUtil.extend(AbstractDOMOverlay, [jsPlumb.DOMElementComponent, AbstractOverlay], { + getDimensions : function() { + return jsPlumb.CurrentLibrary.getSize(jsPlumb.CurrentLibrary.getElementObject(this.getElement())); + }, + setVisible : function(state) { + this._jsPlumb.div.style.display = state ? "block" : "none"; + }, + /* + * 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. + */ + clearCachedDimensions : function() { + this._jsPlumb.cachedDimensions = null; + }, + cleanup : function() { + if (this._jsPlumb.div != null) + jsPlumb.CurrentLibrary.removeElement(this._jsPlumb.div); + }, + computeMaxSize : function() { + var td = _getDimensions(this); + return Math.max(td[0], td[1]); + }, + reattachListeners : function(connector) { + if (this._jsPlumb.div) { + this.reattachListenersForElement(this._jsPlumb.div, this, connector); + } + }, + paint : function(p, containerExtents) { + if (!this._jsPlumb.initialised) { + this.getElement(); + p.component.appendDisplayElement(this._jsPlumb.div); + this.attachListeners(this._jsPlumb.div, p.component); + this._jsPlumb.initialised = true; + } + this._jsPlumb.div.style.left = (p.component.x + p.d.minx) + "px"; + this._jsPlumb.div.style.top = (p.component.y + p.d.miny) + "px"; + } + }); + + /* + * 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); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.Custom, AbstractDOMOverlay); + + 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 = jsPlumbGeom.pointOnLine(head, mid, self.length), + tailLine = jsPlumbGeom.perpendicularLineTo(head, tail, 40), + headLine = jsPlumbGeom.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 + + */ + /* + * 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) { + this.labelStyle = params.labelStyle; + + var labelWidth = null, labelHeight = null, labelText = null, labelPadding = null; + this.cssClass = this.labelStyle != null ? this.labelStyle.cssClass : null; + var p = jsPlumb.extend({ + create : function() { + return document.createElement("div"); + }}, params); + jsPlumb.Overlays.Custom.call(this, p); + this.type = "Label"; + this.label = params.label || ""; + this.labelText = null; + if (this.labelStyle) { + var el = this.getElement(); + this.labelStyle.font = this.labelStyle.font || "12px sans-serif"; + el.style.font = this.labelStyle.font; + el.style.color = this.labelStyle.color || "black"; + if (this.labelStyle.fillStyle) el.style.background = this.labelStyle.fillStyle; + if (this.labelStyle.borderWidth > 0) { + var dStyle = this.labelStyle.borderStyle ? this.labelStyle.borderStyle : "black"; + el.style.border = this.labelStyle.borderWidth + "px solid " + dStyle; + } + if (this.labelStyle.padding) el.style.padding = this.labelStyle.padding; + } + + }; + jsPlumbUtil.extend(jsPlumb.Overlays.Label, jsPlumb.Overlays.Custom, { + cleanup:function() { + this.div = null; + this.label = null; + this.labelText = null; + this.cssClass = null; + this.labelStyle = null; + }, + getLabel : function() { + return this.label; + }, + /* + * 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. + */ + setLabel : function(l) { + this.label = l; + this.labelText = null; + this.clearCachedDimensions(); + this.update(); + this.component.repaint(); + }, + getDimensions : function() { + this.update(); + return AbstractDOMOverlay.prototype.getDimensions.apply(this, arguments); + }, + update : function() { + if (typeof this.label == "function") { + var lt = this.label(this); + this.getElement().innerHTML = lt.replace(/\r\n/g, "<br/>"); + } + else { + if (this.labelText == null) { + this.labelText = this.label; + this.getElement().innerHTML = this.labelText.replace(/\r\n/g, "<br/>"); + } + } + } + }); + + // ********************************* END OF OVERLAY DEFINITIONS *********************************************************************** + +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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(a)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). + * alwaysRespectStubs - defaults to false. whether or not the connectors should always draw the stub, or, if the two elements + are in close proximity to each other (closer than the sum of the two stubs), to adjust the stubs. + */ + var Flowchart = function(params) { + this.type = "Flowchart"; + params = params || {}; + params.stub = params.stub == null ? 30 : params.stub; + var self = this, + _super = jsPlumb.Connectors.AbstractConnector.apply(this, arguments), + midpoint = params.midpoint == null ? 0.5 : params.midpoint, + points = [], segments = [], + grid = params.grid, + alwaysRespectStubs = params.alwaysRespectStubs, + userSuppliedSegments = null, + lastx = null, lasty = null, lastOrientation, + cornerRadius = params.cornerRadius != null ? params.cornerRadius : 0, + sgn = function(n) { return n < 0 ? -1 : n === 0 ? 0 : 1; }, + /** + * helper method to add a segment. + */ + addSegment = function(segments, x, y, paintInfo) { + if (lastx == x && lasty == y) return; + var lx = lastx == null ? paintInfo.sx : lastx, + ly = lasty == null ? paintInfo.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(conn, 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(conn, "Straight", { + x1:current[0], y1:current[1], x2:current[2], y2:current[3] + }); + + _super.addSegment(conn, "Arc", { + r:radiusToUse, + x1:current[2], + y1:current[3], + x2:next[0], + y2:next[1], + cx:cx, + cy:cy, + ac:ac + }); + } + else { + // dx + dy are used to adjust for line width. + var dx = (current[2] == current[0]) ? 0 : (current[2] > current[0]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2), + dy = (current[3] == current[1]) ? 0 : (current[3] > current[1]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2); + _super.addSegment(conn, "Straight", { + x1:current[0]- dx, y1:current[1]-dy, x2:current[2] + dx, y2:current[3] + dy + }); + } + current = next; + } + // last segment + _super.addSegment(conn, "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(this, 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); + + var findClearedLine = function(start, mult, anchorPos, dimension) { + return start + (mult * (( 1 - anchorPos) * dimension) + _super.maxStub); + }, + orientations = { x:[ 0, 1 ], y:[ 1, 0 ] }, + commonStubCalculator = function(axis) { + return [ paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY ]; + }, + stubCalculators = { + perpendicular:commonStubCalculator, + orthogonal:commonStubCalculator, + opposite:function(axis) { + var pi = paintInfo, + idx = axis == "x" ? 0 : 1, + areInProximity = { + "x":function() { + return ( (pi.so[idx] == 1 && ( + ( (pi.startStubX > pi.endStubX) && (pi.tx > pi.startStubX) ) || + ( (pi.sx > pi.endStubX) && (pi.tx > pi.sx))))) || + + ( (pi.so[idx] == -1 && ( + ( (pi.startStubX < pi.endStubX) && (pi.tx < pi.startStubX) ) || + ( (pi.sx < pi.endStubX) && (pi.tx < pi.sx))))); + }, + "y":function() { + return ( (pi.so[idx] == 1 && ( + ( (pi.startStubY > pi.endStubY) && (pi.ty > pi.startStubY) ) || + ( (pi.sy > pi.endStubY) && (pi.ty > pi.sy))))) || + + ( (pi.so[idx] == -1 && ( + ( (pi.startStubY < pi.endStubY) && (pi.ty < pi.startStubY) ) || + ( (pi.sy < pi.endStubY) && (pi.ty < pi.sy))))); + } + }; + + if (!alwaysRespectStubs && areInProximity[axis]()) { + return { + "x":[(paintInfo.sx + paintInfo.tx) / 2, paintInfo.startStubY, (paintInfo.sx + paintInfo.tx) / 2, paintInfo.endStubY], + "y":[paintInfo.startStubX, (paintInfo.sy + paintInfo.ty) / 2, paintInfo.endStubX, (paintInfo.sy + paintInfo.ty) / 2] + }[axis]; + } + else { + return [ paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY ]; + } + } + }, + lineCalculators = { + perpendicular : function(axis, ss, oss, es, oes) { + var pi = paintInfo, + 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:[ [ pi.startStubX, pi.endStubX ] , null, [ pi.endStubX, pi.startStubX ] ], + y:[ [ pi.startStubY, pi.endStubY ] , null, [ pi.endStubY, pi.startStubY ] ] + }, + midLines = { + x:[ [ midx, pi.startStubY ], [ midx, pi.endStubY ] ], + y:[ [ pi.startStubX, midy ], [ pi.endStubX, midy ] ] + }, + linesToEnd = { + x:[ [ pi.endStubX, pi.startStubY ] ], + y:[ [ pi.startStubX, pi.endStubY ] ] + }, + startToEnd = { + x:[ [ pi.startStubX, pi.endStubY ], [ pi.endStubX, pi.endStubY ] ], + y:[ [ pi.endStubX, pi.startStubY ], [ pi.endStubX, pi.endStubY ] ] + }, + startToMidToEnd = { + x:[ [ pi.startStubX, midy ], [ pi.endStubX, midy ], [ pi.endStubX, pi.endStubY ] ], + y:[ [ midx, pi.startStubY ], [ midx, pi.endStubY ], [ pi.endStubX, pi.endStubY ] ] + }, + otherStubs = { + x:[ pi.startStubY, pi.endStubY ], + y:[ pi.startStubX, pi.endStubX ] + }, + soIdx = orientations[axis][0], toIdx = orientations[axis][1], + _so = pi.so[soIdx] + 1, + _to = pi.to[toIdx] + 1, + otherFlipped = (pi.to[toIdx] == -1 && (otherStubs[axis][1] < otherStubs[axis][0])) || (pi.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 (pi.segment == segmentIndexes[3] || (pi.segment == segmentIndexes[2] && otherFlipped)) { + return midLines[axis]; + } + else if (pi.segment == segmentIndexes[2] && stub2 < stub1) { + return linesToEnd[axis]; + } + else if ((pi.segment == segmentIndexes[2] && stub2 >= stub1) || (pi.segment == segmentIndexes[1] && !otherFlipped)) { + return startToMidToEnd[axis]; + } + else if (pi.segment == segmentIndexes[0] || (pi.segment == segmentIndexes[1] && otherFlipped)) { + return startToEnd[axis]; + } + }, + orthogonal : function(axis, startStub, otherStartStub, endStub, otherEndStub) { + var pi = paintInfo, + extent = { + "x":pi.so[0] == -1 ? Math.min(startStub, endStub) : Math.max(startStub, endStub), + "y":pi.so[1] == -1 ? Math.min(startStub, endStub) : Math.max(startStub, endStub) + }[axis]; + + return { + "x":[ [ extent, otherStartStub ],[ extent, otherEndStub ], [ endStub, otherEndStub ] ], + "y":[ [ otherStartStub, extent ], [ otherEndStub, extent ], [ otherEndStub, endStub ] ] + }[axis]; + }, + opposite : function(axis, ss, oss, es, oes) { + var pi = paintInfo, + otherAxis = {"x":"y","y":"x"}[axis], + dim = {"x":"height","y":"width"}[axis], + comparator = pi["is" + axis.toUpperCase() + "GreaterThanStubTimes2"]; + + if (params.sourceEndpoint.elementId == params.targetEndpoint.elementId) { + var _val = oss + ((1 - params.sourceEndpoint.anchor[otherAxis]) * params.sourceInfo[dim]) + _super.maxStub; + return { + "x":[ [ ss, _val ], [ es, _val ] ], + "y":[ [ _val, ss ], [ _val, es ] ] + }[axis]; + + } + else if (!comparator || (pi.so[idx] == 1 && ss > es) || (pi.so[idx] == -1 && ss < es)) { + return { + "x":[[ ss, midy ], [ es, midy ]], + "y":[[ midx, ss ], [ midx, es ]] + }[axis]; + } + else if ((pi.so[idx] == 1 && ss < es) || (pi.so[idx] == -1 && ss > es)) { + return { + "x":[[ midx, pi.sy ], [ midx, pi.ty ]], + "y":[[ pi.sx, midy ], [ pi.tx, midy ]] + }[axis]; + } + } + }; + + var stubs = stubCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis), + idx = paintInfo.sourceAxis == "x" ? 0 : 1, + oidx = paintInfo.sourceAxis == "x" ? 1 : 0, + ss = stubs[idx], + oss = stubs[oidx], + es = stubs[idx + 2], + oes = stubs[oidx + 2]; + + // add the start stub segment. + addSegment(segments, stubs[0], stubs[1], paintInfo); + + // compute the rest of the line + var p = lineCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis, ss, oss, es, oes); + if (p) { + for (var i = 0; i < p.length; i++) { + addSegment(segments, p[i][0], p[i][1], paintInfo); + } + } + + // line to end stub + addSegment(segments, stubs[2], stubs[3], paintInfo); + + // end stub to end + addSegment(segments, paintInfo.tx, paintInfo.ty, paintInfo); + + writeSegments(this, 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]); + } + }; + }; + + jsPlumbUtil.extend(Flowchart, jsPlumb.Connectors.AbstractConnector); + jsPlumb.registerConnectorType(Flowchart, "Flowchart"); +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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(a)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 = [], xInt, yInt; + + // try top face + // the equation of the top face is y = (0 * x) + b; y = b. + 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 + yInt = (this.m * (x + w)) + this.b; + if (yInt >= y && yInt <= (y + h)) results.push([ (yInt - this.b) / this.m, yInt ]); + + // bottom face + 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 + 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. + */ + var 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(this, "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(this, "Arc", { + loopback:true, + 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 + }); + } + }; + }; + jsPlumb.registerConnectorType(StateMachine, "StateMachine"); +})(); + +/* + // 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]); +// } +// } + // } + // } + //} + */ + +;(function() { + + var 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) { + // 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 = sourceEndpoint.anchor.getOrientation(sourceEndpoint), + too = targetEndpoint.anchor.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), + _CP2 = self._findControlPoint([_tx, _ty], tp, sp, p.targetEndpoint, p.sourceEndpoint); + + _super.addSegment(this, "Bezier", { + x1:_sx, y1:_sy, x2:_tx, y2:_ty, + cp1x:_CP[0], cp1y:_CP[1], cp2x:_CP2[0], cp2y:_CP2[1] + }); + }; + }; + + jsPlumb.registerConnectorType(Bezier, "Bezier"); + +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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.2. + * 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() { + + +// ********************************* 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 = window.CanvasMouseAdapter = function() { + var self = this; + this.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; + }; + }; + jsPlumbUtil.extend(CanvasMouseAdapter, [ jsPlumb.jsPlumbUIComponent, jsPlumbUtil.EventGenerator ]); + + var _newCanvas = function(params) { + var canvas = document.createElement("canvas"); + params._jsPlumb.instance.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.instance.getId(canvas, params.uuid); + if (params.tooltip) canvas.setAttribute("title", params.tooltip); + + return canvas; + }; + + var CanvasComponent = window.CanvasComponent = function(params) { + CanvasMouseAdapter.apply(this, arguments); + + var displayElements = [ ]; + this.getDisplayElements = function() { return displayElements; }; + this.appendDisplayElement = function(el) { displayElements.push(el); }; + }; + jsPlumbUtil.extend(CanvasComponent, CanvasMouseAdapter, { + setVisible:function(state) { + this.canvas.style.display = state ? "block" : "none"; + } + }); + + 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, dx, dy) { + ({ + "Straight":function(segment, ctx, style, dx, dy) { + var d = segment.params; + ctx.save(); + maybeMakeGradient(ctx, style, function() { return ctx.createLinearGradient(d.x1, d.y1, d.x2, d.y2); }); + ctx.beginPath(); + ctx.translate(dx, dy); + 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(); + + ctx.restore(); + }, + "Bezier":function(segment, ctx, style, dx, dy) { + var d = segment.params; + ctx.save(); + maybeMakeGradient(ctx, style, function() { return ctx.createLinearGradient(d.x2 + dx, d.y2 + dy, d.x1 + dx, d.y1 + dy); }); + ctx.beginPath(); + ctx.translate(dx, dy); + ctx.moveTo(d.x1, d.y1); + ctx.bezierCurveTo(d.cp1x, d.cp1y, d.cp2x, d.cp2y, d.x2, d.y2); + ctx.stroke(); + ctx.restore(); + }, + "Arc":function(segment, ctx, style, dx, dy) { + var d = segment.params; + ctx.save(); + ctx.beginPath(); + ctx.translate(dx, dy); + ctx.arc(d.cx, d.cy, d.r, segment.startAngle, segment.endAngle, d.ac); + ctx.stroke(); + ctx.restore(); + } + })[segment.type](segment, ctx, style, dx, dy); + }; + + /** + * Class:CanvasConnector + * Superclass for Canvas Connector renderers. + */ + var CanvasConnector = jsPlumb.ConnectorRenderers.canvas = function(params) { + CanvasComponent.apply(this, arguments); + + var _paintOneStyle = function(aStyle, dx, dy) { + this.ctx.save(); + jsPlumb.extend(this.ctx, aStyle); + + var segments = this.getSegments(); + for (var i = 0; i < segments.length; i++) { + segmentRenderer(segments[i], this.ctx, aStyle, dx, dy); + } + this.ctx.restore(); + }.bind(this); + + var clazz = this._jsPlumb.instance.connectorClass + " " + (params.cssClass || ""); + this.canvas = _newCanvas({ + "class":clazz, + _jsPlumb:this._jsPlumb, + parent:params.parent + }); + this.ctx = this.canvas.getContext("2d"); + + this.appendDisplayElement(this.canvas); + + this.paint = function(style, anchor, extents) { + if (style != null) { + + var xy = [ this.x, this.y ], wh = [ this.w, this.h ], p, + dx = 0, dy = 0; + + if (extents != null) { + if (extents.xmin < 0) { + xy[0] += extents.xmin; + dx = -extents.xmin; + } + if (extents.ymin < 0) { + xy[1] += extents.ymin; + dy = -extents.ymin; + } + wh[0] = extents.xmax + ((extents.xmin < 0) ? -extents.xmin : 0); + wh[1] = extents.ymax + ((extents.ymin < 0) ? -extents.ymin : 0); + } + + this.translateX = dx; + this.translateY = dy; + + jsPlumbUtil.sizeElement(this.canvas, xy[0], xy[1], wh[0], wh[1]); + + if (style.outlineColor != null) { + var outlineWidth = style.outlineWidth || 1, + outlineStrokeWidth = style.lineWidth + (2 * outlineWidth), + outlineStyle = { + strokeStyle:style.outlineColor, + lineWidth:outlineStrokeWidth + }; + _paintOneStyle(outlineStyle, dx, dy); + } + _paintOneStyle(style, dx, dy); + } + }; + }; + jsPlumbUtil.extend(CanvasConnector, CanvasComponent); + + + /** + * Class:CanvasEndpoint + * Superclass for Canvas Endpoint renderers. + */ + var CanvasEndpoint = function(params) { + CanvasComponent.apply(this, arguments); + var clazz = this._jsPlumb.instance.endpointClass + " " + (params.cssClass || ""), + canvasParams = { + "class":clazz, + _jsPlumb:this._jsPlumb, + parent:params.parent, + tooltip:self.tooltip + }; + this.canvas = _newCanvas(canvasParams); + this.ctx = this.canvas.getContext("2d"); + + this.appendDisplayElement(this.canvas); + + this.paint = function(style, anchor, extents) { + jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); + if (style.outlineColor != null) { + var outlineWidth = style.outlineWidth || 1, + outlineStrokeWidth = style.lineWidth + (2 * outlineWidth); + var outlineStyle = { + strokeStyle:style.outlineColor, + lineWidth:outlineStrokeWidth + }; + } + + this._paint.apply(this, arguments); + }; + }; + jsPlumbUtil.extend(CanvasEndpoint, CanvasComponent); + + 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, 10); } + catch(e) { + if (value.substring(value.length - 1) == '%') + return parseInt(value.substring(0, value - 1), 10); + } + }, + calculateAdjustments = function(gradient) { + var offsetAdjustment = self.defaultOffset, innerRadius = self.defaultInnerRadius; + if (gradient.offset) offsetAdjustment = parseValue(gradient.offset); + if (gradient.innerRadius) innerRadius = parseValue(gradient.innerRadius); + return [offsetAdjustment, innerRadius]; + }; + this._paint = function(style) { + if (style != null) { + var ctx = self.canvas.getContext('2d'), + orientation = params.endpoint.anchor.getOrientation(params.endpoint); + + 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(self.radius, self.radius, self.radius, self.radius + xAdjust, self.radius + 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.translate(dx, dy); + ctx.arc(self.radius, self.radius, self.radius, 0, Math.PI*2, true); + ctx.closePath(); + if (style.fillStyle || style.gradient) ctx.fill(); + if (style.strokeStyle) ctx.stroke(); + } + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Dot, [ jsPlumb.Endpoints.Dot, CanvasEndpoint ]); + + jsPlumb.Endpoints.canvas.Rectangle = function(params) { + + var self = this; + jsPlumb.Endpoints.Rectangle.apply(this, arguments); + CanvasEndpoint.apply(this, arguments); + + this._paint = function(style) { + + var ctx = self.canvas.getContext("2d"), + orientation = params.endpoint.anchor.getOrientation(params.endpoint); + + 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 ? self.h : orientation[1] === 0 ? self.h / 2 : 0; + var y2 = orientation[1] == -1 ? self.h : orientation[1] === 0 ? self.h / 2 : 0; + var x1 = orientation[0] == 1 ? self.w : orientation[0] === 0 ? self.w / 2 : 0; + var x2 = orientation[0] == -1 ? self.w : orientation[0] === 0 ? self.w / 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, self.w, self.h); + ctx.closePath(); + if (style.fillStyle || style.gradient) ctx.fill(); + if (style.strokeStyle) ctx.stroke(); + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Rectangle, [ jsPlumb.Endpoints.Rectangle, CanvasEndpoint ]); + + jsPlumb.Endpoints.canvas.Triangle = function(params) { + + var self = this; + jsPlumb.Endpoints.Triangle.apply(this, arguments); + CanvasEndpoint.apply(this, arguments); + + this._paint = function(style) { + var ctx = self.canvas.getContext('2d'), + offsetX = 0, offsetY = 0, angle = 0, + orientation = params.endpoint.anchor.getOrientation(params.endpoint); + + if( orientation[0] == 1 ) { + offsetX = self.width; + offsetY = self.height; + angle = 180; + } + if( orientation[1] == -1 ) { + offsetX = self.width; + angle = 90; + } + if( orientation[1] == 1 ) { + offsetY = self.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(self.width/2, self.height/2); + ctx.lineTo(0, self.height); + ctx.closePath(); + if (style.fillStyle || style.gradient) ctx.fill(); + if (style.strokeStyle) ctx.stroke(); + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Triangle, [ jsPlumb.Endpoints.Triangle, CanvasEndpoint ]); + + /* + * 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; + +// ********************************* 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); + }; + jsPlumbUtil.extend(CanvasOverlay, jsPlumb.jsPlumbUIComponent, { + setVisible : function(state) { + this.visible = state; + this.component.repaint(); + } + }); + + var AbstractCanvasArrowOverlay = function(superclass, originalArgs) { + superclass.apply(this, originalArgs); + CanvasOverlay.apply(this, originalArgs); + this.paint = function(params, containerExtents) { + var ctx = params.component.ctx, d = params.d; + + if (d) { + ctx.save(); + ctx.lineWidth = params.lineWidth; + ctx.beginPath(); + ctx.translate(params.component.translateX, params.component.translateY); + 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 (params.strokeStyle) { + ctx.strokeStyle = params.strokeStyle; + ctx.stroke(); + } + if (params.fillStyle) { + ctx.fillStyle = params.fillStyle; + ctx.fill(); + } + ctx.restore(); + } + }; + }; + + jsPlumb.Overlays.canvas.Arrow = function() { + AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.canvas.Arrow, [ jsPlumb.Overlays.Arrow, CanvasOverlay ] ); + + jsPlumb.Overlays.canvas.PlainArrow = function() { + AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.canvas.PlainArrow, [ jsPlumb.Overlays.PlainArrow, CanvasOverlay ] ); + + jsPlumb.Overlays.canvas.Diamond = function() { + AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.canvas.Diamond, [ jsPlumb.Overlays.Diamond, CanvasOverlay ] ); +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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.instance.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 pointerEventsSpec = params.pointerEventsSpec || "all", renderer = {}; + + jsPlumb.jsPlumbUIComponent.apply(this, params.originalArgs); + this.canvas = null;this.path = null;this.svg = null; + + var clazz = params.cssClass + " " + (params.originalArgs[0].cssClass || ""), + svgParams = { + "style":"", + "width":0, + "height":0, + "pointer-events":pointerEventsSpec, + "position":"absolute" + }; + this.svg = _node("svg", svgParams); + if (params.useDivWrapper) { + this.canvas = document.createElement("div"); + this.canvas.style.position = "absolute"; + jsPlumbUtil.sizeElement(this.canvas,0,0,1,1); + this.canvas.className = clazz; + } + else { + _attr(this.svg, { "class":clazz }); + this.canvas = this.svg; + } + + params._jsPlumb.appendElement(this.canvas, params.originalArgs[0].parent); + if (params.useDivWrapper) this.canvas.appendChild(this.svg); + + // TODO this displayElement stuff is common between all components, across all + // renderers. would be best moved to jsPlumbUIComponent. + var displayElements = [ this.canvas ]; + this.getDisplayElements = function() { + return displayElements; + }; + + this.appendDisplayElement = function(el) { + displayElements.push(el); + }; + + this.paint = function(style, anchor, extents) { + if (style != null) { + + var xy = [ this.x, this.y ], wh = [ this.w, this.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) { + jsPlumbUtil.sizeElement(this.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(this.svg, { + "style":p, + "width": wh[0], + "height": wh[1] + }); + } + }; + + return { + renderer:renderer + }; + }; + jsPlumbUtil.extend(SvgComponent, jsPlumb.jsPlumbUIComponent, { + cleanup:function() { + jsPlumbUtil.removeElement(this.canvas); + this.svg = null; + this.canvas = null; + this.path = null; + }, + setVisible:function(v) { + if (this.canvas) { + this.canvas.style.display = v ? "block" : "none"; + } + if (this.bgCanvas) { + this.bgCanvas.style.display = v ? "block" : "none"; + } + } + }); + + /* + * 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 + } ]); + + /*this.pointOnPath = function(location, absolute) { + if (!self.path) return [0,0]; + var p = absolute ? location : location * self.path.getTotalLength(); + return self.path.getPointAtLength(p); + };*/ + + _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 (this.bgPath) this.reattachListenersForElement(this.bgPath, this); + if (this.path) this.reattachListenersForElement(this.path, this); + }; + }; + jsPlumbUtil.extend(jsPlumb.ConnectorRenderers.svg, SvgComponent); + +// ******************************* 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 _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 (this.node == null) { + this.node = this.makeNode(s); + this.svg.appendChild(this.node); + this.attachListeners(this.node, this); + } + else if (this.updateNode != null) { + this.updateNode(this.node); + } + _applyStyles(this.svg, this.node, s, [ this.x, this.y, this.w, this.h ], this); + _pos(this.node, [ this.x, this.y ]); + }.bind(this); + + }; + jsPlumbUtil.extend(SvgEndpoint, SvgComponent, { + reattachListeners : function() { + if (this.node) this.reattachListenersForElement(this.node, this); + } + }); + + /* + * 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.radius + }); + }; + this.updateNode = function(node) { + _attr(node, { + "cx":this.w / 2, + "cy":this.h / 2, + "r":this.radius + }); + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.svg.Dot, [jsPlumb.Endpoints.Dot, SvgEndpoint]); + + /* + * 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 + }); + }; + this.updateNode = function(node) { + _attr(node, { + "width":this.w, + "height":this.h + }); + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.svg.Rectangle, [jsPlumb.Endpoints.Rectangle, SvgEndpoint]); + + /* + * 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; + this.path = null; + this.paint = function(params, containerExtents) { + // only draws on connections, not endpoints. + if (params.component.svg && containerExtents) { + if (this.path == null) { + this.path = _node("path", { + "pointer-events":"all" + }); + params.component.svg.appendChild(this.path); + + this.attachListeners(this.path, params.component); + this.attachListeners(this.path, this); + } + 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(this.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 (this.path) this.reattachListenersForElement(this.path, this); + }; + }; + jsPlumbUtil.extend(AbstractSvgArrowOverlay, [jsPlumb.jsPlumbUIComponent, jsPlumb.Overlays.AbstractOverlay], { + cleanup : function() { + if (this.path != null) jsPlumb.CurrentLibrary.removeElement(this.path); + }, + setVisible:function(v) { + if(this.path != null) (this.path.style.display = (v ? "block" : "none")); + } + }); + + jsPlumb.Overlays.svg.Arrow = function() { + AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.svg.Arrow, [ jsPlumb.Overlays.Arrow, AbstractSvgArrowOverlay ]); + + jsPlumb.Overlays.svg.PlainArrow = function() { + AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.svg.PlainArrow, [ jsPlumb.Overlays.PlainArrow, AbstractSvgArrowOverlay ]); + + jsPlumb.Overlays.svg.Diamond = function() { + AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.svg.Diamond, [ jsPlumb.Overlays.Diamond, AbstractSvgArrowOverlay ]); + + // 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; + }; + }; + jsPlumbUtil.extend(jsPlumb.Overlays.svg.GuideLines, jsPlumb.Overlays.GuideLines); +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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-b… + // http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-… + + 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-… + // 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. + //jsPlumb.CurrentLibrary.getDOMElement(container).appendChild(g); + //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-… + //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.instance); + self.opacityNodes.fill = _node("fill", [0,0,1,1], {opacity:"0.0"}, vml, self._jsPlumb.instance); + }; + 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); + }; + }; + jsPlumbUtil.extend(VmlComponent, jsPlumb.jsPlumbUIComponent, { + cleanup:function() { + if (this.bgCanvas) jsPlumbUtil.removeElement(this.bgCanvas); + jsPlumbUtil.removeElement(this.canvas); + } + }); + + /* + * Base class for Vml connectors. extends VmlComponent. + */ + var VmlConnector = jsPlumb.ConnectorRenderers.vml = function(params) { + this.strokeNode = null; + this.canvas = null; + VmlComponent.apply(this, arguments); + var clazz = this._jsPlumb.instance.connectorClass + (params.cssClass ? (" " + params.cssClass) : ""); + this.paint = function(style) { + if (style !== null) { + + // we need to be at least 1 pixel in each direction, because otherwise coordsize gets set to + // 0 and overlays cannot paint. + this.w = Math.max(this.w, 1); + this.h = Math.max(this.h, 1); + + var segments = this.getSegments(), p = { "path":"" }, + d = [this.x, this.y, this.w, this.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 (this.bgCanvas == null) { + p["class"] = clazz; + p.coordsize = (d[2] * scale) + "," + (d[3] * scale); + this.bgCanvas = _node("shape", d, p, params.parent, this._jsPlumb.instance, true); + _pos(this.bgCanvas, d); + this.appendDisplayElement(this.bgCanvas, true); + this.attachListeners(this.bgCanvas, this); + this.initOpacityNodes(this.bgCanvas, ["stroke"]); + } + else { + p.coordsize = (d[2] * scale) + "," + (d[3] * scale); + _pos(this.bgCanvas, d); + _atts(this.bgCanvas, p); + } + + _applyStyles(this.bgCanvas, outlineStyle, this); + } + //*/ + + if (this.canvas == null) { + p["class"] = clazz; + p.coordsize = (d[2] * scale) + "," + (d[3] * scale); + this.canvas = _node("shape", d, p, params.parent, this._jsPlumb.instance, 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 + + this.appendDisplayElement(this.canvas, true); + this.attachListeners(this.canvas, this); + this.initOpacityNodes(this.canvas, ["stroke"]); + } + else { + p.coordsize = (d[2] * scale) + "," + (d[3] * scale); + _pos(this.canvas, d); + _atts(this.canvas, p); + } + + _applyStyles(this.canvas, style, this, this._jsPlumb.instance); + } + }; + + }; + jsPlumbUtil.extend(VmlConnector, VmlComponent, { + reattachListeners : function() { + if (this.canvas) this.reattachListenersForElement(this.canvas, this); + }, + setVisible:function(v) { + if (this.canvas) { + this.canvas.style.display = v ? "block" : "none"; + } + if (this.bgCanvas) { + this.bgCanvas.style.display = v ? "block" : "none"; + } + } + }); + + /* + * + * Base class for Vml Endpoints. extends VmlComponent. + * + */ + var VmlEndpoint = window.VmlEndpoint = function(params) { + VmlComponent.apply(this, arguments); + this._jsPlumb.vml = null;//, opacityStrokeNode = null, opacityFillNode = null; + this.canvas = document.createElement("div"); + this.canvas.style.position = "absolute"; + this._jsPlumb.clazz = this._jsPlumb.instance.endpointClass + (params.cssClass ? (" " + params.cssClass) : ""); + + // TODO vml endpoint adds class to VML at constructor time. but the addClass method adds VML + // to the enclosing DIV. what to do? seems like it would be better to just target the div. + // HOWEVER...vml connection has no containing div. why not? it feels like it should. + + //var group = _getGroup(params.parent); + //group.appendChild(self.canvas); + params._jsPlumb.appendElement(this.canvas, params.parent); + + this.paint = function(style, anchor) { + var p = { }, vml = this._jsPlumb.vml; + + jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); + if (this._jsPlumb.vml == null) { + p["class"] = this._jsPlumb.clazz; + vml = this._jsPlumb.vml = this.getVml([0,0, this.w, this.h], p, anchor, this.canvas, this._jsPlumb.instance); + this.attachListeners(vml, this); + + this.appendDisplayElement(vml, true); + this.appendDisplayElement(this.canvas, true); + + this.initOpacityNodes(vml, ["fill"]); + } + else { + _pos(vml, [0,0, this.w, this.h]); + _atts(vml, p); + } + + _applyStyles(vml, style, this); + }; + }; + jsPlumbUtil.extend(VmlEndpoint, VmlComponent, { + reattachListeners : function() { + if (this._jsPlumb.vml) this.reattachListenersForElement(this._jsPlumb.vml, this); + } + }); + +// ******************************* 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() { + if (d.loopback) + return "0,0," + _conv(2*d.r) + "," + _conv(2 * d.r); + + 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); }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.vml.Dot, VmlEndpoint); + + 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); }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.vml.Rectangle, VmlEndpoint); + + /* + * 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) { + // only draws for connectors, not endpoints. + if (params.component.canvas && containerExtents) { + var p = {}, d = params.d, connector = params.component; + 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.instance, 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); + }; + }; + jsPlumbUtil.extend(AbstractVmlArrowOverlay, [VmlComponent, jsPlumb.Overlays.AbstractOverlay], { + setVisible : function(state) { + this.canvas.style.display = state ? "block" : "none"; + } + }); + + jsPlumb.Overlays.vml.Arrow = function() { + AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.vml.Arrow, [ jsPlumb.Overlays.Arrow, AbstractVmlArrowOverlay ]); + + jsPlumb.Overlays.vml.PlainArrow = function() { + AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.vml.PlainArrow, [ jsPlumb.Overlays.PlainArrow, AbstractVmlArrowOverlay ]); + + jsPlumb.Overlays.vml.Diamond = function() { + AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.vml.Diamond, [ jsPlumb.Overlays.Diamond, AbstractVmlArrowOverlay ]); + +// ******************************* /vml overlays ***************************************************** + +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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); + }, + + destroyDraggable : function(el) { + // TODO + var id = jsPlumb.getId(el), d = _draggablesById[id]; + if (d) { + for (var i = 0; i < d.length; i++) + d[i].detach(); + + delete _draggablesById[id]; + } + }, + + destroyDroppable : function(el) { + // TODO + }, + + 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); + }, + + 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) { + if (el == null) return null; + // 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, _jsPlumb) { + var id = jsPlumb.getId(el); + var drag = _draggablesById[id]; + if (!drag) { + var originalZIndex = 0, + originalCursor = null, + dragZIndex = jsPlumb.Defaults.DragOptions.zIndex || 2000; + + options.onStart = jsPlumbUtil.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); + } + $(document.body).addClass(_jsPlumb.dragSelectClass); + }); + + options.onComplete = jsPlumbUtil.wrap(options.onComplete, function() { + this.element.setStyle('z-index', originalZIndex); + if (originalCursor) { + this.element.setStyle('cursor', originalCursor); + } + $(document.body).removeClass(_jsPlumb.dragSelectClass); + }); + + // 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 = jsPlumbUtil.wrap(options.onLeave, function(el, dr) { + if (dr) { + _checkHover(dr, false); + _executeDroppableOption(el, dr, 'onLeave'); + } + }); + options.onEnter = jsPlumbUtil.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(); // ?? + }, + + setDragFilter : function(el, filter) { + jsPlumb.log("NOT IMPLEMENTED: setDragFilter"); + }, + + 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); +})(); Deleted: sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/yui.jsPlumb-1.5.2.js =================================================================== --- sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/yui.jsPlumb-1.5.2.js 2013-10-15 08:29:48 UTC (rev 218) +++ sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/yui.jsPlumb-1.5.2.js 2013-10-15 08:30:43 UTC (rev 219) @@ -1,10969 +0,0 @@ -/** %%Ignore-License -* jsBezier-0.6 -* -* Copyright (c) 2010 - 2013 Simon Porritt (simon.porritt(a)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)); - }; - - var _isPoint = function(curve) { - return curve[0].x == curve[1].x && curve[0].y == curve[1].y; - }; - - /** - * 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) { - - if (_isPoint(curve)) { - return { - point:curve[0], - location:location - }; - } - - 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) { - if (_isPoint(curve)) return 0; - - 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 - }; -})(); - -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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 _isa = function(a) { return Object.prototype.toString.call(a) === "[object Array]"; }, - _isnum = function(n) { return Object.prototype.toString.call(n) === "[object Number]"; }, - _iss = function(s) { return typeof s === "string"; }, - _isb = function(s) { return typeof s === "boolean"; }, - _isnull = function(s) { return s == null; }, - _iso = function(o) { return o == null ? false : Object.prototype.toString.call(o) === "[object Object]"; }, - _isd = function(o) { return Object.prototype.toString.call(o) === "[object Date]"; }, - _isf = function(o) { return Object.prototype.toString.call(o) === "[object Function]"; }, - _ise = function(o) { - for (var i in o) { if (o.hasOwnProperty(i)) return false; } - return true; - }, - pointHelper = function(p1, p2, fn) { - p1 = _isa(p1) ? p1 : [p1.x, p1.y]; - p2 = _isa(p2) ? p2 : [p2.x, p2.y]; - return fn(p1, p2); - }; - - jsPlumbUtil = { - isArray : _isa, - isString : _iss, - isBoolean: _isb, - isNull : _isnull, - isObject : _iso, - isDate : _isd, - isFunction: _isf, - isEmpty:_ise, - isNumber:_isnum, - clone : function(a) { - if (_iss(a)) return "" + a; - else if (_isb(a)) return !!a; - else if (_isd(a)) return new Date(a.getTime()); - else if (_isf(a)) return a; - else if (_isa(a)) { - var b = []; - for (var i = 0; i < a.length; i++) - b.push(this.clone(a[i])); - return b; - } - else if (_iso(a)) { - var c = {}; - for (var j in a) - c[j] = this.clone(a[j]); - return c; - } - else return a; - }, - merge : function(a, b) { - var c = this.clone(a); - for (var i in b) { - if (c[i] == null || _iss(b[i]) || _isb(b[i])) - c[i] = b[i]; - else { - if (_isa(b[i])/* && this.isArray(c[i])*/) { - var ar = []; - // if c's object is also an array we can keep its values. - if (_isa(c[i])) ar.push.apply(ar, c[i]); - ar.push.apply(ar, b[i]); - c[i] = ar; - } - else if(_iso(b[i])) { - // overwite c's value with an object if it is not already one. - if (!_iso(c[i])) - c[i] = {}; - for (var j in b[i]) - c[i][j] = b[i][j]; - } - } - } - return c; - }, - copyValues:function(names, from, to) { - for (var i = 0; i < names.length; i++) - to[names[i]] = from[names[i]]; - }, - // - // 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 != null) { - fromString = fromString.replace(matches[i], val); - } - } - } - return fromString; - }, - // process one entry. - _one = function(d) { - if (d != null) { - if (_iss(d)) { - return getValue(d); - } - else if (_isa(d)) { - var r = []; - for (var i = 0; i < d.length; i++) - r.push(_one(d[i])); - return r; - } - else if (_iso(d)) { - var s = {}; - for (var j in d) { - s[j] = _one(d[j]); - } - return s; - } - 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 }; - }, - 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, insertAtStart) { - var l = map[key]; - if (l == null) { - l = []; - map[key] = l; - } - l[insertAtStart ? "unshift" : "push"](value); - return l; - }, - // - // extends the given obj (which can be an array) with the given constructor function, prototype functions, and - // class members, any of which may be null. - // - extend : function(child, parent, _protoFn, _protoAtts) { - _protoFn = _protoFn || {}; - _protoAtts = _protoAtts || {}; - parent = _isa(parent) ? parent : [ parent ]; - - for (var i = 0; i < parent.length; i++) { - for (var j in parent[i].prototype) { - if(parent[i].prototype.hasOwnProperty(j)) { - child.prototype[j] = parent[i].prototype[j]; - } - } - } - - var _makeFn = function(name) { - return function() { - for (var i = 0; i < parent.length; i++) { - if (parent[i].prototype[name]) - parent[i].prototype[name].apply(this, arguments); - } - return _protoFn[name].apply(this, arguments); - }; - }; - - for (var k in _protoFn) { - child.prototype[k] = _makeFn(k); - } - - return child; - }, - uuid : function() { - return ('xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { - var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); - return v.toString(16); - })); - }, - 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]); - }, - /* - * Function: sizeElement - * Helper to size and position an element. You would typically use - * this when writing your own Connector or Endpoint implementation. - * - * Parameters: - * x - [int] x position for the element origin - * y - [int] y position for the element origin - * w - [int] width of the element - * h - [int] height of the element - * - */ - sizeElement : function(el, x, y, w, h) { - if (el) { - el.style.height = h + "px"; - el.height = h; - el.style.width = w + "px"; - el.width = w; - el.style.left = x + "px"; - el.style.top = y + "px"; - } - }, - /** - * @name jsPlumbUtil.wrap - * @desc Wraps one function with another, creating a placeholder for the - * wrapped function if it was null. this is used to wrap the various - * drag/drop event functions - to allow jsPlumb to be notified of - * important lifecycle events without imposing itself on the user's - * drag/drop functionality. - * @param {Function} wrappedFunction original function to wrap; may be null. - * @param {Function} newFunction function to wrap the original with. - * @param {Object} [returnOnThisValue] Optional. Indicates that the wrappedFunction should - * not be executed if the newFunction returns a value matching 'returnOnThisValue'. - * note that this is a simple comparison and only works for primitives right now. - */ - wrap : function(wrappedFunction, newFunction, returnOnThisValue) { - wrappedFunction = wrappedFunction || function() { }; - newFunction = newFunction || function() { }; - return function() { - var r = null; - try { - r = newFunction.apply(this, arguments); - } catch (e) { - jsPlumbUtil.log("jsPlumb function failed : " + e); - } - if (returnOnThisValue == null || (r !== returnOnThisValue)) { - try { - r = wrappedFunction.apply(this, arguments); - } catch (e) { - jsPlumbUtil.log("wrapped function failed : " + e); - } - } - return r; - }; - } - }; - - - jsPlumbUtil.EventGenerator = function() { - var _listeners = {}, 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" ]; - - this.bind = function(event, listener, insertAtStart) { - jsPlumbUtil.addToList(_listeners, event, listener, true); - return this; - }; - - this.fire = function(event, value, originalEvent) { - if (!eventsSuspended && _listeners[event]) { - // instead of looping through the array we get a counter and a length, because it is possible - // that an event fired from here could cause the object to get cleaned up, which would throw - // away the listeners. so after each cycle through the loop we check to ensure we haven't - // been nuked. - var l = _listeners[event].length, i = 0, _gone = false, ret = null; - if (!this.shouldFireEvent || this.shouldFireEvent(event, value, originalEvent)) { - while (!_gone && i < l && ret !== false) { - - // 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 { - ret = _listeners[event][i](value, originalEvent); - } catch (e) { - jsPlumbUtil.log("jsPlumb: fire failed for event " + event + " : " + e); - } - } - i++; - if (_listeners == null || _listeners[event] == null) _gone = true; - } - } - } - return this; - }; - - this.unbind = function(event) { - if (event) - delete _listeners[event]; - else { - _listeners = {}; - } - return this; - }; - - this.getListener = function(forEvent) { - return _listeners[forEvent]; - }; - this.setSuspendEvents = function(val) { - eventsSuspended = val; - }; - this.isSuspendEvents = function() { - return eventsSuspended; - }; - this.cleanupListeners = function() { - for (var i in _listeners) { - _listeners[i].splice(0); - delete _listeners[i]; - } - }; - }; - - - jsPlumbUtil.EventGenerator.prototype = { - cleanup:function() { - this.cleanupListeners(); - } - }; - - - // thanks MDC - // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Ob… - if (!Function.prototype.bind) { - Function.prototype.bind = function (oThis) { - if (typeof this !== "function") { - // closest thing possible to the ECMAScript 5 internal IsCallable function - throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); - } - - var aArgs = Array.prototype.slice.call(arguments, 1), - fToBind = this, - fNOP = function () {}, - fBound = function () { - return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, - aArgs.concat(Array.prototype.slice.call(arguments))); - }; - - fNOP.prototype = this.prototype; - fBound.prototype = new fNOP(); - - return fBound; - }; - } - -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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… - 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; - if (b != null && b.style != null) { - b.style.behavior = "url(#default#VML)"; - vmlAvailable.vml = b ? typeof b.adj == "object": true; - } - else - vmlAvailable.vml = false; - 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), - id = _currentInstance.getId(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(p.childNodes[i], 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(el); - }; - - // refresh the offsets for child elements of this element. - this.updateOffsets = function(elId) { - var jpcl = jsPlumb.CurrentLibrary, - el = jpcl.getElementObject(elId), - domEl = jpcl.getDOMElement(el), - id = _currentInstance.getId(domEl), - 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.getElementObject(el), - cLoc = jsPlumb.CurrentLibrary.getOffset(c), - p = el.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) { - _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, - - getAttribute:function(el, attName) { - return el.getAttribute(attName); - }, - - setAttribute:function(el, a, v) { - el.setAttribute(a, v); - }, - - 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; - } - }; - - - /* - - addClass: - - add: function( elem, classNames ) { - jQuery.each((classNames || "").split(/\s+/), function(i, className){ - if ( elem.nodeType == 1 && !jQuery.className.has( elem.className, className ) ) - elem.className += (elem.className ? " " : "") + className; - }); - }, - */ - - /* - - removeClass: - - elem.className = classNames !== undefined ? - jQuery.grep(elem.className.split(/\s+/), function(className){ - return !jQuery.className.has( classNames, className ); - }).join(" ") : - -*/ - -})(); -/** - * @module jsPlumb - * @description Provides a way to visually connect elements on an HTML page, using either SVG, Canvas - * elements, or VML. - * - * - [Demo Site](http://jsplumb.org) - * - [GitHub](http://github.com/sporritt/jsplumb) - * - * Dual licensed under the MIT and GPL2 licenses. - * - * Copyright (c) 2010 - 2013 Simon Porritt (simon.porritt(a)gmail.com) - */ -;(function() { - - var _ju = jsPlumbUtil, - _addClass = function(el, clazz) { jsPlumb.CurrentLibrary.addClass(_gel(el), clazz); }, - _hasClass = function(el, clazz) { return jsPlumb.CurrentLibrary.hasClass(_gel(el), clazz); }, - _removeClass = function(el, clazz) { jsPlumb.CurrentLibrary.removeClass(_gel(el), clazz); }, - _gel = function(el) { return jsPlumb.CurrentLibrary.getElementObject(el); }, - _dom = function(el) { return jsPlumb.CurrentLibrary.getDOMElement(el); }, - _getOffset = function(el, _instance) { - var o = jsPlumb.CurrentLibrary.getOffset(_gel(el)); - if (_instance != null) { - var z = _instance.getZoom(); - return {left:o.left / z, top:o.top / z }; - } - else - return o; - }, - _getSize = function(el) { - return jsPlumb.CurrentLibrary.getSize(_gel(el)); - }, - - /** - * creates a timestamp, using milliseconds since 1970, but as a string. - */ - _timestamp = function() { return "" + (new Date()).getTime(); }, - - // helper method to update the hover style whenever it, or paintStyle, changes. - // we use paintStyle as the foundation and merge hoverPaintStyle over the - // top. - _updateHoverStyle = function(component) { - if (component._jsPlumb.paintStyle && component._jsPlumb.hoverPaintStyle) { - var mergedHoverStyle = {}; - jsPlumb.extend(mergedHoverStyle, component._jsPlumb.paintStyle); - jsPlumb.extend(mergedHoverStyle, component._jsPlumb.hoverPaintStyle); - delete component._jsPlumb.hoverPaintStyle; - // we want the fillStyle of paintStyle to override a gradient, if possible. - if (mergedHoverStyle.gradient && component._jsPlumb.paintStyle.fillStyle) - delete mergedHoverStyle.gradient; - component._jsPlumb.hoverPaintStyle = mergedHoverStyle; - } - }, - events = [ "click", "dblclick", "mouseenter", "mouseout", "mousemove", "mousedown", "mouseup", "contextmenu" ], - eventFilters = { "mouseout":"mouseexit" }, - _updateAttachedElements = function(component, state, timestamp, sourceElement) { - var affectedElements = component.getAttachedElements(); - if (affectedElements) { - for (var i = 0, j = affectedElements.length; i < j; i++) { - if (!sourceElement || sourceElement != affectedElements[i]) - affectedElements[i].setHover(state, true, timestamp); // tell the attached elements not to inform their own attached elements. - } - } - }, - _splitType = function(t) { return t == null ? null : t.split(" "); }, - _applyTypes = function(component, params, doNotRepaint) { - if (component.getDefaultType) { - var td = component.getTypeDescriptor(); - - var o = _ju.merge({}, component.getDefaultType()); - for (var i = 0, j = component._jsPlumb.types.length; i < j; i++) - o = _ju.merge(o, component._jsPlumb.instance.getType(component._jsPlumb.types[i], td)); - - if (params) { - o = _ju.populate(o, params); - } - - component.applyType(o, doNotRepaint); - if (!doNotRepaint) component.repaint(); - } - }, - -// ------------------------------ BEGIN jsPlumbUIComponent -------------------------------------------- - - jsPlumbUIComponent = window.jsPlumbUIComponent = function(params) { - - jsPlumbUtil.EventGenerator.apply(this, arguments); - - var self = this, - a = arguments, - idPrefix = self.idPrefix, - id = idPrefix + (new Date()).getTime(), - jpcl = jsPlumb.CurrentLibrary; - - this._jsPlumb = { - instance: params._jsPlumb, - parameters:params.parameters || {}, - paintStyle:null, - hoverPaintStyle:null, - paintStyleInUse:null, - hover:false, - beforeDetach:params.beforeDetach, - beforeDrop:params.beforeDrop, - overlayPlacements : [], - hoverClass: params.hoverClass || params._jsPlumb.Defaults.HoverClass || jsPlumb.Defaults.HoverClass, - types:[] - }; - - this.getId = function() { return id; }; - - // all components can generate events - - if (params.events) { - for (var i in params.events) - self.bind(i, params.events[i]); - } - - // all components get this clone function. - // TODO issue 116 showed a problem with this - it seems 'a' that is in - // the clone function's scope is shared by all invocations of it, the classic - // JS closure problem. for now, jsPlumb does a version of this inline where - // it used to call clone. but it would be nice to find some time to look - // further at this. - this.clone = function() { - var o = {};//new Object(); - this.constructor.apply(o, a); - return o; - }.bind(this); - - - // user can supply a beforeDetach callback, which will be executed before a detach - // is performed; returning false prevents the detach. - this.isDetachAllowed = function(connection) { - var r = true; - if (this._jsPlumb.beforeDetach) { - try { - r = this._jsPlumb.beforeDetach(connection); - } - catch (e) { _ju.log("jsPlumb: beforeDetach callback failed", e); } - } - return r; - }; - - // user can supply a beforeDrop callback, which will be executed before a dropped - // connection is confirmed. user can return false to reject connection. - this.isDropAllowed = function(sourceId, targetId, scope, connection, dropEndpoint) { - var r = this._jsPlumb.instance.checkCondition("beforeDrop", { - sourceId:sourceId, - targetId:targetId, - scope:scope, - connection:connection, - dropEndpoint:dropEndpoint - }); - if (this._jsPlumb.beforeDrop) { - try { - r = this._jsPlumb.beforeDrop({ - sourceId:sourceId, - targetId:targetId, - scope:scope, - connection:connection, - dropEndpoint:dropEndpoint - }); - } - catch (e) { _ju.log("jsPlumb: beforeDrop callback failed", e); } - } - return r; - }; - - var boundListeners = [], - bindAListener = function(obj, type, fn) { - boundListeners.push([obj, type, fn]); - obj.bind(type, fn); - }, - domListeners = [], - bindOne = function(o, c, evt) { - var filteredEvent = eventFilters[evt] || evt, - fn = function(ee) { - c.fire(filteredEvent, c, ee); - }; - domListeners.push([o, evt, fn]); - jpcl.bind(o, evt, fn); - }, - unbindOne = function(o, evt, fn) { - var filteredEvent = eventFilters[evt] || evt; - jpcl.unbind(o, evt, fn); - }; - - this.bindListeners = function(obj, _self, _hoverFunction) { - bindAListener(obj, "click", function(ep, e) { _self.fire("click", _self, e); }); - bindAListener(obj, "dblclick", function(ep, e) { _self.fire("dblclick", _self, e); }); - bindAListener(obj, "contextmenu", function(ep, e) { _self.fire("contextmenu", _self, e); }); - bindAListener(obj, "mouseenter", function(ep, e) { - if (!_self.isHover()) { - _hoverFunction(true); - _self.fire("mouseenter", _self, e); - } - }); - bindAListener(obj, "mouseexit", function(ep, e) { - if (_self.isHover()) { - _hoverFunction(false); - _self.fire("mouseexit", _self, e); - } - }); - bindAListener(obj, "mousedown", function(ep, e) { _self.fire("mousedown", _self, e); }); - bindAListener(obj, "mouseup", function(ep, e) { _self.fire("mouseup", _self, e); }); - }; - - this.unbindListeners = function() { - for (var i = 0; i < boundListeners.length; i++) { - var o = boundListeners[i]; - o[0].unbind(o[1], o[2]); - } - boundListeners = null; - }; - - this.attachListeners = function(o, c) { - for (var i = 0, j = events.length; i < j; i++) { - bindOne(o, c, events[i]); - } - }; - this.detachListeners = function() { - for (var i = 0; i < domListeners.length; i++) { - unbindOne(domListeners[i][0], domListeners[i][1], domListeners[i][2]); - } - domListeners = null; - }; - - this.reattachListenersForElement = function(o) { - if (arguments.length > 1) { - for (var i = 0, j = events.length; i < j; i++) - unbindOne(o, events[i]); - for (i = 1, j = arguments.length; i < j; i++) - this.attachListeners(o, arguments[i]); - } - }; - }; - - jsPlumbUtil.extend(jsPlumbUIComponent, jsPlumbUtil.EventGenerator, { - - getParameter : function(name) { - return this._jsPlumb.parameters[name]; - }, - - setParameter : function(name, value) { - this._jsPlumb.parameters[name] = value; - }, - - getParameters : function() { - return this._jsPlumb.parameters; - }, - - setParameters : function(p) { - this._jsPlumb.parameters = p; - }, - - addClass : function(clazz) { - if (this.canvas != null) - _addClass(this.canvas, clazz); - }, - - removeClass : function(clazz) { - if (this.canvas != null) - _removeClass(this.canvas, clazz); - }, - - setType : function(typeId, params, doNotRepaint) { - this._jsPlumb.types = _splitType(typeId) || []; - _applyTypes(this, params, doNotRepaint); - }, - - getType : function() { - return this._jsPlumb.types; - }, - - reapplyTypes : function(params, doNotRepaint) { - _applyTypes(this, params, doNotRepaint); - }, - - hasType : function(typeId) { - return jsPlumbUtil.indexOf(this._jsPlumb.types, typeId) != -1; - }, - - addType : function(typeId, params, doNotRepaint) { - var t = _splitType(typeId), _cont = false; - if (t != null) { - for (var i = 0, j = t.length; i < j; i++) { - if (!this.hasType(t[i])) { - this._jsPlumb.types.push(t[i]); - _cont = true; - } - } - if (_cont) _applyTypes(this, params, doNotRepaint); - } - }, - - removeType : function(typeId, doNotRepaint) { - var t = _splitType(typeId), _cont = false, _one = function(tt) { - var idx = _ju.indexOf(this._jsPlumb.types, tt); - if (idx != -1) { - this._jsPlumb.types.splice(idx, 1); - return true; - } - return false; - }.bind(this); - - if (t != null) { - for (var i = 0,j = t.length; i < j; i++) { - _cont = _one(t[i]) || _cont; - } - if (_cont) _applyTypes(this, null, doNotRepaint); - } - }, - - toggleType : function(typeId, params, doNotRepaint) { - var t = _splitType(typeId); - if (t != null) { - for (var i = 0, j = t.length; i < j; i++) { - var idx = jsPlumbUtil.indexOf(this._jsPlumb.types, t[i]); - if (idx != -1) - this._jsPlumb.types.splice(idx, 1); - else - this._jsPlumb.types.push(t[i]); - } - - _applyTypes(this, params, doNotRepaint); - } - }, - applyType : function(t, doNotRepaint) { - this.setPaintStyle(t.paintStyle, doNotRepaint); - this.setHoverPaintStyle(t.hoverPaintStyle, doNotRepaint); - if (t.parameters){ - for (var i in t.parameters) - this.setParameter(i, t.parameters[i]); - } - }, - setPaintStyle : function(style, doNotRepaint) { -// this._jsPlumb.paintStyle = jsPlumb.extend({}, style); -// TODO figure out if we want components to clone paintStyle so as not to share it. - this._jsPlumb.paintStyle = style; - this._jsPlumb.paintStyleInUse = this._jsPlumb.paintStyle; - _updateHoverStyle(this); - if (!doNotRepaint) this.repaint(); - }, - getPaintStyle : function() { - return this._jsPlumb.paintStyle; - }, - setHoverPaintStyle : function(style, doNotRepaint) { - //this._jsPlumb.hoverPaintStyle = jsPlumb.extend({}, style); -// TODO figure out if we want components to clone paintStyle so as not to share it. - this._jsPlumb.hoverPaintStyle = style; - _updateHoverStyle(this); - if (!doNotRepaint) this.repaint(); - }, - getHoverPaintStyle : function() { - return this._jsPlumb.hoverPaintStyle; - }, - cleanup:function() { - this.unbindListeners(); - this.detachListeners(); - }, - destroy:function() { - this.cleanupListeners(); - this.clone = null; - this._jsPlumb = null; - }, - - isHover : function() { return this._jsPlumb.hover; }, - - setHover : function(hover, ignoreAttachedElements, timestamp) { - var jpcl = jsPlumb.CurrentLibrary; - // while dragging, we ignore these events. this keeps the UI from flashing and - // swishing and whatevering. - if (this._jsPlumb && !this._jsPlumb.instance.currentlyDragging && !this._jsPlumb.instance.isHoverSuspended()) { - - this._jsPlumb.hover = hover; - - if (this.canvas != null) { - if (this._jsPlumb.instance.hoverClass != null) { - jpcl[hover ? "addClass" : "removeClass"](this.canvas, this._jsPlumb.instance.hoverClass); - } - } - if (this._jsPlumb.hoverPaintStyle != null) { - this._jsPlumb.paintStyleInUse = hover ? this._jsPlumb.hoverPaintStyle : this._jsPlumb.paintStyle; - if (!this._jsPlumb.instance.isSuspendDrawing()) { - timestamp = timestamp || _timestamp(); - this.repaint({timestamp:timestamp, recalc:false}); - } - } - // get the list of other affected elements, if supported by this component. - // for a connection, its the endpoints. for an endpoint, its the connections! surprise. - if (this.getAttachedElements && !ignoreAttachedElements) - _updateAttachedElements(this, hover, _timestamp(), this); - } - } - }); - -// ------------------------------ END jsPlumbUIComponent -------------------------------------------- - -// ------------------------------ BEGIN OverlayCapablejsPlumbUIComponent -------------------------------------------- - - var _internalLabelOverlayId = "__label", - // helper to get the index of some overlay - _getOverlayIndex = function(component, id) { - var idx = -1; - for (var i = 0, j = component._jsPlumb.overlays.length; i < j; i++) { - if (id === component._jsPlumb.overlays[i].id) { - idx = i; - break; - } - } - return idx; - }, - // this is a shortcut helper method to let people add a label as - // overlay. - _makeLabelOverlay = function(component, params) { - - var _params = { - cssClass:params.cssClass, - labelStyle : component.labelStyle, - id:_internalLabelOverlayId, - component:component, - _jsPlumb:component._jsPlumb.instance // TODO not necessary, since the instance can be accessed through the component. - }, - mergedParams = jsPlumb.extend(_params, params); - - return new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()].Label( mergedParams ); - }, - _processOverlay = function(component, o) { - var _newOverlay = null; - if (_ju.isArray(o)) { // this is for the shorthand ["Arrow", { width:50 }] syntax - // there's also a three arg version: - // ["Arrow", { width:50 }, {location:0.7}] - // which merges the 3rd arg into the 2nd. - var type = o[0], - // make a copy of the object so as not to mess up anyone else's reference... - p = jsPlumb.extend({component:component, _jsPlumb:component._jsPlumb.instance}, o[1]); - if (o.length == 3) jsPlumb.extend(p, o[2]); - _newOverlay = new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()][type](p); - } else if (o.constructor == String) { - _newOverlay = new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()][o]({component:component, _jsPlumb:component._jsPlumb.instance}); - } else { - _newOverlay = o; - } - - component._jsPlumb.overlays.push(_newOverlay); - }, - _calculateOverlaysToAdd = function(component, params) { - var defaultKeys = component.defaultOverlayKeys || [], o = params.overlays, - checkKey = function(k) { - return component._jsPlumb.instance.Defaults[k] || jsPlumb.Defaults[k] || []; - }; - - if (!o) o = []; - - for (var i = 0, j = defaultKeys.length; i < j; i++) - o.unshift.apply(o, checkKey(defaultKeys[i])); - - return o; - }, - OverlayCapableJsPlumbUIComponent = window.OverlayCapableJsPlumbUIComponent = function(params) { - - jsPlumbUIComponent.apply(this, arguments); - this._jsPlumb.overlays = []; - - var _overlays = _calculateOverlaysToAdd(this, params); - if (_overlays) { - for (var i = 0, j = _overlays.length; i < j; i++) { - _processOverlay(this, _overlays[i]); - } - } - - if (params.label) { - var loc = params.labelLocation || this.defaultLabelLocation || 0.5, - labelStyle = params.labelStyle || this._jsPlumb.instance.Defaults.LabelStyle || jsPlumb.Defaults.LabelStyle; - - this._jsPlumb.overlays.push(_makeLabelOverlay(this, { - label:params.label, - location:loc, - labelStyle:labelStyle - })); - } - }; - - jsPlumbUtil.extend(OverlayCapableJsPlumbUIComponent, jsPlumbUIComponent, { - applyType : function(t, doNotRepaint) { - this.removeAllOverlays(doNotRepaint); - if (t.overlays) { - for (var i = 0, j = t.overlays.length; i < j; i++) - this.addOverlay(t.overlays[i], true); - } - }, - setHover : function(hover, ignoreAttachedElements, timestamp) { - if (this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) { - for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) { - this._jsPlumb.overlays[i][hover ? "addClass":"removeClass"](this._jsPlumb.instance.hoverClass); - } - } - }, - addOverlay : function(overlay, doNotRepaint) { - _processOverlay(this, overlay); - if (!doNotRepaint) this.repaint(); - }, - getOverlay : function(id) { - var idx = _getOverlayIndex(this, id); - return idx >= 0 ? this._jsPlumb.overlays[idx] : null; - }, - getOverlays : function() { - return this._jsPlumb.overlays; - }, - hideOverlay : function(id) { - var o = this.getOverlay(id); - if (o) o.hide(); - }, - hideOverlays : function() { - for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) - this._jsPlumb.overlays[i].hide(); - }, - showOverlay : function(id) { - var o = this.getOverlay(id); - if (o) o.show(); - }, - showOverlays : function() { - for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) - this._jsPlumb.overlays[i].show(); - }, - removeAllOverlays : function(doNotRepaint) { - for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) { - if (this._jsPlumb.overlays[i].cleanup) this._jsPlumb.overlays[i].cleanup(); - } - - this._jsPlumb.overlays.splice(0, this._jsPlumb.overlays.length); - if (!doNotRepaint) - this.repaint(); - }, - removeOverlay : function(overlayId) { - var idx = _getOverlayIndex(this, overlayId); - if (idx != -1) { - var o = this._jsPlumb.overlays[idx]; - if (o.cleanup) o.cleanup(); - this._jsPlumb.overlays.splice(idx, 1); - } - }, - removeOverlays : function() { - for (var i = 0, j = arguments.length; i < j; i++) - this.removeOverlay(arguments[i]); - }, - getLabel : function() { - var lo = this.getOverlay(_internalLabelOverlayId); - return lo != null ? lo.getLabel() : null; - }, - getLabelOverlay : function() { - return this.getOverlay(_internalLabelOverlayId); - }, - setLabel : function(l) { - var lo = this.getOverlay(_internalLabelOverlayId); - if (!lo) { - var params = l.constructor == String || l.constructor == Function ? { label:l } : l; - lo = _makeLabelOverlay(this, params); - this._jsPlumb.overlays.push(lo); - } - else { - if (l.constructor == String || l.constructor == Function) lo.setLabel(l); - else { - if (l.label) lo.setLabel(l.label); - if (l.location) lo.setLocation(l.location); - } - } - - if (!this._jsPlumb.instance.isSuspendDrawing()) - this.repaint(); - }, - cleanup:function() { - for (var i = 0; i < this._jsPlumb.overlays.length; i++) { - this._jsPlumb.overlays[i].cleanup(); - this._jsPlumb.overlays[i].destroy(); - } - this._jsPlumb.overlays.splice(0); - } - }); - -// ------------------------------ END OverlayCapablejsPlumbUIComponent -------------------------------------------- - - var _jsPlumbInstanceIndex = 0, - getInstanceIndex = function() { - var i = _jsPlumbInstanceIndex + 1; - _jsPlumbInstanceIndex++; - return i; - }; - - var jsPlumbInstance = window.jsPlumbInstance = function(_defaults) { - - this.Defaults = { - Anchor : "BottomCenter", - Anchors : [ null, null ], - ConnectionsDetachable : true, - ConnectionOverlays : [ ], - Connector : "Bezier", - Container : null, - DoNotThrowErrors:false, - DragOptions : { }, - DropOptions : { }, - Endpoint : "Dot", - EndpointOverlays : [ ], - Endpoints : [ null, null ], - EndpointStyle : { fillStyle : "#456" }, - EndpointStyles : [ null, null ], - EndpointHoverStyle : null, - EndpointHoverStyles : [ null, null ], - HoverPaintStyle : null, - LabelStyle : { color : "black" }, - LogEnabled : false, - Overlays : [ ], - MaxConnections : 1, - PaintStyle : { lineWidth : 8, strokeStyle : "#456" }, - ReattachConnections:false, - RenderMode : "svg", - Scope : "jsPlumb_DefaultScope" - }; - if (_defaults) jsPlumb.extend(this.Defaults, _defaults); - - this.logEnabled = this.Defaults.LogEnabled; - this._connectionTypes = {}; - this._endpointTypes = {}; - - jsPlumbUtil.EventGenerator.apply(this); - - var _currentInstance = this, - _instanceIndex = getInstanceIndex(), - _bb = _currentInstance.bind, - _initialDefaults = {}, - _zoom = 1, - _info = function(el) { - var _el = _dom(el); - return { el:_el, id:(jsPlumbUtil.isString(el) && _el == null) ? el : _getId(_el) }; - }; - - this.getInstanceIndex = function() { return _instanceIndex; }; - - this.setZoom = function(z, repaintEverything) { - _zoom = z; - if (repaintEverything) _currentInstance.repaintEverything(); - }; - this.getZoom = function() { return _zoom; }; - - for (var i in this.Defaults) - _initialDefaults[i] = this.Defaults[i]; - - this.bind = function(event, fn) { - if ("ready" === event && initialized) fn(); - else _bb.apply(_currentInstance,[event, fn]); - }; - - _currentInstance.importDefaults = function(d) { - for (var i in d) { - _currentInstance.Defaults[i] = d[i]; - } - return _currentInstance; - }; - - _currentInstance.restoreDefaults = function() { - _currentInstance.Defaults = jsPlumb.extend({}, _initialDefaults); - return _currentInstance; - }; - - var log = null, - resizeTimer = null, - initialized = false, - // TODO remove from window scope - connections = [], - // map of element id -> endpoint lists. an element can have an arbitrary - // number of endpoints on it, and not all of them have to be connected - // to anything. - endpointsByElement = {}, - endpointsByUUID = {}, - offsets = {}, - offsetTimestamps = {}, - floatingConnections = {}, - draggableStates = {}, - connectionBeingDragged = false, - sizes = [], - _suspendDrawing = false, - _suspendedAt = null, - DEFAULT_SCOPE = this.Defaults.Scope, - renderMode = null, // will be set in init() - _curIdStamp = 1, - _idstamp = function() { return "" + _curIdStamp++; }, - - // - // appends an element to some other element, which is calculated as follows: - // - // 1. if _currentInstance.Defaults.Container exists, use that element. - // 2. if the 'parent' parameter exists, use that. - // 3. otherwise just use the root element (for DOM usage, the document body). - // - // - _appendElement = function(el, parent) { - if (_currentInstance.Defaults.Container) - jsPlumb.CurrentLibrary.appendElement(el, _currentInstance.Defaults.Container); - else if (!parent) - jsPlumbAdapter.appendToRoot(el); - else - jsPlumb.CurrentLibrary.appendElement(el, parent); - }, - - // - // YUI, for some reason, put the result of a Y.all call into an object that contains - // a '_nodes' array, instead of handing back an array-like object like the other - // libraries do. - // - _convertYUICollection = function(c) { - return c._nodes ? c._nodes : c; - }, - - // - // Draws an endpoint and its connections. this is the main entry point into drawing connections as well - // as endpoints, since jsPlumb is endpoint-centric under the hood. - // - // @param element element to draw (of type library specific element object) - // @param ui UI object from current library's event system. optional. - // @param timestamp timestamp for this paint cycle. used to speed things up a little by cutting down the amount of offset calculations we do. - // @param clearEdits defaults to false; indicates that mouse edits for connectors should be cleared - /// - _draw = function(element, ui, timestamp, clearEdits) { - - // TODO is it correct to filter by headless at this top level? how would a headless adapter ever repaint? - if (!jsPlumbAdapter.headless && !_suspendDrawing) { - var id = _getId(element), - repaintEls = _currentInstance.dragManager.getElementsForDraggable(id); - - if (timestamp == null) timestamp = _timestamp(); - - // update the offset of everything _before_ we try to draw anything. - var o = _updateOffset( { elId : id, offset : ui, recalc : false, timestamp : timestamp }); - - if (repaintEls) { - for (var i in repaintEls) { - _updateOffset( { - elId : repaintEls[i].id, - offset : { - left:o.o.left + repaintEls[i].offset.left, - top:o.o.top + repaintEls[i].offset.top - }, - recalc : false, - timestamp : timestamp - }); - } - } - - - _currentInstance.anchorManager.redraw(id, ui, timestamp, null, clearEdits); - - if (repaintEls) { - for (var j in repaintEls) { - _currentInstance.anchorManager.redraw(repaintEls[j].id, ui, timestamp, repaintEls[j].offset, clearEdits, true); - } - } - } - }, - - // - // executes the given function against the given element if the first - // argument is an object, or the list of elements, if the first argument - // is a list. the function passed in takes (element, elementId) as - // arguments. - // - _elementProxy = function(element, fn) { - var retVal = null, el, id; - if (_ju.isArray(element)) { - retVal = []; - for ( var i = 0, j = element.length; i < j; i++) { - el = _gel(element[i]); - id = _currentInstance.getAttribute(el, "id"); - retVal.push(fn(el, id)); // append return values to what we will return - } - } else { - el = _gel(element); - id = _currentInstance.getAttribute(el, "id"); - retVal = fn(el, id); - } - return retVal; - }, - - // - // gets an Endpoint by uuid. - // - _getEndpoint = function(uuid) { return endpointsByUUID[uuid]; }, - - /** - * inits a draggable if it's not already initialised. - * TODO: somehow abstract this to the adapter, because the concept of "draggable" has no - * place on the server. - */ - _initDraggableIfNecessary = function(element, isDraggable, dragOptions) { - // TODO move to DragManager? - if (!jsPlumbAdapter.headless) { - var _draggable = isDraggable == null ? false : isDraggable, jpcl = jsPlumb.CurrentLibrary; - if (_draggable) { - if (jpcl.isDragSupported(element) && !jpcl.isAlreadyDraggable(element)) { - var options = dragOptions || _currentInstance.Defaults.DragOptions || jsPlumb.Defaults.DragOptions; - options = jsPlumb.extend( {}, options); // make a copy. - var dragEvent = jpcl.dragEvents.drag, - stopEvent = jpcl.dragEvents.stop, - startEvent = jpcl.dragEvents.start; - - options[startEvent] = _ju.wrap(options[startEvent], function() { - _currentInstance.setHoverSuspended(true); - _currentInstance.select({source:element}).addClass(_currentInstance.elementDraggingClass + " " + _currentInstance.sourceElementDraggingClass, true); - _currentInstance.select({target:element}).addClass(_currentInstance.elementDraggingClass + " " + _currentInstance.targetElementDraggingClass, true); - _currentInstance.setConnectionBeingDragged(true); - }); - - options[dragEvent] = _ju.wrap(options[dragEvent], function() { - var ui = jpcl.getUIPosition(arguments, _currentInstance.getZoom()); - _draw(element, ui, null, true); - _addClass(element, "jsPlumb_dragged"); - }); - options[stopEvent] = _ju.wrap(options[stopEvent], function() { - var ui = jpcl.getUIPosition(arguments, _currentInstance.getZoom()); - _draw(element, ui); - _removeClass(element, "jsPlumb_dragged"); - _currentInstance.setHoverSuspended(false); - _currentInstance.select({source:element}).removeClass(_currentInstance.elementDraggingClass + " " + _currentInstance.sourceElementDraggingClass, true); - _currentInstance.select({target:element}).removeClass(_currentInstance.elementDraggingClass + " " + _currentInstance.targetElementDraggingClass, true); - _currentInstance.setConnectionBeingDragged(false); - }); - var elId = _getId(element); // need ID - draggableStates[elId] = true; - var draggable = draggableStates[elId]; - options.disabled = draggable == null ? false : !draggable; - jpcl.initDraggable(element, options, false, _currentInstance); - _currentInstance.dragManager.register(element); - } - } - } - }, - - /* - * prepares a final params object that can be passed to _newConnection, taking into account defaults, events, etc. - */ - _prepareConnectionParams = function(params, referenceParams) { - var _p = jsPlumb.extend( { }, params); - if (referenceParams) jsPlumb.extend(_p, referenceParams); - - // hotwire endpoints passed as source or target to sourceEndpoint/targetEndpoint, respectively. - if (_p.source) { - if (_p.source.endpoint) - _p.sourceEndpoint = _p.source; - else - _p.source = _dom(_p.source); - } - if (_p.target) { - if (_p.target.endpoint) - _p.targetEndpoint = _p.target; - else - _p.target = _dom(_p.target); - } - - // test for endpoint uuids to connect - if (params.uuids) { - _p.sourceEndpoint = _getEndpoint(params.uuids[0]); - _p.targetEndpoint = _getEndpoint(params.uuids[1]); - } - - // now ensure that if we do have Endpoints already, they're not full. - // source: - if (_p.sourceEndpoint && _p.sourceEndpoint.isFull()) { - _ju.log(_currentInstance, "could not add connection; source endpoint is full"); - return; - } - - // target: - if (_p.targetEndpoint && _p.targetEndpoint.isFull()) { - _ju.log(_currentInstance, "could not add connection; target endpoint is full"); - return; - } - - // if source endpoint mandates connection type and nothing specified in our params, use it. - if (!_p.type && _p.sourceEndpoint) - _p.type = _p.sourceEndpoint.connectionType; - - // copy in any connectorOverlays that were specified on the source endpoint. - // it doesnt copy target endpoint overlays. i'm not sure if we want it to or not. - if (_p.sourceEndpoint && _p.sourceEndpoint.connectorOverlays) { - _p.overlays = _p.overlays || []; - for (var i = 0, j = _p.sourceEndpoint.connectorOverlays.length; i < j; i++) { - _p.overlays.push(_p.sourceEndpoint.connectorOverlays[i]); - } - } - - // pointer events - if (!_p["pointer-events"] && _p.sourceEndpoint && _p.sourceEndpoint.connectorPointerEvents) - _p["pointer-events"] = _p.sourceEndpoint.connectorPointerEvents; - - // if there's a target specified (which of course there should be), and there is no - // target endpoint specified, and 'newConnection' was not set to true, then we check to - // see if a prior call to makeTarget has provided us with the specs for the target endpoint, and - // we use those if so. additionally, if the makeTarget call was specified with 'uniqueEndpoint' set - // to true, then if that target endpoint has already been created, we re-use it. - - var tid, tep, existingUniqueEndpoint, newEndpoint; - - // TODO: this code can be refactored to be a little dry. - if (_p.target && !_p.target.endpoint && !_p.targetEndpoint && !_p.newConnection) { - tid = _getId(_p.target); - tep =_targetEndpointDefinitions[tid]; - existingUniqueEndpoint = _targetEndpoints[tid]; - - if (tep) { - // if target not enabled, return. - if (!_targetsEnabled[tid]) return; - - tep.isTarget = true; - // check for max connections?? - newEndpoint = existingUniqueEndpoint != null ? existingUniqueEndpoint : _currentInstance.addEndpoint(_p.target, tep); - if (_targetEndpointsUnique[tid]) _targetEndpoints[tid] = newEndpoint; - _p.targetEndpoint = newEndpoint; - // TODO test options to makeTarget to see if we should do this? - newEndpoint._doNotDeleteOnDetach = false; // reset. - newEndpoint._deleteOnDetach = true; - } - } - - // same thing, but for source. - if (_p.source && !_p.source.endpoint && !_p.sourceEndpoint && !_p.newConnection) { - tid = _getId(_p.source); - tep = _sourceEndpointDefinitions[tid]; - existingUniqueEndpoint = _sourceEndpoints[tid]; - - if (tep) { - // if source not enabled, return. - if (!_sourcesEnabled[tid]) return; - - newEndpoint = existingUniqueEndpoint != null ? existingUniqueEndpoint : _currentInstance.addEndpoint(_p.source, tep); - if (_sourceEndpointsUnique[tid]) _sourceEndpoints[tid] = newEndpoint; - _p.sourceEndpoint = newEndpoint; - // TODO test options to makeSource to see if we should do this? - newEndpoint._doNotDeleteOnDetach = false; // reset. - newEndpoint._deleteOnDetach = true; - } - } - - return _p; - }, - - _newConnection = function(params) { - var connectionFunc = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), - endpointFunc = _currentInstance.Defaults.EndpointType || jsPlumb.Endpoint, - parent = jsPlumb.CurrentLibrary.getParent; - - if (params.container) - params.parent = params.container; - else { - if (params.sourceEndpoint) - params.parent = params.sourceEndpoint.parent; - else if (params.source.constructor == endpointFunc) - params.parent = params.source.parent; - else params.parent = parent(params.source); - } - - params._jsPlumb = _currentInstance; - params.newConnection = _newConnection; - params.newEndpoint = _newEndpoint; - params.endpointsByUUID = endpointsByUUID; - params.endpointsByElement = endpointsByElement; - params.finaliseConnection = _finaliseConnection; - var con = new connectionFunc(params); - con.id = "con_" + _idstamp(); - _eventFireProxy("click", "click", con); - _eventFireProxy("dblclick", "dblclick", con); - _eventFireProxy("contextmenu", "contextmenu", con); - return con; - }, - - // - // adds the connection to the backing model, fires an event if necessary and then redraws - // - _finaliseConnection = function(jpc, params, originalEvent, doInformAnchorManager) { - params = params || {}; - // add to list of connections (by scope). - if (!jpc.suspendedEndpoint) - connections.push(jpc); - - // always inform the anchor manager - // except that if jpc has a suspended endpoint it's not true to say the - // connection is new; it has just (possibly) moved. the question is whether - // to make that call here or in the anchor manager. i think perhaps here. - if (jpc.suspendedEndpoint == null || doInformAnchorManager) - _currentInstance.anchorManager.newConnection(jpc); - - // force a paint - _draw(jpc.source); - - // fire an event - if (!params.doNotFireConnectionEvent && params.fireEvent !== false) { - - var eventArgs = { - connection:jpc, - source : jpc.source, target : jpc.target, - sourceId : jpc.sourceId, targetId : jpc.targetId, - sourceEndpoint : jpc.endpoints[0], targetEndpoint : jpc.endpoints[1] - }; - - _currentInstance.fire("connection", eventArgs, originalEvent); - } - }, - - _eventFireProxy = function(event, proxyEvent, obj) { - obj.bind(event, function(originalObject, originalEvent) { - _currentInstance.fire(proxyEvent, obj, originalEvent); - }); - }, - - /* - * for the given endpoint params, returns an appropriate parent element for the UI elements that will be added. - * this function is used by _newEndpoint (directly below), and also in the makeSource function in jsPlumb. - * - * the logic is to first look for a "container" member of params, and pass that back if found. otherwise we - * handoff to the 'getParent' function in the current library. - */ - _getParentFromParams = function(params) { - if (params.container) - return params.container; - else { - var tag = jsPlumb.CurrentLibrary.getTagName(params.source), - p = jsPlumb.CurrentLibrary.getParent(params.source); - if (tag && tag.toLowerCase() === "td") - return jsPlumb.CurrentLibrary.getParent(p); - else return p; - } - }, - - /* - factory method to prepare a new endpoint. this should always be used instead of creating Endpoints - manually, since this method attaches event listeners and an id. - */ - _newEndpoint = function(params) { - var endpointFunc = _currentInstance.Defaults.EndpointType || jsPlumb.Endpoint; - var _p = jsPlumb.extend({}, params); - _p.parent = _getParentFromParams(_p); - _p._jsPlumb = _currentInstance; - _p.newConnection = _newConnection; - _p.newEndpoint = _newEndpoint; - _p.endpointsByUUID = endpointsByUUID; - _p.endpointsByElement = endpointsByElement; - _p.finaliseConnection = _finaliseConnection; - _p.fireDetachEvent = fireDetachEvent; - _p.floatingConnections = floatingConnections; - _p.getParentFromParams = _getParentFromParams; - _p.elementId = _getId(_p.source); - var ep = new endpointFunc(_p); - ep.id = "ep_" + _idstamp(); - _eventFireProxy("click", "endpointClick", ep); - _eventFireProxy("dblclick", "endpointDblClick", ep); - _eventFireProxy("contextmenu", "contextmenu", ep); - if (!jsPlumbAdapter.headless) - _currentInstance.dragManager.endpointAdded(_p.source); - return ep; - }, - - /* - * performs the given function operation on all the connections found - * for the given element id; this means we find all the endpoints for - * the given element, and then for each endpoint find the connectors - * connected to it. then we pass each connection in to the given - * function. - */ - _operation = function(elId, func, endpointFunc) { - var endpoints = endpointsByElement[elId]; - if (endpoints && endpoints.length) { - for ( var i = 0, ii = endpoints.length; i < ii; i++) { - for ( var j = 0, jj = endpoints[i].connections.length; j < jj; j++) { - var retVal = func(endpoints[i].connections[j]); - // if the function passed in returns true, we exit. - // most functions return false. - if (retVal) return; - } - if (endpointFunc) endpointFunc(endpoints[i]); - } - } - }, - - _setDraggable = function(element, draggable) { - return _elementProxy(element, function(el, id) { - draggableStates[id] = draggable; - if (jsPlumb.CurrentLibrary.isDragSupported(el)) { - jsPlumb.CurrentLibrary.setDraggable(el, draggable); - } - }); - }, - /* - * private method to do the business of hiding/showing. - * - * @param el - * either Id of the element in question or a library specific - * object for the element. - * @param state - * String specifying a value for the css 'display' property - * ('block' or 'none'). - */ - _setVisible = function(el, state, alsoChangeEndpoints) { - state = state === "block"; - var endpointFunc = null; - if (alsoChangeEndpoints) { - if (state) endpointFunc = function(ep) { - ep.setVisible(true, true, true); - }; - else endpointFunc = function(ep) { - ep.setVisible(false, true, true); - }; - } - var info = _info(el); - _operation(info.id, function(jpc) { - if (state && alsoChangeEndpoints) { - // this test is necessary because this functionality is new, and i wanted to maintain backwards compatibility. - // this block will only set a connection to be visible if the other endpoint in the connection is also visible. - var oidx = jpc.sourceId === info.id ? 1 : 0; - if (jpc.endpoints[oidx].isVisible()) jpc.setVisible(true); - } - else // the default behaviour for show, and what always happens for hide, is to just set the visibility without getting clever. - jpc.setVisible(state); - }, endpointFunc); - }, - /* - * toggles the draggable state of the given element(s). - * el is either an id, or an element object, or a list of ids/element objects. - */ - _toggleDraggable = function(el) { - return _elementProxy(el, function(el, elId) { - var state = draggableStates[elId] == null ? false : draggableStates[elId]; - state = !state; - draggableStates[elId] = state; - jsPlumb.CurrentLibrary.setDraggable(el, state); - return state; - }); - }, - /** - * private method to do the business of toggling hiding/showing. - */ - _toggleVisible = function(elId, changeEndpoints) { - var endpointFunc = null; - if (changeEndpoints) { - endpointFunc = function(ep) { - var state = ep.isVisible(); - ep.setVisible(!state); - }; - } - _operation(elId, function(jpc) { - var state = jpc.isVisible(); - jpc.setVisible(!state); - }, endpointFunc); - // todo this should call _elementProxy, and pass in the - // _operation(elId, f) call as a function. cos _toggleDraggable does - // that. - }, - /** - * updates the offset and size for a given element, and stores the - * values. if 'offset' is not null we use that (it would have been - * passed in from a drag call) because it's faster; but if it is null, - * or if 'recalc' is true in order to force a recalculation, we get the current values. - */ - _updateOffset = function(params) { - var timestamp = params.timestamp, recalc = params.recalc, offset = params.offset, elId = params.elId, s; - if (_suspendDrawing && !timestamp) timestamp = _suspendedAt; - if (!recalc) { - if (timestamp && timestamp === offsetTimestamps[elId]) { - return {o:params.offset || offsets[elId], s:sizes[elId]}; - } - } - if (recalc || !offset) { // if forced repaint or no offset available, we recalculate. - // get the current size and offset, and store them - s = _gel(elId); - if (s != null) { - sizes[elId] = _getSize(s); - offsets[elId] = _getOffset(s, _currentInstance); - offsetTimestamps[elId] = timestamp; - } - } else { - offsets[elId] = offset; - if (sizes[elId] == null) { - s = _gel(elId); - if (s != null) sizes[elId] = _getSize(s); - } - offsetTimestamps[elId] = timestamp; - } - - if(offsets[elId] && !offsets[elId].right) { - offsets[elId].right = offsets[elId].left + sizes[elId][0]; - offsets[elId].bottom = offsets[elId].top + sizes[elId][1]; - offsets[elId].width = sizes[elId][0]; - offsets[elId].height = sizes[elId][1]; - offsets[elId].centerx = offsets[elId].left + (offsets[elId].width / 2); - offsets[elId].centery = offsets[elId].top + (offsets[elId].height / 2); - } - return {o:offsets[elId], s:sizes[elId]}; - }, - - // TODO comparison performance - _getCachedData = function(elId) { - var o = offsets[elId]; - if (!o) - return _updateOffset({elId:elId}); - else - return {o:o, s:sizes[elId]}; - }, - - /** - * gets an id for the given element, creating and setting one if - * necessary. the id is of the form - * - * jsPlumb_<instance index>_<index in instance> - * - * where "index in instance" is a monotonically increasing integer that starts at 0, - * for each instance. this method is used not only to assign ids to elements that do not - * have them but also to connections and endpoints. - */ - _getId = function(element, uuid, doNotCreateIfNotFound) { - if (jsPlumbUtil.isString(element)) return element; - if (element == null) return null; - var id = jsPlumbAdapter.getAttribute(element, "id"); - if (!id || id === "undefined") { - // check if fixed uuid parameter is given - if (arguments.length == 2 && arguments[1] !== undefined) - id = uuid; - else if (arguments.length == 1 || (arguments.length == 3 && !arguments[2])) - id = "jsPlumb_" + _instanceIndex + "_" + _idstamp(); - - if (!doNotCreateIfNotFound) jsPlumbAdapter.setAttribute(element, "id", id); - } - return id; - }; - - this.setConnectionBeingDragged = function(v) { - connectionBeingDragged = v; - }; - this.isConnectionBeingDragged = function() { - return connectionBeingDragged; - }; - - this.connectorClass = "_jsPlumb_connector"; - this.hoverClass = "_jsPlumb_hover"; - this.endpointClass = "_jsPlumb_endpoint"; - this.endpointConnectedClass = "_jsPlumb_endpoint_connected"; - this.endpointFullClass = "_jsPlumb_endpoint_full"; - this.endpointDropAllowedClass = "_jsPlumb_endpoint_drop_allowed"; - this.endpointDropForbiddenClass = "_jsPlumb_endpoint_drop_forbidden"; - this.overlayClass = "_jsPlumb_overlay"; - this.draggingClass = "_jsPlumb_dragging"; - this.elementDraggingClass = "_jsPlumb_element_dragging"; - this.sourceElementDraggingClass = "_jsPlumb_source_element_dragging"; - this.targetElementDraggingClass = "_jsPlumb_target_element_dragging"; - this.endpointAnchorClassPrefix = "_jsPlumb_endpoint_anchor"; - this.hoverSourceClass = "_jsPlumb_source_hover"; - this.hoverTargetClass = "_jsPlumb_target_hover"; - this.dragSelectClass = "_jsPlumb_drag_select"; - - this.Anchors = {}; - this.Connectors = { "canvas":{}, "svg":{}, "vml":{} }; - this.Endpoints = { "canvas":{}, "svg":{}, "vml":{} }; - this.Overlays = { "canvas":{}, "svg":{}, "vml":{}}; - this.ConnectorRenderers = {}; - this.SVG = "svg"; - this.CANVAS = "canvas"; - this.VML = "vml"; - - -// --------------------------- jsPLumbInstance public API --------------------------------------------------------- - - - this.addEndpoint = function(el, params, referenceParams) { - referenceParams = referenceParams || {}; - var p = jsPlumb.extend({}, referenceParams); - jsPlumb.extend(p, params); - p.endpoint = p.endpoint || _currentInstance.Defaults.Endpoint || jsPlumb.Defaults.Endpoint; - p.paintStyle = p.paintStyle || _currentInstance.Defaults.EndpointStyle || jsPlumb.Defaults.EndpointStyle; - // YUI wrapper - el = _convertYUICollection(el); - - var results = [], - inputs = (_ju.isArray(el) || (el.length != null && !_ju.isString(el))) ? el : [ el ]; - - for (var i = 0, j = inputs.length; i < j; i++) { - var _el = _dom(inputs[i]), id = _getId(_el); - p.source = _el; - - _updateOffset({ elId : id, timestamp:_suspendedAt }); - var e = _newEndpoint(p); - if (p.parentAnchor) e.parentAnchor = p.parentAnchor; - _ju.addToList(endpointsByElement, id, e); - var myOffset = offsets[id], - myWH = sizes[id], - anchorLoc = e.anchor.compute( { xy : [ myOffset.left, myOffset.top ], wh : myWH, element : e, timestamp:_suspendedAt }), - endpointPaintParams = { anchorLoc : anchorLoc, timestamp:_suspendedAt }; - - if (_suspendDrawing) endpointPaintParams.recalc = false; - if (!_suspendDrawing) e.paint(endpointPaintParams); - - results.push(e); - e._doNotDeleteOnDetach = true; // mark this as being added via addEndpoint. - } - - return results.length == 1 ? results[0] : results; - }; - - - this.addEndpoints = function(el, endpoints, referenceParams) { - var results = []; - for ( var i = 0, j = endpoints.length; i < j; i++) { - var e = _currentInstance.addEndpoint(el, endpoints[i], referenceParams); - if (_ju.isArray(e)) - Array.prototype.push.apply(results, e); - else results.push(e); - } - return results; - }; - - this.animate = function(el, properties, options) { - options = options || {}; - var ele = _gel(el), - id = _getId(el), - stepFunction = jsPlumb.CurrentLibrary.dragEvents.step, - completeFunction = jsPlumb.CurrentLibrary.dragEvents.complete; - - options[stepFunction] = _ju.wrap(options[stepFunction], function() { - _currentInstance.repaint(id); - }); - - // onComplete repaints, just to make sure everything looks good at the end of the animation. - options[completeFunction] = _ju.wrap(options[completeFunction], function() { - _currentInstance.repaint(id); - }); - - jsPlumb.CurrentLibrary.animate(ele, properties, options); - }; - - /** - * checks for a listener for the given condition, executing it if found, passing in the given value. - * condition listeners would have been attached using "bind" (which is, you could argue, now overloaded, since - * firing click events etc is a bit different to what this does). i thought about adding a "bindCondition" - * or something, but decided against it, for the sake of simplicity. jsPlumb will never fire one of these - * condition events anyway. - */ - this.checkCondition = function(conditionName, value) { - var l = _currentInstance.getListener(conditionName), - r = true; - - if (l && l.length > 0) { - try { - for (var i = 0, j = l.length; i < j; i++) { - r = r && l[i](value); - } - } - catch (e) { - _ju.log(_currentInstance, "cannot check condition [" + conditionName + "]" + e); - } - } - return r; - }; - - /** - * checks a condition asynchronously: fires the event handler and passes the handler - * a 'proceed' function and a 'stop' function. The handler MUST execute one or other - * of these once it has made up its mind. - * - * Note that although this reads the listener list for the given condition, it - * does not loop through and hit each listener, because that, with asynchronous - * callbacks, would be messy. so it uses only the first listener registered. - */ - this.checkASyncCondition = function(conditionName, value, proceed, stop) { - var l = _currentInstance.getListener(conditionName); - - if (l && l.length > 0) { - try { - l[0](value, proceed, stop); - } - catch (e) { - _ju.log(_currentInstance, "cannot asynchronously check condition [" + conditionName + "]" + e); - } - } - }; - - - this.connect = function(params, referenceParams) { - // prepare a final set of parameters to create connection with - var _p = _prepareConnectionParams(params, referenceParams), jpc; - // TODO probably a nicer return value if the connection was not made. _prepareConnectionParams - // will return null (and log something) if either endpoint was full. what would be nicer is to - // create a dedicated 'error' object. - if (_p) { - // create the connection. it is not yet registered - jpc = _newConnection(_p); - // now add it the model, fire an event, and redraw - _finaliseConnection(jpc, _p); - } - return jpc; - }; - - this.deleteEndpoint = function(object, doNotRepaintAfterwards) { - var _is = _currentInstance.setSuspendDrawing(true); - var endpoint = (typeof object == "string") ? endpointsByUUID[object] : object; - if (endpoint) { - _currentInstance.deleteObject({endpoint:endpoint}); - } - if(!_is) _currentInstance.setSuspendDrawing(false, doNotRepaintAfterwards); - return _currentInstance; - }; - - - this.deleteEveryEndpoint = function() { - var _is = _currentInstance.setSuspendDrawing(true); - for ( var id in endpointsByElement) { - var endpoints = endpointsByElement[id]; - if (endpoints && endpoints.length) { - for ( var i = 0, j = endpoints.length; i < j; i++) { - _currentInstance.deleteEndpoint(endpoints[i], true); - } - } - } - endpointsByElement = {}; - endpointsByUUID = {}; - _currentInstance.anchorManager.reset(); - _currentInstance.dragManager.reset(); - if(!_is) _currentInstance.setSuspendDrawing(false); - return _currentInstance; - }; - - var fireDetachEvent = function(jpc, doFireEvent, originalEvent) { - // may have been given a connection, or in special cases, an object - var connType = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), - argIsConnection = jpc.constructor == connType, - params = argIsConnection ? { - connection:jpc, - source : jpc.source, target : jpc.target, - sourceId : jpc.sourceId, targetId : jpc.targetId, - sourceEndpoint : jpc.endpoints[0], targetEndpoint : jpc.endpoints[1] - } : jpc; - - if (doFireEvent) - _currentInstance.fire("connectionDetached", params, originalEvent); - - _currentInstance.anchorManager.connectionDetached(params); - }; - - this.unregisterEndpoint = function(endpoint) { - if (endpoint._jsPlumb.uuid) endpointsByUUID[endpoint._jsPlumb.uuid] = null; - _currentInstance.anchorManager.deleteEndpoint(endpoint); - // TODO at least replace this with a removeWithFunction call. - for (var e in endpointsByElement) { - var endpoints = endpointsByElement[e]; - if (endpoints) { - var newEndpoints = []; - for (var i = 0, j = endpoints.length; i < j; i++) - if (endpoints[i] != endpoint) newEndpoints.push(endpoints[i]); - - endpointsByElement[e] = newEndpoints; - } - if(endpointsByElement[e].length <1){ - delete endpointsByElement[e]; - } - } - }; - - this.detach = function() { - - if (arguments.length === 0) return; - var connType = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), - firstArgIsConnection = arguments[0].constructor == connType, - params = arguments.length == 2 ? firstArgIsConnection ? (arguments[1] || {}) : arguments[0] : arguments[0], - fireEvent = (params.fireEvent !== false), - forceDetach = params.forceDetach, - conn = firstArgIsConnection ? arguments[0] : params.connection; - - if (conn) { - if (forceDetach || jsPlumbUtil.functionChain(true, false, [ - [ conn.endpoints[0], "isDetachAllowed", [ conn ] ], - [ conn.endpoints[1], "isDetachAllowed", [ conn ] ], - [ conn, "isDetachAllowed", [ conn ] ], - [ _currentInstance, "checkCondition", [ "beforeDetach", conn ] ] ])) { - - conn.endpoints[0].detach(conn, false, true, fireEvent); - } - } - else { - var _p = jsPlumb.extend( {}, params); // a backwards compatibility hack: source should be thought of as 'params' in this case. - // test for endpoint uuids to detach - if (_p.uuids) { - _getEndpoint(_p.uuids[0]).detachFrom(_getEndpoint(_p.uuids[1]), fireEvent); - } else if (_p.sourceEndpoint && _p.targetEndpoint) { - _p.sourceEndpoint.detachFrom(_p.targetEndpoint); - } else { - var sourceId = _getId(_dom(_p.source)), - targetId = _getId(_dom(_p.target)); - _operation(sourceId, function(jpc) { - if ((jpc.sourceId == sourceId && jpc.targetId == targetId) || (jpc.targetId == sourceId && jpc.sourceId == targetId)) { - if (_currentInstance.checkCondition("beforeDetach", jpc)) { - jpc.endpoints[0].detach(jpc, false, true, fireEvent); - } - } - }); - } - } - }; - - this.detachAllConnections = function(el, params) { - params = params || {}; - el = _dom(el); - var id = _getId(el), - endpoints = endpointsByElement[id]; - if (endpoints && endpoints.length) { - for ( var i = 0, j = endpoints.length; i < j; i++) { - endpoints[i].detachAll(params.fireEvent !== false); - } - } - return _currentInstance; - }; - - this.detachEveryConnection = function(params) { - params = params || {}; - _currentInstance.doWhileSuspended(function() { - for ( var id in endpointsByElement) { - var endpoints = endpointsByElement[id]; - if (endpoints && endpoints.length) { - for ( var i = 0, j = endpoints.length; i < j; i++) { - endpoints[i].detachAll(params.fireEvent !== false); - } - } - } - connections.splice(0); - }); - return _currentInstance; - }; - - /// not public. but of course its exposed. how to change this. - this.deleteObject = function(params) { - var result = { - endpoints : {}, - connections : {}, - endpointCount:0, - connectionCount:0 - }, - fireEvent = params.fireEvent !== false, - deleteAttachedObjects = params.deleteAttachedObjects !== false; - - var unravelConnection = function(connection) { - if(connection != null && result.connections[connection.id] == null) { - connection._jsPlumb && connection.setHover(false); - result.connections[connection.id] = connection; - result.connectionCount++; - if (deleteAttachedObjects) { - for (var j = 0; j < connection.endpoints.length; j++) { - if (connection.endpoints[j]._deleteOnDetach) - unravelEndpoint(connection.endpoints[j]); - } - } - } - }; - var unravelEndpoint = function(endpoint) { - if(endpoint != null && result.endpoints[endpoint.id] == null) { - endpoint._jsPlumb && endpoint.setHover(false); - result.endpoints[endpoint.id] = endpoint; - result.endpointCount++; - - if (deleteAttachedObjects) { - for (var i = 0; i < endpoint.connections.length; i++) { - var c = endpoint.connections[i]; - unravelConnection(c); - } - } - } - }; - - if (params.connection) - unravelConnection(params.connection); - else unravelEndpoint(params.endpoint); - - // loop through connections - for (var i in result.connections) { - var c = result.connections[i]; - c.endpoints[0].detachFromConnection(c); - c.endpoints[1].detachFromConnection(c); - //_currentInstance.unregisterConnection(c); - jsPlumbUtil.removeWithFunction(connections, function(_c) { - return c.id == _c.id; - }); - fireDetachEvent(c, fireEvent, params.originalEvent); - c.cleanup(); - c.destroy(); - } - - // loop through endpoints - for (var j in result.endpoints) { - var e = result.endpoints[j]; - _currentInstance.unregisterEndpoint(e); - // FIRE some endpoint deleted event? - e.cleanup(); - e.destroy(); - } - - return result; - }; - - this.draggable = function(el, options) { - var i,j,ele; - // allows for array or jquery/mootools selector - if (typeof el == 'object' && el.length) { - for (i = 0, j = el.length; i < j; i++) { - ele = _dom(el[i]); - if (ele) _initDraggableIfNecessary(ele, true, options); - } - } - // allows for YUI selector - else if (el._nodes) { // TODO this is YUI specific; really the logic should be forced - // into the library adapters (for jquery and mootools aswell) - for (i = 0, j = el._nodes.length; i < j; i++) { - ele = _dom(el._nodes[i]); - if (ele) _initDraggableIfNecessary(ele, true, options); - } - } - else { - ele = _dom(el); - if (ele) _initDraggableIfNecessary(ele, true, options); - } - return _currentInstance; - }; - - - // just a library-agnostic wrapper. - this.extend = function(o1, o2) { - return jsPlumb.CurrentLibrary.extend(o1, o2); - }; - - // helpers for select/selectEndpoints - var _setOperation = function(list, func, args, selector) { - for (var i = 0, j = list.length; i < j; i++) { - list[i][func].apply(list[i], args); - } - return selector(list); - }, - _getOperation = function(list, func, args) { - var out = []; - for (var i = 0, j = list.length; i < j; i++) { - out.push([ list[i][func].apply(list[i], args), list[i] ]); - } - return out; - }, - setter = function(list, func, selector) { - return function() { - return _setOperation(list, func, arguments, selector); - }; - }, - getter = function(list, func) { - return function() { - return _getOperation(list, func, arguments); - }; - }, - prepareList = function(input, doNotGetIds) { - var r = []; - if (input) { - if (typeof input == 'string') { - if (input === "*") return input; - r.push(input); - } - else { - input = _gel(input); - if (doNotGetIds) r = input; - else { - for (var i = 0, j = input.length; i < j; i++) - r.push(_info(input[i]).id); - } - } - } - return r; - }, - filterList = function(list, value, missingIsFalse) { - if (list === "*") return true; - return list.length > 0 ? jsPlumbUtil.indexOf(list, value) != -1 : !missingIsFalse; - }; - - // get some connections, specifying source/target/scope - this.getConnections = function(options, flat) { - if (!options) { - options = {}; - } else if (options.constructor == String) { - options = { "scope": options }; - } - var scope = options.scope || _currentInstance.getDefaultScope(), - scopes = prepareList(scope, true), - sources = prepareList(options.source), - targets = prepareList(options.target), - results = (!flat && scopes.length > 1) ? {} : [], - _addOne = function(scope, obj) { - if (!flat && scopes.length > 1) { - var ss = results[scope]; - if (ss == null) { - ss = results[scope] = []; - } - ss.push(obj); - } else results.push(obj); - }; - - for ( var j = 0, jj = connections.length; j < jj; j++) { - var c = connections[j]; - if (filterList(scopes, c.scope) && filterList(sources, c.sourceId) && filterList(targets, c.targetId)) - _addOne(c.scope, c); - } - - return results; - }; - - var _curryEach = function(list, executor) { - return function(f) { - for (var i = 0, ii = list.length; i < ii; i++) { - f(list[i]); - } - return executor(list); - }; - }, - _curryGet = function(list) { - return function(idx) { - return list[idx]; - }; - }; - - var _makeCommonSelectHandler = function(list, executor) { - var out = { - length:list.length, - each:_curryEach(list, executor), - get:_curryGet(list) - }, - setters = ["setHover", "removeAllOverlays", "setLabel", "addClass", "addOverlay", "removeOverlay", - "removeOverlays", "showOverlay", "hideOverlay", "showOverlays", "hideOverlays", "setPaintStyle", - "setHoverPaintStyle", "setSuspendEvents", "setParameter", "setParameters", "setVisible", - "repaint", "addType", "toggleType", "removeType", "removeClass", "setType", "bind", "unbind" ], - - getters = ["getLabel", "getOverlay", "isHover", "getParameter", "getParameters", "getPaintStyle", - "getHoverPaintStyle", "isVisible", "hasType", "getType", "isSuspendEvents" ], - i, ii; - - for (i = 0, ii = setters.length; i < ii; i++) - out[setters[i]] = setter(list, setters[i], executor); - - for (i = 0, ii = getters.length; i < ii; i++) - out[getters[i]] = getter(list, getters[i]); - - return out; - }; - - var _makeConnectionSelectHandler = function(list) { - var common = _makeCommonSelectHandler(list, _makeConnectionSelectHandler); - return jsPlumb.CurrentLibrary.extend(common, { - // setters - setDetachable:setter(list, "setDetachable", _makeConnectionSelectHandler), - setReattach:setter(list, "setReattach", _makeConnectionSelectHandler), - setConnector:setter(list, "setConnector", _makeConnectionSelectHandler), - detach:function() { - for (var i = 0, ii = list.length; i < ii; i++) - _currentInstance.detach(list[i]); - }, - // getters - isDetachable:getter(list, "isDetachable"), - isReattach:getter(list, "isReattach") - }); - }; - - var _makeEndpointSelectHandler = function(list) { - var common = _makeCommonSelectHandler(list, _makeEndpointSelectHandler); - return jsPlumb.CurrentLibrary.extend(common, { - setEnabled:setter(list, "setEnabled", _makeEndpointSelectHandler), - setAnchor:setter(list, "setAnchor", _makeEndpointSelectHandler), - isEnabled:getter(list, "isEnabled"), - detachAll:function() { - for (var i = 0, ii = list.length; i < ii; i++) - list[i].detachAll(); - }, - "remove":function() { - for (var i = 0, ii = list.length; i < ii; i++) - _currentInstance.deleteObject({endpoint:list[i]}); - } - }); - }; - - - this.select = function(params) { - params = params || {}; - params.scope = params.scope || "*"; - return _makeConnectionSelectHandler(params.connections || _currentInstance.getConnections(params, true)); - }; - - this.selectEndpoints = function(params) { - params = params || {}; - params.scope = params.scope || "*"; - var noElementFilters = !params.element && !params.source && !params.target, - elements = noElementFilters ? "*" : prepareList(params.element), - sources = noElementFilters ? "*" : prepareList(params.source), - targets = noElementFilters ? "*" : prepareList(params.target), - scopes = prepareList(params.scope, true); - - var ep = []; - - for (var el in endpointsByElement) { - var either = filterList(elements, el, true), - source = filterList(sources, el, true), - sourceMatchExact = sources != "*", - target = filterList(targets, el, true), - targetMatchExact = targets != "*"; - - // if they requested 'either' then just match scope. otherwise if they requested 'source' (not as a wildcard) then we have to match only endpoints that have isSource set to to true, and the same thing with isTarget. - if ( either || source || target ) { - inner: - for (var i = 0, ii = endpointsByElement[el].length; i < ii; i++) { - var _ep = endpointsByElement[el][i]; - if (filterList(scopes, _ep.scope, true)) { - - var noMatchSource = (sourceMatchExact && sources.length > 0 && !_ep.isSource), - noMatchTarget = (targetMatchExact && targets.length > 0 && !_ep.isTarget); - - if (noMatchSource || noMatchTarget) - continue inner; - - ep.push(_ep); - } - } - } - } - - return _makeEndpointSelectHandler(ep); - }; - - // get all connections managed by the instance of jsplumb. - this.getAllConnections = function() { return connections; }; - this.getDefaultScope = function() { return DEFAULT_SCOPE; }; - // get an endpoint by uuid. - this.getEndpoint = _getEndpoint; - // get endpoints for some element. - this.getEndpoints = function(el) { return endpointsByElement[_info(el).id]; }; - // gets the default endpoint type. used when subclassing. see wiki. - this.getDefaultEndpointType = function() { return jsPlumb.Endpoint; }; - // gets the default connection type. used when subclassing. see wiki. - this.getDefaultConnectionType = function() { return jsPlumb.Connection; }; - /* - * Gets an element's id, creating one if necessary. really only exposed - * for the lib-specific functionality to access; would be better to pass - * the current instance into the lib-specific code (even though this is - * a static call. i just don't want to expose it to the public API). - */ - this.getId = _getId; - this.getOffset = function(id) { - var o = offsets[id]; - return _updateOffset({elId:id}); - }; - - this.getSelector = function() { - return jsPlumb.CurrentLibrary.getSelector.apply(null, arguments); - }; - - // get the size of the element with the given id, perhaps from cache. - this.getSize = function(id) { - var s = sizes[id]; - if (!s) _updateOffset({elId:id}); - return sizes[id]; - }; - - this.appendElement = _appendElement; - - var _hoverSuspended = false; - this.isHoverSuspended = function() { return _hoverSuspended; }; - this.setHoverSuspended = function(s) { _hoverSuspended = s; }; - - var _isAvailable = function(m) { - return function() { - return jsPlumbAdapter.isRenderModeAvailable(m); - }; - }; - this.isCanvasAvailable = _isAvailable("canvas"); - this.isSVGAvailable = _isAvailable("svg"); - this.isVMLAvailable = _isAvailable("vml"); - - // set an element's connections to be hidden - this.hide = function(el, changeEndpoints) { - _setVisible(el, "none", changeEndpoints); - return _currentInstance; - }; - - // exposed for other objects to use to get a unique id. - this.idstamp = _idstamp; - - this.connectorsInitialized = false; - var connectorTypes = [], rendererTypes = ["canvas", "svg", "vml"]; - this.registerConnectorType = function(connector, name) { - connectorTypes.push([connector, name]); - }; - - /** - * callback from the current library to tell us to prepare ourselves (attach - * mouse listeners etc; can't do that until the library has provided a bind method) - */ - this.init = function() { - var _oneType = function(renderer, name, fn) { - jsPlumb.Connectors[renderer][name] = function() { - fn.apply(this, arguments); - jsPlumb.ConnectorRenderers[renderer].apply(this, arguments); - }; - jsPlumbUtil.extend(jsPlumb.Connectors[renderer][name], [ fn, jsPlumb.ConnectorRenderers[renderer]]); - }; - - if (!jsPlumb.connectorsInitialized) { - for (var i = 0; i < connectorTypes.length; i++) { - for (var j = 0; j < rendererTypes.length; j++) { - _oneType(rendererTypes[j], connectorTypes[i][1], connectorTypes[i][0]); - } - - } - jsPlumb.connectorsInitialized = true; - } - - if (!initialized) { - _currentInstance.anchorManager = new jsPlumb.AnchorManager({jsPlumbInstance:_currentInstance}); - _currentInstance.setRenderMode(_currentInstance.Defaults.RenderMode); // calling the method forces the capability logic to be run. - initialized = true; - _currentInstance.fire("ready", _currentInstance); - } - }.bind(this); - - this.log = log; - this.jsPlumbUIComponent = jsPlumbUIComponent; - - /* - * Creates an anchor with the given params. - * - * - * Returns: The newly created Anchor. - * Throws: an error if a named anchor was not found. - */ - this.makeAnchor = function() { - var _a = function(t, p) { - if (jsPlumb.Anchors[t]) return new jsPlumb.Anchors[t](p); - if (!_currentInstance.Defaults.DoNotThrowErrors) - throw { msg:"jsPlumb: unknown anchor type '" + t + "'" }; - }; - if (arguments.length === 0) return null; - var specimen = arguments[0], elementId = arguments[1], jsPlumbInstance = arguments[2], newAnchor = null; - // if it appears to be an anchor already... - if (specimen.compute && specimen.getOrientation) return specimen; //TODO hazy here about whether it should be added or is already added somehow. - // is it the name of an anchor type? - else if (typeof specimen == "string") { - newAnchor = _a(arguments[0], {elementId:elementId, jsPlumbInstance:_currentInstance}); - } - // is it an array? it will be one of: - // an array of [name, params] - this defines a single anchor - // an array of arrays - this defines some dynamic anchors - // an array of numbers - this defines a single anchor. - else if (_ju.isArray(specimen)) { - if (_ju.isArray(specimen[0]) || _ju.isString(specimen[0])) { - if (specimen.length == 2 && _ju.isString(specimen[0]) && _ju.isObject(specimen[1])) { - var pp = jsPlumb.extend({elementId:elementId, jsPlumbInstance:_currentInstance}, specimen[1]); - newAnchor = _a(specimen[0], pp); - } - else - newAnchor = new jsPlumb.DynamicAnchor({anchors:specimen, selector:null, elementId:elementId, jsPlumbInstance:jsPlumbInstance}); - } - else { - var anchorParams = { - x:specimen[0], y:specimen[1], - orientation : (specimen.length >= 4) ? [ specimen[2], specimen[3] ] : [0,0], - offsets : (specimen.length >= 6) ? [ specimen[4], specimen[5] ] : [ 0, 0 ], - elementId:elementId, - jsPlumbInstance:jsPlumbInstance, - cssClass:specimen.length == 7 ? specimen[6] : null - }; - newAnchor = new jsPlumb.Anchor(anchorParams); - newAnchor.clone = function() { return new jsPlumb.Anchor(anchorParams); }; - } - } - - if (!newAnchor.id) newAnchor.id = "anchor_" + _idstamp(); - return newAnchor; - }; - - /** - * makes a list of anchors from the given list of types or coords, eg - * ["TopCenter", "RightMiddle", "BottomCenter", [0, 1, -1, -1] ] - */ - this.makeAnchors = function(types, elementId, jsPlumbInstance) { - var r = []; - for ( var i = 0, ii = types.length; i < ii; i++) { - if (typeof types[i] == "string") - r.push(jsPlumb.Anchors[types[i]]({elementId:elementId, jsPlumbInstance:jsPlumbInstance})); - else if (_ju.isArray(types[i])) - r.push(_currentInstance.makeAnchor(types[i], elementId, jsPlumbInstance)); - } - return r; - }; - - /** - * Makes a dynamic anchor from the given list of anchors (which may be in shorthand notation as strings or dimension arrays, or Anchor - * objects themselves) and the given, optional, anchorSelector function (jsPlumb uses a default if this is not provided; most people will - * not need to provide this - i think). - */ - this.makeDynamicAnchor = function(anchors, anchorSelector) { - return new jsPlumb.DynamicAnchor({anchors:anchors, selector:anchorSelector, elementId:null, jsPlumbInstance:_currentInstance}); - }; - -// --------------------- makeSource/makeTarget ---------------------------------------------- - - var _targetEndpointDefinitions = {}, - _targetEndpoints = {}, - _targetEndpointsUnique = {}, - _targetMaxConnections = {}, - _setEndpointPaintStylesAndAnchor = function(ep, epIndex) { - ep.paintStyle = ep.paintStyle || - _currentInstance.Defaults.EndpointStyles[epIndex] || - _currentInstance.Defaults.EndpointStyle || - jsPlumb.Defaults.EndpointStyles[epIndex] || - jsPlumb.Defaults.EndpointStyle; - ep.hoverPaintStyle = ep.hoverPaintStyle || - _currentInstance.Defaults.EndpointHoverStyles[epIndex] || - _currentInstance.Defaults.EndpointHoverStyle || - jsPlumb.Defaults.EndpointHoverStyles[epIndex] || - jsPlumb.Defaults.EndpointHoverStyle; - - ep.anchor = ep.anchor || - _currentInstance.Defaults.Anchors[epIndex] || - _currentInstance.Defaults.Anchor || - jsPlumb.Defaults.Anchors[epIndex] || - jsPlumb.Defaults.Anchor; - - ep.endpoint = ep.endpoint || - _currentInstance.Defaults.Endpoints[epIndex] || - _currentInstance.Defaults.Endpoint || - jsPlumb.Defaults.Endpoints[epIndex] || - jsPlumb.Defaults.Endpoint; - }, - // TODO put all the source stuff inside one parent, keyed by id. - _sourceEndpointDefinitions = {}, - _sourceEndpoints = {}, - _sourceEndpointsUnique = {}, - _sourcesEnabled = {}, - _sourceTriggers = {}, - _sourceMaxConnections = {}, - _targetsEnabled = {}, - selectorFilter = function(evt, _el, selector) { - var t = evt.target || evt.srcElement, ok = false, - sel = _currentInstance.getSelector(_el, selector); - for (var j = 0; j < sel.length; j++) { - if (sel[j] == t) { - ok = true; - break; - } - } - return ok; - }; - - // see API docs - this.makeTarget = function(el, params, referenceParams) { - - // put jsplumb ref into params without altering the params passed in - var p = jsPlumb.extend({_jsPlumb:_currentInstance}, referenceParams); - jsPlumb.extend(p, params); - - // calculate appropriate paint styles and anchor from the params given - _setEndpointPaintStylesAndAnchor(p, 1); - - var jpcl = jsPlumb.CurrentLibrary, - targetScope = p.scope || _currentInstance.Defaults.Scope, - deleteEndpointsOnDetach = !(p.deleteEndpointsOnDetach === false), - maxConnections = p.maxConnections || -1, - onMaxConnections = p.onMaxConnections; - - _doOne = function(el) { - - // get the element's id and store the endpoint definition for it. jsPlumb.connect calls will look for one of these, - // and use the endpoint definition if found. - // decode the info for this element (id and element) - var elInfo = _info(el), - elid = elInfo.id, - proxyComponent = new jsPlumbUIComponent(p), - dropOptions = jsPlumb.extend({}, p.dropOptions || {}); - - // store the definitions keyed against the element id. - _targetEndpointDefinitions[elid] = p; - _targetEndpointsUnique[elid] = p.uniqueEndpoint; - _targetMaxConnections[elid] = maxConnections; - _targetsEnabled[elid] = true; - - var _drop = function() { - _currentInstance.currentlyDragging = false; - var originalEvent = jsPlumb.CurrentLibrary.getDropEvent(arguments), - targetCount = _currentInstance.select({target:elid}).length, - draggable = _gel(jpcl.getDragObject(arguments)), - id = _currentInstance.getAttribute(draggable, "dragId"), - scope = _currentInstance.getAttribute(draggable, "originalScope"), - jpc = floatingConnections[id], - idx = jpc.endpoints[0].isFloating() ? 0 : 1, - // this is not necessarily correct. if the source is being dragged, - // then the source endpoint is actually the currently suspended endpoint. - source = jpc.endpoints[0], - _endpoint = p.endpoint ? jsPlumb.extend({}, p.endpoint) : {}; - - if (!_targetsEnabled[elid] || _targetMaxConnections[elid] > 0 && targetCount >= _targetMaxConnections[elid]){ - if (onMaxConnections) { - // TODO here we still have the id of the floating element, not the - // actual target. - onMaxConnections({ - element:elInfo.el, - connection:jpc - }, originalEvent); - } - return false; - } - - // unlock the source anchor to allow it to refresh its position if necessary - source.anchor.locked = false; - - // restore the original scope if necessary (issue 57) - if (scope) jpcl.setDragScope(draggable, scope); - - // check if drop is allowed here. - // if the source is being dragged then in fact - // the source and target ids to pass into the drop interceptor are - // source - elid - // target - jpc's targetId - // - // otherwise the ids are - // source - jpc.sourceId - // target - elid - // - var _continue = proxyComponent.isDropAllowed(idx === 0 ? elid : jpc.sourceId, idx === 0 ? jpc.targetId : elid, jpc.scope, jpc, null); - - // reinstate any suspended endpoint; this just puts the connection back into - // a state in which it will report sensible values if someone asks it about - // its target. we're going to throw this connection away shortly so it doesnt matter - // if we manipulate it a bit. - if (jpc.suspendedEndpoint) { - jpc[idx ? "targetId" : "sourceId"] = jpc.suspendedEndpoint.elementId; - jpc[idx ? "target" : "source"] = jpc.suspendedEndpoint.element; - jpc.endpoints[idx] = jpc.suspendedEndpoint; - } - - if (_continue) { - - // make a new Endpoint for the target - var _el = jpcl.getElementObject(elInfo.el), - newEndpoint = _targetEndpoints[elid] || _currentInstance.addEndpoint(_el, p); - - if (p.uniqueEndpoint) _targetEndpoints[elid] = newEndpoint; // may of course just store what it just pulled out. that's ok. - // TODO test options to makeTarget to see if we should do this? - newEndpoint._doNotDeleteOnDetach = false; // reset. - newEndpoint._deleteOnDetach = true; - - // if the anchor has a 'positionFinder' set, then delegate to that function to find - // out where to locate the anchor. - if (newEndpoint.anchor.positionFinder != null) { - var dropPosition = jpcl.getUIPosition(arguments, _currentInstance.getZoom()), - elPosition = _getOffset(_el, _currentInstance), - elSize = _getSize(_el), - ap = newEndpoint.anchor.positionFinder(dropPosition, elPosition, elSize, newEndpoint.anchor.constructorParams); - newEndpoint.anchor.x = ap[0]; - newEndpoint.anchor.y = ap[1]; - // now figure an orientation for it..kind of hard to know what to do actually. probably the best thing i can do is to - // support specifying an orientation in the anchor's spec. if one is not supplied then i will make the orientation - // be what will cause the most natural link to the source: it will be pointing at the source, but it needs to be - // specified in one axis only, and so how to make that choice? i think i will use whichever axis is the one in which - // the target is furthest away from the source. - } - - // change the target endpoint and target element information. really this should be - // done on a method on connection - jpc[idx ? "target" : "source"] = newEndpoint.element; - jpc[idx ? "targetId" : "sourceId"] = newEndpoint.elementId; - jpc.endpoints[idx].detachFromConnection(jpc); - if (jpc.endpoints[idx]._deleteOnDetach) - jpc.endpoints[idx].deleteAfterDragStop = true; // tell this endpoint to delet itself after drag stop. - // set new endpoint, and configure the settings for endpoints to delete on detach - newEndpoint.addConnection(jpc); - jpc.endpoints[idx] = newEndpoint; - jpc.deleteEndpointsOnDetach = deleteEndpointsOnDetach; - - // inform the anchor manager to update its target endpoint for this connection. - // TODO refactor to make this a single method. - if (idx == 1) - _currentInstance.anchorManager.updateOtherEndpoint(jpc.sourceId, jpc.suspendedElementId, jpc.targetId, jpc); - else - _currentInstance.anchorManager.sourceChanged(jpc.suspendedEndpoint.elementId, jpc.sourceId, jpc); - - _finaliseConnection(jpc, null, originalEvent); - - } - // if not allowed to drop... - else { - // TODO this code is identical (pretty much) to what happens when a connection - // dragged from a normal endpoint is in this situation. refactor. - // is this an existing connection, and will we reattach? - // TODO also this assumes the source needs to detach - is that always valid? - if (jpc.suspendedEndpoint) { - if (jpc.isReattach()) { - jpc.setHover(false); - jpc.floatingAnchorIndex = null; - jpc.suspendedEndpoint.addConnection(jpc); - _currentInstance.repaint(source.elementId); - } - else - source.detach(jpc, false, true, true, originalEvent); // otherwise, detach the connection and tell everyone about it. - } - - } - }; - - // wrap drop events as needed and initialise droppable - var dropEvent = jpcl.dragEvents.drop; - dropOptions.scope = dropOptions.scope || targetScope; - dropOptions[dropEvent] = _ju.wrap(dropOptions[dropEvent], _drop); - jpcl.initDroppable(_gel(elInfo.el), dropOptions, true); - }; - - // YUI collection fix - el = _convertYUICollection(el); - // make an array if only given one element - var inputs = el.length && el.constructor != String ? el : [ el ]; - - // register each one in the list. - for (var i = 0, ii = inputs.length; i < ii; i++) { - _doOne(inputs[i]); - } - - return _currentInstance; - }; - - // see api docs - this.unmakeTarget = function(el, doNotClearArrays) { - var info = _info(el); - - jsPlumb.CurrentLibrary.destroyDroppable(info.el); - // TODO this is not an exhaustive unmake of a target, since it does not remove the droppable stuff from - // the element. the effect will be to prevent it from behaving as a target, but it's not completely purged. - if (!doNotClearArrays) { - delete _targetEndpointDefinitions[info.id]; - delete _targetEndpointsUnique[info.id]; - delete _targetMaxConnections[info.id]; - delete _targetsEnabled[info.id]; - } - - return _currentInstance; - }; - - // see api docs - this.makeSource = function(el, params, referenceParams) { - var p = jsPlumb.extend({}, referenceParams); - jsPlumb.extend(p, params); - _setEndpointPaintStylesAndAnchor(p, 0); - var jpcl = jsPlumb.CurrentLibrary, - maxConnections = p.maxConnections || -1, - onMaxConnections = p.onMaxConnections, - _doOne = function(elInfo) { - // get the element's id and store the endpoint definition for it. jsPlumb.connect calls will look for one of these, - // and use the endpoint definition if found. - var elid = elInfo.id, - _el = _gel(elInfo.el), - parentElement = function() { - return p.parent == null ? null : p.parent === "parent" ? elInfo.el.parentNode : _dom(p.parent); - }, - idToRegisterAgainst = p.parent != null ? _currentInstance.getId(parentElement()) : elid; - - _sourceEndpointDefinitions[idToRegisterAgainst] = p; - _sourceEndpointsUnique[idToRegisterAgainst] = p.uniqueEndpoint; - _sourcesEnabled[idToRegisterAgainst] = true; - - var stopEvent = jpcl.dragEvents.stop, - dragEvent = jpcl.dragEvents.drag, - dragOptions = jsPlumb.extend({ }, p.dragOptions || {}), - existingDrag = dragOptions.drag, - existingStop = dragOptions.stop, - ep = null, - endpointAddedButNoDragYet = false; - - _sourceMaxConnections[idToRegisterAgainst] = maxConnections; - - // set scope if its not set in dragOptions but was passed in in params - dragOptions.scope = dragOptions.scope || p.scope; - - dragOptions[dragEvent] = _ju.wrap(dragOptions[dragEvent], function() { - if (existingDrag) existingDrag.apply(this, arguments); - endpointAddedButNoDragYet = false; - }); - - dragOptions[stopEvent] = _ju.wrap(dragOptions[stopEvent], function() { - - if (existingStop) existingStop.apply(this, arguments); - _currentInstance.currentlyDragging = false; - if (ep._jsPlumb != null) { // if not cleaned up... - - jpcl.unbind(ep.canvas, "mousedown"); - - // reset the anchor to the anchor that was initially provided. the one we were using to drag - // the connection was just a placeholder that was located at the place the user pressed the - // mouse button to initiate the drag. - var anchorDef = p.anchor || _currentInstance.Defaults.Anchor, - oldAnchor = ep.anchor, - oldConnection = ep.connections[0]; - - ep.setAnchor(_currentInstance.makeAnchor(anchorDef, elid, _currentInstance), true); - - if (p.parent) { - var parent = parentElement(); - if (parent) { - var currentId = ep.elementId, - potentialParent = p.container || _currentInstance.Defaults.Container || jsPlumb.Defaults.Container; - - ep.setElement(parent, potentialParent); - ep.endpointWillMoveAfterConnection = false; - //_currentInstance.anchorManager.rehomeEndpoint(ep, currentId, parent); - oldConnection.previousConnection = null; - // remove from connectionsByScope - jsPlumbUtil.removeWithFunction(connections, function(c) { - return c.id === oldConnection.id; - }); - _currentInstance.anchorManager.connectionDetached({ - sourceId:oldConnection.sourceId, - targetId:oldConnection.targetId, - connection:oldConnection - }); - _finaliseConnection(oldConnection); - } - } - - ep.repaint(); - _currentInstance.repaint(ep.elementId); - _currentInstance.repaint(oldConnection.targetId); - } - }); - // when the user presses the mouse, add an Endpoint, if we are enabled. - var mouseDownListener = function(e) { - - // if disabled, return. - if (!_sourcesEnabled[idToRegisterAgainst]) return; - - // if a filter was given, run it, and return if it says no. - if (p.filter) { - var evt = jpcl.getOriginalEvent(e), - r = jsPlumbUtil.isString(p.filter) ? selectorFilter(evt, _el, p.filter) : p.filter(evt, _el); - - if (r === false) return; - } - - // if maxConnections reached - var sourceCount = _currentInstance.select({source:idToRegisterAgainst}).length; - if (_sourceMaxConnections[idToRegisterAgainst] >= 0 && sourceCount >= _sourceMaxConnections[idToRegisterAgainst]) { - if (onMaxConnections) { - onMaxConnections({ - element:_el, - maxConnections:maxConnections - }, e); - } - return false; - } - - // make sure we have the latest offset for this div - var myOffsetInfo = _updateOffset({elId:elid}).o, - z = _currentInstance.getZoom(), - x = ( ((e.pageX || e.page.x) / z) - myOffsetInfo.left) / myOffsetInfo.width, - y = ( ((e.pageY || e.page.y) / z) - myOffsetInfo.top) / myOffsetInfo.height, - parentX = x, - parentY = y; - - // if there is a parent, the endpoint will actually be added to it now, rather than the div - // that was the source. in that case, we have to adjust the anchor position so it refers to - // the parent. - if (p.parent) { - var pEl = parentElement(), pId = _getId(pEl); - myOffsetInfo = _updateOffset({elId:pId}).o; - parentX = ((e.pageX || e.page.x) - myOffsetInfo.left) / myOffsetInfo.width; - parentY = ((e.pageY || e.page.y) - myOffsetInfo.top) / myOffsetInfo.height; - } - - // we need to override the anchor in here, and force 'isSource', but we don't want to mess with - // the params passed in, because after a connection is established we're going to reset the endpoint - // to have the anchor we were given. - var tempEndpointParams = {}; - jsPlumb.extend(tempEndpointParams, p); - tempEndpointParams.isSource = true; - tempEndpointParams.anchor = [x,y,0,0]; - tempEndpointParams.parentAnchor = [ parentX, parentY, 0, 0 ]; - tempEndpointParams.dragOptions = dragOptions; - // if a parent was given we need to turn that into a "container" argument. this is, by default, - // the parent of the element we will move to, so parent of p.parent in this case. however, if - // the user has specified a 'container' on the endpoint definition or on - // the defaults, we should use that. - if (p.parent) { - var potentialParent = tempEndpointParams.container || _currentInstance.Defaults.Container || jsPlumb.Defaults.Container; - if (potentialParent) - tempEndpointParams.container = potentialParent; - else - tempEndpointParams.container = jsPlumb.CurrentLibrary.getParent(parentElement()); - } - - ep = _currentInstance.addEndpoint(elid, tempEndpointParams); - - endpointAddedButNoDragYet = true; - // we set this to prevent connections from firing attach events before this function has had a chance - // to move the endpoint. - ep.endpointWillMoveAfterConnection = p.parent != null; - ep.endpointWillMoveTo = p.parent ? parentElement() : null; - - // TODO test options to makeSource to see if we should do this? - ep._doNotDeleteOnDetach = false; // reset. - ep._deleteOnDetach = true; - - var _delTempEndpoint = function() { - // this mouseup event is fired only if no dragging occurred, by jquery and yui, but for mootools - // it is fired even if dragging has occurred, in which case we would blow away a perfectly - // legitimate endpoint, were it not for this check. the flag is set after adding an - // endpoint and cleared in a drag listener we set in the dragOptions above. - if(endpointAddedButNoDragYet) { - endpointAddedButNoDragYet = false; - _currentInstance.deleteEndpoint(ep); - } - }; - - _currentInstance.registerListener(ep.canvas, "mouseup", _delTempEndpoint); - _currentInstance.registerListener(_el, "mouseup", _delTempEndpoint); - - // and then trigger its mousedown event, which will kick off a drag, which will start dragging - // a new connection from this endpoint. - jpcl.trigger(ep.canvas, "mousedown", e); - - }; - - // register this on jsPlumb so that it can be cleared by a reset. - _currentInstance.registerListener(_el, "mousedown", mouseDownListener); - _sourceTriggers[elid] = mouseDownListener; - - // lastly, if a filter was provided, set it as a dragFilter on the element, - // to prevent the element drag function from kicking in when we want to - // drag a new connection - if (p.filter && jsPlumbUtil.isString(p.filter)) { - jpcl.setDragFilter(_el, p.filter); - } - }; - - el = _convertYUICollection(el); - - var inputs = el.length && el.constructor != String ? el : [ el ]; - - for (var i = 0, ii = inputs.length; i < ii; i++) { - _doOne(_info(inputs[i])); - } - - return _currentInstance; - }; - - // see api docs - this.unmakeSource = function(el, doNotClearArrays) { - var info = _info(el), - mouseDownListener = _sourceTriggers[info.id]; - - if (mouseDownListener) - _currentInstance.unregisterListener(info.el, "mousedown", mouseDownListener); - - if (!doNotClearArrays) { - delete _sourceEndpointDefinitions[info.id]; - delete _sourceEndpointsUnique[info.id]; - delete _sourcesEnabled[info.id]; - delete _sourceTriggers[info.id]; - delete _sourceMaxConnections[info.id]; - } - - return _currentInstance; - }; - - // see api docs - this.unmakeEverySource = function() { - for (var i in _sourcesEnabled) - _currentInstance.unmakeSource(i, true); - - _sourceEndpointDefinitions = {}; - _sourceEndpointsUnique = {}; - _sourcesEnabled = {}; - _sourceTriggers = {}; - }; - - // see api docs - this.unmakeEveryTarget = function() { - for (var i in _targetsEnabled) - _currentInstance.unmakeTarget(i, true); - - _targetEndpointDefinitions = {}; - _targetEndpointsUnique = {}; - _targetMaxConnections = {}; - _targetsEnabled = {}; - - return _currentInstance; - }; - - // does the work of setting a source enabled or disabled. - var _setEnabled = function(type, el, state, toggle) { - var a = type == "source" ? _sourcesEnabled : _targetsEnabled; - el = _convertYUICollection(el); - - if (_ju.isString(el)) a[el] = toggle ? !a[el] : state; - else if (el.length) { - for (var i = 0, ii = el.length; i < ii; i++) { - var info = _info(el[i]); - a[info.id] = toggle ? !a[info.id] : state; - } - } - return _currentInstance; - }; - - this.toggleSourceEnabled = function(el) { - _setEnabled("source", el, null, true); - return _currentInstance.isSourceEnabled(el); - }; - - this.setSourceEnabled = function(el, state) { return _setEnabled("source", el, state); }; - this.isSource = function(el) { return _sourcesEnabled[_info(el).id] != null; }; - this.isSourceEnabled = function(el) { return _sourcesEnabled[_info(el).id] === true; }; - - this.toggleTargetEnabled = function(el) { - _setEnabled("target", el, null, true); - return _currentInstance.isTargetEnabled(el); - }; - - this.isTarget = function(el) { return _targetsEnabled[_info(el).id] != null; }; - this.isTargetEnabled = function(el) { return _targetsEnabled[_info(el).id] === true; }; - this.setTargetEnabled = function(el, state) { return _setEnabled("target", el, state); }; - -// --------------------- end makeSource/makeTarget ---------------------------------------------- - - this.ready = function(fn) { - _currentInstance.bind("ready", fn); - }; - - // repaint some element's endpoints and connections - this.repaint = function(el, ui, timestamp) { - // support both lists... - if (typeof el == 'object' && el.length) - for ( var i = 0, ii = el.length; i < ii; i++) { - _draw(el[i], ui, timestamp); - } - else // ...and single strings. - _draw(el, ui, timestamp); - - return _currentInstance; - }; - - // repaint every endpoint and connection. - this.repaintEverything = function() { - // TODO this timestamp causes continuous anchors to not repaint properly. - // fix this. do not just take out the timestamp. it runs a lot faster with - // the timestamp included. - var timestamp = _timestamp(); - for ( var elId in endpointsByElement) { - _draw(elId, null, timestamp); - } - return _currentInstance; - /*for (var i = 0; i < connections.length; i++) - connections[i].repaint({timestamp:timestamp});*/ - }; - - - this.removeAllEndpoints = function(el, recurse) { - var _one = function(_el) { - var info = _info(_el), - ebe = endpointsByElement[info.id], - i, ii; - - if (ebe) { - for ( i = 0, ii = ebe.length; i < ii; i++) - _currentInstance.deleteEndpoint(ebe[i]); - } - delete endpointsByElement[info.id]; - - if (recurse) { - if (info.el && info.el.nodeType != 3 && info.el.nodeType != 8 ) { - for ( i = 0, ii = info.el.childNodes.length; i < ii; i++) { - _one(info.el.childNodes[i]); - } - } - } - - }; - _one(el); - return _currentInstance; - }; - - /** - * Remove the given element, including cleaning up all endpoints registered for it. - * This is exposed in the public API but also used internally by jsPlumb when removing the - * element associated with a connection drag. - */ - this.remove = function(el, doNotRepaint) { - var info = _info(el); - _currentInstance.doWhileSuspended(function() { - _currentInstance.removeAllEndpoints(info.id, true); - _currentInstance.dragManager.elementRemoved(info.id); - delete floatingConnections[info.id]; - _currentInstance.anchorManager.clearFor(info.id); - _currentInstance.anchorManager.removeFloatingConnection(info.id); - }, doNotRepaint === false); - if(info.el) jsPlumb.CurrentLibrary.removeElement(info.el); - }; - - var _registeredListeners = {}, - _unbindRegisteredListeners = function() { - for (var i in _registeredListeners) { - for (var j = 0, jj = _registeredListeners[i].length; j < jj; j++) { - var info = _registeredListeners[i][j]; - jsPlumb.CurrentLibrary.unbind(info.el, info.event, info.listener); - } - } - _registeredListeners = {}; - }; - - // internal register listener method. gives us a hook to clean things up - // with if the user calls jsPlumb.reset. - this.registerListener = function(el, type, listener) { - jsPlumb.CurrentLibrary.bind(el, type, listener); - jsPlumbUtil.addToList(_registeredListeners, type, {el:el, event:type, listener:listener}); - }; - - this.unregisterListener = function(el, type, listener) { - jsPlumb.CurrentLibrary.unbind(el, type, listener); - jsPlumbUtil.removeWithFunction(_registeredListeners, function(rl) { - return rl.type == type && rl.listener == listener; - }); - }; - - this.reset = function() { - _currentInstance.deleteEveryEndpoint(); - _currentInstance.unbind(); - _targetEndpointDefinitions = {}; - _targetEndpoints = {}; - _targetEndpointsUnique = {}; - _targetMaxConnections = {}; - _sourceEndpointDefinitions = {}; - _sourceEndpoints = {}; - _sourceEndpointsUnique = {}; - _sourceMaxConnections = {}; - connections.splice(0); - _unbindRegisteredListeners(); - _currentInstance.anchorManager.reset(); - if (!jsPlumbAdapter.headless) - _currentInstance.dragManager.reset(); - }; - - - this.setDefaultScope = function(scope) { - DEFAULT_SCOPE = scope; - return _currentInstance; - }; - - // sets whether or not some element should be currently draggable. - this.setDraggable = _setDraggable; - - // sets the id of some element, changing whatever we need to to keep track. - this.setId = function(el, newId, doNotSetAttribute) { - // - var id; - - if (jsPlumbUtil.isString(el)) { - id = el; - } - else { - el = _dom(el); - id = _currentInstance.getId(el); - } - - var sConns = _currentInstance.getConnections({source:id, scope:'*'}, true), - tConns = _currentInstance.getConnections({target:id, scope:'*'}, true); - - newId = "" + newId; - - if (!doNotSetAttribute) { - el = _dom(id); - jsPlumbAdapter.setAttribute(el, "id", newId); - } - else - el = _dom(newId); - - endpointsByElement[newId] = endpointsByElement[id] || []; - for (var i = 0, ii = endpointsByElement[newId].length; i < ii; i++) { - endpointsByElement[newId][i].setElementId(newId); - endpointsByElement[newId][i].setReferenceElement(el); - } - delete endpointsByElement[id]; - - _currentInstance.anchorManager.changeId(id, newId); - if (!jsPlumbAdapter.headless) - _currentInstance.dragManager.changeId(id, newId); - - var _conns = function(list, epIdx, type) { - for (var i = 0, ii = list.length; i < ii; i++) { - list[i].endpoints[epIdx].setElementId(newId); - list[i].endpoints[epIdx].setReferenceElement(el); - list[i][type + "Id"] = newId; - list[i][type] = el; - } - }; - _conns(sConns, 0, "source"); - _conns(tConns, 1, "target"); - - _currentInstance.repaint(newId); - }; - - this.setDebugLog = function(debugLog) { - log = debugLog; - }; - - this.setSuspendDrawing = function(val, repaintAfterwards) { - var curVal = _suspendDrawing; - _suspendDrawing = val; - if (val) _suspendedAt = new Date().getTime(); else _suspendedAt = null; - if (repaintAfterwards) _currentInstance.repaintEverything(); - return curVal; - }; - - // returns whether or not drawing is currently suspended. - this.isSuspendDrawing = function() { - return _suspendDrawing; - }; - - // return timestamp for when drawing was suspended. - this.getSuspendedAt = function() { return _suspendedAt; }; - - /** - * @doc function - * @name jsPlumb.class:doWhileSuspended - * @param {function} fn Function to run while suspended. - * @param {boolean} doNotRepaintAfterwards If true, jsPlumb won't run a full repaint. Otherwise it will. - * @description Suspends drawing, runs the given function, then re-enables drawing (and repaints, unless you tell it not to) - */ - this.doWhileSuspended = function(fn, doNotRepaintAfterwards) { - var _wasSuspended = _currentInstance.isSuspendDrawing(); - if (!_wasSuspended) - _currentInstance.setSuspendDrawing(true); - try { - fn(); - } - catch (e) { - _ju.log("Function run while suspended failed", e); - } - if (!_wasSuspended) - _currentInstance.setSuspendDrawing(false, !doNotRepaintAfterwards); - }; - - this.updateOffset = _updateOffset; - this.getOffset = function(elId) { return offsets[elId]; }; - this.getSize = function(elId) { return sizes[elId]; }; - this.getCachedData = _getCachedData; - this.timestamp = _timestamp; - - - - /** - * @doc function - * @name jsPlumb.class:setRenderMode - * @param {string} mode One of `jsPlumb.SVG, `jsPlumb.VML` or `jsPlumb.CANVAS`. - * @description Sets render mode. jsPlumb will fall back to VML if it determines that - * what you asked for is not supported (and that VML is). If you asked for VML but the browser does - * not support it, jsPlumb uses SVG. - * @return {string} The render mode that jsPlumb set, which of course may be different from that requested. - */ - this.setRenderMode = function(mode) { - renderMode = jsPlumbAdapter.setRenderMode(mode); - var i, ii; - // only add this if the renderer is canvas; we dont want these listeners registered on te - // entire document otherwise. - if (renderMode == jsPlumb.CANVAS) { - var bindOne = function(event) { - jsPlumb.CurrentLibrary.bind(document, event, function(e) { - if (!_currentInstance.currentlyDragging && renderMode == jsPlumb.CANVAS) { - // try connections first - for (i = 0, ii = connections.length; i < ii; i++ ) { - var t = connections[i].getConnector()[event](e); - if (t) return; - } - for (var el in endpointsByElement) { - var ee = endpointsByElement[el]; - for ( i = 0, ii = ee.length; i < ii; i++ ) { - if (ee[i].endpoint[event] && ee[i].endpoint[event](e)) return; - } - } - } - }); - }; - bindOne("click");bindOne("dblclick");bindOne("mousemove");bindOne("mousedown");bindOne("mouseup");bindOne("contextmenu"); - } - - return renderMode; - }; - - /** - * @doc function - * @name jsPlumb.class:getRenderMode - * @description Gets the current render mode for this instance of jsPlumb. - * @return {string} The current render mode - "canvas", "svg" or "vml". - */ - this.getRenderMode = function() { return renderMode; }; - - this.show = function(el, changeEndpoints) { - _setVisible(el, "block", changeEndpoints); - return _currentInstance; - }; - - /** - * gets some test hooks. nothing writable. - */ - this.getTestHarness = function() { - return { - endpointsByElement : endpointsByElement, - endpointCount : function(elId) { - var e = endpointsByElement[elId]; - return e ? e.length : 0; - }, - connectionCount : function(scope) { - scope = scope || DEFAULT_SCOPE; - var c = _currentInstance.getConnections({scope:scope}); - return c ? c.length : 0; - }, - getId : _getId, - makeAnchor:self.makeAnchor, - makeDynamicAnchor:self.makeDynamicAnchor - }; - }; - - - // TODO: update this method to return the current state. - this.toggleVisible = _toggleVisible; - this.toggleDraggable = _toggleDraggable; - this.addListener = this.bind; - - /* - helper method to take an xy location and adjust it for the parent's offset and scroll. - */ - this.adjustForParentOffsetAndScroll = function(xy, el) { - - var offsetParent = null, result = xy; - if (el.tagName.toLowerCase() === "svg" && el.parentNode) { - offsetParent = el.parentNode; - } - else if (el.offsetParent) { - offsetParent = el.offsetParent; - } - if (offsetParent != null) { - var po = offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : _getOffset(offsetParent, _currentInstance), - so = offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : {left:offsetParent.scrollLeft, top:offsetParent.scrollTop}; - - // i thought it might be cool to do this: - // lastReturnValue[0] = lastReturnValue[0] - offsetParent.offsetLeft + offsetParent.scrollLeft; - // lastReturnValue[1] = lastReturnValue[1] - offsetParent.offsetTop + offsetParent.scrollTop; - // but i think it ignores margins. my reasoning was that it's quicker to not hand off to some underlying - // library. - - result[0] = xy[0] - po.left + so.left; - result[1] = xy[1] - po.top + so.top; - } - - return result; - - }; - - if (!jsPlumbAdapter.headless) { - _currentInstance.dragManager = jsPlumbAdapter.getDragManager(_currentInstance); - _currentInstance.recalculateOffsets = _currentInstance.dragManager.updateOffsets; - } - - }; - - jsPlumbUtil.extend(jsPlumbInstance, jsPlumbUtil.EventGenerator, { - setAttribute : function(el, a, v) { - jsPlumbAdapter.setAttribute(el, a, v); - }, - getAttribute : function(el, a) { - return jsPlumbAdapter.getAttribute(jsPlumb.CurrentLibrary.getDOMElement(el), a); - }, - registerConnectionType : function(id, type) { - this._connectionTypes[id] = jsPlumb.extend({}, type); - }, - /** - * @doc function - * @name jsPlumb.class:registerConnectionTypes - * @param {object} types Object containing the type specifications. - * @description - * Registers all of the given connection types on this instance of jsPlumb. `types` is expected - * to contain keys with typeids and values with type specification objects. - */ - registerConnectionTypes : function(types) { - for (var i in types) - this._connectionTypes[i] = jsPlumb.extend({}, types[i]); - }, - /** - * @doc function - * @name jsPlumb.class:registerEndpointType - * @param {string} typeId Id of the type - * @param {object} type Object containing the type specification. - * @description - * Registers the given endpoint type on this instance of jsPlumb. - */ - registerEndpointType : function(id, type) { - this._endpointTypes[id] = jsPlumb.extend({}, type); - }, - /** - * @doc function - * @name jsPlumb.class:registerEndpointTypes - * @param {object} types Object containing the type specifications. - * @description - * Registers all of the given endpoint types on this instance of jsPlumb. `types` is expected - * to contain keys with typeids and values with type specification objects. - */ - registerEndpointTypes : function(types) { - for (var i in types) - this._endpointTypes[i] = jsPlumb.extend({}, types[i]); - }, - /** - * @doc function - * @name jsPlumb.class:getType - * @param {string} id Id of the type to retrieve - * @param {string} typeDescriptor `"connection"` or `"endpoint"` - the type of Type to get. - * @description - * Returns the given type's specification. - * @return {object} Type specification, it if exists, null otherwise. - */ - getType : function(id, typeDescriptor) { - return typeDescriptor === "connection" ? this._connectionTypes[id] : this._endpointTypes[id]; - }, - /** - * @doc function - * @name jsPlumb.class:setIdChanged - * @param {oldId} string Previous id - * @param {newId} string Element's new id. - * @description called to notify us that an id WAS changed, and we should do our changes, but we - * dont need to change the element's DOM attribute. note that this does not work if the an element with - * the new id is not in the DOM. - */ - setIdChanged : function(oldId, newId) { - this.setId(oldId, newId, true); - } - }); - -// --------------------- static instance + AMD registration ------------------------------------------- - -// create static instance and assign to window if window exists. - var jsPlumb = new jsPlumbInstance(); - // register on window if defined (lets us run on server) - if (typeof window != 'undefined') window.jsPlumb = jsPlumb; - // add 'getInstance' method to static instance - /** - * @name jsPlumb.getInstance - * @param {object} [_defaults] Optional default settings for the new instance. - * @desc Gets a new instance of jsPlumb. - */ - jsPlumb.getInstance = function(_defaults) { - var j = new jsPlumbInstance(_defaults); - j.init(); - return j; - }; -// maybe register static instance as an AMD module, and getInstance method too. - if ( typeof define === "function") { - define( "jsplumb", [], function () { return jsPlumb; } ); - define( "jsplumbinstance", [], function () { return jsPlumb.getInstance(); } ); - } - // CommonJS - if (typeof exports !== 'undefined') { - exports.jsPlumb = jsPlumb; - } - - -// --------------------- end static instance + AMD registration ------------------------------------------- - -})(); - - -;(function() { - - // create the drag handler for a connection - 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(n); - _jsPlumb.updateOffset( { elId : id }); - // create and assign an id, and initialize the offset. - placeholder.id = id; - placeholder.element = n;//placeholderDragElement; - }; - - // create a floating endpoint (for drag connections) - 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" }); - }; - - var typeParameters = [ "connectorStyle", "connectorHoverStyle", "connectorOverlays", - "connector", "connectionType", "connectorClass", "connectorHoverClass" ]; - - // 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(ep, elementWithPrecedence) { - var idx = 0; - if (elementWithPrecedence != null) { - for (var i = 0; i < ep.connections.length; i++) { - if (ep.connections[i].sourceId == elementWithPrecedence || ep.connections[i].targetId == elementWithPrecedence) { - idx = i; - break; - } - } - } - - return ep.connections[idx]; - }; - - var findConnectionIndex = function(conn, ep) { - return jsPlumbUtil.findWithFunction(ep.connections, function(c) { return c.id == conn.id; }); - }; - - jsPlumb.Endpoint = function(params) { - var _jsPlumb = params._jsPlumb, - jpcl = jsPlumb.CurrentLibrary, - _att = jsPlumbAdapter.getAttribute, - _gel = jpcl.getElementObject, - _dom = jpcl.getDOMElement, - _ju = jsPlumbUtil, - _newConnection = params.newConnection, - _newEndpoint = params.newEndpoint, - _finaliseConnection = params.finaliseConnection, - _fireDetachEvent = params.fireDetachEvent, - floatingConnections = params.floatingConnections; - - this.idPrefix = "_jsplumb_e_"; - this.defaultLabelLocation = [ 0.5, 0.5 ]; - this.defaultOverlayKeys = ["Overlays", "EndpointOverlays"]; - this.parent = params.parent; - OverlayCapableJsPlumbUIComponent.apply(this, arguments); - -// TYPE - - this.getDefaultType = function() { - return { - parameters:{}, - scope:null, - maxConnections:this._jsPlumb.instance.Defaults.MaxConnections, - paintStyle:this._jsPlumb.instance.Defaults.EndpointStyle || jsPlumb.Defaults.EndpointStyle, - endpoint:this._jsPlumb.instance.Defaults.Endpoint || jsPlumb.Defaults.Endpoint, - hoverPaintStyle:this._jsPlumb.instance.Defaults.EndpointHoverStyle || jsPlumb.Defaults.EndpointHoverStyle, - overlays:this._jsPlumb.instance.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 - }; - }; - -// END TYPE - - this._jsPlumb.enabled = !(params.enabled === false); - this._jsPlumb.visible = true; - this.element = _dom(params.source); - this._jsPlumb.uuid = params.uuid; - this._jsPlumb.floatingEndpoint = null; - var inPlaceCopy = null; - if (this._jsPlumb.uuid) params.endpointsByUUID[this._jsPlumb.uuid] = this; - this.elementId = params.elementId; - - this._jsPlumb.connectionCost = params.connectionCost; - this._jsPlumb.connectionsDirected = params.connectionsDirected; - this._jsPlumb.currentAnchorClass = ""; - this._jsPlumb.events = {}; - - var _updateAnchorClass = function() { - jpcl.removeClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - this.removeClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - this._jsPlumb.currentAnchorClass = this.anchor.getCssClass(); - this.addClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - jpcl.addClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - }.bind(this); - - this.setAnchor = function(anchorParams, doNotRepaint) { - this._jsPlumb.instance.continuousAnchorFactory.clear(this.elementId); - this.anchor = this._jsPlumb.instance.makeAnchor(anchorParams, this.elementId, _jsPlumb); - _updateAnchorClass(); - this.anchor.bind("anchorChanged", function(currentAnchor) { - this.fire("anchorChanged", {endpoint:this, anchor:currentAnchor}); - _updateAnchorClass(); - }.bind(this)); - if (!doNotRepaint) - this._jsPlumb.instance.repaint(this.elementId); - return this; - }; - - var anchorParamsToUse = params.anchor ? params.anchor : params.anchors ? params.anchors : (_jsPlumb.Defaults.Anchor || "Top"); - this.setAnchor(anchorParamsToUse, true); - - // endpoint delegates to first connection for hover, if there is one. - var internalHover = function(state) { - if (this.connections.length > 0) - this.connections[0].setHover(state, false); - else - this.setHover(state); - }.bind(this); - - // 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. - this._jsPlumb.instance.anchorManager.add(this, this.elementId); - - this.setEndpoint = function(ep) { - - if (this.endpoint != null) { - this.endpoint.cleanup(); - this.endpoint.destroy(); - } - - var _e = function(t, p) { - var rm = _jsPlumb.getRenderMode(); - if (jsPlumb.Endpoints[rm][t]) return new jsPlumb.Endpoints[rm][t](p); - if (!_jsPlumb.Defaults.DoNotThrowErrors) - throw { msg:"jsPlumb: unknown endpoint type '" + t + "'" }; - }; - - var endpointArgs = { - _jsPlumb:this._jsPlumb.instance, - cssClass:params.cssClass, - parent:params.parent, - container:params.container, - tooltip:params.tooltip, - connectorTooltip:params.connectorTooltip, - endpoint:this - }; - if (_ju.isString(ep)) - this.endpoint = _e(ep, endpointArgs); - else if (_ju.isArray(ep)) { - endpointArgs = _ju.merge(ep[1], endpointArgs); - this.endpoint = _e(ep[0], endpointArgs); - } - else { - this.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); - this.endpoint.clone = function() { - // TODO this, and the code above, can be refactored to be more dry. - if (_ju.isString(ep)) - return _e(ep, endpointArgs); - else if (_ju.isArray(ep)) { - endpointArgs = _ju.merge(ep[1], endpointArgs); - return _e(ep[0], endpointArgs); - } - }.bind(this); - - this.type = this.endpoint.type; - // bind listeners from endpoint to self, with the internal hover function defined above. - this.bindListeners(this.endpoint, this, internalHover); - }; - - this.setEndpoint(params.endpoint || _jsPlumb.Defaults.Endpoint || jsPlumb.Defaults.Endpoint || "Dot"); - 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._jsPlumb.paintStyleInUse = this.getPaintStyle(); - - _ju.copyValues(typeParameters, params, this); - - this.isSource = params.isSource || false; - this.isTarget = params.isTarget || false; - this._jsPlumb.maxConnections = params.maxConnections || _jsPlumb.Defaults.MaxConnections; // maximum number of connections this endpoint can be the source of. - this.canvas = this.endpoint.canvas; - // add anchor class (need to do this on construction because we set anchor first) - this.addClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - jpcl.addClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - this.connections = params.connections || []; - this.connectorPointerEvents = params["connector-pointer-events"]; - - this.scope = params.scope || _jsPlumb.getDefaultScope(); - this.timestamp = null; - this.reattachConnections = params.reattach || _jsPlumb.Defaults.ReattachConnections; - this.connectionsDetachable = _jsPlumb.Defaults.ConnectionsDetachable; - if (params.connectionsDetachable === false || params.detachable === false) - this.connectionsDetachable = false; - this.dragAllowedWhenFull = params.dragAllowedWhenFull || true; - - if (params.onMaxConnections) - this.bind("maxConnections", params.onMaxConnections); - - // - // add a connection. not part of public API. - // - this.addConnection = function(connection) { - this.connections.push(connection); - this[(this.connections.length > 0 ? "add" : "remove") + "Class"](_jsPlumb.endpointConnectedClass); - this[(this.isFull() ? "add" : "remove") + "Class"](_jsPlumb.endpointFullClass); - }; - - this.detachFromConnection = function(connection, idx) { - idx = idx == null ? findConnectionIndex(connection, this) : idx; - if (idx >= 0) { - this.connections.splice(idx, 1); - this[(this.connections.length > 0 ? "add" : "remove") + "Class"](_jsPlumb.endpointConnectedClass); - this[(this.isFull() ? "add" : "remove") + "Class"](_jsPlumb.endpointFullClass); - } - }; - - this.detach = function(connection, ignoreTarget, forceDetach, fireEvent, originalEvent, endpointBeingDeleted, connectionIndex) { - - var idx = connectionIndex == null ? findConnectionIndex(connection, this) : connectionIndex, - actuallyDetached = false; - fireEvent = (fireEvent !== false); - - if (idx >= 0) { - if (forceDetach || connection._forceDetach || (connection.isDetachable() && connection.isDetachAllowed(connection) && this.isDetachAllowed(connection) )) { - - //connection.setHover(false); - - _jsPlumb.deleteObject({ - connection:connection, - fireEvent:(!ignoreTarget && fireEvent), - originalEvent:originalEvent - }); - actuallyDetached = true; - } - } - return actuallyDetached; - }; - - this.detachAll = function(fireEvent, originalEvent) { - while (this.connections.length > 0) { - // TODO this could pass the index in to the detach method to save some time (index will always be zero in this while loop) - // TODO now it defaults to fireEvent true. will that mess with things? - this.detach(this.connections[0], false, true, fireEvent !== false, originalEvent, this, 0); - } - return this; - }; - this.detachFrom = function(targetEndpoint, fireEvent, originalEvent) { - var c = []; - for ( var i = 0; i < this.connections.length; i++) { - if (this.connections[i].endpoints[1] == targetEndpoint || this.connections[i].endpoints[0] == targetEndpoint) { - c.push(this.connections[i]); - } - } - for ( var j = 0; j < c.length; j++) { - this.detach(c[j], false, true, fireEvent, originalEvent); - } - return this; - }; - - this.getElement = function() { - return this.element; - }; - - // container not supported in 1.5.2; you cannot change the container once it is set. - // it might come back int a future release. - this.setElement = function(el/*, container*/) { - var parentId = this._jsPlumb.instance.getId(el), - curId = this.elementId; - // remove the endpoint from the list for the current endpoint's element - _ju.removeWithFunction(params.endpointsByElement[this.elementId], function(e) { - return e.id == this.id; - }.bind(this)); - this.element = _dom(el); - this.elementId = _jsPlumb.getId(this.element); - _jsPlumb.anchorManager.rehomeEndpoint(this, curId, this.element); - _jsPlumb.dragManager.endpointAdded(this.element); - _ju.addToList(params.endpointsByElement, parentId, this); - return this; - }; - - /** - * private but must be exposed. - */ - this.makeInPlaceCopy = function() { - var loc = this.anchor.getCurrentLocation({element:this}), - o = this.anchor.getOrientation(this), - acc = this.anchor.getCssClass(), - inPlaceAnchor = { - bind:function() { }, - compute:function() { return [ loc[0], loc[1] ]; }, - getCurrentLocation : function() { return [ loc[0], loc[1] ]; }, - getOrientation:function() { return o; }, - getCssClass:function() { return acc; } - }; - - return _newEndpoint( { - anchor : inPlaceAnchor, - source : this.element, - paintStyle : this.getPaintStyle(), - endpoint : params.hideOnDrag ? "Blank" : this.endpoint, - _transient:true, - scope:this.scope - }); - }; - - - /** - * private but needs to be exposed. - */ - this.isFloating = function() { - return this.anchor != null && this.anchor.isFloating; - }; - - /** - * 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 = this.connections[0]; - if (this.isTarget && candidate) return candidate; - else { - return (this.connections.length < this._jsPlumb.maxConnections) || this._jsPlumb.maxConnections == -1 ? null : candidate; - } - }; - - this.setStyle = this.setPaintStyle; - - this.paint = function(params) { - params = params || {}; - var timestamp = params.timestamp, recalc = !(params.recalc === false); - if (!timestamp || this.timestamp !== timestamp) { - - // TODO check: is this is a safe performance enhancement? - var info = _jsPlumb.updateOffset({ elId:this.elementId, timestamp:timestamp/*, recalc:recalc*/ }); - //var info = _jsPlumb.updateOffset({ elId:_elementId, timestamp:timestamp, recalc:recalc }); - - var xy = params.offset ? params.offset.o : info.o; - if(xy != null) { - var ap = params.anchorPoint,connectorPaintStyle = params.connectorPaintStyle; - if (ap == null) { - var wh = params.dimensions || info.s, - anchorParams = { xy : [ xy.left, xy.top ], wh : wh, element : this, timestamp : timestamp }; - if (recalc && this.anchor.isDynamic && this.connections.length > 0) { - var c = findConnectionToUseForDynamicAnchor(this, params.elementWithPrecedence), - oIdx = c.endpoints[0] == this ? 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 = this.anchor.compute(anchorParams); - } - - this.endpoint.compute(ap, this.anchor.getOrientation(this), this._jsPlumb.paintStyleInUse, connectorPaintStyle || this.paintStyleInUse); - this.endpoint.paint(this._jsPlumb.paintStyleInUse, this.anchor); - this.timestamp = timestamp; - - // paint overlays - for ( var i = 0; i < this._jsPlumb.overlays.length; i++) { - var o = this._jsPlumb.overlays[i]; - if (o.isVisible()) { - this._jsPlumb.overlayPlacements[i] = o.draw(this.endpoint, this._jsPlumb.paintStyleInUse); - o.paint(this._jsPlumb.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(this.element) && (this.isSource || this.isTarget)) { - 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 = this.connectorSelector(); - var _continue = true; - // if not enabled, return - if (!this.isEnabled()) _continue = false; - // if no connection and we're not a source, return. - if (jpc == null && !this.isSource) _continue = false; - // otherwise if we're full and not allowed to drag, also return false. - if (this.isSource && this.isFull() && !this.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; - } - - // clear hover for all connections for this endpoint before continuing. - for (var i = 0; i < this.connections.length; i++) - this.connections[i].setHover(false); - - this.addClass("endpointDrag"); - _jsPlumb.setConnectionBeingDragged(true); - - // if we're not full but there was a connection, make it null. we'll create a new one. - if (jpc && !this.isFull() && this.isSource) jpc = null; - - _jsPlumb.updateOffset( { elId : this.elementId }); - inPlaceCopy = this.makeInPlaceCopy(); - inPlaceCopy.referenceEndpoint = this; - inPlaceCopy.paint(); - - _makeDraggablePlaceholder(placeholderInfo, this.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 = jsPlumb.CurrentLibrary.getOffset(ipcoel, _jsPlumb), - po = _jsPlumb.adjustForParentOffsetAndScroll([ipco.left, ipco.top], inPlaceCopy.canvas), - canvasElement = _gel(this.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 (this.parentAnchor) this.anchor = _jsPlumb.makeAnchor(this.parentAnchor, this.elementId, _jsPlumb); - - // store the id of the dragging div and the source element. the drop function will pick these up. - _jsPlumb.setAttribute(this.canvas, "dragId", placeholderInfo.id); - _jsPlumb.setAttribute(this.canvas, "elId", this.elementId); - - this._jsPlumb.floatingEndpoint = _makeFloatingEndpoint(this.getPaintStyle(), this.anchor, this.endpoint, this.canvas, placeholderInfo.element, _jsPlumb, _newEndpoint); - // TODO we should not know about DOM here. make the library adapter do this (or the - // dom adapter) - this.canvas.style.visibility = "hidden"; - - if (jpc == null) { - this.anchor.locked = true; - this.setHover(false, false); - // create a connection. one end is this endpoint, the other is a floating endpoint. - jpc = _newConnection({ - sourceEndpoint : this, - targetEndpoint : this._jsPlumb.floatingEndpoint, - source : this.endpointWillMoveTo || this.element, // for makeSource with parent option. ensure source element is represented correctly. - target : placeholderInfo.element, - anchors : [ this.anchor, this._jsPlumb.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:this.connectionType, - cssClass:this.connectorClass, - hoverClass:this.connectorHoverClass - }); - jpc.addClass(_jsPlumb.draggingClass); - this._jsPlumb.floatingEndpoint.addClass(_jsPlumb.draggingClass); - // 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 == this.id ? 0 : 1; - jpc.floatingAnchorIndex = anchorIdx; // save our anchor index as the connection's floating index. - this.detachFromConnection(jpc); // detach from the connection while dragging is occurring. - - // store the original scope (issue 57) - var dragScope = jsPlumb.CurrentLibrary.getDragScope(canvasElement); - _jsPlumb.setAttribute(this.canvas, "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); - - // fire an event that informs that a connection is being dragged. we do this before - // replacing the original target with the floating element info. - _jsPlumb.fire("connectionDrag", jpc); - - // now we replace ourselves with the temporary div we created above: - if (anchorIdx === 0) { - existingJpcParams = [ jpc.source, jpc.sourceId, canvasElement, dragScope ]; - jpc.source = placeholderInfo.element; - jpc.sourceId = placeholderInfo.id; - } else { - existingJpcParams = [ jpc.target, jpc.targetId, canvasElement, 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]; - - // PROVIDE THE SUSPENDED ELEMENT, BE IT A SOURCE OR TARGET (ISSUE 39) - jpc.suspendedElement = jpc.endpoints[anchorIdx].getElement(); - jpc.suspendedElementId = jpc.endpoints[anchorIdx].elementId; - jpc.suspendedElementType = anchorIdx === 0 ? "source" : "target"; - - jpc.suspendedEndpoint.setHover(false); - this._jsPlumb.floatingEndpoint.referenceEndpoint = jpc.suspendedEndpoint; - jpc.endpoints[anchorIdx] = this._jsPlumb.floatingEndpoint; - - jpc.addClass(_jsPlumb.draggingClass); - this._jsPlumb.floatingEndpoint.addClass(_jsPlumb.draggingClass); - - } - // register it and register connection on it. - floatingConnections[placeholderInfo.id] = jpc; - _jsPlumb.anchorManager.addFloatingConnection(placeholderInfo.id, 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, this._jsPlumb.floatingEndpoint); - // tell jsplumb about it - _jsPlumb.currentlyDragging = true; - }.bind(this); - - 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 || this.scope; - dragOptions[startEvent] = _ju.wrap(dragOptions[startEvent], start, false); - // extracted drag handler function so can be used by makeSource - dragOptions[dragEvent] = _ju.wrap(dragOptions[dragEvent], _dragHandler.drag); - dragOptions[stopEvent] = _ju.wrap(dragOptions[stopEvent], - function() { - - _jsPlumb.setConnectionBeingDragged(false); - // get the actual drop event (decode from library args to stop function) - var originalEvent = jpcl.getDropEvent(arguments); - // unlock the other endpoint (if it is dynamic, it would have been locked at drag start) - var idx = jpc.floatingAnchorIndex == null ? 1 : jpc.floatingAnchorIndex; - jpc.endpoints[idx === 0 ? 1 : 0].anchor.locked = false; - // WHY does this need to happen? i suppose because the connection might not get - // deleted. TODO: i dont want to know about css classes inside jsplumb, ideally. - jpc.removeClass(_jsPlumb.draggingClass); - - // if we have the floating endpoint then the connection has not been dropped - // on another endpoint. If it is a new connection we throw it away. If it is an - // existing connection we check to see if we should reattach it, throwing it away - // if not. - if (jpc.endpoints[idx] == this._jsPlumb.floatingEndpoint) { - // 6a. 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 the connection should be reattached, or the other endpoint refuses detach, then - // reset the connection to its original state - 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._forceDetach = null; - jpc._forceReattach = null; - this._jsPlumb.floatingEndpoint.detachFromConnection(jpc); - jpc.suspendedEndpoint.addConnection(jpc); - _jsPlumb.repaint(existingJpcParams[1]); - } - } - } - - // remove the element associated with the floating endpoint - // (and its associated floating endpoint and visual artefacts) - // TODO we need a way to say that the connection should be kept, if - _jsPlumb.remove(placeholderInfo.element, false); - // remove the inplace copy - _jsPlumb.remove(inPlaceCopy.canvas, false); - - // makeTargets sets this flag, to tell us we have been replaced and should delete ourself. - if (this.deleteAfterDragStop) { - _jsPlumb.deleteObject({endpoint:this}); - } - else { - if (this._jsPlumb) { - this._jsPlumb.floatingEndpoint = null; - // repaint this endpoint. - // make our canvas visible (TODO: hand off to library; we should not know about DOM) - this.canvas.style.visibility = "visible"; - // unlock our anchor - this.anchor.locked = false; - this.paint({recalc:false}); - } - } - - // TODO can this stay here? the connection is no longer valid. - _jsPlumb.fire("connectionDragStop", jpc); - - // tell jsplumb that dragging is finished. - _jsPlumb.currentlyDragging = false; - - jpc = null; - - }.bind(this)); - - var i = _gel(this.canvas); - jpcl.initDraggable(i, dragOptions, true, _jsPlumb); - } - - // 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 ((this.isTarget || forceInit) && jpcl.isDropSupported(this.element)) { - var dropOptions = params.dropOptions || _jsPlumb.Defaults.DropOptions || jsPlumb.Defaults.DropOptions; - dropOptions = jsPlumb.extend( {}, dropOptions); - dropOptions.scope = dropOptions.scope || this.scope; - var dropEvent = jpcl.dragEvents.drop, - overEvent = jpcl.dragEvents.over, - outEvent = jpcl.dragEvents.out, - drop = function() { - - this.removeClass(_jsPlumb.endpointDropAllowedClass); - this.removeClass(_jsPlumb.endpointDropForbiddenClass); - - var originalEvent = jpcl.getDropEvent(arguments), - draggable = _gel(jpcl.getDragObject(arguments)), - id = _jsPlumb.getAttribute(draggable, "dragId"), - elId = _jsPlumb.getAttribute(draggable, "elId"), - scope = _jsPlumb.getAttribute(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 == this.id || - this.referenceEndpoint && jpc.suspendedEndpoint.id == this.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 (this.isFull()) { - this.fire("maxConnections", { - endpoint:this, - connection:jpc, - maxConnections:this._jsPlumb.maxConnections - }, originalEvent); - } - - if (!this.isFull() && !(idx === 0 && !this.isSource) && !(idx == 1 && !this.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 != this.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 = this.element; - jpc.sourceId = this.elementId; - } else { - jpc.target = this.element; - jpc.targetId = this.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] = this; - this.addConnection(jpc); - - // copy our parameters in to the connection: - var params = this.getParameters(); - for (var aParam in params) - jpc.setParameter(aParam, params[aParam]); - - if (!jpc.suspendedEndpoint) { - if (params.draggable) - jsPlumb.CurrentLibrary.initDraggable(this.element, dragOptions, true, _jsPlumb); - } - 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); - } - - // TODO this is like the makeTarget drop code. - if (idx == 1) - _jsPlumb.anchorManager.updateOtherEndpoint(jpc.sourceId, jpc.suspendedElementId, jpc.targetId, jpc); - else - _jsPlumb.anchorManager.sourceChanged(jpc.suspendedEndpoint.elementId, jpc.sourceId, jpc); - - // finalise will inform the anchor manager and also add to - // connectionsByScope if necessary. - _finaliseConnection(jpc, null, originalEvent, true); - - commonFunction(); - }.bind(this); - - 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 && this.isDropAllowed(jpc.sourceId, jpc.targetId, jpc.scope, jpc, this); - - if (_doContinue) { - continueFunction(); - } - else { - dontContinueFunction(); - } - } - _jsPlumb.currentlyDragging = false; - } - }.bind(this); - - dropOptions[dropEvent] = _ju.wrap(dropOptions[dropEvent], drop); - dropOptions[overEvent] = _ju.wrap(dropOptions[overEvent], function() { - var draggable = jpcl.getDragObject(arguments), - id = _jsPlumb.getAttribute(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 = (this.isTarget && _jpc.floatingAnchorIndex !== 0) || (_jpc.suspendedEndpoint && this.referenceEndpoint && this.referenceEndpoint.id == _jpc.suspendedEndpoint.id); - if (_cont) { - var bb = _jsPlumb.checkCondition("checkDropAllowed", { - sourceEndpoint:_jpc.endpoints[idx], - targetEndpoint:this, - connection:_jpc - }); - this[(bb ? "add" : "remove") + "Class"](_jsPlumb.endpointDropAllowedClass); - this[(bb ? "remove" : "add") + "Class"](_jsPlumb.endpointDropForbiddenClass); - _jpc.endpoints[idx].anchor.over(this.anchor, this); - } - } - }.bind(this)); - - dropOptions[outEvent] = _ju.wrap(dropOptions[outEvent], function() { - var draggable = jpcl.getDragObject(arguments), - id = _jsPlumb.getAttribute( draggable, "dragId"), - _jpc = floatingConnections[id]; - - if (_jpc != null) { - var idx = _jpc.floatingAnchorIndex == null ? 1 : _jpc.floatingAnchorIndex; - var _cont = (this.isTarget && _jpc.floatingAnchorIndex !== 0) || (_jpc.suspendedEndpoint && this.referenceEndpoint && this.referenceEndpoint.id == _jpc.suspendedEndpoint.id); - if (_cont) { - this.removeClass(_jsPlumb.endpointDropAllowedClass); - this.removeClass(_jsPlumb.endpointDropForbiddenClass); - _jpc.endpoints[idx].anchor.out(); - } - } - }.bind(this)); - jpcl.initDroppable(canvas, dropOptions, true, isTransient); - } - }.bind(this); - - // 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(this.canvas), true, !(params._transient || this.anchor.isFloating), this); - - // finally, set type if it was provided - if (params.type) - this.addType(params.type, params.data, _jsPlumb.isSuspendDrawing()); - - return this; - }; - - jsPlumbUtil.extend(jsPlumb.Endpoint, OverlayCapableJsPlumbUIComponent, { - getTypeDescriptor : function() { return "endpoint"; }, - isVisible : function() { return this._jsPlumb.visible; }, - setVisible : function(v, doNotChangeConnections, doNotNotifyOtherEndpoint) { - this._jsPlumb.visible = v; - if (this.canvas) this.canvas.style.display = v ? "block" : "none"; - this[v ? "showOverlays" : "hideOverlays"](); - if (!doNotChangeConnections) { - for (var i = 0; i < this.connections.length; i++) { - this.connections[i].setVisible(v); - if (!doNotNotifyOtherEndpoint) { - var oIdx = this === this.connections[i].endpoints[0] ? 1 : 0; - // only change the other endpoint if this is its only connection. - if (this.connections[i].endpoints[oIdx].connections.length == 1) this.connections[i].endpoints[oIdx].setVisible(v, true, true); - } - } - } - }, - getAttachedElements : function() { - return this.connections; - }, - applyType : function(t, doNotRepaint) { - if (t.maxConnections != null) this._jsPlumb.maxConnections = t.maxConnections; - if (t.scope) this.scope = t.scope; - jsPlumbUtil.copyValues(typeParameters, t, this); - }, - isEnabled : function() { return this._jsPlumb.enabled; }, - setEnabled : function(e) { this._jsPlumb.enabled = e; }, - cleanup : function() { - jsPlumb.CurrentLibrary.removeClass(this.element, this._jsPlumb.instance.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); - this.anchor = null; - this.endpoint.cleanup(); - this.endpoint.destroy(); - this.endpoint = null; - // drag/drop - var i = jsPlumb.CurrentLibrary.getElementObject(this.canvas); - jsPlumb.CurrentLibrary.destroyDraggable(i); - jsPlumb.CurrentLibrary.destroyDroppable(i); - }, - setHover : function(h) { - if (this.endpoint && this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) - this.endpoint.setHover(h); - }, - isFull : function() { - return !(this.isFloating() || this._jsPlumb.maxConnections < 1 || this.connections.length < this._jsPlumb.maxConnections); - }, - getConnectionCost : function() { return this._jsPlumb.connectionCost; }, - setConnectionCost : function(c) { - this._jsPlumb.connectionCost = c; - }, - areConnectionsDirected : function() { return this._jsPlumb.connectionsDirected; }, - setConnectionsDirected : function(b) { this._jsPlumb.connectionsDirected = b; }, - setElementId : function(_elId) { - this.elementId = _elId; - this.anchor.elementId = _elId; - }, - setReferenceElement : function(_el) { - this.element = jsPlumb.CurrentLibrary.getDOMElement(_el); - }, - setDragAllowedWhenFull : function(allowed) { - this.dragAllowedWhenFull = allowed; - }, - equals : function(endpoint) { - return this.anchor.equals(endpoint.anchor); - }, - getUuid : function() { - return this._jsPlumb.uuid; - }, - computeAnchor : function(params) { - return this.anchor.compute(params); - } - }); -})(); -;(function() { - - var makeConnector = function(_jsPlumb, renderMode, connectorName, connectorArgs) { - if (!_jsPlumb.Defaults.DoNotThrowErrors && jsPlumb.Connectors[renderMode][connectorName] == null) - throw { msg:"jsPlumb: unknown connector type '" + connectorName + "'" }; - - return new jsPlumb.Connectors[renderMode][connectorName](connectorArgs); - }, - _makeAnchor = function(anchorParams, elementId, _jsPlumb) { - return (anchorParams) ? _jsPlumb.makeAnchor(anchorParams, elementId, _jsPlumb) : null; - }, - prepareEndpoint = function(_jsPlumb, _newEndpoint, conn, existing, index, params, element, elementId, connectorPaintStyle, connectorHoverPaintStyle) { - var e; - if (existing) { - conn.endpoints[index] = existing; - existing.addConnection(conn); - } 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, _jsPlumb) || - _makeAnchor(jsPlumb.Defaults.Anchors[index], elementId,_jsPlumb) || - _makeAnchor(_jsPlumb.Defaults.Anchor, elementId,_jsPlumb) || - _makeAnchor(jsPlumb.Defaults.Anchor, elementId, _jsPlumb), - u = params.uuids ? params.uuids[index] : null; - e = _newEndpoint({ - paintStyle : es, hoverPaintStyle:ehs, endpoint : ep, connections : [ conn ], - uuid : u, anchor : a, source : element, scope : params.scope, container:params.container, - reattach:params.reattach || _jsPlumb.Defaults.ReattachConnections, - detachable:params.detachable || _jsPlumb.Defaults.ConnectionsDetachable - }); - conn.endpoints[index] = e; - - if (params.drawEndpoints === false) e.setVisible(false, true, true); - - } - return e; - }; - - jsPlumb.Connection = function(params) { - var _newConnection = params.newConnection, - _newEndpoint = params.newEndpoint, - jpcl = jsPlumb.CurrentLibrary, - _att = jpcl.getAttribute, - _gel = jpcl.getElementObject, - _dom = jpcl.getDOMElement, - _ju = jsPlumbUtil, - _getOffset = jpcl.getOffset; - - this.connector = null; - this.idPrefix = "_jsplumb_c_"; - this.defaultLabelLocation = 0.5; - this.defaultOverlayKeys = ["Overlays", "ConnectionOverlays"]; - this.parent = params.parent; - // 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. - this.previousConnection = params.previousConnection; - this.source = _dom(params.source); - this.target = _dom(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(); - - OverlayCapableJsPlumbUIComponent.apply(this, arguments); - - this.sourceId = this._jsPlumb.instance.getId(this.source); - this.targetId = this._jsPlumb.instance.getId(this.target); - 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 = []; - - var _jsPlumb = this._jsPlumb.instance; - this._jsPlumb.visible = true; - this._jsPlumb.editable = params.editable === true; - this._jsPlumb.params = { - parent:params.parent, - cssClass:params.cssClass, - container:params.container, - "pointer-events":params["pointer-events"], - editorParams:params.editorParams - }; - this._jsPlumb.lastPaintedAt = null; - this.getDefaultType = function() { - return { - parameters:{}, - scope:null, - detachable:this._jsPlumb.instance.Defaults.ConnectionsDetachable, - rettach:this._jsPlumb.instance.Defaults.ReattachConnections, - paintStyle:this._jsPlumb.instance.Defaults.PaintStyle || jsPlumb.Defaults.PaintStyle, - connector:this._jsPlumb.instance.Defaults.Connector || jsPlumb.Defaults.Connector, - hoverPaintStyle:this._jsPlumb.instance.Defaults.HoverPaintStyle || jsPlumb.Defaults.HoverPaintStyle, - overlays:this._jsPlumb.instance.Defaults.ConnectorOverlays || jsPlumb.Defaults.ConnectorOverlays - }; - }; - -// INITIALISATION CODE - - // wrapped the main function to return null if no input given. this lets us cascade defaults properly. - - var eS = prepareEndpoint(_jsPlumb, _newEndpoint, this, params.sourceEndpoint, 0, params, this.source, this.sourceId, params.paintStyle, params.hoverPaintStyle); - if (eS) _ju.addToList(params.endpointsByElement, this.sourceId, eS); - var eT = prepareEndpoint(_jsPlumb, _newEndpoint, this, params.targetEndpoint, 1, params, this.target, this.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 explicitly told to (or not to) delete endpoints on detach, override endpoint's preferences - if (params.deleteEndpointsOnDetach != null) { - this.endpoints[0]._deleteOnDetach = params.deleteEndpointsOnDetach; - this.endpoints[1]._deleteOnDetach = params.deleteEndpointsOnDetach; - } - else { - // otherwise, unless the endpoints say otherwise, mark them for deletion. - if (!this.endpoints[0]._doNotDeleteOnDetach) this.endpoints[0]._deleteOnDetach = true; - if (!this.endpoints[1]._doNotDeleteOnDetach) this.endpoints[1]._deleteOnDetach = true; - } - - // TODO these could surely be refactored into some method that tries them one at a time until something exists - this.setConnector(this.endpoints[0].connector || - this.endpoints[1].connector || - params.connector || - _jsPlumb.Defaults.Connector || - jsPlumb.Defaults.Connector, true); - - if (params.path) - this.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._jsPlumb.paintStyleInUse = this.getPaintStyle(); - - var _suspendedAt = _jsPlumb.getSuspendedAt(); - _jsPlumb.updateOffset( { elId : this.sourceId, timestamp:_suspendedAt }); - _jsPlumb.updateOffset( { elId : this.targetId, timestamp:_suspendedAt }); - -//* - if(!_jsPlumb.isSuspendDrawing()) { - // 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 - this._jsPlumb.detachable = _jsPlumb.Defaults.ConnectionsDetachable; - if (params.detachable === false) this._jsPlumb.detachable = false; - if(this.endpoints[0].connectionsDetachable === false) this._jsPlumb.detachable = false; - if(this.endpoints[1].connectionsDetachable === false) this._jsPlumb.detachable = false; -// REATTACH - this._jsPlumb.reattach = params.reattach || this.endpoints[0].reattachConnections || this.endpoints[1].reattachConnections || _jsPlumb.Defaults.ReattachConnections; -// COST + DIRECTIONALITY - // if cost not supplied, try to inherit from source endpoint - this._jsPlumb.cost = params.cost || this.endpoints[0].getConnectionCost(); - this._jsPlumb.directed = params.directed; - // inherit directed flag if set no source endpoint - if (params.directed == null) this._jsPlumb.directed = this.endpoints[0].areConnectionsDirected(); -// END COST + DIRECTIONALITY - -// PARAMETERS - // merge all the parameters objects into the connection. parameters set - // on the connection take precedence; then source endpoint params, then - // finally target 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[1].getParameters()); - jsPlumb.extend(_p, this.endpoints[0].getParameters()); - jsPlumb.extend(_p, this.getParameters()); - this.setParameters(_p); -// END PARAMETERS - -// PAINTING - - // the very last thing we do is check to see if a 'type' was supplied in the params - var _type = params.type || this.endpoints[0].connectionType || this.endpoints[1].connectionType; - if (_type) - this.addType(_type, params.data, true); - -// END PAINTING - }; - - jsPlumbUtil.extend(jsPlumb.Connection, OverlayCapableJsPlumbUIComponent, { - applyType : function(t, doNotRepaint) { - if (t.detachable != null) this.setDetachable(t.detachable); - if (t.reattach != null) this.setReattach(t.reattach); - if (t.scope) this.scope = t.scope; - //editable = t.editable; // TODO - this.setConnector(t.connector, doNotRepaint); - }, - getTypeDescriptor : function() { return "connection"; }, - getAttachedElements : function() { - return this.endpoints; - }, - addClass : function(c, informEndpoints) { - if (informEndpoints) { - this.endpoints[0].addClass(c); - this.endpoints[1].addClass(c); - if (this.suspendedEndpoint) this.suspendedEndpoint.addClass(c); - } - if (this.connector) { - this.connector.addClass(c); - } - }, - removeClass : function(c, informEndpoints) { - if (informEndpoints) { - this.endpoints[0].removeClass(c); - this.endpoints[1].removeClass(c); - if (this.suspendedEndpoint) this.suspendedEndpoint.removeClass(c); - } - if (this.connector) { - this.connector.removeClass(c); - } - }, - isVisible : function() { return this._jsPlumb.visible; }, - setVisible : function(v) { - this._jsPlumb.visible = v; - this[v ? "showOverlays" : "hideOverlays"](); - if (this.connector && this.connector.canvas) this.connector.canvas.style.display = v ? "block" : "none"; - this.repaint(); - }, - setEditable : function(e) { - if (this.connector && this.connector.isEditable()) - this._jsPlumb.editable = e; - - return this._jsPlumb.editable; - }, - isEditable : function() { return this._jsPlumb.editable; }, - editStarted : function() { - this.setSuspendEvents(true); - this.fire("editStarted", { - path:this.connector.getPath() - }); - this._jsPlumb.instance.setHoverSuspended(true); - }, - editCompleted : function() { - this.fire("editCompleted", { - path:this.connector.getPath() - }); - this.setSuspendEvents(false); - this.setHover(false); - this._jsPlumb.instance.setHoverSuspended(false); - }, - editCanceled : function() { - this.fire("editCanceled", { - path:this.connector.getPath() - }); - this.setHover(false); - this._jsPlumb.instance.setHoverSuspended(false); - }, - cleanup:function() { - //this.endpointsToDeleteOnDetach = null; - this.endpoints = null; - this.source = null; - this.target = null; - if (this.connector != null) { - this.connector.cleanup(); - this.connector.destroy(); - } - this.connector = null; - }, - isDetachable : function() { - return this._jsPlumb.detachable === true; - }, - setDetachable : function(detachable) { - this._jsPlumb.detachable = detachable === true; - }, - isReattach : function() { - return this._jsPlumb.reattach === true; - }, - setReattach : function(reattach) { - this._jsPlumb.reattach = reattach === true; - }, - setHover : function(state) { - if (this.connector && this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) { - this.connector.setHover(state); - jsPlumb.CurrentLibrary[state ? "addClass" : "removeClass"](this.source, this._jsPlumb.instance.hoverSourceClass); - jsPlumb.CurrentLibrary[state ? "addClass" : "removeClass"](this.target, this._jsPlumb.instance.hoverTargetClass); - } - }, - getCost : function() { return this._jsPlumb.cost; }, - setCost : function(c) { this._jsPlumb.cost = c; }, - isDirected : function() { return this._jsPlumb.directed === true; }, - // - // changes the parent element of this connection to newParent. not exposed for the public API. - // - // TODO ensure moveParent method still works (the overlay stuff in particular) - moveParent : function(newParent) { - var jpcl = jsPlumb.CurrentLibrary, curParent = jpcl.getParent(this.connector.canvas); - if (this.connector.bgCanvas) { - jpcl.removeElement(this.connector.bgCanvas); - jpcl.appendElement(this.connector.bgCanvas, newParent); - } - jpcl.removeElement(this.connector.canvas); - jpcl.appendElement(this.connector.canvas, newParent); - // this only applies for DOMOverlays - for (var i = 0; i < this._jsPlumb.overlays.length; i++) { - if (this._jsPlumb.overlays[i].isAppendedAtTopLevel) { - jpcl.removeElement(this._jsPlumb.overlays[i].canvas); - jpcl.appendElement(this._jsPlumb.overlays[i].canvas, newParent); - if (this._jsPlumb.overlays[i].reattachListeners) - this._jsPlumb.overlays[i].reattachListeners(this.connector); - } - } - if (this.connector.reattachListeners) // this is for SVG/VML; change an element's parent and you have to reinit its listeners. - this.connector.reattachListeners(); // the Canvas implementation doesn't have to care about this - }, - getConnector : function() { return this.connector; }, - setConnector : function(connectorSpec, doNotRepaint) { - var _ju = jsPlumbUtil; - if (this.connector != null) { - this.connector.cleanup(); - this.connector.destroy(); - } - - var connectorArgs = { - _jsPlumb:this._jsPlumb.instance, - parent:this._jsPlumb.params.parent, - cssClass:this._jsPlumb.params.cssClass, - container:this._jsPlumb.params.container, - "pointer-events":this._jsPlumb.params["pointer-events"] - }, - renderMode = this._jsPlumb.instance.getRenderMode(); - - if (_ju.isString(connectorSpec)) - this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec, connectorArgs); // lets you use a string as shorthand. - else if (_ju.isArray(connectorSpec)) { - if (connectorSpec.length == 1) - this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec[0], connectorArgs); - else - this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec[0], _ju.merge(connectorSpec[1], connectorArgs)); - } - // binds mouse listeners to the current connector. - this.bindListeners(this.connector, this, function(state) { - this.setHover(state, false); - }.bind(this)); - - this.canvas = this.connector.canvas; - - if (this._jsPlumb.editable && jsPlumb.ConnectorEditors != null && jsPlumb.ConnectorEditors[this.connector.type] && this.connector.isEditable()) { - new jsPlumb.ConnectorEditors[this.connector.type]({ - connector:this.connector, - connection:this, - params:this._jsPlumb.params.editorParams || { } - }); - } - else { - editable = false; - } - - if (!doNotRepaint) this.repaint(); - }, - paint : function(params) { - - if (!this._jsPlumb.instance.isSuspendDrawing() && this._jsPlumb.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 != this._jsPlumb.lastPaintedAt) { - var sourceInfo = this._jsPlumb.instance.updateOffset( { elId : sId, offset : ui, recalc : recalc, timestamp : timestamp }).o, - targetInfo = this._jsPlumb.instance.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(); - this.connector.setEdited(false); - } - - var sAnchorP = sE.anchor.getCurrentLocation({xy:[sourceInfo.left,sourceInfo.top], wh:[sourceInfo.width, sourceInfo.height], element:sE, timestamp:timestamp}), - tAnchorP = tE.anchor.getCurrentLocation({xy:[targetInfo.left,targetInfo.top], wh:[targetInfo.width, targetInfo.height], element:tE, timestamp:timestamp}); - - this.connector.resetBounds(); - - this.connector.compute({ - sourcePos:sAnchorP, - targetPos:tAnchorP, - sourceEndpoint:this.endpoints[sIdx], - targetEndpoint:this.endpoints[tIdx], - lineWidth:this._jsPlumb.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 < this._jsPlumb.overlays.length; i++) { - var o = this._jsPlumb.overlays[i]; - if (o.isVisible()) { - this._jsPlumb.overlayPlacements[i] = o.draw(this.connector, this._jsPlumb.paintStyleInUse); - overlayExtents.minX = Math.min(overlayExtents.minX, this._jsPlumb.overlayPlacements[i].minX); - overlayExtents.maxX = Math.max(overlayExtents.maxX, this._jsPlumb.overlayPlacements[i].maxX); - overlayExtents.minY = Math.min(overlayExtents.minY, this._jsPlumb.overlayPlacements[i].minY); - overlayExtents.maxY = Math.max(overlayExtents.maxY, this._jsPlumb.overlayPlacements[i].maxY); - } - } - - var lineWidth = parseFloat(this._jsPlumb.paintStyleInUse.lineWidth || 1) / 2, - outlineWidth = parseFloat(this._jsPlumb.paintStyleInUse.lineWidth || 0), - extents = { - xmin : Math.min(this.connector.bounds.minX - (lineWidth + outlineWidth), overlayExtents.minX), - ymin : Math.min(this.connector.bounds.minY - (lineWidth + outlineWidth), overlayExtents.minY), - xmax : Math.max(this.connector.bounds.maxX + (lineWidth + outlineWidth), overlayExtents.maxX), - ymax : Math.max(this.connector.bounds.maxY + (lineWidth + outlineWidth), overlayExtents.maxY) - }; - - // paint the connector. - this.connector.paint(this._jsPlumb.paintStyleInUse, null, extents); - // and then the overlays - for ( var j = 0; j < this._jsPlumb.overlays.length; j++) { - var p = this._jsPlumb.overlays[j]; - if (p.isVisible()) { - p.paint(this._jsPlumb.overlayPlacements[j], extents); - } - } - } - this._jsPlumb.lastPaintedAt = timestamp; - } - }, - /* - * Function: repaint - * Repaints the Connection. No parameters exposed to public API. - */ - repaint : function(params) { - params = params || {}; - this.paint({ elId : this.sourceId, recalc : !(params.recalc === false), timestamp:params.timestamp, clearEdits:params.clearEdits }); - } - - }); // END Connection class -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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(a)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 - 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];*/ - r = a[0][0] < b[0][0]; - } - else { - /*if (a[0][0] > b[0][0]) - r= true; - else - r =a[0][1] > b[0][1]; - */ - r = a[0][0] > b[0][0]; - } - 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":function(a, b) { return a[0] > b[0] ? 1 : -1; }, - "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); - }; - var removeEndpointFromAnchorLists = function(endpoint) { - (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); - } - })(anchorLists[endpoint.elementId], endpoint.id); - }; - this.connectionDetached = function(connInfo) { - var connection = connInfo.connection || connInfo, - sourceId = connInfo.sourceId, - targetId = connInfo.targetId, - ep = connection.endpoints, - removeConnection = function(otherIndex, otherEndpoint, otherAnchor, elId, c) { - if (otherAnchor != null && 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 - removeEndpointFromAnchorLists(connection.endpoints[0]); - removeEndpointFromAnchorLists(connection.endpoints[1]); - - self.redraw(connection.sourceId); - self.redraw(connection.targetId); - }; - 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; - }); - removeEndpointFromAnchorLists(endpoint); - }; - 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; }); - jsPlumbUtil.addWithFunction(endpointsToPaint, listToRemoveFrom[i][1].endpoints[oIdx], function(e) { return e.id == listToRemoveFrom[i][1].endpoints[oIdx].id; }); - } - } - } - - for (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; }); - jsPlumbUtil.addWithFunction(endpointsToPaint, listToAddTo[i][1].endpoints[oIdx], function(e) { return e.id == listToAddTo[i][1].endpoints[oIdx].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; - }; - - // - // find the entry in an endpoint's list for this connection and update its target endpoint - // with the current target in the connection. - // - // - this.updateOtherEndpoint = function(elId, oldTargetId, newTargetId, connection) { - var sIndex = jsPlumbUtil.findWithFunction(connectionsByElementId[elId], function(i) { - return i[0].id === connection.id; - }), - tIndex = jsPlumbUtil.findWithFunction(connectionsByElementId[oldTargetId], function(i) { - return i[0].id === connection.id; - }); - - // update or add data for source - if (sIndex != -1) { - connectionsByElementId[elId][sIndex][0] = connection; - connectionsByElementId[elId][sIndex][1] = connection.endpoints[1]; - connectionsByElementId[elId][sIndex][2] = connection.endpoints[1].anchor.constructor == jsPlumb.DynamicAnchor; - } - - // remove entry for previous target (if there) - if (tIndex > -1) { - - connectionsByElementId[oldTargetId].splice(tIndex, 1); - // add entry for new target - jsPlumbUtil.addToList(connectionsByElementId, newTargetId, [connection, connection.endpoints[0], connection.endpoints[0].anchor.constructor == jsPlumb.DynamicAnchor]); - } - }; - - // - // notification that the connection given has changed source from the originalId to the newId. - // This involves: - // 1. removing the connection from the list of connections stored for the originalId - // 2. updating the source information for the target of the connection - // 3. re-registering the connection in connectionsByElementId with the newId - // - this.sourceChanged = function(originalId, newId, connection) { - // remove the entry that points from the old source to the target - jsPlumbUtil.removeWithFunction(connectionsByElementId[originalId], function(info) { - return info[0].id === connection.id; - }); - // find entry for target and update it - var tIdx = jsPlumbUtil.findWithFunction(connectionsByElementId[connection.targetId], function(i) { - return i[0].id === connection.id; - }); - if (tIdx > -1) { - connectionsByElementId[connection.targetId][tIdx][0] = connection; - connectionsByElementId[connection.targetId][tIdx][1] = connection.endpoints[0]; - connectionsByElementId[connection.targetId][tIdx][2] = connection.endpoints[0].anchor.constructor == jsPlumb.DynamicAnchor; - } - // add entry for new source - jsPlumbUtil.addToList(connectionsByElementId, newId, [connection, connection.endpoints[1], connection.endpoints[1].anchor.constructor == jsPlumb.DynamicAnchor]); - }; - - // - // moves the given endpoint from `currentId` to `element`. - // This involves: - // - // 1. changing the key in _amEndpoints under which the endpoint is stored - // 2. changing the source or target values in all of the endpoint's connections - // 3. changing the array in connectionsByElementId in which the endpoint's connections - // are stored (done by either sourceChanged or updateOtherEndpoint) - // - this.rehomeEndpoint = function(ep, currentId, element) { - var eps = _amEndpoints[currentId] || [], - elementId = jsPlumbInstance.getId(element); - - if (elementId !== currentId) { - var idx = jsPlumbUtil.indexOf(eps, ep); - if (idx > -1) { - var _ep = eps.splice(idx, 1)[0]; - self.add(_ep, elementId); - } - } - - for (var i = 0; i < ep.connections.length; i++) { - if (ep.connections[i].sourceId == currentId) { - ep.connections[i].sourceId = ep.elementId; - ep.connections[i].source = ep.element; - self.sourceChanged(currentId, ep.elementId, ep.connections[i]); - } - else if(ep.connections[i].targetId == currentId) { - ep.connections[i].targetId = ep.elementId; - ep.connections[i].target = ep.element; - self.updateOtherEndpoint(ep.connections[i].sourceId, currentId, ep.elementId, ep.connections[i]); - } - } - }; - - this.redraw = function(elementId, ui, timestamp, offsetToUI, clearEdits, doNotRecalcEndpoint) { - - 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 }), - 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 (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 (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 (i = 0; i < ep.length; i++) { - ep[i].paint( { timestamp : timestamp, offset : myOffset, dimensions : myOffset.s, recalc:doNotRecalcEndpoint !== true }); - } - // ... and any other endpoints we came across as a result of the continuous anchors. - for (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 (i = 0; i < endpointConnections.length; i++) { - var otherEndpoint = endpointConnections[i][1]; - if (otherEndpoint.anchor.constructor == jsPlumb.DynamicAnchor) { - otherEndpoint.paint({ elementWithPrecedence:elementId, timestamp:timestamp }); - 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 (i = 0; i < connectionsToPaint.length; i++) { - connectionsToPaint[i].paint({elId:elementId, timestamp:timestamp, recalc:false, clearEdits:clearEdits}); - } - } - }; - - var ContinuousAnchor = function(anchorParams) { - jsPlumbUtil.EventGenerator.apply(this); - 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, - cssClass = anchorParams.cssClass || ""; - - for (var i = 0; i < faces.length; i++) { availableFaces[faces[i]] = true; } - - // if the given edge is supported, 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(params) { - return userDefinedContinuousAnchorLocations[params.element.id] || continuousAnchorLocations[params.element.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; - }; - this.getCssClass = function() { return cssClass; }; - this.setCssClass = function(c) { cssClass = c; }; - }; - - // continuous anchors - jsPlumbInstance.continuousAnchorFactory = { - get:function(params) { - var existing = continuousAnchors[params.elementId]; - if (!existing) { - existing = new ContinuousAnchor(params); - continuousAnchors[params.elementId] = existing; - } - return existing; - }, - clear:function(elementId) { - delete continuousAnchors[elementId]; - } - }; - }; - - /** - * 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) { - this.x = params.x || 0; - this.y = params.y || 0; - this.elementId = params.elementId; - this.cssClass = params.cssClass || ""; - this.userDefinedLocation = null; - this.orientation = params.orientation || [ 0, 0 ]; - - jsPlumbUtil.EventGenerator.apply(this); - - var jsPlumbInstance = params.jsPlumbInstance;//, - //lastTimestamp = null;//, lastReturnValue = null; - - this.lastReturnValue = null; - this.offsets = params.offsets || [ 0, 0 ]; - this.timestamp = null; - this.compute = function(params) { - - var xy = params.xy, wh = params.wh, element = params.element, timestamp = params.timestamp; - - if(params.clearUserDefinedLocation) - this.userDefinedLocation = null; - - if (timestamp && timestamp === self.timestamp) - return this.lastReturnValue; - - if (this.userDefinedLocation != null) { - this.lastReturnValue = this.userDefinedLocation; - } - else { - - this.lastReturnValue = [ xy[0] + (this.x * wh[0]) + this.offsets[0], xy[1] + (this.y * wh[1]) + this.offsets[1] ]; - // adjust loc if there is an offsetParent - this.lastReturnValue = jsPlumbInstance.adjustForParentOffsetAndScroll(this.lastReturnValue, element.canvas); - } - - this.timestamp = timestamp; - return this.lastReturnValue; - }; - - this.getCurrentLocation = function(params) { - return (this.lastReturnValue == null || (params.timestamp != null && this.timestamp != params.timestamp)) ? this.compute(params) : this.lastReturnValue; - }; - }; - jsPlumbUtil.extend(jsPlumb.Anchor, jsPlumbUtil.EventGenerator, { - equals : function(anchor) { - if (!anchor) return false; - var ao = anchor.getOrientation(), - 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]; - }, - getUserDefinedLocation : function() { - return this.userDefinedLocation; - }, - setUserDefinedLocation : function(l) { - this.userDefinedLocation = l; - }, - clearUserDefinedLocation : function() { - this.userDefinedLocation = null; - }, - getOrientation : function(_endpoint) { return this.orientation; }, - getCssClass : function() { return this.cssClass; } - }); - - /** - * 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; - - // clear from parent. we want floating anchor orientation to always be computed. - this.orientation = 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, endpoint) { - orientation = anchor.getOrientation(endpoint); - }; - - /** - * 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(params) { return _lastResult == null ? this.compute(params) : _lastResult; }; - }; - jsPlumbUtil.extend(jsPlumb.FloatingAnchor, jsPlumb.Anchor); - - var _convertAnchor = function(anchor, jsPlumbInstance, elementId) { - return anchor.constructor == jsPlumb.Anchor ? anchor: jsPlumbInstance.makeAnchor(anchor, elementId, jsPlumbInstance); - }; - - /* - * 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(params) { - jsPlumb.Anchor.apply(this, arguments); - - this.isSelective = true; - this.isDynamic = true; - this.anchors = []; - this.elementId = params.elementId; - this.jsPlumbInstance = params.jsPlumbInstance; - - for (var i = 0; i < params.anchors.length; i++) - this.anchors[i] = _convertAnchor(params.anchors[i], this.jsPlumbInstance, this.elementId); - this.addAnchor = function(anchor) { this.anchors.push(_convertAnchor(anchor, this.jsPlumbInstance, this.elementId)); }; - this.getAnchors = function() { return this.anchors; }; - this.locked = false; - var _curAnchor = this.anchors.length > 0 ? this.anchors[0] : null, - _curIndex = this.anchors.length > 0 ? 0 : -1, - _lastAnchor = _curAnchor, - 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 = params.selector || 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; - - this.timestamp = timestamp; - - 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 (this.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, this.anchors); - this.x = _curAnchor.x; - this.y = _curAnchor.y; - - if (_curAnchor != _lastAnchor) - this.fire("anchorChanged", _curAnchor); - - _lastAnchor = _curAnchor; - - return _curAnchor.compute(params); - }; - - this.getCurrentLocation = function(params) { - return this.getUserDefinedLocation() || (_curAnchor != null ? _curAnchor.getCurrentLocation(params) : null); - }; - - this.getOrientation = function(_endpoint) { return _curAnchor != null ? _curAnchor.getOrientation(_endpoint) : [ 0, 0 ]; }; - this.over = function(anchor, endpoint) { if (_curAnchor != null) _curAnchor.over(anchor, endpoint); }; - this.out = function() { if (_curAnchor != null) _curAnchor.out(); }; - - this.getCssClass = function() { return (_curAnchor && _curAnchor.getCssClass()) || ""; }; - }; - jsPlumbUtil.extend(jsPlumb.DynamicAnchor, jsPlumb.Anchor); - -// -------- 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.2: 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 j = 0; j < p.length; j++) { - p[j][4] = p[j][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; - }; -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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 = jsPlumbUtil.extend(jsPlumb.jsPlumbUIComponent, function(params) { - // 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.2, 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 _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"; - - this.getLength = function() { return length; }; - this.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 = this.pointOnPath(location, absolute), - farAwayPoint = distance <= 0 ? {x:x1, y:y1} : {x:x2, y:y2 }; - - /* - location == 1 ? { - x:x1 + ((x2 - x1) * 10), - y:y1 + ((y1 - y2) * 10) - } : - */ - - 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 _super = jsPlumb.Segments.AbstractSegment.apply(this, arguments), - _calcAngle = function(_x, _y) { - return jsPlumbUtil.theta([params.cx, params.cy], [_x, _y]); - }, - _calcAngleForLocation = function(segment, location) { - if (segment.anticlockwise) { - var sa = segment.startAngle < segment.endAngle ? segment.startAngle + TWO_PI : segment.startAngle, - s = Math.abs(sa - segment.endAngle); - return sa - (s * location); - } - else { - var ea = segment.endAngle < segment.startAngle ? segment.endAngle + TWO_PI : segment.endAngle, - ss = Math.abs (ea - segment.startAngle); - - return segment.startAngle + (ss * 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 + (this.radius * Math.cos(params.startAngle)); - this.y1 = params.cy + (this.radius * Math.sin(params.startAngle)); - this.x2 = params.cx + (this.radius * Math.cos(params.endAngle)); - this.y2 = params.cy + (this.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 = this.endAngle < this.startAngle ? this.endAngle + TWO_PI : this.endAngle; - this.sweep = Math.abs (ea - this.startAngle); - if (this.anticlockwise) this.sweep = TWO_PI - this.sweep; - var circumference = 2 * Math.PI * this.radius, - frac = this.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:this.x1, y:this.y1, theta:this.startAngle }; - } - else if (location == 1) { - return { x:this.x2, y:this.y2, theta:this.endAngle }; - } - - if (absolute) { - location = location / length; - } - - var angle = _calcAngleForLocation(this, 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 = this.pointOnPath(location, absolute); - var m = jsPlumbUtil.normal( [ params.cx, params.cy ], [p.x, p.y ] ); - if (!this.anticlockwise && (m == Infinity || m == -Infinity)) m *= -1; - return m; - }; - - this.pointAlongPathFrom = function(location, distance, absolute) { - var p = this.pointOnPath(location, absolute), - arcSpan = distance / circumference * 2 * Math.PI, - dir = this.anticlockwise ? -1 : 1, - startAngle = p.theta + (dir * arcSpan), - startX = params.cx + (this.radius * Math.cos(startAngle)), - startY = params.cy + (this.radius * Math.sin(startAngle)); - - return {x:startX, y:startY}; - }; - }, - - Bezier : function(params) { - var _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() { - this.resetBounds = function() { - this.bounds = { minX:Infinity, minY:Infinity, maxX:-Infinity, maxY:-Infinity }; - }; - this.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(conn, type, params) { - if (params.x1 == params.x2 && params.y1 == params.y2) return; - var s = new jsPlumb.Segments[type](params); - segments.push(s); - totalLength += s.getLength(); - conn.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) { - this.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.sourceEndpoint.anchor.orientation || params.sourceEndpoint.anchor.getOrientation(params.sourceEndpoint), - to = params.targetEndpoint.anchor.orientation || params.targetEndpoint.anchor.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; }; - - this.updateBounds = function(segment) { - var segBounds = segment.getBounds(); - this.bounds.minX = Math.min(this.bounds.minX, segBounds.minX); - this.bounds.maxX = Math.max(this.bounds.maxX, segBounds.maxX); - this.bounds.minY = Math.min(this.bounds.minY, segBounds.minY); - this.bounds.maxY = Math.max(this.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) { - var seg = _findSegmentForLocation(location, absolute); - return seg.segment && seg.segment.pointOnPath(seg.proportion, absolute) || [0,0]; - }; - - this.gradientAtPoint = function(location) { - var seg = _findSegmentForLocation(location, absolute); - return seg.segment && seg.segment.gradientAtPoint(seg.proportion, absolute) || 0; - }; - - this.pointAlongPathFrom = function(location, distance, absolute) { - var seg = _findSegmentForLocation(location, absolute); - // TODO what happens if this crosses to the next segment? - return seg.segment && seg.segment.pointAlongPathFrom(seg.proportion, distance, false) || [0,0]; - }; - - this.compute = function(params) { - if (!edited) - paintInfo = _prepareCompute(params); - - _clearSegments(); - this._compute(paintInfo, params); - this.x = paintInfo.points[0]; - this.y = paintInfo.points[1]; - this.w = paintInfo.points[2]; - this.h = paintInfo.points[3]; - this.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) - }; - }; - jsPlumbUtil.extend(jsPlumb.Connectors.AbstractConnector, AbstractComponent); - - /** - * Class: Connectors.Straight - * The Straight connector draws a simple straight line between the two anchor points. It does not have any constructor parameters. - */ - var Straight = function() { - this.type = "Straight"; - var _super = jsPlumb.Connectors.AbstractConnector.apply(this, arguments); - - this._compute = function(paintInfo, _) { - _super.addSegment(this, "Straight", {x1:paintInfo.sx, y1:paintInfo.sy, x2:paintInfo.startStubX, y2:paintInfo.startStubY}); - _super.addSegment(this, "Straight", {x1:paintInfo.startStubX, y1:paintInfo.startStubY, x2:paintInfo.endStubX, y2:paintInfo.endStubY}); - _super.addSegment(this, "Straight", {x1:paintInfo.endStubX, y1:paintInfo.endStubY, x2:paintInfo.tx, y2:paintInfo.ty}); - }; - }; - jsPlumbUtil.extend(jsPlumb.Connectors.Straight, jsPlumb.Connectors.AbstractConnector); - jsPlumb.registerConnectorType(Straight, "Straight"); - - /** - * 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. - * - */ - var Bezier = function(params) { - params = params || {}; - - var _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) { - // 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 = sourceEndpoint.anchor.getOrientation(sourceEndpoint), - too = targetEndpoint.anchor.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 = this._findControlPoint([_sx, _sy], sp, tp, p.sourceEndpoint, p.targetEndpoint), - _CP2 = this._findControlPoint([_tx, _ty], tp, sp, p.targetEndpoint, p.sourceEndpoint); - - _super.addSegment(this, "Bezier", { - x1:_sx, y1:_sy, x2:_tx, y2:_ty, - cp1x:_CP[0], cp1y:_CP[1], cp2x:_CP2[0], cp2y:_CP2[1] - }); - }; - }; - jsPlumbUtil.extend(Bezier, jsPlumb.Connectors.AbstractConnector); - jsPlumb.registerConnectorType(Bezier, "Bezier"); - - // ********************************* END OF CONNECTOR TYPES ******************************************************************* - - // ********************************* ENDPOINT TYPES ******************************************************************* - - jsPlumb.Endpoints.AbstractEndpoint = function(params) { - AbstractComponent.apply(this, arguments); - var compute = this.compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { - var out = this._compute.apply(this, arguments); - this.x = out[0]; - this.y = out[1]; - this.w = out[2]; - this.h = out[3]; - this.bounds.minX = this.x; - this.bounds.minY = this.y; - this.bounds.maxX = this.x + this.w; - this.bounds.maxY = this.y + this.h; - return out; - }; - return { - compute:compute, - cssClass:params.cssClass - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.AbstractEndpoint, AbstractComponent); - - /** - * 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 _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) { - this.radius = endpointStyle.radius || this.radius; - var x = anchorPoint[0] - this.radius, - y = anchorPoint[1] - this.radius, - w = this.radius * 2, - h = this.radius * 2; - - if (endpointStyle.strokeStyle) { - var lw = endpointStyle.lineWidth || 1; - x -= lw; - y -= lw; - w += (lw * 2); - h += (lw * 2); - } - return [ x, y, w, h, this.radius ]; - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.Dot, jsPlumb.Endpoints.AbstractEndpoint); - - /** - * 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 _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 || this.width, - height = endpointStyle.height || this.height, - x = anchorPoint[0] - (width/2), - y = anchorPoint[1] - (height/2); - - return [ x, y, width, height]; - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.Rectangle, jsPlumb.Endpoints.AbstractEndpoint); - - - var DOMElementEndpoint = function(params) { - jsPlumb.DOMElementComponent.apply(this, arguments); - this._jsPlumb.displayElements = [ ]; - }; - jsPlumbUtil.extend(DOMElementEndpoint, jsPlumb.DOMElementComponent, { - // jsPlumb.Endpoints.AbstractEndpoint - getDisplayElements : function() { - return this._jsPlumb.displayElements; - }, - appendDisplayElement : function(el) { - this._jsPlumb.displayElements.push(el); - } - }); - - /** - * Class: Endpoints.Image - * Draws an image as the Endpoint. - */ - /** - * Function: Constructor - * - * Parameters: - * - * src - location of the image to use. - - TODO: multiple references to self. not sure quite how to get rid of them entirely. perhaps self = null in the cleanup - function will suffice - - TODO this class still leaks memory. - - */ - jsPlumb.Endpoints.Image = function(params) { - - this.type = "Image"; - DOMElementEndpoint.apply(this, arguments); - jsPlumb.Endpoints.AbstractEndpoint.apply(this, arguments); - - var _onload = params.onload, - src = params.src || params.url, - parent = params.parent, - clazz = params.cssClass ? " " + params.cssClass : ""; - - this._jsPlumb.img = new Image(); - this._jsPlumb.ready = false; - this._jsPlumb.initialized = false; - this._jsPlumb.deleted = false; - this._jsPlumb.widthToUse = params.width; - this._jsPlumb.heightToUse = params.height; - this._jsPlumb.endpoint = params.endpoint; - - this._jsPlumb.img.onload = function() { - // check we weren't actually discarded before use (in fact mostly happens in tests) - if (this._jsPlumb != null) { - this._jsPlumb.ready = true; - this._jsPlumb.widthToUse = this._jsPlumb.widthToUse || this._jsPlumb.img.width; - this._jsPlumb.heightToUse = this._jsPlumb.heightToUse || this._jsPlumb.img.height; - if (_onload) { - _onload(this); - } - } - }.bind(this); - - /* - 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. - */ - this._jsPlumb.endpoint.setImage = function(_img, onload) { - var s = _img.constructor == String ? _img : _img.src; - _onload = onload; - this._jsPlumb.img.src = s; - - if (this.canvas != null) - this.canvas.setAttribute("src", this._jsPlumb.img.src); - }.bind(this); - - this._jsPlumb.endpoint.setImage(src, _onload); - /* - var s = src.constructor == String ? src : src.src; - //_onload = onload; - this._jsPlumb.img.src = src; - - if (this.canvas != null) - this.canvas.setAttribute("src", this._jsPlumb.img.src); - // }.bind(this); - - //this._jsPlumb.endpoint.setImage(src, _onload);*/ - - this._compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { - this.anchorPoint = anchorPoint; - if (this._jsPlumb.ready) return [anchorPoint[0] - this._jsPlumb.widthToUse / 2, anchorPoint[1] - this._jsPlumb.heightToUse / 2, - this._jsPlumb.widthToUse, this._jsPlumb.heightToUse]; - else return [0,0,0,0]; - }; - - this.canvas = document.createElement("img"); - this.canvas.style.margin = 0; - this.canvas.style.padding = 0; - this.canvas.style.outline = 0; - this.canvas.style.position = "absolute"; - this.canvas.className = this._jsPlumb.instance.endpointClass + clazz; - if (this._jsPlumb.widthToUse) this.canvas.setAttribute("width", this._jsPlumb.widthToUse); - if (this._jsPlumb.heightToUse) this.canvas.setAttribute("height", this._jsPlumb.heightToUse); - this._jsPlumb.instance.appendElement(this.canvas, parent); - this.attachListeners(this.canvas, this); - - this.actuallyPaint = function(d, style, anchor) { - if (!this._jsPlumb.deleted) { - if (!this._jsPlumb.initialized) { - this.canvas.setAttribute("src", this._jsPlumb.img.src); - this.appendDisplayElement(this.canvas); - this._jsPlumb.initialized = true; - } - var x = this.anchorPoint[0] - (this._jsPlumb.widthToUse / 2), - y = this.anchorPoint[1] - (this._jsPlumb.heightToUse / 2); - jsPlumbUtil.sizeElement(this.canvas, x, y, this._jsPlumb.widthToUse, this._jsPlumb.heightToUse); - } - }; - - this.paint = function(style, anchor) { - if (this._jsPlumb != null) { // may have been deleted - if (this._jsPlumb.ready) { - this.actuallyPaint(style, anchor); - } - else { - window.setTimeout(function() { - this.paint(style, anchor); - }.bind(this), 200); - } - } - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.Image, [ DOMElementEndpoint, jsPlumb.Endpoints.AbstractEndpoint ], { - cleanup : function() { - this._jsPlumb.deleted = true; - jsPlumbUtil.removeElement(this.canvas); - this.canvas = null; - } - }); - - /* - * 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 _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]; - }; - - this.canvas = document.createElement("div"); - this.canvas.style.display = "block"; - this.canvas.style.width = "1px"; - this.canvas.style.height = "1px"; - this.canvas.style.background = "transparent"; - this.canvas.style.position = "absolute"; - this.canvas.className = this._jsPlumb.endpointClass; - jsPlumb.appendElement(this.canvas, params.parent); - - this.paint = function(style, anchor) { - jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.Blank, [jsPlumb.Endpoints.AbstractEndpoint, DOMElementEndpoint], { - cleanup:function() { - if (this.canvas) { - this.canvas.parentNode.removeChild(this.canvas); - } - } - }); - - /* - * 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 _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) { - this.visible = true; - 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.; - }; - AbstractOverlay.prototype = { - cleanup:function() { - this.component = null; - this.canvas = null; - this.endpointLoc = null; - }, - setVisible : function(val) { - this.visible = val; - this.component.repaint(); - }, - isVisible : function() { return this.visible; }, - hide : function() { this.setVisible(false); }, - show : function() { this.setVisible(true); }, - - incrementLocation : function(amount) { - this.loc += amount; - this.component.repaint(); - }, - setLocation : function(l) { - this.loc = l; - this.component.repaint(); - }, - getLocation : function() { - return this.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 _ju = jsPlumbUtil; - - 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 (_ju.isString(this.loc) || this.loc > 1 || this.loc < 0) { - var l = parseInt(this.loc, 10); - hxy = component.pointAlongPathFrom(l, direction * this.length / 2, true); - mid = component.pointOnPath(l, true); - txy = _ju.pointOnLine(hxy, mid, this.length); - } - else if (this.loc == 1) { - hxy = component.pointOnPath(this.loc); - mid = component.pointAlongPathFrom(this.loc, -(this.length)); - txy = _ju.pointOnLine(hxy, mid, this.length); - - if (direction == -1) { - var _ = txy; - txy = hxy; - hxy = _; - } - } - else if (this.loc === 0) { - txy = component.pointOnPath(this.loc); - mid = component.pointAlongPathFrom(this.loc, this.length); - hxy = _ju.pointOnLine(txy, mid, this.length); - if (direction == -1) { - var __ = txy; - txy = hxy; - hxy = __; - } - } - else { - hxy = component.pointAlongPathFrom(this.loc, direction * this.length / 2); - mid = component.pointOnPath(this.loc); - txy = _ju.pointOnLine(hxy, mid, this.length); - } - - tail = _ju.perpendicularLineTo(hxy, txy, this.width); - cxy = _ju.pointOnLine(hxy, txy, foldback * this.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}; - }; - }; - jsPlumbUtil.extend(jsPlumb.Overlays.Arrow, AbstractOverlay); - - /* - * 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"; - }; - jsPlumbUtil.extend(jsPlumb.Overlays.PlainArrow, jsPlumb.Overlays.Arrow); - - /* - * 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"; - }; - jsPlumbUtil.extend(jsPlumb.Overlays.Diamond, jsPlumb.Overlays.Arrow); - - var _getDimensions = function(component) { - if (component._jsPlumb.cachedDimensions == null) - component._jsPlumb.cachedDimensions = component.getDimensions(); - return component._jsPlumb.cachedDimensions; - }; - - // 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 jpcl = jsPlumb.CurrentLibrary; - this.id = params.id; - this._jsPlumb.div = null; - this._jsPlumb.initialised = false; - this._jsPlumb.component = params.component; - this._jsPlumb.cachedDimensions = null; - this._jsPlumb.create = params.create; - - this.getElement = function() { - if (this._jsPlumb.div == null) { - var div = this._jsPlumb.div = jpcl.getDOMElement(this._jsPlumb.create(this._jsPlumb.component)); - div.style.position = "absolute"; - var clazz = params._jsPlumb.overlayClass + " " + - (this.cssClass ? this.cssClass : - params.cssClass ? params.cssClass : ""); - div.className = clazz; - this._jsPlumb.instance.appendElement(div, this._jsPlumb.component.parent); - this._jsPlumb.instance.getId(div); - this.attachListeners(div, this); - this.canvas = div; - } - return this._jsPlumb.div; - }; - - /* - this.paint = function(p, containerExtents) { - if (!this._jsPlumb.initialised) { - this.getElement(); - p.component.appendDisplayElement(this._jsPlumb.div); - this.attachListeners(this._jsPlumb.div, p.component); - this._jsPlumb.initialised = true; - } - this._jsPlumb.div.style.left = (p.component.x + p.d.minx) + "px"; - this._jsPlumb.div.style.top = (p.component.y + p.d.miny) + "px"; - };*/ - - this.draw = function(component, currentConnectionPaintStyle) { - var td = _getDimensions(this); - if (td != null && td.length == 2) { - var cxy = {x:0,y:0}; - if (component.pointOnPath) { - var loc = this.loc, absolute = false; - if (jsPlumbUtil.isString(this.loc) || this.loc < 0 || this.loc > 1) { - loc = parseInt(this.loc, 10); - absolute = true; - } - cxy = component.pointOnPath(loc, absolute); // a connection - } - else { - var locToUse = this.loc.constructor == Array ? this.loc : this.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}; - }; - }; - jsPlumbUtil.extend(AbstractDOMOverlay, [jsPlumb.DOMElementComponent, AbstractOverlay], { - getDimensions : function() { - return jsPlumb.CurrentLibrary.getSize(jsPlumb.CurrentLibrary.getElementObject(this.getElement())); - }, - setVisible : function(state) { - this._jsPlumb.div.style.display = state ? "block" : "none"; - }, - /* - * 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. - */ - clearCachedDimensions : function() { - this._jsPlumb.cachedDimensions = null; - }, - cleanup : function() { - if (this._jsPlumb.div != null) - jsPlumb.CurrentLibrary.removeElement(this._jsPlumb.div); - }, - computeMaxSize : function() { - var td = _getDimensions(this); - return Math.max(td[0], td[1]); - }, - reattachListeners : function(connector) { - if (this._jsPlumb.div) { - this.reattachListenersForElement(this._jsPlumb.div, this, connector); - } - }, - paint : function(p, containerExtents) { - if (!this._jsPlumb.initialised) { - this.getElement(); - p.component.appendDisplayElement(this._jsPlumb.div); - this.attachListeners(this._jsPlumb.div, p.component); - this._jsPlumb.initialised = true; - } - this._jsPlumb.div.style.left = (p.component.x + p.d.minx) + "px"; - this._jsPlumb.div.style.top = (p.component.y + p.d.miny) + "px"; - } - }); - - /* - * 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); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.Custom, AbstractDOMOverlay); - - 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) { - this.labelStyle = params.labelStyle || jsPlumb.Defaults.LabelStyle; - this.cssClass = this.labelStyle != null ? this.labelStyle.cssClass : null; - var p = jsPlumb.extend({ - create : function() { - return document.createElement("div"); - }}, params); - jsPlumb.Overlays.Custom.call(this, p); - this.type = "Label"; - this.label = params.label || ""; - this.labelText = null; - }; - jsPlumbUtil.extend(jsPlumb.Overlays.Label, jsPlumb.Overlays.Custom, { - cleanup:function() { - this.div = null; - this.label = null; - this.labelText = null; - this.cssClass = null; - this.labelStyle = null; - }, - getLabel : function() { - return this.label; - }, - /* - * 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. - */ - setLabel : function(l) { - this.label = l; - this.labelText = null; - this.clearCachedDimensions(); - this.update(); - this.component.repaint(); - }, - getDimensions : function() { - this.update(); - return AbstractDOMOverlay.prototype.getDimensions.apply(this, arguments); - }, - update : function() { - if (typeof this.label == "function") { - var lt = this.label(this); - this.getElement().innerHTML = lt.replace(/\r\n/g, "<br/>"); - } - else { - if (this.labelText == null) { - this.labelText = this.label; - this.getElement().innerHTML = this.labelText.replace(/\r\n/g, "<br/>"); - } - } - } - }); - - // ********************************* END OF OVERLAY DEFINITIONS *********************************************************************** - -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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(a)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). - * alwaysRespectStubs - defaults to false. whether or not the connectors should always draw the stub, or, if the two elements - are in close proximity to each other (closer than the sum of the two stubs), to adjust the stubs. - */ - var Flowchart = function(params) { - this.type = "Flowchart"; - params = params || {}; - params.stub = params.stub == null ? 30 : params.stub; - var self = this, - _super = jsPlumb.Connectors.AbstractConnector.apply(this, arguments), - midpoint = params.midpoint == null ? 0.5 : params.midpoint, - points = [], segments = [], - grid = params.grid, - alwaysRespectStubs = params.alwaysRespectStubs, - userSuppliedSegments = null, - lastx = null, lasty = null, lastOrientation, - cornerRadius = params.cornerRadius != null ? params.cornerRadius : 0, - sgn = function(n) { return n < 0 ? -1 : n === 0 ? 0 : 1; }, - /** - * helper method to add a segment. - */ - addSegment = function(segments, x, y, paintInfo) { - if (lastx == x && lasty == y) return; - var lx = lastx == null ? paintInfo.sx : lastx, - ly = lasty == null ? paintInfo.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(conn, 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(conn, "Straight", { - x1:current[0], y1:current[1], x2:current[2], y2:current[3] - }); - - _super.addSegment(conn, "Arc", { - r:radiusToUse, - x1:current[2], - y1:current[3], - x2:next[0], - y2:next[1], - cx:cx, - cy:cy, - ac:ac - }); - } - else { - // dx + dy are used to adjust for line width. - var dx = (current[2] == current[0]) ? 0 : (current[2] > current[0]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2), - dy = (current[3] == current[1]) ? 0 : (current[3] > current[1]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2); - _super.addSegment(conn, "Straight", { - x1:current[0]- dx, y1:current[1]-dy, x2:current[2] + dx, y2:current[3] + dy - }); - } - current = next; - } - // last segment - _super.addSegment(conn, "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(this, 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); - - var findClearedLine = function(start, mult, anchorPos, dimension) { - return start + (mult * (( 1 - anchorPos) * dimension) + _super.maxStub); - }, - orientations = { x:[ 0, 1 ], y:[ 1, 0 ] }, - commonStubCalculator = function(axis) { - return [ paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY ]; - }, - stubCalculators = { - perpendicular:commonStubCalculator, - orthogonal:commonStubCalculator, - opposite:function(axis) { - var pi = paintInfo, - idx = axis == "x" ? 0 : 1, - areInProximity = { - "x":function() { - return ( (pi.so[idx] == 1 && ( - ( (pi.startStubX > pi.endStubX) && (pi.tx > pi.startStubX) ) || - ( (pi.sx > pi.endStubX) && (pi.tx > pi.sx))))) || - - ( (pi.so[idx] == -1 && ( - ( (pi.startStubX < pi.endStubX) && (pi.tx < pi.startStubX) ) || - ( (pi.sx < pi.endStubX) && (pi.tx < pi.sx))))); - }, - "y":function() { - return ( (pi.so[idx] == 1 && ( - ( (pi.startStubY > pi.endStubY) && (pi.ty > pi.startStubY) ) || - ( (pi.sy > pi.endStubY) && (pi.ty > pi.sy))))) || - - ( (pi.so[idx] == -1 && ( - ( (pi.startStubY < pi.endStubY) && (pi.ty < pi.startStubY) ) || - ( (pi.sy < pi.endStubY) && (pi.ty < pi.sy))))); - } - }; - - if (!alwaysRespectStubs && areInProximity[axis]()) { - return { - "x":[(paintInfo.sx + paintInfo.tx) / 2, paintInfo.startStubY, (paintInfo.sx + paintInfo.tx) / 2, paintInfo.endStubY], - "y":[paintInfo.startStubX, (paintInfo.sy + paintInfo.ty) / 2, paintInfo.endStubX, (paintInfo.sy + paintInfo.ty) / 2] - }[axis]; - } - else { - return [ paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY ]; - } - } - }, - lineCalculators = { - perpendicular : function(axis, ss, oss, es, oes) { - var pi = paintInfo, - 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:[ [ pi.startStubX, pi.endStubX ] , null, [ pi.endStubX, pi.startStubX ] ], - y:[ [ pi.startStubY, pi.endStubY ] , null, [ pi.endStubY, pi.startStubY ] ] - }, - midLines = { - x:[ [ midx, pi.startStubY ], [ midx, pi.endStubY ] ], - y:[ [ pi.startStubX, midy ], [ pi.endStubX, midy ] ] - }, - linesToEnd = { - x:[ [ pi.endStubX, pi.startStubY ] ], - y:[ [ pi.startStubX, pi.endStubY ] ] - }, - startToEnd = { - x:[ [ pi.startStubX, pi.endStubY ], [ pi.endStubX, pi.endStubY ] ], - y:[ [ pi.endStubX, pi.startStubY ], [ pi.endStubX, pi.endStubY ] ] - }, - startToMidToEnd = { - x:[ [ pi.startStubX, midy ], [ pi.endStubX, midy ], [ pi.endStubX, pi.endStubY ] ], - y:[ [ midx, pi.startStubY ], [ midx, pi.endStubY ], [ pi.endStubX, pi.endStubY ] ] - }, - otherStubs = { - x:[ pi.startStubY, pi.endStubY ], - y:[ pi.startStubX, pi.endStubX ] - }, - soIdx = orientations[axis][0], toIdx = orientations[axis][1], - _so = pi.so[soIdx] + 1, - _to = pi.to[toIdx] + 1, - otherFlipped = (pi.to[toIdx] == -1 && (otherStubs[axis][1] < otherStubs[axis][0])) || (pi.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 (pi.segment == segmentIndexes[3] || (pi.segment == segmentIndexes[2] && otherFlipped)) { - return midLines[axis]; - } - else if (pi.segment == segmentIndexes[2] && stub2 < stub1) { - return linesToEnd[axis]; - } - else if ((pi.segment == segmentIndexes[2] && stub2 >= stub1) || (pi.segment == segmentIndexes[1] && !otherFlipped)) { - return startToMidToEnd[axis]; - } - else if (pi.segment == segmentIndexes[0] || (pi.segment == segmentIndexes[1] && otherFlipped)) { - return startToEnd[axis]; - } - }, - orthogonal : function(axis, startStub, otherStartStub, endStub, otherEndStub) { - var pi = paintInfo, - extent = { - "x":pi.so[0] == -1 ? Math.min(startStub, endStub) : Math.max(startStub, endStub), - "y":pi.so[1] == -1 ? Math.min(startStub, endStub) : Math.max(startStub, endStub) - }[axis]; - - return { - "x":[ [ extent, otherStartStub ],[ extent, otherEndStub ], [ endStub, otherEndStub ] ], - "y":[ [ otherStartStub, extent ], [ otherEndStub, extent ], [ otherEndStub, endStub ] ] - }[axis]; - }, - opposite : function(axis, ss, oss, es, oes) { - var pi = paintInfo, - otherAxis = {"x":"y","y":"x"}[axis], - dim = {"x":"height","y":"width"}[axis], - comparator = pi["is" + axis.toUpperCase() + "GreaterThanStubTimes2"]; - - if (params.sourceEndpoint.elementId == params.targetEndpoint.elementId) { - var _val = oss + ((1 - params.sourceEndpoint.anchor[otherAxis]) * params.sourceInfo[dim]) + _super.maxStub; - return { - "x":[ [ ss, _val ], [ es, _val ] ], - "y":[ [ _val, ss ], [ _val, es ] ] - }[axis]; - - } - else if (!comparator || (pi.so[idx] == 1 && ss > es) || (pi.so[idx] == -1 && ss < es)) { - return { - "x":[[ ss, midy ], [ es, midy ]], - "y":[[ midx, ss ], [ midx, es ]] - }[axis]; - } - else if ((pi.so[idx] == 1 && ss < es) || (pi.so[idx] == -1 && ss > es)) { - return { - "x":[[ midx, pi.sy ], [ midx, pi.ty ]], - "y":[[ pi.sx, midy ], [ pi.tx, midy ]] - }[axis]; - } - } - }; - - var stubs = stubCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis), - idx = paintInfo.sourceAxis == "x" ? 0 : 1, - oidx = paintInfo.sourceAxis == "x" ? 1 : 0, - ss = stubs[idx], - oss = stubs[oidx], - es = stubs[idx + 2], - oes = stubs[oidx + 2]; - - // add the start stub segment. - addSegment(segments, stubs[0], stubs[1], paintInfo); - - // compute the rest of the line - var p = lineCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis, ss, oss, es, oes); - if (p) { - for (var i = 0; i < p.length; i++) { - addSegment(segments, p[i][0], p[i][1], paintInfo); - } - } - - // line to end stub - addSegment(segments, stubs[2], stubs[3], paintInfo); - - // end stub to end - addSegment(segments, paintInfo.tx, paintInfo.ty, paintInfo); - - writeSegments(this, 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]); - } - }; - }; - - jsPlumbUtil.extend(Flowchart, jsPlumb.Connectors.AbstractConnector); - jsPlumb.registerConnectorType(Flowchart, "Flowchart"); -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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(a)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 = [], xInt, yInt; - - // try top face - // the equation of the top face is y = (0 * x) + b; y = b. - 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 - yInt = (this.m * (x + w)) + this.b; - if (yInt >= y && yInt <= (y + h)) results.push([ (yInt - this.b) / this.m, yInt ]); - - // bottom face - 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 - 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. - */ - var 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(this, "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(this, "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 - }); - } - }; - }; - jsPlumb.registerConnectorType(StateMachine, "StateMachine"); -})(); - -/* - // 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]); -// } -// } - // } - // } - //} - */ - -;(function() { - - var 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) { - // 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 = sourceEndpoint.anchor.getOrientation(sourceEndpoint), - too = targetEndpoint.anchor.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), - _CP2 = self._findControlPoint([_tx, _ty], tp, sp, p.targetEndpoint, p.sourceEndpoint); - - _super.addSegment(this, "Bezier", { - x1:_sx, y1:_sy, x2:_tx, y2:_ty, - cp1x:_CP[0], cp1y:_CP[1], cp2x:_CP2[0], cp2y:_CP2[1] - }); - }; - }; - - jsPlumb.registerConnectorType(Bezier, "Bezier"); - -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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.2. - * 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() { - - -// ********************************* 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 = window.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; - }; - }; - jsPlumbUtil.extend(CanvasMouseAdapter, [ jsPlumb.jsPlumbUIComponent, jsPlumbUtil.EventGenerator ]); - - var _newCanvas = function(params) { - var canvas = document.createElement("canvas"); - params._jsPlumb.instance.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.instance.getId(canvas, params.uuid); - if (params.tooltip) canvas.setAttribute("title", params.tooltip); - - return canvas; - }; - - var CanvasComponent = window.CanvasComponent = function(params) { - CanvasMouseAdapter.apply(this, arguments); - - var displayElements = [ ]; - this.getDisplayElements = function() { return displayElements; }; - this.appendDisplayElement = function(el) { displayElements.push(el); }; - }; - jsPlumbUtil.extend(CanvasComponent, CanvasMouseAdapter); - - 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, dx, dy) { - ({ - "Straight":function(segment, ctx, style, dx, dy) { - var d = segment.params; - ctx.save(); - maybeMakeGradient(ctx, style, function() { return ctx.createLinearGradient(d.x1, d.y1, d.x2, d.y2); }); - ctx.beginPath(); - ctx.translate(dx, dy); - 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(); - - ctx.restore(); - }, - "Bezier":function(segment, ctx, style, dx, dy) { - var d = segment.params; - ctx.save(); - maybeMakeGradient(ctx, style, function() { return ctx.createLinearGradient(d.x2 + dx, d.y2 + dy, d.x1 + dx, d.y1 + dy); }); - ctx.beginPath(); - ctx.translate(dx, dy); - ctx.moveTo(d.x1, d.y1); - ctx.bezierCurveTo(d.cp1x, d.cp1y, d.cp2x, d.cp2y, d.x2, d.y2); - ctx.stroke(); - ctx.restore(); - }, - "Arc":function(segment, ctx, style, dx, dy) { - var d = segment.params; - ctx.save(); - ctx.beginPath(); - ctx.translate(dx, dy); - ctx.arc(d.cx, d.cy, d.r, segment.startAngle, segment.endAngle, d.ac); - ctx.stroke(); - ctx.restore(); - } - })[segment.type](segment, ctx, style, dx, dy); - }; - - /** - * Class:CanvasConnector - * Superclass for Canvas Connector renderers. - */ - var CanvasConnector = jsPlumb.ConnectorRenderers.canvas = function(params) { - CanvasComponent.apply(this, arguments); - - var _paintOneStyle = function(aStyle, dx, dy) { - this.ctx.save(); - jsPlumb.extend(this.ctx, aStyle); - - var segments = this.getSegments(); - for (var i = 0; i < segments.length; i++) { - segmentRenderer(segments[i], this.ctx, aStyle, dx, dy); - } - this.ctx.restore(); - }.bind(this); - - var clazz = this._jsPlumb.instance.connectorClass + " " + (params.cssClass || ""); - this.canvas = _newCanvas({ - "class":clazz, - _jsPlumb:this._jsPlumb, - parent:params.parent - }); - this.ctx = this.canvas.getContext("2d"); - - this.appendDisplayElement(this.canvas); - - this.paint = function(style, anchor, extents) { - if (style != null) { - - var xy = [ this.x, this.y ], wh = [ this.w, this.h ], p, - dx = 0, dy = 0; - - if (extents != null) { - if (extents.xmin < 0) { - xy[0] += extents.xmin; - dx = -extents.xmin; - } - if (extents.ymin < 0) { - xy[1] += extents.ymin; - dy = -extents.ymin; - } - wh[0] = extents.xmax + ((extents.xmin < 0) ? -extents.xmin : 0); - wh[1] = extents.ymax + ((extents.ymin < 0) ? -extents.ymin : 0); - } - - this.translateX = dx; - this.translateY = dy; - - jsPlumbUtil.sizeElement(this.canvas, xy[0], xy[1], wh[0], wh[1]); - - if (style.outlineColor != null) { - var outlineWidth = style.outlineWidth || 1, - outlineStrokeWidth = style.lineWidth + (2 * outlineWidth), - outlineStyle = { - strokeStyle:style.outlineColor, - lineWidth:outlineStrokeWidth - }; - _paintOneStyle(outlineStyle, dx, dy); - } - _paintOneStyle(style, dx, dy); - } - }; - }; - jsPlumbUtil.extend(CanvasConnector, CanvasComponent); - - - /** - * Class:CanvasEndpoint - * Superclass for Canvas Endpoint renderers. - */ - var CanvasEndpoint = function(params) { - CanvasComponent.apply(this, arguments); - var clazz = this._jsPlumb.instance.endpointClass + " " + (params.cssClass || ""), - canvasParams = { - "class":clazz, - _jsPlumb:this._jsPlumb, - parent:params.parent, - tooltip:self.tooltip - }; - this.canvas = _newCanvas(canvasParams); - this.ctx = this.canvas.getContext("2d"); - - this.appendDisplayElement(this.canvas); - - this.paint = function(style, anchor, extents) { - jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); - if (style.outlineColor != null) { - var outlineWidth = style.outlineWidth || 1, - outlineStrokeWidth = style.lineWidth + (2 * outlineWidth); - var outlineStyle = { - strokeStyle:style.outlineColor, - lineWidth:outlineStrokeWidth - }; - } - - this._paint.apply(this, arguments); - }; - }; - jsPlumbUtil.extend(CanvasEndpoint, CanvasComponent); - - 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, 10); } - catch(e) { - if (value.substring(value.length - 1) == '%') - return parseInt(value.substring(0, value - 1), 10); - } - }, - calculateAdjustments = function(gradient) { - var offsetAdjustment = self.defaultOffset, innerRadius = self.defaultInnerRadius; - if (gradient.offset) offsetAdjustment = parseValue(gradient.offset); - if (gradient.innerRadius) innerRadius = parseValue(gradient.innerRadius); - return [offsetAdjustment, innerRadius]; - }; - this._paint = function(style) { - if (style != null) { - var ctx = self.canvas.getContext('2d'), - orientation = params.endpoint.anchor.getOrientation(params.endpoint); - - 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(self.radius, self.radius, self.radius, self.radius + xAdjust, self.radius + 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.translate(dx, dy); - ctx.arc(self.radius, self.radius, self.radius, 0, Math.PI*2, true); - ctx.closePath(); - if (style.fillStyle || style.gradient) ctx.fill(); - if (style.strokeStyle) ctx.stroke(); - } - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Dot, [ jsPlumb.Endpoints.Dot, CanvasEndpoint ]); - - jsPlumb.Endpoints.canvas.Rectangle = function(params) { - - var self = this; - jsPlumb.Endpoints.Rectangle.apply(this, arguments); - CanvasEndpoint.apply(this, arguments); - - this._paint = function(style) { - - var ctx = self.canvas.getContext("2d"), - orientation = params.endpoint.anchor.getOrientation(params.endpoint); - - 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 ? self.h : orientation[1] === 0 ? self.h / 2 : 0; - var y2 = orientation[1] == -1 ? self.h : orientation[1] === 0 ? self.h / 2 : 0; - var x1 = orientation[0] == 1 ? self.w : orientation[0] === 0 ? self.w / 2 : 0; - var x2 = orientation[0] == -1 ? self.w : orientation[0] === 0 ? self.w / 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, self.w, self.h); - ctx.closePath(); - if (style.fillStyle || style.gradient) ctx.fill(); - if (style.strokeStyle) ctx.stroke(); - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Rectangle, [ jsPlumb.Endpoints.Rectangle, CanvasEndpoint ]); - - jsPlumb.Endpoints.canvas.Triangle = function(params) { - - var self = this; - jsPlumb.Endpoints.Triangle.apply(this, arguments); - CanvasEndpoint.apply(this, arguments); - - this._paint = function(style) { - var ctx = self.canvas.getContext('2d'), - offsetX = 0, offsetY = 0, angle = 0, - orientation = params.endpoint.anchor.getOrientation(params.endpoint); - - if( orientation[0] == 1 ) { - offsetX = self.width; - offsetY = self.height; - angle = 180; - } - if( orientation[1] == -1 ) { - offsetX = self.width; - angle = 90; - } - if( orientation[1] == 1 ) { - offsetY = self.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(self.width/2, self.height/2); - ctx.lineTo(0, self.height); - ctx.closePath(); - if (style.fillStyle || style.gradient) ctx.fill(); - if (style.strokeStyle) ctx.stroke(); - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Triangle, [ jsPlumb.Endpoints.Triangle, CanvasEndpoint ]); - - /* - * 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); - }; - jsPlumbUtil.extend(jsPlumb.Connectors.canvas.Bezier, [ jsPlumb.Connectors.Bezier, CanvasConnector ]); - - /* - * 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); - }; - jsPlumbUtil.extend(jsPlumb.Connectors.canvas.Straight, [ jsPlumb.Connectors.Straight, CanvasConnector ]); - - jsPlumb.Connectors.canvas.Flowchart = function() { - jsPlumb.Connectors.Flowchart.apply(this, arguments); - CanvasConnector.apply(this, arguments); - }; - jsPlumbUtil.extend(jsPlumb.Connectors.canvas.Flowchart, [ jsPlumb.Connectors.Flowchart, CanvasConnector ]); - - */ -// ********************************* 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); - }; - jsPlumbUtil.extend(CanvasOverlay, jsPlumb.jsPlumbUIComponent); - - var AbstractCanvasArrowOverlay = function(superclass, originalArgs) { - superclass.apply(this, originalArgs); - CanvasOverlay.apply(this, originalArgs); - this.paint = function(params, containerExtents) { - var ctx = params.component.ctx, d = params.d; - - if (d) { - ctx.save(); - ctx.lineWidth = params.lineWidth; - ctx.beginPath(); - ctx.translate(params.component.translateX, params.component.translateY); - 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 (params.strokeStyle) { - ctx.strokeStyle = params.strokeStyle; - ctx.stroke(); - } - if (params.fillStyle) { - ctx.fillStyle = params.fillStyle; - ctx.fill(); - } - ctx.restore(); - } - }; - }; - - jsPlumb.Overlays.canvas.Arrow = function() { - AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.canvas.Arrow, [ jsPlumb.Overlays.Arrow, CanvasOverlay ] ); - - jsPlumb.Overlays.canvas.PlainArrow = function() { - AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.canvas.PlainArrow, [ jsPlumb.Overlays.PlainArrow, CanvasOverlay ] ); - - jsPlumb.Overlays.canvas.Diamond = function() { - AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.canvas.Diamond, [ jsPlumb.Overlays.Diamond, CanvasOverlay ] ); -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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.instance.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 pointerEventsSpec = params.pointerEventsSpec || "all", renderer = {}; - - jsPlumb.jsPlumbUIComponent.apply(this, params.originalArgs); - this.canvas = null;this.path = null;this.svg = null; - - var clazz = params.cssClass + " " + (params.originalArgs[0].cssClass || ""), - svgParams = { - "style":"", - "width":0, - "height":0, - "pointer-events":pointerEventsSpec, - "position":"absolute" - }; - this.svg = _node("svg", svgParams); - if (params.useDivWrapper) { - this.canvas = document.createElement("div"); - this.canvas.style.position = "absolute"; - jsPlumbUtil.sizeElement(this.canvas,0,0,1,1); - this.canvas.className = clazz; - } - else { - _attr(this.svg, { "class":clazz }); - this.canvas = this.svg; - } - - params._jsPlumb.appendElement(this.canvas, params.originalArgs[0].parent); - if (params.useDivWrapper) this.canvas.appendChild(this.svg); - - // TODO this displayElement stuff is common between all components, across all - // renderers. would be best moved to jsPlumbUIComponent. - var displayElements = [ this.canvas ]; - this.getDisplayElements = function() { - return displayElements; - }; - - this.appendDisplayElement = function(el) { - displayElements.push(el); - }; - - this.paint = function(style, anchor, extents) { - if (style != null) { - - var xy = [ this.x, this.y ], wh = [ this.w, this.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) { - jsPlumbUtil.sizeElement(this.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(this.svg, { - "style":p, - "width": wh[0], - "height": wh[1] - }); - } - }; - - return { - renderer:renderer - }; - }; - jsPlumbUtil.extend(SvgComponent, jsPlumb.jsPlumbUIComponent, { - cleanup:function() { - jsPlumbUtil.removeElement(this.canvas); - this.svg = null; - this.canvas = null; - this.path = null; - } - }); - - /* - * 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 - } ]); - - /*this.pointOnPath = function(location, absolute) { - if (!self.path) return [0,0]; - var p = absolute ? location : location * self.path.getTotalLength(); - return self.path.getPointAtLength(p); - };*/ - - _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 (this.bgPath) this.reattachListenersForElement(this.bgPath, this); - if (this.path) this.reattachListenersForElement(this.path, this); - }; - }; - jsPlumbUtil.extend(jsPlumb.ConnectorRenderers.svg, SvgComponent); - -// ******************************* 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 _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 (this.node == null) { - this.node = this.makeNode(s); - this.svg.appendChild(this.node); - this.attachListeners(this.node, this); - } - else if (this.updateNode != null) { - this.updateNode(this.node); - } - _applyStyles(this.svg, this.node, s, [ this.x, this.y, this.w, this.h ], this); - _pos(this.node, [ this.x, this.y ]); - }.bind(this); - - }; - jsPlumbUtil.extend(SvgEndpoint, SvgComponent, { - reattachListeners : function() { - if (this.node) this.reattachListenersForElement(this.node, this); - } - }); - - /* - * 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.radius - }); - }; - this.updateNode = function(node) { - _attr(node, { - "cx":this.w / 2, - "cy":this.h / 2, - "r":this.radius - }); - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.svg.Dot, [jsPlumb.Endpoints.Dot, SvgEndpoint]); - - /* - * 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 - }); - }; - this.updateNode = function(node) { - _attr(node, { - "width":this.w, - "height":this.h - }); - }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.svg.Rectangle, [jsPlumb.Endpoints.Rectangle, SvgEndpoint]); - - /* - * 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; - this.path = null; - this.paint = function(params, containerExtents) { - // only draws on connections, not endpoints. - if (params.component.svg && containerExtents) { - if (this.path == null) { - this.path = _node("path", { - "pointer-events":"all" - }); - params.component.svg.appendChild(this.path); - - this.attachListeners(this.path, params.component); - this.attachListeners(this.path, this); - } - 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(this.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 (this.path) this.reattachListenersForElement(this.path, this); - }; - }; - jsPlumbUtil.extend(AbstractSvgArrowOverlay, jsPlumb.jsPlumbUIComponent, { - cleanup : function() { - if (this.path != null) jsPlumb.CurrentLibrary.removeElement(this.path); - } - }); - - jsPlumb.Overlays.svg.Arrow = function() { - AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.svg.Arrow, [ jsPlumb.Overlays.Arrow, AbstractSvgArrowOverlay ]); - - jsPlumb.Overlays.svg.PlainArrow = function() { - AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.svg.PlainArrow, [ jsPlumb.Overlays.PlainArrow, AbstractSvgArrowOverlay ]); - - jsPlumb.Overlays.svg.Diamond = function() { - AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.svg.Diamond, [ jsPlumb.Overlays.Diamond, AbstractSvgArrowOverlay ]); - - // 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; - }; - }; - jsPlumbUtil.extend(jsPlumb.Overlays.svg.GuideLines, jsPlumb.Overlays.GuideLines); -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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-b… - // http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-… - - 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-… - // 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. - //jsPlumb.CurrentLibrary.getDOMElement(container).appendChild(g); - //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-… - //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.instance); - self.opacityNodes.fill = _node("fill", [0,0,1,1], {opacity:"0.0"}, vml, self._jsPlumb.instance); - }; - 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); - }; - }; - jsPlumbUtil.extend(VmlComponent, jsPlumb.jsPlumbUIComponent, { - cleanup:function() { - if (this.bgCanvas) jsPlumbUtil.removeElement(this.bgCanvas); - jsPlumbUtil.removeElement(this.canvas); - } - }); - - /* - * Base class for Vml connectors. extends VmlComponent. - */ - var VmlConnector = jsPlumb.ConnectorRenderers.vml = function(params) { - this.strokeNode = null; - this.canvas = null; - VmlComponent.apply(this, arguments); - var clazz = this._jsPlumb.instance.connectorClass + (params.cssClass ? (" " + params.cssClass) : ""); - this.paint = function(style) { - if (style !== null) { - - // we need to be at least 1 pixel in each direction, because otherwise coordsize gets set to - // 0 and overlays cannot paint. - this.w = Math.max(this.w, 1); - this.h = Math.max(this.h, 1); - - var segments = this.getSegments(), p = { "path":"" }, - d = [this.x, this.y, this.w, this.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 (this.bgCanvas == null) { - p["class"] = clazz; - p.coordsize = (d[2] * scale) + "," + (d[3] * scale); - this.bgCanvas = _node("shape", d, p, params.parent, this._jsPlumb.instance, true); - _pos(this.bgCanvas, d); - this.appendDisplayElement(this.bgCanvas, true); - this.attachListeners(this.bgCanvas, this); - this.initOpacityNodes(this.bgCanvas, ["stroke"]); - } - else { - p.coordsize = (d[2] * scale) + "," + (d[3] * scale); - _pos(this.bgCanvas, d); - _atts(this.bgCanvas, p); - } - - _applyStyles(this.bgCanvas, outlineStyle, this); - } - //*/ - - if (this.canvas == null) { - p["class"] = clazz; - p.coordsize = (d[2] * scale) + "," + (d[3] * scale); - this.canvas = _node("shape", d, p, params.parent, this._jsPlumb.instance, 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 - - this.appendDisplayElement(this.canvas, true); - this.attachListeners(this.canvas, this); - this.initOpacityNodes(this.canvas, ["stroke"]); - } - else { - p.coordsize = (d[2] * scale) + "," + (d[3] * scale); - _pos(this.canvas, d); - _atts(this.canvas, p); - } - - _applyStyles(this.canvas, style, this, this._jsPlumb.instance); - } - }; - - }; - jsPlumbUtil.extend(VmlConnector, VmlComponent, { - reattachListeners : function() { - if (this.canvas) this.reattachListenersForElement(this.canvas, this); - } - }); - - /* - * - * Base class for Vml Endpoints. extends VmlComponent. - * - */ - var VmlEndpoint = window.VmlEndpoint = function(params) { - VmlComponent.apply(this, arguments); - this._jsPlumb.vml = null;//, opacityStrokeNode = null, opacityFillNode = null; - this.canvas = document.createElement("div"); - this.canvas.style.position = "absolute"; - this._jsPlumb.clazz = this._jsPlumb.instance.endpointClass + (params.cssClass ? (" " + params.cssClass) : ""); - - // TODO vml endpoint adds class to VML at constructor time. but the addClass method adds VML - // to the enclosing DIV. what to do? seems like it would be better to just target the div. - // HOWEVER...vml connection has no containing div. why not? it feels like it should. - - //var group = _getGroup(params.parent); - //group.appendChild(self.canvas); - params._jsPlumb.appendElement(this.canvas, params.parent); - - this.paint = function(style, anchor) { - var p = { }, vml = this._jsPlumb.vml; - - jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); - if (this._jsPlumb.vml == null) { - p["class"] = this._jsPlumb.clazz; - vml = this._jsPlumb.vml = this.getVml([0,0, this.w, this.h], p, anchor, this.canvas, this._jsPlumb.instance); - this.attachListeners(vml, this); - - this.appendDisplayElement(vml, true); - this.appendDisplayElement(this.canvas, true); - - this.initOpacityNodes(vml, ["fill"]); - } - else { - _pos(vml, [0,0, this.w, this.h]); - _atts(vml, p); - } - - _applyStyles(vml, style, this); - }; - }; - jsPlumbUtil.extend(VmlEndpoint, VmlComponent, { - reattachListeners : function() { - if (this._jsPlumb.vml) this.reattachListenersForElement(this._jsPlumb.vml, this); - } - }); - -// ******************************* 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); }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.vml.Dot, VmlEndpoint); - - 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); }; - }; - jsPlumbUtil.extend(jsPlumb.Endpoints.vml.Rectangle, VmlEndpoint); - - /* - * 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.component; - 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.instance, 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); - }; - }; - jsPlumbUtil.extend(AbstractVmlArrowOverlay, VmlComponent); - - jsPlumb.Overlays.vml.Arrow = function() { - AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.vml.Arrow, [ jsPlumb.Overlays.Arrow, AbstractVmlArrowOverlay ]); - - jsPlumb.Overlays.vml.PlainArrow = function() { - AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.vml.PlainArrow, [ jsPlumb.Overlays.PlainArrow, AbstractVmlArrowOverlay ]); - - jsPlumb.Overlays.vml.Diamond = function() { - AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); - }; - jsPlumbUtil.extend(jsPlumb.Overlays.vml.Diamond, [ jsPlumb.Overlays.Diamond, AbstractVmlArrowOverlay ]); - -// ******************************* /vml overlays ***************************************************** - -})(); -/* - * jsPlumb - * - * Title:jsPlumb 1.5.2 - * - * 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. - * 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. - * 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 = jsPlumbUtil.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); - }, - - destroyDraggable : function(el) { - var id = jsPlumb.getId(el), - dd = _draggablesById[id]; - - if (dd) { - dd.destroy(); - delete _draggablesById[id]; - } - }, - - destroyDroppable : function(el) { - // TODO - }, - - dragEvents : { - "start":"drag:start", "stop":"drag:end", "drag":"drag:drag", "step":"step", - "over":"drop:enter", "out":"drop:exit", "drop":"drop:hit" - }, - - extend : _extend, - - 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 (el == null) return null; - 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 el = args[0].currentTarget.el._node || args[0].currentTarget.el; - var o = Y.DOM.getXY(el); - return {left:o[0] / zoom, top:o[1] / zoom }; - }, - - hasClass : function(el, clazz) { - return el.hasClass(clazz); - }, - - initDraggable : function(el, options, isPlumbedComponent, _jsPlumb) { - var _opts = _getDDOptions(options), - id = _jsPlumb.getId(el); - _opts.node = "#" + id; - options["drag:start"] = jsPlumbUtil.wrap(options["drag:start"], function() { - Y.one(document.body).addClass(_jsPlumb.dragSelectClass); - }, false); - options["drag:end"] = jsPlumbUtil.wrap(options["drag:end"], function() { - Y.one(document.body).removeClass(_jsPlumb.dragSelectClass); - }); - 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"] = jsPlumbUtil.wrap(options["drop:enter"], function(e) { - if (e.drag.scope !== scope) return true; - _checkHover(el, true); - }, true); - options["drop:exit"] = jsPlumbUtil.wrap(options["drop:exit"], function(e) { - _checkHover(el, false); - }); - options["drop:hit"] = jsPlumbUtil.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(); }, - - setDragFilter : function(el, filter) { - jsPlumb.log("NOT IMPLEMENTED: setDragFilter"); - }, - - /** - * 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); - } - }; -})(); Added: sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/yui.jsPlumb-1.5.3.js =================================================================== --- sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/yui.jsPlumb-1.5.3.js (rev 0) +++ sandbox/nuiton-js-jsplumb/src/main/resources/nuiton-js-jsplumb/yui.jsPlumb-1.5.3.js 2013-10-15 08:30:43 UTC (rev 219) @@ -0,0 +1,11195 @@ +/** +* jsBezier-0.6 +* +* Copyright (c) 2010 - 2013 Simon Porritt (simon.porritt(a)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)); + }; + + var _isPoint = function(curve) { + return curve[0].x == curve[1].x && curve[0].y == curve[1].y; + }; + + /** + * 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) { + + if (_isPoint(curve)) { + return { + point:curve[0], + location:location + }; + } + + 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) { + if (_isPoint(curve)) return 0; + + 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 + }; +})(); + +/** + * jsPlumbGeom v0.1 + * + * Various geometry functions written as part of jsPlumb and perhaps useful for others. + * + * Copyright (c) 2013 Simon Porritt + * + * Permission is hereby granted, free of charge, to any person + * obtaining a copy of this software and associated documentation + * files (the "Software"), to deal in the Software without + * restriction, including without limitation the rights to use, + * copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the + * Software is furnished to do so, subject to the following + * conditions: + * + * The above copyright notice and this permission notice shall be + * included in all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, + * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES + * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND + * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT + * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, + * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR + * OTHER DEALINGS IN THE SOFTWARE. + */ +;(function() { + + + "use strict"; + + // Establish the root object, `window` in the browser, or `global` on the server. + var root = this; + var jsPlumbGeom; + if (typeof exports !== 'undefined') { + jsPlumbGeom = exports; + } else { + jsPlumbGeom = root.jsPlumbGeom = {}; + } + + var _isa = function(a) { return Object.prototype.toString.call(a) === "[object Array]"; }, + _pointHelper = function(p1, p2, fn) { + p1 = _isa(p1) ? p1 : [p1.x, p1.y]; + p2 = _isa(p2) ? p2 : [p2.x, p2.y]; + return fn(p1, p2); + }, + /** + * @name jsPlumbGeom.gradient + * @function + * @desc Calculates the gradient of a line between the two points. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Float} The gradient of a line between the two points. + */ + _gradient = jsPlumbGeom.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]); + }); + }, + /** + * @name jsPlumbGeom.normal + * @function + * @desc Calculates the gradient of a normal to a line between the two points. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Float} The gradient of a normal to a line between the two points. + */ + _normal = jsPlumbGeom.normal = function(p1, p2) { + return -1 / _gradient(p1, p2); + }, + /** + * @name jsPlumbGeom.lineLength + * @function + * @desc Calculates the length of a line between the two points. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Float} The length of a line between the two points. + */ + _lineLength = jsPlumbGeom.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)); + }); + }, + /** + * @name jsPlumbGeom.quadrant + * @function + * @desc Calculates the quadrant in which the angle between the two points lies. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Integer} The quadrant - 1 for upper right, 2 for lower right, 3 for lower left, 4 for upper left. + */ + _quadrant = jsPlumbGeom.quadrant = 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; + } + }); + }, + /** + * @name jsPlumbGeom.theta + * @function + * @desc Calculates the angle between the two points. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Float} The angle between the two points. + */ + _theta = jsPlumbGeom.theta = function(p1, p2) { + return _pointHelper(p1, p2, function(_p1, _p2) { + var m = _gradient(_p1, _p2), + t = Math.atan(m), + s = _quadrant(_p1, _p2); + if ((s == 4 || s== 3)) t += Math.PI; + if (t < 0) t += (2 * Math.PI); + + return t; + }); + }, + /** + * @name jsPlumbGeom.intersects + * @function + * @desc Calculates whether or not the two rectangles intersect. + * @param {Rectangle} r1 First rectangle, as a js object in the form `{x:.., y:.., w:.., h:..}` + * @param {Rectangle} r2 Second rectangle, as a js object in the form `{x:.., y:.., w:.., h:..}` + * @return {Boolean} True if the rectangles intersect, false otherwise. + */ + _intersects = jsPlumbGeom.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] ], + /** + * @name jsPlumbGeom.pointOnLine + * @function + * @desc Calculates a point on the line from `fromPoint` to `toPoint` that is `distance` units along the length of the line. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Point} Point on the line, in the form `{ x:..., y:... }`. + */ + _pointOnLine = jsPlumbGeom.pointOnLine = function(fromPoint, toPoint, distance) { + var m = _gradient(fromPoint, toPoint), + s = _quadrant(fromPoint, toPoint), + segmentMultiplier = distance > 0 ? _segmentMultipliers[s] : _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 }; + }, + /** + * @name jsPlumbGeom.perpendicularLineTo + * @function + * @desc Calculates a line of length `length` that is perpendicular to the line from `fromPoint` to `toPoint` and passes through `toPoint`. + * @param {Point} p1 First point, either as a 2 entry array or object with `left` and `top` properties. + * @param {Point} p2 Second point, either as a 2 entry array or object with `left` and `top` properties. + * @return {Line} Perpendicular line, in the form `[ { x:..., y:... }, { x:..., y:... } ]`. + */ + _perpendicularLineTo = jsPlumbGeom.perpendicularLineTo = function(fromPoint, toPoint, length) { + var m = _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}]; + }; +}).call(this); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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 _isa = function(a) { return Object.prototype.toString.call(a) === "[object Array]"; }, + _isnum = function(n) { return Object.prototype.toString.call(n) === "[object Number]"; }, + _iss = function(s) { return typeof s === "string"; }, + _isb = function(s) { return typeof s === "boolean"; }, + _isnull = function(s) { return s == null; }, + _iso = function(o) { return o == null ? false : Object.prototype.toString.call(o) === "[object Object]"; }, + _isd = function(o) { return Object.prototype.toString.call(o) === "[object Date]"; }, + _isf = function(o) { return Object.prototype.toString.call(o) === "[object Function]"; }, + _ise = function(o) { + for (var i in o) { if (o.hasOwnProperty(i)) return false; } + return true; + }, + pointHelper = function(p1, p2, fn) { + p1 = _isa(p1) ? p1 : [p1.x, p1.y]; + p2 = _isa(p2) ? p2 : [p2.x, p2.y]; + return fn(p1, p2); + }; + + jsPlumbUtil = { + isArray : _isa, + isString : _iss, + isBoolean: _isb, + isNull : _isnull, + isObject : _iso, + isDate : _isd, + isFunction: _isf, + isEmpty:_ise, + isNumber:_isnum, + clone : function(a) { + if (_iss(a)) return "" + a; + else if (_isb(a)) return !!a; + else if (_isd(a)) return new Date(a.getTime()); + else if (_isf(a)) return a; + else if (_isa(a)) { + var b = []; + for (var i = 0; i < a.length; i++) + b.push(this.clone(a[i])); + return b; + } + else if (_iso(a)) { + var c = {}; + for (var j in a) + c[j] = this.clone(a[j]); + return c; + } + else return a; + }, + merge : function(a, b) { + var c = this.clone(a); + for (var i in b) { + if (c[i] == null || _iss(b[i]) || _isb(b[i])) + c[i] = b[i]; + else { + if (_isa(b[i])/* && this.isArray(c[i])*/) { + var ar = []; + // if c's object is also an array we can keep its values. + if (_isa(c[i])) ar.push.apply(ar, c[i]); + ar.push.apply(ar, b[i]); + c[i] = ar; + } + else if(_iso(b[i])) { + // overwite c's value with an object if it is not already one. + if (!_iso(c[i])) + c[i] = {}; + for (var j in b[i]) + c[i][j] = b[i][j]; + } + } + } + return c; + }, + copyValues:function(names, from, to) { + for (var i = 0; i < names.length; i++) + to[names[i]] = from[names[i]]; + }, + // + // 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 != null) { + fromString = fromString.replace(matches[i], val); + } + } + } + return fromString; + }, + // process one entry. + _one = function(d) { + if (d != null) { + if (_iss(d)) { + return getValue(d); + } + else if (_isa(d)) { + var r = []; + for (var i = 0; i < d.length; i++) + r.push(_one(d[i])); + return r; + } + else if (_iso(d)) { + var s = {}; + for (var j in d) { + s[j] = _one(d[j]); + } + return s; + } + 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; + }, + 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, insertAtStart) { + var l = map[key]; + if (l == null) { + l = []; + map[key] = l; + } + l[insertAtStart ? "unshift" : "push"](value); + return l; + }, + // + // extends the given obj (which can be an array) with the given constructor function, prototype functions, and + // class members, any of which may be null. + // + extend : function(child, parent, _protoFn, _protoAtts) { + _protoFn = _protoFn || {}; + _protoAtts = _protoAtts || {}; + parent = _isa(parent) ? parent : [ parent ]; + + for (var i = 0; i < parent.length; i++) { + for (var j in parent[i].prototype) { + if(parent[i].prototype.hasOwnProperty(j)) { + child.prototype[j] = parent[i].prototype[j]; + } + } + } + + var _makeFn = function(name) { + return function() { + for (var i = 0; i < parent.length; i++) { + if (parent[i].prototype[name]) + parent[i].prototype[name].apply(this, arguments); + } + return _protoFn[name].apply(this, arguments); + }; + }; + + for (var k in _protoFn) { + child.prototype[k] = _makeFn(k); + } + + return child; + }, + uuid : function() { + return ('xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { + var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); + return v.toString(16); + })); + }, + 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]); + }, + /* + * Function: sizeElement + * Helper to size and position an element. You would typically use + * this when writing your own Connector or Endpoint implementation. + * + * Parameters: + * x - [int] x position for the element origin + * y - [int] y position for the element origin + * w - [int] width of the element + * h - [int] height of the element + * + */ + sizeElement : function(el, x, y, w, h) { + if (el) { + el.style.height = h + "px"; + el.height = h; + el.style.width = w + "px"; + el.width = w; + el.style.left = x + "px"; + el.style.top = y + "px"; + } + }, + /** + * @name jsPlumbUtil.wrap + * @desc Wraps one function with another, creating a placeholder for the + * wrapped function if it was null. this is used to wrap the various + * drag/drop event functions - to allow jsPlumb to be notified of + * important lifecycle events without imposing itself on the user's + * drag/drop functionality. + * @param {Function} wrappedFunction original function to wrap; may be null. + * @param {Function} newFunction function to wrap the original with. + * @param {Object} [returnOnThisValue] Optional. Indicates that the wrappedFunction should + * not be executed if the newFunction returns a value matching 'returnOnThisValue'. + * note that this is a simple comparison and only works for primitives right now. + */ + wrap : function(wrappedFunction, newFunction, returnOnThisValue) { + wrappedFunction = wrappedFunction || function() { }; + newFunction = newFunction || function() { }; + return function() { + var r = null; + try { + r = newFunction.apply(this, arguments); + } catch (e) { + jsPlumbUtil.log("jsPlumb function failed : " + e); + } + if (returnOnThisValue == null || (r !== returnOnThisValue)) { + try { + r = wrappedFunction.apply(this, arguments); + } catch (e) { + jsPlumbUtil.log("wrapped function failed : " + e); + } + } + return r; + }; + } + }; + + + jsPlumbUtil.EventGenerator = function() { + var _listeners = {}, 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" ]; + + this.bind = function(event, listener, insertAtStart) { + jsPlumbUtil.addToList(_listeners, event, listener, insertAtStart); + return this; + }; + + this.fire = function(event, value, originalEvent) { + if (!eventsSuspended && _listeners[event]) { + // instead of looping through the array we get a counter and a length, because it is possible + // that an event fired from here could cause the object to get cleaned up, which would throw + // away the listeners. so after each cycle through the loop we check to ensure we haven't + // been nuked. + var l = _listeners[event].length, i = 0, _gone = false, ret = null; + if (!this.shouldFireEvent || this.shouldFireEvent(event, value, originalEvent)) { + while (!_gone && i < l && ret !== false) { + + // 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 { + ret = _listeners[event][i](value, originalEvent); + } catch (e) { + jsPlumbUtil.log("jsPlumb: fire failed for event " + event + " : " + e); + } + } + i++; + if (_listeners == null || _listeners[event] == null) _gone = true; + } + } + } + return this; + }; + + this.unbind = function(event) { + if (event) + delete _listeners[event]; + else { + _listeners = {}; + } + return this; + }; + + this.getListener = function(forEvent) { + return _listeners[forEvent]; + }; + this.setSuspendEvents = function(val) { + eventsSuspended = val; + }; + this.isSuspendEvents = function() { + return eventsSuspended; + }; + this.cleanupListeners = function() { + for (var i in _listeners) { + _listeners[i].splice(0); + delete _listeners[i]; + } + }; + }; + + + jsPlumbUtil.EventGenerator.prototype = { + cleanup:function() { + this.cleanupListeners(); + } + }; + + + // thanks MDC + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Ob… + if (!Function.prototype.bind) { + Function.prototype.bind = function (oThis) { + if (typeof this !== "function") { + // closest thing possible to the ECMAScript 5 internal IsCallable function + throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); + } + + var aArgs = Array.prototype.slice.call(arguments, 1), + fToBind = this, + fNOP = function () {}, + fBound = function () { + return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, + aArgs.concat(Array.prototype.slice.call(arguments))); + }; + + fNOP.prototype = this.prototype; + fBound.prototype = new fNOP(); + + return fBound; + }; + } + +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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… + 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; + if (b != null && b.style != null) { + b.style.behavior = "url(#default#VML)"; + vmlAvailable.vml = b ? typeof b.adj == "object": true; + } + else + vmlAvailable.vml = false; + 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), + id = _currentInstance.getId(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(p.childNodes[i], 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(el); + }; + + // refresh the offsets for child elements of this element. + this.updateOffsets = function(elId) { + var jpcl = jsPlumb.CurrentLibrary, + el = jpcl.getElementObject(elId), + domEl = jpcl.getDOMElement(el), + id = _currentInstance.getId(domEl), + 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.getElementObject(el), + cLoc = jsPlumb.CurrentLibrary.getOffset(c), + p = el.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) { + _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 = {}; + }; + + // + // notification drag ended. from 1.5.3 we check automatically if need to update some + // ancestor's offsets. + // + this.dragEnded = function(el) { + var id = _currentInstance.getId(el), + ancestor = _draggablesForElements[id]; + + if (ancestor) this.updateOffsets(ancestor); + }; + + this.setParent = function(el, elId, p, pId) { + var current = _draggablesForElements[elId]; + if (current) { + if (!_delements[pId]) + _delements[pId] = {}; + _delements[pId][elId] = _delements[current][elId]; + delete _delements[current][elId]; + var pLoc = jsPlumb.CurrentLibrary.getOffset(p), + cLoc = jsPlumb.CurrentLibrary.getOffset(el); + _delements[pId][elId].offset = { + left:cLoc.left - pLoc.left, + top:cLoc.top - pLoc.top + }; + _draggablesForElements[elId] = pId; + } + }; + + }; + + // 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, + + getAttribute:function(el, attName) { + return el.getAttribute(attName); + }, + + setAttribute:function(el, a, v) { + el.setAttribute(a, v); + }, + + 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; + } + }; + + + /* + + addClass: + + add: function( elem, classNames ) { + jQuery.each((classNames || "").split(/\s+/), function(i, className){ + if ( elem.nodeType == 1 && !jQuery.className.has( elem.className, className ) ) + elem.className += (elem.className ? " " : "") + className; + }); + }, + */ + + /* + + removeClass: + + elem.className = classNames !== undefined ? + jQuery.grep(elem.className.split(/\s+/), function(className){ + return !jQuery.className.has( classNames, className ); + }).join(" ") : + +*/ + +})(); +/** + * @module jsPlumb + * @description Provides a way to visually connect elements on an HTML page, using either SVG, Canvas + * elements, or VML. + * + * - [Demo Site](http://jsplumb.org) + * - [GitHub](http://github.com/sporritt/jsplumb) + * + * Dual licensed under the MIT and GPL2 licenses. + * + * Copyright (c) 2010 - 2013 Simon Porritt (simon.porritt(a)gmail.com) + */ +;(function() { + + var _ju = jsPlumbUtil, + _addClass = function(el, clazz) { jsPlumb.CurrentLibrary.addClass(_gel(el), clazz); }, + _hasClass = function(el, clazz) { return jsPlumb.CurrentLibrary.hasClass(_gel(el), clazz); }, + _removeClass = function(el, clazz) { jsPlumb.CurrentLibrary.removeClass(_gel(el), clazz); }, + _gel = function(el) { return jsPlumb.CurrentLibrary.getElementObject(el); }, + _dom = function(el) { return jsPlumb.CurrentLibrary.getDOMElement(el); }, + _getOffset = function(el, _instance) { + var o = jsPlumb.CurrentLibrary.getOffset(_gel(el)); + if (_instance != null) { + var z = _instance.getZoom(); + return {left:o.left / z, top:o.top / z }; + } + else + return o; + }, + _getSize = function(el) { + return jsPlumb.CurrentLibrary.getSize(_gel(el)); + }, + + /** + * creates a timestamp, using milliseconds since 1970, but as a string. + */ + _timestamp = function() { return "" + (new Date()).getTime(); }, + + // helper method to update the hover style whenever it, or paintStyle, changes. + // we use paintStyle as the foundation and merge hoverPaintStyle over the + // top. + _updateHoverStyle = function(component) { + if (component._jsPlumb.paintStyle && component._jsPlumb.hoverPaintStyle) { + var mergedHoverStyle = {}; + jsPlumb.extend(mergedHoverStyle, component._jsPlumb.paintStyle); + jsPlumb.extend(mergedHoverStyle, component._jsPlumb.hoverPaintStyle); + delete component._jsPlumb.hoverPaintStyle; + // we want the fillStyle of paintStyle to override a gradient, if possible. + if (mergedHoverStyle.gradient && component._jsPlumb.paintStyle.fillStyle) + delete mergedHoverStyle.gradient; + component._jsPlumb.hoverPaintStyle = mergedHoverStyle; + } + }, + events = [ "click", "dblclick", "mouseenter", "mouseout", "mousemove", "mousedown", "mouseup", "contextmenu" ], + eventFilters = { "mouseout":"mouseexit" }, + _updateAttachedElements = function(component, state, timestamp, sourceElement) { + var affectedElements = component.getAttachedElements(); + if (affectedElements) { + for (var i = 0, j = affectedElements.length; i < j; i++) { + if (!sourceElement || sourceElement != affectedElements[i]) + affectedElements[i].setHover(state, true, timestamp); // tell the attached elements not to inform their own attached elements. + } + } + }, + _splitType = function(t) { return t == null ? null : t.split(" "); }, + _applyTypes = function(component, params, doNotRepaint) { + if (component.getDefaultType) { + var td = component.getTypeDescriptor(); + + var o = _ju.merge({}, component.getDefaultType()); + for (var i = 0, j = component._jsPlumb.types.length; i < j; i++) + o = _ju.merge(o, component._jsPlumb.instance.getType(component._jsPlumb.types[i], td)); + + if (params) { + o = _ju.populate(o, params); + } + + component.applyType(o, doNotRepaint); + if (!doNotRepaint) component.repaint(); + } + }, + +// ------------------------------ BEGIN jsPlumbUIComponent -------------------------------------------- + + jsPlumbUIComponent = window.jsPlumbUIComponent = function(params) { + + jsPlumbUtil.EventGenerator.apply(this, arguments); + + var self = this, + a = arguments, + idPrefix = self.idPrefix, + id = idPrefix + (new Date()).getTime(), + jpcl = jsPlumb.CurrentLibrary; + + this._jsPlumb = { + instance: params._jsPlumb, + parameters:params.parameters || {}, + paintStyle:null, + hoverPaintStyle:null, + paintStyleInUse:null, + hover:false, + beforeDetach:params.beforeDetach, + beforeDrop:params.beforeDrop, + overlayPlacements : [], + hoverClass: params.hoverClass || params._jsPlumb.Defaults.HoverClass || jsPlumb.Defaults.HoverClass, + types:[] + }; + + this.getId = function() { return id; }; + + // all components can generate events + + if (params.events) { + for (var i in params.events) + self.bind(i, params.events[i]); + } + + // all components get this clone function. + // TODO issue 116 showed a problem with this - it seems 'a' that is in + // the clone function's scope is shared by all invocations of it, the classic + // JS closure problem. for now, jsPlumb does a version of this inline where + // it used to call clone. but it would be nice to find some time to look + // further at this. + this.clone = function() { + var o = {};//new Object(); + this.constructor.apply(o, a); + return o; + }.bind(this); + + // user can supply a beforeDetach callback, which will be executed before a detach + // is performed; returning false prevents the detach. + this.isDetachAllowed = function(connection) { + var r = true; + if (this._jsPlumb.beforeDetach) { + try { + r = this._jsPlumb.beforeDetach(connection); + } + catch (e) { _ju.log("jsPlumb: beforeDetach callback failed", e); } + } + return r; + }; + + // user can supply a beforeDrop callback, which will be executed before a dropped + // connection is confirmed. user can return false to reject connection. + this.isDropAllowed = function(sourceId, targetId, scope, connection, dropEndpoint) { + var r = this._jsPlumb.instance.checkCondition("beforeDrop", { + sourceId:sourceId, + targetId:targetId, + scope:scope, + connection:connection, + dropEndpoint:dropEndpoint + }); + if (this._jsPlumb.beforeDrop) { + try { + r = this._jsPlumb.beforeDrop({ + sourceId:sourceId, + targetId:targetId, + scope:scope, + connection:connection, + dropEndpoint:dropEndpoint + }); + } + catch (e) { _ju.log("jsPlumb: beforeDrop callback failed", e); } + } + return r; + }; + + var boundListeners = [], + bindAListener = function(obj, type, fn) { + boundListeners.push([obj, type, fn]); + obj.bind(type, fn); + }, + domListeners = [], + bindOne = function(o, c, evt) { + var filteredEvent = eventFilters[evt] || evt, + fn = function(ee) { + c.fire(filteredEvent, c, ee); + }; + domListeners.push([o, evt, fn]); + jpcl.bind(o, evt, fn); + }, + unbindOne = function(o, evt, fn) { + var filteredEvent = eventFilters[evt] || evt; + jpcl.unbind(o, evt, fn); + }; + + this.bindListeners = function(obj, _self, _hoverFunction) { + bindAListener(obj, "click", function(ep, e) { _self.fire("click", _self, e); }); + bindAListener(obj, "dblclick", function(ep, e) { _self.fire("dblclick", _self, e); }); + bindAListener(obj, "contextmenu", function(ep, e) { _self.fire("contextmenu", _self, e); }); + bindAListener(obj, "mouseenter", function(ep, e) { + if (!_self.isHover()) { + _hoverFunction(true); + _self.fire("mouseenter", _self, e); + } + }); + bindAListener(obj, "mouseexit", function(ep, e) { + if (_self.isHover()) { + _hoverFunction(false); + _self.fire("mouseexit", _self, e); + } + }); + bindAListener(obj, "mousedown", function(ep, e) { _self.fire("mousedown", _self, e); }); + bindAListener(obj, "mouseup", function(ep, e) { _self.fire("mouseup", _self, e); }); + }; + + this.unbindListeners = function() { + for (var i = 0; i < boundListeners.length; i++) { + var o = boundListeners[i]; + o[0].unbind(o[1], o[2]); + } + boundListeners = null; + }; + + this.attachListeners = function(o, c) { + for (var i = 0, j = events.length; i < j; i++) { + bindOne(o, c, events[i]); + } + }; + this.detachListeners = function() { + for (var i = 0; i < domListeners.length; i++) { + unbindOne(domListeners[i][0], domListeners[i][1], domListeners[i][2]); + } + domListeners = null; + }; + + this.reattachListenersForElement = function(o) { + if (arguments.length > 1) { + for (var i = 0, j = events.length; i < j; i++) + unbindOne(o, events[i]); + for (i = 1, j = arguments.length; i < j; i++) + this.attachListeners(o, arguments[i]); + } + }; + }; + + jsPlumbUtil.extend(jsPlumbUIComponent, jsPlumbUtil.EventGenerator, { + + getParameter : function(name) { + return this._jsPlumb.parameters[name]; + }, + + setParameter : function(name, value) { + this._jsPlumb.parameters[name] = value; + }, + + getParameters : function() { + return this._jsPlumb.parameters; + }, + + setParameters : function(p) { + this._jsPlumb.parameters = p; + }, + + addClass : function(clazz) { + if (this.canvas != null) + _addClass(this.canvas, clazz); + }, + + removeClass : function(clazz) { + if (this.canvas != null) + _removeClass(this.canvas, clazz); + }, + + setType : function(typeId, params, doNotRepaint) { + this._jsPlumb.types = _splitType(typeId) || []; + _applyTypes(this, params, doNotRepaint); + }, + + getType : function() { + return this._jsPlumb.types; + }, + + reapplyTypes : function(params, doNotRepaint) { + _applyTypes(this, params, doNotRepaint); + }, + + hasType : function(typeId) { + return jsPlumbUtil.indexOf(this._jsPlumb.types, typeId) != -1; + }, + + addType : function(typeId, params, doNotRepaint) { + var t = _splitType(typeId), _cont = false; + if (t != null) { + for (var i = 0, j = t.length; i < j; i++) { + if (!this.hasType(t[i])) { + this._jsPlumb.types.push(t[i]); + _cont = true; + } + } + if (_cont) _applyTypes(this, params, doNotRepaint); + } + }, + + removeType : function(typeId, doNotRepaint) { + var t = _splitType(typeId), _cont = false, _one = function(tt) { + var idx = _ju.indexOf(this._jsPlumb.types, tt); + if (idx != -1) { + this._jsPlumb.types.splice(idx, 1); + return true; + } + return false; + }.bind(this); + + if (t != null) { + for (var i = 0,j = t.length; i < j; i++) { + _cont = _one(t[i]) || _cont; + } + if (_cont) _applyTypes(this, null, doNotRepaint); + } + }, + + toggleType : function(typeId, params, doNotRepaint) { + var t = _splitType(typeId); + if (t != null) { + for (var i = 0, j = t.length; i < j; i++) { + var idx = jsPlumbUtil.indexOf(this._jsPlumb.types, t[i]); + if (idx != -1) + this._jsPlumb.types.splice(idx, 1); + else + this._jsPlumb.types.push(t[i]); + } + + _applyTypes(this, params, doNotRepaint); + } + }, + applyType : function(t, doNotRepaint) { + this.setPaintStyle(t.paintStyle, doNotRepaint); + this.setHoverPaintStyle(t.hoverPaintStyle, doNotRepaint); + if (t.parameters){ + for (var i in t.parameters) + this.setParameter(i, t.parameters[i]); + } + }, + setPaintStyle : function(style, doNotRepaint) { +// this._jsPlumb.paintStyle = jsPlumb.extend({}, style); +// TODO figure out if we want components to clone paintStyle so as not to share it. + this._jsPlumb.paintStyle = style; + this._jsPlumb.paintStyleInUse = this._jsPlumb.paintStyle; + _updateHoverStyle(this); + if (!doNotRepaint) this.repaint(); + }, + getPaintStyle : function() { + return this._jsPlumb.paintStyle; + }, + setHoverPaintStyle : function(style, doNotRepaint) { + //this._jsPlumb.hoverPaintStyle = jsPlumb.extend({}, style); +// TODO figure out if we want components to clone paintStyle so as not to share it. + this._jsPlumb.hoverPaintStyle = style; + _updateHoverStyle(this); + if (!doNotRepaint) this.repaint(); + }, + getHoverPaintStyle : function() { + return this._jsPlumb.hoverPaintStyle; + }, + cleanup:function() { + this.unbindListeners(); + this.detachListeners(); + }, + destroy:function() { + this.cleanupListeners(); + this.clone = null; + this._jsPlumb = null; + }, + + isHover : function() { return this._jsPlumb.hover; }, + + setHover : function(hover, ignoreAttachedElements, timestamp) { + var jpcl = jsPlumb.CurrentLibrary; + // while dragging, we ignore these events. this keeps the UI from flashing and + // swishing and whatevering. + if (this._jsPlumb && !this._jsPlumb.instance.currentlyDragging && !this._jsPlumb.instance.isHoverSuspended()) { + + this._jsPlumb.hover = hover; + + if (this.canvas != null) { + if (this._jsPlumb.instance.hoverClass != null) { + jpcl[hover ? "addClass" : "removeClass"](this.canvas, this._jsPlumb.instance.hoverClass); + } + } + if (this._jsPlumb.hoverPaintStyle != null) { + this._jsPlumb.paintStyleInUse = hover ? this._jsPlumb.hoverPaintStyle : this._jsPlumb.paintStyle; + if (!this._jsPlumb.instance.isSuspendDrawing()) { + timestamp = timestamp || _timestamp(); + this.repaint({timestamp:timestamp, recalc:false}); + } + } + // get the list of other affected elements, if supported by this component. + // for a connection, its the endpoints. for an endpoint, its the connections! surprise. + if (this.getAttachedElements && !ignoreAttachedElements) + _updateAttachedElements(this, hover, _timestamp(), this); + } + } + }); + +// ------------------------------ END jsPlumbUIComponent -------------------------------------------- + +// ------------------------------ BEGIN OverlayCapablejsPlumbUIComponent -------------------------------------------- + + var _internalLabelOverlayId = "__label", + // helper to get the index of some overlay + _getOverlayIndex = function(component, id) { + var idx = -1; + for (var i = 0, j = component._jsPlumb.overlays.length; i < j; i++) { + if (id === component._jsPlumb.overlays[i].id) { + idx = i; + break; + } + } + return idx; + }, + // this is a shortcut helper method to let people add a label as + // overlay. + _makeLabelOverlay = function(component, params) { + + var _params = { + cssClass:params.cssClass, + labelStyle : component.labelStyle, + id:_internalLabelOverlayId, + component:component, + _jsPlumb:component._jsPlumb.instance // TODO not necessary, since the instance can be accessed through the component. + }, + mergedParams = jsPlumb.extend(_params, params); + + return new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()].Label( mergedParams ); + }, + _processOverlay = function(component, o) { + var _newOverlay = null; + if (_ju.isArray(o)) { // this is for the shorthand ["Arrow", { width:50 }] syntax + // there's also a three arg version: + // ["Arrow", { width:50 }, {location:0.7}] + // which merges the 3rd arg into the 2nd. + var type = o[0], + // make a copy of the object so as not to mess up anyone else's reference... + p = jsPlumb.extend({component:component, _jsPlumb:component._jsPlumb.instance}, o[1]); + if (o.length == 3) jsPlumb.extend(p, o[2]); + _newOverlay = new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()][type](p); + } else if (o.constructor == String) { + _newOverlay = new jsPlumb.Overlays[component._jsPlumb.instance.getRenderMode()][o]({component:component, _jsPlumb:component._jsPlumb.instance}); + } else { + _newOverlay = o; + } + + component._jsPlumb.overlays.push(_newOverlay); + }, + _calculateOverlaysToAdd = function(component, params) { + var defaultKeys = component.defaultOverlayKeys || [], o = params.overlays, + checkKey = function(k) { + return component._jsPlumb.instance.Defaults[k] || jsPlumb.Defaults[k] || []; + }; + + if (!o) o = []; + + for (var i = 0, j = defaultKeys.length; i < j; i++) + o.unshift.apply(o, checkKey(defaultKeys[i])); + + return o; + }, + OverlayCapableJsPlumbUIComponent = window.OverlayCapableJsPlumbUIComponent = function(params) { + + jsPlumbUIComponent.apply(this, arguments); + this._jsPlumb.overlays = []; + + var _overlays = _calculateOverlaysToAdd(this, params); + if (_overlays) { + for (var i = 0, j = _overlays.length; i < j; i++) { + _processOverlay(this, _overlays[i]); + } + } + + if (params.label) { + var loc = params.labelLocation || this.defaultLabelLocation || 0.5, + labelStyle = params.labelStyle || this._jsPlumb.instance.Defaults.LabelStyle || jsPlumb.Defaults.LabelStyle; + + this._jsPlumb.overlays.push(_makeLabelOverlay(this, { + label:params.label, + location:loc, + labelStyle:labelStyle + })); + } + }; + + jsPlumbUtil.extend(OverlayCapableJsPlumbUIComponent, jsPlumbUIComponent, { + applyType : function(t, doNotRepaint) { + this.removeAllOverlays(doNotRepaint); + if (t.overlays) { + for (var i = 0, j = t.overlays.length; i < j; i++) + this.addOverlay(t.overlays[i], true); + } + }, + setHover : function(hover, ignoreAttachedElements, timestamp) { + if (this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) { + for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) { + this._jsPlumb.overlays[i][hover ? "addClass":"removeClass"](this._jsPlumb.instance.hoverClass); + } + } + }, + addOverlay : function(overlay, doNotRepaint) { + _processOverlay(this, overlay); + if (!doNotRepaint) this.repaint(); + }, + getOverlay : function(id) { + var idx = _getOverlayIndex(this, id); + return idx >= 0 ? this._jsPlumb.overlays[idx] : null; + }, + getOverlays : function() { + return this._jsPlumb.overlays; + }, + hideOverlay : function(id) { + var o = this.getOverlay(id); + if (o) o.hide(); + }, + hideOverlays : function() { + for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) + this._jsPlumb.overlays[i].hide(); + }, + showOverlay : function(id) { + var o = this.getOverlay(id); + if (o) o.show(); + }, + showOverlays : function() { + for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) + this._jsPlumb.overlays[i].show(); + }, + removeAllOverlays : function(doNotRepaint) { + for (var i = 0, j = this._jsPlumb.overlays.length; i < j; i++) { + if (this._jsPlumb.overlays[i].cleanup) this._jsPlumb.overlays[i].cleanup(); + } + + this._jsPlumb.overlays.splice(0, this._jsPlumb.overlays.length); + if (!doNotRepaint) + this.repaint(); + }, + removeOverlay : function(overlayId) { + var idx = _getOverlayIndex(this, overlayId); + if (idx != -1) { + var o = this._jsPlumb.overlays[idx]; + if (o.cleanup) o.cleanup(); + this._jsPlumb.overlays.splice(idx, 1); + } + }, + removeOverlays : function() { + for (var i = 0, j = arguments.length; i < j; i++) + this.removeOverlay(arguments[i]); + }, + getLabel : function() { + var lo = this.getOverlay(_internalLabelOverlayId); + return lo != null ? lo.getLabel() : null; + }, + getLabelOverlay : function() { + return this.getOverlay(_internalLabelOverlayId); + }, + setLabel : function(l) { + var lo = this.getOverlay(_internalLabelOverlayId); + if (!lo) { + var params = l.constructor == String || l.constructor == Function ? { label:l } : l; + lo = _makeLabelOverlay(this, params); + this._jsPlumb.overlays.push(lo); + } + else { + if (l.constructor == String || l.constructor == Function) lo.setLabel(l); + else { + if (l.label) lo.setLabel(l.label); + if (l.location) lo.setLocation(l.location); + } + } + + if (!this._jsPlumb.instance.isSuspendDrawing()) + this.repaint(); + }, + cleanup:function() { + for (var i = 0; i < this._jsPlumb.overlays.length; i++) { + this._jsPlumb.overlays[i].cleanup(); + this._jsPlumb.overlays[i].destroy(); + } + this._jsPlumb.overlays.splice(0); + }, + setVisible:function(v) { + this[v ? "showOverlays" : "hideOverlays"](); + } + }); + +// ------------------------------ END OverlayCapablejsPlumbUIComponent -------------------------------------------- + + var _jsPlumbInstanceIndex = 0, + getInstanceIndex = function() { + var i = _jsPlumbInstanceIndex + 1; + _jsPlumbInstanceIndex++; + return i; + }; + + var jsPlumbInstance = window.jsPlumbInstance = function(_defaults) { + + this.Defaults = { + Anchor : "BottomCenter", + Anchors : [ null, null ], + ConnectionsDetachable : true, + ConnectionOverlays : [ ], + Connector : "Bezier", + Container : null, + DoNotThrowErrors:false, + DragOptions : { }, + DropOptions : { }, + Endpoint : "Dot", + EndpointOverlays : [ ], + Endpoints : [ null, null ], + EndpointStyle : { fillStyle : "#456" }, + EndpointStyles : [ null, null ], + EndpointHoverStyle : null, + EndpointHoverStyles : [ null, null ], + HoverPaintStyle : null, + LabelStyle : { color : "black" }, + LogEnabled : false, + Overlays : [ ], + MaxConnections : 1, + PaintStyle : { lineWidth : 8, strokeStyle : "#456" }, + ReattachConnections:false, + RenderMode : "svg", + Scope : "jsPlumb_DefaultScope" + }; + if (_defaults) jsPlumb.extend(this.Defaults, _defaults); + + this.logEnabled = this.Defaults.LogEnabled; + this._connectionTypes = {}; + this._endpointTypes = {}; + + jsPlumbUtil.EventGenerator.apply(this); + + var _currentInstance = this, + _instanceIndex = getInstanceIndex(), + _bb = _currentInstance.bind, + _initialDefaults = {}, + _zoom = 1, + _info = function(el) { + var _el = _dom(el); + return { el:_el, id:(jsPlumbUtil.isString(el) && _el == null) ? el : _getId(_el) }; + }; + + this.getInstanceIndex = function() { return _instanceIndex; }; + + this.setZoom = function(z, repaintEverything) { + _zoom = z; + if (repaintEverything) _currentInstance.repaintEverything(); + }; + this.getZoom = function() { return _zoom; }; + + for (var i in this.Defaults) + _initialDefaults[i] = this.Defaults[i]; + + this.bind = function(event, fn) { + if ("ready" === event && initialized) fn(); + else _bb.apply(_currentInstance,[event, fn]); + }; + + _currentInstance.importDefaults = function(d) { + for (var i in d) { + _currentInstance.Defaults[i] = d[i]; + } + return _currentInstance; + }; + + _currentInstance.restoreDefaults = function() { + _currentInstance.Defaults = jsPlumb.extend({}, _initialDefaults); + return _currentInstance; + }; + + var log = null, + resizeTimer = null, + initialized = false, + // TODO remove from window scope + connections = [], + // map of element id -> endpoint lists. an element can have an arbitrary + // number of endpoints on it, and not all of them have to be connected + // to anything. + endpointsByElement = {}, + endpointsByUUID = {}, + offsets = {}, + offsetTimestamps = {}, + floatingConnections = {}, + draggableStates = {}, + connectionBeingDragged = false, + sizes = [], + _suspendDrawing = false, + _suspendedAt = null, + DEFAULT_SCOPE = this.Defaults.Scope, + renderMode = null, // will be set in init() + _curIdStamp = 1, + _idstamp = function() { return "" + _curIdStamp++; }, + + // + // appends an element to some other element, which is calculated as follows: + // + // 1. if _currentInstance.Defaults.Container exists, use that element. + // 2. if the 'parent' parameter exists, use that. + // 3. otherwise just use the root element (for DOM usage, the document body). + // + // + _appendElement = function(el, parent) { + if (_currentInstance.Defaults.Container) + jsPlumb.CurrentLibrary.appendElement(el, _currentInstance.Defaults.Container); + else if (!parent) + jsPlumbAdapter.appendToRoot(el); + else + jsPlumb.CurrentLibrary.appendElement(el, parent); + }, + + // + // YUI, for some reason, put the result of a Y.all call into an object that contains + // a '_nodes' array, instead of handing back an array-like object like the other + // libraries do. + // + _convertYUICollection = function(c) { + return c._nodes ? c._nodes : c; + }, + + // + // Draws an endpoint and its connections. this is the main entry point into drawing connections as well + // as endpoints, since jsPlumb is endpoint-centric under the hood. + // + // @param element element to draw (of type library specific element object) + // @param ui UI object from current library's event system. optional. + // @param timestamp timestamp for this paint cycle. used to speed things up a little by cutting down the amount of offset calculations we do. + // @param clearEdits defaults to false; indicates that mouse edits for connectors should be cleared + /// + _draw = function(element, ui, timestamp, clearEdits) { + + // TODO is it correct to filter by headless at this top level? how would a headless adapter ever repaint? + if (!jsPlumbAdapter.headless && !_suspendDrawing) { + var id = _getId(element), + repaintEls = _currentInstance.dragManager.getElementsForDraggable(id); + + if (timestamp == null) timestamp = _timestamp(); + + // update the offset of everything _before_ we try to draw anything. + var o = _updateOffset( { elId : id, offset : ui, recalc : false, timestamp : timestamp }); + + if (repaintEls) { + for (var i in repaintEls) { + // TODO this seems to cause a lag, but we provide the offset, so in theory it + // should not. is the timestamp failing? + _updateOffset( { + elId : repaintEls[i].id, + offset : { + left:o.o.left + repaintEls[i].offset.left, + top:o.o.top + repaintEls[i].offset.top + }, + recalc : false, + timestamp : timestamp + }); + } + } + + + _currentInstance.anchorManager.redraw(id, ui, timestamp, null, clearEdits); + + if (repaintEls) { + for (var j in repaintEls) { + _currentInstance.anchorManager.redraw(repaintEls[j].id, ui, timestamp, repaintEls[j].offset, clearEdits, true); + } + } + } + }, + + // + // executes the given function against the given element if the first + // argument is an object, or the list of elements, if the first argument + // is a list. the function passed in takes (element, elementId) as + // arguments. + // + _elementProxy = function(element, fn) { + var retVal = null, el, id; + if (_ju.isArray(element)) { + retVal = []; + for ( var i = 0, j = element.length; i < j; i++) { + el = _gel(element[i]); + id = _currentInstance.getAttribute(el, "id"); + retVal.push(fn(el, id)); // append return values to what we will return + } + } else { + el = _gel(element); + id = _currentInstance.getAttribute(el, "id"); + retVal = fn(el, id); + } + return retVal; + }, + + // + // gets an Endpoint by uuid. + // + _getEndpoint = function(uuid) { return endpointsByUUID[uuid]; }, + + /** + * inits a draggable if it's not already initialised. + * TODO: somehow abstract this to the adapter, because the concept of "draggable" has no + * place on the server. + */ + _initDraggableIfNecessary = function(element, isDraggable, dragOptions) { + // TODO move to DragManager? + if (!jsPlumbAdapter.headless) { + var _draggable = isDraggable == null ? false : isDraggable, jpcl = jsPlumb.CurrentLibrary; + if (_draggable) { + if (jpcl.isDragSupported(element) && !jpcl.isAlreadyDraggable(element)) { + var options = dragOptions || _currentInstance.Defaults.DragOptions || jsPlumb.Defaults.DragOptions; + options = jsPlumb.extend( {}, options); // make a copy. + var dragEvent = jpcl.dragEvents.drag, + stopEvent = jpcl.dragEvents.stop, + startEvent = jpcl.dragEvents.start; + + options[startEvent] = _ju.wrap(options[startEvent], function() { + _currentInstance.setHoverSuspended(true); + _currentInstance.select({source:element}).addClass(_currentInstance.elementDraggingClass + " " + _currentInstance.sourceElementDraggingClass, true); + _currentInstance.select({target:element}).addClass(_currentInstance.elementDraggingClass + " " + _currentInstance.targetElementDraggingClass, true); + _currentInstance.setConnectionBeingDragged(true); + }); + + options[dragEvent] = _ju.wrap(options[dragEvent], function() { + var ui = jpcl.getUIPosition(arguments, _currentInstance.getZoom()); + _draw(element, ui, null, true); + _addClass(element, "jsPlumb_dragged"); + }); + options[stopEvent] = _ju.wrap(options[stopEvent], function() { + var ui = jpcl.getUIPosition(arguments, _currentInstance.getZoom()); + _draw(element, ui); + _removeClass(element, "jsPlumb_dragged"); + _currentInstance.setHoverSuspended(false); + _currentInstance.select({source:element}).removeClass(_currentInstance.elementDraggingClass + " " + _currentInstance.sourceElementDraggingClass, true); + _currentInstance.select({target:element}).removeClass(_currentInstance.elementDraggingClass + " " + _currentInstance.targetElementDraggingClass, true); + _currentInstance.setConnectionBeingDragged(false); + _currentInstance.dragManager.dragEnded(element); + }); + var elId = _getId(element); // need ID + draggableStates[elId] = true; + var draggable = draggableStates[elId]; + options.disabled = draggable == null ? false : !draggable; + jpcl.initDraggable(element, options, false, _currentInstance); + _currentInstance.dragManager.register(element); + } + } + } + }, + + /* + * prepares a final params object that can be passed to _newConnection, taking into account defaults, events, etc. + */ + _prepareConnectionParams = function(params, referenceParams) { + var _p = jsPlumb.extend( { }, params); + if (referenceParams) jsPlumb.extend(_p, referenceParams); + + // hotwire endpoints passed as source or target to sourceEndpoint/targetEndpoint, respectively. + if (_p.source) { + if (_p.source.endpoint) + _p.sourceEndpoint = _p.source; + else + _p.source = _dom(_p.source); + } + if (_p.target) { + if (_p.target.endpoint) + _p.targetEndpoint = _p.target; + else + _p.target = _dom(_p.target); + } + + // test for endpoint uuids to connect + if (params.uuids) { + _p.sourceEndpoint = _getEndpoint(params.uuids[0]); + _p.targetEndpoint = _getEndpoint(params.uuids[1]); + } + + // now ensure that if we do have Endpoints already, they're not full. + // source: + if (_p.sourceEndpoint && _p.sourceEndpoint.isFull()) { + _ju.log(_currentInstance, "could not add connection; source endpoint is full"); + return; + } + + // target: + if (_p.targetEndpoint && _p.targetEndpoint.isFull()) { + _ju.log(_currentInstance, "could not add connection; target endpoint is full"); + return; + } + + // if source endpoint mandates connection type and nothing specified in our params, use it. + if (!_p.type && _p.sourceEndpoint) + _p.type = _p.sourceEndpoint.connectionType; + + // copy in any connectorOverlays that were specified on the source endpoint. + // it doesnt copy target endpoint overlays. i'm not sure if we want it to or not. + if (_p.sourceEndpoint && _p.sourceEndpoint.connectorOverlays) { + _p.overlays = _p.overlays || []; + for (var i = 0, j = _p.sourceEndpoint.connectorOverlays.length; i < j; i++) { + _p.overlays.push(_p.sourceEndpoint.connectorOverlays[i]); + } + } + + // pointer events + if (!_p["pointer-events"] && _p.sourceEndpoint && _p.sourceEndpoint.connectorPointerEvents) + _p["pointer-events"] = _p.sourceEndpoint.connectorPointerEvents; + + // if there's a target specified (which of course there should be), and there is no + // target endpoint specified, and 'newConnection' was not set to true, then we check to + // see if a prior call to makeTarget has provided us with the specs for the target endpoint, and + // we use those if so. additionally, if the makeTarget call was specified with 'uniqueEndpoint' set + // to true, then if that target endpoint has already been created, we re-use it. + + var tid, tep, existingUniqueEndpoint, newEndpoint; + + // TODO: this code can be refactored to be a little dry. + if (_p.target && !_p.target.endpoint && !_p.targetEndpoint && !_p.newConnection) { + tid = _getId(_p.target); + tep =_targetEndpointDefinitions[tid]; + existingUniqueEndpoint = _targetEndpoints[tid]; + + if (tep) { + // if target not enabled, return. + if (!_targetsEnabled[tid]) return; + + // TODO this is dubious. i think it is there so that the endpoint can subsequently + // be dragged (ie it kicks off the draggable registration). but it is dubious. + tep.isTarget = true; + + // check for max connections?? + newEndpoint = existingUniqueEndpoint != null ? existingUniqueEndpoint : _currentInstance.addEndpoint(_p.target, tep); + if (_targetEndpointsUnique[tid]) _targetEndpoints[tid] = newEndpoint; + _p.targetEndpoint = newEndpoint; + // TODO test options to makeTarget to see if we should do this? + newEndpoint._doNotDeleteOnDetach = false; // reset. + newEndpoint._deleteOnDetach = true; + } + } + + // same thing, but for source. + if (_p.source && !_p.source.endpoint && !_p.sourceEndpoint && !_p.newConnection) { + tid = _getId(_p.source); + tep = _sourceEndpointDefinitions[tid]; + existingUniqueEndpoint = _sourceEndpoints[tid]; + + if (tep) { + // if source not enabled, return. + if (!_sourcesEnabled[tid]) return; + + // TODO this is dubious. i think it is there so that the endpoint can subsequently + // be dragged (ie it kicks off the draggable registration). but it is dubious. + //tep.isSource = true; + + newEndpoint = existingUniqueEndpoint != null ? existingUniqueEndpoint : _currentInstance.addEndpoint(_p.source, tep); + if (_sourceEndpointsUnique[tid]) _sourceEndpoints[tid] = newEndpoint; + _p.sourceEndpoint = newEndpoint; + // TODO test options to makeSource to see if we should do this? + newEndpoint._doNotDeleteOnDetach = false; // reset. + newEndpoint._deleteOnDetach = true; + } + } + + return _p; + }, + + _newConnection = function(params) { + var connectionFunc = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), + endpointFunc = _currentInstance.Defaults.EndpointType || jsPlumb.Endpoint, + parent = jsPlumb.CurrentLibrary.getParent; + + if (params.container) + params.parent = params.container; + else { + if (params.sourceEndpoint) + params.parent = params.sourceEndpoint.parent; + else if (params.source.constructor == endpointFunc) + params.parent = params.source.parent; + else params.parent = parent(params.source); + } + + params._jsPlumb = _currentInstance; + params.newConnection = _newConnection; + params.newEndpoint = _newEndpoint; + params.endpointsByUUID = endpointsByUUID; + params.endpointsByElement = endpointsByElement; + params.finaliseConnection = _finaliseConnection; + var con = new connectionFunc(params); + con.id = "con_" + _idstamp(); + _eventFireProxy("click", "click", con); + _eventFireProxy("dblclick", "dblclick", con); + _eventFireProxy("contextmenu", "contextmenu", con); + + // if the connection is draggable, then maybe we need to tell the target endpoint to init the + // dragging code. it won't run again if it already configured to be draggable. + if (con.isDetachable()) { + con.endpoints[0].initDraggable(); + con.endpoints[1].initDraggable(); + } + + return con; + }, + + // + // adds the connection to the backing model, fires an event if necessary and then redraws + // + _finaliseConnection = function(jpc, params, originalEvent, doInformAnchorManager) { + params = params || {}; + // add to list of connections (by scope). + if (!jpc.suspendedEndpoint) + connections.push(jpc); + + // always inform the anchor manager + // except that if jpc has a suspended endpoint it's not true to say the + // connection is new; it has just (possibly) moved. the question is whether + // to make that call here or in the anchor manager. i think perhaps here. + if (jpc.suspendedEndpoint == null || doInformAnchorManager) + _currentInstance.anchorManager.newConnection(jpc); + + // force a paint + _draw(jpc.source); + + // fire an event + if (!params.doNotFireConnectionEvent && params.fireEvent !== false) { + + var eventArgs = { + connection:jpc, + source : jpc.source, target : jpc.target, + sourceId : jpc.sourceId, targetId : jpc.targetId, + sourceEndpoint : jpc.endpoints[0], targetEndpoint : jpc.endpoints[1] + }; + + _currentInstance.fire("connection", eventArgs, originalEvent); + } + }, + + _eventFireProxy = function(event, proxyEvent, obj) { + obj.bind(event, function(originalObject, originalEvent) { + _currentInstance.fire(proxyEvent, obj, originalEvent); + }); + }, + + /* + * for the given endpoint params, returns an appropriate parent element for the UI elements that will be added. + * this function is used by _newEndpoint (directly below), and also in the makeSource function in jsPlumb. + * + * the logic is to first look for a "container" member of params, and pass that back if found. otherwise we + * handoff to the 'getParent' function in the current library. + */ + _getParentFromParams = function(params) { + if (params.container) + return params.container; + else { + var tag = jsPlumb.CurrentLibrary.getTagName(params.source), + p = jsPlumb.CurrentLibrary.getParent(params.source); + if (tag && tag.toLowerCase() === "td") + return jsPlumb.CurrentLibrary.getParent(p); + else return p; + } + }, + + /* + factory method to prepare a new endpoint. this should always be used instead of creating Endpoints + manually, since this method attaches event listeners and an id. + */ + _newEndpoint = function(params) { + var endpointFunc = _currentInstance.Defaults.EndpointType || jsPlumb.Endpoint; + var _p = jsPlumb.extend({}, params); + _p.parent = _getParentFromParams(_p); + _p._jsPlumb = _currentInstance; + _p.newConnection = _newConnection; + _p.newEndpoint = _newEndpoint; + _p.endpointsByUUID = endpointsByUUID; + _p.endpointsByElement = endpointsByElement; + _p.finaliseConnection = _finaliseConnection; + _p.fireDetachEvent = fireDetachEvent; + _p.fireMoveEvent = fireMoveEvent; + _p.floatingConnections = floatingConnections; + _p.getParentFromParams = _getParentFromParams; + _p.elementId = _getId(_p.source); + var ep = new endpointFunc(_p); + ep.id = "ep_" + _idstamp(); + _eventFireProxy("click", "endpointClick", ep); + _eventFireProxy("dblclick", "endpointDblClick", ep); + _eventFireProxy("contextmenu", "contextmenu", ep); + if (!jsPlumbAdapter.headless) + _currentInstance.dragManager.endpointAdded(_p.source); + return ep; + }, + + /* + * performs the given function operation on all the connections found + * for the given element id; this means we find all the endpoints for + * the given element, and then for each endpoint find the connectors + * connected to it. then we pass each connection in to the given + * function. + */ + _operation = function(elId, func, endpointFunc) { + var endpoints = endpointsByElement[elId]; + if (endpoints && endpoints.length) { + for ( var i = 0, ii = endpoints.length; i < ii; i++) { + for ( var j = 0, jj = endpoints[i].connections.length; j < jj; j++) { + var retVal = func(endpoints[i].connections[j]); + // if the function passed in returns true, we exit. + // most functions return false. + if (retVal) return; + } + if (endpointFunc) endpointFunc(endpoints[i]); + } + } + }, + + _setDraggable = function(element, draggable) { + return _elementProxy(element, function(el, id) { + draggableStates[id] = draggable; + if (jsPlumb.CurrentLibrary.isDragSupported(el)) { + jsPlumb.CurrentLibrary.setDraggable(el, draggable); + } + }); + }, + /* + * private method to do the business of hiding/showing. + * + * @param el + * either Id of the element in question or a library specific + * object for the element. + * @param state + * String specifying a value for the css 'display' property + * ('block' or 'none'). + */ + _setVisible = function(el, state, alsoChangeEndpoints) { + state = state === "block"; + var endpointFunc = null; + if (alsoChangeEndpoints) { + if (state) endpointFunc = function(ep) { + ep.setVisible(true, true, true); + }; + else endpointFunc = function(ep) { + ep.setVisible(false, true, true); + }; + } + var info = _info(el); + _operation(info.id, function(jpc) { + if (state && alsoChangeEndpoints) { + // this test is necessary because this functionality is new, and i wanted to maintain backwards compatibility. + // this block will only set a connection to be visible if the other endpoint in the connection is also visible. + var oidx = jpc.sourceId === info.id ? 1 : 0; + if (jpc.endpoints[oidx].isVisible()) jpc.setVisible(true); + } + else // the default behaviour for show, and what always happens for hide, is to just set the visibility without getting clever. + jpc.setVisible(state); + }, endpointFunc); + }, + /* + * toggles the draggable state of the given element(s). + * el is either an id, or an element object, or a list of ids/element objects. + */ + _toggleDraggable = function(el) { + return _elementProxy(el, function(el, elId) { + var state = draggableStates[elId] == null ? false : draggableStates[elId]; + state = !state; + draggableStates[elId] = state; + jsPlumb.CurrentLibrary.setDraggable(el, state); + return state; + }); + }, + /** + * private method to do the business of toggling hiding/showing. + */ + _toggleVisible = function(elId, changeEndpoints) { + var endpointFunc = null; + if (changeEndpoints) { + endpointFunc = function(ep) { + var state = ep.isVisible(); + ep.setVisible(!state); + }; + } + _operation(elId, function(jpc) { + var state = jpc.isVisible(); + jpc.setVisible(!state); + }, endpointFunc); + // todo this should call _elementProxy, and pass in the + // _operation(elId, f) call as a function. cos _toggleDraggable does + // that. + }, + /** + * updates the offset and size for a given element, and stores the + * values. if 'offset' is not null we use that (it would have been + * passed in from a drag call) because it's faster; but if it is null, + * or if 'recalc' is true in order to force a recalculation, we get the current values. + */ + _updateOffset = function(params) { + var timestamp = params.timestamp, recalc = params.recalc, offset = params.offset, elId = params.elId, s; + if (_suspendDrawing && !timestamp) timestamp = _suspendedAt; + if (!recalc) { + if (timestamp && timestamp === offsetTimestamps[elId]) { + return {o:params.offset || offsets[elId], s:sizes[elId]}; + } + } + if (recalc || !offset) { // if forced repaint or no offset available, we recalculate. + // get the current size and offset, and store them + s = _gel(elId); + if (s != null) { + sizes[elId] = _getSize(s); + offsets[elId] = _getOffset(s, _currentInstance); + offsetTimestamps[elId] = timestamp; + } + } else { + offsets[elId] = offset; + if (sizes[elId] == null) { + s = _gel(elId); + if (s != null) sizes[elId] = _getSize(s); + } + offsetTimestamps[elId] = timestamp; + } + + if(offsets[elId] && !offsets[elId].right) { + offsets[elId].right = offsets[elId].left + sizes[elId][0]; + offsets[elId].bottom = offsets[elId].top + sizes[elId][1]; + offsets[elId].width = sizes[elId][0]; + offsets[elId].height = sizes[elId][1]; + offsets[elId].centerx = offsets[elId].left + (offsets[elId].width / 2); + offsets[elId].centery = offsets[elId].top + (offsets[elId].height / 2); + } + return {o:offsets[elId], s:sizes[elId]}; + }, + + // TODO comparison performance + _getCachedData = function(elId) { + var o = offsets[elId]; + if (!o) + return _updateOffset({elId:elId}); + else + return {o:o, s:sizes[elId]}; + }, + + /** + * gets an id for the given element, creating and setting one if + * necessary. the id is of the form + * + * jsPlumb_<instance index>_<index in instance> + * + * where "index in instance" is a monotonically increasing integer that starts at 0, + * for each instance. this method is used not only to assign ids to elements that do not + * have them but also to connections and endpoints. + */ + _getId = function(element, uuid, doNotCreateIfNotFound) { + if (jsPlumbUtil.isString(element)) return element; + if (element == null) return null; + var id = jsPlumbAdapter.getAttribute(element, "id"); + if (!id || id === "undefined") { + // check if fixed uuid parameter is given + if (arguments.length == 2 && arguments[1] !== undefined) + id = uuid; + else if (arguments.length == 1 || (arguments.length == 3 && !arguments[2])) + id = "jsPlumb_" + _instanceIndex + "_" + _idstamp(); + + if (!doNotCreateIfNotFound) jsPlumbAdapter.setAttribute(element, "id", id); + } + return id; + }; + + this.setConnectionBeingDragged = function(v) { + connectionBeingDragged = v; + }; + this.isConnectionBeingDragged = function() { + return connectionBeingDragged; + }; + + this.connectorClass = "_jsPlumb_connector"; + this.hoverClass = "_jsPlumb_hover"; + this.endpointClass = "_jsPlumb_endpoint"; + this.endpointConnectedClass = "_jsPlumb_endpoint_connected"; + this.endpointFullClass = "_jsPlumb_endpoint_full"; + this.endpointDropAllowedClass = "_jsPlumb_endpoint_drop_allowed"; + this.endpointDropForbiddenClass = "_jsPlumb_endpoint_drop_forbidden"; + this.overlayClass = "_jsPlumb_overlay"; + this.draggingClass = "_jsPlumb_dragging"; + this.elementDraggingClass = "_jsPlumb_element_dragging"; + this.sourceElementDraggingClass = "_jsPlumb_source_element_dragging"; + this.targetElementDraggingClass = "_jsPlumb_target_element_dragging"; + this.endpointAnchorClassPrefix = "_jsPlumb_endpoint_anchor"; + this.hoverSourceClass = "_jsPlumb_source_hover"; + this.hoverTargetClass = "_jsPlumb_target_hover"; + this.dragSelectClass = "_jsPlumb_drag_select"; + + this.Anchors = {}; + this.Connectors = { "canvas":{}, "svg":{}, "vml":{} }; + this.Endpoints = { "canvas":{}, "svg":{}, "vml":{} }; + this.Overlays = { "canvas":{}, "svg":{}, "vml":{}}; + this.ConnectorRenderers = {}; + this.SVG = "svg"; + this.CANVAS = "canvas"; + this.VML = "vml"; + + +// --------------------------- jsPLumbInstance public API --------------------------------------------------------- + + + this.addEndpoint = function(el, params, referenceParams) { + referenceParams = referenceParams || {}; + var p = jsPlumb.extend({}, referenceParams); + jsPlumb.extend(p, params); + p.endpoint = p.endpoint || _currentInstance.Defaults.Endpoint || jsPlumb.Defaults.Endpoint; + p.paintStyle = p.paintStyle || _currentInstance.Defaults.EndpointStyle || jsPlumb.Defaults.EndpointStyle; + // YUI wrapper + el = _convertYUICollection(el); + + var results = [], + inputs = (_ju.isArray(el) || (el.length != null && !_ju.isString(el))) ? el : [ el ]; + + for (var i = 0, j = inputs.length; i < j; i++) { + var _el = _dom(inputs[i]), id = _getId(_el); + p.source = _el; + + _updateOffset({ elId : id, timestamp:_suspendedAt }); + var e = _newEndpoint(p); + if (p.parentAnchor) e.parentAnchor = p.parentAnchor; + _ju.addToList(endpointsByElement, id, e); + var myOffset = offsets[id], + myWH = sizes[id], + anchorLoc = e.anchor.compute( { xy : [ myOffset.left, myOffset.top ], wh : myWH, element : e, timestamp:_suspendedAt }), + endpointPaintParams = { anchorLoc : anchorLoc, timestamp:_suspendedAt }; + + if (_suspendDrawing) endpointPaintParams.recalc = false; + if (!_suspendDrawing) e.paint(endpointPaintParams); + + results.push(e); + e._doNotDeleteOnDetach = true; // mark this as being added via addEndpoint. + } + + return results.length == 1 ? results[0] : results; + }; + + + this.addEndpoints = function(el, endpoints, referenceParams) { + var results = []; + for ( var i = 0, j = endpoints.length; i < j; i++) { + var e = _currentInstance.addEndpoint(el, endpoints[i], referenceParams); + if (_ju.isArray(e)) + Array.prototype.push.apply(results, e); + else results.push(e); + } + return results; + }; + + this.animate = function(el, properties, options) { + options = options || {}; + var ele = _gel(el), + id = _getId(el), + stepFunction = jsPlumb.CurrentLibrary.dragEvents.step, + completeFunction = jsPlumb.CurrentLibrary.dragEvents.complete; + + options[stepFunction] = _ju.wrap(options[stepFunction], function() { + _currentInstance.repaint(id); + }); + + // onComplete repaints, just to make sure everything looks good at the end of the animation. + options[completeFunction] = _ju.wrap(options[completeFunction], function() { + _currentInstance.repaint(id); + }); + + jsPlumb.CurrentLibrary.animate(ele, properties, options); + }; + + /** + * checks for a listener for the given condition, executing it if found, passing in the given value. + * condition listeners would have been attached using "bind" (which is, you could argue, now overloaded, since + * firing click events etc is a bit different to what this does). i thought about adding a "bindCondition" + * or something, but decided against it, for the sake of simplicity. jsPlumb will never fire one of these + * condition events anyway. + */ + this.checkCondition = function(conditionName, value) { + var l = _currentInstance.getListener(conditionName), + r = true; + + if (l && l.length > 0) { + try { + for (var i = 0, j = l.length; i < j; i++) { + r = r && l[i](value); + } + } + catch (e) { + _ju.log(_currentInstance, "cannot check condition [" + conditionName + "]" + e); + } + } + return r; + }; + + /** + * checks a condition asynchronously: fires the event handler and passes the handler + * a 'proceed' function and a 'stop' function. The handler MUST execute one or other + * of these once it has made up its mind. + * + * Note that although this reads the listener list for the given condition, it + * does not loop through and hit each listener, because that, with asynchronous + * callbacks, would be messy. so it uses only the first listener registered. + */ + this.checkASyncCondition = function(conditionName, value, proceed, stop) { + var l = _currentInstance.getListener(conditionName); + + if (l && l.length > 0) { + try { + l[0](value, proceed, stop); + } + catch (e) { + _ju.log(_currentInstance, "cannot asynchronously check condition [" + conditionName + "]" + e); + } + } + }; + + + this.connect = function(params, referenceParams) { + // prepare a final set of parameters to create connection with + var _p = _prepareConnectionParams(params, referenceParams), jpc; + // TODO probably a nicer return value if the connection was not made. _prepareConnectionParams + // will return null (and log something) if either endpoint was full. what would be nicer is to + // create a dedicated 'error' object. + if (_p) { + // create the connection. it is not yet registered + jpc = _newConnection(_p); + // now add it the model, fire an event, and redraw + _finaliseConnection(jpc, _p); + } + return jpc; + }; + + this.deleteEndpoint = function(object, doNotRepaintAfterwards) { + var _is = _currentInstance.setSuspendDrawing(true); + var endpoint = (typeof object == "string") ? endpointsByUUID[object] : object; + if (endpoint) { + _currentInstance.deleteObject({ + endpoint:endpoint + }); + } + if(!_is) _currentInstance.setSuspendDrawing(false, doNotRepaintAfterwards); + return _currentInstance; + }; + + this.deleteEveryEndpoint = function() { + var _is = _currentInstance.setSuspendDrawing(true); + for ( var id in endpointsByElement) { + var endpoints = endpointsByElement[id]; + if (endpoints && endpoints.length) { + for ( var i = 0, j = endpoints.length; i < j; i++) { + _currentInstance.deleteEndpoint(endpoints[i], true); + } + } + } + endpointsByElement = {}; + endpointsByUUID = {}; + _currentInstance.anchorManager.reset(); + _currentInstance.dragManager.reset(); + if(!_is) _currentInstance.setSuspendDrawing(false); + return _currentInstance; + }; + + var fireDetachEvent = function(jpc, doFireEvent, originalEvent) { + // may have been given a connection, or in special cases, an object + var connType = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), + argIsConnection = jpc.constructor == connType, + params = argIsConnection ? { + connection:jpc, + source : jpc.source, target : jpc.target, + sourceId : jpc.sourceId, targetId : jpc.targetId, + sourceEndpoint : jpc.endpoints[0], targetEndpoint : jpc.endpoints[1] + } : jpc; + + if (doFireEvent) + _currentInstance.fire("connectionDetached", params, originalEvent); + + _currentInstance.anchorManager.connectionDetached(params); + }; + + var fireMoveEvent = function(params, evt) { + _currentInstance.fire("connectionMoved", params, evt); + }; + + this.unregisterEndpoint = function(endpoint) { + if (endpoint._jsPlumb.uuid) endpointsByUUID[endpoint._jsPlumb.uuid] = null; + _currentInstance.anchorManager.deleteEndpoint(endpoint); + // TODO at least replace this with a removeWithFunction call. + for (var e in endpointsByElement) { + var endpoints = endpointsByElement[e]; + if (endpoints) { + var newEndpoints = []; + for (var i = 0, j = endpoints.length; i < j; i++) + if (endpoints[i] != endpoint) newEndpoints.push(endpoints[i]); + + endpointsByElement[e] = newEndpoints; + } + if(endpointsByElement[e].length <1){ + delete endpointsByElement[e]; + } + } + }; + + this.detach = function() { + + if (arguments.length === 0) return; + var connType = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), + firstArgIsConnection = arguments[0].constructor == connType, + params = arguments.length == 2 ? firstArgIsConnection ? (arguments[1] || {}) : arguments[0] : arguments[0], + fireEvent = (params.fireEvent !== false), + forceDetach = params.forceDetach, + conn = firstArgIsConnection ? arguments[0] : params.connection; + + if (conn) { + if (forceDetach || jsPlumbUtil.functionChain(true, false, [ + [ conn.endpoints[0], "isDetachAllowed", [ conn ] ], + [ conn.endpoints[1], "isDetachAllowed", [ conn ] ], + [ conn, "isDetachAllowed", [ conn ] ], + [ _currentInstance, "checkCondition", [ "beforeDetach", conn ] ] ])) { + + conn.endpoints[0].detach(conn, false, true, fireEvent); + } + } + else { + var _p = jsPlumb.extend( {}, params); // a backwards compatibility hack: source should be thought of as 'params' in this case. + // test for endpoint uuids to detach + if (_p.uuids) { + _getEndpoint(_p.uuids[0]).detachFrom(_getEndpoint(_p.uuids[1]), fireEvent); + } else if (_p.sourceEndpoint && _p.targetEndpoint) { + _p.sourceEndpoint.detachFrom(_p.targetEndpoint); + } else { + var sourceId = _getId(_dom(_p.source)), + targetId = _getId(_dom(_p.target)); + _operation(sourceId, function(jpc) { + if ((jpc.sourceId == sourceId && jpc.targetId == targetId) || (jpc.targetId == sourceId && jpc.sourceId == targetId)) { + if (_currentInstance.checkCondition("beforeDetach", jpc)) { + jpc.endpoints[0].detach(jpc, false, true, fireEvent); + } + } + }); + } + } + }; + + this.detachAllConnections = function(el, params) { + params = params || {}; + el = _dom(el); + var id = _getId(el), + endpoints = endpointsByElement[id]; + if (endpoints && endpoints.length) { + for ( var i = 0, j = endpoints.length; i < j; i++) { + endpoints[i].detachAll(params.fireEvent !== false); + } + } + return _currentInstance; + }; + + this.detachEveryConnection = function(params) { + params = params || {}; + _currentInstance.doWhileSuspended(function() { + for ( var id in endpointsByElement) { + var endpoints = endpointsByElement[id]; + if (endpoints && endpoints.length) { + for ( var i = 0, j = endpoints.length; i < j; i++) { + endpoints[i].detachAll(params.fireEvent !== false); + } + } + } + connections.splice(0); + }); + return _currentInstance; + }; + + /// not public. but of course its exposed. how to change this. + this.deleteObject = function(params) { + var result = { + endpoints : {}, + connections : {}, + endpointCount:0, + connectionCount:0 + }, + fireEvent = params.fireEvent !== false, + deleteAttachedObjects = params.deleteAttachedObjects !== false; + + var unravelConnection = function(connection) { + if(connection != null && result.connections[connection.id] == null) { + if (connection._jsPlumb != null) connection.setHover(false); + result.connections[connection.id] = connection; + result.connectionCount++; + if (deleteAttachedObjects) { + for (var j = 0; j < connection.endpoints.length; j++) { + if (connection.endpoints[j]._deleteOnDetach) + unravelEndpoint(connection.endpoints[j]); + } + } + } + }; + var unravelEndpoint = function(endpoint) { + if(endpoint != null && result.endpoints[endpoint.id] == null) { + if (endpoint._jsPlumb != null) endpoint.setHover(false); + result.endpoints[endpoint.id] = endpoint; + result.endpointCount++; + + if (deleteAttachedObjects) { + for (var i = 0; i < endpoint.connections.length; i++) { + var c = endpoint.connections[i]; + unravelConnection(c); + } + } + } + }; + + if (params.connection) + unravelConnection(params.connection); + else unravelEndpoint(params.endpoint); + + // loop through connections + for (var i in result.connections) { + var c = result.connections[i]; + c.endpoints[0].detachFromConnection(c); + c.endpoints[1].detachFromConnection(c); + //_currentInstance.unregisterConnection(c); + jsPlumbUtil.removeWithFunction(connections, function(_c) { + return c.id == _c.id; + }); + fireDetachEvent(c, fireEvent, params.originalEvent); + c.cleanup(); + c.destroy(); + } + + // loop through endpoints + for (var j in result.endpoints) { + var e = result.endpoints[j]; + _currentInstance.unregisterEndpoint(e); + // FIRE some endpoint deleted event? + e.cleanup(); + e.destroy(); + } + + return result; + }; + + this.draggable = function(el, options) { + var i,j,ele; + // allows for array or jquery/mootools selector + if (typeof el == 'object' && el.length) { + for (i = 0, j = el.length; i < j; i++) { + ele = _dom(el[i]); + if (ele) _initDraggableIfNecessary(ele, true, options); + } + } + // allows for YUI selector + else if (el._nodes) { // TODO this is YUI specific; really the logic should be forced + // into the library adapters (for jquery and mootools aswell) + for (i = 0, j = el._nodes.length; i < j; i++) { + ele = _dom(el._nodes[i]); + if (ele) _initDraggableIfNecessary(ele, true, options); + } + } + else { + ele = _dom(el); + if (ele) _initDraggableIfNecessary(ele, true, options); + } + return _currentInstance; + }; + + + // just a library-agnostic wrapper. + this.extend = function(o1, o2) { + return jsPlumb.CurrentLibrary.extend(o1, o2); + }; + + // helpers for select/selectEndpoints + var _setOperation = function(list, func, args, selector) { + for (var i = 0, j = list.length; i < j; i++) { + list[i][func].apply(list[i], args); + } + return selector(list); + }, + _getOperation = function(list, func, args) { + var out = []; + for (var i = 0, j = list.length; i < j; i++) { + out.push([ list[i][func].apply(list[i], args), list[i] ]); + } + return out; + }, + setter = function(list, func, selector) { + return function() { + return _setOperation(list, func, arguments, selector); + }; + }, + getter = function(list, func) { + return function() { + return _getOperation(list, func, arguments); + }; + }, + prepareList = function(input, doNotGetIds) { + var r = []; + if (input) { + if (typeof input == 'string') { + if (input === "*") return input; + r.push(input); + } + else { + input = _gel(input); + if (doNotGetIds) r = input; + else { + for (var i = 0, j = input.length; i < j; i++) + r.push(_info(input[i]).id); + } + } + } + return r; + }, + filterList = function(list, value, missingIsFalse) { + if (list === "*") return true; + return list.length > 0 ? jsPlumbUtil.indexOf(list, value) != -1 : !missingIsFalse; + }; + + // get some connections, specifying source/target/scope + this.getConnections = function(options, flat) { + if (!options) { + options = {}; + } else if (options.constructor == String) { + options = { "scope": options }; + } + var scope = options.scope || _currentInstance.getDefaultScope(), + scopes = prepareList(scope, true), + sources = prepareList(options.source), + targets = prepareList(options.target), + results = (!flat && scopes.length > 1) ? {} : [], + _addOne = function(scope, obj) { + if (!flat && scopes.length > 1) { + var ss = results[scope]; + if (ss == null) { + ss = results[scope] = []; + } + ss.push(obj); + } else results.push(obj); + }; + + for ( var j = 0, jj = connections.length; j < jj; j++) { + var c = connections[j]; + if (filterList(scopes, c.scope) && filterList(sources, c.sourceId) && filterList(targets, c.targetId)) + _addOne(c.scope, c); + } + + return results; + }; + + var _curryEach = function(list, executor) { + return function(f) { + for (var i = 0, ii = list.length; i < ii; i++) { + f(list[i]); + } + return executor(list); + }; + }, + _curryGet = function(list) { + return function(idx) { + return list[idx]; + }; + }; + + var _makeCommonSelectHandler = function(list, executor) { + var out = { + length:list.length, + each:_curryEach(list, executor), + get:_curryGet(list) + }, + setters = ["setHover", "removeAllOverlays", "setLabel", "addClass", "addOverlay", "removeOverlay", + "removeOverlays", "showOverlay", "hideOverlay", "showOverlays", "hideOverlays", "setPaintStyle", + "setHoverPaintStyle", "setSuspendEvents", "setParameter", "setParameters", "setVisible", + "repaint", "addType", "toggleType", "removeType", "removeClass", "setType", "bind", "unbind" ], + + getters = ["getLabel", "getOverlay", "isHover", "getParameter", "getParameters", "getPaintStyle", + "getHoverPaintStyle", "isVisible", "hasType", "getType", "isSuspendEvents" ], + i, ii; + + for (i = 0, ii = setters.length; i < ii; i++) + out[setters[i]] = setter(list, setters[i], executor); + + for (i = 0, ii = getters.length; i < ii; i++) + out[getters[i]] = getter(list, getters[i]); + + return out; + }; + + var _makeConnectionSelectHandler = function(list) { + var common = _makeCommonSelectHandler(list, _makeConnectionSelectHandler); + return jsPlumb.CurrentLibrary.extend(common, { + // setters + setDetachable:setter(list, "setDetachable", _makeConnectionSelectHandler), + setReattach:setter(list, "setReattach", _makeConnectionSelectHandler), + setConnector:setter(list, "setConnector", _makeConnectionSelectHandler), + detach:function() { + for (var i = 0, ii = list.length; i < ii; i++) + _currentInstance.detach(list[i]); + }, + // getters + isDetachable:getter(list, "isDetachable"), + isReattach:getter(list, "isReattach") + }); + }; + + var _makeEndpointSelectHandler = function(list) { + var common = _makeCommonSelectHandler(list, _makeEndpointSelectHandler); + return jsPlumb.CurrentLibrary.extend(common, { + setEnabled:setter(list, "setEnabled", _makeEndpointSelectHandler), + setAnchor:setter(list, "setAnchor", _makeEndpointSelectHandler), + isEnabled:getter(list, "isEnabled"), + detachAll:function() { + for (var i = 0, ii = list.length; i < ii; i++) + list[i].detachAll(); + }, + "remove":function() { + for (var i = 0, ii = list.length; i < ii; i++) + _currentInstance.deleteObject({endpoint:list[i]}); + } + }); + }; + + + this.select = function(params) { + params = params || {}; + params.scope = params.scope || "*"; + return _makeConnectionSelectHandler(params.connections || _currentInstance.getConnections(params, true)); + }; + + this.selectEndpoints = function(params) { + params = params || {}; + params.scope = params.scope || "*"; + var noElementFilters = !params.element && !params.source && !params.target, + elements = noElementFilters ? "*" : prepareList(params.element), + sources = noElementFilters ? "*" : prepareList(params.source), + targets = noElementFilters ? "*" : prepareList(params.target), + scopes = prepareList(params.scope, true); + + var ep = []; + + for (var el in endpointsByElement) { + var either = filterList(elements, el, true), + source = filterList(sources, el, true), + sourceMatchExact = sources != "*", + target = filterList(targets, el, true), + targetMatchExact = targets != "*"; + + // if they requested 'either' then just match scope. otherwise if they requested 'source' (not as a wildcard) then we have to match only endpoints that have isSource set to to true, and the same thing with isTarget. + if ( either || source || target ) { + inner: + for (var i = 0, ii = endpointsByElement[el].length; i < ii; i++) { + var _ep = endpointsByElement[el][i]; + if (filterList(scopes, _ep.scope, true)) { + + var noMatchSource = (sourceMatchExact && sources.length > 0 && !_ep.isSource), + noMatchTarget = (targetMatchExact && targets.length > 0 && !_ep.isTarget); + + if (noMatchSource || noMatchTarget) + continue inner; + + ep.push(_ep); + } + } + } + } + + return _makeEndpointSelectHandler(ep); + }; + + // get all connections managed by the instance of jsplumb. + this.getAllConnections = function() { return connections; }; + this.getDefaultScope = function() { return DEFAULT_SCOPE; }; + // get an endpoint by uuid. + this.getEndpoint = _getEndpoint; + // get endpoints for some element. + this.getEndpoints = function(el) { return endpointsByElement[_info(el).id]; }; + // gets the default endpoint type. used when subclassing. see wiki. + this.getDefaultEndpointType = function() { return jsPlumb.Endpoint; }; + // gets the default connection type. used when subclassing. see wiki. + this.getDefaultConnectionType = function() { return jsPlumb.Connection; }; + /* + * Gets an element's id, creating one if necessary. really only exposed + * for the lib-specific functionality to access; would be better to pass + * the current instance into the lib-specific code (even though this is + * a static call. i just don't want to expose it to the public API). + */ + this.getId = _getId; + this.getOffset = function(id) { + var o = offsets[id]; + return _updateOffset({elId:id}); + }; + + this.getSelector = function() { + return jsPlumb.CurrentLibrary.getSelector.apply(null, arguments); + }; + + // get the size of the element with the given id, perhaps from cache. + this.getSize = function(id) { + var s = sizes[id]; + if (!s) _updateOffset({elId:id}); + return sizes[id]; + }; + + this.appendElement = _appendElement; + + var _hoverSuspended = false; + this.isHoverSuspended = function() { return _hoverSuspended; }; + this.setHoverSuspended = function(s) { _hoverSuspended = s; }; + + var _isAvailable = function(m) { + return function() { + return jsPlumbAdapter.isRenderModeAvailable(m); + }; + }; + this.isCanvasAvailable = _isAvailable("canvas"); + this.isSVGAvailable = _isAvailable("svg"); + this.isVMLAvailable = _isAvailable("vml"); + + // set an element's connections to be hidden + this.hide = function(el, changeEndpoints) { + _setVisible(el, "none", changeEndpoints); + return _currentInstance; + }; + + // exposed for other objects to use to get a unique id. + this.idstamp = _idstamp; + + this.connectorsInitialized = false; + var connectorTypes = [], rendererTypes = ["canvas", "svg", "vml"]; + this.registerConnectorType = function(connector, name) { + connectorTypes.push([connector, name]); + }; + + /** + * callback from the current library to tell us to prepare ourselves (attach + * mouse listeners etc; can't do that until the library has provided a bind method) + */ + this.init = function() { + var _oneType = function(renderer, name, fn) { + jsPlumb.Connectors[renderer][name] = function() { + fn.apply(this, arguments); + jsPlumb.ConnectorRenderers[renderer].apply(this, arguments); + }; + jsPlumbUtil.extend(jsPlumb.Connectors[renderer][name], [ fn, jsPlumb.ConnectorRenderers[renderer]]); + }; + + if (!jsPlumb.connectorsInitialized) { + for (var i = 0; i < connectorTypes.length; i++) { + for (var j = 0; j < rendererTypes.length; j++) { + _oneType(rendererTypes[j], connectorTypes[i][1], connectorTypes[i][0]); + } + + } + jsPlumb.connectorsInitialized = true; + } + + if (!initialized) { + _currentInstance.anchorManager = new jsPlumb.AnchorManager({jsPlumbInstance:_currentInstance}); + _currentInstance.setRenderMode(_currentInstance.Defaults.RenderMode); // calling the method forces the capability logic to be run. + initialized = true; + _currentInstance.fire("ready", _currentInstance); + } + }.bind(this); + + this.log = log; + this.jsPlumbUIComponent = jsPlumbUIComponent; + + /* + * Creates an anchor with the given params. + * + * + * Returns: The newly created Anchor. + * Throws: an error if a named anchor was not found. + */ + this.makeAnchor = function() { + var pp, _a = function(t, p) { + if (jsPlumb.Anchors[t]) return new jsPlumb.Anchors[t](p); + if (!_currentInstance.Defaults.DoNotThrowErrors) + throw { msg:"jsPlumb: unknown anchor type '" + t + "'" }; + }; + if (arguments.length === 0) return null; + var specimen = arguments[0], elementId = arguments[1], jsPlumbInstance = arguments[2], newAnchor = null; + // if it appears to be an anchor already... + if (specimen.compute && specimen.getOrientation) return specimen; //TODO hazy here about whether it should be added or is already added somehow. + // is it the name of an anchor type? + else if (typeof specimen == "string") { + newAnchor = _a(arguments[0], {elementId:elementId, jsPlumbInstance:_currentInstance}); + } + // is it an array? it will be one of: + // an array of [spec, params] - this defines a single anchor, which may be dynamic, but has parameters. + // an array of arrays - this defines some dynamic anchors + // an array of numbers - this defines a single anchor. + else if (_ju.isArray(specimen)) { + if (_ju.isArray(specimen[0]) || _ju.isString(specimen[0])) { + // if [spec, params] format + if (specimen.length == 2 && _ju.isObject(specimen[1])) { + // if first arg is a string, its a named anchor with params + if (_ju.isString(specimen[0])) { + pp = jsPlumb.extend({elementId:elementId, jsPlumbInstance:_currentInstance}, specimen[1]); + newAnchor = _a(specimen[0], pp); + } + // otherwise first arg is array, second is params. we treat as a dynamic anchor, which is fine + // even if the first arg has only one entry. you could argue all anchors should be implicitly dynamic in fact. + else { + pp = jsPlumb.extend({elementId:elementId, jsPlumbInstance:_currentInstance, anchors:specimen[0]}, specimen[1]); + newAnchor = new jsPlumb.DynamicAnchor(pp); + } + } + else + newAnchor = new jsPlumb.DynamicAnchor({anchors:specimen, selector:null, elementId:elementId, jsPlumbInstance:jsPlumbInstance}); + + } + else { + var anchorParams = { + x:specimen[0], y:specimen[1], + orientation : (specimen.length >= 4) ? [ specimen[2], specimen[3] ] : [0,0], + offsets : (specimen.length >= 6) ? [ specimen[4], specimen[5] ] : [ 0, 0 ], + elementId:elementId, + jsPlumbInstance:jsPlumbInstance, + cssClass:specimen.length == 7 ? specimen[6] : null + }; + newAnchor = new jsPlumb.Anchor(anchorParams); + newAnchor.clone = function() { return new jsPlumb.Anchor(anchorParams); }; + } + } + + if (!newAnchor.id) newAnchor.id = "anchor_" + _idstamp(); + return newAnchor; + }; + + /** + * makes a list of anchors from the given list of types or coords, eg + * ["TopCenter", "RightMiddle", "BottomCenter", [0, 1, -1, -1] ] + */ + this.makeAnchors = function(types, elementId, jsPlumbInstance) { + var r = []; + for ( var i = 0, ii = types.length; i < ii; i++) { + if (typeof types[i] == "string") + r.push(jsPlumb.Anchors[types[i]]({elementId:elementId, jsPlumbInstance:jsPlumbInstance})); + else if (_ju.isArray(types[i])) + r.push(_currentInstance.makeAnchor(types[i], elementId, jsPlumbInstance)); + } + return r; + }; + + /** + * Makes a dynamic anchor from the given list of anchors (which may be in shorthand notation as strings or dimension arrays, or Anchor + * objects themselves) and the given, optional, anchorSelector function (jsPlumb uses a default if this is not provided; most people will + * not need to provide this - i think). + */ + this.makeDynamicAnchor = function(anchors, anchorSelector) { + return new jsPlumb.DynamicAnchor({anchors:anchors, selector:anchorSelector, elementId:null, jsPlumbInstance:_currentInstance}); + }; + +// --------------------- makeSource/makeTarget ---------------------------------------------- + + var _targetEndpointDefinitions = {}, + _targetEndpoints = {}, + _targetEndpointsUnique = {}, + _targetMaxConnections = {}, + _setEndpointPaintStylesAndAnchor = function(ep, epIndex) { + ep.paintStyle = ep.paintStyle || + _currentInstance.Defaults.EndpointStyles[epIndex] || + _currentInstance.Defaults.EndpointStyle || + jsPlumb.Defaults.EndpointStyles[epIndex] || + jsPlumb.Defaults.EndpointStyle; + ep.hoverPaintStyle = ep.hoverPaintStyle || + _currentInstance.Defaults.EndpointHoverStyles[epIndex] || + _currentInstance.Defaults.EndpointHoverStyle || + jsPlumb.Defaults.EndpointHoverStyles[epIndex] || + jsPlumb.Defaults.EndpointHoverStyle; + + ep.anchor = ep.anchor || + _currentInstance.Defaults.Anchors[epIndex] || + _currentInstance.Defaults.Anchor || + jsPlumb.Defaults.Anchors[epIndex] || + jsPlumb.Defaults.Anchor; + + ep.endpoint = ep.endpoint || + _currentInstance.Defaults.Endpoints[epIndex] || + _currentInstance.Defaults.Endpoint || + jsPlumb.Defaults.Endpoints[epIndex] || + jsPlumb.Defaults.Endpoint; + }, + // TODO put all the source stuff inside one parent, keyed by id. + _sourceEndpointDefinitions = {}, + _sourceEndpoints = {}, + _sourceEndpointsUnique = {}, + _sourcesEnabled = {}, + _sourceTriggers = {}, + _sourceMaxConnections = {}, + _targetsEnabled = {}, + selectorFilter = function(evt, _el, selector) { + var t = evt.target || evt.srcElement, ok = false, + sel = _currentInstance.getSelector(_el, selector); + for (var j = 0; j < sel.length; j++) { + if (sel[j] == t) { + ok = true; + break; + } + } + return ok; + }; + + // see API docs + this.makeTarget = function(el, params, referenceParams) { + + // put jsplumb ref into params without altering the params passed in + var p = jsPlumb.extend({_jsPlumb:_currentInstance}, referenceParams); + jsPlumb.extend(p, params); + + // calculate appropriate paint styles and anchor from the params given + _setEndpointPaintStylesAndAnchor(p, 1); + + var jpcl = jsPlumb.CurrentLibrary, + targetScope = p.scope || _currentInstance.Defaults.Scope, + deleteEndpointsOnDetach = !(p.deleteEndpointsOnDetach === false), + maxConnections = p.maxConnections || -1, + onMaxConnections = p.onMaxConnections, + + _doOne = function(el) { + + // get the element's id and store the endpoint definition for it. jsPlumb.connect calls will look for one of these, + // and use the endpoint definition if found. + // decode the info for this element (id and element) + var elInfo = _info(el), + elid = elInfo.id, + proxyComponent = new jsPlumbUIComponent(p), + dropOptions = jsPlumb.extend({}, p.dropOptions || {}); + + // store the definitions keyed against the element id. + _targetEndpointDefinitions[elid] = p; + _targetEndpointsUnique[elid] = p.uniqueEndpoint; + _targetMaxConnections[elid] = maxConnections; + _targetsEnabled[elid] = true; + + var _drop = function() { + _currentInstance.currentlyDragging = false; + var originalEvent = jsPlumb.CurrentLibrary.getDropEvent(arguments), + targetCount = _currentInstance.select({target:elid}).length, + draggable = _gel(jpcl.getDragObject(arguments)), + id = _currentInstance.getAttribute(draggable, "dragId"), + scope = _currentInstance.getAttribute(draggable, "originalScope"), + jpc = floatingConnections[id], + idx = jpc.endpoints[0].isFloating() ? 0 : 1, + // this is not necessarily correct. if the source is being dragged, + // then the source endpoint is actually the currently suspended endpoint. + source = jpc.endpoints[0], + _endpoint = p.endpoint ? jsPlumb.extend({}, p.endpoint) : {}; + + if (!_targetsEnabled[elid] || _targetMaxConnections[elid] > 0 && targetCount >= _targetMaxConnections[elid]){ + if (onMaxConnections) { + // TODO here we still have the id of the floating element, not the + // actual target. + onMaxConnections({ + element:elInfo.el, + connection:jpc + }, originalEvent); + } + return false; + } + + // unlock the source anchor to allow it to refresh its position if necessary + source.anchor.locked = false; + + // restore the original scope if necessary (issue 57) + if (scope) jpcl.setDragScope(draggable, scope); + + // if no suspendedEndpoint and not pending, it is likely there was a drop on two + // elements that are on top of each other. abort. + if (jpc.suspendedEndpoint == null && !jpc.pending) + return false; + + // check if drop is allowed here. + // if the source is being dragged then in fact + // the source and target ids to pass into the drop interceptor are + // source - elid + // target - jpc's targetId + // + // otherwise the ids are + // source - jpc.sourceId + // target - elid + // + var _continue = proxyComponent.isDropAllowed(idx === 0 ? elid : jpc.sourceId, idx === 0 ? jpc.targetId : elid, jpc.scope, jpc, null); + + // reinstate any suspended endpoint; this just puts the connection back into + // a state in which it will report sensible values if someone asks it about + // its target. we're going to throw this connection away shortly so it doesnt matter + // if we manipulate it a bit. + if (jpc.suspendedEndpoint) { + jpc[idx ? "targetId" : "sourceId"] = jpc.suspendedEndpoint.elementId; + jpc[idx ? "target" : "source"] = jpc.suspendedEndpoint.element; + jpc.endpoints[idx] = jpc.suspendedEndpoint; + } + + if (_continue) { + + // make a new Endpoint for the target + var _el = jpcl.getElementObject(elInfo.el), + newEndpoint = _targetEndpoints[elid] || _currentInstance.addEndpoint(_el, p); + + if (p.uniqueEndpoint) _targetEndpoints[elid] = newEndpoint; // may of course just store what it just pulled out. that's ok. + // TODO test options to makeTarget to see if we should do this? + newEndpoint._doNotDeleteOnDetach = false; // reset. + newEndpoint._deleteOnDetach = true; + + // if the anchor has a 'positionFinder' set, then delegate to that function to find + // out where to locate the anchor. + if (newEndpoint.anchor.positionFinder != null) { + var dropPosition = jpcl.getUIPosition(arguments, _currentInstance.getZoom()), + elPosition = _getOffset(_el, _currentInstance), + elSize = _getSize(_el), + ap = newEndpoint.anchor.positionFinder(dropPosition, elPosition, elSize, newEndpoint.anchor.constructorParams); + newEndpoint.anchor.x = ap[0]; + newEndpoint.anchor.y = ap[1]; + // now figure an orientation for it..kind of hard to know what to do actually. probably the best thing i can do is to + // support specifying an orientation in the anchor's spec. if one is not supplied then i will make the orientation + // be what will cause the most natural link to the source: it will be pointing at the source, but it needs to be + // specified in one axis only, and so how to make that choice? i think i will use whichever axis is the one in which + // the target is furthest away from the source. + } + + // change the target endpoint and target element information. really this should be + // done on a method on connection + jpc[idx ? "target" : "source"] = newEndpoint.element; + jpc[idx ? "targetId" : "sourceId"] = newEndpoint.elementId; + jpc.endpoints[idx].detachFromConnection(jpc); + if (jpc.endpoints[idx]._deleteOnDetach) + jpc.endpoints[idx].deleteAfterDragStop = true; // tell this endpoint to delet itself after drag stop. + // set new endpoint, and configure the settings for endpoints to delete on detach + newEndpoint.addConnection(jpc); + jpc.endpoints[idx] = newEndpoint; + jpc.deleteEndpointsOnDetach = deleteEndpointsOnDetach; + + // inform the anchor manager to update its target endpoint for this connection. + // TODO refactor to make this a single method. + if (idx == 1) + _currentInstance.anchorManager.updateOtherEndpoint(jpc.sourceId, jpc.suspendedElementId, jpc.targetId, jpc); + else + _currentInstance.anchorManager.sourceChanged(jpc.suspendedEndpoint.elementId, jpc.sourceId, jpc); + + _finaliseConnection(jpc, null, originalEvent); + jpc.pending = false; + + } + // if not allowed to drop... + else { + // TODO this code is identical (pretty much) to what happens when a connection + // dragged from a normal endpoint is in this situation. refactor. + // is this an existing connection, and will we reattach? + // TODO also this assumes the source needs to detach - is that always valid? + if (jpc.suspendedEndpoint) { + if (jpc.isReattach()) { + jpc.setHover(false); + jpc.floatingAnchorIndex = null; + jpc.suspendedEndpoint.addConnection(jpc); + _currentInstance.repaint(source.elementId); + } + else + source.detach(jpc, false, true, true, originalEvent); // otherwise, detach the connection and tell everyone about it. + } + + } + }; + + // wrap drop events as needed and initialise droppable + var dropEvent = jpcl.dragEvents.drop; + dropOptions.scope = dropOptions.scope || targetScope; + dropOptions[dropEvent] = _ju.wrap(dropOptions[dropEvent], _drop); + jpcl.initDroppable(_gel(elInfo.el), dropOptions, true); + }; + + // YUI collection fix + el = _convertYUICollection(el); + // make an array if only given one element + var inputs = el.length && el.constructor != String ? el : [ el ]; + + // register each one in the list. + for (var i = 0, ii = inputs.length; i < ii; i++) { + _doOne(inputs[i]); + } + + return _currentInstance; + }; + + // see api docs + this.unmakeTarget = function(el, doNotClearArrays) { + var info = _info(el); + + jsPlumb.CurrentLibrary.destroyDroppable(info.el); + // TODO this is not an exhaustive unmake of a target, since it does not remove the droppable stuff from + // the element. the effect will be to prevent it from behaving as a target, but it's not completely purged. + if (!doNotClearArrays) { + delete _targetEndpointDefinitions[info.id]; + delete _targetEndpointsUnique[info.id]; + delete _targetMaxConnections[info.id]; + delete _targetsEnabled[info.id]; + } + + return _currentInstance; + }; + + // see api docs + this.makeSource = function(el, params, referenceParams) { + var p = jsPlumb.extend({}, referenceParams); + jsPlumb.extend(p, params); + _setEndpointPaintStylesAndAnchor(p, 0); + var jpcl = jsPlumb.CurrentLibrary, + maxConnections = p.maxConnections || -1, + onMaxConnections = p.onMaxConnections, + _doOne = function(elInfo) { + // get the element's id and store the endpoint definition for it. jsPlumb.connect calls will look for one of these, + // and use the endpoint definition if found. + var elid = elInfo.id, + _el = _gel(elInfo.el), + parentElement = function() { + return p.parent == null ? null : p.parent === "parent" ? elInfo.el.parentNode : _dom(p.parent); + }, + idToRegisterAgainst = p.parent != null ? _currentInstance.getId(parentElement()) : elid; + + _sourceEndpointDefinitions[idToRegisterAgainst] = p; + _sourceEndpointsUnique[idToRegisterAgainst] = p.uniqueEndpoint; + _sourcesEnabled[idToRegisterAgainst] = true; + + var stopEvent = jpcl.dragEvents.stop, + dragEvent = jpcl.dragEvents.drag, + dragOptions = jsPlumb.extend({ }, p.dragOptions || {}), + existingDrag = dragOptions.drag, + existingStop = dragOptions.stop, + ep = null, + endpointAddedButNoDragYet = false; + + _sourceMaxConnections[idToRegisterAgainst] = maxConnections; + + // set scope if its not set in dragOptions but was passed in in params + dragOptions.scope = dragOptions.scope || p.scope; + + dragOptions[dragEvent] = _ju.wrap(dragOptions[dragEvent], function() { + if (existingDrag) existingDrag.apply(this, arguments); + endpointAddedButNoDragYet = false; + }); + + dragOptions[stopEvent] = _ju.wrap(dragOptions[stopEvent], function() { + + if (existingStop) existingStop.apply(this, arguments); + _currentInstance.currentlyDragging = false; + if (ep._jsPlumb != null) { // if not cleaned up... + + jpcl.unbind(ep.canvas, "mousedown"); + + // reset the anchor to the anchor that was initially provided. the one we were using to drag + // the connection was just a placeholder that was located at the place the user pressed the + // mouse button to initiate the drag. + var anchorDef = p.anchor || _currentInstance.Defaults.Anchor, + oldAnchor = ep.anchor, + oldConnection = ep.connections[0]; + + ep.setAnchor(_currentInstance.makeAnchor(anchorDef, elid, _currentInstance), true); + + if (p.parent) { + var parent = parentElement(); + if (parent) { + var currentId = ep.elementId, + potentialParent = p.container || _currentInstance.Defaults.Container || jsPlumb.Defaults.Container; + + ep.setElement(parent, potentialParent); + ep.endpointWillMoveAfterConnection = false; + //_currentInstance.anchorManager.rehomeEndpoint(ep, currentId, parent); + oldConnection.previousConnection = null; + // remove from connectionsByScope + jsPlumbUtil.removeWithFunction(connections, function(c) { + return c.id === oldConnection.id; + }); + _currentInstance.anchorManager.connectionDetached({ + sourceId:oldConnection.sourceId, + targetId:oldConnection.targetId, + connection:oldConnection + }); + _finaliseConnection(oldConnection); + } + } + + ep.repaint(); + _currentInstance.repaint(ep.elementId); + _currentInstance.repaint(oldConnection.targetId); + } + }); + // when the user presses the mouse, add an Endpoint, if we are enabled. + var mouseDownListener = function(e) { + + // if disabled, return. + if (!_sourcesEnabled[idToRegisterAgainst]) return; + + // if a filter was given, run it, and return if it says no. + if (p.filter) { + var evt = jpcl.getOriginalEvent(e), + r = jsPlumbUtil.isString(p.filter) ? selectorFilter(evt, _el, p.filter) : p.filter(evt, _el); + + if (r === false) return; + } + + // if maxConnections reached + var sourceCount = _currentInstance.select({source:idToRegisterAgainst}).length; + if (_sourceMaxConnections[idToRegisterAgainst] >= 0 && sourceCount >= _sourceMaxConnections[idToRegisterAgainst]) { + if (onMaxConnections) { + onMaxConnections({ + element:_el, + maxConnections:maxConnections + }, e); + } + return false; + } + + // make sure we have the latest offset for this div + var myOffsetInfo = _updateOffset({elId:elid}).o, + z = _currentInstance.getZoom(), + x = ( ((e.pageX || e.page.x) / z) - myOffsetInfo.left) / myOffsetInfo.width, + y = ( ((e.pageY || e.page.y) / z) - myOffsetInfo.top) / myOffsetInfo.height, + parentX = x, + parentY = y; + + // if there is a parent, the endpoint will actually be added to it now, rather than the div + // that was the source. in that case, we have to adjust the anchor position so it refers to + // the parent. + if (p.parent) { + var pEl = parentElement(), pId = _getId(pEl); + myOffsetInfo = _updateOffset({elId:pId}).o; + parentX = ((e.pageX || e.page.x) - myOffsetInfo.left) / myOffsetInfo.width; + parentY = ((e.pageY || e.page.y) - myOffsetInfo.top) / myOffsetInfo.height; + } + + // we need to override the anchor in here, and force 'isSource', but we don't want to mess with + // the params passed in, because after a connection is established we're going to reset the endpoint + // to have the anchor we were given. + var tempEndpointParams = {}; + jsPlumb.extend(tempEndpointParams, p); + tempEndpointParams.isSource = true; + tempEndpointParams.anchor = [x,y,0,0]; + tempEndpointParams.parentAnchor = [ parentX, parentY, 0, 0 ]; + tempEndpointParams.dragOptions = dragOptions; + // if a parent was given we need to turn that into a "container" argument. this is, by default, + // the parent of the element we will move to, so parent of p.parent in this case. however, if + // the user has specified a 'container' on the endpoint definition or on + // the defaults, we should use that. + if (p.parent) { + var potentialParent = tempEndpointParams.container || _currentInstance.Defaults.Container || jsPlumb.Defaults.Container; + if (potentialParent) + tempEndpointParams.container = potentialParent; + else + tempEndpointParams.container = jsPlumb.CurrentLibrary.getParent(parentElement()); + } + + ep = _currentInstance.addEndpoint(elid, tempEndpointParams); + + endpointAddedButNoDragYet = true; + // we set this to prevent connections from firing attach events before this function has had a chance + // to move the endpoint. + ep.endpointWillMoveAfterConnection = p.parent != null; + ep.endpointWillMoveTo = p.parent ? parentElement() : null; + + // TODO test options to makeSource to see if we should do this? + ep._doNotDeleteOnDetach = false; // reset. + ep._deleteOnDetach = true; + + var _delTempEndpoint = function() { + // this mouseup event is fired only if no dragging occurred, by jquery and yui, but for mootools + // it is fired even if dragging has occurred, in which case we would blow away a perfectly + // legitimate endpoint, were it not for this check. the flag is set after adding an + // endpoint and cleared in a drag listener we set in the dragOptions above. + if(endpointAddedButNoDragYet) { + endpointAddedButNoDragYet = false; + _currentInstance.deleteEndpoint(ep); + } + }; + + _currentInstance.registerListener(ep.canvas, "mouseup", _delTempEndpoint); + _currentInstance.registerListener(_el, "mouseup", _delTempEndpoint); + + // and then trigger its mousedown event, which will kick off a drag, which will start dragging + // a new connection from this endpoint. + jpcl.trigger(ep.canvas, "mousedown", e); + + }; + + // register this on jsPlumb so that it can be cleared by a reset. + _currentInstance.registerListener(_el, "mousedown", mouseDownListener); + _sourceTriggers[elid] = mouseDownListener; + + // lastly, if a filter was provided, set it as a dragFilter on the element, + // to prevent the element drag function from kicking in when we want to + // drag a new connection + if (p.filter && jsPlumbUtil.isString(p.filter)) { + jpcl.setDragFilter(_el, p.filter); + } + }; + + el = _convertYUICollection(el); + + var inputs = el.length && el.constructor != String ? el : [ el ]; + + for (var i = 0, ii = inputs.length; i < ii; i++) { + _doOne(_info(inputs[i])); + } + + return _currentInstance; + }; + + // see api docs + this.unmakeSource = function(el, doNotClearArrays) { + var info = _info(el), + mouseDownListener = _sourceTriggers[info.id]; + + if (mouseDownListener) + _currentInstance.unregisterListener(info.el, "mousedown", mouseDownListener); + + if (!doNotClearArrays) { + delete _sourceEndpointDefinitions[info.id]; + delete _sourceEndpointsUnique[info.id]; + delete _sourcesEnabled[info.id]; + delete _sourceTriggers[info.id]; + delete _sourceMaxConnections[info.id]; + } + + return _currentInstance; + }; + + // see api docs + this.unmakeEverySource = function() { + for (var i in _sourcesEnabled) + _currentInstance.unmakeSource(i, true); + + _sourceEndpointDefinitions = {}; + _sourceEndpointsUnique = {}; + _sourcesEnabled = {}; + _sourceTriggers = {}; + }; + + // see api docs + this.unmakeEveryTarget = function() { + for (var i in _targetsEnabled) + _currentInstance.unmakeTarget(i, true); + + _targetEndpointDefinitions = {}; + _targetEndpointsUnique = {}; + _targetMaxConnections = {}; + _targetsEnabled = {}; + + return _currentInstance; + }; + + // does the work of setting a source enabled or disabled. + var _setEnabled = function(type, el, state, toggle) { + var a = type == "source" ? _sourcesEnabled : _targetsEnabled; + el = _convertYUICollection(el); + + if (_ju.isString(el)) a[el] = toggle ? !a[el] : state; + else if (el.length) { + for (var i = 0, ii = el.length; i < ii; i++) { + var info = _info(el[i]); + a[info.id] = toggle ? !a[info.id] : state; + } + } + return _currentInstance; + }; + + this.toggleSourceEnabled = function(el) { + _setEnabled("source", el, null, true); + return _currentInstance.isSourceEnabled(el); + }; + + this.setSourceEnabled = function(el, state) { return _setEnabled("source", el, state); }; + this.isSource = function(el) { return _sourcesEnabled[_info(el).id] != null; }; + this.isSourceEnabled = function(el) { return _sourcesEnabled[_info(el).id] === true; }; + + this.toggleTargetEnabled = function(el) { + _setEnabled("target", el, null, true); + return _currentInstance.isTargetEnabled(el); + }; + + this.isTarget = function(el) { return _targetsEnabled[_info(el).id] != null; }; + this.isTargetEnabled = function(el) { return _targetsEnabled[_info(el).id] === true; }; + this.setTargetEnabled = function(el, state) { return _setEnabled("target", el, state); }; + +// --------------------- end makeSource/makeTarget ---------------------------------------------- + + this.ready = function(fn) { + _currentInstance.bind("ready", fn); + }; + + // repaint some element's endpoints and connections + this.repaint = function(el, ui, timestamp) { + // support both lists... + if (typeof el == 'object' && el.length) + for ( var i = 0, ii = el.length; i < ii; i++) { + _draw(el[i], ui, timestamp); + } + else // ...and single strings. + _draw(el, ui, timestamp); + + return _currentInstance; + }; + + // repaint every endpoint and connection. + this.repaintEverything = function() { + // TODO this timestamp causes continuous anchors to not repaint properly. + // fix this. do not just take out the timestamp. it runs a lot faster with + // the timestamp included. + //var timestamp = null; + var timestamp = _timestamp(); + for ( var elId in endpointsByElement) { + _draw(elId, null, timestamp); + } + return _currentInstance; + }; + + + this.removeAllEndpoints = function(el, recurse) { + var _one = function(_el) { + var info = _info(_el), + ebe = endpointsByElement[info.id], + i, ii; + + if (ebe) { + for ( i = 0, ii = ebe.length; i < ii; i++) + _currentInstance.deleteEndpoint(ebe[i]); + } + delete endpointsByElement[info.id]; + + if (recurse) { + if (info.el && info.el.nodeType != 3 && info.el.nodeType != 8 ) { + for ( i = 0, ii = info.el.childNodes.length; i < ii; i++) { + _one(info.el.childNodes[i]); + } + } + } + + }; + _one(el); + return _currentInstance; + }; + + /** + * Remove the given element, including cleaning up all endpoints registered for it. + * This is exposed in the public API but also used internally by jsPlumb when removing the + * element associated with a connection drag. + */ + this.remove = function(el, doNotRepaint) { + var info = _info(el); + _currentInstance.doWhileSuspended(function() { + _currentInstance.removeAllEndpoints(info.id, true); + _currentInstance.dragManager.elementRemoved(info.id); + delete floatingConnections[info.id]; + _currentInstance.anchorManager.clearFor(info.id); + _currentInstance.anchorManager.removeFloatingConnection(info.id); + }, doNotRepaint === false); + if(info.el) jsPlumb.CurrentLibrary.removeElement(info.el); + }; + + var _registeredListeners = {}, + _unbindRegisteredListeners = function() { + for (var i in _registeredListeners) { + for (var j = 0, jj = _registeredListeners[i].length; j < jj; j++) { + var info = _registeredListeners[i][j]; + jsPlumb.CurrentLibrary.unbind(info.el, info.event, info.listener); + } + } + _registeredListeners = {}; + }; + + // internal register listener method. gives us a hook to clean things up + // with if the user calls jsPlumb.reset. + this.registerListener = function(el, type, listener) { + jsPlumb.CurrentLibrary.bind(el, type, listener); + jsPlumbUtil.addToList(_registeredListeners, type, {el:el, event:type, listener:listener}); + }; + + this.unregisterListener = function(el, type, listener) { + jsPlumb.CurrentLibrary.unbind(el, type, listener); + jsPlumbUtil.removeWithFunction(_registeredListeners, function(rl) { + return rl.type == type && rl.listener == listener; + }); + }; + + this.reset = function() { + _currentInstance.deleteEveryEndpoint(); + _currentInstance.unbind(); + _targetEndpointDefinitions = {}; + _targetEndpoints = {}; + _targetEndpointsUnique = {}; + _targetMaxConnections = {}; + _sourceEndpointDefinitions = {}; + _sourceEndpoints = {}; + _sourceEndpointsUnique = {}; + _sourceMaxConnections = {}; + connections.splice(0); + _unbindRegisteredListeners(); + _currentInstance.anchorManager.reset(); + if (!jsPlumbAdapter.headless) + _currentInstance.dragManager.reset(); + }; + + + this.setDefaultScope = function(scope) { + DEFAULT_SCOPE = scope; + return _currentInstance; + }; + + // sets whether or not some element should be currently draggable. + this.setDraggable = _setDraggable; + + // sets the id of some element, changing whatever we need to to keep track. + this.setId = function(el, newId, doNotSetAttribute) { + // + var id; + + if (jsPlumbUtil.isString(el)) { + id = el; + } + else { + el = _dom(el); + id = _currentInstance.getId(el); + } + + var sConns = _currentInstance.getConnections({source:id, scope:'*'}, true), + tConns = _currentInstance.getConnections({target:id, scope:'*'}, true); + + newId = "" + newId; + + if (!doNotSetAttribute) { + el = _dom(id); + jsPlumbAdapter.setAttribute(el, "id", newId); + } + else + el = _dom(newId); + + endpointsByElement[newId] = endpointsByElement[id] || []; + for (var i = 0, ii = endpointsByElement[newId].length; i < ii; i++) { + endpointsByElement[newId][i].setElementId(newId); + endpointsByElement[newId][i].setReferenceElement(el); + } + delete endpointsByElement[id]; + + _currentInstance.anchorManager.changeId(id, newId); + if (!jsPlumbAdapter.headless) + _currentInstance.dragManager.changeId(id, newId); + + var _conns = function(list, epIdx, type) { + for (var i = 0, ii = list.length; i < ii; i++) { + list[i].endpoints[epIdx].setElementId(newId); + list[i].endpoints[epIdx].setReferenceElement(el); + list[i][type + "Id"] = newId; + list[i][type] = el; + } + }; + _conns(sConns, 0, "source"); + _conns(tConns, 1, "target"); + + _currentInstance.repaint(newId); + }; + + this.setDebugLog = function(debugLog) { + log = debugLog; + }; + + this.setSuspendDrawing = function(val, repaintAfterwards) { + var curVal = _suspendDrawing; + _suspendDrawing = val; + if (val) _suspendedAt = new Date().getTime(); else _suspendedAt = null; + if (repaintAfterwards) _currentInstance.repaintEverything(); + return curVal; + }; + + // returns whether or not drawing is currently suspended. + this.isSuspendDrawing = function() { + return _suspendDrawing; + }; + + // return timestamp for when drawing was suspended. + this.getSuspendedAt = function() { return _suspendedAt; }; + + /** + * @doc function + * @name jsPlumb.class:doWhileSuspended + * @param {function} fn Function to run while suspended. + * @param {boolean} doNotRepaintAfterwards If true, jsPlumb won't run a full repaint. Otherwise it will. + * @description Suspends drawing, runs the given function, then re-enables drawing (and repaints, unless you tell it not to) + */ + this.doWhileSuspended = function(fn, doNotRepaintAfterwards) { + var _wasSuspended = _currentInstance.isSuspendDrawing(); + if (!_wasSuspended) + _currentInstance.setSuspendDrawing(true); + try { + fn(); + } + catch (e) { + _ju.log("Function run while suspended failed", e); + } + if (!_wasSuspended) + _currentInstance.setSuspendDrawing(false, !doNotRepaintAfterwards); + }; + + this.updateOffset = _updateOffset; + this.getOffset = function(elId) { return offsets[elId]; }; + this.getSize = function(elId) { return sizes[elId]; }; + this.getCachedData = _getCachedData; + this.timestamp = _timestamp; + + + + /** + * @doc function + * @name jsPlumb.class:setRenderMode + * @param {string} mode One of `jsPlumb.SVG, `jsPlumb.VML` or `jsPlumb.CANVAS`. + * @description Sets render mode. jsPlumb will fall back to VML if it determines that + * what you asked for is not supported (and that VML is). If you asked for VML but the browser does + * not support it, jsPlumb uses SVG. + * @return {string} The render mode that jsPlumb set, which of course may be different from that requested. + */ + this.setRenderMode = function(mode) { + renderMode = jsPlumbAdapter.setRenderMode(mode); + var i, ii; + // only add this if the renderer is canvas; we dont want these listeners registered on te + // entire document otherwise. + if (renderMode == jsPlumb.CANVAS) { + var bindOne = function(event) { + jsPlumb.CurrentLibrary.bind(document, event, function(e) { + if (!_currentInstance.currentlyDragging && renderMode == jsPlumb.CANVAS) { + // try connections first + for (i = 0, ii = connections.length; i < ii; i++ ) { + var t = connections[i].getConnector()[event](e); + if (t) return; + } + for (var el in endpointsByElement) { + var ee = endpointsByElement[el]; + for ( i = 0, ii = ee.length; i < ii; i++ ) { + if (ee[i].endpoint[event] && ee[i].endpoint[event](e)) return; + } + } + } + }); + }; + bindOne("click");bindOne("dblclick");bindOne("mousemove");bindOne("mousedown");bindOne("mouseup");bindOne("contextmenu"); + } + + return renderMode; + }; + + /** + * @doc function + * @name jsPlumb.class:getRenderMode + * @description Gets the current render mode for this instance of jsPlumb. + * @return {string} The current render mode - "canvas", "svg" or "vml". + */ + this.getRenderMode = function() { return renderMode; }; + + this.show = function(el, changeEndpoints) { + _setVisible(el, "block", changeEndpoints); + return _currentInstance; + }; + + /** + * gets some test hooks. nothing writable. + */ + this.getTestHarness = function() { + return { + endpointsByElement : endpointsByElement, + endpointCount : function(elId) { + var e = endpointsByElement[elId]; + return e ? e.length : 0; + }, + connectionCount : function(scope) { + scope = scope || DEFAULT_SCOPE; + var c = _currentInstance.getConnections({scope:scope}); + return c ? c.length : 0; + }, + getId : _getId, + makeAnchor:self.makeAnchor, + makeDynamicAnchor:self.makeDynamicAnchor + }; + }; + + + // TODO: update this method to return the current state. + this.toggleVisible = _toggleVisible; + this.toggleDraggable = _toggleDraggable; + this.addListener = this.bind; + + /* + helper method to take an xy location and adjust it for the parent's offset and scroll. + */ + this.adjustForParentOffsetAndScroll = function(xy, el) { + + var offsetParent = null, result = xy; + if (el.tagName.toLowerCase() === "svg" && el.parentNode) { + offsetParent = el.parentNode; + } + else if (el.offsetParent) { + offsetParent = el.offsetParent; + } + if (offsetParent != null) { + var po = offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : _getOffset(offsetParent, _currentInstance), + so = offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : {left:offsetParent.scrollLeft, top:offsetParent.scrollTop}; + + // i thought it might be cool to do this: + // lastReturnValue[0] = lastReturnValue[0] - offsetParent.offsetLeft + offsetParent.scrollLeft; + // lastReturnValue[1] = lastReturnValue[1] - offsetParent.offsetTop + offsetParent.scrollTop; + // but i think it ignores margins. my reasoning was that it's quicker to not hand off to some underlying + // library. + + result[0] = xy[0] - po.left + so.left; + result[1] = xy[1] - po.top + so.top; + } + + return result; + + }; + + if (!jsPlumbAdapter.headless) { + _currentInstance.dragManager = jsPlumbAdapter.getDragManager(_currentInstance); + _currentInstance.recalculateOffsets = _currentInstance.dragManager.updateOffsets; + } + + }; + + jsPlumbUtil.extend(jsPlumbInstance, jsPlumbUtil.EventGenerator, { + setAttribute : function(el, a, v) { + jsPlumbAdapter.setAttribute(el, a, v); + }, + getAttribute : function(el, a) { + return jsPlumbAdapter.getAttribute(jsPlumb.CurrentLibrary.getDOMElement(el), a); + }, + registerConnectionType : function(id, type) { + this._connectionTypes[id] = jsPlumb.extend({}, type); + }, + registerConnectionTypes : function(types) { + for (var i in types) + this._connectionTypes[i] = jsPlumb.extend({}, types[i]); + }, + registerEndpointType : function(id, type) { + this._endpointTypes[id] = jsPlumb.extend({}, type); + }, + registerEndpointTypes : function(types) { + for (var i in types) + this._endpointTypes[i] = jsPlumb.extend({}, types[i]); + }, + getType : function(id, typeDescriptor) { + return typeDescriptor === "connection" ? this._connectionTypes[id] : this._endpointTypes[id]; + }, + setIdChanged : function(oldId, newId) { + this.setId(oldId, newId, true); + }, + // set parent: change the parent for some node and update all the registrations we need to. + setParent : function(el, newParent) { + var jpcl = jsPlumb.CurrentLibrary, + _el = jpcl.getElementObject(el), + _dom = jpcl.getDOMElement(_el), + _id = this.getId(_dom), + _pel = jpcl.getElementObject(newParent), + _pdom = jpcl.getDOMElement(_pel), + _pid = this.getId(_pdom); + + _dom.parentNode.removeChild(_dom); + _pdom.appendChild(_dom); + this.dragManager.setParent(_el, _id, _pel, _pid); + } + }); + +// --------------------- static instance + AMD registration ------------------------------------------- + +// create static instance and assign to window if window exists. + var jsPlumb = new jsPlumbInstance(); + // register on window if defined (lets us run on server) + if (typeof window != 'undefined') window.jsPlumb = jsPlumb; + // add 'getInstance' method to static instance + /** + * @name jsPlumb.getInstance + * @param {object} [_defaults] Optional default settings for the new instance. + * @desc Gets a new instance of jsPlumb. + */ + jsPlumb.getInstance = function(_defaults) { + var j = new jsPlumbInstance(_defaults); + j.init(); + return j; + }; +// maybe register static instance as an AMD module, and getInstance method too. + if ( typeof define === "function") { + define( "jsplumb", [], function () { return jsPlumb; } ); + define( "jsplumbinstance", [], function () { return jsPlumb.getInstance(); } ); + } + // CommonJS + if (typeof exports !== 'undefined') { + exports.jsPlumb = jsPlumb; + } + + +// --------------------- end static instance + AMD registration ------------------------------------------- + +})(); + + +;(function() { + + // create the drag handler for a connection + 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(n); + _jsPlumb.updateOffset( { elId : id }); + // create and assign an id, and initialize the offset. + placeholder.id = id; + placeholder.element = n; + }; + + // create a floating endpoint (for drag connections) + 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" }); + }; + + var typeParameters = [ "connectorStyle", "connectorHoverStyle", "connectorOverlays", + "connector", "connectionType", "connectorClass", "connectorHoverClass" ]; + + // 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(ep, elementWithPrecedence) { + var idx = 0; + if (elementWithPrecedence != null) { + for (var i = 0; i < ep.connections.length; i++) { + if (ep.connections[i].sourceId == elementWithPrecedence || ep.connections[i].targetId == elementWithPrecedence) { + idx = i; + break; + } + } + } + + return ep.connections[idx]; + }; + + var findConnectionIndex = function(conn, ep) { + return jsPlumbUtil.findWithFunction(ep.connections, function(c) { return c.id == conn.id; }); + }; + + jsPlumb.Endpoint = function(params) { + var _jsPlumb = params._jsPlumb, + jpcl = jsPlumb.CurrentLibrary, + _att = jsPlumbAdapter.getAttribute, + _gel = jpcl.getElementObject, + _dom = jpcl.getDOMElement, + _ju = jsPlumbUtil, + _newConnection = params.newConnection, + _newEndpoint = params.newEndpoint, + _finaliseConnection = params.finaliseConnection, + _fireDetachEvent = params.fireDetachEvent, + _fireMoveEvent = params.fireMoveEvent, + floatingConnections = params.floatingConnections; + + this.idPrefix = "_jsplumb_e_"; + this.defaultLabelLocation = [ 0.5, 0.5 ]; + this.defaultOverlayKeys = ["Overlays", "EndpointOverlays"]; + this.parent = params.parent; + OverlayCapableJsPlumbUIComponent.apply(this, arguments); + +// TYPE + + this.getDefaultType = function() { + return { + parameters:{}, + scope:null, + maxConnections:this._jsPlumb.instance.Defaults.MaxConnections, + paintStyle:this._jsPlumb.instance.Defaults.EndpointStyle || jsPlumb.Defaults.EndpointStyle, + endpoint:this._jsPlumb.instance.Defaults.Endpoint || jsPlumb.Defaults.Endpoint, + hoverPaintStyle:this._jsPlumb.instance.Defaults.EndpointHoverStyle || jsPlumb.Defaults.EndpointHoverStyle, + overlays:this._jsPlumb.instance.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 + }; + }; + +// END TYPE + + this._jsPlumb.enabled = !(params.enabled === false); + this._jsPlumb.visible = true; + this.element = _dom(params.source); + this._jsPlumb.uuid = params.uuid; + this._jsPlumb.floatingEndpoint = null; + var inPlaceCopy = null; + if (this._jsPlumb.uuid) params.endpointsByUUID[this._jsPlumb.uuid] = this; + this.elementId = params.elementId; + + this._jsPlumb.connectionCost = params.connectionCost; + this._jsPlumb.connectionsDirected = params.connectionsDirected; + this._jsPlumb.currentAnchorClass = ""; + this._jsPlumb.events = {}; + + var _updateAnchorClass = function() { + jpcl.removeClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + this.removeClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + this._jsPlumb.currentAnchorClass = this.anchor.getCssClass(); + this.addClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + jpcl.addClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + }.bind(this); + + this.setAnchor = function(anchorParams, doNotRepaint) { + this._jsPlumb.instance.continuousAnchorFactory.clear(this.elementId); + this.anchor = this._jsPlumb.instance.makeAnchor(anchorParams, this.elementId, _jsPlumb); + _updateAnchorClass(); + this.anchor.bind("anchorChanged", function(currentAnchor) { + this.fire("anchorChanged", {endpoint:this, anchor:currentAnchor}); + _updateAnchorClass(); + }.bind(this)); + if (!doNotRepaint) + this._jsPlumb.instance.repaint(this.elementId); + return this; + }; + + var anchorParamsToUse = params.anchor ? params.anchor : params.anchors ? params.anchors : (_jsPlumb.Defaults.Anchor || "Top"); + this.setAnchor(anchorParamsToUse, true); + + // endpoint delegates to first connection for hover, if there is one. + var internalHover = function(state) { + if (this.connections.length > 0) + this.connections[0].setHover(state, false); + else + this.setHover(state); + }.bind(this); + + // 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. + this._jsPlumb.instance.anchorManager.add(this, this.elementId); + + this.setEndpoint = function(ep) { + + if (this.endpoint != null) { + this.endpoint.cleanup(); + this.endpoint.destroy(); + } + + var _e = function(t, p) { + var rm = _jsPlumb.getRenderMode(); + if (jsPlumb.Endpoints[rm][t]) return new jsPlumb.Endpoints[rm][t](p); + if (!_jsPlumb.Defaults.DoNotThrowErrors) + throw { msg:"jsPlumb: unknown endpoint type '" + t + "'" }; + }; + + var endpointArgs = { + _jsPlumb:this._jsPlumb.instance, + cssClass:params.cssClass, + parent:params.parent, + container:params.container, + tooltip:params.tooltip, + connectorTooltip:params.connectorTooltip, + endpoint:this + }; + if (_ju.isString(ep)) + this.endpoint = _e(ep, endpointArgs); + else if (_ju.isArray(ep)) { + endpointArgs = _ju.merge(ep[1], endpointArgs); + this.endpoint = _e(ep[0], endpointArgs); + } + else { + this.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); + this.endpoint.clone = function() { + // TODO this, and the code above, can be refactored to be more dry. + if (_ju.isString(ep)) + return _e(ep, endpointArgs); + else if (_ju.isArray(ep)) { + endpointArgs = _ju.merge(ep[1], endpointArgs); + return _e(ep[0], endpointArgs); + } + }.bind(this); + + this.type = this.endpoint.type; + // bind listeners from endpoint to self, with the internal hover function defined above. + this.bindListeners(this.endpoint, this, internalHover); + }; + + this.setEndpoint(params.endpoint || _jsPlumb.Defaults.Endpoint || jsPlumb.Defaults.Endpoint || "Dot"); + 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._jsPlumb.paintStyleInUse = this.getPaintStyle(); + + _ju.copyValues(typeParameters, params, this); + + this.isSource = params.isSource || false; + this.isTarget = params.isTarget || false; + this._jsPlumb.maxConnections = params.maxConnections || _jsPlumb.Defaults.MaxConnections; // maximum number of connections this endpoint can be the source of. + this.canvas = this.endpoint.canvas; + // add anchor class (need to do this on construction because we set anchor first) + this.addClass(_jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + jpcl.addClass(this.element, _jsPlumb.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + this.connections = params.connections || []; + this.connectorPointerEvents = params["connector-pointer-events"]; + + this.scope = params.scope || _jsPlumb.getDefaultScope(); + this.timestamp = null; + this.reattachConnections = params.reattach || _jsPlumb.Defaults.ReattachConnections; + this.connectionsDetachable = _jsPlumb.Defaults.ConnectionsDetachable; + if (params.connectionsDetachable === false || params.detachable === false) + this.connectionsDetachable = false; + this.dragAllowedWhenFull = params.dragAllowedWhenFull || true; + + if (params.onMaxConnections) + this.bind("maxConnections", params.onMaxConnections); + + // + // add a connection. not part of public API. + // + this.addConnection = function(connection) { + this.connections.push(connection); + this[(this.connections.length > 0 ? "add" : "remove") + "Class"](_jsPlumb.endpointConnectedClass); + this[(this.isFull() ? "add" : "remove") + "Class"](_jsPlumb.endpointFullClass); + }; + + this.detachFromConnection = function(connection, idx) { + idx = idx == null ? findConnectionIndex(connection, this) : idx; + if (idx >= 0) { + this.connections.splice(idx, 1); + this[(this.connections.length > 0 ? "add" : "remove") + "Class"](_jsPlumb.endpointConnectedClass); + this[(this.isFull() ? "add" : "remove") + "Class"](_jsPlumb.endpointFullClass); + } + }; + + this.detach = function(connection, ignoreTarget, forceDetach, fireEvent, originalEvent, endpointBeingDeleted, connectionIndex) { + + var idx = connectionIndex == null ? findConnectionIndex(connection, this) : connectionIndex, + actuallyDetached = false; + fireEvent = (fireEvent !== false); + + if (idx >= 0) { + if (forceDetach || connection._forceDetach || (connection.isDetachable() && connection.isDetachAllowed(connection) && this.isDetachAllowed(connection) )) { + + //connection.setHover(false); + + _jsPlumb.deleteObject({ + connection:connection, + fireEvent:(!ignoreTarget && fireEvent), + originalEvent:originalEvent + }); + actuallyDetached = true; + } + } + return actuallyDetached; + }; + + this.detachAll = function(fireEvent, originalEvent) { + while (this.connections.length > 0) { + // TODO this could pass the index in to the detach method to save some time (index will always be zero in this while loop) + // TODO now it defaults to fireEvent true. will that mess with things? + this.detach(this.connections[0], false, true, fireEvent !== false, originalEvent, this, 0); + } + return this; + }; + this.detachFrom = function(targetEndpoint, fireEvent, originalEvent) { + var c = []; + for ( var i = 0; i < this.connections.length; i++) { + if (this.connections[i].endpoints[1] == targetEndpoint || this.connections[i].endpoints[0] == targetEndpoint) { + c.push(this.connections[i]); + } + } + for ( var j = 0; j < c.length; j++) { + this.detach(c[j], false, true, fireEvent, originalEvent); + } + return this; + }; + + this.getElement = function() { + return this.element; + }; + + // container not supported in 1.5.3; you cannot change the container once it is set. + // it might come back int a future release. + this.setElement = function(el/*, container*/) { + var parentId = this._jsPlumb.instance.getId(el), + curId = this.elementId; + // remove the endpoint from the list for the current endpoint's element + _ju.removeWithFunction(params.endpointsByElement[this.elementId], function(e) { + return e.id == this.id; + }.bind(this)); + this.element = _dom(el); + this.elementId = _jsPlumb.getId(this.element); + _jsPlumb.anchorManager.rehomeEndpoint(this, curId, this.element); + _jsPlumb.dragManager.endpointAdded(this.element); + _ju.addToList(params.endpointsByElement, parentId, this); + return this; + }; + + /** + * private but must be exposed. + */ + this.makeInPlaceCopy = function() { + var loc = this.anchor.getCurrentLocation({element:this}), + o = this.anchor.getOrientation(this), + acc = this.anchor.getCssClass(), + inPlaceAnchor = { + bind:function() { }, + compute:function() { return [ loc[0], loc[1] ]; }, + getCurrentLocation : function() { return [ loc[0], loc[1] ]; }, + getOrientation:function() { return o; }, + getCssClass:function() { return acc; } + }; + + return _newEndpoint( { + anchor : inPlaceAnchor, + source : this.element, + paintStyle : this.getPaintStyle(), + endpoint : params.hideOnDrag ? "Blank" : this.endpoint, + _transient:true, + scope:this.scope + }); + }; + + + /** + * private but needs to be exposed. + */ + this.isFloating = function() { + return this.anchor != null && this.anchor.isFloating; + }; + + /** + * 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 = this.connections[0]; + if (this.isTarget && candidate) return candidate; + else { + return (this.connections.length < this._jsPlumb.maxConnections) || this._jsPlumb.maxConnections == -1 ? null : candidate; + } + }; + + this.setStyle = this.setPaintStyle; + + this.paint = function(params) { + params = params || {}; + var timestamp = params.timestamp, recalc = !(params.recalc === false); + if (!timestamp || this.timestamp !== timestamp) { + + // TODO check: is this is a safe performance enhancement? + var info = _jsPlumb.updateOffset({ elId:this.elementId, timestamp:timestamp/*, recalc:recalc*/ }); + + var xy = params.offset ? params.offset.o : info.o; + if(xy != null) { + var ap = params.anchorPoint,connectorPaintStyle = params.connectorPaintStyle; + if (ap == null) { + var wh = params.dimensions || info.s, + anchorParams = { xy : [ xy.left, xy.top ], wh : wh, element : this, timestamp : timestamp }; + if (recalc && this.anchor.isDynamic && this.connections.length > 0) { + var c = findConnectionToUseForDynamicAnchor(this, params.elementWithPrecedence), + oIdx = c.endpoints[0] == this ? 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 = this.anchor.compute(anchorParams); + } + + this.endpoint.compute(ap, this.anchor.getOrientation(this), this._jsPlumb.paintStyleInUse, connectorPaintStyle || this.paintStyleInUse); + this.endpoint.paint(this._jsPlumb.paintStyleInUse, this.anchor); + this.timestamp = timestamp; + + // paint overlays + for ( var i = 0; i < this._jsPlumb.overlays.length; i++) { + var o = this._jsPlumb.overlays[i]; + if (o.isVisible()) { + this._jsPlumb.overlayPlacements[i] = o.draw(this.endpoint, this._jsPlumb.paintStyleInUse); + o.paint(this._jsPlumb.overlayPlacements[i]); + } + } + } + } + }; + + this.repaint = this.paint; + + var draggingInitialised = false; + this.initDraggable = function() { + // is this a connection source? we make it draggable and have the + // drag listener maintain a connection with a floating endpoint. + if (!draggingInitialised && jpcl.isDragSupported(this.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 = this.connectorSelector(); + var _continue = true; + // if not enabled, return + if (!this.isEnabled()) _continue = false; + // if no connection and we're not a source, return. + if (jpc == null && !this.isSource) _continue = false; + // otherwise if we're full and not allowed to drag, also return false. + if (this.isSource && this.isFull() && !this.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; + } + + // clear hover for all connections for this endpoint before continuing. + for (var i = 0; i < this.connections.length; i++) + this.connections[i].setHover(false); + + this.addClass("endpointDrag"); + _jsPlumb.setConnectionBeingDragged(true); + + // if we're not full but there was a connection, make it null. we'll create a new one. + if (jpc && !this.isFull() && this.isSource) jpc = null; + + _jsPlumb.updateOffset( { elId : this.elementId }); + inPlaceCopy = this.makeInPlaceCopy(); + inPlaceCopy.referenceEndpoint = this; + inPlaceCopy.paint(); + + _makeDraggablePlaceholder(placeholderInfo, this.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 = jsPlumb.CurrentLibrary.getOffset(ipcoel, _jsPlumb), + po = _jsPlumb.adjustForParentOffsetAndScroll([ipco.left, ipco.top], inPlaceCopy.canvas), + canvasElement = _gel(this.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 (this.parentAnchor) this.anchor = _jsPlumb.makeAnchor(this.parentAnchor, this.elementId, _jsPlumb); + + // store the id of the dragging div and the source element. the drop function will pick these up. + _jsPlumb.setAttribute(this.canvas, "dragId", placeholderInfo.id); + _jsPlumb.setAttribute(this.canvas, "elId", this.elementId); + + this._jsPlumb.floatingEndpoint = _makeFloatingEndpoint(this.getPaintStyle(), this.anchor, this.endpoint, this.canvas, placeholderInfo.element, _jsPlumb, _newEndpoint); + // TODO we should not know about DOM here. make the library adapter do this (or the + // dom adapter) + this.canvas.style.visibility = "hidden"; + + if (jpc == null) { + this.anchor.locked = true; + this.setHover(false, false); + // create a connection. one end is this endpoint, the other is a floating endpoint. + jpc = _newConnection({ + sourceEndpoint : this, + targetEndpoint : this._jsPlumb.floatingEndpoint, + source : this.endpointWillMoveTo || this.element, // for makeSource with parent option. ensure source element is represented correctly. + target : placeholderInfo.element, + anchors : [ this.anchor, this._jsPlumb.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:this.connectionType, + cssClass:this.connectorClass, + hoverClass:this.connectorHoverClass + }); + jpc.pending = true; // mark this connection as not having been established. + jpc.addClass(_jsPlumb.draggingClass); + this._jsPlumb.floatingEndpoint.addClass(_jsPlumb.draggingClass); + // 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 == this.id ? 0 : 1; + jpc.floatingAnchorIndex = anchorIdx; // save our anchor index as the connection's floating index. + this.detachFromConnection(jpc); // detach from the connection while dragging is occurring. + + // store the original scope (issue 57) + var dragScope = jsPlumb.CurrentLibrary.getDragScope(canvasElement); + _jsPlumb.setAttribute(this.canvas, "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); + + // fire an event that informs that a connection is being dragged. we do this before + // replacing the original target with the floating element info. + _jsPlumb.fire("connectionDrag", jpc); + + // now we replace ourselves with the temporary div we created above: + if (anchorIdx === 0) { + existingJpcParams = [ jpc.source, jpc.sourceId, canvasElement, dragScope ]; + jpc.source = placeholderInfo.element; + jpc.sourceId = placeholderInfo.id; + } else { + existingJpcParams = [ jpc.target, jpc.targetId, canvasElement, 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]; + + // PROVIDE THE SUSPENDED ELEMENT, BE IT A SOURCE OR TARGET (ISSUE 39) + jpc.suspendedElement = jpc.endpoints[anchorIdx].getElement(); + jpc.suspendedElementId = jpc.endpoints[anchorIdx].elementId; + jpc.suspendedElementType = anchorIdx === 0 ? "source" : "target"; + + jpc.suspendedEndpoint.setHover(false); + this._jsPlumb.floatingEndpoint.referenceEndpoint = jpc.suspendedEndpoint; + jpc.endpoints[anchorIdx] = this._jsPlumb.floatingEndpoint; + + jpc.addClass(_jsPlumb.draggingClass); + this._jsPlumb.floatingEndpoint.addClass(_jsPlumb.draggingClass); + + } + // register it and register connection on it. + floatingConnections[placeholderInfo.id] = jpc; + _jsPlumb.anchorManager.addFloatingConnection(placeholderInfo.id, 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, this._jsPlumb.floatingEndpoint); + // tell jsplumb about it + _jsPlumb.currentlyDragging = true; + }.bind(this); + + 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 || this.scope; + dragOptions[startEvent] = _ju.wrap(dragOptions[startEvent], start, false); + // extracted drag handler function so can be used by makeSource + dragOptions[dragEvent] = _ju.wrap(dragOptions[dragEvent], _dragHandler.drag); + dragOptions[stopEvent] = _ju.wrap(dragOptions[stopEvent], + function() { + + _jsPlumb.setConnectionBeingDragged(false); + // if no endpoints, jpc already cleaned up. + if (jpc.endpoints != null) { + // get the actual drop event (decode from library args to stop function) + var originalEvent = jpcl.getDropEvent(arguments); + // unlock the other endpoint (if it is dynamic, it would have been locked at drag start) + var idx = jpc.floatingAnchorIndex == null ? 1 : jpc.floatingAnchorIndex; + jpc.endpoints[idx === 0 ? 1 : 0].anchor.locked = false; + // WHY does this need to happen? i suppose because the connection might not get + // deleted. TODO: i dont want to know about css classes inside jsplumb, ideally. + jpc.removeClass(_jsPlumb.draggingClass); + + // if we have the floating endpoint then the connection has not been dropped + // on another endpoint. If it is a new connection we throw it away. If it is an + // existing connection we check to see if we should reattach it, throwing it away + // if not. + if (jpc.endpoints[idx] == this._jsPlumb.floatingEndpoint) { + // 6a. 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 the connection should be reattached, or the other endpoint refuses detach, then + // reset the connection to its original state + 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._forceDetach = null; + jpc._forceReattach = null; + this._jsPlumb.floatingEndpoint.detachFromConnection(jpc); + jpc.suspendedEndpoint.addConnection(jpc); + _jsPlumb.repaint(existingJpcParams[1]); + } + } + } + } + + // remove the element associated with the floating endpoint + // (and its associated floating endpoint and visual artefacts) + _jsPlumb.remove(placeholderInfo.element, false); + // remove the inplace copy + _jsPlumb.remove(inPlaceCopy.canvas, false); + + // makeTargets sets this flag, to tell us we have been replaced and should delete ourself. + if (this.deleteAfterDragStop) { + _jsPlumb.deleteObject({endpoint:this}); + } + else { + if (this._jsPlumb) { + this._jsPlumb.floatingEndpoint = null; + // repaint this endpoint. + // make our canvas visible (TODO: hand off to library; we should not know about DOM) + this.canvas.style.visibility = "visible"; + // unlock our anchor + this.anchor.locked = false; + this.paint({recalc:false}); + } + } + + // TODO can this stay here? the connection is no longer valid. + _jsPlumb.fire("connectionDragStop", jpc); + + // tell jsplumb that dragging is finished. + _jsPlumb.currentlyDragging = false; + + jpc = null; + + }.bind(this)); + + var i = _gel(this.canvas); + jpcl.initDraggable(i, dragOptions, true, _jsPlumb); + + draggingInitialised = true; + } + }; + + // if marked as source or target at create time, init the dragging. + if (this.isSource || this.isTarget) + this.initDraggable(); + + // 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 ((this.isTarget || forceInit) && jpcl.isDropSupported(this.element)) { + var dropOptions = params.dropOptions || _jsPlumb.Defaults.DropOptions || jsPlumb.Defaults.DropOptions; + dropOptions = jsPlumb.extend( {}, dropOptions); + dropOptions.scope = dropOptions.scope || this.scope; + var dropEvent = jpcl.dragEvents.drop, + overEvent = jpcl.dragEvents.over, + outEvent = jpcl.dragEvents.out, + drop = function() { + + this.removeClass(_jsPlumb.endpointDropAllowedClass); + this.removeClass(_jsPlumb.endpointDropForbiddenClass); + + var originalEvent = jpcl.getDropEvent(arguments), + draggable = _gel(jpcl.getDragObject(arguments)), + id = _jsPlumb.getAttribute(draggable, "dragId"), + elId = _jsPlumb.getAttribute(draggable, "elId"), + scope = _jsPlumb.getAttribute(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 == this.id || + this.referenceEndpoint && jpc.suspendedEndpoint.id == this.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 (this.isFull()) { + this.fire("maxConnections", { + endpoint:this, + connection:jpc, + maxConnections:this._jsPlumb.maxConnections + }, originalEvent); + } + + if (!this.isFull() && !(idx === 0 && !this.isSource) && !(idx == 1 && !this.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 != this.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 = this.element; + jpc.sourceId = this.elementId; + } else { + jpc.target = this.element; + jpc.targetId = this.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() { + jpc.pending = false; + + // remove this jpc from the current endpoint + jpc.endpoints[idx].detachFromConnection(jpc); + if (jpc.suspendedEndpoint) jpc.suspendedEndpoint.detachFromConnection(jpc); + jpc.endpoints[idx] = this; + this.addConnection(jpc); + + // copy our parameters in to the connection: + var params = this.getParameters(); + for (var aParam in params) + jpc.setParameter(aParam, params[aParam]); + + if (!jpc.suspendedEndpoint) { + // if not an existing connection and + if (params.draggable) + jsPlumb.CurrentLibrary.initDraggable(this.element, dragOptions, true, _jsPlumb); + } + else { + var suspendedElement = jpc.suspendedEndpoint.getElement(), suspendedElementId = jpc.suspendedEndpoint.elementId; + _fireMoveEvent({ + index:idx, + originalSourceId:idx === 0 ? suspendedElementId : jpc.sourceId, + newSourceId:idx === 0 ? this.elementId : jpc.sourceId, + originalTargetId:idx == 1 ? suspendedElementId : jpc.targetId, + newTargetId:idx == 1 ? this.elementId : jpc.targetId, + originalSourceEndpoint:idx === 0 ? jpc.suspendedEndpoint : jpc.endpoints[0], + newSourceEndpoint:idx === 0 ? this : jpc.endpoints[0], + originalTargetEndpoint:idx == 1 ? jpc.suspendedEndpoint : jpc.endpoints[1], + newTargetEndpoint:idx == 1 ? this : jpc.endpoints[1], + connection:jpc + }, originalEvent); + /* 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);*/ + } + + // TODO this is like the makeTarget drop code. + if (idx == 1) + _jsPlumb.anchorManager.updateOtherEndpoint(jpc.sourceId, jpc.suspendedElementId, jpc.targetId, jpc); + else + _jsPlumb.anchorManager.sourceChanged(jpc.suspendedEndpoint.elementId, jpc.sourceId, jpc); + + // finalise will inform the anchor manager and also add to + // connectionsByScope if necessary. + // TODO if this is not set to true, then dragging a connection's target to a new + // target causes the connection to be forgotten. however if it IS set to true, then + // the opposite happens: dragging by source causes the connection to get forgotten + // about and then if you delete it jsplumb breaks. + _finaliseConnection(jpc, null, originalEvent/*, true*/); + + commonFunction(); + }.bind(this); + + 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 && this.isDropAllowed(jpc.sourceId, jpc.targetId, jpc.scope, jpc, this); + + if (_doContinue) { + continueFunction(); + } + else { + dontContinueFunction(); + } + } + _jsPlumb.currentlyDragging = false; + } + }.bind(this); + + dropOptions[dropEvent] = _ju.wrap(dropOptions[dropEvent], drop); + dropOptions[overEvent] = _ju.wrap(dropOptions[overEvent], function() { + var draggable = jpcl.getDragObject(arguments), + id = _jsPlumb.getAttribute(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 = (this.isTarget && _jpc.floatingAnchorIndex !== 0) || (_jpc.suspendedEndpoint && this.referenceEndpoint && this.referenceEndpoint.id == _jpc.suspendedEndpoint.id); + if (_cont) { + var bb = _jsPlumb.checkCondition("checkDropAllowed", { + sourceEndpoint:_jpc.endpoints[idx], + targetEndpoint:this, + connection:_jpc + }); + this[(bb ? "add" : "remove") + "Class"](_jsPlumb.endpointDropAllowedClass); + this[(bb ? "remove" : "add") + "Class"](_jsPlumb.endpointDropForbiddenClass); + _jpc.endpoints[idx].anchor.over(this.anchor, this); + } + } + }.bind(this)); + + dropOptions[outEvent] = _ju.wrap(dropOptions[outEvent], function() { + var draggable = jpcl.getDragObject(arguments), + id = _jsPlumb.getAttribute( draggable, "dragId"), + _jpc = floatingConnections[id]; + + if (_jpc != null) { + var idx = _jpc.floatingAnchorIndex == null ? 1 : _jpc.floatingAnchorIndex; + var _cont = (this.isTarget && _jpc.floatingAnchorIndex !== 0) || (_jpc.suspendedEndpoint && this.referenceEndpoint && this.referenceEndpoint.id == _jpc.suspendedEndpoint.id); + if (_cont) { + this.removeClass(_jsPlumb.endpointDropAllowedClass); + this.removeClass(_jsPlumb.endpointDropForbiddenClass); + _jpc.endpoints[idx].anchor.out(); + } + } + }.bind(this)); + jpcl.initDroppable(canvas, dropOptions, true, isTransient); + } + }.bind(this); + + // 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(this.canvas), true, !(params._transient || this.anchor.isFloating), this); + + // finally, set type if it was provided + if (params.type) + this.addType(params.type, params.data, _jsPlumb.isSuspendDrawing()); + + return this; + }; + + jsPlumbUtil.extend(jsPlumb.Endpoint, OverlayCapableJsPlumbUIComponent, { + getTypeDescriptor : function() { return "endpoint"; }, + isVisible : function() { return this._jsPlumb.visible; }, + setVisible : function(v, doNotChangeConnections, doNotNotifyOtherEndpoint) { + this._jsPlumb.visible = v; + if (this.canvas) this.canvas.style.display = v ? "block" : "none"; + this[v ? "showOverlays" : "hideOverlays"](); + if (!doNotChangeConnections) { + for (var i = 0; i < this.connections.length; i++) { + this.connections[i].setVisible(v); + if (!doNotNotifyOtherEndpoint) { + var oIdx = this === this.connections[i].endpoints[0] ? 1 : 0; + // only change the other endpoint if this is its only connection. + if (this.connections[i].endpoints[oIdx].connections.length == 1) this.connections[i].endpoints[oIdx].setVisible(v, true, true); + } + } + } + }, + getAttachedElements : function() { + return this.connections; + }, + applyType : function(t, doNotRepaint) { + if (t.maxConnections != null) this._jsPlumb.maxConnections = t.maxConnections; + if (t.scope) this.scope = t.scope; + jsPlumbUtil.copyValues(typeParameters, t, this); + if (t.anchor) { + this.anchor = this._jsPlumb.instance.makeAnchor(t.anchor); + } + }, + isEnabled : function() { return this._jsPlumb.enabled; }, + setEnabled : function(e) { this._jsPlumb.enabled = e; }, + cleanup : function() { + jsPlumb.CurrentLibrary.removeClass(this.element, this._jsPlumb.instance.endpointAnchorClassPrefix + "_" + this._jsPlumb.currentAnchorClass); + this.anchor = null; + this.endpoint.cleanup(); + this.endpoint.destroy(); + this.endpoint = null; + // drag/drop + var i = jsPlumb.CurrentLibrary.getElementObject(this.canvas); + jsPlumb.CurrentLibrary.destroyDraggable(i); + jsPlumb.CurrentLibrary.destroyDroppable(i); + }, + setHover : function(h) { + if (this.endpoint && this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) + this.endpoint.setHover(h); + }, + isFull : function() { + return !(this.isFloating() || this._jsPlumb.maxConnections < 1 || this.connections.length < this._jsPlumb.maxConnections); + }, + getConnectionCost : function() { return this._jsPlumb.connectionCost; }, + setConnectionCost : function(c) { + this._jsPlumb.connectionCost = c; + }, + areConnectionsDirected : function() { return this._jsPlumb.connectionsDirected; }, + setConnectionsDirected : function(b) { this._jsPlumb.connectionsDirected = b; }, + setElementId : function(_elId) { + this.elementId = _elId; + this.anchor.elementId = _elId; + }, + setReferenceElement : function(_el) { + this.element = jsPlumb.CurrentLibrary.getDOMElement(_el); + }, + setDragAllowedWhenFull : function(allowed) { + this.dragAllowedWhenFull = allowed; + }, + equals : function(endpoint) { + return this.anchor.equals(endpoint.anchor); + }, + getUuid : function() { + return this._jsPlumb.uuid; + }, + computeAnchor : function(params) { + return this.anchor.compute(params); + } + }); +})(); +;(function() { + + var makeConnector = function(_jsPlumb, renderMode, connectorName, connectorArgs) { + if (!_jsPlumb.Defaults.DoNotThrowErrors && jsPlumb.Connectors[renderMode][connectorName] == null) + throw { msg:"jsPlumb: unknown connector type '" + connectorName + "'" }; + + return new jsPlumb.Connectors[renderMode][connectorName](connectorArgs); + }, + _makeAnchor = function(anchorParams, elementId, _jsPlumb) { + return (anchorParams) ? _jsPlumb.makeAnchor(anchorParams, elementId, _jsPlumb) : null; + }, + prepareEndpoint = function(_jsPlumb, _newEndpoint, conn, existing, index, params, element, elementId, connectorPaintStyle, connectorHoverPaintStyle) { + var e; + if (existing) { + conn.endpoints[index] = existing; + existing.addConnection(conn); + } 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, _jsPlumb) || + _makeAnchor(jsPlumb.Defaults.Anchors[index], elementId,_jsPlumb) || + _makeAnchor(_jsPlumb.Defaults.Anchor, elementId,_jsPlumb) || + _makeAnchor(jsPlumb.Defaults.Anchor, elementId, _jsPlumb), + u = params.uuids ? params.uuids[index] : null; + e = _newEndpoint({ + paintStyle : es, hoverPaintStyle:ehs, endpoint : ep, connections : [ conn ], + uuid : u, anchor : a, source : element, scope : params.scope, container:params.container, + reattach:params.reattach || _jsPlumb.Defaults.ReattachConnections, + detachable:params.detachable || _jsPlumb.Defaults.ConnectionsDetachable + }); + conn.endpoints[index] = e; + + if (params.drawEndpoints === false) e.setVisible(false, true, true); + + } + return e; + }; + + jsPlumb.Connection = function(params) { + var _newConnection = params.newConnection, + _newEndpoint = params.newEndpoint, + jpcl = jsPlumb.CurrentLibrary, + _att = jpcl.getAttribute, + _gel = jpcl.getElementObject, + _dom = jpcl.getDOMElement, + _ju = jsPlumbUtil, + _getOffset = jpcl.getOffset; + + this.connector = null; + this.idPrefix = "_jsplumb_c_"; + this.defaultLabelLocation = 0.5; + this.defaultOverlayKeys = ["Overlays", "ConnectionOverlays"]; + this.parent = params.parent; + // 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. + this.previousConnection = params.previousConnection; + this.source = _dom(params.source); + this.target = _dom(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(); + + OverlayCapableJsPlumbUIComponent.apply(this, arguments); + + this.sourceId = this._jsPlumb.instance.getId(this.source); + this.targetId = this._jsPlumb.instance.getId(this.target); + 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 = []; + + var _jsPlumb = this._jsPlumb.instance; + this._jsPlumb.visible = true; + this._jsPlumb.editable = params.editable === true; + this._jsPlumb.params = { + parent:params.parent, + cssClass:params.cssClass, + container:params.container, + "pointer-events":params["pointer-events"], + editorParams:params.editorParams + }; + this._jsPlumb.lastPaintedAt = null; + this.getDefaultType = function() { + return { + parameters:{}, + scope:null, + detachable:this._jsPlumb.instance.Defaults.ConnectionsDetachable, + rettach:this._jsPlumb.instance.Defaults.ReattachConnections, + paintStyle:this._jsPlumb.instance.Defaults.PaintStyle || jsPlumb.Defaults.PaintStyle, + connector:this._jsPlumb.instance.Defaults.Connector || jsPlumb.Defaults.Connector, + hoverPaintStyle:this._jsPlumb.instance.Defaults.HoverPaintStyle || jsPlumb.Defaults.HoverPaintStyle, + overlays:this._jsPlumb.instance.Defaults.ConnectorOverlays || jsPlumb.Defaults.ConnectorOverlays + }; + }; + +// INITIALISATION CODE + + // wrapped the main function to return null if no input given. this lets us cascade defaults properly. + + var eS = prepareEndpoint(_jsPlumb, _newEndpoint, this, params.sourceEndpoint, 0, params, this.source, this.sourceId, params.paintStyle, params.hoverPaintStyle); + if (eS) _ju.addToList(params.endpointsByElement, this.sourceId, eS); + var eT = prepareEndpoint(_jsPlumb, _newEndpoint, this, params.targetEndpoint, 1, params, this.target, this.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 explicitly told to (or not to) delete endpoints on detach, override endpoint's preferences + if (params.deleteEndpointsOnDetach != null) { + this.endpoints[0]._deleteOnDetach = params.deleteEndpointsOnDetach; + this.endpoints[1]._deleteOnDetach = params.deleteEndpointsOnDetach; + } + else { + // otherwise, unless the endpoints say otherwise, mark them for deletion. + if (!this.endpoints[0]._doNotDeleteOnDetach) this.endpoints[0]._deleteOnDetach = true; + if (!this.endpoints[1]._doNotDeleteOnDetach) this.endpoints[1]._deleteOnDetach = true; + } + + // TODO these could surely be refactored into some method that tries them one at a time until something exists + this.setConnector(this.endpoints[0].connector || + this.endpoints[1].connector || + params.connector || + _jsPlumb.Defaults.Connector || + jsPlumb.Defaults.Connector, true); + + if (params.path) + this.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._jsPlumb.paintStyleInUse = this.getPaintStyle(); + + var _suspendedAt = _jsPlumb.getSuspendedAt(); + _jsPlumb.updateOffset( { elId : this.sourceId, timestamp:_suspendedAt }); + _jsPlumb.updateOffset( { elId : this.targetId, timestamp:_suspendedAt }); + +//* + if(!_jsPlumb.isSuspendDrawing()) { + // 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 + this._jsPlumb.detachable = _jsPlumb.Defaults.ConnectionsDetachable; + if (params.detachable === false) this._jsPlumb.detachable = false; + if(this.endpoints[0].connectionsDetachable === false) this._jsPlumb.detachable = false; + if(this.endpoints[1].connectionsDetachable === false) this._jsPlumb.detachable = false; +// REATTACH + this._jsPlumb.reattach = params.reattach || this.endpoints[0].reattachConnections || this.endpoints[1].reattachConnections || _jsPlumb.Defaults.ReattachConnections; +// COST + DIRECTIONALITY + // if cost not supplied, try to inherit from source endpoint + this._jsPlumb.cost = params.cost || this.endpoints[0].getConnectionCost(); + this._jsPlumb.directed = params.directed; + // inherit directed flag if set no source endpoint + if (params.directed == null) this._jsPlumb.directed = this.endpoints[0].areConnectionsDirected(); +// END COST + DIRECTIONALITY + +// PARAMETERS + // merge all the parameters objects into the connection. parameters set + // on the connection take precedence; then source endpoint params, then + // finally target 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[1].getParameters()); + jsPlumb.extend(_p, this.endpoints[0].getParameters()); + jsPlumb.extend(_p, this.getParameters()); + this.setParameters(_p); +// END PARAMETERS + +// PAINTING + + // the very last thing we do is check to see if a 'type' was supplied in the params + var _type = params.type || this.endpoints[0].connectionType || this.endpoints[1].connectionType; + if (_type) + this.addType(_type, params.data, true); + +// END PAINTING + }; + + jsPlumbUtil.extend(jsPlumb.Connection, OverlayCapableJsPlumbUIComponent, { + applyType : function(t, doNotRepaint) { + if (t.detachable != null) this.setDetachable(t.detachable); + if (t.reattach != null) this.setReattach(t.reattach); + if (t.scope) this.scope = t.scope; + //editable = t.editable; // TODO + this.setConnector(t.connector, doNotRepaint); + }, + getTypeDescriptor : function() { return "connection"; }, + getAttachedElements : function() { + return this.endpoints; + }, + addClass : function(c, informEndpoints) { + if (informEndpoints) { + this.endpoints[0].addClass(c); + this.endpoints[1].addClass(c); + if (this.suspendedEndpoint) this.suspendedEndpoint.addClass(c); + } + if (this.connector) { + this.connector.addClass(c); + } + }, + removeClass : function(c, informEndpoints) { + if (informEndpoints) { + this.endpoints[0].removeClass(c); + this.endpoints[1].removeClass(c); + if (this.suspendedEndpoint) this.suspendedEndpoint.removeClass(c); + } + if (this.connector) { + this.connector.removeClass(c); + } + }, + isVisible : function() { return this._jsPlumb.visible; }, + setVisible : function(v) { + this._jsPlumb.visible = v; + //this[v ? "showOverlays" : "hideOverlays"](); + if (this.connector) + this.connector.setVisible(v); + this.repaint(); + }, + setEditable : function(e) { + if (this.connector && this.connector.isEditable()) + this._jsPlumb.editable = e; + + return this._jsPlumb.editable; + }, + isEditable : function() { return this._jsPlumb.editable; }, + editStarted : function() { + this.setSuspendEvents(true); + this.fire("editStarted", { + path:this.connector.getPath() + }); + this._jsPlumb.instance.setHoverSuspended(true); + }, + editCompleted : function() { + this.fire("editCompleted", { + path:this.connector.getPath() + }); + this.setSuspendEvents(false); + this.setHover(false); + this._jsPlumb.instance.setHoverSuspended(false); + }, + editCanceled : function() { + this.fire("editCanceled", { + path:this.connector.getPath() + }); + this.setHover(false); + this._jsPlumb.instance.setHoverSuspended(false); + }, + cleanup:function() { + //this.endpointsToDeleteOnDetach = null; + this.endpoints = null; + this.source = null; + this.target = null; + if (this.connector != null) { + this.connector.cleanup(); + this.connector.destroy(); + } + this.connector = null; + }, + isDetachable : function() { + return this._jsPlumb.detachable === true; + }, + setDetachable : function(detachable) { + this._jsPlumb.detachable = detachable === true; + }, + isReattach : function() { + return this._jsPlumb.reattach === true; + }, + setReattach : function(reattach) { + this._jsPlumb.reattach = reattach === true; + }, + setHover : function(state) { + if (this.connector && this._jsPlumb && !this._jsPlumb.instance.isConnectionBeingDragged()) { + this.connector.setHover(state); + jsPlumb.CurrentLibrary[state ? "addClass" : "removeClass"](this.source, this._jsPlumb.instance.hoverSourceClass); + jsPlumb.CurrentLibrary[state ? "addClass" : "removeClass"](this.target, this._jsPlumb.instance.hoverTargetClass); + } + }, + getCost : function() { return this._jsPlumb.cost; }, + setCost : function(c) { this._jsPlumb.cost = c; }, + isDirected : function() { return this._jsPlumb.directed === true; }, + // + // changes the parent element of this connection to newParent. not exposed for the public API. + // + // TODO ensure moveParent method still works (the overlay stuff in particular) + moveParent : function(newParent) { + var jpcl = jsPlumb.CurrentLibrary, curParent = jpcl.getParent(this.connector.canvas); + if (this.connector.bgCanvas) { + jpcl.removeElement(this.connector.bgCanvas); + jpcl.appendElement(this.connector.bgCanvas, newParent); + } + jpcl.removeElement(this.connector.canvas); + jpcl.appendElement(this.connector.canvas, newParent); + // this only applies for DOMOverlays + for (var i = 0; i < this._jsPlumb.overlays.length; i++) { + if (this._jsPlumb.overlays[i].isAppendedAtTopLevel) { + jpcl.removeElement(this._jsPlumb.overlays[i].canvas); + jpcl.appendElement(this._jsPlumb.overlays[i].canvas, newParent); + if (this._jsPlumb.overlays[i].reattachListeners) + this._jsPlumb.overlays[i].reattachListeners(this.connector); + } + } + if (this.connector.reattachListeners) // this is for SVG/VML; change an element's parent and you have to reinit its listeners. + this.connector.reattachListeners(); // the Canvas implementation doesn't have to care about this + }, + getConnector : function() { return this.connector; }, + setConnector : function(connectorSpec, doNotRepaint) { + var _ju = jsPlumbUtil; + if (this.connector != null) { + this.connector.cleanup(); + this.connector.destroy(); + } + + var connectorArgs = { + _jsPlumb:this._jsPlumb.instance, + parent:this._jsPlumb.params.parent, + cssClass:this._jsPlumb.params.cssClass, + container:this._jsPlumb.params.container, + "pointer-events":this._jsPlumb.params["pointer-events"] + }, + renderMode = this._jsPlumb.instance.getRenderMode(); + + if (_ju.isString(connectorSpec)) + this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec, connectorArgs); // lets you use a string as shorthand. + else if (_ju.isArray(connectorSpec)) { + if (connectorSpec.length == 1) + this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec[0], connectorArgs); + else + this.connector = makeConnector(this._jsPlumb.instance, renderMode, connectorSpec[0], _ju.merge(connectorSpec[1], connectorArgs)); + } + // binds mouse listeners to the current connector. + this.bindListeners(this.connector, this, function(state) { + this.setHover(state, false); + }.bind(this)); + + this.canvas = this.connector.canvas; + + if (this._jsPlumb.editable && jsPlumb.ConnectorEditors != null && jsPlumb.ConnectorEditors[this.connector.type] && this.connector.isEditable()) { + new jsPlumb.ConnectorEditors[this.connector.type]({ + connector:this.connector, + connection:this, + params:this._jsPlumb.params.editorParams || { } + }); + } + else { + this._jsPlumb.editable = false; + } + + if (!doNotRepaint) this.repaint(); + }, + paint : function(params) { + + if (!this._jsPlumb.instance.isSuspendDrawing() && this._jsPlumb.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 != this._jsPlumb.lastPaintedAt) { + var sourceInfo = this._jsPlumb.instance.updateOffset( { elId : sId, offset : ui, recalc : recalc, timestamp : timestamp }).o, + targetInfo = this._jsPlumb.instance.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(); + this.connector.setEdited(false); + } + + var sAnchorP = sE.anchor.getCurrentLocation({xy:[sourceInfo.left,sourceInfo.top], wh:[sourceInfo.width, sourceInfo.height], element:sE, timestamp:timestamp}), + tAnchorP = tE.anchor.getCurrentLocation({xy:[targetInfo.left,targetInfo.top], wh:[targetInfo.width, targetInfo.height], element:tE, timestamp:timestamp}); + + this.connector.resetBounds(); + + this.connector.compute({ + sourcePos:sAnchorP, + targetPos:tAnchorP, + sourceEndpoint:this.endpoints[sIdx], + targetEndpoint:this.endpoints[tIdx], + lineWidth:this._jsPlumb.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 < this._jsPlumb.overlays.length; i++) { + var o = this._jsPlumb.overlays[i]; + if (o.isVisible()) { + this._jsPlumb.overlayPlacements[i] = o.draw(this.connector, this._jsPlumb.paintStyleInUse); + overlayExtents.minX = Math.min(overlayExtents.minX, this._jsPlumb.overlayPlacements[i].minX); + overlayExtents.maxX = Math.max(overlayExtents.maxX, this._jsPlumb.overlayPlacements[i].maxX); + overlayExtents.minY = Math.min(overlayExtents.minY, this._jsPlumb.overlayPlacements[i].minY); + overlayExtents.maxY = Math.max(overlayExtents.maxY, this._jsPlumb.overlayPlacements[i].maxY); + } + } + + var lineWidth = parseFloat(this._jsPlumb.paintStyleInUse.lineWidth || 1) / 2, + outlineWidth = parseFloat(this._jsPlumb.paintStyleInUse.lineWidth || 0), + extents = { + xmin : Math.min(this.connector.bounds.minX - (lineWidth + outlineWidth), overlayExtents.minX), + ymin : Math.min(this.connector.bounds.minY - (lineWidth + outlineWidth), overlayExtents.minY), + xmax : Math.max(this.connector.bounds.maxX + (lineWidth + outlineWidth), overlayExtents.maxX), + ymax : Math.max(this.connector.bounds.maxY + (lineWidth + outlineWidth), overlayExtents.maxY) + }; + + // paint the connector. + this.connector.paint(this._jsPlumb.paintStyleInUse, null, extents); + // and then the overlays + for ( var j = 0; j < this._jsPlumb.overlays.length; j++) { + var p = this._jsPlumb.overlays[j]; + if (p.isVisible()) { + p.paint(this._jsPlumb.overlayPlacements[j], extents); + } + } + } + this._jsPlumb.lastPaintedAt = timestamp; + } + }, + /* + * Function: repaint + * Repaints the Connection. No parameters exposed to public API. + */ + repaint : function(params) { + params = params || {}; + this.paint({ elId : this.sourceId, recalc : !(params.recalc === false), timestamp:params.timestamp, clearEdits:params.clearEdits }); + } + + }); // END Connection class +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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(a)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 + 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];*/ + r = a[0][0] < b[0][0]; + } + else { + /*if (a[0][0] > b[0][0]) + r= true; + else + r =a[0][1] > b[0][1]; + */ + r = a[0][0] > b[0][0]; + } + 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":function(a, b) { return a[0] > b[0] ? 1 : -1; }, + "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); + }; + var removeEndpointFromAnchorLists = function(endpoint) { + (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); + } + })(anchorLists[endpoint.elementId], endpoint.id); + }; + this.connectionDetached = function(connInfo) { + var connection = connInfo.connection || connInfo, + sourceId = connInfo.sourceId, + targetId = connInfo.targetId, + ep = connection.endpoints, + removeConnection = function(otherIndex, otherEndpoint, otherAnchor, elId, c) { + if (otherAnchor != null && 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 + removeEndpointFromAnchorLists(connection.endpoints[0]); + removeEndpointFromAnchorLists(connection.endpoints[1]); + + self.redraw(connection.sourceId); + self.redraw(connection.targetId); + }; + 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; + }); + removeEndpointFromAnchorLists(endpoint); + }; + 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; }); + jsPlumbUtil.addWithFunction(endpointsToPaint, listToRemoveFrom[i][1].endpoints[oIdx], function(e) { return e.id == listToRemoveFrom[i][1].endpoints[oIdx].id; }); + } + } + } + + for (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; }); + jsPlumbUtil.addWithFunction(endpointsToPaint, listToAddTo[i][1].endpoints[oIdx], function(e) { return e.id == listToAddTo[i][1].endpoints[oIdx].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; + }; + + // + // find the entry in an endpoint's list for this connection and update its target endpoint + // with the current target in the connection. + // + // + this.updateOtherEndpoint = function(elId, oldTargetId, newTargetId, connection) { + var sIndex = jsPlumbUtil.findWithFunction(connectionsByElementId[elId], function(i) { + return i[0].id === connection.id; + }), + tIndex = jsPlumbUtil.findWithFunction(connectionsByElementId[oldTargetId], function(i) { + return i[0].id === connection.id; + }); + + // update or add data for source + if (sIndex != -1) { + connectionsByElementId[elId][sIndex][0] = connection; + connectionsByElementId[elId][sIndex][1] = connection.endpoints[1]; + connectionsByElementId[elId][sIndex][2] = connection.endpoints[1].anchor.constructor == jsPlumb.DynamicAnchor; + } + + // remove entry for previous target (if there) + if (tIndex > -1) { + + connectionsByElementId[oldTargetId].splice(tIndex, 1); + // add entry for new target + jsPlumbUtil.addToList(connectionsByElementId, newTargetId, [connection, connection.endpoints[0], connection.endpoints[0].anchor.constructor == jsPlumb.DynamicAnchor]); + } + }; + + // + // notification that the connection given has changed source from the originalId to the newId. + // This involves: + // 1. removing the connection from the list of connections stored for the originalId + // 2. updating the source information for the target of the connection + // 3. re-registering the connection in connectionsByElementId with the newId + // + this.sourceChanged = function(originalId, newId, connection) { + // remove the entry that points from the old source to the target + jsPlumbUtil.removeWithFunction(connectionsByElementId[originalId], function(info) { + return info[0].id === connection.id; + }); + // find entry for target and update it + var tIdx = jsPlumbUtil.findWithFunction(connectionsByElementId[connection.targetId], function(i) { + return i[0].id === connection.id; + }); + if (tIdx > -1) { + connectionsByElementId[connection.targetId][tIdx][0] = connection; + connectionsByElementId[connection.targetId][tIdx][1] = connection.endpoints[0]; + connectionsByElementId[connection.targetId][tIdx][2] = connection.endpoints[0].anchor.constructor == jsPlumb.DynamicAnchor; + } + // add entry for new source + jsPlumbUtil.addToList(connectionsByElementId, newId, [connection, connection.endpoints[1], connection.endpoints[1].anchor.constructor == jsPlumb.DynamicAnchor]); + }; + + // + // moves the given endpoint from `currentId` to `element`. + // This involves: + // + // 1. changing the key in _amEndpoints under which the endpoint is stored + // 2. changing the source or target values in all of the endpoint's connections + // 3. changing the array in connectionsByElementId in which the endpoint's connections + // are stored (done by either sourceChanged or updateOtherEndpoint) + // + this.rehomeEndpoint = function(ep, currentId, element) { + var eps = _amEndpoints[currentId] || [], + elementId = jsPlumbInstance.getId(element); + + if (elementId !== currentId) { + var idx = jsPlumbUtil.indexOf(eps, ep); + if (idx > -1) { + var _ep = eps.splice(idx, 1)[0]; + self.add(_ep, elementId); + } + } + + for (var i = 0; i < ep.connections.length; i++) { + if (ep.connections[i].sourceId == currentId) { + ep.connections[i].sourceId = ep.elementId; + ep.connections[i].source = ep.element; + self.sourceChanged(currentId, ep.elementId, ep.connections[i]); + } + else if(ep.connections[i].targetId == currentId) { + ep.connections[i].targetId = ep.elementId; + ep.connections[i].target = ep.element; + self.updateOtherEndpoint(ep.connections[i].sourceId, currentId, ep.elementId, ep.connections[i]); + } + } + }; + + this.redraw = function(elementId, ui, timestamp, offsetToUI, clearEdits, doNotRecalcEndpoint) { + + 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 }), + 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 (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 (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 (i = 0; i < ep.length; i++) { + ep[i].paint( { timestamp : timestamp, offset : myOffset, dimensions : myOffset.s, recalc:doNotRecalcEndpoint !== true }); + } + // ... and any other endpoints we came across as a result of the continuous anchors. + for (i = 0; i < endpointsToPaint.length; i++) { + var cd = jsPlumbInstance.getCachedData(endpointsToPaint[i].elementId); + // dont use timestamp for this endpoint, as it is not for the current element and we may + // have needed to recalculate anchor position due to the element for the endpoint moving. + //endpointsToPaint[i].paint( { timestamp : null, offset : cd, dimensions : cd.s }); + + 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 (i = 0; i < endpointConnections.length; i++) { + var otherEndpoint = endpointConnections[i][1]; + if (otherEndpoint.anchor.constructor == jsPlumb.DynamicAnchor) { + otherEndpoint.paint({ elementWithPrecedence:elementId, timestamp:timestamp }); + 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 (i = 0; i < connectionsToPaint.length; i++) { + // if not a connection between the two elements in question dont use the timestamp. + var ts =timestamp;// ((connectionsToPaint[i].sourceId == sourceId && connectionsToPaint[i].targetId == targetId) || + //(connectionsToPaint[i].sourceId == targetId && connectionsToPaint[i].targetId == sourceId)) ? timestamp : null; + connectionsToPaint[i].paint({elId:elementId, timestamp:ts, recalc:false, clearEdits:clearEdits}); + } + } + }; + + var ContinuousAnchor = function(anchorParams) { + jsPlumbUtil.EventGenerator.apply(this); + 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, + cssClass = anchorParams.cssClass || ""; + + for (var i = 0; i < faces.length; i++) { availableFaces[faces[i]] = true; } + + // if the given edge is supported, 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(params) { + return userDefinedContinuousAnchorLocations[params.element.id] || continuousAnchorLocations[params.element.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; + }; + this.getCssClass = function() { return cssClass; }; + this.setCssClass = function(c) { cssClass = c; }; + }; + + // continuous anchors + jsPlumbInstance.continuousAnchorFactory = { + get:function(params) { + var existing = continuousAnchors[params.elementId]; + if (!existing) { + existing = new ContinuousAnchor(params); + continuousAnchors[params.elementId] = existing; + } + return existing; + }, + clear:function(elementId) { + delete continuousAnchors[elementId]; + } + }; + }; + + /** + * 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) { + this.x = params.x || 0; + this.y = params.y || 0; + this.elementId = params.elementId; + this.cssClass = params.cssClass || ""; + this.userDefinedLocation = null; + this.orientation = params.orientation || [ 0, 0 ]; + + jsPlumbUtil.EventGenerator.apply(this); + + var jsPlumbInstance = params.jsPlumbInstance;//, + //lastTimestamp = null;//, lastReturnValue = null; + + this.lastReturnValue = null; + this.offsets = params.offsets || [ 0, 0 ]; + this.timestamp = null; + this.compute = function(params) { + + var xy = params.xy, wh = params.wh, element = params.element, timestamp = params.timestamp; + + if(params.clearUserDefinedLocation) + this.userDefinedLocation = null; + + if (timestamp && timestamp === self.timestamp) + return this.lastReturnValue; + + if (this.userDefinedLocation != null) { + this.lastReturnValue = this.userDefinedLocation; + } + else { + + this.lastReturnValue = [ xy[0] + (this.x * wh[0]) + this.offsets[0], xy[1] + (this.y * wh[1]) + this.offsets[1] ]; + // adjust loc if there is an offsetParent + this.lastReturnValue = jsPlumbInstance.adjustForParentOffsetAndScroll(this.lastReturnValue, element.canvas); + } + + this.timestamp = timestamp; + return this.lastReturnValue; + }; + + this.getCurrentLocation = function(params) { + return (this.lastReturnValue == null || (params.timestamp != null && this.timestamp != params.timestamp)) ? this.compute(params) : this.lastReturnValue; + }; + }; + jsPlumbUtil.extend(jsPlumb.Anchor, jsPlumbUtil.EventGenerator, { + equals : function(anchor) { + if (!anchor) return false; + var ao = anchor.getOrientation(), + 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]; + }, + getUserDefinedLocation : function() { + return this.userDefinedLocation; + }, + setUserDefinedLocation : function(l) { + this.userDefinedLocation = l; + }, + clearUserDefinedLocation : function() { + this.userDefinedLocation = null; + }, + getOrientation : function(_endpoint) { return this.orientation; }, + getCssClass : function() { return this.cssClass; } + }); + + /** + * 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; + + // clear from parent. we want floating anchor orientation to always be computed. + this.orientation = 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, endpoint) { + orientation = anchor.getOrientation(endpoint); + }; + + /** + * 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(params) { return _lastResult == null ? this.compute(params) : _lastResult; }; + }; + jsPlumbUtil.extend(jsPlumb.FloatingAnchor, jsPlumb.Anchor); + + var _convertAnchor = function(anchor, jsPlumbInstance, elementId) { + return anchor.constructor == jsPlumb.Anchor ? anchor: jsPlumbInstance.makeAnchor(anchor, elementId, jsPlumbInstance); + }; + + /* + * 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(params) { + jsPlumb.Anchor.apply(this, arguments); + + this.isSelective = true; + this.isDynamic = true; + this.anchors = []; + this.elementId = params.elementId; + this.jsPlumbInstance = params.jsPlumbInstance; + + for (var i = 0; i < params.anchors.length; i++) + this.anchors[i] = _convertAnchor(params.anchors[i], this.jsPlumbInstance, this.elementId); + this.addAnchor = function(anchor) { this.anchors.push(_convertAnchor(anchor, this.jsPlumbInstance, this.elementId)); }; + this.getAnchors = function() { return this.anchors; }; + this.locked = false; + var _curAnchor = this.anchors.length > 0 ? this.anchors[0] : null, + _curIndex = this.anchors.length > 0 ? 0 : -1, + _lastAnchor = _curAnchor, + 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 = params.selector || 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; + + this.timestamp = timestamp; + + 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 (this.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, this.anchors); + this.x = _curAnchor.x; + this.y = _curAnchor.y; + + if (_curAnchor != _lastAnchor) + this.fire("anchorChanged", _curAnchor); + + _lastAnchor = _curAnchor; + + return _curAnchor.compute(params); + }; + + this.getCurrentLocation = function(params) { + return this.getUserDefinedLocation() || (_curAnchor != null ? _curAnchor.getCurrentLocation(params) : null); + }; + + this.getOrientation = function(_endpoint) { return _curAnchor != null ? _curAnchor.getOrientation(_endpoint) : [ 0, 0 ]; }; + this.over = function(anchor, endpoint) { if (_curAnchor != null) _curAnchor.over(anchor, endpoint); }; + this.out = function() { if (_curAnchor != null) _curAnchor.out(); }; + + this.getCssClass = function() { return (_curAnchor && _curAnchor.getCssClass()) || ""; }; + }; + jsPlumbUtil.extend(jsPlumb.DynamicAnchor, jsPlumb.Anchor); + +// -------- 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.2: 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 j = 0; j < p.length; j++) { + p[j][4] = p[j][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; + }; +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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 = jsPlumbUtil.extend(jsPlumb.jsPlumbUIComponent, function(params) { + // 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.2, 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 _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 = jsPlumbGeom.gradient({x:x1, y:y1}, {x:x2, y:y2}); + m2 = -1 / m; + }; + + this.type = "Straight"; + + this.getLength = function() { return length; }; + this.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 jsPlumbGeom.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 = this.pointOnPath(location, absolute), + farAwayPoint = distance <= 0 ? {x:x1, y:y1} : {x:x2, y:y2 }; + + /* + location == 1 ? { + x:x1 + ((x2 - x1) * 10), + y:y1 + ((y1 - y2) * 10) + } : + */ + + if (distance <= 0 && Math.abs(distance) > 1) distance *= -1; + + return jsPlumbGeom.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 = jsPlumbGeom.lineLength([ x, y ], [ _x1, _y1 ]), + fractionInSegment = jsPlumbGeom.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 _super = jsPlumb.Segments.AbstractSegment.apply(this, arguments), + _calcAngle = function(_x, _y) { + return jsPlumbGeom.theta([params.cx, params.cy], [_x, _y]); + }, + _calcAngleForLocation = function(segment, location) { + if (segment.anticlockwise) { + var sa = segment.startAngle < segment.endAngle ? segment.startAngle + TWO_PI : segment.startAngle, + s = Math.abs(sa - segment.endAngle); + return sa - (s * location); + } + else { + var ea = segment.endAngle < segment.startAngle ? segment.endAngle + TWO_PI : segment.endAngle, + ss = Math.abs (ea - segment.startAngle); + + return segment.startAngle + (ss * 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 + (this.radius * Math.cos(params.startAngle)); + this.y1 = params.cy + (this.radius * Math.sin(params.startAngle)); + this.x2 = params.cx + (this.radius * Math.cos(params.endAngle)); + this.y2 = params.cy + (this.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 = jsPlumbGeom.quadrant([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 = this.endAngle < this.startAngle ? this.endAngle + TWO_PI : this.endAngle; + this.sweep = Math.abs (ea - this.startAngle); + if (this.anticlockwise) this.sweep = TWO_PI - this.sweep; + var circumference = 2 * Math.PI * this.radius, + frac = this.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:this.x1, y:this.y1, theta:this.startAngle }; + } + else if (location == 1) { + return { x:this.x2, y:this.y2, theta:this.endAngle }; + } + + if (absolute) { + location = location / length; + } + + var angle = _calcAngleForLocation(this, 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 = this.pointOnPath(location, absolute); + var m = jsPlumbGeom.normal( [ params.cx, params.cy ], [p.x, p.y ] ); + if (!this.anticlockwise && (m == Infinity || m == -Infinity)) m *= -1; + return m; + }; + + this.pointAlongPathFrom = function(location, distance, absolute) { + var p = this.pointOnPath(location, absolute), + arcSpan = distance / circumference * 2 * Math.PI, + dir = this.anticlockwise ? -1 : 1, + startAngle = p.theta + (dir * arcSpan), + startX = params.cx + (this.radius * Math.cos(startAngle)), + startY = params.cy + (this.radius * Math.sin(startAngle)); + + return {x:startX, y:startY}; + }; + }, + + Bezier : function(params) { + var _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() { + this.resetBounds = function() { + this.bounds = { minX:Infinity, minY:Infinity, maxX:-Infinity, maxY:-Infinity }; + }; + this.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(conn, type, params) { + if (params.x1 == params.x2 && params.y1 == params.y2) return; + var s = new jsPlumb.Segments[type](params); + segments.push(s); + totalLength += s.getLength(); + conn.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) { + this.lineWidth = params.lineWidth; + var segment = jsPlumbGeom.quadrant(params.sourcePos, params.targetPos), + swapX = params.targetPos[0] < params.sourcePos[0], + swapY = params.targetPos[1] < params.sourcePos[1], + lw = params.lineWidth || 1, + so = params.sourceEndpoint.anchor.getOrientation(params.sourceEndpoint), + to = params.targetEndpoint.anchor.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; }; + + this.updateBounds = function(segment) { + var segBounds = segment.getBounds(); + this.bounds.minX = Math.min(this.bounds.minX, segBounds.minX); + this.bounds.maxX = Math.max(this.bounds.maxX, segBounds.maxX); + this.bounds.minY = Math.min(this.bounds.minY, segBounds.minY); + this.bounds.maxY = Math.max(this.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) { + var seg = _findSegmentForLocation(location, absolute); + return seg.segment && seg.segment.pointOnPath(seg.proportion, absolute) || [0,0]; + }; + + this.gradientAtPoint = function(location) { + var seg = _findSegmentForLocation(location, absolute); + return seg.segment && seg.segment.gradientAtPoint(seg.proportion, absolute) || 0; + }; + + this.pointAlongPathFrom = function(location, distance, absolute) { + var seg = _findSegmentForLocation(location, absolute); + // TODO what happens if this crosses to the next segment? + return seg.segment && seg.segment.pointAlongPathFrom(seg.proportion, distance, false) || [0,0]; + }; + + this.compute = function(params) { + if (!edited) + paintInfo = _prepareCompute.call(this, params); + + _clearSegments(); + this._compute(paintInfo, params); + this.x = paintInfo.points[0]; + this.y = paintInfo.points[1]; + this.w = paintInfo.points[2]; + this.h = paintInfo.points[3]; + this.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) + }; + }; + jsPlumbUtil.extend(jsPlumb.Connectors.AbstractConnector, AbstractComponent); + + /** + * Class: Connectors.Straight + * The Straight connector draws a simple straight line between the two anchor points. It does not have any constructor parameters. + */ + var Straight = jsPlumb.Connectors.Straight = function() { + this.type = "Straight"; + var _super = jsPlumb.Connectors.AbstractConnector.apply(this, arguments); + + this._compute = function(paintInfo, _) { + _super.addSegment(this, "Straight", {x1:paintInfo.sx, y1:paintInfo.sy, x2:paintInfo.startStubX, y2:paintInfo.startStubY}); + _super.addSegment(this, "Straight", {x1:paintInfo.startStubX, y1:paintInfo.startStubY, x2:paintInfo.endStubX, y2:paintInfo.endStubY}); + _super.addSegment(this, "Straight", {x1:paintInfo.endStubX, y1:paintInfo.endStubY, x2:paintInfo.tx, y2:paintInfo.ty}); + }; + }; + jsPlumbUtil.extend(jsPlumb.Connectors.Straight, jsPlumb.Connectors.AbstractConnector); + jsPlumb.registerConnectorType(Straight, "Straight"); + + /** + * 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. + * + */ + var Bezier = function(params) { + params = params || {}; + + var _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) { + // 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 = sourceEndpoint.anchor.getOrientation(sourceEndpoint), + too = targetEndpoint.anchor.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 = this._findControlPoint([_sx, _sy], sp, tp, p.sourceEndpoint, p.targetEndpoint), + _CP2 = this._findControlPoint([_tx, _ty], tp, sp, p.targetEndpoint, p.sourceEndpoint); + + _super.addSegment(this, "Bezier", { + x1:_sx, y1:_sy, x2:_tx, y2:_ty, + cp1x:_CP[0], cp1y:_CP[1], cp2x:_CP2[0], cp2y:_CP2[1] + }); + }; + }; + jsPlumbUtil.extend(Bezier, jsPlumb.Connectors.AbstractConnector); + jsPlumb.registerConnectorType(Bezier, "Bezier"); + + // ********************************* END OF CONNECTOR TYPES ******************************************************************* + + // ********************************* ENDPOINT TYPES ******************************************************************* + + jsPlumb.Endpoints.AbstractEndpoint = function(params) { + AbstractComponent.apply(this, arguments); + var compute = this.compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { + var out = this._compute.apply(this, arguments); + this.x = out[0]; + this.y = out[1]; + this.w = out[2]; + this.h = out[3]; + this.bounds.minX = this.x; + this.bounds.minY = this.y; + this.bounds.maxX = this.x + this.w; + this.bounds.maxY = this.y + this.h; + return out; + }; + return { + compute:compute, + cssClass:params.cssClass + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.AbstractEndpoint, AbstractComponent); + + /** + * 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 _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) { + this.radius = endpointStyle.radius || this.radius; + var x = anchorPoint[0] - this.radius, + y = anchorPoint[1] - this.radius, + w = this.radius * 2, + h = this.radius * 2; + + if (endpointStyle.strokeStyle) { + var lw = endpointStyle.lineWidth || 1; + x -= lw; + y -= lw; + w += (lw * 2); + h += (lw * 2); + } + return [ x, y, w, h, this.radius ]; + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.Dot, jsPlumb.Endpoints.AbstractEndpoint); + + /** + * 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 _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 || this.width, + height = endpointStyle.height || this.height, + x = anchorPoint[0] - (width/2), + y = anchorPoint[1] - (height/2); + + return [ x, y, width, height]; + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.Rectangle, jsPlumb.Endpoints.AbstractEndpoint); + + + var DOMElementEndpoint = function(params) { + jsPlumb.DOMElementComponent.apply(this, arguments); + this._jsPlumb.displayElements = [ ]; + }; + jsPlumbUtil.extend(DOMElementEndpoint, jsPlumb.DOMElementComponent, { + // jsPlumb.Endpoints.AbstractEndpoint + getDisplayElements : function() { + return this._jsPlumb.displayElements; + }, + appendDisplayElement : function(el) { + this._jsPlumb.displayElements.push(el); + } + }); + + /** + * Class: Endpoints.Image + * Draws an image as the Endpoint. + */ + /** + * Function: Constructor + * + * Parameters: + * + * src - location of the image to use. + + TODO: multiple references to self. not sure quite how to get rid of them entirely. perhaps self = null in the cleanup + function will suffice + + TODO this class still leaks memory. + + */ + jsPlumb.Endpoints.Image = function(params) { + + this.type = "Image"; + DOMElementEndpoint.apply(this, arguments); + jsPlumb.Endpoints.AbstractEndpoint.apply(this, arguments); + + var _onload = params.onload, + src = params.src || params.url, + parent = params.parent, + clazz = params.cssClass ? " " + params.cssClass : ""; + + this._jsPlumb.img = new Image(); + this._jsPlumb.ready = false; + this._jsPlumb.initialized = false; + this._jsPlumb.deleted = false; + this._jsPlumb.widthToUse = params.width; + this._jsPlumb.heightToUse = params.height; + this._jsPlumb.endpoint = params.endpoint; + + this._jsPlumb.img.onload = function() { + // check we weren't actually discarded before use (in fact mostly happens in tests) + if (this._jsPlumb != null) { + this._jsPlumb.ready = true; + this._jsPlumb.widthToUse = this._jsPlumb.widthToUse || this._jsPlumb.img.width; + this._jsPlumb.heightToUse = this._jsPlumb.heightToUse || this._jsPlumb.img.height; + if (_onload) { + _onload(this); + } + } + }.bind(this); + + /* + 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. + */ + this._jsPlumb.endpoint.setImage = function(_img, onload) { + var s = _img.constructor == String ? _img : _img.src; + _onload = onload; + this._jsPlumb.img.src = s; + + if (this.canvas != null) + this.canvas.setAttribute("src", this._jsPlumb.img.src); + }.bind(this); + + this._jsPlumb.endpoint.setImage(src, _onload); + /* + var s = src.constructor == String ? src : src.src; + //_onload = onload; + this._jsPlumb.img.src = src; + + if (this.canvas != null) + this.canvas.setAttribute("src", this._jsPlumb.img.src); + // }.bind(this); + + //this._jsPlumb.endpoint.setImage(src, _onload);*/ + + this._compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { + this.anchorPoint = anchorPoint; + if (this._jsPlumb.ready) return [anchorPoint[0] - this._jsPlumb.widthToUse / 2, anchorPoint[1] - this._jsPlumb.heightToUse / 2, + this._jsPlumb.widthToUse, this._jsPlumb.heightToUse]; + else return [0,0,0,0]; + }; + + this.canvas = document.createElement("img"); + this.canvas.style.margin = 0; + this.canvas.style.padding = 0; + this.canvas.style.outline = 0; + this.canvas.style.position = "absolute"; + this.canvas.className = this._jsPlumb.instance.endpointClass + clazz; + if (this._jsPlumb.widthToUse) this.canvas.setAttribute("width", this._jsPlumb.widthToUse); + if (this._jsPlumb.heightToUse) this.canvas.setAttribute("height", this._jsPlumb.heightToUse); + this._jsPlumb.instance.appendElement(this.canvas, parent); + this.attachListeners(this.canvas, this); + + this.actuallyPaint = function(d, style, anchor) { + if (!this._jsPlumb.deleted) { + if (!this._jsPlumb.initialized) { + this.canvas.setAttribute("src", this._jsPlumb.img.src); + this.appendDisplayElement(this.canvas); + this._jsPlumb.initialized = true; + } + var x = this.anchorPoint[0] - (this._jsPlumb.widthToUse / 2), + y = this.anchorPoint[1] - (this._jsPlumb.heightToUse / 2); + jsPlumbUtil.sizeElement(this.canvas, x, y, this._jsPlumb.widthToUse, this._jsPlumb.heightToUse); + } + }; + + this.paint = function(style, anchor) { + if (this._jsPlumb != null) { // may have been deleted + if (this._jsPlumb.ready) { + this.actuallyPaint(style, anchor); + } + else { + window.setTimeout(function() { + this.paint(style, anchor); + }.bind(this), 200); + } + } + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.Image, [ DOMElementEndpoint, jsPlumb.Endpoints.AbstractEndpoint ], { + cleanup : function() { + this._jsPlumb.deleted = true; + jsPlumbUtil.removeElement(this.canvas); + this.canvas = null; + } + }); + + /* + * 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 _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]; + }; + + this.canvas = document.createElement("div"); + this.canvas.style.display = "block"; + this.canvas.style.width = "1px"; + this.canvas.style.height = "1px"; + this.canvas.style.background = "transparent"; + this.canvas.style.position = "absolute"; + this.canvas.className = this._jsPlumb.endpointClass; + jsPlumb.appendElement(this.canvas, params.parent); + + this.paint = function(style, anchor) { + jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.Blank, [jsPlumb.Endpoints.AbstractEndpoint, DOMElementEndpoint], { + cleanup:function() { + if (this.canvas) { + this.canvas.parentNode.removeChild(this.canvas); + } + } + }); + + /* + * 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 _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) { + this.visible = true; + 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.; + }; + AbstractOverlay.prototype = { + cleanup:function() { + this.component = null; + this.canvas = null; + this.endpointLoc = null; + }, + setVisible : function(val) { + this.visible = val; + // TODO this is only actually necessary for canvas. so, the Canvas overlay should + // override setVisible and call this. + //this.component.repaint(); + }, + isVisible : function() { return this.visible; }, + hide : function() { this.setVisible(false); }, + show : function() { this.setVisible(true); }, + + incrementLocation : function(amount) { + this.loc += amount; + this.component.repaint(); + }, + setLocation : function(l) { + this.loc = l; + this.component.repaint(); + }, + getLocation : function() { + return this.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 _ju = jsPlumbUtil, _jg = jsPlumbGeom; + + 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 (_ju.isString(this.loc) || this.loc > 1 || this.loc < 0) { + var l = parseInt(this.loc, 10), + fromLoc = this.loc < 0 ? 1 : 0; + hxy = component.pointAlongPathFrom(fromLoc, l, false); + mid = component.pointAlongPathFrom(fromLoc, l - (direction * this.length / 2), false); + txy = _jg.pointOnLine(hxy, mid, this.length); + } + else if (this.loc == 1) { + hxy = component.pointOnPath(this.loc); + mid = component.pointAlongPathFrom(this.loc, -(this.length)); + txy = _jg.pointOnLine(hxy, mid, this.length); + + if (direction == -1) { + var _ = txy; + txy = hxy; + hxy = _; + } + } + else if (this.loc === 0) { + txy = component.pointOnPath(this.loc); + mid = component.pointAlongPathFrom(this.loc, this.length); + hxy = _jg.pointOnLine(txy, mid, this.length); + if (direction == -1) { + var __ = txy; + txy = hxy; + hxy = __; + } + } + else { + hxy = component.pointAlongPathFrom(this.loc, direction * this.length / 2); + mid = component.pointOnPath(this.loc); + txy = _jg.pointOnLine(hxy, mid, this.length); + } + + tail = _jg.perpendicularLineTo(hxy, txy, this.width); + cxy = _jg.pointOnLine(hxy, txy, foldback * this.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}; + }; + }; + jsPlumbUtil.extend(jsPlumb.Overlays.Arrow, AbstractOverlay); + + /* + * 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"; + }; + jsPlumbUtil.extend(jsPlumb.Overlays.PlainArrow, jsPlumb.Overlays.Arrow); + + /* + * 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"; + }; + jsPlumbUtil.extend(jsPlumb.Overlays.Diamond, jsPlumb.Overlays.Arrow); + + var _getDimensions = function(component) { + if (component._jsPlumb.cachedDimensions == null) + component._jsPlumb.cachedDimensions = component.getDimensions(); + return component._jsPlumb.cachedDimensions; + }; + + // 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 jpcl = jsPlumb.CurrentLibrary; + this.id = params.id; + this._jsPlumb.div = null; + this._jsPlumb.initialised = false; + this._jsPlumb.component = params.component; + this._jsPlumb.cachedDimensions = null; + this._jsPlumb.create = params.create; + + this.getElement = function() { + if (this._jsPlumb.div == null) { + var div = this._jsPlumb.div = jpcl.getDOMElement(this._jsPlumb.create(this._jsPlumb.component)); + div.style.position = "absolute"; + var clazz = params._jsPlumb.overlayClass + " " + + (this.cssClass ? this.cssClass : + params.cssClass ? params.cssClass : ""); + div.className = clazz; + this._jsPlumb.instance.appendElement(div, this._jsPlumb.component.parent); + this._jsPlumb.instance.getId(div); + this.attachListeners(div, this); + this.canvas = div; + } + return this._jsPlumb.div; + }; + + /* + this.paint = function(p, containerExtents) { + if (!this._jsPlumb.initialised) { + this.getElement(); + p.component.appendDisplayElement(this._jsPlumb.div); + this.attachListeners(this._jsPlumb.div, p.component); + this._jsPlumb.initialised = true; + } + this._jsPlumb.div.style.left = (p.component.x + p.d.minx) + "px"; + this._jsPlumb.div.style.top = (p.component.y + p.d.miny) + "px"; + };*/ + + this.draw = function(component, currentConnectionPaintStyle) { + var td = _getDimensions(this); + if (td != null && td.length == 2) { + var cxy = {x:0,y:0}; + if (component.pointOnPath) { + var loc = this.loc, absolute = false; + if (jsPlumbUtil.isString(this.loc) || this.loc < 0 || this.loc > 1) { + loc = parseInt(this.loc, 10); + absolute = true; + } + cxy = component.pointOnPath(loc, absolute); // a connection + } + else { + var locToUse = this.loc.constructor == Array ? this.loc : this.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}; + }; + }; + jsPlumbUtil.extend(AbstractDOMOverlay, [jsPlumb.DOMElementComponent, AbstractOverlay], { + getDimensions : function() { + return jsPlumb.CurrentLibrary.getSize(jsPlumb.CurrentLibrary.getElementObject(this.getElement())); + }, + setVisible : function(state) { + this._jsPlumb.div.style.display = state ? "block" : "none"; + }, + /* + * 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. + */ + clearCachedDimensions : function() { + this._jsPlumb.cachedDimensions = null; + }, + cleanup : function() { + if (this._jsPlumb.div != null) + jsPlumb.CurrentLibrary.removeElement(this._jsPlumb.div); + }, + computeMaxSize : function() { + var td = _getDimensions(this); + return Math.max(td[0], td[1]); + }, + reattachListeners : function(connector) { + if (this._jsPlumb.div) { + this.reattachListenersForElement(this._jsPlumb.div, this, connector); + } + }, + paint : function(p, containerExtents) { + if (!this._jsPlumb.initialised) { + this.getElement(); + p.component.appendDisplayElement(this._jsPlumb.div); + this.attachListeners(this._jsPlumb.div, p.component); + this._jsPlumb.initialised = true; + } + this._jsPlumb.div.style.left = (p.component.x + p.d.minx) + "px"; + this._jsPlumb.div.style.top = (p.component.y + p.d.miny) + "px"; + } + }); + + /* + * 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); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.Custom, AbstractDOMOverlay); + + 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 = jsPlumbGeom.pointOnLine(head, mid, self.length), + tailLine = jsPlumbGeom.perpendicularLineTo(head, tail, 40), + headLine = jsPlumbGeom.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 + + */ + /* + * 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) { + this.labelStyle = params.labelStyle; + + var labelWidth = null, labelHeight = null, labelText = null, labelPadding = null; + this.cssClass = this.labelStyle != null ? this.labelStyle.cssClass : null; + var p = jsPlumb.extend({ + create : function() { + return document.createElement("div"); + }}, params); + jsPlumb.Overlays.Custom.call(this, p); + this.type = "Label"; + this.label = params.label || ""; + this.labelText = null; + if (this.labelStyle) { + var el = this.getElement(); + this.labelStyle.font = this.labelStyle.font || "12px sans-serif"; + el.style.font = this.labelStyle.font; + el.style.color = this.labelStyle.color || "black"; + if (this.labelStyle.fillStyle) el.style.background = this.labelStyle.fillStyle; + if (this.labelStyle.borderWidth > 0) { + var dStyle = this.labelStyle.borderStyle ? this.labelStyle.borderStyle : "black"; + el.style.border = this.labelStyle.borderWidth + "px solid " + dStyle; + } + if (this.labelStyle.padding) el.style.padding = this.labelStyle.padding; + } + + }; + jsPlumbUtil.extend(jsPlumb.Overlays.Label, jsPlumb.Overlays.Custom, { + cleanup:function() { + this.div = null; + this.label = null; + this.labelText = null; + this.cssClass = null; + this.labelStyle = null; + }, + getLabel : function() { + return this.label; + }, + /* + * 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. + */ + setLabel : function(l) { + this.label = l; + this.labelText = null; + this.clearCachedDimensions(); + this.update(); + this.component.repaint(); + }, + getDimensions : function() { + this.update(); + return AbstractDOMOverlay.prototype.getDimensions.apply(this, arguments); + }, + update : function() { + if (typeof this.label == "function") { + var lt = this.label(this); + this.getElement().innerHTML = lt.replace(/\r\n/g, "<br/>"); + } + else { + if (this.labelText == null) { + this.labelText = this.label; + this.getElement().innerHTML = this.labelText.replace(/\r\n/g, "<br/>"); + } + } + } + }); + + // ********************************* END OF OVERLAY DEFINITIONS *********************************************************************** + +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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(a)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). + * alwaysRespectStubs - defaults to false. whether or not the connectors should always draw the stub, or, if the two elements + are in close proximity to each other (closer than the sum of the two stubs), to adjust the stubs. + */ + var Flowchart = function(params) { + this.type = "Flowchart"; + params = params || {}; + params.stub = params.stub == null ? 30 : params.stub; + var self = this, + _super = jsPlumb.Connectors.AbstractConnector.apply(this, arguments), + midpoint = params.midpoint == null ? 0.5 : params.midpoint, + points = [], segments = [], + grid = params.grid, + alwaysRespectStubs = params.alwaysRespectStubs, + userSuppliedSegments = null, + lastx = null, lasty = null, lastOrientation, + cornerRadius = params.cornerRadius != null ? params.cornerRadius : 0, + sgn = function(n) { return n < 0 ? -1 : n === 0 ? 0 : 1; }, + /** + * helper method to add a segment. + */ + addSegment = function(segments, x, y, paintInfo) { + if (lastx == x && lasty == y) return; + var lx = lastx == null ? paintInfo.sx : lastx, + ly = lasty == null ? paintInfo.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(conn, 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(conn, "Straight", { + x1:current[0], y1:current[1], x2:current[2], y2:current[3] + }); + + _super.addSegment(conn, "Arc", { + r:radiusToUse, + x1:current[2], + y1:current[3], + x2:next[0], + y2:next[1], + cx:cx, + cy:cy, + ac:ac + }); + } + else { + // dx + dy are used to adjust for line width. + var dx = (current[2] == current[0]) ? 0 : (current[2] > current[0]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2), + dy = (current[3] == current[1]) ? 0 : (current[3] > current[1]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2); + _super.addSegment(conn, "Straight", { + x1:current[0]- dx, y1:current[1]-dy, x2:current[2] + dx, y2:current[3] + dy + }); + } + current = next; + } + // last segment + _super.addSegment(conn, "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(this, 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); + + var findClearedLine = function(start, mult, anchorPos, dimension) { + return start + (mult * (( 1 - anchorPos) * dimension) + _super.maxStub); + }, + orientations = { x:[ 0, 1 ], y:[ 1, 0 ] }, + commonStubCalculator = function(axis) { + return [ paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY ]; + }, + stubCalculators = { + perpendicular:commonStubCalculator, + orthogonal:commonStubCalculator, + opposite:function(axis) { + var pi = paintInfo, + idx = axis == "x" ? 0 : 1, + areInProximity = { + "x":function() { + return ( (pi.so[idx] == 1 && ( + ( (pi.startStubX > pi.endStubX) && (pi.tx > pi.startStubX) ) || + ( (pi.sx > pi.endStubX) && (pi.tx > pi.sx))))) || + + ( (pi.so[idx] == -1 && ( + ( (pi.startStubX < pi.endStubX) && (pi.tx < pi.startStubX) ) || + ( (pi.sx < pi.endStubX) && (pi.tx < pi.sx))))); + }, + "y":function() { + return ( (pi.so[idx] == 1 && ( + ( (pi.startStubY > pi.endStubY) && (pi.ty > pi.startStubY) ) || + ( (pi.sy > pi.endStubY) && (pi.ty > pi.sy))))) || + + ( (pi.so[idx] == -1 && ( + ( (pi.startStubY < pi.endStubY) && (pi.ty < pi.startStubY) ) || + ( (pi.sy < pi.endStubY) && (pi.ty < pi.sy))))); + } + }; + + if (!alwaysRespectStubs && areInProximity[axis]()) { + return { + "x":[(paintInfo.sx + paintInfo.tx) / 2, paintInfo.startStubY, (paintInfo.sx + paintInfo.tx) / 2, paintInfo.endStubY], + "y":[paintInfo.startStubX, (paintInfo.sy + paintInfo.ty) / 2, paintInfo.endStubX, (paintInfo.sy + paintInfo.ty) / 2] + }[axis]; + } + else { + return [ paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY ]; + } + } + }, + lineCalculators = { + perpendicular : function(axis, ss, oss, es, oes) { + var pi = paintInfo, + 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:[ [ pi.startStubX, pi.endStubX ] , null, [ pi.endStubX, pi.startStubX ] ], + y:[ [ pi.startStubY, pi.endStubY ] , null, [ pi.endStubY, pi.startStubY ] ] + }, + midLines = { + x:[ [ midx, pi.startStubY ], [ midx, pi.endStubY ] ], + y:[ [ pi.startStubX, midy ], [ pi.endStubX, midy ] ] + }, + linesToEnd = { + x:[ [ pi.endStubX, pi.startStubY ] ], + y:[ [ pi.startStubX, pi.endStubY ] ] + }, + startToEnd = { + x:[ [ pi.startStubX, pi.endStubY ], [ pi.endStubX, pi.endStubY ] ], + y:[ [ pi.endStubX, pi.startStubY ], [ pi.endStubX, pi.endStubY ] ] + }, + startToMidToEnd = { + x:[ [ pi.startStubX, midy ], [ pi.endStubX, midy ], [ pi.endStubX, pi.endStubY ] ], + y:[ [ midx, pi.startStubY ], [ midx, pi.endStubY ], [ pi.endStubX, pi.endStubY ] ] + }, + otherStubs = { + x:[ pi.startStubY, pi.endStubY ], + y:[ pi.startStubX, pi.endStubX ] + }, + soIdx = orientations[axis][0], toIdx = orientations[axis][1], + _so = pi.so[soIdx] + 1, + _to = pi.to[toIdx] + 1, + otherFlipped = (pi.to[toIdx] == -1 && (otherStubs[axis][1] < otherStubs[axis][0])) || (pi.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 (pi.segment == segmentIndexes[3] || (pi.segment == segmentIndexes[2] && otherFlipped)) { + return midLines[axis]; + } + else if (pi.segment == segmentIndexes[2] && stub2 < stub1) { + return linesToEnd[axis]; + } + else if ((pi.segment == segmentIndexes[2] && stub2 >= stub1) || (pi.segment == segmentIndexes[1] && !otherFlipped)) { + return startToMidToEnd[axis]; + } + else if (pi.segment == segmentIndexes[0] || (pi.segment == segmentIndexes[1] && otherFlipped)) { + return startToEnd[axis]; + } + }, + orthogonal : function(axis, startStub, otherStartStub, endStub, otherEndStub) { + var pi = paintInfo, + extent = { + "x":pi.so[0] == -1 ? Math.min(startStub, endStub) : Math.max(startStub, endStub), + "y":pi.so[1] == -1 ? Math.min(startStub, endStub) : Math.max(startStub, endStub) + }[axis]; + + return { + "x":[ [ extent, otherStartStub ],[ extent, otherEndStub ], [ endStub, otherEndStub ] ], + "y":[ [ otherStartStub, extent ], [ otherEndStub, extent ], [ otherEndStub, endStub ] ] + }[axis]; + }, + opposite : function(axis, ss, oss, es, oes) { + var pi = paintInfo, + otherAxis = {"x":"y","y":"x"}[axis], + dim = {"x":"height","y":"width"}[axis], + comparator = pi["is" + axis.toUpperCase() + "GreaterThanStubTimes2"]; + + if (params.sourceEndpoint.elementId == params.targetEndpoint.elementId) { + var _val = oss + ((1 - params.sourceEndpoint.anchor[otherAxis]) * params.sourceInfo[dim]) + _super.maxStub; + return { + "x":[ [ ss, _val ], [ es, _val ] ], + "y":[ [ _val, ss ], [ _val, es ] ] + }[axis]; + + } + else if (!comparator || (pi.so[idx] == 1 && ss > es) || (pi.so[idx] == -1 && ss < es)) { + return { + "x":[[ ss, midy ], [ es, midy ]], + "y":[[ midx, ss ], [ midx, es ]] + }[axis]; + } + else if ((pi.so[idx] == 1 && ss < es) || (pi.so[idx] == -1 && ss > es)) { + return { + "x":[[ midx, pi.sy ], [ midx, pi.ty ]], + "y":[[ pi.sx, midy ], [ pi.tx, midy ]] + }[axis]; + } + } + }; + + var stubs = stubCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis), + idx = paintInfo.sourceAxis == "x" ? 0 : 1, + oidx = paintInfo.sourceAxis == "x" ? 1 : 0, + ss = stubs[idx], + oss = stubs[oidx], + es = stubs[idx + 2], + oes = stubs[oidx + 2]; + + // add the start stub segment. + addSegment(segments, stubs[0], stubs[1], paintInfo); + + // compute the rest of the line + var p = lineCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis, ss, oss, es, oes); + if (p) { + for (var i = 0; i < p.length; i++) { + addSegment(segments, p[i][0], p[i][1], paintInfo); + } + } + + // line to end stub + addSegment(segments, stubs[2], stubs[3], paintInfo); + + // end stub to end + addSegment(segments, paintInfo.tx, paintInfo.ty, paintInfo); + + writeSegments(this, 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]); + } + }; + }; + + jsPlumbUtil.extend(Flowchart, jsPlumb.Connectors.AbstractConnector); + jsPlumb.registerConnectorType(Flowchart, "Flowchart"); +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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(a)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 = [], xInt, yInt; + + // try top face + // the equation of the top face is y = (0 * x) + b; y = b. + 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 + yInt = (this.m * (x + w)) + this.b; + if (yInt >= y && yInt <= (y + h)) results.push([ (yInt - this.b) / this.m, yInt ]); + + // bottom face + 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 + 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. + */ + var 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(this, "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(this, "Arc", { + loopback:true, + 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 + }); + } + }; + }; + jsPlumb.registerConnectorType(StateMachine, "StateMachine"); +})(); + +/* + // 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]); +// } +// } + // } + // } + //} + */ + +;(function() { + + var 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) { + // 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 = sourceEndpoint.anchor.getOrientation(sourceEndpoint), + too = targetEndpoint.anchor.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), + _CP2 = self._findControlPoint([_tx, _ty], tp, sp, p.targetEndpoint, p.sourceEndpoint); + + _super.addSegment(this, "Bezier", { + x1:_sx, y1:_sy, x2:_tx, y2:_ty, + cp1x:_CP[0], cp1y:_CP[1], cp2x:_CP2[0], cp2y:_CP2[1] + }); + }; + }; + + jsPlumb.registerConnectorType(Bezier, "Bezier"); + +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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.2. + * 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() { + + +// ********************************* 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 = window.CanvasMouseAdapter = function() { + var self = this; + this.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; + }; + }; + jsPlumbUtil.extend(CanvasMouseAdapter, [ jsPlumb.jsPlumbUIComponent, jsPlumbUtil.EventGenerator ]); + + var _newCanvas = function(params) { + var canvas = document.createElement("canvas"); + params._jsPlumb.instance.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.instance.getId(canvas, params.uuid); + if (params.tooltip) canvas.setAttribute("title", params.tooltip); + + return canvas; + }; + + var CanvasComponent = window.CanvasComponent = function(params) { + CanvasMouseAdapter.apply(this, arguments); + + var displayElements = [ ]; + this.getDisplayElements = function() { return displayElements; }; + this.appendDisplayElement = function(el) { displayElements.push(el); }; + }; + jsPlumbUtil.extend(CanvasComponent, CanvasMouseAdapter, { + setVisible:function(state) { + this.canvas.style.display = state ? "block" : "none"; + } + }); + + 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, dx, dy) { + ({ + "Straight":function(segment, ctx, style, dx, dy) { + var d = segment.params; + ctx.save(); + maybeMakeGradient(ctx, style, function() { return ctx.createLinearGradient(d.x1, d.y1, d.x2, d.y2); }); + ctx.beginPath(); + ctx.translate(dx, dy); + 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(); + + ctx.restore(); + }, + "Bezier":function(segment, ctx, style, dx, dy) { + var d = segment.params; + ctx.save(); + maybeMakeGradient(ctx, style, function() { return ctx.createLinearGradient(d.x2 + dx, d.y2 + dy, d.x1 + dx, d.y1 + dy); }); + ctx.beginPath(); + ctx.translate(dx, dy); + ctx.moveTo(d.x1, d.y1); + ctx.bezierCurveTo(d.cp1x, d.cp1y, d.cp2x, d.cp2y, d.x2, d.y2); + ctx.stroke(); + ctx.restore(); + }, + "Arc":function(segment, ctx, style, dx, dy) { + var d = segment.params; + ctx.save(); + ctx.beginPath(); + ctx.translate(dx, dy); + ctx.arc(d.cx, d.cy, d.r, segment.startAngle, segment.endAngle, d.ac); + ctx.stroke(); + ctx.restore(); + } + })[segment.type](segment, ctx, style, dx, dy); + }; + + /** + * Class:CanvasConnector + * Superclass for Canvas Connector renderers. + */ + var CanvasConnector = jsPlumb.ConnectorRenderers.canvas = function(params) { + CanvasComponent.apply(this, arguments); + + var _paintOneStyle = function(aStyle, dx, dy) { + this.ctx.save(); + jsPlumb.extend(this.ctx, aStyle); + + var segments = this.getSegments(); + for (var i = 0; i < segments.length; i++) { + segmentRenderer(segments[i], this.ctx, aStyle, dx, dy); + } + this.ctx.restore(); + }.bind(this); + + var clazz = this._jsPlumb.instance.connectorClass + " " + (params.cssClass || ""); + this.canvas = _newCanvas({ + "class":clazz, + _jsPlumb:this._jsPlumb, + parent:params.parent + }); + this.ctx = this.canvas.getContext("2d"); + + this.appendDisplayElement(this.canvas); + + this.paint = function(style, anchor, extents) { + if (style != null) { + + var xy = [ this.x, this.y ], wh = [ this.w, this.h ], p, + dx = 0, dy = 0; + + if (extents != null) { + if (extents.xmin < 0) { + xy[0] += extents.xmin; + dx = -extents.xmin; + } + if (extents.ymin < 0) { + xy[1] += extents.ymin; + dy = -extents.ymin; + } + wh[0] = extents.xmax + ((extents.xmin < 0) ? -extents.xmin : 0); + wh[1] = extents.ymax + ((extents.ymin < 0) ? -extents.ymin : 0); + } + + this.translateX = dx; + this.translateY = dy; + + jsPlumbUtil.sizeElement(this.canvas, xy[0], xy[1], wh[0], wh[1]); + + if (style.outlineColor != null) { + var outlineWidth = style.outlineWidth || 1, + outlineStrokeWidth = style.lineWidth + (2 * outlineWidth), + outlineStyle = { + strokeStyle:style.outlineColor, + lineWidth:outlineStrokeWidth + }; + _paintOneStyle(outlineStyle, dx, dy); + } + _paintOneStyle(style, dx, dy); + } + }; + }; + jsPlumbUtil.extend(CanvasConnector, CanvasComponent); + + + /** + * Class:CanvasEndpoint + * Superclass for Canvas Endpoint renderers. + */ + var CanvasEndpoint = function(params) { + CanvasComponent.apply(this, arguments); + var clazz = this._jsPlumb.instance.endpointClass + " " + (params.cssClass || ""), + canvasParams = { + "class":clazz, + _jsPlumb:this._jsPlumb, + parent:params.parent, + tooltip:self.tooltip + }; + this.canvas = _newCanvas(canvasParams); + this.ctx = this.canvas.getContext("2d"); + + this.appendDisplayElement(this.canvas); + + this.paint = function(style, anchor, extents) { + jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); + if (style.outlineColor != null) { + var outlineWidth = style.outlineWidth || 1, + outlineStrokeWidth = style.lineWidth + (2 * outlineWidth); + var outlineStyle = { + strokeStyle:style.outlineColor, + lineWidth:outlineStrokeWidth + }; + } + + this._paint.apply(this, arguments); + }; + }; + jsPlumbUtil.extend(CanvasEndpoint, CanvasComponent); + + 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, 10); } + catch(e) { + if (value.substring(value.length - 1) == '%') + return parseInt(value.substring(0, value - 1), 10); + } + }, + calculateAdjustments = function(gradient) { + var offsetAdjustment = self.defaultOffset, innerRadius = self.defaultInnerRadius; + if (gradient.offset) offsetAdjustment = parseValue(gradient.offset); + if (gradient.innerRadius) innerRadius = parseValue(gradient.innerRadius); + return [offsetAdjustment, innerRadius]; + }; + this._paint = function(style) { + if (style != null) { + var ctx = self.canvas.getContext('2d'), + orientation = params.endpoint.anchor.getOrientation(params.endpoint); + + 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(self.radius, self.radius, self.radius, self.radius + xAdjust, self.radius + 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.translate(dx, dy); + ctx.arc(self.radius, self.radius, self.radius, 0, Math.PI*2, true); + ctx.closePath(); + if (style.fillStyle || style.gradient) ctx.fill(); + if (style.strokeStyle) ctx.stroke(); + } + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Dot, [ jsPlumb.Endpoints.Dot, CanvasEndpoint ]); + + jsPlumb.Endpoints.canvas.Rectangle = function(params) { + + var self = this; + jsPlumb.Endpoints.Rectangle.apply(this, arguments); + CanvasEndpoint.apply(this, arguments); + + this._paint = function(style) { + + var ctx = self.canvas.getContext("2d"), + orientation = params.endpoint.anchor.getOrientation(params.endpoint); + + 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 ? self.h : orientation[1] === 0 ? self.h / 2 : 0; + var y2 = orientation[1] == -1 ? self.h : orientation[1] === 0 ? self.h / 2 : 0; + var x1 = orientation[0] == 1 ? self.w : orientation[0] === 0 ? self.w / 2 : 0; + var x2 = orientation[0] == -1 ? self.w : orientation[0] === 0 ? self.w / 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, self.w, self.h); + ctx.closePath(); + if (style.fillStyle || style.gradient) ctx.fill(); + if (style.strokeStyle) ctx.stroke(); + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Rectangle, [ jsPlumb.Endpoints.Rectangle, CanvasEndpoint ]); + + jsPlumb.Endpoints.canvas.Triangle = function(params) { + + var self = this; + jsPlumb.Endpoints.Triangle.apply(this, arguments); + CanvasEndpoint.apply(this, arguments); + + this._paint = function(style) { + var ctx = self.canvas.getContext('2d'), + offsetX = 0, offsetY = 0, angle = 0, + orientation = params.endpoint.anchor.getOrientation(params.endpoint); + + if( orientation[0] == 1 ) { + offsetX = self.width; + offsetY = self.height; + angle = 180; + } + if( orientation[1] == -1 ) { + offsetX = self.width; + angle = 90; + } + if( orientation[1] == 1 ) { + offsetY = self.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(self.width/2, self.height/2); + ctx.lineTo(0, self.height); + ctx.closePath(); + if (style.fillStyle || style.gradient) ctx.fill(); + if (style.strokeStyle) ctx.stroke(); + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.canvas.Triangle, [ jsPlumb.Endpoints.Triangle, CanvasEndpoint ]); + + /* + * 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; + +// ********************************* 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); + }; + jsPlumbUtil.extend(CanvasOverlay, jsPlumb.jsPlumbUIComponent, { + setVisible : function(state) { + this.visible = state; + this.component.repaint(); + } + }); + + var AbstractCanvasArrowOverlay = function(superclass, originalArgs) { + superclass.apply(this, originalArgs); + CanvasOverlay.apply(this, originalArgs); + this.paint = function(params, containerExtents) { + var ctx = params.component.ctx, d = params.d; + + if (d) { + ctx.save(); + ctx.lineWidth = params.lineWidth; + ctx.beginPath(); + ctx.translate(params.component.translateX, params.component.translateY); + 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 (params.strokeStyle) { + ctx.strokeStyle = params.strokeStyle; + ctx.stroke(); + } + if (params.fillStyle) { + ctx.fillStyle = params.fillStyle; + ctx.fill(); + } + ctx.restore(); + } + }; + }; + + jsPlumb.Overlays.canvas.Arrow = function() { + AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.canvas.Arrow, [ jsPlumb.Overlays.Arrow, CanvasOverlay ] ); + + jsPlumb.Overlays.canvas.PlainArrow = function() { + AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.canvas.PlainArrow, [ jsPlumb.Overlays.PlainArrow, CanvasOverlay ] ); + + jsPlumb.Overlays.canvas.Diamond = function() { + AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.canvas.Diamond, [ jsPlumb.Overlays.Diamond, CanvasOverlay ] ); +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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.instance.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 pointerEventsSpec = params.pointerEventsSpec || "all", renderer = {}; + + jsPlumb.jsPlumbUIComponent.apply(this, params.originalArgs); + this.canvas = null;this.path = null;this.svg = null; + + var clazz = params.cssClass + " " + (params.originalArgs[0].cssClass || ""), + svgParams = { + "style":"", + "width":0, + "height":0, + "pointer-events":pointerEventsSpec, + "position":"absolute" + }; + this.svg = _node("svg", svgParams); + if (params.useDivWrapper) { + this.canvas = document.createElement("div"); + this.canvas.style.position = "absolute"; + jsPlumbUtil.sizeElement(this.canvas,0,0,1,1); + this.canvas.className = clazz; + } + else { + _attr(this.svg, { "class":clazz }); + this.canvas = this.svg; + } + + params._jsPlumb.appendElement(this.canvas, params.originalArgs[0].parent); + if (params.useDivWrapper) this.canvas.appendChild(this.svg); + + // TODO this displayElement stuff is common between all components, across all + // renderers. would be best moved to jsPlumbUIComponent. + var displayElements = [ this.canvas ]; + this.getDisplayElements = function() { + return displayElements; + }; + + this.appendDisplayElement = function(el) { + displayElements.push(el); + }; + + this.paint = function(style, anchor, extents) { + if (style != null) { + + var xy = [ this.x, this.y ], wh = [ this.w, this.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) { + jsPlumbUtil.sizeElement(this.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(this.svg, { + "style":p, + "width": wh[0], + "height": wh[1] + }); + } + }; + + return { + renderer:renderer + }; + }; + jsPlumbUtil.extend(SvgComponent, jsPlumb.jsPlumbUIComponent, { + cleanup:function() { + jsPlumbUtil.removeElement(this.canvas); + this.svg = null; + this.canvas = null; + this.path = null; + }, + setVisible:function(v) { + if (this.canvas) { + this.canvas.style.display = v ? "block" : "none"; + } + if (this.bgCanvas) { + this.bgCanvas.style.display = v ? "block" : "none"; + } + } + }); + + /* + * 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 + } ]); + + /*this.pointOnPath = function(location, absolute) { + if (!self.path) return [0,0]; + var p = absolute ? location : location * self.path.getTotalLength(); + return self.path.getPointAtLength(p); + };*/ + + _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 (this.bgPath) this.reattachListenersForElement(this.bgPath, this); + if (this.path) this.reattachListenersForElement(this.path, this); + }; + }; + jsPlumbUtil.extend(jsPlumb.ConnectorRenderers.svg, SvgComponent); + +// ******************************* 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 _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 (this.node == null) { + this.node = this.makeNode(s); + this.svg.appendChild(this.node); + this.attachListeners(this.node, this); + } + else if (this.updateNode != null) { + this.updateNode(this.node); + } + _applyStyles(this.svg, this.node, s, [ this.x, this.y, this.w, this.h ], this); + _pos(this.node, [ this.x, this.y ]); + }.bind(this); + + }; + jsPlumbUtil.extend(SvgEndpoint, SvgComponent, { + reattachListeners : function() { + if (this.node) this.reattachListenersForElement(this.node, this); + } + }); + + /* + * 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.radius + }); + }; + this.updateNode = function(node) { + _attr(node, { + "cx":this.w / 2, + "cy":this.h / 2, + "r":this.radius + }); + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.svg.Dot, [jsPlumb.Endpoints.Dot, SvgEndpoint]); + + /* + * 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 + }); + }; + this.updateNode = function(node) { + _attr(node, { + "width":this.w, + "height":this.h + }); + }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.svg.Rectangle, [jsPlumb.Endpoints.Rectangle, SvgEndpoint]); + + /* + * 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; + this.path = null; + this.paint = function(params, containerExtents) { + // only draws on connections, not endpoints. + if (params.component.svg && containerExtents) { + if (this.path == null) { + this.path = _node("path", { + "pointer-events":"all" + }); + params.component.svg.appendChild(this.path); + + this.attachListeners(this.path, params.component); + this.attachListeners(this.path, this); + } + 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(this.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 (this.path) this.reattachListenersForElement(this.path, this); + }; + }; + jsPlumbUtil.extend(AbstractSvgArrowOverlay, [jsPlumb.jsPlumbUIComponent, jsPlumb.Overlays.AbstractOverlay], { + cleanup : function() { + if (this.path != null) jsPlumb.CurrentLibrary.removeElement(this.path); + }, + setVisible:function(v) { + if(this.path != null) (this.path.style.display = (v ? "block" : "none")); + } + }); + + jsPlumb.Overlays.svg.Arrow = function() { + AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.svg.Arrow, [ jsPlumb.Overlays.Arrow, AbstractSvgArrowOverlay ]); + + jsPlumb.Overlays.svg.PlainArrow = function() { + AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.svg.PlainArrow, [ jsPlumb.Overlays.PlainArrow, AbstractSvgArrowOverlay ]); + + jsPlumb.Overlays.svg.Diamond = function() { + AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.svg.Diamond, [ jsPlumb.Overlays.Diamond, AbstractSvgArrowOverlay ]); + + // 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; + }; + }; + jsPlumbUtil.extend(jsPlumb.Overlays.svg.GuideLines, jsPlumb.Overlays.GuideLines); +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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-b… + // http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-… + + 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-… + // 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. + //jsPlumb.CurrentLibrary.getDOMElement(container).appendChild(g); + //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-… + //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.instance); + self.opacityNodes.fill = _node("fill", [0,0,1,1], {opacity:"0.0"}, vml, self._jsPlumb.instance); + }; + 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); + }; + }; + jsPlumbUtil.extend(VmlComponent, jsPlumb.jsPlumbUIComponent, { + cleanup:function() { + if (this.bgCanvas) jsPlumbUtil.removeElement(this.bgCanvas); + jsPlumbUtil.removeElement(this.canvas); + } + }); + + /* + * Base class for Vml connectors. extends VmlComponent. + */ + var VmlConnector = jsPlumb.ConnectorRenderers.vml = function(params) { + this.strokeNode = null; + this.canvas = null; + VmlComponent.apply(this, arguments); + var clazz = this._jsPlumb.instance.connectorClass + (params.cssClass ? (" " + params.cssClass) : ""); + this.paint = function(style) { + if (style !== null) { + + // we need to be at least 1 pixel in each direction, because otherwise coordsize gets set to + // 0 and overlays cannot paint. + this.w = Math.max(this.w, 1); + this.h = Math.max(this.h, 1); + + var segments = this.getSegments(), p = { "path":"" }, + d = [this.x, this.y, this.w, this.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 (this.bgCanvas == null) { + p["class"] = clazz; + p.coordsize = (d[2] * scale) + "," + (d[3] * scale); + this.bgCanvas = _node("shape", d, p, params.parent, this._jsPlumb.instance, true); + _pos(this.bgCanvas, d); + this.appendDisplayElement(this.bgCanvas, true); + this.attachListeners(this.bgCanvas, this); + this.initOpacityNodes(this.bgCanvas, ["stroke"]); + } + else { + p.coordsize = (d[2] * scale) + "," + (d[3] * scale); + _pos(this.bgCanvas, d); + _atts(this.bgCanvas, p); + } + + _applyStyles(this.bgCanvas, outlineStyle, this); + } + //*/ + + if (this.canvas == null) { + p["class"] = clazz; + p.coordsize = (d[2] * scale) + "," + (d[3] * scale); + this.canvas = _node("shape", d, p, params.parent, this._jsPlumb.instance, 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 + + this.appendDisplayElement(this.canvas, true); + this.attachListeners(this.canvas, this); + this.initOpacityNodes(this.canvas, ["stroke"]); + } + else { + p.coordsize = (d[2] * scale) + "," + (d[3] * scale); + _pos(this.canvas, d); + _atts(this.canvas, p); + } + + _applyStyles(this.canvas, style, this, this._jsPlumb.instance); + } + }; + + }; + jsPlumbUtil.extend(VmlConnector, VmlComponent, { + reattachListeners : function() { + if (this.canvas) this.reattachListenersForElement(this.canvas, this); + }, + setVisible:function(v) { + if (this.canvas) { + this.canvas.style.display = v ? "block" : "none"; + } + if (this.bgCanvas) { + this.bgCanvas.style.display = v ? "block" : "none"; + } + } + }); + + /* + * + * Base class for Vml Endpoints. extends VmlComponent. + * + */ + var VmlEndpoint = window.VmlEndpoint = function(params) { + VmlComponent.apply(this, arguments); + this._jsPlumb.vml = null;//, opacityStrokeNode = null, opacityFillNode = null; + this.canvas = document.createElement("div"); + this.canvas.style.position = "absolute"; + this._jsPlumb.clazz = this._jsPlumb.instance.endpointClass + (params.cssClass ? (" " + params.cssClass) : ""); + + // TODO vml endpoint adds class to VML at constructor time. but the addClass method adds VML + // to the enclosing DIV. what to do? seems like it would be better to just target the div. + // HOWEVER...vml connection has no containing div. why not? it feels like it should. + + //var group = _getGroup(params.parent); + //group.appendChild(self.canvas); + params._jsPlumb.appendElement(this.canvas, params.parent); + + this.paint = function(style, anchor) { + var p = { }, vml = this._jsPlumb.vml; + + jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); + if (this._jsPlumb.vml == null) { + p["class"] = this._jsPlumb.clazz; + vml = this._jsPlumb.vml = this.getVml([0,0, this.w, this.h], p, anchor, this.canvas, this._jsPlumb.instance); + this.attachListeners(vml, this); + + this.appendDisplayElement(vml, true); + this.appendDisplayElement(this.canvas, true); + + this.initOpacityNodes(vml, ["fill"]); + } + else { + _pos(vml, [0,0, this.w, this.h]); + _atts(vml, p); + } + + _applyStyles(vml, style, this); + }; + }; + jsPlumbUtil.extend(VmlEndpoint, VmlComponent, { + reattachListeners : function() { + if (this._jsPlumb.vml) this.reattachListenersForElement(this._jsPlumb.vml, this); + } + }); + +// ******************************* 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() { + if (d.loopback) + return "0,0," + _conv(2*d.r) + "," + _conv(2 * d.r); + + 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); }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.vml.Dot, VmlEndpoint); + + 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); }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.vml.Rectangle, VmlEndpoint); + + /* + * 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) { + // only draws for connectors, not endpoints. + if (params.component.canvas && containerExtents) { + var p = {}, d = params.d, connector = params.component; + 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.instance, 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); + }; + }; + jsPlumbUtil.extend(AbstractVmlArrowOverlay, [VmlComponent, jsPlumb.Overlays.AbstractOverlay], { + setVisible : function(state) { + this.canvas.style.display = state ? "block" : "none"; + } + }); + + jsPlumb.Overlays.vml.Arrow = function() { + AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.vml.Arrow, [ jsPlumb.Overlays.Arrow, AbstractVmlArrowOverlay ]); + + jsPlumb.Overlays.vml.PlainArrow = function() { + AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.vml.PlainArrow, [ jsPlumb.Overlays.PlainArrow, AbstractVmlArrowOverlay ]); + + jsPlumb.Overlays.vml.Diamond = function() { + AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.vml.Diamond, [ jsPlumb.Overlays.Diamond, AbstractVmlArrowOverlay ]); + +// ******************************* /vml overlays ***************************************************** + +})(); +/* + * jsPlumb + * + * Title:jsPlumb 1.5.3 + * + * 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. + * 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. + * 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 = jsPlumbUtil.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); + }, + + destroyDraggable : function(el) { + var id = jsPlumb.getId(el), + dd = _draggablesById[id]; + + if (dd) { + dd.destroy(); + delete _draggablesById[id]; + } + }, + + destroyDroppable : function(el) { + // TODO + }, + + dragEvents : { + "start":"drag:start", "stop":"drag:end", "drag":"drag:drag", "step":"step", + "over":"drop:enter", "out":"drop:exit", "drop":"drop:hit" + }, + + extend : _extend, + + 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 (el == null) return null; + 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 el = args[0].currentTarget.el._node || args[0].currentTarget.el; + var o = Y.DOM.getXY(el); + return {left:o[0] / zoom, top:o[1] / zoom }; + }, + + hasClass : function(el, clazz) { + return el.hasClass(clazz); + }, + + initDraggable : function(el, options, isPlumbedComponent, _jsPlumb) { + var _opts = _getDDOptions(options), + id = _jsPlumb.getId(el); + _opts.node = "#" + id; + options["drag:start"] = jsPlumbUtil.wrap(options["drag:start"], function() { + Y.one(document.body).addClass(_jsPlumb.dragSelectClass); + }, false); + options["drag:end"] = jsPlumbUtil.wrap(options["drag:end"], function() { + Y.one(document.body).removeClass(_jsPlumb.dragSelectClass); + }); + 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"] = jsPlumbUtil.wrap(options["drop:enter"], function(e) { + if (e.drag.scope !== scope) return true; + _checkHover(el, true); + }, true); + options["drop:exit"] = jsPlumbUtil.wrap(options["drop:exit"], function(e) { + _checkHover(el, false); + }); + options["drop:hit"] = jsPlumbUtil.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(); }, + + setDragFilter : function(el, filter) { + jsPlumb.log("NOT IMPLEMENTED: setDragFilter"); + }, + + /** + * 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

1 0

r218 - in sandbox/nuiton-js-angular: . src/main/resources/META-INF/nuiton-js src/main/resources/nuiton-js-angular src/main/resources/nuiton-js-angular/extra
by echatellier＠users.nuiton.org Oct. 15, 2013

Oct. 15, 2013

Author: echatellier Date: 2013-10-15 10:29:48 +0200 (Tue, 15 Oct 2013) New Revision: 218 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/218 Log: Angular js 1.2.0-rc3 (version bump) Modified: sandbox/nuiton-js-angular/pom.xml sandbox/nuiton-js-angular/src/main/resources/META-INF/nuiton-js/wro-angular.xml sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/angular.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-animate.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-cookies.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-loader.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-mocks.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-resource.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-route.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-sanitize.js sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-touch.js Modified: sandbox/nuiton-js-angular/pom.xml =================================================================== --- sandbox/nuiton-js-angular/pom.xml 2013-09-20 13:29:04 UTC (rev 217) +++ sandbox/nuiton-js-angular/pom.xml 2013-10-15 08:29:48 UTC (rev 218) @@ -14,7 +14,7 @@ </parent> <artifactId>nuiton-js-angular</artifactId> - <version>1.2.0-rc2-2-SNAPSHOT</version> + <version>1.2.0-rc3-1-SNAPSHOT</version> <name>Nuiton JS :: Angular</name> <description>Angular jar packaging</description> @@ -29,9 +29,9 @@ </licenses> <scm> - <connection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-angular-1.2.0-rc…</connection> - <developerConnection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-angular-1.2.0-rc…</developerConnection> - <url>http://www.nuiton.org/repositories/browse/nuiton-js/tags/nuiton-js-angular-…</url> + <connection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-angular-1.2.0-rc…</connection> + <developerConnection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-angular-1.2.0-rc…</developerConnection> + <url>http://www.nuiton.org/repositories/browse/nuiton-js/tags/nuiton-js-angular-…</url> </scm> </project> Modified: sandbox/nuiton-js-angular/src/main/resources/META-INF/nuiton-js/wro-angular.xml =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/META-INF/nuiton-js/wro-angular.xml 2013-09-20 13:29:04 UTC (rev 217) +++ sandbox/nuiton-js-angular/src/main/resources/META-INF/nuiton-js/wro-angular.xml 2013-10-15 08:29:48 UTC (rev 218) @@ -1,6 +1,6 @@  @@ -16802,9 +17900,9 @@ * ## A note about animations with ngShow * * Animations in ngShow/ngHide work with the show and hide events that are triggered when the directive expression - * is true and false. This system works similar to the animation system present with ngClass, however, the - * only difference is that you must also include the !important flag to override the display property so - * that you can perform an animation when the element is hidden during the time of the animation. + * is true and false. This system works like the animation system present with ngClass except that + * you must also include the !important flag to override the display property + * so that you can perform an animation when the element is hidden during the time of the animation. * * <pre> * // @@ -16905,10 +18003,10 @@ * @name ng.directive:ngHide * * @description - * The `ngHide` directive shows and hides the given HTML element conditionally based on the expression - * provided to the ngHide attribute. The show and hide mechanism is a achieved by removing and adding - * the `ng-hide` CSS class onto the element. The `.ng-hide` CSS class is a predefined CSS class present - * in AngularJS which sets the display style to none (using an !important flag). + * The `ngHide` directive shows or hides the given HTML element based on the expression + * provided to the ngHide attribute. The element is shown or hidden by removing or adding + * the `ng-hide` CSS class onto the element. The `.ng-hide` CSS class is predefined + * in AngularJS and sets the display style to none (using an !important flag). * * <pre> *  @@ -16954,8 +18052,8 @@ * ## A note about animations with ngHide * * Animations in ngShow/ngHide work with the show and hide events that are triggered when the directive expression - * is true and false. This system works similar to the animation system present with ngClass, however, the - * only difference is that you must also include the !important flag to override the display property so + * is true and false. This system works like the animation system present with ngClass, except that + * you must also include the !important flag to override the display property so * that you can perform an animation when the element is hidden during the time of the animation. * * <pre> @@ -17054,6 +18152,7 @@ /** * @ngdoc directive * @name ng.directive:ngStyle + * @restrict AC * * @description * The `ngStyle` directive allows you to set CSS style on an HTML element conditionally. @@ -17117,7 +18216,7 @@ * attribute is displayed. * * @animations - * enter - happens after the ngSwtich contents change and the matched child element is placed inside the container + * enter - happens after the ngSwitch contents change and the matched child element is placed inside the container * leave - happens just after the ngSwitch contents change and just before the former contents are removed from the DOM * * @usage @@ -17128,6 +18227,7 @@ * </ANY> * * @scope + * @priority 800 * @param {*} ngSwitch|on expression to match against <tt>ng-switch-when</tt>. * @paramDescription * On child elements add: @@ -17262,7 +18362,7 @@ var ngSwitchWhenDirective = ngDirective({ transclude: 'element', - priority: 500, + priority: 800, require: '^ngSwitch', compile: function(element, attrs, transclude) { return function(scope, element, attr, ctrl) { @@ -17274,7 +18374,7 @@ var ngSwitchDefaultDirective = ngDirective({ transclude: 'element', - priority: 500, + priority: 800, require: '^ngSwitch', compile: function(element, attrs, transclude) { return function(scope, element, attr, ctrl) { @@ -17287,6 +18387,7 @@ /** * @ngdoc directive * @name ng.directive:ngTransclude + * @restrict AC * * @description * Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion. @@ -17335,7 +18436,15 @@ * */ var ngTranscludeDirective = ngDirective({ - controller: ['$transclude', function($transclude) { + controller: ['$element', '$transclude', function($element, $transclude) { + if (!$transclude) { + throw minErr('ngTransclude')('orphan', + 'Illegal use of ngTransclude directive in the template! ' + + 'No parent directive that requires a transclusion found. ' + + 'Element: {0}', + startingTag($element)); + } + // remember the transclusion fn but call it during linking so that we don't process transclusion before directives on // the parent element even when the transclusion replaces the current element. (we can't use priority here because // that applies only to compile fns and not controllers @@ -17353,12 +18462,12 @@ /** * @ngdoc directive * @name ng.directive:script + * @restrict E * * @description * Load content of a script tag, with type `text/ng-template`, into `$templateCache`, so that the * template can be used by `ngInclude`, `ngView` or directive templates. * - * @restrict E * @param {'text/ng-template'} type must be set to `'text/ng-template'` * * @example @@ -17395,6 +18504,7 @@ }; }]; +var ngOptionsMinErr = minErr('ngOptions'); /** * @ngdoc directive * @name ng.directive:select @@ -17405,22 +18515,22 @@ * * # `ngOptions` * - * Optionally `ngOptions` attribute can be used to dynamically generate a list of `<option>` - * elements for a `<select>` element using an array or an object obtained by evaluating the - * `ngOptions` expression. + * The `ngOptions` attribute can be used to dynamically generate a list of `<option>` + * elements for the `<select>` element using the array or object obtained by evaluating the + * `ngOptions` comprehension_expression. * - * When an item in the `<select>` menu is selected, the value of array element or object property + * When an item in the `<select>` menu is selected, the array element or object property * represented by the selected option will be bound to the model identified by the `ngModel` - * directive of the parent select element. + * directive. * * Optionally, a single hard-coded `<option>` element, with the value set to an empty string, can - * be nested into the `<select>` element. This element will then represent `null` or "not selected" + * be nested into the `<select>` element. This element will then represent the `null` or "not selected" * option. See example below for demonstration. * * Note: `ngOptions` provides iterator facility for `<option>` element which should be used instead * of {@link ng.directive:ngRepeat ngRepeat} when you want the - * `select` model to be bound to a non-string value. This is because an option element can currently - * be bound to string values only. + * `select` model to be bound to a non-string value. This is because an option element can only + * be bound to string values at present. * * @param {string} ngModel Assignable angular expression to data-bind to. * @param {string=} name Property name of the form under which the control is published. @@ -17521,8 +18631,8 @@ var ngOptionsDirective = valueFn({ terminal: true }); var selectDirective = ['$compile', '$parse', function($compile, $parse) { - //0000111110000000000022220000000000000000000000333300000000000000444444444444444440000000005555555555555555500000006666666666666666600000000000000007777000000000000000000088888 - var NG_OPTIONS_REGEXP = /^\s*(.*?)(?:\s+as\s+(.*?))?(?:\s+group\s+by\s+(.*))?\s+for\s+(?:([\$\w][\$\w\d]*)|(?:$\s*([\$\w][\$\w\d]*)\s*,\s*([\$\w][\$\w\d]*)\s*$))\s+in\s+(.*?)(?:\s+track\s+by\s+(.*?))?$/, + //0000111110000000000022220000000000000000000000333300000000000000444444444444444000000000555555555555555000000066666666666666600000000000000007777000000000000000000088888 + var NG_OPTIONS_REGEXP = /^\s*(.*?)(?:\s+as\s+(.*?))?(?:\s+group\s+by\s+(.*))?\s+for\s+(?:([\$\w][\$\w]*)|(?:$\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*$))\s+in\s+(.*?)(?:\s+track\s+by\s+(.*?))?$/, nullModelCtrl = {$setViewValue: noop}; return { @@ -17543,10 +18653,11 @@ ngModelCtrl = ngModelCtrl_; nullOption = nullOption_; unknownOption = unknownOption_; - } + }; self.addOption = function(value) { + assertNotHasOwnProperty(value, '"option value"'); optionsMap[value] = true; if (ngModelCtrl.$viewValue == value) { @@ -17572,12 +18683,12 @@ $element.prepend(unknownOption); $element.val(unknownVal); unknownOption.prop('selected', true); // needed for IE - } + }; self.hasOption = function(value) { return optionsMap.hasOwnProperty(value); - } + }; $scope.$on('$destroy', function() { // disable unknown option so that we don't do work when the whole select is being destroyed @@ -17695,7 +18806,7 @@ var match; if (! (match = optionsExp.match(NG_OPTIONS_REGEXP))) { - throw minErr('ngOptions')('iexp', + throw ngOptionsMinErr('iexp', "Expected expression in form of '_select_ (as _label_)? for (_key_,)?_value_ in _collection_' but got '{0}'. Element: {1}", optionsExp, startingTag(selectElement)); } @@ -17734,7 +18845,7 @@ var optionGroup, collection = valuesFn(scope) || [], locals = {}, - key, value, optionElement, index, groupIndex, length, groupLength; + key, value, optionElement, index, groupIndex, length, groupLength, trackIndex; if (multiple) { value = []; @@ -17749,7 +18860,7 @@ key = optionElement.val(); if (keyName) locals[keyName] = key; if (trackFn) { - for (var trackIndex = 0; trackIndex < collection.length; trackIndex++) { + for (trackIndex = 0; trackIndex < collection.length; trackIndex++) { locals[valueName] = collection[trackIndex]; if (trackFn(scope, locals) == key) break; } @@ -17768,7 +18879,7 @@ value = null; } else { if (trackFn) { - for (var trackIndex = 0; trackIndex < collection.length; trackIndex++) { + for (trackIndex = 0; trackIndex < collection.length; trackIndex++) { locals[valueName] = collection[trackIndex]; if (trackFn(scope, locals) == key) { value = valueFn(scope, locals); @@ -17801,6 +18912,7 @@ modelValue = ctrl.$modelValue, values = valuesFn(scope) || [], keys = keyName ? sortedKeys(values) : values, + key, groupLength, length, groupIndex, index, locals = {}, @@ -17824,14 +18936,23 @@ // We now build up the list of options we need (we merge later) for (index = 0; length = keys.length, index < length; index++) { - locals[valueName] = values[keyName ? locals[keyName]=keys[index]:index]; - optionGroupName = groupByFn(scope, locals) || ''; + + key = index; + if (keyName) { + key = keys[index]; + if ( key.charAt(0) === '$' ) continue; + locals[keyName] = key; + } + + locals[valueName] = values[key]; + + optionGroupName = groupByFn(scope, locals) || ''; if (!(optionGroup = optionGroups[optionGroupName])) { optionGroup = optionGroups[optionGroupName] = []; optionGroupNames.push(optionGroupName); } if (multiple) { - selected = selectedSet.remove(trackFn ? trackFn(scope, locals) : valueFn(scope, locals)) != undefined; + selected = selectedSet.remove(trackFn ? trackFn(scope, locals) : valueFn(scope, locals)) !== undefined; } else { if (trackFn) { var modelCast = {}; @@ -17949,7 +19070,7 @@ } } } - } + }; }]; var optionDirective = ['$interpolate', function($interpolate) { @@ -17998,7 +19119,7 @@ }); }; } - } + }; }]; var styleDirective = valueFn({ Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-animate.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-animate.js 2013-09-20 13:29:04 UTC (rev 217) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-animate.js 2013-10-15 08:29:48 UTC (rev 218) @@ -1,5 +1,5 @@ /** %%Ignore-License - * @license AngularJS v1.2.0-rc.2 + * @license AngularJS v1.2.0-rc.3 * (c) 2010-2012 Google, Inc. http://angularjs.org * License: MIT */ @@ -32,7 +32,7 @@ * | {@link ng.directive:ngInclude#animations ngInclude} | enter and leave | * | {@link ng.directive:ngSwitch#animations ngSwitch} | enter and leave | * | {@link ng.directive:ngIf#animations ngIf} | enter and leave | - * | {@link ng.directive:ngShow#animations ngClass} | add and remove | + * | {@link ng.directive:ngClass#animations ngClass} | add and remove | * | {@link ng.directive:ngShow#animations ngShow & ngHide} | add and remove (the ng-hide class value) | * * You can find out more information about animations upon visiting each directive page. @@ -207,6 +207,7 @@ var selectors = $animateProvider.$$selectors; var NG_ANIMATE_STATE = '$$ngAnimateState'; + var NG_ANIMATE_CLASS_NAME = 'ng-animate'; var rootAnimateState = {running:true}; $provide.decorator('$animate', ['$delegate', '$injector', '$sniffer', '$rootElement', '$timeout', '$rootScope', function($delegate, $injector, $sniffer, $rootElement, $timeout, $rootScope) { @@ -222,8 +223,11 @@ //the empty string value is the default animation //operation which performs CSS transition and keyframe //animations sniffing. This is always included for each - //element animation procedure - classes.push(''); + //element animation procedure if the browser supports + //transitions and/or keyframe animations + if ($sniffer.transitions || $sniffer.animations) { + classes.push(''); + } for(var i=0; i < classes.length; i++) { var klass = classes[i], @@ -288,6 +292,7 @@ * @param {function()=} done callback function that will be called once the animation is complete */ enter : function(element, parent, after, done) { + this.enabled(false, element); $delegate.enter(element, parent, after); $rootScope.$$postDigest(function() { performAnimation('enter', 'ng-enter', element, parent, after, function() { @@ -324,6 +329,8 @@ * @param {function()=} done callback function that will be called once the animation is complete */ leave : function(element, done) { + cancelChildAnimations(element); + this.enabled(false, element); $rootScope.$$postDigest(function() { performAnimation('leave', 'ng-leave', element, null, null, function() { $delegate.leave(element, done); @@ -362,6 +369,8 @@ * @param {function()=} done callback function that will be called once the animation is complete */ move : function(element, parent, after, done) { + cancelChildAnimations(element); + this.enabled(false, element); $delegate.move(element, parent, after); $rootScope.$$postDigest(function() { performAnimation('move', 'ng-move', element, null, null, function() { @@ -452,12 +461,30 @@ * Globally enables/disables animations. * */ - enabled : function(value) { - if (arguments.length) { - rootAnimateState.running = !value; + enabled : function(value, element) { + switch(arguments.length) { + case 2: + if(value) { + cleanup(element); + } + else { + var data = element.data(NG_ANIMATE_STATE) || {}; + data.structural = true; + data.running = true; + element.data(NG_ANIMATE_STATE, data); + } + break; + + case 1: + rootAnimateState.running = !value; + break; + + default: + value = !rootAnimateState.running + break; } - return !rootAnimateState.running; - } + return !!value; + } }; /* @@ -484,52 +511,52 @@ //skip the animation if animations are disabled, a parent is already being animated //or the element is not currently attached to the document body. - if ((parent.inheritedData(NG_ANIMATE_STATE) || disabledAnimation).running) { - //avoid calling done() since there is no need to remove any - //data or className values since this happens earlier than that - //and also use a timeout so that it won't be asynchronous - $timeout(onComplete || noop, 0, false); + if ((parent.inheritedData(NG_ANIMATE_STATE) || disabledAnimation).running || animations.length == 0) { + done(); return; } var ngAnimateState = element.data(NG_ANIMATE_STATE) || {}; - //if an animation is currently running on the element then lets take the steps - //to cancel that animation and fire any required callbacks + var isClassBased = event == 'addClass' || event == 'removeClass'; if(ngAnimateState.running) { + if(isClassBased && ngAnimateState.structural) { + onComplete && onComplete(); + return; + } + + //if an animation is currently running on the element then lets take the steps + //to cancel that animation and fire any required callbacks + $timeout.cancel(ngAnimateState.flagTimer); cancelAnimations(ngAnimateState.animations); - ngAnimateState.done(); + (ngAnimateState.done || noop)(); } element.data(NG_ANIMATE_STATE, { running:true, + structural:!isClassBased, animations:animations, done:done }); + //the ng-animate class does nothing, but it's here to allow for + //parent animations to find and cancel child animations when needed + element.addClass(NG_ANIMATE_CLASS_NAME); + forEach(animations, function(animation, index) { var fn = function() { progress(index); }; if(animation.start) { - if(event == 'addClass' || event == 'removeClass') { - animation.endFn = animation.start(element, className, fn); - } else { - animation.endFn = animation.start(element, fn); - } + animation.endFn = isClassBased ? + animation.start(element, className, fn) : + animation.start(element, fn); } else { fn(); } }); - function cancelAnimations(animations) { - var isCancelledFlag = true; - forEach(animations, function(animation) { - (animation.endFn || noop)(isCancelledFlag); - }); - } - function progress(index) { animations[index].done = true; (animations[index].endFn || noop)(); @@ -542,118 +569,218 @@ function done() { if(!done.hasBeenRun) { done.hasBeenRun = true; - element.removeData(NG_ANIMATE_STATE); + var data = element.data(NG_ANIMATE_STATE); + if(data) { + /* only structural animations wait for reflow before removing an + animation, but class-based animations don't. An example of this + failing would be when a parent HTML tag has a ng-class attribute + causing ALL directives below to skip animations during the digest */ + if(isClassBased) { + cleanup(element); + } else { + data.flagTimer = $timeout(function() { + cleanup(element); + }, 0, false); + element.data(NG_ANIMATE_STATE, data); + } + } (onComplete || noop)(); } } } + + function cancelChildAnimations(element) { + angular.forEach(element[0].querySelectorAll('.' + NG_ANIMATE_CLASS_NAME), function(element) { + element = angular.element(element); + var data = element.data(NG_ANIMATE_STATE); + if(data) { + cancelAnimations(data.animations); + cleanup(element); + } + }); + } + + function cancelAnimations(animations) { + var isCancelledFlag = true; + forEach(animations, function(animation) { + (animation.endFn || noop)(isCancelledFlag); + }); + } + + function cleanup(element) { + element.removeClass(NG_ANIMATE_CLASS_NAME); + element.removeData(NG_ANIMATE_STATE); + } }]); - $animateProvider.register('', ['$window','$sniffer', '$timeout', function($window, $sniffer, $timeout) { - var noop = angular.noop; + $animateProvider.register('', ['$window', '$sniffer', '$timeout', function($window, $sniffer, $timeout) { var forEach = angular.forEach; - //one day all browsers will have these properties - var w3cAnimationProp = 'animation'; - var w3cTransitionProp = 'transition'; + // Detect proper transitionend/animationend event names. + var transitionProp, transitionendEvent, animationProp, animationendEvent; - //but some still use vendor-prefixed styles - var vendorAnimationProp = $sniffer.vendorPrefix + 'Animation'; - var vendorTransitionProp = $sniffer.vendorPrefix + 'Transition'; + // If unprefixed events are not supported but webkit-prefixed are, use the latter. + // Otherwise, just use W3C names, browsers not supporting them at all will just ignore them. + // Note: Chrome implements `window.onwebkitanimationend` and doesn't implement `window.onanimationend` + // but at the same time dispatches the `animationend` event and not `webkitAnimationEnd`. + // Register both events in case `window.onanimationend` is not supported because of that, + // do the same for `transitionend` as Safari is likely to exhibit similar behavior. + // Also, the only modern browser that uses vendor prefixes for transitions/keyframes is webkit + // therefore there is no reason to test anymore for other vendor prefixes: http://caniuse.com/#search=transition + if (window.ontransitionend === undefined && window.onwebkittransitionend !== undefined) { + transitionProp = 'WebkitTransition'; + transitionendEvent = 'webkitTransitionEnd transitionend'; + } else { + transitionProp = 'transition'; + transitionendEvent = 'transitionend'; + } + if (window.onanimationend === undefined && window.onwebkitanimationend !== undefined) { + animationProp = 'WebkitAnimation'; + animationendEvent = 'webkitAnimationEnd animationend'; + } else { + animationProp = 'animation'; + animationendEvent = 'animationend'; + } + var durationKey = 'Duration', + propertyKey = 'Property', delayKey = 'Delay', - propertyKey = 'Property', animationIterationCountKey = 'IterationCount', ELEMENT_NODE = 1; - function animate(element, className, done) { - if (!($sniffer.transitions || $sniffer.animations)) { - done(); - return; - } - else if(['ng-enter','ng-leave','ng-move'].indexOf(className) == -1) { - var existingDuration = 0; + var NG_ANIMATE_PARENT_KEY = '$ngAnimateKey'; + var lookupCache = {}; + var parentCounter = 0; + + var animationReflowQueue = [], animationTimer, timeOut = false; + function afterReflow(callback) { + animationReflowQueue.push(callback); + $timeout.cancel(animationTimer); + animationTimer = $timeout(function() { + angular.forEach(animationReflowQueue, function(fn) { + fn(); + }); + animationReflowQueue = []; + animationTimer = null; + lookupCache = {}; + }, 10, false); + } + + function getElementAnimationDetails(element, cacheKey, onlyCheckTransition) { + var data = lookupCache[cacheKey]; + if(!data) { + var transitionDuration = 0, transitionDelay = 0, + animationDuration = 0, animationDelay = 0; + + //we want all the styles defined before and after forEach(element, function(element) { if (element.nodeType == ELEMENT_NODE) { var elementStyles = $window.getComputedStyle(element) || {}; - existingDuration = Math.max(parseMaxTime(elementStyles[w3cTransitionProp + durationKey]), - parseMaxTime(elementStyles[vendorTransitionProp + durationKey]), - existingDuration); + + transitionDuration = Math.max(parseMaxTime(elementStyles[transitionProp + durationKey]), transitionDuration); + + if(!onlyCheckTransition) { + transitionDelay = Math.max(parseMaxTime(elementStyles[transitionProp + delayKey]), transitionDelay); + + animationDelay = Math.max(parseMaxTime(elementStyles[animationProp + delayKey]), animationDelay); + + var aDuration = parseMaxTime(elementStyles[animationProp + durationKey]); + + if(aDuration > 0) { + aDuration *= parseInt(elementStyles[animationProp + animationIterationCountKey]) || 1; + } + + animationDuration = Math.max(aDuration, animationDuration); + } } }); - if(existingDuration > 0) { - done(); - return; - } + data = { + transitionDelay : transitionDelay, + animationDelay : animationDelay, + transitionDuration : transitionDuration, + animationDuration : animationDuration + }; + lookupCache[cacheKey] = data; } + return data; + } - element.addClass(className); + function parseMaxTime(str) { + var total = 0, values = angular.isString(str) ? str.split(/\s*,\s*/) : []; + forEach(values, function(value) { + total = Math.max(parseFloat(value) || 0, total); + }); + return total; + } - //we want all the styles defined before and after - var duration = 0; - forEach(element, function(element) { - if (element.nodeType == ELEMENT_NODE) { - var elementStyles = $window.getComputedStyle(element) || {}; + function getCacheKey(element) { + var parent = element.parent(); + var parentID = parent.data(NG_ANIMATE_PARENT_KEY); + if(!parentID) { + parent.data(NG_ANIMATE_PARENT_KEY, ++parentCounter); + parentID = parentCounter; + } + return parentID + '-' + element[0].className; + } - var transitionDelay = Math.max(parseMaxTime(elementStyles[w3cTransitionProp + delayKey]), - parseMaxTime(elementStyles[vendorTransitionProp + delayKey])); + function animate(element, className, done) { - var animationDelay = Math.max(parseMaxTime(elementStyles[w3cAnimationProp + delayKey]), - parseMaxTime(elementStyles[vendorAnimationProp + delayKey])); + var cacheKey = getCacheKey(element); + if(getElementAnimationDetails(element, cacheKey, true).transitionDuration > 0) { - var transitionDuration = Math.max(parseMaxTime(elementStyles[w3cTransitionProp + durationKey]), - parseMaxTime(elementStyles[vendorTransitionProp + durationKey])); + done(); + return; + } - var animationDuration = Math.max(parseMaxTime(elementStyles[w3cAnimationProp + durationKey]), - parseMaxTime(elementStyles[vendorAnimationProp + durationKey])); + element.addClass(className); - if(animationDuration > 0) { - animationDuration *= Math.max(parseInt(elementStyles[w3cAnimationProp + animationIterationCountKey]) || 0, - parseInt(elementStyles[vendorAnimationProp + animationIterationCountKey]) || 0, - 1); - } + var timings = getElementAnimationDetails(element, cacheKey + ' ' + className); - duration = Math.max(animationDelay + animationDuration, - transitionDelay + transitionDuration, - duration); - } - }); - /* there is no point in performing a reflow if the animation timeout is empty (this would cause a flicker bug normally - in the page */ - if(duration > 0) { - var node = element[0]; + in the page. There is also no point in performing an animation + that only has a delay and no duration */ + var maxDuration = Math.max(timings.transitionDuration, timings.animationDuration); + if(maxDuration > 0) { + var maxDelayTime = Math.max(timings.transitionDelay, timings.animationDelay) * 1000, + startTime = Date.now(), + node = element[0]; //temporarily disable the transition so that the enter styles //don't animate twice (this is here to avoid a bug in Chrome/FF). - node.style[w3cTransitionProp + propertyKey] = 'none'; - node.style[vendorTransitionProp + propertyKey] = 'none'; + if(timings.transitionDuration > 0) { + node.style[transitionProp + propertyKey] = 'none'; + } var activeClassName = ''; forEach(className.split(' '), function(klass, i) { activeClassName += (i > 0 ? ' ' : '') + klass + '-active'; }); - //this triggers a reflow which allows for the transition animation to kick in - element.prop('clientWidth'); - node.style[w3cTransitionProp + propertyKey] = ''; - node.style[vendorTransitionProp + propertyKey] = ''; - element.addClass(activeClassName); + // This triggers a reflow which allows for the transition animation to kick in. + var css3AnimationEvents = animationendEvent + ' ' + transitionendEvent; - $timeout(done, duration * 1000, false); + afterReflow(function() { + if(timings.transitionDuration > 0) { + node.style[transitionProp + propertyKey] = ''; + } + element.addClass(activeClassName); + }); - //this will automatically be called by $animate so - //there is no need to attach this internally to the - //timeout done method + element.on(css3AnimationEvents, onAnimationProgress); + + // This will automatically be called by $animate so + // there is no need to attach this internally to the + // timeout done method. return function onEnd(cancelled) { + element.off(css3AnimationEvents, onAnimationProgress); element.removeClass(className); element.removeClass(activeClassName); - //only when the animation is cancelled is the done() - //function not called for this animation therefore - //this must be also called + // Only when the animation is cancelled is the done() + // function not called for this animation therefore + // this must be also called. if(cancelled) { done(); } @@ -664,13 +791,22 @@ done(); } - function parseMaxTime(str) { - var total = 0, values = angular.isString(str) ? str.split(/\s*,\s*/) : []; - forEach(values, function(value) { - total = Math.max(parseFloat(value) || 0, total); - }); - return total; + function onAnimationProgress(event) { + event.stopPropagation(); + var ev = event.originalEvent || event; + var timeStamp = ev.$manualTimeStamp || ev.timeStamp || Date.now(); + /* $manualTimeStamp is a mocked timeStamp value which is set + * within browserTrigger(). This is only here so that tests can + * mock animations properly. Real events fallback to event.timeStamp, + * or, if they don't, then a timeStamp is automatically created for them. + * We're checking to see if the timeStamp surpasses the expected delay, + * but we're using elapsedTime instead of the timeStamp on the 2nd + * pre-condition since animations sometimes close off early */ + if(Math.max(timeStamp - startTime, 0) >= maxDelayTime && ev.elapsedTime >= maxDuration) { + done(); + } } + } return { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-cookies.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-cookies.js 2013-09-20 13:29:04 UTC (rev 217) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-cookies.js 2013-10-15 08:29:48 UTC (rev 218) @@ -1,5 +1,5 @@ /** %%Ignore-License - * @license AngularJS v1.2.0-rc.2 + * @license AngularJS v1.2.0-rc.3 * (c) 2010-2012 Google, Inc. http://angularjs.org * License: MIT */ Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-loader.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-loader.js 2013-09-20 13:29:04 UTC (rev 217) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-loader.js 2013-10-15 08:29:48 UTC (rev 218) @@ -1,5 +1,5 @@ /** %%Ignore-License - * @license AngularJS v1.2.0-rc.2 + * @license AngularJS v1.2.0-rc.3 * (c) 2010-2012 Google, Inc. http://angularjs.org * License: MIT */ @@ -16,6 +16,8 @@ function setupModuleLoader(window) { + var $injectorMinErr = minErr('$injector'); + function ensure(obj, name, factory) { return obj[name] || (obj[name] = factory()); } @@ -74,12 +76,13 @@ * @returns {module} new module with the {@link angular.Module} api. */ return function module(name, requires, configFn) { + assertNotHasOwnProperty(name, 'module'); if (requires && modules.hasOwnProperty(name)) { modules[name] = null; } return ensure(modules, name, function() { if (!requires) { - throw minErr('$injector')('nomod', "Module '{0}' is not available! You either misspelled the module name " + + throw $injectorMinErr('nomod', "Module '{0}' is not available! You either misspelled the module name " + "or forgot to load it. If registering a module ensure that you specify the dependencies as the second " + "argument.", name); } @@ -182,7 +185,7 @@ * @param {Function} animationFactory Factory function for creating new instance of an animation. * @description * - * **NOTE**: animations are take effect only if the **ngAnimate** module is loaded. + * **NOTE**: animations take effect only if the **ngAnimate** module is loaded. * * * Defines an animation hook that can be later used with {@link ngAnimate.$animate $animate} service and @@ -222,7 +225,8 @@ * @ngdoc method * @name angular.Module#controller * @methodOf angular.Module - * @param {string} name Controller name. + * @param {string|Object} name Controller name, or an object map of controllers where the + * keys are the names and the values are the constructors. * @param {Function} constructor Controller constructor function. * @description * See {@link ng.$controllerProvider#register $controllerProvider.register()}. @@ -233,7 +237,8 @@ * @ngdoc method * @name angular.Module#directive * @methodOf angular.Module - * @param {string} name directive name + * @param {string|Object} name Directive name, or an object map of directives where the + * keys are the names and the values are the factories. * @param {Function} directiveFactory Factory function for creating new instance of * directives. * @description Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-mocks.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-mocks.js 2013-09-20 13:29:04 UTC (rev 217) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-mocks.js 2013-10-15 08:29:48 UTC (rev 218) @@ -1,5 +1,5 @@ /** %%Ignore-License - * @license AngularJS v1.2.0-rc.2 + * @license AngularJS v1.2.0-rc.3 * (c) 2010-2012 Google, Inc. http://angularjs.org * License: MIT * @@ -75,6 +75,13 @@ }; + /** + * @name ngMock.$browser#defer.now + * @propertyOf ngMock.$browser + * + * @description + * Current milliseconds mock time. + */ self.defer.now = 0; @@ -119,29 +126,6 @@ } }; - /** - * @name ngMock.$browser#defer.flushNext - * @methodOf ngMock.$browser - * - * @description - * Flushes next pending request and compares it to the provided delay - * - * @param {number=} expectedDelay the delay value that will be asserted against the delay of the next timeout function - */ - self.defer.flushNext = function(expectedDelay) { - var tick = self.deferredFns.shift(); - expect(tick.time).toEqual(expectedDelay); - tick.fn(); - }; - - /** - * @name ngMock.$browser#defer.now - * @propertyOf ngMock.$browser - * - * @description - * Current milliseconds mock time. - */ - self.$$baseHref = ''; self.baseHref = function() { return this.$$baseHref; @@ -454,6 +438,119 @@ }; +/** + * @ngdoc service + * @name ngMock.$interval + * + * @description + * Mock implementation of the $interval service. + * + * Use {@link ngMock.$interval#flush `$interval.flush(millis)`} to + * move forward by `millis` milliseconds and trigger any functions scheduled to run in that + * time. + * + * @param {function()} fn A function that should be called repeatedly. + * @param {number} delay Number of milliseconds between each function call. + * @param {number=} [count=0] Number of times to repeat. If not set, or 0, will repeat + * indefinitely. + * @param {boolean=} [invokeApply=true] If set to `false` skips model dirty checking, otherwise + * will invoke `fn` within the {@link ng.$rootScope.Scope#$apply $apply} block. + * @returns {promise} A promise which will be notified on each iteration. + */ +angular.mock.$IntervalProvider = function() { + this.$get = ['$rootScope', '$q', + function($rootScope, $q) { + var repeatFns = [], + nextRepeatId = 0, + now = 0; + + var $interval = function(fn, delay, count, invokeApply) { + var deferred = $q.defer(), + promise = deferred.promise, + count = (angular.isDefined(count)) ? count : 0, + iteration = 0, + skipApply = (angular.isDefined(invokeApply) && !invokeApply); + + promise.then(null, null, fn); + + promise.$$intervalId = nextRepeatId; + + function tick() { + deferred.notify(iteration++); + + if (count > 0 && iteration >= count) { + var fnIndex; + deferred.resolve(iteration); + + angular.forEach(repeatFns, function(fn, index) { + if (fn.id === promise.$$intervalId) fnIndex = index; + }); + + if (fnIndex !== undefined) { + repeatFns.splice(fnIndex, 1); + } + } + + if (!skipApply) $rootScope.$apply(); + }; + + repeatFns.push({ + nextTime:(now + delay), + delay: delay, + fn: tick, + id: nextRepeatId, + deferred: deferred + }); + repeatFns.sort(function(a,b){ return a.nextTime - b.nextTime;}); + + nextRepeatId++; + return promise; + }; + + $interval.cancel = function(promise) { + var fnIndex; + + angular.forEach(repeatFns, function(fn, index) { + if (fn.id === promise.$$intervalId) fnIndex = index; + }); + + if (fnIndex !== undefined) { + repeatFns[fnIndex].deferred.reject('canceled'); + repeatFns.splice(fnIndex, 1); + return true; + } + + return false; + }; + + /** + * @ngdoc method + * @name ngMock.$interval#flush + * @methodOf ngMock.$interval + * @description + * + * Runs interval tasks scheduled to be run in the next `millis` milliseconds. + * + * @param {number=} millis maximum timeout amount to flush up until. + * + * @return {number} The amount of time moved forward. + */ + $interval.flush = function(millis) { + now += millis; + while (repeatFns.length && repeatFns[0].nextTime <= now) { + var task = repeatFns[0]; + task.fn(); + task.nextTime += task.delay; + repeatFns.sort(function(a,b){ return a.nextTime - b.nextTime;}); + } + return millis; + }; + + return $interval; + }]; +}; + + (function() { var R_ISO8061_STR = /^(\d{4})-?(\d\d)-?(\d\d)(?:T(\d\d)(?:\:?(\d\d)(?:\:?(\d\d)(?:\.(\d{3}))?)?)?(Z|([+-])(\d\d):?(\d\d)))?$/; @@ -672,7 +769,7 @@ } }; - forEach(['enter','leave','move','addClass','removeClass'], function(method) { + angular.forEach(['enter','leave','move','addClass','removeClass'], function(method) { animate[method] = function() { var params = arguments; animate.queue.push({ @@ -747,7 +844,7 @@ offset = offset || ' '; var log = [offset + 'Scope(' + scope.$id + '): {']; for ( var key in scope ) { - if (scope.hasOwnProperty(key) && !key.match(/^(\$|this)/)) { + if (Object.prototype.hasOwnProperty.call(scope, key) && !key.match(/^(\$|this)/)) { log.push(' ' + key + ': ' + angular.toJson(scope[key])); } } @@ -1597,6 +1694,7 @@ $browser: angular.mock.$BrowserProvider, $exceptionHandler: angular.mock.$ExceptionHandlerProvider, $log: angular.mock.$LogProvider, + $interval: angular.mock.$IntervalProvider, $httpBackend: angular.mock.$HttpBackendProvider, $rootElement: angular.mock.$RootElementProvider }).config(function($provide) { @@ -1789,7 +1887,7 @@ cache = angular.element.cache; for(key in cache) { - if (cache.hasOwnProperty(key)) { + if (Object.prototype.hasOwnProperty.call(cache,key)) { var handle = cache[key].handle; handle && angular.element(handle.elem).off(); @@ -1892,8 +1990,40 @@ * instance of {@link AUTO.$injector $injector} per test, which is then used for * resolving references. * - * See also {@link angular.mock.module module} * + * ## Resolving References (Underscore Wrapping) + * Often, we would like to inject a reference once, in a `beforeEach()` block and reuse this + * in multiple `it()` clauses. To be able to do this we must assign the reference to a variable + * that is declared in the scope of the `describe()` block. Since we would, most likely, want + * the variable to have the same name of the reference we have a problem, since the parameter + * to the `inject()` function would hide the outer variable. + * + * To help with this, the injected parameters can, optionally, be enclosed with underscores. + * These are ignored by the injector when the reference name is resolved. + * + * For example, the parameter `_myService_` would be resolved as the reference `myService`. + * Since it is available in the function body as _myService_, we can then assign it to a variable + * defined in an outer scope. + * + * ``` + * // Defined out reference variable outside + * var myService; + * + * // Wrap the parameter in underscores + * beforeEach( inject( function(_myService_){ + * myService = _myService_; + * })); + * + * // Use myService in a series of tests. + * it('makes use of myService', function() { + * myService.doStuff(); + * }); + * + * ``` + * + * See also {@link angular.mock.module angular.mock.module} + * + * ## Example * Example of what a typical jasmine tests looks like with the inject method. * <pre> * @@ -1926,11 +2056,11 @@ * inject(function(version) { * expect(version).toEqual('overridden'); * }); - * )); + * }); * }); * * </pre> - * + * * @param {...Function} fns any number of functions which will be injected using the injector. */ window.inject = angular.mock.inject = function() { Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-resource.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-resource.js 2013-09-20 13:29:04 UTC (rev 217) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-resource.js 2013-10-15 08:29:48 UTC (rev 218) @@ -1,5 +1,5 @@ /** %%Ignore-License - * @license AngularJS v1.2.0-rc.2 + * @license AngularJS v1.2.0-rc.3 * (c) 2010-2012 Google, Inc. http://angularjs.org * License: MIT */ @@ -16,7 +16,7 @@ * * `ngResource` is the name of the optional Angular module that adds support for interacting with * [RESTful](http://en.wikipedia.org/wiki/Representational_State_Transfer) server-side data sources. - * `ngReource` provides the {@link ngResource.$resource `$resource`} serivce. + * `ngResource` provides the {@link ngResource.$resource `$resource`} service. * * {@installModule resource} * @@ -94,7 +94,7 @@ * caching. * - **`timeout`** – `{number|Promise}` – timeout in milliseconds, or {@link ng.$q promise} that * should abort the request when resolved. - * - **`withCredentials`** - `{boolean}` - whether to to set the `withCredentials` flag on the + * - **`withCredentials`** - `{boolean}` - whether to set the `withCredentials` flag on the * XHR object. See {@link https://developer.mozilla.org/en/http_access_control#section_5 * requests with credentials} for more information. * - **`responseType`** - `{string}` - see {@link @@ -352,6 +352,9 @@ var urlParams = self.urlParams = {}; forEach(url.split(/\W/), function(param){ + if (param === 'hasOwnProperty') { + throw $resourceMinErr('badname', "hasOwnProperty is not a valid parameter name."); + } if (!(new RegExp("^\\d+$").test(param)) && param && (new RegExp("(^|[^\\\\]):" + param + "(\\W|$)").test(url))) { urlParams[param] = true; } @@ -471,7 +474,7 @@ } }); - httpConfig.data = data; + if (hasBody) httpConfig.data = data; route.setUrlParams(httpConfig, extend({}, extractParams(data, action.params || {}), params), action.url); var promise = $http(httpConfig).then(function(response) { @@ -497,8 +500,6 @@ value.$resolved = true; - (success||noop)(value, response.headers); - response.resource = value; return response; @@ -508,8 +509,15 @@ (error||noop)(response); return $q.reject(response); - }).then(responseInterceptor, responseErrorInterceptor); + }); + promise = promise.then( + function(response) { + var value = responseInterceptor(response); + (success||noop)(value, response.headers); + return value; + }, + responseErrorInterceptor); if (!isInstanceCall) { // we are creating instance / collection Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-route.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-route.js 2013-09-20 13:29:04 UTC (rev 217) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-route.js 2013-10-15 08:29:48 UTC (rev 218) @@ -1,26 +1,10 @@ /** %%Ignore-License - * @license AngularJS v1.2.0-rc.2 + * @license AngularJS v1.2.0-rc.3 * (c) 2010-2012 Google, Inc. http://angularjs.org * License: MIT */ (function(window, angular, undefined) {'use strict'; -var copy = angular.copy, - equals = angular.equals, - extend = angular.extend, - forEach = angular.forEach, - isDefined = angular.isDefined, - isFunction = angular.isFunction, - isString = angular.isString, - jqLite = angular.element, - noop = angular.noop, - toJson = angular.toJson; - - -function inherit(parent, extra) { - return extend(new (extend(function() {}, {prototype:parent}))(), extra); -} - /** * @ngdoc overview * @name ngRoute @@ -49,6 +33,10 @@ * Requires the {@link ngRoute `ngRoute`} module to be installed. */ function $RouteProvider(){ + function inherit(parent, extra) { + return angular.extend(new (angular.extend(function() {}, {prototype:parent}))(), extra); + } + var routes = {}; /** @@ -130,8 +118,8 @@ * The custom `redirectTo` function is expected to return a string which will be used * to update `$location.path()` and `$location.search()`. * - * - `[reloadOnSearch=true]` - {boolean=} - reload route when only $location.search() - * changes. + * - `[reloadOnSearch=true]` - {boolean=} - reload route when only `$location.search()` + * or `$location.hash()` changes. * * If the option is set to `false` and url in the browser changes, then * `$routeUpdate` event is broadcasted on the root scope. @@ -147,7 +135,7 @@ * Adds a new route definition to the `$route` service. */ this.when = function(path, route) { - routes[path] = extend( + routes[path] = angular.extend( {reloadOnSearch: true}, route, path && pathRegExp(path, route) @@ -159,7 +147,7 @@ ? path.substr(0, path.length-1) : path +'/'; - routes[redirectPath] = extend( + routes[redirectPath] = angular.extend( {redirectTo: path}, pathRegExp(redirectPath, route) ); @@ -198,7 +186,9 @@ + (optional ? '' : slash) + '(?:' + (optional ? slash : '') - + (star && '(.+)?' || '([^/]+)?') + ')' + + (star && '(.+?)' || '([^/]+)') + + (optional || '') + + ')' + (optional || ''); }) .replace(/([\/$\*])/g, '\\$1'); @@ -367,6 +357,7 @@ * defined in `resolve` route property. Once all of the dependencies are resolved * `$routeChangeSuccess` is fired. * + * @param {Object} angularEvent Synthetic event object. * @param {Route} next Future route information. * @param {Route} current Current route information. */ @@ -394,6 +385,7 @@ * @description * Broadcasted if any of the resolve promises are rejected. * + * @param {Object} angularEvent Synthetic event object * @param {Route} current Current route information. * @param {Route} previous Previous route information. * @param {Route} rejection Rejection of the promise. Usually the error of the failed promise. @@ -477,9 +469,9 @@ last = $route.current; if (next && last && next.$$route === last.$$route - && equals(next.pathParams, last.pathParams) && !next.reloadOnSearch && !forceReload) { + && angular.equals(next.pathParams, last.pathParams) && !next.reloadOnSearch && !forceReload) { last.params = next.params; - copy(last.params, $routeParams); + angular.copy(last.params, $routeParams); $rootScope.$broadcast('$routeUpdate', last); } else if (next || last) { forceReload = false; @@ -487,7 +479,7 @@ $route.current = next; if (next) { if (next.redirectTo) { - if (isString(next.redirectTo)) { + if (angular.isString(next.redirectTo)) { $location.path(interpolate(next.redirectTo, next.params)).search(next.params) .replace(); } else { @@ -500,29 +492,29 @@ $q.when(next). then(function() { if (next) { - var locals = extend({}, next.resolve), + var locals = angular.extend({}, next.resolve), template, templateUrl; - forEach(locals, function(value, key) { - locals[key] = isString(value) ? $injector.get(value) : $injector.invoke(value); + angular.forEach(locals, function(value, key) { + locals[key] = angular.isString(value) ? $injector.get(value) : $injector.invoke(value); }); - if (isDefined(template = next.template)) { - if (isFunction(template)) { + if (angular.isDefined(template = next.template)) { + if (angular.isFunction(template)) { template = template(next.params); } - } else if (isDefined(templateUrl = next.templateUrl)) { - if (isFunction(templateUrl)) { + } else if (angular.isDefined(templateUrl = next.templateUrl)) { + if (angular.isFunction(templateUrl)) { templateUrl = templateUrl(next.params); } templateUrl = $sce.getTrustedResourceUrl(templateUrl); - if (isDefined(templateUrl)) { + if (angular.isDefined(templateUrl)) { next.loadedTemplateUrl = templateUrl; template = $http.get(templateUrl, {cache: $templateCache}). then(function(response) { return response.data; }); } } - if (isDefined(template)) { + if (angular.isDefined(template)) { locals['$template'] = template; } return $q.all(locals); @@ -533,7 +525,7 @@ if (next == $route.current) { if (next) { next.locals = locals; - copy(next.params, $routeParams); + angular.copy(next.params, $routeParams); } $rootScope.$broadcast('$routeChangeSuccess', next, last); } @@ -552,10 +544,10 @@ function parseRoute() { // Match a route var params, match; - forEach(routes, function(route, path) { + angular.forEach(routes, function(route, path) { if (!match && (params = switchRouteMatcher($location.path(), route))) { match = inherit(route, { - params: extend({}, $location.search(), params), + params: angular.extend({}, $location.search(), params), pathParams: params}); match.$$route = route; } @@ -569,7 +561,7 @@ */ function interpolate(string, params) { var result = []; - forEach((string||'').split(':'), function(segment, i) { + angular.forEach((string||'').split(':'), function(segment, i) { if (i === 0) { result.push(segment); } else { @@ -648,6 +640,7 @@ * The enter and leave animation occur concurrently. * * @scope + * @priority 400 * @example <example module="ngViewExample" deps="angular-route.js" animations="true"> <file name="index.html"> @@ -801,7 +794,7 @@ return { restrict: 'ECA', terminal: true, - priority: 1000, + priority: 400, transclude: 'element', compile: function(element, attr, linker) { return function(scope, $element, attr) { @@ -848,7 +841,7 @@ currentScope[current.controllerAs] = controller; } clone.data('$ngControllerController', controller); - clone.contents().data('$ngControllerController', controller); + clone.children().data('$ngControllerController', controller); } link(currentScope); Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-sanitize.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-sanitize.js 2013-09-20 13:29:04 UTC (rev 217) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-sanitize.js 2013-10-15 08:29:48 UTC (rev 218) @@ -1,5 +1,5 @@ /** %%Ignore-License - * @license AngularJS v1.2.0-rc.2 + * @license AngularJS v1.2.0-rc.3 * (c) 2010-2012 Google, Inc. http://angularjs.org * License: MIT */ @@ -140,6 +140,7 @@ BEGIN_TAG_REGEXP = /^</, BEGING_END_TAGE_REGEXP = /^<\s*\//, COMMENT_REGEXP = //g, + DOCTYPE_REGEXP = /<!DOCTYPE([^>]*?)>/i, CDATA_REGEXP = /<!\[CDATA\[(.*?)]]>/g, URI_REGEXP = /^((ftp|https?):\/\/|mailto:|tel:|#)/i, NON_ALPHANUMERIC_REGEXP = /([^\#-~| |!])/g; // Match everything outside of normal chars and " (quote character) @@ -215,14 +216,22 @@ // Comment if ( html.indexOf(""); + // comments containing -- are not allowed unless they terminate the comment + index = html.indexOf("--", 4); - if ( index >= 0 ) { + if ( index >= 0 && html.lastIndexOf("-->", index) === index) { if (handler.comment) handler.comment( html.substring( 4, index ) ); html = html.substring( index + 3 ); chars = false; } + // DOCTYPE + } else if ( DOCTYPE_REGEXP.test(html) ) { + match = html.match( DOCTYPE_REGEXP ); + if ( match ) { + html = html.replace( match[0] , ''); + chars = false; + } // end tag } else if ( BEGING_END_TAGE_REGEXP.test(html) ) { match = html.match( END_TAG_REGEXP ); Modified: sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-touch.js =================================================================== --- sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-touch.js 2013-09-20 13:29:04 UTC (rev 217) +++ sandbox/nuiton-js-angular/src/main/resources/nuiton-js-angular/extra/angular-touch.js 2013-10-15 08:29:48 UTC (rev 218) @@ -1,5 +1,5 @@ -/** - * @license AngularJS v1.2.0-rc.2 +/** %%Ignore-License + * @license AngularJS v1.2.0-rc.3 * (c) 2010-2012 Google, Inc. http://angularjs.org * License: MIT */ @@ -108,12 +108,12 @@ totalX = 0; totalY = 0; lastPos = startCoords; - eventHandlers['start'] && eventHandlers['start'](startCoords); + eventHandlers['start'] && eventHandlers['start'](startCoords, event); }); element.on('touchcancel', function(event) { active = false; - eventHandlers['cancel'] && eventHandlers['cancel'](); + eventHandlers['cancel'] && eventHandlers['cancel'](event); }); element.on('touchmove mousemove', function(event) { @@ -141,20 +141,19 @@ if (totalY > totalX) { // Allow native scrolling to take over. active = false; - eventHandlers['cancel'] && eventHandlers['cancel'](); + eventHandlers['cancel'] && eventHandlers['cancel'](event); return; } else { // Prevent the browser from scrolling. event.preventDefault(); - - eventHandlers['move'] && eventHandlers['move'](coords); + eventHandlers['move'] && eventHandlers['move'](coords, event); } }); element.on('touchend mouseup', function(event) { if (!active) return; active = false; - eventHandlers['end'] && eventHandlers['end'](getCoordinates(event)); + eventHandlers['end'] && eventHandlers['end'](getCoordinates(event), event); }); } }; @@ -398,7 +397,7 @@ } if (!angular.isDefined(attr.disabled) || attr.disabled === false) { - element.triggerHandler('click', event); + element.triggerHandler('click', [event]); } } @@ -415,9 +414,9 @@ // - On mobile browsers, the simulated "fast" click will call this. // - But the browser's follow-up slow click will be "busted" before it reaches this handler. // Therefore it's safe to use this directive on both mobile and desktop. - element.on('click', function(event) { + element.on('click', function(event, touchend) { scope.$apply(function() { - clickHandler(scope, {$event: event}); + clickHandler(scope, {$event: (touchend || event)}); }); }); @@ -524,18 +523,18 @@ } $swipe.bind(element, { - 'start': function(coords) { + 'start': function(coords, event) { startCoords = coords; valid = true; }, - 'cancel': function() { + 'cancel': function(event) { valid = false; }, - 'end': function(coords) { + 'end': function(coords, event) { if (validSwipe(coords)) { scope.$apply(function() { element.triggerHandler(eventName); - swipeHandler(scope); + swipeHandler(scope, {$event: event}); }); } }

1 0

r217 - in sandbox/nuiton-js-select2: . src/main/resources/META-INF/nuiton-js src/main/resources/nuiton-js-select2
by echatellier＠users.nuiton.org Sept. 20, 2013

Sept. 20, 2013

Author: echatellier Date: 2013-09-20 15:29:04 +0200 (Fri, 20 Sep 2013) New Revision: 217 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/217 Log: Update select2 Added: sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_bg.js sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_fa.js sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_ms.js sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_th.js Modified: sandbox/nuiton-js-select2/pom.xml sandbox/nuiton-js-select2/src/main/resources/META-INF/nuiton-js/wro-select2.xml sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2.css sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2.js sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_es.js sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_nl.js sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_pt-BR.js sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_pt-PT.js Modified: sandbox/nuiton-js-select2/pom.xml =================================================================== --- sandbox/nuiton-js-select2/pom.xml 2013-09-09 15:40:55 UTC (rev 216) +++ sandbox/nuiton-js-select2/pom.xml 2013-09-20 13:29:04 UTC (rev 217) @@ -14,7 +14,7 @@ </parent> <artifactId>nuiton-js-select2</artifactId> - <version>3.4.1-1-SNAPSHOT</version> + <version>3.4.3-1-SNAPSHOT</version> <name>Nuiton JS :: Select2</name> <description>Select2 jar packaging</description> @@ -29,9 +29,9 @@ </licenses> <scm> - <connection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-select2-3.4.1-1</connection> - <developerConnection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-select2-3.4.1-1</developerConnection> - <url>http://www.nuiton.org/repositories/browse/nuiton-js/tags/nuiton-js-select2-…</url> + <connection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-select2-3.4.3-1</connection> + <developerConnection>scm:svn:http://svn.nuiton.org/svn/nuiton-js/tags/nuiton-js-select2-3.4.3-1</developerConnection> + <url>http://www.nuiton.org/repositories/browse/nuiton-js/tags/nuiton-js-select2-…</url> </scm> <dependencies> Modified: sandbox/nuiton-js-select2/src/main/resources/META-INF/nuiton-js/wro-select2.xml =================================================================== --- sandbox/nuiton-js-select2/src/main/resources/META-INF/nuiton-js/wro-select2.xml 2013-09-09 15:40:55 UTC (rev 216) +++ sandbox/nuiton-js-select2/src/main/resources/META-INF/nuiton-js/wro-select2.xml 2013-09-20 13:29:04 UTC (rev 217) @@ -24,12 +24,17 @@ <groups xmlns="http://www.isdc.ro/wro"> <group name='select2'> <js>classpath:nuiton-js-select2/select2.js</js> + <css>classpath:nuiton-js-select2/select2.css</css> </group> - <group name='select2-ar'> + <group name='select2-ar'> <js>classpath:nuiton-js-select2/select2_locale_ar.js</js> </group> + <group name='select2-bg'> + <js>classpath:nuiton-js-select2/select2_locale_bg.js</js> + </group> + <group name='select2-ca'> <js>classpath:nuiton-js-select2/select2_locale_ca.js</js> </group> @@ -62,6 +67,10 @@ <js>classpath:nuiton-js-select2/select2_locale_eu.js</js> </group> + <group name='select2-fa'> + <js>classpath:nuiton-js-select2/select2_locale_fa.js</js> + </group> + <group name='select2-fi'> <js>classpath:nuiton-js-select2/select2_locale_fi.js</js> </group> @@ -118,6 +127,10 @@ <js>classpath:nuiton-js-select2/select2_locale_mk.js</js> </group> + <group name='select2-ms'> + <js>classpath:nuiton-js-select2/select2_locale_ms.js</js> + </group> + <group name='select2-nl'> <js>classpath:nuiton-js-select2/select2_locale_nl.js</js> </group> @@ -154,6 +167,10 @@ <js>classpath:nuiton-js-select2/select2_locale_sv.js</js> </group> + <group name='select2-th'> + <js>classpath:nuiton-js-select2/select2_locale_th.js</js> + </group> + <group name='select2-tr'> <js>classpath:nuiton-js-select2/select2_locale_tr.js</js> </group> Modified: sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2.css =================================================================== --- sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2.css 2013-09-09 15:40:55 UTC (rev 216) +++ sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2.css 2013-09-20 13:29:04 UTC (rev 217) @@ -1,5 +1,5 @@ /* %%Ignore-License -Version: 3.4.1 Timestamp: Thu Jun 27 18:02:10 PDT 2013 +Version: 3.4.3 Timestamp: Tue Sep 17 06:47:14 PDT 2013 */ .select2-container { margin: 0; @@ -14,7 +14,7 @@ .select2-container, .select2-drop, .select2-search, -.select2-search input{ +.select2-search input { /* Force border-box so that % widths fit the parent container without overlap because of margin/padding. @@ -22,9 +22,7 @@ More Info : http://www.quirksmode.org/css/box.html */ -webkit-box-sizing: border-box; /* webkit */ - -khtml-box-sizing: border-box; /* konqueror */ -moz-box-sizing: border-box; /* firefox */ - -ms-box-sizing: border-box; /* ie */ box-sizing: border-box; /* css3 */ } @@ -41,45 +39,34 @@ color: #444; text-decoration: none; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + border-radius: 4px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; + background-clip: padding-box; -webkit-touch-callout: none; -webkit-user-select: none; - -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #fff; - background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white)); - background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%); - background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%); - background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%); - background-image: -ms-linear-gradient(top, #ffffff 0%, #eeeeee 50%); + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff)); + background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%); + background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0); - background-image: linear-gradient(top, #ffffff 0%, #eeeeee 50%); + background-image: linear-gradient(top, #fff 0%, #eee 50%); } .select2-container.select2-drop-above .select2-choice { border-bottom-color: #aaa; - -webkit-border-radius:0 0 4px 4px; - -moz-border-radius:0 0 4px 4px; - border-radius:0 0 4px 4px; + border-radius: 0 0 4px 4px; - background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.9, white)); - background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 90%); - background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 90%); - background-image: -o-linear-gradient(bottom, #eeeeee 0%, white 90%); - background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 90%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); - background-image: linear-gradient(top, #eeeeee 0%,#ffffff 90%); + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff)); + background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%); + background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 90%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); + background-image: linear-gradient(top, #eee 0%, #fff 90%); } .select2-container.select2-allowclear .select2-choice .select2-chosen { @@ -93,9 +80,7 @@ white-space: nowrap; - -ms-text-overflow: ellipsis; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; + text-overflow: ellipsis; } .select2-container .select2-choice abbr { @@ -124,29 +109,21 @@ cursor: pointer; } -.select2-drop-undermask { - border: 0; - margin: 0; - padding: 0; - position: absolute; - left: 0; - top: 0; - z-index: 9998; - background-color: transparent; - filter: alpha(opacity=0); -} - .select2-drop-mask { border: 0; margin: 0; padding: 0; - position: absolute; + position: fixed; left: 0; top: 0; + min-height: 100%; + min-width: 100%; + height: auto; + width: auto; + opacity: 0; z-index: 9998; /* styles required for IE to work */ background-color: #fff; - opacity: 0; filter: alpha(opacity=0); } @@ -162,12 +139,9 @@ border: 1px solid #aaa; border-top: 0; - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); - -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); box-shadow: 0 4px 5px rgba(0, 0, 0, .15); } @@ -185,12 +159,9 @@ border-top: 1px solid #aaa; border-bottom: 0; - -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); - -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); } @@ -212,22 +183,16 @@ top: 0; border-left: 1px solid #aaa; - -webkit-border-radius: 0 4px 4px 0; - -moz-border-radius: 0 4px 4px 0; - border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; + background-clip: padding-box; background: #ccc; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee)); background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%); background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%); - background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%); - background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0); - background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%); + background-image: linear-gradient(top, #ccc 0%, #eee 60%); } .select2-container .select2-choice .select2-arrow b { @@ -263,21 +228,16 @@ font-size: 1em; border: 1px solid #aaa; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; + border-radius: 0; -webkit-box-shadow: none; - -moz-box-shadow: none; box-shadow: none; background: #fff url('select2.png') no-repeat 100% -22px; - background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); - background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); - background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); - background: url('select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); - background: url('select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%); - background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)); + background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); + background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%); + background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #fff 85%, #eee 99%); } .select2-drop.select2-drop-above .select2-search input { @@ -286,12 +246,10 @@ .select2-search input.select2-active { background: #fff url('select2-spinner.gif') no-repeat 100%; - background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); - background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); - background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); - background: url('select2-spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); - background: url('select2-spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%); - background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)); + background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%); + background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #fff 85%, #eee 99%); } .select2-container-active .select2-choice, @@ -299,33 +257,24 @@ border: 1px solid #5897fb; outline: none; - -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); - -moz-box-shadow: 0 0 5px rgba(0,0,0,.3); - box-shadow: 0 0 5px rgba(0,0,0,.3); + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3); + box-shadow: 0 0 5px rgba(0, 0, 0, .3); } .select2-dropdown-open .select2-choice { border-bottom-color: transparent; -webkit-box-shadow: 0 1px 0 #fff inset; - -moz-box-shadow: 0 1px 0 #fff inset; box-shadow: 0 1px 0 #fff inset; - -webkit-border-bottom-left-radius: 0; - -moz-border-radius-bottomleft: 0; - border-bottom-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; - -webkit-border-bottom-right-radius: 0; - -moz-border-radius-bottomright: 0; - border-bottom-right-radius: 0; - background-color: #eee; - background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee)); - background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%); - background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%); - background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%); - background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); - background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%); + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee)); + background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%); + background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); + background-image: linear-gradient(top, #fff 0%, #eee 50%); } .select2-dropdown-open.select2-drop-above .select2-choice, @@ -333,13 +282,11 @@ border: 1px solid #5897fb; border-top-color: transparent; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, white), color-stop(0.5, #eeeeee)); - background-image: -webkit-linear-gradient(center top, white 0%, #eeeeee 50%); - background-image: -moz-linear-gradient(center top, white 0%, #eeeeee 50%); - background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%); - background-image: -ms-linear-gradient(bottom, #ffffff 0%,#eeeeee 50%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); - background-image: linear-gradient(bottom, #ffffff 0%,#eeeeee 50%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #eee)); + background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%); + background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); + background-image: linear-gradient(bottom, #fff 0%, #eee 50%); } .select2-dropdown-open .select2-choice .select2-arrow { @@ -359,7 +306,7 @@ position: relative; overflow-x: hidden; overflow-y: auto; - -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .select2-results ul.select2-result-sub { @@ -394,7 +341,6 @@ -webkit-touch-callout: none; -webkit-user-select: none; - -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; @@ -415,7 +361,7 @@ } .select2-results .select2-highlighted ul { - background: white; + background: #fff; color: #000; } @@ -489,12 +435,10 @@ overflow: hidden; background-color: #fff; - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); - background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%); - background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%); - background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%); - background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%); - background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff)); + background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%); + background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%); + background-image: linear-gradient(top, #eee 1%, #fff 15%); } .select2-locked { @@ -509,9 +453,8 @@ border: 1px solid #5897fb; outline: none; - -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); - -moz-box-shadow: 0 0 5px rgba(0,0,0,.3); - box-shadow: 0 0 5px rgba(0,0,0,.3); + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3); + box-shadow: 0 0 5px rgba(0, 0, 0, .3); } .select2-container-multi .select2-choices li { float: left; @@ -533,7 +476,6 @@ outline: 0; border: 0; -webkit-box-shadow: none; - -moz-box-shadow: none; box-shadow: none; background: transparent !important; } @@ -556,33 +498,25 @@ cursor: default; border: 1px solid #aaaaaa; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; + border-radius: 3px; - -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); - -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); - box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); + -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05); + box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05); - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; + background-clip: padding-box; -webkit-touch-callout: none; -webkit-user-select: none; - -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #e4e4e4; - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0 ); - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); - background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); - background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); - background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); - background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); - background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee)); + background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); + background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); + background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); } .select2-container-multi .select2-choices .select2-search-choice .select2-chosen { cursor: default; @@ -616,7 +550,7 @@ } /* disabled styles */ -.select2-container-multi.select2-container-disabled .select2-choices{ +.select2-container-multi.select2-container-disabled .select2-choices { background-color: #f4f4f4; background-image: none; border: 1px solid #ddd; @@ -631,7 +565,7 @@ } .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { display: none; - background:none; + background: none; } /* end multiselect */ @@ -642,16 +576,17 @@ } .select2-offscreen, .select2-offscreen:focus { - clip: rect(0 0 0 0); - width: 1px; - height: 1px; - border: 0; - margin: 0; - padding: 0; - overflow: hidden; - position: absolute; - outline: 0; - left: 0px; + clip: rect(0 0 0 0) !important; + width: 1px !important; + height: 1px !important; + border: 0 !important; + margin: 0 !important; + padding: 0 !important; + overflow: hidden !important; + position: absolute !important; + outline: 0 !important; + left: 0px !important; + top: 0px !important; } .select2-display-none { Modified: sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2.js =================================================================== --- sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2.js 2013-09-09 15:40:55 UTC (rev 216) +++ sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2.js 2013-09-20 13:29:04 UTC (rev 217) @@ -1,7 +1,7 @@ -/* %%Ignore-License +/* %%Ignore-License Copyright 2012 Igor Vaynberg -Version: 3.4.1 Timestamp: Thu Jun 27 18:02:10 PDT 2013 +Version: 3.4.3 Timestamp: Tue Sep 17 06:47:14 PDT 2013 This software is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU General Public License version 2 (the "GPL License"). You may choose either license to govern your @@ -20,7 +20,7 @@ */ (function ($) { if(typeof $.fn.each2 == "undefined") { - $.fn.extend({ + $.extend($.fn, { /* * 4-10 times faster .each replacement * use it carefully, as it overrides jQuery context of element on each iteration @@ -96,12 +96,28 @@ return k >= 112 && k <= 123; } }, - MEASURE_SCROLLBAR_TEMPLATE = "<div class='select2-measure-scrollbar'></div>"; + MEASURE_SCROLLBAR_TEMPLATE = "<div class='select2-measure-scrollbar'></div>", + DIACRITICS = {"\u24B6":"A","\uFF21":"A","\u00C0":"A","\u00C1":"A","\u00C2":"A","\u1EA6":"A","\u1EA4":"A","\u1EAA":"A","\u1EA8":"A","\u00C3":"A","\u0100":"A","\u0102":"A","\u1EB0":"A","\u1EAE":"A","\u1EB4":"A","\u1EB2":"A","\u0226":"A","\u01E0":"A","\u00C4":"A","\u01DE":"A","\u1EA2":"A","\u00C5":"A","\u01FA":"A","\u01CD":"A","\u0200":"A","\u0202":"A","\u1EA0":"A","\u1EAC":"A","\u1EB6":"A","\u1E00":"A","\u0104":"A","\u023A":"A","\u2C6F":"A","\uA732":"AA","\u00C6":"AE","\u01FC":"AE","\u01E2":"AE","\uA734":"AO","\uA736":"AU","\uA738":"AV","\uA73A":"AV","\uA73C":"AY","\u24B7":"B","\uFF22":"B","\u1E02":"B","\u1E04":"B","\u1E06":"B","\u0243":"B","\u0182":"B","\u0181":"B","\u24B8":"C","\uFF23":"C","\u0106":"C","\u0108":"C","\u010A":"C","\u010C":"C","\u00C7":"C","\u1E08":"C","\u0187":"C","\u023B":"C","\uA73E":"C","\u24B9":"D","\uFF24":"D","\u1E0A":"D","\u010E":"D","\u1E0C":"D","\u1E10":"D","\u1E12":"D","\u1E0E":"D","\u0110":"D","\u018B":"D","\u018A":"D","\u0189":"D","\uA779":"D","\u01F1":"DZ","\u01C4":"DZ","\u01F2":"Dz","\u01C5":"Dz","\u24BA":"E","\uFF25":"E","\u00C8":"E","\u00C9":"E","\u00CA":"E","\u1EC0":"E","\u1EBE":"E","\u1EC4":"E","\u1EC2":"E","\u1EBC":"E","\u0112":"E","\u1E14":"E","\u1E16":"E","\u0114":"E","\u0116":"E","\u00CB":"E","\u1EBA":"E","\u011A":"E","\u0204":"E","\u0206":"E","\u1EB8":"E","\u1EC6":"E","\u0228":"E","\u1E1C":"E","\u0118":"E","\u1E18":"E","\u1E1A":"E","\u0190":"E","\u018E":"E","\u24BB":"F","\uFF26":"F","\u1E1E":"F","\u0191":"F","\uA77B":"F","\u24BC":"G","\uFF27":"G","\u01F4":"G","\u011C":"G","\u1E20":"G","\u011E":"G","\u0120":"G","\u01E6":"G","\u0122":"G","\u01E4":"G","\u0193":"G","\uA7A0":"G","\uA77D":"G","\uA77E":"G","\u24BD":"H","\uFF28":"H","\u0124":"H","\u1E22":"H","\u1E26":"H","\u021E":"H","\u1E24":"H","\u1E28":"H","\u1E2A":"H","\u0126":"H","\u2C67":"H","\u2C75":"H","\uA78D":"H","\u24BE":"I","\uFF29":"I","\u00CC":"I","\u00CD":"I","\u00CE":"I","\u0128":"I","\u012A":"I","\u012C":"I","\u0130":"I","\u00CF":"I","\u1E2E":"I","\u1EC8":"I","\u01CF":"I","\u0208":"I","\u020A":"I","\u1ECA":"I","\u012E":"I","\u1E2C":"I","\u0197":"I","\u24BF":"J","\uFF2A":"J","\u0134":"J","\u0248":"J","\u24C0":"K","\uFF2B":"K","\u1E30":"K","\u01E8":"K","\u1E32":"K","\u0136":"K","\u1E34":"K","\u0198":"K","\u2C69":"K","\uA740":"K","\uA742":"K","\uA744":"K","\uA7A2":"K","\u24C1":"L","\uFF2C":"L","\u013F":"L","\u0139":"L","\u013D":"L","\u1E36":"L","\u1E38":"L","\u013B":"L","\u1E3C":"L","\u1E3A":"L","\u0141":"L","\u023D":"L","\u2C62":"L","\u2C60":"L","\uA748":"L","\uA746":"L","\uA780":"L","\u01C7":"LJ","\u01C8":"Lj","\u24C2":"M","\uFF2D":"M","\u1E3E":"M","\u1E40":"M","\u1E42":"M","\u2C6E":"M","\u019C":"M","\u24C3":"N","\uFF2E":"N","\u01F8":"N","\u0143":"N","\u00D1":"N","\u1E44":"N","\u0147":"N","\u1E46":"N","\u0145":"N","\u1E4A":"N","\u1E48":"N","\u0220":"N","\u019D":"N","\uA790":"N","\uA7A4":"N","\u01CA":"NJ","\u01CB":"Nj","\u24C4":"O","\uFF2F":"O","\u00D2":"O","\u00D3":"O","\u00D4":"O","\u1ED2":"O","\u1ED0":"O","\u1ED6":"O","\u1ED4":"O","\u00D5":"O","\u1E4C":"O","\u022C":"O","\u1E4E":"O","\u014C":"O","\u1E50":"O","\u1E52":"O","\u014E":"O","\u022E":"O","\u0230":"O","\u00D6":"O","\u022A":"O","\u1ECE":"O","\u0150":"O","\u01D1":"O","\u020C":"O","\u020E":"O","\u01A0":"O","\u1EDC":"O","\u1EDA":"O","\u1EE0":"O","\u1EDE":"O","\u1EE2":"O","\u1ECC":"O","\u1ED8":"O","\u01EA":"O","\u01EC":"O","\u00D8":"O","\u01FE":"O","\u0186":"O","\u019F":"O","\uA74A":"O","\uA74C":"O","\u01A2":"OI","\uA74E":"OO","\u0222":"OU","\u24C5":"P","\uFF30":"P","\u1E54":"P","\u1E56":"P","\u01A4":"P","\u2C63":"P","\uA750":"P","\uA752":"P","\uA754":"P","\u24C6":"Q","\uFF31":"Q","\uA756":"Q","\uA758":"Q","\u024A":"Q","\u24C7":"R","\uFF32":"R","\u0154":"R","\u1E58":"R","\u0158":"R","\u0210":"R","\u0212":"R","\u1E5A":"R","\u1E5C":"R","\u0156":"R","\u1E5E":"R","\u024C":"R","\u2C64":"R","\uA75A":"R","\uA7A6":"R","\uA782":"R","\u24C8":"S","\uFF33":"S","\u1E9E":"S","\u015A":"S","\u1E64":"S","\u015C":"S","\u1E60":"S","\u0160":"S","\u1E66":"S","\u1E62":"S","\u1E68":"S","\u0218":"S","\u015E":"S","\u2C7E":"S","\uA7A8":"S","\uA784":"S","\u24C9":"T","\uFF34":"T","\u1E6A":"T","\u0164":"T","\u1E6C":"T","\u021A":"T","\u0162":"T","\u1E70":"T","\u1E6E":"T","\u0166":"T","\u01AC":"T","\u01AE":"T","\u023E":"T","\uA786":"T","\uA728":"TZ","\u24CA":"U","\uFF35":"U","\u00D9":"U","\u00DA":"U","\u00DB":"U","\u0168":"U","\u1E78":"U","\u016A":"U","\u1E7A":"U","\u016C":"U","\u00DC":"U","\u01DB":"U","\u01D7":"U","\u01D5":"U","\u01D9":"U","\u1EE6":"U","\u016E":"U","\u0170":"U","\u01D3":"U","\u0214":"U","\u0216":"U","\u01AF":"U","\u1EEA":"U","\u1EE8":"U","\u1EEE":"U","\u1EEC":"U","\u1EF0":"U","\u1EE4":"U","\u1E72":"U","\u0172":"U","\u1E76":"U","\u1E74":"U","\u0244":"U","\u24CB":"V","\uFF36":"V","\u1E7C":"V","\u1E7E":"V","\u01B2":"V","\uA75E":"V","\u0245":"V","\uA760":"VY","\u24CC":"W","\uFF37":"W","\u1E80":"W","\u1E82":"W","\u0174":"W","\u1E86":"W","\u1E84":"W","\u1E88":"W","\u2C72":"W","\u24CD":"X","\uFF38":"X","\u1E8A":"X","\u1E8C":"X","\u24CE":"Y","\uFF39":"Y","\u1EF2":"Y","\u00DD":"Y","\u0176":"Y","\u1EF8":"Y","\u0232":"Y","\u1E8E":"Y","\u0178":"Y","\u1EF6":"Y","\u1EF4":"Y","\u01B3":"Y","\u024E":"Y","\u1EFE":"Y","\u24CF":"Z","\uFF3A":"Z","\u0179":"Z","\u1E90":"Z","\u017B":"Z","\u017D":"Z","\u1E92":"Z","\u1E94":"Z","\u01B5":"Z","\u0224":"Z","\u2C7F":"Z","\u2C6B":"Z","\uA762":"Z","\u24D0":"a","\uFF41":"a","\u1E9A":"a","\u00E0":"a","\u00E1":"a","\u00E2":"a","\u1EA7":"a","\u1EA5":"a","\u1EAB":"a","\u1EA9":"a","\u00E3":"a","\u0101":"a","\u0103":"a","\u1EB1":"a","\u1EAF":"a","\u1EB5":"a","\u1EB3":"a","\u0227":"a","\u01E1":"a","\u00E4":"a","\u01DF":"a","\u1EA3":"a","\u00E5":"a","\u01FB":"a","\u01CE":"a","\u0201":"a","\u0203":"a","\u1EA1":"a","\u1EAD":"a","\u1EB7":"a","\u1E01":"a","\u0105":"a","\u2C65":"a","\u0250":"a","\uA733":"aa","\u00E6":"ae","\u01FD":"ae","\u01E3":"ae","\uA735":"ao","\uA737":"au","\uA739":"av","\uA73B":"av","\uA73D":"ay","\u24D1":"b","\uFF42":"b","\u1E03":"b","\u1E05":"b","\u1E07":"b","\u0180":"b","\u0183":"b","\u0253":"b","\u24D2":"c","\uFF43":"c","\u0107":"c","\u0109":"c","\u010B":"c","\u010D":"c","\u00E7":"c","\u1E09":"c","\u0188":"c","\u023C":"c","\uA73F":"c","\u2184":"c","\u24D3":"d","\uFF44":"d","\u1E0B":"d","\u010F":"d","\u1E0D":"d","\u1E11":"d","\u1E13":"d","\u1E0F":"d","\u0111":"d","\u018C":"d","\u0256":"d","\u0257":"d","\uA77A":"d","\u01F3":"dz","\u01C6":"dz","\u24D4":"e","\uFF45":"e","\u00E8":"e","\u00E9":"e","\u00EA":"e","\u1EC1":"e","\u1EBF":"e","\u1EC5":"e","\u1EC3":"e","\u1EBD":"e","\u0113":"e","\u1E15":"e","\u1E17":"e","\u0115":"e","\u0117":"e","\u00EB":"e","\u1EBB":"e","\u011B":"e","\u0205":"e","\u0207":"e","\u1EB9":"e","\u1EC7":"e","\u0229":"e","\u1E1D":"e","\u0119":"e","\u1E19":"e","\u1E1B":"e","\u0247":"e","\u025B":"e","\u01DD":"e","\u24D5":"f","\uFF46":"f","\u1E1F":"f","\u0192":"f","\uA77C":"f","\u24D6":"g","\uFF47":"g","\u01F5":"g","\u011D":"g","\u1E21":"g","\u011F":"g","\u0121":"g","\u01E7":"g","\u0123":"g","\u01E5":"g","\u0260":"g","\uA7A1":"g","\u1D79":"g","\uA77F":"g","\u24D7":"h","\uFF48":"h","\u0125":"h","\u1E23":"h","\u1E27":"h","\u021F":"h","\u1E25":"h","\u1E29":"h","\u1E2B":"h","\u1E96":"h","\u0127":"h","\u2C68":"h","\u2C76":"h","\u0265":"h","\u0195":"hv","\u24D8":"i","\uFF49":"i","\u00EC":"i","\u00ED":"i","\u00EE":"i","\u0129":"i","\u012B":"i","\u012D":"i","\u00EF":"i","\u1E2F":"i","\u1EC9":"i","\u01D0":"i","\u0209":"i","\u020B":"i","\u1ECB":"i","\u012F":"i","\u1E2D":"i","\u0268":"i","\u0131":"i","\u24D9":"j","\uFF4A":"j","\u0135":"j","\u01F0":"j","\u0249":"j","\u24DA":"k","\uFF4B":"k","\u1E31":"k","\u01E9":"k","\u1E33":"k","\u0137":"k","\u1E35":"k","\u0199":"k","\u2C6A":"k","\uA741":"k","\uA743":"k","\uA745":"k","\uA7A3":"k","\u24DB":"l","\uFF4C":"l","\u0140":"l","\u013A":"l","\u013E":"l","\u1E37":"l","\u1E39":"l","\u013C":"l","\u1E3D":"l","\u1E3B":"l","\u017F":"l","\u0142":"l","\u019A":"l","\u026B":"l","\u2C61":"l","\uA749":"l","\uA781":"l","\uA747":"l","\u01C9":"lj","\u24DC":"m","\uFF4D":"m","\u1E3F":"m","\u1E41":"m","\u1E43":"m","\u0271":"m","\u026F":"m","\u24DD":"n","\uFF4E":"n","\u01F9":"n","\u0144":"n","\u00F1":"n","\u1E45":"n","\u0148":"n","\u1E47":"n","\u0146":"n","\u1E4B":"n","\u1E49":"n","\u019E":"n","\u0272":"n","\u0149":"n","\uA791":"n","\uA7A5":"n","\u01CC":"nj","\u24DE":"o","\uFF4F":"o","\u00F2":"o","\u00F3":"o","\u00F4":"o","\u1ED3":"o","\u1ED1":"o","\u1ED7":"o","\u1ED5":"o","\u00F5":"o","\u1E4D":"o","\u022D":"o","\u1E4F":"o","\u014D":"o","\u1E51":"o","\u1E53":"o","\u014F":"o","\u022F":"o","\u0231":"o","\u00F6":"o","\u022B":"o","\u1ECF":"o","\u0151":"o","\u01D2":"o","\u020D":"o","\u020F":"o","\u01A1":"o","\u1EDD":"o","\u1EDB":"o","\u1EE1":"o","\u1EDF":"o","\u1EE3":"o","\u1ECD":"o","\u1ED9":"o","\u01EB":"o","\u01ED":"o","\u00F8":"o","\u01FF":"o","\u0254":"o","\uA74B":"o","\uA74D":"o","\u0275":"o","\u01A3":"oi","\u0223":"ou","\uA74F":"oo","\u24DF":"p","\uFF50":"p","\u1E55":"p","\u1E57":"p","\u01A5":"p","\u1D7D":"p","\uA751":"p","\uA753":"p","\uA755":"p","\u24E0":"q","\uFF51":"q","\u024B":"q","\uA757":"q","\uA759":"q","\u24E1":"r","\uFF52":"r","\u0155":"r","\u1E59":"r","\u0159":"r","\u0211":"r","\u0213":"r","\u1E5B":"r","\u1E5D":"r","\u0157":"r","\u1E5F":"r","\u024D":"r","\u027D":"r","\uA75B":"r","\uA7A7":"r","\uA783":"r","\u24E2":"s","\uFF53":"s","\u00DF":"s","\u015B":"s","\u1E65":"s","\u015D":"s","\u1E61":"s","\u0161":"s","\u1E67":"s","\u1E63":"s","\u1E69":"s","\u0219":"s","\u015F":"s","\u023F":"s","\uA7A9":"s","\uA785":"s","\u1E9B":"s","\u24E3":"t","\uFF54":"t","\u1E6B":"t","\u1E97":"t","\u0165":"t","\u1E6D":"t","\u021B":"t","\u0163":"t","\u1E71":"t","\u1E6F":"t","\u0167":"t","\u01AD":"t","\u0288":"t","\u2C66":"t","\uA787":"t","\uA729":"tz","\u24E4":"u","\uFF55":"u","\u00F9":"u","\u00FA":"u","\u00FB":"u","\u0169":"u","\u1E79":"u","\u016B":"u","\u1E7B":"u","\u016D":"u","\u00FC":"u","\u01DC":"u","\u01D8":"u","\u01D6":"u","\u01DA":"u","\u1EE7":"u","\u016F":"u","\u0171":"u","\u01D4":"u","\u0215":"u","\u0217":"u","\u01B0":"u","\u1EEB":"u","\u1EE9":"u","\u1EEF":"u","\u1EED":"u","\u1EF1":"u","\u1EE5":"u","\u1E73":"u","\u0173":"u","\u1E77":"u","\u1E75":"u","\u0289":"u","\u24E5":"v","\uFF56":"v","\u1E7D":"v","\u1E7F":"v","\u028B":"v","\uA75F":"v","\u028C":"v","\uA761":"vy","\u24E6":"w","\uFF57":"w","\u1E81":"w","\u1E83":"w","\u0175":"w","\u1E87":"w","\u1E85":"w","\u1E98":"w","\u1E89":"w","\u2C73":"w","\u24E7":"x","\uFF58":"x","\u1E8B":"x","\u1E8D":"x","\u24E8":"y","\uFF59":"y","\u1EF3":"y","\u00FD":"y","\u0177":"y","\u1EF9":"y","\u0233":"y","\u1E8F":"y","\u00FF":"y","\u1EF7":"y","\u1E99":"y","\u1EF5":"y","\u01B4":"y","\u024F":"y","\u1EFF":"y","\u24E9":"z","\uFF5A":"z","\u017A":"z","\u1E91":"z","\u017C":"z","\u017E":"z","\u1E93":"z","\u1E95":"z","\u01B6":"z","\u0225":"z","\u0240":"z","\u2C6C":"z","\uA763":"z"}; + $document = $(document); nextUid=(function() { var counter=1; return function() { return counter++; }; }()); + + function stripDiacritics(str) { + var ret, i, l, c; + + if (!str || str.length < 1) return str; + + ret = ""; + for (i = 0, l = str.length; i < l; i++) { + c = str.charAt(i); + ret += DIACRITICS[c] || c; + } + return ret; + } + function indexOf(value, array) { var i = 0, l = array.length; for (; i < l; i = i + 1) { @@ -343,7 +359,7 @@ function markMatch(text, term, markup, escapeMarkup) { - var match=text.toUpperCase().indexOf(term.toUpperCase()), + var match=stripDiacritics(text.toUpperCase()).indexOf(stripDiacritics(term.toUpperCase())), tl=term.length; if (match<0) { @@ -392,7 +408,6 @@ */ function ajax(options) { var timeout, // current scheduled but not yet executed request - requestSequence = 0, // sequence used to drop out-of-order responses handler = null, quietMillis = options.quietMillis || 100, ajaxUrl = options.url, @@ -401,9 +416,7 @@ return function (query) { window.clearTimeout(timeout); timeout = window.setTimeout(function () { - requestSequence += 1; // increment the sequence - var requestNumber = requestSequence, // this request's sequence number - data = options.data, // ajax data function + var data = options.data, // ajax data function url = ajaxUrl, // ajax url string or function transport = options.transport || $.fn.select2.ajaxDefaults.transport, // deprecated - to be removed in 4.0 - use params instead @@ -433,9 +446,6 @@ dataType: options.dataType, data: data, success: function (data) { - if (requestNumber < requestSequence) { - return; - } // TODO - replace query.page with query so users have access to term, page, etc. var results = options.results(data, query.page); query.callback(results); @@ -668,6 +678,7 @@ syncCssClasses(this.container, this.opts.element, this.opts.adaptContainerCssClass); + this.container.attr("style", opts.element.attr("style")); this.container.css(evaluate(opts.containerCss)); this.container.addClass(evaluate(opts.containerCssClass)); @@ -677,22 +688,31 @@ this.opts.element .data("select2", this) .attr("tabindex", "-1") - .before(this.container); + .before(this.container) + .on("click.select2", killEvent); // do not leak click events + this.container.data("select2", this); this.dropdown = this.container.find(".select2-drop"); + + syncCssClasses(this.dropdown, this.opts.element, this.opts.adaptDropdownCssClass); + this.dropdown.addClass(evaluate(opts.dropdownCssClass)); this.dropdown.data("select2", this); + this.dropdown.on("click", killEvent); this.results = results = this.container.find(resultsSelector); this.search = search = this.container.find("input.select2-input"); + this.queryCount = 0; this.resultsPage = 0; this.context = null; // initialize the container this.initContainer(); + this.container.on("click", killEvent); + installFilteredMouseMove(this.results); this.dropdown.on("mousemove-filtered touchstart touchmove touchend", resultsSelector, this.bind(this.highlightUnderEvent)); @@ -758,15 +778,19 @@ // Calculate size of scrollbar scrollBarDimensions = scrollBarDimensions || measureScrollbar(); - this.autofocus = opts.element.prop("autofocus") + this.autofocus = opts.element.prop("autofocus"); opts.element.prop("autofocus", false); if (this.autofocus) this.focus(); + + this.nextSearchTerm = undefined; }, // abstract destroy: function () { var element=this.opts.element, select2 = element.data("select2"); + this.close(); + if (this.propertyObserver) { delete this.propertyObserver; this.propertyObserver = null; } if (select2 !== undefined) { @@ -944,16 +968,17 @@ } else if ("tags" in opts) { opts.query = tags(opts.tags); if (opts.createSearchChoice === undefined) { - opts.createSearchChoice = function (term) { return {id: term, text: term}; }; + opts.createSearchChoice = function (term) { return {id: $.trim(term), text: $.trim(term)}; }; } if (opts.initSelection === undefined) { opts.initSelection = function (element, callback) { var data = []; $(splitVal(element.val(), opts.separator)).each(function () { - var id = this, text = this, tags=opts.tags; + var obj = { id: this, text: this }, + tags = opts.tags; if ($.isFunction(tags)) tags=tags(); - $(tags).each(function() { if (equal(this.id, id)) { text = this.text; return false; } }); - data.push({id: id, text: text}); + $(tags).each(function() { if (equal(this.id, obj.id)) { obj = this; return false; } }); + data.push(obj); }); callback(data); @@ -1075,15 +1100,19 @@ // abstract enable: function(enabled) { if (enabled === undefined) enabled = true; - if (this._enabled === enabled) return false; + if (this._enabled === enabled) return; this._enabled = enabled; this.opts.element.prop("disabled", !enabled); this.enableInterface(); - return true; }, // abstract + disable: function() { + this.enable(false); + }, + + // abstract readonly: function(enabled) { if (enabled === undefined) enabled = false; if (this._readonly === enabled) return false; @@ -1244,7 +1273,7 @@ if (self.opts.selectOnBlur) { self.selectHighlighted({noFocus: true}); } - self.close(); + self.close({focus:false}); e.preventDefault(); e.stopPropagation(); } @@ -1261,10 +1290,9 @@ this.dropdown.attr("id", "select2-drop"); // show the elements - maskCss=_makeMaskCss(); + mask.show(); - mask.css(maskCss).show(); - + this.positionDropdown(); this.dropdown.show(); this.positionDropdown(); @@ -1275,18 +1303,11 @@ var that = this; this.container.parents().add(window).each(function () { $(this).on(resize+" "+scroll+" "+orient, function (e) { - var maskCss=_makeMaskCss(); - $("#select2-drop-mask").css(maskCss); that.positionDropdown(); }); }); - function _makeMaskCss() { - return { - width : Math.max(document.documentElement.scrollWidth, $(window).width()), - height : Math.max(document.documentElement.scrollHeight, $(window).height()) - } - } + }, // abstract @@ -1306,7 +1327,7 @@ $("#select2-drop-mask").hide(); this.dropdown.removeAttr("id"); // only the active dropdown has the select2-drop id this.dropdown.hide(); - this.container.removeClass("select2-dropdown-open"); + this.container.removeClass("select2-dropdown-open").removeClass("select2-container-active"); this.results.empty(); @@ -1381,7 +1402,7 @@ // abstract findHighlightableChoices: function() { - return this.results.find(".select2-result-selectable:not(.select2-selected):not(.select2-disabled)"); + return this.results.find(".select2-result-selectable:not(.select2-disabled)"); }, // abstract @@ -1412,7 +1433,7 @@ if (index >= choices.length) index = choices.length - 1; if (index < 0) index = 0; - this.results.find(".select2-highlighted").removeClass("select2-highlighted"); + this.removeHighlight(); choice = $(choices[index]); choice.addClass("select2-highlighted"); @@ -1425,6 +1446,10 @@ } }, + removeHighlight: function() { + this.results.find(".select2-highlighted").removeClass("select2-highlighted"); + }, + // abstract countSelectableResults: function() { return this.findHighlightableChoices().length; @@ -1437,8 +1462,8 @@ var choices = this.findHighlightableChoices(); this.highlight(choices.index(el)); } else if (el.length == 0) { - // if we are over an unselectable item remove al highlights - this.results.find(".select2-highlighted").removeClass("select2-highlighted"); + // if we are over an unselectable item remove all highlights + this.removeHighlight(); } }, @@ -1482,6 +1507,7 @@ self.positionDropdown(); self.resultsPage = page; self.context = data.context; + this.opts.element.trigger({ type: "select2-loaded", items: data }); })}); } }, @@ -1505,7 +1531,9 @@ self = this, input, term = search.val(), - lastTerm=$.data(this.container, "select2-last-term"); + lastTerm = $.data(this.container, "select2-last-term"), + // sequence number used to drop out-of-order responses + queryNumber; // prevent duplicate queries against the same term if (initial !== true && lastTerm && equal(term, lastTerm)) return; @@ -1527,6 +1555,8 @@ postRender(); } + queryNumber = ++this.queryCount; + var maxSelSize = this.getMaximumSelectionSize(); if (maxSelSize >=1) { data = this.data(); @@ -1561,6 +1591,8 @@ search.addClass("select2-active"); + this.removeHighlight(); + // give the tokenizer a chance to pre-process the input input = this.tokenize(); if (input != undefined && input != null) { @@ -1578,6 +1610,11 @@ callback: this.bind(function (data) { var def; // default choice + // ignore old responses + if (queryNumber != this.queryCount) { + return; + } + // ignore a response if the select2 has been closed before it was received if (!this.opened()) { this.search.removeClass("select2-active"); @@ -1705,7 +1742,7 @@ attrs = style.split(';'); for (i = 0, l = attrs.length; i < l; i = i + 1) { matches = attrs[i].replace(/\s/g, '') - .match(/width:(([-+]?([0-9]*\.)?[0-9]+)(px|em|ex|%|in|cm|mm|pt|pc))/i); + .match(/[^-]width:(([-+]?([0-9]*\.)?[0-9]+)(px|em|ex|%|in|cm|mm|pt|pc))/i); if (matches !== null && matches.length >= 1) return matches[1]; } @@ -1795,17 +1832,31 @@ el.setSelectionRange(len, len); } + // initializes search's value with nextSearchTerm (if defined by user) + // ignore nextSearchTerm if the dropdown is opened by the user pressing a letter + if(this.search.val() === "") { + if(this.nextSearchTerm != undefined){ + this.search.val(this.nextSearchTerm); + this.search.select(); + } + } + this.focusser.prop("disabled", true).val(""); this.updateResults(true); this.opts.element.trigger($.Event("select2-open")); }, // single - close: function () { + close: function (params) { if (!this.opened()) return; this.parent.close.apply(this, arguments); + + params = params || {focus: true}; this.focusser.removeAttr("disabled"); - this.focusser.focus(); + + if (params.focus) { + this.focusser.focus(); + } }, // single @@ -1831,6 +1882,13 @@ }, // single + destroy: function() { + $("label[for='" + this.focusser.attr('id') + "']") + .attr('for', this.opts.element.attr("id")); + this.parent.destroy.apply(this, arguments); + }, + + // single initContainer: function () { var selection, @@ -1992,6 +2050,11 @@ clear: function(triggerChange) { var data=this.selection.data("select2-data"); if (data) { // guard against queued quick consecutive clicks + var evt = $.Event("select2-clearing"); + this.opts.element.trigger(evt); + if (evt.isDefaultPrevented()) { + return; + } var placeholderOption = this.getPlaceholderOption(); this.opts.element.val(placeholderOption ? placeholderOption.val() : ""); this.selection.find(".select2-chosen").empty(); @@ -2012,7 +2075,7 @@ initSelection: function () { var selected; if (this.isPlaceholderOptionSelected()) { - this.updateSelection([]); + this.updateSelection(null); this.close(); this.setPlaceholder(); } else { @@ -2029,10 +2092,11 @@ isPlaceholderOptionSelected: function() { var placeholderOption; - return ((placeholderOption = this.getPlaceholderOption()) !== undefined && placeholderOption.is(':selected')) || - (this.opts.element.val() === "") || - (this.opts.element.val() === undefined) || - (this.opts.element.val() === null); + if (!this.getPlaceholder()) return false; // no placeholder specified so no option should be considered + return ((placeholderOption = this.getPlaceholderOption()) !== undefined && placeholderOption.is(':selected')) + || (this.opts.element.val() === "") + || (this.opts.element.val() === undefined) + || (this.opts.element.val() === null); }, // single @@ -2157,10 +2221,11 @@ this.opts.element.trigger({ type: "select2-selected", val: this.id(data), choice: data }); + this.nextSearchTerm = this.opts.nextSearchTerm(data, this.search.val()); this.close(); if (!options || !options.noFocus) - this.selection.focus(); + this.focusser.focus(); if (!equal(old, this.id(data))) { this.triggerChange({added:data,removed:oldData}); } }, @@ -2173,7 +2238,9 @@ this.selection.data("select2-data", data); container.empty(); - formatted=this.opts.formatSelection(data, container, this.opts.escapeMarkup); + if (data !== null) { + formatted=this.opts.formatSelection(data, container, this.opts.escapeMarkup); + } if (formatted !== undefined) { container.append(formatted); } @@ -2247,15 +2314,19 @@ }, // single - data: function(value, triggerChange) { - var data; + data: function(value) { + var data, + triggerChange = false; if (arguments.length === 0) { data = this.selection.data("select2-data"); if (data == undefined) data = null; return data; } else { - if (!value || value === "") { + if (arguments.length > 1) { + triggerChange = arguments[1]; + } + if (!value) { this.clear(triggerChange); } else { data = this.data(); @@ -2278,7 +2349,7 @@ }).html([ "<ul class='select2-choices'>", " <li class='select2-search-field'>", - " <input type='text' autocomplete='off' autocorrect='off' autocapitilize='off' spellcheck='false' class='select2-input'>", + " <input type='text' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' class='select2-input'>", " </li>", "</ul>", "<div class='select2-drop select2-drop-multi select2-display-none'>", @@ -2365,6 +2436,13 @@ }, // multi + destroy: function() { + $("label[for='" + this.search.attr('id') + "']") + .attr('for', this.opts.element.attr("id")); + this.parent.destroy.apply(this, arguments); + }, + + // multi initContainer: function () { var selector = ".select2-choices", selection; @@ -2373,11 +2451,11 @@ this.selection = selection = this.container.find(selector); var _this = this; - this.selection.on("mousedown", ".select2-search-choice", function (e) { + this.selection.on("click", ".select2-search-choice:not(.select2-locked)", function (e) { //killEvent(e); _this.search[0].focus(); _this.selectChoice($(this)); - }) + }); // rewrite labels from original element to focusser this.search.attr("id", "s2id_autogen"+nextUid()); @@ -2661,7 +2739,7 @@ this.opts.element.trigger({ type: "selected", val: this.id(data), choice: data }); - if (this.select || !this.opts.closeOnSelect) this.postprocessResults(); + if (this.select || !this.opts.closeOnSelect) this.postprocessResults(data, false, this.opts.closeOnSelect===true); if (this.opts.closeOnSelect) { this.close(); @@ -2770,9 +2848,7 @@ return; } - index = indexOf(this.id(data), val); - - if (index >= 0) { + while((index = indexOf(this.id(data), val)) >= 0) { val.splice(index, 1); this.setVal(val); if (this.select) this.postprocessResults(); @@ -2853,7 +2929,7 @@ searchWidth = minimumWidth; } - this.search.width(searchWidth); + this.search.width(Math.floor(searchWidth)); }, // multi @@ -2945,7 +3021,7 @@ self.updateSelection(data); self.clearSearch(); if (triggerChange) { - self.triggerChange(this.buildChangeDetails(oldData, this.data())); + self.triggerChange(self.buildChangeDetails(oldData, this.data())); } }); } @@ -3012,8 +3088,9 @@ opts, select2, method, value, multiple, - allowedMethods = ["val", "destroy", "opened", "open", "close", "focus", "isFocused", "container", "dropdown", "onSortStart", "onSortEnd", "enable", "readonly", "positionDropdown", "data", "search"], - valueMethods = ["val", "opened", "isFocused", "container", "data"], + allowedMethods = ["val", "destroy", "opened", "open", "close", "focus", "isFocused", "container", "dropdown", "onSortStart", "onSortEnd", "enable", "disable", "readonly", "positionDropdown", "data", "search"], + valueMethods = ["opened", "isFocused", "container", "dropdown"], + propertyMethods = ["val", "data"], methodsMap = { search: "externalSearch" }; this.each(function () { @@ -3051,8 +3128,9 @@ value = select2[method].apply(select2, args.slice(1)); } - if (indexOf(args[0], valueMethods) >= 0) { - return false; + if (indexOf(args[0], valueMethods) >= 0 + || (indexOf(args[0], propertyMethods) && args.length == 1)) { + return false; // abort the iteration, ready to return first matched value } } else { throw "Invalid arguments to select2 plugin: " + args; @@ -3096,7 +3174,7 @@ maximumSelectionSize: 0, id: function (e) { return e.id; }, matcher: function(term, text) { - return (''+text).toUpperCase().indexOf((''+term).toUpperCase()) >= 0; + return stripDiacritics(''+text).toUpperCase().indexOf(stripDiacritics(''+term).toUpperCase()) >= 0; }, separator: ",", tokenSeparators: [], @@ -3105,7 +3183,8 @@ blurOnChange: false, selectOnBlur: false, adaptContainerCssClass: function(c) { return c; }, - adaptDropdownCssClass: function(c) { return null; } + adaptDropdownCssClass: function(c) { return null; }, + nextSearchTerm: function(selectedObject, currentSearchTerm) { return undefined; } }; $.fn.select2.ajaxDefaults = { @@ -3126,7 +3205,8 @@ }, util: { debounce: debounce, markMatch: markMatch, - escapeMarkup: defaultEscapeMarkup + escapeMarkup: defaultEscapeMarkup, + stripDiacritics: stripDiacritics }, "class": { "abstract": AbstractSelect2, "single": SingleSelect2, Added: sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_bg.js =================================================================== --- sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_bg.js (rev 0) +++ sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_bg.js 2013-09-20 13:29:04 UTC (rev 217) @@ -0,0 +1,17 @@ +/** %%Ignore-License + * Select2 <Language> translation. + * + * Author: Lubomir Vikev <lubomirvikev(a)gmail.com> + */ +(function ($) { + "use strict"; + + $.extend($.fn.select2.defaults, { + formatNoMatches: function () { return "Няма намерени съвпадения"; }, + formatInputTooShort: function (input, min) { var n = min - input.length; return "Моля въведете още " + n + " символ" + (n == 1 ? "" : "а"); }, + formatInputTooLong: function (input, max) { var n = input.length - max; return "Моля въведете с " + n + " по-малко символ" + (n == 1? "" : "а"); }, + formatSelectionTooBig: function (limit) { return "Можете да направите до " + limit + (limit == 1 ? " избор" : " избора"); }, + formatLoadMore: function (pageNumber) { return "Зареждат се още..."; }, + formatSearching: function () { return "Търсене..."; } + }); +})(jQuery); Modified: sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_es.js =================================================================== --- sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_es.js 2013-09-09 15:40:55 UTC (rev 216) +++ sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_es.js 2013-09-20 13:29:04 UTC (rev 217) @@ -6,10 +6,10 @@ $.extend($.fn.select2.defaults, { formatNoMatches: function () { return "No se encontraron resultados"; }, - formatInputTooShort: function (input, min) { var n = min - input.length; return "Por favor adicione " + n + " caracter" + (n == 1? "" : "es"); }, - formatInputTooLong: function (input, max) { var n = input.length - max; return "Por favor elimine " + n + " caracter" + (n == 1? "" : "es"); }, - formatSelectionTooBig: function (limit) { return "Solo puede seleccionar " + limit + " elemento" + (limit == 1 ? "" : "s"); }, + formatInputTooShort: function (input, min) { var n = min - input.length; return "Por favor, introduzca " + n + " car" + (n == 1? "á" : "a") + "cter" + (n == 1? "" : "es"); }, + formatInputTooLong: function (input, max) { var n = input.length - max; return "Por favor, elimine " + n + " car" + (n == 1? "á" : "a") + "cter" + (n == 1? "" : "es"); }, + formatSelectionTooBig: function (limit) { return "Sólo puede seleccionar " + limit + " elemento" + (limit == 1 ? "" : "s"); }, formatLoadMore: function (pageNumber) { return "Cargando más resultados..."; }, formatSearching: function () { return "Buscando..."; } }); -})(jQuery); \ No newline at end of file +})(jQuery); Added: sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_fa.js =================================================================== --- sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_fa.js (rev 0) +++ sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_fa.js 2013-09-20 13:29:04 UTC (rev 217) @@ -0,0 +1,17 @@ +/** %%Ignore-License + * Select2 <fa> translation. + * + * Author: Ali Choopan <choopan(a)arsh.co> + */ +(function ($) { + "use strict"; + + $.extend($.fn.select2.defaults, { + formatNoMatches: function () { return "نتیجه‌ای یافت نشد."; }, + formatInputTooShort: function (input, min) { var n = min - input.length; return " لطفا بیش از"+n+"کاراکتر وارد نمایید "; }, + formatInputTooLong: function (input, max) { var n = input.length - max; return " لطفا" + n + " کاراکتر را حذف کنید."; }, + formatSelectionTooBig: function (limit) { return "شما فقط می‌توانید " + limit + " مورد را انتخاب کنید"; }, + formatLoadMore: function (pageNumber) { return "در حال بارگذاری موارد بیشتر ..."; }, + formatSearching: function () { return "در حال جستجو"; } + }); +})(jQuery); Added: sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_ms.js =================================================================== --- sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_ms.js (rev 0) +++ sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_ms.js 2013-09-20 13:29:04 UTC (rev 217) @@ -0,0 +1,17 @@ +/** %%Ignore-License + * Select2 Malay translation. + * + * Author: Kepoweran <kepoweran(a)gmail.com> + */ +(function ($) { + "use strict"; + + $.extend($.fn.select2.defaults, { + formatNoMatches: function () { return "Tiada padanan yang ditemui"; }, + formatInputTooShort: function (input, min) { var n = min - input.length; return "Sila masukkan " + n + " aksara lagi"; }, + formatInputTooLong: function (input, max) { var n = input.length - max; return "Sila hapuskan " + n + " aksara"; }, + formatSelectionTooBig: function (limit) { return "Anda hanya boleh memilih " + limit + " pilihan"; }, + formatLoadMore: function (pageNumber) { return "Sedang memuatkan keputusan..."; }, + formatSearching: function () { return "Mencari..."; } + }); +})(jQuery); Modified: sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_nl.js =================================================================== --- sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_nl.js 2013-09-09 15:40:55 UTC (rev 216) +++ sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_nl.js 2013-09-20 13:29:04 UTC (rev 217) @@ -10,6 +10,6 @@ formatInputTooLong: function (input, max) { var n = input.length - max; return "Vul " + n + " karakter" + (n == 1? "" : "s") + " minder in"; }, formatSelectionTooBig: function (limit) { return "Maximaal " + limit + " item" + (limit == 1 ? "" : "s") + " toegestaan"; }, formatLoadMore: function (pageNumber) { return "Meer resultaten laden..."; }, - formatSearching: function () { return "Zoeken..."; }, + formatSearching: function () { return "Zoeken..."; } }); })(jQuery); \ No newline at end of file Modified: sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_pt-BR.js =================================================================== --- sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_pt-BR.js 2013-09-09 15:40:55 UTC (rev 216) +++ sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_pt-BR.js 2013-09-20 13:29:04 UTC (rev 217) @@ -6,8 +6,8 @@ $.extend($.fn.select2.defaults, { formatNoMatches: function () { return "Nenhum resultado encontrado"; }, - formatInputTooShort: function (input, min) { var n = min - input.length; return "Informe " + n + " caracter" + (n == 1? "" : "es"); }, - formatInputTooLong: function (input, max) { var n = input.length - max; return "Apague " + n + " caracter" + (n == 1? "" : "es"); }, + formatInputTooShort: function (input, min) { var n = min - input.length; return "Informe " + n + " caractere" + (n == 1? "" : "s"); }, + formatInputTooLong: function (input, max) { var n = input.length - max; return "Apague " + n + " caractere" + (n == 1? "" : "s"); }, formatSelectionTooBig: function (limit) { return "Só é possível selecionar " + limit + " elemento" + (limit == 1 ? "" : "s"); }, formatLoadMore: function (pageNumber) { return "Carregando mais resultados..."; }, formatSearching: function () { return "Buscando..."; } Modified: sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_pt-PT.js =================================================================== --- sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_pt-PT.js 2013-09-09 15:40:55 UTC (rev 216) +++ sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_pt-PT.js 2013-09-20 13:29:04 UTC (rev 217) @@ -6,8 +6,8 @@ $.extend($.fn.select2.defaults, { formatNoMatches: function () { return "Nenhum resultado encontrado"; }, - formatInputTooShort: function (input, min) { var n = min - input.length; return "Introduza " + n + " caracter" + (n == 1 ? "" : "es"); }, - formatInputTooLong: function (input, max) { var n = input.length - max; return "Apague " + n + " caracter" + (n == 1 ? "" : "es"); }, + formatInputTooShort: function (input, min) { var n = min - input.length; return "Introduza " + n + " car" + (n == 1 ? "ácter" : "acteres"); }, + formatInputTooLong: function (input, max) { var n = input.length - max; return "Apague " + n + " car" + (n == 1 ? "ácter" : "acteres"); }, formatSelectionTooBig: function (limit) { return "Só é possível selecionar " + limit + " elemento" + (limit == 1 ? "" : "s"); }, formatLoadMore: function (pageNumber) { return "A carregar mais resultados..."; }, formatSearching: function () { return "A pesquisar..."; } Added: sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_th.js =================================================================== --- sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_th.js (rev 0) +++ sandbox/nuiton-js-select2/src/main/resources/nuiton-js-select2/select2_locale_th.js 2013-09-20 13:29:04 UTC (rev 217) @@ -0,0 +1,17 @@ +/** %%Ignore-License + * Select2 Thai translation. + * + * Author: Atsawin Chaowanakritsanakul <joke(a)nakhon.net> + */ +(function ($) { + "use strict"; + + $.extend($.fn.select2.defaults, { + formatNoMatches: function () { return "ไม่พบข้อมูล"; }, + formatInputTooShort: function (input, min) { var n = min - input.length; return "โปรดพิมพ์เพิ่มอีก " + n + " ตัวอักษร"; }, + formatInputTooLong: function (input, max) { var n = input.length - max; return "โปรดลบออก " + n + " ตัวอักษร"; }, + formatSelectionTooBig: function (limit) { return "คุณสามารถเลือกได้ไม่เกิน " + limit + " รายการ"; }, + formatLoadMore: function (pageNumber) { return "กำลังค้นข้อมูลเพิ่ม..."; }, + formatSearching: function () { return "กำลังค้นข้อมูล..."; } + }); +})(jQuery);

1 0

r216 - tags/nuiton-js-jsplumb-1.5.2-1
by echatellier＠users.nuiton.org Sept. 9, 2013

Sept. 9, 2013

Author: echatellier Date: 2013-09-09 17:40:55 +0200 (Mon, 09 Sep 2013) New Revision: 216 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/216 Log: Fix version Modified: tags/nuiton-js-jsplumb-1.5.2-1/LICENSE.txt tags/nuiton-js-jsplumb-1.5.2-1/pom.xml Modified: tags/nuiton-js-jsplumb-1.5.2-1/LICENSE.txt =================================================================== --- tags/nuiton-js-jsplumb-1.5.2-1/LICENSE.txt 2013-09-09 15:37:14 UTC (rev 215) +++ tags/nuiton-js-jsplumb-1.5.2-1/LICENSE.txt 2013-09-09 15:40:55 UTC (rev 216) @@ -0,0 +1,166 @@ + GNU LESSER GENERAL PUBLIC LICENSE + Version 3, 29 June 2007 + + Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/> + Everyone is permitted to copy and distribute verbatim copies + of this license document, but changing it is not allowed. + + + This version of the GNU Lesser General Public License incorporates +the terms and conditions of version 3 of the GNU General Public +License, supplemented by the additional permissions listed below. + + 0. Additional Definitions. + + As used herein, "this License" refers to version 3 of the GNU Lesser +General Public License, and the "GNU GPL" refers to version 3 of the GNU +General Public License. + + "The Library" refers to a covered work governed by this License, +other than an Application or a Combined Work as defined below. + + An "Application" is any work that makes use of an interface provided +by the Library, but which is not otherwise based on the Library. +Defining a subclass of a class defined by the Library is deemed a mode +of using an interface provided by the Library. + + A "Combined Work" is a work produced by combining or linking an +Application with the Library. The particular version of the Library +with which the Combined Work was made is also called the "Linked +Version". + + The "Minimal Corresponding Source" for a Combined Work means the +Corresponding Source for the Combined Work, excluding any source code +for portions of the Combined Work that, considered in isolation, are +based on the Application, and not on the Linked Version. + + The "Corresponding Application Code" for a Combined Work means the +object code and/or source code for the Application, including any data +and utility programs needed for reproducing the Combined Work from the +Application, but excluding the System Libraries of the Combined Work. + + 1. Exception to Section 3 of the GNU GPL. + + You may convey a covered work under sections 3 and 4 of this License +without being bound by section 3 of the GNU GPL. + + 2. Conveying Modified Versions. + + If you modify a copy of the Library, and, in your modifications, a +facility refers to a function or data to be supplied by an Application +that uses the facility (other than as an argument passed when the +facility is invoked), then you may convey a copy of the modified +version: + + a) under this License, provided that you make a good faith effort to + ensure that, in the event an Application does not supply the + function or data, the facility still operates, and performs + whatever part of its purpose remains meaningful, or + + b) under the GNU GPL, with none of the additional permissions of + this License applicable to that copy. + + 3. Object Code Incorporating Material from Library Header Files. + + The object code form of an Application may incorporate material from +a header file that is part of the Library. You may convey such object +code under terms of your choice, provided that, if the incorporated +material is not limited to numerical parameters, data structure +layouts and accessors, or small macros, inline functions and templates +(ten or fewer lines in length), you do both of the following: + + a) Give prominent notice with each copy of the object code that the + Library is used in it and that the Library and its use are + covered by this License. + + b) Accompany the object code with a copy of the GNU GPL and this license + document. + + 4. Combined Works. + + You may convey a Combined Work under terms of your choice that, +taken together, effectively do not restrict modification of the +portions of the Library contained in the Combined Work and reverse +engineering for debugging such modifications, if you also do each of +the following: + + a) Give prominent notice with each copy of the Combined Work that + the Library is used in it and that the Library and its use are + covered by this License. + + b) Accompany the Combined Work with a copy of the GNU GPL and this license + document. + + c) For a Combined Work that displays copyright notices during + execution, include the copyright notice for the Library among + these notices, as well as a reference directing the user to the + copies of the GNU GPL and this license document. + + d) Do one of the following: + + 0) Convey the Minimal Corresponding Source under the terms of this + License, and the Corresponding Application Code in a form + suitable for, and under terms that permit, the user to + recombine or relink the Application with a modified version of + the Linked Version to produce a modified Combined Work, in the + manner specified by section 6 of the GNU GPL for conveying + Corresponding Source. + + 1) Use a suitable shared library mechanism for linking with the + Library. A suitable mechanism is one that (a) uses at run time + a copy of the Library already present on the user's computer + system, and (b) will operate properly with a modified version + of the Library that is interface-compatible with the Linked + Version. + + e) Provide Installation Information, but only if you would otherwise + be required to provide such information under section 6 of the + GNU GPL, and only to the extent that such information is + necessary to install and execute a modified version of the + Combined Work produced by recombining or relinking the + Application with a modified version of the Linked Version. (If + you use option 4d0, the Installation Information must accompany + the Minimal Corresponding Source and Corresponding Application + Code. If you use option 4d1, you must provide the Installation + Information in the manner specified by section 6 of the GNU GPL + for conveying Corresponding Source.) + + 5. Combined Libraries. + + You may place library facilities that are a work based on the +Library side by side in a single library together with other library +facilities that are not Applications and are not covered by this +License, and convey such a combined library under terms of your +choice, if you do both of the following: + + a) Accompany the combined library with a copy of the same work based + on the Library, uncombined with any other library facilities, + conveyed under the terms of this License. + + b) Give prominent notice with the combined library that part of it + is a work based on the Library, and explaining where to find the + accompanying uncombined form of the same work. + + 6. Revised Versions of the GNU Lesser General Public License. + + The Free Software Foundation may publish revised and/or new versions +of the GNU Lesser General Public License from time to time. Such new +versions will be similar in spirit to the present version, but may +differ in detail to address new problems or concerns. + + Each version is given a distinguishing version number. If the +Library as you received it specifies that a certain numbered version +of the GNU Lesser General Public License "or any later version" +applies to it, you have the option of following the terms and +conditions either of that published version or of any later version +published by the Free Software Foundation. If the Library as you +received it does not specify a version number of the GNU Lesser +General Public License, you may choose any version of the GNU Lesser +General Public License ever published by the Free Software Foundation. + + If the Library as you received it specifies that a proxy can decide +whether future versions of the GNU Lesser General Public License shall +apply, that proxy's public statement of acceptance of any version is +permanent authorization for you to choose that version for the +Library. + Modified: tags/nuiton-js-jsplumb-1.5.2-1/pom.xml =================================================================== --- tags/nuiton-js-jsplumb-1.5.2-1/pom.xml 2013-09-09 15:37:14 UTC (rev 215) +++ tags/nuiton-js-jsplumb-1.5.2-1/pom.xml 2013-09-09 15:40:55 UTC (rev 216) @@ -14,7 +14,7 @@ </parent> <artifactId>nuiton-js-jsplumb</artifactId> - <version>1.5.2-1-SNAPSHOT</version> + <version>1.5.2-1</version> <name>Nuiton JS :: jsPlumb</name> <description>jsPlumb jar packaging</description>

1 0

r215 - trunk/src/site
by echatellier＠users.nuiton.org Sept. 9, 2013

Sept. 9, 2013

Author: echatellier Date: 2013-09-09 17:37:14 +0200 (Mon, 09 Sep 2013) New Revision: 215 Url: http://nuiton.org/projects/nuiton-js/repository/revisions/215 Log: Add jsplumb link Modified: trunk/src/site/site_en.xml Modified: trunk/src/site/site_en.xml =================================================================== --- trunk/src/site/site_en.xml 2013-09-09 15:34:38 UTC (rev 214) +++ trunk/src/site/site_en.xml 2013-09-09 15:37:14 UTC (rev 215) @@ -95,6 +95,7 @@ <item name="jquery" href="nuiton-js-lib/nuiton-js-jquery/index.html"/> <item name="jquery-i18n-properties" href="nuiton-js-lib/nuiton-js-jquery-i18n-properties/index.html"/> <item name="jquery-ui" href="nuiton-js-lib/nuiton-js-jquery-ui/index.html"/> + <item name="jsplumb" href="nuiton-js-lib/nuiton-js-jsplumb/index.html"/> <item name="jstree" href="nuiton-js-lib/nuiton-js-jstree/index.html"/> <item name="moment" href="nuiton-js-lib/nuiton-js-moment/index.html"/> <item name="mustache" href="nuiton-js-lib/nuiton-js-mustache/index.html"/>

1 0