jsPlumb-renderers-vml-1.3.1-RC1.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  1. ;(function() {
  2. // http://ajaxian.com/archives/the-vml-changes-in-ie-8
  3. // http://www.nczonline.net/blog/2010/01/19/internet-explorer-8-document-and-browser-modes/
  4. // http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/
  5. var vmlAttributeMap = {
  6. "stroke-linejoin":"joinstyle",
  7. "joinstyle":"joinstyle",
  8. "endcap":"endcap",
  9. "miterlimit":"miterlimit"
  10. };
  11. if (document.createStyleSheet) {
  12. // this is the style rule for IE7/6: it uses a CSS class, tidy.
  13. document.createStyleSheet().addRule(".jsplumb_vml", "behavior:url(#default#VML);position:absolute;");
  14. // these are for VML in IE8. you have to explicitly call out which elements
  15. // you're going to expect to support VML!
  16. //
  17. // try to avoid IE8. it is recommended you set X-UA-Compatible="IE=7" if you can.
  18. //
  19. document.createStyleSheet().addRule("jsplumb\\:textbox", "behavior:url(#default#VML);position:absolute;");
  20. document.createStyleSheet().addRule("jsplumb\\:oval", "behavior:url(#default#VML);position:absolute;");
  21. document.createStyleSheet().addRule("jsplumb\\:rect", "behavior:url(#default#VML);position:absolute;");
  22. document.createStyleSheet().addRule("jsplumb\\:stroke", "behavior:url(#default#VML);position:absolute;");
  23. document.createStyleSheet().addRule("jsplumb\\:shape", "behavior:url(#default#VML);position:absolute;");
  24. // in this page it is also mentioned that IE requires the extra arg to the namespace
  25. // http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/
  26. // but someone commented saying they didn't need it, and it seems jsPlumb doesnt need it either.
  27. // var iev = document.documentMode;
  28. //if (!iev || iev < 8)
  29. document.namespaces.add("jsplumb", "urn:schemas-microsoft-com:vml");
  30. //else
  31. // document.namespaces.add("jsplumb", "urn:schemas-microsoft-com:vml", "#default#VML");
  32. }
  33. var scale = 1000,
  34. _atts = function(o, atts) {
  35. for (var i in atts) {
  36. // IE8 fix: setattribute does not work after an element has been added to the dom!
  37. // http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/
  38. //o.setAttribute(i, atts[i]);
  39. o[i] = atts[i];
  40. }
  41. },
  42. _node = function(name, d, atts) {
  43. atts = atts || {};
  44. var o = document.createElement("jsplumb:" + name);
  45. o.className = (atts["class"] ? atts["class"] + " " : "") + "jsplumb_vml";
  46. _pos(o, d);
  47. _atts(o, atts);
  48. return o;
  49. },
  50. _pos = function(o,d) {
  51. o.style.left = d[0] + "px";
  52. o.style.top = d[1] + "px";
  53. o.style.width= d[2] + "px";
  54. o.style.height= d[3] + "px";
  55. o.style.position = "absolute";
  56. },
  57. _conv = function(v) {
  58. return Math.floor(v * scale);
  59. },
  60. _convertStyle = function(s, ignoreAlpha) {
  61. var o = s,
  62. pad = function(n) { return n.length == 1 ? "0" + n : n; },
  63. hex = function(k) { return pad(Number(k).toString(16)); },
  64. pattern = /(rgb[a]?\()(.*)(\))/;
  65. if (s.match(pattern)) {
  66. var parts = s.match(pattern)[2].split(",");
  67. o = "#" + hex(parts[0]) + hex(parts[1]) + hex(parts[2]);
  68. if (!ignoreAlpha && parts.length == 4)
  69. o = o + hex(parts[3]);
  70. }
  71. return o;
  72. },
  73. _applyStyles = function(node, style, component) {
  74. var styleToWrite = {};
  75. if (style.strokeStyle) {
  76. styleToWrite["stroked"] = "true";
  77. styleToWrite["strokecolor"] =_convertStyle(style.strokeStyle, true);
  78. styleToWrite["strokeweight"] = style.lineWidth + "px";
  79. }
  80. else styleToWrite["stroked"] = "false";
  81. if (style.fillStyle) {
  82. styleToWrite["filled"] = "true";
  83. styleToWrite["fillcolor"] = _convertStyle(style.fillStyle, true);
  84. }
  85. else styleToWrite["filled"] = "false";
  86. if(style["dashstyle"]) {
  87. if (component.strokeNode == null) {
  88. component.strokeNode = _node("stroke", [0,0,0,0], { dashstyle:style["dashstyle"] });
  89. node.appendChild(component.strokeNode);
  90. }
  91. else
  92. component.strokeNode.dashstyle = style["dashstyle"];
  93. }
  94. else if (style["stroke-dasharray"] && style["lineWidth"]) {
  95. var sep = style["stroke-dasharray"].indexOf(",") == -1 ? " " : ",",
  96. parts = style["stroke-dasharray"].split(sep),
  97. styleToUse = "";
  98. for(var i = 0; i < parts.length; i++) {
  99. styleToUse += (Math.floor(parts[i] / style.lineWidth) + sep);
  100. }
  101. if (component.strokeNode == null) {
  102. component.strokeNode = _node("stroke", [0,0,0,0], { dashstyle:styleToUse });
  103. node.appendChild(component.strokeNode);
  104. }
  105. else
  106. component.strokeNode.dashstyle = styleToUse;
  107. }
  108. _atts(node, styleToWrite);
  109. },
  110. /*
  111. * Base class for Vml endpoints and connectors. Extends jsPlumbUIComponent.
  112. */
  113. VmlComponent = function() {
  114. jsPlumb.jsPlumbUIComponent.apply(this, arguments);
  115. },
  116. /*
  117. * Base class for Vml connectors. extends VmlComponent.
  118. */
  119. VmlConnector = function(params) {
  120. var self = this;
  121. self.strokeNode = null;
  122. self.canvas = null;
  123. VmlComponent.apply(this, arguments);
  124. clazz = self._jsPlumb.connectorClass + (params.cssClass ? (" " + params.cssClass) : "");
  125. this.paint = function(d, style, anchor) {
  126. if (style != null) {
  127. var path = self.getPath(d), p = { "path":path };
  128. if (style.outlineColor) {
  129. var outlineWidth = style.outlineWidth || 1,
  130. outlineStrokeWidth = style.lineWidth + (2 * outlineWidth);
  131. outlineStyle = {
  132. strokeStyle:_convertStyle(style.outlineColor),
  133. lineWidth:outlineStrokeWidth
  134. };
  135. if (self.bgCanvas == null) {
  136. p["class"] = clazz;
  137. p["coordsize"] = (d[2] * scale) + "," + (d[3] * scale);
  138. self.bgCanvas = _node("shape", d, p);
  139. jsPlumb.appendElement(self.bgCanvas, params.parent);
  140. _pos(self.bgCanvas, d);
  141. displayElements.push(self.bgCanvas);
  142. }
  143. else {
  144. p["coordsize"] = (d[2] * scale) + "," + (d[3] * scale);
  145. _pos(self.bgCanvas, d);
  146. _atts(self.bgCanvas, p);
  147. }
  148. _applyStyles(self.bgCanvas, outlineStyle, self);
  149. }
  150. if (self.canvas == null) {
  151. p["class"] = clazz;
  152. p["coordsize"] = (d[2] * scale) + "," + (d[3] * scale);
  153. self.canvas = _node("shape", d, p);
  154. jsPlumb.appendElement(self.canvas, params.parent);
  155. displayElements.push(self.canvas);
  156. self.attachListeners(self.canvas, self);
  157. }
  158. else {
  159. p["coordsize"] = (d[2] * scale) + "," + (d[3] * scale);
  160. _pos(self.canvas, d);
  161. _atts(self.canvas, p);
  162. }
  163. _applyStyles(self.canvas, style, self);
  164. }
  165. };
  166. var displayElements = [ self.canvas ];
  167. this.getDisplayElements = function() {
  168. return displayElements;
  169. };
  170. this.appendDisplayElement = function(el) {
  171. self.canvas.parentNode.appendChild(el);
  172. displayElements.push(el);
  173. };
  174. },
  175. /*
  176. *
  177. * Base class for Vml Endpoints. extends VmlComponent.
  178. *
  179. */
  180. VmlEndpoint = function(params) {
  181. VmlComponent.apply(this, arguments);
  182. var vml = null, self = this;
  183. self.canvas = document.createElement("div");
  184. self.canvas.style["position"] = "absolute";
  185. jsPlumb.appendElement(self.canvas, params.parent);
  186. this.paint = function(d, style, anchor) {
  187. var p = { };
  188. jsPlumb.sizeCanvas(self.canvas, d[0], d[1], d[2], d[3]);
  189. if (vml == null) {
  190. p["class"] = jsPlumb.endpointClass;
  191. vml = self.getVml([0,0, d[2], d[3]], p, anchor);
  192. self.canvas.appendChild(vml);
  193. self.attachListeners(vml, self);
  194. }
  195. else {
  196. //p["coordsize"] = "1,1";//(d[2] * scale) + "," + (d[3] * scale); again, unsure.
  197. _pos(vml, [0,0, d[2], d[3]]);
  198. _atts(vml, p);
  199. }
  200. _applyStyles(vml, style);
  201. };
  202. };
  203. jsPlumb.Connectors.vml.Bezier = function() {
  204. jsPlumb.Connectors.Bezier.apply(this, arguments);
  205. VmlConnector.apply(this, arguments);
  206. this.getPath = function(d) {
  207. return "m" + _conv(d[4]) + "," + _conv(d[5]) +
  208. " c" + _conv(d[8]) + "," + _conv(d[9]) + "," + _conv(d[10]) + "," + _conv(d[11]) + "," + _conv(d[6]) + "," + _conv(d[7]) + " e";
  209. };
  210. };
  211. jsPlumb.Connectors.vml.Straight = function() {
  212. jsPlumb.Connectors.Straight.apply(this, arguments);
  213. VmlConnector.apply(this, arguments);
  214. this.getPath = function(d) {
  215. return "m" + _conv(d[4]) + "," + _conv(d[5]) + " l" + _conv(d[6]) + "," + _conv(d[7]) + " e";
  216. };
  217. };
  218. jsPlumb.Connectors.vml.Flowchart = function() {
  219. jsPlumb.Connectors.Flowchart.apply(this, arguments);
  220. VmlConnector.apply(this, arguments);
  221. this.getPath = function(dimensions) {
  222. var p = "m " + _conv(dimensions[4]) + "," + _conv(dimensions[5]) + " l";
  223. // loop through extra points
  224. for (var i = 0; i < dimensions[8]; i++) {
  225. p = p + " " + _conv(dimensions[9 + (i*2)]) + "," + _conv(dimensions[10 + (i*2)]);
  226. }
  227. // finally draw a line to the end
  228. p = p + " " + _conv(dimensions[6]) + "," + _conv(dimensions[7]) + " e";
  229. return p;
  230. };
  231. };
  232. jsPlumb.Endpoints.vml.Dot = function() {
  233. jsPlumb.Endpoints.Dot.apply(this, arguments);
  234. VmlEndpoint.apply(this, arguments);
  235. this.getVml = function(d, atts, anchor) { return _node("oval", d, atts); };
  236. };
  237. jsPlumb.Endpoints.vml.Rectangle = function() {
  238. jsPlumb.Endpoints.Rectangle.apply(this, arguments);
  239. VmlEndpoint.apply(this, arguments);
  240. this.getVml = function(d, atts, anchor) { return _node("rect", d, atts); };
  241. };
  242. /*
  243. * VML Image Endpoint is the same as the default image endpoint.
  244. */
  245. jsPlumb.Endpoints.vml.Image = jsPlumb.Endpoints.Image;
  246. /**
  247. * placeholder for Blank endpoint in vml renderer.
  248. */
  249. jsPlumb.Endpoints.vml.Blank = jsPlumb.Endpoints.Blank;
  250. /**
  251. * VML Label renderer. uses the default label renderer (which adds an element to the DOM)
  252. */
  253. jsPlumb.Overlays.vml.Label = jsPlumb.Overlays.Label;
  254. var AbstractVmlArrowOverlay = function(superclass, originalArgs) {
  255. superclass.apply(this, originalArgs);
  256. VmlComponent.apply(this, arguments);
  257. var self = this, canvas = null, path =null;
  258. var getPath = function(d, connectorDimensions) {
  259. return "m " + _conv(d.hxy.x) + "," + _conv(d.hxy.y) +
  260. " l " + _conv(d.tail[0].x) + "," + _conv(d.tail[0].y) +
  261. " " + _conv(d.cxy.x) + "," + _conv(d.cxy.y) +
  262. " " + _conv(d.tail[1].x) + "," + _conv(d.tail[1].y) +
  263. " x e";
  264. };
  265. this.paint = function(connector, d, lineWidth, strokeStyle, fillStyle, connectorDimensions) {
  266. var p = {};
  267. if (strokeStyle) {
  268. p["stroked"] = "true";
  269. p["strokecolor"] =_convertStyle(strokeStyle, true);
  270. }
  271. if (lineWidth) p["strokeweight"] = lineWidth + "px";
  272. if (fillStyle) {
  273. p["filled"] = "true";
  274. p["fillcolor"] = fillStyle;
  275. }
  276. var xmin = Math.min(d.hxy.x, d.tail[0].x, d.tail[1].x, d.cxy.x),
  277. ymin = Math.min(d.hxy.y, d.tail[0].y, d.tail[1].y, d.cxy.y),
  278. xmax = Math.max(d.hxy.x, d.tail[0].x, d.tail[1].x, d.cxy.x),
  279. ymax = Math.max(d.hxy.y, d.tail[0].y, d.tail[1].y, d.cxy.y),
  280. w = Math.abs(xmax - xmin),
  281. h = Math.abs(ymax - ymin),
  282. dim = [xmin, ymin, w, h];
  283. // for VML, we create overlays using shapes that have the same dimensions and
  284. // coordsize as their connector - overlays calculate themselves relative to the
  285. // connector (it's how it's been done since the original canvas implementation, because
  286. // for canvas that makes sense).
  287. p["path"] = getPath(d, connectorDimensions);
  288. p["coordsize"] = (connectorDimensions[2] * scale) + "," + (connectorDimensions[3] * scale);
  289. dim[0] = connectorDimensions[0];
  290. dim[1] = connectorDimensions[1];
  291. dim[2] = connectorDimensions[2];
  292. dim[3] = connectorDimensions[3];
  293. if (canvas == null) {
  294. //p["class"] = jsPlumb.overlayClass; // TODO currentInstance?
  295. canvas = _node("shape", dim, p);
  296. connector.appendDisplayElement(canvas);
  297. self.attachListeners(canvas, connector);
  298. }
  299. else {
  300. _pos(canvas, dim);
  301. _atts(canvas, p);
  302. }
  303. };
  304. };
  305. jsPlumb.Overlays.vml.Arrow = function() {
  306. AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]);
  307. };
  308. jsPlumb.Overlays.vml.PlainArrow = function() {
  309. AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]);
  310. };
  311. jsPlumb.Overlays.vml.Diamond = function() {
  312. AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]);
  313. };
  314. })();