1/**2 * Copyright (c) 2006-2010, JGraph Holdings Ltd3 */45//**********************************************************************************************************************************************************6//Breadcrumb (LEGACY)7//**********************************************************************************************************************************************************8/**9 * Extends mxShape.10 */11function mxShapeMockupBreadcrumb(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(mxShapeMockupBreadcrumb, mxShape);2425mxShapeMockupBreadcrumb.prototype.cst = {26 SHAPE_BREADCRUMB : 'mxgraph.mockup.navigation.breadcrumb',27 MAIN_TEXT : 'mainText',28 TEXT_SIZE : 'textSize',29 TEXT_COLOR : 'textColor',30 TEXT_COLOR2 : 'textColor2'31};3233/**34 * Function: paintVertexShape35 * 36 * Paints the vertex shape.37 */38mxShapeMockupBreadcrumb.prototype.paintVertexShape = function(c, x, y, w, h)39{40 var textStrings = decodeURIComponent(mxUtils.getValue(this.style, mxShapeMockupBreadcrumb.prototype.cst.MAIN_TEXT, 'Layer 1, Layer 2, Layer 3').toString()).split(',');41 var fontColor = mxUtils.getValue(this.style, mxShapeMockupBreadcrumb.prototype.cst.TEXT_COLOR, '#666666');42 var selectedFontColor = mxUtils.getValue(this.style, mxShapeMockupBreadcrumb.prototype.cst.TEXT_COLOR2, '#008cff');43 var fontSize = mxUtils.getValue(this.style, mxShapeMockupBreadcrumb.prototype.cst.TEXT_SIZE, '17').toString();44 var separatorColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#c4c4c4');45 var buttonNum = textStrings.length;46 var buttonWidths = new Array(buttonNum);47 var buttonTotalWidth = 0;48 var labelOffset = 10;4950 for (var i = 0; i < buttonNum; i++)51 {52 buttonWidths[i] = mxUtils.getSizeForString(textStrings[i], fontSize, mxConstants.DEFAULT_FONTFAMILY).width;53 buttonTotalWidth += buttonWidths[i];54 }5556 var trueH = Math.max(h, fontSize * 1.5, 20);57 var minW = 2 * labelOffset * buttonNum + buttonTotalWidth;58 var trueW = Math.max(w, minW);59 c.translate(x, y);60 c.setShadow(false);6162 this.separators(c, trueW, trueH, buttonNum, buttonWidths, labelOffset, minW, separatorColor);63 var currWidth = 0;6465 for (var i = 0; i < buttonNum; i++)66 {67 if (i + 1 === buttonNum)68 {69 c.setFontColor(selectedFontColor);70 }71 else72 {73 c.setFontColor(fontColor);74 }7576 currWidth = currWidth + labelOffset;77 this.buttonText(c, currWidth, trueH, textStrings[i], buttonWidths[i], fontSize, minW, trueW);78 currWidth = currWidth + buttonWidths[i] + labelOffset;79 }80};8182mxShapeMockupBreadcrumb.prototype.separators = function(c, w, h, buttonNum, buttonWidths, labelOffset, minW, separatorColor)83{84 //draw the button separators85 c.setStrokeColor(separatorColor);86 var midY = h * 0.5;87 var size = 5;88 c.begin();8990 for (var i = 1; i < buttonNum; i++)91 {92 var currWidth = 0;9394 for (var j = 0; j < i; j++)95 {96 currWidth += buttonWidths[j] + 2 * labelOffset;97 }9899 currWidth = currWidth * w / minW;100 c.moveTo(currWidth - size * 0.5, midY - size);101 c.lineTo(currWidth + size * 0.5, midY);102 c.lineTo(currWidth - size * 0.5, midY + size);103 }104 c.stroke();105};106107mxShapeMockupBreadcrumb.prototype.buttonText = function(c, w, h, textString, buttonWidth, fontSize, minW, trueW)108{109 c.begin();110 c.setFontSize(fontSize);111 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);112};113114mxCellRenderer.registerShape(mxShapeMockupBreadcrumb.prototype.cst.SHAPE_BREADCRUMB, mxShapeMockupBreadcrumb);115116//**********************************************************************************************************************************************************117//Step Bar118//**********************************************************************************************************************************************************119/**120 * Extends mxShape.121 */122function mxShapeMockupStepBar(bounds, fill, stroke, strokewidth)123{124 mxShape.call(this);125 this.bounds = bounds;126 this.fill = fill;127 this.stroke = stroke;128 this.strokewidth = (strokewidth != null) ? strokewidth : 1;129};130131/**132 * Extends mxShape.133 */134mxUtils.extend(mxShapeMockupStepBar, mxShape);135136mxShapeMockupStepBar.prototype.cst = {137 SHAPE_STEP_BAR : 'mxgraph.mockup.navigation.stepBar',138 SELECTED : '+', //must be 1 char139 MAIN_TEXT : 'mainText',140 TEXT_SIZE : 'textSize',141 TEXT_COLOR : 'textColor',142 TEXT_COLOR2 : 'textColor2'143};144145mxShapeMockupStepBar.prototype.customProperties = [146 {name: 'mainText', dispName: 'Text', type: 'string'},147 {name: 'textSize', dispName: 'Text Size', type: 'float'},148 {name: 'textColor', dispName: 'Text Color', type: 'color', primary:true},149 {name: 'textColor2', dispName: 'Text2 Color', type: 'color', primary:true}150];151152/**153 * Function: paintVertexShape154 * 155 * Paints the vertex shape.156 */157mxShapeMockupStepBar.prototype.paintVertexShape = function(c, x, y, w, h)158{159 var textStrings = decodeURIComponent(mxUtils.getValue(this.style, mxShapeMockupStepBar.prototype.cst.MAIN_TEXT, 'Step 1, Step 2, Step 3').toString()).split(',');160 var fontColor = mxUtils.getValue(this.style, mxShapeMockupStepBar.prototype.cst.TEXT_COLOR, '#666666');161 var currColor = mxUtils.getValue(this.style, mxShapeMockupStepBar.prototype.cst.TEXT_COLOR2, '#008cff');162 var fontSize = mxUtils.getValue(this.style, mxShapeMockupStepBar.prototype.cst.TEXT_SIZE, '17').toString();163 var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#c4c4c4');164 var doneColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#666666');165 var buttonNum = textStrings.length;166 var buttonWidths = new Array(buttonNum);167 var buttonTotalWidth = 0;168 var labelOffset = 10;169 var selectedButton = -1;170171 for (var i = 0; i < buttonNum; i++)172 {173 var buttonText = textStrings[i];174175 if(buttonText.charAt(0) === mxShapeMockupStepBar.prototype.cst.SELECTED)176 {177 buttonText = textStrings[i].substring(1);178 selectedButton = i;179 }180181 buttonWidths[i] = mxUtils.getSizeForString(buttonText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;182183 buttonTotalWidth += buttonWidths[i];184 }185186 var trueH = Math.max(h, fontSize * 1.5, 20);187 var minW = 2 * labelOffset * buttonNum + buttonTotalWidth;188 var trueW = Math.max(w, minW);189 c.translate(x, y);190191 this.stepLineBg(c, trueW, trueH, buttonNum, buttonWidths, labelOffset, minW, bgColor, fontSize, trueW);192 c.setShadow(false);193194 this.stepLineFg(c, trueW, trueH, buttonNum, buttonWidths, labelOffset, minW, bgColor, doneColor, currColor, fontSize, trueW, selectedButton);195 var currWidth = 0;196197 for (var i = 0; i < buttonNum; i++)198 {199 if (i >= selectedButton)200 {201 c.setFontColor(currColor);202 }203 else204 {205 c.setFontColor(fontColor);206 }207208 currWidth = currWidth + labelOffset;209 this.buttonText(c, currWidth, trueH, textStrings[i], buttonWidths[i], fontSize, minW, trueW);210 currWidth = currWidth + buttonWidths[i] + labelOffset;211 }212};213214mxShapeMockupStepBar.prototype.stepLineBg = function(c, w, h, buttonNum, buttonWidths, labelOffset, minW, bgColor, fontSize, trueW)215{216 //draw the button separators217 c.setStrokeColor(bgColor);218 c.setFillColor(bgColor);219 var midY = fontSize * 2;220 var size = 10;221 var startX = 0;222 var endX = 0;223224 for (var i = 0; i < buttonNum; i++)225 {226 var currWidth = 0;227228 for (var j = 0; j < i; j++)229 {230 currWidth += buttonWidths[j] + 2 * labelOffset;231 }232233 currWidth += buttonWidths[i] * 0.5 + labelOffset;234235 currWidth = currWidth * w / minW;236237 if (i === 0)238 {239 startX = currWidth; 240 }241 else if (i + 1 === buttonNum)242 {243 endX = currWidth;244 }245246 c.begin();247 c.ellipse(currWidth - size, midY - size, 2 * size, 2 * size);248 c.fillAndStroke();249 }250251 c.begin();252 c.rect(startX, midY - size * 0.2, endX - startX, size * 0.4);253 c.fillAndStroke();254};255256mxShapeMockupStepBar.prototype.stepLineFg = function(c, w, h, buttonNum, buttonWidths, labelOffset, minW, bgColor, doneColor, currColor, fontSize, trueW, selectedButton)257{258 //draw the button separators259 c.setStrokeColor(doneColor);260 var midY = fontSize * 2;261 var size = 10 * 0.75;262 var startX = 0;263 var endX = 0;264 var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1');265266 for (var i = 0; i <= selectedButton; i++)267 {268 var currWidth = 0;269270 for (var j = 0; j < i; j++)271 {272 currWidth += buttonWidths[j] + 2 * labelOffset;273 }274275 currWidth += buttonWidths[i] * 0.5 + labelOffset;276277 currWidth = currWidth * w / minW;278279 if (i === 0)280 {281 startX = currWidth; 282 }283 else if (i === selectedButton)284 {285 endX = currWidth;286 }287 }288 289 c.setFillColor(doneColor);290 c.begin();291 c.rect(startX, midY - size * 0.15, endX - startX, size * 0.3);292 c.fill();293 c.setFillColor(bgColor);294295 for (var i = 0; i <= selectedButton; i++)296 {297 var currWidth = 0;298299 for (var j = 0; j < i; j++)300 {301 currWidth += buttonWidths[j] + 2 * labelOffset;302 }303304 currWidth += buttonWidths[i] * 0.5 + labelOffset;305306 currWidth = currWidth * w / minW;307308 if (i === 0)309 {310 startX = currWidth; 311 }312 else if (i + 1 === selectedButton)313 {314 endX = currWidth;315 }316317 if (i < selectedButton)318 {319 c.setStrokeWidth(strokeWidth);320 c.begin();321 c.ellipse(currWidth - size, midY - size, 2 * size, 2 * size);322 c.fillAndStroke();323324 c.setStrokeWidth(strokeWidth * 0.5);325 c.begin();326 c.ellipse(currWidth - size * 0.6, midY - size * 0.6, 2 * size * 0.6, 2 * size * 0.6);327 c.fillAndStroke();328 }329 else330 {331 c.setStrokeWidth(strokeWidth);332 c.setFillColor(bgColor);333 c.setStrokeColor(bgColor);334 c.begin();335 c.ellipse(currWidth - size / 0.75, midY - size / 0.75, 2 * size / 0.75, 2 * size / 0.75);336 c.fillAndStroke();337338 c.setStrokeWidth(strokeWidth);339 c.setFillColor('#ffffff');340 c.setStrokeColor('#ffffff');341 c.begin();342 c.ellipse(currWidth - size, midY - size, 2 * size, 2 * size);343 c.fillAndStroke();344345 c.setFillColor(currColor);346 c.setStrokeColor(currColor);347 c.setStrokeWidth(strokeWidth * 0.5);348 c.begin();349 c.ellipse(currWidth - size * 0.7, midY - size * 0.7, 2 * size * 0.7, 2 * size * 0.7);350 c.fillAndStroke();351 }352 }353};354355mxShapeMockupStepBar.prototype.buttonText = function(c, w, h, textString, buttonWidth, fontSize, minW, trueW)356{357 if(textString.charAt(0) === mxShapeMockupStepBar.prototype.cst.SELECTED)358 {359 textString = textString.substring(1);360 }361362 c.begin();363 c.setFontSize(fontSize);364 c.text((w + buttonWidth * 0.5) * trueW / minW, fontSize * 0.5, 0, 0, textString, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);365};366367mxCellRenderer.registerShape(mxShapeMockupStepBar.prototype.cst.SHAPE_STEP_BAR, mxShapeMockupStepBar);368369//**********************************************************************************************************************************************************370//Cover Flow371//**********************************************************************************************************************************************************372/**373* Extends mxShape.374*/375function mxShapeMockupCoverFlow(bounds, fill, stroke, strokewidth)376{377 mxShape.call(this);378 this.bounds = bounds;379 this.fill = fill;380 this.stroke = stroke;381 this.strokewidth = (strokewidth != null) ? strokewidth : 1;382};383384/**385* Extends mxShape.386*/387mxUtils.extend(mxShapeMockupCoverFlow, mxShape);388389mxShapeMockupCoverFlow.prototype.cst = {390 SHAPE_COVER_FLOW : 'mxgraph.mockup.navigation.coverFlow'391};392393/**394* Function: paintVertexShape395* 396* Paints the vertex shape.397*/398mxShapeMockupCoverFlow.prototype.paintVertexShape = function(c, x, y, w, h)399{400 c.translate(x, y);401402 c.begin();403 c.moveTo(w * 0.0924, h * 0.07);404 c.lineTo(w * 0.005, h * 0.01);405 c.lineTo(w * 0.005, h * 0.99);406 c.lineTo(w * 0.0924, h * 0.93);407408 c.moveTo(w * 0.1774, h * 0.09);409 c.lineTo(w * 0.0924, h * 0.01);410 c.lineTo(w * 0.0924, h * 0.99);411 c.lineTo(w * 0.1774, h * 0.91);412413 c.moveTo(w * 0.3373, h * 0.22);414 c.lineTo(w * 0.1774, h * 0.01);415 c.lineTo(w * 0.1774, h * 0.99);416 c.lineTo(w * 0.3373, h * 0.78);417418 c.moveTo(w * 0.912, h * 0.07);419 c.lineTo(w * 0.998, h * 0.01);420 c.lineTo(w * 0.998, h * 0.99);421 c.lineTo(w * 0.912, h * 0.93);422423 c.moveTo(w * 0.8271, h * 0.09);424 c.lineTo(w * 0.912, h * 0.01);425 c.lineTo(w * 0.912, h * 0.99);426 c.lineTo(w * 0.8271, h * 0.91);427428 c.moveTo(w * 0.6672, h * 0.22);429 c.lineTo(w * 0.8271, h * 0.01);430 c.lineTo(w * 0.8271, h * 0.99);431 c.lineTo(w * 0.6672, h * 0.78);432433 c.moveTo(w * 0.3373, h * 0.005);434 c.lineTo(w * 0.3373, h * 0.995);435 c.lineTo(w * 0.6672, h * 0.995);436 c.lineTo(w * 0.6672, h * 0.005);437 c.close();438 c.fillAndStroke();439};440441mxCellRenderer.registerShape(mxShapeMockupCoverFlow.prototype.cst.SHAPE_COVER_FLOW, mxShapeMockupCoverFlow);442443//**********************************************************************************************************************************************************444//Scroll Bar445//**********************************************************************************************************************************************************446/**447* Extends mxShape.448*/449function mxShapeMockupScrollBar(bounds, fill, stroke, strokewidth)450{451 mxShape.call(this);452 this.bounds = bounds;453 this.fill = fill;454 this.stroke = stroke;455 this.strokewidth = (strokewidth != null) ? strokewidth : 1;456};457458/**459* Extends mxShape.460*/461mxUtils.extend(mxShapeMockupScrollBar, mxShape);462463mxShapeMockupScrollBar.prototype.cst = {464 SHAPE_SCROLL_BAR : 'mxgraph.mockup.navigation.scrollBar',465 FILL_COLOR2 : 'fillColor2',466 STROKE_COLOR2 : 'strokeColor2',467 BAR_POS : 'barPos'468};469470mxShapeMockupScrollBar.prototype.customProperties = [471 {name: 'barPos', dispName: 'Handle Position', type: 'float'},472 {name: 'fillColor2', dispName: 'Fill2 Color', type: 'color', primary: true},473 {name: 'strokeColor2', dispName: 'Stroke2 Color', type: 'color', primary: true}474];475476/**477* Function: paintVertexShape478* 479* Paints the vertex shape.480*/481mxShapeMockupScrollBar.prototype.paintVertexShape = function(c, x, y, w, h)482{483 h = 20;484 var buttonX = 20;485 w = Math.max(w, 2 * buttonX);486 487 c.translate(x, y);488 this.background(c, w, h, buttonX);489 c.setShadow(false);490 this.foreground(c, w, h, buttonX);491 this.barPos = 20;492};493494mxShapeMockupScrollBar.prototype.background = function(c, w, h, buttonX)495{496 c.rect(0, 0, w, h);497 c.fillAndStroke();498 c.begin();499 c.moveTo(buttonX, 0);500 c.lineTo(buttonX, h);501 c.moveTo(w - buttonX, 0);502 c.lineTo(w - buttonX, h);503 c.stroke();504}505506mxShapeMockupScrollBar.prototype.foreground = function(c, w, h, buttonX)507{508 var barPos = mxUtils.getValue(this.style, mxShapeMockupScrollBar.prototype.cst.BAR_POS, '20');509 var fillColor2 = mxUtils.getValue(this.style, mxShapeMockupScrollBar.prototype.cst.FILL_COLOR2, '#99ddff');510 var strokeColor2 = mxUtils.getValue(this.style, mxShapeMockupScrollBar.prototype.cst.STROKE_COLOR2, 'none');511 512 barPos = Math.max(0, barPos);513 barPos = Math.min(100, barPos);514 515 c.setStrokeColor(strokeColor2);516 c.setFillColor(fillColor2);517 518 c.begin();519 c.moveTo(buttonX * 0.2, h * 0.5);520 c.lineTo(buttonX * 0.8, h * 0.2);521 c.lineTo(buttonX * 0.8, h * 0.8);522 c.close();523 c.moveTo(w - buttonX * 0.2, h * 0.5);524 c.lineTo(w - buttonX * 0.8, h * 0.2);525 c.lineTo(w - buttonX * 0.8, h * 0.8);526 c.close();527 c.fillAndStroke();528529 //draw the handle based on arg.barPos530 var barWidth = 60;531 var barMin = buttonX;532 var barMax = w - buttonX;533 barWidth = Math.min(barWidth, barMax - barMin);534 var barCenterMin = barMin + barWidth / 2;535 var barCenterMax = barMax - barWidth / 2;536 var barCenterRange = barCenterMax - barCenterMin;537 var barCenterPos = barCenterRange * barPos / 100;538 var barStart = barMin + barCenterPos;539540 c.roundrect(barStart, h * 0.15, barWidth, h * 0.7, 5, 5);541 c.fillAndStroke();542};543544mxCellRenderer.registerShape(mxShapeMockupScrollBar.prototype.cst.SHAPE_SCROLL_BAR, mxShapeMockupScrollBar);545546Graph.handleFactory[mxShapeMockupScrollBar.prototype.cst.SHAPE_SCROLL_BAR] = function(state)547{548 var handles = [Graph.createHandle(state, ['barPos'], function(bounds)549 {550 var barPos = Math.max(0, Math.min(100, parseFloat(mxUtils.getValue(this.state.style, 'barPos', this.barPos))));551552 return new mxPoint(bounds.x + ((bounds.width - 100) * barPos / bounds.width) / 100 * bounds.width + 50, bounds.y + 10);553 }, function(bounds, pt)554 {555 this.state.style['barPos'] = Math.round(1000 * Math.max(0, Math.min(100, (pt.x - bounds.x - 50) * 100 / (bounds.width - 100)))) / 1000;556 })];557558 return handles;559}560561//**********************************************************************************************************************************************************562//Pagination563//**********************************************************************************************************************************************************564/**565* Extends mxShape.566*/567function mxShapeMockupPagination(bounds, fill, stroke, strokewidth)568{569 mxShape.call(this);570 this.bounds = bounds;571 this.fill = fill;572 this.stroke = stroke;573 this.strokewidth = (strokewidth != null) ? strokewidth : 1;574};575576/**577* Extends mxShape.578*/579mxUtils.extend(mxShapeMockupPagination, mxShape);580581mxShapeMockupPagination.prototype.cst = {582 MAIN_TEXT : 'linkText',583 TEXT_SIZE : 'textSize',584 TEXT_COLOR : 'textColor',585 SHAPE_PAGINATION : 'mxgraph.mockup.navigation.pagination'586};587588/**589* Function: paintVertexShape590* 591* Paints the vertex shape.592*/593mxShapeMockupPagination.prototype.paintVertexShape = function(c, x, y, w, h)594{595 var mainText = decodeURIComponent(mxUtils.getValue(this.style, mxShapeMockupPagination.prototype.cst.MAIN_TEXT, '0-9 A B C D E F G H I J K L M N O P Q R S T U V X Y Z'));596 var textSize = mxUtils.getValue(this.style, mxShapeMockupPagination.prototype.cst.TEXT_SIZE, '17');597 var textColor = mxUtils.getValue(this.style, mxShapeMockupPagination.prototype.cst.TEXT_COLOR, '#0000ff');598599 c.translate(x, y);600 var width = mxUtils.getSizeForString(mainText, textSize, mxConstants.DEFAULT_FONTFAMILY).width;601 c.setStrokeColor(textColor);602 c.setFontSize(textSize);603 c.setFontColor(textColor);604 c.text(w * 0.5, h * 0.5, 0, 0, mainText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);605 c.begin();606 c.moveTo(w * 0.5 - width * 0.5, (h + parseInt(textSize, 10)) * 0.5);607 c.lineTo(w * 0.5 + width * 0.5, (h + parseInt(textSize, 10)) * 0.5);608 c.stroke();609};610611mxCellRenderer.registerShape(mxShapeMockupPagination.prototype.cst.SHAPE_PAGINATION, mxShapeMockupPagination);612613//**********************************************************************************************************************************************************614//Page Control615//**********************************************************************************************************************************************************616/**617* Extends mxShape.618*/619function mxShapeMockupPageControl(bounds, fill, stroke, strokewidth)620{621 mxShape.call(this);622 this.bounds = bounds;623 this.fill = fill;624 this.stroke = stroke;625 this.strokewidth = (strokewidth != null) ? strokewidth : 1;626};627628/**629* Extends mxShape.630*/631mxUtils.extend(mxShapeMockupPageControl, mxShape);632633mxShapeMockupPageControl.prototype.cst = {634 SHAPE_PAGE_CONTROL : 'mxgraph.mockup.navigation.pageControl'635};636637/**638* Function: paintVertexShape639* 640* Paints the vertex shape.641*/642mxShapeMockupPageControl.prototype.paintVertexShape = function(c, x, y, w, h)643{644 c.translate(x, y);645646647 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#000000');648 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');649650 var rSize = Math.min(h * 0.5, w * 0.05);651 c.setFillColor(strokeColor);652 c.ellipse(0, h * 0.5 - rSize, 2 * rSize, 2 * rSize);653 c.fill();654 c.setFillColor(fillColor);655 c.ellipse(w * 0.35 - rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize);656 c.fill();657 c.ellipse(w * 0.65 - rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize);658 c.fill();659 c.ellipse(w - 2 * rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize);660 c.fill();661};662663mxCellRenderer.registerShape(mxShapeMockupPageControl.prototype.cst.SHAPE_PAGE_CONTROL, mxShapeMockupPageControl);664665//**********************************************************************************************************************************************************666//Map Navigator667//**********************************************************************************************************************************************************668/**669* Extends mxShape.670*/671function mxShapeMockupMapNavigator(bounds, fill, stroke, strokewidth)672{673 mxShape.call(this);674 this.bounds = bounds;675 this.fill = fill;676 this.stroke = stroke;677 this.strokewidth = (strokewidth != null) ? strokewidth : 1;678};679680/**681* Extends mxShape.682*/683mxUtils.extend(mxShapeMockupMapNavigator, mxShape);684685mxShapeMockupMapNavigator.prototype.cst = {686 SHAPE_MAP_NAVIGATOR : 'mxgraph.mockup.navigation.mapNavigator',687 FILL_COLOR2 : 'fillColor2',688 STROKE_COLOR2 : 'strokeColor2',689 STROKE_COLOR3 : 'strokeColor3'690};691692mxShapeMockupMapNavigator.prototype.customProperties = [693 {name: 'fillColor2', dispName: 'Fill2 Color', type: 'color', primary: true},694 {name: 'strokeColor2', dispName: 'Stroke2 Color', type: 'color', primary: true},695 {name: 'strokeColor3', dispName: 'Stroke3 Color', type: 'color', primary: true}696];697698/**699* Function: paintVertexShape700* 701* Paints the vertex shape.702*/703mxShapeMockupMapNavigator.prototype.paintVertexShape = function(c, x, y, w, h)704{705 c.translate(x, y);706 this.background(c, w, h);707 c.setShadow(false);708 this.foreground(c, w, h);709};710711mxShapeMockupMapNavigator.prototype.background = function(c, w, h)712{713 c.ellipse(0, 0, w, h * 0.6);714 c.fillAndStroke();715716 c.begin();717 c.moveTo(w * 0.35, h * 0.584);718 c.lineTo(w * 0.35, h * 0.95);719 c.arcTo(w * 0.083, h * 0.05, 0, 0, 0, w * 0.43, h);720 c.lineTo(w * 0.56, h);721 c.arcTo(w * 0.083, h * 0.05, 0, 0, 0, w * 0.65, h * 0.95);722 c.lineTo(w * 0.65, h * 0.584);723 c.fillAndStroke();724}725726mxShapeMockupMapNavigator.prototype.foreground = function(c, w, h)727{728 var fillColor2 = mxUtils.getValue(this.style, mxShapeMockupMapNavigator.prototype.cst.FILL_COLOR2, '#99ddff');729 var strokeColor2 = mxUtils.getValue(this.style, mxShapeMockupMapNavigator.prototype.cst.STROKE_COLOR2, 'none');730 var strokeColor3 = mxUtils.getValue(this.style, mxShapeMockupMapNavigator.prototype.cst.STROKE_COLOR3, '#ffffff');731732 c.setFillColor(fillColor2);733 c.setStrokeColor(strokeColor2);734 c.ellipse(w * 0.4, h * 0.65, w * 0.2, h * 0.12);735 c.fillAndStroke();736 c.ellipse(w * 0.4, h * 0.85, w * 0.2, h * 0.12);737 c.fillAndStroke();738 739 c.begin();740 c.moveTo(w * 0.1806, h * 0.34);741 c.lineTo(w * 0.1357, h * 0.366);742 c.lineTo(w * 0.0228, h * 0.3);743 c.lineTo(w * 0.1357, h * 0.234);744 c.lineTo(w * 0.1806, h * 0.26);745 c.lineTo(w * 0.1142, h * 0.3);746 c.close();747 c.fillAndStroke();748749 c.begin();750 c.moveTo(w * 0.433, h * 0.108);751 c.lineTo(w * 0.3881, h * 0.08);752 c.lineTo(w * 0.4994, h * 0.012);753 c.lineTo(w * 0.6123, h * 0.08);754 c.lineTo(w * 0.5658, h * 0.108);755 c.lineTo(w * 0.4994, h * 0.068);756 c.close();757 c.fillAndStroke();758759 c.begin();760 c.moveTo(w * 0.8198, h * 0.262);761 c.lineTo(w * 0.868, h * 0.233);762 c.lineTo(w * 0.9776, h * 0.3);763 c.lineTo(w * 0.868, h * 0.367);764 c.lineTo(w * 0.8198, h * 0.341);765 c.lineTo(w * 0.8863, h * 0.3);766 c.close();767 c.fillAndStroke();768769 c.begin();770 c.moveTo(w * 0.5641, h * 0.493);771 c.lineTo(w * 0.6123, h * 0.522);772 c.lineTo(w * 0.4994, h * 0.588);773 c.lineTo(w * 0.3881, h * 0.521);774 c.lineTo(w * 0.4363, h * 0.493);775 c.lineTo(w * 0.4994, h * 0.533);776 c.close();777 c.fillAndStroke();778779 c.begin();780 c.moveTo(w * 0.3333, h * 0.32);781 c.lineTo(w * 0.3333, h * 0.28);782 c.lineTo(w * 0.4163, h * 0.3);783 c.close();784 c.moveTo(w * 0.4662, h * 0.2);785 c.lineTo(w * 0.5326, h * 0.2);786 c.lineTo(w * 0.4994, h * 0.25);787 c.close()788 c.moveTo(w * 0.6654, h * 0.28);789 c.lineTo(w * 0.6654, h * 0.32);790 c.lineTo(w * 0.5824, h * 0.3);791 c.close();792 c.moveTo(w * 0.5326, h * 0.4);793 c.lineTo(w * 0.4662, h * 0.4);794 c.lineTo(w * 0.4994, h * 0.35);795 c.close();796 c.fillAndStroke();797 798 c.setStrokeWidth(2);799 c.setStrokeColor(strokeColor3);800 801 c.begin();802 c.moveTo(w * 0.5, h * 0.67);803 c.lineTo(w * 0.5, h * 0.75);804 c.moveTo(w * 0.43, h * 0.71);805 c.lineTo(w * 0.57, h * 0.71);806 c.moveTo(w * 0.43, h * 0.91);807 c.lineTo(w * 0.57, h * 0.91);808 c.stroke();809};810811mxCellRenderer.registerShape(mxShapeMockupMapNavigator.prototype.cst.SHAPE_MAP_NAVIGATOR, mxShapeMockupMapNavigator);812813//**********************************************************************************************************************************************************814//Anchor (a dummy shape without visuals used for anchoring)815//**********************************************************************************************************************************************************816/**817* Extends mxShape.818*/819function mxShapeMockupNavigationAnchor(bounds, fill, stroke, strokewidth)820{821 mxShape.call(this);822 this.bounds = bounds;823};824825/**826* Extends mxShape.827*/828mxUtils.extend(mxShapeMockupNavigationAnchor, mxShape);829830mxShapeMockupNavigationAnchor.prototype.cst = {831 ANCHOR : 'mxgraph.mockup.navigation.anchor'832};833834/**835* Function: paintVertexShape836* 837* Paints the vertex shape.838*/839mxShapeMockupNavigationAnchor.prototype.paintVertexShape = function(c, x, y, w, h)840{841};842843mxCellRenderer.registerShape(mxShapeMockupNavigationAnchor.prototype.cst.ANCHOR, mxShapeMockupNavigationAnchor);844