1/** 2 * $Id: mxMockupMisc.js,v 1.5 2013/02/28 13:50:11 mate Exp $ 3 * Copyright (c) 2006-2010, JGraph Ltd 4 */ 5 6//********************************************************************************************************************************************************** 7//Playback Controls 8//********************************************************************************************************************************************************** 9/** 10 * Extends mxShape. 11 */ 12function mxShapeMockupPlaybackControls(bounds, fill, stroke, strokewidth) 13{ 14 mxShape.call(this); 15 this.bounds = bounds; 16 this.fill = fill; 17 this.stroke = stroke; 18 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 19}; 20 21/** 22 * Extends mxShape. 23 */ 24mxUtils.extend(mxShapeMockupPlaybackControls, mxShape); 25 26mxShapeMockupPlaybackControls.prototype.cst = { 27 SHAPE_PLAYBACK_CONTROLS : 'mxgraph.mockup.misc.playbackControls', 28 FILL_COLOR2 : 'fillColor2', 29 STROKE_COLOR2 : 'strokeColor2', 30 FILL_COLOR3 : 'fillColor3', 31 STROKE_COLOR3 : 'strokeColor3' 32}; 33 34mxShapeMockupPlaybackControls.prototype.customProperties = [ 35 {name: 'fillColor2', dispName: 'Outline Color', type: 'color'}, 36 {name: 'fillColor3', dispName: 'Symbol Color', type: 'color'}, 37 {name: 'strokeColor2', dispName: 'Outline Stroke Color', type: 'color'}, 38 {name: 'strokeColor3', dispName: 'Symbol Stroke Color', type: 'color'} 39]; 40 41/** 42 * Function: paintVertexShape 43 * 44 * Paints the vertex shape. 45 */ 46mxShapeMockupPlaybackControls.prototype.paintVertexShape = function(c, x, y, w, h) 47{ 48 var controlBarHeight = 30; 49 var buttonSize = 22; 50 var h = Math.max(h, controlBarHeight); 51 var w = Math.max(225, w); 52 53 c.translate(x, y); 54 this.background(c, w, h, controlBarHeight); 55 c.setShadow(false); 56 this.foreground(c, w, h, controlBarHeight, buttonSize); 57}; 58 59mxShapeMockupPlaybackControls.prototype.background = function(c, w, h, controlBarHeight) 60{ 61 c.rect(0, (h - controlBarHeight) * 0.5, w, controlBarHeight); 62 c.fillAndStroke(); 63} 64 65mxShapeMockupPlaybackControls.prototype.foreground = function(c, w, h, controlBarHeight, buttonSize) 66{ 67 var fillColor2 = mxUtils.getValue(this.style, mxShapeMockupPlaybackControls.prototype.cst.FILL_COLOR2, '#99ddff'); 68 var strokeColor2 = mxUtils.getValue(this.style, mxShapeMockupPlaybackControls.prototype.cst.STROKE_COLOR2, 'none'); 69 var fillColor3 = mxUtils.getValue(this.style, mxShapeMockupPlaybackControls.prototype.cst.FILL_COLOR3, '#ffffff'); 70 var strokeColor3 = mxUtils.getValue(this.style, mxShapeMockupPlaybackControls.prototype.cst.STROKE_COLOR3, 'none'); 71 72 c.setStrokeColor(strokeColor2); 73 c.setFillColor(fillColor2); 74 c.ellipse(10, h * 0.5 - buttonSize * 0.5, buttonSize, buttonSize); 75 c.fillAndStroke(); 76 c.ellipse(40, h * 0.5 - buttonSize * 0.5, buttonSize, buttonSize); 77 c.fillAndStroke(); 78 c.ellipse(70, h * 0.5 - buttonSize * 0.5, buttonSize, buttonSize); 79 c.fillAndStroke(); 80 c.ellipse(100, h * 0.5 - buttonSize * 0.5, buttonSize, buttonSize); 81 c.fillAndStroke(); 82 c.ellipse(130, h * 0.5 - buttonSize * 0.5, buttonSize, buttonSize); 83 c.fillAndStroke(); 84 c.ellipse(160, h * 0.5 - buttonSize * 0.5, buttonSize, buttonSize); 85 c.fillAndStroke(); 86 c.ellipse(190, h * 0.5 - buttonSize * 0.5, buttonSize, buttonSize); 87 c.fillAndStroke(); 88 89 90 c.setStrokeColor(strokeColor3); 91 c.setFillColor(fillColor3); 92 // start 93 var t = h * 0.5 - controlBarHeight * 0.5; 94 c.begin(); 95 c.moveTo(16, t + 10); 96 c.lineTo(16, t + 20); 97 c.lineTo(18, t + 20); 98 c.lineTo(18, t + 10); 99 c.close(); 100 c.moveTo(20, t + 15); 101 c.lineTo(25, t + 20); 102 c.lineTo(25, t + 10); 103 c.close(); 104 c.fillAndStroke(); 105 // rewind 106 c.begin(); 107 c.moveTo(44, t + 15); 108 c.lineTo(49, t + 20); 109 c.lineTo(49, t + 10); 110 c.close(); 111 c.moveTo(51, t + 15); 112 c.lineTo(56, t + 20); 113 c.lineTo(56, t + 10); 114 c.close(); 115 c.fillAndStroke(); 116 // back 117 c.begin(); 118 c.moveTo(77, t + 15); 119 c.lineTo(82, t + 20); 120 c.lineTo(82, t + 10); 121 c.close(); 122 c.fillAndStroke(); 123 // play/pause 124 c.begin(); 125 c.moveTo(108, t + 10); 126 c.lineTo(108, t + 20); 127 c.lineTo(110, t + 20); 128 c.lineTo(110, t + 10); 129 c.close(); 130 c.moveTo(117, t + 15); 131 c.lineTo(112, t + 20); 132 c.lineTo(112, t + 10); 133 c.close(); 134 c.fillAndStroke(); 135 // forward 136 c.begin(); 137 c.moveTo(144, t + 15); 138 c.lineTo(139, t + 20); 139 c.lineTo(139, t + 10); 140 c.close(); 141 c.fillAndStroke(); 142 // fast forward 143 c.begin(); 144 c.moveTo(171, t + 15); 145 c.lineTo(166, t + 20); 146 c.lineTo(166, t + 10); 147 c.close(); 148 c.moveTo(178, t + 15); 149 c.lineTo(173, t + 20); 150 c.lineTo(173, t + 10); 151 c.close(); 152 c.fillAndStroke(); 153 // end 154 c.begin(); 155 c.moveTo(203, t + 10); 156 c.lineTo(203, t + 20); 157 c.lineTo(205, t + 20); 158 c.lineTo(205, t + 10); 159 c.close(); 160 c.moveTo(201, t + 15); 161 c.lineTo(196, t + 20); 162 c.lineTo(196, t + 10); 163 c.close(); 164 c.fillAndStroke(); 165}; 166 167mxCellRenderer.registerShape(mxShapeMockupPlaybackControls.prototype.cst.SHAPE_PLAYBACK_CONTROLS, mxShapeMockupPlaybackControls); 168 169//********************************************************************************************************************************************************** 170//Progress Bar 171//********************************************************************************************************************************************************** 172/** 173 * Extends mxShape. 174 */ 175function mxShapeMockupProgressBar(bounds, fill, stroke, strokewidth) 176{ 177 mxShape.call(this); 178 this.bounds = bounds; 179 this.fill = fill; 180 this.stroke = stroke; 181 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 182 this.barPos = 20; 183}; 184 185/** 186 * Extends mxShape. 187 */ 188mxUtils.extend(mxShapeMockupProgressBar, mxShape); 189 190mxShapeMockupProgressBar.prototype.cst = { 191 SHAPE_PROGRESS_BAR : 'mxgraph.mockup.misc.progressBar', 192 BAR_POS : 'barPos', 193 FILL_COLOR2 : 'fillColor2' 194}; 195 196mxShapeMockupProgressBar.prototype.customProperties = [ 197 {name: 'fillColor2', dispName: 'Outline Color', type: 'color'}, 198 {name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, defVal:80} 199]; 200 201/** 202 * Function: paintVertexShape 203 * 204 * Paints the vertex shape. 205 */ 206mxShapeMockupProgressBar.prototype.paintVertexShape = function(c, x, y, w, h) 207{ 208 c.translate(x, y); 209 210 this.background(c, w, h); 211 c.setShadow(false); 212 this.foreground(c, w, h); 213}; 214 215mxShapeMockupProgressBar.prototype.background = function(c, w, h) 216{ 217 c.roundrect(0, h * 0.5 - 5, w, 10, 5, 5); 218 c.fillAndStroke(); 219}; 220 221mxShapeMockupProgressBar.prototype.foreground = function(c, w, h) 222{ 223 var fillColor2 = mxUtils.getValue(this.style, mxShapeMockupProgressBar.prototype.cst.FILL_COLOR2, '#ddeeff'); 224 var barPos = mxUtils.getValue(this.style, mxShapeMockupProgressBar.prototype.cst.BAR_POS, '80'); 225 barPos = Math.min(barPos, 100); 226 barPos = Math.max(barPos, 0); 227 var deadzone = 0; 228 var virRange = w - 2 * deadzone; 229 var truePos = deadzone + virRange * barPos / 100; 230 231 c.setFillColor(fillColor2); 232 c.roundrect(0, h * 0.5 - 5, truePos, 10, 5, 5); 233 c.fillAndStroke(); 234}; 235 236mxCellRenderer.registerShape(mxShapeMockupProgressBar.prototype.cst.SHAPE_PROGRESS_BAR, mxShapeMockupProgressBar); 237 238Graph.handleFactory[mxShapeMockupProgressBar.prototype.cst.SHAPE_PROGRESS_BAR] = function(state) 239{ 240 var handles = [Graph.createHandle(state, ['barPos'], function(bounds) 241 { 242 var barPos = Math.max(0, Math.min(100, parseFloat(mxUtils.getValue(this.state.style, 'barPos', this.barPos)))); 243 244 return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height * 0.5); 245 }, function(bounds, pt) 246 { 247 this.state.style['barPos'] = Math.round(1000 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 1000; 248 })]; 249 250 return handles; 251} 252 253//********************************************************************************************************************************************************** 254//Shopping Cart 255//********************************************************************************************************************************************************** 256/** 257 * Extends mxShape. 258 */ 259function mxShapeMockupShoppingCart(bounds, fill, stroke, strokewidth) 260{ 261 mxShape.call(this); 262 this.bounds = bounds; 263 this.fill = fill; 264 this.stroke = stroke; 265 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 266}; 267 268/** 269 * Extends mxShape. 270 */ 271mxUtils.extend(mxShapeMockupShoppingCart, mxShape); 272 273mxShapeMockupShoppingCart.prototype.cst = { 274 SHAPE_SHOPPING_CART : 'mxgraph.mockup.misc.shoppingCart' 275}; 276 277/** 278 * Function: paintVertexShape 279 * 280 * Paints the vertex shape. 281 */ 282mxShapeMockupShoppingCart.prototype.paintVertexShape = function(c, x, y, w, h) 283{ 284 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000'); 285 c.translate(x, y); 286 287 c.setStrokeWidth(3); 288 c.begin(); 289 c.moveTo(w * 0.975, h * 0.025); 290 c.lineTo(w * 0.82, h * 0.055); 291 c.lineTo(w * 0.59, h * 0.66); 292 c.lineTo(w * 0.7, h * 0.765); 293 c.arcTo(w * 0.06, h * 0.06, 0, 0, 1, w * 0.665, h * 0.86); 294 c.lineTo(w * 0.05, h * 0.86); 295 c.moveTo(w * 0.74, h * 0.26); 296 c.lineTo(w * 0.03, h * 0.28); 297 c.lineTo(w * 0.065, h * 0.61); 298 c.lineTo(w * 0.59, h * 0.66); 299 c.stroke(); 300 301 c.setStrokeWidth(1); 302 c.begin(); 303 c.moveTo(w * 0.15, h * 0.28); 304 c.lineTo(w * 0.15, h * 0.62); 305 c.moveTo(w * 0.265, h * 0.275); 306 c.lineTo(w * 0.265, h * 0.63); 307 c.moveTo(w * 0.38, h * 0.27); 308 c.lineTo(w * 0.38, h * 0.64); 309 c.moveTo(w * 0.495, h * 0.265); 310 c.lineTo(w * 0.495, h * 0.65); 311 c.moveTo(w * 0.61, h * 0.265); 312 c.lineTo(w * 0.61, h * 0.61); 313 c.stroke(); 314 315 c.begin(); 316 c.moveTo(w * 0.69, h * 0.405); 317 c.lineTo(w * 0.045, h * 0.405); 318 c.moveTo(w * 0.645, h * 0.52); 319 c.lineTo(w * 0.055, h * 0.52); 320 c.stroke(); 321 c.setFillColor(strokeColor); 322 c.ellipse(w * 0.075, h * 0.89, w * 0.1, h * 0.1); 323 c.fillAndStroke(); 324 c.ellipse(w * 0.62, h * 0.89, w * 0.1, h * 0.1); 325 c.fillAndStroke(); 326}; 327 328mxCellRenderer.registerShape(mxShapeMockupShoppingCart.prototype.cst.SHAPE_SHOPPING_CART, mxShapeMockupShoppingCart); 329 330//********************************************************************************************************************************************************** 331//Rating 332//********************************************************************************************************************************************************** 333/** 334 * Extends mxShape. 335 */ 336function mxShapeMockupRating(bounds, fill, stroke, strokewidth) 337{ 338 mxShape.call(this); 339 this.bounds = bounds; 340 this.fill = fill; 341 this.stroke = stroke; 342 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 343}; 344 345/** 346 * Extends mxShape. 347 */ 348mxUtils.extend(mxShapeMockupRating, mxShape); 349 350mxShapeMockupRating.prototype.cst = { 351 SHAPE_RATING : 'mxgraph.mockup.misc.rating', 352 RATING_STYLE : 'ratingStyle', 353 RATING_SCALE : 'ratingScale', 354 RATING_HEART : 'heart', 355 RATING_STAR : 'star', 356 EMPTY_FILL_COLOR : 'emptyFillColor', 357 GRADE : 'grade' 358}; 359 360mxShapeMockupRating.prototype.customProperties = [ 361 {name: 'ratingStyle', dispName: 'Style', type: 'enum', 362 enumList: [{val: 'heart', dispName: 'Heart'}, {val: 'star', dispName: 'Star'}] 363 }, 364 {name: 'ratingScale', dispName: 'Max. Rating', type: 'int'}, 365 {name: 'grade', dispName: 'Current Rating', type: 'int'}, 366 {name: 'emptyFillColor', dispName: 'Fill2 Color', type: 'color'} 367]; 368 369/** 370 * Function: paintVertexShape 371 * 372 * Paints the vertex shape. 373 */ 374mxShapeMockupRating.prototype.paintVertexShape = function(c, x, y, w, h) 375{ 376 var ratingStyle = mxUtils.getValue(this.style, mxShapeMockupRating.prototype.cst.RATING_STYLE, mxShapeMockupRating.prototype.cst.RATING_STAR); 377 var grade = mxUtils.getValue(this.style, mxShapeMockupRating.prototype.cst.GRADE, '5'); 378 var ratingScale = mxUtils.getValue(this.style, mxShapeMockupRating.prototype.cst.RATING_SCALE, '10'); 379 380 c.translate(x, y); 381 382 if (ratingStyle === mxShapeMockupRating.prototype.cst.RATING_STAR) 383 { 384 for (var i = 0; i < grade; i++) 385 { 386 c.begin(); 387 c.moveTo(i * h * 1.5, 0.33 * h); 388 c.lineTo(i * h * 1.5 + 0.364 * h, 0.33 * h); 389 c.lineTo(i * h * 1.5 + 0.475 * h, 0); 390 c.lineTo(i * h * 1.5 + 0.586 * h, 0.33 * h); 391 c.lineTo(i * h * 1.5 + 0.95 * h, 0.33 * h); 392 c.lineTo(i * h * 1.5 + 0.66 * h, 0.551 * h); 393 c.lineTo(i * h * 1.5 + 0.775 * h, 0.9 * h); 394 c.lineTo(i * h * 1.5 + 0.475 * h, 0.684 * h); 395 c.lineTo(i * h * 1.5 + 0.175 * h, 0.9 * h); 396 c.lineTo(i * h * 1.5 + 0.29 * h, 0.551 * h); 397 c.close(); 398 c.fillAndStroke(); 399 } 400 } 401 else if (ratingStyle === mxShapeMockupRating.prototype.cst.RATING_HEART) 402 { 403 for (var i = 0; i < grade; i++) 404 { 405 c.begin(); 406 c.moveTo(i * h * 1.5 + h * 0.519, h * 0.947); 407 c.curveTo(i * h * 1.5 + h * 0.558, h * 0.908, i * h * 1.5 + h * 0.778, h * 0.682, i * h * 1.5 + h * 0.916, h * 0.54); 408 c.curveTo(i * h * 1.5 + h * 1.039, h * 0.414, i * h * 1.5 + h * 1.036, h * 0.229, i * h * 1.5 + h * 0.924, h * 0.115); 409 c.curveTo(i * h * 1.5 + h * 0.812, 0, i * h * 1.5 + h * 0.631, 0, i * h * 1.5 + h * 0.519, h * 0.115); 410 c.curveTo(i * h * 1.5 + h * 0.408, 0, i * h * 1.5 + h * 0.227, 0, i * h * 1.5 + h * 0.115, h * 0.115); 411 c.curveTo(i * h * 1.5 + h * 0.03, h * 0.229, i * h * 1.5, h * 0.414, i * h * 1.5 + h * 0.123, h * 0.54); 412 c.close(); 413 c.fillAndStroke(); 414 } 415 } 416 417 var emptyFillColor = mxUtils.getValue(this.style, mxShapeMockupRating.prototype.cst.EMPTY_FILL_COLOR, '#ffffff'); 418 c.setFillColor(emptyFillColor); 419 420 if (ratingStyle === mxShapeMockupRating.prototype.cst.RATING_STAR) 421 { 422 for (var i = grade; i < ratingScale; i++) 423 { 424 c.begin(); 425 c.moveTo(i * h * 1.5, 0.33 * h); 426 c.lineTo(i * h * 1.5 + 0.364 * h, 0.33 * h); 427 c.lineTo(i * h * 1.5 + 0.475 * h, 0); 428 c.lineTo(i * h * 1.5 + 0.586 * h, 0.33 * h); 429 c.lineTo(i * h * 1.5 + 0.95 * h, 0.33 * h); 430 c.lineTo(i * h * 1.5 + 0.66 * h, 0.551 * h); 431 c.lineTo(i * h * 1.5 + 0.775 * h, 0.9 * h); 432 c.lineTo(i * h * 1.5 + 0.475 * h, 0.684 * h); 433 c.lineTo(i * h * 1.5 + 0.175 * h, 0.9 * h); 434 c.lineTo(i * h * 1.5 + 0.29 * h, 0.551 * h); 435 c.close(); 436 c.fillAndStroke(); 437 } 438 } 439 else if (ratingStyle === mxShapeMockupRating.prototype.cst.RATING_HEART) 440 { 441 for (var i = grade; i < ratingScale; i++) 442 { 443 c.begin(); 444 c.moveTo(i * h * 1.5 + h * 0.519, h * 0.947); 445 c.curveTo(i * h * 1.5 + h * 0.558, h * 0.908, i * h * 1.5 + h * 0.778, h * 0.682, i * h * 1.5 + h * 0.916, h * 0.54); 446 c.curveTo(i * h * 1.5 + h * 1.039, h * 0.414, i * h * 1.5 + h * 1.036, h * 0.229, i * h * 1.5 + h * 0.924, h * 0.115); 447 c.curveTo(i * h * 1.5 + h * 0.812, 0, i * h * 1.5 + h * 0.631, 0, i * h * 1.5 + h * 0.519, h * 0.115); 448 c.curveTo(i * h * 1.5 + h * 0.408, 0, i * h * 1.5 + h * 0.227, 0, i * h * 1.5 + h * 0.115, h * 0.115); 449 c.curveTo(i * h * 1.5 + h * 0.03, h * 0.229, i * h * 1.5, h * 0.414, i * h * 1.5 + h * 0.123, h * 0.54); 450 c.close(); 451 c.fillAndStroke(); 452 } 453 } 454}; 455 456mxCellRenderer.registerShape(mxShapeMockupRating.prototype.cst.SHAPE_RATING, mxShapeMockupRating); 457 458//********************************************************************************************************************************************************** 459//Mail 460//********************************************************************************************************************************************************** 461/** 462 * Extends mxShape. 463 */ 464function mxShapeMockupMail(bounds, fill, stroke, strokewidth) 465{ 466 mxShape.call(this); 467 this.bounds = bounds; 468 this.fill = fill; 469 this.stroke = stroke; 470 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 471}; 472 473/** 474 * Extends mxShape. 475 */ 476mxUtils.extend(mxShapeMockupMail, mxShape); 477 478mxShapeMockupMail.prototype.cst = { 479 SHAPE_MAIL : 'mxgraph.mockup.misc.mail2' 480}; 481 482/** 483 * Function: paintVertexShape 484 * 485 * Paints the vertex shape. 486 */ 487mxShapeMockupMail.prototype.paintVertexShape = function(c, x, y, w, h) 488{ 489 c.translate(x, y); 490 491 c.rect(0, 0, w, h); 492 c.fillAndStroke(); 493 494 c.setShadow(false); 495 c.begin(); 496 c.moveTo(0, 0); 497 c.lineTo(w * 0.5, h * 0.5); 498 c.lineTo(w, 0); 499 c.stroke(); 500}; 501 502mxCellRenderer.registerShape(mxShapeMockupMail.prototype.cst.SHAPE_MAIL, mxShapeMockupMail); 503 504//********************************************************************************************************************************************************** 505//Volume Slider 506//********************************************************************************************************************************************************** 507/** 508 * Extends mxShape. 509 */ 510function mxShapeMockupVolumeSlider(bounds, fill, stroke, strokewidth) 511{ 512 mxShape.call(this); 513 this.bounds = bounds; 514 this.fill = fill; 515 this.stroke = stroke; 516 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 517 this.barPos = 80; 518}; 519 520/** 521 * Extends mxShape. 522 */ 523mxUtils.extend(mxShapeMockupVolumeSlider, mxShape); 524 525mxShapeMockupVolumeSlider.prototype.cst = { 526 SHAPE_VOLUME_SLIDER : 'mxgraph.mockup.misc.volumeSlider', 527 BAR_POS : 'barPos', 528 FILL_COLOR2 : 'fillColor2' 529}; 530 531mxShapeMockupVolumeSlider.prototype.customProperties = [ 532 {name: 'fillColor2', dispName: 'Fill2 Color', type: 'color'}, 533 {name: 'barPos', dispName: 'Handle Position', type: 'float'} 534]; 535 536/** 537 * Function: paintVertexShape 538 * 539 * Paints the vertex shape. 540 */ 541mxShapeMockupVolumeSlider.prototype.paintVertexShape = function(c, x, y, w, h) 542{ 543 c.translate(x, y); 544 545 var barPos = mxUtils.getValue(this.style, mxShapeMockupVolumeSlider.prototype.cst.BAR_POS, '80'); 546 var fillColor2 = mxUtils.getValue(this.style, mxShapeMockupVolumeSlider.prototype.cst.FILL_COLOR2, '#ddeeff'); 547 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#999999'); 548 //only the progress bar handle needs to be drawn 549 barPos = Math.min(barPos, 100); 550 barPos = Math.max(barPos, 0); 551 var controlBarHeight = 25; 552 var h = Math.max(h, controlBarHeight); 553 var w = Math.max(w, 3.5 * controlBarHeight); 554 555 var speakerStartX = w - controlBarHeight; 556 var speakerStartY = (h - controlBarHeight) * 0.5; 557 c.begin(); 558 c.moveTo(speakerStartX + controlBarHeight * 0.05, speakerStartY + controlBarHeight * 0.35); 559 c.lineTo(speakerStartX + controlBarHeight * 0.15, speakerStartY + controlBarHeight * 0.35); 560 c.lineTo(speakerStartX + controlBarHeight * 0.3, speakerStartY + controlBarHeight * 0.2); 561 c.lineTo(speakerStartX + controlBarHeight * 0.3, speakerStartY + controlBarHeight * 0.8); 562 c.lineTo(speakerStartX + controlBarHeight * 0.15, speakerStartY + controlBarHeight * 0.65); 563 c.lineTo(speakerStartX + controlBarHeight * 0.05, speakerStartY + controlBarHeight * 0.65); 564 c.close(); 565 c.fill(); 566 567 //draw the handle based on barPos 568 var barMin = 0; 569 var barMax = w - controlBarHeight * 1.3; 570 var videoBarStartY = (h - controlBarHeight) * 0.5; 571 var barRange = barMax - barMin; 572 var barPos = barRange * barPos / 100; 573 var barEnd = barMin + barPos; 574 575 var soundStartX = w - controlBarHeight; 576 var soundStartY = (h - controlBarHeight) * 0.5; 577 c.begin(); 578 c.moveTo(soundStartX + controlBarHeight * 0.4, soundStartY + controlBarHeight * 0.35); 579 c.arcTo(controlBarHeight * 0.2, controlBarHeight * 0.3, 0, 0, 1, soundStartX + controlBarHeight * 0.4, soundStartY + controlBarHeight * 0.65); 580 c.moveTo(soundStartX + controlBarHeight * 0.425, soundStartY + controlBarHeight * 0.25); 581 c.arcTo(controlBarHeight * 0.225, controlBarHeight * 0.35, 0, 0, 1, soundStartX + controlBarHeight * 0.425, soundStartY + controlBarHeight * 0.75); 582 c.moveTo(soundStartX + controlBarHeight * 0.5, soundStartY + controlBarHeight * 0.2); 583 c.arcTo(controlBarHeight * 0.25, controlBarHeight * 0.4, 0, 0, 1, soundStartX + controlBarHeight * 0.5, soundStartY + controlBarHeight * 0.8); 584 c.fillAndStroke(); 585 586 //now we draw the video progress bar 587 var videoBarStartX = 0; 588 var videoBarStartY = (h - controlBarHeight) * 0.5; 589 var videoBarEndX = w - controlBarHeight * 1.3; 590 c.roundrect(videoBarStartX, videoBarStartY + controlBarHeight * 0.35, videoBarEndX, controlBarHeight * 0.3, 5, 5); 591 c.fill(); 592 c.setShadow(false); 593 c.setFillColor(fillColor2); 594 c.roundrect(barMin, videoBarStartY + controlBarHeight * 0.35, barEnd, controlBarHeight * 0.3, 5, 5); 595 c.fill(); 596 597 598 c.ellipse(barEnd - controlBarHeight * 0.25, videoBarStartY + controlBarHeight * 0.25, controlBarHeight * 0.5, controlBarHeight * 0.5); 599 c.fillAndStroke(); 600 601}; 602 603mxCellRenderer.registerShape(mxShapeMockupVolumeSlider.prototype.cst.SHAPE_VOLUME_SLIDER, mxShapeMockupVolumeSlider); 604 605Graph.handleFactory[mxShapeMockupVolumeSlider.prototype.cst.SHAPE_VOLUME_SLIDER] = function(state) 606{ 607 var handles = [Graph.createHandle(state, ['barPos'], function(bounds) 608 { 609 var barPos = Math.max(0, Math.min(100, parseFloat(mxUtils.getValue(this.state.style, 'barPos', this.barPos)))); 610 611 return new mxPoint(bounds.x + barPos * (bounds.width - 32.5) / 100, bounds.y + bounds.height * 0.5); 612 }, function(bounds, pt) 613 { 614 this.state.style['barPos'] = Math.round(1000 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 1000; 615 })]; 616 617 return handles; 618} 619 620//********************************************************************************************************************************************************** 621//Edit Icon 622//********************************************************************************************************************************************************** 623/** 624* Extends mxShape. 625*/ 626function mxShapeMockupEdit(bounds, fill, stroke, strokewidth) 627{ 628 mxShape.call(this); 629 this.bounds = bounds; 630 this.fill = fill; 631 this.stroke = stroke; 632 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 633}; 634 635/** 636* Extends mxShape. 637*/ 638mxUtils.extend(mxShapeMockupEdit, mxShape); 639 640mxShapeMockupEdit.prototype.cst = { 641 SHAPE_EDIT : 'mxgraph.mockup.misc.editIcon' 642}; 643 644/** 645* Function: paintVertexShape 646* 647* Paints the vertex shape. 648*/ 649mxShapeMockupEdit.prototype.paintVertexShape = function(c, x, y, w, h) 650{ 651 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#999999'); 652 653 c.translate(x, y); 654 655 c.roundrect(0, 0, w, h, w * 0.05, h * 0.05); 656 c.fillAndStroke(); 657 658 c.setShadow(false); 659 c.setFillColor(strokeColor); 660 c.begin(); 661 c.moveTo(w * 0.11, h * 0.8); 662 c.lineTo(w * 0.2, h * 0.89); 663 c.lineTo(w * 0.05, h * 0.95); 664 c.close(); 665 c.moveTo(w * 0.74, h * 0.16); 666 c.lineTo(w * 0.84, h * 0.26); 667 c.lineTo(w * 0.22, h * 0.88); 668 c.lineTo(w * 0.12, h * 0.78); 669 c.close(); 670 c.moveTo(w * 0.755, h * 0.145); 671 c.lineTo(w * 0.82, h * 0.08); 672 c.lineTo(w * 0.92, h * 0.18); 673 c.lineTo(w * 0.855, h * 0.245); 674 c.close(); 675 c.fill(); 676}; 677 678mxCellRenderer.registerShape(mxShapeMockupEdit.prototype.cst.SHAPE_EDIT, mxShapeMockupEdit); 679 680//********************************************************************************************************************************************************** 681//Print Icon 682//********************************************************************************************************************************************************** 683/** 684* Extends mxShape. 685*/ 686function mxShapeMockupPrint(bounds, fill, stroke, strokewidth) 687{ 688 mxShape.call(this); 689 this.bounds = bounds; 690 this.fill = fill; 691 this.stroke = stroke; 692 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 693}; 694 695/** 696* Extends mxShape. 697*/ 698mxUtils.extend(mxShapeMockupPrint, mxShape); 699 700mxShapeMockupPrint.prototype.cst = { 701 SHAPE_PRINT : 'mxgraph.mockup.misc.printIcon' 702}; 703 704/** 705* Function: paintVertexShape 706* 707* Paints the vertex shape. 708*/ 709mxShapeMockupPrint.prototype.paintVertexShape = function(c, x, y, w, h) 710{ 711 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#999999'); 712 713 c.translate(x, y); 714 715 c.roundrect(0, 0, w, h, w * 0.05, h * 0.05); 716 c.fillAndStroke(); 717 718 c.setShadow(false); 719 c.setFillColor(strokeColor); 720 c.begin(); 721 c.moveTo(w * 0.15, h * 0.58); 722 c.arcTo(w * 0.03, h * 0.03, 0, 0, 1, w * 0.18, h * 0.55); 723 c.lineTo(w * 0.82, h * 0.55); 724 c.arcTo(w * 0.03, h * 0.03, 0, 0, 1, w * 0.85, h * 0.58); 725 c.lineTo(w * 0.85, h * 0.82); 726 c.arcTo(w * 0.03, h * 0.03, 0, 0, 1, w * 0.82, h * 0.85); 727 c.lineTo(w * 0.18, h * 0.85); 728 c.arcTo(w * 0.03, h * 0.03, 0, 0, 1, w * 0.15, h * 0.82); 729 c.close(); 730 c.moveTo(w * 0.7, h * 0.52); 731 c.lineTo(w * 0.3, h * 0.52); 732 c.lineTo(w * 0.3, h * 0.15); 733 c.lineTo(w * 0.55, h * 0.15); 734 c.lineTo(w * 0.55, h * 0.3); 735 c.lineTo(w * 0.7, h * 0.3); 736 c.close(); 737 c.moveTo(w * 0.57, h * 0.15); 738 c.lineTo(w * 0.7, h * 0.28); 739 c.lineTo(w * 0.57, h * 0.28); 740 c.close(); 741 c.fill(); 742}; 743 744mxCellRenderer.registerShape(mxShapeMockupPrint.prototype.cst.SHAPE_PRINT, mxShapeMockupPrint); 745 746//********************************************************************************************************************************************************** 747//Print Icon 748//********************************************************************************************************************************************************** 749/** 750* Extends mxShape. 751*/ 752function mxShapeMockupShare(bounds, fill, stroke, strokewidth) 753{ 754 mxShape.call(this); 755 this.bounds = bounds; 756 this.fill = fill; 757 this.stroke = stroke; 758 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 759}; 760 761/** 762* Extends mxShape. 763*/ 764mxUtils.extend(mxShapeMockupShare, mxShape); 765 766mxShapeMockupShare.prototype.cst = { 767 SHAPE_SHARE : 'mxgraph.mockup.misc.shareIcon' 768}; 769 770/** 771* Function: paintVertexShape 772* 773* Paints the vertex shape. 774*/ 775mxShapeMockupShare.prototype.paintVertexShape = function(c, x, y, w, h) 776{ 777 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#999999'); 778 779 c.translate(x, y); 780 781 c.roundrect(0, 0, w, h, w * 0.05, h * 0.05); 782 c.fillAndStroke(); 783 784 c.setShadow(false); 785 c.setFillColor(strokeColor); 786 c.begin(); 787 c.moveTo(w * 0.15, h * 0.18); 788 c.arcTo(w * 0.03, h * 0.03, 0, 0, 1, w * 0.18, h * 0.15); 789 c.lineTo(w * 0.82, h * 0.15); 790 c.arcTo(w * 0.03, h * 0.03, 0, 0, 1, w * 0.85, h * 0.18); 791 c.lineTo(w * 0.85, h * 0.82); 792 c.arcTo(w * 0.03, h * 0.03, 0, 0, 1, w * 0.82, h * 0.85); 793 c.lineTo(w * 0.18, h * 0.85); 794 c.arcTo(w * 0.03, h * 0.03, 0, 0, 1, w * 0.15, h * 0.82); 795 c.close(); 796 c.fill(); 797 798 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff'); 799 c.setFillColor(fillColor); 800 c.begin(); 801 c.moveTo(w * 0.563, h * 0.34); 802 c.arcTo(w * 0.095, h * 0.095, 0, 1, 1, w * 0.603, h * 0.42); 803 c.lineTo(w * 0.44, h * 0.5); 804 c.lineTo(w * 0.602, h * 0.582); 805 c.arcTo(w * 0.095, h * 0.095, 0, 1, 1, w * 0.563, h * 0.653); 806 c.lineTo(w * 0.403, h * 0.575); 807 c.arcTo(w * 0.095, h * 0.095, 0, 1, 1, w * 0.4, h * 0.42); 808 c.close(); 809 c.fill(); 810}; 811 812mxCellRenderer.registerShape(mxShapeMockupShare.prototype.cst.SHAPE_SHARE, mxShapeMockupShare); 813 814//********************************************************************************************************************************************************** 815//Trashcan Icon 816//********************************************************************************************************************************************************** 817/** 818* Extends mxShape. 819*/ 820function mxShapeMockupTrashcan(bounds, fill, stroke, strokewidth) 821{ 822 mxShape.call(this); 823 this.bounds = bounds; 824 this.fill = fill; 825 this.stroke = stroke; 826 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 827}; 828 829/** 830* Extends mxShape. 831*/ 832mxUtils.extend(mxShapeMockupTrashcan, mxShape); 833 834mxShapeMockupTrashcan.prototype.cst = { 835 SHAPE_TRASHCAN : 'mxgraph.mockup.misc.trashcanIcon' 836}; 837 838/** 839* Function: paintVertexShape 840* 841* Paints the vertex shape. 842*/ 843mxShapeMockupTrashcan.prototype.paintVertexShape = function(c, x, y, w, h) 844{ 845 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#999999'); 846 847 c.translate(x, y); 848 849 c.roundrect(0, 0, w, h, w * 0.05, h * 0.05); 850 c.fillAndStroke(); 851 852 c.setShadow(false); 853 c.setFillColor(strokeColor); 854 c.begin(); 855 c.moveTo(w * 0.24, h * 0.24); 856 c.arcTo(w * 0.04, h * 0.04, 0, 0, 1, w * 0.24, h * 0.16); 857 c.lineTo(w * 0.4, h * 0.16); 858 c.lineTo(w * 0.4, h * 0.12); 859 c.lineTo(w * 0.6, h * 0.12); 860 c.lineTo(w * 0.6, h * 0.16); 861 c.lineTo(w * 0.76, h * 0.16); 862 c.arcTo(w * 0.04, h * 0.04, 0, 0, 1, w * 0.76, h * 0.24); 863 c.close(); 864 c.fill(); 865 866 c.roundrect(w * 0.26, h * 0.3, w * 0.1, h * 0.6, w * 0.06, h * 0.06); 867 c.fill(); 868 c.roundrect(w * 0.44, h * 0.3, w * 0.1, h * 0.6, w * 0.06, h * 0.06); 869 c.fill(); 870 c.roundrect(w * 0.62, h * 0.3, w * 0.1, h * 0.6, w * 0.06, h * 0.06); 871 c.fill(); 872}; 873 874mxCellRenderer.registerShape(mxShapeMockupTrashcan.prototype.cst.SHAPE_TRASHCAN, mxShapeMockupTrashcan); 875 876//********************************************************************************************************************************************************** 877//Copyright Icon 878//********************************************************************************************************************************************************** 879/** 880* Extends mxShape. 881*/ 882function mxShapeMockupCopyright(bounds, fill, stroke, strokewidth) 883{ 884 mxShape.call(this); 885 this.bounds = bounds; 886 this.fill = fill; 887 this.stroke = stroke; 888 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 889}; 890 891/** 892* Extends mxShape. 893*/ 894mxUtils.extend(mxShapeMockupCopyright, mxShape); 895 896mxShapeMockupCopyright.prototype.cst = { 897 SHAPE_COPYRIGHT : 'mxgraph.mockup.misc.copyrightIcon' 898}; 899 900/** 901* Function: paintVertexShape 902* 903* Paints the vertex shape. 904*/ 905mxShapeMockupCopyright.prototype.paintVertexShape = function(c, x, y, w, h) 906{ 907 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#999999'); 908 909 c.translate(x, y); 910 911 c.ellipse(0, 0, w, h); 912 c.fillAndStroke(); 913 914 c.setShadow(false); 915 c.setFillColor(strokeColor); 916 c.begin(); 917 c.moveTo(w * 0.713, h * 0.288); 918 c.arcTo(w * 0.3, h * 0.3, 0, 1, 0, w * 0.713, h * 0.712); 919 c.lineTo(w * 0.784, h * 0.783); 920 c.arcTo(w * 0.4, h * 0.4, 0, 1, 1, w * 0.784, h * 0.217); 921 c.close(); 922 c.fill(); 923 924}; 925 926mxCellRenderer.registerShape(mxShapeMockupCopyright.prototype.cst.SHAPE_COPYRIGHT, mxShapeMockupCopyright); 927 928//********************************************************************************************************************************************************** 929//Registered Icon 930//********************************************************************************************************************************************************** 931/** 932* Extends mxShape. 933*/ 934function mxShapeMockupRegistered(bounds, fill, stroke, strokewidth) 935{ 936 mxShape.call(this); 937 this.bounds = bounds; 938 this.fill = fill; 939 this.stroke = stroke; 940 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 941}; 942 943/** 944* Extends mxShape. 945*/ 946mxUtils.extend(mxShapeMockupRegistered, mxShape); 947 948mxShapeMockupRegistered.prototype.cst = { 949 SHAPE_REGISTERED : 'mxgraph.mockup.misc.registeredIcon' 950}; 951 952/** 953* Function: paintVertexShape 954* 955* Paints the vertex shape. 956*/ 957mxShapeMockupRegistered.prototype.paintVertexShape = function(c, x, y, w, h) 958{ 959 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#999999'); 960 961 c.translate(x, y); 962 963 c.ellipse(0, 0, w, h); 964 c.fillAndStroke(); 965 966 c.setShadow(false); 967 c.setFillColor(strokeColor); 968 c.begin(); 969 c.moveTo(w * 0.29, h * 0.9); 970 c.lineTo(w * 0.29, h * 0.09); 971 c.lineTo(w * 0.5, h * 0.09); 972 c.arcTo(w * 0.2195, h * 0.2195, 0, 0, 1, w * 0.545, h * 0.525); 973 c.lineTo(w * 0.738, h * 0.91); 974 c.lineTo(w * 0.674, h * 0.91); 975 c.lineTo(w * 0.4825, h * 0.53); 976 c.lineTo(w * 0.35, h * 0.53); 977 c.lineTo(w * 0.35, h * 0.9); 978 c.close(); 979 c.moveTo(w * 0.35, h * 0.47); 980 c.lineTo(w * 0.5, h * 0.47); 981 c.arcTo(w * 0.15, h * 0.15, 0, 0, 0, w * 0.5, h * 0.15); 982 c.lineTo(w * 0.35, h * 0.15); 983 c.close(); 984 c.fill(); 985 986}; 987 988mxCellRenderer.registerShape(mxShapeMockupRegistered.prototype.cst.SHAPE_REGISTERED, mxShapeMockupRegistered); 989 990//********************************************************************************************************************************************************** 991//Volume Icon 992//********************************************************************************************************************************************************** 993/** 994* Extends mxShape. 995*/ 996function mxShapeMockupVolume(bounds, fill, stroke, strokewidth) 997{ 998 mxShape.call(this); 999 this.bounds = bounds; 1000 this.fill = fill; 1001 this.stroke = stroke; 1002 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1003}; 1004 1005/** 1006* Extends mxShape. 1007*/ 1008mxUtils.extend(mxShapeMockupVolume, mxShape); 1009 1010mxShapeMockupVolume.prototype.cst = { 1011 SHAPE_VOLUME : 'mxgraph.mockup.misc.volumeIcon' 1012}; 1013 1014/** 1015* Function: paintVertexShape 1016* 1017* Paints the vertex shape. 1018*/ 1019mxShapeMockupVolume.prototype.paintVertexShape = function(c, x, y, w, h) 1020{ 1021 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#999999'); 1022 1023 c.translate(x, y); 1024 1025 c.roundrect(0, 0, w, h, w * 0.05, h * 0.05); 1026 c.fillAndStroke(); 1027 1028 c.setShadow(false); 1029 c.setFillColor(strokeColor); 1030 c.begin(); 1031 c.moveTo(w * 0.1, h * 0.3); 1032 c.lineTo(w * 0.3, h * 0.3); 1033 c.lineTo(w * 0.5, h * 0.15); 1034 c.lineTo(w * 0.5, h * 0.85); 1035 c.lineTo(w * 0.3, h * 0.7); 1036 c.lineTo(w * 0.1, h * 0.7); 1037 c.close(); 1038 c.fill(); 1039 1040 c.begin(); 1041 c.moveTo(w * 0.6, h * 0.4); 1042 c.arcTo(w * 0.2, h * 0.2, 0, 0, 1, w * 0.6, h * 0.6); 1043 1044 c.moveTo(w * 0.7, h * 0.3); 1045 c.arcTo(w * 0.3, h * 0.3, 0, 0, 1, w * 0.7, h * 0.7); 1046 1047 c.moveTo(w * 0.8, h * 0.2); 1048 c.arcTo(w * 0.4, h * 0.4, 0, 0, 1, w * 0.8, h * 0.8); 1049 c.stroke(); 1050 1051}; 1052 1053mxCellRenderer.registerShape(mxShapeMockupVolume.prototype.cst.SHAPE_VOLUME, mxShapeMockupVolume); 1054 1055//********************************************************************************************************************************************************** 1056//Ruler 1057//********************************************************************************************************************************************************** 1058/** 1059* Extends mxShape. 1060*/ 1061function mxShapeMockupRuler(bounds, fill, stroke, strokewidth) 1062{ 1063 mxShape.call(this); 1064 this.bounds = bounds; 1065 this.fill = fill; 1066 this.stroke = stroke; 1067 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1068}; 1069 1070/** 1071* Extends mxShape. 1072*/ 1073mxUtils.extend(mxShapeMockupRuler, mxShape); 1074 1075mxShapeMockupRuler.prototype.cst = { 1076 SHAPE_RULER : 'mxgraph.mockup.misc.ruler', 1077 ORIENTATION : 'rulerOrient', 1078 UNIT_SIZE : 'unitSize', 1079 FACE_UP : 'up', 1080 FACE_DOWN : 'down' 1081}; 1082 1083/** 1084* Function: paintVertexShape 1085* 1086* Paints the vertex shape. 1087*/ 1088mxShapeMockupRuler.prototype.paintVertexShape = function(c, x, y, w, h) 1089{ 1090 c.translate(x, y); 1091 1092 this.background(c, w, h); 1093 c.setShadow(false); 1094 this.foreground(c, w, h); 1095}; 1096 1097mxShapeMockupRuler.prototype.background = function(c, w, h) 1098{ 1099 c.rect(0, 0, w, h); 1100 c.fillAndStroke(); 1101}; 1102 1103mxShapeMockupRuler.prototype.foreground = function(c, w, h) 1104{ 1105 var facing = mxUtils.getValue(this.style, mxShapeMockupRuler.prototype.cst.ORIENTATION, mxShapeMockupRuler.prototype.cst.FACE_DOWN); 1106 var unitSize = mxUtils.getValue(this.style, mxShapeMockupRuler.prototype.cst.UNIT_SIZE, '10'); 1107 1108 unitSize = Math.max(unitSize, 1); 1109 1110 var currX = unitSize; 1111 var i = 1; 1112 1113 if (facing === mxShapeMockupRuler.prototype.cst.FACE_DOWN) 1114 { 1115 c.begin(); 1116 1117 while (currX < w) 1118 { 1119 var remainder = i % 10; 1120 1121 if (remainder === 0) 1122 { 1123 c.moveTo(currX, h * 0.5); 1124 c.lineTo(currX, h); 1125 } 1126 else if ( remainder === 5) 1127 { 1128 c.moveTo(currX, h * 0.7); 1129 c.lineTo(currX, h); 1130 } 1131 else 1132 { 1133 c.moveTo(currX, h * 0.8); 1134 c.lineTo(currX, h); 1135 } 1136 1137 currX = currX + unitSize; 1138 i = i + 1; 1139 } 1140 1141 c.stroke(); 1142 } 1143 else if (facing === mxShapeMockupRuler.prototype.cst.FACE_UP) 1144 { 1145 c.begin(); 1146 1147 while (currX < w) 1148 { 1149 var remainder = i % 10; 1150 1151 if (remainder === 0) 1152 { 1153 c.moveTo(currX, h * 0.5); 1154 c.lineTo(currX, 0); 1155 } 1156 else if ( remainder === 5) 1157 { 1158 c.moveTo(currX, h * 0.3); 1159 c.lineTo(currX, 0); 1160 } 1161 else 1162 { 1163 c.moveTo(currX, h * 0.2); 1164 c.lineTo(currX, 0); 1165 } 1166 1167 currX = currX + unitSize; 1168 i = i + 1; 1169 } 1170 1171 c.stroke(); 1172 } 1173}; 1174 1175mxCellRenderer.registerShape(mxShapeMockupRuler.prototype.cst.SHAPE_RULER, mxShapeMockupRuler); 1176 1177//********************************************************************************************************************************************************** 1178//Advanced Ruler 1179//********************************************************************************************************************************************************** 1180/** 1181* Extends mxShape. 1182*/ 1183function mxShapeMockupRuler2(bounds, fill, stroke, strokewidth) 1184{ 1185 mxShape.call(this); 1186 this.bounds = bounds; 1187 this.fill = fill; 1188 this.stroke = stroke; 1189 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1190}; 1191 1192/** 1193* Extends mxShape. 1194*/ 1195mxUtils.extend(mxShapeMockupRuler2, mxShape); 1196 1197mxShapeMockupRuler2.prototype.cst = { 1198 SHAPE_RULER : 'mxgraph.mockup.misc.ruler2', 1199 ORIENTATION : 'rulerOrient', 1200 UNIT_SIZE : 'dx', 1201 FACE_UP : 'up', 1202 FACE_DOWN : 'down' 1203}; 1204 1205mxShapeMockupRuler2.prototype.customProperties = [ 1206 {name: 'rulerOrient', dispName: 'Orientation', defVal:'up', type: 'enum', 1207 enumList: [{val: 'up', dispName: 'Up'}, {val: 'down', dispName: 'Down'}] 1208 }, 1209 {name: 'dx', dispName: 'Unit Size', type: 'float', min:0, defVal:100} 1210]; 1211 1212/** 1213* Function: paintVertexShape 1214* 1215* Paints the vertex shape. 1216*/ 1217mxShapeMockupRuler2.prototype.paintVertexShape = function(c, x, y, w, h) 1218{ 1219 c.translate(x, y); 1220 1221 this.background(c, w, h); 1222 c.setShadow(false); 1223 this.foreground(c, x, y, w, h); 1224}; 1225 1226mxShapeMockupRuler2.prototype.background = function(c, w, h) 1227{ 1228 c.rect(0, 0, w, h); 1229 c.fillAndStroke(); 1230}; 1231 1232mxShapeMockupRuler2.prototype.foreground = function(c, x, y, w, h) 1233{ 1234 var facing = mxUtils.getValue(this.style, mxShapeMockupRuler2.prototype.cst.ORIENTATION, mxShapeMockupRuler2.prototype.cst.FACE_DOWN); 1235 var fontColor = mxUtils.getValue(this.style, mxConstants.STYLE_FONTCOLOR, '#000000'); 1236 var dx = mxUtils.getValue(this.style, 'dx', '100'); 1237 var unitSize = dx / 10; 1238 this.state.style['spacingLeft'] = Math.round(1000 * Math.max(0, Math.min(w, dx))) / 1000 - 4; 1239 1240 unitSize = Math.max(unitSize, 1); 1241 1242 c.setFontColor(fontColor); 1243 1244 var currX = unitSize; 1245 var i = 1; 1246 1247 if (facing === mxShapeMockupRuler2.prototype.cst.FACE_DOWN) 1248 { 1249 c.begin(); 1250 1251 while (currX < w) 1252 { 1253 var remainder = i % 10; 1254 1255 if (remainder === 0) 1256 { 1257 c.moveTo(currX, h - 10); 1258 c.lineTo(currX, h); 1259 1260 var unit = this.state.view.graph.getLabel(this.state.cell); 1261 1262 if (!isNaN(unit)) 1263 { 1264 c.stroke(); 1265 1266 var num = i * Math.round(100 * unit) / 1000; 1267 1268 if (i != 10 && num != 0) 1269 { 1270 c.text(currX, (h - 10) * 0.5, 0, 0, num.toString(), mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1271 } 1272 c.begin(); 1273 } 1274 } 1275 else if ( remainder === 5) 1276 { 1277 c.moveTo(currX, h - 6); 1278 c.lineTo(currX, h); 1279 } 1280 else 1281 { 1282 c.moveTo(currX, h - 4); 1283 c.lineTo(currX, h); 1284 } 1285 1286 currX = currX + unitSize; 1287 i = i + 1; 1288 } 1289 1290 c.stroke(); 1291 } 1292 else if (facing === mxShapeMockupRuler2.prototype.cst.FACE_UP) 1293 { 1294 c.begin(); 1295 1296 while (currX < w) 1297 { 1298 var remainder = i % 10; 1299 1300 if (remainder === 0) 1301 { 1302 c.moveTo(currX, 10); 1303 c.lineTo(currX, 0); 1304 1305 var unit = this.state.view.graph.getLabel(this.state.cell); 1306 1307 if (!isNaN(unit)) 1308 { 1309 c.stroke(); 1310 1311 var num = i * Math.round(100 * unit) / 1000; 1312 1313 if (i != 10 && num != 0) 1314 { 1315 c.text(currX, (h + 10) * 0.5, 0, 0, num.toString(), mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1316 } 1317 c.begin(); 1318 } 1319 } 1320 else if ( remainder === 5) 1321 { 1322 c.moveTo(currX, 6); 1323 c.lineTo(currX, 0); 1324 } 1325 else 1326 { 1327 c.moveTo(currX, 4); 1328 c.lineTo(currX, 0); 1329 } 1330 1331 currX = currX + unitSize; 1332 i = i + 1; 1333 } 1334 1335 c.stroke(); 1336 } 1337}; 1338 1339mxCellRenderer.registerShape(mxShapeMockupRuler2.prototype.cst.SHAPE_RULER, mxShapeMockupRuler2); 1340 1341Graph.handleFactory[mxShapeMockupRuler2.prototype.cst.SHAPE_RULER] = function(state) 1342{ 1343 var handles = [Graph.createHandle(state, ['dx', 'spacingLeft', 'align', 'varticalAlign', 'spacingBottom', 'spacingTop', 'spacingRight', 'spacing'], function(bounds) 1344 { 1345 var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx)))); 1346 1347 return new mxPoint(bounds.x + dx, bounds.y + bounds.height - 10); 1348 }, function(bounds, pt) 1349 { 1350 this.state.style['dx'] = Math.round(1000 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 1000; 1351 this.state.style['spacingLeft'] = Math.round(1000 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 1000 - 4; 1352 this.state.style['align'] = 'left'; 1353 this.state.style['verticalAlign'] = 'middle'; 1354 1355 var facing = mxUtils.getValue(this.state.style, 'rulerOrient', '1'); 1356 1357 if (facing == 'down') 1358 { 1359 this.state.style['spacingBottom'] = 10; 1360 this.state.style['spacingTop'] = 0; 1361 } 1362 else 1363 { 1364 this.state.style['spacingBottom'] = 0; 1365 this.state.style['spacingTop'] = 10; 1366 } 1367 1368 this.state.style['spacingRight'] = 0; 1369 this.state.style['spacing'] = 0; 1370 })]; 1371 1372 return handles; 1373} 1374 1375//********************************************************************************************************************************************************** 1376//Revision Table 1377//********************************************************************************************************************************************************** 1378/** 1379* Extends mxShape. 1380*/ 1381function mxShapeMockupRevisionTable(bounds, fill, stroke, strokewidth) 1382{ 1383 mxShape.call(this); 1384 this.bounds = bounds; 1385 this.fill = fill; 1386 this.stroke = stroke; 1387 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1388}; 1389 1390/** 1391* Extends mxShape. 1392*/ 1393mxUtils.extend(mxShapeMockupRevisionTable, mxShape); 1394 1395mxShapeMockupRevisionTable.prototype.cst = { 1396 SHAPE_REVISION_TABLE : 'mxgraph.mockup.misc.revisionTable', 1397 MAIN_TEXT : 'mainText', 1398 TEXT_COLOR : 'textColor', 1399 TEXT_SIZE : 'textSize' 1400}; 1401 1402/** 1403* Function: paintVertexShape 1404* 1405* Paints the vertex shape. 1406*/ 1407mxShapeMockupRevisionTable.prototype.paintVertexShape = function(c, x, y, w, h) 1408{ 1409 c.translate(x, y); 1410 1411 this.background(c, w, h); 1412 c.setShadow(false); 1413 this.foreground(c, w, h); 1414}; 1415 1416mxShapeMockupRevisionTable.prototype.background = function(c, w, h) 1417{ 1418 c.rect(0, 0, w, h); 1419 c.fillAndStroke(); 1420}; 1421 1422mxShapeMockupRevisionTable.prototype.foreground = function(c, w, h) 1423{ 1424 var mainText = mxUtils.getValue(this.style, mxShapeMockupRevisionTable.prototype.cst.MAIN_TEXT, '').toString().split(','); 1425 var textColor = mxUtils.getValue(this.style, mxShapeMockupRevisionTable.prototype.cst.TEXT_COLOR, '#999999'); 1426 var textSize = mxUtils.getValue(this.style, mxShapeMockupRevisionTable.prototype.cst.TEXT_SIZE, '17'); 1427 1428 c.begin(); 1429 c.moveTo(0, h * 0.33); 1430 c.lineTo(w, h * 0.33); 1431 c.moveTo(0, h * 0.67); 1432 c.lineTo(w, h * 0.67); 1433 c.moveTo(w * 0.125, h * 0.33); 1434 c.lineTo(w * 0.125, h); 1435 c.moveTo(w * 0.5, h * 0.33); 1436 c.lineTo(w * 0.5, h); 1437 c.stroke(); 1438 1439 c.setFontSize(textSize); 1440 c.setFontColor(textColor); 1441 1442 c.text(w * 0.5, h * 0.165, 0, 0, mainText[0], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1443 c.text(w * 0.0625, h * 0.5, 0, 0, mainText[1], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1444 c.text(w * 0.3125, h * 0.5, 0, 0, mainText[2], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1445 c.text(w * 0.75, h * 0.5, 0, 0, mainText[3], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1446 c.text(w * 0.0625, h * 0.835, 0, 0, mainText[4], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1447 c.text(w * 0.3125, h * 0.835, 0, 0, mainText[5], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1448 c.text(w * 0.75, h * 0.835, 0, 0, mainText[6], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1449 1450}; 1451 1452mxCellRenderer.registerShape(mxShapeMockupRevisionTable.prototype.cst.SHAPE_REVISION_TABLE, mxShapeMockupRevisionTable); 1453 1454//********************************************************************************************************************************************************** 1455//Status Bar 1456//********************************************************************************************************************************************************** 1457/** 1458* Extends mxShape. 1459*/ 1460function mxShapeMockupStatusBar(bounds, fill, stroke, strokewidth) 1461{ 1462 mxShape.call(this); 1463 this.bounds = bounds; 1464 this.fill = fill; 1465 this.stroke = stroke; 1466 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1467}; 1468 1469/** 1470* Extends mxShape. 1471*/ 1472mxUtils.extend(mxShapeMockupStatusBar, mxShape); 1473 1474mxShapeMockupStatusBar.prototype.cst = { 1475 SHAPE_STATUS_BAR : 'mxgraph.mockup.misc.statusBar', 1476 MAIN_TEXT : 'mainText', 1477 FILL_COLOR2 : 'fillColor2', 1478 STROKE_COLOR2 : 'strokeColor2', 1479 TEXT_COLOR : 'textColor', 1480 TEXT_SIZE : 'textSize' 1481}; 1482 1483/** 1484* Function: paintVertexShape 1485* 1486* Paints the vertex shape. 1487*/ 1488mxShapeMockupStatusBar.prototype.paintVertexShape = function(c, x, y, w, h) 1489{ 1490 c.translate(x, y); 1491 w = Math.max(w, 105); 1492 1493 this.background(c, w, h); 1494 c.setShadow(false); 1495 this.foreground(c, w, h); 1496}; 1497 1498mxShapeMockupStatusBar.prototype.background = function(c, w, h) 1499{ 1500 c.rect(0, h * 0.5 - 15, w, 30); 1501 c.fillAndStroke(); 1502}; 1503 1504mxShapeMockupStatusBar.prototype.foreground = function(c, w, h) 1505{ 1506 var fillColor2 = mxUtils.getValue(this.style, mxShapeMockupStatusBar.prototype.cst.FILL_COLOR2, '#ddeeff'); 1507 var strokeColor2 = mxUtils.getValue(this.style, mxShapeMockupStatusBar.prototype.cst.STROKE_COLOR2, '#008cff'); 1508 var mainText = mxUtils.getValue(this.style, mxShapeMockupStatusBar.prototype.cst.MAIN_TEXT, '').toString().split(','); 1509 var textColor = mxUtils.getValue(this.style, mxShapeMockupStatusBar.prototype.cst.TEXT_COLOR, '#999999'); 1510 var textSize = mxUtils.getValue(this.style, mxShapeMockupStatusBar.prototype.cst.TEXT_SIZE, '17'); 1511 1512 c.setFillColor(fillColor2); 1513 c.roundrect(5, h * 0.5 - 10, (w - 75) * 0.46, 20, 5, 5); 1514 c.fill(); 1515 1516 c.roundrect(10 + (w - 75) * 0.46, h * 0.5 - 10, (w - 75) * 0.23, 20, 5, 5); 1517 c.fill(); 1518 c.roundrect(15 + (w - 75) * 0.69, h * 0.5 - 10, (w - 75) * 0.276, 20, 5, 5); 1519 c.fill(); 1520 1521 c.setFontSize(textSize); 1522 c.setFontColor(textColor); 1523 c.text(10, h * 0.5, 0, 0, mainText[0], mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1524 c.text(10 + (w - 75) * 0.575, h * 0.5, 0, 0, mainText[1], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1525 c.text(15 + (w - 75) * 0.828, h * 0.5, 0, 0, mainText[2], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 1526 1527 c.setStrokeColor(strokeColor2); 1528 c.ellipse(w - 25, h * 0.5 - 10, 20, 20); 1529 c.stroke(); 1530 c.begin(); 1531 c.moveTo(w - 55, h * 0.5 + 10); 1532 c.lineTo(w - 35, h * 0.5 + 10); 1533 c.stroke(); 1534}; 1535 1536mxCellRenderer.registerShape(mxShapeMockupStatusBar.prototype.cst.SHAPE_STATUS_BAR, mxShapeMockupStatusBar); 1537 1538//********************************************************************************************************************************************************** 1539//Pin 1540//********************************************************************************************************************************************************** 1541/** 1542* Extends mxShape. 1543*/ 1544function mxShapeMockupPin(bounds, fill, stroke, strokewidth) 1545{ 1546 mxShape.call(this); 1547 this.bounds = bounds; 1548 this.fill = fill; 1549 this.stroke = stroke; 1550 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1551}; 1552 1553/** 1554* Extends mxShape. 1555*/ 1556mxUtils.extend(mxShapeMockupPin, mxShape); 1557 1558mxShapeMockupPin.prototype.cst = { 1559 SHAPE_PIN : 'mxgraph.mockup.misc.pin', 1560 FILL_COLOR2 : 'fillColor2', 1561 FILL_COLOR3 : 'fillColor3' 1562}; 1563 1564mxShapeMockupPin.prototype.customProperties = [ 1565 {name: 'fillColor2', dispName: 'Fill2 Color', type: 'color'}, 1566 {name: 'fillColor3', dispName: 'Fill3 Color', type: 'color'} 1567]; 1568 1569/** 1570* Function: paintVertexShape 1571* 1572* Paints the vertex shape. 1573*/ 1574mxShapeMockupPin.prototype.paintVertexShape = function(c, x, y, w, h) 1575{ 1576 var fillColor2 = mxUtils.getValue(this.style, mxShapeMockupPin.prototype.cst.FILL_COLOR2, '#000000'); 1577 var fillColor3 = mxUtils.getValue(this.style, mxShapeMockupPin.prototype.cst.FILL_COLOR3, '#000000'); 1578 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000'); 1579 c.setShadow(false); 1580 c.translate(x, y); 1581 1582 c.setStrokeWidth(3); 1583 c.setStrokeColor('#666666'); 1584 c.begin(); 1585 c.moveTo(w * 0.5, h * 0.4); 1586 c.lineTo(w * 0.5, h); 1587 c.stroke(); 1588 1589 c.setStrokeWidth(2); 1590 c.setStrokeColor(strokeColor); 1591 c.setGradient(fillColor2, fillColor3, 0, 0, w, h * 0.4, mxConstants.DIRECTION_SOUTH, 1, 1); 1592 c.setAlpha(0.9); 1593 c.ellipse(0, 0, w, h * 0.4); 1594 c.fillAndStroke(); 1595 1596 c.setFillColor('#ffffff'); 1597 c.setAlpha(0.5); 1598 c.ellipse(w * 0.2, h * 0.08, w * 0.3, h * 0.12); 1599 c.fill(); 1600}; 1601 1602mxCellRenderer.registerShape(mxShapeMockupPin.prototype.cst.SHAPE_PIN, mxShapeMockupPin); 1603 1604//********************************************************************************************************************************************************** 1605//Rounded rectangle (adjustable rounding) 1606//********************************************************************************************************************************************************** 1607/** 1608* Extends mxShape. 1609*/ 1610function mxShapeMockupMiscRRect(bounds, fill, stroke, strokewidth) 1611{ 1612 mxShape.call(this); 1613 this.bounds = bounds; 1614 this.fill = fill; 1615 this.stroke = stroke; 1616 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1617}; 1618 1619/** 1620* Extends mxShape. 1621*/ 1622mxUtils.extend(mxShapeMockupMiscRRect, mxShape); 1623 1624mxShapeMockupMiscRRect.prototype.cst = { 1625 RRECT : 'mxgraph.mockup.misc.rrect', 1626 R_SIZE : 'rSize' 1627}; 1628 1629mxShapeMockupMiscRRect.prototype.customProperties = [ 1630 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10} 1631]; 1632 1633/** 1634* Function: paintVertexShape 1635* 1636* Paints the vertex shape. 1637*/ 1638mxShapeMockupMiscRRect.prototype.paintVertexShape = function(c, x, y, w, h) 1639{ 1640 c.translate(x, y); 1641 1642 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupMiscRRect.prototype.cst.R_SIZE, '10')); 1643 c.roundrect(0, 0, w, h, rSize); 1644 c.fillAndStroke(); 1645}; 1646 1647mxCellRenderer.registerShape(mxShapeMockupMiscRRect.prototype.cst.RRECT, mxShapeMockupMiscRRect); 1648 1649//********************************************************************************************************************************************************** 1650//Anchor (a dummy shape without visuals used for anchoring) 1651//********************************************************************************************************************************************************** 1652/** 1653* Extends mxShape. 1654*/ 1655function mxShapeMockupMiscAnchor(bounds, fill, stroke, strokewidth) 1656{ 1657 mxShape.call(this); 1658 this.bounds = bounds; 1659}; 1660 1661/** 1662* Extends mxShape. 1663*/ 1664mxUtils.extend(mxShapeMockupMiscAnchor, mxShape); 1665 1666mxShapeMockupMiscAnchor.prototype.cst = { 1667 ANCHOR : 'mxgraph.mockup.misc.anchor' 1668}; 1669 1670/** 1671* Function: paintVertexShape 1672* 1673* Paints the vertex shape. 1674*/ 1675mxShapeMockupMiscAnchor.prototype.paintVertexShape = function(c, x, y, w, h) 1676{ 1677}; 1678 1679mxCellRenderer.registerShape(mxShapeMockupMiscAnchor.prototype.cst.ANCHOR, mxShapeMockupMiscAnchor); 1680 1681