1/**2 * Copyright (c) 2006-2013, JGraph Holdings Ltd3 */45var mxIOS7C =6{7 MAIN_TEXT : 'mainText',8 SUB_TEXT : 'subText',9 TEXT_COLOR : 'textColor',10 TEXT_SIZE : 'textSize',11 BAR_POS : 'barPos',12 BUTTON_TEXT : 'buttonText',13 BUTTON_STATE : 'buttonState',14 SELECTED : '+', //has to be one character long15 STATE_ON : 'on',16 STATE_OFF : 'off',17 GRID_SIZE : 'gridSize',18 19 SHAPE_IOS7_APP_BAR : 'mxgraph.ios7ui.appBar',20 SHAPE_IOS7_ON_OFF_BUTTON : 'mxgraph.ios7ui.onOffButton',21 SHAPE_IOS7_SLIDER : 'mxgraph.ios7ui.slider',22 SHAPE_IOS7_DOWNLOAD_BAR : 'mxgraph.ios7ui.downloadBar',23 SHAPE_IOS7_ICON : 'mxgraph.ios7ui.icon',24 SHAPE_IOS7_HOR_BUTTON_BAR : 'mxgraph.ios7ui.horButtonBar',25 SHAPE_IOS7_PAGE_CONTROL : 'mxgraph.ios7ui.pageControl',26 SHAPE_IOS7_EXPAND : 'mxgraph.ios7ui.expand',27 SHAPE_IOS7_ICON_GRID : 'mxgraph.ios7ui.iconGrid',28 SHAPE_IOS7_PHONE : 'mxgraph.ios7ui.phone',29 SHAPE_IOS7_SEARCH_BOX : 'mxgraph.ios7ui.searchBox',30 SHAPE_IOS7_URL : 'mxgraph.ios7ui.url',31 SHAPE_IOS7_ACTION_DIALOG : 'mxgraph.ios7ui.actionDialog',32 33 STYLE_FILLCOLOR2 : 'fillColor2',34 STYLE_FILLCOLOR3 : 'fillColor3',35 STYLE_TEXTCOLOR : 'textColor',36 STYLE_TEXTCOLOR2 : 'textColor2',37 STYLE_STROKECOLOR2 : 'strokeColor2',38 STYLE_STROKECOLOR3 : 'strokeColor3',39 STYLE_TEXTSIZE : 'textSize'40};4142//**********************************************************************************************************************************************************43//iOS7 Application Bar44//**********************************************************************************************************************************************************45/**46 * Extends mxShape.47 */48function mxShapeIOS7AppBar(bounds, fill, stroke, strokewidth)49{50 mxShape.call(this);51 this.bounds = bounds;52 this.fill = fill;53 this.stroke = stroke;54 this.strokewidth = (strokewidth != null) ? strokewidth : 1;55};5657/**58 * Extends mxShape.59 */60mxUtils.extend(mxShapeIOS7AppBar, mxShape);6162mxShapeIOS7AppBar.prototype.customProperties = [63 {name: 'fillColor2', dispName: 'Fill Color 2', type: 'color', primary: true}64];6566/**67 * Function: paintVertexShape68 * 69 * Paints the vertex shape.70 */71mxShapeIOS7AppBar.prototype.paintVertexShape = function(c, x, y, w, h)72{73 c.translate(x, y);74 this.background(c, x, y, w, h);75 c.setShadow(false);76 this.foreground(c, x, y, w, h);77};7879mxShapeIOS7AppBar.prototype.background = function(c, x, y, w, h)80{81 c.rect(0, 0, w, h);82 c.fill();83};8485mxShapeIOS7AppBar.prototype.foreground = function(c, x, y, w, h)86{87 c.setFillColor(mxUtils.getValue(this.style, mxIOS7C.STYLE_FILLCOLOR2, '#222222'));8889 c.ellipse(5, h * 0.5 - 1.5, 3, 3);90 c.fill();91 c.ellipse(9, h * 0.5 - 1.5, 3, 3);92 c.fill();93 c.ellipse(13, h * 0.5 - 1.5, 3, 3);94 c.fill();95 c.ellipse(17, h * 0.5 - 1.5, 3, 3);96 c.fill();97 c.ellipse(21, h * 0.5 - 1.5, 3, 3);98 c.fill();99 100 c.ellipse(54, h * 0.5 + 2, 2, 2);101 c.fillAndStroke();102 103 c.setStrokeWidth(2);104 c.begin();105 c.moveTo(52, h * 0.5 + 1);106 c.arcTo(3.5, 3.5, 0, 0, 1, 58, h * 0.5 + 1);107 c.stroke();108 109 c.begin();110 c.moveTo(50, h * 0.5 - 1);111 c.arcTo(6, 6, 0, 0, 1, 60, h * 0.5 - 1);112 c.stroke();113 114 c.begin();115 c.moveTo(w - 19, h * 0.5 - 2);116 c.lineTo(w - 6, h * 0.5 - 2);117 c.lineTo(w - 6, h * 0.5 + 2);118 c.lineTo(w - 19, h * 0.5 + 2);119 c.close();120 c.fill();121122 c.setStrokeWidth(1);123 c.begin();124 c.moveTo(w - 44, h * 0.5 - 2.5);125 c.lineTo(w - 36, h * 0.5 + 2.5);126 c.lineTo(w - 40, h * 0.5 + 5);127 c.lineTo(w - 40, h * 0.5 - 5);128 c.lineTo(w - 36, h * 0.5 - 2.5);129 c.lineTo(w - 44, h * 0.5 + 2.5);130 c.stroke();131 132 c.begin();133 c.moveTo(w - 20, h * 0.5 - 3);134 c.lineTo(w - 5, h * 0.5 - 3);135 c.lineTo(w - 5, h * 0.5 - 1);136 c.lineTo(w - 3.5, h * 0.5 - 1);137 c.lineTo(w - 3.5, h * 0.5 + 1);138 c.lineTo(w - 5, h * 0.5 + 1);139 c.lineTo(w - 5, h * 0.5 + 3);140 c.lineTo(w - 20, h * 0.5 + 3);141 c.close();142 c.stroke();143};144145mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_APP_BAR, mxShapeIOS7AppBar);146147//**********************************************************************************************************************************************************148//On-Off Button149//**********************************************************************************************************************************************************150/**151* Extends mxShape.152*/153function mxShapeIOS7OnOffButton(bounds, fill, stroke, strokewidth)154{155 mxShape.call(this);156 this.bounds = bounds;157 this.fill = fill;158 this.stroke = stroke;159 this.strokewidth = (strokewidth != null) ? strokewidth : 1;160};161162/**163* Extends mxShape.164*/165mxUtils.extend(mxShapeIOS7OnOffButton, mxShape);166167mxShapeIOS7OnOffButton.prototype.customProperties = [168 {name: 'buttonState', dispName: 'Button State', type: 'enum',169 enumList: [{val: 'on', dispName: 'On'},170 {val: 'off', dispName: 'Off'}]171 },172 {name: 'strokeColor2', dispName: 'Stroke Color 2', type: 'color', primary:true},173 {name: 'fillColor2', dispName: 'Fill Color 2', type: 'color', primary:true},174];175176/**177* Function: paintVertexShape178* 179* Paints the vertex shape.180*/181mxShapeIOS7OnOffButton.prototype.paintVertexShape = function(c, x, y, w, h)182{183 c.translate(x, y);184 w = Math.max(w, 2 * h);185 var state = mxUtils.getValue(this.style, mxIOS7C.BUTTON_STATE, mxIOS7C.STATE_ON);186 this.background(c, x, y, w, h, state);187 c.setShadow(false);188 this.foreground(c, x, y, w, h, state);189};190191mxShapeIOS7OnOffButton.prototype.background = function(c, x, y, w, h, state)192{193 if (state === mxIOS7C.STATE_ON)194 {195 c.roundrect(0, 0, w, h, h * 0.5, h * 0.5);196 c.fillAndStroke();197 }198 else if (state === mxIOS7C.STATE_OFF)199 {200 c.setStrokeColor(mxUtils.getValue(this.style, mxIOS7C.STYLE_STROKECOLOR2, '#aaaaaa'));201 c.setFillColor(mxUtils.getValue(this.style, mxIOS7C.STYLE_FILLCOLOR2, '#ffffff'));202 c.roundrect(0, 0, w, h, h * 0.5, h * 0.5);203 c.fillAndStroke();204 }205206};207208mxShapeIOS7OnOffButton.prototype.foreground = function(c, x, y, w, h, state)209{210 c.setFillColor('#ffffff');211212 if (state === mxIOS7C.STATE_ON)213 {214 c.ellipse(w - h + 1, 1, h - 2, h - 2);215 c.fill();216 }217 else218 {219 c.ellipse(0, 0, h, h);220 c.stroke();221 }222};223224mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_ON_OFF_BUTTON, mxShapeIOS7OnOffButton);225226//**********************************************************************************************************************************************************227//Slider228//**********************************************************************************************************************************************************229/**230* Extends mxShape.231*/232function mxShapeIOS7Slider(bounds, fill, stroke, strokewidth)233{234 mxShape.call(this);235 this.bounds = bounds;236 this.fill = fill;237 this.stroke = stroke;238 this.strokewidth = (strokewidth != null) ? strokewidth : 1;239 this.barPos = 80;240};241242/**243* Extends mxShape.244*/245mxUtils.extend(mxShapeIOS7Slider, mxShape);246247248249/**250* Function: paintVertexShape251* 252* Paints the vertex shape.253*/254mxShapeIOS7Slider.prototype.paintVertexShape = function(c, x, y, w, h)255{256 c.translate(x, y);257 c.setShadow(false);258259 this.foreground(c, w, h);260};261262mxShapeIOS7Slider.prototype.foreground = function(c, w, h)263{264 c.setStrokeWidth(2);265 266 c.begin();267 c.moveTo(0, h * 0.5);268 c.lineTo(w, h * 0.5);269 c.stroke();270271 var barPos = mxUtils.getValue(this.style, mxIOS7C.BAR_POS, '80');272 barPos = Math.min(barPos, 100);273 barPos = Math.max(barPos, 0);274 var deadzone = 0; 275 var virRange = w - 2 * deadzone;276 var truePos = deadzone + virRange * barPos / 100;277278 c.setStrokeColor(mxUtils.getValue(this.style, mxIOS7C.STYLE_STROKECOLOR2, '#a0a0a0'));279 c.ellipse(truePos - 5, h * 0.5 - 5, 10, 10);280 c.fillAndStroke();281};282283mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_SLIDER, mxShapeIOS7Slider);284285Graph.handleFactory[mxIOS7C.SHAPE_IOS7_SLIDER] = function(state)286{287 var handles = [Graph.createHandle(state, ['barPos'], function(bounds)288 {289 var barPos = Math.max(0, Math.min(100, parseFloat(mxUtils.getValue(this.state.style, 'barPos', this.barPos))));290291 return new mxPoint(bounds.x + barPos / 100 * bounds.width, bounds.y + bounds.height / 2);292 }, function(bounds, pt)293 {294 this.state.style['barPos'] = Math.round(1000 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 1000;295 })];296297 return handles;298}299300//**********************************************************************************************************************************************************301//Download Bar302//**********************************************************************************************************************************************************303/**304* Extends mxShape.305*/306function mxShapeIOS7DownloadBar(bounds, fill, stroke, strokewidth)307{308 mxShape.call(this);309 this.bounds = bounds;310 this.fill = fill;311 this.stroke = stroke;312 this.strokewidth = (strokewidth != null) ? strokewidth : 1;313 this.barPos = 80;314};315316/**317* Extends mxShape.318*/319mxUtils.extend(mxShapeIOS7DownloadBar, mxShape);320321mxShapeIOS7DownloadBar.prototype.customProperties = [322 {name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, max:1, defVal:30},323 {name: 'strokeColor2', dispName: 'Stroke Color 2', type: 'color'}324];325326/**327* Function: paintVertexShape328* 329* Paints the vertex shape.330*/331mxShapeIOS7DownloadBar.prototype.paintVertexShape = function(c, x, y, w, h)332{333 c.translate(x, y);334335 this.foreground(c, w, h);336};337338mxShapeIOS7DownloadBar.prototype.foreground = function(c, w, h)339{340 var fieldText = mxUtils.getValue(this.style, mxIOS7C.BUTTON_TEXT, '');341 c.setFontStyle(mxConstants.FONT_BOLD);342 c.text(w * 0.5, h * 0.2, 0, 0, fieldText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);343344 var barPos = mxUtils.getValue(this.style, mxIOS7C.BAR_POS, '80');345 barPos = Math.min(barPos, 100);346 barPos = Math.max(barPos, 0);347 var truePos = w * barPos / 100;348349 c.setStrokeWidth(2);350 c.setStrokeColor(mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, ''));351 c.begin();352 c.moveTo(0, h * 0.5);353 c.lineTo(w, h * 0.5);354 c.stroke();355356 c.setStrokeColor(mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, ''));357 c.begin();358 c.moveTo(0, h * 0.5);359 c.lineTo(truePos, h * 0.5);360 c.stroke();361};362363mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_DOWNLOAD_BAR, mxShapeIOS7DownloadBar);364365Graph.handleFactory[mxIOS7C.SHAPE_IOS7_DOWNLOAD_BAR] = function(state)366{367 var handles = [Graph.createHandle(state, ['barPos'], function(bounds)368 {369 var barPos = Math.max(0, Math.min(100, parseFloat(mxUtils.getValue(this.state.style, 'barPos', this.barPos))));370371 return new mxPoint(bounds.x + barPos / 100 * bounds.width, bounds.y + bounds.height / 2);372 }, function(bounds, pt)373 {374 this.state.style['barPos'] = Math.round(1000 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 1000;375 })];376377 return handles;378}379380//**********************************************************************************************************************************************************381//Icon382//**********************************************************************************************************************************************************383/**384* Extends mxShape.385*/386function mxShapeIOS7Icon(bounds, fill, stroke, strokewidth)387{388 mxShape.call(this);389 this.bounds = bounds;390 this.fill = fill;391 this.stroke = stroke;392 this.strokewidth = (strokewidth != null) ? strokewidth : 1;393};394395/**396* Extends mxShape.397*/398mxUtils.extend(mxShapeIOS7Icon, mxShape);399400/**401* Function: paintVertexShape402* 403* Paints the vertex shape.404*/405mxShapeIOS7Icon.prototype.paintVertexShape = function(c, x, y, w, h)406{407 c.translate(x, y);408409 this.foreground(c, w, h);410};411412mxShapeIOS7Icon.prototype.foreground = function(c, w, h)413{414 c.setGradient('#00D0F0', '#0080F0', w * 0.325, 0, w * 0.675, h * 0.5, mxConstants.DIRECTION_SOUTH, 1, 1);415 c.roundrect(0, 0, w, h, w * 0.1, h * 0.1);416 c.fill();417 418 var fieldText = mxUtils.getValue(this.style, mxIOS7C.BUTTON_TEXT, '');419 c.setFontColor('#ffffff');420 c.setFontStyle(mxConstants.FONT_BOLD);421 c.setFontSize(8);422 c.text(w * 0.5, h * 0.5, 0, 0, fieldText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);423};424425mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_ICON, mxShapeIOS7Icon);426427//**********************************************************************************************************************************************************428//Horizontal Button Bar429//**********************************************************************************************************************************************************430/**431* Extends mxShape.432*/433function mxShapeIOS7horButtonBar(bounds, fill, stroke, strokewidth)434{435 mxShape.call(this);436 this.bounds = bounds;437 this.fill = fill;438 this.stroke = stroke;439 this.strokewidth = (strokewidth != null) ? strokewidth : 1;440};441442/**443* Extends mxShape.444*/445mxUtils.extend(mxShapeIOS7horButtonBar, mxShape);446447/**448* Function: paintVertexShape449* 450* Paints the vertex shape.451*/452mxShapeIOS7horButtonBar.prototype.paintVertexShape = function(c, x, y, w, h)453{454 var textStrings = mxUtils.getValue(this.style, mxIOS7C.BUTTON_TEXT, '+Button 1, Button 2, Button 3').toString().split(',');455 var fontColor = mxUtils.getValue(this.style, mxIOS7C.STYLE_TEXTCOLOR, '#666666');456 var selectedFontColor = mxUtils.getValue(this.style, mxIOS7C.STYLE_TEXTCOLOR2, '#ffffff');457 var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8.5').toString();458 var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');459 var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');460 var selectedFillColor = mxUtils.getValue(this.style, mxIOS7C.STYLE_FILLCOLOR2, '#008cff');461 var buttonNum = textStrings.length;462 var buttonWidths = new Array(buttonNum);463 var buttonTotalWidth = 0;464 var selectedButton = -1;465 var rSize = 2.5; //rounding size466 var labelOffset = 2.5;467468 for (var i = 0; i < buttonNum; i++)469 {470 var buttonText = textStrings[i];471472 if(buttonText.charAt(0) === mxIOS7C.SELECTED)473 {474 buttonText = textStrings[i].substring(1);475 selectedButton = i;476 }477478 buttonWidths[i] = mxUtils.getSizeForString(buttonText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;479 buttonTotalWidth += buttonWidths[i];480 }481482 var trueH = Math.max(h, fontSize * 1.5, 10);483 var minW = 2 * labelOffset * buttonNum + buttonTotalWidth;484 var trueW = Math.max(w, minW);485486 c.translate(x, y);487 this.background(c, trueW, trueH, rSize, buttonNum, buttonWidths, labelOffset, minW, frameColor, bgColor, selectedFillColor, selectedButton);488 c.setShadow(false);489490 var currWidth = 0;491492 for (var i = 0; i < buttonNum; i++)493 {494 if (i === selectedButton)495 {496 c.setFontColor(selectedFontColor);497 }498 else499 {500 c.setFontColor(fontColor);501 }502503 currWidth = currWidth + labelOffset;504 this.buttonText(c, currWidth, trueH, textStrings[i], buttonWidths[i], fontSize, minW, trueW);505 currWidth = currWidth + buttonWidths[i] + labelOffset;506 }507};508509mxShapeIOS7horButtonBar.prototype.background = function(c, w, h, rSize, buttonNum, buttonWidths, labelOffset, minW, frameColor, bgColor, selectedFillColor, selectedButton)510{511 c.begin();512513 //draw the frame514 c.setStrokeColor(frameColor);515 c.setFillColor(bgColor);516 c.moveTo(0, rSize);517 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);518 c.lineTo(w - rSize, 0);519 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);520 c.lineTo(w, h - rSize);521 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);522 c.lineTo(rSize, h);523 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);524 c.close();525 c.fillAndStroke();526527 //draw the button separators528 c.setStrokeColor(frameColor);529 c.begin();530 for (var i = 1; i < buttonNum; i++)531 {532 if (i !== selectedButton && i !== (selectedButton + 1))533 {534 var currWidth = 0;535536 for (var j = 0; j < i; j++)537 {538 currWidth += buttonWidths[j] + 2 * labelOffset;539 }540541 currWidth = currWidth * w / minW;542 c.moveTo(currWidth, 0);543 c.lineTo(currWidth, h);544 }545 }546547 c.stroke();548549 //draw the selected button550 var buttonLeft = 0;551 c.setStrokeColor(mxConstants.NONE);552553 for (var i = 0; i < selectedButton; i++)554 {555 buttonLeft += buttonWidths[i] + 2 * labelOffset;556 }557558 buttonLeft = buttonLeft * w / minW;559 var buttonRight = (buttonWidths[selectedButton] + 2 * labelOffset) * w / minW;560 buttonRight += buttonLeft;561 c.setFillColor('#0080F0');562563 if (selectedButton === 0)564 {565 c.begin();566 // we draw a path for the first button567 c.moveTo(0, rSize);568 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);569 c.lineTo(buttonRight, 0);570 c.lineTo(buttonRight, h);571 c.lineTo(rSize, h);572 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);573 c.close();574 c.fill();575 }576 else if (selectedButton === buttonNum - 1)577 {578 c.begin();579 // we draw a path for the last button580 c.moveTo(buttonLeft, 0);581 c.lineTo(buttonRight - rSize, 0);582 c.arcTo(rSize, rSize, 0, 0, 1, buttonRight, rSize);583 c.lineTo(buttonRight, h - rSize);584 c.arcTo(rSize, rSize, 0, 0, 1, buttonRight - rSize, h);585 c.lineTo(buttonLeft, h);586 c.close();587 c.fill();588 }589 else if (selectedButton !== -1)590 {591 c.begin();592 // we draw a path rectangle for one of the buttons in the middle593 c.moveTo(buttonLeft, 0);594 c.lineTo(buttonRight, 0);595 c.lineTo(buttonRight, h);596 c.lineTo(buttonLeft, h);597 c.close();598 c.fill();599 }600601 //draw the frame again, to achieve a nicer effect602 c.setStrokeColor(frameColor);603 c.setFillColor(bgColor);604 c.begin();605 c.moveTo(0, rSize);606 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);607 c.lineTo(w - rSize, 0);608 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);609 c.lineTo(w, h - rSize);610 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);611 c.lineTo(rSize, h);612 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);613 c.close();614 c.stroke();615};616617mxShapeIOS7horButtonBar.prototype.buttonText = function(c, w, h, textString, buttonWidth, fontSize, minW, trueW)618{619 if(textString.charAt(0) === mxIOS7C.SELECTED)620 {621 textString = textString.substring(1);622 }623624 c.begin();625 c.setFontSize(fontSize);626 c.text((w + buttonWidth * 0.5) * trueW / minW, h * 0.5, 0, 0, textString, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);627};628629mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_HOR_BUTTON_BAR, mxShapeIOS7horButtonBar);630631//**********************************************************************************************************************************************************632//Page Control633//**********************************************************************************************************************************************************634/**635* Extends mxShape.636*/637function mxShapeIOS7pageControl(bounds, fill, stroke, strokewidth)638{639 mxShape.call(this);640 this.bounds = bounds;641 this.fill = fill;642 this.stroke = stroke;643 this.strokewidth = (strokewidth != null) ? strokewidth : 1;644};645646/**647* Extends mxShape.648*/649mxUtils.extend(mxShapeIOS7pageControl, mxShape);650651/**652* Function: paintVertexShape653* 654* Paints the vertex shape.655*/656mxShapeIOS7pageControl.prototype.paintVertexShape = function(c, x, y, w, h)657{658 c.translate(x, y);659660 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#000000');661 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');662663 var rSize = Math.min(h * 0.5, w * 0.05);664 c.setFillColor(strokeColor);665 c.ellipse(0, h * 0.5 - rSize, 2 * rSize, 2 * rSize);666 c.fill();667 c.ellipse(w * 0.25 - rSize * 0.5, h * 0.5 - rSize, 2 * rSize, 2 * rSize);668 c.fill();669 c.ellipse(w * 0.5 - rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize);670 c.fill();671 c.ellipse(w * 0.75 - rSize * 1.5, h * 0.5 - rSize, 2 * rSize, 2 * rSize);672 c.fill();673 c.setFillColor(fillColor);674 c.ellipse(w - 2 * rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize);675 c.fill();676};677678mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_PAGE_CONTROL, mxShapeIOS7pageControl);679680//**********************************************************************************************************************************************************681//Icon Grid682//**********************************************************************************************************************************************************683/**684* Extends mxShape.685*/686function mxShapeIOS7iconGrid(bounds, fill, stroke, strokewidth)687{688 mxShape.call(this);689 this.bounds = bounds;690 this.fill = fill;691 this.stroke = stroke;692 this.strokewidth = (strokewidth != null) ? strokewidth : 1;693};694695/**696* Extends mxShape.697*/698mxUtils.extend(mxShapeIOS7iconGrid, mxShape);699700mxShapeIOS7iconGrid.prototype.customProperties = [701 {name: 'gridSize', dispName: 'Grid Size', type: 'string'},702];703704/**705* Function: paintVertexShape706* 707* Paints the vertex shape.708*/709mxShapeIOS7iconGrid.prototype.paintVertexShape = function(c, x, y, w, h)710{711 c.translate(x, y);712 var gridSize = decodeURIComponent(mxUtils.getValue(this.style, mxIOS7C.GRID_SIZE, '4,7').toString()).split(',');713714 var boxSizeX = w / (parseInt(gridSize[0],10) + (gridSize[0]-1) * 0.1);715 var boxSizeY = h / (parseInt(gridSize[1],10) + (gridSize[1]-1) * 0.1);716 717 for (var i = 0; i < gridSize[0]; i++)718 {719 for (var j = 0; j < gridSize[1]; j++)720 {721 c.rect(boxSizeX * 1.1 * i, boxSizeY * 1.1 * j, boxSizeX, boxSizeY);722 c.fill();723 }724 }725};726727mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_ICON_GRID, mxShapeIOS7iconGrid);728729//**********************************************************************************************************************************************************730//iPhone Vertical731//**********************************************************************************************************************************************************732/**733* Extends mxShape.734*/735function mxShapeIOS7phone(bounds, fill, stroke, strokewidth)736{737 mxShape.call(this);738 this.bounds = bounds;739 this.fill = fill;740 this.stroke = stroke;741 this.strokewidth = (strokewidth != null) ? strokewidth : 1;742};743744/**745* Extends mxShape.746*/747mxUtils.extend(mxShapeIOS7phone, mxShape);748749/**750* Function: paintVertexShape751* 752* Paints the vertex shape.753*/754mxShapeIOS7phone.prototype.paintVertexShape = function(c, x, y, w, h)755{756 c.translate(x, y);757 var rSize = 25;758759 c.roundrect(0, 0, w, h, rSize, rSize);760 c.fillAndStroke();761 762 c.setShadow(false);763 764 this.foreground(c, x, y, w, h, rSize);765};766767mxShapeIOS7phone.prototype.foreground = function(c, x, y, w, h, rSize)768{769 c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7);770 c.stroke();771772 c.ellipse(w * 0.4875, h * 0.04125, w * 0.025, h * 0.0125);773 c.stroke();774775 c.roundrect(w * 0.375, h * 0.075, w * 0.25, h * 0.01875, w * 0.02, h * 0.01);776 c.stroke();777 c.ellipse(w * 0.4, h * 0.875, w * 0.2, h * 0.1);778 c.stroke();779 c.roundrect(w * 0.4575, h * 0.905, w * 0.085, h * 0.04375, h * 0.00625, h * 0.00625);780 c.stroke();781};782783mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_PHONE, mxShapeIOS7phone);784785//**********************************************************************************************************************************************************786//Search Box787//**********************************************************************************************************************************************************788/**789* Extends mxShape.790*/791function mxShapeIOS7searchBox(bounds, fill, stroke, strokewidth)792{793 mxShape.call(this);794 this.bounds = bounds;795 this.fill = fill;796 this.stroke = stroke;797 this.strokewidth = (strokewidth != null) ? strokewidth : 1;798};799800/**801* Extends mxShape.802*/803mxUtils.extend(mxShapeIOS7searchBox, mxShape);804805/**806* Function: paintVertexShape807* 808* Paints the vertex shape.809*/810mxShapeIOS7searchBox.prototype.paintVertexShape = function(c, x, y, w, h)811{812 c.translate(x, y);813 this.background(c, w, h);814 c.setShadow(false);815 this.foreground(c, w, h);816};817818mxShapeIOS7searchBox.prototype.background = function(c, w, h)819{820 c.rect(0, 0, w, h);821 c.fill();822};823824mxShapeIOS7searchBox.prototype.foreground = function(c, w, h)825{826 var mainText = mxUtils.getValue(this.style, mxIOS7C.BUTTON_TEXT, 'Search');827 var fontColor = mxUtils.getValue(this.style, mxIOS7C.STYLE_TEXTCOLOR, '#666666');828 var strokeColor2 = mxUtils.getValue(this.style, mxIOS7C.STYLE_STROKECOLOR2, '#008cff');829 var fontSize = mxUtils.getValue(this.style, mxIOS7C.STYLE_TEXTSIZE, '17');830 var rSize = Math.min(w, h) * 0.1;831832 c.setFillColor('#ffffff');833 c.roundrect(w * 0.05, h * 0.15, w * 0.5, h * 0.7, rSize, rSize);834 c.fillAndStroke();835 836 c.setFontColor(fontColor);837 c.setFontSize(Math.min(h * 0.7, w * 0.1));838839 c.text(5, h * 0.5, 0, 0, mainText, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);840841 c.setStrokeColor(strokeColor2);842 c.ellipse(w * 0.05 + 3, h * 0.5 - 3, 4, 4);843 c.stroke();844 c.begin();845 c.moveTo(w * 0.05 + 8, h * 0.5 + 3.5);846 c.lineTo(w * 0.05 + 6, h * 0.5 + 0.5);847 c.stroke();848};849850mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_SEARCH_BOX, mxShapeIOS7searchBox);851852//**********************************************************************************************************************************************************853//URL854//**********************************************************************************************************************************************************855/**856* Extends mxShape.857*/858function mxShapeIOS7URL(bounds, fill, stroke, strokewidth)859{860 mxShape.call(this);861 this.bounds = bounds;862 this.fill = fill;863 this.stroke = stroke;864 this.strokewidth = (strokewidth != null) ? strokewidth : 1;865};866867/**868* Extends mxShape.869*/870mxUtils.extend(mxShapeIOS7URL, mxShape);871872/**873* Function: paintVertexShape874* 875* Paints the vertex shape.876*/877mxShapeIOS7URL.prototype.paintVertexShape = function(c, x, y, w, h)878{879 c.translate(x, y);880 this.background(c, w, h);881 c.setShadow(false);882 this.foreground(c, w, h);883};884885mxShapeIOS7URL.prototype.background = function(c, w, h)886{887 c.rect(0, 0, w, h);888 c.fill();889};890891mxShapeIOS7URL.prototype.foreground = function(c, w, h)892{893 var mainText = mxUtils.getValue(this.style, mxIOS7C.BUTTON_TEXT, 'draw.io');894 var fontColor = mxUtils.getValue(this.style, mxIOS7C.STYLE_TEXTCOLOR, '#666666');895 var strokeColor2 = mxUtils.getValue(this.style, mxIOS7C.STYLE_STROKECOLOR2, '#008cff');896 var fontSize = mxUtils.getValue(this.style, mxIOS7C.STYLE_TEXTSIZE, '17');897 var rSize = Math.min(w, h) * 0.1;898899 c.setFillColor('#d8d8d8');900 c.roundrect(w * 0.05, h * 0.15, w * 0.9, h * 0.7, rSize, rSize);901 c.fill();902 903 c.setFontColor(fontColor);904 c.setFontSize(Math.min(h * 0.7, w * 0.1));905906 c.text(w * 0.5, h * 0.5, 0, 0, mainText, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);907908 c.setStrokeColor(strokeColor2);909 c.begin();910 c.moveTo(w * 0.95 - 5, h * 0.5);911 c.arcTo(3, 3, 0, 1, 1, w * 0.95 - 8, h * 0.5 - 3);912 c.stroke();913914 c.setFillColor(strokeColor2);915 c.begin();916 c.moveTo(w * 0.95 - 8, h * 0.5 - 4);917 c.lineTo(w * 0.95 - 6, h * 0.5 - 3);918 c.lineTo(w * 0.95 - 8, h * 0.5 - 2);919 c.close();920 c.fillAndStroke();921};922923mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_URL, mxShapeIOS7URL);924925//**********************************************************************************************************************************************************926//Action Dialog927//**********************************************************************************************************************************************************928/**929* Extends mxShape.930*/931function mxShapeIOS7Actiondialog(bounds, fill, stroke, strokewidth)932{933 mxShape.call(this);934 this.bounds = bounds;935 this.fill = fill;936 this.stroke = stroke;937 this.strokewidth = (strokewidth != null) ? strokewidth : 1;938};939940/**941* Extends mxShape.942*/943mxUtils.extend(mxShapeIOS7Actiondialog, mxShape);944945/**946* Function: paintVertexShape947* 948* Paints the vertex shape.949*/950mxShapeIOS7Actiondialog.prototype.paintVertexShape = function(c, x, y, w, h)951{952 var mainText = mxUtils.getValue(this.style, mxIOS7C.MAIN_TEXT, 'Main Text');953 var subText = mxUtils.getValue(this.style, mxIOS7C.SUB_TEXT, 'Sub Text');954 var fontColor = mxUtils.getValue(this.style, mxIOS7C.STYLE_TEXTCOLOR, '#666666');955 var fontSize = mxUtils.getValue(this.style, mxIOS7C.STYLE_TEXTSIZE, '17');956 c.translate(x, y);957 this.background(c, x, y, w, h);958 959 c.setShadow(false);960 961 c.setFillColor('#e0e0e0');962 c.roundrect(w * 0.05, h * 0.1, w * 0.9, h * 0.35, w * 0.025, h * 0.05);963 c.fill();964 c.roundrect(w * 0.05, h * 0.55, w * 0.9, h * 0.35, w * 0.025, h * 0.05);965 c.fill();966 967 c.setFontStyle(mxConstants.FONT_BOLD);968 this.mainText(c, x, y, w, h, mainText, fontSize, fontColor);969 this.subText(c, x, y, w, h, subText, fontSize / 1.4, fontColor);970};971972mxShapeIOS7Actiondialog.prototype.background = function(c, x, y, w, h)973{974 c.rect(0, 0, w, h);975 c.fill();976};977978mxShapeIOS7Actiondialog.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor)979{980 c.begin();981 c.setFontSize(fontSize);982 c.setFontColor(fontColor);983 c.text(w * 0.5, h * 0.4, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);984};985986mxShapeIOS7Actiondialog.prototype.subText = function(c, x, y, w, h, text, fontSize, fontColor)987{988 c.begin();989 c.setFontSize(fontSize);990 c.text(w * 0.5, h * 0.7, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);991};992993mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_ACTION_DIALOG, mxShapeIOS7Actiondialog);994995//**********************************************************************************************************************************************************996//Anchor (a dummy shape without visuals used for anchoring)997//**********************************************************************************************************************************************************998/**999* Extends mxShape.1000*/1001function mxShapeIOS7Anchor(bounds, fill, stroke, strokewidth)1002{1003 mxShape.call(this);1004 this.bounds = bounds;1005};10061007/**1008* Extends mxShape.1009*/1010mxUtils.extend(mxShapeIOS7Anchor, mxShape);10111012mxShapeIOS7Anchor.prototype.cst = {1013 ANCHOR : 'mxgraph.ios7ui.anchor'1014};10151016/**1017* Function: paintVertexShape1018* 1019* Paints the vertex shape.1020*/1021mxShapeIOS7Anchor.prototype.paintVertexShape = function(c, x, y, w, h)1022{1023};10241025mxCellRenderer.registerShape(mxShapeIOS7Anchor.prototype.cst.ANCHOR, mxShapeIOS7Anchor);10261027//**********************************************************************************************************************************************************1028//Rounded rectangle (adjustable rounding)1029//**********************************************************************************************************************************************************1030/**1031* Extends mxShape.1032*/1033function mxShapeIOS7RRect(bounds, fill, stroke, strokewidth)1034{1035 mxShape.call(this);1036 this.bounds = bounds;1037 this.fill = fill;1038 this.stroke = stroke;1039 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1040};10411042/**1043* Extends mxShape.1044*/1045mxUtils.extend(mxShapeIOS7RRect, mxShape);10461047mxShapeIOS7RRect.prototype.cst = {1048 RRECT : 'mxgraph.ios7ui.rrect',1049 R_SIZE : 'rSize'1050};10511052mxShapeIOS7RRect.prototype.customProperties = [1053 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:3}1054];10551056/**1057* Function: paintVertexShape1058* 1059* Paints the vertex shape.1060*/1061mxShapeIOS7RRect.prototype.paintVertexShape = function(c, x, y, w, h)1062{1063 c.translate(x, y);10641065 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeIOS7RRect.prototype.cst.R_SIZE, '10'));1066 c.roundrect(0, 0, w, h, rSize);1067 c.fillAndStroke();1068};10691070mxCellRenderer.registerShape(mxShapeIOS7RRect.prototype.cst.RRECT, mxShapeIOS7RRect);10711072//**********************************************************************************************************************************************************1073//Left Button1074//**********************************************************************************************************************************************************1075/**1076* Extends mxShape.1077*/1078function mxShapeIOS7LeftButton(bounds, fill, stroke, strokewidth)1079{1080 mxShape.call(this);1081 this.bounds = bounds;1082 this.fill = fill;1083 this.stroke = stroke;1084 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1085};10861087/**1088* Extends mxShape.1089*/1090mxUtils.extend(mxShapeIOS7LeftButton, mxShape);10911092mxShapeIOS7LeftButton.prototype.cst = {1093 LEFT_BUTTON : 'mxgraph.ios7ui.leftButton',1094 R_SIZE : 'rSize'1095};10961097mxShapeIOS7LeftButton.prototype.customProperties = [1098 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:3}1099];11001101/**1102* Function: paintVertexShape1103* 1104* Paints the vertex shape.1105*/1106mxShapeIOS7LeftButton.prototype.paintVertexShape = function(c, x, y, w, h)1107{1108 c.translate(x, y);11091110 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeIOS7LeftButton.prototype.cst.R_SIZE, '10'));11111112 c.begin();1113 c.moveTo(w, 0);1114 c.lineTo(w, h);1115 c.lineTo(rSize, h);1116 c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);1117 c.lineTo(0, rSize);1118 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);1119 c.close();1120 c.fillAndStroke();1121};11221123mxCellRenderer.registerShape(mxShapeIOS7LeftButton.prototype.cst.LEFT_BUTTON, mxShapeIOS7LeftButton);11241125//**********************************************************************************************************************************************************1126//Right Button1127//**********************************************************************************************************************************************************1128/**1129* Extends mxShape.1130*/1131function mxShapeIOS7RightButton(bounds, fill, stroke, strokewidth)1132{1133 mxShape.call(this);1134 this.bounds = bounds;1135 this.fill = fill;1136 this.stroke = stroke;1137 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1138};11391140/**1141* Extends mxShape.1142*/1143mxUtils.extend(mxShapeIOS7RightButton, mxShape);11441145mxShapeIOS7RightButton.prototype.cst = {1146 RIGHT_BUTTON : 'mxgraph.ios7ui.rightButton',1147 R_SIZE : 'rSize'1148};11491150mxShapeIOS7RightButton.prototype.customProperties = [1151 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:3}1152];11531154/**1155* Function: paintVertexShape1156* 1157* Paints the vertex shape.1158*/1159mxShapeIOS7RightButton.prototype.paintVertexShape = function(c, x, y, w, h)1160{1161 c.translate(x, y);11621163 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeIOS7RightButton.prototype.cst.R_SIZE, '10'));11641165 c.begin();1166 c.moveTo(0, 0);1167 c.lineTo(w - rSize, 0);1168 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);1169 c.lineTo(w, h - rSize);1170 c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);1171 c.lineTo(0, h);1172 c.close();1173 c.fillAndStroke();1174};11751176mxCellRenderer.registerShape(mxShapeIOS7RightButton.prototype.cst.RIGHT_BUTTON, mxShapeIOS7RightButton);11771178//**********************************************************************************************************************************************************1179//Top Button1180//**********************************************************************************************************************************************************1181/**1182* Extends mxShape.1183*/1184function mxShapeIOS7TopButton(bounds, fill, stroke, strokewidth)1185{1186 mxShape.call(this);1187 this.bounds = bounds;1188 this.fill = fill;1189 this.stroke = stroke;1190 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1191};11921193/**1194* Extends mxShape.1195*/1196mxUtils.extend(mxShapeIOS7TopButton, mxShape);11971198mxShapeIOS7TopButton.prototype.cst = {1199 TOP_BUTTON : 'mxgraph.ios7ui.topButton',1200 R_SIZE : 'rSize'1201};12021203mxShapeIOS7TopButton.prototype.customProperties = [1204 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:3}1205];12061207/**1208* Function: paintVertexShape1209* 1210* Paints the vertex shape.1211*/1212mxShapeIOS7TopButton.prototype.paintVertexShape = function(c, x, y, w, h)1213{1214 c.translate(x, y);12151216 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeIOS7TopButton.prototype.cst.R_SIZE, '10'));12171218 c.begin();1219 c.moveTo(w, h);1220 c.lineTo(0, h);1221 c.lineTo(0, rSize);1222 c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);1223 c.lineTo(w - rSize, 0);1224 c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);1225 c.close();1226 c.fillAndStroke();1227};12281229mxCellRenderer.registerShape(mxShapeIOS7TopButton.prototype.cst.TOP_BUTTON, mxShapeIOS7TopButton);12301231//**********************************************************************************************************************************************************1232//Bottom Button1233//**********************************************************************************************************************************************************1234/**1235* Extends mxShape.1236*/1237function mxShapeIOS7BottomButton(bounds, fill, stroke, strokewidth)1238{1239 mxShape.call(this);1240 this.bounds = bounds;1241 this.fill = fill;1242 this.stroke = stroke;1243 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1244};12451246/**1247* Extends mxShape.1248*/1249mxUtils.extend(mxShapeIOS7BottomButton, mxShape);12501251mxShapeIOS7BottomButton.prototype.cst = {1252 BOTTOM_BUTTON : 'mxgraph.ios7ui.bottomButton',1253 R_SIZE : 'rSize'1254};12551256mxShapeIOS7BottomButton.prototype.customProperties = [1257 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:3},1258];12591260/**1261* Function: paintVertexShape1262* 1263* Paints the vertex shape.1264*/1265mxShapeIOS7BottomButton.prototype.paintVertexShape = function(c, x, y, w, h)1266{1267 c.translate(x, y);12681269 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeIOS7BottomButton.prototype.cst.R_SIZE, '10'));12701271 c.begin();1272 c.moveTo(w, 0);1273 c.lineTo(0, 0);1274 c.lineTo(0, h - rSize);1275 c.arcTo(rSize, rSize, 0, 0, 0, rSize, h);1276 c.lineTo(w - rSize, h);1277 c.arcTo(rSize, rSize, 0, 0, 0, w, h - rSize);1278 c.close();1279 c.fillAndStroke();1280};12811282mxCellRenderer.registerShape(mxShapeIOS7BottomButton.prototype.cst.BOTTOM_BUTTON, mxShapeIOS7BottomButton);12831284//**********************************************************************************************************************************************************1285//Horizontal Lines1286//**********************************************************************************************************************************************************1287/**1288* Extends mxShape.1289*/1290function mxShapeIOS7HorLines(bounds, fill, stroke, strokewidth)1291{1292 mxShape.call(this);1293 this.bounds = bounds;1294 this.fill = fill;1295 this.stroke = stroke;1296 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1297};12981299/**1300* Extends mxShape.1301*/1302mxUtils.extend(mxShapeIOS7HorLines, mxShape);13031304mxShapeIOS7HorLines.prototype.cst = {1305 HOR_LINES : 'mxgraph.ios7ui.horLines'1306};13071308/**1309* Function: paintVertexShape1310* 1311* Paints the vertex shape.1312*/1313mxShapeIOS7HorLines.prototype.paintVertexShape = function(c, x, y, w, h)1314{1315 c.translate(x, y);13161317 c.rect(0, 0, w, h);1318 c.fill();1319 1320 c.begin();1321 c.moveTo(0, 0);1322 c.lineTo(w, 0);1323 c.moveTo(0, h);1324 c.lineTo(w, h);1325 c.stroke();1326};13271328mxCellRenderer.registerShape(mxShapeIOS7HorLines.prototype.cst.HOR_LINES, mxShapeIOS7HorLines);13291330//**********************************************************************************************************************************************************1331//rect with margins1332//**********************************************************************************************************************************************************1333/**1334* Extends mxShape.1335*/1336function mxShapeIOS7MarginRect(bounds, fill, stroke, strokewidth)1337{1338 mxShape.call(this);1339 this.bounds = bounds;1340 this.fill = fill;1341 this.stroke = stroke;1342 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1343};13441345/**1346* Extends mxShape.1347*/1348mxUtils.extend(mxShapeIOS7MarginRect, mxShape);13491350mxShapeIOS7MarginRect.prototype.customProperties = [1351 {name: 'rx', dispName: 'Hor. Rounding Size', type: 'float', min:0, defVal:3},1352 {name: 'ry', dispName: 'Ver. Rounding Size', type: 'float', min:0, defVal:3},1353 {name: 'rectMargin', dispName: 'Global Margin', type: 'float', min:0, defVal:5},1354 {name: 'rectMarginTop', dispName: 'Top Margin', type: 'float', min:0, defVal:0},1355 {name: 'rectMarginLeft', dispName: 'Left Margin', type: 'float', min:0, defVal:0},1356 {name: 'rectMarginBottom', dispName: 'Bottom Margin', type: 'float', min:0, defVal:0},1357 {name: 'rectMarginRight', dispName: 'Right Margin', type: 'float', min:0, defVal:0}1358];13591360mxShapeIOS7MarginRect.prototype.cst = {1361 SHAPE_MARGIN_RECT : 'mxgraph.ios7ui.marginRect',1362 MARGIN : 'rectMargin',1363 RX : 'rx',1364 RY : 'ry',1365 MARGIN_TOP : 'rectMarginTop',1366 MARGIN_LEFT : 'rectMarginLeft',1367 MARGIN_BOTTOM : 'rectMarginBottom',1368 MARGIN_RIGHT : 'rectMarginRight'1369};1370/**1371* Function: paintVertexShape1372* 1373* Paints the vertex shape.1374*/1375mxShapeIOS7MarginRect.prototype.paintVertexShape = function(c, x, y, w, h)1376{1377 1378 c.translate(x, y);1379 this.background(c, x, y, w, h);1380};13811382mxShapeIOS7MarginRect.prototype.background = function(c, x, y, w, h, state)1383{1384 var margin = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7MarginRect.prototype.cst.MARGIN, '0'));1385 var marginTop = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7MarginRect.prototype.cst.MARGIN_TOP, '0'));1386 var marginLeft = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7MarginRect.prototype.cst.MARGIN_LEFT, '0'));1387 var marginBottom = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7MarginRect.prototype.cst.MARGIN_BOTTOM, '0'));1388 var marginRight = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7MarginRect.prototype.cst.MARGIN_RIGHT, '0'));1389 var rx = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7MarginRect.prototype.cst.RX, '0'));1390 var ry = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7MarginRect.prototype.cst.RY, '0'));13911392 var x1 = margin + marginLeft;1393 var y1 = margin + marginTop;1394 var w1 = w - marginRight - x1 - margin;1395 var h1 = h - marginBottom - y1 - margin;13961397 if (w1 >0 && h1 > 0)1398 {1399 c.begin();1400 c.roundrect(x1, y1, w1, h1, rx, ry);1401 c.fillAndStroke();1402 }1403};14041405mxCellRenderer.registerShape(mxShapeIOS7MarginRect.prototype.cst.SHAPE_MARGIN_RECT, mxShapeIOS7MarginRect);14061407//**********************************************************************************************************************************************************1408//Callout1409//**********************************************************************************************************************************************************1410/**1411* Extends mxShape.1412*/1413function mxShapeIOS7Callout(bounds, fill, stroke, strokewidth)1414{1415 mxShape.call(this);1416 this.bounds = bounds;1417 this.fill = fill;1418 this.stroke = stroke;1419 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1420};14211422/**1423* Extends mxShape.1424*/1425mxUtils.extend(mxShapeIOS7Callout, mxShape);14261427mxShapeIOS7Callout.prototype.cst = {1428 SHAPE_CALLOUT : 'mxgraph.ios7ui.callout'1429};14301431/**1432* Function: paintVertexShape1433* 1434* Paints the vertex shape.1435*/1436mxShapeIOS7Callout.prototype.paintVertexShape = function(c, x, y, w, h)1437{1438 1439 c.translate(x, y);1440 this.background(c, x, y, w, h);1441};14421443mxShapeIOS7Callout.prototype.background = function(c, x, y, w, h, state)1444{1445 var r = 10;1446 1447 if (w >= 30 && h >= 20)1448 {1449 c.begin();1450 c.moveTo(15, h - r * 0.3);1451 c.arcTo(r * 2, r, 0, 0, 1, 0, h);1452 c.arcTo(r * 1.5, r * 1.5, 0, 0, 0, 10, h - r * 1);1453 c.lineTo(r, r);1454 c.arcTo(r, r, 0, 0, 1, r * 2, 0);1455 c.lineTo(w - r, 0);1456 c.arcTo(r, r, 0, 0, 1, w, r);1457 c.lineTo(w, h - r);1458 c.arcTo(r, r, 0, 0, 1, w - r, h);1459 c.lineTo(r * 2, h);1460 c.arcTo(r, r, 0, 0, 1, r * 1.5, h - r * 0.3);1461 c.close();1462 c.fillAndStroke();1463 }1464};14651466mxCellRenderer.registerShape(mxShapeIOS7Callout.prototype.cst.SHAPE_CALLOUT, mxShapeIOS7Callout);14671468//**********************************************************************************************************************************************************1469//Select Bar1470//**********************************************************************************************************************************************************1471/**1472* Extends mxShape.1473*/1474function mxShapeIOS7SelectBar(bounds, fill, stroke, strokewidth)1475{1476 mxShape.call(this);1477 this.bounds = bounds;1478 this.fill = fill;1479 this.stroke = stroke;1480 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1481 this.dy = 0.5;1482 this.dx = 0.5;1483 this.dx2 = 70;1484 this.size = 10;1485};14861487/**1488* Extends mxShape.1489*/1490mxUtils.extend(mxShapeIOS7SelectBar, mxActor);14911492mxShapeIOS7SelectBar.prototype.cst = {1493 SELECT_BAR : 'mxgraph.ios7ui.selectBar'1494};14951496mxShapeIOS7SelectBar.prototype.customProperties = [1497 {name: 'dx', dispName: 'Callout Position', type: 'float', min:0, defVal:120},1498 {name: 'dx2', dispName: 'Field Size', type: 'float', min:0, defVal: 75},1499 {name: 'size', dispName: 'Rounding size', type: 'float', min:0, defVal:5},1500 {name: 'dy', dispName: 'Callout Size', type: 'float', min:0, defVal:5}1501];15021503/**1504* Function: paintVertexShape1505* 1506* Paints the vertex shape.1507*/1508mxShapeIOS7SelectBar.prototype.paintVertexShape = function(c, x, y, w, h)1509{1510 c.translate(x, y);15111512 var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));1513 var dx2 = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx2', this.dx2))));1514 var r = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));1515 var dy = Math.max(0, Math.min(h, (w - Math.max(20, r) - r) / 2, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));15161517 r = Math.min(h / 2, w / 2, r);1518 dx = Math.max(r + dy, dx);1519 dx = Math.min(w - r - dy, w - 20 - dy, dx);1520 1521 c.begin();1522 c.moveTo(dx - dy, h);1523 c.lineTo(r, h);1524 c.arcTo(r, r, 0, 0, 1, 0, h - r);1525 c.lineTo(0, r);1526 c.arcTo(r, r, 0, 0, 1, r, 0);1527 c.lineTo(w - r, 0);1528 c.arcTo(r, r, 0, 0, 1, w, r);1529 c.lineTo(w, h - r);1530 c.arcTo(r, r, 0, 0, 1, w - r, h);1531 c.lineTo(dx + dy, h);1532 c.lineTo(dx, h + dy);1533 c.close();1534 c.fillAndStroke();1535 1536 c.setShadow(false);1537 1538 c.begin();1539 c.moveTo(w - Math.max(20, r), 0);1540 c.lineTo(w - Math.max(20, r), h);1541 c.stroke();15421543 var currDx = dx2;1544 1545 c.begin();1546 1547 while (currDx < (w - Math.max(20, r)))1548 {1549 c.moveTo(currDx, 0);1550 c.lineTo(currDx, h);1551 1552 currDx = currDx + dx2;1553 }1554 1555 c.stroke();1556 1557 var w1 = Math.min(Math.max(20, r), h);1558 var x1 = w - w1 * 0.5;1559 var y1 = h * 0.5;1560 1561 c.setFillColor(mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, ''));1562 c.begin();1563 c.moveTo(x1 - w1 * 0.15, y1 - w1 * 0.225);1564 c.lineTo(x1 + w1 * 0.25, y1);1565 c.lineTo(x1 - w1 * 0.15, y1 + w1 * 0.225);1566 c.close();1567 c.fill();1568};15691570mxCellRenderer.registerShape(mxShapeIOS7SelectBar.prototype.cst.SELECT_BAR, mxShapeIOS7SelectBar);15711572mxShapeIOS7SelectBar.prototype.constraints = null;15731574Graph.handleFactory[mxShapeIOS7SelectBar.prototype.cst.SELECT_BAR] = function(state)1575{1576 var handles = [Graph.createHandle(state, ['dx'], function(bounds)1577 {1578 var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));15791580 return new mxPoint(bounds.x + dx, bounds.y + bounds.height);1581 }, function(bounds, pt)1582 {1583 var y = parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy)) * 0.6;1584 this.state.style['dx'] = Math.round(100 * Math.max(y, Math.min(bounds.width - y, pt.x - bounds.x))) / 100;1585 })];15861587 var handle2 = Graph.createHandle(state, ['dy'], function(bounds)1588 {1589 var dy = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));15901591 return new mxPoint(bounds.x + parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx)), bounds.y + bounds.height + dy);1592 }, function(bounds, pt)1593 {1594 this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height, pt.y - bounds.y - bounds.height))) / 100;1595 });15961597 handles.push(handle2);15981599 var handle3 = Graph.createHandle(state, ['size'], function(bounds)1600 {1601 var size = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'size', this.size))));16021603 return new mxPoint(bounds.x + bounds.width - size, bounds.y + 10);1604 }, function(bounds, pt)1605 {1606 this.state.style['size'] = Math.round(100 * Math.max(0, Math.min(bounds.width / 2, bounds.height / 2, bounds.x + bounds.width - pt.x))) / 100;1607 });1608 1609 handles.push(handle3);16101611 var handle4 = Graph.createHandle(state, ['dx2'], function(bounds)1612 {1613 var dx2 = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx2', this.dx2))));16141615 return new mxPoint(bounds.x + dx2, bounds.y + bounds.height / 2);1616 }, function(bounds, pt)1617 {1618 this.state.style['dx2'] = Math.round(100 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 100;1619 });16201621 handles.push(handle4);16221623 return handles;16241625}16261627//**********************************************************************************************************************************************************1628//slider1629//**********************************************************************************************************************************************************1630/**1631* Extends mxShape.1632*/1633//mxShapeIOS7SelectBar1634function mxShapeIOS7Slider2(bounds, fill, stroke, strokewidth)1635{1636 mxShape.call(this);1637 this.bounds = bounds;1638 this.fill = fill;1639 this.stroke = stroke;1640 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1641};16421643/**1644* Extends mxShape.1645*/1646mxUtils.extend(mxShapeIOS7Slider2, mxShape);16471648mxShapeIOS7Slider2.prototype.cst = {1649 SHAPE_SLIDER : 'mxgraph.ios7ui.slider',1650 BAR_POS : 'barPos',1651 HANDLE_SIZE : 'handleSize'1652};16531654mxShapeIOS7Slider2.prototype.customProperties = [1655 {name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, max:1, defVal:20},1656 {name: 'handleSize', dispName: 'Handle Size', type: 'float', min:0, defVal:10}1657];16581659/**1660* Function: paintVertexShape1661* 1662* Paints the vertex shape.1663*/1664mxShapeIOS7Slider2.prototype.paintVertexShape = function(c, x, y, w, h)1665{1666 1667 c.translate(x, y);1668 this.background(c, x, y, w, h);1669 c.setShadow(true);1670};16711672mxShapeIOS7Slider2.prototype.background = function(c, x, y, w, h)1673{1674 var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7Slider2.prototype.cst.HANDLE_SIZE, '10'));1675 var barPos = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7Slider2.prototype.cst.BAR_POS, '40')) / 100;16761677 barPos = Math.max(0, Math.min(1, barPos));16781679 c.save();1680 c.setStrokeColor('#bbbbbb');1681 c.begin();1682 c.moveTo(0, h * 0.5);1683 c.lineTo(w, h * 0.5);1684 c.fillAndStroke();1685 16861687 c.restore();1688 c.begin();1689 c.moveTo(0, h * 0.5);1690 c.lineTo(barPos * w, h * 0.5);1691 c.fillAndStroke();1692 1693 c.setStrokeColor('#bbbbbb');1694 c.begin();1695 c.ellipse(barPos * w - hSize * 0.5, h * 0.5 - hSize * 0.5, hSize, hSize);1696 c.fillAndStroke();16971698};16991700mxCellRenderer.registerShape(mxShapeIOS7Slider2.prototype.cst.SHAPE_SLIDER, mxShapeIOS7Slider2);17011702mxShapeIOS7Slider2.prototype.constraints = null;17031704Graph.handleFactory[mxShapeIOS7Slider2.prototype.cst.SHAPE_SLIDER] = function(state)1705{1706 var handles = [Graph.createHandle(state, ['barPos'], function(bounds)1707 {1708 var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4))));17091710 return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2);1711 }, function(bounds, pt)1712 {1713 this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100;1714 })];1715 1716 return handles;1717};1718