1/**2 * Copyright (c) 2006-2010, JGraph Holdings Ltd3 */45//**********************************************************************************************************************************************************6//Video Player7//**********************************************************************************************************************************************************8/**9 * Extends mxShape.10 */11function mxShapeMockupVideoPlayer(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 this.barPos = 20;19 this.barHeight = 30;20};2122/**23 * Extends mxShape.24 */25mxUtils.extend(mxShapeMockupVideoPlayer, mxShape);2627mxShapeMockupVideoPlayer.prototype.cst = {28 FILL_COLOR2 : 'fillColor2',29 TEXT_COLOR : 'textColor',30 STROKE_COLOR2 : 'strokeColor2',31 STROKE_COLOR3 : 'strokeColor3',32 SHAPE_VIDEO_PLAYER : 'mxgraph.mockup.containers.videoPlayer',33 BAR_POS : 'barPos',34 BAR_HEIGHT : 'barHeight'35};3637mxShapeMockupVideoPlayer.prototype.customProperties = [38 {name: 'fillColor2', dispName: 'Fill2 Color', type: 'color', primary:true},39 {name: 'textColor', dispName: 'Text Color', type: 'color', primary:true},40 {name: 'strokeColor2', dispName: 'Stroke2 Color', type: 'color', primary:true},41 {name: 'strokeColor3', dispName: 'Stroke3 Color', type: 'color', primary:true},42 {name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, max:100, defVal:20},43 {name: 'barHeight', dispName: 'Video Bar Height', type: 'float', min:0, defVal:30} 44];4546/**47 * Function: paintVertexShape48 * 49 * Paints the vertex shape.50 */51mxShapeMockupVideoPlayer.prototype.paintVertexShape = function(c, x, y, w, h)52{53 var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');54 var buttonColor = mxUtils.getValue(this.style, mxShapeMockupVideoPlayer.prototype.cst.FILL_COLOR2, '#c4c4c4');55 var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');56 var filledColor = mxUtils.getValue(this.style, mxShapeMockupVideoPlayer.prototype.cst.STROKE_COLOR2, '#008cff');57 var emptyColor = mxUtils.getValue(this.style, mxShapeMockupVideoPlayer.prototype.cst.STROKE_COLOR3, '#c4c4c4');58 var barHeight = mxUtils.getValue(this.style, mxShapeMockupVideoPlayer.prototype.cst.BAR_HEIGHT, '30');5960 w = Math.max(w, 5 * barHeight);61 h = Math.max(h, barHeight + 10);6263 c.translate(x, y);64 this.background(c, x, y, w, h, bgColor, frameColor);65 c.setShadow(false);66 this.otherShapes(c, x, y, w, h, buttonColor, frameColor, filledColor, emptyColor, barHeight);67};6869mxShapeMockupVideoPlayer.prototype.background = function(c, x, y, w, h, bgColor, frameColor)70{71 c.setFillColor(bgColor);72 c.setStrokeColor(frameColor);73 c.begin();74 c.moveTo(0, 0);75 c.lineTo(w, 0);76 c.lineTo(w, h);77 c.lineTo(0, h);78 c.close(); 79 c.fillAndStroke();80};8182mxShapeMockupVideoPlayer.prototype.otherShapes = function(c, x, y, w, h, buttonColor, frameColor, filledColor, emptyColor, barHeight)83{84 var barPos = mxUtils.getValue(this.style, mxShapeMockupVideoPlayer.prototype.cst.BAR_POS, '20');85 barPos = Math.max(0, barPos);86 barPos = Math.min(100, barPos);8788 var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1');89 var buttonR = 8;90 var barY = h - barHeight;9192 var barMin = buttonR;93 var barMax = w - buttonR;94 var barRange = barMax - barMin;95 var realBarPos = barRange * barPos / 100;96 var barEnd = barMin + realBarPos;9798 //progress bar99 c.setStrokeColor(filledColor);100 c.begin();101 c.moveTo(0, barY);102 c.lineTo(barEnd, barY);103 c.stroke();104 c.setStrokeColor(emptyColor);105 c.begin();106 c.moveTo(barEnd, barY);107 c.lineTo(w, barY);108 c.stroke();109110 //progress bar button111 c.setStrokeColor(frameColor);112 c.begin();113 c.ellipse(barEnd - buttonR, barY - buttonR, 2 * buttonR, 2 * buttonR);114 c.fillAndStroke();115116 c.begin();117 c.setStrokeWidth(strokeWidth / 2);118 c.ellipse(barEnd - buttonR * 0.5, barY - buttonR * 0.5, buttonR, buttonR);119 c.fillAndStroke();120 c.setStrokeWidth(strokeWidth);121122 var iconSize = barHeight * 0.3;123 var iconY = h - (barHeight + iconSize) * 0.5;124 var iconX = barHeight * 0.3;125 c.setFillColor(buttonColor);126 c.setStrokeColor(buttonColor);127128 //play icon129 c.begin();130 c.moveTo(iconX, iconY);131 c.lineTo(iconX + iconSize, iconY + iconSize * 0.5);132 c.lineTo(iconX, iconY + iconSize);133 c.close();134 c.fillAndStroke();135136 //volume icon137 var speakerX = barHeight;138 var speakerY = h - barHeight;139 c.moveTo(speakerX + barHeight * 0.05, speakerY + barHeight * 0.4);140 c.lineTo(speakerX + barHeight * 0.15, speakerY + barHeight * 0.4);141 c.lineTo(speakerX + barHeight * 0.3, speakerY + barHeight * 0.25);142 c.lineTo(speakerX + barHeight * 0.3, speakerY + barHeight * 0.75);143 c.lineTo(speakerX + barHeight * 0.15, speakerY + barHeight * 0.6);144 c.lineTo(speakerX + barHeight * 0.05, speakerY + barHeight * 0.6);145 c.close();146 c.fillAndStroke();147148 c.begin();149 c.moveTo(speakerX + barHeight * 0.4, speakerY + barHeight * 0.35);150 c.arcTo(barHeight * 0.2, barHeight * 0.3, 0, 0, 1, speakerX + barHeight * 0.4, speakerY + barHeight * 0.65);151 c.moveTo(speakerX + barHeight * 0.425, speakerY + barHeight * 0.25);152 c.arcTo(barHeight * 0.225, barHeight * 0.35, 0, 0, 1, speakerX + barHeight * 0.425, speakerY + barHeight * 0.75);153 c.stroke();154155 //fullscreen button156 var screenX = w - barHeight * 1.3;157 c.begin();158 c.moveTo(screenX + barHeight * 0.1, speakerY + barHeight * 0.4);159 c.lineTo(screenX + barHeight * 0.1, speakerY + barHeight * 0.3);160 c.lineTo(screenX + barHeight * 0.25, speakerY + barHeight * 0.3);161162 c.moveTo(screenX + barHeight * 0.1, speakerY + barHeight * 0.6);163 c.lineTo(screenX + barHeight * 0.1, speakerY + barHeight * 0.7);164 c.lineTo(screenX + barHeight * 0.25, speakerY + barHeight * 0.7);165166 c.moveTo(screenX + barHeight * 0.9, speakerY + barHeight * 0.4);167 c.lineTo(screenX + barHeight * 0.9, speakerY + barHeight * 0.3);168 c.lineTo(screenX + barHeight * 0.75, speakerY + barHeight * 0.3);169170 c.moveTo(screenX + barHeight * 0.9, speakerY + barHeight * 0.6);171 c.lineTo(screenX + barHeight * 0.9, speakerY + barHeight * 0.7);172 c.lineTo(screenX + barHeight * 0.75, speakerY + barHeight * 0.7);173 c.stroke();174175 var textColor = mxUtils.getValue(this.style, mxShapeMockupVideoPlayer.prototype.cst.TEXT_COLOR, '#666666');176 c.begin();177 c.setFontSize(barHeight * 0.5);178 c.setFontColor(textColor);179 c.text(barHeight * 1.9, h - barHeight * 0.45, 0, 0, '0:00/3:53', mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);180};181182mxCellRenderer.registerShape(mxShapeMockupVideoPlayer.prototype.cst.SHAPE_VIDEO_PLAYER, mxShapeMockupVideoPlayer);183184Graph.handleFactory[mxShapeMockupVideoPlayer.prototype.cst.SHAPE_VIDEO_PLAYER] = function(state)185{186 var handles = [Graph.createHandle(state, ['barPos'], function(bounds)187 {188 var barPos = Math.max(0, Math.min(100, parseFloat(mxUtils.getValue(this.state.style, 'barPos', this.barPos))));189190 var barH = parseFloat(mxUtils.getValue(this.state.style, 'barHeight', this.barHeight));191192 return new mxPoint(bounds.x + ((bounds.width - 16) * barPos / bounds.width) / 100 * bounds.width + 8, bounds.y + bounds.height - barH - 20);193 }, function(bounds, pt)194 {195 this.state.style['barPos'] = Math.round(1000 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 1000;196 })];197198 var handle2 = Graph.createHandle(state, ['barHeight'], function(bounds)199 {200 var barHeight = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'barHeight', this.barHeight))));201202 return new mxPoint(bounds.x + bounds.width - 20, bounds.y + bounds.height - barHeight);203 }, function(bounds, pt)204 {205 this.state.style['barHeight'] = Math.round(1000 * Math.max(0, Math.min(bounds.height, bounds.y + bounds.height - pt.y))) / 1000;206 });207 208 handles.push(handle2);209210 return handles;211}212213//**********************************************************************************************************************************************************214//Accordion (LEGACY)215//**********************************************************************************************************************************************************216/**217 * Extends mxShape.218 */219function mxShapeMockupAccordion(bounds, fill, stroke, strokewidth)220{221 mxShape.call(this);222 this.bounds = bounds;223 this.fill = fill;224 this.stroke = stroke;225 this.strokewidth = (strokewidth != null) ? strokewidth : 1;226};227228/**229 * Extends mxShape.230 */231mxUtils.extend(mxShapeMockupAccordion, mxShape);232233mxShapeMockupAccordion.prototype.cst = {234 TEXT_COLOR : 'textColor',235 TEXT_COLOR2 : 'textColor2',236 TEXT_SIZE : 'textSize',237 SHAPE_ACCORDION : 'mxgraph.mockup.containers.accordion',238 STROKE_COLOR2 : 'strokeColor2',239 FILL_COLOR2 : 'fillColor2',240 SELECTED : '+', // must be 1 char241 MAIN_TEXT : 'mainText'242};243244/**245 * Function: paintVertexShape246 * 247 * Paints the vertex shape.248 */249mxShapeMockupAccordion.prototype.paintVertexShape = function(c, x, y, w, h)250{251 var textStrings = mxUtils.getValue(this.style, mxShapeMockupAccordion.prototype.cst.MAIN_TEXT, '+Group 1, Group 2, Group 3').toString().split(',');252 var fontColor = mxUtils.getValue(this.style, mxShapeMockupAccordion.prototype.cst.TEXT_COLOR, '#666666');253 var selectedFontColor = mxUtils.getValue(this.style, mxShapeMockupAccordion.prototype.cst.TEXT_COLOR2, '#ffffff');254 var fontSize = mxUtils.getValue(this.style, mxShapeMockupAccordion.prototype.cst.TEXT_SIZE, '17').toString();255 var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');256 var separatorColor = mxUtils.getValue(this.style, mxShapeMockupAccordion.prototype.cst.STROKE_COLOR2, '#c4c4c4');257 var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');258 var selectedFillColor = mxUtils.getValue(this.style, mxShapeMockupAccordion.prototype.cst.FILL_COLOR2, '#008cff');259 var buttonNum = textStrings.length;260 var maxButtonWidth = 0;261 var selectedButton = -1;262 var rSize = 10; //rounding size263 var labelOffset = 5;264265 for (var i = 0; i < buttonNum; i++)266 {267 var buttonText = textStrings[i];268269 if(buttonText.charAt(0) === mxShapeMockupAccordion.prototype.cst.SELECTED)270 {271 buttonText = textStrings[i].substring(1);272 selectedButton = i;273 }274275 var currWidth = mxUtils.getSizeForString(buttonText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;276277 if (currWidth > maxButtonWidth)278 {279 maxButtonWidth = currWidth;280 }281 }282283 var minButtonHeight = fontSize * 1.5;284 var minH = buttonNum * minButtonHeight;285 var trueH = Math.max(h, minH);286 var minW = 2 * labelOffset + maxButtonWidth;287 var trueW = Math.max(w, minW);288289 c.translate(x, y);290291 this.background(c, trueW, trueH, rSize, buttonNum, labelOffset, buttonNum * minButtonHeight, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton, minButtonHeight);292 c.setShadow(false);293294 var currWidth = 0;295296 for (var i = 0; i < buttonNum; i++)297 {298 if (i === selectedButton)299 {300 c.setFontColor(selectedFontColor);301 }302 else303 {304 c.setFontColor(fontColor);305 }306307 currWidth = currWidth + labelOffset;308 var currHeight = 0;309310 if (selectedButton === -1 || i <= selectedButton)311 { 312 currHeight = (i * minButtonHeight + minButtonHeight * 0.5);313 }314 else315 {316 currHeight = trueH - (buttonNum - i - 0.5) * minButtonHeight;317 }318319 this.buttonText(c, trueW, currHeight, textStrings[i], fontSize);320 }321};322323mxShapeMockupAccordion.prototype.background = function(c, w, h, rSize, buttonNum, labelOffset, minH, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton, minButtonHeight)324{325 c.begin();326327 //draw the frame328 c.setStrokeColor(frameColor);329 c.setFillColor(bgColor);330 c.moveTo(0, 0);331 c.lineTo(w, 0);332 c.lineTo(w, h);333 c.lineTo(0, h);334 c.close();335 c.fillAndStroke();336337 //draw the button separators338 c.setStrokeColor(separatorColor);339 c.begin();340341 for (var i = 1; i < buttonNum; i++)342 {343 if (i !== selectedButton)344 {345 if (selectedButton === -1 || i < selectedButton)346 {347 var currHeight = i * minButtonHeight;348 c.moveTo(0, currHeight);349 c.lineTo(w, currHeight);350 }351 else352 {353 var currHeight = h - (buttonNum - i) * minButtonHeight;354 c.moveTo(0, currHeight);355 c.lineTo(w, currHeight);356 }357 }358 }359360 c.stroke();361362 //draw the selected button363 c.setStrokeColor(mxConstants.NONE);364 c.setFillColor(selectedFillColor);365366 if (selectedButton !== -1)367 {368 c.begin();369 var buttonTop = minButtonHeight * selectedButton;370 var buttonBottom = minButtonHeight * (selectedButton + 1);371 c.moveTo(0, buttonTop);372 c.lineTo(w, buttonTop);373 c.lineTo(w, buttonBottom);374 c.lineTo(0, buttonBottom);375 c.close();376 c.fill();377 }378379// //draw the frame again, to achieve a nicer effect380 c.begin();381 c.setStrokeColor(frameColor);382 c.setFillColor(bgColor);383 c.moveTo(0, 0);384 c.lineTo(w, 0);385 c.lineTo(w, h);386 c.lineTo(0, h);387 c.close();388 c.stroke();389};390391mxShapeMockupAccordion.prototype.buttonText = function(c, w, h, textString, fontSize)392{393 if(textString.charAt(0) === mxShapeMockupAccordion.prototype.cst.SELECTED)394 {395 textString = textString.substring(1);396 }397398 c.begin();399 c.setFontSize(fontSize);400 c.text((w * 0.5), h, 0, 0, textString, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);401};402403mxCellRenderer.registerShape(mxShapeMockupAccordion.prototype.cst.SHAPE_ACCORDION, mxShapeMockupAccordion);404405//**********************************************************************************************************************************************************406//Browser Window407//**********************************************************************************************************************************************************408/**409 * Extends mxShape.410 */411function mxShapeMockupBrowserWindow(bounds, fill, stroke, strokewidth)412{413 mxShape.call(this);414 this.bounds = bounds;415 this.fill = fill;416 this.stroke = stroke;417 this.strokewidth = (strokewidth != null) ? strokewidth : 1;418};419420/**421 * Extends mxShape.422 */423mxUtils.extend(mxShapeMockupBrowserWindow, mxShape);424425mxShapeMockupBrowserWindow.prototype.cst = {426 STROKE_COLOR2 : 'strokeColor2',427 STROKE_COLOR3 : 'strokeColor3',428 MAIN_TEXT : 'mainText',429 SHAPE_BROWSER_WINDOW : 'mxgraph.mockup.containers.browserWindow'430431};432433mxShapeMockupBrowserWindow.prototype.customProperties = [434 {name: 'strokeColor2', dispName: 'Stroke2 Color', type: 'color', primary:true},435 {name: 'strokeColor3', dispName: 'Stroke3 Color', type: 'color', primary:true}436];437438/**439 * Function: paintVertexShape440 * 441 * Paints the vertex shape.442 */443mxShapeMockupBrowserWindow.prototype.paintVertexShape = function(c, x, y, w, h)444{445 var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');446 var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');447 var closeColor = mxUtils.getValue(this.style, mxShapeMockupBrowserWindow.prototype.cst.STROKE_COLOR2, '#008cff');448 var insideColor = mxUtils.getValue(this.style, mxShapeMockupBrowserWindow.prototype.cst.STROKE_COLOR3, '#c4c4c4');449 w = Math.max(w, 260);450 h = Math.max(h, 110);451 c.translate(x, y);452 this.background(c, x, y, w, h, bgColor, frameColor);453 c.setShadow(false);454 this.otherShapes(c, x, y, w, h, frameColor, insideColor, closeColor);455};456457mxShapeMockupBrowserWindow.prototype.background = function(c, x, y, w, h, bgColor, frameColor)458{459 c.setFillColor(bgColor);460 c.setStrokeColor(frameColor);461 c.begin();462 c.moveTo(0, 0);463 c.lineTo(w, 0);464 c.lineTo(w, h);465 c.lineTo(0, h);466 c.close(); 467 c.fillAndStroke();468};469470mxShapeMockupBrowserWindow.prototype.otherShapes = function(c, x, y, w, h, frameColor, insideColor, closeColor)471{472 var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1');473 var mainText = mxUtils.getValue(this.style, mxShapeMockupBrowserWindow.prototype.cst.MAIN_TEXT, 'http://www.draw.io,Page 1').toString().split(',');474475 //window buttons476 c.setStrokeColor(frameColor);477 c.ellipse(w - 75, 5, 20, 20);478 c.stroke();479480 c.ellipse(w - 50, 5, 20, 20);481 c.stroke();482483 c.setStrokeColor(closeColor);484 c.ellipse(w - 25, 5, 20, 20);485 c.stroke();486487 c.setStrokeColor(insideColor);488 //lines489 c.begin();490 c.moveTo(0, 40);491 c.lineTo(30, 40);492 c.lineTo(30, 15);493 c.arcTo(5, 5, 0, 0, 1, 35, 10);494 c.lineTo(170, 10);495 c.arcTo(5, 5, 0, 0, 1, 175, 15);496 c.lineTo(175, 40);497 c.lineTo(w, 40);498 c.stroke();499500 c.begin();501 c.moveTo(0, 110);502 c.lineTo(w, 110);503 c.stroke();504505 //address field506 c.begin();507 c.moveTo(100, 60);508 c.arcTo(5, 5, 0, 0, 1, 105, 55);509 c.lineTo(w - 15, 55);510 c.arcTo(5, 5, 0, 0, 1, w - 10, 60);511 c.lineTo(w - 10, 85);512 c.arcTo(5, 5, 0, 0, 1, w - 15, 90);513 c.lineTo(105, 90);514 c.arcTo(5, 5, 0, 0, 1, 100, 85);515 c.close();516 c.stroke();517518 //text519 var textColor = mxUtils.getValue(this.style, mxShapeMockupBrowserWindow.prototype.cst.TEXT_COLOR, '#666666');520 c.setFontColor(textColor);521 c.setFontSize(17);522 c.text(65, 25, 0, 0, mainText[1], mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);523 c.text(130, 73, 0, 0, mainText[0], mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);524 c.stroke();525526 //icon on tab527 c.translate(37, 17);528 c.begin();529 c.moveTo(0, 0);530 c.lineTo(11, 0);531 c.lineTo(15, 4);532 c.lineTo(15, 18);533 c.lineTo(0, 18);534 c.close();535 c.stroke();536537 c.setStrokeWidth(strokeWidth * 0.5); //maybe because of this (read later)538 c.begin();539 c.moveTo(11, 0);540 c.lineTo(11, 4);541 c.lineTo(15, 5);542 c.stroke();543544 //icon in address bar545 c.setStrokeWidth(strokeWidth * 2); // i'm not sure why i have to multiply here546 c.translate(70, 47);547 c.begin();548 c.moveTo(0, 0);549 c.lineTo(11, 0);550 c.lineTo(15, 4);551 c.lineTo(15, 18);552 c.lineTo(0, 18);553 c.close();554 c.stroke();555556 c.setStrokeWidth(strokeWidth * 0.5);557 c.begin();558 c.moveTo(11, 0);559 c.lineTo(11, 4);560 c.lineTo(15, 5);561 c.stroke();562563 //back564 var iSi = 20; //icon size565 c.setFillColor(insideColor);566 c.begin();567 c.setStrokeWidth(strokeWidth * 2); // i'm not sure why i have to multiply here568 c.translate(-95, 0);569 c.moveTo(0, iSi * 0.5);570 c.lineTo(iSi * 0.5, 0);571 c.lineTo(iSi * 0.5, iSi * 0.3);572 c.lineTo(iSi, iSi * 0.3);573 c.lineTo(iSi, iSi * 0.7);574 c.lineTo(iSi * 0.5, iSi * 0.7);575 c.lineTo(iSi * 0.5, iSi);576 c.close();577 c.fillAndStroke();578579 //forward580 c.begin();581 c.translate(30, 0);582 c.moveTo(iSi, iSi * 0.5);583 c.lineTo(iSi * 0.5, 0);584 c.lineTo(iSi * 0.5, iSi * 0.3);585 c.lineTo(0, iSi * 0.3);586 c.lineTo(0, iSi * 0.7);587 c.lineTo(iSi * 0.5, iSi * 0.7);588 c.lineTo(iSi * 0.5, iSi);589 c.close();590 c.fillAndStroke();591592 //refresh593 c.begin();594 c.translate(30, 0);595 c.moveTo(iSi * 0.78, iSi * 0.665);596 c.arcTo(iSi * 0.3, iSi * 0.3, 0, 1, 1, iSi * 0.675, iSi * 0.252);597 c.lineTo(iSi * 0.595, iSi * 0.325);598 c.lineTo(iSi * 0.99, iSi * 0.415);599 c.lineTo(iSi * 0.9, iSi * 0.04);600 c.lineTo(iSi * 0.815, iSi * 0.12);601 c.arcTo(iSi * 0.49, iSi * 0.49, 0, 1, 0, iSi * 0.92, iSi * 0.8);602 c.close();603 c.fillAndStroke();604};605606mxCellRenderer.registerShape(mxShapeMockupBrowserWindow.prototype.cst.SHAPE_BROWSER_WINDOW, mxShapeMockupBrowserWindow);607608//**********************************************************************************************************************************************************609//User, Male610//**********************************************************************************************************************************************************611/**612 * Extends mxShape.613 */614function mxShapeMockupUserMale(bounds, fill, stroke, strokewidth)615{616 mxShape.call(this);617 this.bounds = bounds;618 this.fill = fill;619 this.stroke = stroke;620 this.strokewidth = (strokewidth != null) ? strokewidth : 1;621};622623/**624 * Extends mxShape.625 */626mxUtils.extend(mxShapeMockupUserMale, mxShape);627628mxShapeMockupUserMale.prototype.cst = {629 STROKE_COLOR2 : 'strokeColor2',630 SHAPE_MALE_USER : 'mxgraph.mockup.containers.userMale'631};632633mxShapeMockupUserMale.prototype.customProperties = [634 {name: 'strokeColor2', dispName: 'Stroke2 Color', type: 'color', primary:true}635];636637/**638 * Function: paintVertexShape639 * 640 * Paints the vertex shape.641 */642mxShapeMockupUserMale.prototype.paintVertexShape = function(c, x, y, w, h)643{644 var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');645 var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');646 var insideColor = mxUtils.getValue(this.style, mxShapeMockupUserMale.prototype.cst.STROKE_COLOR2, '#008cff');647 c.translate(x, y);648 this.background(c, x, y, w, h, bgColor, frameColor);649 c.setShadow(false);650 this.otherShapes(c, x, y, w, h, insideColor, frameColor);651};652653mxShapeMockupUserMale.prototype.background = function(c, x, y, w, h, bgColor, frameColor)654{655 c.setFillColor(bgColor);656 c.setStrokeColor(frameColor);657 c.begin();658 c.moveTo(0, 0);659 c.lineTo(w, 0);660 c.lineTo(w, h);661 c.lineTo(0, h);662 c.close(); 663 c.fillAndStroke();664};665666mxShapeMockupUserMale.prototype.otherShapes = function(c, x, y, w, h, insideColor, frameColor)667{668 //head left669 c.setStrokeColor(insideColor);670 c.setLineCap('round');671 c.setLineJoin('round');672 c.begin();673 c.moveTo(w * 0.5, h * 0.6721);674 c.curveTo(w * 0.3891, h * 0.6721, w * 0.31, h * 0.5648, w * 0.31, h * 0.3962);675 c.curveTo(w * 0.31, h * 0.3656, w * 0.3012, h * 0.3473, w * 0.3051, h * 0.3227);676 c.curveTo(w * 0.3126, h * 0.2762, w * 0.3124, h * 0.2212, w * 0.332, h * 0.1939);677 c.curveTo(w * 0.354, h * 0.1633, w * 0.4382, h * 0.12, w * 0.5, h * 0.12);678 c.stroke();679680 //left ear681 c.begin();682 c.moveTo(w * 0.3046, h * 0.3716);683 c.curveTo(w * 0.3046, h * 0.3716, w * 0.3046, h * 0.341, w * 0.2826, h * 0.3594);684 c.curveTo(w * 0.2606, h * 0.3778, w * 0.2661, h * 0.4452, w * 0.266, h * 0.4452);685 c.quadTo(w * 0.2715, h * 0.4942, w * 0.277, h * 0.5065);686 c.curveTo(w * 0.2825, h * 0.5187, w * 0.277, h * 0.5187, w * 0.2935, h * 0.5371);687 c.curveTo(w * 0.31, h * 0.5554, w * 0.3375, h * 0.5615, w * 0.3375, h * 0.5616);688 c.stroke();689690 // left shoulder691 c.begin();692 c.moveTo(w * 0.3829, h * 0.6213);693 c.curveTo(w * 0.3829, h * 0.6213, w * 0.405, h * 0.7704, w * 0.2921, h * 0.7888);694 c.curveTo(w * 0.2536, h * 0.795, w * 0.1328, h * 0.85, w * 0.1052, h * 0.8745);695 c.curveTo(w * 0.0776, h * 0.899, w * 0.0641, h * 0.9316, w * 0.0571, h * 0.9622);696 c.quadTo(w * 0.05, h, w * 0.05, h);697 c.stroke();698699 // left hairline700 c.begin();701 c.moveTo(w * 0.3427, h * 0.4185);702 c.curveTo(w * 0.3427, h * 0.4185, w * 0.3427, h * 0.3839, w * 0.3427, h * 0.3593);703 c.curveTo(w * 0.3427, h * 0.3348, w * 0.3663, h * 0.3103, w * 0.3718, h * 0.3041);704 c.curveTo(w * 0.3773, h * 0.298, w * 0.3822, h * 0.2673, w * 0.3877, h * 0.2551);705 c.curveTo(w * 0.3932, h * 0.2429, w * 0.4095, h * 0.2429, w * 0.4259, h * 0.2367);706 c.curveTo(w * 0.4424, h * 0.2306, w * 0.4984, h * 0.2357, w * 0.4984, h * 0.2357);707 c.stroke();708709 //shirt710 c.begin();711 c.moveTo(w * 0.365, h * 0.7427);712 c.curveTo(w * 0.365, h * 0.7427, w * 0.3772, h * 0.8076, w * 0.4286, h * 0.8224);713 c.curveTo(w * 0.4816, h * 0.8377, w * 0.5028, h * 0.8347, w * 0.5028, h * 0.8347);714 c.stroke();715716 c.begin();717 c.moveTo(w * 0.3322, h * 0.7764);718 c.curveTo(w * 0.3322, h * 0.7764, w * 0.3556, h * 0.8386, w * 0.4038, h * 0.8684);719 c.curveTo(w * 0.4533, h * 0.8991, w * 0.5029, h * 0.8929, w * 0.5029, h * 0.8929);720 c.stroke();721722 c.begin();723 c.moveTo(w * 0.2717, h * 0.9);724 c.lineTo(w * 0.2717, h);725 c.stroke();726727 c.begin();728 c.moveTo(w * 0.1671, h * 0.8991);729 c.curveTo(w * 0.1671, h * 0.8991, w * 0.1726, h * 0.9114, w * 0.1836, h * 0.9481);730 c.curveTo(w * 0.1946, h * 0.9849, w * 0.2, h, w * 0.2, h);731 c.stroke();732733 //head right734 c.begin();735 c.moveTo(w * 0.5, h * 0.6721);736 c.curveTo(w * 0.6109, h * 0.6721, w * 0.69, h * 0.5648, w * 0.69, h * 0.3962);737 c.curveTo(w * 0.69, h * 0.3656, w * 0.6988, h * 0.3473, w * 0.6949, h * 0.3227);738 c.curveTo(w * 0.6847, h * 0.2762, w * 0.6876, h * 0.2212, w * 0.668, h * 0.1939);739 c.curveTo(w * 0.646, h * 0.1633, w * 0.5618, h * 0.12, w * 0.5, h * 0.12);740 c.stroke();741742 //right ear743 c.begin();744 c.moveTo(w * 0.6954, h * 0.3716);745 c.curveTo(w * 0.6954, h * 0.3716, w * 0.6954, h * 0.341, w * 0.7174, h * 0.3594);746 c.curveTo(w * 0.7394, h * 0.3778, w * 0.7339, h * 0.4452, w * 0.734, h * 0.4452);747 c.quadTo(w * 0.7285, h * 0.4942, w * 0.723, h * 0.5065);748 c.curveTo(w * 0.7175, h * 0.5187, w * 0.723, h * 0.5187, w * 0.7065, h * 0.5371);749 c.curveTo(w * 0.69, h * 0.5554, w * 0.6625, h * 0.5615, w * 0.6625, h * 0.5616);750 c.stroke();751752 // right shoulder753 c.begin();754 c.moveTo(w * 0.6171, h * 0.6213);755 c.curveTo(w * 0.6171, h * 0.6213, w * 0.595, h * 0.7704, w * 0.7079, h * 0.7888);756 c.curveTo(w * 0.7464, h * 0.795, w * 0.8672, h * 0.85, w * 0.8948, h * 0.8745);757 c.curveTo(w * 0.9224, h * 0.899, w * 0.9359, h * 0.9316, w * 0.9429, h * 0.9622);758 c.quadTo(w * 0.95, h, w * 0.95, h);759 c.stroke();760761 // right hairline762 c.begin();763 c.moveTo(w * 0.6573, h * 0.4185);764 c.curveTo(w * 0.6573, h * 0.4185, w * 0.6573, h * 0.3839, w * 0.6573, h * 0.3593);765 c.curveTo(w * 0.6573, h * 0.3348, w * 0.6337, h * 0.3103, w * 0.6282, h * 0.3041);766 c.curveTo(w * 0.6227, h * 0.298, w * 0.6178, h * 0.2673, w * 0.6123, h * 0.2551);767 c.curveTo(w * 0.6068, h * 0.2429, w * 0.5905, h * 0.2429, w * 0.5741, h * 0.2367);768 c.curveTo(w * 0.5576, h * 0.2306, w * 0.5016, h * 0.2357, w * 0.5016, h * 0.2357);769 c.stroke();770771 //shirt, right772 c.begin();773 c.moveTo(w * 0.635, h * 0.7427);774 c.curveTo(w * 0.635, h * 0.7427, w * 0.6228, h * 0.8076, w * 0.5714, h * 0.8224);775 c.curveTo(w * 0.5184, h * 0.8377, w * 0.4972, h * 0.8347, w * 0.4972, h * 0.8347);776 c.stroke();777778 c.begin();779 c.moveTo(w * 0.6678, h * 0.7764);780 c.curveTo(w * 0.6678, h * 0.7764, w * 0.6444, h * 0.8386, w * 0.5962, h * 0.8684);781 c.curveTo(w * 0.5467, h * 0.8991, w * 0.4971, h * 0.8929, w * 0.4971, h * 0.8929);782 c.stroke();783784 c.begin();785 c.moveTo(w * 0.7283, h * 0.9);786 c.lineTo(w * 0.7283, h);787 c.stroke();788789 c.begin();790 c.moveTo(w * 0.8329, h * 0.8991);791 c.curveTo(w * 0.8329, h * 0.8991, w * 0.8274, h * 0.9114, w * 0.8164, h * 0.9481);792 c.curveTo(w * 0.8054, h * 0.9849, w * 0.8, h, w * 0.8, h);793 c.stroke();794795 c.setStrokeColor(frameColor);796 c.begin();797 c.moveTo(0, 0);798 c.lineTo(w, 0);799 c.lineTo(w, h);800 c.lineTo(0, h);801 c.close(); 802 c.stroke();803};804805mxCellRenderer.registerShape(mxShapeMockupUserMale.prototype.cst.SHAPE_MALE_USER, mxShapeMockupUserMale);806807//**********************************************************************************************************************************************************808//User, Female809//**********************************************************************************************************************************************************810/**811 * Extends mxShape.812 */813function mxShapeMockupUserFemale(bounds, fill, stroke, strokewidth)814{815 mxShape.call(this);816 this.bounds = bounds;817 this.fill = fill;818 this.stroke = stroke;819 this.strokewidth = (strokewidth != null) ? strokewidth : 1;820};821822/**823 * Extends mxShape.824 */825mxUtils.extend(mxShapeMockupUserFemale, mxShape);826827mxShapeMockupUserFemale.prototype.cst = {828 STROKE_COLOR2 : 'strokeColor2',829 SHAPE_FEMALE_USER : 'mxgraph.mockup.containers.userFemale'830};831832mxShapeMockupUserFemale.prototype.customProperties = [833 {name: 'strokeColor2', dispName: 'Stroke2 Color', type: 'color', primary:true}834];835836/**837 * Function: paintVertexShape838 * 839 * Paints the vertex shape.840 */841mxShapeMockupUserFemale.prototype.paintVertexShape = function(c, x, y, w, h)842{843 var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');844 var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');845 var insideColor = mxUtils.getValue(this.style, mxShapeMockupUserFemale.prototype.cst.STROKE_COLOR2, '#008cff');846 c.translate(x, y);847 this.background(c, x, y, w, h, bgColor, frameColor);848 c.setShadow(false);849 this.otherShapes(c, x, y, w, h, insideColor, frameColor);850};851852mxShapeMockupUserFemale.prototype.background = function(c, x, y, w, h, bgColor, frameColor)853{854 c.setFillColor(bgColor);855 c.setStrokeColor(frameColor);856 c.begin();857 c.moveTo(0, 0);858 c.lineTo(w, 0);859 c.lineTo(w, h);860 c.lineTo(0, h);861 c.close(); 862 c.fillAndStroke();863};864865mxShapeMockupUserFemale.prototype.otherShapes = function(c, x, y, w, h, insideColor, frameColor)866{867 //head left868 c.setStrokeColor(insideColor);869 c.setLineCap('round');870 c.setLineJoin('round');871 c.begin();872 c.moveTo(w * 0.3148, h * 0.468);873 c.curveTo(w * 0.3045, h * 0.3195, w * 0.3176, h * 0.2383, w * 0.3302, h * 0.2069);874 c.curveTo(w * 0.3508, h * 0.1557, w * 0.44, h * 0.1156, w * 0.5026, h * 0.1156);875 c.stroke();876877 c.begin();878 c.moveTo(w * 0.5029, h * 0.6728);879 c.curveTo(w * 0.4616, h * 0.6728, w * 0.4018, h * 0.6177, w * 0.3663, h * 0.5653);880 c.stroke();881882 c.begin();883 c.moveTo(w * 0.3108, h * 0.4021);884 c.curveTo(w * 0.3108, h * 0.4021, w * 0.3091, h * 0.3765, w * 0.2891, h * 0.3933);885 c.curveTo(w * 0.2691, h * 0.4101, w * 0.2782, h * 0.4661, w * 0.2782, h * 0.4661);886 c.quadTo(w * 0.2862, h * 0.5067, w * 0.2922, h * 0.5166);887 c.curveTo(w * 0.2982, h * 0.5265, w * 0.2929, h * 0.5268, w * 0.3097, h * 0.5412);888 c.stroke();889890 c.begin();891 c.moveTo(w * 0.4038, h * 0.6176);892 c.curveTo(w * 0.4038, h * 0.6176, w * 0.4324, h * 0.7778, w * 0.3375, h * 0.7963);893 c.curveTo(w * 0.3054, h * 0.8026, w * 0.1753, h * 0.8578, w * 0.15, h * 0.8826);894 c.curveTo(w * 0.1247, h * 0.9074, w * 0.1126, h * 0.9412, w * 0.1063, h * 0.9722);895 c.curveTo(w * 0.10, h * 1.0032, w * 0.1, h, w * 0.1, h);896 c.stroke();897898 c.begin();899 c.moveTo(w * 0.6377, h * 0.3365);900 c.curveTo(w * 0.5927, h * 0.2634, w * 0.5206, h * 0.2634, w * 0.5206, h * 0.2634);901 c.quadTo(w * 0.3769, h * 0.2591, w * 0.3713, h * 0.2659);902 c.curveTo(w * 0.3657, h * 0.2727, w * 0.3405, h * 0.3674, w * 0.3405, h * 0.3946);903 c.curveTo(w * 0.3405, h * 0.4218, w * 0.3405, h * 0.4602, w * 0.3405, h * 0.4602);904 c.quadTo(w * 0.3546, h * 0.6401, w * 0.3546, h * 0.6626);905 c.stroke();906907 c.begin();908 c.moveTo(w * 0.2931, h * 0.818);909 c.curveTo(w * 0.2931, h * 0.818, w * 0.3224, h * 0.9159, w * 0.3826, h * 0.9677);910 c.curveTo(w * 0.4446, h * 1.01, w * 0.5065, h, w * 0.5065, h);911 c.stroke();912913 c.begin();914 c.moveTo(w * 0.2995, h * 0.9106);915 c.lineTo(w * 0.2995, h);916 c.stroke();917918 c.begin();919 c.moveTo(w * 0.2081, h * 0.907);920 c.curveTo(w * 0.2081, h * 0.907, w * 0.2131, h * 0.9194, w * 0.2232, h * 0.9565);921 c.curveTo(w * 0.2333, h * 0.9936, w * 0.24, h, w * 0.24, h);922 c.stroke();923924 c.begin();925 c.moveTo(w * 0.6951, h * 0.4988);926 c.curveTo(w * 0.6951, h * 0.4662, w * 0.7042, h * 0.3453, w * 0.7, h * 0.32);927 c.curveTo(w * 0.6923, h * 0.273, w * 0.6926, h * 0.2175, w * 0.6727, h * 0.19);928 c.curveTo(w * 0.6504, h * 0.159, w * 0.5651, h * 0.1157, w * 0.5025, h * 0.1157);929 c.stroke();930931 c.begin();932 c.moveTo(w * 0.5029, h * 0.6728);933 c.curveTo(w * 0.5546, h * 0.6728, w * 0.6107, h * 0.6316, w * 0.6461, h * 0.5602);934 c.stroke();935936 c.begin();937 c.moveTo(w * 0.696, h * 0.4022);938 c.curveTo(w * 0.696, h * 0.4022, w * 0.6983, h * 0.3766, w * 0.7179, h * 0.4106);939 c.curveTo(w * 0.7375, h * 0.4278, w * 0.7273, h * 0.4836, w * 0.7273, h * 0.4836);940 c.quadTo(w * 0.7184, h * 0.5241, w * 0.7123, h * 0.5338);941 c.curveTo(w * 0.7062, h * 0.5436, w * 0.7114, h * 0.544, w * 0.6943, h * 0.558);942 c.stroke();943944 c.begin();945 c.moveTo(w * 0.5995, h * 0.6278);946 c.curveTo(w * 0.5995, h * 0.6278, w * 0.5724, h * 0.7777, w * 0.6663, h * 0.7963);947 c.curveTo(w * 0.6984, h * 0.8026, w * 0.8386, h * 0.8578, w * 0.8638, h * 0.8826);948 c.curveTo(w * 0.8891, h * 0.9074, w * 0.9016, h * 0.9412, w * 0.9079, h * 0.9722);949 c.curveTo(w * 0.9142, h * 1.0032, w * 0.91, h, w * 0.91, h);950 c.stroke();951952 c.begin();953 c.moveTo(w * 0.6545, h * 0.6802);954 c.lineTo(w * 0.6545, h * 0.3986);955 c.stroke();956957 c.begin();958 c.moveTo(w * 0.7132, h * 0.8078);959 c.curveTo(w * 0.7132, h * 0.8078, w * 0.6839, h * 0.916, w * 0.6237, h * 0.9678);960 c.curveTo(w * 0.5617, h * 1.01, w * 0.4998, h, w * 0.4998, h);961 c.stroke();962963 c.begin();964 c.moveTo(w * 0.7111, h * 0.9106);965 c.lineTo(w * 0.7111, h);966 c.stroke();967968 c.begin();969 c.moveTo(w * 0.8075, h * 0.907);970 c.curveTo(w * 0.8075, h * 0.907, w * 0.8025, h * 0.9194, w * 0.7924, h * 0.9565);971 c.curveTo(w * 0.7823, h * 0.9936, w * 0.775, h, w * 0.775, h);972 c.stroke();973974 c.begin();975 c.moveTo(w * 0.3148, h * 0.5448);976 c.curveTo(w * 0.3148, h * 0.5448, w * 0.32, h * 0.6216, w * 0.3148, h * 0.6677);977 c.quadTo(w * 0.2891, h * 0.7343, w * 0.2891, h * 0.7343);978 c.lineTo(w * 0.3303, h * 0.7625);979 c.lineTo(w * 0.39, h * 0.7625);980 c.stroke();981982 c.begin();983 c.moveTo(w * 0.6852, h * 0.5448);984 c.curveTo(w * 0.6852, h * 0.5448, w * 0.68, h * 0.6216, w * 0.6852, h * 0.6677);985 c.quadTo(w * 0.7109, h * 0.7343, w * 0.7109, h * 0.7343);986 c.lineTo(w * 0.6697, h * 0.7625);987 c.lineTo(w * 0.62, h * 0.7625);988 c.stroke();989990 c.setStrokeColor(frameColor);991 c.begin();992 c.moveTo(0, 0);993 c.lineTo(w, 0);994 c.lineTo(w, h);995 c.lineTo(0, h);996 c.close(); 997 c.stroke();998};9991000mxCellRenderer.registerShape(mxShapeMockupUserFemale.prototype.cst.SHAPE_FEMALE_USER, mxShapeMockupUserFemale);10011002//**********************************************************************************************************************************************************1003//Group1004//**********************************************************************************************************************************************************1005/**1006 * Extends mxShape.1007 */1008function mxShapeMockupGroup(bounds, fill, stroke, strokewidth)1009{1010 mxShape.call(this);1011 this.bounds = bounds;1012 this.fill = fill;1013 this.stroke = stroke;1014 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1015};10161017/**1018 * Extends mxShape.1019 */1020mxUtils.extend(mxShapeMockupGroup, mxShape);10211022mxShapeMockupGroup.prototype.cst = {1023 MAIN_TEXT : 'mainText',1024 TEXT_SIZE : 'textSize',1025 TEXT_COLOR : 'textColor',1026 FILL_COLOR2 : 'fillColor2',1027 SHAPE_GROUP : 'mxgraph.mockup.containers.group'1028};10291030/**1031 * Function: paintVertexShape1032 * 1033 * Paints the vertex shape.1034 */1035mxShapeMockupGroup.prototype.paintVertexShape = function(c, x, y, w, h)1036{1037 var groupString = mxUtils.getValue(this.style, mxShapeMockupGroup.prototype.cst.MAIN_TEXT, 'Group').toString();1038 var fontSize = mxUtils.getValue(this.style, mxShapeMockupGroup.prototype.cst.TEXT_SIZE, '17');10391040 var textWidth = mxUtils.getSizeForString(groupString, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;10411042 if (textWidth === 0)1043 {1044 textWidth = Math.max(80, textWidth);1045 }10461047 c.translate(x, y);10481049 w = Math.max(w, textWidth + 15);1050 h = Math.max(h, fontSize + 10);10511052 this.background(c, w, h, textWidth, fontSize);1053 c.setShadow(false);1054 this.foreground(c, w, h, textWidth, fontSize);1055 this.buttonText(c, w, h, groupString, fontSize);1056};10571058mxShapeMockupGroup.prototype.background = function(c, w, h, textWidth, fontSize)1059{1060 c.roundrect(0, fontSize * 0.5, w, h - fontSize * 0.5, 5, 5);1061 c.fillAndStroke();1062};10631064mxShapeMockupGroup.prototype.foreground = function(c, w, h, textWidth, fontSize)1065{1066 var fillColor = mxUtils.getValue(this.style, mxShapeMockupGroup.prototype.cst.FILL_COLOR2, '#000000');1067 c.setFillColor(fillColor);1068 c.roundrect(3, 0, textWidth + 6, fontSize * 1.5, fontSize * 0.25, fontSize * 0.25);1069 c.fill();1070};10711072mxShapeMockupGroup.prototype.buttonText = function(c, w, h, textString, fontSize)1073{1074 var fontColor = mxUtils.getValue(this.style, mxShapeMockupGroup.prototype.cst.TEXT_COLOR, '#ffffff');10751076 c.setFontColor(fontColor);1077 c.setFontSize(fontSize);1078 c.text(6, 0, 0, 0, textString, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_TOP, 0, null, 0, 0, 0);1079};10801081mxCellRenderer.registerShape(mxShapeMockupGroup.prototype.cst.SHAPE_GROUP, mxShapeMockupGroup);10821083//**********************************************************************************************************************************************************1084//Window1085//**********************************************************************************************************************************************************1086/**1087 * Extends mxShape.1088 */1089function mxShapeMockupWindow(bounds, fill, stroke, strokewidth)1090{1091 mxShape.call(this);1092 this.bounds = bounds;1093 this.fill = fill;1094 this.stroke = stroke;1095 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1096};10971098/**1099 * Extends mxShape.1100 */1101mxUtils.extend(mxShapeMockupWindow, mxShape);11021103mxShapeMockupWindow.prototype.cst = {1104 MAIN_TEXT : 'mainText',1105 TEXT_SIZE : 'textSize',1106 TEXT_COLOR : 'textColor',1107 STROKE_COLOR2 : 'strokeColor2',1108 STROKE_COLOR3 : 'strokeColor3',1109 SHAPE_WINDOW : 'mxgraph.mockup.containers.window'1110};11111112mxShapeMockupWindow.prototype.customProperties = [1113 {name: 'strokeColor2', dispName: 'Stroke2 Color', type: 'color', primary:true},1114 {name: 'strokeColor3', dispName: 'Stroke3 Color', type: 'color', primary:true}1115];11161117/**1118 * Function: paintVertexShape1119 * 1120 * Paints the vertex shape.1121 */1122mxShapeMockupWindow.prototype.paintVertexShape = function(c, x, y, w, h)1123{1124 var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');1125 var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');1126 var closeColor = mxUtils.getValue(this.style, mxShapeMockupWindow.prototype.cst.STROKE_COLOR2, '#008cff');1127 var insideColor = mxUtils.getValue(this.style, mxShapeMockupWindow.prototype.cst.STROKE_COLOR3, '#c4c4c4');1128 c.translate(x, y);11291130 h = Math.max(h, 30);1131 w = Math.max(w, 90);11321133 this.background(c, x, y, w, h, bgColor, frameColor);1134 c.setShadow(false);1135 this.otherShapes(c, x, y, w, h, frameColor, insideColor, closeColor);1136};11371138mxShapeMockupWindow.prototype.background = function(c, x, y, w, h, bgColor, frameColor)1139{1140 c.setFillColor(bgColor);1141 c.setStrokeColor(frameColor);1142 c.rect(0, 0, w, h);1143 c.fillAndStroke();1144};11451146mxShapeMockupWindow.prototype.otherShapes = function(c, x, y, w, h, frameColor, insideColor, closeColor)1147{1148 var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1');11491150 //window buttons1151 c.setStrokeColor(frameColor);1152 c.ellipse(w - 75, 5, 20, 20);1153 c.stroke();11541155 c.ellipse(w - 50, 5, 20, 20);1156 c.stroke();11571158 c.setStrokeColor(closeColor);1159 c.ellipse(w - 25, 5, 20, 20);1160 c.stroke();11611162 c.setStrokeColor(insideColor);1163 //lines1164 c.begin();1165 c.moveTo(0, 30);1166 c.lineTo(w, 30);1167 c.stroke();11681169 //text1170 var windowTitle = mxUtils.getValue(this.style, mxShapeMockupWindow.prototype.cst.MAIN_TEXT, 'Window Title');1171 var fontColor = mxUtils.getValue(this.style, mxShapeMockupWindow.prototype.cst.TEXT_COLOR, '#666666');1172 var fontSize = mxUtils.getValue(this.style, mxShapeMockupWindow.prototype.cst.TEXT_SIZE, '17').toString();11731174 c.setFontColor(fontColor);1175 c.setFontSize(fontSize);1176 c.text(10, 15, 0, 0, windowTitle, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1177 c.stroke();1178};11791180mxCellRenderer.registerShape(mxShapeMockupWindow.prototype.cst.SHAPE_WINDOW, mxShapeMockupWindow);11811182//**********************************************************************************************************************************************************1183//Horizontal Tab Bar (LEGACY)1184//**********************************************************************************************************************************************************1185/**1186 * Extends mxShape.1187 */1188function mxShapeMockupHorTabBar(bounds, fill, stroke, strokewidth)1189{1190 mxShape.call(this);1191 this.bounds = bounds;1192 this.fill = fill;1193 this.stroke = stroke;1194 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1195};11961197/**1198 * Extends mxShape.1199 */1200mxUtils.extend(mxShapeMockupHorTabBar, mxShape);12011202mxShapeMockupHorTabBar.prototype.cst = {1203 BLOCK : 'block',1204 CONE : 'cone',1205 HALF_CONE : 'halfCone',1206 ROUND : 'round',1207 TEXT_SIZE : 'textSize',1208 TAB_NAMES : 'tabs',1209 TAB_STYLE : 'tabStyle',1210 STYLE_FILLCOLOR2 : 'fillColor2',1211 TEXT_COLOR : 'textColor',1212 SEL_TEXT_COLOR : 'textColor2',1213 SHAPE_HOR_TAB_BAR : 'mxgraph.mockup.containers.horTabBar'1214};12151216/**1217 * Function: paintVertexShape1218 * 1219 * Paints the vertex shape.1220 */1221//TODO tab widths are fixed, so tab text length is a bit of an issue. Cannot be fixed while we use labels for tab names1222mxShapeMockupHorTabBar.prototype.paintVertexShape = function(c, x, y, w, h)1223{1224 var fontSize = mxUtils.getValue(this.style, mxShapeMockupHorTabBar.prototype.cst.TEXT_SIZE, '17').toString();1225 var tabNames = mxUtils.getValue(this.style, mxShapeMockupHorTabBar.prototype.cst.TAB_NAMES, 'Tab 1,+Tab 2,Tab 3').toString().split(',');12261227 var tabH = fontSize * 1.5;1228 var startOffset = 10;1229 var tabOffset = 5;1230 var labelOffset = 10;1231 var tabCount = tabNames.length;1232 var minW = 2 * startOffset + (tabCount - 1) * tabOffset + tabCount * 2 * labelOffset;1233 var rSize = 5;1234 var labelWidths = new Array();1235 var selectedTab = -1;12361237 for (var i = 0; i < tabCount; i++)1238 {1239 var currLabel = tabNames[i];12401241 if(currLabel.charAt(0) === '+')1242 {1243 currLabel = currLabel.substring(1);1244 selectedTab = i;1245 }12461247 currW = mxUtils.getSizeForString(currLabel, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;12481249 if (currW === 0)1250 {1251 labelWidths[i] = 40;1252 }1253 else1254 {1255 labelWidths[i] = currW;1256 };12571258 minW = minW + labelWidths[i];1259 }12601261 w = Math.max(w, minW);1262 h = Math.max(h, tabH + rSize);12631264 c.translate(x, y);12651266 this.background(c, w, h, rSize, tabH);1267 c.setShadow(false);1268 this.backTabs(c, w, h, rSize, tabH, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab);1269 this.focusTab(c, w, h, rSize, tabH, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab);1270 this.tabText(c, w, h, rSize, tabH, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab, tabNames);1271};12721273mxShapeMockupHorTabBar.prototype.background = function(c, w, h, rSize, tabH)1274{1275 c.begin();1276 c.moveTo(0, tabH + rSize);1277 c.arcTo(rSize, rSize, 0, 0, 1, rSize, tabH);1278 c.lineTo(w - rSize, tabH);1279 c.arcTo(rSize, rSize, 0, 0, 1, w, tabH + rSize);1280 c.lineTo(w, h);1281 c.lineTo(0, h);1282 c.close();1283 c.fillAndStroke();1284};12851286mxShapeMockupHorTabBar.prototype.backTabs = function(c, w, h, rSize, tabH, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab)1287{1288 var tabStyle = mxUtils.getValue(this.style, mxShapeMockupHorTabBar.prototype.cst.TAB_STYLE, mxShapeMockupHorTabBar.prototype.cst.BLOCK);12891290 var currW = startOffset;1291 for (var i=0; i < tabCount; i++)1292 {1293 var tabW = labelWidths[i] + 2 * labelOffset;12941295 if (selectedTab !== i)1296 {1297 if (tabStyle === mxShapeMockupHorTabBar.prototype.cst.BLOCK)1298 {1299 c.rect(currW, 0, tabW, tabH);1300 }1301 else if (tabStyle === mxShapeMockupHorTabBar.prototype.cst.CONE)1302 {1303 c.begin();1304 c.moveTo(currW, tabH);1305 c.lineTo(currW + labelOffset * 0.5, 0);1306 c.lineTo(currW + tabW - labelOffset * 0.5, 0);1307 c.lineTo(currW + tabW, tabH);1308 }1309 else if (tabStyle === mxShapeMockupHorTabBar.prototype.cst.HALF_CONE)1310 {1311 c.begin();1312 c.moveTo(currW, tabH);1313 c.lineTo(currW + labelOffset * 0.5, 0);1314 c.lineTo(currW + tabW, 0);1315 c.lineTo(currW + tabW, tabH);1316 }1317 else if (tabStyle === mxShapeMockupHorTabBar.prototype.cst.ROUND)1318 {1319 c.begin();1320 c.moveTo(currW - rSize, tabH);1321 c.arcTo(rSize, rSize, 0, 0, 0, currW, tabH - rSize);1322 c.lineTo(currW, rSize);1323 c.arcTo(rSize, rSize, 0, 0, 1, currW + rSize, 0);1324 c.lineTo(currW + tabW - rSize, 0);1325 c.arcTo(rSize, rSize, 0, 0, 1, currW + tabW, rSize);1326 c.lineTo(currW + tabW, tabH - rSize);1327 c.arcTo(rSize, rSize, 0, 0, 0, currW + tabW + rSize, tabH);1328 }13291330 c.fillAndStroke();1331 }13321333 currW = currW + tabW + tabOffset;1334 }1335};13361337mxShapeMockupHorTabBar.prototype.focusTab = function(c, w, h, rSize, tabH, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab)1338{1339 var tabStyle = mxUtils.getValue(this.style, mxShapeMockupHorTabBar.prototype.cst.TAB_STYLE, mxShapeMockupHorTabBar.prototype.cst.BLOCK);1340 var selectedFill = mxUtils.getValue(this.style, mxShapeMockupHorTabBar.prototype.cst.STYLE_FILLCOLOR2, '#008cff');13411342 var currW = startOffset;1343 c.setStrokeColor(selectedFill);1344 c.setFillColor(selectedFill);13451346 for (var i=0; i <= selectedTab; i++)1347 {1348 var tabW = labelWidths[i] + 2 * labelOffset;13491350 if (selectedTab === i)1351 {1352 if (tabStyle === mxShapeMockupHorTabBar.prototype.cst.BLOCK)1353 {1354 c.begin();1355 c.moveTo(0, tabH + rSize);1356 c.arcTo(rSize, rSize, 0, 0, 1, rSize, tabH);1357 c.lineTo(currW, tabH);1358 c.lineTo(currW, 0);1359 c.lineTo(currW + tabW, 0);1360 c.lineTo(currW + tabW, tabH);1361 c.lineTo(w - rSize, tabH);1362 c.arcTo(rSize, rSize, 0, 0, 1, w, tabH + rSize);1363 c.close();1364 }1365 else if (tabStyle === mxShapeMockupHorTabBar.prototype.cst.CONE)1366 {1367 c.begin();1368 c.moveTo(0, tabH + rSize);1369 c.arcTo(rSize, rSize, 0, 0, 1, rSize, tabH);1370 c.lineTo(currW, tabH);1371 c.lineTo(currW + labelOffset * 0.5, 0);1372 c.lineTo(currW + tabW - labelOffset * 0.5, 0);1373 c.lineTo(currW + tabW, tabH);1374 c.lineTo(w - rSize, tabH);1375 c.arcTo(rSize, rSize, 0, 0, 1, w, tabH + rSize);1376 c.close();1377 }1378 else if (tabStyle === mxShapeMockupHorTabBar.prototype.cst.HALF_CONE)1379 {1380 c.begin();1381 c.moveTo(0, tabH + rSize);1382 c.arcTo(rSize, rSize, 0, 0, 1, rSize, tabH);1383 c.lineTo(currW, tabH);1384 c.lineTo(currW + labelOffset * 0.5, 0);1385 c.lineTo(currW + tabW, 0);1386 c.lineTo(currW + tabW, tabH);1387 c.lineTo(w - rSize, tabH);1388 c.arcTo(rSize, rSize, 0, 0, 1, w, tabH + rSize);1389 c.close();1390 }1391 else if (tabStyle === mxShapeMockupHorTabBar.prototype.cst.ROUND)1392 {1393 c.begin();1394 c.moveTo(0, tabH + rSize);1395 c.arcTo(rSize, rSize, 0, 0, 1, rSize, tabH);1396 c.lineTo(currW - rSize, tabH);1397 c.arcTo(rSize, rSize, 0, 0, 0, currW, tabH - rSize);1398 c.lineTo(currW, rSize);1399 c.arcTo(rSize, rSize, 0, 0, 1, currW + rSize, 0);1400 c.lineTo(currW + tabW - rSize, 0);1401 c.arcTo(rSize, rSize, 0, 0, 1, currW + tabW, rSize);1402 c.lineTo(currW + tabW, tabH - rSize);1403 c.arcTo(rSize, rSize, 0, 0, 0, currW + tabW + rSize, tabH);1404 c.lineTo(w - rSize, tabH);1405 c.arcTo(rSize, rSize, 0, 0, 1, w, tabH + rSize);1406 c.close();1407 }14081409 c.fillAndStroke();1410 }14111412 currW = currW + tabW + tabOffset;1413 }1414};14151416mxShapeMockupHorTabBar.prototype.tabText = function(c, w, h, rSize, tabH, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab, tabNames)1417{1418 var fontColor = mxUtils.getValue(this.style, mxShapeMockupHorTabBar.prototype.cst.TEXT_COLOR, '#666666');1419 var selFontColor = mxUtils.getValue(this.style, mxShapeMockupHorTabBar.prototype.cst.SEL_TEXT_COLOR, '#ffffff');1420 var fontSize = mxUtils.getValue(this.style, mxShapeMockupHorTabBar.prototype.cst.TEXT_SIZE, '17').toString();14211422 c.setFontColor(fontColor);1423 c.setFontSize(fontSize);14241425 var currW = startOffset;14261427 for (var i=0; i < tabCount; i++)1428 {1429 var currLabel = tabNames[i];14301431 if (i === selectedTab)1432 {1433 c.setFontColor(selFontColor);1434 }14351436 if (currLabel.charAt(0) === '+')1437 {1438 currLabel = currLabel.substring(1);1439 }14401441 var tabW = labelWidths[i] + 2 * labelOffset;14421443 c.text(currW + labelOffset, tabH * 0.5, 0, 0, currLabel, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);14441445 currW = currW + tabW + tabOffset;14461447 if (i === selectedTab)1448 {1449 c.setFontColor(fontColor);1450 }1451 }14521453};14541455mxCellRenderer.registerShape(mxShapeMockupHorTabBar.prototype.cst.SHAPE_HOR_TAB_BAR, mxShapeMockupHorTabBar);14561457//**********************************************************************************************************************************************************1458//Vertical Tab Bar (LEGACY)1459//**********************************************************************************************************************************************************1460/**1461 * Extends mxShape.1462 */1463//TODO tab widths are fixed, so tab text length is a bit of an issue. Cannot be fixed while we use labels for tab names1464function mxShapeMockupVerTabBar(bounds, fill, stroke, strokewidth)1465{1466 mxShape.call(this);1467 this.bounds = bounds;1468 this.fill = fill;1469 this.stroke = stroke;1470 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1471};14721473/**1474 * Extends mxShape.1475 */1476mxUtils.extend(mxShapeMockupVerTabBar, mxShape);14771478mxShapeMockupVerTabBar.prototype.cst = {1479 BLOCK : 'block',1480 ROUND : 'round',1481 TEXT_SIZE : 'textSize',1482 TAB_NAMES : 'tabs',1483 TAB_STYLE : 'tabStyle',1484 STYLE_FILLCOLOR2 : 'fillColor2',1485 TEXT_COLOR : 'textColor',1486 SEL_TEXT_COLOR : 'textColor2',1487 SHAPE_VER_TAB_BAR : 'mxgraph.mockup.containers.verTabBar'1488};14891490/**1491 * Function: paintVertexShape1492 * 1493 * Paints the vertex shape.1494 */1495mxShapeMockupVerTabBar.prototype.paintVertexShape = function(c, x, y, w, h)1496{1497 var fontSize = mxUtils.getValue(this.style, mxShapeMockupVerTabBar.prototype.cst.TEXT_SIZE, '17').toString();1498 var tabNames = mxUtils.getValue(this.style, mxShapeMockupVerTabBar.prototype.cst.TAB_NAMES, 'Tab 1,+Tab 2,Tab 3').toString().split(',');14991500 var tabH = fontSize * 1.5;1501 var startOffset = 10;1502 var tabOffset = 5;1503 var labelOffset = 10;1504 var tabCount = tabNames.length;1505 var rSize = 5;1506 var labelWidths = new Array();1507 var selectedTab = -1;1508 for (var i = 0; i < tabCount; i++)1509 {1510 var currLabel = tabNames[i];15111512 if(currLabel.charAt(0) === '+')1513 {1514 currLabel = currLabel.substring(1);1515 selectedTab = i;1516 }15171518 var currW = mxUtils.getSizeForString(currLabel, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;15191520 if (currW === 0)1521 {1522 labelWidths[i] = 42;1523 }1524 else1525 {1526 labelWidths[i] = currW;1527 }1528 }15291530 var tabW = 2 * labelOffset + Math.max.apply(Math, labelWidths);1531 var minW = tabW + rSize;1532 w = Math.max(w, minW);1533 h = Math.max(h, 2 * startOffset + tabCount * tabH + (tabCount - 1) * tabOffset);15341535 c.translate(x, y);15361537 this.background(c, w, h, rSize, tabW);1538 c.setShadow(false);1539 this.backTabs(c, w, h, rSize, tabH, tabW, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab);1540 this.focusTab(c, w, h, rSize, tabH, tabW, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab);1541 this.tabText(c, w, h, rSize, tabH, tabW, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab, tabNames);1542};15431544mxShapeMockupVerTabBar.prototype.background = function(c, w, h, rSize, tabW)1545{1546 c.begin();1547 c.moveTo(tabW + rSize, h);1548 c.arcTo(rSize, rSize, 0, 0, 1, tabW, h - rSize);1549 c.lineTo(tabW, rSize);1550 c.arcTo(rSize, rSize, 0, 0, 1, tabW + rSize, 0);1551 c.lineTo(w, 0);1552 c.lineTo(w, h);1553 c.close();1554 c.fillAndStroke();1555};15561557mxShapeMockupVerTabBar.prototype.backTabs = function(c, w, h, rSize, tabH, tabW, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab)1558{1559 var tabStyle = mxUtils.getValue(this.style, mxShapeMockupVerTabBar.prototype.cst.TAB_STYLE, mxShapeMockupVerTabBar.prototype.cst.BLOCK);15601561 var currH = startOffset;15621563 for (var i=0; i < tabCount; i++)1564 {1565 if (selectedTab !== i)1566 {1567 if (tabStyle === mxShapeMockupVerTabBar.prototype.cst.BLOCK)1568 {1569 c.rect(0, currH, tabW, tabH);1570 }1571 else if (tabStyle === mxShapeMockupVerTabBar.prototype.cst.ROUND)1572 {1573 c.begin();1574 c.moveTo(tabW, currH + tabH + rSize);1575 c.arcTo(rSize, rSize, 0, 0, 0, tabW - rSize, currH + tabH);1576 c.lineTo(rSize, currH + tabH);1577 c.arcTo(rSize, rSize, 0, 0, 1, 0, currH + tabH - rSize);1578 c.lineTo(0, currH + rSize);1579 c.arcTo(rSize, rSize, 0, 0, 1, rSize, currH);1580 c.lineTo(tabW - rSize, currH);1581 c.arcTo(rSize, rSize, 0, 0, 0, tabW, currH - rSize);1582 }15831584 c.fillAndStroke();1585 }15861587 currH = currH + tabH + tabOffset;1588 }1589};15901591mxShapeMockupVerTabBar.prototype.focusTab = function(c, w, h, rSize, tabH, tabW, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab)1592{1593 var tabStyle = mxUtils.getValue(this.style, mxShapeMockupVerTabBar.prototype.cst.TAB_STYLE, mxShapeMockupVerTabBar.prototype.cst.BLOCK);1594 var selectedFill = mxUtils.getValue(this.style, mxShapeMockupVerTabBar.prototype.cst.STYLE_FILLCOLOR2, '#008cff');15951596 if (selectedTab !== -1)1597 {15981599 var currH = startOffset + (tabH + tabOffset) * selectedTab;1600 c.setStrokeColor(selectedFill);1601 c.setFillColor(selectedFill);16021603 if (tabStyle === mxShapeMockupVerTabBar.prototype.cst.BLOCK)1604 {1605 c.begin();1606 c.moveTo(tabW + rSize, h);1607 c.arcTo(rSize, rSize, 0, 0, 1, tabW, h - rSize);1608 c.lineTo(tabW, currH + tabH);1609 c.lineTo(0, currH + tabH);1610 c.lineTo(0, currH);1611 c.lineTo(tabW, currH);1612 c.lineTo(tabW, rSize);1613 c.arcTo(rSize, rSize, 0, 0, 1, tabW + rSize, 0);1614 c.close();1615 }1616 else if (tabStyle === mxShapeMockupVerTabBar.prototype.cst.ROUND)1617 {1618 c.begin();1619 c.moveTo(tabW + rSize, h);1620 c.arcTo(rSize, rSize, 0, 0, 1, tabW, h - rSize);1621 c.lineTo(tabW, currH + tabH + rSize);1622 c.arcTo(rSize, rSize, 0, 0, 0, tabW - rSize, currH + tabH);1623 c.lineTo(rSize, currH + tabH);1624 c.arcTo(rSize, rSize, 0, 0, 1, 0, currH + tabH - rSize);1625 c.lineTo(0, currH + rSize);1626 c.arcTo(rSize, rSize, 0, 0, 1, rSize, currH);1627 c.lineTo(tabW - rSize, currH);1628 c.arcTo(rSize, rSize, 0, 0, 0, tabW, currH - rSize);1629 c.lineTo(tabW, rSize);1630 c.arcTo(rSize, rSize, 0, 0, 1, tabW + rSize, 0);1631 c.close();1632 }16331634 c.fillAndStroke();1635 }16361637};16381639mxShapeMockupVerTabBar.prototype.tabText = function(c, w, h, rSize, tabH, tabW, startOffset, tabOffset, labelOffset, tabCount, labelWidths, selectedTab, tabNames)1640{1641 var fontColor = mxUtils.getValue(this.style, mxShapeMockupVerTabBar.prototype.cst.TEXT_COLOR, '#666666');1642 var selFontColor = mxUtils.getValue(this.style, mxShapeMockupVerTabBar.prototype.cst.SEL_TEXT_COLOR, '#ffffff');1643 var fontSize = mxUtils.getValue(this.style, mxShapeMockupVerTabBar.prototype.cst.TEXT_SIZE, '17').toString();16441645 c.setFontColor(fontColor);1646 c.setFontSize(fontSize);16471648 var currH = startOffset;16491650 for (var i=0; i < tabCount; i++)1651 {1652 var currLabel = tabNames[i];16531654 if (i === selectedTab)1655 {1656 c.setFontColor(selFontColor);1657 }16581659 if (currLabel.charAt(0) === '+')1660 {1661 currLabel = currLabel.substring(1);1662 }16631664 c.text(tabW * 0.5, currH + tabH * 0.5, 0, 0, currLabel, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);16651666 currH = currH + tabH + tabOffset;16671668 if (i === selectedTab)1669 {1670 c.setFontColor(fontColor);1671 }1672 }16731674};16751676mxCellRenderer.registerShape(mxShapeMockupVerTabBar.prototype.cst.SHAPE_VER_TAB_BAR, mxShapeMockupVerTabBar);16771678//**********************************************************************************************************************************************************1679//Alert Box (LEGACY)1680//**********************************************************************************************************************************************************1681/**1682 * Extends mxShape.1683 */1684function mxShapeMockupAlertBox(bounds, fill, stroke, strokewidth)1685{1686 mxShape.call(this);1687 this.bounds = bounds;1688 this.fill = fill;1689 this.stroke = stroke;1690 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1691};16921693/**1694 * Extends mxShape.1695 */1696mxUtils.extend(mxShapeMockupAlertBox, mxShape);16971698mxShapeMockupAlertBox.prototype.cst = {1699 MAIN_TEXT : 'mainText',1700 SUB_TEXT : 'subText',1701 BUTTON_TEXT : 'buttonText',1702 TEXT_SIZE : 'textSize',1703 TEXT_COLOR : 'textColor',1704 STROKE_COLOR2 : 'strokeColor2',1705 STROKE_COLOR3 : 'strokeColor3',1706 SHAPE_ALERT_BOX : 'mxgraph.mockup.containers.alertBox'1707};17081709/**1710 * Function: paintVertexShape1711 * 1712 * Paints the vertex shape.1713 */1714mxShapeMockupAlertBox.prototype.paintVertexShape = function(c, x, y, w, h)1715{1716 var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');1717 var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');1718 var closeColor = mxUtils.getValue(this.style, mxShapeMockupAlertBox.prototype.cst.STROKE_COLOR2, '#008cff');1719 var insideColor = mxUtils.getValue(this.style, mxShapeMockupAlertBox.prototype.cst.STROKE_COLOR3, '#c4c4c4');1720 c.translate(x, y);17211722 h = Math.max(h, 75);1723 w = Math.max(w, 90);17241725 this.background(c, x, y, w, h, bgColor, frameColor);1726 c.setShadow(false);1727 this.foreground(c, x, y, w, h, frameColor, insideColor, closeColor);1728};17291730mxShapeMockupAlertBox.prototype.background = function(c, x, y, w, h, bgColor, frameColor)1731{1732 c.setFillColor(bgColor);1733 c.setStrokeColor(frameColor);1734 c.rect(0, 0, w, h);1735 c.fillAndStroke();1736};17371738mxShapeMockupAlertBox.prototype.foreground = function(c, x, y, w, h, frameColor, insideColor, closeColor)1739{1740 var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1');17411742 c.setStrokeColor(closeColor);1743 c.ellipse(w - 25, 5, 20, 20);1744 c.stroke();17451746 c.setStrokeColor(insideColor);1747 c.begin();1748 c.moveTo(0, 30);1749 c.lineTo(w, 30);1750 c.stroke();17511752 //buttons1753 var windowTitle = mxUtils.getValue(this.style, mxShapeMockupAlertBox.prototype.cst.MAIN_TEXT, 'Window Title').toString();1754 var subText = mxUtils.getValue(this.style, mxShapeMockupAlertBox.prototype.cst.SUB_TEXT, 'Sub Text').toString().split(',');1755 var buttonText = mxUtils.getValue(this.style, mxShapeMockupAlertBox.prototype.cst.BUTTON_TEXT, 'OK,Cancel').toString().split(',');1756 var fontColor = mxUtils.getValue(this.style, mxShapeMockupAlertBox.prototype.cst.TEXT_COLOR, '#666666');1757 var fontSize = mxUtils.getValue(this.style, mxShapeMockupAlertBox.prototype.cst.TEXT_SIZE, '17').toString();17581759 var buttonCount = buttonText.length;1760 var buttonOffset = 10;1761 var buttonW = (w - buttonOffset * (buttonCount + 1)) / buttonCount;17621763 c.setFontColor(fontColor);1764 c.setFontSize(fontSize);1765 c.text(10, 15, 0, 0, windowTitle, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);17661767 var currW = buttonOffset;17681769 for (var i = 0; i < buttonText.length; i++)1770 {1771 if (buttonText[i] !== '')1772 {1773 c.rect(currW, h - 10 - fontSize * 1.5, buttonW, fontSize * 1.5);1774 c.stroke();1775 c.text(currW + buttonW * 0.5, h - 10 - fontSize * 0.75, 0, 0, buttonText[i], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1776 }17771778 currW = currW + buttonW + buttonOffset;1779 }178017811782 for (var i = 0; i < subText.length; i++)1783 {1784 c.text(w * 0.5, 30 + fontSize * (i * 1.5 + 0.75), 0, 0, subText[i], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1785 }17861787 c.stroke();1788};17891790mxCellRenderer.registerShape(mxShapeMockupAlertBox.prototype.cst.SHAPE_ALERT_BOX, mxShapeMockupAlertBox);17911792//**********************************************************************************************************************************************************1793//Rounded rectangle (adjustable rounding)1794//**********************************************************************************************************************************************************1795/**1796* Extends mxShape.1797*/1798function mxShapeMockupContainersRRect(bounds, fill, stroke, strokewidth)1799{1800 mxShape.call(this);1801 this.bounds = bounds;1802 this.fill = fill;1803 this.stroke = stroke;1804 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1805};18061807/**1808* Extends mxShape.1809*/1810mxUtils.extend(mxShapeMockupContainersRRect, mxShape);18111812mxShapeMockupContainersRRect.prototype.cst = {1813 RRECT : 'mxgraph.mockup.containers.rrect',1814 R_SIZE : 'rSize'1815};18161817mxShapeMockupContainersRRect.prototype.customProperties = [1818 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10},1819];18201821/**1822* Function: paintVertexShape1823* 1824* Paints the vertex shape.1825*/1826mxShapeMockupContainersRRect.prototype.paintVertexShape = function(c, x, y, w, h)1827{1828 c.translate(x, y);18291830 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupContainersRRect.prototype.cst.R_SIZE, '10'));1831 c.roundrect(0, 0, w, h, rSize);1832 c.fillAndStroke();1833};18341835mxCellRenderer.registerShape(mxShapeMockupContainersRRect.prototype.cst.RRECT, mxShapeMockupContainersRRect);18361837//**********************************************************************************************************************************************************1838//Anchor (a dummy shape without visuals used for anchoring)1839//**********************************************************************************************************************************************************1840/**1841* Extends mxShape.1842*/1843function mxShapeMockupContainersAnchor(bounds, fill, stroke, strokewidth)1844{1845 mxShape.call(this);1846 this.bounds = bounds;1847};18481849/**1850* Extends mxShape.1851*/1852mxUtils.extend(mxShapeMockupContainersAnchor, mxShape);18531854mxShapeMockupContainersAnchor.prototype.cst = {1855 ANCHOR : 'mxgraph.mockup.containers.anchor'1856};18571858/**1859* Function: paintVertexShape1860* 1861* Paints the vertex shape.1862*/1863mxShapeMockupContainersAnchor.prototype.paintVertexShape = function(c, x, y, w, h)1864{1865};18661867mxCellRenderer.registerShape(mxShapeMockupContainersAnchor.prototype.cst.ANCHOR, mxShapeMockupContainersAnchor);18681869//**********************************************************************************************************************************************************1870//Top Button1871//**********************************************************************************************************************************************************1872/**1873* Extends mxShape.1874*/1875function mxShapeMockupContrainersTopButton(bounds, fill, stroke, strokewidth)1876{1877 mxShape.call(this);1878 this.bounds = bounds;1879 this.fill = fill;1880 this.stroke = stroke;1881 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1882};18831884/**1885* Extends mxShape.1886*/1887mxUtils.extend(mxShapeMockupContrainersTopButton, mxShape);18881889mxShapeMockupContrainersTopButton.prototype.cst = {1890 TOP_BUTTON : 'mxgraph.mockup.containers.topButton',1891 R_SIZE : 'rSize'1892};18931894mxShapeMockupContrainersTopButton.prototype.customProperties = [1895 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10},1896];18971898/**1899* Function: paintVertexShape1900* 1901* Paints the vertex shape.1902*/1903mxShapeMockupContrainersTopButton.prototype.paintVertexShape = function(c, x, y, w, h)1904{1905 c.translate(x, y);19061907 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupContrainersTopButton.prototype.cst.R_SIZE, '10'));19081909 c.begin();1910 c.moveTo(0, rSize);1911 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);1912 c.lineTo(w - rSize, 0);1913 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);1914 c.lineTo(w, h);1915 c.lineTo(0, h);1916 c.close();1917 c.fillAndStroke();1918};19191920mxCellRenderer.registerShape(mxShapeMockupContrainersTopButton.prototype.cst.TOP_BUTTON, mxShapeMockupContrainersTopButton);19211922//**********************************************************************************************************************************************************1923//Left Button1924//**********************************************************************************************************************************************************1925/**1926* Extends mxShape.1927*/1928function mxShapeMockupContainersLeftButton(bounds, fill, stroke, strokewidth)1929{1930 mxShape.call(this);1931 this.bounds = bounds;1932 this.fill = fill;1933 this.stroke = stroke;1934 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1935};19361937/**1938* Extends mxShape.1939*/1940mxUtils.extend(mxShapeMockupContainersLeftButton, mxShape);19411942mxShapeMockupContainersLeftButton.prototype.cst = {1943 LEFT_BUTTON : 'mxgraph.mockup.containers.leftButton',1944 R_SIZE : 'rSize'1945};19461947mxShapeMockupContainersLeftButton.prototype.customProperties = [1948 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10},1949];19501951/**1952* Function: paintVertexShape1953* 1954* Paints the vertex shape.1955*/1956mxShapeMockupContainersLeftButton.prototype.paintVertexShape = function(c, x, y, w, h)1957{1958 c.translate(x, y);19591960 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupContainersLeftButton.prototype.cst.R_SIZE, '10'));19611962 c.begin();1963 c.moveTo(w, 0);1964 c.lineTo(w, h);1965 c.lineTo(rSize, h);1966 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);1967 c.lineTo(0, rSize);1968 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);1969 c.close();1970 c.fillAndStroke();1971};19721973mxCellRenderer.registerShape(mxShapeMockupContainersLeftButton.prototype.cst.LEFT_BUTTON, mxShapeMockupContainersLeftButton);19741975//**********************************************************************************************************************************************************1976//rect with margins1977//**********************************************************************************************************************************************************1978/**1979* Extends mxShape.1980*/1981function mxShapeMockupContainersMarginRect(bounds, fill, stroke, strokewidth)1982{1983 mxShape.call(this);1984 this.bounds = bounds;1985 this.fill = fill;1986 this.stroke = stroke;1987 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1988};19891990/**1991* Extends mxShape.1992*/1993mxUtils.extend(mxShapeMockupContainersMarginRect, mxShape);19941995mxShapeMockupContainersMarginRect.prototype.cst = {1996 SHAPE_MARGIN_RECT : 'mxgraph.mockup.containers.marginRect',1997 MARGIN : 'rectMargin',1998 MARGIN_TOP : 'rectMarginTop',1999 MARGIN_LEFT : 'rectMarginLeft',2000 MARGIN_BOTTOM : 'rectMarginBottom',2001 MARGIN_RIGHT : 'rectMarginRight'2002};20032004mxShapeMockupContainersMarginRect.prototype.customProperties = [2005 {name: 'rectMargin', dispName: 'Global Margin', type: 'float', min:0, defVal:0},2006 {name: 'rectMarginTop', dispName: 'Top Margin', type: 'float', min:0, defVal:0},2007 {name: 'rectMarginLeft', dispName: 'Left Margin', type: 'float', min:0, defVal:0},2008 {name: 'rectMarginBottom', dispName: 'Bottom Margin', type: 'float', min:0, defVal:0},2009 {name: 'rectMarginRight', dispName: 'Right Margin', type: 'float', min:0, defVal:0}2010];20112012/**2013* Function: paintVertexShape2014* 2015* Paints the vertex shape.2016*/2017mxShapeMockupContainersMarginRect.prototype.paintVertexShape = function(c, x, y, w, h)2018{2019 2020 c.translate(x, y);2021 this.background(c, x, y, w, h);2022};20232024mxShapeMockupContainersMarginRect.prototype.background = function(c, x, y, w, h, state)2025{2026 var margin = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect.prototype.cst.MARGIN, '0'));2027 var marginTop = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect.prototype.cst.MARGIN_TOP, '0'));2028 var marginLeft = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect.prototype.cst.MARGIN_LEFT, '0'));2029 var marginBottom = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect.prototype.cst.MARGIN_BOTTOM, '0'));2030 var marginRight = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect.prototype.cst.MARGIN_RIGHT, '0'));20312032 var x1 = margin + marginLeft;2033 var y1 = margin + marginTop;2034 var w1 = w - marginRight - x1 - margin;2035 var h1 = h - marginBottom - y1 - margin;20362037 if (w1 >0 && h1 > 0)2038 {2039 c.begin();2040 c.roundrect(x1, y1, w1, h1, 10, 10);2041 c.fillAndStroke();2042 }2043};20442045mxCellRenderer.registerShape(mxShapeMockupContainersMarginRect.prototype.cst.SHAPE_MARGIN_RECT, mxShapeMockupContainersMarginRect);20462047//**********************************************************************************************************************************************************2048//rect with margins (not rounded)2049//**********************************************************************************************************************************************************2050/**2051* Extends mxShape.2052*/2053function mxShapeMockupContainersMarginRect2(bounds, fill, stroke, strokewidth)2054{2055 mxShape.call(this);2056 this.bounds = bounds;2057 this.fill = fill;2058 this.stroke = stroke;2059 this.strokewidth = (strokewidth != null) ? strokewidth : 1;2060};20612062/**2063* Extends mxShape.2064*/2065mxUtils.extend(mxShapeMockupContainersMarginRect2, mxShape);20662067mxShapeMockupContainersMarginRect2.prototype.cst = {2068 SHAPE_MARGIN_RECT : 'mxgraph.mockup.containers.marginRect2',2069 MARGIN : 'rectMargin',2070 MARGIN_TOP : 'rectMarginTop',2071 MARGIN_LEFT : 'rectMarginLeft',2072 MARGIN_BOTTOM : 'rectMarginBottom',2073 MARGIN_RIGHT : 'rectMarginRight'2074};20752076mxShapeMockupContainersMarginRect2.prototype.customProperties = [2077 {name: 'rectMargin', dispName: 'Global Margin', type: 'float', min:0, defVal:0},2078 {name: 'rectMarginTop', dispName: 'Top Margin', type: 'float', min:0, defVal:0},2079 {name: 'rectMarginLeft', dispName: 'Left Margin', type: 'float', min:0, defVal:0},2080 {name: 'rectMarginBottom', dispName: 'Bottom Margin', type: 'float', min:0, defVal:0},2081 {name: 'rectMarginRight', dispName: 'Right Margin', type: 'float', min:0, defVal:0}2082];20832084/**2085* Function: paintVertexShape2086* 2087* Paints the vertex shape.2088*/2089mxShapeMockupContainersMarginRect2.prototype.paintVertexShape = function(c, x, y, w, h)2090{2091 2092 c.translate(x, y);2093 this.background(c, x, y, w, h);2094};20952096mxShapeMockupContainersMarginRect2.prototype.background = function(c, x, y, w, h, state)2097{2098 var margin = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect2.prototype.cst.MARGIN, '0'));2099 var marginTop = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect2.prototype.cst.MARGIN_TOP, '0'));2100 var marginLeft = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect2.prototype.cst.MARGIN_LEFT, '0'));2101 var marginBottom = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect2.prototype.cst.MARGIN_BOTTOM, '0'));2102 var marginRight = parseFloat(mxUtils.getValue(this.style, mxShapeMockupContainersMarginRect2.prototype.cst.MARGIN_RIGHT, '0'));21032104 var x1 = margin + marginLeft;2105 var y1 = margin + marginTop;2106 var w1 = w - marginRight - x1 - margin;2107 var h1 = h - marginBottom - y1 - margin;21082109 if (w1 >0 && h1 > 0)2110 {2111 c.begin();2112 c.rect(x1, y1, w1, h1);2113 c.fillAndStroke();2114 }2115};21162117mxCellRenderer.registerShape(mxShapeMockupContainersMarginRect2.prototype.cst.SHAPE_MARGIN_RECT, mxShapeMockupContainersMarginRect2);2118