mxC4.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  1. /**
  2. * $Id: mxC4.js,v 1.5 2018/26/11 12:32:06 mate Exp $
  3. * Copyright (c) 2006-2018, JGraph Ltd
  4. */
  5. //**********************************************************************************************************************************************************
  6. // Person
  7. //**********************************************************************************************************************************************************
  8. /**
  9. * Extends mxShape.
  10. */
  11. function mxShapeC4Person(bounds, fill, stroke, strokewidth)
  12. {
  13. mxShape.call(this);
  14. this.bounds = bounds;
  15. this.fill = fill;
  16. this.stroke = stroke;
  17. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  18. };
  19. /**
  20. * Extends mxShape.
  21. */
  22. mxUtils.extend(mxShapeC4Person, mxShape);
  23. mxShapeC4Person.prototype.cst = {PERSONSHAPE : 'mxgraph.c4.person'};
  24. /**
  25. * Function: paintVertexShape
  26. *
  27. * Paints the vertex shape.
  28. */
  29. mxShapeC4Person.prototype.paintVertexShape = function(c, x, y, w, h)
  30. {
  31. c.translate(x, y);
  32. var headSize = Math.min(w / 2, h / 3);
  33. var r = headSize / 2;
  34. c.ellipse(w * 0.5 - headSize * 0.5, 0, headSize, headSize);
  35. c.fillAndStroke();
  36. c.begin();
  37. c.moveTo(0, headSize * 0.8 + r);
  38. c.arcTo(r, r, 0, 0, 1, r, headSize * 0.8);
  39. c.lineTo(w - r, headSize * 0.8);
  40. c.arcTo(r, r, 0, 0, 1, w, headSize * 0.8 + r);
  41. c.lineTo(w, h - r);
  42. c.arcTo(r, r, 0, 0, 1, w - r, h);
  43. c.lineTo(r, h);
  44. c.arcTo(r, r, 0, 0, 1, 0, h -r);
  45. c.close();
  46. c.fillAndStroke();
  47. c.setShadow(false);
  48. c.ellipse(w * 0.5 - headSize * 0.5, 0, headSize, headSize);
  49. c.fillAndStroke();
  50. };
  51. mxShapeC4Person.prototype.getLabelMargins = function(rect)
  52. {
  53. var headSize = Math.min(rect.width / 2, rect.height / 3);
  54. return new mxRectangle(0, headSize * 0.8, 0, 0);
  55. };
  56. mxCellRenderer.registerShape(mxShapeC4Person.prototype.cst.PERSONSHAPE, mxShapeC4Person);
  57. //**********************************************************************************************************************************************************
  58. // Person
  59. //**********************************************************************************************************************************************************
  60. /**
  61. * Extends mxShape.
  62. */
  63. function mxShapeC4Person2(bounds, fill, stroke, strokewidth)
  64. {
  65. mxShape.call(this);
  66. this.bounds = bounds;
  67. this.fill = fill;
  68. this.stroke = stroke;
  69. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  70. };
  71. /**
  72. * Extends mxShape.
  73. */
  74. mxUtils.extend(mxShapeC4Person2, mxShape);
  75. mxShapeC4Person2.prototype.cst = {PERSONSHAPE : 'mxgraph.c4.person2'};
  76. /**
  77. * Function: paintVertexShape
  78. *
  79. * Paints the vertex shape.
  80. */
  81. mxShapeC4Person2.prototype.paintVertexShape = function(c, x, y, w, h)
  82. {
  83. c.translate(x, y);
  84. var headSize = Math.min(w * 0.45, h * 0.45);
  85. var r = headSize / 2;
  86. c.ellipse(w * 0.5 - headSize * 0.5, 0, headSize, headSize);
  87. c.fillAndStroke();
  88. c.begin();
  89. c.moveTo(0, headSize * 0.8 + r);
  90. c.arcTo(r, r, 0, 0, 1, r, headSize * 0.8);
  91. c.lineTo(w - r, headSize * 0.8);
  92. c.arcTo(r, r, 0, 0, 1, w, headSize * 0.8 + r);
  93. c.lineTo(w, h - r);
  94. c.arcTo(r, r, 0, 0, 1, w - r, h);
  95. c.lineTo(r, h);
  96. c.arcTo(r, r, 0, 0, 1, 0, h -r);
  97. c.close();
  98. c.fillAndStroke();
  99. c.setShadow(false);
  100. c.ellipse(w * 0.5 - headSize * 0.5, 0, headSize, headSize);
  101. c.fillAndStroke();
  102. };
  103. mxShapeC4Person2.prototype.getLabelMargins = function(rect)
  104. {
  105. var headSize = Math.min(rect.width * 0.45, rect.height * 0.45);
  106. return new mxRectangle(0, headSize * 0.8, 0, 0);
  107. };
  108. mxCellRenderer.registerShape(mxShapeC4Person2.prototype.cst.PERSONSHAPE , mxShapeC4Person2);
  109. //**********************************************************************************************************************************************************
  110. // Web Browser Container
  111. //**********************************************************************************************************************************************************
  112. /**
  113. * Extends mxShape.
  114. */
  115. function mxShapeC4WebBrowserContainer(bounds, fill, stroke, strokewidth)
  116. {
  117. mxShape.call(this);
  118. this.bounds = bounds;
  119. this.fill = fill;
  120. this.stroke = stroke;
  121. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  122. };
  123. /**
  124. * Extends mxShape.
  125. */
  126. mxUtils.extend(mxShapeC4WebBrowserContainer, mxShape);
  127. mxShapeC4WebBrowserContainer.prototype.cst = {WEB_BROWSER_CONTAINER_SHAPE : 'mxgraph.c4.webBrowserContainer'};
  128. /**
  129. * Function: paintVertexShape
  130. *
  131. * Paints the vertex shape.
  132. */
  133. mxShapeC4WebBrowserContainer.prototype.paintVertexShape = function(c, x, y, w, h)
  134. {
  135. c.translate(x, y);
  136. var r = 8;
  137. c.begin();
  138. c.moveTo(0, r);
  139. c.arcTo(r, r, 0, 0, 1, r, 0);
  140. c.lineTo(w - r, 0);
  141. c.arcTo(r, r, 0, 0, 1, w, r);
  142. c.lineTo(w, h - r);
  143. c.arcTo(r, r, 0, 0, 1, w - r, h);
  144. c.lineTo(r, h);
  145. c.arcTo(r, r, 0, 0, 1, 0, h - r);
  146. c.close();
  147. c.fillAndStroke();
  148. c.setShadow(false);
  149. var ins = 5;
  150. var r2 = 3;
  151. var h2 = 12;
  152. if (w > (ins * 5 + h2 * 3) && h > (2 * h2 + 3 * ins))
  153. {
  154. c.setFillColor('#23A2D9');
  155. c.begin();
  156. c.moveTo(ins, ins + r2);
  157. c.arcTo(r2, r2, 0, 0, 1, ins + r2, ins);
  158. c.lineTo(w - 3 * h2 - 4 * ins - r2, ins);
  159. c.arcTo(r2, r2, 0, 0, 1, w - 3 * h2 - 4 * ins, ins + r2);
  160. c.lineTo(w - 3 * h2 - 4 * ins, ins + h2 - r2);
  161. c.arcTo(r2, r2, 0, 0, 1, w - 3 * h2 - 4 * ins - r2, ins + h2);
  162. c.lineTo(ins + r2, ins + h2);
  163. c.arcTo(r2, r2, 0, 0, 1, ins, ins + h2 - r2);
  164. c.close();
  165. c.moveTo(w - 3 * h2 - 3 * ins, ins + r2);
  166. c.arcTo(r2, r2, 0, 0, 1, w - 3 * h2 - 3 * ins + r2, ins);
  167. c.lineTo(w - 2 * h2 - 3 * ins - r2, ins);
  168. c.arcTo(r2, r2, 0, 0, 1, w - 2 * h2 - 3 * ins, ins + r2);
  169. c.lineTo(w - 2 * h2 - 3 * ins, ins + h2 - r2);
  170. c.arcTo(r2, r2, 0, 0, 1, w - 2 * h2 - 3 * ins - r2, ins + h2);
  171. c.lineTo(w - 3 * h2 - 3 * ins + r2, ins + h2);
  172. c.arcTo(r2, r2, 0, 0, 1, w - 3 * h2 - 3 * ins, ins + h2 - r2);
  173. c.close();
  174. c.moveTo(w - 2 * h2 - 2 * ins, ins + r2);
  175. c.arcTo(r2, r2, 0, 0, 1, w - 2 * h2 - 2 * ins + r2, ins);
  176. c.lineTo(w - h2 - 2 * ins - r2, ins);
  177. c.arcTo(r2, r2, 0, 0, 1, w - h2 - 2 * ins, ins + r2);
  178. c.lineTo(w - h2 - 2 * ins, ins + h2 - r2);
  179. c.arcTo(r2, r2, 0, 0, 1, w - h2 - 2 * ins - r2, ins + h2);
  180. c.lineTo(w - 2 * h2 - 2 * ins + r2, ins + h2);
  181. c.arcTo(r2, r2, 0, 0, 1, w - 2 * h2 - 2 * ins, ins + h2 - r2);
  182. c.close();
  183. c.moveTo(w - h2 - ins, ins + r2);
  184. c.arcTo(r2, r2, 0, 0, 1, w - h2 - ins + r2, ins);
  185. c.lineTo(w - ins - r2, ins);
  186. c.arcTo(r2, r2, 0, 0, 1, w - ins, ins + r2);
  187. c.lineTo(w - ins, ins + h2 - r2);
  188. c.arcTo(r2, r2, 0, 0, 1, w - ins - r2, ins + h2);
  189. c.lineTo(w - h2 - ins + r2, ins + h2);
  190. c.arcTo(r2, r2, 0, 0, 1, w - h2 - ins, ins + h2 - r2);
  191. c.close();
  192. c.moveTo(ins, h2 + 2 * ins + r);
  193. c.arcTo(r, r, 0, 0, 1, ins + r, h2 + 2 * ins);
  194. c.lineTo(w - r - ins, h2 + 2 * ins);
  195. c.arcTo(r, r, 0, 0, 1, w - ins, h2 + 2 * ins + r);
  196. c.lineTo(w - ins, h - r - ins);
  197. c.arcTo(r, r, 0, 0, 1, w - r - ins, h - ins);
  198. c.lineTo(ins + r, h - ins);
  199. c.arcTo(r, r, 0, 0, 1, ins, h - r - ins);
  200. c.close();
  201. c.fill();
  202. c.fill();
  203. }
  204. };
  205. mxCellRenderer.registerShape(mxShapeC4WebBrowserContainer.prototype.cst.WEB_BROWSER_CONTAINER_SHAPE, mxShapeC4WebBrowserContainer);
  206. //**********************************************************************************************************************************************************
  207. // Web Browser Container v2
  208. //**********************************************************************************************************************************************************
  209. /**
  210. * Extends mxShape.
  211. */
  212. function mxShapeC4WebBrowserContainer2(bounds, fill, stroke, strokewidth)
  213. {
  214. mxShape.call(this);
  215. this.bounds = bounds;
  216. this.fill = fill;
  217. this.stroke = stroke;
  218. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  219. };
  220. /**
  221. * Extends mxShape.
  222. */
  223. mxUtils.extend(mxShapeC4WebBrowserContainer2, mxShape);
  224. mxShapeC4WebBrowserContainer2.prototype.cst = {WEB_BROWSER_CONTAINER2_SHAPE : 'mxgraph.c4.webBrowserContainer2'};
  225. mxShapeC4WebBrowserContainer2.prototype.customProperties = [
  226. {name: 'strokeColor2', dispName: 'Outline color', type: 'color', defVal: '#0E7DAD'}
  227. ];
  228. /**
  229. * Function: paintVertexShape
  230. *
  231. * Paints the vertex shape.
  232. */
  233. mxShapeC4WebBrowserContainer2.prototype.paintVertexShape = function(c, x, y, w, h)
  234. {
  235. c.translate(x, y);
  236. var r = 8;
  237. var fillColor = mxUtils.getValue(this.state.style, 'fillColor', '#ffffff');
  238. var strokeColor = mxUtils.getValue(this.state.style, 'strokeColor', '#000000');
  239. var strokeColor2 = mxUtils.getValue(this.state.style, 'strokeColor2', '#0E7DAD');
  240. c.setStrokeColor(strokeColor2);
  241. c.setFillColor(strokeColor);
  242. c.begin();
  243. c.moveTo(0, r);
  244. c.arcTo(r, r, 0, 0, 1, r, 0);
  245. c.lineTo(w - r, 0);
  246. c.arcTo(r, r, 0, 0, 1, w, r);
  247. c.lineTo(w, h - r);
  248. c.arcTo(r, r, 0, 0, 1, w - r, h);
  249. c.lineTo(r, h);
  250. c.arcTo(r, r, 0, 0, 1, 0, h - r);
  251. c.close();
  252. c.fillAndStroke();
  253. c.setShadow(false);
  254. var ins = 5;
  255. var r2 = 3;
  256. var h2 = 12;
  257. if (w > (ins * 5 + h2 * 3) && h > (2 * h2 + 3 * ins))
  258. {
  259. //set fill color to fill color
  260. c.setFillColor(fillColor);
  261. c.begin();
  262. c.moveTo(ins, ins + r2);
  263. c.arcTo(r2, r2, 0, 0, 1, ins + r2, ins);
  264. c.lineTo(w - 3 * h2 - 4 * ins - r2, ins);
  265. c.arcTo(r2, r2, 0, 0, 1, w - 3 * h2 - 4 * ins, ins + r2);
  266. c.lineTo(w - 3 * h2 - 4 * ins, ins + h2 - r2);
  267. c.arcTo(r2, r2, 0, 0, 1, w - 3 * h2 - 4 * ins - r2, ins + h2);
  268. c.lineTo(ins + r2, ins + h2);
  269. c.arcTo(r2, r2, 0, 0, 1, ins, ins + h2 - r2);
  270. c.close();
  271. c.moveTo(w - 3 * h2 - 3 * ins, ins + r2);
  272. c.arcTo(r2, r2, 0, 0, 1, w - 3 * h2 - 3 * ins + r2, ins);
  273. c.lineTo(w - 2 * h2 - 3 * ins - r2, ins);
  274. c.arcTo(r2, r2, 0, 0, 1, w - 2 * h2 - 3 * ins, ins + r2);
  275. c.lineTo(w - 2 * h2 - 3 * ins, ins + h2 - r2);
  276. c.arcTo(r2, r2, 0, 0, 1, w - 2 * h2 - 3 * ins - r2, ins + h2);
  277. c.lineTo(w - 3 * h2 - 3 * ins + r2, ins + h2);
  278. c.arcTo(r2, r2, 0, 0, 1, w - 3 * h2 - 3 * ins, ins + h2 - r2);
  279. c.close();
  280. c.moveTo(w - 2 * h2 - 2 * ins, ins + r2);
  281. c.arcTo(r2, r2, 0, 0, 1, w - 2 * h2 - 2 * ins + r2, ins);
  282. c.lineTo(w - h2 - 2 * ins - r2, ins);
  283. c.arcTo(r2, r2, 0, 0, 1, w - h2 - 2 * ins, ins + r2);
  284. c.lineTo(w - h2 - 2 * ins, ins + h2 - r2);
  285. c.arcTo(r2, r2, 0, 0, 1, w - h2 - 2 * ins - r2, ins + h2);
  286. c.lineTo(w - 2 * h2 - 2 * ins + r2, ins + h2);
  287. c.arcTo(r2, r2, 0, 0, 1, w - 2 * h2 - 2 * ins, ins + h2 - r2);
  288. c.close();
  289. c.moveTo(w - h2 - ins, ins + r2);
  290. c.arcTo(r2, r2, 0, 0, 1, w - h2 - ins + r2, ins);
  291. c.lineTo(w - ins - r2, ins);
  292. c.arcTo(r2, r2, 0, 0, 1, w - ins, ins + r2);
  293. c.lineTo(w - ins, ins + h2 - r2);
  294. c.arcTo(r2, r2, 0, 0, 1, w - ins - r2, ins + h2);
  295. c.lineTo(w - h2 - ins + r2, ins + h2);
  296. c.arcTo(r2, r2, 0, 0, 1, w - h2 - ins, ins + h2 - r2);
  297. c.close();
  298. c.moveTo(ins, h2 + 2 * ins + r);
  299. c.arcTo(r, r, 0, 0, 1, ins + r, h2 + 2 * ins);
  300. c.lineTo(w - r - ins, h2 + 2 * ins);
  301. c.arcTo(r, r, 0, 0, 1, w - ins, h2 + 2 * ins + r);
  302. c.lineTo(w - ins, h - r - ins);
  303. c.arcTo(r, r, 0, 0, 1, w - r - ins, h - ins);
  304. c.lineTo(ins + r, h - ins);
  305. c.arcTo(r, r, 0, 0, 1, ins, h - r - ins);
  306. c.close();
  307. c.fill();
  308. c.fill();
  309. }
  310. };
  311. mxCellRenderer.registerShape(mxShapeC4WebBrowserContainer2.prototype.cst.WEB_BROWSER_CONTAINER2_SHAPE, mxShapeC4WebBrowserContainer2);