mxArchiMate.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990
  1. /**
  2. * $Id: mxArchiMate.js,v 1.0 2014/03/17 07:05:39 mate Exp $
  3. * Copyright (c) 2006-2014, JGraph Ltd
  4. */
  5. //**********************************************************************************************************************************************************
  6. //Location
  7. //**********************************************************************************************************************************************************
  8. /**
  9. * Extends mxShape.
  10. */
  11. function mxArchiMateLocation(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(mxArchiMateLocation, mxShape);
  23. mxArchiMateLocation.prototype.cst = {
  24. LOCATION : 'mxgraph.archimate.location'
  25. };
  26. /**
  27. * Function: paintVertexShape
  28. *
  29. * Paints the vertex shape.
  30. */
  31. mxArchiMateLocation.prototype.paintVertexShape = function(c, x, y, w, h)
  32. {
  33. c.translate(x, y);
  34. this.background(c, 0, 0, w, h);
  35. c.setShadow(false);
  36. c.translate(w - 20, 5);
  37. this.foreground(c, w - 20, 5, 15, 15);
  38. };
  39. mxArchiMateLocation.prototype.background = function(c, x, y, w, h)
  40. {
  41. c.rect(0, 0, w, h);
  42. c.fillAndStroke();
  43. };
  44. mxArchiMateLocation.prototype.foreground = function(c, x, y, w, h)
  45. {
  46. c.setDashed(false);
  47. c.translate(3 ,0);
  48. w = w - 6;
  49. c.begin();
  50. c.moveTo(w * 0.5, h);
  51. c.arcTo(w * 0.1775, h * 0.3, 0, 0, 0, w * 0.345, h * 0.7);
  52. c.arcTo(w * 0.538, h * 0.364, 0, 0, 1, w * 0.5, 0);
  53. c.arcTo(w * 0.538, h * 0.364, 0, 0, 1, w * 0.655, h * 0.7);
  54. c.arcTo(w * 0.1775, h * 0.3, 0, 0, 0, w * 0.5, h);
  55. c.stroke();
  56. };
  57. mxCellRenderer.registerShape(mxArchiMateLocation.prototype.cst.LOCATION, mxArchiMateLocation);
  58. //**********************************************************************************************************************************************************
  59. //Business
  60. //**********************************************************************************************************************************************************
  61. /**
  62. * Extends mxShape.
  63. */
  64. function mxArchiMateBusiness(bounds, fill, stroke, strokewidth)
  65. {
  66. mxShape.call(this);
  67. this.bounds = bounds;
  68. this.fill = fill;
  69. this.stroke = stroke;
  70. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  71. };
  72. /**
  73. * Extends mxShape.
  74. */
  75. mxUtils.extend(mxArchiMateBusiness, mxShape);
  76. mxArchiMateBusiness.prototype.cst = {
  77. BUSINESS : 'mxgraph.archimate.business',
  78. TYPE : 'busType',
  79. PROCESS : 'process',
  80. FUNCTION : 'function',
  81. INTERACTION : 'interaction',
  82. EVENT : 'event',
  83. SERVICE : 'service'
  84. };
  85. /**
  86. * Function: paintVertexShape
  87. *
  88. * Paints the vertex shape.
  89. */
  90. mxArchiMateBusiness.prototype.paintVertexShape = function(c, x, y, w, h)
  91. {
  92. c.translate(x, y);
  93. this.background(c, 0, 0, w, h);
  94. c.setShadow(false);
  95. c.translate(w - 20, 5);
  96. this.foreground(c, w - 20, 5, 15, 15);
  97. };
  98. mxArchiMateBusiness.prototype.background = function(c, x, y, w, h)
  99. {
  100. c.roundrect(0, 0, w, h, 10, 10);
  101. c.fillAndStroke();
  102. };
  103. mxArchiMateBusiness.prototype.foreground = function(c, x, y, w, h)
  104. {
  105. var type = mxUtils.getValue(this.style, mxArchiMateBusiness.prototype.cst.TYPE, mxArchiMateBusiness.prototype.cst.PROCESS);
  106. c.setDashed(false);
  107. if (type === mxArchiMateBusiness.prototype.cst.PROCESS)
  108. {
  109. c.translate(0, 2);
  110. h = h - 4;
  111. c.begin();
  112. c.moveTo(0, h * 0.15);
  113. c.lineTo(w * 0.65, h * 0.15);
  114. c.lineTo(w * 0.65, 0);
  115. c.lineTo(w, h * 0.5);
  116. c.lineTo(w * 0.65, h);
  117. c.lineTo(w * 0.65, h * 0.85);
  118. c.lineTo(0, h * 0.85);
  119. c.close();
  120. c.stroke();
  121. }
  122. else if (type === mxArchiMateBusiness.prototype.cst.FUNCTION)
  123. {
  124. c.translate(2, 0);
  125. w = w - 4;
  126. c.begin();
  127. c.moveTo(0, h * 0.15);
  128. c.lineTo(w * 0.5, 0);
  129. c.lineTo(w, h * 0.15);
  130. c.lineTo(w, h);
  131. c.lineTo(w * 0.5, h * 0.85);
  132. c.lineTo(0, h);
  133. c.close();
  134. c.stroke();
  135. }
  136. else if (type === mxArchiMateBusiness.prototype.cst.INTERACTION)
  137. {
  138. c.begin();
  139. c.moveTo(w * 0.55, 0);
  140. c.arcTo(w * 0.45, h * 0.5, 0, 0, 1, w * 0.55, h);
  141. c.close();
  142. c.moveTo(w * 0.45, 0);
  143. c.arcTo(w * 0.45, h * 0.5, 0, 0, 0, w * 0.45, h);
  144. c.close();
  145. c.stroke();
  146. }
  147. else if (type === mxArchiMateBusiness.prototype.cst.EVENT)
  148. {
  149. c.translate(0, 3);
  150. h = h - 6;
  151. c.begin();
  152. c.moveTo(w - h * 0.5, 0);
  153. c.arcTo(h * 0.5, h * 0.5, 0, 0, 1, w - h * 0.5, h);
  154. c.lineTo(0, h);
  155. c.arcTo(h * 0.5, h * 0.5, 0, 0, 0, 0, 0);
  156. c.close();
  157. c.stroke();
  158. }
  159. else if (type === mxArchiMateBusiness.prototype.cst.SERVICE)
  160. {
  161. c.translate(0, 3);
  162. h = h - 6;
  163. c.begin();
  164. c.moveTo(w - h * 0.5, 0);
  165. c.arcTo(h * 0.5, h * 0.5, 0, 0, 1, w - h * 0.5, h);
  166. c.lineTo(0, h);
  167. c.arcTo(h * 0.5, h * 0.5, 0, 0, 1, 0, 0);
  168. c.close();
  169. c.stroke();
  170. }
  171. };
  172. mxCellRenderer.registerShape(mxArchiMateBusiness.prototype.cst.BUSINESS, mxArchiMateBusiness);
  173. //**********************************************************************************************************************************************************
  174. //Business Object
  175. //**********************************************************************************************************************************************************
  176. /**
  177. * Extends mxShape.
  178. */
  179. function mxArchiMateBusinessObject(bounds, fill, stroke, strokewidth)
  180. {
  181. mxShape.call(this);
  182. this.bounds = bounds;
  183. this.fill = fill;
  184. this.stroke = stroke;
  185. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  186. };
  187. /**
  188. * Extends mxShape.
  189. */
  190. mxUtils.extend(mxArchiMateBusinessObject, mxShape);
  191. mxArchiMateBusinessObject.prototype.cst = {
  192. BUSINESS_OBJECT : 'mxgraph.archimate.businessObject'
  193. };
  194. /**
  195. * Function: paintVertexShape
  196. *
  197. * Paints the vertex shape.
  198. */
  199. mxArchiMateBusinessObject.prototype.paintVertexShape = function(c, x, y, w, h)
  200. {
  201. c.translate(x, y);
  202. this.background(c, 0, 0, w, h);
  203. c.setShadow(false);
  204. this.foreground(c, 0, 0, w, h);
  205. };
  206. mxArchiMateBusinessObject.prototype.background = function(c, x, y, w, h)
  207. {
  208. c.rect(0, 0, w, h);
  209. c.fillAndStroke();
  210. };
  211. mxArchiMateBusinessObject.prototype.foreground = function(c, x, y, w, h)
  212. {
  213. if (h >= 15)
  214. {
  215. c.begin();
  216. c.moveTo(0, 15);
  217. c.lineTo(w, 15);
  218. c.stroke();
  219. }
  220. };
  221. mxCellRenderer.registerShape(mxArchiMateBusinessObject.prototype.cst.BUSINESS_OBJECT, mxArchiMateBusinessObject);
  222. //**********************************************************************************************************************************************************
  223. //Representation
  224. //**********************************************************************************************************************************************************
  225. /**
  226. * Extends mxShape.
  227. */
  228. function mxArchiMateRepresentation(bounds, fill, stroke, strokewidth)
  229. {
  230. mxShape.call(this);
  231. this.bounds = bounds;
  232. this.fill = fill;
  233. this.stroke = stroke;
  234. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  235. };
  236. /**
  237. * Extends mxShape.
  238. */
  239. mxUtils.extend(mxArchiMateRepresentation, mxShape);
  240. mxArchiMateRepresentation.prototype.cst = {
  241. REPRESENTATION : 'mxgraph.archimate.representation'
  242. };
  243. /**
  244. * Function: paintVertexShape
  245. *
  246. * Paints the vertex shape.
  247. */
  248. mxArchiMateRepresentation.prototype.paintVertexShape = function(c, x, y, w, h)
  249. {
  250. c.translate(x, y);
  251. this.background(c, 0, 0, w, h);
  252. };
  253. mxArchiMateRepresentation.prototype.background = function(c, x, y, w, h)
  254. {
  255. c.begin();
  256. c.moveTo(0, 0);
  257. c.lineTo(w, 0);
  258. c.lineTo(w, h * 0.85);
  259. c.arcTo(w * 0.35, h * 0.35, 0, 0, 0, w * 0.5, h * 0.85);
  260. c.arcTo(w * 0.35, h * 0.35, 0, 0, 1, 0, h * 0.85);
  261. c.close();
  262. c.fillAndStroke();
  263. };
  264. mxCellRenderer.registerShape(mxArchiMateRepresentation.prototype.cst.REPRESENTATION, mxArchiMateRepresentation);
  265. //**********************************************************************************************************************************************************
  266. //Product
  267. //**********************************************************************************************************************************************************
  268. /**
  269. * Extends mxShape.
  270. */
  271. function mxArchiMateProduct(bounds, fill, stroke, strokewidth)
  272. {
  273. mxShape.call(this);
  274. this.bounds = bounds;
  275. this.fill = fill;
  276. this.stroke = stroke;
  277. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  278. };
  279. /**
  280. * Extends mxShape.
  281. */
  282. mxUtils.extend(mxArchiMateProduct, mxShape);
  283. mxArchiMateProduct.prototype.cst = {
  284. PRODUCT : 'mxgraph.archimate.product'
  285. };
  286. /**
  287. * Function: paintVertexShape
  288. *
  289. * Paints the vertex shape.
  290. */
  291. mxArchiMateProduct.prototype.paintVertexShape = function(c, x, y, w, h)
  292. {
  293. c.translate(x, y);
  294. this.background(c, 0, 0, w, h);
  295. c.setShadow(false);
  296. this.foreground(c, 0, 0, w, h);
  297. };
  298. mxArchiMateProduct.prototype.background = function(c, x, y, w, h)
  299. {
  300. c.rect(0, 0, w, h);
  301. c.fillAndStroke();
  302. };
  303. mxArchiMateProduct.prototype.foreground = function(c, x, y, w, h)
  304. {
  305. if (h >= 15)
  306. {
  307. c.begin();
  308. c.moveTo(0, 15);
  309. c.lineTo(w * 0.6, 15);
  310. c.lineTo(w * 0.6, 0);
  311. c.stroke();
  312. }
  313. };
  314. mxCellRenderer.registerShape(mxArchiMateProduct.prototype.cst.PRODUCT, mxArchiMateProduct);
  315. //**********************************************************************************************************************************************************
  316. //Application
  317. //**********************************************************************************************************************************************************
  318. /**
  319. * Extends mxShape.
  320. */
  321. function mxArchiMateApplication(bounds, fill, stroke, strokewidth)
  322. {
  323. mxShape.call(this);
  324. this.bounds = bounds;
  325. this.fill = fill;
  326. this.stroke = stroke;
  327. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  328. };
  329. /**
  330. * Extends mxShape.
  331. */
  332. mxUtils.extend(mxArchiMateApplication, mxShape);
  333. mxArchiMateApplication.prototype.cst = {
  334. APPLICATION : 'mxgraph.archimate.application',
  335. TYPE : 'appType',
  336. COMPONENT : 'comp',
  337. COLLABORATION : 'collab',
  338. INTERFACE : 'interface',
  339. INTERFACE2 : 'interface2',
  340. FUNCTION : 'function',
  341. INTERACTION : 'interaction',
  342. SERVICE : 'service',
  343. NODE : 'node',
  344. NETWORK : 'network',
  345. COMM_PATH : 'commPath',
  346. SYS_SW : 'sysSw',
  347. ARTIFACT : 'artifact',
  348. ACTOR : 'actor',
  349. ROLE : 'role',
  350. COLLABORATION : 'collab'
  351. };
  352. /**
  353. * Function: paintVertexShape
  354. *
  355. * Paints the vertex shape.
  356. */
  357. mxArchiMateApplication.prototype.paintVertexShape = function(c, x, y, w, h)
  358. {
  359. c.translate(x, y);
  360. this.background(c, 0, 0, w, h);
  361. c.setShadow(false);
  362. c.translate(w - 20, 5);
  363. this.foreground(c, w - 20, 5, 15, 15);
  364. };
  365. mxArchiMateApplication.prototype.background = function(c, x, y, w, h)
  366. {
  367. c.rect(0, 0, w, h);
  368. c.fillAndStroke();
  369. };
  370. mxArchiMateApplication.prototype.foreground = function(c, x, y, w, h)
  371. {
  372. var type = mxUtils.getValue(this.style, mxArchiMateApplication.prototype.cst.TYPE, mxArchiMateApplication.prototype.cst.COMPONENT);
  373. c.setDashed(false);
  374. if (type === mxArchiMateApplication.prototype.cst.COMPONENT)
  375. {
  376. c.translate(1, 0);
  377. w = w - 2;
  378. c.rect(w * 0.25, 0, w * 0.75, h);
  379. c.stroke();
  380. c.rect(0, h * 0.25, w * 0.5, h * 0.15);
  381. c.fillAndStroke();
  382. c.rect(0, h * 0.6, w * 0.5, h * 0.15);
  383. c.fillAndStroke();
  384. }
  385. else if (type === mxArchiMateApplication.prototype.cst.COLLABORATION)
  386. {
  387. c.translate(0, 3);
  388. h = h - 6;
  389. c.ellipse(0, 0, w * 0.6, h);
  390. c.stroke();
  391. c.ellipse(w * 0.4, 0, w * 0.6, h);
  392. c.fillAndStroke();
  393. }
  394. else if (type === mxArchiMateApplication.prototype.cst.INTERFACE)
  395. {
  396. c.translate(0, 4);
  397. h = h - 8;
  398. c.ellipse(w * 0.5, 0, w * 0.5, h);
  399. c.stroke();
  400. c.begin();
  401. c.moveTo(0, h * 0.5);
  402. c.lineTo(w * 0.5, h * 0.5);
  403. c.stroke();
  404. }
  405. else if (type === mxArchiMateApplication.prototype.cst.INTERFACE2)
  406. {
  407. c.translate(0, 1);
  408. h = h - 2;
  409. c.begin();
  410. c.moveTo(0, h * 0.5);
  411. c.lineTo(w * 0.6, h * 0.5);
  412. c.moveTo(w, 0);
  413. c.arcTo(w * 0.4, h * 0.5, 0, 0, 0, w, h);
  414. c.stroke();
  415. }
  416. else if (type === mxArchiMateApplication.prototype.cst.FUNCTION)
  417. {
  418. c.begin();
  419. c.moveTo(w * 0.5, 0);
  420. c.lineTo(w, h * 0.2);
  421. c.lineTo(w, h);
  422. c.lineTo(w * 0.5, h * 0.8);
  423. c.lineTo(0, h);
  424. c.lineTo(0, h * 0.2);
  425. c.close();
  426. c.stroke();
  427. }
  428. else if (type === mxArchiMateApplication.prototype.cst.INTERACTION)
  429. {
  430. c.begin();
  431. c.moveTo(w * 0.55, 0);
  432. c.arcTo(w * 0.45, h * 0.5, 0, 0, 1, w * 0.55, h);
  433. c.close();
  434. c.moveTo(w * 0.45, 0);
  435. c.arcTo(w * 0.45, h * 0.5, 0, 0, 0, w * 0.45, h);
  436. c.close();
  437. c.stroke();
  438. }
  439. else if (type === mxArchiMateApplication.prototype.cst.SERVICE)
  440. {
  441. c.translate(0, 3);
  442. h = h - 6;
  443. c.begin();
  444. c.moveTo(w - h * 0.5, 0);
  445. c.arcTo(h * 0.5, h * 0.5, 0, 0, 1, w - h * 0.5, h);
  446. c.lineTo(0, h);
  447. c.arcTo(h * 0.5, h * 0.5, 0, 0, 1, 0, 0);
  448. c.close();
  449. c.stroke();
  450. }
  451. else if (type === mxArchiMateApplication.prototype.cst.NODE)
  452. {
  453. c.begin();
  454. c.moveTo(0, h * 0.25);
  455. c.lineTo(w * 0.25, 0);
  456. c.lineTo(w, 0);
  457. c.lineTo(w, h * 0.75);
  458. c.lineTo(w * 0.75, h);
  459. c.lineTo(0, h);
  460. c.close();
  461. c.moveTo(0, h * 0.25);
  462. c.lineTo(w * 0.75, h * 0.25);
  463. c.lineTo(w * 0.75, h);
  464. c.moveTo(w, 0);
  465. c.lineTo(w * 0.75, h * 0.25);
  466. c.stroke();
  467. }
  468. else if (type === mxArchiMateApplication.prototype.cst.NETWORK)
  469. {
  470. c.translate(0, 2);
  471. h = h - 4;
  472. c.begin();
  473. c.moveTo(w * 0.4, h * 0.2);
  474. c.lineTo(w * 0.85, h * 0.2);
  475. c.lineTo(w * 0.6, h * 0.8);
  476. c.lineTo(w * 0.15, h * 0.8);
  477. c.close();
  478. c.stroke();
  479. var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');
  480. c.setFillColor(strokeColor);
  481. c.ellipse(w * 0.25, 0, w * 0.3, h * 0.4);
  482. c.fill();
  483. c.ellipse(w * 0.7, 0, w * 0.3, h * 0.4);
  484. c.fill();
  485. c.ellipse(0, h * 0.6, w * 0.3, h * 0.4);
  486. c.fill();
  487. c.ellipse(w * 0.45, h * 0.6, w * 0.3, h * 0.4);
  488. c.fill();
  489. }
  490. else if (type === mxArchiMateApplication.prototype.cst.COMM_PATH)
  491. {
  492. c.translate(0, 5);
  493. h = h - 10;
  494. c.begin();
  495. c.moveTo(w * 0.1, 0);
  496. c.lineTo(0, h * 0.5);
  497. c.lineTo(w * 0.1, h);
  498. c.moveTo(w * 0.9, 0);
  499. c.lineTo(w, h * 0.5);
  500. c.lineTo(w * 0.9, h);
  501. c.stroke();
  502. c.setDashed(true);
  503. c.begin();
  504. c.moveTo(0, h * 0.5);
  505. c.lineTo(w, h * 0.5);
  506. c.stroke();
  507. }
  508. else if (type === mxArchiMateApplication.prototype.cst.SYS_SW)
  509. {
  510. c.ellipse(w * 0.3, 0, w * 0.7, h * 0.7);
  511. c.stroke();
  512. c.ellipse(0, h * 0.02, w * 0.98, h * 0.98);
  513. c.fillAndStroke();
  514. }
  515. else if (type === mxArchiMateApplication.prototype.cst.ARTIFACT)
  516. {
  517. c.translate(2, 0);
  518. w = w - 4;
  519. c.begin();
  520. c.moveTo(0, 0);
  521. c.lineTo(w * 0.7, 0);
  522. c.lineTo(w, h * 0.22);
  523. c.lineTo(w, h);
  524. c.lineTo(0, h);
  525. c.close();
  526. c.moveTo(w * 0.7, 0);
  527. c.lineTo(w * 0.7, h * 0.22);
  528. c.lineTo(w, h * 0.22);
  529. c.stroke();
  530. }
  531. else if (type === mxArchiMateApplication.prototype.cst.ACTOR)
  532. {
  533. c.translate(3, 0);
  534. w = w - 6;
  535. c.ellipse(w * 0.2, 0, w * 0.6, h * 0.3);
  536. c.stroke();
  537. c.begin();
  538. c.moveTo(w * 0.5, h * 0.3);
  539. c.lineTo(w * 0.5, h * 0.75);
  540. c.moveTo(0, h * 0.45);
  541. c.lineTo(w, h * 0.45);
  542. c.moveTo(0, h);
  543. c.lineTo(w * 0.5, h * 0.75);
  544. c.lineTo(w, h);
  545. c.stroke();
  546. }
  547. if (type === mxArchiMateApplication.prototype.cst.ROLE)
  548. {
  549. c.translate(0, 4);
  550. h = h - 8;
  551. c.begin();
  552. c.moveTo(w * 0.8, 0);
  553. c.lineTo(w * 0.2, 0);
  554. c.arcTo(w * 0.2, h * 0.5, 0, 0, 0, w * 0.2, h);
  555. c.lineTo(w * 0.8, h);
  556. c.stroke();
  557. c.ellipse(w * 0.6, 0, w * 0.4, h);
  558. c.stroke();
  559. }
  560. // else if (type === mxArchiMateApplication.prototype.cst.COLLABORATION)
  561. // {
  562. // c.translate(0, 3);
  563. // h = h - 6;
  564. //
  565. // c.ellipse(0, 0, w * 0.6, h);
  566. // c.stroke();
  567. // c.ellipse(w * 0.4, 0, w * 0.6, h);
  568. // c.stroke();
  569. // }
  570. };
  571. mxCellRenderer.registerShape(mxArchiMateApplication.prototype.cst.APPLICATION, mxArchiMateApplication);
  572. //**********************************************************************************************************************************************************
  573. //Tech
  574. //**********************************************************************************************************************************************************
  575. /**
  576. * Extends mxShape.
  577. */
  578. function mxArchiMateTech(bounds, fill, stroke, strokewidth)
  579. {
  580. mxShape.call(this);
  581. this.bounds = bounds;
  582. this.fill = fill;
  583. this.stroke = stroke;
  584. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  585. };
  586. /**
  587. * Extends mxShape.
  588. */
  589. mxUtils.extend(mxArchiMateTech, mxShape);
  590. mxArchiMateTech.prototype.cst = {
  591. TECH : 'mxgraph.archimate.tech',
  592. TYPE : 'techType',
  593. DEVICE : 'device',
  594. PLATEAU : 'plateau'
  595. };
  596. /**
  597. * Function: paintVertexShape
  598. *
  599. * Paints the vertex shape.
  600. */
  601. mxArchiMateTech.prototype.paintVertexShape = function(c, x, y, w, h)
  602. {
  603. c.translate(x, y);
  604. this.background(c, 0, 0, w, h);
  605. c.setShadow(false);
  606. c.translate(w - 30, 15);
  607. this.foreground(c, w - 30, 15, 15, 15);
  608. };
  609. mxArchiMateTech.prototype.background = function(c, x, y, w, h)
  610. {
  611. c.begin();
  612. c.moveTo(0, 10);
  613. c.lineTo(10, 0);
  614. c.lineTo(w, 0);
  615. c.lineTo(w, h - 10);
  616. c.lineTo(w - 10, h);
  617. c.lineTo(0, h);
  618. c.close();
  619. c.moveTo(0, 10);
  620. c.lineTo(w - 10, 10);
  621. c.lineTo(w - 10, h);
  622. c.moveTo(w, 0);
  623. c.lineTo(w - 10, 10);
  624. c.fillAndStroke();
  625. };
  626. mxArchiMateTech.prototype.foreground = function(c, x, y, w, h)
  627. {
  628. var type = mxUtils.getValue(this.style, mxArchiMateTech.prototype.cst.TYPE, mxArchiMateTech.prototype.cst.DEVICE);
  629. c.setDashed(false);
  630. if (type === mxArchiMateTech.prototype.cst.DEVICE)
  631. {
  632. c.roundrect(0, 0, w, h * 0.88, w * 0.05, h * 0.05);
  633. c.stroke();
  634. c.begin();
  635. c.moveTo(w * 0.1, h * 0.88);
  636. c.lineTo(0, h);
  637. c.lineTo(w, h);
  638. c.lineTo(w * 0.9, h * 0.88);
  639. c.stroke();
  640. }
  641. else if (type === mxArchiMateTech.prototype.cst.PLATEAU)
  642. {
  643. var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');
  644. c.setFillColor(strokeColor);
  645. c.rect(w * 0.4, 0, w * 0.6, h * 0.2);
  646. c.fill();
  647. c.rect(w * 0.2, h * 0.4, w * 0.6, h * 0.2);
  648. c.fill();
  649. c.rect(0, h * 0.8, w * 0.6, h * 0.2);
  650. c.fill();
  651. }
  652. };
  653. mxCellRenderer.registerShape(mxArchiMateTech.prototype.cst.TECH, mxArchiMateTech);
  654. //**********************************************************************************************************************************************************
  655. //Motivational
  656. //**********************************************************************************************************************************************************
  657. /**
  658. * Extends mxShape.
  659. */
  660. function mxArchiMateMotivational(bounds, fill, stroke, strokewidth)
  661. {
  662. mxShape.call(this);
  663. this.bounds = bounds;
  664. this.fill = fill;
  665. this.stroke = stroke;
  666. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  667. };
  668. /**
  669. * Extends mxShape.
  670. */
  671. mxUtils.extend(mxArchiMateMotivational, mxShape);
  672. mxArchiMateMotivational.prototype.cst = {
  673. MOTIV : 'mxgraph.archimate.motiv',
  674. TYPE : 'motivType',
  675. STAKE : 'stake',
  676. DRIVER : 'driver',
  677. ASSESSMENT : 'assess',
  678. GOAL : 'goal',
  679. REQUIREMENT : 'req',
  680. CONSTRAINT : 'const',
  681. PRINCIPLE : 'princ'
  682. };
  683. /**
  684. * Function: paintVertexShape
  685. *
  686. * Paints the vertex shape.
  687. */
  688. mxArchiMateMotivational.prototype.paintVertexShape = function(c, x, y, w, h)
  689. {
  690. c.translate(x, y);
  691. this.background(c, 0, 0, w, h);
  692. c.setShadow(false);
  693. c.translate(w - 20, 5);
  694. this.foreground(c, w - 20, 5, 15, 15);
  695. };
  696. mxArchiMateMotivational.prototype.background = function(c, x, y, w, h)
  697. {
  698. c.begin();
  699. c.moveTo(10, 0);
  700. c.lineTo(w - 10, 0);
  701. c.lineTo(w, 10);
  702. c.lineTo(w, h - 10);
  703. c.lineTo(w - 10, h);
  704. c.lineTo(10, h);
  705. c.lineTo(0, h - 10);
  706. c.lineTo(0, 10);
  707. c.close();
  708. c.fillAndStroke();
  709. };
  710. mxArchiMateMotivational.prototype.foreground = function(c, x, y, w, h)
  711. {
  712. var type = mxUtils.getValue(this.style, mxArchiMateMotivational.prototype.cst.TYPE, mxArchiMateMotivational.prototype.cst.STAKE);
  713. c.setDashed(false);
  714. if (type === mxArchiMateMotivational.prototype.cst.STAKE)
  715. {
  716. c.translate(0, 4);
  717. h = h - 8;
  718. c.begin();
  719. c.moveTo(w * 0.8, 0);
  720. c.lineTo(w * 0.2, 0);
  721. c.arcTo(w * 0.2, h * 0.5, 0, 0, 0, w * 0.2, h);
  722. c.lineTo(w * 0.8, h);
  723. c.stroke();
  724. c.ellipse(w * 0.6, 0, w * 0.4, h);
  725. c.stroke();
  726. }
  727. else if (type === mxArchiMateMotivational.prototype.cst.DRIVER)
  728. {
  729. c.ellipse(w * 0.1, h * 0.1, w * 0.8, h * 0.8);
  730. c.stroke();
  731. c.begin();
  732. c.moveTo(0, h * 0.5);
  733. c.lineTo(w, h * 0.5);
  734. c.moveTo(w * 0.5, 0);
  735. c.lineTo(w * 0.5, h);
  736. c.moveTo(w * 0.145, h * 0.145);
  737. c.lineTo(w * 0.855, h * 0.855);
  738. c.moveTo(w * 0.145, h * 0.855);
  739. c.lineTo(w * 0.855, h * 0.145);
  740. c.stroke();
  741. var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');
  742. c.setFillColor(strokeColor);
  743. c.ellipse(w * 0.35, h * 0.35, w * 0.3, h * 0.3);
  744. c.fillAndStroke();
  745. }
  746. else if (type === mxArchiMateMotivational.prototype.cst.ASSESSMENT)
  747. {
  748. c.ellipse(w * 0.2, 0, w * 0.8, h * 0.8);
  749. c.stroke();
  750. c.begin();
  751. c.moveTo(0, h);
  752. c.lineTo(w * 0.32, h * 0.68);
  753. c.stroke();
  754. }
  755. else if (type === mxArchiMateMotivational.prototype.cst.GOAL)
  756. {
  757. c.ellipse(0, 0, w, h);
  758. c.stroke();
  759. c.ellipse(w * 0.15, h * 0.15, w * 0.7, h * 0.7);
  760. c.stroke();
  761. var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');
  762. c.setFillColor(strokeColor);
  763. c.ellipse(w * 0.3, h * 0.3, w * 0.4, h * 0.4);
  764. c.fillAndStroke();
  765. }
  766. else if (type === mxArchiMateMotivational.prototype.cst.REQUIREMENT)
  767. {
  768. c.translate(0, 4);
  769. h = h - 8;
  770. c.begin();
  771. c.moveTo(w * 0.25, 0);
  772. c.lineTo(w, 0);
  773. c.lineTo(w * 0.75, h);
  774. c.lineTo(0, h);
  775. c.close();
  776. c.stroke();
  777. }
  778. else if (type === mxArchiMateMotivational.prototype.cst.CONSTRAINT)
  779. {
  780. c.translate(0, 4);
  781. h = h - 8;
  782. c.begin();
  783. c.moveTo(w * 0.25, 0);
  784. c.lineTo(w, 0);
  785. c.lineTo(w * 0.75, h);
  786. c.lineTo(0, h);
  787. c.close();
  788. c.moveTo(w * 0.45, 0);
  789. c.lineTo(w * 0.2, h);
  790. c.stroke();
  791. }
  792. else if (type === mxArchiMateMotivational.prototype.cst.PRINCIPLE)
  793. {
  794. c.begin();
  795. c.moveTo(w * 0.05, h * 0.05);
  796. c.arcTo(w * 2.3, h * 2.3, 0, 0, 1, w * 0.95, h * 0.05);
  797. c.arcTo(w * 2.3, h * 2.3, 0, 0, 1, w * 0.95, h * 0.95);
  798. c.arcTo(w * 2.3, h * 2.3, 0, 0, 1, w * 0.05, h * 0.95);
  799. c.arcTo(w * 2.3, h * 2.3, 0, 0, 1, w * 0.05, h * 0.05);
  800. c.close();
  801. c.stroke();
  802. var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');
  803. c.setFillColor(strokeColor);
  804. c.begin();
  805. c.moveTo(w * 0.45, h * 0.7);
  806. c.lineTo(w * 0.42, h * 0.15);
  807. c.lineTo(w * 0.58, h * 0.15);
  808. c.lineTo(w * 0.55, h * 0.7);
  809. c.close();
  810. c.fill();
  811. c.rect(w * 0.45, h * 0.75, w * 0.1, h * 0.1);
  812. c.fill();
  813. }
  814. };
  815. mxCellRenderer.registerShape(mxArchiMateMotivational.prototype.cst.MOTIV, mxArchiMateMotivational);
  816. //**********************************************************************************************************************************************************
  817. //Representation
  818. //**********************************************************************************************************************************************************
  819. /**
  820. * Extends mxShape.
  821. */
  822. function mxArchiMateGap(bounds, fill, stroke, strokewidth)
  823. {
  824. mxShape.call(this);
  825. this.bounds = bounds;
  826. this.fill = fill;
  827. this.stroke = stroke;
  828. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  829. };
  830. /**
  831. * Extends mxShape.
  832. */
  833. mxUtils.extend(mxArchiMateGap, mxShape);
  834. mxArchiMateGap.prototype.cst = {
  835. GAP : 'mxgraph.archimate.gap'
  836. };
  837. /**
  838. * Function: paintVertexShape
  839. *
  840. * Paints the vertex shape.
  841. */
  842. mxArchiMateGap.prototype.paintVertexShape = function(c, x, y, w, h)
  843. {
  844. c.translate(x, y);
  845. this.background(c, 0, 0, w, h);
  846. c.setShadow(false);
  847. c.translate(w - 20, 5);
  848. this.foreground(c, w - 20, 5, 15, 15);
  849. };
  850. mxArchiMateGap.prototype.background = function(c, x, y, w, h)
  851. {
  852. c.begin();
  853. c.moveTo(0, 0);
  854. c.lineTo(w, 0);
  855. c.lineTo(w, h * 0.85);
  856. c.arcTo(w * 0.35, h * 0.35, 0, 0, 0, w * 0.5, h * 0.85);
  857. c.arcTo(w * 0.35, h * 0.35, 0, 0, 1, 0, h * 0.85);
  858. c.close();
  859. c.fillAndStroke();
  860. };
  861. mxArchiMateGap.prototype.foreground = function(c, x, y, w, h)
  862. {
  863. c.setDashed(false);
  864. c.translate(0, 2);
  865. h = h - 4;
  866. c.ellipse(w * 0.15, 0, w * 0.7, h);
  867. c.stroke();
  868. c.begin();
  869. c.moveTo(0, h * 0.35);
  870. c.lineTo(w, h * 0.35);
  871. c.moveTo(0, h * 0.65);
  872. c.lineTo(w, h * 0.65);
  873. c.stroke();
  874. };
  875. mxCellRenderer.registerShape(mxArchiMateGap.prototype.cst.GAP, mxArchiMateGap);