drawio-offline
Version:
diagrams.net desktop
1,890 lines (1,651 loc) • 204 kB
JavaScript
/**
* $Id: mxMockupiOS.js,v 1.5 2013/11/12 06:25:46 mate Exp $
* Copyright (c) 2006-2010, JGraph Ltd
*/
var mxMockupC =
{
BAR_HEIGHT : 'barHeight',
BAR_POS : 'barPos',
BG_STYLE : 'bgStyle',
BG_FLAT_GREEN : 'bgGreen',
BG_FLAT_WHITE : 'bgWhite',
BG_FLAT_GRAY : 'bgGray',
BG_FLAT_CUSTOM : 'bgFlat',
BG_MAP : 'bgMap',
BG_STRIPED : 'bgStriped',
BUTTON_STYLE : 'buttonStyle',
BUTTON_TEXT : 'buttonText',
BUTTON_STATE : 'buttonState',
CHEVRON : 'chevron',
GRID_SIZE : 'gridSize',
POINTER_BOTTOM : 'bottom',
POINTER_POS : 'pointerPos',
POINTER_TOP : 'top',
ROUND : 'round',
SELECTED : '+', //has to be one character long
STATE_ON : 'on',
STATE_OFF : 'off',
SUB_TEXT : 'subText',
SHAPE_IADD_ICON : 'mxgraph.ios.iAddIcon',
SHAPE_IALERT_BOX : 'mxgraph.ios.iAlertBox',
SHAPE_IALPHA_LIST : 'mxgraph.ios.iAlphaList',
SHAPE_IAPP_BAR : 'mxgraph.ios.iAppBar',
SHAPE_IARROW_ICON : 'mxgraph.ios.iArrowIcon',
SHAPE_IBG_FLAT : 'mxgraph.ios.iBgFlat',
SHAPE_IBG_MAP : 'mxgraph.ios.iBgMap',
SHAPE_IBG_STRIPED : 'mxgraph.ios.iBgStriped',
SHAPE_IBUTTON : 'mxgraph.ios.iButton',
SHAPE_IBUTTON_BACK : 'mxgraph.ios.iButtonBack',
SHAPE_IBUTTON_FORWARD : 'mxgraph.ios.iButtonFw',
SHAPE_IBUTTON_BAR : 'mxgraph.ios.iButtonBar',
SHAPE_ICALL_BUTTONS : 'mxgraph.ios.iCallButtons',
SHAPE_ICALL_DIALOG : 'mxgraph.ios.iCallDialog',
SHAPE_ICHECKBOX_GROUP : 'mxgraph.ios.iCheckboxGroup',
SHAPE_ICHECK_ICON : 'mxgraph.ios.iCheckIcon',
SHAPE_ICLOUD_PROGRESS_BAR : 'mxgraph.ios.iCloudProgressBar',
SHAPE_ICOMBO_BOX : 'mxgraph.ios.iComboBox',
SHAPE_ICOPY : 'mxgraph.ios.iCopy',
SHAPE_ICOPY_AREA : 'mxgraph.ios.iCopyArea',
SHAPE_IICON_GRID : 'mxgraph.ios.iIconGrid',
SHAPE_IDELETE_APP : 'mxgraph.ios.iDeleteApp',
SHAPE_IDELETE_ICON : 'mxgraph.ios.iDeleteIcon',
SHAPE_IDOWNLOAD_BAR : 'mxgraph.ios.iDownloadBar',
SHAPE_IDIALOG_BOX : 'mxgraph.ios.iDialogBox',
SHAPE_IDIRECTION : 'mxgraph.ios.iDir',
SHAPE_IHOME_PAGE_CONTROL : 'mxgraph.ios.iHomePageControl',
SHAPE_IKEYB_LETTERS : 'mxgraph.ios.iKeybLett',
SHAPE_IKEYB_NUMBERS : 'mxgraph.ios.iKeybNumb',
SHAPE_IKEYB_SYMBOLS : 'mxgraph.ios.iKeybSymb',
SHAPE_ILOCATION_BAR : 'mxgraph.ios.iLocBar',
SHAPE_ILOCK_BUTTON : 'mxgraph.ios.iLockButton',
SHAPE_IHOR_BUTTON_BAR : 'mxgraph.ios.iHorButtonBar',
SHAPE_IINFO_ICON : 'mxgraph.ios.iInfoIcon',
SHAPE_ION_OFF_BUTTON : 'mxgraph.ios.iOnOffButton',
SHAPE_IOPTION : 'mxgraph.ios.iOption',
SHAPE_IPAGE_CONTROL : 'mxgraph.ios.iPageControl',
SHAPE_IPAD : 'mxgraph.ios.iPad',
SHAPE_IPHONE : 'mxgraph.ios.iPhone',
SHAPE_IPIN : 'mxgraph.ios.iPin',
SHAPE_IPREV_NEXT : 'mxgraph.ios.iPrevNext',
SHAPE_IPROGRESS_BAR : 'mxgraph.ios.iProgressBar',
SHAPE_IRADIO_GROUP : 'mxgraph.ios.iRadioGroup',
SHAPE_ISLIDER : 'mxgraph.ios.iSlider',
SHAPE_ISORT_FIND_ICON : 'mxgraph.ios.iSortFindIcon',
SHAPE_ITEXT_INPUT : 'mxgraph.ios.iTextInput',
SHAPE_ITOP_BAR : 'mxgraph.ios.iTopBar',
SHAPE_ITOP_BAR_LOCKED : 'mxgraph.ios.iTopBarLocked',
SHAPE_IURL_BAR : 'mxgraph.ios.iURLBar',
SHAPE_IVIDEO_CONTROLS : 'mxgraph.ios.iVideoControls',
SHAPE_ISCREEN_NAME_BAR: 'mxgraph.ios.iScreenNameBar',
STYLE_FILLCOLOR2 : 'fillColor2',
STYLE_FILLCOLOR3 : 'fillColor3',
STYLE_TEXTCOLOR : 'textColor',
STYLE_TEXTCOLOR2 : 'textColor2',
STYLE_STROKECOLOR2 : 'strokeColor2',
STYLE_STROKECOLOR3 : 'strokeColor3'
};
//**********************************************************************************************************************************************************
//iPhone Vertical
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupiPhone(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupiPhone, mxShape);
mxShapeMockupiPhone.prototype.customProperties = [
{name: 'bgStyle', dispName: 'Background', type: 'enum',
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'}]}
];
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeMockupiPhone.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
var rSize = 25;
this.background(c, x, y, w, h, rSize);
c.setShadow(false);
this.foreground(c, x, y, w, h, rSize);
};
mxShapeMockupiPhone.prototype.background = function(c, x, y, w, h, rSize)
{
c.setFillColor('#000000');
c.setStrokeColor('#000000');
c.roundrect(0, 0, w, h, rSize, rSize);
c.fillAndStroke();
};
mxShapeMockupiPhone.prototype.foreground = function(c, x, y, w, h, rSize)
{
c.setStrokeWidth(1.5);
c.begin();
c.setGradient('#808080', '#000000', w * 0.325, 0, w * 0.675, h * 0.5, mxConstants.DIRECTION_SOUTH, 1, 1);
c.moveTo(w * 0.325, 0);
c.lineTo(w - rSize, 0);
c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);
c.lineTo(w, h * 0.5);
c.lineTo(w * 0.7, h * 0.5);
c.close();
c.fill();
var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '');
var bgStyle = mxUtils.getValue(this.style, mxMockupC.BG_STYLE, mxMockupC.BG_FLAT_GREEN);
c.setStrokeWidth(1);
if (bgStyle === mxMockupC.BG_FLAT_WHITE)
{
c.setFillColor('#ffffff');
c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7);
c.fill();
}
else if (bgStyle === mxMockupC.BG_FLAT_GREEN)
{
c.setFillColor('#1f2923');
c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7);
c.fill();
}
else if (bgStyle === mxMockupC.BG_FLAT_GRAY)
{
c.setFillColor('#dddddd');
c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7);
c.fill();
}
else if (bgStyle === mxMockupC.BG_FLAT_CUSTOM)
{
c.setFillColor(fillColor);
c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7);
c.fill();
}
else if (bgStyle === mxMockupC.BG_STRIPED)
{
var xOld = x;
var yOld = y;
var wOld = w;
var hOld = h;
c.translate(w * 0.0625, h * 0.15);
w = w * 0.875;
h = h * 0.7;
c.setFillColor('#5D7585');
c.rect(0, 0, w, h);
c.fillAndStroke();
var strokeColor = '#18211b';
var strokeColor2 = '#657E8F';
c.setStrokeColor(strokeColor2);
var i = 5;
c.begin();
while (i < w)
{
c.moveTo(i, 0);
c.lineTo(i, h);
i = i + 5;
}
c.stroke();
c.setStrokeColor(strokeColor);
c.begin();
c.rect(0, 0, w, h);
c.stroke();
w = wOld;
h = hOld;
c.translate( - w * 0.0625, - h * 0.15);
}
else if (bgStyle === mxMockupC.BG_MAP)
{
var xOld = x;
var yOld = y;
var wOld = w;
var hOld = h;
c.translate(w * 0.0625, h * 0.15);
w = w * 0.875;
h = h * 0.7;
c.setFillColor('#ffffff');
c.rect(0, 0, w, h);
c.fillAndStroke();
var fillColor2 = '#96D1FF';
var strokeColor = '#18211b';
var strokeColor2 = '#008cff';
c.setFillColor(fillColor2);
c.setStrokeColor(strokeColor2);
c.setStrokeWidth(1);
c.begin();
c.moveTo(0, 0);
c.lineTo(w * 0.1171, 0);
c.lineTo(w * 0.1136, h * 0.0438);
c.lineTo(w * 0.0993, h * 0.054);
c.lineTo(0, h * 0.0446);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.1993, 0);
c.lineTo(w * 0.1914, h * 0.03884);
c.lineTo(w * 0.1536, h * 0.0362);
c.lineTo(w * 0.1586, 0);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.24, 0);
c.lineTo(w * 0.2257, h * 0.054);
c.lineTo(w * 0.2414, h * 0.0674);
c.lineTo(w * 0.4707, h * 0.0835);
c.lineTo(w * 0.5264, h * 0.0906);
c.lineTo(w * 0.6429, h * 0.0929);
c.arcTo(w * 0.0857, h * 0.0536, 0, 0, 0, w * 0.7193, h * 0.0621);
c.arcTo(w * 0.48, h * 0.2143, 0, 0, 0, w * 0.7286, 0);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.8, 0);
c.lineTo(w * 0.7886, h * 0.04554);
c.arcTo(w * 0.0857, h * 0.0536, 0, 0, 0, w * 0.8164, h * 0.0875);
c.arcTo(w * 0.1429, h * 0.0893, 0, 0, 0, w * 0.88, h * 0.1036);
c.lineTo(w, h * 0.1112);
c.lineTo(w, 0);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(0, h * 0.0933);
c.lineTo(w * 0.08, h * 0.1036);
c.lineTo(w * 0.1021, h * 0.1246);
c.lineTo(w * 0.1007, h * 0.1768);
c.lineTo(w * 0.0471, h * 0.2241);
c.lineTo(0, h * 0.2527);
c.close();
c.fillAndStroke();
c.ellipse(w * 0.1214, h * 0.0603, w * 0.0843, h * 0.0576);
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.1293, h * 0.1924);
c.lineTo(w * 0.1729, h * 0.142);
c.lineTo(w * 0.1407, h * 0.1411);
c.lineTo(w * 0.14, h * 0.1777);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.4586, h * 0.1241);
c.lineTo(w * 0.455, h * 0.1835);
c.lineTo(w * 0.3893, h * 0.2246);
c.lineTo(w * 0.2171, h * 0.1362);
c.lineTo(w * 0.2171, h * 0.1308);
c.lineTo(w * 0.2293, h * 0.1214);
c.lineTo(w * 0.2857, h * 0.1174);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.5079, h * 0.1134);
c.lineTo(w * 0.7307, h * 0.1223);
c.lineTo(w * 0.7279, h * 0.1625);
c.lineTo(w * 0.715, h * 0.1772);
c.lineTo(w * 0.6929, h * 0.1688);
c.lineTo(w * 0.625, h * 0.1795);
c.lineTo(w * 0.4779, h * 0.2835);
c.lineTo(w * 0.395, h * 0.2299);
c.lineTo(w * 0.4657, h * 0.1826);
c.lineTo(w * 0.4707, h * 0.1223);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w, h * 0.1362);
c.lineTo(w * 0.7643, h * 0.1237);
c.lineTo(w * 0.7543, h * 0.1562);
c.lineTo(w * 0.7643, h * 0.1585);
c.lineTo(w * 0.9186, h * 0.2366);
c.lineTo(w, h * 0.1732);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.2079, h * 0.1545);
c.lineTo(w * 0.3886, h * 0.2536);
c.lineTo(w * 0.3414, h * 0.2933);
c.lineTo(w * 0.1743, h * 0.1969);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.1579, h * 0.2134);
c.lineTo(w * 0.3221, h * 0.3067);
c.lineTo(w * 0.2957, h * 0.3237);
c.lineTo(w * 0.1157, h * 0.2424);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.405, h * 0.2656);
c.lineTo(w * 0.31, h * 0.3353);
c.lineTo(w * 0.3693, h * 0.3661);
c.lineTo(w * 0.4571, h * 0.2982);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.7121, h * 0.1848);
c.lineTo(w * 0.6879, h * 0.1754);
c.lineTo(w * 0.6329, h * 0.1844);
c.lineTo(w * 0.61, h * 0.2018);
c.lineTo(w * 0.6207, h * 0.2085);
c.lineTo(w * 0.4986, h * 0.2982);
c.lineTo(w * 0.535, h * 0.3237);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.5557, h * 0.3379);
c.lineTo(w * 0.7464, h * 0.1826);
c.lineTo(w * 0.8036, h * 0.2076);
c.lineTo(w * 0.595, h * 0.3616);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.8293, h * 0.2188);
c.lineTo(w * 0.8979, h * 0.2509);
c.lineTo(w * 0.6936, h * 0.4125);
c.lineTo(w * 0.6171, h * 0.3737);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w, h * 0.2138);
c.lineTo(w * 0.6821, h * 0.4603);
c.lineTo(w * 0.815, h * 0.5277);
c.lineTo(w, h * 0.4);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(0, h * 0.317);
c.lineTo(w * 0.0971, h * 0.2554);
c.lineTo(w * 0.4121, h * 0.4143);
c.lineTo(w * 0.3736, h * 0.4415);
c.lineTo(w * 0.315, h * 0.4076);
c.lineTo(w * 0.3093, h * 0.4116);
c.lineTo(w * 0.3686, h * 0.4455);
c.lineTo(w * 0.285, h * 0.5045);
c.lineTo(w * 0.1114, h * 0.4134);
c.lineTo(w * 0.025, h * 0.4603);
c.lineTo(w * 0.0371, h * 0.4723);
c.lineTo(w * 0.1114, h * 0.4371);
c.lineTo(w * 0.2871, h * 0.5312);
c.lineTo(w * 0.1929, h * 0.6058);
c.lineTo(w * 0.2271, h * 0.6705);
c.lineTo(w * 0.17, h * 0.7147);
c.lineTo(w * 0.0314, h * 0.6321);
c.lineTo(0, h * 0.6246);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.48, h * 0.3121);
c.lineTo(w * 0.5157, h * 0.3375);
c.lineTo(w * 0.4314, h * 0.3982);
c.lineTo(w * 0.3929, h * 0.3786);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.3086, h * 0.5179);
c.lineTo(w * 0.53, h * 0.3518);
c.lineTo(w * 0.5757, h * 0.3745);
c.lineTo(w * 0.3479, h * 0.5411);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.5964, h * 0.3884);
c.lineTo(w * 0.6736, h * 0.4277);
c.lineTo(w * 0.445, h * 0.5991);
c.lineTo(w * 0.3664, h * 0.5531);
c.lineTo(w * 0.5057, h * 0.4545);
c.lineTo(w * 0.5507, h * 0.4754);
c.lineTo(w * 0.5571, h * 0.4723);
c.lineTo(w * 0.5114, h * 0.4504);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.4793, h * 0.6161);
c.lineTo(w * 0.6771, h * 0.4643);
c.lineTo(w * 0.8086, h * 0.5326);
c.lineTo(w * 0.7471, h * 0.5817);
c.lineTo(w * 0.7214, h * 0.567);
c.lineTo(w * 0.715, h * 0.571);
c.lineTo(w * 0.7421, h * 0.5871);
c.lineTo(w * 0.6014, h * 0.6933);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w, h * 0.4371);
c.lineTo(w * 0.8443, h * 0.546);
c.lineTo(w * 0.9071, h * 0.5701);
c.lineTo(w, h * 0.5022);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.8407, h * 0.5504);
c.lineTo(w * 0.8993, h * 0.5759);
c.lineTo(w * 0.6757, h * 0.7416);
c.lineTo(w * 0.6286, h * 0.7139);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w, h * 0.5321);
c.lineTo(w * 0.6979, h * 0.7549);
c.lineTo(w * 0.7457, h * 0.7781);
c.lineTo(w * 0.9814, h * 0.6094);
c.lineTo(w, h * 0.6067);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w, h * 0.6254);
c.lineTo(w * 0.7664, h * 0.792);
c.lineTo(w * 0.9586, h * 0.9062);
c.lineTo(w, h * 0.8786);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.3093, h * 0.5464);
c.lineTo(w * 0.4271, h * 0.6152);
c.lineTo(w * 0.245, h * 0.7643);
c.lineTo(w * 0.185, h * 0.7228);
c.lineTo(w * 0.2493, h * 0.6728);
c.lineTo(w * 0.2214, h * 0.6143);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(0, h * 0.65);
c.lineTo(w * 0.2179, h * 0.7826);
c.lineTo(w * 0.1136, h * 0.8424);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(0, h * 0.7272);
c.lineTo(w * 0.0821, h * 0.859);
c.lineTo(0, h * 0.9085);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.4529, h * 0.6366);
c.lineTo(w * 0.575, h * 0.7143);
c.lineTo(w * 0.39, h * 0.8621);
c.lineTo(w * 0.2657, h * 0.7902);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(0, h * 0.9415);
c.lineTo(w * 0.1036, h * 0.8821);
c.lineTo(w * 0.2343, h * 0.959);
c.lineTo(w * 0.1721, h);
c.lineTo(0, h);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.2586, h * 0.7951);
c.lineTo(w * 0.3829, h * 0.8674);
c.lineTo(w * 0.2543, h * 0.9451);
c.lineTo(w * 0.1279, h * 0.8692);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.2836, h * 0.9639);
c.lineTo(w * 0.4207, h * 0.8772);
c.lineTo(w * 0.605, h * 0.7321);
c.lineTo(w * 0.6521, h * 0.7634);
c.lineTo(w * 0.3486, h);
c.lineTo(w * 0.3393, h);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.3879, h);
c.lineTo(w * 0.6721, h * 0.7759);
c.lineTo(w * 0.7171, h * 0.7982);
c.lineTo(w * 0.4564, h);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.4986, h);
c.lineTo(w * 0.7386, h * 0.8125);
c.lineTo(w * 0.9307, h * 0.925);
c.lineTo(w * 0.8264, h);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.8671, h);
c.lineTo(w * 0.9464, h * 0.9491);
c.lineTo(w, h * 0.975);
c.lineTo(w, h);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.2295, h);
c.lineTo(w * 0.2648, h * 0.9792);
c.lineTo(w * 0.2981, h);
c.close();
c.fillAndStroke();
w = wOld;
h = hOld;
c.translate( - w * 0.0625, - h * 0.15);
}
c.setStrokeWidth(1);
c.setStrokeColor('#18211b');
c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7);
c.stroke();
c.setStrokeWidth(1.5);
c.setAlpha(0.8);
c.setStrokeColor('#dddddd');
c.roundrect(0, 0, w, h, rSize, rSize);
c.stroke();
rSize = 22.5;
c.begin();
c.setStrokeColor('#666666');
c.roundrect(5, 5, w - 10, h - 10, rSize, rSize);
c.stroke();
c.setAlpha(1);
c.ellipse(w * 0.4875, h * 0.04125, w * 0.025, h * 0.0125);
c.setStrokeWidth(2.5);
c.setStrokeColor('#000000');
c.setFillColor('#000099');
c.fillAndStroke();
c.begin();
c.setStrokeWidth(1.5);
c.setFillColor('#444444');
c.setStrokeColor('#333333');
rSize = 4;
c.roundrect(w * 0.375, h * 0.075, w * 0.25, h * 0.01875, w * 0.02, h * 0.01);
c.fillAndStroke();
c.setGradient('#bbbbbb', '#000000', w * 0.4, h * 0.875, w * 0.2, h * 0.1, mxConstants.DIRECTION_SOUTH, 1, 1);
c.ellipse(w * 0.4, h * 0.875, w * 0.2, h * 0.1);
c.fill();
c.setAlpha(0.5);
c.ellipse(w * 0.404, h * 0.876, w * 0.19, h * 0.095);
c.stroke();
c.begin();
c.setAlpha(0.85);
c.setFillColor('#000000');
c.moveTo(w * 0.4025, h * 0.925);
c.arcTo(w * 0.0975, h * 0.04625, 0, 0, 1, w * 0.5975, h * 0.925);
c.arcTo(w * 0.2, h * 0.1, 0, 0, 1, w * 0.4025, h * 0.925);
c.close();
c.fillAndStroke();
c.begin();
c.setAlpha(0.7);
c.setStrokeWidth(1.5);
c.setStrokeColor('#dddddd');
rSize = 4;
c.roundrect(w * 0.4575, h * 0.905, w * 0.0875, h * 0.04375, h * 0.00625, h * 0.00625);
c.stroke();
};
mxCellRenderer.registerShape(mxMockupC.SHAPE_IPHONE, mxShapeMockupiPhone);
//**********************************************************************************************************************************************************
//iPhone flat colored background
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupiBgFlat(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupiBgFlat, mxShape);
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeMockupiBgFlat.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
this.background(c, x, y, w, h);
};
mxShapeMockupiBgFlat.prototype.background = function(c, x, y, w, h)
{
c.begin();
c.rect(0, 0, w, h);
c.fillAndStroke();
};
mxCellRenderer.registerShape(mxMockupC.SHAPE_IBG_FLAT, mxShapeMockupiBgFlat);
//**********************************************************************************************************************************************************
//iPhone striped background
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupiBgStriped(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupiBgStriped, mxShape);
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeMockupiBgStriped.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
this.background(c, x, y, w, h);
c.setShadow(false);
this.foreground(c, x, y, w, h);
};
mxShapeMockupiBgStriped.prototype.background = function(c, x, y, w, h)
{
c.setStrokeWidth(1);
c.begin();
c.rect(0, 0, w, h);
c.fillAndStroke();
};
mxShapeMockupiBgStriped.prototype.foreground = function(c, x, y, w, h)
{
var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '');
var strokeColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_STROKECOLOR2, '');
c.setStrokeColor(strokeColor2);
var i = 5;
c.begin();
while (i < w)
{
c.moveTo(i, 0);
c.lineTo(i, h);
i = i + 5;
}
c.stroke();
c.setStrokeColor(strokeColor);
c.begin();
c.rect(0, 0, w, h);
c.stroke();
};
mxCellRenderer.registerShape(mxMockupC.SHAPE_IBG_STRIPED, mxShapeMockupiBgStriped);
//**********************************************************************************************************************************************************
//iPhone map background
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupiBgMap(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupiBgMap, mxShape);
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeMockupiBgMap.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
this.background(c, x, y, w, h);
c.setShadow(false);
this.foreground(c, x, y, w, h);
};
mxShapeMockupiBgMap.prototype.background = function(c, x, y, w, h)
{
c.begin();
c.rect(0, 0, w, h);
c.fillAndStroke();
};
mxShapeMockupiBgMap.prototype.foreground = function(c, x, y, w, h)
{
var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '');
var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '');
var strokeColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_STROKECOLOR2, '');
c.setFillColor(fillColor2);
c.setStrokeColor(strokeColor2);
c.setStrokeWidth(0.5);
c.begin();
c.moveTo(0, 0);
c.lineTo(w * 0.1171, 0);
c.lineTo(w * 0.1136, h * 0.0438);
c.lineTo(w * 0.0993, h * 0.054);
c.lineTo(0, h * 0.0446);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.1993, 0);
c.lineTo(w * 0.1914, h * 0.03884);
c.lineTo(w * 0.1536, h * 0.0362);
c.lineTo(w * 0.1586, 0);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.24, 0);
c.lineTo(w * 0.2257, h * 0.054);
c.lineTo(w * 0.2414, h * 0.0674);
c.lineTo(w * 0.4707, h * 0.0835);
c.lineTo(w * 0.5264, h * 0.0906);
c.lineTo(w * 0.6429, h * 0.0929);
c.arcTo(w * 0.0857, h * 0.0536, 0, 0, 0, w * 0.7193, h * 0.0621);
c.arcTo(w * 0.48, h * 0.2143, 0, 0, 0, w * 0.7286, 0);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.8, 0);
c.lineTo(w * 0.7886, h * 0.04554);
c.arcTo(w * 0.0857, h * 0.0536, 0, 0, 0, w * 0.8164, h * 0.0875);
c.arcTo(w * 0.1429, h * 0.0893, 0, 0, 0, w * 0.88, h * 0.1036);
c.lineTo(w, h * 0.1112);
c.lineTo(w, 0);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(0, h * 0.0933);
c.lineTo(w * 0.08, h * 0.1036);
c.lineTo(w * 0.1021, h * 0.1246);
c.lineTo(w * 0.1007, h * 0.1768);
c.lineTo(w * 0.0471, h * 0.2241);
c.lineTo(0, h * 0.2527);
c.close();
c.fillAndStroke();
c.ellipse(w * 0.1214, h * 0.0603, w * 0.0843, h * 0.0576);
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.1293, h * 0.1924);
c.lineTo(w * 0.1729, h * 0.142);
c.lineTo(w * 0.1407, h * 0.1411);
c.lineTo(w * 0.14, h * 0.1777);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.4586, h * 0.1241);
c.lineTo(w * 0.455, h * 0.1835);
c.lineTo(w * 0.3893, h * 0.2246);
c.lineTo(w * 0.2171, h * 0.1362);
c.lineTo(w * 0.2171, h * 0.1308);
c.lineTo(w * 0.2293, h * 0.1214);
c.lineTo(w * 0.2857, h * 0.1174);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.5079, h * 0.1134);
c.lineTo(w * 0.7307, h * 0.1223);
c.lineTo(w * 0.7279, h * 0.1625);
c.lineTo(w * 0.715, h * 0.1772);
c.lineTo(w * 0.6929, h * 0.1688);
c.lineTo(w * 0.625, h * 0.1795);
c.lineTo(w * 0.4779, h * 0.2835);
c.lineTo(w * 0.395, h * 0.2299);
c.lineTo(w * 0.4657, h * 0.1826);
c.lineTo(w * 0.4707, h * 0.1223);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w, h * 0.1362);
c.lineTo(w * 0.7643, h * 0.1237);
c.lineTo(w * 0.7543, h * 0.1562);
c.lineTo(w * 0.7643, h * 0.1585);
c.lineTo(w * 0.9186, h * 0.2366);
c.lineTo(w, h * 0.1732);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.2079, h * 0.1545);
c.lineTo(w * 0.3886, h * 0.2536);
c.lineTo(w * 0.3414, h * 0.2933);
c.lineTo(w * 0.1743, h * 0.1969);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.1579, h * 0.2134);
c.lineTo(w * 0.3221, h * 0.3067);
c.lineTo(w * 0.2957, h * 0.3237);
c.lineTo(w * 0.1157, h * 0.2424);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.405, h * 0.2656);
c.lineTo(w * 0.31, h * 0.3353);
c.lineTo(w * 0.3693, h * 0.3661);
c.lineTo(w * 0.4571, h * 0.2982);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.7121, h * 0.1848);
c.lineTo(w * 0.6879, h * 0.1754);
c.lineTo(w * 0.6329, h * 0.1844);
c.lineTo(w * 0.61, h * 0.2018);
c.lineTo(w * 0.6207, h * 0.2085);
c.lineTo(w * 0.4986, h * 0.2982);
c.lineTo(w * 0.535, h * 0.3237);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.5557, h * 0.3379);
c.lineTo(w * 0.7464, h * 0.1826);
c.lineTo(w * 0.8036, h * 0.2076);
c.lineTo(w * 0.595, h * 0.3616);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.8293, h * 0.2188);
c.lineTo(w * 0.8979, h * 0.2509);
c.lineTo(w * 0.6936, h * 0.4125);
c.lineTo(w * 0.6171, h * 0.3737);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w, h * 0.2138);
c.lineTo(w * 0.6821, h * 0.4603);
c.lineTo(w * 0.815, h * 0.5277);
c.lineTo(w, h * 0.4);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(0, h * 0.317);
c.lineTo(w * 0.0971, h * 0.2554);
c.lineTo(w * 0.4121, h * 0.4143);
c.lineTo(w * 0.3736, h * 0.4415);
c.lineTo(w * 0.315, h * 0.4076);
c.lineTo(w * 0.3093, h * 0.4116);
c.lineTo(w * 0.3686, h * 0.4455);
c.lineTo(w * 0.285, h * 0.5045);
c.lineTo(w * 0.1114, h * 0.4134);
c.lineTo(w * 0.025, h * 0.4603);
c.lineTo(w * 0.0371, h * 0.4723);
c.lineTo(w * 0.1114, h * 0.4371);
c.lineTo(w * 0.2871, h * 0.5312);
c.lineTo(w * 0.1929, h * 0.6058);
c.lineTo(w * 0.2271, h * 0.6705);
c.lineTo(w * 0.17, h * 0.7147);
c.lineTo(w * 0.0314, h * 0.6321);
c.lineTo(0, h * 0.6246);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.48, h * 0.3121);
c.lineTo(w * 0.5157, h * 0.3375);
c.lineTo(w * 0.4314, h * 0.3982);
c.lineTo(w * 0.3929, h * 0.3786);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.3086, h * 0.5179);
c.lineTo(w * 0.53, h * 0.3518);
c.lineTo(w * 0.5757, h * 0.3745);
c.lineTo(w * 0.3479, h * 0.5411);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.5964, h * 0.3884);
c.lineTo(w * 0.6736, h * 0.4277);
c.lineTo(w * 0.445, h * 0.5991);
c.lineTo(w * 0.3664, h * 0.5531);
c.lineTo(w * 0.5057, h * 0.4545);
c.lineTo(w * 0.5507, h * 0.4754);
c.lineTo(w * 0.5571, h * 0.4723);
c.lineTo(w * 0.5114, h * 0.4504);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.4793, h * 0.6161);
c.lineTo(w * 0.6771, h * 0.4643);
c.lineTo(w * 0.8086, h * 0.5326);
c.lineTo(w * 0.7471, h * 0.5817);
c.lineTo(w * 0.7214, h * 0.567);
c.lineTo(w * 0.715, h * 0.571);
c.lineTo(w * 0.7421, h * 0.5871);
c.lineTo(w * 0.6014, h * 0.6933);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w, h * 0.4371);
c.lineTo(w * 0.8443, h * 0.546);
c.lineTo(w * 0.9071, h * 0.5701);
c.lineTo(w, h * 0.5022);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.8407, h * 0.5504);
c.lineTo(w * 0.8993, h * 0.5759);
c.lineTo(w * 0.6757, h * 0.7416);
c.lineTo(w * 0.6286, h * 0.7139);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w, h * 0.5321);
c.lineTo(w * 0.6979, h * 0.7549);
c.lineTo(w * 0.7457, h * 0.7781);
c.lineTo(w * 0.9814, h * 0.6094);
c.lineTo(w, h * 0.6067);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w, h * 0.6254);
c.lineTo(w * 0.7664, h * 0.792);
c.lineTo(w * 0.9586, h * 0.9062);
c.lineTo(w, h * 0.8786);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.3093, h * 0.5464);
c.lineTo(w * 0.4271, h * 0.6152);
c.lineTo(w * 0.245, h * 0.7643);
c.lineTo(w * 0.185, h * 0.7228);
c.lineTo(w * 0.2493, h * 0.6728);
c.lineTo(w * 0.2214, h * 0.6143);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(0, h * 0.65);
c.lineTo(w * 0.2179, h * 0.7826);
c.lineTo(w * 0.1136, h * 0.8424);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(0, h * 0.7272);
c.lineTo(w * 0.0821, h * 0.859);
c.lineTo(0, h * 0.9085);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.4529, h * 0.6366);
c.lineTo(w * 0.575, h * 0.7143);
c.lineTo(w * 0.39, h * 0.8621);
c.lineTo(w * 0.2657, h * 0.7902);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(0, h * 0.9415);
c.lineTo(w * 0.1036, h * 0.8821);
c.lineTo(w * 0.2343, h * 0.959);
c.lineTo(w * 0.1721, h);
c.lineTo(0, h);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.2586, h * 0.7951);
c.lineTo(w * 0.3829, h * 0.8674);
c.lineTo(w * 0.2543, h * 0.9451);
c.lineTo(w * 0.1279, h * 0.8692);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.2836, h * 0.9639);
c.lineTo(w * 0.4207, h * 0.8772);
c.lineTo(w * 0.605, h * 0.7321);
c.lineTo(w * 0.6521, h * 0.7634);
c.lineTo(w * 0.3486, h);
c.lineTo(w * 0.3393, h);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.3879, h);
c.lineTo(w * 0.6721, h * 0.7759);
c.lineTo(w * 0.7171, h * 0.7982);
c.lineTo(w * 0.4564, h);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.4986, h);
c.lineTo(w * 0.7386, h * 0.8125);
c.lineTo(w * 0.9307, h * 0.925);
c.lineTo(w * 0.8264, h);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.8671, h);
c.lineTo(w * 0.9464, h * 0.9491);
c.lineTo(w, h * 0.975);
c.lineTo(w, h);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w * 0.2295, h);
c.lineTo(w * 0.2648, h * 0.9792);
c.lineTo(w * 0.2981, h);
c.close();
c.fillAndStroke();
c.setStrokeWidth(1);
c.setStrokeColor(strokeColor);
c.begin();
c.rect(0, 0, w, h);
c.stroke();
};
mxCellRenderer.registerShape(mxMockupC.SHAPE_IBG_MAP, mxShapeMockupiBgMap);
//**********************************************************************************************************************************************************
//Vertical Button Bar
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupiButtonBar(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupiButtonBar, mxShape);
mxShapeMockupiButtonBar.prototype.customProperties = [
{name: 'buttonText', dispName: 'Labels', type: 'string'},
{name: 'textColor', dispName: 'Text Color', type: 'color'},
{name: 'textColor2', dispName: 'Text2 Color', type: 'color'},
{name: 'strokeColor2', dispName: 'Stroke2 Color', type: 'color'}
];
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeMockupiButtonBar.prototype.paintVertexShape = function(c, x, y, w, h)
{
var textStrings = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, '+Button 1, Button 2, Button 3').toString().split(',');
var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR, '#666666');
var selectedFontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#ffffff');
var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17').toString();
var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');
var separatorColor = mxUtils.getValue(this.style, mxMockupC.STYLE_STROKECOLOR2, '#c4c4c4');
var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');
var buttonNum = textStrings.length;
var maxButtonWidth = 0;
var selectedButton = -1;
var rSize = 2.5; //rounding size
var labelOffset = 2.5;
for (var i = 0; i < buttonNum; i++)
{
var buttonText = textStrings[i];
if(buttonText.charAt(0) === mxMockupC.SELECTED)
{
buttonText = textStrings[i].substring(1);
selectedButton = i;
}
var currWidth = mxUtils.getSizeForString(buttonText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;
if (currWidth > maxButtonWidth)
{
maxButtonWidth = currWidth;
}
}
var minButtonHeight = fontSize * 1.5;
var minH = buttonNum * minButtonHeight;
var trueH = Math.max(h, minH);
var minW = 2 * labelOffset + maxButtonWidth;
var trueW = Math.max(w, minW);
c.translate(x, y);
this.background(c, trueW, trueH, rSize, buttonNum, labelOffset, buttonNum * minButtonHeight, frameColor, separatorColor, bgColor, selectedButton, minButtonHeight);
c.setShadow(false);
this.foreground(c, trueW, trueH, rSize, buttonNum, labelOffset, buttonNum * minButtonHeight, frameColor, separatorColor, bgColor, selectedButton, minButtonHeight);
var currWidth = 0;
for (var i = 0; i < buttonNum; i++)
{
if (i === selectedButton)
{
c.setFontColor(selectedFontColor);
}
else
{
c.setFontColor(fontColor);
}
currWidth = currWidth + labelOffset;
var currHeight = (i * minButtonHeight + minButtonHeight * 0.5) * trueH / minH;
this.buttonText(c, trueW, currHeight, textStrings[i], fontSize, separatorColor);
}
};
mxShapeMockupiButtonBar.prototype.background = function(c, w, h, rSize, buttonNum, labelOffset, minH, frameColor, separatorColor, bgColor, selectedButton, minButtonHeight)
{
c.begin();
c.setStrokeWidth(1);
//draw the frame
c.setStrokeColor(frameColor);
c.setFillColor(bgColor);
c.moveTo(0, rSize);
c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);
c.lineTo(w - rSize, 0);
c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);
c.lineTo(w, h - rSize);
c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);
c.lineTo(rSize, h);
c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);
c.close();
c.fillAndStroke();
};
mxShapeMockupiButtonBar.prototype.foreground = function(c, w, h, rSize, buttonNum, labelOffset, minH, frameColor, separatorColor, bgColor, selectedButton, minButtonHeight)
{
//draw the button separators
var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1');
c.setStrokeWidth(strokeWidth);
c.setStrokeColor(separatorColor);
c.begin();
for (var i = 1; i < buttonNum; i++)
{
if (i !== selectedButton && i !== (selectedButton + 1))
{
var currHeight = i * minButtonHeight * h / minH;
c.moveTo(0, currHeight);
c.lineTo(w, currHeight);
}
}
c.stroke();
//draw the selected button
c.setStrokeColor(mxConstants.NONE);
if (selectedButton === 0)
{
// we draw a path for the first button
c.begin();
var buttonBottom = minButtonHeight * h / minH;
c.setGradient('#5D7585', '#008cff', 0, 0, w, buttonBottom, mxConstants.DIRECTION_SOUTH, 1, 1);
c.moveTo(0, rSize);
c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);
c.lineTo(w - rSize, 0);
c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);
c.lineTo(w, buttonBottom);
c.lineTo(0, buttonBottom);
c.close();
c.fill();
}
else if (selectedButton === buttonNum - 1)
{
// we draw a path for the last button
c.begin();
var buttonTop = h - minButtonHeight * h / minH;
c.setGradient('#5D7585', '#008cff', 0, buttonTop, w, h - buttonTop, mxConstants.DIRECTION_SOUTH, 1, 1);
c.moveTo(0, buttonTop);
c.lineTo(w, buttonTop);
c.lineTo(w, h - rSize);
c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);
c.lineTo(rSize, h);
c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);
c.close();
c.fill();
}
else if (selectedButton !== -1)
{
// we draw a path rectangle for one of the buttons in the middle
c.begin();
var buttonTop = minButtonHeight * selectedButton * h / minH;
var buttonBottom = minButtonHeight * (selectedButton + 1) * h / minH;
c.setGradient('#5D7585', '#008cff', 0, buttonTop, w, buttonBottom - buttonTop, mxConstants.DIRECTION_SOUTH, 1, 1);
c.moveTo(0, buttonTop);
c.lineTo(w, buttonTop);
c.lineTo(w, buttonBottom);
c.lineTo(0, buttonBottom);
c.close();
c.fill();
}
// //draw the frame again, to achieve a nicer effect
c.begin();
c.setStrokeColor(frameColor);
c.setFillColor(bgColor);
c.moveTo(0, rSize);
c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);
c.lineTo(w - rSize, 0);
c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);
c.lineTo(w, h - rSize);
c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);
c.lineTo(rSize, h);
c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);
c.close();
c.stroke();
};
mxShapeMockupiButtonBar.prototype.buttonText = function(c, w, h, textString, fontSize, separatorColor)
{
if(textString.charAt(0) === mxMockupC.SELECTED)
{
textString = textString.substring(1);
}
c.setFontSize(fontSize);
c.text(10, h, 0, 0, textString, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
var mSize = fontSize * 0.5;
c.setStrokeWidth(fontSize * 0.3);
c.setStrokeColor(separatorColor);
c.begin();
c.moveTo(w - 20 - mSize, h - mSize);
c.lineTo(w - 20, h);
c.lineTo(w - 20 - mSize, h + mSize);
c.stroke();
};
mxCellRenderer.registerShape(mxMockupC.SHAPE_IBUTTON_BAR, mxShapeMockupiButtonBar);
//**********************************************************************************************************************************************************
//iPhone Application Bar
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupiAppBar(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupiAppBar, mxShape);
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeMockupiAppBar.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
this.background(c, x, y, w, h);
c.setShadow(false);
this.foreground(c, x, y, w, h);
};
mxShapeMockupiAppBar.prototype.background = function(c, x, y, w, h)
{
c.setGradient('#eeeeee', '#999999', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);
c.rect(0, 0, w, h);
c.fill();
};
mxShapeMockupiAppBar.prototype.foreground = function(c, x, y, w, h)
{
c.setFillColor('#0099ff');
c.rect(5, h * 0.5 + 1.75, 1.5, 2.5);
c.fill();
c.rect(7, h * 0.5 + 0.75, 1.5, 3.5);
c.fill();
c.rect(9, h * 0.5 - 0.25, 1.5, 4.5);
c.fill();
c.rect(11, h * 0.5 - 1.25, 1.5, 5.5);
c.fill();
c.rect(13, h * 0.5 - 2.25, 1.5, 6.5);
c.fill();
c.rect(15, h * 0.5 - 3.25, 1.5, 7.5);
c.fill();
c.setFillColor('#999999');
c.ellipse(w - 56.5, h * 0.5 - 4, 8, 8);
c.fill();
c.setStrokeColor('#cccccc');
c.begin();
c.moveTo(w - 52.5, h * 0.5 - 3);
c.lineTo(w - 52.5, h * 0.5);
c.lineTo(w - 54.5, h * 0.5);
c.stroke();
c.setStrokeWidth(0.5);
c.setStrokeColor('#333333');
c.setFillColor('#990000');
c.begin();
c.moveTo(w - 45.5, h * 0.5);
c.lineTo(w - 37.5, h * 0.5 - 5);
c.lineTo(w - 41.5, h * 0.5 + 4);
c.lineTo(w - 42, h * 0.5 + 0.5);
c.close();
c.fillAndStroke();
c.setFillColor('#999999');
c.setStrokeColor('#999999');
c.begin();
c.moveTo(w - 28.5, h * 0.5 + 3.5);
c.arcTo(3.5, 3.5, 0, 1, 1, w - 26.5, h * 0.5 + 1);
c.stroke();
c.begin();
c.moveTo(w - 27.25, h * 0.5 + 0.25);
c.lineTo(w - 25.75, h * 0.5 + 0.25);
c.lineTo(w - 26.5, h * 0.5 + 1.5);
c.close();
c.fillAndStroke();
c.begin();
c.moveTo(w - 31, h * 0.5 - 0.5);
c.arcTo(1, 1.5, 0, 0, 1, w - 29, h * 0.5 - 0.5);
c.stroke();
c.rect(w - 31.5, h * 0.5 - 0.5, 3, 2);
c.fillAndStroke();
c.setGradient('#eeeeee', '#444444', w - 20, h * 0.5 - 3, 16.5, 6, mxConstants.DIRECTION_NORTH, 1, 1);
c.begin();
c.moveTo(w - 20, h * 0.5 - 3);
c.lineTo(w - 5, h * 0.5 - 3);
c.lineTo(w - 5, h * 0.5 - 1);
c.lineTo(w - 3.5, h * 0.5 - 1);
c.lineTo(w - 3.5, h * 0.5 + 1);
c.lineTo(w - 5, h * 0.5 + 1);
c.lineTo(w - 5, h * 0.5 + 3);
c.lineTo(w - 20, h * 0.5 + 3);
c.close();
c.fill();
c.setGradient('#E2FFEB', '#008215', w - 20, h * 0.5 - 3, 10, 6, mxConstants.DIRECTION_SOUTH, 1, 1);
c.begin();
c.moveTo(w - 20, h * 0.5 - 3);
c.lineTo(w - 10, h * 0.5 - 3);
c.lineTo(w - 10, h * 0.5 + 3);
c.lineTo(w - 20, h * 0.5 + 3);
c.close();
c.fill();
c.setStrokeColor('#666666');
c.begin();
c.moveTo(w - 20, h * 0.5 - 3);
c.lineTo(w - 5, h * 0.5 - 3);
c.lineTo(w - 5, h * 0.5 - 1);
c.lineTo(w - 3.5, h * 0.5 - 1);
c.lineTo(w - 3.5, h * 0.5 + 1);
c.lineTo(w - 5, h * 0.5 + 1);
c.lineTo(w - 5, h * 0.5 + 3);
c.lineTo(w - 20, h * 0.5 + 3);
c.close();
c.stroke();
};
mxCellRenderer.registerShape(mxMockupC.SHAPE_IAPP_BAR, mxShapeMockupiAppBar);
//**********************************************************************************************************************************************************
//iPhone Top Bar (LEGACY)
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupiTopBar(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupiTopBar, mxShape);
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeMockupiTopBar.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
this.background(c, x, y, w, h);
c.setShadow(false);
this.foreground(c, x, y, w, h);
};
mxShapeMockupiTopBar.prototype.background = function(c, x, y, w, h)
{
c.setAlpha(0.5);
c.setFillColor('#999999');
c.rect(0, 0, w, h);
c.fill();
};
mxShapeMockupiTopBar.prototype.foreground = function(c, x, y, w, h)
{
c.setFillColor('#cccccc');
c.setStrokeColor('#cccccc');
c.setFontColor('#cccccc');
c.setFontSize(7.5);
c.rect(5, h * 0.5 + 1.75, 1.5, 2.5);
c.fill();
c.rect(7, h * 0.5 + 0.75, 1.5, 3.5);
c.fill();
c.rect(9, h * 0.5 - 0.25, 1.5, 4.5);
c.fill();
c.rect(11, h * 0.5 - 1.25, 1.5, 5.5);
c.fill();
c.rect(13, h * 0.5 - 2.25, 1.5, 6.5);
c.fill();
c.rect(15, h * 0.5 - 3.25, 1.5, 7.5);
c.fill();
c.text(18, h * 0.5, 0, 0, 'CARRIER', mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
c.text(w * 0.5, h * 0.5, 0, 0, '11:15AM', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
c.begin();
c.moveTo(w - 19, h * 0.5 - 2);
c.lineTo(w - 10, h * 0.5 - 2);
c.lineTo(w - 10, h * 0.5 + 2);
c.lineTo(w - 19, h * 0.5 + 2);
c.close();
c.fill();
c.begin();
c.moveTo(w - 20, h * 0.5 - 3);
c.lineTo(w - 5, h * 0.5 - 3);
c.lineTo(w - 5, h * 0.5 - 1);
c.lineTo(w - 3.5, h * 0.5 - 1);
c.lineTo(w - 3.5, h * 0.5 + 1);
c.lineTo(w - 5, h * 0.5 + 1);
c.lineTo(w - 5, h * 0.5 + 3);
c.lineTo(w - 20, h * 0.5 + 3);
c.close();
c.stroke();
};
mxCellRenderer.registerShape(mxMockupC.SHAPE_ITOP_BAR, mxShapeMockupiTopBar);
//**********************************************************************************************************************************************************
//iPhone Top Bar 2
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupiTopBar2(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupiTopBar2, mxShape);
mxShapeMockupiTopBar2.prototype.cst = {
SHAPE_ITOP_BAR2 : 'mxgraph.ios.iTopBar2'
};
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeMockupiTopBar2.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
this.background(c, x, y, w, h);
c.setShadow(false);
this.foreground(c, x, y, w, h);
};
mxShapeMockupiTopBar2.prototype.background = function(c, x, y, w, h)
{
c.rect(0, 0, w, h);
c.fill();
};
mxShapeMockupiTopBar2.prototype.foreground = function(c, x, y, w, h)
{
var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');
c.setFillColor(strokeColor);
c.setStrokeColor(strokeColor);
c.rect(5, h * 0.5 + 1.75, 1.5, 2.5);
c.fill();
c.rect(7, h * 0.5 + 0.75, 1.5, 3.5);
c.fill();
c.rect(9, h * 0.5 - 0.25, 1.5, 4.5);
c.fill();
c.rect(11, h * 0.5 - 1.25, 1.5, 5.5);
c.fill();
c.rect(13, h * 0.5 - 2.25, 1.5, 6.5);
c.fill();
c.rect(15, h * 0.5 - 3.25, 1.5, 7.5);
c.fill();
c.begin();
c.moveTo(w - 19, h * 0.5 - 2);
c.lineTo(w - 10, h * 0.5 - 2);
c.lineTo(w - 10, h * 0.5 + 2);
c.lineTo(w - 19, h * 0.5 + 2);
c.close();
c.fill();
c.begin();
c.moveTo(w - 20, h * 0.5 - 3);
c.lineTo(w - 5, h * 0.5 - 3);
c.lineTo(w - 5, h * 0.5 - 1);
c.lineTo(w - 3.5, h * 0.5 - 1);
c.lineTo(w - 3.5, h * 0.5 + 1);
c.lineTo(w - 5, h * 0.5 + 1);
c.lineTo(w - 5, h * 0.5 + 3);
c.lineTo(w - 20, h * 0.5 + 3);
c.close();
c.stroke();
};
mxCellRenderer.registerShape(mxShapeMockupiTopBar2.prototype.cst.SHAPE_ITOP_BAR2, mxShapeMockupiTopBar2);
//**********************************************************************************************************************************************************
//iPhone Top Bar Locked
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupiTopBarLocked(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupiTopBarLocked, mxShape);
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeMockupiTopBarLocked.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
this.background(c, x, y, w, h);
c.setShadow(false);
this.foreground(c, x, y, w, h);
};
mxShapeMockupiTopBarLocked.prototype.background = function(c, x, y, w, h)
{
c.setFillColor('#000000');
c.rect(0, 0, w, h);
c.fill();
};
mxShapeMockupiTopBarLocked.prototype.foreground = function(c, x, y, w, h)
{
c.setFillColor('#cccccc');
c.setStrokeColor('#cccccc');
c.rect(5, h * 0.5 + 1.75, 1.5, 2.5);
c.fill();
c.rect(7, h * 0.5 + 0.75, 1.5, 3.5);
c.fill();
c.rect(9, h * 0.5 - 0.25, 1.5, 4.5);
c.fill();
c.rect(11, h * 0.5 - 1.25, 1.5, 5.5);
c.fill();
c.rect(13, h * 0.5 - 2.25, 1.5, 6.5);
c.fill();
c.rect(15, h * 0.5 - 3.25, 1.5, 7.5);
c.fill();
c.begin();
c.moveTo(w * 0.5 - 2, h * 0.5 - 1);
c.arcTo(2, 3, 0, 0, 1, w * 0.5 + 2, h * 0.5 - 1);
c.stroke();
c.rect(w * 0.5 - 3, h * 0.5 - 1, 6, 4);
c.fillAndStroke();
c.begin();
c.moveTo(w - 19, h * 0.5 - 2);
c.lineTo(w - 10, h * 0.5 - 2);
c.lineTo(w - 10, h * 0.5 + 2);
c.lineTo(w - 19, h * 0.5 + 2);
c.close();
c.fill();
c.begin();
c.moveTo(w - 20, h * 0.5 - 3);
c.lineTo(w - 5, h * 0.5 - 3);
c.lineTo(w - 5, h * 0.5 - 1);
c.lineTo(w - 3.5, h * 0.5 - 1);
c.lineTo(w - 3.5, h * 0.5 + 1);
c.lineTo(w - 5, h * 0.5 + 1);
c.lineTo(w - 5, h * 0.5 + 3);
c.lineTo(w - 20, h * 0.5 + 3);
c.close();
c.stroke();
};
mxCellRenderer.registerShape(mxMockupC.SHAPE_ITOP_BAR_LOCKED, mxShapeMockupiTopBarLocked);
//**********************************************************************************************************************************************************
//Button
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupiButton(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupiButton, mxShape);
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeMockupiButton.prototype.paintVertexShape = function(c, x, y, w, h)
{
var mainText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Main Text');
var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#666666').toString();
var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8.5').toString();
c.translate(x, y);
this.background(c, x, y, w, h);
c.setShadow(false);
this.mainText(c, x, y, w, h, mainText, fontSize, fontColor);
};
mxShapeMockupiButton.prototype.background = function(c, x, y, w, h)
{
var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString();
var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString();
c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1);
c.roundrect(0, 0, w, h, 2.5, 2.5);
c.fill();
};
mxShapeMockupiButton.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor)
{
c.begin();
c.setFontSize(fontSize);
c.setFontColor(fontColor);
c.text(w / 2, h / 2, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
};
mxCellRenderer.registerShape(mxMockupC.SHAPE_IBUTTON, mxShapeMockupiButton);
//**********************************************************************************************************************************************************
//Button Back
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeMockupiButtonBack(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeMockupiButtonBack, mxShape);
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeMockupiButtonBack.prototype.paintVertexShape = function(c, x, y, w, h)
{
var mainText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Main Text');
var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#666666').toString();
var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17').toString();
c.translate(x, y);
this.background(c, x, y, w, h);
c.setShadow(false);