1/**2 * Copyright (c) 2006-2010, JGraph Holdings Ltd3 */45//**********************************************************************************************************************************************************6//Multiline Button7//**********************************************************************************************************************************************************8/**9 * Extends mxShape.10 */11function mxShapeMockupMultiButton(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(mxShapeMockupMultiButton, mxShape);2425mxShapeMockupMultiButton.prototype.cst = {26 MAIN_TEXT : 'mainText',27 SHAPE_MULTILINE_BUTTON : 'mxgraph.mockup.buttons.multiButton',28 SUB_TEXT : 'subText',29 TEXT_COLOR : 'textColor',30 TEXT_SIZE : 'textSize',31 BUTTON_STYLE : 'buttonStyle',32 ROUND : 'round',33 CHEVRON : 'chevron'34};3536mxShapeMockupMultiButton.prototype.customProperties = [37 {name: 'buttonStyle', dispName: 'Style', type: 'enum', defVal:'round',38 enumList: [{val: 'round', dispName: 'Round'}, {val: 'chevron', dispName: 'Chevron'}]39 }40];4142/**43 * Function: paintVertexShape44 * 45 * Paints the vertex shape.46 */47mxShapeMockupMultiButton.prototype.paintVertexShape = function(c, x, y, w, h)48{49 var mainText = mxUtils.getValue(this.style, mxShapeMockupMultiButton.prototype.cst.MAIN_TEXT, 'Main Text');50 var subText = mxUtils.getValue(this.style, mxShapeMockupMultiButton.prototype.cst.SUB_TEXT, 'Sub Text');51 var fontColor = mxUtils.getValue(this.style, mxShapeMockupMultiButton.prototype.cst.TEXT_COLOR, '#666666');52 var fontSize = mxUtils.getValue(this.style, mxShapeMockupMultiButton.prototype.cst.TEXT_SIZE, '17');53 c.translate(x, y);54 this.background(c, x, y, w, h);55 c.setShadow(false);56 c.setFontStyle(mxConstants.FONT_BOLD);57 this.mainText(c, x, y, w, h, mainText, fontSize, fontColor);58 this.subText(c, x, y, w, h, subText, fontSize / 1.4, fontColor);59};6061mxShapeMockupMultiButton.prototype.background = function(c, x, y, w, h)62{63 var buttonStyle = mxUtils.getValue(this.style, mxShapeMockupMultiButton.prototype.cst.BUTTON_STYLE, mxShapeMockupMultiButton.prototype.cst.ROUND).toString();64 var rSize = 10;65 c.begin();6667 if (buttonStyle === mxShapeMockupMultiButton.prototype.cst.ROUND)68 {69 c.moveTo(0, rSize);70 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);71 c.lineTo(w - rSize, 0);72 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);73 c.lineTo(w, h - rSize);74 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);75 c.lineTo(rSize, h);76 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);77 }78 else if (buttonStyle === mxShapeMockupMultiButton.prototype.cst.CHEVRON)79 {80 c.moveTo(0, h * 0.1);81 c.arcTo(w * 0.0372, h * 0.1111, 0, 0, 1, w * 0.0334, 0);82 c.lineTo(w * 0.768, 0);83 c.arcTo(w * 0.0722, h * 0.216, 0, 0, 1, w * 0.8014, h * 0.0399);84 c.lineTo(w * 0.99, h * 0.4585);85 c.arcTo(w * 0.09, h * 0.1, 0, 0, 1, w * 0.99, h * 0.5415);86 c.lineTo(w * 0.8014, h * 0.9568);87 c.arcTo(w * 0.0722, h * 0.216, 0, 0, 1, w * 0.768, h);88 c.lineTo(w * 0.0334, h);89 c.arcTo(w * 0.0372, h * 0.1111, 0, 0, 1, 0, h * 0.9);90 }9192 c.close(); 93 c.fillAndStroke();94};9596mxShapeMockupMultiButton.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor)97{98 c.begin();99 c.setFontSize(fontSize);100 c.setFontColor(fontColor);101 c.text(w * 0.5, h * 0.4, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);102};103104mxShapeMockupMultiButton.prototype.subText = function(c, x, y, w, h, text, fontSize, fontColor)105{106 c.begin();107 c.setFontSize(fontSize);108 c.text(w * 0.5, h * 0.7, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);109};110111mxCellRenderer.registerShape(mxShapeMockupMultiButton.prototype.cst.SHAPE_MULTILINE_BUTTON, mxShapeMockupMultiButton);112113//**********************************************************************************************************************************************************114//Button115//**********************************************************************************************************************************************************116/**117 * Extends mxShape.118 */119function mxShapeMockupButton(bounds, fill, stroke, strokewidth)120{121 mxShape.call(this);122 this.bounds = bounds;123 this.fill = fill;124 this.stroke = stroke;125 this.strokewidth = (strokewidth != null) ? strokewidth : 1;126};127128/**129 * Extends mxShape.130 */131mxUtils.extend(mxShapeMockupButton, mxShape);132133mxShapeMockupButton.prototype.cst = {134 MAIN_TEXT : 'mainText',135 SHAPE_BUTTON : 'mxgraph.mockup.buttons.button',136 TEXT_COLOR : 'textColor',137 TEXT_SIZE : 'textSize',138 BUTTON_STYLE : 'buttonStyle',139 ROUND : 'round',140 CHEVRON : 'chevron'141};142143mxShapeMockupButton.prototype.customProperties = [144 {name: 'buttonStyle', dispName: 'Style', type: 'enum', defVal:'round', 145 enumList: [{val: 'round', dispName: 'Round'}, {val: 'chevron', dispName: 'Chevron'}]146 }147];148149/**150 * Function: paintVertexShape151 * 152 * Paints the vertex shape.153 */154mxShapeMockupButton.prototype.paintVertexShape = function(c, x, y, w, h)155{156 var mainText = mxUtils.getValue(this.style, mxShapeMockupButton.prototype.cst.MAIN_TEXT, 'Main Text');157 var fontColor = mxUtils.getValue(this.style, mxShapeMockupButton.prototype.cst.TEXT_COLOR, '#666666').toString();158 var fontSize = mxUtils.getValue(this.style, mxShapeMockupButton.prototype.cst.TEXT_SIZE, '17').toString();159 c.translate(x, y);160 this.background(c, x, y, w, h);161 c.setShadow(false);162 this.mainText(c, x, y, w, h, mainText, fontSize, fontColor);163};164165mxShapeMockupButton.prototype.background = function(c, x, y, w, h)166{167 var buttonStyle = mxUtils.getValue(this.style, mxShapeMockupButton.prototype.cst.BUTTON_STYLE, mxShapeMockupButton.prototype.cst.ROUND).toString();168 var rSize = 10;169 c.begin();170171 if (buttonStyle === mxShapeMockupButton.prototype.cst.ROUND)172 {173 c.moveTo(0, rSize);174 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);175 c.lineTo(w - rSize, 0);176 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);177 c.lineTo(w, h - rSize);178 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);179 c.lineTo(rSize, h);180 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);181 }182 else if (buttonStyle === mxShapeMockupButton.prototype.cst.CHEVRON)183 {184 c.moveTo(0, h * 0.1);185 c.arcTo(w * 0.0372, h * 0.1111, 0, 0, 1, w * 0.0334, 0);186 c.lineTo(w * 0.768, 0);187 c.arcTo(w * 0.0722, h * 0.216, 0, 0, 1, w * 0.8014, h * 0.0399);188 c.lineTo(w * 0.99, h * 0.4585);189 c.arcTo(w * 0.09, h * 0.1, 0, 0, 1, w * 0.99, h * 0.5415);190 c.lineTo(w * 0.8014, h * 0.9568);191 c.arcTo(w * 0.0722, h * 0.216, 0, 0, 1, w * 0.768, h);192 c.lineTo(w * 0.0334, h);193 c.arcTo(w * 0.0372, h * 0.1111, 0, 0, 1, 0, h * 0.9);194 }195196 c.close(); 197 c.fillAndStroke();198};199200mxShapeMockupButton.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor)201{202 c.begin();203 c.setFontSize(fontSize);204 c.setFontColor(fontColor);205 c.setFontStyle(mxConstants.FONT_BOLD);206 c.text(w / 2, h / 2, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);207};208209mxCellRenderer.registerShape(mxShapeMockupButton.prototype.cst.SHAPE_BUTTON, mxShapeMockupButton);210211//**********************************************************************************************************************************************************212//Horizontal Button Bar213//**********************************************************************************************************************************************************214/**215 * Extends mxShape.216 */217function mxShapeMockupHorButtonBar(bounds, fill, stroke, strokewidth)218{219 mxShape.call(this);220 this.bounds = bounds;221 this.fill = fill;222 this.stroke = stroke;223 this.strokewidth = (strokewidth != null) ? strokewidth : 1;224};225226/**227 * Extends mxShape.228 */229mxUtils.extend(mxShapeMockupHorButtonBar, mxShape);230231mxShapeMockupHorButtonBar.prototype.cst = {232 MAIN_TEXT : 'mainText',233 SHAPE_HOR_BUTTON_BAR : 'mxgraph.mockup.buttons.horButtonBar',234 TEXT_COLOR : 'textColor',235 TEXT_COLOR2 : 'textColor2',236 STROKE_COLOR2 : 'strokeColor2',237 FILL_COLOR2 : 'fillColor2',238 SELECTED : '+', //must be 1 char239 TEXT_SIZE : 'textSize'240};241242/**243 * Function: paintVertexShape244 * 245 * Paints the vertex shape.246 */247mxShapeMockupHorButtonBar.prototype.paintVertexShape = function(c, x, y, w, h)248{249 var textStrings = mxUtils.getValue(this.style, mxShapeMockupHorButtonBar.prototype.cst.MAIN_TEXT, '+Button 1, Button 2, Button 3').toString().split(',');250 var fontColor = mxUtils.getValue(this.style, mxShapeMockupHorButtonBar.prototype.cst.TEXT_COLOR, '#666666');251 var selectedFontColor = mxUtils.getValue(this.style, mxShapeMockupHorButtonBar.prototype.cst.TEXT_COLOR2, '#ffffff');252 var fontSize = mxUtils.getValue(this.style, mxShapeMockupHorButtonBar.prototype.cst.TEXT_SIZE, '17').toString();253 var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');254 var separatorColor = mxUtils.getValue(this.style, mxShapeMockupHorButtonBar.prototype.cst.STROKE_COLOR2, '#c4c4c4');255 var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');256 var selectedFillColor = mxUtils.getValue(this.style, mxShapeMockupHorButtonBar.prototype.cst.FILL_COLOR2, '#008cff');257 var buttonNum = textStrings.length;258 var buttonWidths = new Array(buttonNum);259 var buttonTotalWidth = 0;260 var selectedButton = -1;261 var rSize = 10; //rounding size262 var labelOffset = 5;263264 for (var i = 0; i < buttonNum; i++)265 {266 var buttonText = textStrings[i];267268 if(buttonText.charAt(0) === mxShapeMockupHorButtonBar.prototype.cst.SELECTED)269 {270 buttonText = textStrings[i].substring(1);271 selectedButton = i;272 }273274 buttonWidths[i] = mxUtils.getSizeForString(buttonText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;275276 buttonTotalWidth += buttonWidths[i];277 }278279 var trueH = Math.max(h, fontSize * 1.5, 20);280 var minW = 2 * labelOffset * buttonNum + buttonTotalWidth;281 var trueW = Math.max(w, minW);282283 c.translate(x, y);284 this.background(c, trueW, trueH, rSize, buttonNum, buttonWidths, labelOffset, minW, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton);285 c.setShadow(false);286287 c.setFontStyle(mxConstants.FONT_BOLD);288 var currWidth = 0;289290 for (var i = 0; i < buttonNum; i++)291 {292 if (i === selectedButton)293 {294 c.setFontColor(selectedFontColor);295 }296 else297 {298 c.setFontColor(fontColor);299 }300301 currWidth = currWidth + labelOffset;302 this.buttonText(c, currWidth, trueH, textStrings[i], buttonWidths[i], fontSize, minW, trueW);303 currWidth = currWidth + buttonWidths[i] + labelOffset;304 }305};306307mxShapeMockupHorButtonBar.prototype.background = function(c, w, h, rSize, buttonNum, buttonWidths, labelOffset, minW, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton)308{309 c.begin();310311 //draw the frame312 c.setStrokeColor(frameColor);313 c.setFillColor(bgColor);314 c.moveTo(0, rSize);315 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);316 c.lineTo(w - rSize, 0);317 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);318 c.lineTo(w, h - rSize);319 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);320 c.lineTo(rSize, h);321 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);322 c.close();323 c.fillAndStroke();324325 //draw the button separators326 c.setStrokeColor(separatorColor);327 c.begin();328 for (var i = 1; i < buttonNum; i++)329 {330 if (i !== selectedButton && i !== (selectedButton + 1))331 {332 var currWidth = 0;333334 for (var j = 0; j < i; j++)335 {336 currWidth += buttonWidths[j] + 2 * labelOffset;337 }338339 currWidth = currWidth * w / minW;340 c.moveTo(currWidth, 0);341 c.lineTo(currWidth, h);342 }343 }344345 c.stroke();346347 //draw the selected button348 var buttonLeft = 0;349 c.setFillColor(selectedFillColor);350351 for (var i = 0; i < selectedButton; i++)352 {353 buttonLeft += buttonWidths[i] + 2 * labelOffset;354 }355356 buttonLeft = buttonLeft * w / minW;357 var buttonRight = (buttonWidths[selectedButton] + 2 * labelOffset) * w / minW;358 buttonRight += buttonLeft;359360 if (selectedButton === 0)361 {362 c.begin();363 // we draw a path for the first button364 c.moveTo(0, rSize);365 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);366 c.lineTo(buttonRight, 0);367 c.lineTo(buttonRight, h);368 c.lineTo(rSize, h);369 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);370 c.close();371 c.fill();372 }373 else if (selectedButton === buttonNum - 1)374 {375 c.begin();376 // we draw a path for the last button377 c.moveTo(buttonLeft, 0);378 c.lineTo(buttonRight - rSize, 0);379 c.arcTo(rSize, rSize, 0, 0, 1, buttonRight, rSize);380 c.lineTo(buttonRight, h - rSize);381 c.arcTo(rSize, rSize, 0, 0, 1, buttonRight - rSize, h);382 c.lineTo(buttonLeft, h);383 c.close();384 c.fill();385 }386 else if (selectedButton !== -1)387 {388 c.begin();389 // we draw a path rectangle for one of the buttons in the middle390 c.moveTo(buttonLeft, 0);391 c.lineTo(buttonRight, 0);392 c.lineTo(buttonRight, h);393 c.lineTo(buttonLeft, h);394 c.close();395 c.fill();396 }397398 //draw the frame again, to achieve a nicer effect399 c.setStrokeColor(frameColor);400 c.setFillColor(bgColor);401 c.begin();402 c.moveTo(0, rSize);403 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);404 c.lineTo(w - rSize, 0);405 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);406 c.lineTo(w, h - rSize);407 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);408 c.lineTo(rSize, h);409 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);410 c.close();411 c.stroke();412};413414mxShapeMockupHorButtonBar.prototype.buttonText = function(c, w, h, textString, buttonWidth, fontSize, minW, trueW)415{416 if(textString.charAt(0) === mxShapeMockupHorButtonBar.prototype.cst.SELECTED)417 {418 textString = textString.substring(1);419 }420421 c.begin();422 c.setFontSize(fontSize);423 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);424};425426mxCellRenderer.registerShape(mxShapeMockupHorButtonBar.prototype.cst.SHAPE_HOR_BUTTON_BAR, mxShapeMockupHorButtonBar);427428//**********************************************************************************************************************************************************429//Vertical Button Bar430//**********************************************************************************************************************************************************431/**432 * Extends mxShape.433 */434function mxShapeMockupVerButtonBar(bounds, fill, stroke, strokewidth)435{436 mxShape.call(this);437 this.bounds = bounds;438 this.fill = fill;439 this.stroke = stroke;440 this.strokewidth = (strokewidth != null) ? strokewidth : 1;441};442443/**444 * Extends mxShape.445 */446mxUtils.extend(mxShapeMockupVerButtonBar, mxShape);447448mxShapeMockupVerButtonBar.prototype.cst = {449 MAIN_TEXT : 'mainText',450 SHAPE_VER_BUTTON_BAR : 'mxgraph.mockup.buttons.verButtonBar',451 TEXT_COLOR : 'textColor',452 TEXT_COLOR2 : 'textColor2',453 STROKE_COLOR2 : 'strokeColor2',454 FILL_COLOR2 : 'fillColor2',455 SELECTED : '+', //must be 1 char456 TEXT_SIZE : 'textSize'457};458459/**460 * Function: paintVertexShape461 * 462 * Paints the vertex shape.463 */464mxShapeMockupVerButtonBar.prototype.paintVertexShape = function(c, x, y, w, h)465{466 var textStrings = mxUtils.getValue(this.style, mxShapeMockupVerButtonBar.prototype.cst.MAIN_TEXT, '+Button 1, Button 2, Button 3').toString().split(',');467 var fontColor = mxUtils.getValue(this.style, mxShapeMockupVerButtonBar.prototype.cst.TEXT_COLOR, '#666666');468 var selectedFontColor = mxUtils.getValue(this.style, mxShapeMockupVerButtonBar.prototype.cst.TEXT_COLOR2, '#ffffff');469 var fontSize = mxUtils.getValue(this.style, mxShapeMockupVerButtonBar.prototype.cst.TEXT_SIZE, '17').toString();470 var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');471 var separatorColor = mxUtils.getValue(this.style, mxShapeMockupVerButtonBar.prototype.cst.STROKE_COLOR2, '#c4c4c4');472 var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');473 var selectedFillColor = mxUtils.getValue(this.style, mxShapeMockupVerButtonBar.prototype.cst.FILL_COLOR2, '#008cff');474 var buttonNum = textStrings.length;475 var maxButtonWidth = 0;476 var selectedButton = -1;477 var rSize = 10; //rounding size478 var labelOffset = 5;479480 for (var i = 0; i < buttonNum; i++)481 {482 var buttonText = textStrings[i];483484 if(buttonText.charAt(0) === mxShapeMockupVerButtonBar.prototype.cst.SELECTED)485 {486 buttonText = textStrings[i].substring(1);487 selectedButton = i;488 }489490 var currWidth = mxUtils.getSizeForString(buttonText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;491492 if (currWidth > maxButtonWidth)493 {494 maxButtonWidth = currWidth;495 }496 }497498 var minButtonHeight = fontSize * 1.5;499 var minH = buttonNum * minButtonHeight;500 var trueH = Math.max(h, minH);501 var minW = 2 * labelOffset + maxButtonWidth;502 var trueW = Math.max(w, minW);503504 c.translate(x, y);505506 this.background(c, trueW, trueH, rSize, buttonNum, labelOffset, buttonNum * minButtonHeight, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton, minButtonHeight);507 c.setShadow(false);508509 var currWidth = 0;510 c.setFontStyle(mxConstants.FONT_BOLD);511512 for (var i = 0; i < buttonNum; i++)513 {514 if (i === selectedButton)515 {516 c.setFontColor(selectedFontColor);517 }518 else519 {520 c.setFontColor(fontColor);521 }522523 currWidth = currWidth + labelOffset;524 var currHeight = (i * minButtonHeight + minButtonHeight * 0.5) * trueH / minH;525 this.buttonText(c, trueW, currHeight, textStrings[i], fontSize);526 }527};528529mxShapeMockupVerButtonBar.prototype.background = function(c, w, h, rSize, buttonNum, labelOffset, minH, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton, minButtonHeight)530{531 c.begin();532533 //draw the frame534 c.setStrokeColor(frameColor);535 c.setFillColor(bgColor);536 c.moveTo(0, rSize);537 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);538 c.lineTo(w - rSize, 0);539 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);540 c.lineTo(w, h - rSize);541 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);542 c.lineTo(rSize, h);543 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);544 c.close();545 c.fillAndStroke();546547 //draw the button separators548 c.setStrokeColor(separatorColor);549 c.begin();550551 for (var i = 1; i < buttonNum; i++)552 {553 if (i !== selectedButton && i !== (selectedButton + 1))554 {555 var currHeight = i * minButtonHeight * h / minH;556557 c.moveTo(0, currHeight);558 c.lineTo(w, currHeight);559 }560 }561562 c.stroke();563564 //draw the selected button565 c.setFillColor(selectedFillColor);566567 if (selectedButton === 0)568 {569 // we draw a path for the first button570 c.begin();571 var buttonBottom = minButtonHeight * h / minH;572 c.moveTo(0, rSize);573 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);574 c.lineTo(w - rSize, 0);575 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);576 c.lineTo(w, buttonBottom);577 c.lineTo(0, buttonBottom);578 c.close();579 c.fill();580 }581 else if (selectedButton === buttonNum - 1)582 {583 // we draw a path for the last button584 c.begin();585 var buttonTop = h - minButtonHeight * h / minH;586 c.moveTo(0, buttonTop);587 c.lineTo(w, buttonTop);588 c.lineTo(w, h - rSize);589 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);590 c.lineTo(rSize, h);591 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);592 c.close();593 c.fill();594 }595 else if (selectedButton !== -1)596 {597 // we draw a path rectangle for one of the buttons in the middle598 c.begin();599 var buttonTop = minButtonHeight * selectedButton * h / minH;600 var buttonBottom = minButtonHeight * (selectedButton + 1) * h / minH;601 c.moveTo(0, buttonTop);602 c.lineTo(w, buttonTop);603 c.lineTo(w, buttonBottom);604 c.lineTo(0, buttonBottom);605 c.close();606 c.fill();607 }608609// //draw the frame again, to achieve a nicer effect610 c.begin();611 c.setStrokeColor(frameColor);612 c.setFillColor(bgColor);613 c.moveTo(0, rSize);614 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);615 c.lineTo(w - rSize, 0);616 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);617 c.lineTo(w, h - rSize);618 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);619 c.lineTo(rSize, h);620 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);621 c.close();622 c.stroke();623};624625mxShapeMockupVerButtonBar.prototype.buttonText = function(c, w, h, textString, fontSize)626{627 if(textString.charAt(0) === mxShapeMockupVerButtonBar.prototype.cst.SELECTED)628 {629 textString = textString.substring(1);630 }631632 c.begin();633 c.setFontSize(fontSize);634 c.text((w * 0.5), h, 0, 0, textString, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);635};636637mxCellRenderer.registerShape(mxShapeMockupVerButtonBar.prototype.cst.SHAPE_VER_BUTTON_BAR, mxShapeMockupVerButtonBar);638639//**********************************************************************************************************************************************************640//On-Off Button641//**********************************************************************************************************************************************************642/**643 * Extends mxShape.644 */645function mxShapeMockupOnOffButton(bounds, fill, stroke, strokewidth)646{647 mxShape.call(this);648 this.bounds = bounds;649 this.fill = fill;650 this.stroke = stroke;651 this.strokewidth = (strokewidth != null) ? strokewidth : 1;652};653654/**655 * Extends mxShape.656 */657mxUtils.extend(mxShapeMockupOnOffButton, mxShape);658659mxShapeMockupOnOffButton.prototype.cst = {660 SHAPE_ON_OFF_BUTTON : 'mxgraph.mockup.buttons.onOffButton',661 BUTTON_STATE : 'buttonState',662 STATE_ON : 'on',663 STATE_OFF : 'off',664 FILL_COLOR2 : 'fillColor2',665 MAIN_TEXT : 'mainText',666 TEXT_COLOR : 'textColor',667 TEXT_SIZE : 'textSize'668};669670mxShapeMockupOnOffButton.prototype.customProperties = [671 {name: 'buttonState', dispName: 'Button State', type: 'enum',672 enumList: [{val: 'on', dispName: 'On'}, {val: 'off', dispName: 'Off'}]673 }674];675676/**677 * Function: paintVertexShape678 * 679 * Paints the vertex shape.680 */681mxShapeMockupOnOffButton.prototype.paintVertexShape = function(c, x, y, w, h)682{683 c.translate(x, y);684 w = Math.max(w, 10);685 h = Math.max(h, 10);686687 this.background(c, x, y, w, h);688 c.setShadow(false);689 this.foreground(c, x, y, w, h);690};691692mxShapeMockupOnOffButton.prototype.background = function(c, x, y, w, h)693{694 c.roundrect(0, 0, w, h, 10, 10);695 c.fillAndStroke();696697};698699mxShapeMockupOnOffButton.prototype.foreground = function(c, x, y, w, h)700{701 var state = mxUtils.getValue(this.style, mxShapeMockupOnOffButton.prototype.cst.BUTTON_STATE, mxShapeMockupOnOffButton.prototype.cst.STATE_ON);702 var fillColor2 = mxUtils.getValue(this.style, mxShapeMockupOnOffButton.prototype.cst.FILL_COLOR2, '#008cff');703 var textColor = mxUtils.getValue(this.style, mxShapeMockupOnOffButton.prototype.cst.TEXT_COLOR, '#ffffff,#999999').toString().split(',');704 var mainText = mxUtils.getValue(this.style, mxShapeMockupOnOffButton.prototype.cst.MAIN_TEXT, 'ON,OFF').toString().split(',');705 var textSize = mxUtils.getValue(this.style, mxShapeMockupOnOffButton.prototype.cst.TEXT_SIZE, '17');706707 if (state === mxShapeMockupOnOffButton.prototype.cst.STATE_ON)708 {709 c.setFillColor(fillColor2);710 c.setFontColor(textColor[0]);711 c.roundrect(0, 0, w * 0.75, h, 10, 10);712 }713 else714 {715 c.setFontColor(textColor[1]);716 c.roundrect(w * 0.25, 0, w * 0.75, h, 10, 10);717 }718719 c.fillAndStroke();720 c.setFontSize(textSize);721 c.setFontStyle(mxConstants.FONT_BOLD);722723 if(state === mxShapeMockupOnOffButton.prototype.cst.STATE_ON)724 {725 c.text(w * 0.375, h * 0.5, 0, 0, mainText[0], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);726 }727 else if (state === mxShapeMockupOnOffButton.prototype.cst.STATE_OFF)728 {729 c.text(w * 0.625, h * 0.5, 0, 0, mainText[1], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);730 }731};732733mxCellRenderer.registerShape(mxShapeMockupOnOffButton.prototype.cst.SHAPE_ON_OFF_BUTTON, mxShapeMockupOnOffButton);734735//**********************************************************************************************************************************************************736//Rounded rectangle (adjustable rounding)737//**********************************************************************************************************************************************************738/**739* Extends mxShape.740*/741function mxShapeMockupRRect(bounds, fill, stroke, strokewidth)742{743 mxShape.call(this);744 this.bounds = bounds;745 this.fill = fill;746 this.stroke = stroke;747 this.strokewidth = (strokewidth != null) ? strokewidth : 1;748};749750/**751* Extends mxShape.752*/753mxUtils.extend(mxShapeMockupRRect, mxShape);754755mxShapeMockupRRect.prototype.cst = {756 RRECT : 'mxgraph.mockup.rrect',757 R_SIZE : 'rSize'758};759760mxShapeMockupRRect.prototype.customProperties = [761 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10}762];763764/**765* Function: paintVertexShape766* 767* Paints the vertex shape.768*/769mxShapeMockupRRect.prototype.paintVertexShape = function(c, x, y, w, h)770{771 c.translate(x, y);772773 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupRRect.prototype.cst.R_SIZE, '10'));774 c.roundrect(0, 0, w, h, rSize);775 c.fillAndStroke();776};777778mxCellRenderer.registerShape(mxShapeMockupRRect.prototype.cst.RRECT, mxShapeMockupRRect);779780//**********************************************************************************************************************************************************781//Anchor (a dummy shape without visuals used for anchoring)782//**********************************************************************************************************************************************************783/**784* Extends mxShape.785*/786function mxShapeMockupAnchor(bounds, fill, stroke, strokewidth)787{788 mxShape.call(this);789 this.bounds = bounds;790};791792/**793* Extends mxShape.794*/795mxUtils.extend(mxShapeMockupAnchor, mxShape);796797mxShapeMockupAnchor.prototype.cst = {798 ANCHOR : 'mxgraph.mockup.anchor'799};800801mxShapeMockupAnchor.prototype.customProperties = [802 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10}803];804805/**806* Function: paintVertexShape807* 808* Paints the vertex shape.809*/810mxShapeMockupAnchor.prototype.paintVertexShape = function(c, x, y, w, h)811{812};813814mxCellRenderer.registerShape(mxShapeMockupAnchor.prototype.cst.ANCHOR, mxShapeMockupAnchor);815816//**********************************************************************************************************************************************************817//Top Button818//**********************************************************************************************************************************************************819/**820* Extends mxShape.821*/822function mxShapeMockupTopButton(bounds, fill, stroke, strokewidth)823{824 mxShape.call(this);825 this.bounds = bounds;826 this.fill = fill;827 this.stroke = stroke;828 this.strokewidth = (strokewidth != null) ? strokewidth : 1;829};830831/**832* Extends mxShape.833*/834mxUtils.extend(mxShapeMockupTopButton, mxShape);835836mxShapeMockupTopButton.prototype.cst = {837 TOP_BUTTON : 'mxgraph.mockup.topButton',838 R_SIZE : 'rSize'839};840841mxShapeMockupTopButton.prototype.customProperties = [842 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10}843];844845/**846* Function: paintVertexShape847* 848* Paints the vertex shape.849*/850mxShapeMockupTopButton.prototype.paintVertexShape = function(c, x, y, w, h)851{852 c.translate(x, y);853854 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupTopButton.prototype.cst.R_SIZE, '10'));855856 c.begin();857 c.moveTo(0, rSize);858 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);859 c.lineTo(w - rSize, 0);860 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);861 c.lineTo(w, h);862 c.lineTo(0, h);863 c.close();864 c.fillAndStroke();865};866867mxCellRenderer.registerShape(mxShapeMockupTopButton.prototype.cst.TOP_BUTTON, mxShapeMockupTopButton);868869//**********************************************************************************************************************************************************870//Bottom Button871//**********************************************************************************************************************************************************872/**873* Extends mxShape.874*/875function mxShapeMockupBottomButton(bounds, fill, stroke, strokewidth)876{877 mxShape.call(this);878 this.bounds = bounds;879 this.fill = fill;880 this.stroke = stroke;881 this.strokewidth = (strokewidth != null) ? strokewidth : 1;882};883884/**885* Extends mxShape.886*/887mxUtils.extend(mxShapeMockupBottomButton, mxShape);888889mxShapeMockupBottomButton.prototype.cst = {890 BOTTOM_BUTTON : 'mxgraph.mockup.bottomButton',891 R_SIZE : 'rSize'892};893894mxShapeMockupBottomButton.prototype.customProperties = [895 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10}896];897898/**899* Function: paintVertexShape900* 901* Paints the vertex shape.902*/903mxShapeMockupBottomButton.prototype.paintVertexShape = function(c, x, y, w, h)904{905 c.translate(x, y);906907 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupBottomButton.prototype.cst.R_SIZE, '10'));908909 c.begin();910 c.moveTo(0, 0);911 c.lineTo(w, 0);912 c.lineTo(w, h - rSize);913 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);914 c.lineTo(rSize, h);915 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);916 c.close();917 c.fillAndStroke();918};919920mxCellRenderer.registerShape(mxShapeMockupBottomButton.prototype.cst.BOTTOM_BUTTON, mxShapeMockupBottomButton);921922//**********************************************************************************************************************************************************923//Right Button924//**********************************************************************************************************************************************************925/**926* Extends mxShape.927*/928function mxShapeMockupRightButton(bounds, fill, stroke, strokewidth)929{930 mxShape.call(this);931 this.bounds = bounds;932 this.fill = fill;933 this.stroke = stroke;934 this.strokewidth = (strokewidth != null) ? strokewidth : 1;935};936937/**938* Extends mxShape.939*/940mxUtils.extend(mxShapeMockupRightButton, mxShape);941942mxShapeMockupRightButton.prototype.cst = {943 RIGHT_BUTTON : 'mxgraph.mockup.rightButton',944 R_SIZE : 'rSize'945};946947mxShapeMockupRightButton.prototype.customProperties = [948 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10}949];950951/**952* Function: paintVertexShape953* 954* Paints the vertex shape.955*/956mxShapeMockupRightButton.prototype.paintVertexShape = function(c, x, y, w, h)957{958 c.translate(x, y);959960 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupRightButton.prototype.cst.R_SIZE, '10'));961962 c.begin();963 c.moveTo(0, 0);964 c.lineTo(w - rSize, 0);965 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);966 c.lineTo(w, h - rSize);967 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);968 c.lineTo(0, h);969 c.close();970 c.fillAndStroke();971};972973mxCellRenderer.registerShape(mxShapeMockupRightButton.prototype.cst.RIGHT_BUTTON, mxShapeMockupRightButton);974975//**********************************************************************************************************************************************************976//Left Button977//**********************************************************************************************************************************************************978/**979* Extends mxShape.980*/981function mxShapeMockupLeftButton(bounds, fill, stroke, strokewidth)982{983 mxShape.call(this);984 this.bounds = bounds;985 this.fill = fill;986 this.stroke = stroke;987 this.strokewidth = (strokewidth != null) ? strokewidth : 1;988};989990/**991* Extends mxShape.992*/993mxUtils.extend(mxShapeMockupLeftButton, mxShape);994995mxShapeMockupLeftButton.prototype.cst = {996 LEFT_BUTTON : 'mxgraph.mockup.leftButton',997 R_SIZE : 'rSize'998};9991000mxShapeMockupLeftButton.prototype.customProperties = [1001 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10}1002];10031004/**1005* Function: paintVertexShape1006* 1007* Paints the vertex shape.1008*/1009mxShapeMockupLeftButton.prototype.paintVertexShape = function(c, x, y, w, h)1010{1011 c.translate(x, y);10121013 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupLeftButton.prototype.cst.R_SIZE, '10'));10141015 c.begin();1016 c.moveTo(w, 0);1017 c.lineTo(w, h);1018 c.lineTo(rSize, h);1019 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);1020 c.lineTo(0, rSize);1021 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);1022 c.close();1023 c.fillAndStroke();1024};10251026mxCellRenderer.registerShape(mxShapeMockupLeftButton.prototype.cst.LEFT_BUTTON, mxShapeMockupLeftButton);1027