1/** 2 * $Id: mxMockupiOS.js,v 1.5 2013/11/12 06:25:46 mate Exp $ 3 * Copyright (c) 2006-2010, JGraph Ltd 4 */ 5 6var mxMockupC = 7{ 8 BAR_HEIGHT : 'barHeight', 9 BAR_POS : 'barPos', 10 BG_STYLE : 'bgStyle', 11 BG_FLAT_GREEN : 'bgGreen', 12 BG_FLAT_WHITE : 'bgWhite', 13 BG_FLAT_GRAY : 'bgGray', 14 BG_FLAT_CUSTOM : 'bgFlat', 15 BG_MAP : 'bgMap', 16 BG_STRIPED : 'bgStriped', 17 BUTTON_STYLE : 'buttonStyle', 18 BUTTON_TEXT : 'buttonText', 19 BUTTON_STATE : 'buttonState', 20 CHEVRON : 'chevron', 21 GRID_SIZE : 'gridSize', 22 POINTER_BOTTOM : 'bottom', 23 POINTER_POS : 'pointerPos', 24 POINTER_TOP : 'top', 25 ROUND : 'round', 26 SELECTED : '+', //has to be one character long 27 STATE_ON : 'on', 28 STATE_OFF : 'off', 29 SUB_TEXT : 'subText', 30 31 SHAPE_IADD_ICON : 'mxgraph.ios.iAddIcon', 32 SHAPE_IALERT_BOX : 'mxgraph.ios.iAlertBox', 33 SHAPE_IALPHA_LIST : 'mxgraph.ios.iAlphaList', 34 SHAPE_IAPP_BAR : 'mxgraph.ios.iAppBar', 35 SHAPE_IARROW_ICON : 'mxgraph.ios.iArrowIcon', 36 SHAPE_IBG_FLAT : 'mxgraph.ios.iBgFlat', 37 SHAPE_IBG_MAP : 'mxgraph.ios.iBgMap', 38 SHAPE_IBG_STRIPED : 'mxgraph.ios.iBgStriped', 39 SHAPE_IBUTTON : 'mxgraph.ios.iButton', 40 SHAPE_IBUTTON_BACK : 'mxgraph.ios.iButtonBack', 41 SHAPE_IBUTTON_FORWARD : 'mxgraph.ios.iButtonFw', 42 SHAPE_IBUTTON_BAR : 'mxgraph.ios.iButtonBar', 43 SHAPE_ICALL_BUTTONS : 'mxgraph.ios.iCallButtons', 44 SHAPE_ICALL_DIALOG : 'mxgraph.ios.iCallDialog', 45 SHAPE_ICHECKBOX_GROUP : 'mxgraph.ios.iCheckboxGroup', 46 SHAPE_ICHECK_ICON : 'mxgraph.ios.iCheckIcon', 47 SHAPE_ICLOUD_PROGRESS_BAR : 'mxgraph.ios.iCloudProgressBar', 48 SHAPE_ICOMBO_BOX : 'mxgraph.ios.iComboBox', 49 SHAPE_ICOPY : 'mxgraph.ios.iCopy', 50 SHAPE_ICOPY_AREA : 'mxgraph.ios.iCopyArea', 51 SHAPE_IICON_GRID : 'mxgraph.ios.iIconGrid', 52 SHAPE_IDELETE_APP : 'mxgraph.ios.iDeleteApp', 53 SHAPE_IDELETE_ICON : 'mxgraph.ios.iDeleteIcon', 54 SHAPE_IDOWNLOAD_BAR : 'mxgraph.ios.iDownloadBar', 55 SHAPE_IDIALOG_BOX : 'mxgraph.ios.iDialogBox', 56 SHAPE_IDIRECTION : 'mxgraph.ios.iDir', 57 SHAPE_IHOME_PAGE_CONTROL : 'mxgraph.ios.iHomePageControl', 58 SHAPE_IKEYB_LETTERS : 'mxgraph.ios.iKeybLett', 59 SHAPE_IKEYB_NUMBERS : 'mxgraph.ios.iKeybNumb', 60 SHAPE_IKEYB_SYMBOLS : 'mxgraph.ios.iKeybSymb', 61 SHAPE_ILOCATION_BAR : 'mxgraph.ios.iLocBar', 62 SHAPE_ILOCK_BUTTON : 'mxgraph.ios.iLockButton', 63 SHAPE_IHOR_BUTTON_BAR : 'mxgraph.ios.iHorButtonBar', 64 SHAPE_IINFO_ICON : 'mxgraph.ios.iInfoIcon', 65 SHAPE_ION_OFF_BUTTON : 'mxgraph.ios.iOnOffButton', 66 SHAPE_IOPTION : 'mxgraph.ios.iOption', 67 SHAPE_IPAGE_CONTROL : 'mxgraph.ios.iPageControl', 68 SHAPE_IPAD : 'mxgraph.ios.iPad', 69 SHAPE_IPHONE : 'mxgraph.ios.iPhone', 70 SHAPE_IPIN : 'mxgraph.ios.iPin', 71 SHAPE_IPREV_NEXT : 'mxgraph.ios.iPrevNext', 72 SHAPE_IPROGRESS_BAR : 'mxgraph.ios.iProgressBar', 73 SHAPE_IRADIO_GROUP : 'mxgraph.ios.iRadioGroup', 74 SHAPE_ISLIDER : 'mxgraph.ios.iSlider', 75 SHAPE_ISORT_FIND_ICON : 'mxgraph.ios.iSortFindIcon', 76 SHAPE_ITEXT_INPUT : 'mxgraph.ios.iTextInput', 77 SHAPE_ITOP_BAR : 'mxgraph.ios.iTopBar', 78 SHAPE_ITOP_BAR_LOCKED : 'mxgraph.ios.iTopBarLocked', 79 SHAPE_IURL_BAR : 'mxgraph.ios.iURLBar', 80 SHAPE_IVIDEO_CONTROLS : 'mxgraph.ios.iVideoControls', 81 SHAPE_ISCREEN_NAME_BAR: 'mxgraph.ios.iScreenNameBar', 82 83 STYLE_FILLCOLOR2 : 'fillColor2', 84 STYLE_FILLCOLOR3 : 'fillColor3', 85 STYLE_TEXTCOLOR : 'textColor', 86 STYLE_TEXTCOLOR2 : 'textColor2', 87 STYLE_STROKECOLOR2 : 'strokeColor2', 88 STYLE_STROKECOLOR3 : 'strokeColor3' 89}; 90 91//********************************************************************************************************************************************************** 92//iPhone Vertical 93//********************************************************************************************************************************************************** 94/** 95 * Extends mxShape. 96 */ 97function mxShapeMockupiPhone(bounds, fill, stroke, strokewidth) 98{ 99 mxShape.call(this); 100 this.bounds = bounds; 101 this.fill = fill; 102 this.stroke = stroke; 103 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 104}; 105 106/** 107 * Extends mxShape. 108 */ 109mxUtils.extend(mxShapeMockupiPhone, mxShape); 110 111mxShapeMockupiPhone.prototype.customProperties = [ 112 {name: 'bgStyle', dispName: 'Background', type: 'enum', 113 enumList: [{val: 'bgGreen', dispName: 'Green'}, 114 {val: 'bgWhite', dispName: 'White'}, 115 {val: 'bgGray', dispName: 'Gray'}, 116 {val: 'bgFlat', dispName: 'Flat'}, 117 {val: 'bgMap', dispName: 'Map'}, 118 {val: 'bgStriped', dispName: 'Striped'}]} 119]; 120 121/** 122 * Function: paintVertexShape 123 * 124 * Paints the vertex shape. 125 */ 126mxShapeMockupiPhone.prototype.paintVertexShape = function(c, x, y, w, h) 127{ 128 c.translate(x, y); 129 var rSize = 25; 130 this.background(c, x, y, w, h, rSize); 131 c.setShadow(false); 132 this.foreground(c, x, y, w, h, rSize); 133}; 134 135mxShapeMockupiPhone.prototype.background = function(c, x, y, w, h, rSize) 136{ 137 c.setFillColor('#000000'); 138 c.setStrokeColor('#000000'); 139 c.roundrect(0, 0, w, h, rSize, rSize); 140 c.fillAndStroke(); 141}; 142 143mxShapeMockupiPhone.prototype.foreground = function(c, x, y, w, h, rSize) 144{ 145 c.setStrokeWidth(1.5); 146 147 c.begin(); 148 c.setGradient('#808080', '#000000', w * 0.325, 0, w * 0.675, h * 0.5, mxConstants.DIRECTION_SOUTH, 1, 1); 149 c.moveTo(w * 0.325, 0); 150 c.lineTo(w - rSize, 0); 151 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 152 c.lineTo(w, h * 0.5); 153 c.lineTo(w * 0.7, h * 0.5); 154 c.close(); 155 c.fill(); 156 157 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, ''); 158 var bgStyle = mxUtils.getValue(this.style, mxMockupC.BG_STYLE, mxMockupC.BG_FLAT_GREEN); 159 160 c.setStrokeWidth(1); 161 if (bgStyle === mxMockupC.BG_FLAT_WHITE) 162 { 163 c.setFillColor('#ffffff'); 164 c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7); 165 c.fill(); 166 } 167 else if (bgStyle === mxMockupC.BG_FLAT_GREEN) 168 { 169 c.setFillColor('#1f2923'); 170 c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7); 171 c.fill(); 172 } 173 else if (bgStyle === mxMockupC.BG_FLAT_GRAY) 174 { 175 c.setFillColor('#dddddd'); 176 c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7); 177 c.fill(); 178 } 179 else if (bgStyle === mxMockupC.BG_FLAT_CUSTOM) 180 { 181 c.setFillColor(fillColor); 182 c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7); 183 c.fill(); 184 } 185 else if (bgStyle === mxMockupC.BG_STRIPED) 186 { 187 var xOld = x; 188 var yOld = y; 189 var wOld = w; 190 var hOld = h; 191 c.translate(w * 0.0625, h * 0.15); 192 w = w * 0.875; 193 h = h * 0.7; 194 195 c.setFillColor('#5D7585'); 196 c.rect(0, 0, w, h); 197 c.fillAndStroke(); 198 199 var strokeColor = '#18211b'; 200 var strokeColor2 = '#657E8F'; 201 202 c.setStrokeColor(strokeColor2); 203 var i = 5; 204 c.begin(); 205 206 while (i < w) 207 { 208 c.moveTo(i, 0); 209 c.lineTo(i, h); 210 i = i + 5; 211 } 212 213 c.stroke(); 214 215 c.setStrokeColor(strokeColor); 216 c.begin(); 217 c.rect(0, 0, w, h); 218 c.stroke(); 219 220 w = wOld; 221 h = hOld; 222 c.translate( - w * 0.0625, - h * 0.15); 223 } 224 else if (bgStyle === mxMockupC.BG_MAP) 225 { 226 var xOld = x; 227 var yOld = y; 228 var wOld = w; 229 var hOld = h; 230 c.translate(w * 0.0625, h * 0.15); 231 w = w * 0.875; 232 h = h * 0.7; 233 234 c.setFillColor('#ffffff'); 235 c.rect(0, 0, w, h); 236 c.fillAndStroke(); 237 238 var fillColor2 = '#96D1FF'; 239 var strokeColor = '#18211b'; 240 var strokeColor2 = '#008cff'; 241 242 c.setFillColor(fillColor2); 243 c.setStrokeColor(strokeColor2); 244 c.setStrokeWidth(1); 245 246 c.begin(); 247 c.moveTo(0, 0); 248 c.lineTo(w * 0.1171, 0); 249 c.lineTo(w * 0.1136, h * 0.0438); 250 c.lineTo(w * 0.0993, h * 0.054); 251 c.lineTo(0, h * 0.0446); 252 c.close(); 253 c.fillAndStroke(); 254 255 c.begin(); 256 c.moveTo(w * 0.1993, 0); 257 c.lineTo(w * 0.1914, h * 0.03884); 258 c.lineTo(w * 0.1536, h * 0.0362); 259 c.lineTo(w * 0.1586, 0); 260 c.close(); 261 c.fillAndStroke(); 262 263 c.begin(); 264 c.moveTo(w * 0.24, 0); 265 c.lineTo(w * 0.2257, h * 0.054); 266 c.lineTo(w * 0.2414, h * 0.0674); 267 c.lineTo(w * 0.4707, h * 0.0835); 268 c.lineTo(w * 0.5264, h * 0.0906); 269 c.lineTo(w * 0.6429, h * 0.0929); 270 c.arcTo(w * 0.0857, h * 0.0536, 0, 0, 0, w * 0.7193, h * 0.0621); 271 c.arcTo(w * 0.48, h * 0.2143, 0, 0, 0, w * 0.7286, 0); 272 c.close(); 273 c.fillAndStroke(); 274 275 c.begin(); 276 c.moveTo(w * 0.8, 0); 277 c.lineTo(w * 0.7886, h * 0.04554); 278 c.arcTo(w * 0.0857, h * 0.0536, 0, 0, 0, w * 0.8164, h * 0.0875); 279 c.arcTo(w * 0.1429, h * 0.0893, 0, 0, 0, w * 0.88, h * 0.1036); 280 c.lineTo(w, h * 0.1112); 281 c.lineTo(w, 0); 282 c.close(); 283 c.fillAndStroke(); 284 285 c.begin(); 286 c.moveTo(0, h * 0.0933); 287 c.lineTo(w * 0.08, h * 0.1036); 288 c.lineTo(w * 0.1021, h * 0.1246); 289 c.lineTo(w * 0.1007, h * 0.1768); 290 c.lineTo(w * 0.0471, h * 0.2241); 291 c.lineTo(0, h * 0.2527); 292 c.close(); 293 c.fillAndStroke(); 294 295 c.ellipse(w * 0.1214, h * 0.0603, w * 0.0843, h * 0.0576); 296 c.fillAndStroke(); 297 298 c.begin(); 299 c.moveTo(w * 0.1293, h * 0.1924); 300 c.lineTo(w * 0.1729, h * 0.142); 301 c.lineTo(w * 0.1407, h * 0.1411); 302 c.lineTo(w * 0.14, h * 0.1777); 303 c.close(); 304 c.fillAndStroke(); 305 306 c.begin(); 307 c.moveTo(w * 0.4586, h * 0.1241); 308 c.lineTo(w * 0.455, h * 0.1835); 309 c.lineTo(w * 0.3893, h * 0.2246); 310 c.lineTo(w * 0.2171, h * 0.1362); 311 c.lineTo(w * 0.2171, h * 0.1308); 312 c.lineTo(w * 0.2293, h * 0.1214); 313 c.lineTo(w * 0.2857, h * 0.1174); 314 c.close(); 315 c.fillAndStroke(); 316 317 c.begin(); 318 c.moveTo(w * 0.5079, h * 0.1134); 319 c.lineTo(w * 0.7307, h * 0.1223); 320 c.lineTo(w * 0.7279, h * 0.1625); 321 c.lineTo(w * 0.715, h * 0.1772); 322 c.lineTo(w * 0.6929, h * 0.1688); 323 c.lineTo(w * 0.625, h * 0.1795); 324 c.lineTo(w * 0.4779, h * 0.2835); 325 c.lineTo(w * 0.395, h * 0.2299); 326 c.lineTo(w * 0.4657, h * 0.1826); 327 c.lineTo(w * 0.4707, h * 0.1223); 328 c.close(); 329 c.fillAndStroke(); 330 331 c.begin(); 332 c.moveTo(w, h * 0.1362); 333 c.lineTo(w * 0.7643, h * 0.1237); 334 c.lineTo(w * 0.7543, h * 0.1562); 335 c.lineTo(w * 0.7643, h * 0.1585); 336 c.lineTo(w * 0.9186, h * 0.2366); 337 c.lineTo(w, h * 0.1732); 338 c.close(); 339 c.fillAndStroke(); 340 341 c.begin(); 342 c.moveTo(w * 0.2079, h * 0.1545); 343 c.lineTo(w * 0.3886, h * 0.2536); 344 c.lineTo(w * 0.3414, h * 0.2933); 345 c.lineTo(w * 0.1743, h * 0.1969); 346 c.close(); 347 c.fillAndStroke(); 348 349 c.begin(); 350 c.moveTo(w * 0.1579, h * 0.2134); 351 c.lineTo(w * 0.3221, h * 0.3067); 352 c.lineTo(w * 0.2957, h * 0.3237); 353 c.lineTo(w * 0.1157, h * 0.2424); 354 c.close(); 355 c.fillAndStroke(); 356 357 c.begin(); 358 c.moveTo(w * 0.405, h * 0.2656); 359 c.lineTo(w * 0.31, h * 0.3353); 360 c.lineTo(w * 0.3693, h * 0.3661); 361 c.lineTo(w * 0.4571, h * 0.2982); 362 c.close(); 363 c.fillAndStroke(); 364 365 c.begin(); 366 c.moveTo(w * 0.7121, h * 0.1848); 367 c.lineTo(w * 0.6879, h * 0.1754); 368 c.lineTo(w * 0.6329, h * 0.1844); 369 c.lineTo(w * 0.61, h * 0.2018); 370 c.lineTo(w * 0.6207, h * 0.2085); 371 c.lineTo(w * 0.4986, h * 0.2982); 372 c.lineTo(w * 0.535, h * 0.3237); 373 c.close(); 374 c.fillAndStroke(); 375 376 c.begin(); 377 c.moveTo(w * 0.5557, h * 0.3379); 378 c.lineTo(w * 0.7464, h * 0.1826); 379 c.lineTo(w * 0.8036, h * 0.2076); 380 c.lineTo(w * 0.595, h * 0.3616); 381 c.close(); 382 c.fillAndStroke(); 383 384 c.begin(); 385 c.moveTo(w * 0.8293, h * 0.2188); 386 c.lineTo(w * 0.8979, h * 0.2509); 387 c.lineTo(w * 0.6936, h * 0.4125); 388 c.lineTo(w * 0.6171, h * 0.3737); 389 c.close(); 390 c.fillAndStroke(); 391 392 c.begin(); 393 c.moveTo(w, h * 0.2138); 394 c.lineTo(w * 0.6821, h * 0.4603); 395 c.lineTo(w * 0.815, h * 0.5277); 396 c.lineTo(w, h * 0.4); 397 c.close(); 398 c.fillAndStroke(); 399 400 c.begin(); 401 c.moveTo(0, h * 0.317); 402 c.lineTo(w * 0.0971, h * 0.2554); 403 c.lineTo(w * 0.4121, h * 0.4143); 404 c.lineTo(w * 0.3736, h * 0.4415); 405 c.lineTo(w * 0.315, h * 0.4076); 406 c.lineTo(w * 0.3093, h * 0.4116); 407 c.lineTo(w * 0.3686, h * 0.4455); 408 c.lineTo(w * 0.285, h * 0.5045); 409 c.lineTo(w * 0.1114, h * 0.4134); 410 c.lineTo(w * 0.025, h * 0.4603); 411 c.lineTo(w * 0.0371, h * 0.4723); 412 c.lineTo(w * 0.1114, h * 0.4371); 413 c.lineTo(w * 0.2871, h * 0.5312); 414 c.lineTo(w * 0.1929, h * 0.6058); 415 c.lineTo(w * 0.2271, h * 0.6705); 416 c.lineTo(w * 0.17, h * 0.7147); 417 c.lineTo(w * 0.0314, h * 0.6321); 418 c.lineTo(0, h * 0.6246); 419 c.close(); 420 c.fillAndStroke(); 421 422 c.begin(); 423 c.moveTo(w * 0.48, h * 0.3121); 424 c.lineTo(w * 0.5157, h * 0.3375); 425 c.lineTo(w * 0.4314, h * 0.3982); 426 c.lineTo(w * 0.3929, h * 0.3786); 427 c.close(); 428 c.fillAndStroke(); 429 430 c.begin(); 431 c.moveTo(w * 0.3086, h * 0.5179); 432 c.lineTo(w * 0.53, h * 0.3518); 433 c.lineTo(w * 0.5757, h * 0.3745); 434 c.lineTo(w * 0.3479, h * 0.5411); 435 c.close(); 436 c.fillAndStroke(); 437 438 c.begin(); 439 c.moveTo(w * 0.5964, h * 0.3884); 440 c.lineTo(w * 0.6736, h * 0.4277); 441 c.lineTo(w * 0.445, h * 0.5991); 442 c.lineTo(w * 0.3664, h * 0.5531); 443 c.lineTo(w * 0.5057, h * 0.4545); 444 c.lineTo(w * 0.5507, h * 0.4754); 445 c.lineTo(w * 0.5571, h * 0.4723); 446 c.lineTo(w * 0.5114, h * 0.4504); 447 c.close(); 448 c.fillAndStroke(); 449 450 c.begin(); 451 c.moveTo(w * 0.4793, h * 0.6161); 452 c.lineTo(w * 0.6771, h * 0.4643); 453 c.lineTo(w * 0.8086, h * 0.5326); 454 c.lineTo(w * 0.7471, h * 0.5817); 455 c.lineTo(w * 0.7214, h * 0.567); 456 c.lineTo(w * 0.715, h * 0.571); 457 c.lineTo(w * 0.7421, h * 0.5871); 458 c.lineTo(w * 0.6014, h * 0.6933); 459 c.close(); 460 c.fillAndStroke(); 461 462 c.begin(); 463 c.moveTo(w, h * 0.4371); 464 c.lineTo(w * 0.8443, h * 0.546); 465 c.lineTo(w * 0.9071, h * 0.5701); 466 c.lineTo(w, h * 0.5022); 467 c.close(); 468 c.fillAndStroke(); 469 470 c.begin(); 471 c.moveTo(w * 0.8407, h * 0.5504); 472 c.lineTo(w * 0.8993, h * 0.5759); 473 c.lineTo(w * 0.6757, h * 0.7416); 474 c.lineTo(w * 0.6286, h * 0.7139); 475 c.close(); 476 c.fillAndStroke(); 477 478 c.begin(); 479 c.moveTo(w, h * 0.5321); 480 c.lineTo(w * 0.6979, h * 0.7549); 481 c.lineTo(w * 0.7457, h * 0.7781); 482 c.lineTo(w * 0.9814, h * 0.6094); 483 c.lineTo(w, h * 0.6067); 484 c.close(); 485 c.fillAndStroke(); 486 487 c.begin(); 488 c.moveTo(w, h * 0.6254); 489 c.lineTo(w * 0.7664, h * 0.792); 490 c.lineTo(w * 0.9586, h * 0.9062); 491 c.lineTo(w, h * 0.8786); 492 c.close(); 493 c.fillAndStroke(); 494 495 c.begin(); 496 c.moveTo(w * 0.3093, h * 0.5464); 497 c.lineTo(w * 0.4271, h * 0.6152); 498 c.lineTo(w * 0.245, h * 0.7643); 499 c.lineTo(w * 0.185, h * 0.7228); 500 c.lineTo(w * 0.2493, h * 0.6728); 501 c.lineTo(w * 0.2214, h * 0.6143); 502 c.close(); 503 c.fillAndStroke(); 504 505 c.begin(); 506 c.moveTo(0, h * 0.65); 507 c.lineTo(w * 0.2179, h * 0.7826); 508 c.lineTo(w * 0.1136, h * 0.8424); 509 c.close(); 510 c.fillAndStroke(); 511 512 c.begin(); 513 c.moveTo(0, h * 0.7272); 514 c.lineTo(w * 0.0821, h * 0.859); 515 c.lineTo(0, h * 0.9085); 516 c.close(); 517 c.fillAndStroke(); 518 519 c.begin(); 520 c.moveTo(w * 0.4529, h * 0.6366); 521 c.lineTo(w * 0.575, h * 0.7143); 522 c.lineTo(w * 0.39, h * 0.8621); 523 c.lineTo(w * 0.2657, h * 0.7902); 524 c.close(); 525 c.fillAndStroke(); 526 527 c.begin(); 528 c.moveTo(0, h * 0.9415); 529 c.lineTo(w * 0.1036, h * 0.8821); 530 c.lineTo(w * 0.2343, h * 0.959); 531 c.lineTo(w * 0.1721, h); 532 c.lineTo(0, h); 533 c.close(); 534 c.fillAndStroke(); 535 536 c.begin(); 537 c.moveTo(w * 0.2586, h * 0.7951); 538 c.lineTo(w * 0.3829, h * 0.8674); 539 c.lineTo(w * 0.2543, h * 0.9451); 540 c.lineTo(w * 0.1279, h * 0.8692); 541 c.close(); 542 c.fillAndStroke(); 543 544 c.begin(); 545 c.moveTo(w * 0.2836, h * 0.9639); 546 c.lineTo(w * 0.4207, h * 0.8772); 547 c.lineTo(w * 0.605, h * 0.7321); 548 c.lineTo(w * 0.6521, h * 0.7634); 549 c.lineTo(w * 0.3486, h); 550 c.lineTo(w * 0.3393, h); 551 c.close(); 552 c.fillAndStroke(); 553 554 c.begin(); 555 c.moveTo(w * 0.3879, h); 556 c.lineTo(w * 0.6721, h * 0.7759); 557 c.lineTo(w * 0.7171, h * 0.7982); 558 c.lineTo(w * 0.4564, h); 559 c.close(); 560 c.fillAndStroke(); 561 562 c.begin(); 563 c.moveTo(w * 0.4986, h); 564 c.lineTo(w * 0.7386, h * 0.8125); 565 c.lineTo(w * 0.9307, h * 0.925); 566 c.lineTo(w * 0.8264, h); 567 c.close(); 568 c.fillAndStroke(); 569 570 c.begin(); 571 c.moveTo(w * 0.8671, h); 572 c.lineTo(w * 0.9464, h * 0.9491); 573 c.lineTo(w, h * 0.975); 574 c.lineTo(w, h); 575 c.close(); 576 c.fillAndStroke(); 577 578 c.begin(); 579 c.moveTo(w * 0.2295, h); 580 c.lineTo(w * 0.2648, h * 0.9792); 581 c.lineTo(w * 0.2981, h); 582 c.close(); 583 c.fillAndStroke(); 584 585 w = wOld; 586 h = hOld; 587 c.translate( - w * 0.0625, - h * 0.15); 588 } 589 590 c.setStrokeWidth(1); 591 c.setStrokeColor('#18211b'); 592 c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7); 593 c.stroke(); 594 595 c.setStrokeWidth(1.5); 596 c.setAlpha(0.8); 597 c.setStrokeColor('#dddddd'); 598 c.roundrect(0, 0, w, h, rSize, rSize); 599 c.stroke(); 600 601 rSize = 22.5; 602 c.begin(); 603 c.setStrokeColor('#666666'); 604 c.roundrect(5, 5, w - 10, h - 10, rSize, rSize); 605 c.stroke(); 606 607 c.setAlpha(1); 608 c.ellipse(w * 0.4875, h * 0.04125, w * 0.025, h * 0.0125); 609 c.setStrokeWidth(2.5); 610 c.setStrokeColor('#000000'); 611 c.setFillColor('#000099'); 612 c.fillAndStroke(); 613 614 c.begin(); 615 c.setStrokeWidth(1.5); 616 c.setFillColor('#444444'); 617 c.setStrokeColor('#333333'); 618 rSize = 4; 619 620 c.roundrect(w * 0.375, h * 0.075, w * 0.25, h * 0.01875, w * 0.02, h * 0.01); 621 c.fillAndStroke(); 622 623 c.setGradient('#bbbbbb', '#000000', w * 0.4, h * 0.875, w * 0.2, h * 0.1, mxConstants.DIRECTION_SOUTH, 1, 1); 624 c.ellipse(w * 0.4, h * 0.875, w * 0.2, h * 0.1); 625 c.fill(); 626 627 c.setAlpha(0.5); 628 c.ellipse(w * 0.404, h * 0.876, w * 0.19, h * 0.095); 629 c.stroke(); 630 631 c.begin(); 632 c.setAlpha(0.85); 633 c.setFillColor('#000000'); 634 c.moveTo(w * 0.4025, h * 0.925); 635 c.arcTo(w * 0.0975, h * 0.04625, 0, 0, 1, w * 0.5975, h * 0.925); 636 c.arcTo(w * 0.2, h * 0.1, 0, 0, 1, w * 0.4025, h * 0.925); 637 c.close(); 638 c.fillAndStroke(); 639 640 c.begin(); 641 c.setAlpha(0.7); 642 c.setStrokeWidth(1.5); 643 c.setStrokeColor('#dddddd'); 644 rSize = 4; 645 c.roundrect(w * 0.4575, h * 0.905, w * 0.0875, h * 0.04375, h * 0.00625, h * 0.00625); 646 c.stroke(); 647}; 648 649mxCellRenderer.registerShape(mxMockupC.SHAPE_IPHONE, mxShapeMockupiPhone); 650 651//********************************************************************************************************************************************************** 652//iPhone flat colored background 653//********************************************************************************************************************************************************** 654/** 655 * Extends mxShape. 656 */ 657function mxShapeMockupiBgFlat(bounds, fill, stroke, strokewidth) 658{ 659 mxShape.call(this); 660 this.bounds = bounds; 661 this.fill = fill; 662 this.stroke = stroke; 663 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 664}; 665 666/** 667 * Extends mxShape. 668 */ 669mxUtils.extend(mxShapeMockupiBgFlat, mxShape); 670 671/** 672 * Function: paintVertexShape 673 * 674 * Paints the vertex shape. 675 */ 676mxShapeMockupiBgFlat.prototype.paintVertexShape = function(c, x, y, w, h) 677{ 678 c.translate(x, y); 679 this.background(c, x, y, w, h); 680}; 681 682mxShapeMockupiBgFlat.prototype.background = function(c, x, y, w, h) 683{ 684 c.begin(); 685 c.rect(0, 0, w, h); 686 c.fillAndStroke(); 687}; 688 689mxCellRenderer.registerShape(mxMockupC.SHAPE_IBG_FLAT, mxShapeMockupiBgFlat); 690 691//********************************************************************************************************************************************************** 692//iPhone striped background 693//********************************************************************************************************************************************************** 694/** 695 * Extends mxShape. 696 */ 697function mxShapeMockupiBgStriped(bounds, fill, stroke, strokewidth) 698{ 699 mxShape.call(this); 700 this.bounds = bounds; 701 this.fill = fill; 702 this.stroke = stroke; 703 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 704}; 705 706/** 707 * Extends mxShape. 708 */ 709mxUtils.extend(mxShapeMockupiBgStriped, mxShape); 710 711/** 712 * Function: paintVertexShape 713 * 714 * Paints the vertex shape. 715 */ 716mxShapeMockupiBgStriped.prototype.paintVertexShape = function(c, x, y, w, h) 717{ 718 c.translate(x, y); 719 this.background(c, x, y, w, h); 720 c.setShadow(false); 721 this.foreground(c, x, y, w, h); 722}; 723 724mxShapeMockupiBgStriped.prototype.background = function(c, x, y, w, h) 725{ 726 c.setStrokeWidth(1); 727 c.begin(); 728 c.rect(0, 0, w, h); 729 c.fillAndStroke(); 730}; 731 732mxShapeMockupiBgStriped.prototype.foreground = function(c, x, y, w, h) 733{ 734 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, ''); 735 var strokeColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_STROKECOLOR2, ''); 736 737 c.setStrokeColor(strokeColor2); 738 var i = 5; 739 c.begin(); 740 741 while (i < w) 742 { 743 c.moveTo(i, 0); 744 c.lineTo(i, h); 745 i = i + 5; 746 } 747 748 c.stroke(); 749 750 c.setStrokeColor(strokeColor); 751 c.begin(); 752 c.rect(0, 0, w, h); 753 c.stroke(); 754}; 755 756mxCellRenderer.registerShape(mxMockupC.SHAPE_IBG_STRIPED, mxShapeMockupiBgStriped); 757 758//********************************************************************************************************************************************************** 759//iPhone map background 760//********************************************************************************************************************************************************** 761/** 762 * Extends mxShape. 763 */ 764function mxShapeMockupiBgMap(bounds, fill, stroke, strokewidth) 765{ 766 mxShape.call(this); 767 this.bounds = bounds; 768 this.fill = fill; 769 this.stroke = stroke; 770 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 771}; 772 773/** 774 * Extends mxShape. 775 */ 776mxUtils.extend(mxShapeMockupiBgMap, mxShape); 777 778/** 779 * Function: paintVertexShape 780 * 781 * Paints the vertex shape. 782 */ 783mxShapeMockupiBgMap.prototype.paintVertexShape = function(c, x, y, w, h) 784{ 785 c.translate(x, y); 786 this.background(c, x, y, w, h); 787 c.setShadow(false); 788 this.foreground(c, x, y, w, h); 789}; 790 791mxShapeMockupiBgMap.prototype.background = function(c, x, y, w, h) 792{ 793 c.begin(); 794 c.rect(0, 0, w, h); 795 c.fillAndStroke(); 796}; 797 798mxShapeMockupiBgMap.prototype.foreground = function(c, x, y, w, h) 799{ 800 var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, ''); 801 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, ''); 802 var strokeColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_STROKECOLOR2, ''); 803 804 c.setFillColor(fillColor2); 805 c.setStrokeColor(strokeColor2); 806 c.setStrokeWidth(0.5); 807 808 c.begin(); 809 c.moveTo(0, 0); 810 c.lineTo(w * 0.1171, 0); 811 c.lineTo(w * 0.1136, h * 0.0438); 812 c.lineTo(w * 0.0993, h * 0.054); 813 c.lineTo(0, h * 0.0446); 814 c.close(); 815 c.fillAndStroke(); 816 817 c.begin(); 818 c.moveTo(w * 0.1993, 0); 819 c.lineTo(w * 0.1914, h * 0.03884); 820 c.lineTo(w * 0.1536, h * 0.0362); 821 c.lineTo(w * 0.1586, 0); 822 c.close(); 823 c.fillAndStroke(); 824 825 c.begin(); 826 c.moveTo(w * 0.24, 0); 827 c.lineTo(w * 0.2257, h * 0.054); 828 c.lineTo(w * 0.2414, h * 0.0674); 829 c.lineTo(w * 0.4707, h * 0.0835); 830 c.lineTo(w * 0.5264, h * 0.0906); 831 c.lineTo(w * 0.6429, h * 0.0929); 832 c.arcTo(w * 0.0857, h * 0.0536, 0, 0, 0, w * 0.7193, h * 0.0621); 833 c.arcTo(w * 0.48, h * 0.2143, 0, 0, 0, w * 0.7286, 0); 834 c.close(); 835 c.fillAndStroke(); 836 837 c.begin(); 838 c.moveTo(w * 0.8, 0); 839 c.lineTo(w * 0.7886, h * 0.04554); 840 c.arcTo(w * 0.0857, h * 0.0536, 0, 0, 0, w * 0.8164, h * 0.0875); 841 c.arcTo(w * 0.1429, h * 0.0893, 0, 0, 0, w * 0.88, h * 0.1036); 842 c.lineTo(w, h * 0.1112); 843 c.lineTo(w, 0); 844 c.close(); 845 c.fillAndStroke(); 846 847 c.begin(); 848 c.moveTo(0, h * 0.0933); 849 c.lineTo(w * 0.08, h * 0.1036); 850 c.lineTo(w * 0.1021, h * 0.1246); 851 c.lineTo(w * 0.1007, h * 0.1768); 852 c.lineTo(w * 0.0471, h * 0.2241); 853 c.lineTo(0, h * 0.2527); 854 c.close(); 855 c.fillAndStroke(); 856 857 c.ellipse(w * 0.1214, h * 0.0603, w * 0.0843, h * 0.0576); 858 c.fillAndStroke(); 859 860 c.begin(); 861 c.moveTo(w * 0.1293, h * 0.1924); 862 c.lineTo(w * 0.1729, h * 0.142); 863 c.lineTo(w * 0.1407, h * 0.1411); 864 c.lineTo(w * 0.14, h * 0.1777); 865 c.close(); 866 c.fillAndStroke(); 867 868 c.begin(); 869 c.moveTo(w * 0.4586, h * 0.1241); 870 c.lineTo(w * 0.455, h * 0.1835); 871 c.lineTo(w * 0.3893, h * 0.2246); 872 c.lineTo(w * 0.2171, h * 0.1362); 873 c.lineTo(w * 0.2171, h * 0.1308); 874 c.lineTo(w * 0.2293, h * 0.1214); 875 c.lineTo(w * 0.2857, h * 0.1174); 876 c.close(); 877 c.fillAndStroke(); 878 879 c.begin(); 880 c.moveTo(w * 0.5079, h * 0.1134); 881 c.lineTo(w * 0.7307, h * 0.1223); 882 c.lineTo(w * 0.7279, h * 0.1625); 883 c.lineTo(w * 0.715, h * 0.1772); 884 c.lineTo(w * 0.6929, h * 0.1688); 885 c.lineTo(w * 0.625, h * 0.1795); 886 c.lineTo(w * 0.4779, h * 0.2835); 887 c.lineTo(w * 0.395, h * 0.2299); 888 c.lineTo(w * 0.4657, h * 0.1826); 889 c.lineTo(w * 0.4707, h * 0.1223); 890 c.close(); 891 c.fillAndStroke(); 892 893 c.begin(); 894 c.moveTo(w, h * 0.1362); 895 c.lineTo(w * 0.7643, h * 0.1237); 896 c.lineTo(w * 0.7543, h * 0.1562); 897 c.lineTo(w * 0.7643, h * 0.1585); 898 c.lineTo(w * 0.9186, h * 0.2366); 899 c.lineTo(w, h * 0.1732); 900 c.close(); 901 c.fillAndStroke(); 902 903 c.begin(); 904 c.moveTo(w * 0.2079, h * 0.1545); 905 c.lineTo(w * 0.3886, h * 0.2536); 906 c.lineTo(w * 0.3414, h * 0.2933); 907 c.lineTo(w * 0.1743, h * 0.1969); 908 c.close(); 909 c.fillAndStroke(); 910 911 c.begin(); 912 c.moveTo(w * 0.1579, h * 0.2134); 913 c.lineTo(w * 0.3221, h * 0.3067); 914 c.lineTo(w * 0.2957, h * 0.3237); 915 c.lineTo(w * 0.1157, h * 0.2424); 916 c.close(); 917 c.fillAndStroke(); 918 919 c.begin(); 920 c.moveTo(w * 0.405, h * 0.2656); 921 c.lineTo(w * 0.31, h * 0.3353); 922 c.lineTo(w * 0.3693, h * 0.3661); 923 c.lineTo(w * 0.4571, h * 0.2982); 924 c.close(); 925 c.fillAndStroke(); 926 927 c.begin(); 928 c.moveTo(w * 0.7121, h * 0.1848); 929 c.lineTo(w * 0.6879, h * 0.1754); 930 c.lineTo(w * 0.6329, h * 0.1844); 931 c.lineTo(w * 0.61, h * 0.2018); 932 c.lineTo(w * 0.6207, h * 0.2085); 933 c.lineTo(w * 0.4986, h * 0.2982); 934 c.lineTo(w * 0.535, h * 0.3237); 935 c.close(); 936 c.fillAndStroke(); 937 938 c.begin(); 939 c.moveTo(w * 0.5557, h * 0.3379); 940 c.lineTo(w * 0.7464, h * 0.1826); 941 c.lineTo(w * 0.8036, h * 0.2076); 942 c.lineTo(w * 0.595, h * 0.3616); 943 c.close(); 944 c.fillAndStroke(); 945 946 c.begin(); 947 c.moveTo(w * 0.8293, h * 0.2188); 948 c.lineTo(w * 0.8979, h * 0.2509); 949 c.lineTo(w * 0.6936, h * 0.4125); 950 c.lineTo(w * 0.6171, h * 0.3737); 951 c.close(); 952 c.fillAndStroke(); 953 954 c.begin(); 955 c.moveTo(w, h * 0.2138); 956 c.lineTo(w * 0.6821, h * 0.4603); 957 c.lineTo(w * 0.815, h * 0.5277); 958 c.lineTo(w, h * 0.4); 959 c.close(); 960 c.fillAndStroke(); 961 962 c.begin(); 963 c.moveTo(0, h * 0.317); 964 c.lineTo(w * 0.0971, h * 0.2554); 965 c.lineTo(w * 0.4121, h * 0.4143); 966 c.lineTo(w * 0.3736, h * 0.4415); 967 c.lineTo(w * 0.315, h * 0.4076); 968 c.lineTo(w * 0.3093, h * 0.4116); 969 c.lineTo(w * 0.3686, h * 0.4455); 970 c.lineTo(w * 0.285, h * 0.5045); 971 c.lineTo(w * 0.1114, h * 0.4134); 972 c.lineTo(w * 0.025, h * 0.4603); 973 c.lineTo(w * 0.0371, h * 0.4723); 974 c.lineTo(w * 0.1114, h * 0.4371); 975 c.lineTo(w * 0.2871, h * 0.5312); 976 c.lineTo(w * 0.1929, h * 0.6058); 977 c.lineTo(w * 0.2271, h * 0.6705); 978 c.lineTo(w * 0.17, h * 0.7147); 979 c.lineTo(w * 0.0314, h * 0.6321); 980 c.lineTo(0, h * 0.6246); 981 c.close(); 982 c.fillAndStroke(); 983 984 c.begin(); 985 c.moveTo(w * 0.48, h * 0.3121); 986 c.lineTo(w * 0.5157, h * 0.3375); 987 c.lineTo(w * 0.4314, h * 0.3982); 988 c.lineTo(w * 0.3929, h * 0.3786); 989 c.close(); 990 c.fillAndStroke(); 991 992 c.begin(); 993 c.moveTo(w * 0.3086, h * 0.5179); 994 c.lineTo(w * 0.53, h * 0.3518); 995 c.lineTo(w * 0.5757, h * 0.3745); 996 c.lineTo(w * 0.3479, h * 0.5411); 997 c.close(); 998 c.fillAndStroke(); 999 1000 c.begin(); 1001 c.moveTo(w * 0.5964, h * 0.3884); 1002 c.lineTo(w * 0.6736, h * 0.4277); 1003 c.lineTo(w * 0.445, h * 0.5991); 1004 c.lineTo(w * 0.3664, h * 0.5531); 1005 c.lineTo(w * 0.5057, h * 0.4545); 1006 c.lineTo(w * 0.5507, h * 0.4754); 1007 c.lineTo(w * 0.5571, h * 0.4723); 1008 c.lineTo(w * 0.5114, h * 0.4504); 1009 c.close(); 1010 c.fillAndStroke(); 1011 1012 c.begin(); 1013 c.moveTo(w * 0.4793, h * 0.6161); 1014 c.lineTo(w * 0.6771, h * 0.4643); 1015 c.lineTo(w * 0.8086, h * 0.5326); 1016 c.lineTo(w * 0.7471, h * 0.5817); 1017 c.lineTo(w * 0.7214, h * 0.567); 1018 c.lineTo(w * 0.715, h * 0.571); 1019 c.lineTo(w * 0.7421, h * 0.5871); 1020 c.lineTo(w * 0.6014, h * 0.6933); 1021 c.close(); 1022 c.fillAndStroke(); 1023 1024 c.begin(); 1025 c.moveTo(w, h * 0.4371); 1026 c.lineTo(w * 0.8443, h * 0.546); 1027 c.lineTo(w * 0.9071, h * 0.5701); 1028 c.lineTo(w, h * 0.5022); 1029 c.close(); 1030 c.fillAndStroke(); 1031 1032 c.begin(); 1033 c.moveTo(w * 0.8407, h * 0.5504); 1034 c.lineTo(w * 0.8993, h * 0.5759); 1035 c.lineTo(w * 0.6757, h * 0.7416); 1036 c.lineTo(w * 0.6286, h * 0.7139); 1037 c.close(); 1038 c.fillAndStroke(); 1039 1040 c.begin(); 1041 c.moveTo(w, h * 0.5321); 1042 c.lineTo(w * 0.6979, h * 0.7549); 1043 c.lineTo(w * 0.7457, h * 0.7781); 1044 c.lineTo(w * 0.9814, h * 0.6094); 1045 c.lineTo(w, h * 0.6067); 1046 c.close(); 1047 c.fillAndStroke(); 1048 1049 c.begin(); 1050 c.moveTo(w, h * 0.6254); 1051 c.lineTo(w * 0.7664, h * 0.792); 1052 c.lineTo(w * 0.9586, h * 0.9062); 1053 c.lineTo(w, h * 0.8786); 1054 c.close(); 1055 c.fillAndStroke(); 1056 1057 c.begin(); 1058 c.moveTo(w * 0.3093, h * 0.5464); 1059 c.lineTo(w * 0.4271, h * 0.6152); 1060 c.lineTo(w * 0.245, h * 0.7643); 1061 c.lineTo(w * 0.185, h * 0.7228); 1062 c.lineTo(w * 0.2493, h * 0.6728); 1063 c.lineTo(w * 0.2214, h * 0.6143); 1064 c.close(); 1065 c.fillAndStroke(); 1066 1067 c.begin(); 1068 c.moveTo(0, h * 0.65); 1069 c.lineTo(w * 0.2179, h * 0.7826); 1070 c.lineTo(w * 0.1136, h * 0.8424); 1071 c.close(); 1072 c.fillAndStroke(); 1073 1074 c.begin(); 1075 c.moveTo(0, h * 0.7272); 1076 c.lineTo(w * 0.0821, h * 0.859); 1077 c.lineTo(0, h * 0.9085); 1078 c.close(); 1079 c.fillAndStroke(); 1080 1081 c.begin(); 1082 c.moveTo(w * 0.4529, h * 0.6366); 1083 c.lineTo(w * 0.575, h * 0.7143); 1084 c.lineTo(w * 0.39, h * 0.8621); 1085 c.lineTo(w * 0.2657, h * 0.7902); 1086 c.close(); 1087 c.fillAndStroke(); 1088 1089 c.begin(); 1090 c.moveTo(0, h * 0.9415); 1091 c.lineTo(w * 0.1036, h * 0.8821); 1092 c.lineTo(w * 0.2343, h * 0.959); 1093 c.lineTo(w * 0.1721, h); 1094 c.lineTo(0, h); 1095 c.close(); 1096 c.fillAndStroke(); 1097 1098 c.begin(); 1099 c.moveTo(w * 0.2586, h * 0.7951); 1100 c.lineTo(w * 0.3829, h * 0.8674); 1101 c.lineTo(w * 0.2543, h * 0.9451); 1102 c.lineTo(w * 0.1279, h * 0.8692); 1103 c.close(); 1104 c.fillAndStroke(); 1105 1106 c.begin(); 1107 c.moveTo(w * 0.2836, h * 0.9639); 1108 c.lineTo(w * 0.4207, h * 0.8772); 1109 c.lineTo(w * 0.605, h * 0.7321); 1110 c.lineTo(w * 0.6521, h * 0.7634); 1111 c.lineTo(w * 0.3486, h); 1112 c.lineTo(w * 0.3393, h); 1113 c.close(); 1114 c.fillAndStroke(); 1115 1116 c.begin(); 1117 c.moveTo(w * 0.3879, h); 1118 c.lineTo(w * 0.6721, h * 0.7759); 1119 c.lineTo(w * 0.7171, h * 0.7982); 1120 c.lineTo(w * 0.4564, h); 1121 c.close(); 1122 c.fillAndStroke(); 1123 1124 c.begin(); 1125 c.moveTo(w * 0.4986, h); 1126 c.lineTo(w * 0.7386, h * 0.8125); 1127 c.lineTo(w * 0.9307, h * 0.925); 1128 c.lineTo(w * 0.8264, h); 1129 c.close(); 1130 c.fillAndStroke(); 1131 1132 c.begin(); 1133 c.moveTo(w * 0.8671, h); 1134 c.lineTo(w * 0.9464, h * 0.9491); 1135 c.lineTo(w, h * 0.975); 1136 c.lineTo(w, h); 1137 c.close(); 1138 c.fillAndStroke(); 1139 1140 c.begin(); 1141 c.moveTo(w * 0.2295, h); 1142 c.lineTo(w * 0.2648, h * 0.9792); 1143 c.lineTo(w * 0.2981, h); 1144 c.close(); 1145 c.fillAndStroke(); 1146 1147 c.setStrokeWidth(1); 1148 c.setStrokeColor(strokeColor); 1149 c.begin(); 1150 c.rect(0, 0, w, h); 1151 c.stroke(); 1152}; 1153 1154mxCellRenderer.registerShape(mxMockupC.SHAPE_IBG_MAP, mxShapeMockupiBgMap); 1155 1156//********************************************************************************************************************************************************** 1157//Vertical Button Bar 1158//********************************************************************************************************************************************************** 1159/** 1160 * Extends mxShape. 1161 */ 1162function mxShapeMockupiButtonBar(bounds, fill, stroke, strokewidth) 1163{ 1164 mxShape.call(this); 1165 this.bounds = bounds; 1166 this.fill = fill; 1167 this.stroke = stroke; 1168 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1169}; 1170 1171/** 1172 * Extends mxShape. 1173 */ 1174mxUtils.extend(mxShapeMockupiButtonBar, mxShape); 1175 1176mxShapeMockupiButtonBar.prototype.customProperties = [ 1177 {name: 'buttonText', dispName: 'Labels', type: 'string'}, 1178 {name: 'textColor', dispName: 'Text Color', type: 'color'}, 1179 {name: 'textColor2', dispName: 'Text2 Color', type: 'color'}, 1180 {name: 'strokeColor2', dispName: 'Stroke2 Color', type: 'color'} 1181]; 1182 1183/** 1184 * Function: paintVertexShape 1185 * 1186 * Paints the vertex shape. 1187 */ 1188mxShapeMockupiButtonBar.prototype.paintVertexShape = function(c, x, y, w, h) 1189{ 1190 var textStrings = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, '+Button 1, Button 2, Button 3').toString().split(','); 1191 var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR, '#666666'); 1192 var selectedFontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#ffffff'); 1193 var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17').toString(); 1194 var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666'); 1195 var separatorColor = mxUtils.getValue(this.style, mxMockupC.STYLE_STROKECOLOR2, '#c4c4c4'); 1196 var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff'); 1197 var buttonNum = textStrings.length; 1198 var maxButtonWidth = 0; 1199 var selectedButton = -1; 1200 var rSize = 2.5; //rounding size 1201 var labelOffset = 2.5; 1202 1203 for (var i = 0; i < buttonNum; i++) 1204 { 1205 var buttonText = textStrings[i]; 1206 1207 if(buttonText.charAt(0) === mxMockupC.SELECTED) 1208 { 1209 buttonText = textStrings[i].substring(1); 1210 selectedButton = i; 1211 } 1212 1213 var currWidth = mxUtils.getSizeForString(buttonText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width; 1214 1215 if (currWidth > maxButtonWidth) 1216 { 1217 maxButtonWidth = currWidth; 1218 } 1219 } 1220 1221 var minButtonHeight = fontSize * 1.5; 1222 var minH = buttonNum * minButtonHeight; 1223 var trueH = Math.max(h, minH); 1224 var minW = 2 * labelOffset + maxButtonWidth; 1225 var trueW = Math.max(w, minW); 1226 1227 c.translate(x, y); 1228 1229 this.background(c, trueW, trueH, rSize, buttonNum, labelOffset, buttonNum * minButtonHeight, frameColor, separatorColor, bgColor, selectedButton, minButtonHeight); 1230 c.setShadow(false); 1231 1232 this.foreground(c, trueW, trueH, rSize, buttonNum, labelOffset, buttonNum * minButtonHeight, frameColor, separatorColor, bgColor, selectedButton, minButtonHeight); 1233 var currWidth = 0; 1234 1235 for (var i = 0; i < buttonNum; i++) 1236 { 1237 if (i === selectedButton) 1238 { 1239 c.setFontColor(selectedFontColor); 1240 } 1241 else 1242 { 1243 c.setFontColor(fontColor); 1244 } 1245 1246 currWidth = currWidth + labelOffset; 1247 var currHeight = (i * minButtonHeight + minButtonHeight * 0.5) * trueH / minH; 1248 this.buttonText(c, trueW, currHeight, textStrings[i], fontSize, separatorColor); 1249 } 1250}; 1251 1252mxShapeMockupiButtonBar.prototype.background = function(c, w, h, rSize, buttonNum, labelOffset, minH, frameColor, separatorColor, bgColor, selectedButton, minButtonHeight) 1253{ 1254 c.begin(); 1255 c.setStrokeWidth(1); 1256 1257 //draw the frame 1258 c.setStrokeColor(frameColor); 1259 c.setFillColor(bgColor); 1260 c.moveTo(0, rSize); 1261 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 1262 c.lineTo(w - rSize, 0); 1263 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 1264 c.lineTo(w, h - rSize); 1265 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h); 1266 c.lineTo(rSize, h); 1267 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize); 1268 c.close(); 1269 c.fillAndStroke(); 1270}; 1271 1272mxShapeMockupiButtonBar.prototype.foreground = function(c, w, h, rSize, buttonNum, labelOffset, minH, frameColor, separatorColor, bgColor, selectedButton, minButtonHeight) 1273{ 1274 //draw the button separators 1275 var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1'); 1276 c.setStrokeWidth(strokeWidth); 1277 c.setStrokeColor(separatorColor); 1278 c.begin(); 1279 1280 for (var i = 1; i < buttonNum; i++) 1281 { 1282 if (i !== selectedButton && i !== (selectedButton + 1)) 1283 { 1284 var currHeight = i * minButtonHeight * h / minH; 1285 1286 c.moveTo(0, currHeight); 1287 c.lineTo(w, currHeight); 1288 } 1289 } 1290 1291 c.stroke(); 1292 1293 //draw the selected button 1294 c.setStrokeColor(mxConstants.NONE); 1295 1296 if (selectedButton === 0) 1297 { 1298 // we draw a path for the first button 1299 c.begin(); 1300 var buttonBottom = minButtonHeight * h / minH; 1301 c.setGradient('#5D7585', '#008cff', 0, 0, w, buttonBottom, mxConstants.DIRECTION_SOUTH, 1, 1); 1302 c.moveTo(0, rSize); 1303 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 1304 c.lineTo(w - rSize, 0); 1305 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 1306 c.lineTo(w, buttonBottom); 1307 c.lineTo(0, buttonBottom); 1308 c.close(); 1309 c.fill(); 1310 } 1311 else if (selectedButton === buttonNum - 1) 1312 { 1313 // we draw a path for the last button 1314 c.begin(); 1315 var buttonTop = h - minButtonHeight * h / minH; 1316 c.setGradient('#5D7585', '#008cff', 0, buttonTop, w, h - buttonTop, mxConstants.DIRECTION_SOUTH, 1, 1); 1317 c.moveTo(0, buttonTop); 1318 c.lineTo(w, buttonTop); 1319 c.lineTo(w, h - rSize); 1320 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h); 1321 c.lineTo(rSize, h); 1322 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize); 1323 c.close(); 1324 c.fill(); 1325 } 1326 else if (selectedButton !== -1) 1327 { 1328 // we draw a path rectangle for one of the buttons in the middle 1329 c.begin(); 1330 var buttonTop = minButtonHeight * selectedButton * h / minH; 1331 var buttonBottom = minButtonHeight * (selectedButton + 1) * h / minH; 1332 c.setGradient('#5D7585', '#008cff', 0, buttonTop, w, buttonBottom - buttonTop, mxConstants.DIRECTION_SOUTH, 1, 1); 1333 c.moveTo(0, buttonTop); 1334 c.lineTo(w, buttonTop); 1335 c.lineTo(w, buttonBottom); 1336 c.lineTo(0, buttonBottom); 1337 c.close(); 1338 c.fill(); 1339 } 1340 1341// //draw the frame again, to achieve a nicer effect 1342 c.begin(); 1343 c.setStrokeColor(frameColor); 1344 c.setFillColor(bgColor); 1345 c.moveTo(0, rSize); 1346 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 1347 c.lineTo(w - rSize, 0); 1348 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 1349 c.lineTo(w, h - rSize); 1350 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h); 1351 c.lineTo(rSize, h); 1352 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize); 1353 c.close(); 1354 c.stroke(); 1355}; 1356 1357mxShapeMockupiButtonBar.prototype.buttonText = function(c, w, h, textString, fontSize, separatorColor) 1358{ 1359 if(textString.charAt(0) === mxMockupC.SELECTED) 1360 { 1361 textString = textString.substring(1); 1362 } 1363 1364 c.setFontSize(fontSize); 1365 c.text(10, h, 0, 0, textString, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1366 1367 var mSize = fontSize * 0.5; 1368 c.setStrokeWidth(fontSize * 0.3); 1369 c.setStrokeColor(separatorColor); 1370 c.begin(); 1371 c.moveTo(w - 20 - mSize, h - mSize); 1372 c.lineTo(w - 20, h); 1373 c.lineTo(w - 20 - mSize, h + mSize); 1374 c.stroke(); 1375}; 1376 1377mxCellRenderer.registerShape(mxMockupC.SHAPE_IBUTTON_BAR, mxShapeMockupiButtonBar); 1378 1379//********************************************************************************************************************************************************** 1380//iPhone Application Bar 1381//********************************************************************************************************************************************************** 1382/** 1383 * Extends mxShape. 1384 */ 1385function mxShapeMockupiAppBar(bounds, fill, stroke, strokewidth) 1386{ 1387 mxShape.call(this); 1388 this.bounds = bounds; 1389 this.fill = fill; 1390 this.stroke = stroke; 1391 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1392}; 1393 1394/** 1395 * Extends mxShape. 1396 */ 1397mxUtils.extend(mxShapeMockupiAppBar, mxShape); 1398 1399/** 1400 * Function: paintVertexShape 1401 * 1402 * Paints the vertex shape. 1403 */ 1404mxShapeMockupiAppBar.prototype.paintVertexShape = function(c, x, y, w, h) 1405{ 1406 c.translate(x, y); 1407 this.background(c, x, y, w, h); 1408 c.setShadow(false); 1409 this.foreground(c, x, y, w, h); 1410}; 1411 1412mxShapeMockupiAppBar.prototype.background = function(c, x, y, w, h) 1413{ 1414 c.setGradient('#eeeeee', '#999999', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 1415 c.rect(0, 0, w, h); 1416 c.fill(); 1417}; 1418 1419mxShapeMockupiAppBar.prototype.foreground = function(c, x, y, w, h) 1420{ 1421 c.setFillColor('#0099ff'); 1422 c.rect(5, h * 0.5 + 1.75, 1.5, 2.5); 1423 c.fill(); 1424 1425 c.rect(7, h * 0.5 + 0.75, 1.5, 3.5); 1426 c.fill(); 1427 1428 c.rect(9, h * 0.5 - 0.25, 1.5, 4.5); 1429 c.fill(); 1430 1431 c.rect(11, h * 0.5 - 1.25, 1.5, 5.5); 1432 c.fill(); 1433 1434 c.rect(13, h * 0.5 - 2.25, 1.5, 6.5); 1435 c.fill(); 1436 1437 c.rect(15, h * 0.5 - 3.25, 1.5, 7.5); 1438 c.fill(); 1439 1440 c.setFillColor('#999999'); 1441 c.ellipse(w - 56.5, h * 0.5 - 4, 8, 8); 1442 c.fill(); 1443 1444 c.setStrokeColor('#cccccc'); 1445 c.begin(); 1446 c.moveTo(w - 52.5, h * 0.5 - 3); 1447 c.lineTo(w - 52.5, h * 0.5); 1448 c.lineTo(w - 54.5, h * 0.5); 1449 c.stroke(); 1450 1451 c.setStrokeWidth(0.5); 1452 c.setStrokeColor('#333333'); 1453 c.setFillColor('#990000'); 1454 c.begin(); 1455 c.moveTo(w - 45.5, h * 0.5); 1456 c.lineTo(w - 37.5, h * 0.5 - 5); 1457 c.lineTo(w - 41.5, h * 0.5 + 4); 1458 c.lineTo(w - 42, h * 0.5 + 0.5); 1459 c.close(); 1460 c.fillAndStroke(); 1461 1462 c.setFillColor('#999999'); 1463 c.setStrokeColor('#999999'); 1464 c.begin(); 1465 c.moveTo(w - 28.5, h * 0.5 + 3.5); 1466 c.arcTo(3.5, 3.5, 0, 1, 1, w - 26.5, h * 0.5 + 1); 1467 c.stroke(); 1468 1469 c.begin(); 1470 c.moveTo(w - 27.25, h * 0.5 + 0.25); 1471 c.lineTo(w - 25.75, h * 0.5 + 0.25); 1472 c.lineTo(w - 26.5, h * 0.5 + 1.5); 1473 c.close(); 1474 c.fillAndStroke(); 1475 1476 c.begin(); 1477 c.moveTo(w - 31, h * 0.5 - 0.5); 1478 c.arcTo(1, 1.5, 0, 0, 1, w - 29, h * 0.5 - 0.5); 1479 c.stroke(); 1480 1481 c.rect(w - 31.5, h * 0.5 - 0.5, 3, 2); 1482 c.fillAndStroke(); 1483 1484 c.setGradient('#eeeeee', '#444444', w - 20, h * 0.5 - 3, 16.5, 6, mxConstants.DIRECTION_NORTH, 1, 1); 1485 c.begin(); 1486 c.moveTo(w - 20, h * 0.5 - 3); 1487 c.lineTo(w - 5, h * 0.5 - 3); 1488 c.lineTo(w - 5, h * 0.5 - 1); 1489 c.lineTo(w - 3.5, h * 0.5 - 1); 1490 c.lineTo(w - 3.5, h * 0.5 + 1); 1491 c.lineTo(w - 5, h * 0.5 + 1); 1492 c.lineTo(w - 5, h * 0.5 + 3); 1493 c.lineTo(w - 20, h * 0.5 + 3); 1494 c.close(); 1495 c.fill(); 1496 1497 c.setGradient('#E2FFEB', '#008215', w - 20, h * 0.5 - 3, 10, 6, mxConstants.DIRECTION_SOUTH, 1, 1); 1498 c.begin(); 1499 c.moveTo(w - 20, h * 0.5 - 3); 1500 c.lineTo(w - 10, h * 0.5 - 3); 1501 c.lineTo(w - 10, h * 0.5 + 3); 1502 c.lineTo(w - 20, h * 0.5 + 3); 1503 c.close(); 1504 c.fill(); 1505 1506 c.setStrokeColor('#666666'); 1507 c.begin(); 1508 c.moveTo(w - 20, h * 0.5 - 3); 1509 c.lineTo(w - 5, h * 0.5 - 3); 1510 c.lineTo(w - 5, h * 0.5 - 1); 1511 c.lineTo(w - 3.5, h * 0.5 - 1); 1512 c.lineTo(w - 3.5, h * 0.5 + 1); 1513 c.lineTo(w - 5, h * 0.5 + 1); 1514 c.lineTo(w - 5, h * 0.5 + 3); 1515 c.lineTo(w - 20, h * 0.5 + 3); 1516 c.close(); 1517 c.stroke(); 1518 1519}; 1520 1521mxCellRenderer.registerShape(mxMockupC.SHAPE_IAPP_BAR, mxShapeMockupiAppBar); 1522 1523//********************************************************************************************************************************************************** 1524//iPhone Top Bar (LEGACY) 1525//********************************************************************************************************************************************************** 1526/** 1527 * Extends mxShape. 1528 */ 1529function mxShapeMockupiTopBar(bounds, fill, stroke, strokewidth) 1530{ 1531 mxShape.call(this); 1532 this.bounds = bounds; 1533 this.fill = fill; 1534 this.stroke = stroke; 1535 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1536}; 1537 1538/** 1539 * Extends mxShape. 1540 */ 1541mxUtils.extend(mxShapeMockupiTopBar, mxShape); 1542 1543/** 1544 * Function: paintVertexShape 1545 * 1546 * Paints the vertex shape. 1547 */ 1548mxShapeMockupiTopBar.prototype.paintVertexShape = function(c, x, y, w, h) 1549{ 1550 c.translate(x, y); 1551 this.background(c, x, y, w, h); 1552 c.setShadow(false); 1553 this.foreground(c, x, y, w, h); 1554}; 1555 1556mxShapeMockupiTopBar.prototype.background = function(c, x, y, w, h) 1557{ 1558 c.setAlpha(0.5); 1559 c.setFillColor('#999999'); 1560 c.rect(0, 0, w, h); 1561 c.fill(); 1562}; 1563 1564mxShapeMockupiTopBar.prototype.foreground = function(c, x, y, w, h) 1565{ 1566 c.setFillColor('#cccccc'); 1567 c.setStrokeColor('#cccccc'); 1568 c.setFontColor('#cccccc'); 1569 c.setFontSize(7.5); 1570 1571 c.rect(5, h * 0.5 + 1.75, 1.5, 2.5); 1572 c.fill(); 1573 1574 c.rect(7, h * 0.5 + 0.75, 1.5, 3.5); 1575 c.fill(); 1576 1577 c.rect(9, h * 0.5 - 0.25, 1.5, 4.5); 1578 c.fill(); 1579 1580 c.rect(11, h * 0.5 - 1.25, 1.5, 5.5); 1581 c.fill(); 1582 1583 c.rect(13, h * 0.5 - 2.25, 1.5, 6.5); 1584 c.fill(); 1585 1586 c.rect(15, h * 0.5 - 3.25, 1.5, 7.5); 1587 c.fill(); 1588 1589 c.text(18, h * 0.5, 0, 0, 'CARRIER', mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1590 c.text(w * 0.5, h * 0.5, 0, 0, '11:15AM', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1591 1592 c.begin(); 1593 c.moveTo(w - 19, h * 0.5 - 2); 1594 c.lineTo(w - 10, h * 0.5 - 2); 1595 c.lineTo(w - 10, h * 0.5 + 2); 1596 c.lineTo(w - 19, h * 0.5 + 2); 1597 c.close(); 1598 c.fill(); 1599 1600 c.begin(); 1601 c.moveTo(w - 20, h * 0.5 - 3); 1602 c.lineTo(w - 5, h * 0.5 - 3); 1603 c.lineTo(w - 5, h * 0.5 - 1); 1604 c.lineTo(w - 3.5, h * 0.5 - 1); 1605 c.lineTo(w - 3.5, h * 0.5 + 1); 1606 c.lineTo(w - 5, h * 0.5 + 1); 1607 c.lineTo(w - 5, h * 0.5 + 3); 1608 c.lineTo(w - 20, h * 0.5 + 3); 1609 c.close(); 1610 c.stroke(); 1611}; 1612 1613mxCellRenderer.registerShape(mxMockupC.SHAPE_ITOP_BAR, mxShapeMockupiTopBar); 1614 1615//********************************************************************************************************************************************************** 1616//iPhone Top Bar 2 1617//********************************************************************************************************************************************************** 1618/** 1619* Extends mxShape. 1620*/ 1621function mxShapeMockupiTopBar2(bounds, fill, stroke, strokewidth) 1622{ 1623 mxShape.call(this); 1624 this.bounds = bounds; 1625 this.fill = fill; 1626 this.stroke = stroke; 1627 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1628}; 1629 1630/** 1631* Extends mxShape. 1632*/ 1633mxUtils.extend(mxShapeMockupiTopBar2, mxShape); 1634 1635mxShapeMockupiTopBar2.prototype.cst = { 1636 SHAPE_ITOP_BAR2 : 'mxgraph.ios.iTopBar2' 1637}; 1638 1639 1640/** 1641* Function: paintVertexShape 1642* 1643* Paints the vertex shape. 1644*/ 1645mxShapeMockupiTopBar2.prototype.paintVertexShape = function(c, x, y, w, h) 1646{ 1647 c.translate(x, y); 1648 this.background(c, x, y, w, h); 1649 c.setShadow(false); 1650 this.foreground(c, x, y, w, h); 1651}; 1652mxShapeMockupiTopBar2.prototype.background = function(c, x, y, w, h) 1653{ 1654 c.rect(0, 0, w, h); 1655 c.fill(); 1656}; 1657 1658mxShapeMockupiTopBar2.prototype.foreground = function(c, x, y, w, h) 1659{ 1660 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000'); 1661 c.setFillColor(strokeColor); 1662 c.setStrokeColor(strokeColor); 1663 1664 c.rect(5, h * 0.5 + 1.75, 1.5, 2.5); 1665 c.fill(); 1666 1667 c.rect(7, h * 0.5 + 0.75, 1.5, 3.5); 1668 c.fill(); 1669 1670 c.rect(9, h * 0.5 - 0.25, 1.5, 4.5); 1671 c.fill(); 1672 1673 c.rect(11, h * 0.5 - 1.25, 1.5, 5.5); 1674 c.fill(); 1675 1676 c.rect(13, h * 0.5 - 2.25, 1.5, 6.5); 1677 c.fill(); 1678 1679 c.rect(15, h * 0.5 - 3.25, 1.5, 7.5); 1680 c.fill(); 1681 1682 c.begin(); 1683 c.moveTo(w - 19, h * 0.5 - 2); 1684 c.lineTo(w - 10, h * 0.5 - 2); 1685 c.lineTo(w - 10, h * 0.5 + 2); 1686 c.lineTo(w - 19, h * 0.5 + 2); 1687 c.close(); 1688 c.fill(); 1689 1690 c.begin(); 1691 c.moveTo(w - 20, h * 0.5 - 3); 1692 c.lineTo(w - 5, h * 0.5 - 3); 1693 c.lineTo(w - 5, h * 0.5 - 1); 1694 c.lineTo(w - 3.5, h * 0.5 - 1); 1695 c.lineTo(w - 3.5, h * 0.5 + 1); 1696 c.lineTo(w - 5, h * 0.5 + 1); 1697 c.lineTo(w - 5, h * 0.5 + 3); 1698 c.lineTo(w - 20, h * 0.5 + 3); 1699 c.close(); 1700 c.stroke(); 1701}; 1702 1703mxCellRenderer.registerShape(mxShapeMockupiTopBar2.prototype.cst.SHAPE_ITOP_BAR2, mxShapeMockupiTopBar2); 1704 1705//********************************************************************************************************************************************************** 1706//iPhone Top Bar Locked 1707//********************************************************************************************************************************************************** 1708/** 1709 * Extends mxShape. 1710 */ 1711function mxShapeMockupiTopBarLocked(bounds, fill, stroke, strokewidth) 1712{ 1713 mxShape.call(this); 1714 this.bounds = bounds; 1715 this.fill = fill; 1716 this.stroke = stroke; 1717 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1718}; 1719 1720/** 1721 * Extends mxShape. 1722 */ 1723mxUtils.extend(mxShapeMockupiTopBarLocked, mxShape); 1724 1725/** 1726 * Function: paintVertexShape 1727 * 1728 * Paints the vertex shape. 1729 */ 1730mxShapeMockupiTopBarLocked.prototype.paintVertexShape = function(c, x, y, w, h) 1731{ 1732 c.translate(x, y); 1733 this.background(c, x, y, w, h); 1734 c.setShadow(false); 1735 this.foreground(c, x, y, w, h); 1736}; 1737 1738mxShapeMockupiTopBarLocked.prototype.background = function(c, x, y, w, h) 1739{ 1740 c.setFillColor('#000000'); 1741 c.rect(0, 0, w, h); 1742 c.fill(); 1743}; 1744 1745mxShapeMockupiTopBarLocked.prototype.foreground = function(c, x, y, w, h) 1746{ 1747 c.setFillColor('#cccccc'); 1748 c.setStrokeColor('#cccccc'); 1749 1750 c.rect(5, h * 0.5 + 1.75, 1.5, 2.5); 1751 c.fill(); 1752 1753 c.rect(7, h * 0.5 + 0.75, 1.5, 3.5); 1754 c.fill(); 1755 1756 c.rect(9, h * 0.5 - 0.25, 1.5, 4.5); 1757 c.fill(); 1758 1759 c.rect(11, h * 0.5 - 1.25, 1.5, 5.5); 1760 c.fill(); 1761 1762 c.rect(13, h * 0.5 - 2.25, 1.5, 6.5); 1763 c.fill(); 1764 1765 c.rect(15, h * 0.5 - 3.25, 1.5, 7.5); 1766 c.fill(); 1767 1768 c.begin(); 1769 c.moveTo(w * 0.5 - 2, h * 0.5 - 1); 1770 c.arcTo(2, 3, 0, 0, 1, w * 0.5 + 2, h * 0.5 - 1); 1771 c.stroke(); 1772 1773 c.rect(w * 0.5 - 3, h * 0.5 - 1, 6, 4); 1774 c.fillAndStroke(); 1775 1776 1777 c.begin(); 1778 c.moveTo(w - 19, h * 0.5 - 2); 1779 c.lineTo(w - 10, h * 0.5 - 2); 1780 c.lineTo(w - 10, h * 0.5 + 2); 1781 c.lineTo(w - 19, h * 0.5 + 2); 1782 c.close(); 1783 c.fill(); 1784 1785 c.begin(); 1786 c.moveTo(w - 20, h * 0.5 - 3); 1787 c.lineTo(w - 5, h * 0.5 - 3); 1788 c.lineTo(w - 5, h * 0.5 - 1); 1789 c.lineTo(w - 3.5, h * 0.5 - 1); 1790 c.lineTo(w - 3.5, h * 0.5 + 1); 1791 c.lineTo(w - 5, h * 0.5 + 1); 1792 c.lineTo(w - 5, h * 0.5 + 3); 1793 c.lineTo(w - 20, h * 0.5 + 3); 1794 c.close(); 1795 c.stroke(); 1796 1797}; 1798 1799mxCellRenderer.registerShape(mxMockupC.SHAPE_ITOP_BAR_LOCKED, mxShapeMockupiTopBarLocked); 1800 1801//********************************************************************************************************************************************************** 1802//Button 1803//********************************************************************************************************************************************************** 1804/** 1805 * Extends mxShape. 1806 */ 1807function mxShapeMockupiButton(bounds, fill, stroke, strokewidth) 1808{ 1809 mxShape.call(this); 1810 this.bounds = bounds; 1811 this.fill = fill; 1812 this.stroke = stroke; 1813 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1814}; 1815 1816/** 1817 * Extends mxShape. 1818 */ 1819mxUtils.extend(mxShapeMockupiButton, mxShape); 1820 1821/** 1822 * Function: paintVertexShape 1823 * 1824 * Paints the vertex shape. 1825 */ 1826mxShapeMockupiButton.prototype.paintVertexShape = function(c, x, y, w, h) 1827{ 1828 var mainText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Main Text'); 1829 var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#666666').toString(); 1830 var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8.5').toString(); 1831 c.translate(x, y); 1832 this.background(c, x, y, w, h); 1833 c.setShadow(false); 1834 this.mainText(c, x, y, w, h, mainText, fontSize, fontColor); 1835}; 1836 1837mxShapeMockupiButton.prototype.background = function(c, x, y, w, h) 1838{ 1839 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString(); 1840 var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString(); 1841 c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 1842 1843 c.roundrect(0, 0, w, h, 2.5, 2.5); 1844 c.fill(); 1845}; 1846 1847mxShapeMockupiButton.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor) 1848{ 1849 c.begin(); 1850 c.setFontSize(fontSize); 1851 c.setFontColor(fontColor); 1852 c.text(w / 2, h / 2, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1853}; 1854 1855mxCellRenderer.registerShape(mxMockupC.SHAPE_IBUTTON, mxShapeMockupiButton); 1856 1857//********************************************************************************************************************************************************** 1858//Button Back 1859//********************************************************************************************************************************************************** 1860/** 1861 * Extends mxShape. 1862 */ 1863function mxShapeMockupiButtonBack(bounds, fill, stroke, strokewidth) 1864{ 1865 mxShape.call(this); 1866 this.bounds = bounds; 1867 this.fill = fill; 1868 this.stroke = stroke; 1869 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1870}; 1871 1872/** 1873 * Extends mxShape. 1874 */ 1875mxUtils.extend(mxShapeMockupiButtonBack, mxShape); 1876 1877/** 1878 * Function: paintVertexShape 1879 * 1880 * Paints the vertex shape. 1881 */ 1882mxShapeMockupiButtonBack.prototype.paintVertexShape = function(c, x, y, w, h) 1883{ 1884 var mainText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Main Text'); 1885 var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#666666').toString(); 1886 var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17').toString(); 1887 c.translate(x, y); 1888 this.background(c, x, y, w, h); 1889 c.setShadow(false); 1890 this.mainText(c, x, y, w, h, mainText, fontSize, fontColor); 1891}; 1892 1893mxShapeMockupiButtonBack.prototype.background = function(c, x, y, w, h) 1894{ 1895 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString(); 1896 var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString(); 1897 c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 1898 1899 rSize = 2.5; 1900 c.begin(); 1901 c.moveTo(w, rSize); 1902 c.arcTo(rSize, rSize, 0, 0, 0, w - rSize, 0); 1903 c.lineTo(10, 0); 1904 c.lineTo(0.87, h * 0.5 - 0.75); 1905 c.arcTo(rSize, rSize, 0, 0, 0, 0.87, h * 0.5 + 0.75); 1906 c.lineTo(10, h); 1907 c.lineTo(w - rSize, h); 1908 c.arcTo(rSize, rSize, 0, 0, 0, w, h - rSize); 1909 c.close(); 1910 c.fill(); 1911}; 1912 1913mxShapeMockupiButtonBack.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor) 1914{ 1915 c.begin(); 1916 c.setFontSize(fontSize); 1917 c.setFontColor(fontColor); 1918 c.text(w * 0.5 + 2.5, h * 0.5, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1919}; 1920 1921mxCellRenderer.registerShape(mxMockupC.SHAPE_IBUTTON_BACK, mxShapeMockupiButtonBack); 1922 1923//********************************************************************************************************************************************************** 1924//Button Forward 1925//********************************************************************************************************************************************************** 1926/** 1927 * Extends mxShape. 1928 */ 1929function mxShapeMockupiButtonForward(bounds, fill, stroke, strokewidth) 1930{ 1931 mxShape.call(this); 1932 this.bounds = bounds; 1933 this.fill = fill; 1934 this.stroke = stroke; 1935 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1936}; 1937 1938/** 1939 * Extends mxShape. 1940 */ 1941mxUtils.extend(mxShapeMockupiButtonForward, mxShape); 1942 1943/** 1944 * Function: paintVertexShape 1945 * 1946 * Paints the vertex shape. 1947 */ 1948mxShapeMockupiButtonForward.prototype.paintVertexShape = function(c, x, y, w, h) 1949{ 1950 var mainText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Main Text'); 1951 var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#666666').toString(); 1952 var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '17').toString(); 1953 c.translate(x, y); 1954 this.background(c, x, y, w, h); 1955 c.setShadow(false); 1956 this.mainText(c, x, y, w, h, mainText, fontSize, fontColor); 1957}; 1958 1959mxShapeMockupiButtonForward.prototype.background = function(c, x, y, w, h) 1960{ 1961 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString(); 1962 var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString(); 1963 c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 1964 1965 rSize = 2.5; 1966 c.begin(); 1967 c.moveTo(0, rSize); 1968 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 1969 c.lineTo(w - 10, 0); 1970 c.lineTo(w - 0.87, h * 0.5 - 0.75); 1971 c.arcTo(rSize, rSize, 0, 0, 1, w - 0.87, h * 0.5 + 0.75); 1972 c.lineTo(w - 10, h); 1973 c.lineTo(rSize, h); 1974 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize); 1975 c.close(); 1976 c.fill(); 1977}; 1978 1979mxShapeMockupiButtonForward.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor) 1980{ 1981 c.begin(); 1982 c.setFontSize(fontSize); 1983 c.setFontColor(fontColor); 1984 c.text(w * 0.5 - 2.5, h * 0.5, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1985}; 1986 1987mxCellRenderer.registerShape(mxMockupC.SHAPE_IBUTTON_FORWARD, mxShapeMockupiButtonForward); 1988 1989//********************************************************************************************************************************************************** 1990//Prev/Next Button 1991//********************************************************************************************************************************************************** 1992/** 1993 * Extends mxShape. 1994 */ 1995function mxShapeMockupiPrevNextButton(bounds, fill, stroke, strokewidth) 1996{ 1997 mxShape.call(this); 1998 this.bounds = bounds; 1999 this.fill = fill; 2000 this.stroke = stroke; 2001 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 2002}; 2003 2004/** 2005 * Extends mxShape. 2006 */ 2007mxUtils.extend(mxShapeMockupiPrevNextButton, mxShape); 2008 2009/** 2010 * Function: paintVertexShape 2011 * 2012 * Paints the vertex shape. 2013 */ 2014mxShapeMockupiPrevNextButton.prototype.paintVertexShape = function(c, x, y, w, h) 2015{ 2016 c.translate(x, y); 2017 this.background(c, x, y, w, h); 2018 c.setShadow(false); 2019 this.foreground(c, x, y, w, h); 2020}; 2021 2022mxShapeMockupiPrevNextButton.prototype.background = function(c, x, y, w, h) 2023{ 2024 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString(); 2025 var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString(); 2026 c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 2027 2028 var rSize = 5; 2029 c.roundrect(0, 0, w, h, rSize, rSize); 2030 c.fill(); 2031 2032 c.begin(); 2033 c.moveTo(w * 0.5, 0); 2034 c.lineTo(w * 0.5, h); 2035 c.stroke(); 2036}; 2037 2038mxShapeMockupiPrevNextButton.prototype.foreground = function(c, x, y, w, h) 2039{ 2040 var fillColor3 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR3, '').toString(); 2041 c.setFillColor(fillColor3); 2042 2043 c.begin(); 2044 c.moveTo(w * 0.25, h * 0.25); 2045 c.lineTo(w * 0.35, h * 0.75); 2046 c.lineTo(w * 0.15, h * 0.75); 2047 c.close(); 2048 c.fill(); 2049 2050 c.begin(); 2051 c.moveTo(w * 0.75, h * 0.75); 2052 c.lineTo(w * 0.85, h * 0.25); 2053 c.lineTo(w * 0.65, h * 0.25); 2054 c.close(); 2055 c.fill(); 2056}; 2057 2058mxCellRenderer.registerShape(mxMockupC.SHAPE_IPREV_NEXT, mxShapeMockupiPrevNextButton); 2059 2060//********************************************************************************************************************************************************** 2061//Text Input 2062//********************************************************************************************************************************************************** 2063/** 2064 * Extends mxShape. 2065 */ 2066function mxShapeMockupiTextInput(bounds, fill, stroke, strokewidth) 2067{ 2068 mxShape.call(this); 2069 this.bounds = bounds; 2070 this.fill = fill; 2071 this.stroke = stroke; 2072 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 2073}; 2074 2075/** 2076 * Extends mxShape. 2077 */ 2078mxUtils.extend(mxShapeMockupiTextInput, mxShape); 2079 2080/** 2081 * Function: paintVertexShape 2082 * 2083 * Paints the vertex shape. 2084 */ 2085mxShapeMockupiTextInput.prototype.paintVertexShape = function(c, x, y, w, h) 2086{ 2087 var mainText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Main Text'); 2088 var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#000000').toString(); 2089 var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8').toString(); 2090 c.translate(x, y); 2091 this.background(c, x, y, w, h); 2092 c.setShadow(false); 2093 this.mainText(c, x, y, w, h, mainText, fontSize, fontColor); 2094}; 2095 2096mxShapeMockupiTextInput.prototype.background = function(c, x, y, w, h) 2097{ 2098 c.roundrect(0, 0, w, h, 2.5, 2.5); 2099 c.fillAndStroke(); 2100}; 2101 2102mxShapeMockupiTextInput.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor) 2103{ 2104 c.begin(); 2105 c.setFontSize(fontSize); 2106 c.setFontColor(fontColor); 2107 c.text(2, h * 0.5, 0, 0, text, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 2108}; 2109 2110mxCellRenderer.registerShape(mxMockupC.SHAPE_ITEXT_INPUT, mxShapeMockupiTextInput); 2111 2112//********************************************************************************************************************************************************** 2113//Radio Button Group (LEGACY) 2114//********************************************************************************************************************************************************** 2115/** 2116 * Extends mxShape. 2117 */ 2118function mxShapeMockupiRadioGroup(bounds, fill, stroke, strokewidth) 2119{ 2120 mxShape.call(this); 2121 this.bounds = bounds; 2122 this.fill = fill; 2123 this.stroke = stroke; 2124 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 2125}; 2126 2127/** 2128 * Extends mxShape. 2129 */ 2130mxUtils.extend(mxShapeMockupiRadioGroup, mxShape); 2131 2132/** 2133 * Function: paintVertexShape 2134 * 2135 * Paints the vertex shape. 2136 */ 2137mxShapeMockupiRadioGroup.prototype.paintVertexShape = function(c, x, y, w, h) 2138{ 2139 c.translate(x, y); 2140 2141 var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#666666').toString(); 2142 var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8').toString(); 2143 var optionText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Option 1').toString().split(','); 2144 var optionNum = optionText.length; 2145 var buttonSize = 5; 2146 var lineH = Math.max(fontSize * 1.5, buttonSize); 2147 var maxTextWidth = 0; 2148 var selected = -1; 2149 var labelOffset = 2.5; 2150 var minH = optionNum * lineH; 2151 var trueH = Math.max(h, minH); 2152 2153 //get min width and selected option 2154 for (var i = 0; i < optionNum; i++) 2155 { 2156 var currText = optionText[i]; 2157 2158 if(currText.charAt(0) === mxMockupC.SELECTED) 2159 { 2160 currText = optionText[i].substring(1); 2161 selected = i; 2162 } 2163 2164 var currWidth = mxUtils.getSizeForString(currText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width; 2165 2166 if (currWidth > maxTextWidth) 2167 { 2168 maxTextWidth = currWidth; 2169 } 2170 } 2171 2172 var minW = 2 * labelOffset + maxTextWidth + 2 * buttonSize; 2173 var trueW = Math.max(w, minW); 2174 2175 //draw the background 2176 c.roundrect(0, 0, trueW, trueH, 2.5, 2.5); 2177 c.fillAndStroke(); 2178 c.setShadow(false); 2179 2180 c.setFontSize(fontSize); 2181 c.setFontColor(fontColor); 2182 2183 for (var i = 0; i < optionNum; i++) 2184 { 2185 var currHeight = (i * lineH + lineH * 0.5) * trueH / minH; 2186 2187 var currText = optionText[i]; 2188 2189 if(currText.charAt(0) === mxMockupC.SELECTED) 2190 { 2191 currText = optionText[i].substring(1); 2192 selected = i; 2193 } 2194 2195 c.text(buttonSize * 2 + labelOffset, currHeight, 0, 0, currText, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 2196 2197 var iconX = buttonSize * 0.5; 2198 var iconY = currHeight - buttonSize * 0.5; 2199 c.setFillColor('#dddddd'); 2200 c.setStrokeColor('#000000'); 2201 2202 if (selected === i) 2203 { 2204 c.setGradient('#aaaaaa', '#666666', iconX, iconY, buttonSize, buttonSize, mxConstants.DIRECTION_SOUTH, 1, 1); 2205 c.ellipse(iconX, iconY, buttonSize, buttonSize); 2206 c.fillAndStroke(); 2207 c.setFillColor('#333333'); 2208 c.setStrokeColor('#333333'); 2209 c.ellipse(iconX + buttonSize * 0.25, iconY + buttonSize * 0.25, buttonSize * 0.5, buttonSize * 0.5); 2210 c.fillAndStroke(); 2211 } 2212 else 2213 { 2214 c.setGradient('#eeeeee', '#cccccc', iconX, iconY, buttonSize, buttonSize, mxConstants.DIRECTION_SOUTH, 1, 1); 2215 c.ellipse(iconX, iconY, buttonSize, buttonSize); 2216 c.fillAndStroke(); 2217 } 2218 } 2219}; 2220 2221mxCellRenderer.registerShape(mxMockupC.SHAPE_IRADIO_GROUP, mxShapeMockupiRadioGroup); 2222 2223//********************************************************************************************************************************************************** 2224//Checkbox Group (LEGACY) 2225//********************************************************************************************************************************************************** 2226/** 2227 * Extends mxShape. 2228 */ 2229function mxShapeMockupiCheckboxGroup(bounds, fill, stroke, strokewidth) 2230{ 2231 mxShape.call(this); 2232 this.bounds = bounds; 2233 this.fill = fill; 2234 this.stroke = stroke; 2235 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 2236}; 2237 2238/** 2239 * Extends mxShape. 2240 */ 2241mxUtils.extend(mxShapeMockupiCheckboxGroup, mxShape); 2242 2243/** 2244 * Function: paintVertexShape 2245 * 2246 * Paints the vertex shape. 2247 */ 2248mxShapeMockupiCheckboxGroup.prototype.paintVertexShape = function(c, x, y, w, h) 2249{ 2250 c.translate(x, y); 2251 2252 var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#666666').toString(); 2253 var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8').toString(); 2254 var optionText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Option 1').toString().split(','); 2255 var optionNum = optionText.length; 2256 var buttonSize = 5; 2257 var lineH = Math.max(fontSize * 1.5, buttonSize); 2258 var maxTextWidth = 0; 2259 var selected = -1; 2260 var labelOffset = 2.5; 2261 var minH = optionNum * lineH; 2262 var trueH = Math.max(h, minH); 2263 2264 //get min width and selected option 2265 for (var i = 0; i < optionNum; i++) 2266 { 2267 var currText = optionText[i]; 2268 2269 if(currText.charAt(0) === mxMockupC.SELECTED) 2270 { 2271 currText = optionText[i].substring(1); 2272 selected = i; 2273 } 2274 2275 var currWidth = mxUtils.getSizeForString(currText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width; 2276 2277 if (currWidth > maxTextWidth) 2278 { 2279 maxTextWidth = currWidth; 2280 } 2281 } 2282 2283 var minW = 2 * labelOffset + maxTextWidth + 2 * buttonSize; 2284 var trueW = Math.max(w, minW); 2285 2286 //draw the background 2287 c.roundrect(0, 0, trueW, trueH, 2.5, 2.5); 2288 c.fillAndStroke(); 2289 c.setShadow(false); 2290 2291 c.setFontSize(fontSize); 2292 c.setFontColor(fontColor); 2293 2294 for (var i = 0; i < optionNum; i++) 2295 { 2296 var currHeight = (i * lineH + lineH * 0.5) * trueH / minH; 2297 2298 var currText = optionText[i]; 2299 2300 if(currText.charAt(0) === mxMockupC.SELECTED) 2301 { 2302 currText = optionText[i].substring(1); 2303 selected = i; 2304 } 2305 2306 c.text(buttonSize * 2 + labelOffset, currHeight, 0, 0, currText, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 2307 2308 var iconX = buttonSize * 0.5; 2309 var iconY = currHeight - buttonSize * 0.5; 2310 c.setFillColor('#dddddd'); 2311 c.setStrokeColor('#000000'); 2312 2313 if (selected === i) 2314 { 2315 c.setGradient('#aaaaaa', '#666666', iconX, iconY, buttonSize, buttonSize, mxConstants.DIRECTION_SOUTH, 1, 1); 2316 c.rect(iconX, iconY, buttonSize, buttonSize); 2317 c.fillAndStroke(); 2318 c.setStrokeColor('#333333'); 2319 c.begin(); 2320 c.moveTo(iconX + buttonSize * 0.25, iconY + buttonSize * 0.5); 2321 c.lineTo(iconX + buttonSize * 0.5, iconY + buttonSize * 0.75); 2322 c.lineTo(iconX + buttonSize * 0.75, iconY + buttonSize * 0.25); 2323 c.stroke(); 2324 } 2325 else 2326 { 2327 c.setGradient('#eeeeee', '#cccccc', iconX, iconY, buttonSize, buttonSize, mxConstants.DIRECTION_SOUTH, 1, 1); 2328 c.rect(iconX, iconY, buttonSize, buttonSize); 2329 c.fillAndStroke(); 2330 } 2331 2332 selected = -1; 2333 } 2334}; 2335 2336mxCellRenderer.registerShape(mxMockupC.SHAPE_ICHECKBOX_GROUP, mxShapeMockupiCheckboxGroup); 2337 2338//********************************************************************************************************************************************************** 2339//Combo box 2340//********************************************************************************************************************************************************** 2341/** 2342 * Extends mxShape. 2343 */ 2344function mxShapeMockupiComboBox(bounds, fill, stroke, strokewidth) 2345{ 2346 mxShape.call(this); 2347 this.bounds = bounds; 2348 this.fill = fill; 2349 this.stroke = stroke; 2350 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 2351}; 2352 2353/** 2354 * Extends mxShape. 2355 */ 2356mxUtils.extend(mxShapeMockupiComboBox, mxShape); 2357 2358/** 2359 * Function: paintVertexShape 2360 * 2361 * Paints the vertex shape. 2362 */ 2363mxShapeMockupiComboBox.prototype.paintVertexShape = function(c, x, y, w, h) 2364{ 2365 var mainText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Main Text'); 2366 var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#666666').toString(); 2367 var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8.5').toString(); 2368 c.translate(x, y); 2369 this.background(c, x, y, w, h); 2370 c.setShadow(false); 2371 this.foreground(c, x, y, w, h); 2372 this.mainText(c, x, y, w, h, mainText, fontSize, fontColor); 2373}; 2374 2375mxShapeMockupiComboBox.prototype.background = function(c, x, y, w, h) 2376{ 2377 c.setFillColor('#ffffff'); 2378 c.roundrect(0, 0, w, h, 2.5, 2.5); 2379 c.fillAndStroke(); 2380}; 2381 2382mxShapeMockupiComboBox.prototype.foreground = function(c, x, y, w, h) 2383{ 2384 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString(); 2385 var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString(); 2386 c.setGradient(fillColor, fillColor2, w - 30, 0, 30, h, mxConstants.DIRECTION_SOUTH, 1, 1); 2387 c.begin(); 2388 c.moveTo(w - 15, 0); 2389 c.lineTo(w - 2.5, 0); 2390 c.arcTo(2.5, 2.5, 0, 0, 1, w, 2.5); 2391 c.lineTo(w, h - 2.5); 2392 c.arcTo(2.5, 2.5, 0, 0, 1, w - 2.5, h); 2393 c.lineTo(w - 15, h); 2394 c.close(); 2395 c.fillAndStroke(); 2396 2397 c.setFillColor('#ffffff'); 2398 c.begin(); 2399 c.moveTo(w - 11, 5); 2400 c.lineTo(w - 7.5, 10); 2401 c.lineTo(w - 4, 5); 2402 c.fill(); 2403}; 2404 2405mxShapeMockupiComboBox.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor) 2406{ 2407 c.begin(); 2408 c.setFontSize(fontSize); 2409 c.setFontColor(fontColor); 2410 c.text(2.5, h * 0.5, 0, 0, text, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 2411}; 2412 2413mxCellRenderer.registerShape(mxMockupC.SHAPE_ICOMBO_BOX, mxShapeMockupiComboBox); 2414 2415//********************************************************************************************************************************************************** 2416//On-Off Button 2417//********************************************************************************************************************************************************** 2418/** 2419 * Extends mxShape. 2420 */ 2421function mxShapeMockupiOnOffButton(bounds, fill, stroke, strokewidth) 2422{ 2423 mxShape.call(this); 2424 this.bounds = bounds; 2425 this.fill = fill; 2426 this.stroke = stroke; 2427 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 2428}; 2429 2430/** 2431 * Extends mxShape. 2432 */ 2433mxUtils.extend(mxShapeMockupiOnOffButton, mxShape); 2434 2435mxShapeMockupiOnOffButton.prototype.customProperties = [ 2436 { name: 'buttonState', dispName: 'State', type: 'enum', 2437 enumList: [{val: 'on', dispName: 'On'}, {val: 'off', dispName: 'Off'}]} 2438]; 2439 2440/** 2441 * Function: paintVertexShape 2442 * 2443 * Paints the vertex shape. 2444 */ 2445mxShapeMockupiOnOffButton.prototype.paintVertexShape = function(c, x, y, w, h) 2446{ 2447 c.translate(x, y); 2448 w = Math.max(w, 2 * h); 2449 var state = mxUtils.getValue(this.style, mxMockupC.BUTTON_STATE, mxMockupC.STATE_ON); 2450 this.background(c, x, y, w, h, state); 2451 c.setShadow(false); 2452 this.foreground(c, x, y, w, h, state); 2453 this.mainText(c, x, y, w, h, state); 2454}; 2455 2456mxShapeMockupiOnOffButton.prototype.background = function(c, x, y, w, h, state) 2457{ 2458 if (state === mxMockupC.STATE_ON) 2459 { 2460 c.setGradient('#E2FFEB', '#008215', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 2461 c.roundrect(0, 0, w, h, h * 0.5, h * 0.5); 2462 c.fillAndStroke(); 2463 } 2464 else if (state === mxMockupC.STATE_OFF) 2465 { 2466 c.setGradient('#cc9999', '#881100', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 2467 c.roundrect(0, 0, w, h, h * 0.5, h * 0.5); 2468 c.fillAndStroke(); 2469 } 2470}; 2471 2472mxShapeMockupiOnOffButton.prototype.foreground = function(c, x, y, w, h, state) 2473{ 2474 if (state === mxMockupC.STATE_ON) 2475 { 2476 c.setGradient('#ffffff', '#888888', w - h, 0, h, h, mxConstants.DIRECTION_SOUTH, 1, 1); 2477 c.ellipse(w - h, 0, h, h); 2478 c.fillAndStroke(); 2479 } 2480 else 2481 { 2482 c.setGradient('#ffffff', '#888888', 0, 0, h, h, mxConstants.DIRECTION_SOUTH, 1, 1); 2483 c.ellipse(0, 0, h, h); 2484 c.fillAndStroke(); 2485 } 2486}; 2487 2488mxShapeMockupiOnOffButton.prototype.mainText = function(c, x, y, w, h, state) 2489{ 2490 var mainText = mxUtils.getValue(this.style, 'mainText', null); 2491 c.setFontColor('#ffffff'); 2492 c.setFontSize(8.5); 2493 2494 if (mainText != '') 2495 { 2496 if(state === mxMockupC.STATE_ON) 2497 { 2498 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); 2499 } 2500 else if (state === mxMockupC.STATE_OFF) 2501 { 2502 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); 2503 } 2504 } 2505}; 2506 2507mxCellRenderer.registerShape(mxMockupC.SHAPE_ION_OFF_BUTTON, mxShapeMockupiOnOffButton); 2508 2509//********************************************************************************************************************************************************** 2510//Alert Box 2511//********************************************************************************************************************************************************** 2512/** 2513 * Extends mxShape. 2514 */ 2515function mxShapeMockupiAlertBox(bounds, fill, stroke, strokewidth) 2516{ 2517 mxShape.call(this); 2518 this.bounds = bounds; 2519 this.fill = fill; 2520 this.stroke = stroke; 2521 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 2522}; 2523 2524/** 2525 * Extends mxShape. 2526 */ 2527mxUtils.extend(mxShapeMockupiAlertBox, mxShape); 2528 2529/** 2530 * Function: paintVertexShape 2531 * 2532 * Paints the vertex shape. 2533 */ 2534mxShapeMockupiAlertBox.prototype.paintVertexShape = function(c, x, y, w, h) 2535{ 2536 w = Math.max(w, 15); 2537 h = Math.max(h, 15); 2538 c.translate(x, y); 2539 rSize = 7.5; 2540 this.background(c, x, y, w, h, rSize); 2541 c.setShadow(false); 2542 this.foreground(c, x, y, w, h, rSize); 2543}; 2544 2545mxShapeMockupiAlertBox.prototype.background = function(c, x, y, w, h, rSize) 2546{ 2547 c.setGradient('#497198', '#193168', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 2548 c.setAlpha(0.8); 2549 c.setStrokeWidth(1); 2550 c.roundrect(0, 0, w, h, rSize, rSize); 2551 c.fillAndStroke(); 2552}; 2553 2554mxShapeMockupiAlertBox.prototype.foreground = function(c, x, y, w, h, rSize) 2555{ 2556 var mainText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Main Text').toString().split(','); 2557 2558 c.setStrokeColor('#497198'); 2559 c.setGradient('#497198', '#c5cee1', 0, 0, w, 22.5, mxConstants.DIRECTION_SOUTH, 1, 1); 2560 c.setAlpha(0.5); 2561 c.begin(); 2562 c.moveTo(w - rSize, 0); 2563 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 2564 c.lineTo(w, 17.5); 2565 c.arcTo(w * 1.67, h * 2.5, 0, 0, 1, 0, 17.5); 2566 c.lineTo(0, rSize); 2567 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 2568 c.close(); 2569 c.fillAndStroke(); 2570 2571 c.setAlpha(0.8); 2572 c.setStrokeColor('#ffffff'); 2573 c.setStrokeWidth(1); 2574 c.roundrect(0, 0, w, h, rSize, rSize); 2575 c.stroke(); 2576 2577 c.setGradient('#497198', '#c5cee1', 5, h - 50, w - 20, 20, mxConstants.DIRECTION_SOUTH, 1, 1); 2578 c.roundrect(5, h - 25, w - 10, 20, 2.5, 2.5); 2579 c.fillAndStroke(); 2580 2581 c.setAlpha(0.9); 2582 c.setFontSize(9.5); 2583 c.setFontColor('#ffffff'); 2584 c.text(w * 0.5, h * 0.15, 0, 0, mainText[0], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 2585 2586 c.setFontSize(8); 2587 c.text(w * 0.5, h * 0.4, 0, 0, mainText[2], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 2588 c.text(w * 0.5, h * 0.55, 0, 0, mainText[3], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 2589 2590 c.setFontSize(8.5); 2591 c.text(w * 0.5, h - 15, 0, 0, mainText[1], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 2592}; 2593 2594mxCellRenderer.registerShape(mxMockupC.SHAPE_IALERT_BOX, mxShapeMockupiAlertBox); 2595 2596//********************************************************************************************************************************************************** 2597//Dialog Box 2598//********************************************************************************************************************************************************** 2599/** 2600 * Extends mxShape. 2601 */ 2602function mxShapeMockupiDialogBox(bounds, fill, stroke, strokewidth) 2603{ 2604 mxShape.call(this); 2605 this.bounds = bounds; 2606 this.fill = fill; 2607 this.stroke = stroke; 2608 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 2609}; 2610 2611/** 2612 * Extends mxShape. 2613 */ 2614mxUtils.extend(mxShapeMockupiDialogBox, mxShape); 2615 2616/** 2617 * Function: paintVertexShape 2618 * 2619 * Paints the vertex shape. 2620 */ 2621mxShapeMockupiDialogBox.prototype.paintVertexShape = function(c, x, y, w, h) 2622{ 2623 w = Math.max(w, 15); 2624 h = Math.max(h, 15); 2625 c.translate(x, y); 2626 rSize = 7.5; 2627 this.background(c, x, y, w, h, rSize); 2628 c.setShadow(false); 2629 this.foreground(c, x, y, w, h, rSize); 2630}; 2631 2632mxShapeMockupiDialogBox.prototype.background = function(c, x, y, w, h, rSize) 2633{ 2634 c.setGradient('#497198', '#193168', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 2635 c.setAlpha(0.8); 2636 c.setStrokeWidth(1); 2637 c.roundrect(0, 0, w, h, rSize, rSize); 2638 c.fillAndStroke(); 2639}; 2640 2641mxShapeMockupiDialogBox.prototype.foreground = function(c, x, y, w, h, rSize) 2642{ 2643 var mainText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Main Text').toString().split(','); 2644 2645 c.setStrokeColor('#497198'); 2646 c.setGradient('#497198', '#c5cee1', 0, 0, w, 22.5, mxConstants.DIRECTION_SOUTH, 1, 1); 2647 c.setAlpha(0.5); 2648 c.begin(); 2649 c.moveTo(w - rSize, 0); 2650 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 2651 c.lineTo(w, 17.5); 2652 c.arcTo(w * 1.67, h * 2.5, 0, 0, 1, 0, 17.5); 2653 c.lineTo(0, rSize); 2654 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 2655 c.close(); 2656 c.fillAndStroke(); 2657 2658 c.setAlpha(0.8); 2659 c.setStrokeColor('#ffffff'); 2660 c.setStrokeWidth(1); 2661 c.roundrect(0, 0, w, h, rSize, rSize); 2662 c.stroke(); 2663 2664 c.setGradient('#497198', '#c5cee1', 5, h - 25, w * 0.5 - 10, 20, mxConstants.DIRECTION_SOUTH, 1, 1); 2665 c.roundrect(5, h - 25, w * 0.5 - 10, 20, 2.5, 2.5); 2666 c.fillAndStroke(); 2667 2668 c.roundrect(w * 0.5 + 2.5, h - 25, w * 0.5 - 10, 20, 2.5, 2.5); 2669 c.fillAndStroke(); 2670 2671 c.setAlpha(0.9); 2672 c.setFontSize(9.5); 2673 c.setFontColor('#ffffff'); 2674 c.text(w * 0.5, h * 0.15, 0, 0, mainText[0], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 2675 2676 c.setFontSize(8); 2677 c.text(w * 0.5, h * 0.4, 0, 0, mainText[3], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 2678 c.text(w * 0.5, h * 0.55, 0, 0, mainText[4], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 2679 2680 c.setFontSize(8.5); 2681 c.text(w * 0.25, h - 15, 0, 0, mainText[1], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 2682 c.text(w * 0.75, h - 15, 0, 0, mainText[2], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 2683}; 2684 2685mxCellRenderer.registerShape(mxMockupC.SHAPE_IDIALOG_BOX, mxShapeMockupiDialogBox); 2686 2687//********************************************************************************************************************************************************** 2688//Lock Button 2689//********************************************************************************************************************************************************** 2690/** 2691 * Extends mxShape. 2692 */ 2693function mxShapeMockupiLockButton(bounds, fill, stroke, strokewidth) 2694{ 2695 mxShape.call(this); 2696 this.bounds = bounds; 2697 this.fill = fill; 2698 this.stroke = stroke; 2699 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 2700}; 2701 2702/** 2703 * Extends mxShape. 2704 */ 2705mxUtils.extend(mxShapeMockupiLockButton, mxShape); 2706 2707/** 2708 * Function: paintVertexShape 2709 * 2710 * Paints the vertex shape. 2711 */ 2712mxShapeMockupiLockButton.prototype.paintVertexShape = function(c, x, y, w, h) 2713{ 2714 c.translate(x, y); 2715 c.setShadow(false); 2716 2717 c.setAlpha(0.7); 2718 c.setGradient('#4A4F56', '#70757B', 0, 0, w, h, mxConstants.DIRECTION_NORTH, 1, 1); 2719 c.rect(0, 0, w, h); 2720 c.fill(); 2721 2722 c.setAlpha(0.8); 2723 c.setGradient('#18232D', '#1F2933', 10, 10, 154, 30, mxConstants.DIRECTION_NORTH, 1, 1); 2724 c.roundrect(10, h * 0.5 - 15, w - 20, 30, 7.5, 7.5); 2725 c.fill(); 2726 2727 c.setAlpha(1); 2728 c.setGradient('#E9F3FD', '#ADB7C1', 12.5, 12.5, 40, 25, mxConstants.DIRECTION_SOUTH, 1, 1); 2729 c.roundrect(12.5, h * 0.5 - 12.5, 40, 25, 5, 5); 2730 c.fill(); 2731 2732 c.setAlpha(0.8); 2733 c.setStrokeWidth(0.5); 2734 c.setStrokeColor('#aabbbb'); 2735 c.setGradient('#AEB7C1', '#667079', 20, 17.5, 25, 15, mxConstants.DIRECTION_SOUTH, 1, 1); 2736 c.begin(); 2737 c.moveTo(20, h * 0.5 - 3.5); 2738 c.lineTo(35, h * 0.5 - 3.5); 2739 c.lineTo(35, h * 0.5 - 7.5); 2740 c.lineTo(45, h * 0.5); 2741 c.lineTo(35, h * 0.5 + 7.5); 2742 c.lineTo(35, h * 0.5 + 3.5); 2743 c.lineTo(20, h * 0.5 + 3.5); 2744 c.close(); 2745 c.fillAndStroke(); 2746 2747 var mainText = mxUtils.getValue(this.style, 'mainText', null); 2748 2749 if (mainText != '') 2750 { 2751 c.setFontSize(12.5); 2752 c.setFontColor('#cccccc'); 2753 c.text(w / 2 + 20.5, h / 2, 0, 0, 'slide to unlock', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 2754 } 2755}; 2756 2757mxCellRenderer.registerShape(mxMockupC.SHAPE_ILOCK_BUTTON, mxShapeMockupiLockButton); 2758 2759//********************************************************************************************************************************************************** 2760//Arrow Icon 2761//********************************************************************************************************************************************************** 2762/** 2763 * Extends mxShape. 2764 */ 2765function mxShapeMockupiArrowIcon(bounds, fill, stroke, strokewidth) 2766{ 2767 mxShape.call(this); 2768 this.bounds = bounds; 2769 this.fill = fill; 2770 this.stroke = stroke; 2771 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 2772}; 2773 2774/** 2775 * Extends mxShape. 2776 */ 2777mxUtils.extend(mxShapeMockupiArrowIcon, mxShape); 2778 2779/** 2780 * Function: paintVertexShape 2781 * 2782 * Paints the vertex shape. 2783 */ 2784mxShapeMockupiArrowIcon.prototype.paintVertexShape = function(c, x, y, w, h) 2785{ 2786 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '').toString(); 2787 2788 c.translate(x, y); 2789 this.background(c, x, y, w, h, strokeColor); 2790 c.setShadow(false); 2791 this.foreground(c, x, y, w, h, strokeColor); 2792}; 2793 2794mxShapeMockupiArrowIcon.prototype.background = function(c, x, y, w, h, strokeColor) 2795{ 2796 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString(); 2797 var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString(); 2798 c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 2799 2800 c.setStrokeWidth(1.5); 2801 c.setStrokeColor(strokeColor); 2802 c.ellipse(0, 0, w, h); 2803 c.fillAndStroke(); 2804}; 2805 2806mxShapeMockupiArrowIcon.prototype.foreground = function(c, x, y, w, h, strokeColor) 2807{ 2808 c.setStrokeWidth(2.5); 2809 c.begin(); 2810 c.moveTo(w * 0.4, h * 0.22); 2811 c.lineTo(w * 0.65, h * 0.5); 2812 c.lineTo(w * 0.4, h * 0.78); 2813 c.stroke(); 2814}; 2815 2816mxCellRenderer.registerShape(mxMockupC.SHAPE_IARROW_ICON, mxShapeMockupiArrowIcon); 2817 2818//********************************************************************************************************************************************************** 2819//Delete Icon 2820//********************************************************************************************************************************************************** 2821/** 2822 * Extends mxShape. 2823 */ 2824function mxShapeMockupiDeleteIcon(bounds, fill, stroke, strokewidth) 2825{ 2826 mxShape.call(this); 2827 this.bounds = bounds; 2828 this.fill = fill; 2829 this.stroke = stroke; 2830 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 2831}; 2832 2833/** 2834 * Extends mxShape. 2835 */ 2836mxUtils.extend(mxShapeMockupiDeleteIcon, mxShape); 2837 2838/** 2839 * Function: paintVertexShape 2840 * 2841 * Paints the vertex shape. 2842 */ 2843mxShapeMockupiDeleteIcon.prototype.paintVertexShape = function(c, x, y, w, h) 2844{ 2845 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '').toString(); 2846 2847 c.translate(x, y); 2848 this.background(c, x, y, w, h, strokeColor); 2849 c.setShadow(false); 2850 this.foreground(c, x, y, w, h, strokeColor); 2851}; 2852 2853mxShapeMockupiDeleteIcon.prototype.background = function(c, x, y, w, h, strokeColor) 2854{ 2855 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString(); 2856 var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString(); 2857 c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 2858 2859 c.setStrokeWidth(1.5); 2860 c.setStrokeColor(strokeColor); 2861 c.ellipse(0, 0, w, h); 2862 c.fillAndStroke(); 2863}; 2864 2865mxShapeMockupiDeleteIcon.prototype.foreground = function(c, x, y, w, h, strokeColor) 2866{ 2867 c.setStrokeWidth(2.5); 2868 c.begin(); 2869 c.moveTo(w * 0.25, h * 0.5); 2870 c.lineTo(w * 0.75, h * 0.5); 2871 c.stroke(); 2872}; 2873 2874mxCellRenderer.registerShape(mxMockupC.SHAPE_IDELETE_ICON, mxShapeMockupiDeleteIcon); 2875 2876//********************************************************************************************************************************************************** 2877//Add Icon 2878//********************************************************************************************************************************************************** 2879/** 2880 * Extends mxShape. 2881 */ 2882function mxShapeMockupiAddIcon(bounds, fill, stroke, strokewidth) 2883{ 2884 mxShape.call(this); 2885 this.bounds = bounds; 2886 this.fill = fill; 2887 this.stroke = stroke; 2888 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 2889}; 2890 2891/** 2892 * Extends mxShape. 2893 */ 2894mxUtils.extend(mxShapeMockupiAddIcon, mxShape); 2895 2896/** 2897 * Function: paintVertexShape 2898 * 2899 * Paints the vertex shape. 2900 */ 2901mxShapeMockupiAddIcon.prototype.paintVertexShape = function(c, x, y, w, h) 2902{ 2903 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '').toString(); 2904 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString(); 2905 var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString(); 2906 c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 2907 c.setStrokeColor(strokeColor); 2908 2909 2910 c.translate(x, y); 2911 this.background(c, x, y, w, h, strokeColor); 2912 c.setShadow(false); 2913 this.foreground(c, x, y, w, h, strokeColor); 2914}; 2915 2916mxShapeMockupiAddIcon.prototype.background = function(c, x, y, w, h, strokeColor) 2917{ 2918 c.setStrokeWidth(1.5); 2919 c.ellipse(0, 0, w, h); 2920 c.fillAndStroke(); 2921}; 2922 2923mxShapeMockupiAddIcon.prototype.foreground = function(c, x, y, w, h, strokeColor) 2924{ 2925 c.setStrokeWidth(2.5); 2926 c.begin(); 2927 c.moveTo(w * 0.25, h * 0.5); 2928 c.lineTo(w * 0.75, h * 0.5); 2929 c.moveTo(w * 0.5, h * 0.25); 2930 c.lineTo(w * 0.5, h * 0.75); 2931 c.stroke(); 2932}; 2933 2934mxCellRenderer.registerShape(mxMockupC.SHAPE_IADD_ICON, mxShapeMockupiAddIcon); 2935 2936//********************************************************************************************************************************************************** 2937//Info Icon 2938//********************************************************************************************************************************************************** 2939/** 2940 * Extends mxShape. 2941 */ 2942function mxShapeMockupiInfoIcon(bounds, fill, stroke, strokewidth) 2943{ 2944 mxShape.call(this); 2945 this.bounds = bounds; 2946 this.fill = fill; 2947 this.stroke = stroke; 2948 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 2949}; 2950 2951/** 2952 * Extends mxShape. 2953 */ 2954mxUtils.extend(mxShapeMockupiInfoIcon, mxShape); 2955 2956/** 2957 * Function: paintVertexShape 2958 * 2959 * Paints the vertex shape. 2960 */ 2961mxShapeMockupiInfoIcon.prototype.paintVertexShape = function(c, x, y, w, h) 2962{ 2963 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '').toString(); 2964 2965 c.translate(x, y); 2966 this.background(c, x, y, w, h, strokeColor); 2967 c.setShadow(false); 2968 this.foreground(c, x, y, w, h, strokeColor); 2969}; 2970 2971mxShapeMockupiInfoIcon.prototype.background = function(c, x, y, w, h, strokeColor) 2972{ 2973 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString(); 2974 var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString(); 2975 c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 2976 2977 c.setStrokeWidth(1.5); 2978 c.setStrokeColor(strokeColor); 2979 c.ellipse(0, 0, w, h); 2980 c.fillAndStroke(); 2981}; 2982 2983mxShapeMockupiInfoIcon.prototype.foreground = function(c, x, y, w, h, strokeColor) 2984{ 2985 c.setStrokeWidth(2.5); 2986 c.begin(); 2987 c.setFillColor('#ffffff'); 2988 c.moveTo(w * 0.47, h * 0.334); 2989 c.arcTo(w * 0.1, h * 0.15, 60, 0, 1, w * 0.61, h * 0.42); 2990 c.lineTo(w * 0.51, h * 0.7); 2991 c.arcTo(w * 0.026, h * 0.03, 30, 0, 0, w * 0.54, h * 0.74); 2992 c.lineTo(w * 0.608, h * 0.684); 2993 c.arcTo(w * 0.02, h * 0.015, 0, 0, 1, w * 0.638, h * 0.706); 2994 c.arcTo(w * 0.45, h * 0.45, 0, 0, 1, w * 0.42, h * 0.865); 2995 c.arcTo(w * 0.1, h * 0.08, -15, 0, 1, w * 0.325, h * 0.77); 2996 c.lineTo(w * 0.358, h * 0.66); 2997 c.lineTo(w * 0.435, h * 0.46); 2998 c.arcTo(w * 0.023, h * 0.03, 0, 0, 0, w * 0.4, h * 0.43); 2999 c.lineTo(w * 0.338, h * 0.484); 3000 c.arcTo(w * 0.01, h * 0.015, 45, 0, 1, w * 0.31, h * 0.47); 3001 c.arcTo(w * 0.3, h * 0.3, 0, 0, 1, w * 0.47, h * 0.334); 3002 c.fill(); 3003 3004 c.begin(); 3005 c.moveTo(w * 0.5438, h * 0.141); 3006 c.arcTo(w * 0.0776, h * 0.0898, 40, 0, 1, w * 0.6671, h * 0.2308); 3007 c.arcTo(w * 0.0776, h * 0.0898, 40, 0, 1, w * 0.5438, h * 0.141); 3008 c.close(); 3009 c.fill(); 3010}; 3011 3012mxCellRenderer.registerShape(mxMockupC.SHAPE_IINFO_ICON, mxShapeMockupiInfoIcon); 3013 3014 3015//********************************************************************************************************************************************************** 3016//Sort/Find Icon 3017//********************************************************************************************************************************************************** 3018/** 3019 * Extends mxShape. 3020 */ 3021function mxShapeMockupiSortFindIcon(bounds, fill, stroke, strokewidth) 3022{ 3023 mxShape.call(this); 3024 this.bounds = bounds; 3025 this.fill = fill; 3026 this.stroke = stroke; 3027 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 3028}; 3029 3030/** 3031 * Extends mxShape. 3032 */ 3033mxUtils.extend(mxShapeMockupiSortFindIcon, mxShape); 3034 3035/** 3036 * Function: paintVertexShape 3037 * 3038 * Paints the vertex shape. 3039 */ 3040mxShapeMockupiSortFindIcon.prototype.paintVertexShape = function(c, x, y, w, h) 3041{ 3042 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '').toString(); 3043 3044 c.translate(x, y); 3045 this.background(c, x, y, w, h, strokeColor); 3046 c.setShadow(false); 3047 this.foreground(c, x, y, w, h, strokeColor); 3048}; 3049 3050mxShapeMockupiSortFindIcon.prototype.background = function(c, x, y, w, h, strokeColor) 3051{ 3052 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString(); 3053 var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString(); 3054 c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 3055 3056 c.setStrokeWidth(1.5); 3057 c.setStrokeColor(strokeColor); 3058 c.roundrect(0, 0, w, h, w * 0.1, h * 0.1); 3059 c.fillAndStroke(); 3060}; 3061 3062mxShapeMockupiSortFindIcon.prototype.foreground = function(c, x, y, w, h, strokeColor) 3063{ 3064 c.setStrokeWidth((Math.min(h, w)) / 20); 3065 c.begin(); 3066 c.setFillColor('#ffffff'); 3067 c.moveTo(w * 0.1, h * 0.25); 3068 c.lineTo(w * 0.9, h * 0.25); 3069 c.moveTo(w * 0.1, h * 0.4); 3070 c.lineTo(w * 0.9, h * 0.4); 3071 c.moveTo(w * 0.1, h * 0.55); 3072 c.lineTo(w * 0.6, h * 0.55); 3073 c.moveTo(w * 0.1, h * 0.7); 3074 c.lineTo(w * 0.5, h * 0.7); 3075 c.stroke(); 3076 3077 c.begin(); 3078 c.ellipse(w * 0.6, h * 0.6, w * 0.2, h * 0.2); 3079 c.stroke(); 3080 3081 c.begin(); 3082 c.moveTo(w * 0.77, h * 0.77); 3083 c.lineTo(w * 0.85, h * 0.85); 3084 c.stroke(); 3085}; 3086 3087mxCellRenderer.registerShape(mxMockupC.SHAPE_ISORT_FIND_ICON, mxShapeMockupiSortFindIcon); 3088 3089//********************************************************************************************************************************************************** 3090//Check Icon 3091//********************************************************************************************************************************************************** 3092/** 3093 * Extends mxShape. 3094 */ 3095function mxShapeMockupiCheckIcon(bounds, fill, stroke, strokewidth) 3096{ 3097 mxShape.call(this); 3098 this.bounds = bounds; 3099 this.fill = fill; 3100 this.stroke = stroke; 3101 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 3102}; 3103 3104/** 3105 * Extends mxShape. 3106 */ 3107mxUtils.extend(mxShapeMockupiCheckIcon, mxShape); 3108 3109/** 3110 * Function: paintVertexShape 3111 * 3112 * Paints the vertex shape. 3113 */ 3114mxShapeMockupiCheckIcon.prototype.paintVertexShape = function(c, x, y, w, h) 3115{ 3116 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '').toString(); 3117 3118 c.translate(x, y); 3119 this.background(c, x, y, w, h, strokeColor); 3120 c.setShadow(false); 3121 this.foreground(c, x, y, w, h, strokeColor); 3122}; 3123 3124mxShapeMockupiCheckIcon.prototype.background = function(c, x, y, w, h, strokeColor) 3125{ 3126 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString(); 3127 var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString(); 3128 c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 3129 3130 c.setStrokeWidth(1.5); 3131 c.setStrokeColor(strokeColor); 3132 c.ellipse(0, 0, w, h); 3133 c.fillAndStroke(); 3134}; 3135 3136mxShapeMockupiCheckIcon.prototype.foreground = function(c, x, y, w, h, strokeColor) 3137{ 3138 c.setStrokeWidth(2.5); 3139 c.begin(); 3140 c.moveTo(w * 0.25, h * 0.5); 3141 c.lineTo(w * 0.5, h * 0.65); 3142 c.lineTo(w * 0.75, h * 0.25); 3143 c.stroke(); 3144}; 3145 3146mxCellRenderer.registerShape(mxMockupC.SHAPE_ICHECK_ICON, mxShapeMockupiCheckIcon); 3147 3148//********************************************************************************************************************************************************** 3149//Keyboard (letters) 3150//********************************************************************************************************************************************************** 3151/** 3152 * Extends mxShape. 3153 */ 3154function mxShapeMockupiKeybLetters(bounds, fill, stroke, strokewidth) 3155{ 3156 mxShape.call(this); 3157 this.bounds = bounds; 3158 this.fill = fill; 3159 this.stroke = stroke; 3160 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 3161}; 3162 3163/** 3164 * Extends mxShape. 3165 */ 3166mxUtils.extend(mxShapeMockupiKeybLetters, mxShape); 3167 3168/** 3169 * Function: paintVertexShape 3170 * 3171 * Paints the vertex shape. 3172 */ 3173mxShapeMockupiKeybLetters.prototype.paintVertexShape = function(c, x, y, w, h) 3174{ 3175 c.translate(x, y); 3176 this.background(c, x, y, w, h); 3177 c.setShadow(true); 3178 this.foreground(c, x, y, w, h); 3179}; 3180 3181mxShapeMockupiKeybLetters.prototype.background = function(c, x, y, w, h) 3182{ 3183 c.setGradient('#8A97A7', '#425163', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 3184 3185 c.rect(0, 0, w, h); 3186 c.fill(); 3187}; 3188 3189mxShapeMockupiKeybLetters.prototype.foreground = function(c, x, y, w, h, strokeColor) 3190{ 3191 c.setGradient('#EEF3F9', '#DBE2E9', w * 0.0086, h * 0.03, w * 0.0776, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1); 3192 rSizeX = w * 0.0144; 3193 rSizeY = h * 0.025; 3194 c.setFontSize(10.5); 3195 c.setFontColor('#000000'); 3196 3197 c.roundrect(w * 0.0086, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3198 c.fill(); 3199 c.text(w * 0.0474, h * 0.125, 0, 0, 'Q', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3200 3201 c.roundrect(w * 0.1092, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3202 c.fill(); 3203 c.text(w * 0.148, h * 0.125, 0, 0, 'W', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3204 3205 c.roundrect(w * 0.2098, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3206 c.fill(); 3207 c.text(w * 0.2486, h * 0.125, 0, 0, 'E', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3208 3209 c.roundrect(w * 0.3103, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3210 c.fill(); 3211 c.text(w * 0.3491, h * 0.125, 0, 0, 'R', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3212 3213 c.roundrect(w * 0.4109, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3214 c.fill(); 3215 c.text(w * 0.4497, h * 0.125, 0, 0, 'T', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3216 3217 c.roundrect(w * 0.5115, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3218 c.fill(); 3219 c.text(w * 0.5503, h * 0.125, 0, 0, 'Y', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3220 3221 c.roundrect(w * 0.6121, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3222 c.fill(); 3223 c.text(w * 0.6509, h * 0.125, 0, 0, 'U', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3224 3225 c.roundrect(w * 0.7126, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3226 c.fill(); 3227 c.text(w * 0.7514, h * 0.125, 0, 0, 'I', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3228 3229 c.roundrect(w * 0.8132, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3230 c.fill(); 3231 c.text(w * 0.852, h * 0.125, 0, 0, 'O', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3232 3233 c.roundrect(w * 0.9138, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3234 c.fill(); 3235 c.text(w * 0.9526, h * 0.125, 0, 0, 'P', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3236 3237 c.roundrect(w * 0.0632, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3238 c.fill(); 3239 c.text(w * 0.102, h * 0.375, 0, 0, 'A', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3240 3241 c.roundrect(w * 0.1638, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3242 c.fill(); 3243 c.text(w * 0.2026, h * 0.375, 0, 0, 'S', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3244 3245 c.roundrect(w * 0.2644, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3246 c.fill(); 3247 c.text(w * 0.3032, h * 0.375, 0, 0, 'D', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3248 3249 c.roundrect(w * 0.3649, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3250 c.fill(); 3251 c.text(w * 0.4037, h * 0.375, 0, 0, 'F', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3252 3253 c.roundrect(w * 0.4655, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3254 c.fill(); 3255 c.text(w * 0.5043, h * 0.375, 0, 0, 'G', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3256 3257 c.roundrect(w * 0.5661, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3258 c.fill(); 3259 c.text(w * 0.6049, h * 0.375, 0, 0, 'H', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3260 3261 c.roundrect(w * 0.6667, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3262 c.fill(); 3263 c.text(w * 0.7055, h * 0.375, 0, 0, 'J', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3264 3265 c.roundrect(w * 0.7672, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3266 c.fill(); 3267 c.text(w * 0.806, h * 0.375, 0, 0, 'K', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3268 3269 c.roundrect(w * 0.8678, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3270 c.fill(); 3271 c.text(w * 0.9066, h * 0.375, 0, 0, 'L', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3272 3273 3274 c.roundrect(w * 0.1638, h * 0.53, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3275 c.fill(); 3276 c.text(w * 0.2026, h * 0.625, 0, 0, 'Z', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3277 3278 c.roundrect(w * 0.2644, h * 0.53, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3279 c.fill(); 3280 c.text(w * 0.3032, h * 0.625, 0, 0, 'X', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3281 3282 c.roundrect(w * 0.3649, h * 0.53, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3283 c.fill(); 3284 c.text(w * 0.4037, h * 0.625, 0, 0, 'C', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3285 3286 c.roundrect(w * 0.4655, h * 0.53, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3287 c.fill(); 3288 c.text(w * 0.5043, h * 0.625, 0, 0, 'V', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3289 3290 c.roundrect(w * 0.5661, h * 0.53, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3291 c.fill(); 3292 c.text(w * 0.6049, h * 0.625, 0, 0, 'B', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3293 3294 c.roundrect(w * 0.6667, h * 0.53, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3295 c.fill(); 3296 c.text(w * 0.7055, h * 0.625, 0, 0, 'N', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3297 3298 c.roundrect(w * 0.7672, h * 0.53, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3299 c.fill(); 3300 c.text(w * 0.806, h * 0.625, 0, 0, 'M', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3301 3302 3303 c.roundrect(w * 0.2644, h * 0.78, w * 0.4799, h * 0.19, rSizeX, rSizeY); 3304 c.fill(); 3305 c.setFontColor('#666666'); 3306 c.text(w * 0.5043, h * 0.875, 0, 0, 'space', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3307 3308 c.setFontColor('#ffffff'); 3309 3310 c.setGradient('#8B98A8', '#677488', w * 0.0115, h * 0.53, w * 0.1207, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1); 3311 c.roundrect(w * 0.0115, h * 0.53, w * 0.1207, h * 0.19, rSizeX, rSizeY); 3312 c.fill(); 3313 3314 c.setGradient('#8B98A8', '#677488', w * 0.8736, h * 0.53, w * 0.115, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1); 3315 c.roundrect(w * 0.8736, h * 0.53, w * 0.115, h * 0.19, rSizeX, rSizeY); 3316 c.fill(); 3317 c.setGradient('#8B98A8', '#677488', w * 0.0115, h * 0.78, w * 0.2299, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1); 3318 c.roundrect(w * 0.0115, h * 0.78, w * 0.2299, h * 0.19, rSizeX, rSizeY); 3319 c.fill(); 3320 c.setGradient('#8B98A8', '#677488', w * 0.7672, h * 0.78, w * 0.2213, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1); 3321 c.roundrect(w * 0.7672, h * 0.78, w * 0.2213, h * 0.19, rSizeX, rSizeY); 3322 c.fill(); 3323 c.text(w * 0.1264, h * 0.875, 0, 0, '.?123', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3324 c.text(w * 0.8779, h * 0.875, 0, 0, 'return', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3325 3326 c.setShadow(false); 3327 c.setLineJoin('round'); 3328 c.setStrokeColor('#ffffff'); 3329 c.setFillColor('#ffffff'); 3330 c.setStrokeWidth(1.5); 3331 c.begin(); 3332 c.moveTo(w * 0.0402, h * 0.635); 3333 c.lineTo(w * 0.0718, h * 0.58); 3334 c.lineTo(w * 0.1034, h * 0.635); 3335 c.lineTo(w * 0.0862, h * 0.635); 3336 c.lineTo(w * 0.0862, h * 0.67); 3337 c.lineTo(w * 0.0575, h * 0.67); 3338 c.lineTo(w * 0.0575, h * 0.635); 3339 c.close(); 3340 c.stroke(); 3341 3342 c.begin(); 3343 c.moveTo(w * 0.9109, h * 0.585); 3344 c.lineTo(w * 0.9655, h * 0.585); 3345 c.lineTo(w * 0.9655, h * 0.665); 3346 c.lineTo(w * 0.9109, h * 0.665); 3347 c.lineTo(w * 0.8879, h * 0.625); 3348 c.close(); 3349 c.fillAndStroke(); 3350 3351 c.setStrokeColor('#677488'); 3352 c.begin(); 3353 c.moveTo(w * 0.9224, h * 0.605); 3354 c.lineTo(w * 0.9454, h * 0.645); 3355 c.moveTo(w * 0.9224, h * 0.645); 3356 c.lineTo(w * 0.9454, h * 0.605); 3357 c.stroke(); 3358}; 3359 3360mxCellRenderer.registerShape(mxMockupC.SHAPE_IKEYB_LETTERS, mxShapeMockupiKeybLetters); 3361 3362//********************************************************************************************************************************************************** 3363//Keyboard (numbers) 3364//********************************************************************************************************************************************************** 3365/** 3366 * Extends mxShape. 3367 */ 3368function mxShapeMockupiKeybNumbers(bounds, fill, stroke, strokewidth) 3369{ 3370 mxShape.call(this); 3371 this.bounds = bounds; 3372 this.fill = fill; 3373 this.stroke = stroke; 3374 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 3375}; 3376 3377/** 3378 * Extends mxShape. 3379 */ 3380mxUtils.extend(mxShapeMockupiKeybNumbers, mxShape); 3381 3382/** 3383 * Function: paintVertexShape 3384 * 3385 * Paints the vertex shape. 3386 */ 3387mxShapeMockupiKeybNumbers.prototype.paintVertexShape = function(c, x, y, w, h) 3388{ 3389 c.translate(x, y); 3390 this.background(c, x, y, w, h); 3391 c.setShadow(true); 3392 this.foreground(c, x, y, w, h); 3393}; 3394 3395mxShapeMockupiKeybNumbers.prototype.background = function(c, x, y, w, h) 3396{ 3397 c.setGradient('#8A97A7', '#425163', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 3398 3399 c.rect(0, 0, w, h); 3400 c.fill(); 3401}; 3402 3403mxShapeMockupiKeybNumbers.prototype.foreground = function(c, x, y, w, h, strokeColor) 3404{ 3405 c.setGradient('#EEF3F9', '#DBE2E9', w * 0.0086, h * 0.03, w * 0.0776, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1); 3406 rSizeX = w * 0.0144; 3407 rSizeY = h * 0.025; 3408 c.setFontSize(10.5); 3409 c.setFontColor('#000000'); 3410 3411 c.roundrect(w * 0.0086, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3412 c.fill(); 3413 c.text(w * 0.0474, h * 0.125, 0, 0, '1', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3414 3415 c.roundrect(w * 0.1092, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3416 c.fill(); 3417 c.text(w * 0.148, h * 0.125, 0, 0, '2', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3418 3419 c.roundrect(w * 0.2098, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3420 c.fill(); 3421 c.text(w * 0.2486, h * 0.125, 0, 0, '3', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3422 3423 c.roundrect(w * 0.3103, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3424 c.fill(); 3425 c.text(w * 0.3491, h * 0.125, 0, 0, '4', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3426 3427 c.roundrect(w * 0.4109, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3428 c.fill(); 3429 c.text(w * 0.4497, h * 0.125, 0, 0, '5', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3430 3431 c.roundrect(w * 0.5115, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3432 c.fill(); 3433 c.text(w * 0.5503, h * 0.125, 0, 0, '6', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3434 3435 c.roundrect(w * 0.6121, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3436 c.fill(); 3437 c.text(w * 0.6509, h * 0.125, 0, 0, '7', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3438 3439 c.roundrect(w * 0.7126, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3440 c.fill(); 3441 c.text(w * 0.7514, h * 0.125, 0, 0, '8', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3442 3443 c.roundrect(w * 0.8132, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3444 c.fill(); 3445 c.text(w * 0.852, h * 0.125, 0, 0, '9', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3446 3447 c.roundrect(w * 0.9138, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3448 c.fill(); 3449 c.text(w * 0.9526, h * 0.125, 0, 0, '0', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3450 3451 c.roundrect(w * 0.0086, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3452 c.fill(); 3453 c.text(w * 0.0474, h * 0.375, 0, 0, '-', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3454 3455 c.roundrect(w * 0.1092, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3456 c.fill(); 3457 c.text(w * 0.148, h * 0.375, 0, 0, '/', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3458 3459 c.roundrect(w * 0.2098, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3460 c.fill(); 3461 c.text(w * 0.2486, h * 0.375, 0, 0, ':', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3462 3463 c.roundrect(w * 0.3103, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3464 c.fill(); 3465 c.text(w * 0.3491, h * 0.375, 0, 0, ';', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3466 3467 c.roundrect(w * 0.4109, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3468 c.fill(); 3469 c.text(w * 0.4497, h * 0.375, 0, 0, '(', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3470 3471 c.roundrect(w * 0.5115, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3472 c.fill(); 3473 c.text(w * 0.5503, h * 0.375, 0, 0, ')', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3474 3475 c.roundrect(w * 0.6121, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3476 c.fill(); 3477 c.text(w * 0.6509, h * 0.375, 0, 0, '$', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3478 3479 c.roundrect(w * 0.7126, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3480 c.fill(); 3481 c.text(w * 0.7514, h * 0.375, 0, 0, '&', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3482 3483 c.roundrect(w * 0.8132, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3484 c.fill(); 3485 c.text(w * 0.852, h * 0.375, 0, 0, '@', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3486 3487 c.roundrect(w * 0.9138, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3488 c.fill(); 3489 c.text(w * 0.9526, h * 0.375, 0, 0, '\"', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3490 3491 c.roundrect(w * 0.1638, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY); 3492 c.fill(); 3493 c.text(w * 0.2227, h * 0.625, 0, 0, '.', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3494 3495 c.roundrect(w * 0.3046, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY); 3496 c.fill(); 3497 c.text(w * 0.3635, h * 0.625, 0, 0, ',', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3498 3499 c.roundrect(w * 0.4454, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY); 3500 c.fill(); 3501 c.text(w * 0.5043, h * 0.625, 0, 0, '?', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3502 3503 c.roundrect(w * 0.5862, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY); 3504 c.fill(); 3505 c.text(w * 0.6451, h * 0.625, 0, 0, '!', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3506 3507 c.roundrect(w * 0.727, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY); 3508 c.fill(); 3509 c.text(w * 0.7859, h * 0.625, 0, 0, '\'', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3510 3511 3512 c.roundrect(w * 0.2644, h * 0.78, w * 0.4799, h * 0.19, rSizeX, rSizeY); 3513 c.fill(); 3514 c.setFontColor('#666666'); 3515 c.text(w * 0.5043, h * 0.875, 0, 0, 'space', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3516 3517 c.setGradient('#8B98A8', '#677488', w * 0.0115, h * 0.53, w * 0.1207, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1); 3518 c.setFontColor('#ffffff'); 3519 3520 c.roundrect(w * 0.0115, h * 0.53, w * 0.1207, h * 0.19, rSizeX, rSizeY); 3521 c.fill(); 3522 3523 c.roundrect(w * 0.8736, h * 0.53, w * 0.115, h * 0.19, rSizeX, rSizeY); 3524 c.fill(); 3525 c.roundrect(w * 0.0115, h * 0.78, w * 0.2299, h * 0.19, rSizeX, rSizeY); 3526 c.fill(); 3527 c.roundrect(w * 0.7672, h * 0.78, w * 0.2213, h * 0.19, rSizeX, rSizeY); 3528 c.fill(); 3529 c.text(w * 0.0718, h * 0.625, 0, 0, '#+=', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3530 c.text(w * 0.1264, h * 0.875, 0, 0, 'ABC', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3531 c.text(w * 0.8779, h * 0.875, 0, 0, 'return', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3532 3533 c.setShadow(false); 3534 c.setLineJoin('round'); 3535 c.setStrokeColor('#ffffff'); 3536 c.setFillColor('#ffffff'); 3537 c.setStrokeWidth(1.5); 3538 c.begin(); 3539 c.moveTo(w * 0.9109, h * 0.585); 3540 c.lineTo(w * 0.9655, h * 0.585); 3541 c.lineTo(w * 0.9655, h * 0.665); 3542 c.lineTo(w * 0.9109, h * 0.665); 3543 c.lineTo(w * 0.8879, h * 0.625); 3544 c.close(); 3545 c.fillAndStroke(); 3546 3547 c.setStrokeColor('#677488'); 3548 c.begin(); 3549 c.moveTo(w * 0.9224, h * 0.605); 3550 c.lineTo(w * 0.9454, h * 0.645); 3551 c.moveTo(w * 0.9224, h * 0.645); 3552 c.lineTo(w * 0.9454, h * 0.605); 3553 c.stroke(); 3554}; 3555 3556mxCellRenderer.registerShape(mxMockupC.SHAPE_IKEYB_NUMBERS, mxShapeMockupiKeybNumbers); 3557 3558//********************************************************************************************************************************************************** 3559//Keyboard (symbols) 3560//********************************************************************************************************************************************************** 3561/** 3562 * Extends mxShape. 3563 */ 3564function mxShapeMockupiKeybSymbols(bounds, fill, stroke, strokewidth) 3565{ 3566 mxShape.call(this); 3567 this.bounds = bounds; 3568 this.fill = fill; 3569 this.stroke = stroke; 3570 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 3571}; 3572 3573/** 3574 * Extends mxShape. 3575 */ 3576mxUtils.extend(mxShapeMockupiKeybSymbols, mxShape); 3577 3578/** 3579 * Function: paintVertexShape 3580 * 3581 * Paints the vertex shape. 3582 */ 3583mxShapeMockupiKeybSymbols.prototype.paintVertexShape = function(c, x, y, w, h) 3584{ 3585 c.translate(x, y); 3586 this.background(c, x, y, w, h); 3587 c.setShadow(true); 3588 this.foreground(c, x, y, w, h); 3589}; 3590 3591mxShapeMockupiKeybSymbols.prototype.background = function(c, x, y, w, h) 3592{ 3593 c.setGradient('#8A97A7', '#425163', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 3594 3595 c.rect(0, 0, w, h); 3596 c.fill(); 3597}; 3598 3599mxShapeMockupiKeybSymbols.prototype.foreground = function(c, x, y, w, h, strokeColor) 3600{ 3601 c.setGradient('#EEF3F9', '#DBE2E9', w * 0.0086, h * 0.03, w * 0.0776, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1); 3602 rSizeX = w * 0.0144; 3603 rSizeY = h * 0.025; 3604 c.setFontSize(10.5); 3605 c.setFontColor('#000000'); 3606 3607 c.roundrect(w * 0.0086, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3608 c.fill(); 3609 c.text(w * 0.0474, h * 0.125, 0, 0, '[', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3610 3611 c.roundrect(w * 0.1092, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3612 c.fill(); 3613 c.text(w * 0.148, h * 0.125, 0, 0, ']', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3614 3615 c.roundrect(w * 0.2098, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3616 c.fill(); 3617 c.text(w * 0.2486, h * 0.125, 0, 0, '{', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3618 3619 c.roundrect(w * 0.3103, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3620 c.fill(); 3621 c.text(w * 0.3491, h * 0.125, 0, 0, '}', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3622 3623 c.roundrect(w * 0.4109, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3624 c.fill(); 3625 c.text(w * 0.4497, h * 0.125, 0, 0, '#', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3626 3627 c.roundrect(w * 0.5115, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3628 c.fill(); 3629 c.text(w * 0.5503, h * 0.125, 0, 0, '%', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3630 3631 c.roundrect(w * 0.6121, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3632 c.fill(); 3633 c.text(w * 0.6509, h * 0.125, 0, 0, '^', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3634 3635 c.roundrect(w * 0.7126, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3636 c.fill(); 3637 c.text(w * 0.7514, h * 0.125, 0, 0, '*', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3638 3639 c.roundrect(w * 0.8132, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3640 c.fill(); 3641 c.text(w * 0.852, h * 0.125, 0, 0, '+', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3642 3643 c.roundrect(w * 0.9138, h * 0.03, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3644 c.fill(); 3645 c.text(w * 0.9526, h * 0.125, 0, 0, '=', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3646 3647 c.roundrect(w * 0.0086, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3648 c.fill(); 3649 c.text(w * 0.0474, h * 0.375, 0, 0, '_', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3650 3651 c.roundrect(w * 0.1092, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3652 c.fill(); 3653 c.text(w * 0.148, h * 0.375, 0, 0, '\\', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3654 3655 c.roundrect(w * 0.2098, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3656 c.fill(); 3657 c.text(w * 0.2486, h * 0.375, 0, 0, '|', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3658 3659 c.roundrect(w * 0.3103, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3660 c.fill(); 3661 c.text(w * 0.3491, h * 0.375, 0, 0, '~', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3662 3663 c.roundrect(w * 0.4109, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3664 c.fill(); 3665 c.text(w * 0.4497, h * 0.375, 0, 0, '<', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3666 3667 c.roundrect(w * 0.5115, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3668 c.fill(); 3669 c.text(w * 0.5503, h * 0.375, 0, 0, '>', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3670 3671 c.roundrect(w * 0.6121, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3672 c.fill(); 3673 c.text(w * 0.6509, h * 0.375, 0, 0, String.fromCharCode(128), mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3674 3675 c.roundrect(w * 0.7126, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3676 c.fill(); 3677 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); 3678 3679 c.roundrect(w * 0.8132, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3680 c.fill(); 3681 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); 3682 3683 c.roundrect(w * 0.9138, h * 0.28, w * 0.0776, h * 0.19, rSizeX, rSizeY); 3684 c.fill(); 3685 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); 3686 3687 c.roundrect(w * 0.1638, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY); 3688 c.fill(); 3689 c.text(w * 0.2227, h * 0.625, 0, 0, '.', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3690 3691 c.roundrect(w * 0.3046, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY); 3692 c.fill(); 3693 c.text(w * 0.3635, h * 0.625, 0, 0, ',', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3694 3695 c.roundrect(w * 0.4454, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY); 3696 c.fill(); 3697 c.text(w * 0.5043, h * 0.625, 0, 0, '?', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3698 3699 c.roundrect(w * 0.5862, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY); 3700 c.fill(); 3701 c.text(w * 0.6451, h * 0.625, 0, 0, '!', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3702 3703 c.roundrect(w * 0.727, h * 0.53, w * 0.1178, h * 0.19, rSizeX, rSizeY); 3704 c.fill(); 3705 c.text(w * 0.7859, h * 0.625, 0, 0, '\'', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3706 3707 c.roundrect(w * 0.2644, h * 0.78, w * 0.4799, h * 0.19, rSizeX, rSizeY); 3708 c.fill(); 3709 c.setFontColor('#666666'); 3710 c.text(w * 0.5043, h * 0.875, 0, 0, 'space', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3711 3712 c.setGradient('#8B98A8', '#677488', w * 0.0115, h * 0.53, w * 0.1207, h * 0.19, mxConstants.DIRECTION_SOUTH, 1, 1); 3713 c.setFontColor('#ffffff'); 3714 3715 c.roundrect(w * 0.0115, h * 0.53, w * 0.1207, h * 0.19, rSizeX, rSizeY); 3716 c.fill(); 3717 3718 c.roundrect(w * 0.8736, h * 0.53, w * 0.115, h * 0.19, rSizeX, rSizeY); 3719 c.fill(); 3720 c.roundrect(w * 0.0115, h * 0.78, w * 0.2299, h * 0.19, rSizeX, rSizeY); 3721 c.fill(); 3722 c.roundrect(w * 0.7672, h * 0.78, w * 0.2213, h * 0.19, rSizeX, rSizeY); 3723 c.fill(); 3724 c.text(w * 0.0718, h * 0.625, 0, 0, '123', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3725 c.text(w * 0.1264, h * 0.875, 0, 0, 'ABC', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3726 c.text(w * 0.8779, h * 0.875, 0, 0, 'return', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3727 3728 c.setShadow(false); 3729 c.setLineJoin('round'); 3730 c.setStrokeColor('#ffffff'); 3731 c.setFillColor('#ffffff'); 3732 c.setStrokeWidth(1.5); 3733 c.begin(); 3734 c.moveTo(w * 0.9109, h * 0.585); 3735 c.lineTo(w * 0.9655, h * 0.585); 3736 c.lineTo(w * 0.9655, h * 0.665); 3737 c.lineTo(w * 0.9109, h * 0.665); 3738 c.lineTo(w * 0.8879, h * 0.625); 3739 c.close(); 3740 c.fillAndStroke(); 3741 3742 c.setStrokeColor('#677488'); 3743 c.begin(); 3744 c.moveTo(w * 0.9224, h * 0.605); 3745 c.lineTo(w * 0.9454, h * 0.645); 3746 c.moveTo(w * 0.9224, h * 0.645); 3747 c.lineTo(w * 0.9454, h * 0.605); 3748 c.stroke(); 3749}; 3750 3751mxCellRenderer.registerShape(mxMockupC.SHAPE_IKEYB_SYMBOLS, mxShapeMockupiKeybSymbols); 3752 3753//********************************************************************************************************************************************************** 3754//Delete App 3755//********************************************************************************************************************************************************** 3756/** 3757 * Extends mxShape. 3758 */ 3759function mxShapeMockupiDeleteApp(bounds, fill, stroke, strokewidth) 3760{ 3761 mxShape.call(this); 3762 this.bounds = bounds; 3763 this.fill = fill; 3764 this.stroke = stroke; 3765 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 3766}; 3767 3768/** 3769 * Extends mxShape. 3770 */ 3771mxUtils.extend(mxShapeMockupiDeleteApp, mxShape); 3772 3773/** 3774 * Function: paintVertexShape 3775 * 3776 * Paints the vertex shape. 3777 */ 3778mxShapeMockupiDeleteApp.prototype.paintVertexShape = function(c, x, y, w, h) 3779{ 3780 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '').toString(); 3781 3782 c.translate(x, y); 3783 this.background(c, x, y, w, h, strokeColor); 3784 c.setShadow(false); 3785 this.foreground(c, x, y, w, h); 3786}; 3787 3788mxShapeMockupiDeleteApp.prototype.background = function(c, x, y, w, h, strokeColor) 3789{ 3790 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '').toString(); 3791 var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '').toString(); 3792 c.setGradient(fillColor, fillColor2, 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 3793 3794 c.setStrokeWidth(1.5); 3795 c.setStrokeColor(strokeColor); 3796 c.ellipse(0, 0, w, h); 3797 c.fillAndStroke(); 3798}; 3799 3800mxShapeMockupiDeleteApp.prototype.foreground = function(c, x, y, w, h) 3801{ 3802 c.setStrokeWidth(2.5); 3803 c.begin(); 3804 c.moveTo(w * 0.3, h * 0.3); 3805 c.lineTo(w * 0.7, h * 0.7); 3806 c.moveTo(w * 0.3, h * 0.7); 3807 c.lineTo(w * 0.7, h * 0.3); 3808 c.stroke(); 3809}; 3810 3811mxCellRenderer.registerShape(mxMockupC.SHAPE_IDELETE_APP, mxShapeMockupiDeleteApp); 3812 3813//********************************************************************************************************************************************************** 3814//Direction 3815//********************************************************************************************************************************************************** 3816/** 3817 * Extends mxShape. 3818 */ 3819function mxShapeMockupiDirection(bounds, fill, stroke, strokewidth) 3820{ 3821 mxShape.call(this); 3822 this.bounds = bounds; 3823 this.fill = fill; 3824 this.stroke = stroke; 3825 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 3826}; 3827 3828/** 3829 * Extends mxShape. 3830 */ 3831mxUtils.extend(mxShapeMockupiDirection, mxShape); 3832 3833/** 3834 * Function: paintVertexShape 3835 * 3836 * Paints the vertex shape. 3837 */ 3838mxShapeMockupiDirection.prototype.paintVertexShape = function(c, x, y, w, h) 3839{ 3840 c.translate(x, y); 3841 this.background(c, x, y, w, h); 3842 c.setShadow(false); 3843 this.foreground(c, x, y, w, h); 3844}; 3845 3846mxShapeMockupiDirection.prototype.background = function(c, x, y, w, h) 3847{ 3848 c.setStrokeWidth(0.5); 3849 c.setStrokeColor('#008cff'); 3850 c.ellipse(0, 0, w, h); 3851 c.stroke(); 3852}; 3853 3854mxShapeMockupiDirection.prototype.foreground = function(c, x, y, w, h) 3855{ 3856 c.setAlpha(1); 3857 c.setGradient('#ffffff', '#ffffff', w * 0.29, h * 0.2, w * 0.42, h * 0.3, mxConstants.DIRECTION_NORTH, 1, 0); 3858 c.begin(); 3859 c.moveTo(w * 0.29, h * 0.2); 3860 c.lineTo(w * 0.5, h * 0.5); 3861 c.lineTo(w * 0.71, h * 0.2); 3862 c.fillAndStroke(); 3863 3864 c.setStrokeColor('#006cdf'); 3865 c.setGradient('#ffffff', '#007cef', w * 0.47, h * 0.47, w * 0.06, h * 0.06, mxConstants.DIRECTION_SOUTH, 1, 1); 3866 c.setAlpha(1); 3867 c.ellipse(w * 0.47, h * 0.47, w * 0.06, h * 0.06); 3868 c.fillAndStroke(); 3869 3870 c.setFillColor('#ffffff'); 3871 c.setAlpha(0.8); 3872 c.ellipse(w * 0.4825, h * 0.4825, w * 0.015, h * 0.015); 3873 c.fill(); 3874}; 3875 3876mxCellRenderer.registerShape(mxMockupC.SHAPE_IDIRECTION, mxShapeMockupiDirection); 3877 3878//********************************************************************************************************************************************************** 3879//Location Bar 3880//********************************************************************************************************************************************************** 3881/** 3882 * Extends mxShape. 3883 */ 3884function mxShapeMockupiLocationBar(bounds, fill, stroke, strokewidth) 3885{ 3886 mxShape.call(this); 3887 this.bounds = bounds; 3888 this.fill = fill; 3889 this.stroke = stroke; 3890 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 3891}; 3892 3893/** 3894 * Extends mxShape. 3895 */ 3896mxUtils.extend(mxShapeMockupiLocationBar, mxShape); 3897 3898mxShapeMockupiLocationBar.prototype.customProperties = [ 3899 {name: 'buttonText', dispName: 'Text', type: 'string'}, 3900 {name: 'barPos', dispName: 'Callout Position', type: 'float', min:0, defVal:80}, 3901 {name: 'pointerPos', dispName: 'Callout Orientation', type: 'enum', 3902 enumList: [{val: 'bottom', dispName: 'Bottom'}, {val: 'top', dispName: 'Top'}] 3903 } 3904]; 3905 3906/** 3907 * Function: paintVertexShape 3908 * 3909 * Paints the vertex shape. 3910 */ 3911mxShapeMockupiLocationBar.prototype.paintVertexShape = function(c, x, y, w, h) 3912{ 3913 c.translate(x, y); 3914 this.background(c, x, y, w, h); 3915 c.setShadow(false); 3916 this.foreground(c, x, y, w, h); 3917}; 3918 3919mxShapeMockupiLocationBar.prototype.background = function(c, x, y, w, h) 3920{ 3921 var barPos = mxUtils.getValue(this.style, mxMockupC.BAR_POS, '80'); 3922 barPos = Math.min(barPos, 100); 3923 barPos = Math.max(barPos, 0); 3924 var pointerPos = mxUtils.getValue(this.style, mxMockupC.POINTER_POS, mxMockupC.POINTER_BOTTOM); 3925 var rSize = 2.5; 3926 var deadzone = rSize + 7.5; // rounding + pointer width / 2 3927 var virRange = w - 2 * deadzone; 3928 var truePos = deadzone + virRange * barPos / 100; 3929 c.setStrokeWidth(0.5); 3930 c.setStrokeColor('#000000'); 3931 c.setAlpha(0.7); 3932 c.begin(); 3933 3934 if (pointerPos === mxMockupC.POINTER_BOTTOM) 3935 { 3936 c.setGradient('#000000', '#888888', 0, 0, w, h, mxConstants.DIRECTION_NORTH, 1, 1); 3937 c.moveTo(0, rSize); 3938 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 3939 c.lineTo(w - rSize, 0); 3940 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 3941 c.lineTo(w, h - rSize - 7.5); 3942 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h - 7.5); 3943 c.lineTo(truePos + 7.5, h - 7.5); 3944 c.lineTo(truePos, h); 3945 c.lineTo(truePos - 7.5, h - 7.5); 3946 c.lineTo(rSize, h - 7.5); 3947 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize - 7.5); 3948 } 3949 else if (pointerPos === mxMockupC.POINTER_TOP) 3950 { 3951 c.setGradient('#000000', '#888888', 0, 0, w, h, mxConstants.DIRECTION_NORTH, 1, 1); 3952 c.moveTo(0, rSize + 7.5); 3953 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 7.5); 3954 c.lineTo(truePos - 7.5, 7.5); 3955 c.lineTo(truePos, 0); 3956 c.lineTo(truePos + 7.5, 7.5); 3957 c.lineTo(w - rSize, 7.5); 3958 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize + 7.5); 3959 c.lineTo(w, h - rSize); 3960 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h); 3961 c.lineTo(rSize, h); 3962 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize); 3963 } 3964 3965 c.close(); 3966 c.fillAndStroke(); 3967}; 3968 3969mxShapeMockupiLocationBar.prototype.foreground = function(c, x, y, w, h) 3970{ 3971 var pointerPos = mxUtils.getValue(this.style, mxMockupC.POINTER_POS, mxMockupC.POINTER_BOTTOM); 3972 var locText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Some Location'); 3973 c.setAlpha(1); 3974 c.setFontColor('#ffffff'); 3975 c.setFontSize(9.5); 3976 3977 if (pointerPos === mxMockupC.POINTER_BOTTOM) 3978 { 3979 c.text(5, (h - 7.5) * 0.5, 0, 0, locText, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3980 c.translate(w - 20, (h - 7.5) * 0.5 - 7.5); 3981 } 3982 else 3983 { 3984 c.text(5, (h + 7.5) * 0.5, 0, 0, locText, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 3985 c.translate(w - 20, (h + 7.5) * 0.5 - 7.5); 3986 } 3987 3988 w = 15; 3989 h = 15; 3990 3991 c.setGradient('#8BbEff', '#135Ec8', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 3992 3993 c.setStrokeWidth(1.5); 3994 c.setStrokeColor('#ffffff'); 3995 c.ellipse(0, 0, w, h); 3996 c.fillAndStroke(); 3997 3998 c.setStrokeWidth(2.5); 3999 c.begin(); 4000 c.moveTo(w * 0.4, h * 0.22); 4001 c.lineTo(w * 0.65, h * 0.5); 4002 c.lineTo(w * 0.4, h * 0.78); 4003 c.stroke(); 4004}; 4005 4006mxCellRenderer.registerShape(mxMockupC.SHAPE_ILOCATION_BAR, mxShapeMockupiLocationBar); 4007 4008//********************************************************************************************************************************************************** 4009//Call Dialog 4010//********************************************************************************************************************************************************** 4011/** 4012 * Extends mxShape. 4013 */ 4014function mxShapeMockupiCallDialog(bounds, fill, stroke, strokewidth) 4015{ 4016 mxShape.call(this); 4017 this.bounds = bounds; 4018 this.fill = fill; 4019 this.stroke = stroke; 4020 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 4021}; 4022 4023/** 4024 * Extends mxShape. 4025 */ 4026mxUtils.extend(mxShapeMockupiCallDialog, mxShape); 4027 4028/** 4029 * Function: paintVertexShape 4030 * 4031 * Paints the vertex shape. 4032 */ 4033mxShapeMockupiCallDialog.prototype.paintVertexShape = function(c, x, y, w, h) 4034{ 4035 var rSize = 5; 4036 c.translate(x, y); 4037 this.background(c, x, y, w, h, rSize); 4038 c.setShadow(false); 4039 this.foreground(c, x, y, w, h, rSize); 4040}; 4041 4042mxShapeMockupiCallDialog.prototype.background = function(c, x, y, w, h, rSize) 4043{ 4044 c.setAlpha(0.8); 4045 c.setStrokeColor('#888888'); 4046 c.setStrokeWidth(1.5); 4047 c.setFillColor('#000000'); 4048 c.roundrect(0, 0, w, h, rSize, rSize); 4049 c.fillAndStroke(); 4050}; 4051 4052mxShapeMockupiCallDialog.prototype.foreground = function(c, x, y, w, h, rSize) 4053{ 4054 4055 c.begin(); 4056 c.moveTo(w * 0.33, 0); 4057 c.lineTo(w * 0.33, h); 4058 c.moveTo(w * 0.67, 0); 4059 c.lineTo(w * 0.67, h); 4060 c.moveTo(0, h * 0.5); 4061 c.lineTo(w, h * 0.5); 4062 c.stroke(); 4063 4064 c.setStrokeColor('#000000'); 4065 c.setFillColor('#ffffff'); 4066 c.setStrokeWidth(0.5); 4067 c.roundrect(w * 0.1433, h * 0.104, w * 0.0417, h * 0.148, w * 0.02, h * 0.024); 4068 c.fill(); 4069 4070 c.begin(); 4071 c.moveTo(w * 0.14, h * 0.188); 4072 c.lineTo(w * 0.14, h * 0.228); 4073 c.arcTo(w * 0.025, h * 0.03, 0, 0, 0, w * 0.19, h * 0.228); 4074 c.lineTo(w * 0.19, h * 0.188); 4075 c.lineTo(w * 0.2, h * 0.188); 4076 c.lineTo(w * 0.2, h * 0.228); 4077 c.arcTo(w * 0.0367, h * 0.044, 0, 0, 1, w * 0.17, h * 0.27); 4078 c.lineTo(w * 0.17, h * 0.296); 4079 c.lineTo(w * 0.195, h * 0.296); 4080 c.lineTo(w * 0.195, h * 0.308); 4081 c.lineTo(w * 0.1367, h * 0.308); 4082 c.lineTo(w * 0.1367, h * 0.296); 4083 c.lineTo(w * 0.16, h * 0.296); 4084 c.lineTo(w * 0.16, h * 0.27); 4085 c.arcTo(w * 0.0367, h * 0.044, 0, 0, 1, w * 0.13, h * 0.228); 4086 c.lineTo(w * 0.13, h * 0.188); 4087 c.close(); 4088 c.fillAndStroke(); 4089 4090 c.begin(); 4091 c.moveTo(w * 0.1033, h * 0.108); 4092 c.lineTo(w * 0.24, h * 0.286); 4093 c.lineTo(w * 0.2317, h * 0.298); 4094 c.lineTo(w * 0.095, h * 0.12); 4095 c.close(); 4096 c.fillAndStroke(); 4097 4098 c.rect(w * 0.44, h * 0.128, w * 0.033, h * 0.04); 4099 c.fill(); 4100 c.rect(w * 0.485, h * 0.128, w * 0.033, h * 0.04); 4101 c.fill(); 4102 c.rect(w * 0.53, h * 0.128, w * 0.033, h * 0.04); 4103 c.fill(); 4104 c.rect(w * 0.44, h * 0.186, w * 0.033, h * 0.04); 4105 c.fill(); 4106 c.rect(w * 0.485, h * 0.186, w * 0.033, h * 0.04); 4107 c.fill(); 4108 c.rect(w * 0.53, h * 0.186, w * 0.033, h * 0.04); 4109 c.fill(); 4110 c.rect(w * 0.44, h * 0.244, w * 0.033, h * 0.04); 4111 c.fill(); 4112 c.rect(w * 0.485, h * 0.244, w * 0.033, h * 0.04); 4113 c.fill(); 4114 c.rect(w * 0.53, h * 0.244, w * 0.033, h * 0.04); 4115 c.fill(); 4116 4117 c.begin(); 4118 c.moveTo(w * 0.7567, h * 0.18); 4119 c.lineTo(w * 0.785, h * 0.18); 4120 c.lineTo(w * 0.825, h * 0.128); 4121 c.lineTo(w * 0.825, h * 0.28); 4122 c.lineTo(w * 0.79, h * 0.234); 4123 c.lineTo(w * 0.7567, h * 0.234); 4124 c.close(); 4125 c.fill(); 4126 4127 c.setStrokeWidth(1.5); 4128 c.setStrokeColor('#ffffff'); 4129 c.begin(); 4130 c.moveTo(w * 0.8383, h * 0.16); 4131 c.arcTo(w * 0.0533, h * 0.064, 0, 0, 1, w * 0.8383, h * 0.252); 4132 c.moveTo(w * 0.8583, h * 0.134); 4133 c.arcTo(w * 0.0817, h * 0.098, 0, 0, 1, w * 0.8583, h * 0.276); 4134 c.moveTo(w * 0.8767, h * 0.11); 4135 c.arcTo(w * 0.1133, h * 0.136, 0, 0, 1, w * 0.8767, h * 0.304); 4136 c.stroke(); 4137 4138 c.begin(); 4139 c.moveTo(w * 0.1467, h * 0.62); 4140 c.lineTo(w * 0.1833, h * 0.62); 4141 c.lineTo(w * 0.1833,h * 0.676); 4142 c.lineTo(w * 0.2267,h * 0.676); 4143 c.lineTo(w * 0.2267,h * 0.724); 4144 c.lineTo(w * 0.1833,h * 0.724); 4145 c.lineTo(w * 0.1833,h * 0.78); 4146 c.lineTo(w * 0.1467,h * 0.78); 4147 c.lineTo(w * 0.1467,h * 0.724); 4148 c.lineTo(w * 0.105,h * 0.724); 4149 c.lineTo(w * 0.105,h * 0.676); 4150 c.lineTo(w * 0.1467,h * 0.676); 4151 c.close(); 4152 c.fill(); 4153 4154 c.rect(w * 0.4517, h * 0.624, w * 0.0333, h * 0.152); 4155 c.fill(); 4156 4157 c.rect(w * 0.5183, h * 0.624, w * 0.0333, h * 0.152); 4158 c.fill(); 4159 4160 c.begin(); 4161 c.moveTo(w * 0.76, h * 0.752); 4162 c.arcTo(w * 0.1, h * 0.12, 0, 0, 1, w * 0.8033, h * 0.728); 4163 c.arcTo(w * 0.0167, h * 0.02, 0, 0, 0, w * 0.8167, h * 0.712); 4164 c.lineTo(w * 0.8175, h * 0.7); 4165 c.arcTo(w * 0.0267, h * 0.06, 0, 0, 1, w * 0.8067, h * 0.644); 4166 c.arcTo(w * 0.0287, h * 0.0344, 0, 0, 1, w * 0.8633, h * 0.644); 4167 c.arcTo(w * 0.0267, h * 0.06, 0, 0, 1, w * 0.855, h * 0.7); 4168 c.arcTo(w * 0.05, h * 0.724, 0, 0, 1, w * 0.8633, h * 0.724); 4169 c.arcTo(w * 0.1667, h * 0.75, 0, 0, 1, w * 0.9083, h * 0.75); 4170 c.lineTo(w * 0.9083, h * 0.78); 4171 c.lineTo(w * 0.76, h * 0.78); 4172 c.close(); 4173 c.fill(); 4174 4175 c.setFontColor('#ffffff'); 4176 c.setFontSize(8.5); 4177 c.text(w * 0.1667, h * 0.35, 0, 0, 'mute', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4178 c.text(w * 0.5, h * 0.35, 0, 0, 'keypad', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4179 c.text(w * 0.8333, h * 0.35, 0, 0, 'speaker', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4180 c.text(w * 0.1667, h * 0.85, 0, 0, 'add', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4181 c.text(w * 0.5, h * 0.85, 0, 0, 'pause', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4182 c.text(w * 0.8333, h * 0.85, 0, 0, 'contacts', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4183 4184 c.setGradient('#808080', '#ffffff', 0, 0, w, h * 0.308, mxConstants.DIRECTION_NORTH, 1, 1); 4185 c.setAlpha(0.4); 4186 c.begin(); 4187 c.moveTo(0, h * 0.308); 4188 c.lineTo(0, rSize); 4189 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 4190 c.lineTo(w - rSize, 0); 4191 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 4192 c.lineTo(w, h * 0.308); 4193 c.arcTo(w * 1.5, h * 1.8, 0, 0, 1, 0, h * 0.308); 4194 c.close(); 4195 c.fill(); 4196}; 4197 4198mxCellRenderer.registerShape(mxMockupC.SHAPE_ICALL_DIALOG, mxShapeMockupiCallDialog); 4199 4200//********************************************************************************************************************************************************** 4201//Call Buttons 4202//********************************************************************************************************************************************************** 4203/** 4204 * Extends mxShape. 4205 */ 4206function mxShapeMockupiCallButtons(bounds, fill, stroke, strokewidth) 4207{ 4208 mxShape.call(this); 4209 this.bounds = bounds; 4210 this.fill = fill; 4211 this.stroke = stroke; 4212 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 4213}; 4214 4215/** 4216 * Extends mxShape. 4217 */ 4218mxUtils.extend(mxShapeMockupiCallButtons, mxShape); 4219 4220/** 4221 * Function: paintVertexShape 4222 * 4223 * Paints the vertex shape. 4224 */ 4225mxShapeMockupiCallButtons.prototype.paintVertexShape = function(c, x, y, w, h) 4226{ 4227 c.translate(x, y); 4228 this.background(c, x, y, w, h); 4229 c.setShadow(false); 4230 this.foreground(c, x, y, w, h); 4231}; 4232 4233mxShapeMockupiCallButtons.prototype.background = function(c, x, y, w, h) 4234{ 4235 c.setStrokeWidth(0.5); 4236 c.setStrokeColor('#008cff'); 4237 c.setGradient('#0F1B2B', '#4F5B6B', 0, 0, w, h, mxConstants.DIRECTION_NORTH, 1, 1); 4238 c.rect(0, 0, w, h); 4239 c.fillAndStroke(); 4240}; 4241 4242mxShapeMockupiCallButtons.prototype.foreground = function(c, x, y, w, h) 4243{ 4244 c.begin(); 4245 c.moveTo(0, h * 0.1667); 4246 c.lineTo(w, h * 0.1667); 4247 c.moveTo(0, h * 0.3333); 4248 c.lineTo(w, h * 0.3333); 4249 c.moveTo(0, h * 0.5); 4250 c.lineTo(w, h * 0.5); 4251 c.moveTo(0, h * 0.6667); 4252 c.lineTo(w, h * 0.6667); 4253 c.moveTo(0, h * 0.8333); 4254 c.lineTo(w, h * 0.8333); 4255 c.moveTo(w * 0.3333, h * 0.1667); 4256 c.lineTo(w * 0.3333, h); 4257 c.moveTo(w * 0.6667, h * 0.1667); 4258 c.lineTo(w * 0.6667, h); 4259 c.stroke(); 4260 4261 c.setFontSize(15.5); 4262 c.setFontColor('#ffffff'); 4263 c.setFontStyle(mxConstants.FONT_BOLD); 4264 4265 c.text(w * 0.5, h * 0.0834, 0, 0, '(123) 456-7890', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4266 4267 c.text(w * 0.1667, h * 0.22, 0, 0, '1', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4268 c.text(w * 0.5, h * 0.22, 0, 0, '2', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4269 c.text(w * 0.8333, h * 0.22, 0, 0, '3', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4270 4271 c.text(w * 0.1667, h * 0.3867, 0, 0, '3', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4272 c.text(w * 0.5, h * 0.3867, 0, 0, '4', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4273 c.text(w * 0.8333, h * 0.3867, 0, 0, '5', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4274 4275 c.text(w * 0.1667, h * 0.5534, 0, 0, '6', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4276 c.text(w * 0.5, h * 0.5534, 0, 0, '7', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4277 c.text(w * 0.8333, h * 0.5534, 0, 0, '8', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4278 4279 c.setFontSize(27.5); 4280 c.text(w * 0.1667, h * 0.76, 0, 0, '*', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4281 c.setFontSize(15.5); 4282 c.text(w * 0.5, h * 0.72, 0, 0, '0', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4283 c.text(w * 0.8333, h * 0.75, 0, 0, '#', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4284 4285 c.setGradient('#E2FFEB', '#008215', w * 0.3333, h * 0.8333, w * 0.3333, h * 0.1667, mxConstants.DIRECTION_SOUTH, 1, 1); 4286 c.rect(w * 0.3333, h * 0.8333, w * 0.3333, h * 0.1667); 4287 c.fillAndStroke(); 4288 4289 c.text(w * 0.5, h * 0.9168, 0, 0, 'Call', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4290 4291 c.setFontStyle(0); 4292 c.setFontSize(8); 4293 c.setFontColor('#bbbbbb'); 4294 4295 c.text(w * 0.5, h * 0.28, 0, 0, 'ABC', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4296 c.text(w * 0.8333, h * 0.28, 0, 0, 'DEF', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4297 4298 c.text(w * 0.1667, h * 0.4467, 0, 0, 'GHI', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4299 c.text(w * 0.5, h * 0.4467, 0, 0, 'JKL', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4300 c.text(w * 0.8333, h * 0.4467, 0, 0, 'MNO', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4301 4302 c.text(w * 0.1667, h * 0.6134, 0, 0, 'PQRS', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4303 c.text(w * 0.5, h * 0.6134, 0, 0, 'TUV', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4304 c.text(w * 0.8333, h * 0.6134, 0, 0, 'WXYZ', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4305 4306 c.text(w * 0.5, h * 0.78, 0, 0, '+', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4307 4308 c.setFillColor('#ffffff'); 4309 c.begin(); 4310 c.moveTo(w * 0.1028, h * 0.9464); 4311 c.arcTo(w * 0.0862, h * 0.0652, 0, 0, 1, w * 0.1402, h * 0.9333); 4312 c.arcTo(w * 0.0144, h * 0.0109, 0, 0, 0, w * 0.1517, h * 0.9246); 4313 c.lineTo(w * 0.1524, h * 0.9181); 4314 c.arcTo(w * 0.023, h * 0.0326, 0, 0, 1, w * 0.143, h * 0.8877); 4315 c.arcTo(w * 0.0247, h * 0.0187, 0, 0, 1, w * 0.1919, h * 0.8877); 4316 c.arcTo(w * 0.023, h * 0.0326, 0, 0, 1, w * 0.1847, h * 0.9181); 4317 c.arcTo(w * 0.0431, h * 0.0174, 0, 0, 0, w * 0.1919, h * 0.9311); 4318 c.arcTo(w * 0.1437, h * 0.1087, 0, 0, 1, w * 0.2307, h * 0.9453); 4319 c.lineTo(w * 0.2307, h * 0.9616); 4320 c.lineTo(w * 0.1028, h * 0.9616); 4321 c.close(); 4322 c.fill(); 4323 4324 c.setStrokeColor('#ffffff'); 4325 c.setStrokeWidth(2.5); 4326 c.setLineJoin('round'); 4327 c.begin(); 4328 c.moveTo(w * 0.79, h * 0.89); 4329 c.lineTo(w * 0.9, h * 0.89); 4330 c.lineTo(w * 0.9, h * 0.95); 4331 c.lineTo(w * 0.79, h * 0.95); 4332 c.lineTo(w * 0.76, h * 0.92); 4333 c.close(); 4334 c.fillAndStroke(); 4335 4336 c.setStrokeColor('#0F1B2B'); 4337 c.begin(); 4338 c.moveTo(w * 0.82, h * 0.907); 4339 c.lineTo(w * 0.85, h * 0.933); 4340 c.moveTo(w * 0.82, h * 0.933); 4341 c.lineTo(w * 0.85, h * 0.907); 4342 c.stroke(); 4343}; 4344 4345mxCellRenderer.registerShape(mxMockupC.SHAPE_ICALL_BUTTONS, mxShapeMockupiCallButtons); 4346 4347//********************************************************************************************************************************************************** 4348//Option 4349//********************************************************************************************************************************************************** 4350/** 4351 * Extends mxShape. 4352 */ 4353function mxShapeMockupiOption(bounds, fill, stroke, strokewidth) 4354{ 4355 mxShape.call(this); 4356 this.bounds = bounds; 4357 this.fill = fill; 4358 this.stroke = stroke; 4359 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 4360}; 4361 4362/** 4363 * Extends mxShape. 4364 */ 4365mxUtils.extend(mxShapeMockupiOption, mxShape); 4366 4367mxShapeMockupiOption.prototype.customProperties = [ 4368 {name: 'buttonText', dispName: 'Text', type: 'string'}, 4369 {name: 'barPos', dispName: 'Callout Position', type: 'float', min:0, defVal:80}, 4370 {name: 'pointerPos', dispName: 'Callout Orientation', type: 'enum', 4371 enumList: [{val: 'bottom', dispName: 'Bottom'}, {val: 'top', dispName: 'Top'}] 4372 } 4373]; 4374 4375/** 4376 * Function: paintVertexShape 4377 * 4378 * Paints the vertex shape. 4379 */ 4380mxShapeMockupiOption.prototype.paintVertexShape = function(c, x, y, w, h) 4381{ 4382 c.translate(x, y); 4383 this.background(c, x, y, w, h); 4384 c.setShadow(false); 4385 this.foreground(c, x, y, w, h); 4386}; 4387 4388mxShapeMockupiOption.prototype.background = function(c, x, y, w, h) 4389{ 4390 var barPos = mxUtils.getValue(this.style, mxMockupC.BAR_POS, '80'); 4391 barPos = Math.min(barPos, 100); 4392 barPos = Math.max(barPos, 0); 4393 var pointerPos = mxUtils.getValue(this.style, mxMockupC.POINTER_POS, mxMockupC.POINTER_BOTTOM); 4394 var rSize = 2.5; 4395 var deadzone = rSize + 7.5; // rounding + pointer width / 2 4396 var virRange = w - 2 * deadzone; 4397 var truePos = deadzone + virRange * barPos / 100; 4398 c.setStrokeWidth(0.5); 4399 c.setStrokeColor('#000000'); 4400 c.setAlpha(0.9); 4401 c.begin(); 4402 4403 if (pointerPos === mxMockupC.POINTER_BOTTOM) 4404 { 4405 c.setGradient('#000000', '#888888', 0, 0, w, h, mxConstants.DIRECTION_NORTH, 1, 1); 4406 c.moveTo(0, rSize); 4407 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 4408 c.lineTo(w - rSize, 0); 4409 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 4410 c.lineTo(w, h - rSize - 7.5); 4411 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h - 7.5); 4412 c.lineTo(truePos + 7.5, h - 7.5); 4413 c.lineTo(truePos, h); 4414 c.lineTo(truePos - 7.5, h - 7.5); 4415 c.lineTo(rSize, h - 7.5); 4416 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize - 7.5); 4417 } 4418 else if (pointerPos === mxMockupC.POINTER_TOP) 4419 { 4420 c.setGradient('#000000', '#888888', 0, 0, w, h, mxConstants.DIRECTION_NORTH, 1, 1); 4421 c.moveTo(0, rSize + 7.5); 4422 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 7.5); 4423 c.lineTo(truePos - 7.5, 7.5); 4424 c.lineTo(truePos, 0); 4425 c.lineTo(truePos + 7.5, 7.5); 4426 c.lineTo(w - rSize, 7.5); 4427 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize + 7.5); 4428 c.lineTo(w, h - rSize); 4429 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h); 4430 c.lineTo(rSize, h); 4431 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize); 4432 } 4433 4434 c.close(); 4435 c.fillAndStroke(); 4436}; 4437 4438mxShapeMockupiOption.prototype.foreground = function(c, x, y, w, h) 4439{ 4440 var locText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, 'Some Location'); 4441 var pointerPos = mxUtils.getValue(this.style, mxMockupC.POINTER_POS, mxMockupC.POINTER_BOTTOM); 4442 c.setAlpha(1); 4443 c.setFontColor('#ffffff'); 4444 c.setFontSize(9.5); 4445 4446 if (pointerPos === mxMockupC.POINTER_BOTTOM) 4447 { 4448 c.text(w * 0.5, (h - 7.5) * 0.5, 0, 0, locText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4449 } 4450 else 4451 { 4452 c.text(w * 0.5, (h + 7.5) * 0.5, 0, 0, locText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4453 } 4454}; 4455 4456mxCellRenderer.registerShape(mxMockupC.SHAPE_IOPTION, mxShapeMockupiOption); 4457 4458//********************************************************************************************************************************************************** 4459//Alpha List 4460//********************************************************************************************************************************************************** 4461/** 4462 * Extends mxShape. 4463 */ 4464function mxShapeMockupiAlphaList(bounds, fill, stroke, strokewidth) 4465{ 4466 mxShape.call(this); 4467 this.bounds = bounds; 4468 this.fill = fill; 4469 this.stroke = stroke; 4470 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 4471}; 4472 4473/** 4474 * Extends mxShape. 4475 */ 4476mxUtils.extend(mxShapeMockupiAlphaList, mxShape); 4477 4478/** 4479 * Function: paintVertexShape 4480 * 4481 * Paints the vertex shape. 4482 */ 4483mxShapeMockupiAlphaList.prototype.paintVertexShape = function(c, x, y, w, h) 4484{ 4485 c.translate(x, y); 4486 c.setShadow(false); 4487 var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8'); 4488 4489 c.setFontColor('#999999'); 4490 c.setFontSize(fontSize); 4491 c.text(w * 0.5, h * 0.069, 0, 0, 'A', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4492 c.text(w * 0.5, h * 0.1035, 0, 0, 'B', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4493 c.text(w * 0.5, h * 0.138, 0, 0, 'C', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4494 c.text(w * 0.5, h * 0.1725, 0, 0, 'D', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4495 c.text(w * 0.5, h * 0.207, 0, 0, 'E', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4496 c.text(w * 0.5, h * 0.2415, 0, 0, 'F', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4497 c.text(w * 0.5, h * 0.276, 0, 0, 'G', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4498 c.text(w * 0.5, h * 0.3105, 0, 0, 'H', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4499 c.text(w * 0.5, h * 0.345, 0, 0, 'I', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4500 c.text(w * 0.5, h * 0.3795, 0, 0, 'J', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4501 c.text(w * 0.5, h * 0.414, 0, 0, 'K', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4502 c.text(w * 0.5, h * 0.4485, 0, 0, 'L', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4503 c.text(w * 0.5, h * 0.483, 0, 0, 'M', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4504 c.text(w * 0.5, h * 0.5175, 0, 0, 'N', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4505 c.text(w * 0.5, h * 0.552, 0, 0, 'O', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4506 c.text(w * 0.5, h * 0.5865, 0, 0, 'P', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4507 c.text(w * 0.5, h * 0.621, 0, 0, 'Q', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4508 c.text(w * 0.5, h * 0.6555, 0, 0, 'R', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4509 c.text(w * 0.5, h * 0.69, 0, 0, 'S', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4510 c.text(w * 0.5, h * 0.7245, 0, 0, 'T', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4511 c.text(w * 0.5, h * 0.759, 0, 0, 'U', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4512 c.text(w * 0.5, h * 0.7935, 0, 0, 'V', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4513 c.text(w * 0.5, h * 0.828, 0, 0, 'W', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4514 c.text(w * 0.5, h * 0.8625, 0, 0, 'X', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4515 c.text(w * 0.5, h * 0.897, 0, 0, 'Y', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4516 c.text(w * 0.5, h * 0.9315, 0, 0, 'Z', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4517 c.text(w * 0.5, h * 0.966, 0, 0, '#', mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 4518 4519 c.setStrokeColor('#999999'); 4520 c.ellipse(w * 0.5 - 2.25, h * 0.0345 - 3.5, 4.5, 4.5); 4521 c.stroke(); 4522 4523 c.begin(); 4524 c.moveTo(w * 0.5 - 4.25, h * 0.0345 + 3); 4525 c.lineTo(w * 0.5 - 1.75, h * 0.0345); 4526 c.stroke(); 4527}; 4528 4529mxCellRenderer.registerShape(mxMockupC.SHAPE_IALPHA_LIST, mxShapeMockupiAlphaList); 4530 4531//********************************************************************************************************************************************************** 4532//Horizontal Button Bar 4533//********************************************************************************************************************************************************** 4534/** 4535 * Extends mxShape. 4536 */ 4537function mxShapeMockupiHorButtonBar(bounds, fill, stroke, strokewidth) 4538{ 4539 mxShape.call(this); 4540 this.bounds = bounds; 4541 this.fill = fill; 4542 this.stroke = stroke; 4543 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 4544}; 4545 4546/** 4547 * Extends mxShape. 4548 */ 4549mxUtils.extend(mxShapeMockupiHorButtonBar, mxShape); 4550 4551mxShapeMockupiHorButtonBar.prototype.customProperties = [ 4552 {name: 'buttonText', dispName: 'Labels', type: 'string'}, 4553 {name: 'textColor', dispName: 'Text Color', type: 'color'}, 4554 {name: 'textColor2', dispName: 'Text2 Color', type: 'color'}, 4555 {name: 'strokeColor2', dispName: 'Stroke2 Color', type: 'color'} 4556]; 4557 4558/** 4559 * Function: paintVertexShape 4560 * 4561 * Paints the vertex shape. 4562 */ 4563mxShapeMockupiHorButtonBar.prototype.paintVertexShape = function(c, x, y, w, h) 4564{ 4565 var textStrings = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, '+Button 1, Button 2, Button 3').toString().split(','); 4566 var fontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR, '#666666'); 4567 var selectedFontColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR2, '#ffffff'); 4568 var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8.5').toString(); 4569 var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666'); 4570 var separatorColor = mxUtils.getValue(this.style, mxMockupC.STYLE_STROKECOLOR2, '#c4c4c4'); 4571 var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff'); 4572 var selectedFillColor = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '#008cff'); 4573 var buttonNum = textStrings.length; 4574 var buttonWidths = new Array(buttonNum); 4575 var buttonTotalWidth = 0; 4576 var selectedButton = -1; 4577 var rSize = 2.5; //rounding size 4578 var labelOffset = 2.5; 4579 4580 for (var i = 0; i < buttonNum; i++) 4581 { 4582 var buttonText = textStrings[i]; 4583 4584 if(buttonText.charAt(0) === mxMockupC.SELECTED) 4585 { 4586 buttonText = textStrings[i].substring(1); 4587 selectedButton = i; 4588 } 4589 4590 buttonWidths[i] = mxUtils.getSizeForString(buttonText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width; 4591 4592 buttonTotalWidth += buttonWidths[i]; 4593 } 4594 4595 var trueH = Math.max(h, fontSize * 1.5, 10); 4596 var minW = 2 * labelOffset * buttonNum + buttonTotalWidth; 4597 var trueW = Math.max(w, minW); 4598 4599 c.translate(x, y); 4600 this.background(c, trueW, trueH, rSize, buttonNum, buttonWidths, labelOffset, minW, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton); 4601 c.setShadow(false); 4602 4603 var currWidth = 0; 4604 4605 for (var i = 0; i < buttonNum; i++) 4606 { 4607 if (i === selectedButton) 4608 { 4609 c.setFontColor(selectedFontColor); 4610 } 4611 else 4612 { 4613 c.setFontColor(fontColor); 4614 } 4615 4616 currWidth = currWidth + labelOffset; 4617 this.buttonText(c, currWidth, trueH, textStrings[i], buttonWidths[i], fontSize, minW, trueW); 4618 currWidth = currWidth + buttonWidths[i] + labelOffset; 4619 } 4620}; 4621 4622mxShapeMockupiHorButtonBar.prototype.background = function(c, w, h, rSize, buttonNum, buttonWidths, labelOffset, minW, frameColor, separatorColor, bgColor, selectedFillColor, selectedButton) 4623{ 4624 c.begin(); 4625 4626 //draw the frame 4627 c.setStrokeColor(frameColor); 4628 c.setFillColor(bgColor); 4629 c.moveTo(0, rSize); 4630 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 4631 c.lineTo(w - rSize, 0); 4632 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 4633 c.lineTo(w, h - rSize); 4634 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h); 4635 c.lineTo(rSize, h); 4636 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize); 4637 c.close(); 4638 c.fillAndStroke(); 4639 4640 //draw the button separators 4641 c.setStrokeColor(separatorColor); 4642 c.begin(); 4643 for (var i = 1; i < buttonNum; i++) 4644 { 4645 if (i !== selectedButton && i !== (selectedButton + 1)) 4646 { 4647 var currWidth = 0; 4648 4649 for (var j = 0; j < i; j++) 4650 { 4651 currWidth += buttonWidths[j] + 2 * labelOffset; 4652 } 4653 4654 currWidth = currWidth * w / minW; 4655 c.moveTo(currWidth, 0); 4656 c.lineTo(currWidth, h); 4657 } 4658 } 4659 4660 c.stroke(); 4661 4662 //draw the selected button 4663 var buttonLeft = 0; 4664 c.setStrokeColor(mxConstants.NONE); 4665 4666 for (var i = 0; i < selectedButton; i++) 4667 { 4668 buttonLeft += buttonWidths[i] + 2 * labelOffset; 4669 } 4670 4671 buttonLeft = buttonLeft * w / minW; 4672 var buttonRight = (buttonWidths[selectedButton] + 2 * labelOffset) * w / minW; 4673 buttonRight += buttonLeft; 4674 4675 if (selectedButton === 0) 4676 { 4677 c.setGradient('#5D7585', '#008cff', 0, 0, buttonRight, h, mxConstants.DIRECTION_SOUTH, 1, 1); 4678 c.begin(); 4679 // we draw a path for the first button 4680 c.moveTo(0, rSize); 4681 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 4682 c.lineTo(buttonRight, 0); 4683 c.lineTo(buttonRight, h); 4684 c.lineTo(rSize, h); 4685 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize); 4686 c.close(); 4687 c.fill(); 4688 } 4689 else if (selectedButton === buttonNum - 1) 4690 { 4691 c.setGradient('#5D7585', '#008cff', buttonLeft, 0, buttonRight - buttonLeft, h, mxConstants.DIRECTION_SOUTH, 1, 1); 4692 c.begin(); 4693 // we draw a path for the last button 4694 c.moveTo(buttonLeft, 0); 4695 c.lineTo(buttonRight - rSize, 0); 4696 c.arcTo(rSize, rSize, 0, 0, 1, buttonRight, rSize); 4697 c.lineTo(buttonRight, h - rSize); 4698 c.arcTo(rSize, rSize, 0, 0, 1, buttonRight - rSize, h); 4699 c.lineTo(buttonLeft, h); 4700 c.close(); 4701 c.fill(); 4702 } 4703 else if (selectedButton !== -1) 4704 { 4705 c.setGradient('#5D7585', '#008cff', buttonLeft, 0, buttonRight - buttonLeft, h, mxConstants.DIRECTION_SOUTH, 1, 1); 4706 c.begin(); 4707 // we draw a path rectangle for one of the buttons in the middle 4708 c.moveTo(buttonLeft, 0); 4709 c.lineTo(buttonRight, 0); 4710 c.lineTo(buttonRight, h); 4711 c.lineTo(buttonLeft, h); 4712 c.close(); 4713 c.fill(); 4714 } 4715 4716 //draw the frame again, to achieve a nicer effect 4717 c.setStrokeColor(frameColor); 4718 c.setFillColor(bgColor); 4719 c.begin(); 4720 c.moveTo(0, rSize); 4721 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 4722 c.lineTo(w - rSize, 0); 4723 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 4724 c.lineTo(w, h - rSize); 4725 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h); 4726 c.lineTo(rSize, h); 4727 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize); 4728 c.close(); 4729 c.stroke(); 4730}; 4731 4732mxShapeMockupiHorButtonBar.prototype.buttonText = function(c, w, h, textString, buttonWidth, fontSize, minW, trueW) 4733{ 4734 if(textString.charAt(0) === mxMockupC.SELECTED) 4735 { 4736 textString = textString.substring(1); 4737 } 4738 4739 c.begin(); 4740 c.setFontSize(fontSize); 4741 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); 4742}; 4743 4744mxCellRenderer.registerShape(mxMockupC.SHAPE_IHOR_BUTTON_BAR, mxShapeMockupiHorButtonBar); 4745 4746//********************************************************************************************************************************************************** 4747//Pin 4748//********************************************************************************************************************************************************** 4749/** 4750 * Extends mxShape. 4751 */ 4752function mxShapeMockupiPin(bounds, fill, stroke, strokewidth) 4753{ 4754 mxShape.call(this); 4755 this.bounds = bounds; 4756 this.fill = fill; 4757 this.stroke = stroke; 4758 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 4759}; 4760 4761/** 4762 * Extends mxShape. 4763 */ 4764mxUtils.extend(mxShapeMockupiPin, mxShape); 4765 4766mxShapeMockupiPin.prototype.customProperties = [ 4767 {name: 'fillColor2', dispName: 'Fill2 Color', type: 'color'}, 4768 {name: 'fillColor3', dispName: 'Fill3 Color', type: 'color'} 4769]; 4770 4771/** 4772 * Function: paintVertexShape 4773 * 4774 * Paints the vertex shape. 4775 */ 4776mxShapeMockupiPin.prototype.paintVertexShape = function(c, x, y, w, h) 4777{ 4778 var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '#000000'); 4779 var fillColor3 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR3, '#000000'); 4780 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000'); 4781 c.setShadow(false); 4782 c.translate(x, y); 4783 4784 c.setStrokeWidth(1.5); 4785 c.setStrokeColor('#666666'); 4786 c.begin(); 4787 c.moveTo(w * 0.5, h * 0.4); 4788 c.lineTo(w * 0.5, h); 4789 c.stroke(); 4790 4791 c.setStrokeWidth(1); 4792 c.setStrokeColor(strokeColor); 4793 c.setGradient(fillColor2, fillColor3, 0, 0, w, h * 0.4, mxConstants.DIRECTION_SOUTH, 1, 1); 4794 c.setAlpha(0.9); 4795 c.ellipse(0, 0, w, h * 0.4); 4796 c.fillAndStroke(); 4797 4798 c.setFillColor('#ffffff'); 4799 c.setAlpha(0.5); 4800 c.ellipse(w * 0.2, h * 0.08, w * 0.3, h * 0.12); 4801 c.fill(); 4802}; 4803 4804mxCellRenderer.registerShape(mxMockupC.SHAPE_IPIN, mxShapeMockupiPin); 4805 4806//********************************************************************************************************************************************************** 4807//Video Controls 4808//********************************************************************************************************************************************************** 4809/** 4810 * Extends mxShape. 4811 */ 4812function mxShapeMockupiVideoControls(bounds, fill, stroke, strokewidth) 4813{ 4814 mxShape.call(this); 4815 this.bounds = bounds; 4816 this.fill = fill; 4817 this.stroke = stroke; 4818 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 4819}; 4820 4821/** 4822 * Extends mxShape. 4823 */ 4824mxUtils.extend(mxShapeMockupiVideoControls, mxShape); 4825 4826mxShapeMockupiVideoControls.prototype.customProperties = [ 4827 {name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, defVal:20} 4828]; 4829 4830/** 4831 * Function: paintVertexShape 4832 * 4833 * Paints the vertex shape. 4834 */ 4835mxShapeMockupiVideoControls.prototype.paintVertexShape = function(c, x, y, w, h) 4836{ 4837 c.translate(x, y); 4838 var rSize = 5; 4839 c.setStrokeWidth(1); 4840 c.setFillColor('#000000'); 4841 c.setStrokeColor('#bbbbbb'); 4842 c.setAlpha(0.7); 4843 c.roundrect(0, 0, w, h, rSize, rSize); 4844 c.fillAndStroke(); 4845 c.setShadow(false); 4846 4847 this.foreground(c, w, h, rSize); 4848}; 4849 4850mxShapeMockupiVideoControls.prototype.foreground = function(c, w, h, rSize) 4851{ 4852 c.setGradient('#ffffff', '#ffffff', 0, 0, w, h * 0.5, mxConstants.DIRECTION_SOUTH, 0.8, 0.1); 4853 c.begin(); 4854 c.moveTo(0, rSize); 4855 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 4856 c.lineTo(w - rSize, 0); 4857 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 4858 c.lineTo(w, h * 0.5); 4859 c.lineTo(0, h * 0.5); 4860 c.close(); 4861 c.fill(); 4862 4863 c.setAlpha(1); 4864 c.setFillColor('#ffffff'); 4865 c.setStrokeColor('#ffffff'); 4866 var iconX = w * 0.1; 4867 var iconY = h * 0.35; 4868 4869 c.begin(); 4870 c.moveTo(iconX - 7.5, iconY - 2.5); 4871 c.arcTo(6, 6, 0, 0, 1, iconX, iconY - 2.5); 4872 c.arcTo(6, 6, 0, 0, 1, iconX + 7.5, iconY - 2.5); 4873 c.lineTo(iconX + 7.5, iconY + 4); 4874 c.arcTo(6, 6, 0, 0, 0, iconX, iconY + 4); 4875 c.arcTo(6, 6, 0, 0, 0, iconX - 7.5, iconY + 4); 4876 c.close(); 4877 c.stroke(); 4878 4879 c.begin(); 4880 c.moveTo(iconX, iconY - 2.5); 4881 c.lineTo(iconX, iconY + 4); 4882 c.stroke(); 4883 4884 iconX = w * 0.3; 4885 c.rect(iconX - 7.5, iconY - 5, 1, 10); 4886 c.fill(); 4887 4888 c.begin(); 4889 c.moveTo(iconX - 6.5, iconY); 4890 c.lineTo(iconX + 0.5, iconY - 5); 4891 c.lineTo(iconX + 0.5, iconY + 5); 4892 c.close(); 4893 c.fill(); 4894 4895 c.begin(); 4896 c.moveTo(iconX + 0.5, iconY); 4897 c.lineTo(iconX + 7.5, iconY - 5); 4898 c.lineTo(iconX + 7.5, iconY + 5); 4899 c.close(); 4900 c.fill(); 4901 4902 iconX = w * 0.5; 4903 c.begin(); 4904 c.moveTo(iconX - 6, iconY - 5); 4905 c.lineTo(iconX + 6, iconY); 4906 c.lineTo(iconX - 6, iconY + 5); 4907 c.close(); 4908 c.fill(); 4909 4910 iconX = w * 0.7; 4911 c.begin(); 4912 c.moveTo(iconX - 7.5, iconY - 5); 4913 c.lineTo(iconX - 0.5, iconY); 4914 c.lineTo(iconX - 7.5, iconY + 5); 4915 c.close(); 4916 c.fill(); 4917 c.begin(); 4918 c.moveTo(iconX - 0.5, iconY - 5); 4919 c.lineTo(iconX + 6.5, iconY); 4920 c.lineTo(iconX - 0.5, iconY + 5); 4921 c.close(); 4922 c.fill(); 4923 c.rect(iconX + 6.5, iconY - 5, 1, 10); 4924 c.fill(); 4925 4926 iconX = w * 0.9; 4927 c.rect(iconX - 7.5, iconY - 4, 15, 8); 4928 c.stroke(); 4929 c.setStrokeWidth(0.5); 4930 c.begin(); 4931 c.moveTo(iconX - 7.5, iconY - 4); 4932 c.lineTo(iconX, iconY + 1.5); 4933 c.lineTo(iconX + 7.5, iconY - 4); 4934 c.stroke(); 4935 c.begin(); 4936 c.moveTo(iconX - 7.5, iconY + 4); 4937 c.lineTo(iconX - 2, iconY); 4938 c.stroke(); 4939 c.begin(); 4940 c.moveTo(iconX + 7.5, iconY + 4); 4941 c.lineTo(iconX + 2, iconY); 4942 c.stroke(); 4943 4944 c.setGradient('#444444', '#ffffff', w * 0.1, h * 0.75 - 2.5, w * 0.8, 5, mxConstants.DIRECTION_SOUTH, 1, 1); 4945 c.roundrect(w * 0.1, h * 0.75 - 2.5, w * 0.8, 5, 2.5, 2.5); 4946 c.fill(); 4947 4948 var barPos = mxUtils.getValue(this.style, mxMockupC.BAR_POS, '80'); 4949 barPos = Math.min(barPos, 100); 4950 barPos = Math.max(barPos, 0); 4951 var deadzone = w * 0.1; 4952 var virRange = w - 2 * deadzone; 4953 var truePos = deadzone + virRange * barPos / 100; 4954 4955 c.setGradient('#96D1FF', '#003377', w * 0.1, h * 0.75 - 5, truePos - w * 0.1, 10, mxConstants.DIRECTION_SOUTH, 1, 1); 4956 c.begin(); 4957 c.moveTo(truePos, h * 0.75 - 2.5); 4958 c.lineTo(truePos, h * 0.75 + 2.5); 4959 c.lineTo(w * 0.1 + 2.5, h * 0.75 + 2.5); 4960 c.arcTo(2.5, 2.5, 0, 0, 1, w * 0.1 + 2.5, h * 0.75 - 2.5); 4961 c.close(); 4962 c.fill(); 4963 4964 c.setStrokeColor('#999999'); 4965 c.setGradient('#444444', '#ffffff', truePos - 5, h * 0.75 - 5, 10, 10, mxConstants.DIRECTION_NORTH, 1, 1); 4966 c.ellipse(truePos - 5, h * 0.75 - 5, 10, 10); 4967 c.fillAndStroke(); 4968 4969 c.setStrokeColor('#dddddd'); 4970 c.roundrect(0, 0, w, h, rSize, rSize); 4971 c.stroke(); 4972}; 4973 4974mxCellRenderer.registerShape(mxMockupC.SHAPE_IVIDEO_CONTROLS, mxShapeMockupiVideoControls); 4975 4976Graph.handleFactory[mxMockupC.SHAPE_IVIDEO_CONTROLS] = function(state) 4977{ 4978 var handles = [Graph.createHandle(state, ['barPos'], function(bounds) 4979 { 4980 var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 40)))); 4981 4982 return new mxPoint(bounds.x + bounds.width * 0.1 + barPos * bounds.width * 0.8 / 100, bounds.y + bounds.height * 0.75); 4983 }, function(bounds, pt) 4984 { 4985 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; 4986 })]; 4987 4988 return handles; 4989}; 4990 4991//********************************************************************************************************************************************************** 4992//URL Bar 4993//********************************************************************************************************************************************************** 4994/** 4995 * Extends mxShape. 4996 */ 4997function mxShapeMockupiURLBar(bounds, fill, stroke, strokewidth) 4998{ 4999 mxShape.call(this); 5000 this.bounds = bounds; 5001 this.fill = fill; 5002 this.stroke = stroke; 5003 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 5004}; 5005 5006/** 5007 * Extends mxShape. 5008 */ 5009mxUtils.extend(mxShapeMockupiURLBar, mxShape); 5010 5011/** 5012 * Function: paintVertexShape 5013 * 5014 * Paints the vertex shape. 5015 */ 5016mxShapeMockupiURLBar.prototype.paintVertexShape = function(c, x, y, w, h) 5017{ 5018 c.translate(x, y); 5019 5020 c.setGradient('#cccccc', '#003377', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 5021 c.rect(0, 0, w, h); 5022 c.fill(); 5023 c.setShadow(false); 5024 5025 this.foreground(c, w, h); 5026}; 5027 5028mxShapeMockupiURLBar.prototype.foreground = function(c, w, h) 5029{ 5030 c.setStrokeWidth(0.5); 5031 c.setFillColor('#ffffff'); 5032 c.setStrokeColor('#008cff'); 5033 c.roundrect(w * 0.0287, h * 0.625 - 6.25, w * 0.7184, 12.5, 6.25, 6.25); 5034 c.fillAndStroke(); 5035 5036 c.setGradient('#cccccc', '#001144', w * 0.7816, h * 0.625 - 6.25, w * 0.1868, 12.5, mxConstants.DIRECTION_SOUTH, 1, 1); 5037 c.setStrokeColor('#000000'); 5038 c.roundrect(w * 0.7816, h * 0.625 - 6.25, w * 0.1868, 12.5, 2.5, 2.5); 5039 c.fillAndStroke(); 5040 5041 c.setFillColor('#bbbbbb'); 5042 c.ellipse(w * 0.7471 - 11.5, h * 0.625 - 5, 10, 10); 5043 c.fill(); 5044 5045 c.setStrokeColor('#ffffff'); 5046 c.setStrokeWidth(1.5); 5047 c.begin(); 5048 c.moveTo(w * 0.7471 - 8.5, h * 0.625 - 2.5); 5049 c.lineTo(w * 0.7471 - 3.5, h * 0.625 + 2.5); 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.stroke(); 5053 5054 var fieldText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, '').toString().split(','); 5055 c.setFontColor('#425664'); 5056 c.setFontStyle(mxConstants.FONT_BOLD); 5057 c.setFontSize(8); 5058 c.text(w * 0.5, h * 0.2, 0, 0, fieldText[0], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 5059 c.setFontColor('#000000'); 5060 c.text(w * 0.06, h * 0.625, 0, 0, fieldText[1], mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 5061 c.setFontColor('#ffffff'); 5062 c.text(w * 0.875, h * 0.625, 0, 0, fieldText[2], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 5063}; 5064 5065mxCellRenderer.registerShape(mxMockupC.SHAPE_IURL_BAR, mxShapeMockupiURLBar); 5066 5067//********************************************************************************************************************************************************** 5068//Slider 5069//********************************************************************************************************************************************************** 5070/** 5071 * Extends mxShape. 5072 */ 5073function mxShapeMockupiSlider(bounds, fill, stroke, strokewidth) 5074{ 5075 mxShape.call(this); 5076 this.bounds = bounds; 5077 this.fill = fill; 5078 this.stroke = stroke; 5079 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 5080}; 5081 5082/** 5083 * Extends mxShape. 5084 */ 5085mxUtils.extend(mxShapeMockupiSlider, mxShape); 5086 5087mxShapeMockupiSlider.prototype.customProperties = [ 5088 {name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, defVal:20}, 5089]; 5090 5091/** 5092 * Function: paintVertexShape 5093 * 5094 * Paints the vertex shape. 5095 */ 5096mxShapeMockupiSlider.prototype.paintVertexShape = function(c, x, y, w, h) 5097{ 5098 c.translate(x, y); 5099 c.setShadow(false); 5100 5101 this.foreground(c, w, h); 5102}; 5103 5104mxShapeMockupiSlider.prototype.foreground = function(c, w, h) 5105{ 5106 c.setStrokeWidth(0.5); 5107 c.setGradient('#444444', '#ffffff', 0, h * 0.5 - 2.5, w, 5, mxConstants.DIRECTION_SOUTH, 1, 1); 5108 c.roundrect(0, h * 0.5 - 2.5, w, 5, 2.5, 2.5); 5109 c.fill(); 5110 5111 var barPos = mxUtils.getValue(this.style, mxMockupC.BAR_POS, '80'); 5112 barPos = Math.min(barPos, 100); 5113 barPos = Math.max(barPos, 0); 5114 var deadzone = 0; 5115 var virRange = w - 2 * deadzone; 5116 var truePos = deadzone + virRange * barPos / 100; 5117 5118 c.setGradient('#96D1FF', '#003377', 2.5, h * 0.5 - 2.5, truePos - 2.5, 5, mxConstants.DIRECTION_SOUTH, 1, 1); 5119 c.begin(); 5120 c.moveTo(truePos, h * 0.5 - 2.5); 5121 c.lineTo(truePos, h * 0.5 + 2.5); 5122 c.lineTo(2.5, h * 0.5 + 2.5); 5123 c.arcTo(2.5, 2.5, 0, 0, 1, 2.5, h * 0.5 - 2.5); 5124 c.close(); 5125 c.fill(); 5126 5127 c.setStrokeColor('#999999'); 5128 c.setGradient('#444444', '#ffffff', truePos - 5, h * 0.5 - 5, 10, 10, mxConstants.DIRECTION_NORTH, 1, 1); 5129 c.ellipse(truePos - 5, h * 0.5 - 5, 10, 10); 5130 c.fillAndStroke(); 5131}; 5132 5133mxCellRenderer.registerShape(mxMockupC.SHAPE_ISLIDER, mxShapeMockupiSlider); 5134 5135Graph.handleFactory[mxMockupC.SHAPE_ISLIDER] = function(state) 5136{ 5137 var handles = [Graph.createHandle(state, ['barPos'], function(bounds) 5138 { 5139 var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4)))); 5140 5141 return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2); 5142 }, function(bounds, pt) 5143 { 5144 this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100; 5145 })]; 5146 5147 return handles; 5148}; 5149 5150 5151//********************************************************************************************************************************************************** 5152//Progress Bar 5153//********************************************************************************************************************************************************** 5154/** 5155 * Extends mxShape. 5156 */ 5157function mxShapeMockupiProgressBar(bounds, fill, stroke, strokewidth) 5158{ 5159 mxShape.call(this); 5160 this.bounds = bounds; 5161 this.fill = fill; 5162 this.stroke = stroke; 5163 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 5164}; 5165 5166/** 5167 * Extends mxShape. 5168 */ 5169mxUtils.extend(mxShapeMockupiProgressBar, mxShape); 5170 5171mxShapeMockupiProgressBar.prototype.customProperties = [ 5172 {name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, defVal:40}, 5173]; 5174 5175/** 5176 * Function: paintVertexShape 5177 * 5178 * Paints the vertex shape. 5179 */ 5180mxShapeMockupiProgressBar.prototype.paintVertexShape = function(c, x, y, w, h) 5181{ 5182 c.translate(x, y); 5183 c.setShadow(false); 5184 5185 this.foreground(c, w, h); 5186}; 5187 5188mxShapeMockupiProgressBar.prototype.foreground = function(c, w, h) 5189{ 5190 c.setStrokeWidth(0.5); 5191 c.setGradient('#444444', '#ffffff', 0, h * 0.5 - 2.5, w, 5, mxConstants.DIRECTION_SOUTH, 1, 1); 5192 c.roundrect(0, h * 0.5 - 2.5, w, 5, 2.5, 2.5); 5193 c.fill(); 5194 5195 var barPos = mxUtils.getValue(this.style, mxMockupC.BAR_POS, '80'); 5196 barPos = Math.min(barPos, 100); 5197 barPos = Math.max(barPos, 0); 5198 var deadzone = 0; 5199 var virRange = w - 2 * deadzone; 5200 var truePos = deadzone + virRange * barPos / 100; 5201 5202 c.setGradient('#96D1FF', '#003377', 2.5, h * 0.5 - 2.5, truePos - 2.5, 5, mxConstants.DIRECTION_SOUTH, 1, 1); 5203 c.begin(); 5204 c.moveTo(truePos, h * 0.5 - 2.5); 5205 c.arcTo(2.5, 2.5, 0, 0, 1, truePos, h * 0.5 + 2.5); 5206 c.lineTo(2.5, h * 0.5 + 2.5); 5207 c.arcTo(2.5, 2.5, 0, 0, 1, 2.5, h * 0.5 - 2.5); 5208 c.close(); 5209 c.fill(); 5210}; 5211 5212mxCellRenderer.registerShape(mxMockupC.SHAPE_IPROGRESS_BAR, mxShapeMockupiProgressBar); 5213 5214Graph.handleFactory[mxMockupC.SHAPE_IPROGRESS_BAR] = function(state) 5215{ 5216 var handles = [Graph.createHandle(state, ['barPos'], function(bounds) 5217 { 5218 var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4)))); 5219 5220 return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2); 5221 }, function(bounds, pt) 5222 { 5223 this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100; 5224 })]; 5225 5226 return handles; 5227}; 5228 5229//********************************************************************************************************************************************************** 5230//iCloud Progress Bar 5231//********************************************************************************************************************************************************** 5232/** 5233 * Extends mxShape. 5234 */ 5235function mxShapeMockupiCloudProgressBar(bounds, fill, stroke, strokewidth) 5236{ 5237 mxShape.call(this); 5238 this.bounds = bounds; 5239 this.fill = fill; 5240 this.stroke = stroke; 5241 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 5242}; 5243 5244/** 5245 * Extends mxShape. 5246 */ 5247mxUtils.extend(mxShapeMockupiCloudProgressBar, mxShape); 5248 5249mxShapeMockupiCloudProgressBar.prototype.customProperties = [ 5250 {name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, defVal:20}, 5251]; 5252 5253/** 5254 * Function: paintVertexShape 5255 * 5256 * Paints the vertex shape. 5257 */ 5258mxShapeMockupiCloudProgressBar.prototype.paintVertexShape = function(c, x, y, w, h) 5259{ 5260 c.translate(x, y); 5261 c.setShadow(false); 5262 5263 this.foreground(c, w, h); 5264}; 5265 5266mxShapeMockupiCloudProgressBar.prototype.foreground = function(c, w, h) 5267{ 5268 c.setStrokeWidth(0.5); 5269 c.setFillColor('#5C6E86'); 5270 c.rect(0, h * 0.5 - 2.5, w, 5); 5271 c.fill(); 5272 5273 var barPos = mxUtils.getValue(this.style, mxMockupC.BAR_POS, '80'); 5274 barPos = Math.min(barPos, 100); 5275 barPos = Math.max(barPos, 0); 5276 var deadzone = 0; 5277 var virRange = w - 2 * deadzone; 5278 var truePos = deadzone + virRange * barPos / 100; 5279 5280 c.setFillColor('#8AD155'); 5281 c.rect(0, h * 0.5 - 2.5, truePos, 5); 5282 c.fill(); 5283}; 5284 5285mxCellRenderer.registerShape(mxMockupC.SHAPE_ICLOUD_PROGRESS_BAR, mxShapeMockupiCloudProgressBar); 5286 5287Graph.handleFactory[mxMockupC.SHAPE_ICLOUD_PROGRESS_BAR] = function(state) 5288{ 5289 var handles = [Graph.createHandle(state, ['barPos'], function(bounds) 5290 { 5291 var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4)))); 5292 5293 return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2); 5294 }, function(bounds, pt) 5295 { 5296 this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100; 5297 })]; 5298 5299 return handles; 5300}; 5301 5302//********************************************************************************************************************************************************** 5303//Download Bar 5304//********************************************************************************************************************************************************** 5305/** 5306 * Extends mxShape. 5307 */ 5308function mxShapeMockupiDownloadBar(bounds, fill, stroke, strokewidth) 5309{ 5310 mxShape.call(this); 5311 this.bounds = bounds; 5312 this.fill = fill; 5313 this.stroke = stroke; 5314 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 5315}; 5316 5317/** 5318 * Extends mxShape. 5319 */ 5320mxUtils.extend(mxShapeMockupiDownloadBar, mxShape); 5321 5322mxShapeMockupiDownloadBar.prototype.customProperties = [ 5323 {name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, defVal:30}, 5324]; 5325 5326/** 5327 * Function: paintVertexShape 5328 * 5329 * Paints the vertex shape. 5330 */ 5331mxShapeMockupiDownloadBar.prototype.paintVertexShape = function(c, x, y, w, h) 5332{ 5333 c.translate(x, y); 5334 5335 c.setGradient('#00ccff', '#0066cc', 0, 0, w, h, mxConstants.DIRECTION_SOUTH, 1, 1); 5336 c.rect(0, 0, w, h); 5337 c.fill(); 5338 c.setShadow(false); 5339 5340 this.foreground(c, w, h); 5341}; 5342 5343mxShapeMockupiDownloadBar.prototype.foreground = function(c, w, h) 5344{ 5345 var fieldText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, ''); 5346 c.setFontColor('#ffffff'); 5347 c.setFontStyle(mxConstants.FONT_BOLD); 5348 c.setFontSize(8); 5349 c.text(w * 0.5, h * 0.2, 0, 0, fieldText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 5350 5351 var barPos = mxUtils.getValue(this.style, mxMockupC.BAR_POS, '80'); 5352 barPos = Math.min(barPos, 100); 5353 barPos = Math.max(barPos, 0); 5354 var deadzone = w * 0.1; 5355 var virRange = w - 2 * deadzone; 5356 var truePos = deadzone + virRange * barPos / 100; 5357 5358 c.setStrokeWidth(0.5); 5359 c.setGradient('#96D1FF', '#003377', deadzone, h * 0.65 - 2.5, w - 2 * deadzone, 5, mxConstants.DIRECTION_NORTH, 1, 1); 5360 c.roundrect(deadzone, h * 0.65 - 2.5, w - 2 * deadzone, 5, 2.5, 2.5); 5361 c.fill(); 5362 5363 c.setGradient('#aaaaaa', '#ffffff', deadzone + 2.5, h * 0.65 - 2.5, truePos - deadzone - 2.5, 5, mxConstants.DIRECTION_NORTH, 1, 1); 5364 c.begin(); 5365 c.moveTo(truePos, h * 0.65 - 2.5); 5366 c.arcTo(2.5, 2.5, 0, 0, 1, truePos, h * 0.65 + 2.5); 5367 c.lineTo(deadzone + 2.5, h * 0.65 + 2.5); 5368 c.arcTo(2.5, 2.5, 0, 0, 1, deadzone + 2.5, h * 0.65 - 2.5); 5369 c.close(); 5370 c.fill(); 5371}; 5372 5373mxCellRenderer.registerShape(mxMockupC.SHAPE_IDOWNLOAD_BAR, mxShapeMockupiDownloadBar); 5374 5375Graph.handleFactory[mxMockupC.SHAPE_IDOWNLOAD_BAR] = function(state) 5376{ 5377 var handles = [Graph.createHandle(state, ['barPos'], function(bounds) 5378 { 5379 var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 40)))); 5380 5381 return new mxPoint(bounds.x + bounds.width * 0.1 + barPos * bounds.width * 0.8 / 100, bounds.y + bounds.height * 0.65); 5382 }, function(bounds, pt) 5383 { 5384 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; 5385 })]; 5386 5387 return handles; 5388}; 5389 5390//********************************************************************************************************************************************************** 5391//Screen Name Bar 5392//********************************************************************************************************************************************************** 5393/** 5394 * Extends mxShape. 5395 */ 5396function mxShapeMockupiScreenNameBar(bounds, fill, stroke, strokewidth) 5397{ 5398 mxShape.call(this); 5399 this.bounds = bounds; 5400 this.fill = fill; 5401 this.stroke = stroke; 5402 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 5403}; 5404 5405/** 5406 * Extends mxShape. 5407 */ 5408mxUtils.extend(mxShapeMockupiScreenNameBar, mxShape); 5409 5410/** 5411 * Function: paintVertexShape 5412 * 5413 * Paints the vertex shape. 5414 */ 5415mxShapeMockupiScreenNameBar.prototype.paintVertexShape = function(c, x, y, w, h) 5416{ 5417 c.translate(x, y); 5418 var rSize = 5; 5419 c.setStrokeWidth(0.5); 5420 var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '#00ff00'); 5421 c.setFillColor(fillColor2); 5422 c.rect(0, 0, w, h); 5423 c.fill(); 5424 c.setShadow(false); 5425 5426 this.foreground(c, w, h, rSize); 5427}; 5428 5429mxShapeMockupiScreenNameBar.prototype.foreground = function(c, w, h, rSize) 5430{ 5431 var fillColor3 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR3, '#00ff00'); 5432 c.setGradient(fillColor3, fillColor3, 0, 0, w, h * 0.5, mxConstants.DIRECTION_SOUTH, 0.8, 0.1); 5433 c.rect(0, 0, w, h * 0.5); 5434 c.fill(); 5435 5436 var fieldText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, ''); 5437 var textColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR, '#00ff00'); 5438 c.setFontColor(textColor); 5439 c.setFontSize(9.5); 5440 c.text(w * 0.5, h * 0.45, 0, 0, fieldText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 5441}; 5442 5443mxCellRenderer.registerShape(mxMockupC.SHAPE_ISCREEN_NAME_BAR, mxShapeMockupiScreenNameBar); 5444 5445//********************************************************************************************************************************************************** 5446//Icon Grid 5447//********************************************************************************************************************************************************** 5448/** 5449 * Extends mxShape. 5450 */ 5451function mxShapeMockupiIconGrid(bounds, fill, stroke, strokewidth) 5452{ 5453 mxShape.call(this); 5454 this.bounds = bounds; 5455 this.fill = fill; 5456 this.stroke = stroke; 5457 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 5458}; 5459 5460/** 5461 * Extends mxShape. 5462 */ 5463mxUtils.extend(mxShapeMockupiIconGrid, mxShape); 5464 5465mxShapeMockupiIconGrid.prototype.customProperties = [ 5466 {name: 'gridSize', dispName: 'Grid Size', type: 'string'}, 5467]; 5468 5469/** 5470 * Function: paintVertexShape 5471 * 5472 * Paints the vertex shape. 5473 */ 5474mxShapeMockupiIconGrid.prototype.paintVertexShape = function(c, x, y, w, h) 5475{ 5476 c.translate(x, y); 5477 var gridSize = mxUtils.getValue(this.style, mxMockupC.GRID_SIZE, '3,3').toString().split(','); 5478 this.background(c, w, h, gridSize); 5479 c.setShadow(false); 5480 5481 this.foreground(c, w, h, gridSize); 5482}; 5483 5484mxShapeMockupiIconGrid.prototype.background = function(c, w, h, gridSize) 5485{ 5486 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#00ff00'); 5487 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#00ff00'); 5488 c.setStrokeColor(strokeColor); 5489 c.setFillColor(fillColor); 5490 5491 var boxSizeX = w / (parseInt(gridSize[0],10) + (gridSize[0]-1) * 0.5); 5492 var boxSizeY = h / (parseInt(gridSize[1],10) + (gridSize[1]-1) * 0.5); 5493 5494 for (var i = 0; i < gridSize[0]; i++) 5495 { 5496 for (var j = 0; j < gridSize[1]; j++) 5497 { 5498 c.rect(boxSizeX * 1.5 * i, boxSizeY * 1.5 * j, boxSizeX, boxSizeY); 5499 c.fillAndStroke(); 5500 } 5501 } 5502}; 5503 5504mxShapeMockupiIconGrid.prototype.foreground = function(c, w, h, gridSize) 5505{ 5506 var boxSizeX = w / (parseInt(gridSize[0],10) + (gridSize[0]-1) * 0.5); 5507 var boxSizeY = h / (parseInt(gridSize[1],10) + (gridSize[1]-1) * 0.5); 5508 5509 for (var i = 0; i < gridSize[0]; i++) 5510 { 5511 for (var j = 0; j < gridSize[1]; j++) 5512 { 5513 c.begin(); 5514 c.moveTo(boxSizeX * 1.5 * i, boxSizeY * 1.5 * j); 5515 c.lineTo(boxSizeX * 1.5 * i + boxSizeX, boxSizeY * 1.5 * j + boxSizeY); 5516 c.moveTo(boxSizeX * 1.5 * i + boxSizeX, boxSizeY * 1.5 * j); 5517 c.lineTo(boxSizeX * 1.5 * i, boxSizeY * 1.5 * j + boxSizeY); 5518 c.stroke(); 5519 } 5520 } 5521}; 5522 5523mxCellRenderer.registerShape(mxMockupC.SHAPE_IICON_GRID, mxShapeMockupiIconGrid); 5524 5525//********************************************************************************************************************************************************** 5526//Copy 5527//********************************************************************************************************************************************************** 5528/** 5529 * Extends mxShape. 5530 */ 5531function mxShapeMockupiCopy(bounds, fill, stroke, strokewidth) 5532{ 5533 mxShape.call(this); 5534 this.bounds = bounds; 5535 this.fill = fill; 5536 this.stroke = stroke; 5537 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 5538}; 5539 5540/** 5541 * Extends mxShape. 5542 */ 5543mxUtils.extend(mxShapeMockupiCopy, mxShape); 5544 5545/** 5546 * Function: paintVertexShape 5547 * 5548 * Paints the vertex shape. 5549 */ 5550mxShapeMockupiCopy.prototype.paintVertexShape = function(c, x, y, w, h) 5551{ 5552 var rSize = 5; 5553 c.translate(x, y); 5554 this.background(c, w, h, rSize); 5555 c.setShadow(false); 5556 5557 this.foreground(c, w, h, rSize); 5558}; 5559 5560mxShapeMockupiCopy.prototype.background = function(c, w, h, rSize) 5561{ 5562 c.begin(); 5563 c.moveTo(0, rSize); 5564 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 5565 c.lineTo(w - rSize, 0); 5566 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 5567 c.lineTo(w, h - rSize - 7.5); 5568 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h - 7.5); 5569 c.lineTo(w * 0.5 + 7.5, h - 7.5); 5570 c.lineTo(w * 0.5, h); 5571 c.lineTo(w * 0.5 - 7.5, h - 7.5); 5572 c.lineTo(rSize, h - 7.5); 5573 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize - 7.5); 5574 c.close(); 5575 c.fillAndStroke(); 5576}; 5577 5578mxShapeMockupiCopy.prototype.foreground = function(c, w, h, rSize) 5579{ 5580 var fillColor3 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR3, '#00ff00'); 5581 c.setGradient(fillColor3, fillColor3, 0, 0, w, h * 0.5, mxConstants.DIRECTION_SOUTH, 0.8, 0.1); 5582 c.begin(); 5583 c.moveTo(0, rSize); 5584 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 5585 c.lineTo(w - rSize, 0); 5586 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 5587 c.lineTo(w, (h - 7.5) * 0.5); 5588 c.lineTo(0, (h - 7.5) * 0.5); 5589 c.close(); 5590 c.fill(); 5591 5592 var fieldText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, ''); 5593 var textColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR, '#00ff00'); 5594 c.setFontColor(textColor); 5595 c.setFontSize(8.5); 5596 c.text(w * 0.5, (h - 7.5)* 0.45, 0, 0, fieldText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 5597}; 5598 5599mxCellRenderer.registerShape(mxMockupC.SHAPE_ICOPY, mxShapeMockupiCopy); 5600 5601//********************************************************************************************************************************************************** 5602//Copy Area 5603//********************************************************************************************************************************************************** 5604/** 5605 * Extends mxShape. 5606 */ 5607function mxShapeMockupiCopyArea(bounds, fill, stroke, strokewidth) 5608{ 5609 mxShape.call(this); 5610 this.bounds = bounds; 5611 this.fill = fill; 5612 this.stroke = stroke; 5613 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 5614}; 5615 5616/** 5617 * Extends mxShape. 5618 */ 5619mxUtils.extend(mxShapeMockupiCopyArea, mxShape); 5620 5621/** 5622 * Function: paintVertexShape 5623 * 5624 * Paints the vertex shape. 5625 */ 5626mxShapeMockupiCopyArea.prototype.paintVertexShape = function(c, x, y, w, h) 5627{ 5628 var rSize = 5; 5629 c.translate(x, y); 5630 this.background(c, w, h, rSize); 5631 c.setShadow(false); 5632 5633 this.foreground(c, w, h, rSize); 5634}; 5635 5636mxShapeMockupiCopyArea.prototype.background = function(c, w, h, rSize) 5637{ 5638 c.begin(); 5639 c.moveTo(w * 0.5 - 20, 0 + rSize); 5640 c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 - 20 + rSize, 0); 5641 c.lineTo(w * 0.5 + 20 - rSize, 0); 5642 c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 + 20, rSize); 5643 c.lineTo(w * 0.5 + 20, 20 - rSize); 5644 c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 + 20 - rSize, 20); 5645 c.lineTo(w * 0.5 + 7.5, 20); 5646 c.lineTo(w * 0.5, 27.5); 5647 c.lineTo(w * 0.5 - 7.5, 20); 5648 c.lineTo(w * 0.5 - 20 + rSize, 20); 5649 c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 - 20, 20 - rSize); 5650 c.close(); 5651 c.fillAndStroke(); 5652}; 5653 5654mxShapeMockupiCopyArea.prototype.foreground = function(c, w, h, rSize) 5655{ 5656 c.setAlpha(0.3); 5657 c.setFillColor('#2266ff'); 5658 c.rect(2.5, 27.5, w - 5, h - 30); 5659 c.fill(); 5660 c.setAlpha(1); 5661 5662 if (h > 27.5) 5663 { 5664 c.setStrokeColor('#ffffff'); 5665 c.setGradient('#88ddff', '#2266ff', w * 0.5 - 2.5, 25, 5, 5, mxConstants.DIRECTION_SOUTH, 1, 1); 5666 c.ellipse(w * 0.5 - 2.5, 25, 5, 5); 5667 c.fillAndStroke(); 5668 c.setGradient('#88ddff', '#2266ff', w * 0.5 - 2.5, h - 5, 5, 5, mxConstants.DIRECTION_SOUTH, 1, 1); 5669 c.ellipse(w * 0.5 - 2.5, h - 5, 5, 5); 5670 c.fillAndStroke(); 5671 c.setGradient('#88ddff', '#2266ff', 0, h * 0.5 + 10, 5, 5, mxConstants.DIRECTION_SOUTH, 1, 1); 5672 c.ellipse(0, h * 0.5 + 10, 5, 5); 5673 c.fillAndStroke(); 5674 c.setGradient('#88ddff', '#2266ff', w - 5, h * 0.5 + 10, 5, 5, mxConstants.DIRECTION_SOUTH, 1, 1); 5675 c.ellipse(w - 5, h * 0.5 + 10, 5, 5); 5676 c.fillAndStroke(); 5677 } 5678 5679 var fillColor2 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR2, '#00ff00'); 5680 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#00ff00'); 5681 5682 c.setFillColor(fillColor2); 5683 c.setStrokeColor(strokeColor); 5684 c.begin(); 5685 c.moveTo(w * 0.5 - 20, 0 + rSize); 5686 c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 - 20 + rSize, 0); 5687 c.lineTo(w * 0.5 + 20 - rSize, 0); 5688 c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 + 20, rSize); 5689 c.lineTo(w * 0.5 + 20, 20 - rSize); 5690 c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 + 20 - rSize, 20); 5691 c.lineTo(w * 0.5 + 7.5, 20); 5692 c.lineTo(w * 0.5, 27.5); 5693 c.lineTo(w * 0.5 - 7.5, 20); 5694 c.lineTo(w * 0.5 - 20 + rSize, 20); 5695 c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 - 20, 20 - rSize); 5696 c.close(); 5697 c.fillAndStroke(); 5698 5699 var fillColor3 = mxUtils.getValue(this.style, mxMockupC.STYLE_FILLCOLOR3, '#00ff00'); 5700 c.setGradient(fillColor3, fillColor3, w * 0.5 - 20, 0, 40, 10, mxConstants.DIRECTION_SOUTH, 0.8, 0.1); 5701 c.begin(); 5702 c.moveTo(w * 0.5 - 20, rSize); 5703 c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 - 20 + rSize, 0); 5704 c.lineTo(w * 0.5 + 20 - rSize, 0); 5705 c.arcTo(rSize, rSize, 0, 0, 1, w * 0.5 + 20, rSize); 5706 c.lineTo(w * 0.5 + 20, 10); 5707 c.lineTo(w * 0.5 - 20, 10); 5708 c.close(); 5709 c.fill(); 5710 5711 var fieldText = mxUtils.getValue(this.style, mxMockupC.BUTTON_TEXT, ''); 5712 var textColor = mxUtils.getValue(this.style, mxMockupC.STYLE_TEXTCOLOR, '#00ff00'); 5713 c.setFontColor(textColor); 5714 c.setFontSize(8.5); 5715 5716 c.text(w * 0.5, 8.75, 0, 0, fieldText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 5717}; 5718 5719mxCellRenderer.registerShape(mxMockupC.SHAPE_ICOPY_AREA, mxShapeMockupiCopyArea); 5720 5721//********************************************************************************************************************************************************** 5722//Home Page Control 5723//********************************************************************************************************************************************************** 5724/** 5725 * Extends mxShape. 5726 */ 5727function mxShapeMockupiHomePageControl(bounds, fill, stroke, strokewidth) 5728{ 5729 mxShape.call(this); 5730 this.bounds = bounds; 5731 this.fill = fill; 5732 this.stroke = stroke; 5733 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 5734}; 5735 5736/** 5737 * Extends mxShape. 5738 */ 5739mxUtils.extend(mxShapeMockupiHomePageControl, mxShape); 5740 5741/** 5742 * Function: paintVertexShape 5743 * 5744 * Paints the vertex shape. 5745 */ 5746mxShapeMockupiHomePageControl.prototype.paintVertexShape = function(c, x, y, w, h) 5747{ 5748 c.translate(x, y); 5749 5750 5751 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#000000'); 5752 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000'); 5753 c.setStrokeColor(strokeColor); 5754 c.setFillColor(fillColor); 5755 5756 var rSize = Math.min(h * 0.5, w * 0.05); 5757 c.ellipse(w * 0.35 - rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize); 5758 c.fill(); 5759 c.ellipse(w * 0.65 - rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize); 5760 c.fill(); 5761 c.ellipse(w - 2 * rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize); 5762 c.fill(); 5763 5764 c.ellipse(rSize * 0.2, h * 0.5 - rSize * 0.8, rSize * 1.2, rSize * 1.2); 5765 c.stroke(); 5766 c.begin(); 5767 c.moveTo(rSize * 1.15, h * 0.5 + rSize * 0.25); 5768 c.lineTo(rSize * 1.6, h * 0.5 + rSize * 0.8); 5769 c.stroke(); 5770}; 5771 5772mxCellRenderer.registerShape(mxMockupC.SHAPE_IHOME_PAGE_CONTROL, mxShapeMockupiHomePageControl); 5773 5774//********************************************************************************************************************************************************** 5775//Page Control 5776//********************************************************************************************************************************************************** 5777/** 5778 * Extends mxShape. 5779 */ 5780function mxShapeMockupiPageControl(bounds, fill, stroke, strokewidth) 5781{ 5782 mxShape.call(this); 5783 this.bounds = bounds; 5784 this.fill = fill; 5785 this.stroke = stroke; 5786 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 5787}; 5788 5789/** 5790 * Extends mxShape. 5791 */ 5792mxUtils.extend(mxShapeMockupiPageControl, mxShape); 5793 5794/** 5795 * Function: paintVertexShape 5796 * 5797 * Paints the vertex shape. 5798 */ 5799mxShapeMockupiPageControl.prototype.paintVertexShape = function(c, x, y, w, h) 5800{ 5801 c.translate(x, y); 5802 5803 5804 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#000000'); 5805 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000'); 5806 5807 var rSize = Math.min(h * 0.5, w * 0.05); 5808 c.setFillColor(strokeColor); 5809 c.ellipse(0, h * 0.5 - rSize, 2 * rSize, 2 * rSize); 5810 c.fill(); 5811 c.setFillColor(fillColor); 5812 c.ellipse(w * 0.35 - rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize); 5813 c.fill(); 5814 c.ellipse(w * 0.65 - rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize); 5815 c.fill(); 5816 c.ellipse(w - 2 * rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize); 5817 c.fill(); 5818}; 5819 5820mxCellRenderer.registerShape(mxMockupC.SHAPE_IPAGE_CONTROL, mxShapeMockupiPageControl); 5821 5822//********************************************************************************************************************************************************** 5823//iPad 5824//********************************************************************************************************************************************************** 5825/** 5826 * Extends mxShape. 5827 */ 5828function mxShapeMockupiPad(bounds, fill, stroke, strokewidth) 5829{ 5830 mxShape.call(this); 5831 this.bounds = bounds; 5832 this.fill = fill; 5833 this.stroke = stroke; 5834 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 5835}; 5836 5837/** 5838 * Extends mxShape. 5839 */ 5840mxUtils.extend(mxShapeMockupiPad, mxShape); 5841 5842mxShapeMockupiPad.prototype.customProperties = [ 5843 {name: 'bgStyle', dispName: 'Background', type: 'enum', 5844 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'}] 5845 } 5846]; 5847 5848/** 5849 * Function: paintVertexShape 5850 * 5851 * Paints the vertex shape. 5852 */ 5853mxShapeMockupiPad.prototype.paintVertexShape = function(c, x, y, w, h) 5854{ 5855 var rSize = 25; 5856 c.translate(x, y); 5857 this.background(c, x, y, w, h, rSize); 5858 c.setShadow(false); 5859 this.foreground(c, x, y, w, h, rSize); 5860}; 5861 5862mxShapeMockupiPad.prototype.background = function(c, x, y, w, h, rSize) 5863{ 5864 c.setFillColor('#000000'); 5865 c.setStrokeColor('#000000'); 5866 c.roundrect(0, 0, w, h, rSize, rSize); 5867 c.fillAndStroke(); 5868}; 5869 5870mxShapeMockupiPad.prototype.foreground = function(c, x, y, w, h, rSize) 5871{ 5872 c.setStrokeWidth(1.5); 5873 c.setStrokeColor('#999999'); 5874 5875 c.begin(); 5876 c.setStrokeColor('none'); 5877 c.setFillColor('#808080'); 5878 c.setGradient('#808080', '#000000', w * 0.325, 0, w * 0.675, h * 0.5, mxConstants.DIRECTION_SOUTH, 1, 1); 5879 c.moveTo(w * 0.325, 0); 5880 c.lineTo(w - rSize, 0); 5881 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 5882 c.lineTo(w, h * 0.5); 5883 c.lineTo(w * 0.7, h * 0.5); 5884 c.close(); 5885 c.fillAndStroke(); 5886 5887 c.begin(); 5888 c.setFillColor('#1f2923'); 5889 c.setStrokeColor('#18211b'); 5890 c.setStrokeWidth(1); 5891 5892 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, ''); 5893 var bgStyle = mxUtils.getValue(this.style, mxMockupC.BG_STYLE, mxMockupC.BG_FLAT_GREEN); 5894 5895 c.setStrokeWidth(1); 5896 5897 if (bgStyle === mxMockupC.BG_FLAT_WHITE) 5898 { 5899 c.setFillColor('#ffffff'); 5900 c.rect(w * 0.0928, h * 0.08, w * 0.8144, h * 0.816); 5901 c.fill(); 5902 } 5903 else if (bgStyle === mxMockupC.BG_FLAT_GREEN) 5904 { 5905 c.setFillColor('#1f2923'); 5906 c.rect(w * 0.0928, h * 0.08, w * 0.8144, h * 0.816); 5907 c.fill(); 5908 } 5909 else if (bgStyle === mxMockupC.BG_FLAT_GRAY) 5910 { 5911 c.setFillColor('#dddddd'); 5912 c.rect(w * 0.0928, h * 0.08, w * 0.8144, h * 0.816); 5913 c.fill(); 5914 } 5915 else if (bgStyle === mxMockupC.BG_FLAT_CUSTOM) 5916 { 5917 c.setFillColor(fillColor); 5918 c.rect(w * 0.0928, h * 0.08, w * 0.8144, h * 0.816); 5919 c.fill(); 5920 } 5921 else if (bgStyle === mxMockupC.BG_STRIPED) 5922 { 5923 var xOld = x; 5924 var yOld = y; 5925 var wOld = w; 5926 var hOld = h; 5927 c.translate(w * 0.0928, h * 0.08); 5928 w = w * 0.8144; 5929 h = h * 0.816; 5930 5931 c.setFillColor('#5D7585'); 5932 c.rect(0, 0, w, h); 5933 c.fillAndStroke(); 5934 5935 var strokeColor = '#18211b'; 5936 var strokeColor2 = '#657E8F'; 5937 5938 c.setStrokeColor(strokeColor2); 5939 var i = 7; 5940 c.begin(); 5941 5942 while (i < w) 5943 { 5944 c.moveTo(i, 0); 5945 c.lineTo(i, h); 5946 i = i + 7; 5947 } 5948 5949 c.stroke(); 5950 5951 c.setStrokeColor(strokeColor); 5952 c.begin(); 5953 c.rect(0, 0, w, h); 5954 c.stroke(); 5955 5956 w = wOld; 5957 h = hOld; 5958 c.translate( - w * 0.0928, - h * 0.08); 5959 } 5960 else if (bgStyle === mxMockupC.BG_MAP) 5961 { 5962 var xOld = x; 5963 var yOld = y; 5964 var wOld = w; 5965 var hOld = h; 5966 c.translate(w * 0.0928, h * 0.08); 5967 w = w * 0.8144; 5968 h = h * 0.816; 5969 5970 c.setFillColor('#ffffff'); 5971 c.rect(0, 0, w, h); 5972 c.fillAndStroke(); 5973 5974 var fillColor2 = '#96D1FF'; 5975 var strokeColor = '#18211b'; 5976 var strokeColor2 = '#008cff'; 5977 5978 c.setFillColor(fillColor2); 5979 c.setStrokeColor(strokeColor2); 5980 c.setStrokeWidth(0.5); 5981 5982 c.begin(); 5983 c.moveTo(0, 0); 5984 c.lineTo(w * 0.1171, 0); 5985 c.lineTo(w * 0.1136, h * 0.0438); 5986 c.lineTo(w * 0.0993, h * 0.054); 5987 c.lineTo(0, h * 0.0446); 5988 c.close(); 5989 c.fillAndStroke(); 5990 5991 c.begin(); 5992 c.moveTo(w * 0.1993, 0); 5993 c.lineTo(w * 0.1914, h * 0.03884); 5994 c.lineTo(w * 0.1536, h * 0.0362); 5995 c.lineTo(w * 0.1586, 0); 5996 c.close(); 5997 c.fillAndStroke(); 5998 5999 c.begin(); 6000 c.moveTo(w * 0.24, 0); 6001 c.lineTo(w * 0.2257, h * 0.054); 6002 c.lineTo(w * 0.2414, h * 0.0674); 6003 c.lineTo(w * 0.4707, h * 0.0835); 6004 c.lineTo(w * 0.5264, h * 0.0906); 6005 c.lineTo(w * 0.6429, h * 0.0929); 6006 c.arcTo(w * 0.0857, h * 0.0536, 0, 0, 0, w * 0.7193, h * 0.0621); 6007 c.arcTo(w * 0.48, h * 0.2143, 0, 0, 0, w * 0.7286, 0); 6008 c.close(); 6009 c.fillAndStroke(); 6010 6011 c.begin(); 6012 c.moveTo(w * 0.8, 0); 6013 c.lineTo(w * 0.7886, h * 0.04554); 6014 c.arcTo(w * 0.0857, h * 0.0536, 0, 0, 0, w * 0.8164, h * 0.0875); 6015 c.arcTo(w * 0.1429, h * 0.0893, 0, 0, 0, w * 0.88, h * 0.1036); 6016 c.lineTo(w, h * 0.1112); 6017 c.lineTo(w, 0); 6018 c.close(); 6019 c.fillAndStroke(); 6020 6021 c.begin(); 6022 c.moveTo(0, h * 0.0933); 6023 c.lineTo(w * 0.08, h * 0.1036); 6024 c.lineTo(w * 0.1021, h * 0.1246); 6025 c.lineTo(w * 0.1007, h * 0.1768); 6026 c.lineTo(w * 0.0471, h * 0.2241); 6027 c.lineTo(0, h * 0.2527); 6028 c.close(); 6029 c.fillAndStroke(); 6030 6031 c.ellipse(w * 0.1214, h * 0.0603, w * 0.0843, h * 0.0576); 6032 c.fillAndStroke(); 6033 6034 c.begin(); 6035 c.moveTo(w * 0.1293, h * 0.1924); 6036 c.lineTo(w * 0.1729, h * 0.142); 6037 c.lineTo(w * 0.1407, h * 0.1411); 6038 c.lineTo(w * 0.14, h * 0.1777); 6039 c.close(); 6040 c.fillAndStroke(); 6041 6042 c.begin(); 6043 c.moveTo(w * 0.4586, h * 0.1241); 6044 c.lineTo(w * 0.455, h * 0.1835); 6045 c.lineTo(w * 0.3893, h * 0.2246); 6046 c.lineTo(w * 0.2171, h * 0.1362); 6047 c.lineTo(w * 0.2171, h * 0.1308); 6048 c.lineTo(w * 0.2293, h * 0.1214); 6049 c.lineTo(w * 0.2857, h * 0.1174); 6050 c.close(); 6051 c.fillAndStroke(); 6052 6053 c.begin(); 6054 c.moveTo(w * 0.5079, h * 0.1134); 6055 c.lineTo(w * 0.7307, h * 0.1223); 6056 c.lineTo(w * 0.7279, h * 0.1625); 6057 c.lineTo(w * 0.715, h * 0.1772); 6058 c.lineTo(w * 0.6929, h * 0.1688); 6059 c.lineTo(w * 0.625, h * 0.1795); 6060 c.lineTo(w * 0.4779, h * 0.2835); 6061 c.lineTo(w * 0.395, h * 0.2299); 6062 c.lineTo(w * 0.4657, h * 0.1826); 6063 c.lineTo(w * 0.4707, h * 0.1223); 6064 c.close(); 6065 c.fillAndStroke(); 6066 6067 c.begin(); 6068 c.moveTo(w, h * 0.1362); 6069 c.lineTo(w * 0.7643, h * 0.1237); 6070 c.lineTo(w * 0.7543, h * 0.1562); 6071 c.lineTo(w * 0.7643, h * 0.1585); 6072 c.lineTo(w * 0.9186, h * 0.2366); 6073 c.lineTo(w, h * 0.1732); 6074 c.close(); 6075 c.fillAndStroke(); 6076 6077 c.begin(); 6078 c.moveTo(w * 0.2079, h * 0.1545); 6079 c.lineTo(w * 0.3886, h * 0.2536); 6080 c.lineTo(w * 0.3414, h * 0.2933); 6081 c.lineTo(w * 0.1743, h * 0.1969); 6082 c.close(); 6083 c.fillAndStroke(); 6084 6085 c.begin(); 6086 c.moveTo(w * 0.1579, h * 0.2134); 6087 c.lineTo(w * 0.3221, h * 0.3067); 6088 c.lineTo(w * 0.2957, h * 0.3237); 6089 c.lineTo(w * 0.1157, h * 0.2424); 6090 c.close(); 6091 c.fillAndStroke(); 6092 6093 c.begin(); 6094 c.moveTo(w * 0.405, h * 0.2656); 6095 c.lineTo(w * 0.31, h * 0.3353); 6096 c.lineTo(w * 0.3693, h * 0.3661); 6097 c.lineTo(w * 0.4571, h * 0.2982); 6098 c.close(); 6099 c.fillAndStroke(); 6100 6101 c.begin(); 6102 c.moveTo(w * 0.7121, h * 0.1848); 6103 c.lineTo(w * 0.6879, h * 0.1754); 6104 c.lineTo(w * 0.6329, h * 0.1844); 6105 c.lineTo(w * 0.61, h * 0.2018); 6106 c.lineTo(w * 0.6207, h * 0.2085); 6107 c.lineTo(w * 0.4986, h * 0.2982); 6108 c.lineTo(w * 0.535, h * 0.3237); 6109 c.close(); 6110 c.fillAndStroke(); 6111 6112 c.begin(); 6113 c.moveTo(w * 0.5557, h * 0.3379); 6114 c.lineTo(w * 0.7464, h * 0.1826); 6115 c.lineTo(w * 0.8036, h * 0.2076); 6116 c.lineTo(w * 0.595, h * 0.3616); 6117 c.close(); 6118 c.fillAndStroke(); 6119 6120 c.begin(); 6121 c.moveTo(w * 0.8293, h * 0.2188); 6122 c.lineTo(w * 0.8979, h * 0.2509); 6123 c.lineTo(w * 0.6936, h * 0.4125); 6124 c.lineTo(w * 0.6171, h * 0.3737); 6125 c.close(); 6126 c.fillAndStroke(); 6127 6128 c.begin(); 6129 c.moveTo(w, h * 0.2138); 6130 c.lineTo(w * 0.6821, h * 0.4603); 6131 c.lineTo(w * 0.815, h * 0.5277); 6132 c.lineTo(w, h * 0.4); 6133 c.close(); 6134 c.fillAndStroke(); 6135 6136 c.begin(); 6137 c.moveTo(0, h * 0.317); 6138 c.lineTo(w * 0.0971, h * 0.2554); 6139 c.lineTo(w * 0.4121, h * 0.4143); 6140 c.lineTo(w * 0.3736, h * 0.4415); 6141 c.lineTo(w * 0.315, h * 0.4076); 6142 c.lineTo(w * 0.3093, h * 0.4116); 6143 c.lineTo(w * 0.3686, h * 0.4455); 6144 c.lineTo(w * 0.285, h * 0.5045); 6145 c.lineTo(w * 0.1114, h * 0.4134); 6146 c.lineTo(w * 0.025, h * 0.4603); 6147 c.lineTo(w * 0.0371, h * 0.4723); 6148 c.lineTo(w * 0.1114, h * 0.4371); 6149 c.lineTo(w * 0.2871, h * 0.5312); 6150 c.lineTo(w * 0.1929, h * 0.6058); 6151 c.lineTo(w * 0.2271, h * 0.6705); 6152 c.lineTo(w * 0.17, h * 0.7147); 6153 c.lineTo(w * 0.0314, h * 0.6321); 6154 c.lineTo(0, h * 0.6246); 6155 c.close(); 6156 c.fillAndStroke(); 6157 6158 c.begin(); 6159 c.moveTo(w * 0.48, h * 0.3121); 6160 c.lineTo(w * 0.5157, h * 0.3375); 6161 c.lineTo(w * 0.4314, h * 0.3982); 6162 c.lineTo(w * 0.3929, h * 0.3786); 6163 c.close(); 6164 c.fillAndStroke(); 6165 6166 c.begin(); 6167 c.moveTo(w * 0.3086, h * 0.5179); 6168 c.lineTo(w * 0.53, h * 0.3518); 6169 c.lineTo(w * 0.5757, h * 0.3745); 6170 c.lineTo(w * 0.3479, h * 0.5411); 6171 c.close(); 6172 c.fillAndStroke(); 6173 6174 c.begin(); 6175 c.moveTo(w * 0.5964, h * 0.3884); 6176 c.lineTo(w * 0.6736, h * 0.4277); 6177 c.lineTo(w * 0.445, h * 0.5991); 6178 c.lineTo(w * 0.3664, h * 0.5531); 6179 c.lineTo(w * 0.5057, h * 0.4545); 6180 c.lineTo(w * 0.5507, h * 0.4754); 6181 c.lineTo(w * 0.5571, h * 0.4723); 6182 c.lineTo(w * 0.5114, h * 0.4504); 6183 c.close(); 6184 c.fillAndStroke(); 6185 6186 c.begin(); 6187 c.moveTo(w * 0.4793, h * 0.6161); 6188 c.lineTo(w * 0.6771, h * 0.4643); 6189 c.lineTo(w * 0.8086, h * 0.5326); 6190 c.lineTo(w * 0.7471, h * 0.5817); 6191 c.lineTo(w * 0.7214, h * 0.567); 6192 c.lineTo(w * 0.715, h * 0.571); 6193 c.lineTo(w * 0.7421, h * 0.5871); 6194 c.lineTo(w * 0.6014, h * 0.6933); 6195 c.close(); 6196 c.fillAndStroke(); 6197 6198 c.begin(); 6199 c.moveTo(w, h * 0.4371); 6200 c.lineTo(w * 0.8443, h * 0.546); 6201 c.lineTo(w * 0.9071, h * 0.5701); 6202 c.lineTo(w, h * 0.5022); 6203 c.close(); 6204 c.fillAndStroke(); 6205 6206 c.begin(); 6207 c.moveTo(w * 0.8407, h * 0.5504); 6208 c.lineTo(w * 0.8993, h * 0.5759); 6209 c.lineTo(w * 0.6757, h * 0.7416); 6210 c.lineTo(w * 0.6286, h * 0.7139); 6211 c.close(); 6212 c.fillAndStroke(); 6213 6214 c.begin(); 6215 c.moveTo(w, h * 0.5321); 6216 c.lineTo(w * 0.6979, h * 0.7549); 6217 c.lineTo(w * 0.7457, h * 0.7781); 6218 c.lineTo(w * 0.9814, h * 0.6094); 6219 c.lineTo(w, h * 0.6067); 6220 c.close(); 6221 c.fillAndStroke(); 6222 6223 c.begin(); 6224 c.moveTo(w, h * 0.6254); 6225 c.lineTo(w * 0.7664, h * 0.792); 6226 c.lineTo(w * 0.9586, h * 0.9062); 6227 c.lineTo(w, h * 0.8786); 6228 c.close(); 6229 c.fillAndStroke(); 6230 6231 c.begin(); 6232 c.moveTo(w * 0.3093, h * 0.5464); 6233 c.lineTo(w * 0.4271, h * 0.6152); 6234 c.lineTo(w * 0.245, h * 0.7643); 6235 c.lineTo(w * 0.185, h * 0.7228); 6236 c.lineTo(w * 0.2493, h * 0.6728); 6237 c.lineTo(w * 0.2214, h * 0.6143); 6238 c.close(); 6239 c.fillAndStroke(); 6240 6241 c.begin(); 6242 c.moveTo(0, h * 0.65); 6243 c.lineTo(w * 0.2179, h * 0.7826); 6244 c.lineTo(w * 0.1136, h * 0.8424); 6245 c.close(); 6246 c.fillAndStroke(); 6247 6248 c.begin(); 6249 c.moveTo(0, h * 0.7272); 6250 c.lineTo(w * 0.0821, h * 0.859); 6251 c.lineTo(0, h * 0.9085); 6252 c.close(); 6253 c.fillAndStroke(); 6254 6255 c.begin(); 6256 c.moveTo(w * 0.4529, h * 0.6366); 6257 c.lineTo(w * 0.575, h * 0.7143); 6258 c.lineTo(w * 0.39, h * 0.8621); 6259 c.lineTo(w * 0.2657, h * 0.7902); 6260 c.close(); 6261 c.fillAndStroke(); 6262 6263 c.begin(); 6264 c.moveTo(0, h * 0.9415); 6265 c.lineTo(w * 0.1036, h * 0.8821); 6266 c.lineTo(w * 0.2343, h * 0.959); 6267 c.lineTo(w * 0.1721, h); 6268 c.lineTo(0, h); 6269 c.close(); 6270 c.fillAndStroke(); 6271 6272 c.begin(); 6273 c.moveTo(w * 0.2586, h * 0.7951); 6274 c.lineTo(w * 0.3829, h * 0.8674); 6275 c.lineTo(w * 0.2543, h * 0.9451); 6276 c.lineTo(w * 0.1279, h * 0.8692); 6277 c.close(); 6278 c.fillAndStroke(); 6279 6280 c.begin(); 6281 c.moveTo(w * 0.2836, h * 0.9639); 6282 c.lineTo(w * 0.4207, h * 0.8772); 6283 c.lineTo(w * 0.605, h * 0.7321); 6284 c.lineTo(w * 0.6521, h * 0.7634); 6285 c.lineTo(w * 0.3486, h); 6286 c.lineTo(w * 0.3393, h); 6287 c.close(); 6288 c.fillAndStroke(); 6289 6290 c.begin(); 6291 c.moveTo(w * 0.3879, h); 6292 c.lineTo(w * 0.6721, h * 0.7759); 6293 c.lineTo(w * 0.7171, h * 0.7982); 6294 c.lineTo(w * 0.4564, h); 6295 c.close(); 6296 c.fillAndStroke(); 6297 6298 c.begin(); 6299 c.moveTo(w * 0.4986, h); 6300 c.lineTo(w * 0.7386, h * 0.8125); 6301 c.lineTo(w * 0.9307, h * 0.925); 6302 c.lineTo(w * 0.8264, h); 6303 c.close(); 6304 c.fillAndStroke(); 6305 6306 c.begin(); 6307 c.moveTo(w * 0.8671, h); 6308 c.lineTo(w * 0.9464, h * 0.9491); 6309 c.lineTo(w, h * 0.975); 6310 c.lineTo(w, h); 6311 c.close(); 6312 c.fillAndStroke(); 6313 6314 c.begin(); 6315 c.moveTo(w * 0.2295, h); 6316 c.lineTo(w * 0.2648, h * 0.9792); 6317 c.lineTo(w * 0.2981, h); 6318 c.close(); 6319 c.fillAndStroke(); 6320 6321 w = wOld; 6322 h = hOld; 6323 c.translate( - w * 0.0928, - h * 0.08); 6324 } 6325 6326 c.setStrokeWidth(1); 6327 c.setStrokeColor('#18211b'); 6328 c.rect(w * 0.0928, h * 0.08, w * 0.8144, h * 0.816); 6329 c.stroke(); 6330 6331 c.setStrokeWidth(1.5); 6332 c.setAlpha(0.8); 6333 c.setStrokeColor('#dddddd'); 6334 c.begin(); 6335 c.moveTo(0, rSize); 6336 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 6337 c.lineTo(w - rSize, 0); 6338 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 6339 c.lineTo(w, h - rSize); 6340 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h); 6341 c.lineTo(rSize, h); 6342 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize); 6343 c.close(); 6344 c.stroke(); 6345 6346 rSize = 22.5; 6347 c.begin(); 6348 c.setStrokeColor('#666666'); 6349 c.begin(); 6350 c.moveTo(2.5, 2.5 + rSize); 6351 c.arcTo(rSize, rSize, 0, 0, 1, 2.5 + rSize, 2.5); 6352 c.lineTo(w - rSize - 5, 2.5); 6353 c.arcTo(rSize, rSize, 0, 0, 1, w - 2.5, rSize + 2.5); 6354 c.lineTo(w - 2.5, h - rSize - 2.5); 6355 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize - 2.5, h - 2.5); 6356 c.lineTo(rSize + 2.5, h - 2.5); 6357 c.arcTo(rSize, rSize, 0, 0, 1, 2.5, h - rSize - 2.5); 6358 c.close(); 6359 c.stroke(); 6360 6361 c.setAlpha(1); 6362 c.ellipse(w * 0.4948, h * 0.0444, w * 0.0103, h * 0.008); 6363 c.setStrokeWidth(2.5); 6364 c.setStrokeColor('#000000'); 6365 c.setFillColor('#000099'); 6366 c.fillAndStroke(); 6367 6368 c.setGradient('#bbbbbb', '#000000', w * 0.4588, h * 0.912, w * 0.0825, h * 0.064, mxConstants.DIRECTION_SOUTH, 1, 1); 6369 c.ellipse(w * 0.4588, h * 0.912, w * 0.0825, h * 0.064); 6370 c.fill(); 6371 6372 c.setAlpha(0.5); 6373 c.ellipse(w * 0.4588, h * 0.912, w * 0.0825, h * 0.064); 6374 c.stroke(); 6375 6376 c.begin(); 6377 c.setAlpha(0.85); 6378 c.setFillColor('#000000'); 6379 c.moveTo(w * 0.4598, h * 0.944); 6380 c.arcTo(w * 0.0402, h * 0.0296, 0, 0, 1, w * 0.5402, h * 0.944); 6381 c.arcTo(w * 0.0825, h * 0.064, 0, 0, 1, w * 0.4598, h * 0.944); 6382 c.close(); 6383 c.fillAndStroke(); 6384 6385 c.begin(); 6386 c.setAlpha(0.7); 6387 c.setStrokeWidth(1.5); 6388 c.setStrokeColor('#dddddd'); 6389 rSize = 4; 6390 c.roundrect(w * 0.4814, h * 0.9296, w * 0.0371, h * 0.0288, h * 0.00515, h * 0.004); 6391 c.stroke(); 6392}; 6393 6394mxCellRenderer.registerShape(mxMockupC.SHAPE_IPAD, mxShapeMockupiPad); 6395 6396//********************************************************************************************************************************************************** 6397//Rounded rectangle (adjustable rounding) 6398//********************************************************************************************************************************************************** 6399/** 6400* Extends mxShape. 6401*/ 6402function mxShapeMockupRRect(bounds, fill, stroke, strokewidth) 6403{ 6404 mxShape.call(this); 6405 this.bounds = bounds; 6406 this.fill = fill; 6407 this.stroke = stroke; 6408 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 6409}; 6410 6411/** 6412* Extends mxShape. 6413*/ 6414mxUtils.extend(mxShapeMockupRRect, mxShape); 6415 6416mxShapeMockupRRect.prototype.cst = { 6417 RRECT : 'mxgraph.ios.rrect', 6418 R_SIZE : 'rSize' 6419}; 6420 6421mxShapeMockupRRect.prototype.customProperties = [ 6422 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:5}, 6423]; 6424 6425/** 6426* Function: paintVertexShape 6427* 6428* Paints the vertex shape. 6429*/ 6430mxShapeMockupRRect.prototype.paintVertexShape = function(c, x, y, w, h) 6431{ 6432 c.translate(x, y); 6433 6434 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupRRect.prototype.cst.R_SIZE, '10')); 6435 c.roundrect(0, 0, w, h, rSize); 6436 c.fillAndStroke(); 6437}; 6438 6439mxCellRenderer.registerShape(mxShapeMockupRRect.prototype.cst.RRECT, mxShapeMockupRRect); 6440 6441//********************************************************************************************************************************************************** 6442//Top Button 6443//********************************************************************************************************************************************************** 6444/** 6445* Extends mxShape. 6446*/ 6447function mxShapeIosTopButton(bounds, fill, stroke, strokewidth) 6448{ 6449 mxShape.call(this); 6450 this.bounds = bounds; 6451 this.fill = fill; 6452 this.stroke = stroke; 6453 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 6454}; 6455 6456/** 6457* Extends mxShape. 6458*/ 6459mxUtils.extend(mxShapeIosTopButton, mxShape); 6460 6461mxShapeIosTopButton.prototype.cst = { 6462 TOP_BUTTON : 'mxgraph.ios.topButton', 6463 R_SIZE : 'rSize' 6464}; 6465 6466mxShapeIosTopButton.prototype.customProperties = [ 6467 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:5}, 6468]; 6469 6470/** 6471* Function: paintVertexShape 6472* 6473* Paints the vertex shape. 6474*/ 6475mxShapeIosTopButton.prototype.paintVertexShape = function(c, x, y, w, h) 6476{ 6477 c.translate(x, y); 6478 6479 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeIosTopButton.prototype.cst.R_SIZE, '10')); 6480 6481 c.begin(); 6482 c.moveTo(0, rSize); 6483 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 6484 c.lineTo(w - rSize, 0); 6485 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 6486 c.lineTo(w, h); 6487 c.lineTo(0, h); 6488 c.close(); 6489 c.fillAndStroke(); 6490}; 6491 6492mxCellRenderer.registerShape(mxShapeIosTopButton.prototype.cst.TOP_BUTTON, mxShapeIosTopButton); 6493 6494//********************************************************************************************************************************************************** 6495//Bottom Button 6496//********************************************************************************************************************************************************** 6497/** 6498* Extends mxShape. 6499*/ 6500function mxShapeIosBottomButton(bounds, fill, stroke, strokewidth) 6501{ 6502 mxShape.call(this); 6503 this.bounds = bounds; 6504 this.fill = fill; 6505 this.stroke = stroke; 6506 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 6507}; 6508 6509/** 6510* Extends mxShape. 6511*/ 6512mxUtils.extend(mxShapeIosBottomButton, mxShape); 6513 6514mxShapeIosBottomButton.prototype.cst = { 6515 BOTTOM_BUTTON : 'mxgraph.ios.bottomButton', 6516 R_SIZE : 'rSize' 6517}; 6518 6519mxShapeIosBottomButton.prototype.customProperties = [ 6520 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:5}, 6521]; 6522 6523/** 6524* Function: paintVertexShape 6525* 6526* Paints the vertex shape. 6527*/ 6528mxShapeIosBottomButton.prototype.paintVertexShape = function(c, x, y, w, h) 6529{ 6530 c.translate(x, y); 6531 6532 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeIosBottomButton.prototype.cst.R_SIZE, '10')); 6533 6534 c.begin(); 6535 c.moveTo(0, 0); 6536 c.lineTo(w, 0); 6537 c.lineTo(w, h - rSize); 6538 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h); 6539 c.lineTo(rSize, h); 6540 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize); 6541 c.close(); 6542 c.fillAndStroke(); 6543}; 6544 6545mxCellRenderer.registerShape(mxShapeIosBottomButton.prototype.cst.BOTTOM_BUTTON, mxShapeIosBottomButton); 6546 6547//********************************************************************************************************************************************************** 6548//Anchor (a dummy shape without visuals used for anchoring) 6549//********************************************************************************************************************************************************** 6550/** 6551* Extends mxShape. 6552*/ 6553function mxShapeIosAnchor(bounds, fill, stroke, strokewidth) 6554{ 6555 mxShape.call(this); 6556 this.bounds = bounds; 6557}; 6558 6559/** 6560* Extends mxShape. 6561*/ 6562mxUtils.extend(mxShapeIosAnchor, mxShape); 6563 6564mxShapeIosAnchor.prototype.cst = { 6565 ANCHOR : 'mxgraph.ios.anchor' 6566}; 6567 6568/** 6569* Function: paintVertexShape 6570* 6571* Paints the vertex shape. 6572*/ 6573mxShapeIosAnchor.prototype.paintVertexShape = function(c, x, y, w, h) 6574{ 6575}; 6576 6577mxCellRenderer.registerShape(mxShapeIosAnchor.prototype.cst.ANCHOR, mxShapeIosAnchor); 6578 6579//********************************************************************************************************************************************************** 6580//Checkbox 6581//********************************************************************************************************************************************************** 6582/** 6583* Extends mxShape. 6584*/ 6585function mxShapeIosCheckbox(bounds, fill, stroke, strokewidth) 6586{ 6587 mxShape.call(this); 6588 this.bounds = bounds; 6589 this.fill = fill; 6590 this.stroke = stroke; 6591 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 6592}; 6593 6594/** 6595* Extends mxShape. 6596*/ 6597mxUtils.extend(mxShapeIosCheckbox, mxShape); 6598 6599mxShapeIosCheckbox.prototype.cst = { 6600 CHECKBOX : 'mxgraph.ios.checkbox' 6601}; 6602 6603/** 6604* Function: paintVertexShape 6605* 6606* Paints the vertex shape. 6607*/ 6608mxShapeIosCheckbox.prototype.paintVertexShape = function(c, x, y, w, h) 6609{ 6610 c.translate(x, y); 6611 c.rect(0, 0, w, h); 6612 c.fillAndStroke(); 6613 6614 c.begin(); 6615 c.moveTo(w * 0.8, h * 0.2); 6616 c.lineTo(w * 0.4, h * 0.8); 6617 c.lineTo(w * 0.25, h * 0.6); 6618 c.stroke(); 6619}; 6620 6621mxCellRenderer.registerShape(mxShapeIosCheckbox.prototype.cst.CHECKBOX, mxShapeIosCheckbox); 6622 6623//********************************************************************************************************************************************************** 6624//Fancy Rounded rectangle (adjustable rounding) 6625//********************************************************************************************************************************************************** 6626/** 6627* Extends mxShape. 6628*/ 6629function mxShapeMockupFancyRRect(bounds, fill, stroke, strokewidth) 6630{ 6631 mxShape.call(this); 6632 this.bounds = bounds; 6633 this.fill = fill; 6634 this.stroke = stroke; 6635 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 6636}; 6637 6638/** 6639* Extends mxShape. 6640*/ 6641mxUtils.extend(mxShapeMockupFancyRRect, mxShape); 6642 6643mxShapeMockupFancyRRect.prototype.cst = { 6644 FANCY_RRECT : 'mxgraph.ios.fancyRRect', 6645 R_SIZE : 'rSize' 6646}; 6647 6648mxShapeMockupFancyRRect.prototype.customProperties = [ 6649 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:8} 6650]; 6651 6652/** 6653* Function: paintVertexShape 6654* 6655* Paints the vertex shape. 6656*/ 6657mxShapeMockupFancyRRect.prototype.paintVertexShape = function(c, x, y, w, h) 6658{ 6659 c.translate(x, y); 6660 6661 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupFancyRRect.prototype.cst.R_SIZE, '10')); 6662 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff'); 6663 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000'); 6664 6665// c.setAlpha(0.8); 6666 c.roundrect(0, 0, w, h, rSize); 6667 c.fillAndStroke(); 6668 6669 c.setShadow(false); 6670 6671 c.setStrokeColor(fillColor); 6672 c.setGradient(fillColor, '#ffffff', 0, 0, w, 22.5, mxConstants.DIRECTION_SOUTH, 1, 1); 6673 c.setAlpha(0.3); 6674 c.begin(); 6675 c.moveTo(w - rSize, 0); 6676 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize); 6677 c.lineTo(w, 17.5); 6678 c.arcTo(w * 1.67, h * 2.5, 0, 0, 1, 0, 17.5); 6679 c.lineTo(0, rSize); 6680 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0); 6681 c.close(); 6682 c.fillAndStroke(); 6683 6684 c.setAlpha(0.8); 6685 c.setStrokeColor(strokeColor); 6686 c.setStrokeWidth(1); 6687 c.roundrect(0, 0, w, h, rSize, rSize); 6688 c.stroke(); 6689}; 6690 6691mxCellRenderer.registerShape(mxShapeMockupFancyRRect.prototype.cst.FANCY_RRECT, mxShapeMockupFancyRRect); 6692