renderers/browser-run/frames/diagramsnet/vendor/assets/shapes/mockup/mxMockupiOS.js - main

main
diagramzip / renderers / browser-run / frames / diagramsnet / vendor / assets / shapes / mockup / mxMockupiOS.js
mxMockupiOS.js 199.8K wrap lines
1/**2 * Copyright (c) 2006-2010, JGraph Holdings Ltd3 */45var mxMockupC =6{7		BAR_HEIGHT : 'barHeight',8		BAR_POS : 'barPos',9		BG_STYLE : 'bgStyle',10		BG_FLAT_GREEN : 'bgGreen',11		BG_FLAT_WHITE : 'bgWhite',12		BG_FLAT_GRAY : 'bgGray',13		BG_FLAT_CUSTOM : 'bgFlat',14		BG_MAP : 'bgMap',15		BG_STRIPED : 'bgStriped',16		BUTTON_STYLE : 'buttonStyle',17		BUTTON_TEXT : 'buttonText',18		BUTTON_STATE : 'buttonState',19		CHEVRON : 'chevron',20		GRID_SIZE : 'gridSize',21		POINTER_BOTTOM : 'bottom',22		POINTER_POS : 'pointerPos',23		POINTER_TOP : 'top',24		ROUND : 'round',25		SELECTED : '+', 		//has to be one character long26		STATE_ON : 'on',27		STATE_OFF : 'off',28		SUB_TEXT : 'subText',29		30		SHAPE_IADD_ICON : 'mxgraph.ios.iAddIcon',31		SHAPE_IALERT_BOX : 'mxgraph.ios.iAlertBox',32		SHAPE_IALPHA_LIST : 'mxgraph.ios.iAlphaList',33		SHAPE_IAPP_BAR : 'mxgraph.ios.iAppBar',34		SHAPE_IARROW_ICON : 'mxgraph.ios.iArrowIcon',35		SHAPE_IBG_FLAT : 'mxgraph.ios.iBgFlat',36		SHAPE_IBG_MAP : 'mxgraph.ios.iBgMap',37		SHAPE_IBG_STRIPED : 'mxgraph.ios.iBgStriped',38		SHAPE_IBUTTON : 'mxgraph.ios.iButton',39		SHAPE_IBUTTON_BACK : 'mxgraph.ios.iButtonBack',40		SHAPE_IBUTTON_FORWARD : 'mxgraph.ios.iButtonFw',41		SHAPE_IBUTTON_BAR : 'mxgraph.ios.iButtonBar',42		SHAPE_ICALL_BUTTONS : 'mxgraph.ios.iCallButtons',43		SHAPE_ICALL_DIALOG : 'mxgraph.ios.iCallDialog',44		SHAPE_ICHECKBOX_GROUP : 'mxgraph.ios.iCheckboxGroup',45		SHAPE_ICHECK_ICON : 'mxgraph.ios.iCheckIcon',46		SHAPE_ICLOUD_PROGRESS_BAR : 'mxgraph.ios.iCloudProgressBar',47		SHAPE_ICOMBO_BOX : 'mxgraph.ios.iComboBox',48		SHAPE_ICOPY : 'mxgraph.ios.iCopy',49		SHAPE_ICOPY_AREA : 'mxgraph.ios.iCopyArea',50		SHAPE_IICON_GRID : 'mxgraph.ios.iIconGrid',51		SHAPE_IDELETE_APP : 'mxgraph.ios.iDeleteApp',52		SHAPE_IDELETE_ICON : 'mxgraph.ios.iDeleteIcon',53		SHAPE_IDOWNLOAD_BAR : 'mxgraph.ios.iDownloadBar',54		SHAPE_IDIALOG_BOX : 'mxgraph.ios.iDialogBox',55		SHAPE_IDIRECTION : 'mxgraph.ios.iDir',56		SHAPE_IHOME_PAGE_CONTROL : 'mxgraph.ios.iHomePageControl',57		SHAPE_IKEYB_LETTERS : 'mxgraph.ios.iKeybLett',58		SHAPE_IKEYB_NUMBERS : 'mxgraph.ios.iKeybNumb',59		SHAPE_IKEYB_SYMBOLS : 'mxgraph.ios.iKeybSymb',60		SHAPE_ILOCATION_BAR : 'mxgraph.ios.iLocBar',61		SHAPE_ILOCK_BUTTON : 'mxgraph.ios.iLockButton',62		SHAPE_IHOR_BUTTON_BAR : 'mxgraph.ios.iHorButtonBar',63		SHAPE_IINFO_ICON : 'mxgraph.ios.iInfoIcon',64		SHAPE_ION_OFF_BUTTON : 'mxgraph.ios.iOnOffButton',65		SHAPE_IOPTION : 'mxgraph.ios.iOption',66		SHAPE_IPAGE_CONTROL : 'mxgraph.ios.iPageControl',67		SHAPE_IPAD : 'mxgraph.ios.iPad',68		SHAPE_IPHONE : 'mxgraph.ios.iPhone',69		SHAPE_IPIN : 'mxgraph.ios.iPin',70		SHAPE_IPREV_NEXT : 'mxgraph.ios.iPrevNext',71		SHAPE_IPROGRESS_BAR : 'mxgraph.ios.iProgressBar',72		SHAPE_IRADIO_GROUP : 'mxgraph.ios.iRadioGroup',73		SHAPE_ISLIDER : 'mxgraph.ios.iSlider',74		SHAPE_ISORT_FIND_ICON : 'mxgraph.ios.iSortFindIcon',75		SHAPE_ITEXT_INPUT : 'mxgraph.ios.iTextInput',76		SHAPE_ITOP_BAR : 'mxgraph.ios.iTopBar',77		SHAPE_ITOP_BAR_LOCKED : 'mxgraph.ios.iTopBarLocked',78		SHAPE_IURL_BAR : 'mxgraph.ios.iURLBar',79		SHAPE_IVIDEO_CONTROLS : 'mxgraph.ios.iVideoControls',80		SHAPE_ISCREEN_NAME_BAR: 'mxgraph.ios.iScreenNameBar',81			82		STYLE_FILLCOLOR2 : 'fillColor2',83		STYLE_FILLCOLOR3 : 'fillColor3',84		STYLE_TEXTCOLOR : 'textColor',85		STYLE_TEXTCOLOR2 : 'textColor2',86		STYLE_STROKECOLOR2 : 'strokeColor2',87		STYLE_STROKECOLOR3 : 'strokeColor3'88};8990//**********************************************************************************************************************************************************91//iPhone Vertical92//**********************************************************************************************************************************************************93/**94 * Extends mxShape.95 */96function mxShapeMockupiPhone(bounds, fill, stroke, strokewidth)97{98	mxShape.call(this);99	this.bounds = bounds;100	this.fill = fill;101	this.stroke = stroke;102	this.strokewidth = (strokewidth != null) ? strokewidth : 1;103};104105/**106 * Extends mxShape.107 */108mxUtils.extend(mxShapeMockupiPhone, mxShape);109110mxShapeMockupiPhone.prototype.customProperties = [111	{name: 'bgStyle', dispName: 'Background', type: 'enum', 112		enumList: [{val: 'bgGreen', dispName: 'Green'}, 113			       {val: 'bgWhite', dispName: 'White'}, 114			       {val: 'bgGray', dispName: 'Gray'}, 115			       {val: 'bgFlat', dispName: 'Flat'}, 116			       {val: 'bgMap', dispName: 'Map'}, 117			       {val: 'bgStriped', dispName: 'Striped'}]}118];119120/**121 * Function: paintVertexShape122 * 123 * Paints the vertex shape.124 */125mxShapeMockupiPhone.prototype.paintVertexShape = function(c, x, y, w, h)126{127	c.translate(x, y);128	var rSize = w < 100 ? 4 : 25;129	this.background(c, x, y, w, h, rSize);130	c.setShadow(false);131	this.foreground(c, x, y, w, h, rSize);132};133134mxShapeMockupiPhone.prototype.background = function(c, x, y, w, h, rSize)135{136	c.setFillColor('#000000');137	c.setStrokeColor('#000000');138	c.roundrect(0, 0, w, h, rSize, rSize);139	c.fillAndStroke();140};141142mxShapeMockupiPhone.prototype.foreground = function(c, x, y, w, h, rSize)143{144	c.setStrokeWidth(1.5);145146	c.begin();147	c.setGradient('#808080', '#000000', w * 0.325, 0, w * 0.675, h * 0.5, mxConstants.DIRECTION_SOUTH, 1, 1);148	c.moveTo(w * 0.325, 0);149	c.lineTo(w - rSize, 0);150	c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);151	c.lineTo(w, h * 0.5);152	c.lineTo(w * 0.7, h * 0.5);153	c.close();154	c.fill();155156	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '');157	var bgStyle = mxUtils.getValue(this.style, mxMockupC.BG_STYLE, mxMockupC.BG_FLAT_GREEN);158159	c.setStrokeWidth(1);160	if (bgStyle === mxMockupC.BG_FLAT_WHITE)161	{162		c.setFillColor('#ffffff');163		c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7);164		c.fill();165	}166	else if (bgStyle === mxMockupC.BG_FLAT_GREEN)167	{168		c.setFillColor('#1f2923');169		c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7);170		c.fill();171	}172	else if (bgStyle === mxMockupC.BG_FLAT_GRAY)173	{174		c.setFillColor('#dddddd');175		c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7);176		c.fill();177	}178	else if (bgStyle === mxMockupC.BG_FLAT_CUSTOM)179	{180		c.setFillColor(fillColor);181		c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7);182		c.fill();183	}184	else if (bgStyle === mxMockupC.BG_STRIPED)185	{186		var xOld = x;187		var yOld = y;188		var wOld = w;189		var hOld = h;190		c.translate(w * 0.0625, h * 0.15);191		w = w * 0.875;192		h = h * 0.7;193194		c.setFillColor('#5D7585');195		c.rect(0, 0, w, h);196		c.fillAndStroke();197198		var strokeColor = '#18211b';199		var strokeColor2 = '#657E8F';200201		c.setStrokeColor(strokeColor2);202		var i = 5;203		c.begin();204205		while (i < w)206		{207			c.moveTo(i, 0);208			c.lineTo(i, h);209			i = i + 5;210		}211212		c.stroke();213214		c.setStrokeColor(strokeColor);215		c.begin();216		c.rect(0, 0, w, h);217		c.stroke();218219		w = wOld;220		h = hOld;221		c.translate( - w * 0.0625, - h * 0.15);222	}223	else if (bgStyle === mxMockupC.BG_MAP)224	{225		var xOld = x;226		var yOld = y;227		var wOld = w;228		var hOld = h;229		c.translate(w * 0.0625, h * 0.15);230		w = w * 0.875;231		h = h * 0.7;232233		c.setFillColor('#ffffff');234		c.rect(0, 0, w, h);235		c.fillAndStroke();236237		var fillColor2 = '#96D1FF';238		var strokeColor = '#18211b';239		var strokeColor2 = '#008cff';240241		c.setFillColor(fillColor2);242		c.setStrokeColor(strokeColor2);243		c.setStrokeWidth(1);244245		c.begin();246		c.moveTo(0, 0);247		c.lineTo(w * 0.1171, 0);248		c.lineTo(w * 0.1136, h * 0.0438);249		c.lineTo(w * 0.0993, h * 0.054);250		c.lineTo(0, h * 0.0446);251		c.close();252		c.fillAndStroke();253254		c.begin();255		c.moveTo(w * 0.1993, 0);256		c.lineTo(w * 0.1914, h * 0.03884);257		c.lineTo(w * 0.1536, h * 0.0362);258		c.lineTo(w * 0.1586, 0);259		c.close();260		c.fillAndStroke();261262		c.begin();263		c.moveTo(w * 0.24, 0);264		c.lineTo(w * 0.2257, h * 0.054);265		c.lineTo(w * 0.2414, h * 0.0674);266		c.lineTo(w * 0.4707, h * 0.0835);267		c.lineTo(w * 0.5264, h * 0.0906);268		c.lineTo(w * 0.6429, h * 0.0929);269		c.arcTo(w * 0.0857, h * 0.0536, 0, 0, 0, w * 0.7193, h * 0.0621);270		c.arcTo(w * 0.48, h * 0.2143, 0, 0, 0, w * 0.7286, 0);271		c.close();272		c.fillAndStroke();273274		c.begin();275		c.moveTo(w * 0.8, 0);276		c.lineTo(w * 0.7886, h * 0.04554);277		c.arcTo(w * 0.0857, h * 0.0536, 0, 0, 0, w * 0.8164, h * 0.0875);278		c.arcTo(w * 0.1429, h * 0.0893, 0, 0, 0, w * 0.88, h * 0.1036);279		c.lineTo(w, h * 0.1112);280		c.lineTo(w, 0);281		c.close();282		c.fillAndStroke();283284		c.begin();285		c.moveTo(0, h * 0.0933);286		c.lineTo(w * 0.08, h * 0.1036);287		c.lineTo(w * 0.1021, h * 0.1246);288		c.lineTo(w * 0.1007, h * 0.1768);289		c.lineTo(w * 0.0471, h * 0.2241);290		c.lineTo(0, h * 0.2527);291		c.close();292		c.fillAndStroke();293294		c.ellipse(w * 0.1214, h * 0.0603, w * 0.0843, h * 0.0576);295		c.fillAndStroke();296297		c.begin();298		c.moveTo(w * 0.1293, h * 0.1924);299		c.lineTo(w * 0.1729, h * 0.142);300		c.lineTo(w * 0.1407, h * 0.1411);301		c.lineTo(w * 0.14, h * 0.1777);302		c.close();303		c.fillAndStroke();304305		c.begin();306		c.moveTo(w * 0.4586, h * 0.1241);307		c.lineTo(w * 0.455, h * 0.1835);308		c.lineTo(w * 0.3893, h * 0.2246);309		c.lineTo(w * 0.2171, h * 0.1362);310		c.lineTo(w * 0.2171, h * 0.1308);311		c.lineTo(w * 0.2293, h * 0.1214);312		c.lineTo(w * 0.2857, h * 0.1174);313		c.close();314		c.fillAndStroke();315316		c.begin();317		c.moveTo(w * 0.5079, h * 0.1134);318		c.lineTo(w * 0.7307, h * 0.1223);319		c.lineTo(w * 0.7279, h * 0.1625);320		c.lineTo(w * 0.715, h * 0.1772);321		c.lineTo(w * 0.6929, h * 0.1688);322		c.lineTo(w * 0.625, h * 0.1795);323		c.lineTo(w * 0.4779, h * 0.2835);324		c.lineTo(w * 0.395, h * 0.2299);325		c.lineTo(w * 0.4657, h * 0.1826);326		c.lineTo(w * 0.4707, h * 0.1223);327		c.close();328		c.fillAndStroke();329330		c.begin();331		c.moveTo(w, h * 0.1362);332		c.lineTo(w * 0.7643, h * 0.1237);333		c.lineTo(w * 0.7543, h * 0.1562);334		c.lineTo(w * 0.7643, h * 0.1585);335		c.lineTo(w * 0.9186, h * 0.2366);336		c.lineTo(w, h * 0.1732);337		c.close();338		c.fillAndStroke();339340		c.begin();341		c.moveTo(w * 0.2079, h * 0.1545);342		c.lineTo(w * 0.3886, h * 0.2536);343		c.lineTo(w * 0.3414, h * 0.2933);344		c.lineTo(w * 0.1743, h * 0.1969);345		c.close();346		c.fillAndStroke();347348		c.begin();349		c.moveTo(w * 0.1579, h * 0.2134);350		c.lineTo(w * 0.3221, h * 0.3067);351		c.lineTo(w * 0.2957, h * 0.3237);352		c.lineTo(w * 0.1157, h * 0.2424);353		c.close();354		c.fillAndStroke();355356		c.begin();357		c.moveTo(w * 0.405, h * 0.2656);358		c.lineTo(w * 0.31, h * 0.3353);359		c.lineTo(w * 0.3693, h * 0.3661);360		c.lineTo(w * 0.4571, h * 0.2982);361		c.close();362		c.fillAndStroke();363364		c.begin();365		c.moveTo(w * 0.7121, h * 0.1848);366		c.lineTo(w * 0.6879, h * 0.1754);367		c.lineTo(w * 0.6329, h * 0.1844);368		c.lineTo(w * 0.61, h * 0.2018);369		c.lineTo(w * 0.6207, h * 0.2085);370		c.lineTo(w * 0.4986, h * 0.2982);371		c.lineTo(w * 0.535, h * 0.3237);372		c.close();373		c.fillAndStroke();374375		c.begin();376		c.moveTo(w * 0.5557, h * 0.3379);377		c.lineTo(w * 0.7464, h * 0.1826);378		c.lineTo(w * 0.8036, h * 0.2076);379		c.lineTo(w * 0.595, h * 0.3616);380		c.close();381		c.fillAndStroke();382383		c.begin();384		c.moveTo(w * 0.8293, h * 0.2188);385		c.lineTo(w * 0.8979, h * 0.2509);386		c.lineTo(w * 0.6936, h * 0.4125);387		c.lineTo(w * 0.6171, h * 0.3737);388		c.close();389		c.fillAndStroke();390391		c.begin();392		c.moveTo(w, h * 0.2138);393		c.lineTo(w * 0.6821, h * 0.4603);394		c.lineTo(w * 0.815, h * 0.5277);395		c.lineTo(w, h * 0.4);396		c.close();397		c.fillAndStroke();398399		c.begin();400		c.moveTo(0, h * 0.317);401		c.lineTo(w * 0.0971, h * 0.2554);402		c.lineTo(w * 0.4121, h * 0.4143);403		c.lineTo(w * 0.3736, h * 0.4415);404		c.lineTo(w * 0.315, h * 0.4076);405		c.lineTo(w * 0.3093, h * 0.4116);406		c.lineTo(w * 0.3686, h * 0.4455);407		c.lineTo(w * 0.285, h * 0.5045);408		c.lineTo(w * 0.1114, h * 0.4134);409		c.lineTo(w * 0.025, h * 0.4603);410		c.lineTo(w * 0.0371, h * 0.4723);411		c.lineTo(w * 0.1114, h * 0.4371);412		c.lineTo(w * 0.2871, h * 0.5312);413		c.lineTo(w * 0.1929, h * 0.6058);414		c.lineTo(w * 0.2271, h * 0.6705);415		c.lineTo(w * 0.17, h * 0.7147);416		c.lineTo(w * 0.0314, h * 0.6321);417		c.lineTo(0, h * 0.6246);418		c.close();419		c.fillAndStroke();420421		c.begin();422		c.moveTo(w * 0.48, h * 0.3121);423		c.lineTo(w * 0.5157, h * 0.3375);424		c.lineTo(w * 0.4314, h * 0.3982);425		c.lineTo(w * 0.3929, h * 0.3786);426		c.close();427		c.fillAndStroke();428429		c.begin();430		c.moveTo(w * 0.3086, h * 0.5179);431		c.lineTo(w * 0.53, h * 0.3518);432		c.lineTo(w * 0.5757, h * 0.3745);433		c.lineTo(w * 0.3479, h * 0.5411);434		c.close();435		c.fillAndStroke();436437		c.begin();438		c.moveTo(w * 0.5964, h * 0.3884);439		c.lineTo(w * 0.6736, h * 0.4277);440		c.lineTo(w * 0.445, h * 0.5991);441		c.lineTo(w * 0.3664, h * 0.5531);442		c.lineTo(w * 0.5057, h * 0.4545);443		c.lineTo(w * 0.5507, h * 0.4754);444		c.lineTo(w * 0.5571, h * 0.4723);445		c.lineTo(w * 0.5114, h * 0.4504);446		c.close();447		c.fillAndStroke();448449		c.begin();450		c.moveTo(w * 0.4793, h * 0.6161);451		c.lineTo(w * 0.6771, h * 0.4643);452		c.lineTo(w * 0.8086, h * 0.5326);453		c.lineTo(w * 0.7471, h * 0.5817);454		c.lineTo(w * 0.7214, h * 0.567);455		c.lineTo(w * 0.715, h * 0.571);456		c.lineTo(w * 0.7421, h * 0.5871);457		c.lineTo(w * 0.6014, h * 0.6933);458		c.close();459		c.fillAndStroke();460461		c.begin();462		c.moveTo(w, h * 0.4371);463		c.lineTo(w * 0.8443, h * 0.546);464		c.lineTo(w * 0.9071, h * 0.5701);465		c.lineTo(w, h * 0.5022);466		c.close();467		c.fillAndStroke();468469		c.begin();470		c.moveTo(w * 0.8407, h * 0.5504);471		c.lineTo(w * 0.8993, h * 0.5759);472		c.lineTo(w * 0.6757, h * 0.7416);473		c.lineTo(w * 0.6286, h * 0.7139);474		c.close();475		c.fillAndStroke();476477		c.begin();478		c.moveTo(w, h * 0.5321);479		c.lineTo(w * 0.6979, h * 0.7549);480		c.lineTo(w * 0.7457, h * 0.7781);481		c.lineTo(w * 0.9814, h * 0.6094);482		c.lineTo(w, h * 0.6067);483		c.close();484		c.fillAndStroke();485486		c.begin();487		c.moveTo(w, h * 0.6254);488		c.lineTo(w * 0.7664, h * 0.792);489		c.lineTo(w * 0.9586, h * 0.9062);490		c.lineTo(w, h * 0.8786);491		c.close();492		c.fillAndStroke();493494		c.begin();495		c.moveTo(w * 0.3093, h * 0.5464);496		c.lineTo(w * 0.4271, h * 0.6152);497		c.lineTo(w * 0.245, h * 0.7643);498		c.lineTo(w * 0.185, h * 0.7228);499		c.lineTo(w * 0.2493, h * 0.6728);500		c.lineTo(w * 0.2214, h * 0.6143);501		c.close();502		c.fillAndStroke();503504		c.begin();505		c.moveTo(0, h * 0.65);506		c.lineTo(w * 0.2179, h * 0.7826);507		c.lineTo(w * 0.1136, h * 0.8424);508		c.close();509		c.fillAndStroke();510511		c.begin();512		c.moveTo(0, h * 0.7272);513		c.lineTo(w * 0.0821, h * 0.859);514		c.lineTo(0, h * 0.9085);515		c.close();516		c.fillAndStroke();517518		c.begin();519		c.moveTo(w * 0.4529, h * 0.6366);520		c.lineTo(w * 0.575, h * 0.7143);521		c.lineTo(w * 0.39, h * 0.8621);522		c.lineTo(w * 0.2657, h * 0.7902);523		c.close();524		c.fillAndStroke();525526		c.begin();527		c.moveTo(0, h * 0.9415);528		c.lineTo(w * 0.1036, h * 0.8821);529		c.lineTo(w * 0.2343, h * 0.959);530		c.lineTo(w * 0.1721, h);531		c.lineTo(0, h);532		c.close();533		c.fillAndStroke();534535		c.begin();536		c.moveTo(w * 0.2586, h * 0.7951);537		c.lineTo(w * 0.3829, h * 0.8674);538		c.lineTo(w * 0.2543, h * 0.9451);539		c.lineTo(w * 0.1279, h * 0.8692);540		c.close();541		c.fillAndStroke();542543		c.begin();544		c.moveTo(w * 0.2836, h * 0.9639);545		c.lineTo(w * 0.4207, h * 0.8772);546		c.lineTo(w * 0.605, h * 0.7321);547		c.lineTo(w * 0.6521, h * 0.7634);548		c.lineTo(w * 0.3486, h);549		c.lineTo(w * 0.3393, h);550		c.close();551		c.fillAndStroke();552553		c.begin();554		c.moveTo(w * 0.3879, h);555		c.lineTo(w * 0.6721, h * 0.7759);556		c.lineTo(w * 0.7171, h * 0.7982);557		c.lineTo(w * 0.4564, h);558		c.close();559		c.fillAndStroke();560561		c.begin();562		c.moveTo(w * 0.4986, h);563		c.lineTo(w * 0.7386, h * 0.8125);564		c.lineTo(w * 0.9307, h * 0.925);565		c.lineTo(w * 0.8264, h);566		c.close();567		c.fillAndStroke();568569		c.begin();570		c.moveTo(w * 0.8671, h);571		c.lineTo(w * 0.9464, h * 0.9491);572		c.lineTo(w, h * 0.975);573		c.lineTo(w, h);574		c.close();575		c.fillAndStroke();576577		c.begin();578		c.moveTo(w * 0.2295, h);579		c.lineTo(w * 0.2648, h * 0.9792);580		c.lineTo(w * 0.2981, h);581		c.close();582		c.fillAndStroke();583584		w = wOld;585		h = hOld;586		c.translate( - w * 0.0625, - h * 0.15);587	}588589	c.setStrokeWidth(1);590	c.setStrokeColor('#18211b');591	c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7);592	c.stroke();593594	c.setStrokeWidth(1.5);595	c.setAlpha(0.8);596	c.setStrokeColor('#dddddd');597	c.roundrect(0, 0, w, h, rSize, rSize);598	c.stroke();599600	if (w > 50)601	{602		rSize = w < 100? 3 : 22.5;603		c.begin();604		c.setStrokeColor('#666666');605		c.roundrect(5, 5, w - 10, h - 10, rSize, rSize);606		c.stroke();607	}608	609	c.setAlpha(1);610	c.ellipse(w * 0.4875, h * 0.04125, w * 0.025, h * 0.0125);611	c.setStrokeWidth(2.5);612	c.setStrokeColor('#000000');613	c.setFillColor('#000099');614	c.fillAndStroke();615616	c.begin();617	c.setStrokeWidth(1.5);618	c.setFillColor('#444444');619	c.setStrokeColor('#333333');620	rSize = 4;621622	c.roundrect(w * 0.375, h * 0.075, w * 0.25, h * 0.01875, w * 0.02, h * 0.01);623	c.fillAndStroke();624625	c.setGradient('#bbbbbb', '#000000', w * 0.4, h * 0.875, w * 0.2, h * 0.1, mxConstants.DIRECTION_SOUTH, 1, 1);626	c.ellipse(w * 0.4, h * 0.875, w * 0.2, h * 0.1);627	c.fill();628629	c.setAlpha(0.5);630	c.ellipse(w * 0.404, h * 0.876, w * 0.19, h * 0.095);631	c.stroke();632633	c.begin();634	c.setAlpha(0.85);635	c.setFillColor('#000000');636	c.moveTo(w * 0.4025, h * 0.925);637	c.arcTo(w * 0.0975, h * 0.04625, 0, 0, 1, w * 0.5975, h * 0.925);638	c.arcTo(w * 0.2, h * 0.1, 0, 0, 1, w * 0.4025, h * 0.925);639	c.close();640	c.fillAndStroke();641642	c.begin();643	c.setAlpha(0.7);644	c.setStrokeWidth(1.5);645	c.setStrokeColor('#dddddd');646	rSize = 4;647	c.roundrect(w * 0.4575, h * 0.905, w * 0.0875, h * 0.04375, h * 0.00625, h * 0.00625);648	c.stroke();649};650651mxCellRenderer.registerShape(mxMockupC.SHAPE_IPHONE, mxShapeMockupiPhone);652653//**********************************************************************************************************************************************************654//iPhone flat colored background655//**********************************************************************************************************************************************************656/**657 * Extends mxShape.658 */659function mxShapeMockupiBgFlat(bounds, fill, stroke, strokewidth)660{661	mxShape.call(this);662	this.bounds = bounds;663	this.fill = fill;664	this.stroke = stroke;665	this.strokewidth = (strokewidth != null) ? strokewidth : 1;666};667668/**669 * Extends mxShape.670 */671mxUtils.extend(mxShapeMockupiBgFlat, mxShape);672673/**674 * Function: paintVertexShape675 * 676 * Paints the vertex shape.677 */678mxShapeMockupiBgFlat.prototype.paintVertexShape = function(c, x, y, w, h)679{680	c.translate(x, y);681	this.background(c, x, y, w, h);682};683684mxShapeMockupiBgFlat.prototype.background = function(c, x, y, w, h)685{686	c.begin();687	c.rect(0, 0, w, h);688	c.fillAndStroke();689};690691mxCellRenderer.registerShape(mxMockupC.SHAPE_IBG_FLAT, mxShapeMockupiBgFlat);692693//**********************************************************************************************************************************************************694//iPhone striped background695//**********************************************************************************************************************************************************696/**697 * Extends mxShape.698 */699function mxShapeMockupiBgStriped(bounds, fill, stroke, strokewidth)700{701	mxShape.call(this);702	this.bounds = bounds;703	this.fill = fill;704	this.stroke = stroke;705	this.strokewidth = (strokewidth != null) ? strokewidth : 1;706};707708/**709 * Extends mxShape.710 */711mxUtils.extend(mxShapeMockupiBgStriped, mxShape);712713/**714 * Function: paintVertexShape715 * 716 * Paints the vertex shape.717 */718mxShapeMockupiBgStriped.prototype.paintVertexShape = function(c, x, y, w, h)719{720	c.translate(x, y);721	this.background(c, x, y, w, h);722	c.setShadow(false);723	this.foreground(c, x, y, w, h);724};725726mxShapeMockupiBgStriped.prototype.background = function(c, x, y, w, h)727{728	c.setStrokeWidth(1);729	c.begin();730	c.rect(0, 0, w, h);731	c.fillAndStroke();732};733734mxShapeMockupiBgStriped.prototype.foreground = function(c, x, y, w, h)735{736	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '');737	var strokeColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_STROKECOLOR2, '');738739	c.setStrokeColor(strokeColor2);740	var i = 5;741	c.begin();742743	while (i < w)744	{745		c.moveTo(i, 0);746		c.lineTo(i, h);747		i = i + 5;748	}749750	c.stroke();751752	c.setStrokeColor(strokeColor);753	c.begin();754	c.rect(0, 0, w, h);755	c.stroke();756};757758mxCellRenderer.registerShape(mxMockupC.SHAPE_IBG_STRIPED, mxShapeMockupiBgStriped);759760//**********************************************************************************************************************************************************761//iPhone map background762//**********************************************************************************************************************************************************763/**764 * Extends mxShape.765 */766function mxShapeMockupiBgMap(bounds, fill, stroke, strokewidth)767{768	mxShape.call(this);769	this.bounds = bounds;770	this.fill = fill;771	this.stroke = stroke;772	this.strokewidth = (strokewidth != null) ? strokewidth : 1;773};774775/**776 * Extends mxShape.777 */778mxUtils.extend(mxShapeMockupiBgMap, mxShape);779780/**781 * Function: paintVertexShape782 * 783 * Paints the vertex shape.784 */785mxShapeMockupiBgMap.prototype.paintVertexShape = function(c, x, y, w, h)786{787	c.translate(x, y);788	this.background(c, x, y, w, h);789	c.setShadow(false);790	this.foreground(c, x, y, w, h);791};792793mxShapeMockupiBgMap.prototype.background = function(c, x, y, w, h)794{795	c.begin();796	c.rect(0, 0, w, h);797	c.fillAndStroke();798};799800mxShapeMockupiBgMap.prototype.foreground = function(c, x, y, w, h)801{802	var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '');803	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '');804	var strokeColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_STROKECOLOR2, '');805806	c.setFillColor(fillColor2);807	c.setStrokeColor(strokeColor2);808	c.setStrokeWidth(0.5);809810	c.begin();811	c.moveTo(0, 0);812	c.lineTo(w * 0.1171, 0);813	c.lineTo(w * 0.1136, h * 0.0438);814	c.lineTo(w * 0.0993, h * 0.054);815	c.lineTo(0, h * 0.0446);816	c.close();817	c.fillAndStroke();818819	c.begin();820	c.moveTo(w * 0.1993, 0);821	c.lineTo(w * 0.1914, h * 0.03884);822	c.lineTo(w * 0.1536, h * 0.0362);823	c.lineTo(w * 0.1586, 0);824	c.close();825	c.fillAndStroke();826827	c.begin();828	c.moveTo(w * 0.24, 0);829	c.lineTo(w * 0.2257, h * 0.054);830	c.lineTo(w * 0.2414, h * 0.0674);831	c.lineTo(w * 0.4707, h * 0.0835);832	c.lineTo(w * 0.5264, h * 0.0906);833	c.lineTo(w * 0.6429, h * 0.0929);834	c.arcTo(w * 0.0857, h * 0.0536, 0, 0, 0, w * 0.7193, h * 0.0621);835	c.arcTo(w * 0.48, h * 0.2143, 0, 0, 0, w * 0.7286, 0);836	c.close();837	c.fillAndStroke();838839	c.begin();840	c.moveTo(w * 0.8, 0);841	c.lineTo(w * 0.7886, h * 0.04554);842	c.arcTo(w * 0.0857, h * 0.0536, 0, 0, 0, w * 0.8164, h * 0.0875);843	c.arcTo(w * 0.1429, h * 0.0893, 0, 0, 0, w * 0.88, h * 0.1036);844	c.lineTo(w, h * 0.1112);845	c.lineTo(w, 0);846	c.close();847	c.fillAndStroke();848849	c.begin();850	c.moveTo(0, h * 0.0933);851	c.lineTo(w * 0.08, h * 0.1036);852	c.lineTo(w * 0.1021, h * 0.1246);853	c.lineTo(w * 0.1007, h * 0.1768);854	c.lineTo(w * 0.0471, h * 0.2241);855	c.lineTo(0, h * 0.2527);856	c.close();857	c.fillAndStroke();858859	c.ellipse(w * 0.1214, h * 0.0603, w * 0.0843, h * 0.0576);860	c.fillAndStroke();861862	c.begin();863	c.moveTo(w * 0.1293, h * 0.1924);864	c.lineTo(w * 0.1729, h * 0.142);865	c.lineTo(w * 0.1407, h * 0.1411);866	c.lineTo(w * 0.14, h * 0.1777);867	c.close();868	c.fillAndStroke();869870	c.begin();871	c.moveTo(w * 0.4586, h * 0.1241);872	c.lineTo(w * 0.455, h * 0.1835);873	c.lineTo(w * 0.3893, h * 0.2246);874	c.lineTo(w * 0.2171, h * 0.1362);875	c.lineTo(w * 0.2171, h * 0.1308);876	c.lineTo(w * 0.2293, h * 0.1214);877	c.lineTo(w * 0.2857, h * 0.1174);878	c.close();879	c.fillAndStroke();880881	c.begin();882	c.moveTo(w * 0.5079, h * 0.1134);883	c.lineTo(w * 0.7307, h * 0.1223);884	c.lineTo(w * 0.7279, h * 0.1625);885	c.lineTo(w * 0.715, h * 0.1772);886	c.lineTo(w * 0.6929, h * 0.1688);887	c.lineTo(w * 0.625, h * 0.1795);888	c.lineTo(w * 0.4779, h * 0.2835);889	c.lineTo(w * 0.395, h * 0.2299);890	c.lineTo(w * 0.4657, h * 0.1826);891	c.lineTo(w * 0.4707, h * 0.1223);892	c.close();893	c.fillAndStroke();894895	c.begin();896	c.moveTo(w, h * 0.1362);897	c.lineTo(w * 0.7643, h * 0.1237);898	c.lineTo(w * 0.7543, h * 0.1562);899	c.lineTo(w * 0.7643, h * 0.1585);900	c.lineTo(w * 0.9186, h * 0.2366);901	c.lineTo(w, h * 0.1732);902	c.close();903	c.fillAndStroke();904905	c.begin();906	c.moveTo(w * 0.2079, h * 0.1545);907	c.lineTo(w * 0.3886, h * 0.2536);908	c.lineTo(w * 0.3414, h * 0.2933);909	c.lineTo(w * 0.1743, h * 0.1969);910	c.close();911	c.fillAndStroke();912913	c.begin();914	c.moveTo(w * 0.1579, h * 0.2134);915	c.lineTo(w * 0.3221, h * 0.3067);916	c.lineTo(w * 0.2957, h * 0.3237);917	c.lineTo(w * 0.1157, h * 0.2424);918	c.close();919	c.fillAndStroke();920921	c.begin();922	c.moveTo(w * 0.405, h * 0.2656);923	c.lineTo(w * 0.31, h * 0.3353);924	c.lineTo(w * 0.3693, h * 0.3661);925	c.lineTo(w * 0.4571, h * 0.2982);926	c.close();927	c.fillAndStroke();928929	c.begin();930	c.moveTo(w * 0.7121, h * 0.1848);931	c.lineTo(w * 0.6879, h * 0.1754);932	c.lineTo(w * 0.6329, h * 0.1844);933	c.lineTo(w * 0.61, h * 0.2018);934	c.lineTo(w * 0.6207, h * 0.2085);935	c.lineTo(w * 0.4986, h * 0.2982);936	c.lineTo(w * 0.535, h * 0.3237);937	c.close();938	c.fillAndStroke();939940	c.begin();941	c.moveTo(w * 0.5557, h * 0.3379);942	c.lineTo(w * 0.7464, h * 0.1826);943	c.lineTo(w * 0.8036, h * 0.2076);944	c.lineTo(w * 0.595, h * 0.3616);945	c.close();946	c.fillAndStroke();947948	c.begin();949	c.moveTo(w * 0.8293, h * 0.2188);950	c.lineTo(w * 0.8979, h * 0.2509);951	c.lineTo(w * 0.6936, h * 0.4125);952	c.lineTo(w * 0.6171, h * 0.3737);953	c.close();954	c.fillAndStroke();955956	c.begin();957	c.moveTo(w, h * 0.2138);958	c.lineTo(w * 0.6821, h * 0.4603);959	c.lineTo(w * 0.815, h * 0.5277);960	c.lineTo(w, h * 0.4);961	c.close();962	c.fillAndStroke();963964	c.begin();965	c.moveTo(0, h * 0.317);966	c.lineTo(w * 0.0971, h * 0.2554);967	c.lineTo(w * 0.4121, h * 0.4143);968	c.lineTo(w * 0.3736, h * 0.4415);969	c.lineTo(w * 0.315, h * 0.4076);970	c.lineTo(w * 0.3093, h * 0.4116);971	c.lineTo(w * 0.3686, h * 0.4455);972	c.lineTo(w * 0.285, h * 0.5045);973	c.lineTo(w * 0.1114, h * 0.4134);974	c.lineTo(w * 0.025, h * 0.4603);975	c.lineTo(w * 0.0371, h * 0.4723);976	c.lineTo(w * 0.1114, h * 0.4371);977	c.lineTo(w * 0.2871, h * 0.5312);978	c.lineTo(w * 0.1929, h * 0.6058);979	c.lineTo(w * 0.2271, h * 0.6705);980	c.lineTo(w * 0.17, h * 0.7147);981	c.lineTo(w * 0.0314, h * 0.6321);982	c.lineTo(0, h * 0.6246);983	c.close();984	c.fillAndStroke();985986	c.begin();987	c.moveTo(w * 0.48, h * 0.3121);988	c.lineTo(w * 0.5157, h * 0.3375);989	c.lineTo(w * 0.4314, h * 0.3982);990	c.lineTo(w * 0.3929, h * 0.3786);991	c.close();992	c.fillAndStroke();993994	c.begin();995	c.moveTo(w * 0.3086, h * 0.5179);996	c.lineTo(w * 0.53, h * 0.3518);997	c.lineTo(w * 0.5757, h * 0.3745);998	c.lineTo(w * 0.3479, h * 0.5411);999	c.close();1000	c.fillAndStroke();10011002	c.begin();1003	c.moveTo(w * 0.5964, h * 0.3884);1004	c.lineTo(w * 0.6736, h * 0.4277);1005	c.lineTo(w * 0.445, h * 0.5991);1006	c.lineTo(w * 0.3664, h * 0.5531);1007	c.lineTo(w * 0.5057, h * 0.4545);1008	c.lineTo(w * 0.5507, h * 0.4754);1009	c.lineTo(w * 0.5571, h * 0.4723);1010	c.lineTo(w * 0.5114, h * 0.4504);1011	c.close();1012	c.fillAndStroke();10131014	c.begin();1015	c.moveTo(w * 0.4793, h * 0.6161);1016	c.lineTo(w * 0.6771, h * 0.4643);1017	c.lineTo(w * 0.8086, h * 0.5326);1018	c.lineTo(w * 0.7471, h * 0.5817);1019	c.lineTo(w * 0.7214, h * 0.567);1020	c.lineTo(w * 0.715, h * 0.571);1021	c.lineTo(w * 0.7421, h * 0.5871);1022	c.lineTo(w * 0.6014, h * 0.6933);1023	c.close();1024	c.fillAndStroke();10251026	c.begin();1027	c.moveTo(w, h * 0.4371);1028	c.lineTo(w * 0.8443, h * 0.546);1029	c.lineTo(w * 0.9071, h * 0.5701);1030	c.lineTo(w, h * 0.5022);1031	c.close();1032	c.fillAndStroke();10331034	c.begin();1035	c.moveTo(w * 0.8407, h * 0.5504);1036	c.lineTo(w * 0.8993, h * 0.5759);1037	c.lineTo(w * 0.6757, h * 0.7416);1038	c.lineTo(w * 0.6286, h * 0.7139);1039	c.close();1040	c.fillAndStroke();10411042	c.begin();1043	c.moveTo(w, h * 0.5321);1044	c.lineTo(w * 0.6979, h * 0.7549);1045	c.lineTo(w * 0.7457, h * 0.7781);1046	c.lineTo(w * 0.9814, h * 0.6094);1047	c.lineTo(w, h * 0.6067);1048	c.close();1049	c.fillAndStroke();10501051	c.begin();1052	c.moveTo(w, h * 0.6254);1053	c.lineTo(w * 0.7664, h * 0.792);1054	c.lineTo(w * 0.9586, h * 0.9062);1055	c.lineTo(w, h * 0.8786);1056	c.close();1057	c.fillAndStroke();10581059	c.begin();1060	c.moveTo(w * 0.3093, h * 0.5464);1061	c.lineTo(w * 0.4271, h * 0.6152);1062	c.lineTo(w * 0.245, h * 0.7643);1063	c.lineTo(w * 0.185, h * 0.7228);1064	c.lineTo(w * 0.2493, h * 0.6728);1065	c.lineTo(w * 0.2214, h * 0.6143);1066	c.close();1067	c.fillAndStroke();10681069	c.begin();1070	c.moveTo(0, h * 0.65);1071	c.lineTo(w * 0.2179, h * 0.7826);1072	c.lineTo(w * 0.1136, h * 0.8424);1073	c.close();1074	c.fillAndStroke();10751076	c.begin();1077	c.moveTo(0, h * 0.7272);1078	c.lineTo(w * 0.0821, h * 0.859);1079	c.lineTo(0, h * 0.9085);1080	c.close();1081	c.fillAndStroke();10821083	c.begin();1084	c.moveTo(w * 0.4529, h * 0.6366);1085	c.lineTo(w * 0.575, h * 0.7143);1086	c.lineTo(w * 0.39, h * 0.8621);1087	c.lineTo(w * 0.2657, h * 0.7902);1088	c.close();1089	c.fillAndStroke();10901091	c.begin();1092	c.moveTo(0, h * 0.9415);1093	c.lineTo(w * 0.1036, h * 0.8821);1094	c.lineTo(w * 0.2343, h * 0.959);1095	c.lineTo(w * 0.1721, h);1096	c.lineTo(0, h);1097	c.close();1098	c.fillAndStroke();10991100	c.begin();1101	c.moveTo(w * 0.2586, h * 0.7951);1102	c.lineTo(w * 0.3829, h * 0.8674);1103	c.lineTo(w * 0.2543, h * 0.9451);1104	c.lineTo(w * 0.1279, h * 0.8692);1105	c.close();1106	c.fillAndStroke();11071108	c.begin();1109	c.moveTo(w * 0.2836, h * 0.9639);1110	c.lineTo(w * 0.4207, h * 0.8772);1111	c.lineTo(w * 0.605, h * 0.7321);1112	c.lineTo(w * 0.6521, h * 0.7634);1113	c.lineTo(w * 0.3486, h);1114	c.lineTo(w * 0.3393, h);1115	c.close();1116	c.fillAndStroke();11171118	c.begin();1119	c.moveTo(w * 0.3879, h);1120	c.lineTo(w * 0.6721, h * 0.7759);1121	c.lineTo(w * 0.7171, h * 0.7982);1122	c.lineTo(w * 0.4564, h);1123	c.close();1124	c.fillAndStroke();11251126	c.begin();1127	c.moveTo(w * 0.4986, h);1128	c.lineTo(w * 0.7386, h * 0.8125);1129	c.lineTo(w * 0.9307, h * 0.925);1130	c.lineTo(w * 0.8264, h);1131	c.close();1132	c.fillAndStroke();11331134	c.begin();1135	c.moveTo(w * 0.8671, h);1136	c.lineTo(w * 0.9464, h * 0.9491);1137	c.lineTo(w, h * 0.975);1138	c.lineTo(w, h);1139	c.close();1140	c.fillAndStroke();11411142	c.begin();1143	c.moveTo(w * 0.2295, h);1144	c.lineTo(w * 0.2648, h * 0.9792);1145	c.lineTo(w * 0.2981, h);1146	c.close();1147	c.fillAndStroke();11481149	c.setStrokeWidth(1);1150	c.setStrokeColor(strokeColor);1151	c.begin();1152	c.rect(0, 0, w, h);1153	c.stroke();1154};11551156mxCellRenderer.registerShape(mxMockupC.SHAPE_IBG_MAP, mxShapeMockupiBgMap);11571158//**********************************************************************************************************************************************************1159//Vertical Button Bar1160//**********************************************************************************************************************************************************1161/**1162 * Extends mxShape.1163 */1164function mxShapeMockupiButtonBar(bounds, fill, stroke, strokewidth)1165{1166	mxShape.call(this);1167	this.bounds = bounds;1168	this.fill = fill;1169	this.stroke = stroke;1170	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1171};11721173/**1174 * Extends mxShape.1175 */1176mxUtils.extend(mxShapeMockupiButtonBar, mxShape);11771178mxShapeMockupiButtonBar.prototype.customProperties = [1179	{name: 'buttonText', dispName: 'Labels', type: 'string'},1180	{name: 'textColor', dispName: 'Text Color', type: 'color'},1181	{name: 'textColor2', dispName: 'Text2 Color', type: 'color'},1182	{name: 'strokeColor2', dispName: 'Stroke2 Color', type: 'color'}1183];11841185/**1186 * Function: paintVertexShape1187 * 1188 * Paints the vertex shape.1189 */1190mxShapeMockupiButtonBar.prototype.paintVertexShape = function(c, x, y, w, h)1191{1192	var textStrings = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, '+Button 1, Button 2, Button 3').toString()).split(',');1193	var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR, '#666666');1194	var selectedFontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#ffffff');1195	var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17').toString();1196	var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');1197	var separatorColor = mxUtils.getValue(this.style, mxMockupC.STYLE_STROKECOLOR2, '#c4c4c4');1198	var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');1199	var buttonNum = textStrings.length;1200	var maxButtonWidth = 0;1201	var selectedButton = -1;1202	var rSize = 2.5; //rounding size1203	var labelOffset = 2.5;12041205	for (var i = 0; i < buttonNum; i++)1206	{1207		var buttonText = textStrings[i];12081209		if(buttonText.charAt(0) === mxMockupC.SELECTED)1210		{1211			buttonText = textStrings[i].substring(1);1212			selectedButton = i;1213		}12141215		var currWidth = mxUtils.getSizeForString(buttonText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;12161217		if (currWidth > maxButtonWidth)1218		{1219			maxButtonWidth = currWidth;1220		}1221	}12221223	var minButtonHeight =  fontSize * 1.5;1224	var minH = buttonNum * minButtonHeight;1225	var trueH = Math.max(h, minH);1226	var minW = 2 * labelOffset + maxButtonWidth;1227	var trueW = Math.max(w, minW);12281229	c.translate(x, y);12301231	this.background(c, trueW, trueH, rSize, buttonNum, labelOffset, buttonNum * minButtonHeight, frameColor, separatorColor, bgColor, selectedButton, minButtonHeight);1232	c.setShadow(false);12331234	this.foreground(c, trueW, trueH, rSize, buttonNum, labelOffset, buttonNum * minButtonHeight, frameColor, separatorColor, bgColor, selectedButton, minButtonHeight);1235	var currWidth = 0;12361237	for (var i = 0; i < buttonNum; i++)1238	{1239		if (i === selectedButton)1240		{1241			c.setFontColor(selectedFontColor);1242		}1243		else1244		{1245			c.setFontColor(fontColor);1246		}12471248		currWidth = currWidth + labelOffset;1249		var currHeight = (i * minButtonHeight + minButtonHeight * 0.5) * trueH / minH;1250		this.buttonText(c, trueW, currHeight, textStrings[i], fontSize, separatorColor);1251	}1252};12531254mxShapeMockupiButtonBar.prototype.background = function(c, w, h, rSize, buttonNum, labelOffset, minH, frameColor, separatorColor, bgColor, selectedButton, minButtonHeight)1255{1256	c.begin();1257	c.setStrokeWidth(1);12581259	//draw the frame1260	c.setStrokeColor(frameColor);1261	c.setFillColor(bgColor);1262	c.moveTo(0, rSize);1263	c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);1264	c.lineTo(w - rSize, 0);1265	c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);1266	c.lineTo(w, h - rSize);1267	c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);1268	c.lineTo(rSize, h);1269	c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);1270	c.close();1271	c.fillAndStroke();1272};12731274mxShapeMockupiButtonBar.prototype.foreground = function(c, w, h, rSize, buttonNum, labelOffset, minH, frameColor, separatorColor, bgColor, selectedButton, minButtonHeight)1275{1276	//draw the button separators1277	var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1');1278	c.setStrokeWidth(strokeWidth);1279	c.setStrokeColor(separatorColor);1280	c.begin();12811282	for (var i = 1; i < buttonNum; i++)1283	{1284		if (i !== selectedButton && i !== (selectedButton + 1))1285		{1286			var currHeight = i * minButtonHeight * h / minH;12871288			c.moveTo(0, currHeight);1289			c.lineTo(w, currHeight);1290		}1291	}12921293	c.stroke();12941295	//draw the selected button1296	c.setStrokeColor(mxConstants.NONE);12971298	if (selectedButton === 0)1299	{1300		// we draw a path for the first button1301		c.begin();1302		var buttonBottom = minButtonHeight * h / minH;1303		c.setGradient('#5D7585', '#008cff', 0, 0, w, buttonBottom, mxConstants.DIRECTION_SOUTH, 1, 1);1304		c.moveTo(0, rSize);1305		c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);1306		c.lineTo(w - rSize, 0);1307		c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);1308		c.lineTo(w, buttonBottom);1309		c.lineTo(0, buttonBottom);1310		c.close();1311		c.fill();1312	}1313	else if (selectedButton === buttonNum - 1)1314	{1315		// we draw a path for the last button1316		c.begin();1317		var buttonTop = h - minButtonHeight * h / minH;1318		c.setGradient('#5D7585', '#008cff', 0, buttonTop, w, h - buttonTop, mxConstants.DIRECTION_SOUTH, 1, 1);1319		c.moveTo(0, buttonTop);1320		c.lineTo(w, buttonTop);1321		c.lineTo(w, h - rSize);1322		c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);1323		c.lineTo(rSize, h);1324		c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);1325		c.close();1326		c.fill();1327	}1328	else if (selectedButton !== -1)1329	{1330		// we draw a path rectangle for one of the buttons in the middle1331		c.begin();1332		var buttonTop = minButtonHeight * selectedButton * h / minH;1333		var buttonBottom = minButtonHeight * (selectedButton + 1) * h / minH;1334		c.setGradient('#5D7585', '#008cff', 0, buttonTop, w, buttonBottom - buttonTop, mxConstants.DIRECTION_SOUTH, 1, 1);1335		c.moveTo(0, buttonTop);1336		c.lineTo(w, buttonTop);1337		c.lineTo(w, buttonBottom);1338		c.lineTo(0, buttonBottom);1339		c.close();1340		c.fill();1341	}13421343//	//draw the frame again, to achieve a nicer effect1344	c.begin();1345	c.setStrokeColor(frameColor);1346	c.setFillColor(bgColor);1347	c.moveTo(0, rSize);1348	c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);1349	c.lineTo(w - rSize, 0);1350	c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);1351	c.lineTo(w, h - rSize);1352	c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);1353	c.lineTo(rSize, h);1354	c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);1355	c.close();1356	c.stroke();1357};13581359mxShapeMockupiButtonBar.prototype.buttonText = function(c, w, h, textString, fontSize, separatorColor)1360{1361	if(textString.charAt(0) === mxMockupC.SELECTED)1362	{1363		textString = textString.substring(1);1364	}13651366	c.setFontSize(fontSize);1367	c.text(10, h, 0, 0, textString, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);13681369	var mSize = fontSize * 0.5;1370	c.setStrokeWidth(fontSize * 0.3);1371	c.setStrokeColor(separatorColor);1372	c.begin();1373	c.moveTo(w - 20 - mSize, h - mSize);1374	c.lineTo(w - 20, h);1375	c.lineTo(w - 20 - mSize, h + mSize);1376	c.stroke();1377};13781379mxCellRenderer.registerShape(mxMockupC.SHAPE_IBUTTON_BAR, mxShapeMockupiButtonBar);13801381//**********************************************************************************************************************************************************1382//iPhone Application Bar1383//**********************************************************************************************************************************************************1384/**1385 * Extends mxShape.1386 */1387function mxShapeMockupiAppBar(bounds, fill, stroke, strokewidth)1388{1389	mxShape.call(this);1390	this.bounds = bounds;1391	this.fill = fill;1392	this.stroke = stroke;1393	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1394};13951396/**1397 * Extends mxShape.1398 */1399mxUtils.extend(mxShapeMockupiAppBar, mxShape);14001401/**1402 * Function: paintVertexShape1403 * 1404 * Paints the vertex shape.1405 */1406mxShapeMockupiAppBar.prototype.paintVertexShape = function(c, x, y, w, h)1407{1408	c.translate(x, y);1409	this.background(c, x, y, w, h);1410	c.setShadow(false);1411	this.foreground(c, x, y, w, h);1412};14131414mxShapeMockupiAppBar.prototype.background = function(c, x, y, w, h)1415{1416	c.setGradient('#eeeeee', '#999999', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);1417	c.rect(0, 0, w, h);1418	c.fill();1419};14201421mxShapeMockupiAppBar.prototype.foreground = function(c, x, y, w, h)1422{1423	c.setFillColor('#0099ff');1424	c.rect(5, h * 0.5 + 1.75, 1.5, 2.5);1425	c.fill();14261427	c.rect(7, h * 0.5 + 0.75, 1.5, 3.5);1428	c.fill();14291430	c.rect(9, h * 0.5 - 0.25, 1.5, 4.5);1431	c.fill();14321433	c.rect(11, h * 0.5 - 1.25, 1.5, 5.5);1434	c.fill();14351436	c.rect(13, h * 0.5 - 2.25, 1.5, 6.5);1437	c.fill();14381439	c.rect(15, h * 0.5 - 3.25, 1.5, 7.5);1440	c.fill();14411442	c.setFillColor('#999999');1443	c.ellipse(w - 56.5, h * 0.5 - 4, 8, 8);1444	c.fill();14451446	c.setStrokeColor('#cccccc');1447	c.begin();1448	c.moveTo(w - 52.5, h * 0.5 - 3);1449	c.lineTo(w - 52.5, h * 0.5);1450	c.lineTo(w - 54.5, h * 0.5);1451	c.stroke();14521453	c.setStrokeWidth(0.5);1454	c.setStrokeColor('#333333');1455	c.setFillColor('#990000');1456	c.begin();1457	c.moveTo(w - 45.5, h * 0.5);1458	c.lineTo(w - 37.5, h * 0.5 - 5);1459	c.lineTo(w - 41.5, h * 0.5 + 4);1460	c.lineTo(w - 42, h * 0.5 + 0.5);1461	c.close();1462	c.fillAndStroke();14631464	c.setFillColor('#999999');1465	c.setStrokeColor('#999999');1466	c.begin();1467	c.moveTo(w - 28.5, h * 0.5 + 3.5);1468	c.arcTo(3.5, 3.5, 0, 1, 1, w - 26.5, h * 0.5 + 1);1469	c.stroke();14701471	c.begin();1472	c.moveTo(w - 27.25, h * 0.5 + 0.25);1473	c.lineTo(w - 25.75, h * 0.5 + 0.25);1474	c.lineTo(w - 26.5, h * 0.5 + 1.5);1475	c.close();1476	c.fillAndStroke();14771478	c.begin();1479	c.moveTo(w - 31, h * 0.5 - 0.5);1480	c.arcTo(1, 1.5, 0, 0, 1, w - 29, h * 0.5 - 0.5);1481	c.stroke();14821483	c.rect(w - 31.5, h * 0.5 - 0.5, 3, 2);1484	c.fillAndStroke();14851486	c.setGradient('#eeeeee', '#444444', w - 20, h * 0.5 - 3, 16.5, 6, mxConstants.DIRECTION_NORTH, 1, 1);1487	c.begin();1488	c.moveTo(w - 20, h * 0.5 - 3);1489	c.lineTo(w - 5, h * 0.5 - 3);1490	c.lineTo(w - 5, h * 0.5 - 1);1491	c.lineTo(w - 3.5, h * 0.5 - 1);1492	c.lineTo(w - 3.5, h * 0.5 + 1);1493	c.lineTo(w - 5, h * 0.5 + 1);1494	c.lineTo(w - 5, h * 0.5 + 3);1495	c.lineTo(w - 20, h * 0.5 + 3);1496	c.close();1497	c.fill();14981499	c.setGradient('#E2FFEB', '#008215', w - 20, h * 0.5 - 3, 10, 6, mxConstants.DIRECTION_SOUTH, 1, 1);1500	c.begin();1501	c.moveTo(w - 20, h * 0.5 - 3);1502	c.lineTo(w - 10, h * 0.5 - 3);1503	c.lineTo(w - 10, h * 0.5 + 3);1504	c.lineTo(w - 20, h * 0.5 + 3);1505	c.close();1506	c.fill();15071508	c.setStrokeColor('#666666');1509	c.begin();1510	c.moveTo(w - 20, h * 0.5 - 3);1511	c.lineTo(w - 5, h * 0.5 - 3);1512	c.lineTo(w - 5, h * 0.5 - 1);1513	c.lineTo(w - 3.5, h * 0.5 - 1);1514	c.lineTo(w - 3.5, h * 0.5 + 1);1515	c.lineTo(w - 5, h * 0.5 + 1);1516	c.lineTo(w - 5, h * 0.5 + 3);1517	c.lineTo(w - 20, h * 0.5 + 3);1518	c.close();1519	c.stroke();15201521};15221523mxCellRenderer.registerShape(mxMockupC.SHAPE_IAPP_BAR, mxShapeMockupiAppBar);15241525//**********************************************************************************************************************************************************1526//iPhone Top Bar (LEGACY)1527//**********************************************************************************************************************************************************1528/**1529 * Extends mxShape.1530 */1531function mxShapeMockupiTopBar(bounds, fill, stroke, strokewidth)1532{1533	mxShape.call(this);1534	this.bounds = bounds;1535	this.fill = fill;1536	this.stroke = stroke;1537	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1538};15391540/**1541 * Extends mxShape.1542 */1543mxUtils.extend(mxShapeMockupiTopBar, mxShape);15441545/**1546 * Function: paintVertexShape1547 * 1548 * Paints the vertex shape.1549 */1550mxShapeMockupiTopBar.prototype.paintVertexShape = function(c, x, y, w, h)1551{1552	c.translate(x, y);1553	this.background(c, x, y, w, h);1554	c.setShadow(false);1555	this.foreground(c, x, y, w, h);1556};15571558mxShapeMockupiTopBar.prototype.background = function(c, x, y, w, h)1559{1560	c.setAlpha(0.5);1561	c.setFillColor('#999999');1562	c.rect(0, 0, w, h);1563	c.fill();1564};15651566mxShapeMockupiTopBar.prototype.foreground = function(c, x, y, w, h)1567{1568	c.setFillColor('#cccccc');1569	c.setStrokeColor('#cccccc');1570	c.setFontColor('#cccccc');1571	c.setFontSize(7.5);15721573	c.rect(5, h * 0.5 + 1.75, 1.5, 2.5);1574	c.fill();15751576	c.rect(7, h * 0.5 + 0.75, 1.5, 3.5);1577	c.fill();15781579	c.rect(9, h * 0.5 - 0.25, 1.5, 4.5);1580	c.fill();15811582	c.rect(11, h * 0.5 - 1.25, 1.5, 5.5);1583	c.fill();15841585	c.rect(13, h * 0.5 - 2.25, 1.5, 6.5);1586	c.fill();15871588	c.rect(15, h * 0.5 - 3.25, 1.5, 7.5);1589	c.fill();15901591	c.text(18, h * 0.5, 0, 0, 'CARRIER', mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1592	c.text(w * 0.5, h * 0.5, 0, 0, '11:15AM', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);15931594	c.begin();1595	c.moveTo(w - 19, h * 0.5 - 2);1596	c.lineTo(w - 10, h * 0.5 - 2);1597	c.lineTo(w - 10, h * 0.5 + 2);1598	c.lineTo(w - 19, h * 0.5 + 2);1599	c.close();1600	c.fill();16011602	c.begin();1603	c.moveTo(w - 20, h * 0.5 - 3);1604	c.lineTo(w - 5, h * 0.5 - 3);1605	c.lineTo(w - 5, h * 0.5 - 1);1606	c.lineTo(w - 3.5, h * 0.5 - 1);1607	c.lineTo(w - 3.5, h * 0.5 + 1);1608	c.lineTo(w - 5, h * 0.5 + 1);1609	c.lineTo(w - 5, h * 0.5 + 3);1610	c.lineTo(w - 20, h * 0.5 + 3);1611	c.close();1612	c.stroke();1613};16141615mxCellRenderer.registerShape(mxMockupC.SHAPE_ITOP_BAR, mxShapeMockupiTopBar);16161617//**********************************************************************************************************************************************************1618//iPhone Top Bar 21619//**********************************************************************************************************************************************************1620/**1621* Extends mxShape.1622*/1623function mxShapeMockupiTopBar2(bounds, fill, stroke, strokewidth)1624{1625	mxShape.call(this);1626	this.bounds = bounds;1627	this.fill = fill;1628	this.stroke = stroke;1629	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1630};16311632/**1633* Extends mxShape.1634*/1635mxUtils.extend(mxShapeMockupiTopBar2, mxShape);16361637mxShapeMockupiTopBar2.prototype.cst = {1638		SHAPE_ITOP_BAR2 : 'mxgraph.ios.iTopBar2'1639};164016411642/**1643* Function: paintVertexShape1644* 1645* Paints the vertex shape.1646*/1647mxShapeMockupiTopBar2.prototype.paintVertexShape = function(c, x, y, w, h)1648{1649	c.translate(x, y);1650	this.background(c, x, y, w, h);1651	c.setShadow(false);1652	this.foreground(c, x, y, w, h);1653};1654mxShapeMockupiTopBar2.prototype.background = function(c, x, y, w, h)1655{1656	c.rect(0, 0, w, h);1657	c.fill();1658};16591660mxShapeMockupiTopBar2.prototype.foreground = function(c, x, y, w, h)1661{1662	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');1663	c.setFillColor(strokeColor);1664	c.setStrokeColor(strokeColor);16651666	c.rect(5, h * 0.5 + 1.75, 1.5, 2.5);1667	c.fill();16681669	c.rect(7, h * 0.5 + 0.75, 1.5, 3.5);1670	c.fill();16711672	c.rect(9, h * 0.5 - 0.25, 1.5, 4.5);1673	c.fill();16741675	c.rect(11, h * 0.5 - 1.25, 1.5, 5.5);1676	c.fill();16771678	c.rect(13, h * 0.5 - 2.25, 1.5, 6.5);1679	c.fill();16801681	c.rect(15, h * 0.5 - 3.25, 1.5, 7.5);1682	c.fill();16831684	c.begin();1685	c.moveTo(w - 19, h * 0.5 - 2);1686	c.lineTo(w - 10, h * 0.5 - 2);1687	c.lineTo(w - 10, h * 0.5 + 2);1688	c.lineTo(w - 19, h * 0.5 + 2);1689	c.close();1690	c.fill();16911692	c.begin();1693	c.moveTo(w - 20, h * 0.5 - 3);1694	c.lineTo(w - 5, h * 0.5 - 3);1695	c.lineTo(w - 5, h * 0.5 - 1);1696	c.lineTo(w - 3.5, h * 0.5 - 1);1697	c.lineTo(w - 3.5, h * 0.5 + 1);1698	c.lineTo(w - 5, h * 0.5 + 1);1699	c.lineTo(w - 5, h * 0.5 + 3);1700	c.lineTo(w - 20, h * 0.5 + 3);1701	c.close();1702	c.stroke();1703};17041705mxCellRenderer.registerShape(mxShapeMockupiTopBar2.prototype.cst.SHAPE_ITOP_BAR2, mxShapeMockupiTopBar2);17061707//**********************************************************************************************************************************************************1708//iPhone Top Bar Locked1709//**********************************************************************************************************************************************************1710/**1711 * Extends mxShape.1712 */1713function mxShapeMockupiTopBarLocked(bounds, fill, stroke, strokewidth)1714{1715	mxShape.call(this);1716	this.bounds = bounds;1717	this.fill = fill;1718	this.stroke = stroke;1719	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1720};17211722/**1723 * Extends mxShape.1724 */1725mxUtils.extend(mxShapeMockupiTopBarLocked, mxShape);17261727/**1728 * Function: paintVertexShape1729 * 1730 * Paints the vertex shape.1731 */1732mxShapeMockupiTopBarLocked.prototype.paintVertexShape = function(c, x, y, w, h)1733{1734	c.translate(x, y);1735	this.background(c, x, y, w, h);1736	c.setShadow(false);1737	this.foreground(c, x, y, w, h);1738};17391740mxShapeMockupiTopBarLocked.prototype.background = function(c, x, y, w, h)1741{1742	c.setFillColor('#000000');1743	c.rect(0, 0, w, h);1744	c.fill();1745};17461747mxShapeMockupiTopBarLocked.prototype.foreground = function(c, x, y, w, h)1748{1749	c.setFillColor('#cccccc');1750	c.setStrokeColor('#cccccc');17511752	c.rect(5, h * 0.5 + 1.75, 1.5, 2.5);1753	c.fill();17541755	c.rect(7, h * 0.5 + 0.75, 1.5, 3.5);1756	c.fill();17571758	c.rect(9, h * 0.5 - 0.25, 1.5, 4.5);1759	c.fill();17601761	c.rect(11, h * 0.5 - 1.25, 1.5, 5.5);1762	c.fill();17631764	c.rect(13, h * 0.5 - 2.25, 1.5, 6.5);1765	c.fill();17661767	c.rect(15, h * 0.5 - 3.25, 1.5, 7.5);1768	c.fill();17691770	c.begin();1771	c.moveTo(w * 0.5 - 2, h * 0.5 - 1);1772	c.arcTo(2, 3, 0, 0, 1, w * 0.5 + 2, h * 0.5 - 1);1773	c.stroke();17741775	c.rect(w * 0.5 - 3, h * 0.5 - 1, 6, 4);1776	c.fillAndStroke();177717781779	c.begin();1780	c.moveTo(w - 19, h * 0.5 - 2);1781	c.lineTo(w - 10, h * 0.5 - 2);1782	c.lineTo(w - 10, h * 0.5 + 2);1783	c.lineTo(w - 19, h * 0.5 + 2);1784	c.close();1785	c.fill();17861787	c.begin();1788	c.moveTo(w - 20, h * 0.5 - 3);1789	c.lineTo(w - 5, h * 0.5 - 3);1790	c.lineTo(w - 5, h * 0.5 - 1);1791	c.lineTo(w - 3.5, h * 0.5 - 1);1792	c.lineTo(w - 3.5, h * 0.5 + 1);1793	c.lineTo(w - 5, h * 0.5 + 1);1794	c.lineTo(w - 5, h * 0.5 + 3);1795	c.lineTo(w - 20, h * 0.5 + 3);1796	c.close();1797	c.stroke();17981799};18001801mxCellRenderer.registerShape(mxMockupC.SHAPE_ITOP_BAR_LOCKED, mxShapeMockupiTopBarLocked);18021803//**********************************************************************************************************************************************************1804//Button1805//**********************************************************************************************************************************************************1806/**1807 * Extends mxShape.1808 */1809function mxShapeMockupiButton(bounds, fill, stroke, strokewidth)1810{1811	mxShape.call(this);1812	this.bounds = bounds;1813	this.fill = fill;1814	this.stroke = stroke;1815	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1816};18171818/**1819 * Extends mxShape.1820 */1821mxUtils.extend(mxShapeMockupiButton, mxShape);18221823/**1824 * Function: paintVertexShape1825 * 1826 * Paints the vertex shape.1827 */1828mxShapeMockupiButton.prototype.paintVertexShape = function(c, x, y, w, h)1829{1830	var mainText = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Main Text'));1831	var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#666666').toString();1832	var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8.5').toString();1833	c.translate(x, y);1834	this.background(c, x, y, w, h);1835	c.setShadow(false);1836	this.mainText(c, x, y, w, h, mainText, fontSize, fontColor);1837};18381839mxShapeMockupiButton.prototype.background = function(c, x, y, w, h)1840{1841	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString();1842	var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString();1843	c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);18441845	c.roundrect(0, 0, w, h, 2.5, 2.5);1846	c.fill();1847};18481849mxShapeMockupiButton.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor)1850{1851	c.begin();1852	c.setFontSize(fontSize);1853	c.setFontColor(fontColor);1854	c.text(w / 2, h / 2, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1855};18561857mxCellRenderer.registerShape(mxMockupC.SHAPE_IBUTTON, mxShapeMockupiButton);18581859//**********************************************************************************************************************************************************1860//Button Back1861//**********************************************************************************************************************************************************1862/**1863 * Extends mxShape.1864 */1865function mxShapeMockupiButtonBack(bounds, fill, stroke, strokewidth)1866{1867	mxShape.call(this);1868	this.bounds = bounds;1869	this.fill = fill;1870	this.stroke = stroke;1871	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1872};18731874/**1875 * Extends mxShape.1876 */1877mxUtils.extend(mxShapeMockupiButtonBack, mxShape);18781879/**1880 * Function: paintVertexShape1881 * 1882 * Paints the vertex shape.1883 */1884mxShapeMockupiButtonBack.prototype.paintVertexShape = function(c, x, y, w, h)1885{1886	var mainText = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Main Text'));1887	var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#666666').toString();1888	var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17').toString();1889	c.translate(x, y);1890	this.background(c, x, y, w, h);1891	c.setShadow(false);1892	this.mainText(c, x, y, w, h, mainText, fontSize, fontColor);1893};18941895mxShapeMockupiButtonBack.prototype.background = function(c, x, y, w, h)1896{1897	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString();1898	var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString();1899	c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);19001901	rSize = 2.5;1902	c.begin();1903	c.moveTo(w, rSize);1904	c.arcTo(rSize, rSize, 0, 0, 0, w - rSize, 0);1905	c.lineTo(10, 0);1906	c.lineTo(0.87, h * 0.5 - 0.75);1907	c.arcTo(rSize, rSize, 0, 0, 0, 0.87, h * 0.5 + 0.75);1908	c.lineTo(10, h);1909	c.lineTo(w - rSize, h);1910	c.arcTo(rSize, rSize, 0, 0, 0, w, h - rSize);1911	c.close();	1912	c.fill();1913};19141915mxShapeMockupiButtonBack.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor)1916{1917	c.begin();1918	c.setFontSize(fontSize);1919	c.setFontColor(fontColor);1920	c.text(w * 0.5 + 2.5, h * 0.5, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1921};19221923mxCellRenderer.registerShape(mxMockupC.SHAPE_IBUTTON_BACK, mxShapeMockupiButtonBack);19241925//**********************************************************************************************************************************************************1926//Button Forward1927//**********************************************************************************************************************************************************1928/**1929 * Extends mxShape.1930 */1931function mxShapeMockupiButtonForward(bounds, fill, stroke, strokewidth)1932{1933	mxShape.call(this);1934	this.bounds = bounds;1935	this.fill = fill;1936	this.stroke = stroke;1937	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1938};19391940/**1941 * Extends mxShape.1942 */1943mxUtils.extend(mxShapeMockupiButtonForward, mxShape);19441945/**1946 * Function: paintVertexShape1947 * 1948 * Paints the vertex shape.1949 */1950mxShapeMockupiButtonForward.prototype.paintVertexShape = function(c, x, y, w, h)1951{1952	var mainText = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Main Text'));1953	var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#666666').toString();1954	var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17').toString();1955	c.translate(x, y);1956	this.background(c, x, y, w, h);1957	c.setShadow(false);1958	this.mainText(c, x, y, w, h, mainText, fontSize, fontColor);1959};19601961mxShapeMockupiButtonForward.prototype.background = function(c, x, y, w, h)1962{1963	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString();1964	var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString();1965	c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);19661967	rSize = 2.5;1968	c.begin();1969	c.moveTo(0, rSize);1970	c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);1971	c.lineTo(w - 10, 0);1972	c.lineTo(w - 0.87, h * 0.5 - 0.75);1973	c.arcTo(rSize, rSize, 0, 0, 1, w - 0.87, h * 0.5 + 0.75);1974	c.lineTo(w - 10, h);1975	c.lineTo(rSize, h);1976	c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);1977	c.close();	1978	c.fill();1979};19801981mxShapeMockupiButtonForward.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor)1982{1983	c.begin();1984	c.setFontSize(fontSize);1985	c.setFontColor(fontColor);1986	c.text(w * 0.5 - 2.5, h * 0.5, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1987};19881989mxCellRenderer.registerShape(mxMockupC.SHAPE_IBUTTON_FORWARD, mxShapeMockupiButtonForward);19901991//**********************************************************************************************************************************************************1992//Prev/Next Button1993//**********************************************************************************************************************************************************1994/**1995 * Extends mxShape.1996 */1997function mxShapeMockupiPrevNextButton(bounds, fill, stroke, strokewidth)1998{1999	mxShape.call(this);2000	this.bounds = bounds;2001	this.fill = fill;2002	this.stroke = stroke;2003	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2004};20052006/**2007 * Extends mxShape.2008 */2009mxUtils.extend(mxShapeMockupiPrevNextButton, mxShape);20102011/**2012 * Function: paintVertexShape2013 * 2014 * Paints the vertex shape.2015 */2016mxShapeMockupiPrevNextButton.prototype.paintVertexShape = function(c, x, y, w, h)2017{2018	c.translate(x, y);2019	this.background(c, x, y, w, h);2020	c.setShadow(false);2021	this.foreground(c, x, y, w, h);2022};20232024mxShapeMockupiPrevNextButton.prototype.background = function(c, x, y, w, h)2025{2026	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString();2027	var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString();2028	c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);20292030	var rSize = 5;2031	c.roundrect(0, 0, w, h, rSize, rSize);2032	c.fill();20332034	c.begin();2035	c.moveTo(w * 0.5, 0);2036	c.lineTo(w * 0.5, h);2037	c.stroke();2038};20392040mxShapeMockupiPrevNextButton.prototype.foreground = function(c, x, y, w, h)2041{2042	var fillColor3 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR3, '').toString();2043	c.setFillColor(fillColor3);20442045	c.begin();2046	c.moveTo(w * 0.25, h * 0.25);2047	c.lineTo(w * 0.35, h * 0.75);2048	c.lineTo(w * 0.15, h * 0.75);2049	c.close();2050	c.fill();20512052	c.begin();2053	c.moveTo(w * 0.75, h * 0.75);2054	c.lineTo(w * 0.85, h * 0.25);2055	c.lineTo(w * 0.65, h * 0.25);2056	c.close();2057	c.fill();2058};20592060mxCellRenderer.registerShape(mxMockupC.SHAPE_IPREV_NEXT, mxShapeMockupiPrevNextButton);20612062//**********************************************************************************************************************************************************2063//Text Input2064//**********************************************************************************************************************************************************2065/**2066 * Extends mxShape.2067 */2068function mxShapeMockupiTextInput(bounds, fill, stroke, strokewidth)2069{2070	mxShape.call(this);2071	this.bounds = bounds;2072	this.fill = fill;2073	this.stroke = stroke;2074	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2075};20762077/**2078 * Extends mxShape.2079 */2080mxUtils.extend(mxShapeMockupiTextInput, mxShape);20812082/**2083 * Function: paintVertexShape2084 * 2085 * Paints the vertex shape.2086 */2087mxShapeMockupiTextInput.prototype.paintVertexShape = function(c, x, y, w, h)2088{2089	var mainText = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Main Text'));2090	var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#000000').toString();2091	var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8').toString();2092	c.translate(x, y);2093	this.background(c, x, y, w, h);2094	c.setShadow(false);2095	this.mainText(c, x, y, w, h, mainText, fontSize, fontColor);2096};20972098mxShapeMockupiTextInput.prototype.background = function(c, x, y, w, h)2099{2100	c.roundrect(0, 0, w, h, 2.5, 2.5);2101	c.fillAndStroke();2102};21032104mxShapeMockupiTextInput.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor)2105{2106	c.begin();2107	c.setFontSize(fontSize);2108	c.setFontColor(fontColor);2109	c.text(2, h * 0.5, 0, 0, text, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);2110};21112112mxCellRenderer.registerShape(mxMockupC.SHAPE_ITEXT_INPUT, mxShapeMockupiTextInput);21132114//**********************************************************************************************************************************************************2115//Radio Button Group (LEGACY)2116//**********************************************************************************************************************************************************2117/**2118 * Extends mxShape.2119 */2120function mxShapeMockupiRadioGroup(bounds, fill, stroke, strokewidth)2121{2122	mxShape.call(this);2123	this.bounds = bounds;2124	this.fill = fill;2125	this.stroke = stroke;2126	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2127};21282129/**2130 * Extends mxShape.2131 */2132mxUtils.extend(mxShapeMockupiRadioGroup, mxShape);21332134/**2135 * Function: paintVertexShape2136 * 2137 * Paints the vertex shape.2138 */2139mxShapeMockupiRadioGroup.prototype.paintVertexShape = function(c, x, y, w, h)2140{2141	c.translate(x, y);21422143	var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#666666').toString();2144	var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8').toString();2145	var optionText = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Option 1').toString()).split(',');2146	var optionNum = optionText.length;2147	var buttonSize = 5;2148	var lineH = Math.max(fontSize * 1.5, buttonSize);2149	var maxTextWidth = 0;2150	var selected = -1;2151	var labelOffset = 2.5;2152	var minH = optionNum * lineH;2153	var trueH = Math.max(h, minH);21542155	//get min width and selected option 2156	for (var i = 0; i < optionNum; i++)2157	{2158		var currText = optionText[i];21592160		if(currText.charAt(0) === mxMockupC.SELECTED)2161		{2162			currText = optionText[i].substring(1);2163			selected = i;2164		}21652166		var currWidth = mxUtils.getSizeForString(currText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;21672168		if (currWidth > maxTextWidth)2169		{2170			maxTextWidth = currWidth;2171		}2172	}21732174	var minW = 2 * labelOffset + maxTextWidth + 2 * buttonSize;2175	var trueW = Math.max(w, minW);21762177	//draw the background2178	c.roundrect(0, 0, trueW, trueH, 2.5, 2.5);2179	c.fillAndStroke();2180	c.setShadow(false);21812182	c.setFontSize(fontSize);2183	c.setFontColor(fontColor);21842185	for (var i = 0; i < optionNum; i++)2186	{2187		var currHeight = (i * lineH + lineH * 0.5) * trueH / minH;21882189		var currText = optionText[i];21902191		if(currText.charAt(0) === mxMockupC.SELECTED)2192		{2193			currText = optionText[i].substring(1);2194			selected = i;2195		}21962197		c.text(buttonSize * 2 + labelOffset, currHeight, 0, 0, currText, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);21982199		var iconX = buttonSize * 0.5;2200		var iconY = currHeight - buttonSize * 0.5;2201		c.setFillColor('#dddddd');2202		c.setStrokeColor('#000000');22032204		if (selected === i)2205		{2206			c.setGradient('#aaaaaa', '#666666', iconX, iconY, buttonSize, buttonSize, mxConstants.DIRECTION_SOUTH, 1, 1);2207			c.ellipse(iconX, iconY, buttonSize, buttonSize);2208			c.fillAndStroke();2209			c.setFillColor('#333333');2210			c.setStrokeColor('#333333');2211			c.ellipse(iconX + buttonSize * 0.25, iconY + buttonSize * 0.25, buttonSize * 0.5, buttonSize * 0.5);2212			c.fillAndStroke();2213		}2214		else2215		{2216			c.setGradient('#eeeeee', '#cccccc', iconX, iconY, buttonSize, buttonSize, mxConstants.DIRECTION_SOUTH, 1, 1);2217			c.ellipse(iconX, iconY, buttonSize, buttonSize);2218			c.fillAndStroke();2219		}2220	}2221};22222223mxCellRenderer.registerShape(mxMockupC.SHAPE_IRADIO_GROUP, mxShapeMockupiRadioGroup);22242225//**********************************************************************************************************************************************************2226//Checkbox Group (LEGACY)2227//**********************************************************************************************************************************************************2228/**2229 * Extends mxShape.2230 */2231function mxShapeMockupiCheckboxGroup(bounds, fill, stroke, strokewidth)2232{2233	mxShape.call(this);2234	this.bounds = bounds;2235	this.fill = fill;2236	this.stroke = stroke;2237	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2238};22392240/**2241 * Extends mxShape.2242 */2243mxUtils.extend(mxShapeMockupiCheckboxGroup, mxShape);22442245/**2246 * Function: paintVertexShape2247 * 2248 * Paints the vertex shape.2249 */2250mxShapeMockupiCheckboxGroup.prototype.paintVertexShape = function(c, x, y, w, h)2251{2252	c.translate(x, y);22532254	var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#666666').toString();2255	var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8').toString();2256	var optionText = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Option 1').toString()).split(',');2257	var optionNum = optionText.length;2258	var buttonSize = 5;2259	var lineH = Math.max(fontSize * 1.5, buttonSize);2260	var maxTextWidth = 0;2261	var selected = -1;2262	var labelOffset = 2.5;2263	var minH = optionNum * lineH;2264	var trueH = Math.max(h, minH);22652266	//get min width and selected option 2267	for (var i = 0; i < optionNum; i++)2268	{2269		var currText = optionText[i];22702271		if(currText.charAt(0) === mxMockupC.SELECTED)2272		{2273			currText = optionText[i].substring(1);2274			selected = i;2275		}22762277		var currWidth = mxUtils.getSizeForString(currText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;22782279		if (currWidth > maxTextWidth)2280		{2281			maxTextWidth = currWidth;2282		}2283	}22842285	var minW = 2 * labelOffset + maxTextWidth + 2 * buttonSize;2286	var trueW = Math.max(w, minW);22872288	//draw the background2289	c.roundrect(0, 0, trueW, trueH, 2.5, 2.5);2290	c.fillAndStroke();2291	c.setShadow(false);22922293	c.setFontSize(fontSize);2294	c.setFontColor(fontColor);22952296	for (var i = 0; i < optionNum; i++)2297	{2298		var currHeight = (i * lineH + lineH * 0.5) * trueH / minH;22992300		var currText = optionText[i];23012302		if(currText.charAt(0) === mxMockupC.SELECTED)2303		{2304			currText = optionText[i].substring(1);2305			selected = i;2306		}23072308		c.text(buttonSize * 2 + labelOffset, currHeight, 0, 0, currText, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);23092310		var iconX = buttonSize * 0.5;2311		var iconY = currHeight - buttonSize * 0.5;2312		c.setFillColor('#dddddd');2313		c.setStrokeColor('#000000');23142315		if (selected === i)2316		{2317			c.setGradient('#aaaaaa', '#666666', iconX, iconY, buttonSize, buttonSize, mxConstants.DIRECTION_SOUTH, 1, 1);2318			c.rect(iconX, iconY, buttonSize, buttonSize);2319			c.fillAndStroke();2320			c.setStrokeColor('#333333');2321			c.begin();2322			c.moveTo(iconX + buttonSize * 0.25, iconY + buttonSize * 0.5);2323			c.lineTo(iconX + buttonSize * 0.5, iconY + buttonSize * 0.75);2324			c.lineTo(iconX + buttonSize * 0.75, iconY + buttonSize * 0.25);2325			c.stroke();2326		}2327		else2328		{2329			c.setGradient('#eeeeee', '#cccccc', iconX, iconY, buttonSize, buttonSize, mxConstants.DIRECTION_SOUTH, 1, 1);2330			c.rect(iconX, iconY, buttonSize, buttonSize);2331			c.fillAndStroke();2332		}23332334		selected = -1;2335	}2336};23372338mxCellRenderer.registerShape(mxMockupC.SHAPE_ICHECKBOX_GROUP, mxShapeMockupiCheckboxGroup);23392340//**********************************************************************************************************************************************************2341//Combo box2342//**********************************************************************************************************************************************************2343/**2344 * Extends mxShape.2345 */2346function mxShapeMockupiComboBox(bounds, fill, stroke, strokewidth)2347{2348	mxShape.call(this);2349	this.bounds = bounds;2350	this.fill = fill;2351	this.stroke = stroke;2352	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2353};23542355/**2356 * Extends mxShape.2357 */2358mxUtils.extend(mxShapeMockupiComboBox, mxShape);23592360/**2361 * Function: paintVertexShape2362 * 2363 * Paints the vertex shape.2364 */2365mxShapeMockupiComboBox.prototype.paintVertexShape = function(c, x, y, w, h)2366{2367	var mainText = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Main Text'));2368	var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#666666').toString();2369	var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8.5').toString();2370	c.translate(x, y);2371	this.background(c, x, y, w, h);2372	c.setShadow(false);2373	this.foreground(c, x, y, w, h);2374	this.mainText(c, x, y, w, h, mainText, fontSize, fontColor);2375};23762377mxShapeMockupiComboBox.prototype.background = function(c, x, y, w, h)2378{2379	c.setFillColor('#ffffff');2380	c.roundrect(0, 0, w, h, 2.5, 2.5);2381	c.fillAndStroke();2382};23832384mxShapeMockupiComboBox.prototype.foreground = function(c, x, y, w, h)2385{2386	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString();2387	var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString();2388	c.setGradient(fillColor, fillColor2, w - 30, 0, 30, h, mxConstants.DIRECTION_SOUTH, 1, 1);2389	c.begin();2390	c.moveTo(w - 15, 0);2391	c.lineTo(w - 2.5, 0);2392	c.arcTo(2.5, 2.5, 0, 0, 1, w, 2.5);2393	c.lineTo(w, h - 2.5);2394	c.arcTo(2.5, 2.5, 0, 0, 1, w - 2.5, h);2395	c.lineTo(w - 15, h);2396	c.close();2397	c.fillAndStroke();23982399	c.setFillColor('#ffffff');2400	c.begin();2401	c.moveTo(w - 11, 5);2402	c.lineTo(w - 7.5, 10);2403	c.lineTo(w - 4, 5);2404	c.fill();2405};24062407mxShapeMockupiComboBox.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor)2408{2409	c.begin();2410	c.setFontSize(fontSize);2411	c.setFontColor(fontColor);2412	c.text(2.5, h * 0.5, 0, 0, text, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);2413};24142415mxCellRenderer.registerShape(mxMockupC.SHAPE_ICOMBO_BOX, mxShapeMockupiComboBox);24162417//**********************************************************************************************************************************************************2418//On-Off Button2419//**********************************************************************************************************************************************************2420/**2421 * Extends mxShape.2422 */2423function mxShapeMockupiOnOffButton(bounds, fill, stroke, strokewidth)2424{2425	mxShape.call(this);2426	this.bounds = bounds;2427	this.fill = fill;2428	this.stroke = stroke;2429	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2430};24312432/**2433 * Extends mxShape.2434 */2435mxUtils.extend(mxShapeMockupiOnOffButton, mxShape);24362437mxShapeMockupiOnOffButton.prototype.customProperties = [2438	{ name: 'buttonState', dispName: 'State', type: 'enum',2439		enumList: [{val: 'on', dispName: 'On'}, {val: 'off', dispName: 'Off'}]}2440];24412442/**2443 * Function: paintVertexShape2444 * 2445 * Paints the vertex shape.2446 */2447mxShapeMockupiOnOffButton.prototype.paintVertexShape = function(c, x, y, w, h)2448{2449	c.translate(x, y);2450	w = Math.max(w, 2 * h);2451	var state = mxUtils.getValue(this.style, mxMockupC.BUTTON_STATE, mxMockupC.STATE_ON);2452	this.background(c, x, y, w, h, state);2453	c.setShadow(false);2454	this.foreground(c, x, y, w, h, state);2455	this.mainText(c, x, y, w, h, state);2456};24572458mxShapeMockupiOnOffButton.prototype.background = function(c, x, y, w, h, state)2459{2460	if (state === mxMockupC.STATE_ON)2461	{2462		c.setGradient('#E2FFEB', '#008215', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);2463		c.roundrect(0, 0, w, h, h * 0.5, h * 0.5);2464		c.fillAndStroke();2465	}2466	else if (state === mxMockupC.STATE_OFF)2467	{2468		c.setGradient('#cc9999', '#881100', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);2469		c.roundrect(0, 0, w, h, h * 0.5, h * 0.5);2470		c.fillAndStroke();2471	}2472};24732474mxShapeMockupiOnOffButton.prototype.foreground = function(c, x, y, w, h, state)2475{2476	if (state === mxMockupC.STATE_ON)2477	{2478		c.setGradient('#ffffff', '#888888', w - h, 0, h, h, mxConstants.DIRECTION_SOUTH, 1, 1);2479		c.ellipse(w - h, 0, h, h);2480		c.fillAndStroke();2481	}2482	else2483	{2484		c.setGradient('#ffffff', '#888888', 0, 0, h, h, mxConstants.DIRECTION_SOUTH, 1, 1);2485		c.ellipse(0, 0, h, h);2486		c.fillAndStroke();2487	}2488};24892490mxShapeMockupiOnOffButton.prototype.mainText = function(c, x, y, w, h, state)2491{2492	var mainText = mxUtils.getValue(this.style, 'mainText', null);2493	c.setFontColor('#ffffff');2494	c.setFontSize(8.5);2495	2496	if (mainText != '')2497	{2498		if(state === mxMockupC.STATE_ON)2499		{2500			c.text(w * 0.5 - h * 0.4, h * 0.5, 0, 0, mainText || 'ON', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);2501		}2502		else if (state === mxMockupC.STATE_OFF)2503		{2504			c.text(w * 0.5 + h * 0.4, h * 0.5, 0, 0, mainText || 'OFF', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);2505		}2506	}2507};25082509mxCellRenderer.registerShape(mxMockupC.SHAPE_ION_OFF_BUTTON, mxShapeMockupiOnOffButton);25102511//**********************************************************************************************************************************************************2512//Alert Box2513//**********************************************************************************************************************************************************2514/**2515 * Extends mxShape.2516 */2517function mxShapeMockupiAlertBox(bounds, fill, stroke, strokewidth)2518{2519	mxShape.call(this);2520	this.bounds = bounds;2521	this.fill = fill;2522	this.stroke = stroke;2523	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2524};25252526/**2527 * Extends mxShape.2528 */2529mxUtils.extend(mxShapeMockupiAlertBox, mxShape);25302531/**2532 * Function: paintVertexShape2533 * 2534 * Paints the vertex shape.2535 */2536mxShapeMockupiAlertBox.prototype.paintVertexShape = function(c, x, y, w, h)2537{2538	w = Math.max(w, 15);2539	h = Math.max(h, 15);2540	c.translate(x, y);2541	rSize = 7.5;2542	this.background(c, x, y, w, h, rSize);2543	c.setShadow(false);2544	this.foreground(c, x, y, w, h, rSize);2545};25462547mxShapeMockupiAlertBox.prototype.background = function(c, x, y, w, h, rSize)2548{2549	c.setGradient('#497198', '#193168', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);2550	c.setAlpha(0.8);2551	c.setStrokeWidth(1);2552	c.roundrect(0, 0, w, h, rSize, rSize);2553	c.fillAndStroke();2554};25552556mxShapeMockupiAlertBox.prototype.foreground = function(c, x, y, w, h, rSize)2557{2558	var mainText = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Main Text').toString()).split(',');25592560	c.setStrokeColor('#497198');2561	c.setGradient('#497198', '#c5cee1', 0, 0, w, 22.5, mxConstants.DIRECTION_SOUTH, 1, 1);2562	c.setAlpha(0.5);2563	c.begin();2564	c.moveTo(w - rSize, 0);2565	c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);2566	c.lineTo(w, 17.5);2567	c.arcTo(w * 1.67, h * 2.5, 0, 0, 1, 0, 17.5);2568	c.lineTo(0, rSize);2569	c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);2570	c.close();2571	c.fillAndStroke();25722573	c.setAlpha(0.8);2574	c.setStrokeColor('#ffffff');2575	c.setStrokeWidth(1);2576	c.roundrect(0, 0, w, h, rSize, rSize);2577	c.stroke();25782579	c.setGradient('#497198', '#c5cee1', 5, h - 50, w - 20, 20, mxConstants.DIRECTION_SOUTH, 1, 1);2580	c.roundrect(5, h - 25, w - 10, 20, 2.5, 2.5);2581	c.fillAndStroke();25822583	c.setAlpha(0.9);2584	c.setFontSize(9.5);2585	c.setFontColor('#ffffff');2586	c.text(w * 0.5, h * 0.15, 0, 0, mainText[0], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);25872588	c.setFontSize(8);2589	c.text(w * 0.5, h * 0.4, 0, 0, mainText[2], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);2590	c.text(w * 0.5, h * 0.55, 0, 0, mainText[3], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);25912592	c.setFontSize(8.5);2593	c.text(w * 0.5, h - 15, 0, 0, mainText[1], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);2594};25952596mxCellRenderer.registerShape(mxMockupC.SHAPE_IALERT_BOX, mxShapeMockupiAlertBox);25972598//**********************************************************************************************************************************************************2599//Dialog Box2600//**********************************************************************************************************************************************************2601/**2602 * Extends mxShape.2603 */2604function mxShapeMockupiDialogBox(bounds, fill, stroke, strokewidth)2605{2606	mxShape.call(this);2607	this.bounds = bounds;2608	this.fill = fill;2609	this.stroke = stroke;2610	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2611};26122613/**2614 * Extends mxShape.2615 */2616mxUtils.extend(mxShapeMockupiDialogBox, mxShape);26172618/**2619 * Function: paintVertexShape2620 * 2621 * Paints the vertex shape.2622 */2623mxShapeMockupiDialogBox.prototype.paintVertexShape = function(c, x, y, w, h)2624{2625	w = Math.max(w, 15);2626	h = Math.max(h, 15);2627	c.translate(x, y);2628	rSize = 7.5;2629	this.background(c, x, y, w, h, rSize);2630	c.setShadow(false);2631	this.foreground(c, x, y, w, h, rSize);2632};26332634mxShapeMockupiDialogBox.prototype.background = function(c, x, y, w, h, rSize)2635{2636	c.setGradient('#497198', '#193168', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);2637	c.setAlpha(0.8);2638	c.setStrokeWidth(1);2639	c.roundrect(0, 0, w, h, rSize, rSize);2640	c.fillAndStroke();2641};26422643mxShapeMockupiDialogBox.prototype.foreground = function(c, x, y, w, h, rSize)2644{2645	var mainText = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Main Text').toString()).split(',');26462647	c.setStrokeColor('#497198');2648	c.setGradient('#497198', '#c5cee1', 0, 0, w, 22.5, mxConstants.DIRECTION_SOUTH, 1, 1);2649	c.setAlpha(0.5);2650	c.begin();2651	c.moveTo(w - rSize, 0);2652	c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);2653	c.lineTo(w, 17.5);2654	c.arcTo(w * 1.67, h * 2.5, 0, 0, 1, 0, 17.5);2655	c.lineTo(0, rSize);2656	c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);2657	c.close();2658	c.fillAndStroke();26592660	c.setAlpha(0.8);2661	c.setStrokeColor('#ffffff');2662	c.setStrokeWidth(1);2663	c.roundrect(0, 0, w, h, rSize, rSize);2664	c.stroke();26652666	c.setGradient('#497198', '#c5cee1', 5, h - 25, w * 0.5 - 10, 20, mxConstants.DIRECTION_SOUTH, 1, 1);2667	c.roundrect(5, h - 25, w * 0.5 - 10, 20, 2.5, 2.5);2668	c.fillAndStroke();26692670	c.roundrect(w * 0.5 + 2.5, h - 25, w * 0.5 - 10, 20, 2.5, 2.5);2671	c.fillAndStroke();26722673	c.setAlpha(0.9);2674	c.setFontSize(9.5);2675	c.setFontColor('#ffffff');2676	c.text(w * 0.5, h * 0.15, 0, 0, mainText[0], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);26772678	c.setFontSize(8);2679	c.text(w * 0.5, h * 0.4, 0, 0, mainText[3], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);2680	c.text(w * 0.5, h * 0.55, 0, 0, mainText[4], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);26812682	c.setFontSize(8.5);2683	c.text(w * 0.25, h - 15, 0, 0, mainText[1], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);2684	c.text(w * 0.75, h - 15, 0, 0, mainText[2], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);2685};26862687mxCellRenderer.registerShape(mxMockupC.SHAPE_IDIALOG_BOX, mxShapeMockupiDialogBox);26882689//**********************************************************************************************************************************************************2690//Lock Button2691//**********************************************************************************************************************************************************2692/**2693 * Extends mxShape.2694 */2695function mxShapeMockupiLockButton(bounds, fill, stroke, strokewidth)2696{2697	mxShape.call(this);2698	this.bounds = bounds;2699	this.fill = fill;2700	this.stroke = stroke;2701	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2702};27032704/**2705 * Extends mxShape.2706 */2707mxUtils.extend(mxShapeMockupiLockButton, mxShape);27082709/**2710 * Function: paintVertexShape2711 * 2712 * Paints the vertex shape.2713 */2714mxShapeMockupiLockButton.prototype.paintVertexShape = function(c, x, y, w, h)2715{2716	c.translate(x, y);2717	c.setShadow(false);27182719	c.setAlpha(0.7);2720	c.setGradient('#4A4F56', '#70757B', 0, 0, w, h, mxConstants.DIRECTION_NORTH, 1, 1);2721	c.rect(0, 0, w, h);2722	c.fill();27232724	c.setAlpha(0.8);2725	c.setGradient('#18232D', '#1F2933', 10, 10, 154, 30, mxConstants.DIRECTION_NORTH, 1, 1);2726	c.roundrect(10, h * 0.5 - 15, w - 20, 30, 7.5, 7.5);2727	c.fill();27282729	c.setAlpha(1);2730	c.setGradient('#E9F3FD', '#ADB7C1', 12.5, 12.5, 40, 25, mxConstants.DIRECTION_SOUTH, 1, 1);2731	c.roundrect(12.5, h * 0.5 - 12.5, 40, 25, 5, 5);2732	c.fill();27332734	c.setAlpha(0.8);2735	c.setStrokeWidth(0.5);2736	c.setStrokeColor('#aabbbb');2737	c.setGradient('#AEB7C1', '#667079', 20, 17.5, 25, 15, mxConstants.DIRECTION_SOUTH, 1, 1);2738	c.begin();2739	c.moveTo(20, h * 0.5 - 3.5);2740	c.lineTo(35, h * 0.5 - 3.5);2741	c.lineTo(35, h * 0.5 - 7.5);2742	c.lineTo(45, h * 0.5);2743	c.lineTo(35, h * 0.5 + 7.5);2744	c.lineTo(35, h * 0.5 + 3.5);2745	c.lineTo(20, h * 0.5 + 3.5);2746	c.close();2747	c.fillAndStroke();2748	2749	var mainText = mxUtils.getValue(this.style, 'mainText', null);2750	2751	if (mainText != '')2752	{2753		c.setFontSize(12.5);2754		c.setFontColor('#cccccc');2755		c.text(w / 2 + 20.5, h / 2, 0, 0, 'slide to unlock', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);2756	}2757};27582759mxCellRenderer.registerShape(mxMockupC.SHAPE_ILOCK_BUTTON, mxShapeMockupiLockButton);27602761//**********************************************************************************************************************************************************2762//Arrow Icon2763//**********************************************************************************************************************************************************2764/**2765 * Extends mxShape.2766 */2767function mxShapeMockupiArrowIcon(bounds, fill, stroke, strokewidth)2768{2769	mxShape.call(this);2770	this.bounds = bounds;2771	this.fill = fill;2772	this.stroke = stroke;2773	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2774};27752776/**2777 * Extends mxShape.2778 */2779mxUtils.extend(mxShapeMockupiArrowIcon, mxShape);27802781/**2782 * Function: paintVertexShape2783 * 2784 * Paints the vertex shape.2785 */2786mxShapeMockupiArrowIcon.prototype.paintVertexShape = function(c, x, y, w, h)2787{2788	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '').toString();27892790	c.translate(x, y);2791	this.background(c, x, y, w, h, strokeColor);2792	c.setShadow(false);2793	this.foreground(c, x, y, w, h, strokeColor);2794};27952796mxShapeMockupiArrowIcon.prototype.background = function(c, x, y, w, h, strokeColor)2797{2798	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString();2799	var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString();2800	c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);28012802	c.setStrokeWidth(1.5);2803	c.setStrokeColor(strokeColor);2804	c.ellipse(0, 0, w, h);2805	c.fillAndStroke();2806};28072808mxShapeMockupiArrowIcon.prototype.foreground = function(c, x, y, w, h, strokeColor)2809{2810	c.setStrokeWidth(2.5);2811	c.begin();2812	c.moveTo(w * 0.4, h * 0.22);2813	c.lineTo(w * 0.65, h * 0.5);2814	c.lineTo(w * 0.4, h * 0.78);2815	c.stroke();2816};28172818mxCellRenderer.registerShape(mxMockupC.SHAPE_IARROW_ICON, mxShapeMockupiArrowIcon);28192820//**********************************************************************************************************************************************************2821//Delete Icon2822//**********************************************************************************************************************************************************2823/**2824 * Extends mxShape.2825 */2826function mxShapeMockupiDeleteIcon(bounds, fill, stroke, strokewidth)2827{2828	mxShape.call(this);2829	this.bounds = bounds;2830	this.fill = fill;2831	this.stroke = stroke;2832	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2833};28342835/**2836 * Extends mxShape.2837 */2838mxUtils.extend(mxShapeMockupiDeleteIcon, mxShape);28392840/**2841 * Function: paintVertexShape2842 * 2843 * Paints the vertex shape.2844 */2845mxShapeMockupiDeleteIcon.prototype.paintVertexShape = function(c, x, y, w, h)2846{2847	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '').toString();28482849	c.translate(x, y);2850	this.background(c, x, y, w, h, strokeColor);2851	c.setShadow(false);2852	this.foreground(c, x, y, w, h, strokeColor);2853};28542855mxShapeMockupiDeleteIcon.prototype.background = function(c, x, y, w, h, strokeColor)2856{2857	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString();2858	var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString();2859	c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);28602861	c.setStrokeWidth(1.5);2862	c.setStrokeColor(strokeColor);2863	c.ellipse(0, 0, w, h);2864	c.fillAndStroke();2865};28662867mxShapeMockupiDeleteIcon.prototype.foreground = function(c, x, y, w, h, strokeColor)2868{2869	c.setStrokeWidth(2.5);2870	c.begin();2871	c.moveTo(w * 0.25, h * 0.5);2872	c.lineTo(w * 0.75, h * 0.5);2873	c.stroke();2874};28752876mxCellRenderer.registerShape(mxMockupC.SHAPE_IDELETE_ICON, mxShapeMockupiDeleteIcon);28772878//**********************************************************************************************************************************************************2879//Add Icon2880//**********************************************************************************************************************************************************2881/**2882 * Extends mxShape.2883 */2884function mxShapeMockupiAddIcon(bounds, fill, stroke, strokewidth)2885{2886	mxShape.call(this);2887	this.bounds = bounds;2888	this.fill = fill;2889	this.stroke = stroke;2890	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2891};28922893/**2894 * Extends mxShape.2895 */2896mxUtils.extend(mxShapeMockupiAddIcon, mxShape);28972898/**2899 * Function: paintVertexShape2900 * 2901 * Paints the vertex shape.2902 */2903mxShapeMockupiAddIcon.prototype.paintVertexShape = function(c, x, y, w, h)2904{2905	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '').toString();2906	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString();2907	var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString();2908	c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);2909	c.setStrokeColor(strokeColor);291029112912	c.translate(x, y);2913	this.background(c, x, y, w, h, strokeColor);2914	c.setShadow(false);2915	this.foreground(c, x, y, w, h, strokeColor);2916};29172918mxShapeMockupiAddIcon.prototype.background = function(c, x, y, w, h, strokeColor)2919{2920	c.setStrokeWidth(1.5);2921	c.ellipse(0, 0, w, h);2922	c.fillAndStroke();2923};29242925mxShapeMockupiAddIcon.prototype.foreground = function(c, x, y, w, h, strokeColor)2926{2927	c.setStrokeWidth(2.5);2928	c.begin();2929	c.moveTo(w * 0.25, h * 0.5);2930	c.lineTo(w * 0.75, h * 0.5);2931	c.moveTo(w * 0.5, h * 0.25);2932	c.lineTo(w * 0.5, h * 0.75);2933	c.stroke();2934};29352936mxCellRenderer.registerShape(mxMockupC.SHAPE_IADD_ICON, mxShapeMockupiAddIcon);29372938//**********************************************************************************************************************************************************2939//Info Icon2940//**********************************************************************************************************************************************************2941/**2942 * Extends mxShape.2943 */2944function mxShapeMockupiInfoIcon(bounds, fill, stroke, strokewidth)2945{2946	mxShape.call(this);2947	this.bounds = bounds;2948	this.fill = fill;2949	this.stroke = stroke;2950	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2951};29522953/**2954 * Extends mxShape.2955 */2956mxUtils.extend(mxShapeMockupiInfoIcon, mxShape);29572958/**2959 * Function: paintVertexShape2960 * 2961 * Paints the vertex shape.2962 */2963mxShapeMockupiInfoIcon.prototype.paintVertexShape = function(c, x, y, w, h)2964{2965	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '').toString();29662967	c.translate(x, y);2968	this.background(c, x, y, w, h, strokeColor);2969	c.setShadow(false);2970	this.foreground(c, x, y, w, h, strokeColor);2971};29722973mxShapeMockupiInfoIcon.prototype.background = function(c, x, y, w, h, strokeColor)2974{2975	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString();2976	var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString();2977	c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);29782979	c.setStrokeWidth(1.5);2980	c.setStrokeColor(strokeColor);2981	c.ellipse(0, 0, w, h);2982	c.fillAndStroke();2983};29842985mxShapeMockupiInfoIcon.prototype.foreground = function(c, x, y, w, h, strokeColor)2986{2987	c.setStrokeWidth(2.5);2988	c.begin();2989	c.setFillColor('#ffffff');2990	c.moveTo(w * 0.47, h * 0.334);2991	c.arcTo(w * 0.1, h * 0.15, 60, 0, 1, w * 0.61, h * 0.42);2992	c.lineTo(w * 0.51, h * 0.7);2993	c.arcTo(w * 0.026, h * 0.03, 30, 0, 0, w * 0.54, h * 0.74);2994	c.lineTo(w * 0.608, h * 0.684);2995	c.arcTo(w * 0.02, h * 0.015, 0, 0, 1, w * 0.638, h * 0.706);2996	c.arcTo(w * 0.45, h * 0.45, 0, 0, 1, w * 0.42, h * 0.865);2997	c.arcTo(w * 0.1, h * 0.08, -15, 0, 1, w * 0.325, h * 0.77);2998	c.lineTo(w * 0.358, h * 0.66);2999	c.lineTo(w * 0.435, h * 0.46);3000	c.arcTo(w * 0.023, h * 0.03, 0, 0, 0, w * 0.4, h * 0.43);3001	c.lineTo(w * 0.338, h * 0.484);3002	c.arcTo(w * 0.01, h * 0.015, 45, 0, 1, w * 0.31, h * 0.47);3003	c.arcTo(w * 0.3, h * 0.3, 0, 0, 1, w * 0.47, h * 0.334);3004	c.fill();30053006	c.begin();3007	c.moveTo(w * 0.5438, h * 0.141);3008	c.arcTo(w * 0.0776, h * 0.0898, 40, 0, 1, w * 0.6671, h * 0.2308);3009	c.arcTo(w * 0.0776, h * 0.0898, 40, 0, 1, w * 0.5438, h * 0.141);3010	c.close();3011	c.fill();3012};30133014mxCellRenderer.registerShape(mxMockupC.SHAPE_IINFO_ICON, mxShapeMockupiInfoIcon);301530163017//**********************************************************************************************************************************************************3018//Sort/Find Icon3019//**********************************************************************************************************************************************************3020/**3021 * Extends mxShape.3022 */3023function mxShapeMockupiSortFindIcon(bounds, fill, stroke, strokewidth)3024{3025	mxShape.call(this);3026	this.bounds = bounds;3027	this.fill = fill;3028	this.stroke = stroke;3029	this.strokewidth = (strokewidth != null) ? strokewidth : 1;3030};30313032/**3033 * Extends mxShape.3034 */3035mxUtils.extend(mxShapeMockupiSortFindIcon, mxShape);30363037/**3038 * Function: paintVertexShape3039 * 3040 * Paints the vertex shape.3041 */3042mxShapeMockupiSortFindIcon.prototype.paintVertexShape = function(c, x, y, w, h)3043{3044	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '').toString();30453046	c.translate(x, y);3047	this.background(c, x, y, w, h, strokeColor);3048	c.setShadow(false);3049	this.foreground(c, x, y, w, h, strokeColor);3050};30513052mxShapeMockupiSortFindIcon.prototype.background = function(c, x, y, w, h, strokeColor)3053{3054	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString();3055	var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString();3056	c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);30573058	c.setStrokeWidth(1.5);3059	c.setStrokeColor(strokeColor);3060	c.roundrect(0, 0, w, h, w * 0.1, h * 0.1);3061	c.fillAndStroke();3062};30633064mxShapeMockupiSortFindIcon.prototype.foreground = function(c, x, y, w, h, strokeColor)3065{3066	c.setStrokeWidth((Math.min(h, w)) / 20);3067	c.begin();3068	c.setFillColor('#ffffff');3069	c.moveTo(w * 0.1, h * 0.25);3070	c.lineTo(w * 0.9, h * 0.25);3071	c.moveTo(w * 0.1, h * 0.4);3072	c.lineTo(w * 0.9, h * 0.4);3073	c.moveTo(w * 0.1, h * 0.55);3074	c.lineTo(w * 0.6, h * 0.55);3075	c.moveTo(w * 0.1, h * 0.7);3076	c.lineTo(w * 0.5, h * 0.7);3077	c.stroke();30783079	c.begin();3080	c.ellipse(w * 0.6, h * 0.6, w * 0.2, h * 0.2);3081	c.stroke();30823083	c.begin();3084	c.moveTo(w * 0.77, h * 0.77);3085	c.lineTo(w * 0.85, h * 0.85);3086	c.stroke();3087};30883089mxCellRenderer.registerShape(mxMockupC.SHAPE_ISORT_FIND_ICON, mxShapeMockupiSortFindIcon);30903091//**********************************************************************************************************************************************************3092//Check Icon3093//**********************************************************************************************************************************************************3094/**3095 * Extends mxShape.3096 */3097function mxShapeMockupiCheckIcon(bounds, fill, stroke, strokewidth)3098{3099	mxShape.call(this);3100	this.bounds = bounds;3101	this.fill = fill;3102	this.stroke = stroke;3103	this.strokewidth = (strokewidth != null) ? strokewidth : 1;3104};31053106/**3107 * Extends mxShape.3108 */3109mxUtils.extend(mxShapeMockupiCheckIcon, mxShape);31103111/**3112 * Function: paintVertexShape3113 * 3114 * Paints the vertex shape.3115 */3116mxShapeMockupiCheckIcon.prototype.paintVertexShape = function(c, x, y, w, h)3117{3118	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '').toString();31193120	c.translate(x, y);3121	this.background(c, x, y, w, h, strokeColor);3122	c.setShadow(false);3123	this.foreground(c, x, y, w, h, strokeColor);3124};31253126mxShapeMockupiCheckIcon.prototype.background = function(c, x, y, w, h, strokeColor)3127{3128	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString();3129	var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString();3130	c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);31313132	c.setStrokeWidth(1.5);3133	c.setStrokeColor(strokeColor);3134	c.ellipse(0, 0, w, h);3135	c.fillAndStroke();3136};31373138mxShapeMockupiCheckIcon.prototype.foreground = function(c, x, y, w, h, strokeColor)3139{3140	c.setStrokeWidth(2.5);3141	c.begin();3142	c.moveTo(w * 0.25, h * 0.5);3143	c.lineTo(w * 0.5, h * 0.65);3144	c.lineTo(w * 0.75, h * 0.25);3145	c.stroke();3146};31473148mxCellRenderer.registerShape(mxMockupC.SHAPE_ICHECK_ICON, mxShapeMockupiCheckIcon);31493150//**********************************************************************************************************************************************************3151//Keyboard (letters)3152//**********************************************************************************************************************************************************3153/**3154 * Extends mxShape.3155 */3156function mxShapeMockupiKeybLetters(bounds, fill, stroke, strokewidth)3157{3158	mxShape.call(this);3159	this.bounds = bounds;3160	this.fill = fill;3161	this.stroke = stroke;3162	this.strokewidth = (strokewidth != null) ? strokewidth : 1;3163};31643165/**3166 * Extends mxShape.3167 */3168mxUtils.extend(mxShapeMockupiKeybLetters, mxShape);31693170/**3171 * Function: paintVertexShape3172 * 3173 * Paints the vertex shape.3174 */3175mxShapeMockupiKeybLetters.prototype.paintVertexShape = function(c, x, y, w, h)3176{3177	c.translate(x, y);3178	this.background(c, x, y, w, h);3179	c.setShadow(true);3180	this.foreground(c, x, y, w, h);3181};31823183mxShapeMockupiKeybLetters.prototype.background = function(c, x, y, w, h)3184{3185	c.setGradient('#8A97A7', '#425163', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);31863187	c.rect(0, 0, w, h);3188	c.fill();3189};31903191mxShapeMockupiKeybLetters.prototype.foreground = function(c, x, y, w, h, strokeColor)3192{3193	c.setGradient('#EEF3F9', '#DBE2E9', w * 0.0086, h * 0.03, w * 0.0776, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1);3194	rSizeX = w * 0.0144;3195	rSizeY = h * 0.025;3196	c.setFontSize(10.5);3197	c.setFontColor('#000000');31983199	c.roundrect(w * 0.0086, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3200	c.fill();3201	c.text(w * 0.0474, h * 0.125, 0, 0, 'Q', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32023203	c.roundrect(w * 0.1092, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3204	c.fill();3205	c.text(w * 0.148, h * 0.125, 0, 0, 'W', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32063207	c.roundrect(w * 0.2098, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3208	c.fill();3209	c.text(w * 0.2486, h * 0.125, 0, 0, 'E', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32103211	c.roundrect(w * 0.3103, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3212	c.fill();3213	c.text(w * 0.3491, h * 0.125, 0, 0, 'R', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32143215	c.roundrect(w * 0.4109, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3216	c.fill();3217	c.text(w * 0.4497, h * 0.125, 0, 0, 'T', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32183219	c.roundrect(w * 0.5115, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3220	c.fill();3221	c.text(w * 0.5503, h * 0.125, 0, 0, 'Y', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32223223	c.roundrect(w * 0.6121, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3224	c.fill();3225	c.text(w * 0.6509, h * 0.125, 0, 0, 'U', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32263227	c.roundrect(w * 0.7126, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3228	c.fill();3229	c.text(w * 0.7514, h * 0.125, 0, 0, 'I', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32303231	c.roundrect(w * 0.8132, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3232	c.fill();3233	c.text(w * 0.852, h * 0.125, 0, 0, 'O', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32343235	c.roundrect(w * 0.9138, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3236	c.fill();3237	c.text(w * 0.9526, h * 0.125, 0, 0, 'P', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32383239	c.roundrect(w * 0.0632, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3240	c.fill();3241	c.text(w * 0.102, h * 0.375, 0, 0, 'A', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32423243	c.roundrect(w * 0.1638, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3244	c.fill();3245	c.text(w * 0.2026, h * 0.375, 0, 0, 'S', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32463247	c.roundrect(w * 0.2644, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3248	c.fill();3249	c.text(w * 0.3032, h * 0.375, 0, 0, 'D', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32503251	c.roundrect(w * 0.3649, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3252	c.fill();3253	c.text(w * 0.4037, h * 0.375, 0, 0, 'F', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32543255	c.roundrect(w * 0.4655, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3256	c.fill();3257	c.text(w * 0.5043, h * 0.375, 0, 0, 'G', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32583259	c.roundrect(w * 0.5661, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3260	c.fill();3261	c.text(w * 0.6049, h * 0.375, 0, 0, 'H', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32623263	c.roundrect(w * 0.6667, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3264	c.fill();3265	c.text(w * 0.7055, h * 0.375, 0, 0, 'J', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32663267	c.roundrect(w * 0.7672, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3268	c.fill();3269	c.text(w * 0.806, h * 0.375, 0, 0, 'K', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32703271	c.roundrect(w * 0.8678, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3272	c.fill();3273	c.text(w * 0.9066, h * 0.375, 0, 0, 'L', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);327432753276	c.roundrect(w * 0.1638, h * 0.53, w * 0.0776, h * 0.19, rSizeX, rSizeY);3277	c.fill();3278	c.text(w * 0.2026, h * 0.625, 0, 0, 'Z', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32793280	c.roundrect(w * 0.2644, h * 0.53, w * 0.0776, h * 0.19, rSizeX, rSizeY);3281	c.fill();3282	c.text(w * 0.3032, h * 0.625, 0, 0, 'X', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32833284	c.roundrect(w * 0.3649, h * 0.53, w * 0.0776, h * 0.19, rSizeX, rSizeY);3285	c.fill();3286	c.text(w * 0.4037, h * 0.625, 0, 0, 'C', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32873288	c.roundrect(w * 0.4655, h * 0.53, w * 0.0776, h * 0.19, rSizeX, rSizeY);3289	c.fill();3290	c.text(w * 0.5043, h * 0.625, 0, 0, 'V', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32913292	c.roundrect(w * 0.5661, h * 0.53, w * 0.0776, h * 0.19, rSizeX, rSizeY);3293	c.fill();3294	c.text(w * 0.6049, h * 0.625, 0, 0, 'B', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32953296	c.roundrect(w * 0.6667, h * 0.53, w * 0.0776, h * 0.19, rSizeX, rSizeY);3297	c.fill();3298	c.text(w * 0.7055, h * 0.625, 0, 0, 'N', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);32993300	c.roundrect(w * 0.7672, h * 0.53, w * 0.0776, h * 0.19, rSizeX, rSizeY);3301	c.fill();3302	c.text(w * 0.806, h * 0.625, 0, 0, 'M', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);330333043305	c.roundrect(w * 0.2644, h * 0.78, w * 0.4799, h * 0.19, rSizeX, rSizeY);3306	c.fill();3307	c.setFontColor('#666666');3308	c.text(w * 0.5043, h * 0.875, 0, 0, 'space', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);33093310	c.setFontColor('#ffffff');33113312	c.setGradient('#8B98A8', '#677488', w * 0.0115, h * 0.53, w * 0.1207, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1);3313	c.roundrect(w * 0.0115, h * 0.53, w * 0.1207, h * 0.19, rSizeX, rSizeY);3314	c.fill();33153316	c.setGradient('#8B98A8', '#677488', w * 0.8736, h * 0.53, w * 0.115, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1);3317	c.roundrect(w * 0.8736, h * 0.53, w * 0.115, h * 0.19, rSizeX, rSizeY);3318	c.fill();3319	c.setGradient('#8B98A8', '#677488', w * 0.0115, h * 0.78, w * 0.2299, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1);3320	c.roundrect(w * 0.0115, h * 0.78, w * 0.2299, h * 0.19, rSizeX, rSizeY);3321	c.fill();3322	c.setGradient('#8B98A8', '#677488', w * 0.7672, h * 0.78, w * 0.2213, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1);3323	c.roundrect(w * 0.7672, h * 0.78, w * 0.2213, h * 0.19, rSizeX, rSizeY);3324	c.fill();3325	c.text(w * 0.1264, h * 0.875, 0, 0, '.?123', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);3326	c.text(w * 0.8779, h * 0.875, 0, 0, 'return', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);33273328	c.setShadow(false);3329	c.setLineJoin('round');3330	c.setStrokeColor('#ffffff');3331	c.setFillColor('#ffffff');3332	c.setStrokeWidth(1.5);3333	c.begin();3334	c.moveTo(w * 0.0402, h * 0.635);3335	c.lineTo(w * 0.0718, h * 0.58);3336	c.lineTo(w * 0.1034, h * 0.635);3337	c.lineTo(w * 0.0862, h * 0.635);3338	c.lineTo(w * 0.0862, h * 0.67);3339	c.lineTo(w * 0.0575, h * 0.67);3340	c.lineTo(w * 0.0575, h * 0.635);3341	c.close();3342	c.stroke();33433344	c.begin();3345	c.moveTo(w * 0.9109, h * 0.585);3346	c.lineTo(w * 0.9655, h * 0.585);3347	c.lineTo(w * 0.9655, h * 0.665);3348	c.lineTo(w * 0.9109, h * 0.665);3349	c.lineTo(w * 0.8879, h * 0.625);3350	c.close();3351	c.fillAndStroke();33523353	c.setStrokeColor('#677488');3354	c.begin();3355	c.moveTo(w * 0.9224, h * 0.605);3356	c.lineTo(w * 0.9454, h * 0.645);3357	c.moveTo(w * 0.9224, h * 0.645);3358	c.lineTo(w * 0.9454, h * 0.605);3359	c.stroke();3360};33613362mxCellRenderer.registerShape(mxMockupC.SHAPE_IKEYB_LETTERS, mxShapeMockupiKeybLetters);33633364//**********************************************************************************************************************************************************3365//Keyboard (numbers)3366//**********************************************************************************************************************************************************3367/**3368 * Extends mxShape.3369 */3370function mxShapeMockupiKeybNumbers(bounds, fill, stroke, strokewidth)3371{3372	mxShape.call(this);3373	this.bounds = bounds;3374	this.fill = fill;3375	this.stroke = stroke;3376	this.strokewidth = (strokewidth != null) ? strokewidth : 1;3377};33783379/**3380 * Extends mxShape.3381 */3382mxUtils.extend(mxShapeMockupiKeybNumbers, mxShape);33833384/**3385 * Function: paintVertexShape3386 * 3387 * Paints the vertex shape.3388 */3389mxShapeMockupiKeybNumbers.prototype.paintVertexShape = function(c, x, y, w, h)3390{3391	c.translate(x, y);3392	this.background(c, x, y, w, h);3393	c.setShadow(true);3394	this.foreground(c, x, y, w, h);3395};33963397mxShapeMockupiKeybNumbers.prototype.background = function(c, x, y, w, h)3398{3399	c.setGradient('#8A97A7', '#425163', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);34003401	c.rect(0, 0, w, h);3402	c.fill();3403};34043405mxShapeMockupiKeybNumbers.prototype.foreground = function(c, x, y, w, h, strokeColor)3406{3407	c.setGradient('#EEF3F9', '#DBE2E9', w * 0.0086, h * 0.03, w * 0.0776, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1);3408	rSizeX = w * 0.0144;3409	rSizeY = h * 0.025;3410	c.setFontSize(10.5);3411	c.setFontColor('#000000');34123413	c.roundrect(w * 0.0086, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3414	c.fill();3415	c.text(w * 0.0474, h * 0.125, 0, 0, '1', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34163417	c.roundrect(w * 0.1092, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3418	c.fill();3419	c.text(w * 0.148, h * 0.125, 0, 0, '2', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34203421	c.roundrect(w * 0.2098, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3422	c.fill();3423	c.text(w * 0.2486, h * 0.125, 0, 0, '3', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34243425	c.roundrect(w * 0.3103, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3426	c.fill();3427	c.text(w * 0.3491, h * 0.125, 0, 0, '4', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34283429	c.roundrect(w * 0.4109, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3430	c.fill();3431	c.text(w * 0.4497, h * 0.125, 0, 0, '5', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34323433	c.roundrect(w * 0.5115, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3434	c.fill();3435	c.text(w * 0.5503, h * 0.125, 0, 0, '6', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34363437	c.roundrect(w * 0.6121, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3438	c.fill();3439	c.text(w * 0.6509, h * 0.125, 0, 0, '7', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34403441	c.roundrect(w * 0.7126, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3442	c.fill();3443	c.text(w * 0.7514, h * 0.125, 0, 0, '8', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34443445	c.roundrect(w * 0.8132, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3446	c.fill();3447	c.text(w * 0.852, h * 0.125, 0, 0, '9', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34483449	c.roundrect(w * 0.9138, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3450	c.fill();3451	c.text(w * 0.9526, h * 0.125, 0, 0, '0', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34523453	c.roundrect(w * 0.0086, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3454	c.fill();3455	c.text(w * 0.0474, h * 0.375, 0, 0, '-', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34563457	c.roundrect(w * 0.1092, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3458	c.fill();3459	c.text(w * 0.148, h * 0.375, 0, 0, '/', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34603461	c.roundrect(w * 0.2098, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3462	c.fill();3463	c.text(w * 0.2486, h * 0.375, 0, 0, ':', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34643465	c.roundrect(w * 0.3103, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3466	c.fill();3467	c.text(w * 0.3491, h * 0.375, 0, 0, ';', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34683469	c.roundrect(w * 0.4109, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3470	c.fill();3471	c.text(w * 0.4497, h * 0.375, 0, 0, '(', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34723473	c.roundrect(w * 0.5115, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3474	c.fill();3475	c.text(w * 0.5503, h * 0.375, 0, 0, ')', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34763477	c.roundrect(w * 0.6121, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3478	c.fill();3479	c.text(w * 0.6509, h * 0.375, 0, 0, '$', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34803481	c.roundrect(w * 0.7126, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3482	c.fill();3483	c.text(w * 0.7514, h * 0.375, 0, 0, '&', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34843485	c.roundrect(w * 0.8132, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3486	c.fill();3487	c.text(w * 0.852, h * 0.375, 0, 0, '@', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34883489	c.roundrect(w * 0.9138, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3490	c.fill();3491	c.text(w * 0.9526, h * 0.375, 0, 0, '\"', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34923493	c.roundrect(w * 0.1638, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY);3494	c.fill();3495	c.text(w * 0.2227, h * 0.625, 0, 0, '.', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);34963497	c.roundrect(w * 0.3046, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY);3498	c.fill();3499	c.text(w * 0.3635, h * 0.625, 0, 0, ',', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);35003501	c.roundrect(w * 0.4454, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY);3502	c.fill();3503	c.text(w * 0.5043, h * 0.625, 0, 0, '?', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);35043505	c.roundrect(w * 0.5862, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY);3506	c.fill();3507	c.text(w * 0.6451, h * 0.625, 0, 0, '!', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);35083509	c.roundrect(w * 0.727, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY);3510	c.fill();3511	c.text(w * 0.7859, h * 0.625, 0, 0, '\'', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);351235133514	c.roundrect(w * 0.2644, h * 0.78, w * 0.4799, h * 0.19, rSizeX, rSizeY);3515	c.fill();3516	c.setFontColor('#666666');3517	c.text(w * 0.5043, h * 0.875, 0, 0, 'space', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);35183519	c.setGradient('#8B98A8', '#677488', w * 0.0115, h * 0.53, w * 0.1207, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1);3520	c.setFontColor('#ffffff');35213522	c.roundrect(w * 0.0115, h * 0.53, w * 0.1207, h * 0.19, rSizeX, rSizeY);3523	c.fill();35243525	c.roundrect(w * 0.8736, h * 0.53, w * 0.115, h * 0.19, rSizeX, rSizeY);3526	c.fill();3527	c.roundrect(w * 0.0115, h * 0.78, w * 0.2299, h * 0.19, rSizeX, rSizeY);3528	c.fill();3529	c.roundrect(w * 0.7672, h * 0.78, w * 0.2213, h * 0.19, rSizeX, rSizeY);3530	c.fill();3531	c.text(w * 0.0718, h * 0.625, 0, 0, '#+=', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);3532	c.text(w * 0.1264, h * 0.875, 0, 0, 'ABC', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);3533	c.text(w * 0.8779, h * 0.875, 0, 0, 'return', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);35343535	c.setShadow(false);3536	c.setLineJoin('round');3537	c.setStrokeColor('#ffffff');3538	c.setFillColor('#ffffff');3539	c.setStrokeWidth(1.5);3540	c.begin();3541	c.moveTo(w * 0.9109, h * 0.585);3542	c.lineTo(w * 0.9655, h * 0.585);3543	c.lineTo(w * 0.9655, h * 0.665);3544	c.lineTo(w * 0.9109, h * 0.665);3545	c.lineTo(w * 0.8879, h * 0.625);3546	c.close();3547	c.fillAndStroke();35483549	c.setStrokeColor('#677488');3550	c.begin();3551	c.moveTo(w * 0.9224, h * 0.605);3552	c.lineTo(w * 0.9454, h * 0.645);3553	c.moveTo(w * 0.9224, h * 0.645);3554	c.lineTo(w * 0.9454, h * 0.605);3555	c.stroke();3556};35573558mxCellRenderer.registerShape(mxMockupC.SHAPE_IKEYB_NUMBERS, mxShapeMockupiKeybNumbers);35593560//**********************************************************************************************************************************************************3561//Keyboard (symbols)3562//**********************************************************************************************************************************************************3563/**3564 * Extends mxShape.3565 */3566function mxShapeMockupiKeybSymbols(bounds, fill, stroke, strokewidth)3567{3568	mxShape.call(this);3569	this.bounds = bounds;3570	this.fill = fill;3571	this.stroke = stroke;3572	this.strokewidth = (strokewidth != null) ? strokewidth : 1;3573};35743575/**3576 * Extends mxShape.3577 */3578mxUtils.extend(mxShapeMockupiKeybSymbols, mxShape);35793580/**3581 * Function: paintVertexShape3582 * 3583 * Paints the vertex shape.3584 */3585mxShapeMockupiKeybSymbols.prototype.paintVertexShape = function(c, x, y, w, h)3586{3587	c.translate(x, y);3588	this.background(c, x, y, w, h);3589	c.setShadow(true);3590	this.foreground(c, x, y, w, h);3591};35923593mxShapeMockupiKeybSymbols.prototype.background = function(c, x, y, w, h)3594{3595	c.setGradient('#8A97A7', '#425163', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);35963597	c.rect(0, 0, w, h);3598	c.fill();3599};36003601mxShapeMockupiKeybSymbols.prototype.foreground = function(c, x, y, w, h, strokeColor)3602{3603	c.setGradient('#EEF3F9', '#DBE2E9', w * 0.0086, h * 0.03, w * 0.0776, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1);3604	rSizeX = w * 0.0144;3605	rSizeY = h * 0.025;3606	c.setFontSize(10.5);3607	c.setFontColor('#000000');36083609	c.roundrect(w * 0.0086, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3610	c.fill();3611	c.text(w * 0.0474, h * 0.125, 0, 0, '[', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36123613	c.roundrect(w * 0.1092, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3614	c.fill();3615	c.text(w * 0.148, h * 0.125, 0, 0, ']', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36163617	c.roundrect(w * 0.2098, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3618	c.fill();3619	c.text(w * 0.2486, h * 0.125, 0, 0, '{', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36203621	c.roundrect(w * 0.3103, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3622	c.fill();3623	c.text(w * 0.3491, h * 0.125, 0, 0, '}', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36243625	c.roundrect(w * 0.4109, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3626	c.fill();3627	c.text(w * 0.4497, h * 0.125, 0, 0, '#', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36283629	c.roundrect(w * 0.5115, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3630	c.fill();3631	c.text(w * 0.5503, h * 0.125, 0, 0, '%', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36323633	c.roundrect(w * 0.6121, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3634	c.fill();3635	c.text(w * 0.6509, h * 0.125, 0, 0, '^', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36363637	c.roundrect(w * 0.7126, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3638	c.fill();3639	c.text(w * 0.7514, h * 0.125, 0, 0, '*', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36403641	c.roundrect(w * 0.8132, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3642	c.fill();3643	c.text(w * 0.852, h * 0.125, 0, 0, '+', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36443645	c.roundrect(w * 0.9138, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY);3646	c.fill();3647	c.text(w * 0.9526, h * 0.125, 0, 0, '=', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36483649	c.roundrect(w * 0.0086, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3650	c.fill();3651	c.text(w * 0.0474, h * 0.375, 0, 0, '_', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36523653	c.roundrect(w * 0.1092, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3654	c.fill();3655	c.text(w * 0.148, h * 0.375, 0, 0, '\\', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36563657	c.roundrect(w * 0.2098, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3658	c.fill();3659	c.text(w * 0.2486, h * 0.375, 0, 0, '|', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36603661	c.roundrect(w * 0.3103, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3662	c.fill();3663	c.text(w * 0.3491, h * 0.375, 0, 0, '~', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36643665	c.roundrect(w * 0.4109, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3666	c.fill();3667	c.text(w * 0.4497, h * 0.375, 0, 0, '<', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36683669	c.roundrect(w * 0.5115, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3670	c.fill();3671	c.text(w * 0.5503, h * 0.375, 0, 0, '>', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36723673	c.roundrect(w * 0.6121, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3674	c.fill();3675	c.text(w * 0.6509, h * 0.375, 0, 0, String.fromCharCode(128), mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36763677	c.roundrect(w * 0.7126, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3678	c.fill();3679	c.text(w * 0.7514, h * 0.375, 0, 0, String.fromCharCode(parseInt('00A3', 16)), mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36803681	c.roundrect(w * 0.8132, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3682	c.fill();3683	c.text(w * 0.852, h * 0.375, 0, 0, String.fromCharCode(parseInt('00A5', 16)), mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36843685	c.roundrect(w * 0.9138, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY);3686	c.fill();3687	c.text(w * 0.9526, h * 0.375, 0, 0, String.fromCharCode(parseInt('0095', 16)), mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36883689	c.roundrect(w * 0.1638, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY);3690	c.fill();3691	c.text(w * 0.2227, h * 0.625, 0, 0, '.', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36923693	c.roundrect(w * 0.3046, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY);3694	c.fill();3695	c.text(w * 0.3635, h * 0.625, 0, 0, ',', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);36963697	c.roundrect(w * 0.4454, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY);3698	c.fill();3699	c.text(w * 0.5043, h * 0.625, 0, 0, '?', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);37003701	c.roundrect(w * 0.5862, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY);3702	c.fill();3703	c.text(w * 0.6451, h * 0.625, 0, 0, '!', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);37043705	c.roundrect(w * 0.727, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY);3706	c.fill();3707	c.text(w * 0.7859, h * 0.625, 0, 0, '\'', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);37083709	c.roundrect(w * 0.2644, h * 0.78, w * 0.4799, h * 0.19, rSizeX, rSizeY);3710	c.fill();3711	c.setFontColor('#666666');3712	c.text(w * 0.5043, h * 0.875, 0, 0, 'space', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);37133714	c.setGradient('#8B98A8', '#677488', w * 0.0115, h * 0.53, w * 0.1207, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1);3715	c.setFontColor('#ffffff');37163717	c.roundrect(w * 0.0115, h * 0.53, w * 0.1207, h * 0.19, rSizeX, rSizeY);3718	c.fill();37193720	c.roundrect(w * 0.8736, h * 0.53, w * 0.115, h * 0.19, rSizeX, rSizeY);3721	c.fill();3722	c.roundrect(w * 0.0115, h * 0.78, w * 0.2299, h * 0.19, rSizeX, rSizeY);3723	c.fill();3724	c.roundrect(w * 0.7672, h * 0.78, w * 0.2213, h * 0.19, rSizeX, rSizeY);3725	c.fill();3726	c.text(w * 0.0718, h * 0.625, 0, 0, '123', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);3727	c.text(w * 0.1264, h * 0.875, 0, 0, 'ABC', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);3728	c.text(w * 0.8779, h * 0.875, 0, 0, 'return', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);37293730	c.setShadow(false);3731	c.setLineJoin('round');3732	c.setStrokeColor('#ffffff');3733	c.setFillColor('#ffffff');3734	c.setStrokeWidth(1.5);3735	c.begin();3736	c.moveTo(w * 0.9109, h * 0.585);3737	c.lineTo(w * 0.9655, h * 0.585);3738	c.lineTo(w * 0.9655, h * 0.665);3739	c.lineTo(w * 0.9109, h * 0.665);3740	c.lineTo(w * 0.8879, h * 0.625);3741	c.close();3742	c.fillAndStroke();37433744	c.setStrokeColor('#677488');3745	c.begin();3746	c.moveTo(w * 0.9224, h * 0.605);3747	c.lineTo(w * 0.9454, h * 0.645);3748	c.moveTo(w * 0.9224, h * 0.645);3749	c.lineTo(w * 0.9454, h * 0.605);3750	c.stroke();3751};37523753mxCellRenderer.registerShape(mxMockupC.SHAPE_IKEYB_SYMBOLS, mxShapeMockupiKeybSymbols);37543755//**********************************************************************************************************************************************************3756//Delete App3757//**********************************************************************************************************************************************************3758/**3759 * Extends mxShape.3760 */3761function mxShapeMockupiDeleteApp(bounds, fill, stroke, strokewidth)3762{3763	mxShape.call(this);3764	this.bounds = bounds;3765	this.fill = fill;3766	this.stroke = stroke;3767	this.strokewidth = (strokewidth != null) ? strokewidth : 1;3768};37693770/**3771 * Extends mxShape.3772 */3773mxUtils.extend(mxShapeMockupiDeleteApp, mxShape);37743775/**3776 * Function: paintVertexShape3777 * 3778 * Paints the vertex shape.3779 */3780mxShapeMockupiDeleteApp.prototype.paintVertexShape = function(c, x, y, w, h)3781{3782	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '').toString();37833784	c.translate(x, y);3785	this.background(c, x, y, w, h, strokeColor);3786	c.setShadow(false);3787	this.foreground(c, x, y, w, h);3788};37893790mxShapeMockupiDeleteApp.prototype.background = function(c, x, y, w, h, strokeColor)3791{3792	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString();3793	var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString();3794	c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);37953796	c.setStrokeWidth(1.5);3797	c.setStrokeColor(strokeColor);3798	c.ellipse(0, 0, w, h);3799	c.fillAndStroke();3800};38013802mxShapeMockupiDeleteApp.prototype.foreground = function(c, x, y, w, h)3803{3804	c.setStrokeWidth(2.5);3805	c.begin();3806	c.moveTo(w * 0.3, h * 0.3);3807	c.lineTo(w * 0.7, h * 0.7);3808	c.moveTo(w * 0.3, h * 0.7);3809	c.lineTo(w * 0.7, h * 0.3);3810	c.stroke();3811};38123813mxCellRenderer.registerShape(mxMockupC.SHAPE_IDELETE_APP, mxShapeMockupiDeleteApp);38143815//**********************************************************************************************************************************************************3816//Direction3817//**********************************************************************************************************************************************************3818/**3819 * Extends mxShape.3820 */3821function mxShapeMockupiDirection(bounds, fill, stroke, strokewidth)3822{3823	mxShape.call(this);3824	this.bounds = bounds;3825	this.fill = fill;3826	this.stroke = stroke;3827	this.strokewidth = (strokewidth != null) ? strokewidth : 1;3828};38293830/**3831 * Extends mxShape.3832 */3833mxUtils.extend(mxShapeMockupiDirection, mxShape);38343835/**3836 * Function: paintVertexShape3837 * 3838 * Paints the vertex shape.3839 */3840mxShapeMockupiDirection.prototype.paintVertexShape = function(c, x, y, w, h)3841{3842	c.translate(x, y);3843	this.background(c, x, y, w, h);3844	c.setShadow(false);3845	this.foreground(c, x, y, w, h);3846};38473848mxShapeMockupiDirection.prototype.background = function(c, x, y, w, h)3849{3850	c.setStrokeWidth(0.5);3851	c.setStrokeColor('#008cff');3852	c.ellipse(0, 0, w, h);3853	c.stroke();3854};38553856mxShapeMockupiDirection.prototype.foreground = function(c, x, y, w, h)3857{3858	c.setAlpha(1);3859	c.setGradient('#ffffff', '#ffffff', w * 0.29, h * 0.2, w * 0.42, h * 0.3, mxConstants.DIRECTION_NORTH, 1, 0);3860	c.begin();3861	c.moveTo(w * 0.29, h * 0.2);3862	c.lineTo(w * 0.5, h * 0.5);3863	c.lineTo(w * 0.71, h * 0.2);3864	c.fillAndStroke();38653866	c.setStrokeColor('#006cdf');3867	c.setGradient('#ffffff', '#007cef', w * 0.47, h * 0.47, w * 0.06, h * 0.06, mxConstants.DIRECTION_SOUTH, 1, 1);3868	c.setAlpha(1);3869	c.ellipse(w * 0.47, h * 0.47, w * 0.06, h * 0.06);3870	c.fillAndStroke();38713872	c.setFillColor('#ffffff');3873	c.setAlpha(0.8);3874	c.ellipse(w * 0.4825, h * 0.4825, w * 0.015, h * 0.015);3875	c.fill();3876};38773878mxCellRenderer.registerShape(mxMockupC.SHAPE_IDIRECTION, mxShapeMockupiDirection);38793880//**********************************************************************************************************************************************************3881//Location Bar3882//**********************************************************************************************************************************************************3883/**3884 * Extends mxShape.3885 */3886function mxShapeMockupiLocationBar(bounds, fill, stroke, strokewidth)3887{3888	mxShape.call(this);3889	this.bounds = bounds;3890	this.fill = fill;3891	this.stroke = stroke;3892	this.strokewidth = (strokewidth != null) ? strokewidth : 1;3893};38943895/**3896 * Extends mxShape.3897 */3898mxUtils.extend(mxShapeMockupiLocationBar, mxShape);38993900mxShapeMockupiLocationBar.prototype.customProperties = [3901	{name: 'buttonText', dispName: 'Text', type: 'string'},3902	{name: 'barPos', dispName: 'Callout Position', type: 'float', min:0, defVal:80},3903	{name: 'pointerPos', dispName: 'Callout Orientation', type: 'enum',3904		enumList: [{val: 'bottom', dispName: 'Bottom'}, {val: 'top', dispName: 'Top'}]3905	}3906];39073908/**3909 * Function: paintVertexShape3910 * 3911 * Paints the vertex shape.3912 */3913mxShapeMockupiLocationBar.prototype.paintVertexShape = function(c, x, y, w, h)3914{3915	c.translate(x, y);3916	this.background(c, x, y, w, h);3917	c.setShadow(false);3918	this.foreground(c, x, y, w, h);3919};39203921mxShapeMockupiLocationBar.prototype.background = function(c, x, y, w, h)3922{3923	var barPos = mxUtils.getValue(this.style, mxMockupC.BAR_POS, '80');3924	barPos = Math.min(barPos, 100);3925	barPos = Math.max(barPos, 0);3926	var pointerPos = mxUtils.getValue(this.style, mxMockupC.POINTER_POS, mxMockupC.POINTER_BOTTOM);3927	var rSize = 2.5;3928	var deadzone = rSize + 7.5; // rounding + pointer width / 2 3929	var virRange = w - 2 * deadzone;3930	var truePos = deadzone + virRange * barPos / 100;3931	c.setStrokeWidth(0.5);3932	c.setStrokeColor('#000000');3933	c.setAlpha(0.7);3934	c.begin();39353936	if (pointerPos === mxMockupC.POINTER_BOTTOM)3937	{3938		c.setGradient('#000000', '#888888', 0, 0, w, h, mxConstants.DIRECTION_NORTH, 1, 1);3939		c.moveTo(0, rSize);3940		c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);3941		c.lineTo(w - rSize, 0);3942		c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);3943		c.lineTo(w, h - rSize - 7.5);3944		c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h - 7.5);3945		c.lineTo(truePos + 7.5, h - 7.5);3946		c.lineTo(truePos, h);3947		c.lineTo(truePos - 7.5, h - 7.5);3948		c.lineTo(rSize, h - 7.5);3949		c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize - 7.5);3950	}3951	else if (pointerPos === mxMockupC.POINTER_TOP)3952	{3953		c.setGradient('#000000', '#888888', 0, 0, w, h, mxConstants.DIRECTION_NORTH, 1, 1);3954		c.moveTo(0, rSize + 7.5);3955		c.arcTo(rSize, rSize, 0, 0, 1, rSize, 7.5);3956		c.lineTo(truePos - 7.5, 7.5);3957		c.lineTo(truePos, 0);3958		c.lineTo(truePos + 7.5, 7.5);3959		c.lineTo(w - rSize, 7.5);3960		c.arcTo(rSize, rSize, 0, 0, 1, w, rSize + 7.5);3961		c.lineTo(w, h - rSize);3962		c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);3963		c.lineTo(rSize, h);3964		c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);3965	}39663967	c.close();3968	c.fillAndStroke();3969};39703971mxShapeMockupiLocationBar.prototype.foreground = function(c, x, y, w, h)3972{3973	var pointerPos = mxUtils.getValue(this.style, mxMockupC.POINTER_POS, mxMockupC.POINTER_BOTTOM);3974	var locText = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Some Location'));3975	c.setAlpha(1);3976	c.setFontColor('#ffffff');3977	c.setFontSize(9.5);39783979	if (pointerPos === mxMockupC.POINTER_BOTTOM)3980	{3981		c.text(5, (h - 7.5) * 0.5, 0, 0, locText, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);3982		c.translate(w - 20, (h - 7.5) * 0.5 - 7.5);3983	}3984	else3985	{3986		c.text(5, (h + 7.5) * 0.5, 0, 0, locText, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);3987		c.translate(w - 20, (h + 7.5) * 0.5 - 7.5);3988	}		39893990	w = 15;3991	h = 15;39923993	c.setGradient('#8BbEff', '#135Ec8', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);39943995	c.setStrokeWidth(1.5);3996	c.setStrokeColor('#ffffff');3997	c.ellipse(0, 0, w, h);3998	c.fillAndStroke();39994000	c.setStrokeWidth(2.5);4001	c.begin();4002	c.moveTo(w * 0.4, h * 0.22);4003	c.lineTo(w * 0.65, h * 0.5);4004	c.lineTo(w * 0.4, h * 0.78);4005	c.stroke();4006};40074008mxCellRenderer.registerShape(mxMockupC.SHAPE_ILOCATION_BAR, mxShapeMockupiLocationBar);40094010//**********************************************************************************************************************************************************4011//Call Dialog4012//**********************************************************************************************************************************************************4013/**4014 * Extends mxShape.4015 */4016function mxShapeMockupiCallDialog(bounds, fill, stroke, strokewidth)4017{4018	mxShape.call(this);4019	this.bounds = bounds;4020	this.fill = fill;4021	this.stroke = stroke;4022	this.strokewidth = (strokewidth != null) ? strokewidth : 1;4023};40244025/**4026 * Extends mxShape.4027 */4028mxUtils.extend(mxShapeMockupiCallDialog, mxShape);40294030/**4031 * Function: paintVertexShape4032 * 4033 * Paints the vertex shape.4034 */4035mxShapeMockupiCallDialog.prototype.paintVertexShape = function(c, x, y, w, h)4036{4037	var rSize = 5;4038	c.translate(x, y);4039	this.background(c, x, y, w, h, rSize);4040	c.setShadow(false);4041	this.foreground(c, x, y, w, h, rSize);4042};40434044mxShapeMockupiCallDialog.prototype.background = function(c, x, y, w, h, rSize)4045{4046	c.setAlpha(0.8);4047	c.setStrokeColor('#888888');4048	c.setStrokeWidth(1.5);4049	c.setFillColor('#000000');4050	c.roundrect(0, 0, w, h, rSize, rSize);4051	c.fillAndStroke();4052};40534054mxShapeMockupiCallDialog.prototype.foreground = function(c, x, y, w, h, rSize)4055{40564057	c.begin();4058	c.moveTo(w * 0.33, 0);4059	c.lineTo(w * 0.33, h);4060	c.moveTo(w * 0.67, 0);4061	c.lineTo(w * 0.67, h);4062	c.moveTo(0, h * 0.5);4063	c.lineTo(w, h * 0.5);4064	c.stroke();40654066	c.setStrokeColor('#000000');4067	c.setFillColor('#ffffff');4068	c.setStrokeWidth(0.5);4069	c.roundrect(w * 0.1433, h * 0.104, w * 0.0417, h * 0.148, w * 0.02, h * 0.024);4070	c.fill();40714072	c.begin();4073	c.moveTo(w * 0.14, h * 0.188);4074	c.lineTo(w * 0.14, h * 0.228);4075	c.arcTo(w * 0.025, h * 0.03, 0, 0, 0, w * 0.19, h * 0.228);4076	c.lineTo(w * 0.19, h * 0.188);4077	c.lineTo(w * 0.2, h * 0.188);4078	c.lineTo(w * 0.2, h * 0.228);4079	c.arcTo(w * 0.0367, h * 0.044, 0, 0, 1, w * 0.17, h * 0.27);4080	c.lineTo(w * 0.17, h * 0.296);4081	c.lineTo(w * 0.195, h * 0.296);4082	c.lineTo(w * 0.195, h * 0.308);4083	c.lineTo(w * 0.1367, h * 0.308);4084	c.lineTo(w * 0.1367, h * 0.296);4085	c.lineTo(w * 0.16, h * 0.296);4086	c.lineTo(w * 0.16, h * 0.27);4087	c.arcTo(w * 0.0367, h * 0.044, 0, 0, 1, w * 0.13, h * 0.228);4088	c.lineTo(w * 0.13, h * 0.188);4089	c.close();4090	c.fillAndStroke();40914092	c.begin();4093	c.moveTo(w * 0.1033, h * 0.108);4094	c.lineTo(w * 0.24, h * 0.286);4095	c.lineTo(w * 0.2317, h * 0.298);4096	c.lineTo(w * 0.095, h * 0.12);4097	c.close();4098	c.fillAndStroke();40994100	c.rect(w * 0.44, h * 0.128, w * 0.033, h * 0.04);4101	c.fill();4102	c.rect(w * 0.485, h * 0.128, w * 0.033, h * 0.04);4103	c.fill();4104	c.rect(w * 0.53, h * 0.128, w * 0.033, h * 0.04);4105	c.fill();4106	c.rect(w * 0.44, h * 0.186, w * 0.033, h * 0.04);4107	c.fill();4108	c.rect(w * 0.485, h * 0.186, w * 0.033, h * 0.04);4109	c.fill();4110	c.rect(w * 0.53, h * 0.186, w * 0.033, h * 0.04);4111	c.fill();4112	c.rect(w * 0.44, h * 0.244, w * 0.033, h * 0.04);4113	c.fill();4114	c.rect(w * 0.485, h * 0.244, w * 0.033, h * 0.04);4115	c.fill();4116	c.rect(w * 0.53, h * 0.244, w * 0.033, h * 0.04);4117	c.fill();41184119	c.begin();4120	c.moveTo(w * 0.7567, h * 0.18);4121	c.lineTo(w * 0.785, h * 0.18);4122	c.lineTo(w * 0.825, h * 0.128);4123	c.lineTo(w * 0.825, h * 0.28);4124	c.lineTo(w * 0.79, h * 0.234);4125	c.lineTo(w * 0.7567, h * 0.234);4126	c.close();4127	c.fill();41284129	c.setStrokeWidth(1.5);4130	c.setStrokeColor('#ffffff');4131	c.begin();4132	c.moveTo(w * 0.8383, h * 0.16);4133	c.arcTo(w * 0.0533, h * 0.064, 0, 0, 1, w * 0.8383, h * 0.252);4134	c.moveTo(w * 0.8583, h * 0.134);4135	c.arcTo(w * 0.0817, h * 0.098, 0, 0, 1, w * 0.8583, h * 0.276);4136	c.moveTo(w * 0.8767, h * 0.11);4137	c.arcTo(w * 0.1133, h * 0.136, 0, 0, 1, w * 0.8767, h * 0.304);4138	c.stroke();41394140	c.begin();4141	c.moveTo(w * 0.1467, h * 0.62);4142	c.lineTo(w * 0.1833, h * 0.62);4143	c.lineTo(w * 0.1833,h * 0.676);4144	c.lineTo(w * 0.2267,h * 0.676);4145	c.lineTo(w * 0.2267,h * 0.724);4146	c.lineTo(w * 0.1833,h * 0.724);4147	c.lineTo(w * 0.1833,h * 0.78);4148	c.lineTo(w * 0.1467,h * 0.78);4149	c.lineTo(w * 0.1467,h * 0.724);4150	c.lineTo(w * 0.105,h * 0.724);4151	c.lineTo(w * 0.105,h * 0.676);4152	c.lineTo(w * 0.1467,h * 0.676);4153	c.close();4154	c.fill();41554156	c.rect(w * 0.4517, h * 0.624, w * 0.0333, h * 0.152);4157	c.fill();41584159	c.rect(w * 0.5183, h * 0.624, w * 0.0333, h * 0.152);4160	c.fill();41614162	c.begin();4163	c.moveTo(w * 0.76, h * 0.752);4164	c.arcTo(w * 0.1, h * 0.12, 0, 0, 1, w * 0.8033, h * 0.728);4165	c.arcTo(w * 0.0167, h * 0.02, 0, 0, 0, w * 0.8167, h * 0.712);4166	c.lineTo(w * 0.8175, h * 0.7);4167	c.arcTo(w * 0.0267, h * 0.06, 0, 0, 1, w * 0.8067, h * 0.644);4168	c.arcTo(w * 0.0287, h * 0.0344, 0, 0, 1, w * 0.8633, h * 0.644);4169	c.arcTo(w * 0.0267, h * 0.06, 0, 0, 1, w * 0.855, h * 0.7);4170	c.arcTo(w * 0.05, h * 0.724, 0, 0, 1, w * 0.8633, h * 0.724);4171	c.arcTo(w * 0.1667, h * 0.75, 0, 0, 1, w * 0.9083, h * 0.75);4172	c.lineTo(w * 0.9083, h * 0.78);4173	c.lineTo(w * 0.76, h * 0.78);4174	c.close();4175	c.fill();41764177	c.setFontColor('#ffffff');4178	c.setFontSize(8.5);4179	c.text(w * 0.1667, h * 0.35, 0, 0, 'mute', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4180	c.text(w * 0.5, h * 0.35, 0, 0, 'keypad', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4181	c.text(w * 0.8333, h * 0.35, 0, 0, 'speaker', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4182	c.text(w * 0.1667, h * 0.85, 0, 0, 'add', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4183	c.text(w * 0.5, h * 0.85, 0, 0, 'pause', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4184	c.text(w * 0.8333, h * 0.85, 0, 0, 'contacts', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);41854186	c.setGradient('#808080', '#ffffff', 0, 0, w, h * 0.308, mxConstants.DIRECTION_NORTH, 1, 1);4187	c.setAlpha(0.4);4188	c.begin();4189	c.moveTo(0, h * 0.308);4190	c.lineTo(0, rSize);4191	c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);4192	c.lineTo(w - rSize, 0);4193	c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);4194	c.lineTo(w, h * 0.308);4195	c.arcTo(w * 1.5, h * 1.8, 0, 0, 1, 0, h * 0.308);4196	c.close();4197	c.fill();4198};41994200mxCellRenderer.registerShape(mxMockupC.SHAPE_ICALL_DIALOG, mxShapeMockupiCallDialog);42014202//**********************************************************************************************************************************************************4203//Call Buttons4204//**********************************************************************************************************************************************************4205/**4206 * Extends mxShape.4207 */4208function mxShapeMockupiCallButtons(bounds, fill, stroke, strokewidth)4209{4210	mxShape.call(this);4211	this.bounds = bounds;4212	this.fill = fill;4213	this.stroke = stroke;4214	this.strokewidth = (strokewidth != null) ? strokewidth : 1;4215};42164217/**4218 * Extends mxShape.4219 */4220mxUtils.extend(mxShapeMockupiCallButtons, mxShape);42214222/**4223 * Function: paintVertexShape4224 * 4225 * Paints the vertex shape.4226 */4227mxShapeMockupiCallButtons.prototype.paintVertexShape = function(c, x, y, w, h)4228{4229	c.translate(x, y);4230	this.background(c, x, y, w, h);4231	c.setShadow(false);4232	this.foreground(c, x, y, w, h);4233};42344235mxShapeMockupiCallButtons.prototype.background = function(c, x, y, w, h)4236{4237	c.setStrokeWidth(0.5);4238	c.setStrokeColor('#008cff');4239	c.setGradient('#0F1B2B', '#4F5B6B', 0, 0, w, h, mxConstants.DIRECTION_NORTH, 1, 1);4240	c.rect(0, 0, w, h);4241	c.fillAndStroke();4242};42434244mxShapeMockupiCallButtons.prototype.foreground = function(c, x, y, w, h)4245{4246	c.begin();4247	c.moveTo(0, h * 0.1667);4248	c.lineTo(w, h * 0.1667);4249	c.moveTo(0, h * 0.3333);4250	c.lineTo(w, h * 0.3333);4251	c.moveTo(0, h * 0.5);4252	c.lineTo(w, h * 0.5);4253	c.moveTo(0, h * 0.6667);4254	c.lineTo(w, h * 0.6667);4255	c.moveTo(0, h * 0.8333);4256	c.lineTo(w, h * 0.8333);4257	c.moveTo(w * 0.3333, h * 0.1667);4258	c.lineTo(w * 0.3333, h);4259	c.moveTo(w * 0.6667, h * 0.1667);4260	c.lineTo(w * 0.6667, h);4261	c.stroke();42624263	c.setFontSize(15.5);4264	c.setFontColor('#ffffff');4265	c.setFontStyle(mxConstants.FONT_BOLD);42664267	c.text(w * 0.5, h * 0.0834, 0, 0, '(123) 456-7890', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);42684269	c.text(w * 0.1667, h * 0.22, 0, 0, '1', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4270	c.text(w * 0.5, h * 0.22, 0, 0, '2', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4271	c.text(w * 0.8333, h * 0.22, 0, 0, '3', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);42724273	c.text(w * 0.1667, h * 0.3867, 0, 0, '3', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4274	c.text(w * 0.5, h * 0.3867, 0, 0, '4', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4275	c.text(w * 0.8333, h * 0.3867, 0, 0, '5', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);42764277	c.text(w * 0.1667, h * 0.5534, 0, 0, '6', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4278	c.text(w * 0.5, h * 0.5534, 0, 0, '7', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4279	c.text(w * 0.8333, h * 0.5534, 0, 0, '8', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);42804281	c.setFontSize(27.5);4282	c.text(w * 0.1667, h * 0.76, 0, 0, '*', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4283	c.setFontSize(15.5);4284	c.text(w * 0.5, h * 0.72, 0, 0, '0', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4285	c.text(w * 0.8333, h * 0.75, 0, 0, '#', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);42864287	c.setGradient('#E2FFEB', '#008215', w * 0.3333, h * 0.8333, w * 0.3333, h * 0.1667, mxConstants.DIRECTION_SOUTH, 1, 1);4288	c.rect(w * 0.3333, h * 0.8333, w * 0.3333, h * 0.1667);4289	c.fillAndStroke();42904291	c.text(w * 0.5, h * 0.9168, 0, 0, 'Call', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);42924293	c.setFontStyle(0);4294	c.setFontSize(8);4295	c.setFontColor('#bbbbbb');42964297	c.text(w * 0.5, h * 0.28, 0, 0, 'ABC', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4298	c.text(w * 0.8333, h * 0.28, 0, 0, 'DEF', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);42994300	c.text(w * 0.1667, h * 0.4467, 0, 0, 'GHI', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4301	c.text(w * 0.5, h * 0.4467, 0, 0, 'JKL', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4302	c.text(w * 0.8333, h * 0.4467, 0, 0, 'MNO', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);43034304	c.text(w * 0.1667, h * 0.6134, 0, 0, 'PQRS', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4305	c.text(w * 0.5, h * 0.6134, 0, 0, 'TUV', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4306	c.text(w * 0.8333, h * 0.6134, 0, 0, 'WXYZ', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);43074308	c.text(w * 0.5, h * 0.78, 0, 0, '+', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);43094310	c.setFillColor('#ffffff');4311	c.begin();4312	c.moveTo(w * 0.1028, h * 0.9464);4313	c.arcTo(w * 0.0862, h * 0.0652, 0, 0, 1, w * 0.1402, h * 0.9333);4314	c.arcTo(w * 0.0144, h * 0.0109, 0, 0, 0, w * 0.1517, h * 0.9246);4315	c.lineTo(w * 0.1524, h * 0.9181);4316	c.arcTo(w * 0.023, h * 0.0326, 0, 0, 1, w * 0.143, h * 0.8877);4317	c.arcTo(w * 0.0247, h * 0.0187, 0, 0, 1, w * 0.1919, h * 0.8877);4318	c.arcTo(w * 0.023, h * 0.0326, 0, 0, 1, w * 0.1847, h * 0.9181);4319	c.arcTo(w * 0.0431, h * 0.0174, 0, 0, 0, w * 0.1919, h * 0.9311);4320	c.arcTo(w * 0.1437, h * 0.1087, 0, 0, 1, w * 0.2307, h * 0.9453);4321	c.lineTo(w * 0.2307, h * 0.9616);4322	c.lineTo(w * 0.1028, h * 0.9616);4323	c.close();4324	c.fill();43254326	c.setStrokeColor('#ffffff');4327	c.setStrokeWidth(2.5);4328	c.setLineJoin('round');4329	c.begin();4330	c.moveTo(w * 0.79, h * 0.89);4331	c.lineTo(w * 0.9, h * 0.89);4332	c.lineTo(w * 0.9, h * 0.95);4333	c.lineTo(w * 0.79, h * 0.95);4334	c.lineTo(w * 0.76, h * 0.92);4335	c.close();4336	c.fillAndStroke();43374338	c.setStrokeColor('#0F1B2B');4339	c.begin();4340	c.moveTo(w * 0.82, h * 0.907);4341	c.lineTo(w * 0.85, h * 0.933);4342	c.moveTo(w * 0.82, h * 0.933);4343	c.lineTo(w * 0.85, h * 0.907);4344	c.stroke();4345};43464347mxCellRenderer.registerShape(mxMockupC.SHAPE_ICALL_BUTTONS, mxShapeMockupiCallButtons);43484349//**********************************************************************************************************************************************************4350//Option4351//**********************************************************************************************************************************************************4352/**4353 * Extends mxShape.4354 */4355function mxShapeMockupiOption(bounds, fill, stroke, strokewidth)4356{4357	mxShape.call(this);4358	this.bounds = bounds;4359	this.fill = fill;4360	this.stroke = stroke;4361	this.strokewidth = (strokewidth != null) ? strokewidth : 1;4362};43634364/**4365 * Extends mxShape.4366 */4367mxUtils.extend(mxShapeMockupiOption, mxShape);43684369mxShapeMockupiOption.prototype.customProperties = [4370	{name: 'buttonText', dispName: 'Text', type: 'string'},4371	{name: 'barPos', dispName: 'Callout Position', type: 'float', min:0, defVal:80},4372	{name: 'pointerPos', dispName: 'Callout Orientation', type: 'enum',4373		enumList: [{val: 'bottom', dispName: 'Bottom'}, {val: 'top', dispName: 'Top'}]4374	}4375];43764377/**4378 * Function: paintVertexShape4379 * 4380 * Paints the vertex shape.4381 */4382mxShapeMockupiOption.prototype.paintVertexShape = function(c, x, y, w, h)4383{4384	c.translate(x, y);4385	this.background(c, x, y, w, h);4386	c.setShadow(false);4387	this.foreground(c, x, y, w, h);4388};43894390mxShapeMockupiOption.prototype.background = function(c, x, y, w, h)4391{4392	var barPos = mxUtils.getValue(this.style, mxMockupC.BAR_POS, '80');4393	barPos = Math.min(barPos, 100);4394	barPos = Math.max(barPos, 0);4395	var pointerPos = mxUtils.getValue(this.style, mxMockupC.POINTER_POS, mxMockupC.POINTER_BOTTOM);4396	var rSize = 2.5;4397	var deadzone = rSize + 7.5; // rounding + pointer width / 2 4398	var virRange = w - 2 * deadzone;4399	var truePos = deadzone + virRange * barPos / 100;4400	c.setStrokeWidth(0.5);4401	c.setStrokeColor('#000000');4402	c.setAlpha(0.9);4403	c.begin();44044405	if (pointerPos === mxMockupC.POINTER_BOTTOM)4406	{4407		c.setGradient('#000000', '#888888', 0, 0, w, h, mxConstants.DIRECTION_NORTH, 1, 1);4408		c.moveTo(0, rSize);4409		c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);4410		c.lineTo(w - rSize, 0);4411		c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);4412		c.lineTo(w, h - rSize - 7.5);4413		c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h - 7.5);4414		c.lineTo(truePos + 7.5, h - 7.5);4415		c.lineTo(truePos, h);4416		c.lineTo(truePos - 7.5, h - 7.5);4417		c.lineTo(rSize, h - 7.5);4418		c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize - 7.5);4419	}4420	else if (pointerPos === mxMockupC.POINTER_TOP)4421	{4422		c.setGradient('#000000', '#888888', 0, 0, w, h, mxConstants.DIRECTION_NORTH, 1, 1);4423		c.moveTo(0, rSize + 7.5);4424		c.arcTo(rSize, rSize, 0, 0, 1, rSize, 7.5);4425		c.lineTo(truePos - 7.5, 7.5);4426		c.lineTo(truePos, 0);4427		c.lineTo(truePos + 7.5, 7.5);4428		c.lineTo(w - rSize, 7.5);4429		c.arcTo(rSize, rSize, 0, 0, 1, w, rSize + 7.5);4430		c.lineTo(w, h - rSize);4431		c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);4432		c.lineTo(rSize, h);4433		c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);4434	}44354436	c.close();4437	c.fillAndStroke();4438};44394440mxShapeMockupiOption.prototype.foreground = function(c, x, y, w, h)4441{4442	var locText = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Some Location'));4443	var pointerPos = mxUtils.getValue(this.style, mxMockupC.POINTER_POS, mxMockupC.POINTER_BOTTOM);4444	c.setAlpha(1);4445	c.setFontColor('#ffffff');4446	c.setFontSize(9.5);4447	4448	if (pointerPos === mxMockupC.POINTER_BOTTOM)4449	{4450		c.text(w * 0.5, (h - 7.5) * 0.5, 0, 0, locText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4451	}4452	else4453	{4454		c.text(w * 0.5, (h + 7.5) * 0.5, 0, 0, locText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4455	}4456};44574458mxCellRenderer.registerShape(mxMockupC.SHAPE_IOPTION, mxShapeMockupiOption);44594460//**********************************************************************************************************************************************************4461//Alpha List4462//**********************************************************************************************************************************************************4463/**4464 * Extends mxShape.4465 */4466function mxShapeMockupiAlphaList(bounds, fill, stroke, strokewidth)4467{4468	mxShape.call(this);4469	this.bounds = bounds;4470	this.fill = fill;4471	this.stroke = stroke;4472	this.strokewidth = (strokewidth != null) ? strokewidth : 1;4473};44744475/**4476 * Extends mxShape.4477 */4478mxUtils.extend(mxShapeMockupiAlphaList, mxShape);44794480/**4481 * Function: paintVertexShape4482 * 4483 * Paints the vertex shape.4484 */4485mxShapeMockupiAlphaList.prototype.paintVertexShape = function(c, x, y, w, h)4486{4487	c.translate(x, y);4488	c.setShadow(false);4489	var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8');44904491	c.setFontColor('#999999');4492	c.setFontSize(fontSize);4493	c.text(w * 0.5, h * 0.069, 0, 0, 'A', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4494	c.text(w * 0.5, h * 0.1035, 0, 0, 'B', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4495	c.text(w * 0.5, h * 0.138, 0, 0, 'C', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4496	c.text(w * 0.5, h * 0.1725, 0, 0, 'D', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4497	c.text(w * 0.5, h * 0.207, 0, 0, 'E', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4498	c.text(w * 0.5, h * 0.2415, 0, 0, 'F', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4499	c.text(w * 0.5, h * 0.276, 0, 0, 'G', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4500	c.text(w * 0.5, h * 0.3105, 0, 0, 'H', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4501	c.text(w * 0.5, h * 0.345, 0, 0, 'I', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4502	c.text(w * 0.5, h * 0.3795, 0, 0, 'J', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4503	c.text(w * 0.5, h * 0.414, 0, 0, 'K', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4504	c.text(w * 0.5, h * 0.4485, 0, 0, 'L', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4505	c.text(w * 0.5, h * 0.483, 0, 0, 'M', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4506	c.text(w * 0.5, h * 0.5175, 0, 0, 'N', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4507	c.text(w * 0.5, h * 0.552, 0, 0, 'O', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4508	c.text(w * 0.5, h * 0.5865, 0, 0, 'P', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4509	c.text(w * 0.5, h * 0.621, 0, 0, 'Q', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4510	c.text(w * 0.5, h * 0.6555, 0, 0, 'R', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4511	c.text(w * 0.5, h * 0.69, 0, 0, 'S', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4512	c.text(w * 0.5, h * 0.7245, 0, 0, 'T', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4513	c.text(w * 0.5, h * 0.759, 0, 0, 'U', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4514	c.text(w * 0.5, h * 0.7935, 0, 0, 'V', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4515	c.text(w * 0.5, h * 0.828, 0, 0, 'W', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4516	c.text(w * 0.5, h * 0.8625, 0, 0, 'X', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4517	c.text(w * 0.5, h * 0.897, 0, 0, 'Y', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4518	c.text(w * 0.5, h * 0.9315, 0, 0, 'Z', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);4519	c.text(w * 0.5, h * 0.966, 0, 0, '#', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);45204521	c.setStrokeColor('#999999');4522	c.ellipse(w * 0.5 - 2.25, h * 0.0345 - 3.5, 4.5, 4.5);4523	c.stroke();45244525	c.begin();4526	c.moveTo(w * 0.5 - 4.25, h * 0.0345 + 3);4527	c.lineTo(w * 0.5 - 1.75, h * 0.0345);4528	c.stroke();4529};45304531mxCellRenderer.registerShape(mxMockupC.SHAPE_IALPHA_LIST, mxShapeMockupiAlphaList);45324533//**********************************************************************************************************************************************************4534//Horizontal Button Bar4535//**********************************************************************************************************************************************************4536/**4537 * Extends mxShape.4538 */4539function mxShapeMockupiHorButtonBar(bounds, fill, stroke, strokewidth)4540{4541	mxShape.call(this);4542	this.bounds = bounds;4543	this.fill = fill;4544	this.stroke = stroke;4545	this.strokewidth = (strokewidth != null) ? strokewidth : 1;4546};45474548/**4549 * Extends mxShape.4550 */4551mxUtils.extend(mxShapeMockupiHorButtonBar, mxShape);45524553mxShapeMockupiHorButtonBar.prototype.customProperties = [4554	{name: 'buttonText', dispName: 'Labels', type: 'string'},4555	{name: 'textColor', dispName: 'Text Color', type: 'color'},4556	{name: 'textColor2', dispName: 'Text2 Color', type: 'color'},4557	{name: 'strokeColor2', dispName: 'Stroke2 Color', type: 'color'}4558];45594560/**4561 * Function: paintVertexShape4562 * 4563 * Paints the vertex shape.4564 */4565mxShapeMockupiHorButtonBar.prototype.paintVertexShape = function(c, x, y, w, h)4566{4567	var textStrings = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, '+Button 1, Button 2, Button 3').toString()).split(',');4568	var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR, '#666666');4569	var selectedFontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#ffffff');4570	var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8.5').toString();4571	var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');4572	var separatorColor = mxUtils.getValue(this.style, mxMockupC.STYLE_STROKECOLOR2, '#c4c4c4');4573	var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');4574	var selectedFillColor = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '#008cff');4575	var buttonNum = textStrings.length;4576	var buttonWidths = new Array(buttonNum);4577	var buttonTotalWidth = 0;4578	var selectedButton = -1;4579	var rSize = 2.5; //rounding size4580	var labelOffset = 2.5;45814582	for (var i = 0; i < buttonNum; i++)4583	{4584		var buttonText = textStrings[i];45854586		if(buttonText.charAt(0) === mxMockupC.SELECTED)4587		{4588			buttonText = textStrings[i].substring(1);4589			selectedButton = i;4590		}45914592		buttonWidths[i] = mxUtils.getSizeForString(buttonText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;45934594		buttonTotalWidth += buttonWidths[i];4595	}45964597	var trueH = Math.max(h, fontSize * 1.5, 10);4598	var minW = 2 * labelOffset * buttonNum + buttonTotalWidth;4599	var trueW = Math.max(w, minW);46004601	c.translate(x, y);4602	this.background(c, trueW, trueH, rSize, buttonNum, buttonWidths, labelOffset, minW, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton);4603	c.setShadow(false);46044605	var currWidth = 0;46064607	for (var i = 0; i < buttonNum; i++)4608	{4609		if (i === selectedButton)4610		{4611			c.setFontColor(selectedFontColor);4612		}4613		else4614		{4615			c.setFontColor(fontColor);4616		}46174618		currWidth = currWidth + labelOffset;4619		this.buttonText(c, currWidth, trueH, textStrings[i], buttonWidths[i], fontSize, minW, trueW);4620		currWidth = currWidth + buttonWidths[i] + labelOffset;4621	}4622};46234624mxShapeMockupiHorButtonBar.prototype.background = function(c, w, h, rSize, buttonNum, buttonWidths, labelOffset, minW, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton)4625{4626	c.begin();46274628	//draw the frame4629	c.setStrokeColor(frameColor);4630	c.setFillColor(bgColor);4631	c.moveTo(0, rSize);4632	c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);4633	c.lineTo(w - rSize, 0);4634	c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);4635	c.lineTo(w, h - rSize);4636	c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);4637	c.lineTo(rSize, h);4638	c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);4639	c.close();4640	c.fillAndStroke();46414642	//draw the button separators4643	c.setStrokeColor(separatorColor);4644	c.begin();4645	for (var i = 1; i < buttonNum; i++)4646	{4647		if (i !== selectedButton && i !== (selectedButton + 1))4648		{4649			var currWidth = 0;46504651			for (var j = 0; j < i; j++)4652			{4653				currWidth += buttonWidths[j] + 2 * labelOffset;4654			}46554656			currWidth = currWidth * w / minW;4657			c.moveTo(currWidth, 0);4658			c.lineTo(currWidth, h);4659		}4660	}46614662	c.stroke();46634664	//draw the selected button4665	var buttonLeft = 0;4666	c.setStrokeColor(mxConstants.NONE);46674668	for (var i = 0; i < selectedButton; i++)4669	{4670		buttonLeft += buttonWidths[i] + 2 * labelOffset;4671	}46724673	buttonLeft = buttonLeft * w / minW;4674	var buttonRight = (buttonWidths[selectedButton] + 2 * labelOffset) * w / minW;4675	buttonRight += buttonLeft;46764677	if (selectedButton === 0)4678	{4679		c.setGradient('#5D7585', '#008cff', 0, 0, buttonRight, h, mxConstants.DIRECTION_SOUTH, 1, 1);4680		c.begin();4681		// we draw a path for the first button4682		c.moveTo(0, rSize);4683		c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);4684		c.lineTo(buttonRight, 0);4685		c.lineTo(buttonRight, h);4686		c.lineTo(rSize, h);4687		c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);4688		c.close();4689		c.fill();4690	}4691	else if (selectedButton === buttonNum - 1)4692	{4693		c.setGradient('#5D7585', '#008cff', buttonLeft, 0, buttonRight - buttonLeft, h, mxConstants.DIRECTION_SOUTH, 1, 1);4694		c.begin();4695		// we draw a path for the last button4696		c.moveTo(buttonLeft, 0);4697		c.lineTo(buttonRight - rSize, 0);4698		c.arcTo(rSize, rSize, 0, 0, 1, buttonRight, rSize);4699		c.lineTo(buttonRight, h - rSize);4700		c.arcTo(rSize, rSize, 0, 0, 1, buttonRight - rSize, h);4701		c.lineTo(buttonLeft, h);4702		c.close();4703		c.fill();4704	}4705	else if (selectedButton !== -1)4706	{4707		c.setGradient('#5D7585', '#008cff', buttonLeft, 0, buttonRight - buttonLeft, h, mxConstants.DIRECTION_SOUTH, 1, 1);4708		c.begin();4709		// we draw a path rectangle for one of the buttons in the middle4710		c.moveTo(buttonLeft, 0);4711		c.lineTo(buttonRight, 0);4712		c.lineTo(buttonRight, h);4713		c.lineTo(buttonLeft, h);4714		c.close();4715		c.fill();4716	}47174718	//draw the frame again, to achieve a nicer effect4719	c.setStrokeColor(frameColor);4720	c.setFillColor(bgColor);4721	c.begin();4722	c.moveTo(0, rSize);4723	c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);4724	c.lineTo(w - rSize, 0);4725	c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);4726	c.lineTo(w, h - rSize);4727	c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);4728	c.lineTo(rSize, h);4729	c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);4730	c.close();4731	c.stroke();4732};47334734mxShapeMockupiHorButtonBar.prototype.buttonText = function(c, w, h, textString, buttonWidth, fontSize, minW, trueW)4735{4736	if(textString.charAt(0) === mxMockupC.SELECTED)4737	{4738		textString = textString.substring(1);4739	}47404741	c.begin();4742	c.setFontSize(fontSize);4743	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);4744};47454746mxCellRenderer.registerShape(mxMockupC.SHAPE_IHOR_BUTTON_BAR, mxShapeMockupiHorButtonBar);47474748//**********************************************************************************************************************************************************4749//Pin4750//**********************************************************************************************************************************************************4751/**4752 * Extends mxShape.4753 */4754function mxShapeMockupiPin(bounds, fill, stroke, strokewidth)4755{4756	mxShape.call(this);4757	this.bounds = bounds;4758	this.fill = fill;4759	this.stroke = stroke;4760	this.strokewidth = (strokewidth != null) ? strokewidth : 1;4761};47624763/**4764 * Extends mxShape.4765 */4766mxUtils.extend(mxShapeMockupiPin, mxShape);47674768mxShapeMockupiPin.prototype.customProperties = [4769	{name: 'fillColor2', dispName: 'Fill2 Color', type: 'color'},4770	{name: 'fillColor3', dispName: 'Fill3 Color', type: 'color'}4771];47724773/**4774 * Function: paintVertexShape4775 * 4776 * Paints the vertex shape.4777 */4778mxShapeMockupiPin.prototype.paintVertexShape = function(c, x, y, w, h)4779{4780	var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '#000000');4781	var fillColor3 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR3, '#000000');4782	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');4783	c.setShadow(false);4784	c.translate(x, y);47854786	c.setStrokeWidth(1.5);4787	c.setStrokeColor('#666666');4788	c.begin();4789	c.moveTo(w * 0.5, h * 0.4);4790	c.lineTo(w * 0.5, h);4791	c.stroke();47924793	c.setStrokeWidth(1);4794	c.setStrokeColor(strokeColor);4795	c.setGradient(fillColor2, fillColor3, 0, 0, w, h * 0.4, mxConstants.DIRECTION_SOUTH, 1, 1);4796	c.setAlpha(0.9);4797	c.ellipse(0, 0, w, h * 0.4);4798	c.fillAndStroke();47994800	c.setFillColor('#ffffff');4801	c.setAlpha(0.5);4802	c.ellipse(w * 0.2, h * 0.08, w * 0.3, h * 0.12);4803	c.fill();4804};48054806mxCellRenderer.registerShape(mxMockupC.SHAPE_IPIN, mxShapeMockupiPin);48074808//**********************************************************************************************************************************************************4809//Video Controls4810//**********************************************************************************************************************************************************4811/**4812 * Extends mxShape.4813 */4814function mxShapeMockupiVideoControls(bounds, fill, stroke, strokewidth)4815{4816	mxShape.call(this);4817	this.bounds = bounds;4818	this.fill = fill;4819	this.stroke = stroke;4820	this.strokewidth = (strokewidth != null) ? strokewidth : 1;4821};48224823/**4824 * Extends mxShape.4825 */4826mxUtils.extend(mxShapeMockupiVideoControls, mxShape);48274828mxShapeMockupiVideoControls.prototype.customProperties = [4829	{name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, defVal:20}4830];48314832/**4833 * Function: paintVertexShape4834 * 4835 * Paints the vertex shape.4836 */4837mxShapeMockupiVideoControls.prototype.paintVertexShape = function(c, x, y, w, h)4838{4839	c.translate(x, y);4840	var rSize = 5;4841	c.setStrokeWidth(1);4842	c.setFillColor('#000000');4843	c.setStrokeColor('#bbbbbb');4844	c.setAlpha(0.7);4845	c.roundrect(0, 0, w, h, rSize, rSize);4846	c.fillAndStroke();4847	c.setShadow(false);48484849	this.foreground(c, w, h, rSize);4850};48514852mxShapeMockupiVideoControls.prototype.foreground = function(c, w, h, rSize)4853{4854	c.setGradient('#ffffff', '#ffffff', 0, 0, w, h * 0.5, mxConstants.DIRECTION_SOUTH, 0.8, 0.1);4855	c.begin();4856	c.moveTo(0, rSize);4857	c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);4858	c.lineTo(w - rSize, 0);4859	c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);4860	c.lineTo(w, h * 0.5);4861	c.lineTo(0, h * 0.5);4862	c.close();4863	c.fill();48644865	c.setAlpha(1);4866	c.setFillColor('#ffffff');4867	c.setStrokeColor('#ffffff');4868	var iconX = w * 0.1;4869	var iconY = h * 0.35;48704871	c.begin();4872	c.moveTo(iconX - 7.5, iconY - 2.5);4873	c.arcTo(6, 6, 0, 0, 1, iconX, iconY - 2.5);4874	c.arcTo(6, 6, 0, 0, 1, iconX + 7.5, iconY - 2.5);4875	c.lineTo(iconX + 7.5, iconY + 4);4876	c.arcTo(6, 6, 0, 0, 0, iconX, iconY + 4);4877	c.arcTo(6, 6, 0, 0, 0, iconX - 7.5, iconY + 4);4878	c.close();4879	c.stroke();48804881	c.begin();4882	c.moveTo(iconX, iconY - 2.5);4883	c.lineTo(iconX, iconY + 4);4884	c.stroke();48854886	iconX = w * 0.3;4887	c.rect(iconX - 7.5, iconY - 5, 1, 10);4888	c.fill();48894890	c.begin();4891	c.moveTo(iconX - 6.5, iconY);4892	c.lineTo(iconX + 0.5, iconY - 5);4893	c.lineTo(iconX + 0.5, iconY + 5);4894	c.close();4895	c.fill();48964897	c.begin();4898	c.moveTo(iconX + 0.5, iconY);4899	c.lineTo(iconX + 7.5, iconY - 5);4900	c.lineTo(iconX + 7.5, iconY + 5);4901	c.close();4902	c.fill();49034904	iconX = w * 0.5;4905	c.begin();4906	c.moveTo(iconX - 6, iconY - 5);4907	c.lineTo(iconX + 6, iconY);4908	c.lineTo(iconX - 6, iconY + 5);4909	c.close();4910	c.fill();49114912	iconX = w * 0.7;4913	c.begin();4914	c.moveTo(iconX - 7.5, iconY - 5);4915	c.lineTo(iconX - 0.5, iconY);4916	c.lineTo(iconX - 7.5, iconY + 5);4917	c.close();4918	c.fill();4919	c.begin();4920	c.moveTo(iconX - 0.5, iconY - 5);4921	c.lineTo(iconX + 6.5, iconY);4922	c.lineTo(iconX - 0.5, iconY + 5);4923	c.close();4924	c.fill();4925	c.rect(iconX + 6.5, iconY - 5, 1, 10);4926	c.fill();49274928	iconX = w * 0.9;4929	c.rect(iconX - 7.5, iconY - 4, 15, 8);4930	c.stroke();4931	c.setStrokeWidth(0.5);4932	c.begin();4933	c.moveTo(iconX - 7.5, iconY - 4);4934	c.lineTo(iconX, iconY + 1.5);4935	c.lineTo(iconX + 7.5, iconY - 4);4936	c.stroke();4937	c.begin();4938	c.moveTo(iconX - 7.5, iconY + 4);4939	c.lineTo(iconX - 2, iconY);4940	c.stroke();4941	c.begin();4942	c.moveTo(iconX + 7.5, iconY + 4);4943	c.lineTo(iconX + 2, iconY);4944	c.stroke();49454946	c.setGradient('#444444', '#ffffff', w * 0.1, h * 0.75 - 2.5, w * 0.8, 5, mxConstants.DIRECTION_SOUTH, 1, 1);4947	c.roundrect(w * 0.1, h * 0.75 - 2.5, w * 0.8, 5, 2.5, 2.5);4948	c.fill();49494950	var barPos = mxUtils.getValue(this.style, mxMockupC.BAR_POS, '80');4951	barPos = Math.min(barPos, 100);4952	barPos = Math.max(barPos, 0);4953	var deadzone = w * 0.1; 4954	var virRange = w - 2 * deadzone;4955	var truePos = deadzone + virRange * barPos / 100;49564957	c.setGradient('#96D1FF', '#003377', w * 0.1, h * 0.75 - 5, truePos - w * 0.1, 10, mxConstants.DIRECTION_SOUTH, 1, 1);4958	c.begin();4959	c.moveTo(truePos, h * 0.75 - 2.5);4960	c.lineTo(truePos, h * 0.75 + 2.5);4961	c.lineTo(w * 0.1 + 2.5, h * 0.75 + 2.5);4962	c.arcTo(2.5, 2.5, 0, 0, 1, w * 0.1 + 2.5, h * 0.75 - 2.5);4963	c.close();4964	c.fill();49654966	c.setStrokeColor('#999999');4967	c.setGradient('#444444', '#ffffff', truePos - 5, h * 0.75 - 5, 10, 10, mxConstants.DIRECTION_NORTH, 1, 1);4968	c.ellipse(truePos - 5, h * 0.75 - 5, 10, 10);4969	c.fillAndStroke();49704971	c.setStrokeColor('#dddddd');4972	c.roundrect(0, 0, w, h, rSize, rSize);4973	c.stroke();4974};49754976mxCellRenderer.registerShape(mxMockupC.SHAPE_IVIDEO_CONTROLS, mxShapeMockupiVideoControls);49774978Graph.handleFactory[mxMockupC.SHAPE_IVIDEO_CONTROLS] = function(state)4979{4980	var handles = [Graph.createHandle(state, ['barPos'], function(bounds)4981			{4982				var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 40))));49834984				return new mxPoint(bounds.x + bounds.width * 0.1 + barPos * bounds.width * 0.8 / 100, bounds.y + bounds.height * 0.75);4985			}, function(bounds, pt)4986			{4987				this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.width * 0.1 - bounds.x) * 100 / (bounds.width * 0.8)))) / 100;4988			})];4989			4990	return handles;4991};49924993//**********************************************************************************************************************************************************4994//URL Bar4995//**********************************************************************************************************************************************************4996/**4997 * Extends mxShape.4998 */4999function mxShapeMockupiURLBar(bounds, fill, stroke, strokewidth)5000{5001	mxShape.call(this);5002	this.bounds = bounds;5003	this.fill = fill;5004	this.stroke = stroke;5005	this.strokewidth = (strokewidth != null) ? strokewidth : 1;5006};50075008/**5009 * Extends mxShape.5010 */5011mxUtils.extend(mxShapeMockupiURLBar, mxShape);50125013/**5014 * Function: paintVertexShape5015 * 5016 * Paints the vertex shape.5017 */5018mxShapeMockupiURLBar.prototype.paintVertexShape = function(c, x, y, w, h)5019{5020	c.translate(x, y);50215022	c.setGradient('#cccccc', '#003377', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);5023	c.rect(0, 0, w, h);5024	c.fill();5025	c.setShadow(false);50265027	this.foreground(c, w, h);5028};50295030mxShapeMockupiURLBar.prototype.foreground = function(c, w, h)5031{5032	c.setStrokeWidth(0.5);5033	c.setFillColor('#ffffff');5034	c.setStrokeColor('#008cff');5035	c.roundrect(w * 0.0287, h * 0.625 - 6.25, w * 0.7184, 12.5, 6.25, 6.25);5036	c.fillAndStroke();50375038	c.setGradient('#cccccc', '#001144', w * 0.7816, h * 0.625 - 6.25, w * 0.1868, 12.5, mxConstants.DIRECTION_SOUTH, 1, 1);5039	c.setStrokeColor('#000000');5040	c.roundrect(w * 0.7816, h * 0.625 - 6.25, w * 0.1868, 12.5, 2.5, 2.5);5041	c.fillAndStroke();50425043	c.setFillColor('#bbbbbb');5044	c.ellipse(w * 0.7471 - 11.5, h * 0.625 - 5, 10, 10);5045	c.fill();50465047	c.setStrokeColor('#ffffff');5048	c.setStrokeWidth(1.5);5049	c.begin();5050	c.moveTo(w * 0.7471 - 8.5, h * 0.625 - 2.5);5051	c.lineTo(w * 0.7471 - 3.5, h * 0.625 + 2.5);5052	c.moveTo(w * 0.7471 - 8.5, h * 0.625 + 2.5);5053	c.lineTo(w * 0.7471 - 3.5, h * 0.625 - 2.5);5054	c.stroke();50555056	var fieldText = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, '').toString()).split(',');5057	c.setFontColor('#425664');5058	c.setFontStyle(mxConstants.FONT_BOLD);5059	c.setFontSize(8);5060	c.text(w * 0.5, h * 0.2, 0, 0, fieldText[0], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);5061	c.setFontColor('#000000');5062	c.text(w * 0.06, h * 0.625, 0, 0, fieldText[1], mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);5063	c.setFontColor('#ffffff');5064	c.text(w * 0.875, h * 0.625, 0, 0, fieldText[2], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);5065};50665067mxCellRenderer.registerShape(mxMockupC.SHAPE_IURL_BAR, mxShapeMockupiURLBar);50685069//**********************************************************************************************************************************************************5070//Slider5071//**********************************************************************************************************************************************************5072/**5073 * Extends mxShape.5074 */5075function mxShapeMockupiSlider(bounds, fill, stroke, strokewidth)5076{5077	mxShape.call(this);5078	this.bounds = bounds;5079	this.fill = fill;5080	this.stroke = stroke;5081	this.strokewidth = (strokewidth != null) ? strokewidth : 1;5082};50835084/**5085 * Extends mxShape.5086 */5087mxUtils.extend(mxShapeMockupiSlider, mxShape);50885089mxShapeMockupiSlider.prototype.customProperties = [5090	{name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, defVal:20},5091];50925093/**5094 * Function: paintVertexShape5095 * 5096 * Paints the vertex shape.5097 */5098mxShapeMockupiSlider.prototype.paintVertexShape = function(c, x, y, w, h)5099{5100	c.translate(x, y);5101	c.setShadow(false);51025103	this.foreground(c, w, h);5104};51055106mxShapeMockupiSlider.prototype.foreground = function(c, w, h)5107{5108	c.setStrokeWidth(0.5);5109	c.setGradient('#444444', '#ffffff', 0, h * 0.5 - 2.5, w, 5, mxConstants.DIRECTION_SOUTH, 1, 1);5110	c.roundrect(0, h * 0.5 - 2.5, w, 5, 2.5, 2.5);5111	c.fill();51125113	var barPos = mxUtils.getValue(this.style, mxMockupC.BAR_POS, '80');5114	barPos = Math.min(barPos, 100);5115	barPos = Math.max(barPos, 0);5116	var deadzone = 0; 5117	var virRange = w - 2 * deadzone;5118	var truePos = deadzone + virRange * barPos / 100;51195120	c.setGradient('#96D1FF', '#003377', 2.5, h * 0.5 - 2.5, truePos - 2.5, 5, mxConstants.DIRECTION_SOUTH, 1, 1);5121	c.begin();5122	c.moveTo(truePos, h * 0.5 - 2.5);5123	c.lineTo(truePos, h * 0.5 + 2.5);5124	c.lineTo(2.5, h * 0.5 + 2.5);5125	c.arcTo(2.5, 2.5, 0, 0, 1, 2.5, h * 0.5 - 2.5);5126	c.close();5127	c.fill();51285129	c.setStrokeColor('#999999');5130	c.setGradient('#444444', '#ffffff', truePos - 5, h * 0.5 - 5, 10, 10, mxConstants.DIRECTION_NORTH, 1, 1);5131	c.ellipse(truePos - 5, h * 0.5 - 5, 10, 10);5132	c.fillAndStroke();5133};51345135mxCellRenderer.registerShape(mxMockupC.SHAPE_ISLIDER, mxShapeMockupiSlider);51365137Graph.handleFactory[mxMockupC.SHAPE_ISLIDER] = function(state)5138{5139	var handles = [Graph.createHandle(state, ['barPos'], function(bounds)5140			{5141				var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4))));51425143				return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2);5144			}, function(bounds, pt)5145			{5146				this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100;5147			})];5148			5149	return handles;5150};515151525153//**********************************************************************************************************************************************************5154//Progress Bar5155//**********************************************************************************************************************************************************5156/**5157 * Extends mxShape.5158 */5159function mxShapeMockupiProgressBar(bounds, fill, stroke, strokewidth)5160{5161	mxShape.call(this);5162	this.bounds = bounds;5163	this.fill = fill;5164	this.stroke = stroke;5165	this.strokewidth = (strokewidth != null) ? strokewidth : 1;5166};51675168/**5169 * Extends mxShape.5170 */5171mxUtils.extend(mxShapeMockupiProgressBar, mxShape);51725173mxShapeMockupiProgressBar.prototype.customProperties = [5174	{name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, defVal:40},5175];51765177/**5178 * Function: paintVertexShape5179 * 5180 * Paints the vertex shape.5181 */5182mxShapeMockupiProgressBar.prototype.paintVertexShape = function(c, x, y, w, h)5183{5184	c.translate(x, y);5185	c.setShadow(false);51865187	this.foreground(c, w, h);5188};51895190mxShapeMockupiProgressBar.prototype.foreground = function(c, w, h)5191{5192	c.setStrokeWidth(0.5);5193	c.setGradient('#444444', '#ffffff', 0, h * 0.5 - 2.5, w, 5, mxConstants.DIRECTION_SOUTH, 1, 1);5194	c.roundrect(0, h * 0.5 - 2.5, w, 5, 2.5, 2.5);5195	c.fill();51965197	var barPos = mxUtils.getValue(this.style, mxMockupC.BAR_POS, '80');5198	barPos = Math.min(barPos, 100);5199	barPos = Math.max(barPos, 0);5200	var deadzone = 0; 5201	var virRange = w - 2 * deadzone;5202	var truePos = deadzone + virRange * barPos / 100;52035204	c.setGradient('#96D1FF', '#003377', 2.5, h * 0.5 - 2.5, truePos - 2.5, 5, mxConstants.DIRECTION_SOUTH, 1, 1);5205	c.begin();5206	c.moveTo(truePos, h * 0.5 - 2.5);5207	c.arcTo(2.5, 2.5, 0, 0, 1, truePos, h * 0.5 + 2.5);5208	c.lineTo(2.5, h * 0.5 + 2.5);5209	c.arcTo(2.5, 2.5, 0, 0, 1, 2.5, h * 0.5 - 2.5);5210	c.close();5211	c.fill();5212};52135214mxCellRenderer.registerShape(mxMockupC.SHAPE_IPROGRESS_BAR, mxShapeMockupiProgressBar);52155216Graph.handleFactory[mxMockupC.SHAPE_IPROGRESS_BAR] = function(state)5217{5218	var handles = [Graph.createHandle(state, ['barPos'], function(bounds)5219			{5220				var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4))));52215222				return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2);5223			}, function(bounds, pt)5224			{5225				this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100;5226			})];5227			5228	return handles;5229};52305231//**********************************************************************************************************************************************************5232//iCloud Progress Bar5233//**********************************************************************************************************************************************************5234/**5235 * Extends mxShape.5236 */5237function mxShapeMockupiCloudProgressBar(bounds, fill, stroke, strokewidth)5238{5239	mxShape.call(this);5240	this.bounds = bounds;5241	this.fill = fill;5242	this.stroke = stroke;5243	this.strokewidth = (strokewidth != null) ? strokewidth : 1;5244};52455246/**5247 * Extends mxShape.5248 */5249mxUtils.extend(mxShapeMockupiCloudProgressBar, mxShape);52505251mxShapeMockupiCloudProgressBar.prototype.customProperties = [5252	{name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, defVal:20},5253];52545255/**5256 * Function: paintVertexShape5257 * 5258 * Paints the vertex shape.5259 */5260mxShapeMockupiCloudProgressBar.prototype.paintVertexShape = function(c, x, y, w, h)5261{5262	c.translate(x, y);5263	c.setShadow(false);52645265	this.foreground(c, w, h);5266};52675268mxShapeMockupiCloudProgressBar.prototype.foreground = function(c, w, h)5269{5270	c.setStrokeWidth(0.5);5271	c.setFillColor('#5C6E86');5272	c.rect(0, h * 0.5 - 2.5, w, 5);5273	c.fill();52745275	var barPos = mxUtils.getValue(this.style, mxMockupC.BAR_POS, '80');5276	barPos = Math.min(barPos, 100);5277	barPos = Math.max(barPos, 0);5278	var deadzone = 0; 5279	var virRange = w - 2 * deadzone;5280	var truePos = deadzone + virRange * barPos / 100;52815282	c.setFillColor('#8AD155');5283	c.rect(0, h * 0.5 - 2.5, truePos, 5);5284	c.fill();5285};52865287mxCellRenderer.registerShape(mxMockupC.SHAPE_ICLOUD_PROGRESS_BAR, mxShapeMockupiCloudProgressBar);52885289Graph.handleFactory[mxMockupC.SHAPE_ICLOUD_PROGRESS_BAR] = function(state)5290{5291	var handles = [Graph.createHandle(state, ['barPos'], function(bounds)5292			{5293				var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4))));52945295				return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2);5296			}, function(bounds, pt)5297			{5298				this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100;5299			})];5300			5301	return handles;5302};53035304//**********************************************************************************************************************************************************5305//Download Bar5306//**********************************************************************************************************************************************************5307/**5308 * Extends mxShape.5309 */5310function mxShapeMockupiDownloadBar(bounds, fill, stroke, strokewidth)5311{5312	mxShape.call(this);5313	this.bounds = bounds;5314	this.fill = fill;5315	this.stroke = stroke;5316	this.strokewidth = (strokewidth != null) ? strokewidth : 1;5317};53185319/**5320 * Extends mxShape.5321 */5322mxUtils.extend(mxShapeMockupiDownloadBar, mxShape);53235324mxShapeMockupiDownloadBar.prototype.customProperties = [5325	{name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, defVal:30},5326];53275328/**5329 * Function: paintVertexShape5330 * 5331 * Paints the vertex shape.5332 */5333mxShapeMockupiDownloadBar.prototype.paintVertexShape = function(c, x, y, w, h)5334{5335	c.translate(x, y);53365337	c.setGradient('#00ccff', '#0066cc', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);5338	c.rect(0, 0, w, h);5339	c.fill();5340	c.setShadow(false);53415342	this.foreground(c, w, h);5343};53445345mxShapeMockupiDownloadBar.prototype.foreground = function(c, w, h)5346{5347	var fieldText = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, ''));5348	c.setFontColor('#ffffff');5349	c.setFontStyle(mxConstants.FONT_BOLD);5350	c.setFontSize(8);5351	c.text(w * 0.5, h * 0.2, 0, 0, fieldText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);53525353	var barPos = mxUtils.getValue(this.style, mxMockupC.BAR_POS, '80');5354	barPos = Math.min(barPos, 100);5355	barPos = Math.max(barPos, 0);5356	var deadzone = w * 0.1; 5357	var virRange = w - 2 * deadzone;5358	var truePos = deadzone + virRange * barPos / 100;53595360	c.setStrokeWidth(0.5);5361	c.setGradient('#96D1FF', '#003377', deadzone, h * 0.65 - 2.5, w - 2 * deadzone, 5, mxConstants.DIRECTION_NORTH, 1, 1);5362	c.roundrect(deadzone, h * 0.65 - 2.5, w - 2 * deadzone, 5, 2.5, 2.5);5363	c.fill();53645365	c.setGradient('#aaaaaa', '#ffffff', deadzone + 2.5, h * 0.65 - 2.5, truePos - deadzone - 2.5, 5, mxConstants.DIRECTION_NORTH, 1, 1);5366	c.begin();5367	c.moveTo(truePos, h * 0.65 - 2.5);5368	c.arcTo(2.5, 2.5, 0, 0, 1, truePos, h * 0.65 + 2.5);5369	c.lineTo(deadzone + 2.5, h * 0.65 + 2.5);5370	c.arcTo(2.5, 2.5, 0, 0, 1, deadzone + 2.5, h * 0.65 - 2.5);5371	c.close();5372	c.fill();5373};53745375mxCellRenderer.registerShape(mxMockupC.SHAPE_IDOWNLOAD_BAR, mxShapeMockupiDownloadBar);53765377Graph.handleFactory[mxMockupC.SHAPE_IDOWNLOAD_BAR] = function(state)5378{5379	var handles = [Graph.createHandle(state, ['barPos'], function(bounds)5380			{5381				var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 40))));53825383				return new mxPoint(bounds.x + bounds.width * 0.1 + barPos * bounds.width * 0.8 / 100, bounds.y + bounds.height * 0.65);5384			}, function(bounds, pt)5385			{5386				this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.width * 0.1 - bounds.x) * 100 / (bounds.width * 0.8)))) / 100;5387			})];5388			5389	return handles;5390};53915392//**********************************************************************************************************************************************************5393//Screen Name Bar5394//**********************************************************************************************************************************************************5395/**5396 * Extends mxShape.5397 */5398function mxShapeMockupiScreenNameBar(bounds, fill, stroke, strokewidth)5399{5400	mxShape.call(this);5401	this.bounds = bounds;5402	this.fill = fill;5403	this.stroke = stroke;5404	this.strokewidth = (strokewidth != null) ? strokewidth : 1;5405};54065407/**5408 * Extends mxShape.5409 */5410mxUtils.extend(mxShapeMockupiScreenNameBar, mxShape);54115412/**5413 * Function: paintVertexShape5414 * 5415 * Paints the vertex shape.5416 */5417mxShapeMockupiScreenNameBar.prototype.paintVertexShape = function(c, x, y, w, h)5418{5419	c.translate(x, y);5420	var rSize = 5;5421	c.setStrokeWidth(0.5);5422	var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '#00ff00');5423	c.setFillColor(fillColor2);5424	c.rect(0, 0, w, h);5425	c.fill();5426	c.setShadow(false);54275428	this.foreground(c, w, h, rSize);5429};54305431mxShapeMockupiScreenNameBar.prototype.foreground = function(c, w, h, rSize)5432{5433	var fillColor3 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR3, '#00ff00');5434	c.setGradient(fillColor3, fillColor3, 0, 0, w, h * 0.5, mxConstants.DIRECTION_SOUTH, 0.8, 0.1);5435	c.rect(0, 0, w, h * 0.5);5436	c.fill();54375438	var fieldText = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, ''));5439	var textColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR, '#00ff00');5440	c.setFontColor(textColor);5441	c.setFontSize(9.5);5442	c.text(w * 0.5, h * 0.45, 0, 0, fieldText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);5443};54445445mxCellRenderer.registerShape(mxMockupC.SHAPE_ISCREEN_NAME_BAR, mxShapeMockupiScreenNameBar);54465447//**********************************************************************************************************************************************************5448//Icon Grid5449//**********************************************************************************************************************************************************5450/**5451 * Extends mxShape.5452 */5453function mxShapeMockupiIconGrid(bounds, fill, stroke, strokewidth)5454{5455	mxShape.call(this);5456	this.bounds = bounds;5457	this.fill = fill;5458	this.stroke = stroke;5459	this.strokewidth = (strokewidth != null) ? strokewidth : 1;5460};54615462/**5463 * Extends mxShape.5464 */5465mxUtils.extend(mxShapeMockupiIconGrid, mxShape);54665467mxShapeMockupiIconGrid.prototype.customProperties = [5468	{name: 'gridSize', dispName: 'Grid Size', type: 'string'},5469];54705471/**5472 * Function: paintVertexShape5473 * 5474 * Paints the vertex shape.5475 */5476mxShapeMockupiIconGrid.prototype.paintVertexShape = function(c, x, y, w, h)5477{5478	c.translate(x, y);5479	var gridSize = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.GRID_SIZE, '3,3').toString()).split(',');5480	this.background(c, w, h, gridSize);5481	c.setShadow(false);54825483	this.foreground(c, w, h, gridSize);5484};54855486mxShapeMockupiIconGrid.prototype.background = function(c, w, h, gridSize)5487{5488	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#00ff00');5489	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#00ff00');5490	c.setStrokeColor(strokeColor);5491	c.setFillColor(fillColor);54925493	var boxSizeX = w / (parseInt(gridSize[0],10) + (gridSize[0]-1) * 0.5);5494	var boxSizeY = h / (parseInt(gridSize[1],10) + (gridSize[1]-1) * 0.5);54955496	for (var i = 0; i < gridSize[0]; i++)5497	{5498		for (var j = 0; j < gridSize[1]; j++)5499		{5500			c.rect(boxSizeX * 1.5 * i, boxSizeY * 1.5 * j, boxSizeX, boxSizeY);5501			c.fillAndStroke();5502		}5503	}5504};55055506mxShapeMockupiIconGrid.prototype.foreground = function(c, w, h, gridSize)5507{5508	var boxSizeX = w / (parseInt(gridSize[0],10) + (gridSize[0]-1) * 0.5);5509	var boxSizeY = h / (parseInt(gridSize[1],10) + (gridSize[1]-1) * 0.5);55105511	for (var i = 0; i < gridSize[0]; i++)5512	{5513		for (var j = 0; j < gridSize[1]; j++)5514		{5515			c.begin();5516			c.moveTo(boxSizeX * 1.5 * i, boxSizeY * 1.5 * j);5517			c.lineTo(boxSizeX * 1.5 * i + boxSizeX, boxSizeY * 1.5 * j + boxSizeY);5518			c.moveTo(boxSizeX * 1.5 * i + boxSizeX, boxSizeY * 1.5 * j);5519			c.lineTo(boxSizeX * 1.5 * i, boxSizeY * 1.5 * j + boxSizeY);5520			c.stroke();5521		}5522	}5523};55245525mxCellRenderer.registerShape(mxMockupC.SHAPE_IICON_GRID, mxShapeMockupiIconGrid);55265527//**********************************************************************************************************************************************************5528//Copy5529//**********************************************************************************************************************************************************5530/**5531 * Extends mxShape.5532 */5533function mxShapeMockupiCopy(bounds, fill, stroke, strokewidth)5534{5535	mxShape.call(this);5536	this.bounds = bounds;5537	this.fill = fill;5538	this.stroke = stroke;5539	this.strokewidth = (strokewidth != null) ? strokewidth : 1;5540};55415542/**5543 * Extends mxShape.5544 */5545mxUtils.extend(mxShapeMockupiCopy, mxShape);55465547/**5548 * Function: paintVertexShape5549 * 5550 * Paints the vertex shape.5551 */5552mxShapeMockupiCopy.prototype.paintVertexShape = function(c, x, y, w, h)5553{5554	var rSize = 5;5555	c.translate(x, y);5556	this.background(c, w, h, rSize);5557	c.setShadow(false);55585559	this.foreground(c, w, h, rSize);5560};55615562mxShapeMockupiCopy.prototype.background = function(c, w, h, rSize)5563{5564	c.begin();5565	c.moveTo(0, rSize);5566	c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);5567	c.lineTo(w - rSize, 0);5568	c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);5569	c.lineTo(w, h - rSize - 7.5);5570	c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h - 7.5);5571	c.lineTo(w * 0.5 + 7.5, h - 7.5);5572	c.lineTo(w * 0.5, h);5573	c.lineTo(w * 0.5 - 7.5, h - 7.5);5574	c.lineTo(rSize, h - 7.5);5575	c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize - 7.5);5576	c.close();5577	c.fillAndStroke();5578};55795580mxShapeMockupiCopy.prototype.foreground = function(c, w, h, rSize)5581{5582	var fillColor3 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR3, '#00ff00');5583	c.setGradient(fillColor3, fillColor3, 0, 0, w, h * 0.5, mxConstants.DIRECTION_SOUTH, 0.8, 0.1);5584	c.begin();5585	c.moveTo(0, rSize);5586	c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);5587	c.lineTo(w - rSize, 0);5588	c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);5589	c.lineTo(w, (h - 7.5) * 0.5);5590	c.lineTo(0, (h - 7.5) * 0.5);5591	c.close();5592	c.fill();55935594	var fieldText = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, ''));5595	var textColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR, '#00ff00');5596	c.setFontColor(textColor);5597	c.setFontSize(8.5);5598	c.text(w * 0.5, (h - 7.5)* 0.45, 0, 0, fieldText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);5599};56005601mxCellRenderer.registerShape(mxMockupC.SHAPE_ICOPY, mxShapeMockupiCopy);56025603//**********************************************************************************************************************************************************5604//Copy Area5605//**********************************************************************************************************************************************************5606/**5607 * Extends mxShape.5608 */5609function mxShapeMockupiCopyArea(bounds, fill, stroke, strokewidth)5610{5611	mxShape.call(this);5612	this.bounds = bounds;5613	this.fill = fill;5614	this.stroke = stroke;5615	this.strokewidth = (strokewidth != null) ? strokewidth : 1;5616};56175618/**5619 * Extends mxShape.5620 */5621mxUtils.extend(mxShapeMockupiCopyArea, mxShape);56225623/**5624 * Function: paintVertexShape5625 * 5626 * Paints the vertex shape.5627 */5628mxShapeMockupiCopyArea.prototype.paintVertexShape = function(c, x, y, w, h)5629{5630	var rSize = 5;5631	c.translate(x, y);5632	this.background(c, w, h, rSize);5633	c.setShadow(false);56345635	this.foreground(c, w, h, rSize);5636};56375638mxShapeMockupiCopyArea.prototype.background = function(c, w, h, rSize)5639{5640	c.begin();5641	c.moveTo(w * 0.5 - 20, 0 + rSize);5642	c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 - 20 + rSize, 0);5643	c.lineTo(w * 0.5 + 20 - rSize, 0);5644	c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 + 20, rSize);5645	c.lineTo(w * 0.5 + 20, 20 - rSize);5646	c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 + 20 - rSize, 20);5647	c.lineTo(w * 0.5 + 7.5, 20);5648	c.lineTo(w * 0.5, 27.5);5649	c.lineTo(w * 0.5 - 7.5, 20);5650	c.lineTo(w * 0.5 - 20 + rSize, 20);5651	c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 - 20, 20 - rSize);5652	c.close();5653	c.fillAndStroke();5654};56555656mxShapeMockupiCopyArea.prototype.foreground = function(c, w, h, rSize)5657{5658	c.setAlpha(0.3);5659	c.setFillColor('#2266ff');5660	c.rect(2.5, 27.5, w - 5, h - 30);5661	c.fill();5662	c.setAlpha(1);56635664	if (h > 27.5)5665	{5666		c.setStrokeColor('#ffffff');5667		c.setGradient('#88ddff', '#2266ff', w * 0.5 - 2.5, 25, 5, 5, mxConstants.DIRECTION_SOUTH, 1, 1);5668		c.ellipse(w * 0.5 - 2.5, 25, 5, 5);5669		c.fillAndStroke();5670		c.setGradient('#88ddff', '#2266ff', w * 0.5 - 2.5, h - 5, 5, 5, mxConstants.DIRECTION_SOUTH, 1, 1);5671		c.ellipse(w * 0.5 - 2.5, h - 5, 5, 5);5672		c.fillAndStroke();5673		c.setGradient('#88ddff', '#2266ff', 0, h * 0.5 + 10, 5, 5, mxConstants.DIRECTION_SOUTH, 1, 1);5674		c.ellipse(0, h * 0.5 + 10, 5, 5);5675		c.fillAndStroke();5676		c.setGradient('#88ddff', '#2266ff', w - 5, h * 0.5 + 10, 5, 5, mxConstants.DIRECTION_SOUTH, 1, 1);5677		c.ellipse(w - 5, h * 0.5 + 10, 5, 5);5678		c.fillAndStroke();5679	}56805681	var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '#00ff00');5682	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#00ff00');56835684	c.setFillColor(fillColor2);5685	c.setStrokeColor(strokeColor);5686	c.begin();5687	c.moveTo(w * 0.5 - 20, 0 + rSize);5688	c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 - 20 + rSize, 0);5689	c.lineTo(w * 0.5 + 20 - rSize, 0);5690	c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 + 20, rSize);5691	c.lineTo(w * 0.5 + 20, 20 - rSize);5692	c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 + 20 - rSize, 20);5693	c.lineTo(w * 0.5 + 7.5, 20);5694	c.lineTo(w * 0.5, 27.5);5695	c.lineTo(w * 0.5 - 7.5, 20);5696	c.lineTo(w * 0.5 - 20 + rSize, 20);5697	c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 - 20, 20 - rSize);5698	c.close();5699	c.fillAndStroke();57005701	var fillColor3 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR3, '#00ff00');5702	c.setGradient(fillColor3, fillColor3, w * 0.5 - 20, 0, 40, 10, mxConstants.DIRECTION_SOUTH, 0.8, 0.1);5703	c.begin();5704	c.moveTo(w * 0.5 - 20, rSize);5705	c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 - 20 + rSize, 0);5706	c.lineTo(w * 0.5 + 20 - rSize, 0);5707	c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 + 20, rSize);5708	c.lineTo(w * 0.5 + 20, 10);5709	c.lineTo(w * 0.5 - 20, 10);5710	c.close();5711	c.fill();57125713	var fieldText = decodeURIComponent(mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, ''));5714	var textColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR, '#00ff00');5715	c.setFontColor(textColor);5716	c.setFontSize(8.5);57175718	c.text(w * 0.5, 8.75, 0, 0, fieldText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);5719};57205721mxCellRenderer.registerShape(mxMockupC.SHAPE_ICOPY_AREA, mxShapeMockupiCopyArea);57225723//**********************************************************************************************************************************************************5724//Home Page Control5725//**********************************************************************************************************************************************************5726/**5727 * Extends mxShape.5728 */5729function mxShapeMockupiHomePageControl(bounds, fill, stroke, strokewidth)5730{5731	mxShape.call(this);5732	this.bounds = bounds;5733	this.fill = fill;5734	this.stroke = stroke;5735	this.strokewidth = (strokewidth != null) ? strokewidth : 1;5736};57375738/**5739 * Extends mxShape.5740 */5741mxUtils.extend(mxShapeMockupiHomePageControl, mxShape);57425743/**5744 * Function: paintVertexShape5745 * 5746 * Paints the vertex shape.5747 */5748mxShapeMockupiHomePageControl.prototype.paintVertexShape = function(c, x, y, w, h)5749{5750	c.translate(x, y);575157525753	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#000000');5754	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');5755	c.setStrokeColor(strokeColor);5756	c.setFillColor(fillColor);57575758	var rSize = Math.min(h * 0.5, w * 0.05);5759	c.ellipse(w * 0.35 - rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize);5760	c.fill();5761	c.ellipse(w * 0.65 - rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize);5762	c.fill();5763	c.ellipse(w - 2 * rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize);5764	c.fill();57655766	c.ellipse(rSize * 0.2, h * 0.5 - rSize * 0.8, rSize * 1.2, rSize * 1.2);5767	c.stroke();5768	c.begin();5769	c.moveTo(rSize * 1.15, h * 0.5 + rSize * 0.25);5770	c.lineTo(rSize * 1.6, h * 0.5 + rSize * 0.8);5771	c.stroke();5772};57735774mxCellRenderer.registerShape(mxMockupC.SHAPE_IHOME_PAGE_CONTROL, mxShapeMockupiHomePageControl);57755776//**********************************************************************************************************************************************************5777//Page Control5778//**********************************************************************************************************************************************************5779/**5780 * Extends mxShape.5781 */5782function mxShapeMockupiPageControl(bounds, fill, stroke, strokewidth)5783{5784	mxShape.call(this);5785	this.bounds = bounds;5786	this.fill = fill;5787	this.stroke = stroke;5788	this.strokewidth = (strokewidth != null) ? strokewidth : 1;5789};57905791/**5792 * Extends mxShape.5793 */5794mxUtils.extend(mxShapeMockupiPageControl, mxShape);57955796/**5797 * Function: paintVertexShape5798 * 5799 * Paints the vertex shape.5800 */5801mxShapeMockupiPageControl.prototype.paintVertexShape = function(c, x, y, w, h)5802{5803	c.translate(x, y);580458055806	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#000000');5807	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');58085809	var rSize = Math.min(h * 0.5, w * 0.05);5810	c.setFillColor(strokeColor);5811	c.ellipse(0, h * 0.5 - rSize, 2 * rSize, 2 * rSize);5812	c.fill();5813	c.setFillColor(fillColor);5814	c.ellipse(w * 0.35 - rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize);5815	c.fill();5816	c.ellipse(w * 0.65 - rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize);5817	c.fill();5818	c.ellipse(w - 2 * rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize);5819	c.fill();5820};58215822mxCellRenderer.registerShape(mxMockupC.SHAPE_IPAGE_CONTROL, mxShapeMockupiPageControl);58235824//**********************************************************************************************************************************************************5825//iPad5826//**********************************************************************************************************************************************************5827/**5828 * Extends mxShape.5829 */5830function mxShapeMockupiPad(bounds, fill, stroke, strokewidth)5831{5832	mxShape.call(this);5833	this.bounds = bounds;5834	this.fill = fill;5835	this.stroke = stroke;5836	this.strokewidth = (strokewidth != null) ? strokewidth : 1;5837};58385839/**5840 * Extends mxShape.5841 */5842mxUtils.extend(mxShapeMockupiPad, mxShape);58435844mxShapeMockupiPad.prototype.customProperties = [5845	{name: 'bgStyle', dispName: 'Background', type: 'enum', 5846		enumList: [{val: 'bgGreen', dispName: 'Green'}, {val: 'bgWhite', dispName: 'White'}, {val: 'bgGray', dispName: 'Gray'}, {val: 'bgFlat', dispName: 'Flat'}, {val: 'bgMap', dispName: 'Map'}, {val: 'bgStriped', dispName: 'Striped'}]5847	}5848];58495850/**5851 * Function: paintVertexShape5852 * 5853 * Paints the vertex shape.5854 */5855mxShapeMockupiPad.prototype.paintVertexShape = function(c, x, y, w, h)5856{5857	var rSize = 25;5858	c.translate(x, y);5859	this.background(c, x, y, w, h, rSize);5860	c.setShadow(false);5861	this.foreground(c, x, y, w, h, rSize);5862};58635864mxShapeMockupiPad.prototype.background = function(c, x, y, w, h, rSize)5865{5866	c.setFillColor('#000000');5867	c.setStrokeColor('#000000');5868	c.roundrect(0, 0, w, h, rSize, rSize);5869	c.fillAndStroke();5870};58715872mxShapeMockupiPad.prototype.foreground = function(c, x, y, w, h, rSize)5873{5874	c.setStrokeWidth(1.5);5875	c.setStrokeColor('#999999');58765877	c.begin();5878	c.setStrokeColor('none');5879	c.setFillColor('#808080');5880	c.setGradient('#808080', '#000000', w * 0.325, 0, w * 0.675, h * 0.5, mxConstants.DIRECTION_SOUTH, 1, 1);5881	c.moveTo(w * 0.325, 0);5882	c.lineTo(w - rSize, 0);5883	c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);5884	c.lineTo(w, h * 0.5);5885	c.lineTo(w * 0.7, h * 0.5);5886	c.close();5887	c.fillAndStroke();58885889	c.begin();5890	c.setFillColor('#1f2923');5891	c.setStrokeColor('#18211b');5892	c.setStrokeWidth(1);58935894	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '');5895	var bgStyle = mxUtils.getValue(this.style, mxMockupC.BG_STYLE, mxMockupC.BG_FLAT_GREEN);58965897	c.setStrokeWidth(1);58985899	if (bgStyle === mxMockupC.BG_FLAT_WHITE)5900	{5901		c.setFillColor('#ffffff');5902		c.rect(w * 0.0928, h * 0.08, w * 0.8144, h * 0.816);5903		c.fill();5904	}5905	else if (bgStyle === mxMockupC.BG_FLAT_GREEN)5906	{5907		c.setFillColor('#1f2923');5908		c.rect(w * 0.0928, h * 0.08, w * 0.8144, h * 0.816);5909		c.fill();5910	}5911	else if (bgStyle === mxMockupC.BG_FLAT_GRAY)5912	{5913		c.setFillColor('#dddddd');5914		c.rect(w * 0.0928, h * 0.08, w * 0.8144, h * 0.816);5915		c.fill();5916	}5917	else if (bgStyle === mxMockupC.BG_FLAT_CUSTOM)5918	{5919		c.setFillColor(fillColor);5920		c.rect(w * 0.0928, h * 0.08, w * 0.8144, h * 0.816);5921		c.fill();5922	}5923	else if (bgStyle === mxMockupC.BG_STRIPED)5924	{5925		var xOld = x;5926		var yOld = y;5927		var wOld = w;5928		var hOld = h;5929		c.translate(w * 0.0928, h * 0.08);5930		w = w * 0.8144;5931		h = h * 0.816;59325933		c.setFillColor('#5D7585');5934		c.rect(0, 0, w, h);5935		c.fillAndStroke();59365937		var strokeColor = '#18211b';5938		var strokeColor2 = '#657E8F';59395940		c.setStrokeColor(strokeColor2);5941		var i = 7;5942		c.begin();59435944		while (i < w)5945		{5946			c.moveTo(i, 0);5947			c.lineTo(i, h);5948			i = i + 7;5949		}59505951		c.stroke();59525953		c.setStrokeColor(strokeColor);5954		c.begin();5955		c.rect(0, 0, w, h);5956		c.stroke();59575958		w = wOld;5959		h = hOld;5960		c.translate( - w * 0.0928, - h * 0.08);5961	}5962	else if (bgStyle === mxMockupC.BG_MAP)5963	{5964		var xOld = x;5965		var yOld = y;5966		var wOld = w;5967		var hOld = h;5968		c.translate(w * 0.0928, h * 0.08);5969		w = w * 0.8144;5970		h = h * 0.816;59715972		c.setFillColor('#ffffff');5973		c.rect(0, 0, w, h);5974		c.fillAndStroke();59755976		var fillColor2 = '#96D1FF';5977		var strokeColor = '#18211b';5978		var strokeColor2 = '#008cff';59795980		c.setFillColor(fillColor2);5981		c.setStrokeColor(strokeColor2);5982		c.setStrokeWidth(0.5);59835984		c.begin();5985		c.moveTo(0, 0);5986		c.lineTo(w * 0.1171, 0);5987		c.lineTo(w * 0.1136, h * 0.0438);5988		c.lineTo(w * 0.0993, h * 0.054);5989		c.lineTo(0, h * 0.0446);5990		c.close();5991		c.fillAndStroke();59925993		c.begin();5994		c.moveTo(w * 0.1993, 0);5995		c.lineTo(w * 0.1914, h * 0.03884);5996		c.lineTo(w * 0.1536, h * 0.0362);5997		c.lineTo(w * 0.1586, 0);5998		c.close();5999		c.fillAndStroke();60006001		c.begin();6002		c.moveTo(w * 0.24, 0);6003		c.lineTo(w * 0.2257, h * 0.054);6004		c.lineTo(w * 0.2414, h * 0.0674);6005		c.lineTo(w * 0.4707, h * 0.0835);6006		c.lineTo(w * 0.5264, h * 0.0906);6007		c.lineTo(w * 0.6429, h * 0.0929);6008		c.arcTo(w * 0.0857, h * 0.0536, 0, 0, 0, w * 0.7193, h * 0.0621);6009		c.arcTo(w * 0.48, h * 0.2143, 0, 0, 0, w * 0.7286, 0);6010		c.close();6011		c.fillAndStroke();60126013		c.begin();6014		c.moveTo(w * 0.8, 0);6015		c.lineTo(w * 0.7886, h * 0.04554);6016		c.arcTo(w * 0.0857, h * 0.0536, 0, 0, 0, w * 0.8164, h * 0.0875);6017		c.arcTo(w * 0.1429, h * 0.0893, 0, 0, 0, w * 0.88, h * 0.1036);6018		c.lineTo(w, h * 0.1112);6019		c.lineTo(w, 0);6020		c.close();6021		c.fillAndStroke();60226023		c.begin();6024		c.moveTo(0, h * 0.0933);6025		c.lineTo(w * 0.08, h * 0.1036);6026		c.lineTo(w * 0.1021, h * 0.1246);6027		c.lineTo(w * 0.1007, h * 0.1768);6028		c.lineTo(w * 0.0471, h * 0.2241);6029		c.lineTo(0, h * 0.2527);6030		c.close();6031		c.fillAndStroke();60326033		c.ellipse(w * 0.1214, h * 0.0603, w * 0.0843, h * 0.0576);6034		c.fillAndStroke();60356036		c.begin();6037		c.moveTo(w * 0.1293, h * 0.1924);6038		c.lineTo(w * 0.1729, h * 0.142);6039		c.lineTo(w * 0.1407, h * 0.1411);6040		c.lineTo(w * 0.14, h * 0.1777);6041		c.close();6042		c.fillAndStroke();60436044		c.begin();6045		c.moveTo(w * 0.4586, h * 0.1241);6046		c.lineTo(w * 0.455, h * 0.1835);6047		c.lineTo(w * 0.3893, h * 0.2246);6048		c.lineTo(w * 0.2171, h * 0.1362);6049		c.lineTo(w * 0.2171, h * 0.1308);6050		c.lineTo(w * 0.2293, h * 0.1214);6051		c.lineTo(w * 0.2857, h * 0.1174);6052		c.close();6053		c.fillAndStroke();60546055		c.begin();6056		c.moveTo(w * 0.5079, h * 0.1134);6057		c.lineTo(w * 0.7307, h * 0.1223);6058		c.lineTo(w * 0.7279, h * 0.1625);6059		c.lineTo(w * 0.715, h * 0.1772);6060		c.lineTo(w * 0.6929, h * 0.1688);6061		c.lineTo(w * 0.625, h * 0.1795);6062		c.lineTo(w * 0.4779, h * 0.2835);6063		c.lineTo(w * 0.395, h * 0.2299);6064		c.lineTo(w * 0.4657, h * 0.1826);6065		c.lineTo(w * 0.4707, h * 0.1223);6066		c.close();6067		c.fillAndStroke();60686069		c.begin();6070		c.moveTo(w, h * 0.1362);6071		c.lineTo(w * 0.7643, h * 0.1237);6072		c.lineTo(w * 0.7543, h * 0.1562);6073		c.lineTo(w * 0.7643, h * 0.1585);6074		c.lineTo(w * 0.9186, h * 0.2366);6075		c.lineTo(w, h * 0.1732);6076		c.close();6077		c.fillAndStroke();60786079		c.begin();6080		c.moveTo(w * 0.2079, h * 0.1545);6081		c.lineTo(w * 0.3886, h * 0.2536);6082		c.lineTo(w * 0.3414, h * 0.2933);6083		c.lineTo(w * 0.1743, h * 0.1969);6084		c.close();6085		c.fillAndStroke();60866087		c.begin();6088		c.moveTo(w * 0.1579, h * 0.2134);6089		c.lineTo(w * 0.3221, h * 0.3067);6090		c.lineTo(w * 0.2957, h * 0.3237);6091		c.lineTo(w * 0.1157, h * 0.2424);6092		c.close();6093		c.fillAndStroke();60946095		c.begin();6096		c.moveTo(w * 0.405, h * 0.2656);6097		c.lineTo(w * 0.31, h * 0.3353);6098		c.lineTo(w * 0.3693, h * 0.3661);6099		c.lineTo(w * 0.4571, h * 0.2982);6100		c.close();6101		c.fillAndStroke();61026103		c.begin();6104		c.moveTo(w * 0.7121, h * 0.1848);6105		c.lineTo(w * 0.6879, h * 0.1754);6106		c.lineTo(w * 0.6329, h * 0.1844);6107		c.lineTo(w * 0.61, h * 0.2018);6108		c.lineTo(w * 0.6207, h * 0.2085);6109		c.lineTo(w * 0.4986, h * 0.2982);6110		c.lineTo(w * 0.535, h * 0.3237);6111		c.close();6112		c.fillAndStroke();61136114		c.begin();6115		c.moveTo(w * 0.5557, h * 0.3379);6116		c.lineTo(w * 0.7464, h * 0.1826);6117		c.lineTo(w * 0.8036, h * 0.2076);6118		c.lineTo(w * 0.595, h * 0.3616);6119		c.close();6120		c.fillAndStroke();61216122		c.begin();6123		c.moveTo(w * 0.8293, h * 0.2188);6124		c.lineTo(w * 0.8979, h * 0.2509);6125		c.lineTo(w * 0.6936, h * 0.4125);6126		c.lineTo(w * 0.6171, h * 0.3737);6127		c.close();6128		c.fillAndStroke();61296130		c.begin();6131		c.moveTo(w, h * 0.2138);6132		c.lineTo(w * 0.6821, h * 0.4603);6133		c.lineTo(w * 0.815, h * 0.5277);6134		c.lineTo(w, h * 0.4);6135		c.close();6136		c.fillAndStroke();61376138		c.begin();6139		c.moveTo(0, h * 0.317);6140		c.lineTo(w * 0.0971, h * 0.2554);6141		c.lineTo(w * 0.4121, h * 0.4143);6142		c.lineTo(w * 0.3736, h * 0.4415);6143		c.lineTo(w * 0.315, h * 0.4076);6144		c.lineTo(w * 0.3093, h * 0.4116);6145		c.lineTo(w * 0.3686, h * 0.4455);6146		c.lineTo(w * 0.285, h * 0.5045);6147		c.lineTo(w * 0.1114, h * 0.4134);6148		c.lineTo(w * 0.025, h * 0.4603);6149		c.lineTo(w * 0.0371, h * 0.4723);6150		c.lineTo(w * 0.1114, h * 0.4371);6151		c.lineTo(w * 0.2871, h * 0.5312);6152		c.lineTo(w * 0.1929, h * 0.6058);6153		c.lineTo(w * 0.2271, h * 0.6705);6154		c.lineTo(w * 0.17, h * 0.7147);6155		c.lineTo(w * 0.0314, h * 0.6321);6156		c.lineTo(0, h * 0.6246);6157		c.close();6158		c.fillAndStroke();61596160		c.begin();6161		c.moveTo(w * 0.48, h * 0.3121);6162		c.lineTo(w * 0.5157, h * 0.3375);6163		c.lineTo(w * 0.4314, h * 0.3982);6164		c.lineTo(w * 0.3929, h * 0.3786);6165		c.close();6166		c.fillAndStroke();61676168		c.begin();6169		c.moveTo(w * 0.3086, h * 0.5179);6170		c.lineTo(w * 0.53, h * 0.3518);6171		c.lineTo(w * 0.5757, h * 0.3745);6172		c.lineTo(w * 0.3479, h * 0.5411);6173		c.close();6174		c.fillAndStroke();61756176		c.begin();6177		c.moveTo(w * 0.5964, h * 0.3884);6178		c.lineTo(w * 0.6736, h * 0.4277);6179		c.lineTo(w * 0.445, h * 0.5991);6180		c.lineTo(w * 0.3664, h * 0.5531);6181		c.lineTo(w * 0.5057, h * 0.4545);6182		c.lineTo(w * 0.5507, h * 0.4754);6183		c.lineTo(w * 0.5571, h * 0.4723);6184		c.lineTo(w * 0.5114, h * 0.4504);6185		c.close();6186		c.fillAndStroke();61876188		c.begin();6189		c.moveTo(w * 0.4793, h * 0.6161);6190		c.lineTo(w * 0.6771, h * 0.4643);6191		c.lineTo(w * 0.8086, h * 0.5326);6192		c.lineTo(w * 0.7471, h * 0.5817);6193		c.lineTo(w * 0.7214, h * 0.567);6194		c.lineTo(w * 0.715, h * 0.571);6195		c.lineTo(w * 0.7421, h * 0.5871);6196		c.lineTo(w * 0.6014, h * 0.6933);6197		c.close();6198		c.fillAndStroke();61996200		c.begin();6201		c.moveTo(w, h * 0.4371);6202		c.lineTo(w * 0.8443, h * 0.546);6203		c.lineTo(w * 0.9071, h * 0.5701);6204		c.lineTo(w, h * 0.5022);6205		c.close();6206		c.fillAndStroke();62076208		c.begin();6209		c.moveTo(w * 0.8407, h * 0.5504);6210		c.lineTo(w * 0.8993, h * 0.5759);6211		c.lineTo(w * 0.6757, h * 0.7416);6212		c.lineTo(w * 0.6286, h * 0.7139);6213		c.close();6214		c.fillAndStroke();62156216		c.begin();6217		c.moveTo(w, h * 0.5321);6218		c.lineTo(w * 0.6979, h * 0.7549);6219		c.lineTo(w * 0.7457, h * 0.7781);6220		c.lineTo(w * 0.9814, h * 0.6094);6221		c.lineTo(w, h * 0.6067);6222		c.close();6223		c.fillAndStroke();62246225		c.begin();6226		c.moveTo(w, h * 0.6254);6227		c.lineTo(w * 0.7664, h * 0.792);6228		c.lineTo(w * 0.9586, h * 0.9062);6229		c.lineTo(w, h * 0.8786);6230		c.close();6231		c.fillAndStroke();62326233		c.begin();6234		c.moveTo(w * 0.3093, h * 0.5464);6235		c.lineTo(w * 0.4271, h * 0.6152);6236		c.lineTo(w * 0.245, h * 0.7643);6237		c.lineTo(w * 0.185, h * 0.7228);6238		c.lineTo(w * 0.2493, h * 0.6728);6239		c.lineTo(w * 0.2214, h * 0.6143);6240		c.close();6241		c.fillAndStroke();62426243		c.begin();6244		c.moveTo(0, h * 0.65);6245		c.lineTo(w * 0.2179, h * 0.7826);6246		c.lineTo(w * 0.1136, h * 0.8424);6247		c.close();6248		c.fillAndStroke();62496250		c.begin();6251		c.moveTo(0, h * 0.7272);6252		c.lineTo(w * 0.0821, h * 0.859);6253		c.lineTo(0, h * 0.9085);6254		c.close();6255		c.fillAndStroke();62566257		c.begin();6258		c.moveTo(w * 0.4529, h * 0.6366);6259		c.lineTo(w * 0.575, h * 0.7143);6260		c.lineTo(w * 0.39, h * 0.8621);6261		c.lineTo(w * 0.2657, h * 0.7902);6262		c.close();6263		c.fillAndStroke();62646265		c.begin();6266		c.moveTo(0, h * 0.9415);6267		c.lineTo(w * 0.1036, h * 0.8821);6268		c.lineTo(w * 0.2343, h * 0.959);6269		c.lineTo(w * 0.1721, h);6270		c.lineTo(0, h);6271		c.close();6272		c.fillAndStroke();62736274		c.begin();6275		c.moveTo(w * 0.2586, h * 0.7951);6276		c.lineTo(w * 0.3829, h * 0.8674);6277		c.lineTo(w * 0.2543, h * 0.9451);6278		c.lineTo(w * 0.1279, h * 0.8692);6279		c.close();6280		c.fillAndStroke();62816282		c.begin();6283		c.moveTo(w * 0.2836, h * 0.9639);6284		c.lineTo(w * 0.4207, h * 0.8772);6285		c.lineTo(w * 0.605, h * 0.7321);6286		c.lineTo(w * 0.6521, h * 0.7634);6287		c.lineTo(w * 0.3486, h);6288		c.lineTo(w * 0.3393, h);6289		c.close();6290		c.fillAndStroke();62916292		c.begin();6293		c.moveTo(w * 0.3879, h);6294		c.lineTo(w * 0.6721, h * 0.7759);6295		c.lineTo(w * 0.7171, h * 0.7982);6296		c.lineTo(w * 0.4564, h);6297		c.close();6298		c.fillAndStroke();62996300		c.begin();6301		c.moveTo(w * 0.4986, h);6302		c.lineTo(w * 0.7386, h * 0.8125);6303		c.lineTo(w * 0.9307, h * 0.925);6304		c.lineTo(w * 0.8264, h);6305		c.close();6306		c.fillAndStroke();63076308		c.begin();6309		c.moveTo(w * 0.8671, h);6310		c.lineTo(w * 0.9464, h * 0.9491);6311		c.lineTo(w, h * 0.975);6312		c.lineTo(w, h);6313		c.close();6314		c.fillAndStroke();63156316		c.begin();6317		c.moveTo(w * 0.2295, h);6318		c.lineTo(w * 0.2648, h * 0.9792);6319		c.lineTo(w * 0.2981, h);6320		c.close();6321		c.fillAndStroke();63226323		w = wOld;6324		h = hOld;6325		c.translate( - w * 0.0928, - h * 0.08);6326	}63276328	c.setStrokeWidth(1);6329	c.setStrokeColor('#18211b');6330	c.rect(w * 0.0928, h * 0.08, w * 0.8144, h * 0.816);6331	c.stroke();63326333	c.setStrokeWidth(1.5);6334	c.setAlpha(0.8);6335	c.setStrokeColor('#dddddd');6336	c.begin();6337	c.moveTo(0, rSize);6338	c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);6339	c.lineTo(w - rSize, 0);6340	c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);6341	c.lineTo(w, h - rSize);6342	c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);6343	c.lineTo(rSize, h);6344	c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);6345	c.close();	6346	c.stroke();63476348	rSize = 22.5;6349	c.begin();6350	c.setStrokeColor('#666666');6351	c.begin();6352	c.moveTo(2.5, 2.5 + rSize);6353	c.arcTo(rSize, rSize, 0, 0, 1, 2.5 + rSize, 2.5);6354	c.lineTo(w - rSize - 5, 2.5);6355	c.arcTo(rSize, rSize, 0, 0, 1, w - 2.5, rSize + 2.5);6356	c.lineTo(w - 2.5, h - rSize - 2.5);6357	c.arcTo(rSize, rSize, 0, 0, 1, w - rSize - 2.5, h - 2.5);6358	c.lineTo(rSize + 2.5, h - 2.5);6359	c.arcTo(rSize, rSize, 0, 0, 1, 2.5, h - rSize - 2.5);6360	c.close();	6361	c.stroke();63626363	c.setAlpha(1);6364	c.ellipse(w * 0.4948, h * 0.0444, w * 0.0103, h * 0.008);6365	c.setStrokeWidth(2.5);6366	c.setStrokeColor('#000000');6367	c.setFillColor('#000099');6368	c.fillAndStroke();63696370	c.setGradient('#bbbbbb', '#000000', w * 0.4588, h * 0.912, w * 0.0825, h * 0.064, mxConstants.DIRECTION_SOUTH, 1, 1);6371	c.ellipse(w * 0.4588, h * 0.912, w * 0.0825, h * 0.064);6372	c.fill();63736374	c.setAlpha(0.5);6375	c.ellipse(w * 0.4588, h * 0.912, w * 0.0825, h * 0.064);6376	c.stroke();63776378	c.begin();6379	c.setAlpha(0.85);6380	c.setFillColor('#000000');6381	c.moveTo(w * 0.4598, h * 0.944);6382	c.arcTo(w * 0.0402, h * 0.0296, 0, 0, 1, w * 0.5402, h * 0.944);6383	c.arcTo(w * 0.0825, h * 0.064, 0, 0, 1, w * 0.4598, h * 0.944);6384	c.close();6385	c.fillAndStroke();63866387	c.begin();6388	c.setAlpha(0.7);6389	c.setStrokeWidth(1.5);6390	c.setStrokeColor('#dddddd');6391	rSize = 4;6392	c.roundrect(w * 0.4814, h * 0.9296, w * 0.0371, h * 0.0288, h * 0.00515, h * 0.004);6393	c.stroke();6394};63956396mxCellRenderer.registerShape(mxMockupC.SHAPE_IPAD, mxShapeMockupiPad);63976398//**********************************************************************************************************************************************************6399//Rounded rectangle (adjustable rounding)6400//**********************************************************************************************************************************************************6401/**6402* Extends mxShape.6403*/6404function mxShapeMockupRRect(bounds, fill, stroke, strokewidth)6405{6406	mxShape.call(this);6407	this.bounds = bounds;6408	this.fill = fill;6409	this.stroke = stroke;6410	this.strokewidth = (strokewidth != null) ? strokewidth : 1;6411};64126413/**6414* Extends mxShape.6415*/6416mxUtils.extend(mxShapeMockupRRect, mxShape);64176418mxShapeMockupRRect.prototype.cst = {6419		RRECT : 'mxgraph.ios.rrect',6420		R_SIZE : 'rSize'6421};64226423mxShapeMockupRRect.prototype.customProperties = [6424	{name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:5},6425];64266427/**6428* Function: paintVertexShape6429* 6430* Paints the vertex shape.6431*/6432mxShapeMockupRRect.prototype.paintVertexShape = function(c, x, y, w, h)6433{6434	c.translate(x, y);64356436	var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupRRect.prototype.cst.R_SIZE, '10'));6437	c.roundrect(0, 0, w, h, rSize);6438	c.fillAndStroke();6439};64406441mxCellRenderer.registerShape(mxShapeMockupRRect.prototype.cst.RRECT, mxShapeMockupRRect);64426443//**********************************************************************************************************************************************************6444//Top Button6445//**********************************************************************************************************************************************************6446/**6447* Extends mxShape.6448*/6449function mxShapeIosTopButton(bounds, fill, stroke, strokewidth)6450{6451	mxShape.call(this);6452	this.bounds = bounds;6453	this.fill = fill;6454	this.stroke = stroke;6455	this.strokewidth = (strokewidth != null) ? strokewidth : 1;6456};64576458/**6459* Extends mxShape.6460*/6461mxUtils.extend(mxShapeIosTopButton, mxShape);64626463mxShapeIosTopButton.prototype.cst = {6464		TOP_BUTTON : 'mxgraph.ios.topButton',6465		R_SIZE : 'rSize'6466};64676468mxShapeIosTopButton.prototype.customProperties = [6469	{name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:5},6470];64716472/**6473* Function: paintVertexShape6474* 6475* Paints the vertex shape.6476*/6477mxShapeIosTopButton.prototype.paintVertexShape = function(c, x, y, w, h)6478{6479	c.translate(x, y);64806481	var rSize = parseInt(mxUtils.getValue(this.style, mxShapeIosTopButton.prototype.cst.R_SIZE, '10'));64826483	c.begin();6484	c.moveTo(0, rSize);6485	c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);6486	c.lineTo(w - rSize, 0);6487	c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);6488	c.lineTo(w, h);6489	c.lineTo(0, h);6490	c.close();6491	c.fillAndStroke();6492};64936494mxCellRenderer.registerShape(mxShapeIosTopButton.prototype.cst.TOP_BUTTON, mxShapeIosTopButton);64956496//**********************************************************************************************************************************************************6497//Bottom Button6498//**********************************************************************************************************************************************************6499/**6500* Extends mxShape.6501*/6502function mxShapeIosBottomButton(bounds, fill, stroke, strokewidth)6503{6504	mxShape.call(this);6505	this.bounds = bounds;6506	this.fill = fill;6507	this.stroke = stroke;6508	this.strokewidth = (strokewidth != null) ? strokewidth : 1;6509};65106511/**6512* Extends mxShape.6513*/6514mxUtils.extend(mxShapeIosBottomButton, mxShape);65156516mxShapeIosBottomButton.prototype.cst = {6517		BOTTOM_BUTTON : 'mxgraph.ios.bottomButton',6518		R_SIZE : 'rSize'6519};65206521mxShapeIosBottomButton.prototype.customProperties = [6522	{name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:5},6523];65246525/**6526* Function: paintVertexShape6527* 6528* Paints the vertex shape.6529*/6530mxShapeIosBottomButton.prototype.paintVertexShape = function(c, x, y, w, h)6531{6532	c.translate(x, y);65336534	var rSize = parseInt(mxUtils.getValue(this.style, mxShapeIosBottomButton.prototype.cst.R_SIZE, '10'));65356536	c.begin();6537	c.moveTo(0, 0);6538	c.lineTo(w, 0);6539	c.lineTo(w, h - rSize);6540	c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);6541	c.lineTo(rSize, h);6542	c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);6543	c.close();6544	c.fillAndStroke();6545};65466547mxCellRenderer.registerShape(mxShapeIosBottomButton.prototype.cst.BOTTOM_BUTTON, mxShapeIosBottomButton);65486549//**********************************************************************************************************************************************************6550//Anchor (a dummy shape without visuals used for anchoring)6551//**********************************************************************************************************************************************************6552/**6553* Extends mxShape.6554*/6555function mxShapeIosAnchor(bounds, fill, stroke, strokewidth)6556{6557	mxShape.call(this);6558	this.bounds = bounds;6559};65606561/**6562* Extends mxShape.6563*/6564mxUtils.extend(mxShapeIosAnchor, mxShape);65656566mxShapeIosAnchor.prototype.cst = {6567		ANCHOR : 'mxgraph.ios.anchor'6568};65696570/**6571* Function: paintVertexShape6572* 6573* Paints the vertex shape.6574*/6575mxShapeIosAnchor.prototype.paintVertexShape = function(c, x, y, w, h)6576{6577};65786579mxCellRenderer.registerShape(mxShapeIosAnchor.prototype.cst.ANCHOR, mxShapeIosAnchor);65806581//**********************************************************************************************************************************************************6582//Checkbox6583//**********************************************************************************************************************************************************6584/**6585* Extends mxShape.6586*/6587function mxShapeIosCheckbox(bounds, fill, stroke, strokewidth)6588{6589	mxShape.call(this);6590	this.bounds = bounds;6591	this.fill = fill;6592	this.stroke = stroke;6593	this.strokewidth = (strokewidth != null) ? strokewidth : 1;6594};65956596/**6597* Extends mxShape.6598*/6599mxUtils.extend(mxShapeIosCheckbox, mxShape);66006601mxShapeIosCheckbox.prototype.cst = {6602		CHECKBOX : 'mxgraph.ios.checkbox'6603};66046605/**6606* Function: paintVertexShape6607* 6608* Paints the vertex shape.6609*/6610mxShapeIosCheckbox.prototype.paintVertexShape = function(c, x, y, w, h)6611{6612	c.translate(x, y);6613	c.rect(0, 0, w, h);6614	c.fillAndStroke();6615	6616	c.begin();6617	c.moveTo(w * 0.8, h * 0.2);6618	c.lineTo(w * 0.4, h * 0.8);6619	c.lineTo(w * 0.25, h * 0.6);6620	c.stroke();6621};66226623mxCellRenderer.registerShape(mxShapeIosCheckbox.prototype.cst.CHECKBOX, mxShapeIosCheckbox);66246625//**********************************************************************************************************************************************************6626//Fancy Rounded rectangle (adjustable rounding)6627//**********************************************************************************************************************************************************6628/**6629* Extends mxShape.6630*/6631function mxShapeMockupFancyRRect(bounds, fill, stroke, strokewidth)6632{6633	mxShape.call(this);6634	this.bounds = bounds;6635	this.fill = fill;6636	this.stroke = stroke;6637	this.strokewidth = (strokewidth != null) ? strokewidth : 1;6638};66396640/**6641* Extends mxShape.6642*/6643mxUtils.extend(mxShapeMockupFancyRRect, mxShape);66446645mxShapeMockupFancyRRect.prototype.cst = {6646		FANCY_RRECT : 'mxgraph.ios.fancyRRect',6647		R_SIZE : 'rSize'6648};66496650mxShapeMockupFancyRRect.prototype.customProperties = [6651	{name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:8}6652];66536654/**6655* Function: paintVertexShape6656* 6657* Paints the vertex shape.6658*/6659mxShapeMockupFancyRRect.prototype.paintVertexShape = function(c, x, y, w, h)6660{6661	c.translate(x, y);66626663	var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupFancyRRect.prototype.cst.R_SIZE, '10'));6664	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');6665	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');66666667//	c.setAlpha(0.8);6668	c.roundrect(0, 0, w, h, rSize);6669	c.fillAndStroke();6670	6671	c.setShadow(false);6672	6673	c.setStrokeColor(fillColor);6674	c.setGradient(fillColor, '#ffffff', 0, 0, w, 22.5, mxConstants.DIRECTION_SOUTH, 1, 1);6675	c.setAlpha(0.3);6676	c.begin();6677	c.moveTo(w - rSize, 0);6678	c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);6679	c.lineTo(w, 17.5);6680	c.arcTo(w * 1.67, h * 2.5, 0, 0, 1, 0, 17.5);6681	c.lineTo(0, rSize);6682	c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);6683	c.close();6684	c.fillAndStroke();66856686	c.setAlpha(0.8);6687	c.setStrokeColor(strokeColor);6688	c.setStrokeWidth(1);6689	c.roundrect(0, 0, w, h, rSize, rSize);6690	c.stroke();6691};66926693mxCellRenderer.registerShape(mxShapeMockupFancyRRect.prototype.cst.FANCY_RRECT, mxShapeMockupFancyRRect);