jsPlumb-renderers-vml-1.3.5-RC1.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
  1. /*
  2. * jsPlumb
  3. *
  4. * Title:jsPlumb 1.3.5
  5. *
  6. * Provides a way to visually connect elements on an HTML page, using either SVG, Canvas
  7. * elements, or VML.
  8. *
  9. * This file contains the VML renderers.
  10. *
  11. * Copyright (c) 2010 - 2012 Simon Porritt (http://jsplumb.org)
  12. *
  13. * http://jsplumb.org
  14. * http://github.com/sporritt/jsplumb
  15. * http://code.google.com/p/jsplumb
  16. *
  17. * Dual licensed under the MIT and GPL2 licenses.
  18. */
  19. ;(function() {
  20. // http://ajaxian.com/archives/the-vml-changes-in-ie-8
  21. // http://www.nczonline.net/blog/2010/01/19/internet-explorer-8-document-and-browser-modes/
  22. // http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/
  23. var vmlAttributeMap = {
  24. "stroke-linejoin":"joinstyle",
  25. "joinstyle":"joinstyle",
  26. "endcap":"endcap",
  27. "miterlimit":"miterlimit"
  28. };
  29. if (document.createStyleSheet) {
  30. // this is the style rule for IE7/6: it uses a CSS class, tidy.
  31. document.createStyleSheet().addRule(".jsplumb_vml", "behavior:url(#default#VML);position:absolute;");
  32. // these are for VML in IE8. you have to explicitly call out which elements
  33. // you're going to expect to support VML!
  34. //
  35. document.createStyleSheet().addRule("jsplumb\\:textbox", "behavior:url(#default#VML);position:absolute;");
  36. document.createStyleSheet().addRule("jsplumb\\:oval", "behavior:url(#default#VML);position:absolute;");
  37. document.createStyleSheet().addRule("jsplumb\\:rect", "behavior:url(#default#VML);position:absolute;");
  38. document.createStyleSheet().addRule("jsplumb\\:stroke", "behavior:url(#default#VML);position:absolute;");
  39. document.createStyleSheet().addRule("jsplumb\\:shape", "behavior:url(#default#VML);position:absolute;");
  40. document.createStyleSheet().addRule("jsplumb\\:group", "behavior:url(#default#VML);position:absolute;");
  41. // in this page it is also mentioned that IE requires the extra arg to the namespace
  42. // http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/
  43. // but someone commented saying they didn't need it, and it seems jsPlumb doesnt need it either.
  44. // var iev = document.documentMode;
  45. //if (!iev || iev < 8)
  46. document.namespaces.add("jsplumb", "urn:schemas-microsoft-com:vml");
  47. //else
  48. // document.namespaces.add("jsplumb", "urn:schemas-microsoft-com:vml", "#default#VML");
  49. }
  50. jsPlumb.vml = {};
  51. var scale = 1000,
  52. _groupMap = {},
  53. _getGroup = function(container, connectorClass) {
  54. var id = jsPlumb.getId(container),
  55. g = _groupMap[id];
  56. if(!g) {
  57. g = _node("group", [0,0,scale, scale], {"class":connectorClass});
  58. //g.style.position=absolute;
  59. //g["coordsize"] = "1000,1000";
  60. g.style.backgroundColor="red";
  61. _groupMap[id] = g;
  62. jsPlumb.appendElement(g, container);
  63. //document.body.appendChild(g);
  64. }
  65. return g;
  66. },
  67. _atts = function(o, atts) {
  68. for (var i in atts) {
  69. // IE8 fix: setattribute does not work after an element has been added to the dom!
  70. // http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/
  71. //o.setAttribute(i, atts[i]);
  72. o[i] = atts[i];
  73. }
  74. },
  75. _node = function(name, d, atts) {
  76. atts = atts || {};
  77. var o = document.createElement("jsplumb:" + name);
  78. o.className = (atts["class"] ? atts["class"] + " " : "") + "jsplumb_vml";
  79. _pos(o, d);
  80. _atts(o, atts);
  81. return o;
  82. },
  83. _pos = function(o,d) {
  84. o.style.left = d[0] + "px";
  85. o.style.top = d[1] + "px";
  86. o.style.width= d[2] + "px";
  87. o.style.height= d[3] + "px";
  88. o.style.position = "absolute";
  89. },
  90. _conv = jsPlumb.vml.convertValue = function(v) {
  91. return Math.floor(v * scale);
  92. },
  93. // tests if the given style is "transparent" and then sets the appropriate opacity node to 0 if so,
  94. // or 1 if not. TODO in the future, support variable opacity.
  95. _maybeSetOpacity = function(styleToWrite, styleToCheck, type, component) {
  96. if ("transparent" === styleToCheck)
  97. component.setOpacity(type, "0.0");
  98. else
  99. component.setOpacity(type, "1.0");
  100. },
  101. _applyStyles = function(node, style, component) {
  102. var styleToWrite = {};
  103. if (style.strokeStyle) {
  104. styleToWrite["stroked"] = "true";
  105. var strokeColor = jsPlumb.util.convertStyle(style.strokeStyle, true);
  106. styleToWrite["strokecolor"] = strokeColor;
  107. _maybeSetOpacity(styleToWrite, strokeColor, "stroke", component);
  108. styleToWrite["strokeweight"] = style.lineWidth + "px";
  109. }
  110. else styleToWrite["stroked"] = "false";
  111. if (style.fillStyle) {
  112. styleToWrite["filled"] = "true";
  113. var fillColor = jsPlumb.util.convertStyle(style.fillStyle, true);
  114. styleToWrite["fillcolor"] = fillColor;
  115. _maybeSetOpacity(styleToWrite, fillColor, "fill", component);
  116. }
  117. else styleToWrite["filled"] = "false";
  118. if(style["dashstyle"]) {
  119. if (component.strokeNode == null) {
  120. component.strokeNode = _node("stroke", [0,0,0,0], { dashstyle:style["dashstyle"] });
  121. node.appendChild(component.strokeNode);
  122. }
  123. else
  124. component.strokeNode.dashstyle = style["dashstyle"];
  125. }
  126. else if (style["stroke-dasharray"] && style["lineWidth"]) {
  127. var sep = style["stroke-dasharray"].indexOf(",") == -1 ? " " : ",",
  128. parts = style["stroke-dasharray"].split(sep),
  129. styleToUse = "";
  130. for(var i = 0; i < parts.length; i++) {
  131. styleToUse += (Math.floor(parts[i] / style.lineWidth) + sep);
  132. }
  133. if (component.strokeNode == null) {
  134. component.strokeNode = _node("stroke", [0,0,0,0], { dashstyle:styleToUse });
  135. node.appendChild(component.strokeNode);
  136. }
  137. else
  138. component.strokeNode.dashstyle = styleToUse;
  139. }
  140. _atts(node, styleToWrite);
  141. },
  142. /*
  143. * Base class for Vml endpoints and connectors. Extends jsPlumbUIComponent.
  144. */
  145. VmlComponent = function() {
  146. var self = this;
  147. jsPlumb.jsPlumbUIComponent.apply(this, arguments);
  148. this.opacityNodes = {
  149. "stroke":null,
  150. "fill":null
  151. };
  152. this.initOpacityNodes = function(vml) {
  153. self.opacityNodes["stroke"] = _node("stroke", [0,0,1,1], {opacity:"0.0"});
  154. self.opacityNodes["fill"] = _node("fill", [0,0,1,1], {opacity:"0.0"});
  155. vml.appendChild(self.opacityNodes["stroke"]);
  156. vml.appendChild(self.opacityNodes["fill"]);
  157. };
  158. this.setOpacity = function(type, value) {
  159. var node = self.opacityNodes[type];
  160. if (node) node["opacity"] = "" + value;
  161. };
  162. var displayElements = [ ];
  163. this.getDisplayElements = function() {
  164. return displayElements;
  165. };
  166. this.appendDisplayElement = function(el, doNotAppendToCanvas) {
  167. if (!doNotAppendToCanvas) self.canvas.parentNode.appendChild(el);
  168. displayElements.push(el);
  169. };
  170. },
  171. /*
  172. * Base class for Vml connectors. extends VmlComponent.
  173. */
  174. VmlConnector = jsPlumb.VmlConnector = function(params) {
  175. var self = this;
  176. self.strokeNode = null;
  177. self.canvas = null;
  178. VmlComponent.apply(this, arguments);
  179. var clazz = self._jsPlumb.connectorClass + (params.cssClass ? (" " + params.cssClass) : "");
  180. this.paint = function(d, style, anchor) {
  181. if (style != null) {
  182. var path = self.getPath(d), p = { "path":path };
  183. //*
  184. if (style.outlineColor) {
  185. var outlineWidth = style.outlineWidth || 1,
  186. outlineStrokeWidth = style.lineWidth + (2 * outlineWidth),
  187. outlineStyle = {
  188. strokeStyle : jsPlumb.util.convertStyle(style.outlineColor),
  189. lineWidth : outlineStrokeWidth
  190. };
  191. for (var aa in vmlAttributeMap) outlineStyle[aa] = style[aa];
  192. if (self.bgCanvas == null) {
  193. p["class"] = clazz;
  194. p["coordsize"] = (d[2] * scale) + "," + (d[3] * scale);
  195. self.bgCanvas = _node("shape", d, p);
  196. jsPlumb.appendElement(self.bgCanvas, params.parent);
  197. _pos(self.bgCanvas, d);
  198. self.appendDisplayElement(self.bgCanvas, true);
  199. }
  200. else {
  201. p["coordsize"] = (d[2] * scale) + "," + (d[3] * scale);
  202. _pos(self.bgCanvas, d);
  203. _atts(self.bgCanvas, p);
  204. }
  205. _applyStyles(self.bgCanvas, outlineStyle, self);
  206. }
  207. //*/
  208. if (self.canvas == null) {
  209. p["class"] = clazz;
  210. p["coordsize"] = (d[2] * scale) + "," + (d[3] * scale);
  211. if (self.tooltip) p["label"] = self.tooltip;
  212. self.canvas = _node("shape", d, p);
  213. //var group = _getGroup(params.parent); // test of append everything to a group
  214. //group.appendChild(self.canvas); // sort of works but not exactly;
  215. jsPlumb.appendElement(self.canvas, params.parent); //before introduction of groups
  216. self.appendDisplayElement(self.canvas, true);
  217. self.attachListeners(self.canvas, self);
  218. self.initOpacityNodes(self.canvas, ["stroke"]);
  219. }
  220. else {
  221. p["coordsize"] = (d[2] * scale) + "," + (d[3] * scale);
  222. _pos(self.canvas, d);
  223. _atts(self.canvas, p);
  224. }
  225. _applyStyles(self.canvas, style, self);
  226. }
  227. };
  228. //self.appendDisplayElement(self.canvas);
  229. this.reattachListeners = function() {
  230. if (self.canvas) self.reattachListenersForElement(self.canvas, self);
  231. };
  232. },
  233. /*
  234. *
  235. * Base class for Vml Endpoints. extends VmlComponent.
  236. *
  237. */
  238. VmlEndpoint = function(params) {
  239. VmlComponent.apply(this, arguments);
  240. var vml = null, self = this, opacityStrokeNode = null, opacityFillNode = null;
  241. self.canvas = document.createElement("div");
  242. self.canvas.style["position"] = "absolute";
  243. //var group = _getGroup(params.parent);
  244. //group.appendChild(self.canvas);
  245. jsPlumb.appendElement(self.canvas, params.parent);
  246. if (self.tooltip) self.canvas.setAttribute("label", self.tooltip);
  247. this.paint = function(d, style, anchor) {
  248. var p = { };
  249. jsPlumb.sizeCanvas(self.canvas, d[0], d[1], d[2], d[3]);
  250. if (vml == null) {
  251. p["class"] = jsPlumb.endpointClass;
  252. vml = self.getVml([0,0, d[2], d[3]], p, anchor);
  253. self.canvas.appendChild(vml);
  254. self.attachListeners(vml, self);
  255. self.appendDisplayElement(vml, true);
  256. self.appendDisplayElement(self.canvas, true);
  257. self.initOpacityNodes(vml, ["fill"]);
  258. }
  259. else {
  260. //p["coordsize"] = "1,1";//(d[2] * scale) + "," + (d[3] * scale); again, unsure.
  261. _pos(vml, [0,0, d[2], d[3]]);
  262. _atts(vml, p);
  263. }
  264. _applyStyles(vml, style, self);
  265. };
  266. this.reattachListeners = function() {
  267. if (vml) self.reattachListenersForElement(vml, self);
  268. };
  269. };
  270. jsPlumb.Connectors.vml.Bezier = function() {
  271. jsPlumb.Connectors.Bezier.apply(this, arguments);
  272. VmlConnector.apply(this, arguments);
  273. this.getPath = function(d) {
  274. return "m" + _conv(d[4]) + "," + _conv(d[5]) +
  275. " c" + _conv(d[8]) + "," + _conv(d[9]) + "," + _conv(d[10]) + "," + _conv(d[11]) + "," + _conv(d[6]) + "," + _conv(d[7]) + " e";
  276. };
  277. };
  278. jsPlumb.Connectors.vml.Straight = function() {
  279. jsPlumb.Connectors.Straight.apply(this, arguments);
  280. VmlConnector.apply(this, arguments);
  281. this.getPath = function(d) {
  282. return "m" + _conv(d[4]) + "," + _conv(d[5]) + " l" + _conv(d[6]) + "," + _conv(d[7]) + " e";
  283. };
  284. };
  285. jsPlumb.Connectors.vml.Flowchart = function() {
  286. jsPlumb.Connectors.Flowchart.apply(this, arguments);
  287. VmlConnector.apply(this, arguments);
  288. this.getPath = function(dimensions) {
  289. var p = "m " + _conv(dimensions[4]) + "," + _conv(dimensions[5]) + " l";
  290. // loop through extra points
  291. for (var i = 0; i < dimensions[8]; i++) {
  292. p = p + " " + _conv(dimensions[9 + (i*2)]) + "," + _conv(dimensions[10 + (i*2)]);
  293. }
  294. // finally draw a line to the end
  295. p = p + " " + _conv(dimensions[6]) + "," + _conv(dimensions[7]) + " e";
  296. return p;
  297. };
  298. };
  299. jsPlumb.Endpoints.vml.Dot = function() {
  300. jsPlumb.Endpoints.Dot.apply(this, arguments);
  301. VmlEndpoint.apply(this, arguments);
  302. this.getVml = function(d, atts, anchor) { return _node("oval", d, atts); };
  303. };
  304. jsPlumb.Endpoints.vml.Rectangle = function() {
  305. jsPlumb.Endpoints.Rectangle.apply(this, arguments);
  306. VmlEndpoint.apply(this, arguments);
  307. this.getVml = function(d, atts, anchor) { return _node("rect", d, atts); };
  308. };
  309. /*
  310. * VML Image Endpoint is the same as the default image endpoint.
  311. */
  312. jsPlumb.Endpoints.vml.Image = jsPlumb.Endpoints.Image;
  313. /**
  314. * placeholder for Blank endpoint in vml renderer.
  315. */
  316. jsPlumb.Endpoints.vml.Blank = jsPlumb.Endpoints.Blank;
  317. /**
  318. * VML Label renderer. uses the default label renderer (which adds an element to the DOM)
  319. */
  320. jsPlumb.Overlays.vml.Label = jsPlumb.Overlays.Label;
  321. var AbstractVmlArrowOverlay = function(superclass, originalArgs) {
  322. superclass.apply(this, originalArgs);
  323. VmlComponent.apply(this, arguments);
  324. var self = this, path = null;
  325. self.canvas = null;
  326. var getPath = function(d, connectorDimensions) {
  327. return "m " + _conv(d.hxy.x) + "," + _conv(d.hxy.y) +
  328. " l " + _conv(d.tail[0].x) + "," + _conv(d.tail[0].y) +
  329. " " + _conv(d.cxy.x) + "," + _conv(d.cxy.y) +
  330. " " + _conv(d.tail[1].x) + "," + _conv(d.tail[1].y) +
  331. " x e";
  332. };
  333. this.paint = function(connector, d, lineWidth, strokeStyle, fillStyle, connectorDimensions) {
  334. var p = {};
  335. if (strokeStyle) {
  336. p["stroked"] = "true";
  337. p["strokecolor"] = jsPlumb.util.convertStyle(strokeStyle, true);
  338. }
  339. if (lineWidth) p["strokeweight"] = lineWidth + "px";
  340. if (fillStyle) {
  341. p["filled"] = "true";
  342. p["fillcolor"] = fillStyle;
  343. }
  344. var xmin = Math.min(d.hxy.x, d.tail[0].x, d.tail[1].x, d.cxy.x),
  345. ymin = Math.min(d.hxy.y, d.tail[0].y, d.tail[1].y, d.cxy.y),
  346. xmax = Math.max(d.hxy.x, d.tail[0].x, d.tail[1].x, d.cxy.x),
  347. ymax = Math.max(d.hxy.y, d.tail[0].y, d.tail[1].y, d.cxy.y),
  348. w = Math.abs(xmax - xmin),
  349. h = Math.abs(ymax - ymin),
  350. dim = [xmin, ymin, w, h];
  351. // for VML, we create overlays using shapes that have the same dimensions and
  352. // coordsize as their connector - overlays calculate themselves relative to the
  353. // connector (it's how it's been done since the original canvas implementation, because
  354. // for canvas that makes sense).
  355. p["path"] = getPath(d, connectorDimensions);
  356. p["coordsize"] = (connectorDimensions[2] * scale) + "," + (connectorDimensions[3] * scale);
  357. dim[0] = connectorDimensions[0];
  358. dim[1] = connectorDimensions[1];
  359. dim[2] = connectorDimensions[2];
  360. dim[3] = connectorDimensions[3];
  361. if (self.canvas == null) {
  362. //p["class"] = jsPlumb.overlayClass; // TODO currentInstance?
  363. self.canvas = _node("shape", dim, p);
  364. connector.appendDisplayElement(self.canvas);
  365. self.attachListeners(self.canvas, connector);
  366. }
  367. else {
  368. _pos(self.canvas, dim);
  369. _atts(self.canvas, p);
  370. }
  371. };
  372. this.reattachListeners = function() {
  373. if (self.canvas) self.reattachListenersForElement(self.canvas, self);
  374. };
  375. };
  376. jsPlumb.Overlays.vml.Arrow = function() {
  377. AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]);
  378. };
  379. jsPlumb.Overlays.vml.PlainArrow = function() {
  380. AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]);
  381. };
  382. jsPlumb.Overlays.vml.Diamond = function() {
  383. AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]);
  384. };
  385. })();