1/**2 * Copyright (c) 2006-2015, JGraph Holdings Ltd3 */45//**********************************************************************************************************************************************************6//player7//**********************************************************************************************************************************************************8/**9* Extends mxShape.10*/11function mxShapeGmdlPlayer(bounds, fill, stroke, strokewidth)12{13 mxShape.call(this);14 this.bounds = bounds;15 this.fill = fill;16 this.stroke = stroke;17 this.strokewidth = (strokewidth != null) ? strokewidth : 1;18};1920/**21* Extends mxShape.22*/23mxUtils.extend(mxShapeGmdlPlayer, mxShape);2425mxShapeGmdlPlayer.prototype.cst = {26 SHAPE_PLAYER : 'mxgraph.gmdl.player'27};2829/**30* Function: paintVertexShape31* 32* Paints the vertex shape.33*/34mxShapeGmdlPlayer.prototype.paintVertexShape = function(c, x, y, w, h)35{36 c.translate(x, y);37 c.begin();38 c.rect(0, 0, w, h);39 c.fill();40 c.setShadow(false);41 this.foreground(c, x, y, w, h);42};4344mxShapeGmdlPlayer.prototype.foreground = function(c, x, y, w, h)45{4647 if ( h >= 4)48 {49 c.setFillColor('#FFED00');50 c.begin();51 c.rect(0, 0, w * 0.8, 4);52 c.fill();53 }54 55 if ( h >= 14 && w >= 33)56 {57 c.setFillColor('#717171');58 c.begin();59 c.rect(w - 33, h * 0.5 - 7, 4, 14);60 c.fill();61 c.begin();62 c.rect(w - 25, h * 0.5 - 7, 4, 14);63 c.fill();64 }6566};6768mxCellRenderer.registerShape(mxShapeGmdlPlayer.prototype.cst.SHAPE_PLAYER, mxShapeGmdlPlayer);6970//**********************************************************************************************************************************************************71//switch72//**********************************************************************************************************************************************************73/**74* Extends mxShape.75*/76function mxShapeGmdlSwitch(bounds, fill, stroke, strokewidth)77{78 mxShape.call(this);79 this.bounds = bounds;80 this.fill = fill;81 this.stroke = stroke;82 this.strokewidth = (strokewidth != null) ? strokewidth : 1;83};8485/**86* Extends mxShape.87*/88mxUtils.extend(mxShapeGmdlSwitch, mxShape);8990mxShapeGmdlSwitch.prototype.cst = {91 SHAPE_SWITCH : 'mxgraph.gmdl.switch',92 STATE : 'switchState',93 STATE_ON : 'on',94 STATE_OFF : 'off'95};9697mxShapeGmdlSwitch.prototype.customProperties = [98 {name:'switchState', dispName:'State', type:'enum', defVal:'on',99 enumList:[{val:'on', dispName: 'On'}, {val:'off', dispName: 'Off'}]}100];101102/**103* Function: paintVertexShape104* 105* Paints the vertex shape.106*/107mxShapeGmdlSwitch.prototype.paintVertexShape = function(c, x, y, w, h)108{109 110 c.translate(x, y);111 var state = mxUtils.getValue(this.style, mxShapeGmdlSwitch.prototype.cst.STATE, mxShapeGmdlSwitch.prototype.cst.STATE_ON);112 this.background(c, x, y, w, h, state);113 c.setShadow(true);114 this.foreground(c, x, y, w, h, state);115};116117mxShapeGmdlSwitch.prototype.background = function(c, x, y, w, h, state)118{119 c.begin();120121 if (state === mxShapeGmdlSwitch.prototype.cst.STATE_ON)122 {123 c.save();124 c.setAlpha('0.5');125 c.moveTo(w * 0.135, h * 0.8);126 c.arcTo(w * 0.135, h * 0.3, 0, 0, 1, w * 0.135, h * 0.2);127 c.lineTo(w * 0.675, h * 0.2);128 c.arcTo(w * 0.135, h * 0.3, 0, 0, 1, w * 0.675, h * 0.8);129 c.close();130 c.fillAndStroke();131 c.restore();132 }133 else134 {135 c.setFillColor('#BCBBBB');136 c.moveTo(w * 0.225, h * 0.8);137 c.arcTo(w * 0.135, h * 0.3, 0, 0, 1, w * 0.225, h * 0.2);138 c.lineTo(w * 0.865, h * 0.2);139 c.arcTo(w * 0.135, h * 0.3, 0, 0, 1, w * 0.865, h * 0.8);140 c.close();141 c.fillAndStroke();142 }143144};145146mxShapeGmdlSwitch.prototype.foreground = function(c, x, y, w, h, state)147{148 c.begin();149150 if (state === mxShapeGmdlSwitch.prototype.cst.STATE_ON)151 {152 c.ellipse(w * 0.36, 0, w * 0.64, h);153 }154 else155 {156 c.setFillColor('#F1F1F1');157 c.ellipse(0, 0, w * 0.64, h);158 }159160 c.fillAndStroke();161};162163mxCellRenderer.registerShape(mxShapeGmdlSwitch.prototype.cst.SHAPE_SWITCH, mxShapeGmdlSwitch);164165//**********************************************************************************************************************************************************166//rect with margins167//**********************************************************************************************************************************************************168/**169* Extends mxShape.170*/171function mxShapeGmdlMarginRect(bounds, fill, stroke, strokewidth)172{173 mxShape.call(this);174 this.bounds = bounds;175 this.fill = fill;176 this.stroke = stroke;177 this.strokewidth = (strokewidth != null) ? strokewidth : 1;178};179180/**181* Extends mxShape.182*/183mxUtils.extend(mxShapeGmdlMarginRect, mxShape);184185mxShapeGmdlMarginRect.prototype.cst = {186 SHAPE_MARGIN_RECT : 'mxgraph.gmdl.marginRect',187 MARGIN : 'rectMargin',188 MARGIN_TOP : 'rectMarginTop',189 MARGIN_LEFT : 'rectMarginLeft',190 MARGIN_BOTTOM : 'rectMarginBottom',191 MARGIN_RIGHT : 'rectMarginRight'192};193194mxShapeGmdlMarginRect.prototype.customProperties = [195 {name:'rectMargin', dispName:'Margin', type:'float', min:0, defVal:0},196 {name:'rectMarginTop', dispName:'Margin Top', type:'float', defVal:0},197 {name:'rectMarginLeft', dispName:'Margin Left', type:'float', defVal:0},198 {name:'rectMarginBottom', dispName:'Margin Bottom', type:'float', defVal:0},199 {name:'rectMarginRight', dispName:'Margin Right', type:'float', defVal:0}200];201202/**203* Function: paintVertexShape204* 205* Paints the vertex shape.206*/207mxShapeGmdlMarginRect.prototype.paintVertexShape = function(c, x, y, w, h)208{209 210 c.translate(x, y);211 this.background(c, x, y, w, h);212};213214mxShapeGmdlMarginRect.prototype.background = function(c, x, y, w, h, state)215{216 var margin = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlMarginRect.prototype.cst.MARGIN, '0'));217 var marginTop = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlMarginRect.prototype.cst.MARGIN_TOP, '0'));218 var marginLeft = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlMarginRect.prototype.cst.MARGIN_LEFT, '0'));219 var marginBottom = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlMarginRect.prototype.cst.MARGIN_BOTTOM, '0'));220 var marginRight = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlMarginRect.prototype.cst.MARGIN_RIGHT, '0'));221222 var x1 = margin + marginLeft;223 var y1 = margin + marginTop;224 var w1 = w - marginRight - x1 - margin;225 var h1 = h - marginBottom - y1 - margin;226227 if (w1 >0 && h1 > 0)228 {229 c.begin();230 c.rect(x1, y1, w1, h1);231 c.fillAndStroke();232 }233};234235mxCellRenderer.registerShape(mxShapeGmdlMarginRect.prototype.cst.SHAPE_MARGIN_RECT, mxShapeGmdlMarginRect);236237//**********************************************************************************************************************************************************238//slider normal239//**********************************************************************************************************************************************************240/**241* Extends mxShape.242*/243function mxShapeGmdlSliderNormal(bounds, fill, stroke, strokewidth)244{245 mxShape.call(this);246 this.bounds = bounds;247 this.fill = fill;248 this.stroke = stroke;249 this.strokewidth = (strokewidth != null) ? strokewidth : 1;250};251252/**253* Extends mxShape.254*/255mxUtils.extend(mxShapeGmdlSliderNormal, mxShape);256257mxShapeGmdlSliderNormal.prototype.cst = {258 SHAPE_SLIDER_NORMAL : 'mxgraph.gmdl.sliderNormal',259 HANDLE_SIZE : 'handleSize'260};261262mxShapeGmdlSliderNormal.prototype.customProperties = [263 {name:'handleSize', dispName:'Handle Size', type:'float', min:0, defVal:10}264];265266/**267* Function: paintVertexShape268* 269* Paints the vertex shape.270*/271mxShapeGmdlSliderNormal.prototype.paintVertexShape = function(c, x, y, w, h)272{273 274 c.translate(x, y);275 this.background(c, x, y, w, h);276 c.setShadow(true);277};278279mxShapeGmdlSliderNormal.prototype.background = function(c, x, y, w, h)280{281 var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderNormal.prototype.cst.HANDLE_SIZE, '10'));282283 c.ellipse(0, h * 0.5 - hSize * 0.5, hSize, hSize);284 c.stroke();285 286 c.begin();287 c.moveTo(hSize, h * 0.5);288 c.lineTo(w, h * 0.5);289 c.fillAndStroke();290};291292mxCellRenderer.registerShape(mxShapeGmdlSliderNormal.prototype.cst.SHAPE_SLIDER_NORMAL, mxShapeGmdlSliderNormal);293294//**********************************************************************************************************************************************************295//slider normal v2296//**********************************************************************************************************************************************************297/**298* Extends mxShape.299*/300function mxShapeGmdlSlider2(bounds, fill, stroke, strokewidth)301{302 mxShape.call(this);303 this.bounds = bounds;304 this.fill = fill;305 this.stroke = stroke;306 this.strokewidth = (strokewidth != null) ? strokewidth : 1;307};308309/**310* Extends mxShape.311*/312mxUtils.extend(mxShapeGmdlSlider2, mxShape);313314mxShapeGmdlSlider2.prototype.cst = {315 SHAPE_SLIDER : 'mxgraph.gmdl.slider2',316 BAR_POS : 'barPos',317 HANDLE_SIZE : 'handleSize'318};319320mxShapeGmdlSlider2.prototype.customProperties = [321 {name:'barPos', dispName:'Handle Position', type:'float', min:0, defVal:40},322 {name:'handleSize', dispName:'Handle Size', type:'float', min:0, defVal:10}323];324325/**326* Function: paintVertexShape327* 328* Paints the vertex shape.329*/330mxShapeGmdlSlider2.prototype.paintVertexShape = function(c, x, y, w, h)331{332 333 c.translate(x, y);334 this.background(c, x, y, w, h);335 c.setShadow(true);336};337338mxShapeGmdlSlider2.prototype.background = function(c, x, y, w, h)339{340 var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSlider2.prototype.cst.HANDLE_SIZE, '10'));341 var barPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSlider2.prototype.cst.BAR_POS, '40')) / 100;342343 barPos = Math.max(0, Math.min(1, barPos));344345 c.save();346 c.setStrokeColor('#bbbbbb');347 c.begin();348 c.moveTo(0, h * 0.5);349 c.lineTo(w, h * 0.5);350 c.fillAndStroke();351 352 c.restore();353 c.begin();354 c.moveTo(0, h * 0.5);355 c.lineTo(barPos * w, h * 0.5);356 c.fillAndStroke();357 358 c.begin();359 c.ellipse(barPos * w - hSize * 0.5, h * 0.5 - hSize * 0.5, hSize, hSize);360 c.fillAndStroke();361362};363364mxCellRenderer.registerShape(mxShapeGmdlSlider2.prototype.cst.SHAPE_SLIDER, mxShapeGmdlSlider2);365366mxShapeGmdlSlider2.prototype.constraints = null;367368Graph.handleFactory[mxShapeGmdlSlider2.prototype.cst.SHAPE_SLIDER] = function(state)369{370 var handles = [Graph.createHandle(state, ['barPos'], function(bounds)371 {372 var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4))));373374 return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2);375 }, function(bounds, pt)376 {377 this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100;378 })];379 380 return handles;381};382383//**********************************************************************************************************************************************************384//slider focused v2385//**********************************************************************************************************************************************************386/**387* Extends mxShape.388*/389function mxShapeGmdlSliderFocused(bounds, fill, stroke, strokewidth)390{391 mxShape.call(this);392 this.bounds = bounds;393 this.fill = fill;394 this.stroke = stroke;395 this.strokewidth = (strokewidth != null) ? strokewidth : 1;396};397398/**399* Extends mxShape.400*/401mxUtils.extend(mxShapeGmdlSliderFocused, mxShape);402403mxShapeGmdlSliderFocused.prototype.cst = {404 SHAPE_SLIDER_FOCUSED : 'mxgraph.gmdl.sliderFocused',405 BAR_POS : 'barPos',406 HANDLE_SIZE : 'handleSize'407};408409mxShapeGmdlSliderFocused.prototype.customProperties = [410 {name:'barPos', dispName:'Handle Position', type:'float', min:0, defVal:40},411 {name:'handleSize', dispName:'Handle Size', type:'float', min:0, defVal:10}412];413414/**415* Function: paintVertexShape416* 417* Paints the vertex shape.418*/419mxShapeGmdlSliderFocused.prototype.paintVertexShape = function(c, x, y, w, h)420{421 422 c.translate(x, y);423 this.background(c, x, y, w, h);424 c.setShadow(true);425};426427mxShapeGmdlSliderFocused.prototype.background = function(c, x, y, w, h)428{429 var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderFocused.prototype.cst.HANDLE_SIZE, '10'));430 var barPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderFocused.prototype.cst.BAR_POS, '40')) / 100;431 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#ffffff');432433 barPos = Math.max(0, Math.min(1, barPos));434435 c.save();436 c.setStrokeColor('#bbbbbb');437 c.begin();438 c.moveTo(0, h * 0.5);439 c.lineTo(w, h * 0.5);440 c.fillAndStroke();441442 c.restore();443 c.begin();444 c.moveTo(0, h * 0.5);445 c.lineTo(barPos * w, h * 0.5);446 c.fillAndStroke();447 448 c.begin();449 c.ellipse(barPos * w - hSize * 0.167, h * 0.5 - hSize * 0.167, hSize * 0.33, hSize * 0.33);450 c.fillAndStroke();451452 c.setFillColor(strokeColor);453 c.setAlpha(0.15);454 c.begin();455 c.ellipse(barPos * w - hSize * 0.5, h * 0.5 - hSize * 0.5, hSize, hSize);456 c.fill();457458};459460mxCellRenderer.registerShape(mxShapeGmdlSliderFocused.prototype.cst.SHAPE_SLIDER_FOCUSED, mxShapeGmdlSliderFocused);461462mxShapeGmdlSliderFocused.prototype.constraints = null;463464Graph.handleFactory[mxShapeGmdlSliderFocused.prototype.cst.SHAPE_SLIDER_FOCUSED] = function(state)465{466 var handles = [Graph.createHandle(state, ['barPos'], function(bounds)467 {468 var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4))));469470 return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2);471 }, function(bounds, pt)472 {473 this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100;474 })];475 476 return handles;477478};479480//**********************************************************************************************************************************************************481//slider disabled482//**********************************************************************************************************************************************************483/**484* Extends mxShape.485*/486function mxShapeGmdlSliderDisabled(bounds, fill, stroke, strokewidth)487{488 mxShape.call(this);489 this.bounds = bounds;490 this.fill = fill;491 this.stroke = stroke;492 this.strokewidth = (strokewidth != null) ? strokewidth : 1;493};494495/**496* Extends mxShape.497*/498mxUtils.extend(mxShapeGmdlSliderDisabled, mxShape);499500mxShapeGmdlSliderDisabled.prototype.cst = {501 SHAPE_SLIDER_DISABLED : 'mxgraph.gmdl.sliderDisabled',502 HANDLE_POSITION : 'hPos',503 HANDLE_SIZE : 'handleSize'504};505506mxShapeGmdlSliderDisabled.prototype.customProperties = [507 {name:'hPos', dispName:'Handle Position', type:'float', min:0, defVal:40},508 {name:'handleSize', dispName:'Handle Size', type:'float', min:0, defVal:10}509];510511/**512* Function: paintVertexShape513* 514* Paints the vertex shape.515*/516mxShapeGmdlSliderDisabled.prototype.paintVertexShape = function(c, x, y, w, h)517{518 c.translate(x, y);519 this.background(c, x, y, w, h);520 c.setShadow(true);521};522523mxShapeGmdlSliderDisabled.prototype.background = function(c, x, y, w, h)524{525 var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDisabled.prototype.cst.HANDLE_SIZE, '10'));526 var hPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDisabled.prototype.cst.HANDLE_POSITION, '50')) / 100;527 528 hPos = Math.max(hPos, 0);529 hPos = Math.min(hPos, 1);530531 c.ellipse(w * hPos - hSize * 0.5, (h - hSize) * 0.5, hSize, hSize);532 c.fillAndStroke();533 534 var endL = w * hPos - 7;535 var startR = w * hPos + 7;536 537 if (endL > 0)538 {539 c.begin();540 c.moveTo(0, h * 0.5);541 c.lineTo(endL, h * 0.5);542 c.stroke();543 }544 545 if (startR < w)546 {547 c.begin();548 c.moveTo(startR, h * 0.5);549 c.lineTo(w, h * 0.5);550 c.stroke();551 }552};553554mxCellRenderer.registerShape(mxShapeGmdlSliderDisabled.prototype.cst.SHAPE_SLIDER_DISABLED, mxShapeGmdlSliderDisabled);555556//**********************************************************************************************************************************************************557//slider disabled v2558//**********************************************************************************************************************************************************559/**560* Extends mxShape.561*/562function mxShapeGmdlSliderDisabled2(bounds, fill, stroke, strokewidth)563{564 mxShape.call(this);565 this.bounds = bounds;566 this.fill = fill;567 this.stroke = stroke;568 this.strokewidth = (strokewidth != null) ? strokewidth : 1;569};570571/**572* Extends mxShape.573*/574mxUtils.extend(mxShapeGmdlSliderDisabled2, mxShape);575576mxShapeGmdlSliderDisabled2.prototype.cst = {577 SHAPE_SLIDER_DISABLED : 'mxgraph.gmdl.sliderDisabled2',578 HANDLE_POSITION : 'hPos',579 HANDLE_SIZE : 'handleSize'580};581582mxShapeGmdlSliderDisabled2.prototype.customProperties = [583 {name:'hPos', dispName:'Handle Position', type:'float', min:0, defVal:'40'},584 {name:'handleSize', dispName:'Handle Size', type:'float', min:0, defVal:'10'}585];586587/**588* Function: paintVertexShape589* 590* Paints the vertex shape.591*/592mxShapeGmdlSliderDisabled2.prototype.paintVertexShape = function(c, x, y, w, h)593{594 c.translate(x, y);595 this.background(c, x, y, w, h);596 c.setShadow(true);597};598599mxShapeGmdlSliderDisabled2.prototype.background = function(c, x, y, w, h)600{601 var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDisabled2.prototype.cst.HANDLE_SIZE, '10'));602 var hPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDisabled2.prototype.cst.HANDLE_POSITION, '50')) / 100;603 604 hPos = Math.min(Math.max(hPos, 0), 1);605606 c.ellipse(w * hPos - hSize * 0.5, (h - hSize) * 0.5, hSize, hSize);607 c.fillAndStroke();608 609 var endL = w * hPos - 7;610 var startR = w * hPos + 7;611 612 if (endL > 0)613 {614 c.begin();615 c.moveTo(0, h * 0.5);616 c.lineTo(endL, h * 0.5);617 c.stroke();618 }619 620 if (startR < w)621 {622 c.begin();623 c.moveTo(startR, h * 0.5);624 c.lineTo(w, h * 0.5);625 c.stroke();626 }627};628629mxCellRenderer.registerShape(mxShapeGmdlSliderDisabled2.prototype.cst.SHAPE_SLIDER_DISABLED, mxShapeGmdlSliderDisabled2);630631mxShapeGmdlSlider2.prototype.constraints = null;632633Graph.handleFactory[mxShapeGmdlSliderDisabled2.prototype.cst.SHAPE_SLIDER_DISABLED] = function(state)634{635 var handles = [Graph.createHandle(state, ['hPos'], function(bounds)636 {637 var hPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'hPos', 0.4))));638639 return new mxPoint(bounds.x + hPos * bounds.width / 100, bounds.y + bounds.height / 2);640 }, function(bounds, pt)641 {642 this.state.style['hPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100;643 })];644 645 return handles;646};647648//**********************************************************************************************************************************************************649//slider discrete650//**********************************************************************************************************************************************************651/**652* Extends mxShape.653*/654function mxShapeGmdlSliderDiscrete(bounds, fill, stroke, strokewidth)655{656 mxShape.call(this);657 this.bounds = bounds;658 this.fill = fill;659 this.stroke = stroke;660 this.strokewidth = (strokewidth != null) ? strokewidth : 1;661};662663/**664* Extends mxShape.665*/666mxUtils.extend(mxShapeGmdlSliderDiscrete, mxShape);667668mxShapeGmdlSliderDiscrete.prototype.cst = {669 SHAPE_DISCRETE : 'mxgraph.gmdl.sliderDiscrete',670 BAR_POS : 'barPos',671 HANDLE_SIZE : 'handleSize'672};673674mxShapeGmdlSliderDiscrete.prototype.customProperties = [675 {name:'barPos', dispName:'Handle Position', type:'int', min:0, defVal:'40'},676 {name:'handleSize', dispName:'Handle Size', type:'float', min:0, defVal:'10'}677];678679/**680* Function: paintVertexShape681* 682* Paints the vertex shape.683*/684mxShapeGmdlSliderDiscrete.prototype.paintVertexShape = function(c, x, y, w, h)685{686 687 c.translate(x, y);688 this.background(c, x, y, w, h);689 c.setShadow(true);690};691692mxShapeGmdlSliderDiscrete.prototype.background = function(c, x, y, w, h)693{694 var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDiscrete.prototype.cst.HANDLE_SIZE, '10'));695 var barPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDiscrete.prototype.cst.BAR_POS, '40')) / 100;696 var fontSize = parseFloat(mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '12'));697 var fontColor = mxUtils.getValue(this.style, mxConstants.STYLE_FONTCOLOR, '#000000');698699 barPos = Math.max(0, Math.min(1, barPos));700701 c.save();702 c.setStrokeColor('#bbbbbb');703 c.begin();704 c.moveTo(0, h * 0.5 + 22.5);705 c.lineTo(w, h * 0.5 + 22.5);706 c.fillAndStroke();707 708 c.restore();709 c.begin();710 c.moveTo(0, h * 0.5 + 22.5);711 c.lineTo(barPos * w, h * 0.5 + 22.5);712 c.fillAndStroke();713 714 c.begin();715 c.moveTo(barPos * w, h * 0.5 + 15.5);716 c.lineTo(barPos * w - 10.5, h * 0.5 + 2.5);717 c.arcTo(15, 15, 0, 0, 1, barPos * w, h * 0.5 - 22.5);718 c.arcTo(15, 15, 0, 0, 1, barPos * w + 10.5, h * 0.5 + 2.5);719 c.close();720 c.fillAndStroke();721722 c.setFontSize(fontSize);723 c.setFontColor(fontColor);724 var p = Math.round(barPos * 100);725 c.text(barPos * w, h * 0.5 - 9, 0, 0, p.toString() , mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);726};727728mxCellRenderer.registerShape(mxShapeGmdlSliderDiscrete.prototype.cst.SHAPE_DISCRETE, mxShapeGmdlSliderDiscrete);729730mxShapeGmdlSliderDiscrete.prototype.constraints = null;731732Graph.handleFactory[mxShapeGmdlSliderDiscrete.prototype.cst.SHAPE_DISCRETE] = function(state)733{734 var handles = [Graph.createHandle(state, ['barPos'], function(bounds)735 {736 var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4))));737738 return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2 + 22.5);739 }, function(bounds, pt)740 {741 this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100;742 })];743 744 return handles;745};746747//**********************************************************************************************************************************************************748//slider discrete with dots749//**********************************************************************************************************************************************************750/**751* Extends mxShape.752*/753function mxShapeGmdlSliderDiscreteDots(bounds, fill, stroke, strokewidth)754{755 mxShape.call(this);756 this.bounds = bounds;757 this.fill = fill;758 this.stroke = stroke;759 this.strokewidth = (strokewidth != null) ? strokewidth : 1;760};761762/**763* Extends mxShape.764*/765mxUtils.extend(mxShapeGmdlSliderDiscreteDots, mxShape);766767mxShapeGmdlSliderDiscreteDots.prototype.cst = {768 SHAPE_DISCRETE_DOTS : 'mxgraph.gmdl.sliderDiscreteDots',769 BAR_POS : 'barPos',770 HANDLE_SIZE : 'handleSize'771};772773mxShapeGmdlSliderDiscreteDots.prototype.customProperties = [774 {name:'barPos', dispName:'Handle Position', type:'int', min:0, defVal:'40'},775 {name:'handleSize', dispName:'Handle Size', type:'float', min:0, defVal:'10'}776];777778/**779* Function: paintVertexShape780* 781* Paints the vertex shape.782*/783mxShapeGmdlSliderDiscreteDots.prototype.paintVertexShape = function(c, x, y, w, h)784{785 786 c.translate(x, y);787 this.background(c, x, y, w, h);788 c.setShadow(true);789};790791mxShapeGmdlSliderDiscreteDots.prototype.background = function(c, x, y, w, h)792{793 var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDiscreteDots.prototype.cst.HANDLE_SIZE, '10'));794 var barPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDiscreteDots.prototype.cst.BAR_POS, '40')) / 100;795 var fontSize = parseFloat(mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '12'));796 var fontColor = mxUtils.getValue(this.style, mxConstants.STYLE_FONTCOLOR, '#000000');797 var bright = mxUtils.getValue(this.style, 'bright', '1');798799 barPos = Math.max(0, Math.min(1, barPos));800801 c.save();802 c.setStrokeColor('#bebebe');803 c.begin();804 c.moveTo(0, h * 0.5 + 22.5);805 c.lineTo(w, h * 0.5 + 22.5);806 c.fillAndStroke();807 808 c.restore();809810 if (barPos <= 0.1)811 {812 c.setFillColor('#bebebe');813 }814 815 c.begin();816 c.moveTo(0, h * 0.5 + 22.5);817 c.lineTo(barPos * w, h * 0.5 + 22.5);818 c.fillAndStroke();819 820 c.begin();821 c.moveTo(barPos * w, h * 0.5 + 15.5);822 c.lineTo(barPos * w - 10.5, h * 0.5 + 2.5);823 c.arcTo(15, 15, 0, 0, 1, barPos * w, h * 0.5 - 22.5);824 c.arcTo(15, 15, 0, 0, 1, barPos * w + 10.5, h * 0.5 + 2.5);825 c.close();826 c.fill();827 828 if (bright == '1')829 {830 c.setFillColor('#000000');831 }832 else833 {834 c.setFillColor('#ffffff');835 }836 837 c.ellipse(-1.5, h * 0.5 + 21, 3, 3);838 c.fill();839 840 c.ellipse(w * 0.2 - 1.5, h * 0.5 + 21, 3, 3);841 c.fill();842 843 c.ellipse(w * 0.4 - 1.5, h * 0.5 + 21, 3, 3);844 c.fill();845 846 c.ellipse(w * 0.6 - 1.5, h * 0.5 + 21, 3, 3);847 c.fill();848 849 c.ellipse(w * 0.8 - 1.5, h * 0.5 + 21, 3, 3);850 c.fill();851 852 c.ellipse(w - 1.5, h * 0.5 + 21, 3, 3);853 c.fill();854 855 c.setFontSize(fontSize);856 c.setFontColor(fontColor);857 var p = Math.round(barPos * 100);858 c.text(barPos * w, h * 0.5 - 9, 0, 0, p.toString() , mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);859};860861mxCellRenderer.registerShape(mxShapeGmdlSliderDiscreteDots.prototype.cst.SHAPE_DISCRETE_DOTS, mxShapeGmdlSliderDiscreteDots);862863mxShapeGmdlSliderDiscreteDots.prototype.constraints = null;864865Graph.handleFactory[mxShapeGmdlSliderDiscreteDots.prototype.cst.SHAPE_DISCRETE_DOTS] = function(state)866{867 var handles = [Graph.createHandle(state, ['barPos'], function(bounds)868 {869 var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4))));870871 return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2 + 22.5);872 }, function(bounds, pt)873 {874 this.state.style['barPos'] = Math.round(0.05 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 0.05;875 })];876 877 return handles;878};879880//**********************************************************************************************************************************************************881//Progress Bar882//**********************************************************************************************************************************************************883/**884* Extends mxShape.885*/886function mxShapeGmdlProgressBar(bounds, fill, stroke, strokewidth)887{888 mxShape.call(this);889 this.bounds = bounds;890 this.fill = fill;891 this.stroke = stroke;892 this.strokewidth = (strokewidth != null) ? strokewidth : 1;893 this.dx1 = 0.8;894};895896/**897* Extends mxShape.898*/899mxUtils.extend(mxShapeGmdlProgressBar, mxShape);900901mxShapeGmdlProgressBar.prototype.cst = {902 PROGRESS_BAR : 'mxgraph.gmdl.progressBar'903};904905mxShapeGmdlProgressBar.prototype.customProperties = [906 {name:'dx1', dispName:'Handle Position', type:'int', min:0, defVal:0.8}907];908909/**910* Function: paintVertexShape911* 912* Paints the vertex shape.913*/914mxShapeGmdlProgressBar.prototype.paintVertexShape = function(c, x, y, w, h)915{916 var dx1 = w * Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx1', this.dx1))));917918 c.translate(x, y);919 920 c.save();921 c.setStrokeColor('#aaaaaa');922 c.begin();923 c.moveTo(0, h * 0.5);924 c.lineTo(w , h * 0.5);925 c.stroke();926 927 c.restore();928 c.setShadow(false);929 c.begin();930 c.moveTo(0, h * 0.5);931 c.lineTo(dx1, h * 0.5);932 c.stroke();933 934};935936mxCellRenderer.registerShape(mxShapeGmdlProgressBar.prototype.cst.PROGRESS_BAR, mxShapeGmdlProgressBar);937938mxShapeGmdlProgressBar.prototype.constraints = null;939940Graph.handleFactory[mxShapeGmdlProgressBar.prototype.cst.PROGRESS_BAR] = function(state)941{942 var handles = [Graph.createHandle(state, ['dx1'], function(bounds)943 {944 var dx1 = Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.state.style, 'dx1', this.dx1))));945946 return new mxPoint(bounds.x + dx1 * bounds.width, bounds.y + bounds.height / 2);947 }, function(bounds, pt)948 {949 this.state.style['dx1'] = Math.round(100 * Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width))) / 100;950 })];951952 var handle2 = Graph.createHandle(state, ['dx2'], function(bounds)953 {954 var dx2 = Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.state.style, 'dx2', this.dx1))));955956 return new mxPoint(bounds.x + dx2 * bounds.width, bounds.y + bounds.height / 2);957 }, function(bounds, pt)958 {959 this.state.style['dx2'] = Math.round(100 * Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width))) / 100;960 });961 962 handles.push(handle2);963964 return handles;965};966