mxMockupText.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857
  1. /**
  2. * $Id: mxMockupText.js,v 1.4 2013/05/24 07:12:36 mate Exp $
  3. * Copyright (c) 2006-2010, JGraph Ltd
  4. */
  5. //**********************************************************************************************************************************************************
  6. //Link
  7. //**********************************************************************************************************************************************************
  8. /**
  9. * Extends mxShape.
  10. */
  11. function mxShapeMockupLink(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(mxShapeMockupLink, mxShape);
  23. mxShapeMockupLink.prototype.cst = {
  24. LINK_TEXT : 'linkText',
  25. TEXT_SIZE : 'textSize',
  26. TEXT_COLOR : 'textColor',
  27. SHAPE_LINK : 'mxgraph.mockup.text.link'
  28. };
  29. /**
  30. * Function: paintVertexShape
  31. *
  32. * Paints the vertex shape.
  33. */
  34. mxShapeMockupLink.prototype.paintVertexShape = function(c, x, y, w, h)
  35. {
  36. var linkText = mxUtils.getValue(this.style, mxShapeMockupLink.prototype.cst.LINK_TEXT, 'Link');
  37. var textSize = mxUtils.getValue(this.style, mxShapeMockupLink.prototype.cst.TEXT_SIZE, '17');
  38. var textColor = mxUtils.getValue(this.style, mxShapeMockupLink.prototype.cst.TEXT_COLOR, '#0000ff');
  39. c.translate(x, y);
  40. var width = mxUtils.getSizeForString(linkText, textSize, mxConstants.DEFAULT_FONTFAMILY).width;
  41. c.setStrokeColor(textColor);
  42. c.setFontSize(textSize);
  43. c.setFontColor(textColor);
  44. c.text(w * 0.5, h * 0.5, 0, 0, linkText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  45. c.begin();
  46. c.moveTo(w * 0.5 - width * 0.5, (h + parseInt(textSize, 10)) * 0.5);
  47. c.lineTo(w * 0.5 + width * 0.5, (h + parseInt(textSize, 10)) * 0.5);
  48. c.stroke();
  49. };
  50. mxCellRenderer.prototype.defaultShapes[mxShapeMockupLink.prototype.cst.SHAPE_LINK] = mxShapeMockupLink;
  51. //**********************************************************************************************************************************************************
  52. //Link Bar
  53. //**********************************************************************************************************************************************************
  54. /**
  55. * Extends mxShape.
  56. */
  57. function mxShapeMockupLinkBar(bounds, fill, stroke, strokewidth)
  58. {
  59. mxShape.call(this);
  60. this.bounds = bounds;
  61. this.fill = fill;
  62. this.stroke = stroke;
  63. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  64. };
  65. /**
  66. * Extends mxShape.
  67. */
  68. mxUtils.extend(mxShapeMockupLinkBar, mxShape);
  69. mxShapeMockupLinkBar.prototype.cst = {
  70. MAIN_TEXT : 'mainText',
  71. SHAPE_LINK_BAR : 'mxgraph.mockup.text.linkBar',
  72. TEXT_COLOR : 'textColor',
  73. TEXT_COLOR2 : 'textColor2',
  74. STROKE_COLOR2 : 'strokeColor2',
  75. FILL_COLOR2 : 'fillColor2',
  76. SELECTED : '+', //must be 1 char
  77. TEXT_SIZE : 'textSize'
  78. };
  79. /**
  80. * Function: paintVertexShape
  81. *
  82. * Paints the vertex shape.
  83. */
  84. mxShapeMockupLinkBar.prototype.paintVertexShape = function(c, x, y, w, h)
  85. {
  86. var textStrings = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.MAIN_TEXT, '+Button 1, Button 2, Button 3').toString().split(',');
  87. var fontColor = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.TEXT_COLOR, '#666666');
  88. var selectedFontColor = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.TEXT_COLOR2, '#ffffff');
  89. var fontSize = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.TEXT_SIZE, '17').toString();
  90. var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');
  91. var separatorColor = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.STROKE_COLOR2, '#c4c4c4');
  92. var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');
  93. var selectedFillColor = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.FILL_COLOR2, '#008cff');
  94. var buttonNum = textStrings.length;
  95. var buttonWidths = new Array(buttonNum);
  96. var buttonTotalWidth = 0;
  97. var selectedButton = -1;
  98. var rSize = 10; //rounding size
  99. var labelOffset = 5;
  100. for (var i = 0; i < buttonNum; i++)
  101. {
  102. var buttonText = textStrings[i];
  103. if(buttonText.charAt(0) === mxShapeMockupLinkBar.prototype.cst.SELECTED)
  104. {
  105. buttonText = textStrings[i].substring(1);
  106. selectedButton = i;
  107. }
  108. var currW = mxUtils.getSizeForString(buttonText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;
  109. if (currW === 0)
  110. {
  111. buttonWidths[i] = 42;
  112. }
  113. else
  114. {
  115. buttonWidths[i] = currW;
  116. }
  117. buttonTotalWidth += buttonWidths[i];
  118. }
  119. var trueH = Math.max(h, fontSize * 1.5, 20);
  120. var minW = 2 * labelOffset * buttonNum + buttonTotalWidth;
  121. var trueW = Math.max(w, minW);
  122. c.translate(x, y);
  123. this.background(c, trueW, trueH, rSize, buttonNum, buttonWidths, labelOffset, minW, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton);
  124. c.setShadow(false);
  125. var currWidth = 0;
  126. for (var i = 0; i < buttonNum; i++)
  127. {
  128. if (i === selectedButton)
  129. {
  130. c.setFontColor(selectedFontColor);
  131. c.setStrokeColor(selectedFontColor);
  132. }
  133. else
  134. {
  135. c.setFontColor(fontColor);
  136. c.setStrokeColor(fontColor);
  137. }
  138. currWidth = currWidth + labelOffset;
  139. this.buttonText(c, currWidth, trueH, textStrings[i], buttonWidths[i], fontSize, minW, trueW);
  140. currWidth = currWidth + buttonWidths[i] + labelOffset;
  141. }
  142. };
  143. mxShapeMockupLinkBar.prototype.background = function(c, w, h, rSize, buttonNum, buttonWidths, labelOffset, minW, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton)
  144. {
  145. c.begin();
  146. //draw the frame
  147. c.setStrokeColor(frameColor);
  148. c.setFillColor(bgColor);
  149. c.rect(0, 0, w, h);
  150. c.fillAndStroke();
  151. //draw the button separators
  152. c.setStrokeColor(separatorColor);
  153. c.begin();
  154. for (var i = 1; i < buttonNum; i++)
  155. {
  156. if (i !== selectedButton && i !== (selectedButton + 1))
  157. {
  158. var currWidth = 0;
  159. for (var j = 0; j < i; j++)
  160. {
  161. currWidth += buttonWidths[j] + 2 * labelOffset;
  162. }
  163. currWidth = currWidth * w / minW;
  164. c.moveTo(currWidth, 0);
  165. c.lineTo(currWidth, h);
  166. }
  167. }
  168. c.stroke();
  169. //draw the selected button
  170. var buttonLeft = 0;
  171. c.setFillColor(selectedFillColor);
  172. for (var i = 0; i < selectedButton; i++)
  173. {
  174. buttonLeft += buttonWidths[i] + 2 * labelOffset;
  175. }
  176. buttonLeft = buttonLeft * w / minW;
  177. var buttonRight = (buttonWidths[selectedButton] + 2 * labelOffset) * w / minW;
  178. buttonRight += buttonLeft;
  179. if (selectedButton === 0)
  180. {
  181. c.rect(0, 0, buttonRight, h);
  182. c.fill();
  183. }
  184. else if (selectedButton === buttonNum - 1)
  185. {
  186. c.rect(buttonLeft, 0, buttonRight - buttonLeft, h);
  187. c.fill();
  188. }
  189. else if (selectedButton !== -1)
  190. {
  191. c.rect(buttonLeft, 0, buttonRight - buttonLeft, h);
  192. c.fill();
  193. }
  194. //draw the frame again, to achieve a nicer effect
  195. c.setStrokeColor(frameColor);
  196. c.setFillColor(bgColor);
  197. c.rect(0, 0, w, h);
  198. c.stroke();
  199. };
  200. mxShapeMockupLinkBar.prototype.buttonText = function(c, w, h, textString, buttonWidth, fontSize, minW, trueW)
  201. {
  202. if(textString.charAt(0) === mxShapeMockupLinkBar.prototype.cst.SELECTED)
  203. {
  204. textString = textString.substring(1);
  205. }
  206. c.begin();
  207. c.setFontSize(fontSize);
  208. c.text((w + buttonWidth * 0.5) * trueW / minW, h * 0.5, 0, 0, textString, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  209. var textW = mxUtils.getSizeForString(textString, fontSize, mxConstants.DEFAULT_FONTFAMILY).width * 0.5;
  210. if (textString !== null && textString !== '')
  211. {
  212. c.begin();
  213. c.moveTo((w + buttonWidth * 0.5) * trueW / minW - textW, h * 0.5 + fontSize * 0.5);
  214. c.lineTo((w + buttonWidth * 0.5) * trueW / minW + textW, h * 0.5 + fontSize * 0.5);
  215. c.stroke();
  216. }
  217. };
  218. mxCellRenderer.prototype.defaultShapes[mxShapeMockupLinkBar.prototype.cst.SHAPE_LINK_BAR] = mxShapeMockupLinkBar;
  219. //**********************************************************************************************************************************************************
  220. //Callout
  221. //**********************************************************************************************************************************************************
  222. /**
  223. * Extends mxShape.
  224. */
  225. function mxShapeMockupCallout(bounds, fill, stroke, strokewidth)
  226. {
  227. mxShape.call(this);
  228. this.bounds = bounds;
  229. this.fill = fill;
  230. this.stroke = stroke;
  231. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  232. };
  233. /**
  234. * Extends mxShape.
  235. */
  236. mxUtils.extend(mxShapeMockupCallout, mxShape);
  237. mxShapeMockupCallout.prototype.cst = {
  238. CALLOUT_TEXT : 'linkText',
  239. CALLOUT_DIR : 'callDir',
  240. CALLOUT_STYLE : 'callStyle',
  241. STYLE_LINE : 'line',
  242. STYLE_RECT : 'rect',
  243. STYLE_ROUNDRECT : 'roundRect',
  244. DIR_NW : 'NW',
  245. DIR_NE : 'NE',
  246. DIR_SE : 'SE',
  247. DIR_SW : 'SW',
  248. TEXT_SIZE : 'textSize',
  249. TEXT_COLOR : 'textColor',
  250. SHAPE_CALLOUT : 'mxgraph.mockup.text.callout'
  251. };
  252. /**
  253. * Function: paintVertexShape
  254. *
  255. * Paints the vertex shape.
  256. */
  257. mxShapeMockupCallout.prototype.paintVertexShape = function(c, x, y, w, h)
  258. {
  259. var calloutText = mxUtils.getValue(this.style, mxShapeMockupCallout.prototype.cst.CALLOUT_TEXT, 'Callout');
  260. var textSize = mxUtils.getValue(this.style, mxShapeMockupCallout.prototype.cst.TEXT_SIZE, '17');
  261. var textColor = mxUtils.getValue(this.style, mxShapeMockupCallout.prototype.cst.TEXT_COLOR, '#666666');
  262. var callStyle = mxUtils.getValue(this.style, mxShapeMockupCallout.prototype.cst.CALLOUT_STYLE, mxShapeMockupCallout.prototype.cst.STYLE_LINE);
  263. var callDir = mxUtils.getValue(this.style, mxShapeMockupCallout.prototype.cst.CALLOUT_DIR, mxShapeMockupCallout.prototype.cst.DIR_NW);
  264. var textWidth = mxUtils.getSizeForString(calloutText, textSize, mxConstants.DEFAULT_FONTFAMILY).width;
  265. textWidth = textWidth * 1.2;
  266. if (textWidth == 0)
  267. {
  268. textWidth = 70;
  269. }
  270. c.translate(x, y);
  271. c.setFontSize(textSize);
  272. c.setFontColor(textColor);
  273. var callH = textSize * 1.5;
  274. if (callDir === mxShapeMockupCallout.prototype.cst.DIR_NW)
  275. {
  276. if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_LINE)
  277. {
  278. c.begin();
  279. c.moveTo(0, callH);
  280. c.lineTo(textWidth, callH);
  281. c.lineTo(w, h);
  282. c.stroke();
  283. }
  284. else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_RECT)
  285. {
  286. c.rect(0,0, textWidth, callH);
  287. c.fillAndStroke();
  288. c.begin();
  289. c.moveTo(textWidth * 0.5, callH);
  290. c.lineTo(w, h);
  291. c.stroke();
  292. }
  293. else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_ROUNDRECT)
  294. {
  295. c.roundrect(0, 0, textWidth, callH, callH * 0.25, callH * 0.25);
  296. c.fillAndStroke();
  297. c.begin();
  298. c.moveTo(textWidth * 0.5, callH);
  299. c.lineTo(w, h);
  300. c.stroke();
  301. }
  302. c.text(textWidth * 0.5, callH * 0.5, 0, 0, calloutText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  303. }
  304. else if (callDir === mxShapeMockupCallout.prototype.cst.DIR_NE)
  305. {
  306. if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_LINE)
  307. {
  308. c.begin();
  309. c.moveTo(w, callH);
  310. c.lineTo(w - textWidth, callH);
  311. c.lineTo(0, h);
  312. c.stroke();
  313. }
  314. else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_RECT)
  315. {
  316. c.rect(w - textWidth,0, textWidth, callH);
  317. c.fillAndStroke();
  318. c.begin();
  319. c.moveTo(w - textWidth * 0.5, callH);
  320. c.lineTo(0, h);
  321. c.stroke();
  322. }
  323. else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_ROUNDRECT)
  324. {
  325. c.roundrect(w - textWidth,0, textWidth, callH, callH * 0.25, callH * 0.25);
  326. c.fillAndStroke();
  327. c.begin();
  328. c.moveTo(w - textWidth * 0.5, callH);
  329. c.lineTo(0, h);
  330. c.stroke();
  331. }
  332. c.text(w - textWidth * 0.5, callH * 0.5, 0, 0, calloutText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  333. }
  334. else if (callDir === mxShapeMockupCallout.prototype.cst.DIR_SE)
  335. {
  336. if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_LINE)
  337. {
  338. c.begin();
  339. c.moveTo(w, h);
  340. c.lineTo(w - textWidth, h);
  341. c.lineTo(0, 0);
  342. c.stroke();
  343. }
  344. else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_RECT)
  345. {
  346. c.rect(w - textWidth, h - callH, textWidth, callH);
  347. c.fillAndStroke();
  348. c.begin();
  349. c.moveTo(w - textWidth * 0.5, h - callH);
  350. c.lineTo(0, 0);
  351. c.stroke();
  352. }
  353. else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_ROUNDRECT)
  354. {
  355. c.roundrect(w - textWidth,h - callH, textWidth, callH, callH * 0.25, callH * 0.25);
  356. c.fillAndStroke();
  357. c.begin();
  358. c.moveTo(w - textWidth * 0.5, h - callH);
  359. c.lineTo(0, 0);
  360. c.stroke();
  361. }
  362. c.text(w - textWidth * 0.5, h - callH * 0.5, 0, 0, calloutText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  363. }
  364. else if (callDir === mxShapeMockupCallout.prototype.cst.DIR_SW)
  365. {
  366. if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_LINE)
  367. {
  368. c.begin();
  369. c.moveTo(0, h);
  370. c.lineTo(textWidth, h);
  371. c.lineTo(w, 0);
  372. c.stroke();
  373. }
  374. else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_RECT)
  375. {
  376. c.rect(0, h - callH, textWidth, callH);
  377. c.fillAndStroke();
  378. c.begin();
  379. c.moveTo(textWidth * 0.5, h - callH);
  380. c.lineTo(w, 0);
  381. c.stroke();
  382. }
  383. else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_ROUNDRECT)
  384. {
  385. c.roundrect(0, h - callH, textWidth, callH, callH * 0.25, callH * 0.25);
  386. c.fillAndStroke();
  387. c.begin();
  388. c.moveTo(textWidth * 0.5, h - callH);
  389. c.lineTo(w, 0);
  390. c.stroke();
  391. }
  392. c.text(textWidth * 0.5, h - callH * 0.5, 0, 0, calloutText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  393. }
  394. };
  395. mxCellRenderer.prototype.defaultShapes[mxShapeMockupCallout.prototype.cst.SHAPE_CALLOUT] = mxShapeMockupCallout;
  396. //**********************************************************************************************************************************************************
  397. //Sticky Note
  398. //**********************************************************************************************************************************************************
  399. /**
  400. * Extends mxShape.
  401. */
  402. function mxShapeMockupStickyNote(bounds, fill, stroke, strokewidth)
  403. {
  404. mxShape.call(this);
  405. this.bounds = bounds;
  406. this.fill = fill;
  407. this.stroke = stroke;
  408. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  409. };
  410. /**
  411. * Extends mxShape.
  412. */
  413. mxUtils.extend(mxShapeMockupStickyNote, mxShape);
  414. mxShapeMockupStickyNote.prototype.cst = {
  415. MAIN_TEXT : 'mainText',
  416. TEXT_COLOR : 'textColor',
  417. TEXT_SIZE : 'textSize',
  418. SHAPE_STICKY_NOTE : 'mxgraph.mockup.text.stickyNote'
  419. };
  420. /**
  421. * Function: paintVertexShape
  422. *
  423. * Paints the vertex shape.
  424. */
  425. mxShapeMockupStickyNote.prototype.paintVertexShape = function(c, x, y, w, h)
  426. {
  427. c.translate(x, y);
  428. this.background(c, w, h);
  429. c.setShadow(false);
  430. this.foreground(c, w, h);
  431. };
  432. mxShapeMockupStickyNote.prototype.background = function(c, w, h)
  433. {
  434. c.setFillColor('#ffffcc');
  435. c.begin();
  436. c.moveTo(w * 0.03, h * 0.07);
  437. c.lineTo(w * 0.89, h * 0.06);
  438. c.arcTo(2.81 * w, 2.92 * h, 1, 0, 0, w * 0.99, h * 0.98);
  439. c.lineTo(w * 0.09, h * 0.99);
  440. c.arcTo(2.81 * w, 2.92 * h, 1, 0, 1, w * 0.03, h * 0.07);
  441. c.close();
  442. c.fill();
  443. };
  444. mxShapeMockupStickyNote.prototype.foreground = function(c, w, h)
  445. {
  446. var mainText = mxUtils.getValue(this.style, mxShapeMockupStickyNote.prototype.cst.MAIN_TEXT, 'Note line 1,Note line 2,Note line 3').toString().split(',');
  447. var fontColor = mxUtils.getValue(this.style, mxShapeMockupStickyNote.prototype.cst.TEXT_COLOR, '#666666').toString();
  448. var fontSize = mxUtils.getValue(this.style, mxShapeMockupStickyNote.prototype.cst.TEXT_SIZE, '17').toString();
  449. c.setFillColor('#ff3300');
  450. c.begin();
  451. c.moveTo(w * 0.28 , 0);
  452. c.lineTo(w * 0.59, 0);
  453. c.lineTo(w * 0.6, h * 0.12);
  454. c.lineTo(w * 0.28, h * 0.13);
  455. c.close();
  456. c.fill();
  457. c.setFontSize(fontSize);
  458. c.setFontColor(fontColor);
  459. var lineNum = mainText.length;
  460. var textH = lineNum * fontSize * 1.5;
  461. for (var i = 0; i < mainText.length; i++)
  462. {
  463. c.text(w / 2, (h - textH) / 2 + i * fontSize * 1.5 + fontSize * 0.75, 0, 0, mainText[i], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  464. }
  465. };
  466. mxCellRenderer.prototype.defaultShapes[mxShapeMockupStickyNote.prototype.cst.SHAPE_STICKY_NOTE] = mxShapeMockupStickyNote;
  467. //**********************************************************************************************************************************************************
  468. //Bulleted List
  469. //**********************************************************************************************************************************************************
  470. /**
  471. * Extends mxShape.
  472. */
  473. function mxShapeMockupBulletedList(bounds, fill, stroke, strokewidth)
  474. {
  475. mxShape.call(this);
  476. this.bounds = bounds;
  477. this.fill = fill;
  478. this.stroke = stroke;
  479. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  480. };
  481. /**
  482. * Extends mxShape.
  483. */
  484. mxUtils.extend(mxShapeMockupBulletedList, mxShape);
  485. mxShapeMockupBulletedList.prototype.cst = {
  486. MAIN_TEXT : 'mainText',
  487. TEXT_COLOR : 'textColor',
  488. TEXT_SIZE : 'textSize',
  489. BULLET_STYLE : 'bulletStyle',
  490. STYLE_HYPHEN : 'hyphen',
  491. STYLE_NUM : 'number',
  492. STYLE_DOT : 'dot',
  493. SHAPE_BULLETED_LIST : 'mxgraph.mockup.text.bulletedList'
  494. };
  495. /**
  496. * Function: paintVertexShape
  497. *
  498. * Paints the vertex shape.
  499. */
  500. mxShapeMockupBulletedList.prototype.paintVertexShape = function(c, x, y, w, h)
  501. {
  502. c.translate(x, y);
  503. this.background(c, w, h);
  504. c.setShadow(false);
  505. this.foreground(c, w, h);
  506. };
  507. mxShapeMockupBulletedList.prototype.background = function(c, w, h)
  508. {
  509. c.rect(0, 0, w, h);
  510. c.fillAndStroke();
  511. };
  512. mxShapeMockupBulletedList.prototype.foreground = function(c, w, h)
  513. {
  514. var mainText = mxUtils.getValue(this.style, mxShapeMockupBulletedList.prototype.cst.MAIN_TEXT, 'Note line 1,Note line 2,Note line 3').toString().split(',');
  515. var fontColor = mxUtils.getValue(this.style, mxShapeMockupBulletedList.prototype.cst.TEXT_COLOR, '#666666');
  516. var fontSize = mxUtils.getValue(this.style, mxShapeMockupBulletedList.prototype.cst.TEXT_SIZE, '17');
  517. var bulletStyle = mxUtils.getValue(this.style, mxShapeMockupBulletedList.prototype.cst.BULLET_STYLE, 'none');
  518. c.setFontColor(fontColor);
  519. c.setFontSize(fontSize);
  520. var bullet = '';
  521. for (var i = 0; i < mainText.length; i++)
  522. {
  523. var currText = '';
  524. if (bulletStyle === mxShapeMockupBulletedList.prototype.cst.STYLE_NUM)
  525. {
  526. currText = (i + 1) + ') ' + mainText[i];
  527. }
  528. else if (bulletStyle === mxShapeMockupBulletedList.prototype.cst.STYLE_HYPHEN)
  529. {
  530. currText = '- ' + mainText[i];
  531. }
  532. else if(bulletStyle === mxShapeMockupBulletedList.prototype.cst.STYLE_DOT)
  533. {
  534. currText = String.fromCharCode(8226) + ' ' + mainText[i];
  535. }
  536. else
  537. {
  538. currText = ' ' + mainText[i];
  539. }
  540. c.text(10, i * fontSize * 1.5 + fontSize * 0.75, 0, 0, currText, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  541. }
  542. };
  543. mxCellRenderer.prototype.defaultShapes[mxShapeMockupBulletedList.prototype.cst.SHAPE_BULLETED_LIST] = mxShapeMockupBulletedList;
  544. //**********************************************************************************************************************************************************
  545. //Text Box
  546. //**********************************************************************************************************************************************************
  547. /**
  548. * Extends mxShape.
  549. */
  550. function mxShapeMockupTextBox(bounds, fill, stroke, strokewidth)
  551. {
  552. mxShape.call(this);
  553. this.bounds = bounds;
  554. this.fill = fill;
  555. this.stroke = stroke;
  556. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  557. };
  558. /**
  559. * Extends mxShape.
  560. */
  561. mxUtils.extend(mxShapeMockupTextBox, mxShape);
  562. mxShapeMockupTextBox.prototype.cst = {
  563. MAIN_TEXT : 'mainText',
  564. TEXT_COLOR : 'textColor',
  565. TEXT_SIZE : 'textSize',
  566. SHAPE_TEXT_BOX : 'mxgraph.mockup.text.textBox'
  567. };
  568. /**
  569. * Function: paintVertexShape
  570. *
  571. * Paints the vertex shape.
  572. */
  573. mxShapeMockupTextBox.prototype.paintVertexShape = function(c, x, y, w, h)
  574. {
  575. c.translate(x, y);
  576. this.background(c, w, h);
  577. c.setShadow(false);
  578. this.foreground(c, w, h);
  579. };
  580. mxShapeMockupTextBox.prototype.background = function(c, w, h)
  581. {
  582. c.rect(0, 0, w, h);
  583. c.fillAndStroke();
  584. };
  585. mxShapeMockupTextBox.prototype.foreground = function(c, w, h)
  586. {
  587. var mainText = mxUtils.getValue(this.style, mxShapeMockupTextBox.prototype.cst.MAIN_TEXT, 'Note line 1').toString().split(',');
  588. var fontColor = mxUtils.getValue(this.style, mxShapeMockupTextBox.prototype.cst.TEXT_COLOR, '#666666');
  589. var fontSize = mxUtils.getValue(this.style, mxShapeMockupTextBox.prototype.cst.TEXT_SIZE, '17');
  590. c.setFontColor(fontColor);
  591. c.setFontSize(fontSize);
  592. for (var i = 0; i < mainText.length; i++)
  593. {
  594. c.text(5, i * fontSize * 1.5 + fontSize * 0.75, 0, 0, mainText[i], mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  595. }
  596. };
  597. mxCellRenderer.prototype.defaultShapes[mxShapeMockupTextBox.prototype.cst.SHAPE_TEXT_BOX] = mxShapeMockupTextBox;
  598. //**********************************************************************************************************************************************************
  599. //Captcha
  600. //**********************************************************************************************************************************************************
  601. /**
  602. * Extends mxShape.
  603. */
  604. function mxShapeMockupCaptcha(bounds, fill, stroke, strokewidth)
  605. {
  606. mxShape.call(this);
  607. this.bounds = bounds;
  608. this.fill = fill;
  609. this.stroke = stroke;
  610. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  611. };
  612. /**
  613. * Extends mxShape.
  614. */
  615. mxUtils.extend(mxShapeMockupCaptcha, mxShape);
  616. mxShapeMockupCaptcha.prototype.cst = {
  617. MAIN_TEXT : 'mainText',
  618. TEXT_COLOR : 'textColor',
  619. TEXT_SIZE : 'textSize',
  620. SHAPE_CAPTCHA : 'mxgraph.mockup.text.captcha'
  621. };
  622. /**
  623. * Function: paintVertexShape
  624. *
  625. * Paints the vertex shape.
  626. */
  627. mxShapeMockupCaptcha.prototype.paintVertexShape = function(c, x, y, w, h)
  628. {
  629. c.translate(x, y);
  630. this.background(c, w, h);
  631. c.setShadow(false);
  632. this.foreground(c, w, h);
  633. };
  634. mxShapeMockupCaptcha.prototype.background = function(c, w, h)
  635. {
  636. c.rect(0, 0, w, h);
  637. c.fillAndStroke();
  638. };
  639. mxShapeMockupCaptcha.prototype.foreground = function(c, w, h)
  640. {
  641. var mainText = mxUtils.getValue(this.style, mxShapeMockupCaptcha.prototype.cst.MAIN_TEXT, 'Note line 1');
  642. var fontColor = mxUtils.getValue(this.style, mxShapeMockupCaptcha.prototype.cst.TEXT_COLOR, '#666666');
  643. var fontSize = mxUtils.getValue(this.style, mxShapeMockupCaptcha.prototype.cst.TEXT_SIZE, '25');
  644. c.setFillColor('#88aaff');
  645. c.begin();
  646. c.moveTo(0, 0);
  647. c.lineTo(w * 0.35, 0);
  648. c.lineTo(w * 0.55, h * 0.85);
  649. c.lineTo(w * 0.4, h * 0.75);
  650. c.close();
  651. c.fill();
  652. c.begin();
  653. c.moveTo(w * 0.7, h * 0.1);
  654. c.lineTo(w * 0.95, h * 0.23);
  655. c.lineTo(w, h * 0.4);
  656. c.lineTo(w, h * 0.9);
  657. c.lineTo(w, h);
  658. c.lineTo(w * 0.8, h);
  659. c.close();
  660. c.fill();
  661. c.setFontColor(fontColor);
  662. c.setFontSize(fontSize);
  663. c.text(w * 0.5, h * 0.5, 0, 0, mainText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  664. c.rect(0, 0, w, h);
  665. c.stroke();
  666. };
  667. mxCellRenderer.prototype.defaultShapes[mxShapeMockupCaptcha.prototype.cst.SHAPE_CAPTCHA] = mxShapeMockupCaptcha;
  668. //**********************************************************************************************************************************************************
  669. //Alphanumeric
  670. //**********************************************************************************************************************************************************
  671. /**
  672. * Extends mxShape.
  673. */
  674. function mxShapeMockupAlphanumeric(bounds, fill, stroke, strokewidth)
  675. {
  676. mxShape.call(this);
  677. this.bounds = bounds;
  678. this.fill = fill;
  679. this.stroke = stroke;
  680. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  681. };
  682. /**
  683. * Extends mxShape.
  684. */
  685. mxUtils.extend(mxShapeMockupAlphanumeric, mxShape);
  686. mxShapeMockupAlphanumeric.prototype.cst = {
  687. MAIN_TEXT : 'linkText',
  688. TEXT_SIZE : 'textSize',
  689. TEXT_COLOR : 'textColor',
  690. SHAPE_ALPHANUMERIC : 'mxgraph.mockup.text.alphanumeric'
  691. };
  692. /**
  693. * Function: paintVertexShape
  694. *
  695. * Paints the vertex shape.
  696. */
  697. mxShapeMockupAlphanumeric.prototype.paintVertexShape = function(c, x, y, w, h)
  698. {
  699. var mainText = mxUtils.getValue(this.style, mxShapeMockupAlphanumeric.prototype.cst.MAIN_TEXT, '0-9 A B C D E F G H I J K L M N O P Q R S T U V X Y Z');
  700. var textSize = mxUtils.getValue(this.style, mxShapeMockupAlphanumeric.prototype.cst.TEXT_SIZE, '17');
  701. var textColor = mxUtils.getValue(this.style, mxShapeMockupAlphanumeric.prototype.cst.TEXT_COLOR, '#0000ff');
  702. c.translate(x, y);
  703. var width = mxUtils.getSizeForString(mainText, textSize, mxConstants.DEFAULT_FONTFAMILY).width;
  704. c.setStrokeColor(textColor);
  705. c.setFontSize(textSize);
  706. c.setFontColor(textColor);
  707. c.text(w * 0.5, h * 0.5, 0, 0, mainText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
  708. c.begin();
  709. c.moveTo(w * 0.5 - width * 0.5, (h + parseInt(textSize, 10)) * 0.5);
  710. c.lineTo(w * 0.5 + width * 0.5, (h + parseInt(textSize, 10)) * 0.5);
  711. c.stroke();
  712. };
  713. mxCellRenderer.prototype.defaultShapes[mxShapeMockupAlphanumeric.prototype.cst.SHAPE_ALPHANUMERIC] = mxShapeMockupAlphanumeric;
  714. //**********************************************************************************************************************************************************
  715. //Rounded rectangle (adjustable rounding)
  716. //**********************************************************************************************************************************************************
  717. /**
  718. * Extends mxShape.
  719. */
  720. function mxShapeMockupTextRRect(bounds, fill, stroke, strokewidth)
  721. {
  722. mxShape.call(this);
  723. this.bounds = bounds;
  724. this.fill = fill;
  725. this.stroke = stroke;
  726. this.strokewidth = (strokewidth != null) ? strokewidth : 1;
  727. };
  728. /**
  729. * Extends mxShape.
  730. */
  731. mxUtils.extend(mxShapeMockupTextRRect, mxShape);
  732. mxShapeMockupTextRRect.prototype.cst = {
  733. RRECT : 'mxgraph.mockup.text.rrect',
  734. R_SIZE : 'rSize'
  735. };
  736. /**
  737. * Function: paintVertexShape
  738. *
  739. * Paints the vertex shape.
  740. */
  741. mxShapeMockupTextRRect.prototype.paintVertexShape = function(c, x, y, w, h)
  742. {
  743. c.translate(x, y);
  744. var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupTextRRect.prototype.cst.R_SIZE, '10'));
  745. c.roundrect(0, 0, w, h, rSize);
  746. c.fillAndStroke();
  747. };
  748. mxCellRenderer.registerShape(mxShapeMockupTextRRect.prototype.cst.RRECT, mxShapeMockupTextRRect);