1/**2 * Copyright (c) 2006-2010, JGraph Holdings Ltd3 */45//**********************************************************************************************************************************************************6//Link7//**********************************************************************************************************************************************************8/**9 * Extends mxShape.10 */11function 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};1920/**21 * Extends mxShape.22 */23mxUtils.extend(mxShapeMockupLink, mxShape);2425mxShapeMockupLink.prototype.cst = {26 LINK_TEXT : 'linkText',27 TEXT_SIZE : 'textSize',28 TEXT_COLOR : 'textColor',29 SHAPE_LINK : 'mxgraph.mockup.text.link'30};3132/**33 * Function: paintVertexShape34 * 35 * Paints the vertex shape.36 */37mxShapeMockupLink.prototype.paintVertexShape = function(c, x, y, w, h)38{39 var linkText = mxUtils.getValue(this.style, mxShapeMockupLink.prototype.cst.LINK_TEXT, 'Link');40 var textSize = mxUtils.getValue(this.style, mxShapeMockupLink.prototype.cst.TEXT_SIZE, '17');41 var textColor = mxUtils.getValue(this.style, mxShapeMockupLink.prototype.cst.TEXT_COLOR, '#0000ff');4243 c.translate(x, y);44 var width = mxUtils.getSizeForString(linkText, textSize, mxConstants.DEFAULT_FONTFAMILY).width;45 c.setStrokeColor(textColor);46 c.setFontSize(textSize);47 c.setFontColor(textColor);4849 c.text(w * 0.5, h * 0.5, 0, 0, linkText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);5051 c.begin();52 c.moveTo(w * 0.5 - width * 0.5, (h + parseInt(textSize, 10)) * 0.5);53 c.lineTo(w * 0.5 + width * 0.5, (h + parseInt(textSize, 10)) * 0.5);54 c.stroke();55};5657mxCellRenderer.registerShape(mxShapeMockupLink.prototype.cst.SHAPE_LINK, mxShapeMockupLink);5859//**********************************************************************************************************************************************************60//Link Bar61//**********************************************************************************************************************************************************62/**63 * Extends mxShape.64 */65function mxShapeMockupLinkBar(bounds, fill, stroke, strokewidth)66{67 mxShape.call(this);68 this.bounds = bounds;69 this.fill = fill;70 this.stroke = stroke;71 this.strokewidth = (strokewidth != null) ? strokewidth : 1;72};7374/**75 * Extends mxShape.76 */77mxUtils.extend(mxShapeMockupLinkBar, mxShape);7879mxShapeMockupLinkBar.prototype.cst = {80 MAIN_TEXT : 'mainText',81 SHAPE_LINK_BAR : 'mxgraph.mockup.text.linkBar',82 TEXT_COLOR : 'textColor',83 TEXT_COLOR2 : 'textColor2',84 STROKE_COLOR2 : 'strokeColor2',85 FILL_COLOR2 : 'fillColor2',86 SELECTED : '+', //must be 1 char87 TEXT_SIZE : 'textSize'88};8990/**91 * Function: paintVertexShape92 * 93 * Paints the vertex shape.94 */95mxShapeMockupLinkBar.prototype.paintVertexShape = function(c, x, y, w, h)96{97 var textStrings = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.MAIN_TEXT, '+Button 1, Button 2, Button 3').toString().split(',');98 var fontColor = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.TEXT_COLOR, '#666666');99 var selectedFontColor = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.TEXT_COLOR2, '#ffffff');100 var fontSize = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.TEXT_SIZE, '17').toString();101 var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');102 var separatorColor = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.STROKE_COLOR2, '#c4c4c4');103 var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');104 var selectedFillColor = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.FILL_COLOR2, '#008cff');105 var buttonNum = textStrings.length;106 var buttonWidths = new Array(buttonNum);107 var buttonTotalWidth = 0;108 var selectedButton = -1;109 var rSize = 10; //rounding size110 var labelOffset = 5;111112 for (var i = 0; i < buttonNum; i++)113 {114 var buttonText = textStrings[i];115116 if(buttonText.charAt(0) === mxShapeMockupLinkBar.prototype.cst.SELECTED)117 {118 buttonText = textStrings[i].substring(1);119 selectedButton = i;120 }121122 var currW = mxUtils.getSizeForString(buttonText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;123124 if (currW === 0)125 {126 buttonWidths[i] = 42;127 }128 else129 {130 buttonWidths[i] = currW;131 }132133 buttonTotalWidth += buttonWidths[i];134 }135136 var trueH = Math.max(h, fontSize * 1.5, 20);137 var minW = 2 * labelOffset * buttonNum + buttonTotalWidth;138 var trueW = Math.max(w, minW);139140 c.translate(x, y);141 this.background(c, trueW, trueH, rSize, buttonNum, buttonWidths, labelOffset, minW, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton);142 c.setShadow(false);143144 var currWidth = 0;145146 for (var i = 0; i < buttonNum; i++)147 {148 if (i === selectedButton)149 {150 c.setFontColor(selectedFontColor);151 c.setStrokeColor(selectedFontColor);152 }153 else154 {155 c.setFontColor(fontColor);156 c.setStrokeColor(fontColor);157 }158159 currWidth = currWidth + labelOffset;160 this.buttonText(c, currWidth, trueH, textStrings[i], buttonWidths[i], fontSize, minW, trueW);161 currWidth = currWidth + buttonWidths[i] + labelOffset;162 }163};164165mxShapeMockupLinkBar.prototype.background = function(c, w, h, rSize, buttonNum, buttonWidths, labelOffset, minW, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton)166{167 c.begin();168169 //draw the frame170 c.setStrokeColor(frameColor);171 c.setFillColor(bgColor);172 c.rect(0, 0, w, h);173 c.fillAndStroke();174175 //draw the button separators176 c.setStrokeColor(separatorColor);177 c.begin();178179 for (var i = 1; i < buttonNum; i++)180 {181 if (i !== selectedButton && i !== (selectedButton + 1))182 {183 var currWidth = 0;184185 for (var j = 0; j < i; j++)186 {187 currWidth += buttonWidths[j] + 2 * labelOffset;188 }189190 currWidth = currWidth * w / minW;191 c.moveTo(currWidth, 0);192 c.lineTo(currWidth, h);193 }194 }195196 c.stroke();197198 //draw the selected button199 var buttonLeft = 0;200 c.setFillColor(selectedFillColor);201202 for (var i = 0; i < selectedButton; i++)203 {204 buttonLeft += buttonWidths[i] + 2 * labelOffset;205 }206207 buttonLeft = buttonLeft * w / minW;208 var buttonRight = (buttonWidths[selectedButton] + 2 * labelOffset) * w / minW;209 buttonRight += buttonLeft;210211 if (selectedButton === 0)212 {213 c.rect(0, 0, buttonRight, h);214 c.fill();215 }216 else if (selectedButton === buttonNum - 1)217 {218 c.rect(buttonLeft, 0, buttonRight - buttonLeft, h);219 c.fill();220 }221 else if (selectedButton !== -1)222 {223 c.rect(buttonLeft, 0, buttonRight - buttonLeft, h);224 c.fill();225 }226227 //draw the frame again, to achieve a nicer effect228 c.setStrokeColor(frameColor);229 c.setFillColor(bgColor);230 c.rect(0, 0, w, h);231 c.stroke();232};233234mxShapeMockupLinkBar.prototype.buttonText = function(c, w, h, textString, buttonWidth, fontSize, minW, trueW)235{236 if(textString.charAt(0) === mxShapeMockupLinkBar.prototype.cst.SELECTED)237 {238 textString = textString.substring(1);239 }240241 c.begin();242 c.setFontSize(fontSize);243 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);244245 var textW = mxUtils.getSizeForString(textString, fontSize, mxConstants.DEFAULT_FONTFAMILY).width * 0.5;246247 if (textString !== null && textString !== '')248 {249 c.begin();250 c.moveTo((w + buttonWidth * 0.5) * trueW / minW - textW, h * 0.5 + fontSize * 0.5);251 c.lineTo((w + buttonWidth * 0.5) * trueW / minW + textW, h * 0.5 + fontSize * 0.5);252 c.stroke();253 }254};255256mxCellRenderer.registerShape(mxShapeMockupLinkBar.prototype.cst.SHAPE_LINK_BAR, mxShapeMockupLinkBar);257258//**********************************************************************************************************************************************************259//Callout260//**********************************************************************************************************************************************************261/**262 * Extends mxShape.263 */264function mxShapeMockupCallout(bounds, fill, stroke, strokewidth)265{266 mxShape.call(this);267 this.bounds = bounds;268 this.fill = fill;269 this.stroke = stroke;270 this.strokewidth = (strokewidth != null) ? strokewidth : 1;271};272273/**274 * Extends mxShape.275 */276mxUtils.extend(mxShapeMockupCallout, mxShape);277278mxShapeMockupCallout.prototype.cst = {279 CALLOUT_TEXT : 'linkText',280 CALLOUT_DIR : 'callDir',281 CALLOUT_STYLE : 'callStyle',282 STYLE_LINE : 'line',283 STYLE_RECT : 'rect',284 STYLE_ROUNDRECT : 'roundRect',285 DIR_NW : 'NW',286 DIR_NE : 'NE',287 DIR_SE : 'SE',288 DIR_SW : 'SW',289 TEXT_SIZE : 'textSize',290 TEXT_COLOR : 'textColor',291 SHAPE_CALLOUT : 'mxgraph.mockup.text.callout'292};293294mxShapeMockupCallout.prototype.customProperties = [295 {name: 'callDir', dispName: 'Direction', type: 'enum',296 enumList:[{val: 'NW', dispName:'North-West'},297 {val: 'NE', dispName:'North-East'},298 {val: 'SE', dispName:'South-East'},299 {val: 'SW', dispName:'South-West'}]},300 {name: 'callStyle', dispName: 'Style', type: 'enum',301 enumList:[{val: 'line', dispName:'Line'},302 {val: 'rect', dispName:'Rectangle'}]}303];304305/**306 * Function: paintVertexShape307 * 308 * Paints the vertex shape.309 */310mxShapeMockupCallout.prototype.paintVertexShape = function(c, x, y, w, h)311{312 var calloutText = mxUtils.getValue(this.style, mxShapeMockupCallout.prototype.cst.CALLOUT_TEXT, 'Callout');313 var textSize = mxUtils.getValue(this.style, mxShapeMockupCallout.prototype.cst.TEXT_SIZE, '17');314 var textColor = mxUtils.getValue(this.style, mxShapeMockupCallout.prototype.cst.TEXT_COLOR, '#666666');315 var callStyle = mxUtils.getValue(this.style, mxShapeMockupCallout.prototype.cst.CALLOUT_STYLE, mxShapeMockupCallout.prototype.cst.STYLE_LINE);316 var callDir = mxUtils.getValue(this.style, mxShapeMockupCallout.prototype.cst.CALLOUT_DIR, mxShapeMockupCallout.prototype.cst.DIR_NW);317 var textWidth = mxUtils.getSizeForString(calloutText, textSize, mxConstants.DEFAULT_FONTFAMILY).width;318 textWidth = textWidth * 1.2;319320 if (textWidth == 0)321 {322 textWidth = 70;323 }324325 c.translate(x, y);326 c.setFontSize(textSize);327 c.setFontColor(textColor);328 var callH = textSize * 1.5; 329330 if (callDir === mxShapeMockupCallout.prototype.cst.DIR_NW)331 {332 if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_LINE)333 {334 c.begin();335 c.moveTo(0, callH);336 c.lineTo(textWidth, callH);337 c.lineTo(w, h);338 c.stroke();339 }340 else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_RECT)341 {342 c.rect(0,0, textWidth, callH);343 c.fillAndStroke();344 c.begin();345 c.moveTo(textWidth * 0.5, callH);346 c.lineTo(w, h);347 c.stroke();348 }349 else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_ROUNDRECT)350 {351 c.roundrect(0, 0, textWidth, callH, callH * 0.25, callH * 0.25);352 c.fillAndStroke();353 c.begin();354 c.moveTo(textWidth * 0.5, callH);355 c.lineTo(w, h);356 c.stroke();357 }358359 c.text(textWidth * 0.5, callH * 0.5, 0, 0, calloutText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);360 }361 else if (callDir === mxShapeMockupCallout.prototype.cst.DIR_NE)362 {363 if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_LINE)364 {365 c.begin();366 c.moveTo(w, callH);367 c.lineTo(w - textWidth, callH);368 c.lineTo(0, h);369 c.stroke();370 }371 else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_RECT)372 {373 c.rect(w - textWidth,0, textWidth, callH);374 c.fillAndStroke();375 c.begin();376 c.moveTo(w - textWidth * 0.5, callH);377 c.lineTo(0, h);378 c.stroke();379 }380 else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_ROUNDRECT)381 {382 c.roundrect(w - textWidth,0, textWidth, callH, callH * 0.25, callH * 0.25);383 c.fillAndStroke();384 c.begin();385 c.moveTo(w - textWidth * 0.5, callH);386 c.lineTo(0, h);387 c.stroke();388 }389390 c.text(w - textWidth * 0.5, callH * 0.5, 0, 0, calloutText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);391 }392 else if (callDir === mxShapeMockupCallout.prototype.cst.DIR_SE)393 {394 if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_LINE)395 {396 c.begin();397 c.moveTo(w, h);398 c.lineTo(w - textWidth, h);399 c.lineTo(0, 0);400 c.stroke();401 }402 else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_RECT)403 {404 c.rect(w - textWidth, h - callH, textWidth, callH);405 c.fillAndStroke();406 c.begin();407 c.moveTo(w - textWidth * 0.5, h - callH);408 c.lineTo(0, 0);409 c.stroke();410 }411 else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_ROUNDRECT)412 {413 c.roundrect(w - textWidth,h - callH, textWidth, callH, callH * 0.25, callH * 0.25);414 c.fillAndStroke();415 c.begin();416 c.moveTo(w - textWidth * 0.5, h - callH);417 c.lineTo(0, 0);418 c.stroke();419 }420421 c.text(w - textWidth * 0.5, h - callH * 0.5, 0, 0, calloutText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);422 }423 else if (callDir === mxShapeMockupCallout.prototype.cst.DIR_SW)424 {425 if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_LINE)426 {427 c.begin();428 c.moveTo(0, h);429 c.lineTo(textWidth, h);430 c.lineTo(w, 0);431 c.stroke();432 }433 else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_RECT)434 {435 c.rect(0, h - callH, textWidth, callH);436 c.fillAndStroke();437 c.begin();438 c.moveTo(textWidth * 0.5, h - callH);439 c.lineTo(w, 0);440 c.stroke();441 }442 else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_ROUNDRECT)443 {444 c.roundrect(0, h - callH, textWidth, callH, callH * 0.25, callH * 0.25);445 c.fillAndStroke();446 c.begin();447 c.moveTo(textWidth * 0.5, h - callH);448 c.lineTo(w, 0);449 c.stroke();450 }451452 c.text(textWidth * 0.5, h - callH * 0.5, 0, 0, calloutText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);453 }454455};456457mxCellRenderer.registerShape(mxShapeMockupCallout.prototype.cst.SHAPE_CALLOUT, mxShapeMockupCallout);458459//**********************************************************************************************************************************************************460//Sticky Note (LEGACY)461//**********************************************************************************************************************************************************462/**463 * Extends mxShape.464 */465function mxShapeMockupStickyNote(bounds, fill, stroke, strokewidth)466{467 mxShape.call(this);468 this.bounds = bounds;469 this.fill = fill;470 this.stroke = stroke;471 this.strokewidth = (strokewidth != null) ? strokewidth : 1;472};473474/**475 * Extends mxShape.476 */477mxUtils.extend(mxShapeMockupStickyNote, mxShape);478479mxShapeMockupStickyNote.prototype.cst = {480 MAIN_TEXT : 'mainText',481 TEXT_COLOR : 'textColor',482 TEXT_SIZE : 'textSize',483 SHAPE_STICKY_NOTE : 'mxgraph.mockup.text.stickyNote'484};485486/**487 * Function: paintVertexShape488 * 489 * Paints the vertex shape.490 */491mxShapeMockupStickyNote.prototype.paintVertexShape = function(c, x, y, w, h)492{493 c.translate(x, y);494 this.background(c, w, h);495 c.setShadow(false);496 this.foreground(c, w, h);497};498499mxShapeMockupStickyNote.prototype.background = function(c, w, h)500{501 c.setFillColor('#ffffcc');502 c.begin();503 c.moveTo(w * 0.03, h * 0.07);504 c.lineTo(w * 0.89, h * 0.06);505 c.arcTo(2.81 * w, 2.92 * h, 1, 0, 0, w * 0.99, h * 0.98);506 c.lineTo(w * 0.09, h * 0.99);507 c.arcTo(2.81 * w, 2.92 * h, 1, 0, 1, w * 0.03, h * 0.07);508 c.close();509 c.fill();510};511512mxShapeMockupStickyNote.prototype.foreground = function(c, w, h)513{514 var mainText = mxUtils.getValue(this.style, mxShapeMockupStickyNote.prototype.cst.MAIN_TEXT, 'Note line 1,Note line 2,Note line 3').toString().split(',');515 var fontColor = mxUtils.getValue(this.style, mxShapeMockupStickyNote.prototype.cst.TEXT_COLOR, '#666666').toString();516 var fontSize = mxUtils.getValue(this.style, mxShapeMockupStickyNote.prototype.cst.TEXT_SIZE, '17').toString();517518 c.setFillColor('#ff3300');519 c.begin();520 c.moveTo(w * 0.28 , 0);521 c.lineTo(w * 0.59, 0);522 c.lineTo(w * 0.6, h * 0.12);523 c.lineTo(w * 0.28, h * 0.13);524 c.close();525 c.fill();526527 c.setFontSize(fontSize);528 c.setFontColor(fontColor);529 var lineNum = mainText.length;530 var textH = lineNum * fontSize * 1.5;531532 for (var i = 0; i < mainText.length; i++)533 {534 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);535 }536};537538mxCellRenderer.registerShape(mxShapeMockupStickyNote.prototype.cst.SHAPE_STICKY_NOTE, mxShapeMockupStickyNote);539540//**********************************************************************************************************************************************************541//Sticky Note v2542//**********************************************************************************************************************************************************543/**544* Extends mxShape.545*/546function mxShapeMockupStickyNote2(bounds, fill, stroke, strokewidth)547{548 mxShape.call(this);549 this.bounds = bounds;550 this.fill = fill;551 this.stroke = stroke;552 this.strokewidth = (strokewidth != null) ? strokewidth : 1;553};554555/**556* Extends mxShape.557*/558mxUtils.extend(mxShapeMockupStickyNote2, mxShape);559560mxShapeMockupStickyNote2.prototype.cst = {561 SHAPE_STICKY_NOTE : 'mxgraph.mockup.text.stickyNote2'562};563564/**565* Function: paintVertexShape566* 567* Paints the vertex shape.568*/569mxShapeMockupStickyNote2.prototype.paintVertexShape = function(c, x, y, w, h)570{571 c.translate(x, y);572 this.background(c, w, h);573 c.setShadow(false);574 this.foreground(c, w, h);575};576577mxShapeMockupStickyNote2.prototype.background = function(c, w, h)578{579 c.begin();580 c.moveTo(w * 0.03, h * 0.07);581 c.lineTo(w * 0.89, h * 0.06);582 c.arcTo(2.81 * w, 2.92 * h, 1, 0, 0, w * 0.99, h * 0.98);583 c.lineTo(w * 0.09, h * 0.99);584 c.arcTo(2.81 * w, 2.92 * h, 1, 0, 1, w * 0.03, h * 0.07);585 c.close();586 c.fill();587};588589mxShapeMockupStickyNote2.prototype.foreground = function(c, w, h)590{591 var strokeColor = mxUtils.getValue(this.style, 'strokeColor', '#000000');592593 c.setFillColor(strokeColor);594 c.begin();595 c.moveTo(w * 0.28 , 0);596 c.lineTo(w * 0.59, 0);597 c.lineTo(w * 0.6, h * 0.12);598 c.lineTo(w * 0.28, h * 0.13);599 c.close();600 c.fill();601};602603mxCellRenderer.registerShape(mxShapeMockupStickyNote2.prototype.cst.SHAPE_STICKY_NOTE, mxShapeMockupStickyNote2);604605//**********************************************************************************************************************************************************606//Bulleted List607//**********************************************************************************************************************************************************608/**609 * Extends mxShape.610 */611function mxShapeMockupBulletedList(bounds, fill, stroke, strokewidth)612{613 mxShape.call(this);614 this.bounds = bounds;615 this.fill = fill;616 this.stroke = stroke;617 this.strokewidth = (strokewidth != null) ? strokewidth : 1;618};619620/**621 * Extends mxShape.622 */623mxUtils.extend(mxShapeMockupBulletedList, mxShape);624625mxShapeMockupBulletedList.prototype.cst = {626 MAIN_TEXT : 'mainText',627 TEXT_COLOR : 'textColor',628 TEXT_SIZE : 'textSize',629 BULLET_STYLE : 'bulletStyle',630 STYLE_HYPHEN : 'hyphen',631 STYLE_NUM : 'number',632 STYLE_DOT : 'dot',633 SHAPE_BULLETED_LIST : 'mxgraph.mockup.text.bulletedList'634};635636/**637 * Function: paintVertexShape638 * 639 * Paints the vertex shape.640 */641mxShapeMockupBulletedList.prototype.paintVertexShape = function(c, x, y, w, h)642{643 c.translate(x, y);644 this.background(c, w, h);645 c.setShadow(false);646 this.foreground(c, w, h);647};648649mxShapeMockupBulletedList.prototype.background = function(c, w, h)650{651 c.rect(0, 0, w, h);652 c.fillAndStroke();653};654655mxShapeMockupBulletedList.prototype.foreground = function(c, w, h)656{657 var mainText = mxUtils.getValue(this.style, mxShapeMockupBulletedList.prototype.cst.MAIN_TEXT, 'Note line 1,Note line 2,Note line 3').toString().split(',');658 var fontColor = mxUtils.getValue(this.style, mxShapeMockupBulletedList.prototype.cst.TEXT_COLOR, '#666666');659 var fontSize = mxUtils.getValue(this.style, mxShapeMockupBulletedList.prototype.cst.TEXT_SIZE, '17');660 var bulletStyle = mxUtils.getValue(this.style, mxShapeMockupBulletedList.prototype.cst.BULLET_STYLE, 'none');661662 c.setFontColor(fontColor);663 c.setFontSize(fontSize);664665 var bullet = '';666667 for (var i = 0; i < mainText.length; i++)668 {669 var currText = '';670671 if (bulletStyle === mxShapeMockupBulletedList.prototype.cst.STYLE_NUM)672 {673 currText = (i + 1) + ') ' + mainText[i]; 674 }675 else if (bulletStyle === mxShapeMockupBulletedList.prototype.cst.STYLE_HYPHEN)676 {677 currText = '- ' + mainText[i]; 678 }679 else if(bulletStyle === mxShapeMockupBulletedList.prototype.cst.STYLE_DOT)680 {681 currText = String.fromCharCode(8226) + ' ' + mainText[i]; 682 }683 else684 {685 currText = ' ' + mainText[i]; 686 }687688 c.text(10, i * fontSize * 1.5 + fontSize * 0.75, 0, 0, currText, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);689 }690};691692mxCellRenderer.registerShape(mxShapeMockupBulletedList.prototype.cst.SHAPE_BULLETED_LIST, mxShapeMockupBulletedList);693694//**********************************************************************************************************************************************************695//Text Box696//**********************************************************************************************************************************************************697/**698 * Extends mxShape.699 */700function mxShapeMockupTextBox(bounds, fill, stroke, strokewidth)701{702 mxShape.call(this);703 this.bounds = bounds;704 this.fill = fill;705 this.stroke = stroke;706 this.strokewidth = (strokewidth != null) ? strokewidth : 1;707};708709/**710 * Extends mxShape.711 */712mxUtils.extend(mxShapeMockupTextBox, mxShape);713714mxShapeMockupTextBox.prototype.cst = {715 MAIN_TEXT : 'mainText',716 TEXT_COLOR : 'textColor',717 TEXT_SIZE : 'textSize',718 SHAPE_TEXT_BOX : 'mxgraph.mockup.text.textBox'719};720721/**722 * Function: paintVertexShape723 * 724 * Paints the vertex shape.725 */726mxShapeMockupTextBox.prototype.paintVertexShape = function(c, x, y, w, h)727{728 c.translate(x, y);729 this.background(c, w, h);730 c.setShadow(false);731 this.foreground(c, w, h);732};733734mxShapeMockupTextBox.prototype.background = function(c, w, h)735{736 c.rect(0, 0, w, h);737 c.fillAndStroke();738};739740mxShapeMockupTextBox.prototype.foreground = function(c, w, h)741{742 var mainText = mxUtils.getValue(this.style, mxShapeMockupTextBox.prototype.cst.MAIN_TEXT, 'Note line 1').toString().split(',');743 var fontColor = mxUtils.getValue(this.style, mxShapeMockupTextBox.prototype.cst.TEXT_COLOR, '#666666');744 var fontSize = mxUtils.getValue(this.style, mxShapeMockupTextBox.prototype.cst.TEXT_SIZE, '17');745746 c.setFontColor(fontColor);747 c.setFontSize(fontSize);748749 for (var i = 0; i < mainText.length; i++)750 {751 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);752 }753};754755mxCellRenderer.registerShape(mxShapeMockupTextBox.prototype.cst.SHAPE_TEXT_BOX, mxShapeMockupTextBox);756757//**********************************************************************************************************************************************************758//Captcha759//**********************************************************************************************************************************************************760/**761 * Extends mxShape.762 */763function mxShapeMockupCaptcha(bounds, fill, stroke, strokewidth)764{765 mxShape.call(this);766 this.bounds = bounds;767 this.fill = fill;768 this.stroke = stroke;769 this.strokewidth = (strokewidth != null) ? strokewidth : 1;770};771772/**773 * Extends mxShape.774 */775mxUtils.extend(mxShapeMockupCaptcha, mxShape);776777mxShapeMockupCaptcha.prototype.cst = {778 MAIN_TEXT : 'mainText',779 TEXT_COLOR : 'textColor',780 TEXT_SIZE : 'textSize',781 SHAPE_CAPTCHA : 'mxgraph.mockup.text.captcha'782};783784mxShapeMockupCaptcha.prototype.customProperties = [785 {name: 'fillColor2', dispName: 'Fill2 Color', type: 'color', primary: true}786];787788/**789 * Function: paintVertexShape790 * 791 * Paints the vertex shape.792 */793mxShapeMockupCaptcha.prototype.paintVertexShape = function(c, x, y, w, h)794{795 c.translate(x, y);796 this.background(c, w, h);797 c.setShadow(false);798 this.foreground(c, w, h);799};800801mxShapeMockupCaptcha.prototype.background = function(c, w, h)802{803 c.rect(0, 0, w, h);804 c.fillAndStroke();805};806807mxShapeMockupCaptcha.prototype.foreground = function(c, w, h)808{809 var mainText = mxUtils.getValue(this.style, mxShapeMockupCaptcha.prototype.cst.MAIN_TEXT, 'Note line 1');810 var fontColor = mxUtils.getValue(this.style, mxShapeMockupCaptcha.prototype.cst.TEXT_COLOR, '#666666');811 var fontSize = mxUtils.getValue(this.style, mxShapeMockupCaptcha.prototype.cst.TEXT_SIZE, '25');812 var fillColor2 = mxUtils.getValue(this.style, 'fillColor2', '#88aaff');813814 c.setFillColor(fillColor2);815 c.begin();816 c.moveTo(0, 0);817 c.lineTo(w * 0.35, 0);818 c.lineTo(w * 0.55, h * 0.85);819 c.lineTo(w * 0.4, h * 0.75);820 c.close();821 c.fill();822823 c.begin();824 c.moveTo(w * 0.7, h * 0.1);825 c.lineTo(w * 0.95, h * 0.23);826 c.lineTo(w, h * 0.4);827 c.lineTo(w, h * 0.9);828 c.lineTo(w, h);829 c.lineTo(w * 0.8, h);830 c.close();831 c.fill();832833 c.setFontColor(fontColor);834 c.setFontSize(fontSize);835836 c.text(w * 0.5, h * 0.5, 0, 0, mainText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);837838 c.rect(0, 0, w, h);839 c.stroke();840};841842mxCellRenderer.registerShape(mxShapeMockupCaptcha.prototype.cst.SHAPE_CAPTCHA, mxShapeMockupCaptcha);843844//**********************************************************************************************************************************************************845//Alphanumeric846//**********************************************************************************************************************************************************847/**848 * Extends mxShape.849 */850function mxShapeMockupAlphanumeric(bounds, fill, stroke, strokewidth)851{852 mxShape.call(this);853 this.bounds = bounds;854 this.fill = fill;855 this.stroke = stroke;856 this.strokewidth = (strokewidth != null) ? strokewidth : 1;857};858859/**860 * Extends mxShape.861 */862mxUtils.extend(mxShapeMockupAlphanumeric, mxShape);863864mxShapeMockupAlphanumeric.prototype.cst = {865 MAIN_TEXT : 'linkText',866 TEXT_SIZE : 'textSize',867 TEXT_COLOR : 'textColor',868 SHAPE_ALPHANUMERIC : 'mxgraph.mockup.text.alphanumeric'869};870871/**872 * Function: paintVertexShape873 * 874 * Paints the vertex shape.875 */876mxShapeMockupAlphanumeric.prototype.paintVertexShape = function(c, x, y, w, h)877{878 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');879 var textSize = mxUtils.getValue(this.style, mxShapeMockupAlphanumeric.prototype.cst.TEXT_SIZE, '17');880 var textColor = mxUtils.getValue(this.style, mxShapeMockupAlphanumeric.prototype.cst.TEXT_COLOR, '#0000ff');881882 c.translate(x, y);883 var width = mxUtils.getSizeForString(mainText, textSize, mxConstants.DEFAULT_FONTFAMILY).width;884 c.setStrokeColor(textColor);885 c.setFontSize(textSize);886 c.setFontColor(textColor);887 c.text(w * 0.5, h * 0.5, 0, 0, mainText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);888 c.begin();889 c.moveTo(w * 0.5 - width * 0.5, (h + parseInt(textSize, 10)) * 0.5);890 c.lineTo(w * 0.5 + width * 0.5, (h + parseInt(textSize, 10)) * 0.5);891 c.stroke();892};893894mxCellRenderer.registerShape(mxShapeMockupAlphanumeric.prototype.cst.SHAPE_ALPHANUMERIC, mxShapeMockupAlphanumeric);895896//**********************************************************************************************************************************************************897//Rounded rectangle (adjustable rounding)898//**********************************************************************************************************************************************************899/**900* Extends mxShape.901*/902function mxShapeMockupTextRRect(bounds, fill, stroke, strokewidth)903{904 mxShape.call(this);905 this.bounds = bounds;906 this.fill = fill;907 this.stroke = stroke;908 this.strokewidth = (strokewidth != null) ? strokewidth : 1;909};910911/**912* Extends mxShape.913*/914mxUtils.extend(mxShapeMockupTextRRect, mxShape);915916mxShapeMockupTextRRect.prototype.cst = {917 RRECT : 'mxgraph.mockup.text.rrect',918 R_SIZE : 'rSize'919};920921/**922* Function: paintVertexShape923* 924* Paints the vertex shape.925*/926mxShapeMockupTextRRect.prototype.paintVertexShape = function(c, x, y, w, h)927{928 c.translate(x, y);929930 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupTextRRect.prototype.cst.R_SIZE, '10'));931 c.roundrect(0, 0, w, h, rSize);932 c.fillAndStroke();933};934935mxCellRenderer.registerShape(mxShapeMockupTextRRect.prototype.cst.RRECT, mxShapeMockupTextRRect);936