mxER.js 51 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498
  1. /**
  2. * $Id: mxER.js,v 1.6 2013/05/17 13:46:41 mate Exp $
  3. * Copyright (c) 2006-2010, JGraph Ltd
  4. */
  5. //TODO markers.html probably isn't needed, because it was used for testing during development before the new canvas was introduced
  6. //**********************************************************************************************************************************************************
  7. //Entity
  8. //**********************************************************************************************************************************************************
  9. /**
  10. * Extends mxShape.
  11. */
  12. function mxShapeEREntity(bounds, fill, stroke, strokewidth)
  13. {
  14. mxShape.call(this);
  15. this.bounds = bounds;
  16. this.fill = fill;
  17. this.stroke = stroke;
  18. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  19. };
  20. /**
  21. * Extends mxShape.
  22. */
  23. mxUtils.extend(mxShapeEREntity, mxShape);
  24. /**
  25. * Function: paintVertexShape
  26. *
  27. * Paints the vertex shape.
  28. */
  29. mxShapeEREntity.prototype.paintVertexShape = function(c, x, y, w, h)
  30. {
  31. var mainText = mxUtils.getValue(this.style, 'buttonText', 'Entity');
  32. var fontColor = mxUtils.getValue(this.style, 'textColor', '#666666');
  33. var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17');
  34. c.translate(x, y);
  35. var rSize = 10;
  36. w = Math.max(w, 2 * rSize);
  37. h = Math.max(h, 2 * rSize);
  38. this.background(c, x, y, w, h, rSize, fontColor);
  39. c.setShadow(false);
  40. this.mainText(c, x, y, w, h, mainText, fontSize, fontColor);
  41. };
  42. mxShapeEREntity.prototype.background = function(c, x, y, w, h, rSize, fontColor)
  43. {
  44. var buttonStyle = mxUtils.getValue(this.style, 'buttonStyle', 'round').toString();
  45. if (buttonStyle === 'round')
  46. {
  47. c.begin();
  48. c.moveTo(0, rSize);
  49. c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);
  50. c.lineTo(w - rSize, 0);
  51. c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);
  52. c.lineTo(w, h - rSize);
  53. c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);
  54. c.lineTo(rSize, h);
  55. c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);
  56. c.close();
  57. c.fillAndStroke();
  58. }
  59. else if (buttonStyle === 'rect')
  60. {
  61. c.begin();
  62. c.moveTo(0, 0);
  63. c.lineTo(w, 0);
  64. c.lineTo(w, h);
  65. c.lineTo(0, h);
  66. c.close();
  67. c.fillAndStroke();
  68. }
  69. else if (buttonStyle === 'dblFrame')
  70. {
  71. var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');
  72. c.setFillColor(fillColor);
  73. c.begin();
  74. c.moveTo(0, 0);
  75. c.lineTo(w, 0);
  76. c.lineTo(w, h);
  77. c.lineTo(0, h);
  78. c.close();
  79. c.fillAndStroke();
  80. rSize = Math.min(w, h);
  81. c.begin();
  82. c.moveTo(rSize * 0.1, rSize * 0.1);
  83. c.lineTo(w - rSize * 0.1, rSize * 0.1);
  84. c.lineTo(w - rSize * 0.1, h - rSize * 0.1);
  85. c.lineTo(rSize * 0.1, h - rSize * 0.1);
  86. c.close();
  87. c.stroke();
  88. }
  89. };
  90. mxShapeEREntity.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor)
  91. {
  92. c.begin();
  93. c.setFontSize(fontSize);
  94. c.setFontColor(fontColor);
  95. c.text(w * 0.5, h * 0.5, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  96. };
  97. mxCellRenderer.registerShape('mxgraph.er.entity', mxShapeEREntity);
  98. mxShapeEREntity.prototype.constraints = [
  99. new mxConnectionConstraint(new mxPoint(0.25, 0), true),
  100. new mxConnectionConstraint(new mxPoint(0.5, 0), true),
  101. new mxConnectionConstraint(new mxPoint(0.75, 0), true),
  102. new mxConnectionConstraint(new mxPoint(0, 0.25), true),
  103. new mxConnectionConstraint(new mxPoint(0, 0.5), true),
  104. new mxConnectionConstraint(new mxPoint(0, 0.75), true),
  105. new mxConnectionConstraint(new mxPoint(1, 0.25), true),
  106. new mxConnectionConstraint(new mxPoint(1, 0.5), true),
  107. new mxConnectionConstraint(new mxPoint(1, 0.75), true),
  108. new mxConnectionConstraint(new mxPoint(0.25, 1), true),
  109. new mxConnectionConstraint(new mxPoint(0.5, 1), true),
  110. new mxConnectionConstraint(new mxPoint(0.75, 1), true)
  111. ];
  112. //**********************************************************************************************************************************************************
  113. //Entity Extended
  114. //**********************************************************************************************************************************************************
  115. /**
  116. * Extends mxShape.
  117. */
  118. function mxShapeEREntityExt(bounds, fill, stroke, strokewidth)
  119. {
  120. mxShape.call(this);
  121. this.bounds = bounds;
  122. this.fill = fill;
  123. this.stroke = stroke;
  124. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  125. };
  126. /**
  127. * Extends mxShape.
  128. */
  129. mxUtils.extend(mxShapeEREntityExt, mxShape);
  130. /**
  131. * Function: paintVertexShape
  132. *
  133. * Paints the vertex shape.
  134. */
  135. mxShapeEREntityExt.prototype.paintVertexShape = function(c, x, y, w, h)
  136. {
  137. var mainText = mxUtils.getValue(this.style, 'buttonText', 'Entity');
  138. var attributes = mxUtils.getValue(this.style, 'subText', '+ attribute 1,+ attribute 2,+ attribute 3').toString().split(',');
  139. var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');
  140. var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17');
  141. var mainColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#008cff');
  142. var attrColor = mxUtils.getValue(this.style, 'fillColor2', '#ffffff');
  143. var maxTextWidth = 0;
  144. c.translate(x, y);
  145. var rSize = 10;
  146. var barY = fontSize * 1.25;
  147. for (var i = 0; i < attributes.length; i++)
  148. {
  149. var currWidth = mxUtils.getSizeForString(attributes[i], fontSize, mxConstants.DEFAULT_FONTFAMILY).width;
  150. if (currWidth > maxTextWidth)
  151. {
  152. maxTextWidth = currWidth;
  153. }
  154. }
  155. w = Math.max(w, 2 * rSize, maxTextWidth + rSize);
  156. h = Math.max(h, 2 * rSize, (attributes.length + 1) * barY);
  157. this.background(c, x, y, w, h, rSize);
  158. c.setShadow(false);
  159. this.shapes(c, x, y, w, h, fontSize, mainColor, attrColor, rSize, barY);
  160. this.mainText(c, x, y, w, h, mainText, fontSize, attrColor);
  161. this.attrText(c, x, y, w, h, attributes, fontSize, strokeColor, barY, rSize);
  162. };
  163. mxShapeEREntityExt.prototype.background = function(c, x, y, w, h, rSize)
  164. {
  165. var buttonStyle = mxUtils.getValue(this.style, 'buttonStyle', 'round').toString();
  166. c.begin();
  167. if (buttonStyle === 'round')
  168. {
  169. c.moveTo(0, rSize);
  170. c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);
  171. c.lineTo(w - rSize, 0);
  172. c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);
  173. c.lineTo(w, h - rSize);
  174. c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);
  175. c.lineTo(rSize, h);
  176. c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);
  177. }
  178. else if (buttonStyle === 'rect')
  179. {
  180. c.moveTo(0, 0);
  181. c.lineTo(w, 0);
  182. c.lineTo(w, h);
  183. c.lineTo(0, h);
  184. }
  185. c.close();
  186. c.fillAndStroke();
  187. };
  188. mxShapeEREntityExt.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor)
  189. {
  190. c.begin();
  191. c.setFontSize(fontSize);
  192. c.setFontColor(fontColor);
  193. c.text(w * 0.5, fontSize * 0.5, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  194. };
  195. mxShapeEREntityExt.prototype.shapes = function(c, x, y, w, h, fontSize, mainColor, attrColor, rSize, barY)
  196. {
  197. var buttonStyle = mxUtils.getValue(this.style, 'buttonStyle', 'round').toString();
  198. if (buttonStyle === 'round')
  199. {
  200. c.begin();
  201. c.moveTo(0, rSize);
  202. c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);
  203. c.lineTo(w - rSize, 0);
  204. c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);
  205. c.lineTo(w, barY);
  206. c.lineTo(0, barY);
  207. c.close();
  208. c.fill();
  209. c.setFillColor(attrColor);
  210. c.begin();
  211. c.moveTo(w, barY);
  212. c.lineTo(w, h - rSize);
  213. c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);
  214. c.lineTo(rSize, h);
  215. c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);
  216. c.lineTo(0, barY);
  217. c.close();
  218. c.fill();
  219. }
  220. else if (buttonStyle === 'rect')
  221. {
  222. c.begin();
  223. c.moveTo(0, 0);
  224. c.lineTo(w, 0);
  225. c.lineTo(w, barY);
  226. c.lineTo(0, barY);
  227. c.close();
  228. c.fill();
  229. c.setFillColor(attrColor);
  230. c.begin();
  231. c.moveTo(0, barY);
  232. c.lineTo(w, barY);
  233. c.lineTo(w, h);
  234. c.lineTo(0, h);
  235. c.close();
  236. c.fill();
  237. }
  238. c.begin();
  239. if (buttonStyle === 'round')
  240. {
  241. c.moveTo(0, rSize);
  242. c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);
  243. c.lineTo(w - rSize, 0);
  244. c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);
  245. c.lineTo(w, h - rSize);
  246. c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);
  247. c.lineTo(rSize, h);
  248. c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);
  249. }
  250. else if (buttonStyle === 'rect')
  251. {
  252. c.moveTo(0, 0);
  253. c.lineTo(w, 0);
  254. c.lineTo(w, h);
  255. c.lineTo(0, h);
  256. }
  257. c.close();
  258. c.stroke();
  259. };
  260. mxShapeEREntityExt.prototype.attrText = function(c, x, y, w, h, attributes, fontSize, fontColor, barY, rSize)
  261. {
  262. for (var i = 0; i < attributes.length; i++)
  263. {
  264. c.begin();
  265. c.setFontSize(fontSize);
  266. c.setFontColor(fontColor);
  267. c.text(rSize * 0.5, (i + 1.5) * barY, 0, 0, attributes[i], mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  268. }
  269. };
  270. mxCellRenderer.registerShape('mxgraph.er.entityExt', mxShapeEREntityExt);
  271. mxShapeEREntityExt.prototype.constraints = [
  272. new mxConnectionConstraint(new mxPoint(0.25, 0), true),
  273. new mxConnectionConstraint(new mxPoint(0.5, 0), true),
  274. new mxConnectionConstraint(new mxPoint(0.75, 0), true),
  275. new mxConnectionConstraint(new mxPoint(0, 0.25), true),
  276. new mxConnectionConstraint(new mxPoint(0, 0.5), true),
  277. new mxConnectionConstraint(new mxPoint(0, 0.75), true),
  278. new mxConnectionConstraint(new mxPoint(1, 0.25), true),
  279. new mxConnectionConstraint(new mxPoint(1, 0.5), true),
  280. new mxConnectionConstraint(new mxPoint(1, 0.75), true),
  281. new mxConnectionConstraint(new mxPoint(0.25, 1), true),
  282. new mxConnectionConstraint(new mxPoint(0.5, 1), true),
  283. new mxConnectionConstraint(new mxPoint(0.75, 1), true)
  284. ];
  285. //**********************************************************************************************************************************************************
  286. //Attribute
  287. //**********************************************************************************************************************************************************
  288. /**
  289. * Extends mxShape.
  290. */
  291. function mxShapeERAttribute(bounds, fill, stroke, strokewidth)
  292. {
  293. mxShape.call(this);
  294. this.bounds = bounds;
  295. this.fill = fill;
  296. this.stroke = stroke;
  297. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  298. };
  299. /**
  300. * Extends mxShape.
  301. */
  302. mxUtils.extend(mxShapeERAttribute, mxShape);
  303. /**
  304. * Function: paintVertexShape
  305. *
  306. * Paints the vertex shape.
  307. */
  308. mxShapeERAttribute.prototype.paintVertexShape = function(c, x, y, w, h)
  309. {
  310. var mainText = mxUtils.getValue(this.style, 'buttonText', 'Entity');
  311. var fontColor = mxUtils.getValue(this.style, 'textColor', '#666666');
  312. var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17');
  313. c.translate(x, y);
  314. var rSize = 10;
  315. w = Math.max(w, 2 * rSize);
  316. h = Math.max(h, 2 * rSize);
  317. this.background(c, x, y, w, h, rSize, fontColor);
  318. c.setShadow(false);
  319. this.mainText(c, x, y, w, h, mainText, fontSize, fontColor);
  320. };
  321. mxShapeERAttribute.prototype.background = function(c, x, y, w, h, rSize, fontColor)
  322. {
  323. var buttonStyle = mxUtils.getValue(this.style, 'buttonStyle', 'simple').toString();
  324. if (buttonStyle === 'simple')
  325. {
  326. c.begin();
  327. c.ellipse(0, 0, w, h);
  328. c.fillAndStroke();
  329. }
  330. else if (buttonStyle === 'dblFrame')
  331. {
  332. var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#666666');
  333. c.setFillColor(fillColor);
  334. c.begin();
  335. c.ellipse(0, 0, w, h);
  336. c.fillAndStroke();
  337. rSize = Math.min(w, h);
  338. c.begin();
  339. c.ellipse(rSize * 0.1, rSize * 0.1, w - rSize * 0.2, h - rSize * 0.2);
  340. c.stroke();
  341. }
  342. };
  343. mxShapeERAttribute.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor)
  344. {
  345. c.begin();
  346. c.setFontSize(fontSize);
  347. c.setFontColor(fontColor);
  348. c.text(w * 0.5, h * 0.5, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  349. };
  350. mxCellRenderer.registerShape('mxgraph.er.attribute', mxShapeERAttribute);
  351. mxShapeERAttribute.prototype.constraints = [
  352. new mxConnectionConstraint(new mxPoint(0.144, 0.144), false),
  353. new mxConnectionConstraint(new mxPoint(0.856, 0.144), false),
  354. new mxConnectionConstraint(new mxPoint(0.856, 0.856), false),
  355. new mxConnectionConstraint(new mxPoint(0.144, 0.856), false),
  356. new mxConnectionConstraint(new mxPoint(0, 0.5), true),
  357. new mxConnectionConstraint(new mxPoint(1, 0.5), true),
  358. new mxConnectionConstraint(new mxPoint(0.5, 0), true),
  359. new mxConnectionConstraint(new mxPoint(0.5, 1), true)
  360. ];
  361. //**********************************************************************************************************************************************************
  362. //Has
  363. //**********************************************************************************************************************************************************
  364. /**
  365. * Extends mxShape.
  366. */
  367. function mxShapeERHas(bounds, fill, stroke, strokewidth)
  368. {
  369. mxShape.call(this);
  370. this.bounds = bounds;
  371. this.fill = fill;
  372. this.stroke = stroke;
  373. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  374. };
  375. /**
  376. * Extends mxShape.
  377. */
  378. mxUtils.extend(mxShapeERHas, mxShape);
  379. /**
  380. * Function: paintVertexShape
  381. *
  382. * Paints the vertex shape.
  383. */
  384. mxShapeERHas.prototype.paintVertexShape = function(c, x, y, w, h)
  385. {
  386. var mainText = mxUtils.getValue(this.style, 'buttonText', 'Entity');
  387. var fontColor = mxUtils.getValue(this.style, 'textColor', '#666666');
  388. var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17');
  389. c.translate(x, y);
  390. var rSize = 10;
  391. w = Math.max(w, 2 * rSize);
  392. h = Math.max(h, 2 * rSize);
  393. this.background(c, x, y, w, h, rSize, fontColor);
  394. c.setShadow(false);
  395. this.mainText(c, x, y, w, h, mainText, fontSize, fontColor);
  396. };
  397. mxShapeERHas.prototype.background = function(c, x, y, w, h, rSize, fontColor)
  398. {
  399. var buttonStyle = mxUtils.getValue(this.style, 'buttonStyle', 'rhombus').toString();
  400. if (buttonStyle === 'rhombus')
  401. {
  402. c.begin();
  403. c.moveTo(0, h * 0.5);
  404. c.lineTo(w * 0.5, 0);
  405. c.lineTo(w, h * 0.5);
  406. c.lineTo(w * 0.5, h);
  407. c.close();
  408. c.fillAndStroke();
  409. }
  410. else if (buttonStyle === 'dblFrame')
  411. {
  412. var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#666666');
  413. c.setFillColor(fillColor);
  414. c.begin();
  415. c.moveTo(0, h * 0.5);
  416. c.lineTo(w * 0.5, 0);
  417. c.lineTo(w, h * 0.5);
  418. c.lineTo(w * 0.5, h);
  419. c.close();
  420. c.fillAndStroke();
  421. c.begin();
  422. c.moveTo(w * 0.1, h * 0.5);
  423. c.lineTo(w * 0.5, h * 0.1);
  424. c.lineTo(w * 0.9, h * 0.5);
  425. c.lineTo(w * 0.5, h * 0.9);
  426. c.close();
  427. c.stroke();
  428. }
  429. };
  430. mxShapeERHas.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor)
  431. {
  432. c.begin();
  433. c.setFontSize(fontSize);
  434. c.setFontColor(fontColor);
  435. c.text(w * 0.5, h * 0.5, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  436. };
  437. mxCellRenderer.registerShape('mxgraph.er.has', mxShapeERHas);
  438. mxShapeERHas.prototype.constraints = [
  439. new mxConnectionConstraint(new mxPoint(0.5, 0), true),
  440. new mxConnectionConstraint(new mxPoint(0.5, 1), true),
  441. new mxConnectionConstraint(new mxPoint(0, 0.5), true),
  442. new mxConnectionConstraint(new mxPoint(1, 0.5), true),
  443. new mxConnectionConstraint(new mxPoint(0.25, 0.25), false),
  444. new mxConnectionConstraint(new mxPoint(0.25, 0.75), false),
  445. new mxConnectionConstraint(new mxPoint(0.75, 0.25), false),
  446. new mxConnectionConstraint(new mxPoint(0.75, 0.75), false)
  447. ];
  448. //**********************************************************************************************************************************************************
  449. //Cloud
  450. //**********************************************************************************************************************************************************
  451. /**
  452. * Extends mxShape.
  453. */
  454. function mxShapeERCloud(bounds, fill, stroke, strokewidth)
  455. {
  456. mxShape.call(this);
  457. this.bounds = bounds;
  458. this.fill = fill;
  459. this.stroke = stroke;
  460. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  461. };
  462. /**
  463. * Extends mxShape.
  464. */
  465. mxUtils.extend(mxShapeERCloud, mxShape);
  466. /**
  467. * Function: paintVertexShape
  468. *
  469. * Paints the vertex shape.
  470. */
  471. mxShapeERCloud.prototype.paintVertexShape = function(c, x, y, w, h)
  472. {
  473. var mainText = mxUtils.getValue(this.style, 'buttonText', 'Entity');
  474. var fontColor = mxUtils.getValue(this.style, 'textColor', '#666666');
  475. var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17');
  476. c.translate(x, y);
  477. var rSize = 10;
  478. w = Math.max(w, 2 * rSize);
  479. h = Math.max(h, 2 * rSize);
  480. this.background(c, x, y, w, h, rSize, fontColor);
  481. c.setShadow(false);
  482. this.mainText(c, x, y, w, h, mainText, fontSize, fontColor);
  483. };
  484. mxShapeERCloud.prototype.background = function(c, x, y, w, h, rSize, fontColor)
  485. {
  486. c.begin();
  487. c.moveTo(0.25 * w, 0.25 * h);
  488. c.curveTo(0.05 * w, 0.25 * h, 0, 0.5 * h, 0.16 * w, 0.55 * h);
  489. c.curveTo(0, 0.66 * h, 0.18 * w, 0.9 * h, 0.31 * w, 0.8 * h);
  490. c.curveTo(0.4 * w, h, 0.7 * w, h, 0.8 * w, 0.8 * h);
  491. c.curveTo(w, 0.8 * h, w, 0.6 * h, 0.875 * w, 0.5 * h);
  492. c.curveTo(w, 0.3 * h, 0.8 * w, 0.1 * h, 0.625 * w, 0.2 * h);
  493. c.curveTo(0.5 * w, 0.05 * h, 0.3 * w, 0.05 * h, 0.25 * w, 0.25 * h);
  494. c.fillAndStroke();
  495. };
  496. mxShapeERCloud.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor)
  497. {
  498. c.begin();
  499. c.setFontSize(fontSize);
  500. c.setFontColor(fontColor);
  501. c.text(w * 0.5, h * 0.5, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  502. };
  503. mxCellRenderer.registerShape('mxgraph.er.cloud', mxShapeERCloud);
  504. mxShapeERCloud.prototype.constraints = [
  505. new mxConnectionConstraint(new mxPoint(0.08, 0.5), false),
  506. new mxConnectionConstraint(new mxPoint(0.9, 0.5), false),
  507. new mxConnectionConstraint(new mxPoint(0.5, 0.1), false),
  508. new mxConnectionConstraint(new mxPoint(0.5, 0.92), false),
  509. new mxConnectionConstraint(new mxPoint(0.24, 0.24), false),
  510. new mxConnectionConstraint(new mxPoint(0.22, 0.8), false),
  511. new mxConnectionConstraint(new mxPoint(0.81, 0.2), false),
  512. new mxConnectionConstraint(new mxPoint(0.78, 0.78), false)
  513. ];
  514. //**********************************************************************************************************************************************************
  515. //Hierarchy (LEGACY)
  516. //**********************************************************************************************************************************************************
  517. /**
  518. * Extends mxShape.
  519. */
  520. function mxShapeERHierarchy(bounds, fill, stroke, strokewidth)
  521. {
  522. mxShape.call(this);
  523. this.bounds = bounds;
  524. this.fill = fill;
  525. this.stroke = stroke;
  526. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  527. };
  528. /**
  529. * Extends mxShape.
  530. */
  531. mxUtils.extend(mxShapeERHierarchy, mxShape);
  532. /**
  533. * Function: paintVertexShape
  534. *
  535. * Paints the vertex shape.
  536. */
  537. mxShapeERHierarchy.prototype.paintVertexShape = function(c, x, y, w, h)
  538. {
  539. var mainText = mxUtils.getValue(this.style, 'buttonText', 'main').toString().split(',');
  540. var subText = mxUtils.getValue(this.style, 'subText', 'sub').toString().split(',');
  541. var fontColor = mxUtils.getValue(this.style, 'textColor', '#666666');
  542. var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17');
  543. c.translate(x, y);
  544. var rSize = 10;
  545. w = Math.max(w, 2 * rSize);
  546. h = Math.max(h, 2 * rSize);
  547. this.background(c, x, y, w, h, rSize, fontColor);
  548. c.setShadow(false);
  549. this.shapeText(c, x, y, w, h, mainText, subText, fontSize, fontColor);
  550. };
  551. mxShapeERHierarchy.prototype.background = function(c, x, y, w, h, rSize, fontColor)
  552. {
  553. var buttonStyle = mxUtils.getValue(this.style, 'buttonStyle', 'round').toString();
  554. if (buttonStyle === 'round')
  555. {
  556. c.begin();
  557. c.moveTo(0, rSize);
  558. c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);
  559. c.lineTo(w - rSize, 0);
  560. c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);
  561. c.lineTo(w, h - rSize);
  562. c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);
  563. c.lineTo(rSize, h);
  564. c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);
  565. c.close();
  566. c.fillAndStroke();
  567. }
  568. else if (buttonStyle === 'rect')
  569. {
  570. c.begin();
  571. c.moveTo(0, 0);
  572. c.lineTo(w, 0);
  573. c.lineTo(w, h);
  574. c.lineTo(0, h);
  575. c.close();
  576. c.fillAndStroke();
  577. }
  578. else if (buttonStyle === 'dblFrame')
  579. {
  580. var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#666666');
  581. c.setFillColor(fillColor);
  582. c.begin();
  583. c.moveTo(0, 0);
  584. c.lineTo(w, 0);
  585. c.lineTo(w, h);
  586. c.lineTo(0, h);
  587. c.close();
  588. c.fillAndStroke();
  589. rSize = Math.min(w, h);
  590. c.begin();
  591. c.moveTo(rSize * 0.1, rSize * 0.1);
  592. c.lineTo(w - rSize * 0.1, rSize * 0.1);
  593. c.lineTo(w - rSize * 0.1, h - rSize * 0.1);
  594. c.lineTo(rSize * 0.1, h - rSize * 0.1);
  595. c.close();
  596. c.stroke();
  597. }
  598. var trX = 0;
  599. var trY = 0;
  600. if (buttonStyle === 'round')
  601. {
  602. trX = w * 0.5;
  603. trY = rSize;
  604. c.translate(trX, trY);
  605. w = w * 0.5 - rSize;
  606. h = h - 2 * rSize;
  607. c.begin();
  608. c.moveTo(0, rSize);
  609. c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);
  610. c.lineTo(w - rSize, 0);
  611. c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);
  612. c.lineTo(w, h - rSize);
  613. c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);
  614. c.lineTo(rSize, h);
  615. c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);
  616. c.close();
  617. c.fillAndStroke();
  618. }
  619. else if (buttonStyle === 'rect')
  620. {
  621. trX = w * 0.5;
  622. trY = rSize;
  623. c.translate(trX, trY);
  624. w = w * 0.5 - rSize;
  625. h = h - 2 * rSize;
  626. c.begin();
  627. c.moveTo(0, 0);
  628. c.lineTo(w, 0);
  629. c.lineTo(w, h);
  630. c.lineTo(0, h);
  631. c.close();
  632. c.fillAndStroke();
  633. }
  634. else if (buttonStyle === 'dblFrame')
  635. {
  636. trX = w * 0.5;
  637. trY = rSize * 0.15;
  638. c.translate(trX, trY);
  639. w = w * 0.5 - rSize * 0.15;
  640. h = h - rSize * 0.3;
  641. var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#666666');
  642. c.setFillColor(fillColor);
  643. c.begin();
  644. c.moveTo(0, 0);
  645. c.lineTo(w, 0);
  646. c.lineTo(w, h);
  647. c.lineTo(0, h);
  648. c.close();
  649. c.fillAndStroke();
  650. rSize = Math.min(w, h);
  651. c.begin();
  652. c.moveTo(rSize * 0.1, rSize * 0.1);
  653. c.lineTo(w - rSize * 0.1, rSize * 0.1);
  654. c.lineTo(w - rSize * 0.1, h - rSize * 0.1);
  655. c.lineTo(rSize * 0.1, h - rSize * 0.1);
  656. c.close();
  657. c.stroke();
  658. }
  659. c.translate(- trX, - trY);
  660. };
  661. mxShapeERHierarchy.prototype.shapeText = function(c, x, y, w, h, text, subText, fontSize, fontColor, rSize)
  662. {
  663. c.begin();
  664. c.setFontSize(fontSize);
  665. c.setFontColor(fontColor);
  666. c.text(w * 0.25, (h - fontSize) * 0.5, 0, 0, text[0], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  667. c.text(w * 0.25, (h + fontSize) * 0.5, 0, 0, text[1], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  668. c.text(w * 0.7, (h - fontSize) * 0.5, 0, 0, subText[0], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  669. c.text(w * 0.7, (h + fontSize) * 0.5, 0, 0, subText[1], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  670. };
  671. mxCellRenderer.registerShape('mxgraph.er.hierarchy', mxShapeERHierarchy);
  672. mxShapeERHierarchy.prototype.constraints = [
  673. new mxConnectionConstraint(new mxPoint(0.25, 0), true),
  674. new mxConnectionConstraint(new mxPoint(0.5, 0), true),
  675. new mxConnectionConstraint(new mxPoint(0.75, 0), true),
  676. new mxConnectionConstraint(new mxPoint(0, 0.25), true),
  677. new mxConnectionConstraint(new mxPoint(0, 0.5), true),
  678. new mxConnectionConstraint(new mxPoint(0, 0.75), true),
  679. new mxConnectionConstraint(new mxPoint(1, 0.25), true),
  680. new mxConnectionConstraint(new mxPoint(1, 0.5), true),
  681. new mxConnectionConstraint(new mxPoint(1, 0.75), true),
  682. new mxConnectionConstraint(new mxPoint(0.25, 1), true),
  683. new mxConnectionConstraint(new mxPoint(0.5, 1), true),
  684. new mxConnectionConstraint(new mxPoint(0.75, 1), true)
  685. ];
  686. //**********************************************************************************************************************************************************
  687. //Note
  688. //**********************************************************************************************************************************************************
  689. /**
  690. * Extends mxShape.
  691. */
  692. function mxShapeERNote(bounds, fill, stroke, strokewidth)
  693. {
  694. mxShape.call(this);
  695. this.bounds = bounds;
  696. this.fill = fill;
  697. this.stroke = stroke;
  698. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  699. };
  700. /**
  701. * Extends mxShape.
  702. */
  703. mxUtils.extend(mxShapeERNote, mxShape);
  704. /**
  705. * Function: paintVertexShape
  706. *
  707. * Paints the vertex shape.
  708. */
  709. mxShapeERNote.prototype.paintVertexShape = function(c, x, y, w, h)
  710. {
  711. var mainText = mxUtils.getValue(this.style, 'buttonText', 'Entity');
  712. var fontColor = mxUtils.getValue(this.style, 'textColor', '#666666');
  713. var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17');
  714. var backColor = mxUtils.getValue(this.style, 'fillColor2', '#ffffff');
  715. c.translate(x, y);
  716. var flipSize = 20;
  717. w = Math.max(w, flipSize * 2);
  718. h = Math.max(h, flipSize * 2);
  719. this.background(c, x, y, w, h, flipSize);
  720. c.setShadow(false);
  721. this.flipShape(c, x, y, w, h, flipSize, backColor);
  722. this.mainText(c, x, y, w, h, mainText, fontSize, fontColor);
  723. };
  724. mxShapeERNote.prototype.background = function(c, x, y, w, h, flipSize)
  725. {
  726. c.begin();
  727. c.moveTo(0, 0);
  728. c.lineTo(w - flipSize, 0);
  729. c.lineTo(w, flipSize);
  730. c.lineTo(w, h);
  731. c.lineTo(0, h);
  732. c.close();
  733. c.fillAndStroke();
  734. };
  735. mxShapeERNote.prototype.flipShape = function(c, x, y, w, h, flipSize, backColor)
  736. {
  737. c.setLineJoin('round');
  738. c.setFillColor(backColor);
  739. c.begin();
  740. c.moveTo(w - flipSize, 0);
  741. c.lineTo(w, flipSize);
  742. c.lineTo(w - flipSize, flipSize);
  743. c.close();
  744. c.fillAndStroke();
  745. };
  746. mxShapeERNote.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor)
  747. {
  748. c.begin();
  749. c.setFontSize(fontSize);
  750. c.setFontColor(fontColor);
  751. c.text(w * 0.5, h * 0.5, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  752. };
  753. mxCellRenderer.registerShape('mxgraph.er.note', mxShapeERNote);
  754. mxShapeERNote.prototype.constraints = [
  755. new mxConnectionConstraint(new mxPoint(0, 0), true),
  756. new mxConnectionConstraint(new mxPoint(0, 1), true),
  757. new mxConnectionConstraint(new mxPoint(1, 1), true),
  758. new mxConnectionConstraint(new mxPoint(0.25, 0), true),
  759. new mxConnectionConstraint(new mxPoint(0.5, 0), true),
  760. new mxConnectionConstraint(new mxPoint(0.75, 0), true),
  761. new mxConnectionConstraint(new mxPoint(0, 0.25), true),
  762. new mxConnectionConstraint(new mxPoint(0, 0.5), true),
  763. new mxConnectionConstraint(new mxPoint(0, 0.75), true),
  764. new mxConnectionConstraint(new mxPoint(1, 0.25), true),
  765. new mxConnectionConstraint(new mxPoint(1, 0.5), true),
  766. new mxConnectionConstraint(new mxPoint(1, 0.75), true),
  767. new mxConnectionConstraint(new mxPoint(0.25, 1), true),
  768. new mxConnectionConstraint(new mxPoint(0.5, 1), true),
  769. new mxConnectionConstraint(new mxPoint(0.75, 1), true)
  770. ];
  771. //**********************************************************************************************************************************************************
  772. //Chen's Notation Legend (LEGACY)
  773. //**********************************************************************************************************************************************************
  774. /**
  775. * Extends mxShape.
  776. */
  777. function mxShapeERChen(bounds, fill, stroke, strokewidth)
  778. {
  779. mxShape.call(this);
  780. this.bounds = bounds;
  781. this.fill = fill;
  782. this.stroke = stroke;
  783. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  784. };
  785. /**
  786. * Extends mxShape.
  787. */
  788. mxUtils.extend(mxShapeERChen, mxShape);
  789. /**
  790. * Function: paintVertexShape
  791. *
  792. * Paints the vertex shape.
  793. */
  794. mxShapeERChen.prototype.paintVertexShape = function(c, x, y, w, h)
  795. {
  796. var fontColor = mxUtils.getValue(this.style, 'textColor', '#666666');
  797. var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17');
  798. c.translate(x, y);
  799. var flipSize = 20;
  800. w = Math.max(w, flipSize * 2);
  801. h = Math.max(h, flipSize * 2);
  802. this.background(c, x, y, w, h);
  803. c.setShadow(false);
  804. this.foreground(c, x, y, w, h, fontSize, fontColor);
  805. };
  806. mxShapeERChen.prototype.background = function(c, x, y, w, h)
  807. {
  808. c.begin();
  809. c.moveTo(0, 0);
  810. c.lineTo(w, 0);
  811. c.lineTo(w, h);
  812. c.lineTo(0, h);
  813. c.close();
  814. c.fillAndStroke();
  815. };
  816. mxShapeERChen.prototype.foreground = function(c, x, y, w, h, fontSize, fontColor)
  817. {
  818. c.begin();
  819. c.moveTo(0, h * 0.25);
  820. c.lineTo(w, h * 0.25);
  821. c.moveTo(0, h * 0.5);
  822. c.lineTo(w, h * 0.5);
  823. c.moveTo(0, h * 0.75);
  824. c.lineTo(w, h * 0.75);
  825. c.moveTo(w * 0.25, h * 0.5);
  826. c.lineTo(w * 0.25, h);
  827. c.moveTo(w * 0.5, h * 0.25);
  828. c.lineTo(w * 0.5, h);
  829. c.moveTo(w * 0.75, h * 0.5);
  830. c.lineTo(w * 0.75, h);
  831. c.stroke();
  832. c.begin();
  833. c.setFontSize(fontSize);
  834. c.setFontColor(fontColor);
  835. c.text(w * 0.5, h * 0.125, 0, 0, 'ERD Peter Chen\'s Notation', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  836. c.setFontSize(fontSize * 0.85);
  837. c.text(w * 0.25, h * 0.375, 0, 0, 'Cardinality', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  838. c.text(w * 0.75, h * 0.375, 0, 0, 'Optionality', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  839. c.setFontSize(fontSize * 0.7);
  840. c.text(w * 0.125, h * 0.625, 0, 0, '1', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  841. c.text(w * 0.375, h * 0.625, 0, 0, 'One', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  842. c.text(w * 0.625, h * 0.625, 0, 0, '0', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  843. c.text(w * 0.875, h * 0.625, 0, 0, 'Optional', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  844. c.text(w * 0.125, h * 0.875, 0, 0, 'N', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  845. c.text(w * 0.375, h * 0.875, 0, 0, 'Many', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  846. c.text(w * 0.625, h * 0.875, 0, 0, '1', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  847. c.text(w * 0.875, h * 0.875, 0, 0, 'Mandatory', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  848. };
  849. mxCellRenderer.registerShape('mxgraph.er.chens', mxShapeERChen);
  850. mxShapeERChen.prototype.constraints = [
  851. new mxConnectionConstraint(new mxPoint(0, 0), true),
  852. new mxConnectionConstraint(new mxPoint(1, 0), true),
  853. new mxConnectionConstraint(new mxPoint(0, 1), true),
  854. new mxConnectionConstraint(new mxPoint(1, 1), true),
  855. new mxConnectionConstraint(new mxPoint(0.25, 0), true),
  856. new mxConnectionConstraint(new mxPoint(0.5, 0), true),
  857. new mxConnectionConstraint(new mxPoint(0.75, 0), true),
  858. new mxConnectionConstraint(new mxPoint(0, 0.25), true),
  859. new mxConnectionConstraint(new mxPoint(0, 0.5), true),
  860. new mxConnectionConstraint(new mxPoint(0, 0.75), true),
  861. new mxConnectionConstraint(new mxPoint(1, 0.25), true),
  862. new mxConnectionConstraint(new mxPoint(1, 0.5), true),
  863. new mxConnectionConstraint(new mxPoint(1, 0.75), true),
  864. new mxConnectionConstraint(new mxPoint(0.25, 1), true),
  865. new mxConnectionConstraint(new mxPoint(0.5, 1), true),
  866. new mxConnectionConstraint(new mxPoint(0.75, 1), true)
  867. ];
  868. //**********************************************************************************************************************************************************
  869. //Bachman's Notation Legend (LEGACY)
  870. //**********************************************************************************************************************************************************
  871. /**
  872. * Extends mxShape.
  873. */
  874. function mxShapeERBachman(bounds, fill, stroke, strokewidth)
  875. {
  876. mxShape.call(this);
  877. this.bounds = bounds;
  878. this.fill = fill;
  879. this.stroke = stroke;
  880. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  881. };
  882. /**
  883. * Extends mxShape.
  884. */
  885. mxUtils.extend(mxShapeERBachman, mxShape);
  886. /**
  887. * Function: paintVertexShape
  888. *
  889. * Paints the vertex shape.
  890. */
  891. mxShapeERBachman.prototype.paintVertexShape = function(c, x, y, w, h)
  892. {
  893. var fontColor = mxUtils.getValue(this.style, 'textColor', '#666666');
  894. var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17');
  895. c.translate(x, y);
  896. this.background(c, x, y, w, h);
  897. c.setShadow(false);
  898. this.foreground(c, x, y, w, h, fontSize, fontColor);
  899. };
  900. mxShapeERBachman.prototype.background = function(c, x, y, w, h)
  901. {
  902. c.begin();
  903. c.moveTo(0, 0);
  904. c.lineTo(w, 0);
  905. c.lineTo(w, h);
  906. c.lineTo(0, h);
  907. c.close();
  908. c.fillAndStroke();
  909. };
  910. mxShapeERBachman.prototype.foreground = function(c, x, y, w, h, fontSize, fontColor)
  911. {
  912. c.begin();
  913. c.moveTo(0, h * 0.125);
  914. c.lineTo(w, h * 0.125);
  915. c.moveTo(0, h * 0.25);
  916. c.lineTo(w, h * 0.25);
  917. c.moveTo(0, h * 0.375);
  918. c.lineTo(w, h * 0.375);
  919. c.moveTo(0, h * 0.5);
  920. c.lineTo(w, h * 0.5);
  921. c.moveTo(0, h * 0.625);
  922. c.lineTo(w, h * 0.625);
  923. c.moveTo(0, h * 0.75);
  924. c.lineTo(w, h * 0.75);
  925. c.moveTo(0, h * 0.875);
  926. c.lineTo(w, h * 0.875);
  927. c.moveTo(w * 0.5, h * 0.125);
  928. c.lineTo(w * 0.5, h);
  929. c.stroke();
  930. c.begin();
  931. c.setFontSize(fontSize);
  932. c.setFontColor(fontColor);
  933. c.text(w * 0.5, h * 0.0625, 0, 0, 'ERD Bachman\'s Notation', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  934. c.setFontSize(fontSize * 0.85);
  935. c.text(w * 0.52, h * 0.1875, 0, 0, 'Relationship', mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  936. c.text(w * 0.52, h * 0.3125, 0, 0, 'Cardinality (One)', mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  937. c.text(w * 0.52, h * 0.4375, 0, 0, 'Cardinality (Many)', mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  938. c.text(w * 0.52, h * 0.5625, 0, 0, 'Mandatory, One', mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  939. c.text(w * 0.52, h * 0.6875, 0, 0, 'Mandatory, Many', mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  940. c.text(w * 0.52, h * 0.8125, 0, 0, 'Optional, One', mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  941. c.text(w * 0.52, h * 0.9375, 0, 0, 'Optional, Many', mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  942. var textWidth = mxUtils.getSizeForString('has/forms', fontSize, mxConstants.DEFAULT_FONTFAMILY).width;
  943. c.begin();
  944. c.moveTo(w * 0.04, h * 0.1875);
  945. c.lineTo(w * 0.25 - textWidth * 0.5, h * 0.1875);
  946. c.moveTo(w * 0.25 + textWidth * 0.5, h * 0.1875);
  947. c.lineTo(w * 0.46, h * 0.1875);
  948. c.text(w * 0.25, h * 0.1875, 0, 0, 'has/forms', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, true, 0, 0);
  949. c.moveTo(w * 0.04, h * 0.3125);
  950. c.lineTo(w * 0.46, h * 0.3125);
  951. c.moveTo(w * 0.04, h * 0.4375);
  952. c.lineTo(w * 0.46, h * 0.4375);
  953. c.moveTo(w * 0.46, h * 0.4050);
  954. c.lineTo(w * 0.4, h * 0.4375);
  955. c.lineTo(w * 0.46, h * 0.47);
  956. c.moveTo(w * 0.04, h * 0.5625);
  957. c.lineTo(w * 0.46, h * 0.5625);
  958. c.moveTo(w * 0.38, h * 0.53);
  959. c.lineTo(w * 0.38, h * 0.595);
  960. c.moveTo(w * 0.04, h * 0.6875);
  961. c.lineTo(w * 0.46, h * 0.6875);
  962. c.moveTo(w * 0.46, h * 0.655);
  963. c.lineTo(w * 0.4, h * 0.6875);
  964. c.lineTo(w * 0.46, h * 0.72);
  965. c.moveTo(w * 0.38, h * 0.655);
  966. c.lineTo(w * 0.38, h * 0.72);
  967. c.moveTo(w * 0.04, h * 0.8125);
  968. c.lineTo(w * 0.46, h * 0.8125);
  969. c.moveTo(w * 0.04, h * 0.9375);
  970. c.lineTo(w * 0.46, h * 0.9375);
  971. c.moveTo(w * 0.46, h * 0.9050);
  972. c.lineTo(w * 0.4, h * 0.9375);
  973. c.lineTo(w * 0.46, h * 0.97);
  974. c.stroke();
  975. var ellSize = h / 15;
  976. c.begin();
  977. c.ellipse(w * 0.46 - ellSize, h * 0.8125 - ellSize * 0.5, ellSize, ellSize);
  978. c.fillAndStroke();
  979. c.begin();
  980. c.ellipse(w * 0.4 - ellSize, h * 0.9375 - ellSize * 0.5, ellSize, ellSize);
  981. c.fillAndStroke();
  982. };
  983. mxCellRenderer.registerShape('mxgraph.er.bachmans', mxShapeERBachman);
  984. mxShapeERBachman.prototype.constraints = [
  985. new mxConnectionConstraint(new mxPoint(0, 0), true),
  986. new mxConnectionConstraint(new mxPoint(1, 0), true),
  987. new mxConnectionConstraint(new mxPoint(0, 1), true),
  988. new mxConnectionConstraint(new mxPoint(1, 1), true),
  989. new mxConnectionConstraint(new mxPoint(0.25, 0), true),
  990. new mxConnectionConstraint(new mxPoint(0.5, 0), true),
  991. new mxConnectionConstraint(new mxPoint(0.75, 0), true),
  992. new mxConnectionConstraint(new mxPoint(0, 0.25), true),
  993. new mxConnectionConstraint(new mxPoint(0, 0.5), true),
  994. new mxConnectionConstraint(new mxPoint(0, 0.75), true),
  995. new mxConnectionConstraint(new mxPoint(1, 0.25), true),
  996. new mxConnectionConstraint(new mxPoint(1, 0.5), true),
  997. new mxConnectionConstraint(new mxPoint(1, 0.75), true),
  998. new mxConnectionConstraint(new mxPoint(0.25, 1), true),
  999. new mxConnectionConstraint(new mxPoint(0.5, 1), true),
  1000. new mxConnectionConstraint(new mxPoint(0.75, 1), true)
  1001. ];
  1002. //**********************************************************************************************************************************************************
  1003. //Information Engineering Notation Legend (LEGACY)
  1004. //**********************************************************************************************************************************************************
  1005. /**
  1006. * Extends mxShape.
  1007. */
  1008. function mxShapeERInfEng(bounds, fill, stroke, strokewidth)
  1009. {
  1010. mxShape.call(this);
  1011. this.bounds = bounds;
  1012. this.fill = fill;
  1013. this.stroke = stroke;
  1014. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  1015. };
  1016. /**
  1017. * Extends mxShape.
  1018. */
  1019. mxUtils.extend(mxShapeERInfEng, mxShape);
  1020. /**
  1021. * Function: paintVertexShape
  1022. *
  1023. * Paints the vertex shape.
  1024. */
  1025. mxShapeERInfEng.prototype.paintVertexShape = function(c, x, y, w, h)
  1026. {
  1027. var fontColor = mxUtils.getValue(this.style, 'textColor', '#666666');
  1028. var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17');
  1029. c.translate(x, y);
  1030. w = Math.max(w, h / 1.5);
  1031. h = Math.max(h, fontSize * 5);
  1032. this.background(c, x, y, w, h);
  1033. c.setShadow(false);
  1034. this.foreground(c, x, y, w, h, fontSize, fontColor);
  1035. };
  1036. mxShapeERInfEng.prototype.background = function(c, x, y, w, h)
  1037. {
  1038. c.begin();
  1039. c.moveTo(0, 0);
  1040. c.lineTo(w, 0);
  1041. c.lineTo(w, h);
  1042. c.lineTo(0, h);
  1043. c.close();
  1044. c.fillAndStroke();
  1045. };
  1046. mxShapeERInfEng.prototype.foreground = function(c, x, y, w, h, fontSize, fontColor)
  1047. {
  1048. c.begin();
  1049. c.moveTo(0, h * 0.2);
  1050. c.lineTo(w, h * 0.2);
  1051. c.moveTo(0, h * 0.4);
  1052. c.lineTo(w, h * 0.4);
  1053. c.moveTo(0, h * 0.6);
  1054. c.lineTo(w, h * 0.6);
  1055. c.moveTo(0, h * 0.8);
  1056. c.lineTo(w, h * 0.8);
  1057. c.moveTo(w * 0.5, h * 0.2);
  1058. c.lineTo(w * 0.5, h);
  1059. c.stroke();
  1060. c.begin();
  1061. c.setFontSize(fontSize);
  1062. c.setFontColor(fontColor);
  1063. c.text(w * 0.5, h * 0.1, 0, 0, 'ERD Information Engineering Notation', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  1064. c.setFontSize(fontSize * 0.85);
  1065. c.text(w * 0.52, h * 0.3, 0, 0, 'Zero or one', mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  1066. c.text(w * 0.52, h * 0.5, 0, 0, 'One only', mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  1067. c.text(w * 0.52, h * 0.7, 0, 0, 'Zero or more', mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  1068. c.text(w * 0.52, h * 0.9, 0, 0, 'One or more', mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  1069. var ellSize = h / 12;
  1070. c.begin();
  1071. c.moveTo(w * 0.04, h * 0.3);
  1072. c.lineTo(w * 0.46, h * 0.3);
  1073. c.moveTo(w * 0.46 - ellSize, h * 0.25);
  1074. c.lineTo(w * 0.46 - ellSize, h * 0.35);
  1075. c.moveTo(w * 0.04, h * 0.5);
  1076. c.lineTo(w * 0.46, h * 0.5);
  1077. c.moveTo(w * 0.46 - ellSize * 2, h * 0.45);
  1078. c.lineTo(w * 0.46 - ellSize * 2, h * 0.55);
  1079. c.moveTo(w * 0.46 - ellSize * 2.5, h * 0.45);
  1080. c.lineTo(w * 0.46 - ellSize * 2.5, h * 0.55);
  1081. c.moveTo(w * 0.04, h * 0.7);
  1082. c.lineTo(w * 0.46, h * 0.7);
  1083. c.moveTo(w * 0.46, h * 0.65);
  1084. c.lineTo(w * 0.46 - ellSize * 2, h * 0.7);
  1085. c.lineTo(w * 0.46, h * 0.75);
  1086. c.stroke();
  1087. c.moveTo(w * 0.04, h * 0.9);
  1088. c.lineTo(w * 0.46, h * 0.9);
  1089. c.moveTo(w * 0.46, h * 0.85);
  1090. c.lineTo(w * 0.46 - ellSize * 2, h * 0.9);
  1091. c.lineTo(w * 0.46, h * 0.95);
  1092. c.moveTo(w * 0.46 - ellSize * 2.5, h * 0.85);
  1093. c.lineTo(w * 0.46 - ellSize * 2.5, h * 0.95);
  1094. c.stroke();
  1095. c.begin();
  1096. c.ellipse(w * 0.46 - ellSize * 3, h * 0.3 - ellSize * 0.5, ellSize, ellSize);
  1097. c.fillAndStroke();
  1098. c.begin();
  1099. c.ellipse(w * 0.46 - ellSize * 3, h * 0.7 - ellSize * 0.5, ellSize, ellSize);
  1100. c.fillAndStroke();
  1101. };
  1102. mxCellRenderer.registerShape('mxgraph.er.ie', mxShapeERInfEng);
  1103. mxShapeERInfEng.prototype.constraints = [
  1104. new mxConnectionConstraint(new mxPoint(0, 0), true),
  1105. new mxConnectionConstraint(new mxPoint(1, 0), true),
  1106. new mxConnectionConstraint(new mxPoint(0, 1), true),
  1107. new mxConnectionConstraint(new mxPoint(1, 1), true),
  1108. new mxConnectionConstraint(new mxPoint(0.25, 0), true),
  1109. new mxConnectionConstraint(new mxPoint(0.5, 0), true),
  1110. new mxConnectionConstraint(new mxPoint(0.75, 0), true),
  1111. new mxConnectionConstraint(new mxPoint(0, 0.25), true),
  1112. new mxConnectionConstraint(new mxPoint(0, 0.5), true),
  1113. new mxConnectionConstraint(new mxPoint(0, 0.75), true),
  1114. new mxConnectionConstraint(new mxPoint(1, 0.25), true),
  1115. new mxConnectionConstraint(new mxPoint(1, 0.5), true),
  1116. new mxConnectionConstraint(new mxPoint(1, 0.75), true),
  1117. new mxConnectionConstraint(new mxPoint(0.25, 1), true),
  1118. new mxConnectionConstraint(new mxPoint(0.5, 1), true),
  1119. new mxConnectionConstraint(new mxPoint(0.75, 1), true)
  1120. ];
  1121. // ER markers
  1122. mxMarker.addMarker('ERone', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled)
  1123. {
  1124. var nx = unitX * (size + sw + 1);
  1125. var ny = unitY * (size + sw + 1);
  1126. return function()
  1127. {
  1128. c.begin();
  1129. c.moveTo(pe.x - nx / 2 - ny / 2, pe.y - ny / 2 + nx / 2);
  1130. c.lineTo(pe.x - nx / 2 + ny / 2, pe.y - ny / 2 - nx / 2);
  1131. c.stroke();
  1132. };
  1133. });
  1134. mxMarker.addMarker('ERmandOne', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled)
  1135. {
  1136. var nx = unitX * (size + sw + 1);
  1137. var ny = unitY * (size + sw + 1);
  1138. return function()
  1139. {
  1140. c.begin();
  1141. c.moveTo(pe.x - nx / 2 - ny / 2, pe.y - ny / 2 + nx / 2);
  1142. c.lineTo(pe.x - nx / 2 + ny / 2, pe.y - ny / 2 - nx / 2);
  1143. c.moveTo(pe.x - nx - ny / 2, pe.y - ny + nx / 2);
  1144. c.lineTo(pe.x - nx + ny / 2, pe.y - ny - nx / 2);
  1145. c.stroke();
  1146. };
  1147. });
  1148. mxMarker.addMarker('ERmany', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled)
  1149. {
  1150. var nx = unitX * (size + sw + 1);
  1151. var ny = unitY * (size + sw + 1);
  1152. return function()
  1153. {
  1154. c.begin();
  1155. c.moveTo(pe.x + ny / 2, pe.y - nx / 2);
  1156. c.lineTo(pe.x - nx, pe.y - ny);
  1157. c.lineTo(pe.x - ny / 2, pe.y + nx / 2);
  1158. c.stroke();
  1159. };
  1160. });
  1161. mxMarker.addMarker('ERoneToMany', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled)
  1162. {
  1163. var nx = unitX * (size + sw + 1);
  1164. var ny = unitY * (size + sw + 1);
  1165. return function()
  1166. {
  1167. c.begin();
  1168. c.moveTo(pe.x - nx - ny / 2, pe.y - ny + nx / 2);
  1169. c.lineTo(pe.x - nx + ny / 2, pe.y - ny - nx / 2);
  1170. c.moveTo(pe.x + ny / 2, pe.y - nx / 2);
  1171. c.lineTo(pe.x - nx, pe.y - ny);
  1172. c.lineTo(pe.x - ny / 2, pe.y + nx / 2);
  1173. c.stroke();
  1174. };
  1175. });
  1176. mxMarker.addMarker('ERzeroToMany', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled)
  1177. {
  1178. var nx = unitX * (size + sw + 1);
  1179. var ny = unitY * (size + sw + 1);
  1180. var a = size / 2;
  1181. var px = pe.x;
  1182. var py = pe.y;
  1183. if (!filled)
  1184. {
  1185. pe.x -= 2 * nx - unitX * sw / 2;
  1186. pe.y -= 2 * ny - unitY * sw / 2;
  1187. }
  1188. return function()
  1189. {
  1190. c.begin();
  1191. c.ellipse(px - 1.5 * nx - a, py - 1.5 * ny - a, 2 * a, 2 * a);
  1192. if (filled)
  1193. {
  1194. // TODO not sure if this is ok, because by default, markers use strokeColor for filling
  1195. var oldColor = mxUtils.getValue(shape.style, mxConstants.STYLE_STROKECOLOR, '#666666');
  1196. c.setFillColor('#ffffff');
  1197. c.fillAndStroke();
  1198. c.setFillColor(oldColor);
  1199. }
  1200. else
  1201. {
  1202. c.stroke();
  1203. }
  1204. c.begin();
  1205. c.moveTo(px + ny / 2, py - nx / 2);
  1206. c.lineTo(px - nx, py - ny);
  1207. c.lineTo(px - ny / 2, py + nx / 2);
  1208. if (!filled)
  1209. {
  1210. c.moveTo(px - nx, py - ny);
  1211. c.lineTo(px, py);
  1212. }
  1213. c.stroke();
  1214. };
  1215. });
  1216. mxMarker.addMarker('ERzeroToOne', function(c, shape, type, pe, unitX, unitY, size, source, sw, filled)
  1217. {
  1218. var nx = unitX * (size + sw + 1);
  1219. var ny = unitY * (size + sw + 1);
  1220. var a = size / 2;
  1221. var px = pe.x;
  1222. var py = pe.y;
  1223. if (!filled)
  1224. {
  1225. pe.x -= 2 * nx - unitX * sw / 2;
  1226. pe.y -= 2 * ny - unitY * sw / 2;
  1227. }
  1228. return function()
  1229. {
  1230. c.begin();
  1231. c.ellipse(px - 1.5 * nx - a, py - 1.5 * ny - a, 2 * a, 2 * a);
  1232. if (filled)
  1233. {
  1234. // TODO not sure if this is ok, because by default, markers use strokeColor for filling
  1235. var oldColor = mxUtils.getValue(shape.style, mxConstants.STYLE_STROKECOLOR, '#666666');
  1236. c.setFillColor('#ffffff');
  1237. c.fillAndStroke();
  1238. c.setFillColor(oldColor);
  1239. }
  1240. else
  1241. {
  1242. c.stroke();
  1243. }
  1244. c.begin();
  1245. c.moveTo(px - nx / 2 - ny / 2, py - ny / 2 + nx / 2);
  1246. c.lineTo(px - nx / 2 + ny / 2, py - ny / 2 - nx / 2);
  1247. if (!filled)
  1248. {
  1249. c.moveTo(px - nx - unitX * sw / 2, py - ny - unitY * sw / 2);
  1250. c.lineTo(px, py);
  1251. }
  1252. c.stroke();
  1253. };
  1254. });
  1255. //**********************************************************************************************************************************************************
  1256. //Rounded rectangle (adjustable rounding)
  1257. //**********************************************************************************************************************************************************
  1258. /**
  1259. * Extends mxShape.
  1260. */
  1261. function mxShapeERRRect(bounds, fill, stroke, strokewidth)
  1262. {
  1263. mxShape.call(this);
  1264. this.bounds = bounds;
  1265. this.fill = fill;
  1266. this.stroke = stroke;
  1267. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  1268. };
  1269. /**
  1270. * Extends mxShape.
  1271. */
  1272. mxUtils.extend(mxShapeERRRect, mxShape);
  1273. mxShapeERRRect.prototype.cst = {
  1274. RRECT : 'mxgraph.er.rrect',
  1275. R_SIZE : 'rSize'
  1276. };
  1277. mxShapeERRRect.prototype.customProperties = [
  1278. {name: 'rSize', dispName: 'Rounding Size', type: 'float'},
  1279. ];
  1280. /**
  1281. * Function: paintVertexShape
  1282. *
  1283. * Paints the vertex shape.
  1284. */
  1285. mxShapeERRRect.prototype.paintVertexShape = function(c, x, y, w, h)
  1286. {
  1287. c.translate(x, y);
  1288. var rSize = parseInt(mxUtils.getValue(this.style, mxShapeERRRect.prototype.cst.R_SIZE, '10'));
  1289. c.roundrect(0, 0, w, h, rSize);
  1290. c.fillAndStroke();
  1291. };
  1292. mxCellRenderer.registerShape(mxShapeERRRect.prototype.cst.RRECT, mxShapeERRRect);
  1293. mxShapeERRRect.prototype.constraints = [
  1294. new mxConnectionConstraint(new mxPoint(0.25, 0), true),
  1295. new mxConnectionConstraint(new mxPoint(0.5, 0), true),
  1296. new mxConnectionConstraint(new mxPoint(0.75, 0), true),
  1297. new mxConnectionConstraint(new mxPoint(0, 0.25), true),
  1298. new mxConnectionConstraint(new mxPoint(0, 0.5), true),
  1299. new mxConnectionConstraint(new mxPoint(0, 0.75), true),
  1300. new mxConnectionConstraint(new mxPoint(1, 0.25), true),
  1301. new mxConnectionConstraint(new mxPoint(1, 0.5), true),
  1302. new mxConnectionConstraint(new mxPoint(1, 0.75), true),
  1303. new mxConnectionConstraint(new mxPoint(0.25, 1), true),
  1304. new mxConnectionConstraint(new mxPoint(0.5, 1), true),
  1305. new mxConnectionConstraint(new mxPoint(0.75, 1), true)
  1306. ];
  1307. //**********************************************************************************************************************************************************
  1308. //Anchor (a dummy shape without visuals used for anchoring)
  1309. //**********************************************************************************************************************************************************
  1310. /**
  1311. * Extends mxShape.
  1312. */
  1313. function mxShapeERAnchor(bounds, fill, stroke, strokewidth)
  1314. {
  1315. mxShape.call(this);
  1316. this.bounds = bounds;
  1317. };
  1318. /**
  1319. * Extends mxShape.
  1320. */
  1321. mxUtils.extend(mxShapeERAnchor, mxShape);
  1322. mxShapeERAnchor.prototype.cst = {
  1323. ANCHOR : 'mxgraph.er.anchor'
  1324. };
  1325. /**
  1326. * Function: paintVertexShape
  1327. *
  1328. * Paints the vertex shape.
  1329. */
  1330. mxShapeERAnchor.prototype.paintVertexShape = function(c, x, y, w, h)
  1331. {
  1332. };
  1333. mxCellRenderer.registerShape(mxShapeERAnchor.prototype.cst.ANCHOR, mxShapeERAnchor);