1/**2 * Copyright (c) 2006-2014, JGraph Holdings Ltd3 */45//**********************************************************************************************************************************************************6//Rounded rectangle (adjustable rounding)7//**********************************************************************************************************************************************************8/**9* Extends mxShape.10*/11function mxShapeBootstrapRRect(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(mxShapeBootstrapRRect, mxShape);2425mxShapeBootstrapRRect.prototype.cst = {26 PACKAGE : 'mxgraph.bootstrap.rrect',27 R_SIZE : 'rSize'28};2930mxShapeBootstrapRRect.prototype.customProperties = [31 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10}32];3334/**35* Function: paintVertexShape36* 37* Paints the vertex shape.38*/39mxShapeBootstrapRRect.prototype.paintVertexShape = function(c, x, y, w, h)40{41 c.translate(x, y);4243 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeBootstrapRRect.prototype.cst.R_SIZE, '10'));44 c.roundrect(0, 0, w, h, rSize);45 c.fillAndStroke();46};4748mxCellRenderer.registerShape(mxShapeBootstrapRRect.prototype.cst.PACKAGE, mxShapeBootstrapRRect);4950//**********************************************************************************************************************************************************51//Top Button52//**********************************************************************************************************************************************************53/**54* Extends mxShape.55*/56function mxShapeBootstrapTopButton(bounds, fill, stroke, strokewidth)57{58 mxShape.call(this);59 this.bounds = bounds;60 this.fill = fill;61 this.stroke = stroke;62 this.strokewidth = (strokewidth != null) ? strokewidth : 1;63};6465/**66* Extends mxShape.67*/68mxUtils.extend(mxShapeBootstrapTopButton, mxShape);6970mxShapeBootstrapTopButton.prototype.cst = {71 TOP_BUTTON : 'mxgraph.bootstrap.topButton',72 R_SIZE : 'rSize'73};7475mxShapeBootstrapTopButton.prototype.customProperties = [76 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10}77];7879/**80* Function: paintVertexShape81* 82* Paints the vertex shape.83*/84mxShapeBootstrapTopButton.prototype.paintVertexShape = function(c, x, y, w, h)85{86 c.translate(x, y);8788 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeBootstrapTopButton.prototype.cst.R_SIZE, '10'));8990 c.begin();91 c.moveTo(0, rSize);92 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);93 c.lineTo(w - rSize, 0);94 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);95 c.lineTo(w, h);96 c.lineTo(0, h);97 c.close();98 c.fillAndStroke();99};100101mxCellRenderer.registerShape(mxShapeBootstrapTopButton.prototype.cst.TOP_BUTTON, mxShapeBootstrapTopButton);102103//**********************************************************************************************************************************************************104//Bottom Button105//**********************************************************************************************************************************************************106/**107* Extends mxShape.108*/109function mxShapeBootstrapBottomButton(bounds, fill, stroke, strokewidth)110{111 mxShape.call(this);112 this.bounds = bounds;113 this.fill = fill;114 this.stroke = stroke;115 this.strokewidth = (strokewidth != null) ? strokewidth : 1;116};117118/**119* Extends mxShape.120*/121mxUtils.extend(mxShapeBootstrapBottomButton, mxShape);122123mxShapeBootstrapBottomButton.prototype.cst = {124 BOTTOM_BUTTON : 'mxgraph.bootstrap.bottomButton',125 R_SIZE : 'rSize'126};127128mxShapeBootstrapBottomButton.prototype.customProperties = [129 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10}130];131132/**133* Function: paintVertexShape134* 135* Paints the vertex shape.136*/137mxShapeBootstrapBottomButton.prototype.paintVertexShape = function(c, x, y, w, h)138{139 c.translate(x, y);140141 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeBootstrapBottomButton.prototype.cst.R_SIZE, '10'));142143 c.begin();144 c.moveTo(0, 0);145 c.lineTo(w, 0);146 c.lineTo(w, h - rSize);147 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);148 c.lineTo(rSize, h);149 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);150 c.close();151 c.fillAndStroke();152};153154mxCellRenderer.registerShape(mxShapeBootstrapBottomButton.prototype.cst.BOTTOM_BUTTON, mxShapeBootstrapBottomButton);155156//**********************************************************************************************************************************************************157//Right Button158//**********************************************************************************************************************************************************159/**160* Extends mxShape.161*/162function mxShapeBootstrapRightButton(bounds, fill, stroke, strokewidth)163{164 mxShape.call(this);165 this.bounds = bounds;166 this.fill = fill;167 this.stroke = stroke;168 this.strokewidth = (strokewidth != null) ? strokewidth : 1;169};170171/**172* Extends mxShape.173*/174mxUtils.extend(mxShapeBootstrapRightButton, mxShape);175176mxShapeBootstrapRightButton.prototype.cst = {177 RIGHT_BUTTON : 'mxgraph.bootstrap.rightButton',178 R_SIZE : 'rSize'179};180181mxShapeBootstrapRightButton.prototype.customProperties = [182 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10}183];184185/**186* Function: paintVertexShape187* 188* Paints the vertex shape.189*/190mxShapeBootstrapRightButton.prototype.paintVertexShape = function(c, x, y, w, h)191{192 c.translate(x, y);193194 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeBootstrapRightButton.prototype.cst.R_SIZE, '10'));195196 c.begin();197 c.moveTo(0, 0);198 c.lineTo(w - rSize, 0);199 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);200 c.lineTo(w, h - rSize);201 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);202 c.lineTo(0, h);203 c.close();204 c.fillAndStroke();205};206207mxCellRenderer.registerShape(mxShapeBootstrapRightButton.prototype.cst.RIGHT_BUTTON, mxShapeBootstrapRightButton);208209//**********************************************************************************************************************************************************210//Left Button211//**********************************************************************************************************************************************************212/**213* Extends mxShape.214*/215function mxShapeBootstrapLeftButton(bounds, fill, stroke, strokewidth)216{217 mxShape.call(this);218 this.bounds = bounds;219 this.fill = fill;220 this.stroke = stroke;221 this.strokewidth = (strokewidth != null) ? strokewidth : 1;222};223224/**225* Extends mxShape.226*/227mxUtils.extend(mxShapeBootstrapLeftButton, mxShape);228229mxShapeBootstrapLeftButton.prototype.cst = {230 LEFT_BUTTON : 'mxgraph.bootstrap.leftButton',231 R_SIZE : 'rSize'232};233234mxShapeBootstrapLeftButton.prototype.customProperties = [235 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10}236];237238/**239* Function: paintVertexShape240* 241* Paints the vertex shape.242*/243mxShapeBootstrapLeftButton.prototype.paintVertexShape = function(c, x, y, w, h)244{245 c.translate(x, y);246247 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeBootstrapLeftButton.prototype.cst.R_SIZE, '10'));248249 c.begin();250 c.moveTo(w, 0);251 c.lineTo(w, h);252 c.lineTo(rSize, h);253 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);254 c.lineTo(0, rSize);255 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);256 c.close();257 c.fillAndStroke();258};259260mxCellRenderer.registerShape(mxShapeBootstrapLeftButton.prototype.cst.LEFT_BUTTON, mxShapeBootstrapLeftButton);261262//**********************************************************************************************************************************************************263//Left Button (Striped)264//**********************************************************************************************************************************************************265/**266* Extends mxShape.267*/268function mxShapeBootstrapLeftButtonStriped(bounds, fill, stroke, strokewidth)269{270 mxShape.call(this);271 this.bounds = bounds;272 this.fill = fill;273 this.stroke = stroke;274 this.strokewidth = (strokewidth != null) ? strokewidth : 1;275};276277/**278* Extends mxShape.279*/280mxUtils.extend(mxShapeBootstrapLeftButtonStriped, mxShape);281282mxShapeBootstrapLeftButtonStriped.prototype.cst = {283 LEFT_BUTTON_STRIPED : 'mxgraph.bootstrap.leftButtonStriped'284};285286287288/**289* Function: paintVertexShape290* 291* Paints the vertex shape.292*/293mxShapeBootstrapLeftButtonStriped.prototype.paintVertexShape = function(c, x, y, w, h)294{295 c.translate(x, y);296297 rSize = 5;298 c.begin();299 c.moveTo(w, 0);300 c.lineTo(w, h);301 c.lineTo(rSize, h);302 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);303 c.lineTo(0, rSize);304 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);305 c.close();306 c.fill();307308 309 var fillColor = '#ffffff';310 c.setAlpha('0.2');311 var stripeW = h * 0.5;312313 c.setFillColor(fillColor);314 c.begin();315 c.moveTo(0, h * 0.75);316 c.lineTo(0, h * 0.25);317 c.lineTo(h * 0.75, h);318 c.lineTo(h * 0.25, h);319 c.close();320 c.fill();321 322 var end = false;323 var startX = stripeW * 0.5;324 325 while (!end)326 {327 c.begin();328 c.moveTo(startX, 0);329 330 if (startX + stripeW >= w)331 {332 c.lineTo(w, 0);333 c.lineTo(w, w - startX);334 }335 else336 {337 c.lineTo(startX + stripeW, 0);338 339 if (startX + stripeW + h > w)340 {341 c.lineTo(w, w - startX - stripeW);342 343 if (w - startX > h)344 {345 c.lineTo(w, h);346 c.lineTo(startX + h, h);347 }348 else349 {350 c.lineTo(w, w - startX);351 }352 }353 else354 {355 c.lineTo(startX + stripeW + h, h);356 c.lineTo(startX + h, h);357 }358 }359360 c.close();361 c.fill();362 363 startX = startX + 2 * stripeW;364 365 if (startX > w)366 {367 end = true;368 }369 }370};371372mxCellRenderer.registerShape(mxShapeBootstrapLeftButtonStriped.prototype.cst.LEFT_BUTTON_STRIPED, mxShapeBootstrapLeftButtonStriped);373374//**********************************************************************************************************************************************************375//Rounded Button376//**********************************************************************************************************************************************************377/**378* Extends mxShape.379*/380function mxShapeBootstrapRoundedButton(bounds, fill, stroke, strokewidth)381{382 mxShape.call(this);383 this.bounds = bounds;384 this.fill = fill;385 this.stroke = stroke;386 this.strokewidth = (strokewidth != null) ? strokewidth : 1;387};388389/**390* Extends mxShape.391*/392mxUtils.extend(mxShapeBootstrapRoundedButton, mxShape);393394mxShapeBootstrapRoundedButton.prototype.cst = {395 ROUNDED_BUTTON : 'mxgraph.bootstrap.roundedButton'396};397398399400/**401* Function: paintVertexShape402* 403* Paints the vertex shape.404*/405mxShapeBootstrapRoundedButton.prototype.paintVertexShape = function(c, x, y, w, h)406{407 c.translate(x, y);408409 if (w > h)410 {411 var r = h * 0.5;412 413 c.begin();414 c.moveTo(w - r, 0);415 c.arcTo(r, r, 0, 0, 1, w - r, h);416 c.lineTo(r, h);417 c.arcTo(r, r, 0, 0, 1, r, 0);418 c.close();419 c.fillAndStroke();420 }421 else422 {423 var r = w * 0.5;424 425 c.begin();426 c.moveTo(0, h - r);427 c.arcTo(r, r, 0, 0, 0, w, h - r);428 c.lineTo(w, r);429 c.arcTo(r, r, 0, 0, 0, 0, r);430 c.close();431 c.fillAndStroke();432 }433};434435mxCellRenderer.registerShape(mxShapeBootstrapRoundedButton.prototype.cst.ROUNDED_BUTTON, mxShapeBootstrapRoundedButton);436437//**********************************************************************************************************************************************************438//Arrow439//**********************************************************************************************************************************************************440/**441* Extends mxShape.442*/443function mxShapeBootstrapArrow(bounds, fill, stroke, strokewidth)444{445 mxShape.call(this);446 this.bounds = bounds;447 this.fill = fill;448 this.stroke = stroke;449 this.strokewidth = (strokewidth != null) ? strokewidth : 1;450};451452/**453* Extends mxShape.454*/455mxUtils.extend(mxShapeBootstrapArrow, mxShape);456457mxShapeBootstrapArrow.prototype.cst = {458 ARROW : 'mxgraph.bootstrap.arrow'459};460461462463/**464* Function: paintVertexShape465* 466* Paints the vertex shape.467*/468mxShapeBootstrapArrow.prototype.paintVertexShape = function(c, x, y, w, h)469{470 c.translate(x, y);471472 c.begin();473 c.moveTo(0, h * 0.5);474 c.lineTo(w, h * 0.5);475 c.moveTo(w * 0.9, 0);476 c.lineTo(w, h * 0.5);477 c.lineTo(w * 0.9, h);478 c.stroke();479};480481mxCellRenderer.registerShape(mxShapeBootstrapArrow.prototype.cst.ARROW, mxShapeBootstrapArrow);482483//**********************************************************************************************************************************************************484//Tab Top485//**********************************************************************************************************************************************************486/**487* Extends mxShape.488*/489function mxShapeBootstrapTabTop(bounds, fill, stroke, strokewidth)490{491 mxShape.call(this);492 this.bounds = bounds;493 this.fill = fill;494 this.stroke = stroke;495 this.strokewidth = (strokewidth != null) ? strokewidth : 1;496};497498/**499* Extends mxShape.500*/501mxUtils.extend(mxShapeBootstrapTabTop, mxShape);502503mxShapeBootstrapTabTop.prototype.cst = {504 TAB_TOP : 'mxgraph.bootstrap.tabTop',505 R_SIZE : 'rSize'506};507508mxShapeBootstrapTabTop.prototype.customProperties = [509 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:5}510];511512/**513* Function: paintVertexShape514* 515* Paints the vertex shape.516*/517mxShapeBootstrapTabTop.prototype.paintVertexShape = function(c, x, y, w, h)518{519 c.translate(x, y);520 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeBootstrapTopButton.prototype.cst.R_SIZE, '10'));521 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');522 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');523524 c.setStrokeColor(fillColor);525 c.begin();526 c.moveTo(0, rSize);527 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);528 c.lineTo(w - rSize, 0);529 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);530 c.lineTo(w, h);531 c.lineTo(0, h);532 c.close();533 c.fillAndStroke();534535 c.setStrokeColor(strokeColor);536 c.begin();537 c.moveTo(0, h);538 c.lineTo(0, rSize);539 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);540 c.lineTo(w - rSize, 0);541 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);542 c.lineTo(w, h);543 c.stroke();544};545546mxCellRenderer.registerShape(mxShapeBootstrapTabTop.prototype.cst.TAB_TOP, mxShapeBootstrapTabTop);547548//**********************************************************************************************************************************************************549//Image550//**********************************************************************************************************************************************************551/**552* Extends mxShape.553*/554function mxShapeBootstrapImage(bounds, fill, stroke, strokewidth)555{556 mxShape.call(this);557 this.bounds = bounds;558 this.fill = fill;559 this.stroke = stroke;560 this.strokewidth = (strokewidth != null) ? strokewidth : 1;561};562563/**564* Extends mxShape.565*/566mxUtils.extend(mxShapeBootstrapImage, mxShape);567568mxShapeBootstrapImage.prototype.cst = {569 IMAGE : 'mxgraph.bootstrap.image',570 R_SIZE : 'rSize'571};572573mxShapeBootstrapImage.prototype.customProperties = [574 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:5}575];576577/**578* Function: paintVertexShape579* 580* Paints the vertex shape.581*/582mxShapeBootstrapImage.prototype.paintVertexShape = function(c, x, y, w, h)583{584 c.translate(x, y);585 var rSize = Math.max(0, parseInt(mxUtils.getValue(this.style, mxShapeBootstrapTopButton.prototype.cst.R_SIZE, '10')));586 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');587 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');588589 c.begin();590 c.moveTo(0, rSize);591 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);592 c.lineTo(w - rSize, 0);593 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);594 c.lineTo(w, h - rSize);595 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);596 c.lineTo(rSize, h);597 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);598 c.close();599 c.stroke();600601 var rsHalf = rSize * 0.5;602 c.translate(rsHalf, rsHalf);603 w = Math.max(0, w - rSize);604 h = Math.max(0, h - rSize);605 606 c.begin();607 c.moveTo(0, rsHalf);608 c.arcTo(rsHalf, rsHalf, 0, 0, 1, rsHalf, 0);609 c.lineTo(w - rsHalf, 0);610 c.arcTo(rsHalf, rsHalf, 0, 0, 1, w, rsHalf);611 c.lineTo(w, h - rsHalf);612 c.arcTo(rsHalf, rsHalf, 0, 0, 1, w - rsHalf, h);613 c.lineTo(rsHalf, h);614 c.arcTo(rsHalf, rsHalf, 0, 0, 1, 0, h - rsHalf);615 c.close();616 c.fill();617};618619mxCellRenderer.registerShape(mxShapeBootstrapImage.prototype.cst.IMAGE, mxShapeBootstrapImage);620621//**********************************************************************************************************************************************************622//Checkbox623//**********************************************************************************************************************************************************624/**625* Extends mxShape.626*/627function mxShapeBootstrapCheckbox(bounds, fill, stroke, strokewidth)628{629 mxShape.call(this);630 this.bounds = bounds;631 this.fill = fill;632 this.stroke = stroke;633 this.strokewidth = (strokewidth != null) ? strokewidth : 1;634};635636/**637* Extends mxShape.638*/639mxUtils.extend(mxShapeBootstrapCheckbox, mxShape);640641mxShapeBootstrapCheckbox.prototype.cst = {642 CHECKBOX : 'mxgraph.bootstrap.checkbox'643};644645646647/**648* Function: paintVertexShape649* 650* Paints the vertex shape.651*/652mxShapeBootstrapCheckbox.prototype.paintVertexShape = function(c, x, y, w, h)653{654 c.translate(x, y);655 var rSize = 3;656 c.roundrect(0, 0, w, h, rSize, rSize);657 c.fillAndStroke();658 659 c.setStrokeWidth('3');660 c.begin();661 c.moveTo(w * 0.8, h * 0.2);662 c.lineTo(w * 0.4, h * 0.8);663 c.lineTo(w * 0.25, h * 0.6);664 c.stroke();665};666667mxCellRenderer.registerShape(mxShapeBootstrapCheckbox.prototype.cst.CHECKBOX, mxShapeBootstrapCheckbox);668669//**********************************************************************************************************************************************************670//Checkbox v2671//**********************************************************************************************************************************************************672/**673* Extends mxShape.674*/675function mxShapeBootstrapCheckbox2(bounds, fill, stroke, strokewidth)676{677 mxShape.call(this);678 this.bounds = bounds;679 this.fill = fill;680 this.stroke = stroke;681 this.strokewidth = (strokewidth != null) ? strokewidth : 1;682};683684/**685* Extends mxShape.686*/687mxUtils.extend(mxShapeBootstrapCheckbox2, mxShape);688689mxShapeBootstrapCheckbox2.prototype.customProperties = [690 {name: 'checked', dispName: 'Checked', type: 'bool', defVal: false},691 {name: 'checkedFill', dispName: 'Checked Fill Color', type: 'color', defVal: '#ffffff'},692 {name: 'checkedStroke', dispName: 'Checked Stroke Color', type: 'color', defVal: '#000000'}693];694695mxShapeBootstrapCheckbox2.prototype.cst = {696 CHECKBOX2 : 'mxgraph.bootstrap.checkbox2'697};698699/**700* Function: paintVertexShape701* 702* Paints the vertex shape.703*/704mxShapeBootstrapCheckbox2.prototype.paintVertexShape = function(c, x, y, w, h)705{706 var isChecked = mxUtils.getValue(this.style, 'checked', false);707 var checkedFill = mxUtils.getValue(this.style, 'checkedFill', '#ffffff');708 var checkedStroke = mxUtils.getValue(this.style, 'checkedStroke', '#000000');709 710 c.translate(x, y);711 var rSize = 2;712 713 if (isChecked)714 {715 c.setFillColor(checkedFill);716 c.setStrokeColor(checkedStroke);717 718 c.roundrect(0, 0, w, h, rSize, rSize);719 c.fill();720 721 c.setStrokeWidth('2');722 c.begin();723 c.moveTo(w * 0.8, h * 0.2);724 c.lineTo(w * 0.4, h * 0.75);725 c.lineTo(w * 0.25, h * 0.6);726 c.stroke();727 }728 else729 {730 c.roundrect(0, 0, w, h, rSize, rSize);731 c.fillAndStroke();732 }733};734735mxCellRenderer.registerShape(mxShapeBootstrapCheckbox2.prototype.cst.CHECKBOX2, mxShapeBootstrapCheckbox2);736737//**********************************************************************************************************************************************************738//Radio Button739//**********************************************************************************************************************************************************740/**741* Extends mxShape.742*/743function mxShapeBootstrapRadioButton(bounds, fill, stroke, strokewidth)744{745 mxShape.call(this);746 this.bounds = bounds;747 this.fill = fill;748 this.stroke = stroke;749 this.strokewidth = (strokewidth != null) ? strokewidth : 1;750};751752/**753* Extends mxShape.754*/755mxUtils.extend(mxShapeBootstrapRadioButton, mxShape);756757mxShapeBootstrapRadioButton.prototype.cst = {758 RADIO_BUTTON : 'mxgraph.bootstrap.radioButton'759};760761762763/**764* Function: paintVertexShape765* 766* Paints the vertex shape.767*/768mxShapeBootstrapRadioButton.prototype.paintVertexShape = function(c, x, y, w, h)769{770 c.translate(x, y);771 772 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');773 c.ellipse(0, 0, w, h);774 c.fillAndStroke();775 776 c.setFillColor(strokeColor);777 c.ellipse(w * 0.25, h * 0.25, w * 0.5, h * 0.5);778 c.fill();779};780781mxCellRenderer.registerShape(mxShapeBootstrapRadioButton.prototype.cst.RADIO_BUTTON, mxShapeBootstrapRadioButton);782783//**********************************************************************************************************************************************************784//Radio Button v2785//**********************************************************************************************************************************************************786/**787* Extends mxShape.788*/789function mxShapeBootstrapRadioButton2(bounds, fill, stroke, strokewidth)790{791 mxShape.call(this);792 this.bounds = bounds;793 this.fill = fill;794 this.stroke = stroke;795 this.strokewidth = (strokewidth != null) ? strokewidth : 1;796};797798/**799* Extends mxShape.800*/801mxUtils.extend(mxShapeBootstrapRadioButton2, mxShape);802803mxShapeBootstrapRadioButton2.prototype.customProperties = [804 {name: 'checked', dispName: 'Checked', type: 'bool', defVal: false},805 {name: 'checkedFill', dispName: 'Checked Fill Color', type: 'color', defVal: '#ffffff'},806 {name: 'checkedStroke', dispName: 'Checked Stroke Color', type: 'color', defVal: '#000000'}807];808809mxShapeBootstrapRadioButton2.prototype.cst = {810 RADIO_BUTTON2 : 'mxgraph.bootstrap.radioButton2'811};812813/**814* Function: paintVertexShape815* 816* Paints the vertex shape.817*/818mxShapeBootstrapRadioButton2.prototype.paintVertexShape = function(c, x, y, w, h)819{820 var isChecked = mxUtils.getValue(this.style, 'checked', false);821 var checkedFill = mxUtils.getValue(this.style, 'checkedFill', '#ffffff');822 var checkedStroke = mxUtils.getValue(this.style, 'checkedStroke', '#000000');823 824 c.translate(x, y);825 826 if (isChecked)827 {828 c.setFillColor(checkedFill);829 c.setStrokeColor(checkedFill);830 831 c.ellipse(0, 0, w, h);832 c.fillAndStroke();833 834 c.setFillColor(checkedStroke);835 c.ellipse(w * 0.2, h * 0.2, w * 0.6, h * 0.6);836 c.fill();837 }838 else839 {840 c.ellipse(0, 0, w, h);841 c.fillAndStroke();842 }843};844845mxCellRenderer.registerShape(mxShapeBootstrapRadioButton2.prototype.cst.RADIO_BUTTON2, mxShapeBootstrapRadioButton2);846847//**********************************************************************************************************************************************************848//Horizontal Lines849//**********************************************************************************************************************************************************850/**851* Extends mxShape.852*/853function mxShapeBootstrapHorLines(bounds, fill, stroke, strokewidth)854{855 mxShape.call(this);856 this.bounds = bounds;857 this.fill = fill;858 this.stroke = stroke;859 this.strokewidth = (strokewidth != null) ? strokewidth : 1;860};861862/**863* Extends mxShape.864*/865mxUtils.extend(mxShapeBootstrapHorLines, mxShape);866867mxShapeBootstrapHorLines.prototype.cst = {868 HOR_LINES : 'mxgraph.bootstrap.horLines'869};870871872873/**874* Function: paintVertexShape875* 876* Paints the vertex shape.877*/878mxShapeBootstrapHorLines.prototype.paintVertexShape = function(c, x, y, w, h)879{880 c.translate(x, y);881882 c.rect(0, 0, w, h);883 c.fill();884 885 c.begin();886 c.moveTo(0, 0);887 c.lineTo(w, 0);888 c.moveTo(0, h);889 c.lineTo(w, h);890 c.stroke();891};892893mxCellRenderer.registerShape(mxShapeBootstrapHorLines.prototype.cst.HOR_LINES, mxShapeBootstrapHorLines);894895//**********************************************************************************************************************************************************896//User 2897//**********************************************************************************************************************************************************898/**899* Extends mxShape.900*/901function mxShapeBootstrapUserTwo(bounds, fill, stroke, strokewidth)902{903 mxShape.call(this);904 this.bounds = bounds;905 this.fill = fill;906 this.stroke = stroke;907 this.strokewidth = (strokewidth != null) ? strokewidth : 1;908};909910/**911* Extends mxShape.912*/913mxUtils.extend(mxShapeBootstrapUserTwo, mxShape);914915mxShapeBootstrapUserTwo.prototype.cst = {916 USER2 : 'mxgraph.bootstrap.user2'917};918919920921/**922* Function: paintVertexShape923* 924* Paints the vertex shape.925*/926mxShapeBootstrapUserTwo.prototype.paintVertexShape = function(c, x, y, w, h)927{928 c.translate(x, y);929930 c.begin();931 c.moveTo(0, h * 0.95);932 c.arcTo(w * 0.3, h * 0.3, 0, 0, 1, w * 0.02, h * 0.87);933 c.arcTo(w * 0.1, h * 0.1, 0, 0, 1, w * 0.08, h * 0.812);934 c.arcTo(w * 3, h * 3, 0, 0, 1, w * 0.29, h * 0.732);935 c.arcTo(w * 0.15, h * 0.15, 0, 0, 0, w * 0.385, h * 0.607);936 c.arcTo(w * 0.11, h * 0.11, 0, 0, 0, w * 0.355, h * 0.53);937 c.arcTo(w * 0.3, h * 0.3, 0, 0, 1, w * 0.305, h * 0.44);938 c.arcTo(w * 0.33, h * 0.38, 0, 0, 1, w * 0.312, h * 0.15);939 c.arcTo(w * 0.218, h * 0.218 , 0, 0, 1, w * 0.688, h * 0.15);940 c.arcTo(w * 0.33, h * 0.38, 0, 0, 1, w * 0.693, h * 0.44);941 c.arcTo(w * 0.25, h * 0.25, 0, 0, 1, w * 0.645, h * 0.53);942 c.arcTo(w * 0.1, h * 0.1, 0, 0, 0, w * 0.612, h * 0.6);943 c.arcTo(w * 0.15, h * 0.15, 0, 0, 0, w * 0.7, h * 0.726);944 c.arcTo(w * 3, h * 3, 0, 0, 1, w * 0.92, h * 0.812);945 c.arcTo(w * 0.1, h * 0.1, 0, 0, 1, w * 0.97, h * 0.865);946 c.arcTo(w * 0.2, h * 0.2, 0, 0, 1, w * 0.995, h * 0.952);947 c.close();948 c.fill();949};950951mxCellRenderer.registerShape(mxShapeBootstrapUserTwo.prototype.cst.USER2, mxShapeBootstrapUserTwo);952953//**********************************************************************************************************************************************************954//Rating955//**********************************************************************************************************************************************************956/**957* Extends mxShape.958*/959function mxShapeBootstrapRating(bounds, fill, stroke, strokewidth)960{961 mxShape.call(this);962 this.bounds = bounds;963 this.fill = fill;964 this.stroke = stroke;965 this.strokewidth = (strokewidth != null) ? strokewidth : 1;966};967968/**969* Extends mxShape.970*/971mxUtils.extend(mxShapeBootstrapRating, mxShape);972973mxShapeBootstrapRating.prototype.cst = {974 RATING : 'mxgraph.bootstrap.rating',975 RATING_STYLE : 'ratingStyle',976 RATING_SCALE : 'ratingScale',977 RATING_HEART : 'heart',978 RATING_STAR : 'star',979 EMPTY_FILL_COLOR : 'emptyFillColor',980 GRADE : 'grade'981};982983mxShapeBootstrapRating.prototype.customProperties = [984 {name: 'ratingStyle', dispName: 'Rating Style', type: 'enum', 985 enumList: [{val: 'heart', dispName: 'Heart'}, 986 {val: 'star', dispName: 'Star'}]987 },988 {name: 'ratingScale', dispName: 'Rating Scale', type: 'int', min:1, defVal:5}, 989 {name: 'emptyFillColor', dispName: 'Inactive Color', type: 'color', defVal:'none'},990 {name: 'grade', dispName: 'Grade', type: 'int', min:1, defVal:3} 991];992993/**994* Function: paintVertexShape995* 996* Paints the vertex shape.997*/998mxShapeBootstrapRating.prototype.paintVertexShape = function(c, x, y, w, h)999{1000 var ratingStyle = mxUtils.getValue(this.style, mxShapeBootstrapRating.prototype.cst.RATING_STYLE, mxShapeBootstrapRating.prototype.cst.RATING_STAR);1001 var grade = mxUtils.getValue(this.style, mxShapeBootstrapRating.prototype.cst.GRADE, '5');1002 var ratingScale = mxUtils.getValue(this.style, mxShapeBootstrapRating.prototype.cst.RATING_SCALE, '10');10031004 c.translate(x, y);10051006 if (ratingStyle === mxShapeBootstrapRating.prototype.cst.RATING_STAR)1007 {1008 for (var i = 0; i < grade; i++)1009 {1010 c.begin();1011 c.moveTo(i * h * 1.2, 0.33 * h);1012 c.lineTo(i * h * 1.2 + 0.364 * h, 0.33 * h);1013 c.lineTo(i * h * 1.2 + 0.475 * h, 0);1014 c.lineTo(i * h * 1.2 + 0.586 * h, 0.33 * h);1015 c.lineTo(i * h * 1.2 + 0.95 * h, 0.33 * h);1016 c.lineTo(i * h * 1.2 + 0.66 * h, 0.551 * h);1017 c.lineTo(i * h * 1.2 + 0.775 * h, 0.9 * h);1018 c.lineTo(i * h * 1.2 + 0.475 * h, 0.684 * h);1019 c.lineTo(i * h * 1.2 + 0.175 * h, 0.9 * h);1020 c.lineTo(i * h * 1.2 + 0.29 * h, 0.551 * h);1021 c.close();1022 c.fillAndStroke();1023 }1024 }1025 else if (ratingStyle === mxShapeBootstrapRating.prototype.cst.RATING_HEART)1026 {1027 for (var i = 0; i < grade; i++)1028 {1029 c.begin();1030 c.moveTo(i * h * 1.2 + h * 0.519, h * 0.947);1031 c.curveTo(i * h * 1.2 + h * 0.558, h * 0.908, 1032 i * h * 1.2 + h * 0.778, h * 0.682, 1033 i * h * 1.2 + h * 0.916, h * 0.54);1034 c.curveTo(i * h * 1.2 + h * 1.039, h * 0.414, 1035 i * h * 1.2 + h * 1.036, h * 0.229, 1036 i * h * 1.2 + h * 0.924, h * 0.115);1037 c.curveTo(i * h * 1.2 + h * 0.812, 0, 1038 i * h * 1.2 + h * 0.631, 0, 1039 i * h * 1.2 + h * 0.519, h * 0.115);1040 c.curveTo(i * h * 1.2 + h * 0.408, 0, 1041 i * h * 1.2 + h * 0.227, 0, 1042 i * h * 1.2 + h * 0.115, h * 0.115);1043 c.curveTo(i * h * 1.2 + h * 0.03, h * 0.229, 1044 i * h * 1.2, h * 0.414, 1045 i * h * 1.2 + h * 0.123, h * 0.54);1046 c.close();1047 c.fillAndStroke();1048 }1049 }10501051 var emptyFillColor = mxUtils.getValue(this.style, mxShapeBootstrapRating.prototype.cst.EMPTY_FILL_COLOR, '#ffffff');1052 c.setFillColor(emptyFillColor);10531054 if (ratingStyle === mxShapeBootstrapRating.prototype.cst.RATING_STAR)1055 {1056 for (var i = grade; i < ratingScale; i++)1057 {1058 c.begin();1059 c.moveTo(i * h * 1.2, 0.33 * h);1060 c.lineTo(i * h * 1.2 + 0.364 * h, 0.33 * h);1061 c.lineTo(i * h * 1.2 + 0.475 * h, 0);1062 c.lineTo(i * h * 1.2 + 0.586 * h, 0.33 * h);1063 c.lineTo(i * h * 1.2 + 0.95 * h, 0.33 * h);1064 c.lineTo(i * h * 1.2 + 0.66 * h, 0.551 * h);1065 c.lineTo(i * h * 1.2 + 0.775 * h, 0.9 * h);1066 c.lineTo(i * h * 1.2 + 0.475 * h, 0.684 * h);1067 c.lineTo(i * h * 1.2 + 0.175 * h, 0.9 * h);1068 c.lineTo(i * h * 1.2 + 0.29 * h, 0.551 * h);1069 c.close();1070 c.fillAndStroke();1071 }1072 }1073 else if (ratingStyle === mxShapeBootstrapRating.prototype.cst.RATING_HEART)1074 {1075 for (var i = grade; i < ratingScale; i++)1076 {1077 c.begin();1078 c.moveTo(i * h * 1.2 + h * 0.519, h * 0.947);1079 c.curveTo(i * h * 1.2 + h * 0.558, h * 0.908, 1080 i * h * 1.2 + h * 0.778, h * 0.682, 1081 i * h * 1.2 + h * 0.916, h * 0.54);1082 c.curveTo(i * h * 1.2 + h * 1.039, h * 0.414, 1083 i * h * 1.2 + h * 1.036, h * 0.229, 1084 i * h * 1.2 + h * 0.924, h * 0.115);1085 c.curveTo(i * h * 1.2 + h * 0.812, 0, 1086 i * h * 1.2 + h * 0.631, 0, 1087 i * h * 1.2 + h * 0.519, h * 0.115);1088 c.curveTo(i * h * 1.2 + h * 0.408, 0, 1089 i * h * 1.2 + h * 0.227, 0, 1090 i * h * 1.2 + h * 0.115, h * 0.115);1091 c.curveTo(i * h * 1.2 + h * 0.03, h * 0.229, 1092 i * h * 1.2, h * 0.414, 1093 i * h * 1.2 + h * 0.123, h * 0.54);1094 c.close();1095 c.fillAndStroke();1096 }1097 }1098};10991100mxCellRenderer.registerShape(mxShapeBootstrapRating.prototype.cst.RATING, mxShapeBootstrapRating);11011102//**********************************************************************************************************************************************************1103//Anchor (a dummy shape without visuals used for anchoring)1104//**********************************************************************************************************************************************************1105/**1106* Extends mxShape.1107*/1108function mxShapeBoostrapAnchor(bounds, fill, stroke, strokewidth)1109{1110 mxShape.call(this);1111 this.bounds = bounds;1112};11131114/**1115* Extends mxShape.1116*/1117mxUtils.extend(mxShapeBoostrapAnchor, mxShape);11181119mxShapeBoostrapAnchor.prototype.cst = {1120 ANCHOR : 'mxgraph.bootstrap.anchor'1121};112211231124/**1125* Function: paintVertexShape1126* 1127* Paints the vertex shape.1128*/1129mxShapeBoostrapAnchor.prototype.paintVertexShape = function(c, x, y, w, h)1130{1131};11321133mxCellRenderer.registerShape(mxShapeBoostrapAnchor.prototype.cst.ANCHOR, mxShapeBoostrapAnchor);11341135//**********************************************************************************************************************************************************1136//Range input1137//**********************************************************************************************************************************************************1138/**1139* Extends mxShape.1140*/1141function mxShapeBootstrapRangeInput(bounds, fill, stroke, strokewidth)1142{1143 mxShape.call(this);1144 this.bounds = bounds;1145 this.fill = fill;1146 this.stroke = stroke;1147 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1148 this.dx = 0.3;1149};11501151/**1152* Extends mxShape.1153*/1154mxUtils.extend(mxShapeBootstrapRangeInput, mxShape);11551156mxShapeBootstrapRangeInput.prototype.customProperties = [1157 {name: 'dx', dispName: 'Handle Position', type: 'float', min:0, max:1, defVal:0.3},1158 {name: 'rangeStyle', dispName: 'Range Style', type: 'enum', 1159 enumList: [{val: 'rect', dispName: 'Rectangle'}, 1160 {val: 'rounded', dispName: 'Rounded'}]1161 },1162 {name: 'handleStyle', dispName: 'Handle Style', type: 'enum', 1163 enumList: [{val: 'rect', dispName: 'Rectangle'}, 1164 {val: 'circle', dispName: 'Circle'}]1165 }1166];11671168mxShapeBootstrapRangeInput.prototype.cst = {1169 RANGE_INPUT : 'mxgraph.bootstrap.rangeInput'1170};11711172/**1173* Function: paintVertexShape1174* 1175* Paints the vertex shape.1176*/1177mxShapeBootstrapRangeInput.prototype.paintVertexShape = function(c, x, y, w, h)1178{1179 var dx = w * Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));1180 var gradientColor = mxUtils.getValue(this.style, 'gradientColor', 'none');1181 var fillColor = mxUtils.getValue(this.state.style, 'fillColor', '#ffffff');1182 var strokeColor = mxUtils.getValue(this.state.style, 'strokeColor', '#000000');1183 var gradientDir = mxUtils.getValue(this.state.style, 'gradientDirection', 'south');1184 var rangeStyle = mxUtils.getValue(this.state.style, 'rangeStyle', 'rounded');1185 var handleStyle = mxUtils.getValue(this.state.style, 'handleStyle', 'circle');1186 var barH = Math.min(h * 0.5, w * 0.5);1187 var r = barH * 0.5;1188 1189 c.translate(x, y);1190 1191 if (rangeStyle == 'rect')1192 {1193 var opacity = parseFloat(mxUtils.getValue(this.style, 'opacity', '100'));1194 var op1 = opacity;1195 var op2 = opacity;1196 1197 if (fillColor == 'none')1198 {1199 op1 = 0;1200 }1201 1202 if (gradientColor == 'none')1203 {1204 op2 = 0;1205 }1206 1207 c.setGradient(fillColor, fillColor, 0, 0, w, h, gradientDir, op1, op2); 1208 1209 c.rect(0, h * 0.5 - 2, w, 4);1210 c.fill();1211 }1212 else if (rangeStyle == 'rounded')1213 {1214 c.begin();1215 c.moveTo(0, h * 0.5);1216 c.arcTo(r, r, 0, 0, 1, r, h * 0.5 - r);1217 c.lineTo(w - r, h * 0.5 - r);1218 c.arcTo(r, r, 0, 0, 1, w, h * 0.5);1219 c.arcTo(r, r, 0, 0, 1, w - r, h * 0.5 + r);1220 c.lineTo(r, h * 0.5 + r);1221 c.arcTo(r, r, 0, 0, 1, 0, h * 0.5);1222 c.close();1223 c.fill();1224 }1225 1226 if (handleStyle == 'rect')1227 {1228 c.setGradient(fillColor, gradientColor, 0, 0, w, h, gradientDir, op1, op2); 1229 1230 var hw = h * 0.5;1231 c.rect(dx - hw * 0.5, 0, hw, h);1232 c.fillAndStroke();1233 1234 c.begin();1235 c.moveTo(dx - hw * 0.25, h * 0.3);1236 c.lineTo(dx + hw * 0.25, h * 0.3);1237 c.moveTo(dx - hw * 0.25, h * 0.5);1238 c.lineTo(dx + hw * 0.25, h * 0.5);1239 c.moveTo(dx - hw * 0.25, h * 0.7);1240 c.lineTo(dx + hw * 0.25, h * 0.7);1241 c.stroke();1242 }1243 else if (handleStyle == 'circle')1244 {1245 c.setFillColor(strokeColor);1246 c.ellipse(dx - barH, 0, 2 * barH, 2 * barH);1247 c.fill();1248 }1249};12501251mxCellRenderer.registerShape(mxShapeBootstrapRangeInput.prototype.cst.RANGE_INPUT, mxShapeBootstrapRangeInput);12521253mxShapeBootstrapRangeInput.prototype.constraints = null;12541255Graph.handleFactory[mxShapeBootstrapRangeInput.prototype.cst.RANGE_INPUT] = function(state)1256{1257 var handles = [Graph.createHandle(state, ['dx'], function(bounds)1258 {1259 var dx = Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));12601261 return new mxPoint(bounds.x + dx * bounds.width, bounds.y + bounds.height / 2);1262 }, function(bounds, pt)1263 {1264 this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width))) / 100;1265 })];12661267 return handles;1268}12691270//**********************************************************************************************************************************************************1271//Switch1272//**********************************************************************************************************************************************************1273/**1274* Extends mxShape.1275*/1276function mxShapeBootstrapSwitch(bounds, fill, stroke, strokewidth)1277{1278 mxShape.call(this);1279 this.bounds = bounds;1280 this.fill = fill;1281 this.stroke = stroke;1282 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1283};12841285/**1286* Extends mxShape.1287*/1288mxUtils.extend(mxShapeBootstrapSwitch, mxShape);12891290mxShapeBootstrapSwitch.prototype.customProperties = [1291 {name: 'buttonState', dispName: 'Button State', type: 'bool', defVal : true},1292 {name: 'onStrokeColor', dispName: 'On Stroke Color', type: 'color'},1293 {name: 'onFillColor', dispName: 'On Fill Color', type: 'color'},1294];12951296mxShapeBootstrapSwitch.prototype.cst = {1297 SHAPE_SWITCH : 'mxgraph.bootstrap.switch'1298};12991300/**1301* Function: paintVertexShape1302* 1303* Paints the vertex shape.1304*/1305mxShapeBootstrapSwitch.prototype.paintVertexShape = function(c, x, y, w, h)1306{1307 c.translate(x, y);1308 w = Math.max(w, 2 * h);1309 var state = mxUtils.getValue(this.style, 'buttonState', true);1310 this.background(c, x, y, w, h, state);1311 c.setShadow(false);1312 this.foreground(c, x, y, w, h, state);1313};13141315mxShapeBootstrapSwitch.prototype.background = function(c, x, y, w, h, state)1316{1317 if (state == true)1318 {1319 c.setStrokeColor(mxUtils.getValue(this.style, 'onStrokeColor', '#ffffff'));1320 c.setFillColor(mxUtils.getValue(this.style, 'onFillColor', '#0085FC'));1321 1322 c.roundrect(0, 0, w, h, h * 0.5, h * 0.5);1323 c.fill();1324 }1325 else1326 {1327 c.roundrect(0, 0, w, h, h * 0.5, h * 0.5);1328 c.fillAndStroke();1329 }13301331};13321333mxShapeBootstrapSwitch.prototype.foreground = function(c, x, y, w, h, state)1334{1335 var r = h * 0.8;1336 1337 if (state == true)1338 {1339 c.setFillColor(mxUtils.getValue(this.style, 'onStrokeColor', '#ffffff'));1340 c.ellipse(w - h * 0.9, h * 0.1, r, r);1341 c.fill();1342 }1343 else1344 {1345 c.setFillColor(mxUtils.getValue(this.style, 'strokeColor', '#000000'));1346 c.ellipse(h * 0.1, h * 0.1, r, r);1347 c.fill();1348 }1349};13501351mxCellRenderer.registerShape(mxShapeBootstrapSwitch.prototype.cst.SHAPE_SWITCH, mxShapeBootstrapSwitch);13521353//**********************************************************************************************************************************************************1354//X1355//**********************************************************************************************************************************************************1356/**1357* Extends mxShape.1358*/1359function mxShapeBootstrapX(bounds, fill, stroke, strokewidth)1360{1361 mxShape.call(this);1362 this.bounds = bounds;1363 this.fill = fill;1364 this.stroke = stroke;1365 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1366};13671368/**1369* Extends mxShape.1370*/1371mxUtils.extend(mxShapeBootstrapX, mxShape);13721373mxShapeBootstrapX.prototype.cst = {1374 SHAPE_X : 'mxgraph.bootstrap.x'1375};13761377/**1378* Function: paintVertexShape1379* 1380* Paints the vertex shape.1381*/1382mxShapeBootstrapX.prototype.paintVertexShape = function(c, x, y, w, h)1383{1384 c.translate(x, y);1385 1386 c.begin();1387 c.moveTo(0, 0);1388 c.lineTo(w, h);1389 c.moveTo(w, 0);1390 c.lineTo(0, h);1391 c.stroke();1392};13931394mxCellRenderer.registerShape(mxShapeBootstrapX.prototype.cst.SHAPE_X, mxShapeBootstrapX);13951396//**********************************************************************************************************************************************************1397//Popover1398//**********************************************************************************************************************************************************1399/**1400* Extends mxShape.1401*/1402function mxShapeInfographicPopover(bounds, fill, stroke, strokewidth)1403{1404 mxShape.call(this);1405 this.bounds = bounds;1406 this.fill = fill;1407 this.stroke = stroke;1408 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1409 this.dx = 0.5;1410 this.dy = 0.5;1411};14121413/**1414* Extends mxShape.1415*/1416mxUtils.extend(mxShapeInfographicPopover, mxActor);14171418mxShapeInfographicPopover.prototype.cst = {SHAPE_POPOVER : 'mxgraph.bootstrap.popover'};14191420mxShapeInfographicPopover.prototype.customProperties = [1421 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10},1422 {name:'dx', dispName:'Callout Position', min:0, defVal: 100},1423 {name:'dy', dispName:'Callout Size', min:0, defVal: 30}1424];14251426/**1427* Function: paintVertexShape1428* 1429* Paints the vertex shape.1430*/1431mxShapeInfographicPopover.prototype.paintVertexShape = function(c, x, y, w, h)1432{1433 c.translate(x, y);14341435 var r = parseInt(mxUtils.getValue(this.style, 'rSize', '10'));1436 var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));1437 var dy = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));14381439 var x1 = Math.max(dx - dy, 0);1440 var x2 = Math.min(dx + dy, w);1441 1442 c.begin();1443 c.moveTo(r, 0);1444 c.lineTo(w - r, 0);1445 c.arcTo(r, r, 0, 0, 1, w, r);1446 c.lineTo(w, h - dy - r);1447 c.arcTo(r, r, 0, 0, 1, w - r, h - dy);1448 c.lineTo(x2, h - dy);1449 c.lineTo(dx, h);1450 c.lineTo(x1, h - dy);1451 c.lineTo(r, h - dy);1452 c.arcTo(r, r, 0, 0, 1, 0, h - dy - r);1453 c.lineTo(0, r);1454 c.arcTo(r, r, 0, 0, 1, r, 0);1455 c.close();1456 c.fillAndStroke();1457};14581459mxCellRenderer.registerShape(mxShapeInfographicPopover.prototype.cst.SHAPE_POPOVER, mxShapeInfographicPopover);14601461mxShapeInfographicPopover.prototype.constraints = null;14621463Graph.handleFactory[mxShapeInfographicPopover.prototype.cst.SHAPE_POPOVER] = function(state)1464{1465 var handles = [Graph.createHandle(state, ['dx', 'dy'], function(bounds)1466 {1467 var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));1468 var dy = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));14691470 return new mxPoint(bounds.x + dx, bounds.y + bounds.height - dy);1471 }, function(bounds, pt)1472 {1473 this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 100;1474 this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height, bounds.y + bounds.height - pt.y))) / 100;1475 })];1476 1477 return handles;1478};14791480mxShapeInfographicPopover.prototype.getConstraints = function(style, w, h)1481{1482 var constr = [];1483 var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));1484 var dy = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));1485 var x1 = Math.max(dx - dy * 0.35, 0);1486 var x2 = Math.min(dx + dy * 0.35, w);14871488 constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false));1489 constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false));1490 constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));1491 constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false));1492 constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false));1493 constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, (h - dy) * 0.5));1494 constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h - dy));1495 constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false, null, 0, h - dy));1496 constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false, null, 0, h - dy));1497 constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx, h));1498 constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h - dy));14991500 return (constr);1501};1502