123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857 |
- /**
- * $Id: mxMockupText.js,v 1.4 2013/05/24 07:12:36 mate Exp $
- * Copyright (c) 2006-2010, JGraph Ltd
- */
- //**********************************************************************************************************************************************************
- //Link
- //**********************************************************************************************************************************************************
- /**
- * Extends mxShape.
- */
- function mxShapeMockupLink(bounds, fill, stroke, strokewidth)
- {
- mxShape.call(this);
- this.bounds = bounds;
- this.fill = fill;
- this.stroke = stroke;
- this.strokewidth = (strokewidth != null) ? strokewidth : 1;
- };
- /**
- * Extends mxShape.
- */
- mxUtils.extend(mxShapeMockupLink, mxShape);
- mxShapeMockupLink.prototype.cst = {
- LINK_TEXT : 'linkText',
- TEXT_SIZE : 'textSize',
- TEXT_COLOR : 'textColor',
- SHAPE_LINK : 'mxgraph.mockup.text.link'
- };
- /**
- * Function: paintVertexShape
- *
- * Paints the vertex shape.
- */
- mxShapeMockupLink.prototype.paintVertexShape = function(c, x, y, w, h)
- {
- var linkText = mxUtils.getValue(this.style, mxShapeMockupLink.prototype.cst.LINK_TEXT, 'Link');
- var textSize = mxUtils.getValue(this.style, mxShapeMockupLink.prototype.cst.TEXT_SIZE, '17');
- var textColor = mxUtils.getValue(this.style, mxShapeMockupLink.prototype.cst.TEXT_COLOR, '#0000ff');
- c.translate(x, y);
- var width = mxUtils.getSizeForString(linkText, textSize, mxConstants.DEFAULT_FONTFAMILY).width;
- c.setStrokeColor(textColor);
- c.setFontSize(textSize);
- c.setFontColor(textColor);
- c.text(w * 0.5, h * 0.5, 0, 0, linkText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
- c.begin();
- c.moveTo(w * 0.5 - width * 0.5, (h + parseInt(textSize, 10)) * 0.5);
- c.lineTo(w * 0.5 + width * 0.5, (h + parseInt(textSize, 10)) * 0.5);
- c.stroke();
- };
- mxCellRenderer.prototype.defaultShapes[mxShapeMockupLink.prototype.cst.SHAPE_LINK] = mxShapeMockupLink;
- //**********************************************************************************************************************************************************
- //Link Bar
- //**********************************************************************************************************************************************************
- /**
- * Extends mxShape.
- */
- function mxShapeMockupLinkBar(bounds, fill, stroke, strokewidth)
- {
- mxShape.call(this);
- this.bounds = bounds;
- this.fill = fill;
- this.stroke = stroke;
- this.strokewidth = (strokewidth != null) ? strokewidth : 1;
- };
- /**
- * Extends mxShape.
- */
- mxUtils.extend(mxShapeMockupLinkBar, mxShape);
- mxShapeMockupLinkBar.prototype.cst = {
- MAIN_TEXT : 'mainText',
- SHAPE_LINK_BAR : 'mxgraph.mockup.text.linkBar',
- TEXT_COLOR : 'textColor',
- TEXT_COLOR2 : 'textColor2',
- STROKE_COLOR2 : 'strokeColor2',
- FILL_COLOR2 : 'fillColor2',
- SELECTED : '+', //must be 1 char
- TEXT_SIZE : 'textSize'
- };
- /**
- * Function: paintVertexShape
- *
- * Paints the vertex shape.
- */
- mxShapeMockupLinkBar.prototype.paintVertexShape = function(c, x, y, w, h)
- {
- var textStrings = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.MAIN_TEXT, '+Button 1, Button 2, Button 3').toString().split(',');
- var fontColor = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.TEXT_COLOR, '#666666');
- var selectedFontColor = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.TEXT_COLOR2, '#ffffff');
- var fontSize = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.TEXT_SIZE, '17').toString();
- var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');
- var separatorColor = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.STROKE_COLOR2, '#c4c4c4');
- var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');
- var selectedFillColor = mxUtils.getValue(this.style, mxShapeMockupLinkBar.prototype.cst.FILL_COLOR2, '#008cff');
- var buttonNum = textStrings.length;
- var buttonWidths = new Array(buttonNum);
- var buttonTotalWidth = 0;
- var selectedButton = -1;
- var rSize = 10; //rounding size
- var labelOffset = 5;
- for (var i = 0; i < buttonNum; i++)
- {
- var buttonText = textStrings[i];
- if(buttonText.charAt(0) === mxShapeMockupLinkBar.prototype.cst.SELECTED)
- {
- buttonText = textStrings[i].substring(1);
- selectedButton = i;
- }
- var currW = mxUtils.getSizeForString(buttonText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;
- if (currW === 0)
- {
- buttonWidths[i] = 42;
- }
- else
- {
- buttonWidths[i] = currW;
- }
- buttonTotalWidth += buttonWidths[i];
- }
- var trueH = Math.max(h, fontSize * 1.5, 20);
- var minW = 2 * labelOffset * buttonNum + buttonTotalWidth;
- var trueW = Math.max(w, minW);
- c.translate(x, y);
- this.background(c, trueW, trueH, rSize, buttonNum, buttonWidths, labelOffset, minW, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton);
- c.setShadow(false);
- var currWidth = 0;
- for (var i = 0; i < buttonNum; i++)
- {
- if (i === selectedButton)
- {
- c.setFontColor(selectedFontColor);
- c.setStrokeColor(selectedFontColor);
- }
- else
- {
- c.setFontColor(fontColor);
- c.setStrokeColor(fontColor);
- }
- currWidth = currWidth + labelOffset;
- this.buttonText(c, currWidth, trueH, textStrings[i], buttonWidths[i], fontSize, minW, trueW);
- currWidth = currWidth + buttonWidths[i] + labelOffset;
- }
- };
- mxShapeMockupLinkBar.prototype.background = function(c, w, h, rSize, buttonNum, buttonWidths, labelOffset, minW, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton)
- {
- c.begin();
- //draw the frame
- c.setStrokeColor(frameColor);
- c.setFillColor(bgColor);
- c.rect(0, 0, w, h);
- c.fillAndStroke();
- //draw the button separators
- c.setStrokeColor(separatorColor);
- c.begin();
- for (var i = 1; i < buttonNum; i++)
- {
- if (i !== selectedButton && i !== (selectedButton + 1))
- {
- var currWidth = 0;
- for (var j = 0; j < i; j++)
- {
- currWidth += buttonWidths[j] + 2 * labelOffset;
- }
- currWidth = currWidth * w / minW;
- c.moveTo(currWidth, 0);
- c.lineTo(currWidth, h);
- }
- }
- c.stroke();
- //draw the selected button
- var buttonLeft = 0;
- c.setFillColor(selectedFillColor);
- for (var i = 0; i < selectedButton; i++)
- {
- buttonLeft += buttonWidths[i] + 2 * labelOffset;
- }
- buttonLeft = buttonLeft * w / minW;
- var buttonRight = (buttonWidths[selectedButton] + 2 * labelOffset) * w / minW;
- buttonRight += buttonLeft;
- if (selectedButton === 0)
- {
- c.rect(0, 0, buttonRight, h);
- c.fill();
- }
- else if (selectedButton === buttonNum - 1)
- {
- c.rect(buttonLeft, 0, buttonRight - buttonLeft, h);
- c.fill();
- }
- else if (selectedButton !== -1)
- {
- c.rect(buttonLeft, 0, buttonRight - buttonLeft, h);
- c.fill();
- }
- //draw the frame again, to achieve a nicer effect
- c.setStrokeColor(frameColor);
- c.setFillColor(bgColor);
- c.rect(0, 0, w, h);
- c.stroke();
- };
- mxShapeMockupLinkBar.prototype.buttonText = function(c, w, h, textString, buttonWidth, fontSize, minW, trueW)
- {
- if(textString.charAt(0) === mxShapeMockupLinkBar.prototype.cst.SELECTED)
- {
- textString = textString.substring(1);
- }
- c.begin();
- c.setFontSize(fontSize);
- 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);
- var textW = mxUtils.getSizeForString(textString, fontSize, mxConstants.DEFAULT_FONTFAMILY).width * 0.5;
- if (textString !== null && textString !== '')
- {
- c.begin();
- c.moveTo((w + buttonWidth * 0.5) * trueW / minW - textW, h * 0.5 + fontSize * 0.5);
- c.lineTo((w + buttonWidth * 0.5) * trueW / minW + textW, h * 0.5 + fontSize * 0.5);
- c.stroke();
- }
- };
- mxCellRenderer.prototype.defaultShapes[mxShapeMockupLinkBar.prototype.cst.SHAPE_LINK_BAR] = mxShapeMockupLinkBar;
- //**********************************************************************************************************************************************************
- //Callout
- //**********************************************************************************************************************************************************
- /**
- * Extends mxShape.
- */
- function mxShapeMockupCallout(bounds, fill, stroke, strokewidth)
- {
- mxShape.call(this);
- this.bounds = bounds;
- this.fill = fill;
- this.stroke = stroke;
- this.strokewidth = (strokewidth != null) ? strokewidth : 1;
- };
- /**
- * Extends mxShape.
- */
- mxUtils.extend(mxShapeMockupCallout, mxShape);
- mxShapeMockupCallout.prototype.cst = {
- CALLOUT_TEXT : 'linkText',
- CALLOUT_DIR : 'callDir',
- CALLOUT_STYLE : 'callStyle',
- STYLE_LINE : 'line',
- STYLE_RECT : 'rect',
- STYLE_ROUNDRECT : 'roundRect',
- DIR_NW : 'NW',
- DIR_NE : 'NE',
- DIR_SE : 'SE',
- DIR_SW : 'SW',
- TEXT_SIZE : 'textSize',
- TEXT_COLOR : 'textColor',
- SHAPE_CALLOUT : 'mxgraph.mockup.text.callout'
- };
- /**
- * Function: paintVertexShape
- *
- * Paints the vertex shape.
- */
- mxShapeMockupCallout.prototype.paintVertexShape = function(c, x, y, w, h)
- {
- var calloutText = mxUtils.getValue(this.style, mxShapeMockupCallout.prototype.cst.CALLOUT_TEXT, 'Callout');
- var textSize = mxUtils.getValue(this.style, mxShapeMockupCallout.prototype.cst.TEXT_SIZE, '17');
- var textColor = mxUtils.getValue(this.style, mxShapeMockupCallout.prototype.cst.TEXT_COLOR, '#666666');
- var callStyle = mxUtils.getValue(this.style, mxShapeMockupCallout.prototype.cst.CALLOUT_STYLE, mxShapeMockupCallout.prototype.cst.STYLE_LINE);
- var callDir = mxUtils.getValue(this.style, mxShapeMockupCallout.prototype.cst.CALLOUT_DIR, mxShapeMockupCallout.prototype.cst.DIR_NW);
- var textWidth = mxUtils.getSizeForString(calloutText, textSize, mxConstants.DEFAULT_FONTFAMILY).width;
- textWidth = textWidth * 1.2;
- if (textWidth == 0)
- {
- textWidth = 70;
- }
- c.translate(x, y);
- c.setFontSize(textSize);
- c.setFontColor(textColor);
- var callH = textSize * 1.5;
- if (callDir === mxShapeMockupCallout.prototype.cst.DIR_NW)
- {
- if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_LINE)
- {
- c.begin();
- c.moveTo(0, callH);
- c.lineTo(textWidth, callH);
- c.lineTo(w, h);
- c.stroke();
- }
- else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_RECT)
- {
- c.rect(0,0, textWidth, callH);
- c.fillAndStroke();
- c.begin();
- c.moveTo(textWidth * 0.5, callH);
- c.lineTo(w, h);
- c.stroke();
- }
- else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_ROUNDRECT)
- {
- c.roundrect(0, 0, textWidth, callH, callH * 0.25, callH * 0.25);
- c.fillAndStroke();
- c.begin();
- c.moveTo(textWidth * 0.5, callH);
- c.lineTo(w, h);
- c.stroke();
- }
- c.text(textWidth * 0.5, callH * 0.5, 0, 0, calloutText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
- }
- else if (callDir === mxShapeMockupCallout.prototype.cst.DIR_NE)
- {
- if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_LINE)
- {
- c.begin();
- c.moveTo(w, callH);
- c.lineTo(w - textWidth, callH);
- c.lineTo(0, h);
- c.stroke();
- }
- else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_RECT)
- {
- c.rect(w - textWidth,0, textWidth, callH);
- c.fillAndStroke();
- c.begin();
- c.moveTo(w - textWidth * 0.5, callH);
- c.lineTo(0, h);
- c.stroke();
- }
- else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_ROUNDRECT)
- {
- c.roundrect(w - textWidth,0, textWidth, callH, callH * 0.25, callH * 0.25);
- c.fillAndStroke();
- c.begin();
- c.moveTo(w - textWidth * 0.5, callH);
- c.lineTo(0, h);
- c.stroke();
- }
- c.text(w - textWidth * 0.5, callH * 0.5, 0, 0, calloutText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
- }
- else if (callDir === mxShapeMockupCallout.prototype.cst.DIR_SE)
- {
- if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_LINE)
- {
- c.begin();
- c.moveTo(w, h);
- c.lineTo(w - textWidth, h);
- c.lineTo(0, 0);
- c.stroke();
- }
- else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_RECT)
- {
- c.rect(w - textWidth, h - callH, textWidth, callH);
- c.fillAndStroke();
- c.begin();
- c.moveTo(w - textWidth * 0.5, h - callH);
- c.lineTo(0, 0);
- c.stroke();
- }
- else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_ROUNDRECT)
- {
- c.roundrect(w - textWidth,h - callH, textWidth, callH, callH * 0.25, callH * 0.25);
- c.fillAndStroke();
- c.begin();
- c.moveTo(w - textWidth * 0.5, h - callH);
- c.lineTo(0, 0);
- c.stroke();
- }
- c.text(w - textWidth * 0.5, h - callH * 0.5, 0, 0, calloutText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
- }
- else if (callDir === mxShapeMockupCallout.prototype.cst.DIR_SW)
- {
- if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_LINE)
- {
- c.begin();
- c.moveTo(0, h);
- c.lineTo(textWidth, h);
- c.lineTo(w, 0);
- c.stroke();
- }
- else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_RECT)
- {
- c.rect(0, h - callH, textWidth, callH);
- c.fillAndStroke();
- c.begin();
- c.moveTo(textWidth * 0.5, h - callH);
- c.lineTo(w, 0);
- c.stroke();
- }
- else if (callStyle === mxShapeMockupCallout.prototype.cst.STYLE_ROUNDRECT)
- {
- c.roundrect(0, h - callH, textWidth, callH, callH * 0.25, callH * 0.25);
- c.fillAndStroke();
- c.begin();
- c.moveTo(textWidth * 0.5, h - callH);
- c.lineTo(w, 0);
- c.stroke();
- }
- c.text(textWidth * 0.5, h - callH * 0.5, 0, 0, calloutText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
- }
- };
- mxCellRenderer.prototype.defaultShapes[mxShapeMockupCallout.prototype.cst.SHAPE_CALLOUT] = mxShapeMockupCallout;
- //**********************************************************************************************************************************************************
- //Sticky Note
- //**********************************************************************************************************************************************************
- /**
- * Extends mxShape.
- */
- function mxShapeMockupStickyNote(bounds, fill, stroke, strokewidth)
- {
- mxShape.call(this);
- this.bounds = bounds;
- this.fill = fill;
- this.stroke = stroke;
- this.strokewidth = (strokewidth != null) ? strokewidth : 1;
- };
- /**
- * Extends mxShape.
- */
- mxUtils.extend(mxShapeMockupStickyNote, mxShape);
- mxShapeMockupStickyNote.prototype.cst = {
- MAIN_TEXT : 'mainText',
- TEXT_COLOR : 'textColor',
- TEXT_SIZE : 'textSize',
- SHAPE_STICKY_NOTE : 'mxgraph.mockup.text.stickyNote'
- };
- /**
- * Function: paintVertexShape
- *
- * Paints the vertex shape.
- */
- mxShapeMockupStickyNote.prototype.paintVertexShape = function(c, x, y, w, h)
- {
- c.translate(x, y);
- this.background(c, w, h);
- c.setShadow(false);
- this.foreground(c, w, h);
- };
- mxShapeMockupStickyNote.prototype.background = function(c, w, h)
- {
- c.setFillColor('#ffffcc');
- c.begin();
- c.moveTo(w * 0.03, h * 0.07);
- c.lineTo(w * 0.89, h * 0.06);
- c.arcTo(2.81 * w, 2.92 * h, 1, 0, 0, w * 0.99, h * 0.98);
- c.lineTo(w * 0.09, h * 0.99);
- c.arcTo(2.81 * w, 2.92 * h, 1, 0, 1, w * 0.03, h * 0.07);
- c.close();
- c.fill();
- };
- mxShapeMockupStickyNote.prototype.foreground = function(c, w, h)
- {
- var mainText = mxUtils.getValue(this.style, mxShapeMockupStickyNote.prototype.cst.MAIN_TEXT, 'Note line 1,Note line 2,Note line 3').toString().split(',');
- var fontColor = mxUtils.getValue(this.style, mxShapeMockupStickyNote.prototype.cst.TEXT_COLOR, '#666666').toString();
- var fontSize = mxUtils.getValue(this.style, mxShapeMockupStickyNote.prototype.cst.TEXT_SIZE, '17').toString();
- c.setFillColor('#ff3300');
- c.begin();
- c.moveTo(w * 0.28 , 0);
- c.lineTo(w * 0.59, 0);
- c.lineTo(w * 0.6, h * 0.12);
- c.lineTo(w * 0.28, h * 0.13);
- c.close();
- c.fill();
- c.setFontSize(fontSize);
- c.setFontColor(fontColor);
- var lineNum = mainText.length;
- var textH = lineNum * fontSize * 1.5;
- for (var i = 0; i < mainText.length; i++)
- {
- 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);
- }
- };
- mxCellRenderer.prototype.defaultShapes[mxShapeMockupStickyNote.prototype.cst.SHAPE_STICKY_NOTE] = mxShapeMockupStickyNote;
- //**********************************************************************************************************************************************************
- //Bulleted List
- //**********************************************************************************************************************************************************
- /**
- * Extends mxShape.
- */
- function mxShapeMockupBulletedList(bounds, fill, stroke, strokewidth)
- {
- mxShape.call(this);
- this.bounds = bounds;
- this.fill = fill;
- this.stroke = stroke;
- this.strokewidth = (strokewidth != null) ? strokewidth : 1;
- };
- /**
- * Extends mxShape.
- */
- mxUtils.extend(mxShapeMockupBulletedList, mxShape);
- mxShapeMockupBulletedList.prototype.cst = {
- MAIN_TEXT : 'mainText',
- TEXT_COLOR : 'textColor',
- TEXT_SIZE : 'textSize',
- BULLET_STYLE : 'bulletStyle',
- STYLE_HYPHEN : 'hyphen',
- STYLE_NUM : 'number',
- STYLE_DOT : 'dot',
- SHAPE_BULLETED_LIST : 'mxgraph.mockup.text.bulletedList'
- };
- /**
- * Function: paintVertexShape
- *
- * Paints the vertex shape.
- */
- mxShapeMockupBulletedList.prototype.paintVertexShape = function(c, x, y, w, h)
- {
- c.translate(x, y);
- this.background(c, w, h);
- c.setShadow(false);
- this.foreground(c, w, h);
- };
- mxShapeMockupBulletedList.prototype.background = function(c, w, h)
- {
- c.rect(0, 0, w, h);
- c.fillAndStroke();
- };
- mxShapeMockupBulletedList.prototype.foreground = function(c, w, h)
- {
- var mainText = mxUtils.getValue(this.style, mxShapeMockupBulletedList.prototype.cst.MAIN_TEXT, 'Note line 1,Note line 2,Note line 3').toString().split(',');
- var fontColor = mxUtils.getValue(this.style, mxShapeMockupBulletedList.prototype.cst.TEXT_COLOR, '#666666');
- var fontSize = mxUtils.getValue(this.style, mxShapeMockupBulletedList.prototype.cst.TEXT_SIZE, '17');
- var bulletStyle = mxUtils.getValue(this.style, mxShapeMockupBulletedList.prototype.cst.BULLET_STYLE, 'none');
- c.setFontColor(fontColor);
- c.setFontSize(fontSize);
- var bullet = '';
- for (var i = 0; i < mainText.length; i++)
- {
- var currText = '';
- if (bulletStyle === mxShapeMockupBulletedList.prototype.cst.STYLE_NUM)
- {
- currText = (i + 1) + ') ' + mainText[i];
- }
- else if (bulletStyle === mxShapeMockupBulletedList.prototype.cst.STYLE_HYPHEN)
- {
- currText = '- ' + mainText[i];
- }
- else if(bulletStyle === mxShapeMockupBulletedList.prototype.cst.STYLE_DOT)
- {
- currText = String.fromCharCode(8226) + ' ' + mainText[i];
- }
- else
- {
- currText = ' ' + mainText[i];
- }
- c.text(10, i * fontSize * 1.5 + fontSize * 0.75, 0, 0, currText, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
- }
- };
- mxCellRenderer.prototype.defaultShapes[mxShapeMockupBulletedList.prototype.cst.SHAPE_BULLETED_LIST] = mxShapeMockupBulletedList;
- //**********************************************************************************************************************************************************
- //Text Box
- //**********************************************************************************************************************************************************
- /**
- * Extends mxShape.
- */
- function mxShapeMockupTextBox(bounds, fill, stroke, strokewidth)
- {
- mxShape.call(this);
- this.bounds = bounds;
- this.fill = fill;
- this.stroke = stroke;
- this.strokewidth = (strokewidth != null) ? strokewidth : 1;
- };
- /**
- * Extends mxShape.
- */
- mxUtils.extend(mxShapeMockupTextBox, mxShape);
- mxShapeMockupTextBox.prototype.cst = {
- MAIN_TEXT : 'mainText',
- TEXT_COLOR : 'textColor',
- TEXT_SIZE : 'textSize',
- SHAPE_TEXT_BOX : 'mxgraph.mockup.text.textBox'
- };
- /**
- * Function: paintVertexShape
- *
- * Paints the vertex shape.
- */
- mxShapeMockupTextBox.prototype.paintVertexShape = function(c, x, y, w, h)
- {
- c.translate(x, y);
- this.background(c, w, h);
- c.setShadow(false);
- this.foreground(c, w, h);
- };
- mxShapeMockupTextBox.prototype.background = function(c, w, h)
- {
- c.rect(0, 0, w, h);
- c.fillAndStroke();
- };
- mxShapeMockupTextBox.prototype.foreground = function(c, w, h)
- {
- var mainText = mxUtils.getValue(this.style, mxShapeMockupTextBox.prototype.cst.MAIN_TEXT, 'Note line 1').toString().split(',');
- var fontColor = mxUtils.getValue(this.style, mxShapeMockupTextBox.prototype.cst.TEXT_COLOR, '#666666');
- var fontSize = mxUtils.getValue(this.style, mxShapeMockupTextBox.prototype.cst.TEXT_SIZE, '17');
- c.setFontColor(fontColor);
- c.setFontSize(fontSize);
- for (var i = 0; i < mainText.length; i++)
- {
- 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);
- }
- };
- mxCellRenderer.prototype.defaultShapes[mxShapeMockupTextBox.prototype.cst.SHAPE_TEXT_BOX] = mxShapeMockupTextBox;
- //**********************************************************************************************************************************************************
- //Captcha
- //**********************************************************************************************************************************************************
- /**
- * Extends mxShape.
- */
- function mxShapeMockupCaptcha(bounds, fill, stroke, strokewidth)
- {
- mxShape.call(this);
- this.bounds = bounds;
- this.fill = fill;
- this.stroke = stroke;
- this.strokewidth = (strokewidth != null) ? strokewidth : 1;
- };
- /**
- * Extends mxShape.
- */
- mxUtils.extend(mxShapeMockupCaptcha, mxShape);
- mxShapeMockupCaptcha.prototype.cst = {
- MAIN_TEXT : 'mainText',
- TEXT_COLOR : 'textColor',
- TEXT_SIZE : 'textSize',
- SHAPE_CAPTCHA : 'mxgraph.mockup.text.captcha'
- };
- /**
- * Function: paintVertexShape
- *
- * Paints the vertex shape.
- */
- mxShapeMockupCaptcha.prototype.paintVertexShape = function(c, x, y, w, h)
- {
- c.translate(x, y);
- this.background(c, w, h);
- c.setShadow(false);
- this.foreground(c, w, h);
- };
- mxShapeMockupCaptcha.prototype.background = function(c, w, h)
- {
- c.rect(0, 0, w, h);
- c.fillAndStroke();
- };
- mxShapeMockupCaptcha.prototype.foreground = function(c, w, h)
- {
- var mainText = mxUtils.getValue(this.style, mxShapeMockupCaptcha.prototype.cst.MAIN_TEXT, 'Note line 1');
- var fontColor = mxUtils.getValue(this.style, mxShapeMockupCaptcha.prototype.cst.TEXT_COLOR, '#666666');
- var fontSize = mxUtils.getValue(this.style, mxShapeMockupCaptcha.prototype.cst.TEXT_SIZE, '25');
- c.setFillColor('#88aaff');
- c.begin();
- c.moveTo(0, 0);
- c.lineTo(w * 0.35, 0);
- c.lineTo(w * 0.55, h * 0.85);
- c.lineTo(w * 0.4, h * 0.75);
- c.close();
- c.fill();
- c.begin();
- c.moveTo(w * 0.7, h * 0.1);
- c.lineTo(w * 0.95, h * 0.23);
- c.lineTo(w, h * 0.4);
- c.lineTo(w, h * 0.9);
- c.lineTo(w, h);
- c.lineTo(w * 0.8, h);
- c.close();
- c.fill();
- c.setFontColor(fontColor);
- c.setFontSize(fontSize);
- c.text(w * 0.5, h * 0.5, 0, 0, mainText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
- c.rect(0, 0, w, h);
- c.stroke();
- };
- mxCellRenderer.prototype.defaultShapes[mxShapeMockupCaptcha.prototype.cst.SHAPE_CAPTCHA] = mxShapeMockupCaptcha;
- //**********************************************************************************************************************************************************
- //Alphanumeric
- //**********************************************************************************************************************************************************
- /**
- * Extends mxShape.
- */
- function mxShapeMockupAlphanumeric(bounds, fill, stroke, strokewidth)
- {
- mxShape.call(this);
- this.bounds = bounds;
- this.fill = fill;
- this.stroke = stroke;
- this.strokewidth = (strokewidth != null) ? strokewidth : 1;
- };
- /**
- * Extends mxShape.
- */
- mxUtils.extend(mxShapeMockupAlphanumeric, mxShape);
- mxShapeMockupAlphanumeric.prototype.cst = {
- MAIN_TEXT : 'linkText',
- TEXT_SIZE : 'textSize',
- TEXT_COLOR : 'textColor',
- SHAPE_ALPHANUMERIC : 'mxgraph.mockup.text.alphanumeric'
- };
- /**
- * Function: paintVertexShape
- *
- * Paints the vertex shape.
- */
- mxShapeMockupAlphanumeric.prototype.paintVertexShape = function(c, x, y, w, h)
- {
- 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');
- var textSize = mxUtils.getValue(this.style, mxShapeMockupAlphanumeric.prototype.cst.TEXT_SIZE, '17');
- var textColor = mxUtils.getValue(this.style, mxShapeMockupAlphanumeric.prototype.cst.TEXT_COLOR, '#0000ff');
- c.translate(x, y);
- var width = mxUtils.getSizeForString(mainText, textSize, mxConstants.DEFAULT_FONTFAMILY).width;
- c.setStrokeColor(textColor);
- c.setFontSize(textSize);
- c.setFontColor(textColor);
- c.text(w * 0.5, h * 0.5, 0, 0, mainText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
- c.begin();
- c.moveTo(w * 0.5 - width * 0.5, (h + parseInt(textSize, 10)) * 0.5);
- c.lineTo(w * 0.5 + width * 0.5, (h + parseInt(textSize, 10)) * 0.5);
- c.stroke();
- };
- mxCellRenderer.prototype.defaultShapes[mxShapeMockupAlphanumeric.prototype.cst.SHAPE_ALPHANUMERIC] = mxShapeMockupAlphanumeric;
- //**********************************************************************************************************************************************************
- //Rounded rectangle (adjustable rounding)
- //**********************************************************************************************************************************************************
- /**
- * Extends mxShape.
- */
- function mxShapeMockupTextRRect(bounds, fill, stroke, strokewidth)
- {
- mxShape.call(this);
- this.bounds = bounds;
- this.fill = fill;
- this.stroke = stroke;
- this.strokewidth = (strokewidth != null) ? strokewidth : 1;
- };
- /**
- * Extends mxShape.
- */
- mxUtils.extend(mxShapeMockupTextRRect, mxShape);
- mxShapeMockupTextRRect.prototype.cst = {
- RRECT : 'mxgraph.mockup.text.rrect',
- R_SIZE : 'rSize'
- };
- /**
- * Function: paintVertexShape
- *
- * Paints the vertex shape.
- */
- mxShapeMockupTextRRect.prototype.paintVertexShape = function(c, x, y, w, h)
- {
- c.translate(x, y);
- var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupTextRRect.prototype.cst.R_SIZE, '10'));
- c.roundrect(0, 0, w, h, rSize);
- c.fillAndStroke();
- };
- mxCellRenderer.registerShape(mxShapeMockupTextRRect.prototype.cst.RRECT, mxShapeMockupTextRRect);
|