1/** 2 * $Id: mxGmdl.js,v 1.0 2015/09/09 17:05:39 mate Exp $ 3 * Copyright (c) 2006-2015, JGraph Ltd 4 */ 5 6//********************************************************************************************************************************************************** 7//player 8//********************************************************************************************************************************************************** 9/** 10* Extends mxShape. 11*/ 12function mxShapeGmdlPlayer(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(mxShapeGmdlPlayer, mxShape); 25 26mxShapeGmdlPlayer.prototype.cst = { 27 SHAPE_PLAYER : 'mxgraph.gmdl.player' 28}; 29 30/** 31* Function: paintVertexShape 32* 33* Paints the vertex shape. 34*/ 35mxShapeGmdlPlayer.prototype.paintVertexShape = function(c, x, y, w, h) 36{ 37 c.translate(x, y); 38 c.begin(); 39 c.rect(0, 0, w, h); 40 c.fill(); 41 c.setShadow(false); 42 this.foreground(c, x, y, w, h); 43}; 44 45mxShapeGmdlPlayer.prototype.foreground = function(c, x, y, w, h) 46{ 47 48 if ( h >= 4) 49 { 50 c.setFillColor('#FFED00'); 51 c.begin(); 52 c.rect(0, 0, w * 0.8, 4); 53 c.fill(); 54 } 55 56 if ( h >= 14 && w >= 33) 57 { 58 c.setFillColor('#717171'); 59 c.begin(); 60 c.rect(w - 33, h * 0.5 - 7, 4, 14); 61 c.fill(); 62 c.begin(); 63 c.rect(w - 25, h * 0.5 - 7, 4, 14); 64 c.fill(); 65 } 66 67}; 68 69mxCellRenderer.registerShape(mxShapeGmdlPlayer.prototype.cst.SHAPE_PLAYER, mxShapeGmdlPlayer); 70 71//********************************************************************************************************************************************************** 72//switch 73//********************************************************************************************************************************************************** 74/** 75* Extends mxShape. 76*/ 77function mxShapeGmdlSwitch(bounds, fill, stroke, strokewidth) 78{ 79 mxShape.call(this); 80 this.bounds = bounds; 81 this.fill = fill; 82 this.stroke = stroke; 83 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 84}; 85 86/** 87* Extends mxShape. 88*/ 89mxUtils.extend(mxShapeGmdlSwitch, mxShape); 90 91mxShapeGmdlSwitch.prototype.cst = { 92 SHAPE_SWITCH : 'mxgraph.gmdl.switch', 93 STATE : 'switchState', 94 STATE_ON : 'on', 95 STATE_OFF : 'off' 96}; 97 98mxShapeGmdlSwitch.prototype.customProperties = [ 99 {name:'switchState', dispName:'State', type:'enum', defVal:'on', 100 enumList:[{val:'on', dispName: 'On'}, {val:'off', dispName: 'Off'}]} 101]; 102 103/** 104* Function: paintVertexShape 105* 106* Paints the vertex shape. 107*/ 108mxShapeGmdlSwitch.prototype.paintVertexShape = function(c, x, y, w, h) 109{ 110 111 c.translate(x, y); 112 var state = mxUtils.getValue(this.style, mxShapeGmdlSwitch.prototype.cst.STATE, mxShapeGmdlSwitch.prototype.cst.STATE_ON); 113 this.background(c, x, y, w, h, state); 114 c.setShadow(true); 115 this.foreground(c, x, y, w, h, state); 116}; 117 118mxShapeGmdlSwitch.prototype.background = function(c, x, y, w, h, state) 119{ 120 c.begin(); 121 122 if (state === mxShapeGmdlSwitch.prototype.cst.STATE_ON) 123 { 124 c.save(); 125 c.setAlpha('0.5'); 126 c.moveTo(w * 0.135, h * 0.8); 127 c.arcTo(w * 0.135, h * 0.3, 0, 0, 1, w * 0.135, h * 0.2); 128 c.lineTo(w * 0.675, h * 0.2); 129 c.arcTo(w * 0.135, h * 0.3, 0, 0, 1, w * 0.675, h * 0.8); 130 c.close(); 131 c.fillAndStroke(); 132 c.restore(); 133 } 134 else 135 { 136 c.setFillColor('#BCBBBB'); 137 c.moveTo(w * 0.225, h * 0.8); 138 c.arcTo(w * 0.135, h * 0.3, 0, 0, 1, w * 0.225, h * 0.2); 139 c.lineTo(w * 0.865, h * 0.2); 140 c.arcTo(w * 0.135, h * 0.3, 0, 0, 1, w * 0.865, h * 0.8); 141 c.close(); 142 c.fillAndStroke(); 143 } 144 145}; 146 147mxShapeGmdlSwitch.prototype.foreground = function(c, x, y, w, h, state) 148{ 149 c.begin(); 150 151 if (state === mxShapeGmdlSwitch.prototype.cst.STATE_ON) 152 { 153 c.ellipse(w * 0.36, 0, w * 0.64, h); 154 } 155 else 156 { 157 c.setFillColor('#F1F1F1'); 158 c.ellipse(0, 0, w * 0.64, h); 159 } 160 161 c.fillAndStroke(); 162}; 163 164mxCellRenderer.registerShape(mxShapeGmdlSwitch.prototype.cst.SHAPE_SWITCH, mxShapeGmdlSwitch); 165 166//********************************************************************************************************************************************************** 167//rect with margins 168//********************************************************************************************************************************************************** 169/** 170* Extends mxShape. 171*/ 172function mxShapeGmdlMarginRect(bounds, fill, stroke, strokewidth) 173{ 174 mxShape.call(this); 175 this.bounds = bounds; 176 this.fill = fill; 177 this.stroke = stroke; 178 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 179}; 180 181/** 182* Extends mxShape. 183*/ 184mxUtils.extend(mxShapeGmdlMarginRect, mxShape); 185 186mxShapeGmdlMarginRect.prototype.cst = { 187 SHAPE_MARGIN_RECT : 'mxgraph.gmdl.marginRect', 188 MARGIN : 'rectMargin', 189 MARGIN_TOP : 'rectMarginTop', 190 MARGIN_LEFT : 'rectMarginLeft', 191 MARGIN_BOTTOM : 'rectMarginBottom', 192 MARGIN_RIGHT : 'rectMarginRight' 193}; 194 195mxShapeGmdlMarginRect.prototype.customProperties = [ 196 {name:'rectMargin', dispName:'Margin', type:'float', min:0, defVal:0}, 197 {name:'rectMarginTop', dispName:'Margin Top', type:'float', defVal:0}, 198 {name:'rectMarginLeft', dispName:'Margin Left', type:'float', defVal:0}, 199 {name:'rectMarginBottom', dispName:'Margin Bottom', type:'float', defVal:0}, 200 {name:'rectMarginRight', dispName:'Margin Right', type:'float', defVal:0} 201]; 202 203/** 204* Function: paintVertexShape 205* 206* Paints the vertex shape. 207*/ 208mxShapeGmdlMarginRect.prototype.paintVertexShape = function(c, x, y, w, h) 209{ 210 211 c.translate(x, y); 212 this.background(c, x, y, w, h); 213}; 214 215mxShapeGmdlMarginRect.prototype.background = function(c, x, y, w, h, state) 216{ 217 var margin = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlMarginRect.prototype.cst.MARGIN, '0')); 218 var marginTop = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlMarginRect.prototype.cst.MARGIN_TOP, '0')); 219 var marginLeft = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlMarginRect.prototype.cst.MARGIN_LEFT, '0')); 220 var marginBottom = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlMarginRect.prototype.cst.MARGIN_BOTTOM, '0')); 221 var marginRight = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlMarginRect.prototype.cst.MARGIN_RIGHT, '0')); 222 223 var x1 = margin + marginLeft; 224 var y1 = margin + marginTop; 225 var w1 = w - marginRight - x1 - margin; 226 var h1 = h - marginBottom - y1 - margin; 227 228 if (w1 >0 && h1 > 0) 229 { 230 c.begin(); 231 c.rect(x1, y1, w1, h1); 232 c.fillAndStroke(); 233 } 234}; 235 236mxCellRenderer.registerShape(mxShapeGmdlMarginRect.prototype.cst.SHAPE_MARGIN_RECT, mxShapeGmdlMarginRect); 237 238//********************************************************************************************************************************************************** 239//slider normal 240//********************************************************************************************************************************************************** 241/** 242* Extends mxShape. 243*/ 244function mxShapeGmdlSliderNormal(bounds, fill, stroke, strokewidth) 245{ 246 mxShape.call(this); 247 this.bounds = bounds; 248 this.fill = fill; 249 this.stroke = stroke; 250 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 251}; 252 253/** 254* Extends mxShape. 255*/ 256mxUtils.extend(mxShapeGmdlSliderNormal, mxShape); 257 258mxShapeGmdlSliderNormal.prototype.cst = { 259 SHAPE_SLIDER_NORMAL : 'mxgraph.gmdl.sliderNormal', 260 HANDLE_SIZE : 'handleSize' 261}; 262 263mxShapeGmdlSliderNormal.prototype.customProperties = [ 264 {name:'handleSize', dispName:'Handle Size', type:'float', min:0, defVal:10} 265]; 266 267/** 268* Function: paintVertexShape 269* 270* Paints the vertex shape. 271*/ 272mxShapeGmdlSliderNormal.prototype.paintVertexShape = function(c, x, y, w, h) 273{ 274 275 c.translate(x, y); 276 this.background(c, x, y, w, h); 277 c.setShadow(true); 278}; 279 280mxShapeGmdlSliderNormal.prototype.background = function(c, x, y, w, h) 281{ 282 var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderNormal.prototype.cst.HANDLE_SIZE, '10')); 283 284 c.ellipse(0, h * 0.5 - hSize * 0.5, hSize, hSize); 285 c.stroke(); 286 287 c.begin(); 288 c.moveTo(hSize, h * 0.5); 289 c.lineTo(w, h * 0.5); 290 c.fillAndStroke(); 291}; 292 293mxCellRenderer.registerShape(mxShapeGmdlSliderNormal.prototype.cst.SHAPE_SLIDER_NORMAL, mxShapeGmdlSliderNormal); 294 295//********************************************************************************************************************************************************** 296//slider normal v2 297//********************************************************************************************************************************************************** 298/** 299* Extends mxShape. 300*/ 301function mxShapeGmdlSlider2(bounds, fill, stroke, strokewidth) 302{ 303 mxShape.call(this); 304 this.bounds = bounds; 305 this.fill = fill; 306 this.stroke = stroke; 307 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 308}; 309 310/** 311* Extends mxShape. 312*/ 313mxUtils.extend(mxShapeGmdlSlider2, mxShape); 314 315mxShapeGmdlSlider2.prototype.cst = { 316 SHAPE_SLIDER : 'mxgraph.gmdl.slider2', 317 BAR_POS : 'barPos', 318 HANDLE_SIZE : 'handleSize' 319}; 320 321mxShapeGmdlSlider2.prototype.customProperties = [ 322 {name:'barPos', dispName:'Handle Position', type:'float', min:0, defVal:40}, 323 {name:'handleSize', dispName:'Handle Size', type:'float', min:0, defVal:10} 324]; 325 326/** 327* Function: paintVertexShape 328* 329* Paints the vertex shape. 330*/ 331mxShapeGmdlSlider2.prototype.paintVertexShape = function(c, x, y, w, h) 332{ 333 334 c.translate(x, y); 335 this.background(c, x, y, w, h); 336 c.setShadow(true); 337}; 338 339mxShapeGmdlSlider2.prototype.background = function(c, x, y, w, h) 340{ 341 var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSlider2.prototype.cst.HANDLE_SIZE, '10')); 342 var barPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSlider2.prototype.cst.BAR_POS, '40')) / 100; 343 344 barPos = Math.max(0, Math.min(1, barPos)); 345 346 c.save(); 347 c.setStrokeColor('#bbbbbb'); 348 c.begin(); 349 c.moveTo(0, h * 0.5); 350 c.lineTo(w, h * 0.5); 351 c.fillAndStroke(); 352 353 c.restore(); 354 c.begin(); 355 c.moveTo(0, h * 0.5); 356 c.lineTo(barPos * w, h * 0.5); 357 c.fillAndStroke(); 358 359 c.begin(); 360 c.ellipse(barPos * w - hSize * 0.5, h * 0.5 - hSize * 0.5, hSize, hSize); 361 c.fillAndStroke(); 362 363}; 364 365mxCellRenderer.registerShape(mxShapeGmdlSlider2.prototype.cst.SHAPE_SLIDER, mxShapeGmdlSlider2); 366 367mxShapeGmdlSlider2.prototype.constraints = null; 368 369Graph.handleFactory[mxShapeGmdlSlider2.prototype.cst.SHAPE_SLIDER] = function(state) 370{ 371 var handles = [Graph.createHandle(state, ['barPos'], function(bounds) 372 { 373 var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4)))); 374 375 return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2); 376 }, function(bounds, pt) 377 { 378 this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100; 379 })]; 380 381 return handles; 382}; 383 384//********************************************************************************************************************************************************** 385//slider focused v2 386//********************************************************************************************************************************************************** 387/** 388* Extends mxShape. 389*/ 390function mxShapeGmdlSliderFocused(bounds, fill, stroke, strokewidth) 391{ 392 mxShape.call(this); 393 this.bounds = bounds; 394 this.fill = fill; 395 this.stroke = stroke; 396 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 397}; 398 399/** 400* Extends mxShape. 401*/ 402mxUtils.extend(mxShapeGmdlSliderFocused, mxShape); 403 404mxShapeGmdlSliderFocused.prototype.cst = { 405 SHAPE_SLIDER_FOCUSED : 'mxgraph.gmdl.sliderFocused', 406 BAR_POS : 'barPos', 407 HANDLE_SIZE : 'handleSize' 408}; 409 410mxShapeGmdlSliderFocused.prototype.customProperties = [ 411 {name:'barPos', dispName:'Handle Position', type:'float', min:0, defVal:40}, 412 {name:'handleSize', dispName:'Handle Size', type:'float', min:0, defVal:10} 413]; 414 415/** 416* Function: paintVertexShape 417* 418* Paints the vertex shape. 419*/ 420mxShapeGmdlSliderFocused.prototype.paintVertexShape = function(c, x, y, w, h) 421{ 422 423 c.translate(x, y); 424 this.background(c, x, y, w, h); 425 c.setShadow(true); 426}; 427 428mxShapeGmdlSliderFocused.prototype.background = function(c, x, y, w, h) 429{ 430 var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderFocused.prototype.cst.HANDLE_SIZE, '10')); 431 var barPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderFocused.prototype.cst.BAR_POS, '40')) / 100; 432 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#ffffff'); 433 434 barPos = Math.max(0, Math.min(1, barPos)); 435 436 c.save(); 437 c.setStrokeColor('#bbbbbb'); 438 c.begin(); 439 c.moveTo(0, h * 0.5); 440 c.lineTo(w, h * 0.5); 441 c.fillAndStroke(); 442 443 c.restore(); 444 c.begin(); 445 c.moveTo(0, h * 0.5); 446 c.lineTo(barPos * w, h * 0.5); 447 c.fillAndStroke(); 448 449 c.begin(); 450 c.ellipse(barPos * w - hSize * 0.167, h * 0.5 - hSize * 0.167, hSize * 0.33, hSize * 0.33); 451 c.fillAndStroke(); 452 453 c.setFillColor(strokeColor); 454 c.setAlpha(0.15); 455 c.begin(); 456 c.ellipse(barPos * w - hSize * 0.5, h * 0.5 - hSize * 0.5, hSize, hSize); 457 c.fill(); 458 459}; 460 461mxCellRenderer.registerShape(mxShapeGmdlSliderFocused.prototype.cst.SHAPE_SLIDER_FOCUSED, mxShapeGmdlSliderFocused); 462 463mxShapeGmdlSliderFocused.prototype.constraints = null; 464 465Graph.handleFactory[mxShapeGmdlSliderFocused.prototype.cst.SHAPE_SLIDER_FOCUSED] = function(state) 466{ 467 var handles = [Graph.createHandle(state, ['barPos'], function(bounds) 468 { 469 var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4)))); 470 471 return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2); 472 }, function(bounds, pt) 473 { 474 this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100; 475 })]; 476 477 return handles; 478 479}; 480 481//********************************************************************************************************************************************************** 482//slider disabled 483//********************************************************************************************************************************************************** 484/** 485* Extends mxShape. 486*/ 487function mxShapeGmdlSliderDisabled(bounds, fill, stroke, strokewidth) 488{ 489 mxShape.call(this); 490 this.bounds = bounds; 491 this.fill = fill; 492 this.stroke = stroke; 493 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 494}; 495 496/** 497* Extends mxShape. 498*/ 499mxUtils.extend(mxShapeGmdlSliderDisabled, mxShape); 500 501mxShapeGmdlSliderDisabled.prototype.cst = { 502 SHAPE_SLIDER_DISABLED : 'mxgraph.gmdl.sliderDisabled', 503 HANDLE_POSITION : 'hPos', 504 HANDLE_SIZE : 'handleSize' 505}; 506 507mxShapeGmdlSliderDisabled.prototype.customProperties = [ 508 {name:'hPos', dispName:'Handle Position', type:'float', min:0, defVal:40}, 509 {name:'handleSize', dispName:'Handle Size', type:'float', min:0, defVal:10} 510]; 511 512/** 513* Function: paintVertexShape 514* 515* Paints the vertex shape. 516*/ 517mxShapeGmdlSliderDisabled.prototype.paintVertexShape = function(c, x, y, w, h) 518{ 519 c.translate(x, y); 520 this.background(c, x, y, w, h); 521 c.setShadow(true); 522}; 523 524mxShapeGmdlSliderDisabled.prototype.background = function(c, x, y, w, h) 525{ 526 var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDisabled.prototype.cst.HANDLE_SIZE, '10')); 527 var hPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDisabled.prototype.cst.HANDLE_POSITION, '50')) / 100; 528 529 hPos = Math.max(hPos, 0); 530 hPos = Math.min(hPos, 1); 531 532 c.ellipse(w * hPos - hSize * 0.5, (h - hSize) * 0.5, hSize, hSize); 533 c.fillAndStroke(); 534 535 var endL = w * hPos - 7; 536 var startR = w * hPos + 7; 537 538 if (endL > 0) 539 { 540 c.begin(); 541 c.moveTo(0, h * 0.5); 542 c.lineTo(endL, h * 0.5); 543 c.stroke(); 544 } 545 546 if (startR < w) 547 { 548 c.begin(); 549 c.moveTo(startR, h * 0.5); 550 c.lineTo(w, h * 0.5); 551 c.stroke(); 552 } 553}; 554 555mxCellRenderer.registerShape(mxShapeGmdlSliderDisabled.prototype.cst.SHAPE_SLIDER_DISABLED, mxShapeGmdlSliderDisabled); 556 557//********************************************************************************************************************************************************** 558//slider disabled v2 559//********************************************************************************************************************************************************** 560/** 561* Extends mxShape. 562*/ 563function mxShapeGmdlSliderDisabled2(bounds, fill, stroke, strokewidth) 564{ 565 mxShape.call(this); 566 this.bounds = bounds; 567 this.fill = fill; 568 this.stroke = stroke; 569 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 570}; 571 572/** 573* Extends mxShape. 574*/ 575mxUtils.extend(mxShapeGmdlSliderDisabled2, mxShape); 576 577mxShapeGmdlSliderDisabled2.prototype.cst = { 578 SHAPE_SLIDER_DISABLED : 'mxgraph.gmdl.sliderDisabled2', 579 HANDLE_POSITION : 'hPos', 580 HANDLE_SIZE : 'handleSize' 581}; 582 583mxShapeGmdlSliderDisabled2.prototype.customProperties = [ 584 {name:'hPos', dispName:'Handle Position', type:'float', min:0, defVal:'40'}, 585 {name:'handleSize', dispName:'Handle Size', type:'float', min:0, defVal:'10'} 586]; 587 588/** 589* Function: paintVertexShape 590* 591* Paints the vertex shape. 592*/ 593mxShapeGmdlSliderDisabled2.prototype.paintVertexShape = function(c, x, y, w, h) 594{ 595 c.translate(x, y); 596 this.background(c, x, y, w, h); 597 c.setShadow(true); 598}; 599 600mxShapeGmdlSliderDisabled2.prototype.background = function(c, x, y, w, h) 601{ 602 var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDisabled2.prototype.cst.HANDLE_SIZE, '10')); 603 var hPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDisabled2.prototype.cst.HANDLE_POSITION, '50')) / 100; 604 605 hPos = Math.min(Math.max(hPos, 0), 1); 606 607 c.ellipse(w * hPos - hSize * 0.5, (h - hSize) * 0.5, hSize, hSize); 608 c.fillAndStroke(); 609 610 var endL = w * hPos - 7; 611 var startR = w * hPos + 7; 612 613 if (endL > 0) 614 { 615 c.begin(); 616 c.moveTo(0, h * 0.5); 617 c.lineTo(endL, h * 0.5); 618 c.stroke(); 619 } 620 621 if (startR < w) 622 { 623 c.begin(); 624 c.moveTo(startR, h * 0.5); 625 c.lineTo(w, h * 0.5); 626 c.stroke(); 627 } 628}; 629 630mxCellRenderer.registerShape(mxShapeGmdlSliderDisabled2.prototype.cst.SHAPE_SLIDER_DISABLED, mxShapeGmdlSliderDisabled2); 631 632mxShapeGmdlSlider2.prototype.constraints = null; 633 634Graph.handleFactory[mxShapeGmdlSliderDisabled2.prototype.cst.SHAPE_SLIDER_DISABLED] = function(state) 635{ 636 var handles = [Graph.createHandle(state, ['hPos'], function(bounds) 637 { 638 var hPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'hPos', 0.4)))); 639 640 return new mxPoint(bounds.x + hPos * bounds.width / 100, bounds.y + bounds.height / 2); 641 }, function(bounds, pt) 642 { 643 this.state.style['hPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100; 644 })]; 645 646 return handles; 647}; 648 649//********************************************************************************************************************************************************** 650//slider discrete 651//********************************************************************************************************************************************************** 652/** 653* Extends mxShape. 654*/ 655function mxShapeGmdlSliderDiscrete(bounds, fill, stroke, strokewidth) 656{ 657 mxShape.call(this); 658 this.bounds = bounds; 659 this.fill = fill; 660 this.stroke = stroke; 661 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 662}; 663 664/** 665* Extends mxShape. 666*/ 667mxUtils.extend(mxShapeGmdlSliderDiscrete, mxShape); 668 669mxShapeGmdlSliderDiscrete.prototype.cst = { 670 SHAPE_DISCRETE : 'mxgraph.gmdl.sliderDiscrete', 671 BAR_POS : 'barPos', 672 HANDLE_SIZE : 'handleSize' 673}; 674 675mxShapeGmdlSliderDiscrete.prototype.customProperties = [ 676 {name:'barPos', dispName:'Handle Position', type:'int', min:0, defVal:'40'}, 677 {name:'handleSize', dispName:'Handle Size', type:'float', min:0, defVal:'10'} 678]; 679 680/** 681* Function: paintVertexShape 682* 683* Paints the vertex shape. 684*/ 685mxShapeGmdlSliderDiscrete.prototype.paintVertexShape = function(c, x, y, w, h) 686{ 687 688 c.translate(x, y); 689 this.background(c, x, y, w, h); 690 c.setShadow(true); 691}; 692 693mxShapeGmdlSliderDiscrete.prototype.background = function(c, x, y, w, h) 694{ 695 var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDiscrete.prototype.cst.HANDLE_SIZE, '10')); 696 var barPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDiscrete.prototype.cst.BAR_POS, '40')) / 100; 697 var fontSize = parseFloat(mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '12')); 698 var fontColor = mxUtils.getValue(this.style, mxConstants.STYLE_FONTCOLOR, '#000000'); 699 700 barPos = Math.max(0, Math.min(1, barPos)); 701 702 c.save(); 703 c.setStrokeColor('#bbbbbb'); 704 c.begin(); 705 c.moveTo(0, h * 0.5 + 22.5); 706 c.lineTo(w, h * 0.5 + 22.5); 707 c.fillAndStroke(); 708 709 c.restore(); 710 c.begin(); 711 c.moveTo(0, h * 0.5 + 22.5); 712 c.lineTo(barPos * w, h * 0.5 + 22.5); 713 c.fillAndStroke(); 714 715 c.begin(); 716 c.moveTo(barPos * w, h * 0.5 + 15.5); 717 c.lineTo(barPos * w - 10.5, h * 0.5 + 2.5); 718 c.arcTo(15, 15, 0, 0, 1, barPos * w, h * 0.5 - 22.5); 719 c.arcTo(15, 15, 0, 0, 1, barPos * w + 10.5, h * 0.5 + 2.5); 720 c.close(); 721 c.fillAndStroke(); 722 723 c.setFontSize(fontSize); 724 c.setFontColor(fontColor); 725 var p = Math.round(barPos * 100); 726 c.text(barPos * w, h * 0.5 - 9, 0, 0, p.toString() , mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 727}; 728 729mxCellRenderer.registerShape(mxShapeGmdlSliderDiscrete.prototype.cst.SHAPE_DISCRETE, mxShapeGmdlSliderDiscrete); 730 731mxShapeGmdlSliderDiscrete.prototype.constraints = null; 732 733Graph.handleFactory[mxShapeGmdlSliderDiscrete.prototype.cst.SHAPE_DISCRETE] = function(state) 734{ 735 var handles = [Graph.createHandle(state, ['barPos'], function(bounds) 736 { 737 var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4)))); 738 739 return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2 + 22.5); 740 }, function(bounds, pt) 741 { 742 this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100; 743 })]; 744 745 return handles; 746}; 747 748//********************************************************************************************************************************************************** 749//slider discrete with dots 750//********************************************************************************************************************************************************** 751/** 752* Extends mxShape. 753*/ 754function mxShapeGmdlSliderDiscreteDots(bounds, fill, stroke, strokewidth) 755{ 756 mxShape.call(this); 757 this.bounds = bounds; 758 this.fill = fill; 759 this.stroke = stroke; 760 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 761}; 762 763/** 764* Extends mxShape. 765*/ 766mxUtils.extend(mxShapeGmdlSliderDiscreteDots, mxShape); 767 768mxShapeGmdlSliderDiscreteDots.prototype.cst = { 769 SHAPE_DISCRETE_DOTS : 'mxgraph.gmdl.sliderDiscreteDots', 770 BAR_POS : 'barPos', 771 HANDLE_SIZE : 'handleSize' 772}; 773 774mxShapeGmdlSliderDiscreteDots.prototype.customProperties = [ 775 {name:'barPos', dispName:'Handle Position', type:'int', min:0, defVal:'40'}, 776 {name:'handleSize', dispName:'Handle Size', type:'float', min:0, defVal:'10'} 777]; 778 779/** 780* Function: paintVertexShape 781* 782* Paints the vertex shape. 783*/ 784mxShapeGmdlSliderDiscreteDots.prototype.paintVertexShape = function(c, x, y, w, h) 785{ 786 787 c.translate(x, y); 788 this.background(c, x, y, w, h); 789 c.setShadow(true); 790}; 791 792mxShapeGmdlSliderDiscreteDots.prototype.background = function(c, x, y, w, h) 793{ 794 var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDiscreteDots.prototype.cst.HANDLE_SIZE, '10')); 795 var barPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDiscreteDots.prototype.cst.BAR_POS, '40')) / 100; 796 var fontSize = parseFloat(mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '12')); 797 var fontColor = mxUtils.getValue(this.style, mxConstants.STYLE_FONTCOLOR, '#000000'); 798 var bright = mxUtils.getValue(this.style, 'bright', '1'); 799 800 barPos = Math.max(0, Math.min(1, barPos)); 801 802 c.save(); 803 c.setStrokeColor('#bebebe'); 804 c.begin(); 805 c.moveTo(0, h * 0.5 + 22.5); 806 c.lineTo(w, h * 0.5 + 22.5); 807 c.fillAndStroke(); 808 809 c.restore(); 810 811 if (barPos <= 0.1) 812 { 813 c.setFillColor('#bebebe'); 814 } 815 816 c.begin(); 817 c.moveTo(0, h * 0.5 + 22.5); 818 c.lineTo(barPos * w, h * 0.5 + 22.5); 819 c.fillAndStroke(); 820 821 c.begin(); 822 c.moveTo(barPos * w, h * 0.5 + 15.5); 823 c.lineTo(barPos * w - 10.5, h * 0.5 + 2.5); 824 c.arcTo(15, 15, 0, 0, 1, barPos * w, h * 0.5 - 22.5); 825 c.arcTo(15, 15, 0, 0, 1, barPos * w + 10.5, h * 0.5 + 2.5); 826 c.close(); 827 c.fill(); 828 829 if (bright == '1') 830 { 831 c.setFillColor('#000000'); 832 } 833 else 834 { 835 c.setFillColor('#ffffff'); 836 } 837 838 c.ellipse(-1.5, h * 0.5 + 21, 3, 3); 839 c.fill(); 840 841 c.ellipse(w * 0.2 - 1.5, h * 0.5 + 21, 3, 3); 842 c.fill(); 843 844 c.ellipse(w * 0.4 - 1.5, h * 0.5 + 21, 3, 3); 845 c.fill(); 846 847 c.ellipse(w * 0.6 - 1.5, h * 0.5 + 21, 3, 3); 848 c.fill(); 849 850 c.ellipse(w * 0.8 - 1.5, h * 0.5 + 21, 3, 3); 851 c.fill(); 852 853 c.ellipse(w - 1.5, h * 0.5 + 21, 3, 3); 854 c.fill(); 855 856 c.setFontSize(fontSize); 857 c.setFontColor(fontColor); 858 var p = Math.round(barPos * 100); 859 c.text(barPos * w, h * 0.5 - 9, 0, 0, p.toString() , mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 860}; 861 862mxCellRenderer.registerShape(mxShapeGmdlSliderDiscreteDots.prototype.cst.SHAPE_DISCRETE_DOTS, mxShapeGmdlSliderDiscreteDots); 863 864mxShapeGmdlSliderDiscreteDots.prototype.constraints = null; 865 866Graph.handleFactory[mxShapeGmdlSliderDiscreteDots.prototype.cst.SHAPE_DISCRETE_DOTS] = function(state) 867{ 868 var handles = [Graph.createHandle(state, ['barPos'], function(bounds) 869 { 870 var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4)))); 871 872 return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2 + 22.5); 873 }, function(bounds, pt) 874 { 875 this.state.style['barPos'] = Math.round(0.05 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 0.05; 876 })]; 877 878 return handles; 879}; 880 881//********************************************************************************************************************************************************** 882//Progress Bar 883//********************************************************************************************************************************************************** 884/** 885* Extends mxShape. 886*/ 887function mxShapeGmdlProgressBar(bounds, fill, stroke, strokewidth) 888{ 889 mxShape.call(this); 890 this.bounds = bounds; 891 this.fill = fill; 892 this.stroke = stroke; 893 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 894 this.dx1 = 0.8; 895}; 896 897/** 898* Extends mxShape. 899*/ 900mxUtils.extend(mxShapeGmdlProgressBar, mxShape); 901 902mxShapeGmdlProgressBar.prototype.cst = { 903 PROGRESS_BAR : 'mxgraph.gmdl.progressBar' 904}; 905 906mxShapeGmdlProgressBar.prototype.customProperties = [ 907 {name:'dx1', dispName:'Handle Position', type:'int', min:0, defVal:0.8} 908]; 909 910/** 911* Function: paintVertexShape 912* 913* Paints the vertex shape. 914*/ 915mxShapeGmdlProgressBar.prototype.paintVertexShape = function(c, x, y, w, h) 916{ 917 var dx1 = w * Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx1', this.dx1)))); 918 919 c.translate(x, y); 920 921 c.save(); 922 c.setStrokeColor('#aaaaaa'); 923 c.begin(); 924 c.moveTo(0, h * 0.5); 925 c.lineTo(w , h * 0.5); 926 c.stroke(); 927 928 c.restore(); 929 c.setShadow(false); 930 c.begin(); 931 c.moveTo(0, h * 0.5); 932 c.lineTo(dx1, h * 0.5); 933 c.stroke(); 934 935}; 936 937mxCellRenderer.registerShape(mxShapeGmdlProgressBar.prototype.cst.PROGRESS_BAR, mxShapeGmdlProgressBar); 938 939mxShapeGmdlProgressBar.prototype.constraints = null; 940 941Graph.handleFactory[mxShapeGmdlProgressBar.prototype.cst.PROGRESS_BAR] = function(state) 942{ 943 var handles = [Graph.createHandle(state, ['dx1'], function(bounds) 944 { 945 var dx1 = Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.state.style, 'dx1', this.dx1)))); 946 947 return new mxPoint(bounds.x + dx1 * bounds.width, bounds.y + bounds.height / 2); 948 }, function(bounds, pt) 949 { 950 this.state.style['dx1'] = Math.round(100 * Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width))) / 100; 951 })]; 952 953 var handle2 = Graph.createHandle(state, ['dx2'], function(bounds) 954 { 955 var dx2 = Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.state.style, 'dx2', this.dx1)))); 956 957 return new mxPoint(bounds.x + dx2 * bounds.width, bounds.y + bounds.height / 2); 958 }, function(bounds, pt) 959 { 960 this.state.style['dx2'] = Math.round(100 * Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width))) / 100; 961 }); 962 963 handles.push(handle2); 964 965 return handles; 966}; 967 968