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