1/**2 * Copyright (c) 2006-2010, JGraph Holdings Ltd3 */45//**********************************************************************************************************************************************************6//Bar Chart7//**********************************************************************************************************************************************************8/**9 * Extends mxShape.10 */11function mxShapeMockupBarChart(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(mxShapeMockupBarChart, mxShape);2425mxShapeMockupBarChart.prototype.cst = {26 STROKE_COLOR2 : 'strokeColor2',27 STROKE_COLOR3 : 'strokeColor3',28 FILL_COLOR2 : 'fillColor2',29 FILL_COLOR3 : 'fillColor3',30 SHAPE_BAR_CHART : 'mxgraph.mockup.graphics.barChart'31};3233mxShapeMockupBarChart.prototype.customProperties = [34 {name: 'strokeColor2', dispName: 'Stroke2 Color', type: 'color', primary:true},35 {name: 'strokeColor3', dispName: 'Stroke3 Color', type: 'color', primary:true},36 {name: 'fillColor2', dispName: 'Fill2 Color', type: 'color', primary:true},37 {name: 'fillColor3', dispName: 'Fill3 Color', type: 'color', primary:true}38];3940/**41 * Function: paintVertexShape42 * 43 * Paints the vertex shape.44 */45mxShapeMockupBarChart.prototype.paintVertexShape = function(c, x, y, w, h)46{47 c.translate(x, y);4849 this.background(c, x, y, w, h);5051 var bgFill = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, 'none');5253 if (bgFill !== 'none')54 {55 c.setShadow(false);56 }5758 this.bars(c, x, y, w, h);59};6061mxShapeMockupBarChart.prototype.background = function(c, x, y, w, h, bgColor, frameColor)62{63 c.rect(0, 0, w, h);64 c.fillAndStroke();65};6667mxShapeMockupBarChart.prototype.bars = function(c, x, y, w, h)68{69 var barStroke = mxUtils.getValue(this.style, mxShapeMockupBarChart.prototype.cst.STROKE_COLOR2, 'none');70 var coordStroke = mxUtils.getValue(this.style, mxShapeMockupBarChart.prototype.cst.STROKE_COLOR3, '#666666');71 var barFill1 = mxUtils.getValue(this.style, mxShapeMockupBarChart.prototype.cst.FILL_COLOR2, '#008cff');72 var barFill2 = mxUtils.getValue(this.style, mxShapeMockupBarChart.prototype.cst.FILL_COLOR3, '#dddddd');7374 var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1');7576 c.setStrokeColor(barStroke);77 c.setFillColor(barFill1);78 c.rect(0, h * 0.2, w * 0.75, h * 0.05);79 c.fillAndStroke();80 c.rect(0, h * 0.45, w * 0.6, h * 0.05);81 c.fillAndStroke();82 c.rect(0, h * 0.7, w * 0.95, h * 0.05);83 c.fillAndStroke();8485 c.setFillColor(barFill2);86 c.rect(0, h * 0.25, w * 0.85, h * 0.05);87 c.fillAndStroke();88 c.rect(0, h * 0.5, w * 0.65, h * 0.05);89 c.fillAndStroke();90 c.rect(0, h * 0.75, w * 0.8, h * 0.05);91 c.fillAndStroke();9293 c.setStrokeWidth(strokeWidth * 2);94 c.setStrokeColor(coordStroke);9596 c.setShadow(false);97 c.begin();98 c.moveTo(0,0);99 c.lineTo(0, h);100 c.lineTo(w, h);101 c.stroke();102};103104mxCellRenderer.registerShape(mxShapeMockupBarChart.prototype.cst.SHAPE_BAR_CHART, mxShapeMockupBarChart);105106//**********************************************************************************************************************************************************107//Column Chart108//**********************************************************************************************************************************************************109/**110 * Extends mxShape.111 */112function mxShapeMockupColumnChart(bounds, fill, stroke, strokewidth)113{114 mxShape.call(this);115 this.bounds = bounds;116 this.fill = fill;117 this.stroke = stroke;118 this.strokewidth = (strokewidth != null) ? strokewidth : 1;119};120121/**122 * Extends mxShape.123 */124mxUtils.extend(mxShapeMockupColumnChart, mxShape);125126mxShapeMockupColumnChart.prototype.cst = {127 STROKE_COLOR2 : 'strokeColor2',128 STROKE_COLOR3 : 'strokeColor3',129 FILL_COLOR2 : 'fillColor2',130 FILL_COLOR3 : 'fillColor3',131 SHAPE_COLUMN_CHART : 'mxgraph.mockup.graphics.columnChart'132};133134mxShapeMockupColumnChart.prototype.customProperties = [135 {name: 'strokeColor2', dispName: 'Bar Stroke Color', type: 'color', primary:true},136 {name: 'strokeColor3', dispName: 'Coord System Color', type: 'color', primary:true},137 {name: 'fillColor2', dispName: 'Bar1 Color', type: 'color', primary:true},138 {name: 'fillColor3', dispName: 'Bar2 Color', type: 'color', primary:true}139];140141/**142 * Function: paintVertexShape143 * 144 * Paints the vertex shape.145 */146mxShapeMockupColumnChart.prototype.paintVertexShape = function(c, x, y, w, h)147{148 c.translate(x, y);149150 this.background(c, x, y, w, h);151152 var bgFill = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, 'none');153154 if (bgFill !== 'none')155 {156 c.setShadow(false);157 }158159 this.bars(c, x, y, w, h);160};161162mxShapeMockupColumnChart.prototype.background = function(c, x, y, w, h, bgColor, frameColor)163{164 c.rect(0, 0, w, h);165 c.fillAndStroke();166};167168mxShapeMockupColumnChart.prototype.bars = function(c, x, y, w, h)169{170 var barStroke = mxUtils.getValue(this.style, mxShapeMockupColumnChart.prototype.cst.STROKE_COLOR2, 'none');171 var coordStroke = mxUtils.getValue(this.style, mxShapeMockupColumnChart.prototype.cst.STROKE_COLOR3, '#666666');172 var barFill1 = mxUtils.getValue(this.style, mxShapeMockupColumnChart.prototype.cst.FILL_COLOR2, '#008cff');173 var barFill2 = mxUtils.getValue(this.style, mxShapeMockupColumnChart.prototype.cst.FILL_COLOR3, '#dddddd');174175 var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1');176177 c.setStrokeColor(barStroke);178 c.setFillColor(barFill1);179 c.rect(w * 0.2, h * 0.25, w * 0.05, h * 0.75);180 c.fillAndStroke();181 c.rect(w * 0.45, h * 0.4, w * 0.05, h * 0.6);182 c.fillAndStroke();183 c.rect(w * 0.7, h * 0.05, w * 0.05, h * 0.95);184 c.fillAndStroke();185186 c.setFillColor(barFill2);187 c.rect(w * 0.25, h * 0.15, w * 0.05, h * 0.85);188 c.fillAndStroke();189 c.rect(w * 0.5, h * 0.35, w * 0.05, h * 0.65);190 c.fillAndStroke();191 c.rect(w * 0.75, h * 0.2, w * 0.05, h * 0.8);192 c.fillAndStroke();193194 c.setStrokeWidth(strokeWidth * 2);195 c.setStrokeColor(coordStroke);196197 c.setShadow(false);198199 c.begin();200 c.moveTo(0,0);201 c.lineTo(0, h);202 c.lineTo(w, h);203 c.stroke();204};205206mxCellRenderer.registerShape(mxShapeMockupColumnChart.prototype.cst.SHAPE_COLUMN_CHART, mxShapeMockupColumnChart);207208//**********************************************************************************************************************************************************209//Line Chart210//**********************************************************************************************************************************************************211/**212 * Extends mxShape.213 */214function mxShapeMockupLineChart(bounds, fill, stroke, strokewidth)215{216 mxShape.call(this);217 this.bounds = bounds;218 this.fill = fill;219 this.stroke = stroke;220 this.strokewidth = (strokewidth != null) ? strokewidth : 1;221};222223/**224 * Extends mxShape.225 */226mxUtils.extend(mxShapeMockupLineChart, mxShape);227228mxShapeMockupLineChart.prototype.cst = {229 STROKE_COLOR2 : 'strokeColor2',230 STROKE_COLOR3 : 'strokeColor3',231 STROKE_COLOR4 : 'strokeColor4',232 SHAPE_LINE_CHART : 'mxgraph.mockup.graphics.lineChart'233};234235mxShapeMockupLineChart.prototype.customProperties = [236 {name: 'strokeColor2', dispName: 'Coord. System Color', type: 'color', primary:true},237 {name: 'strokeColor3', dispName: 'Line1 Color', type: 'color', primary:true},238 {name: 'strokeColor4', dispName: 'Line2 Color', type: 'color', primary:true}239];240241/**242 * Function: paintVertexShape243 * 244 * Paints the vertex shape.245 */246mxShapeMockupLineChart.prototype.paintVertexShape = function(c, x, y, w, h)247{248 c.translate(x, y);249250 this.background(c, x, y, w, h);251252 var bgFill = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, 'none');253254 if (bgFill !== 'none')255 {256 c.setShadow(false);257 }258259 this.bars(c, x, y, w, h);260};261262mxShapeMockupLineChart.prototype.background = function(c, x, y, w, h, bgColor, frameColor)263{264 c.rect(0, 0, w, h);265 c.fillAndStroke();266};267268mxShapeMockupLineChart.prototype.bars = function(c, x, y, w, h)269{270 var coordStroke = mxUtils.getValue(this.style, mxShapeMockupLineChart.prototype.cst.STROKE_COLOR2, '#666666');271 var line1Stroke = mxUtils.getValue(this.style, mxShapeMockupLineChart.prototype.cst.STROKE_COLOR3, '#008cff');272 var line2Stroke = mxUtils.getValue(this.style, mxShapeMockupLineChart.prototype.cst.STROKE_COLOR4, '#dddddd');273274 var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1');275276 c.setStrokeWidth(strokeWidth * 2);277 c.setStrokeColor(line2Stroke);278 c.begin();279 c.moveTo(0, h);280 c.lineTo(w * 0.3, h * 0.5);281 c.lineTo(w * 0.6, h * 0.74);282 c.lineTo(w * 0.9, h * 0.24);283 c.stroke();284285 c.setStrokeColor(line1Stroke);286 c.begin();287 c.moveTo(0, h);288 c.lineTo(w * 0.3, h * 0.65);289 c.lineTo(w * 0.6, h * 0.6);290 c.lineTo(w * 0.9, h * 0.35);291 c.stroke();292293 c.setStrokeColor(coordStroke);294 c.setShadow(false);295296 c.begin();297 c.moveTo(0,0);298 c.lineTo(0, h);299 c.lineTo(w, h);300 c.stroke();301};302303mxCellRenderer.registerShape(mxShapeMockupLineChart.prototype.cst.SHAPE_LINE_CHART, mxShapeMockupLineChart);304305//**********************************************************************************************************************************************************306//Pie Chart307//**********************************************************************************************************************************************************308/**309 * Extends mxShape.310 */311function mxShapeMockupPieChart(bounds, fill, stroke, strokewidth)312{313 mxShape.call(this);314 this.bounds = bounds;315 this.fill = fill;316 this.stroke = stroke;317 this.strokewidth = (strokewidth != null) ? strokewidth : 1;318};319320/**321 * Extends mxShape.322 */323mxUtils.extend(mxShapeMockupPieChart, mxShape);324325mxShapeMockupPieChart.prototype.cst = {326 PARTS : 'parts',327 PART_COLORS : 'partColors',328 SHAPE_PIE_CHART : 'mxgraph.mockup.graphics.pieChart'329};330331mxShapeMockupPieChart.prototype.customProperties = [332 {name: 'partsCount', dispName: 'partsCount', type: 'int', defVal: 4, dependentProps: ['partColors', 'parts']},333 {name: 'partColors', dispName: 'Part Colors', type: 'staticArr', subType: 'color', sizeProperty: 'partsCount', subDefVal: '#FFFFFF', primary: true},334 {name: 'parts', dispName: 'Part Sizes', type: 'staticArr', subType: 'int', sizeProperty: 'partsCount', subDefVal: '10'},335];336337/**338 * Function: paintVertexShape339 * 340 * Paints the vertex shape.341 */342mxShapeMockupPieChart.prototype.paintVertexShape = function(c, x, y, w, h)343{344 c.translate(x, y);345 this.background(c, x, y, w, h);346 c.setShadow(false);347 this.foreground(c, x, y, w, h);348};349350mxShapeMockupPieChart.prototype.background = function(c, x, y, w, h, bgColor, frameColor)351{352 c.ellipse(0, 0, w, h);353 c.fillAndStroke();354};355356mxShapeMockupPieChart.prototype.foreground = function(c, x, y, w, h)357{358 var parts = mxUtils.getValue(this.style, mxShapeMockupPieChart.prototype.cst.PARTS, '10,20,30').toString().split(',');359 var partNum = parts.length;360 var partColors = mxUtils.parseColorList(mxUtils.getValue(this.style, mxShapeMockupPieChart.prototype.cst.PART_COLORS,361 '#333333,#666666,#999999').toString());362 var total = 0;363364 for (var i = 0; i < partNum; i++)365 {366 total = total + parseInt(parts[i], 10);367 }368 369 for (var i = 0; i < partNum; i++)370 {371 if (partColors.length > i)372 {373 c.setFillColor(partColors[i]);374 }375 else376 {377 c.setFillColor('#ff0000');378 }379380 var beginPerc = 0;381 var endPerc = 0;382 var currPerc = parseInt(parts[i], 10) / total;383384 if (currPerc === 0.5)385 {386 currPerc = 0.501;387 }388389 for (var j = 0; j < i; j++)390 {391 beginPerc = beginPerc + parseInt(parts[j], 10) / total;392 }393394 endPerc = currPerc + beginPerc;395 var startAngle = 2 * Math.PI * beginPerc;396 var endAngle = 2 * Math.PI * endPerc;397398 var x1 = w * 0.5 - w * Math.sin(startAngle) * 0.5;399 var y1 = h * 0.5 - h * Math.cos(startAngle) * 0.5;400 var x2 = w * 0.5 - w * Math.sin(endAngle) * 0.5;401 var y2 = h * 0.5 - h * Math.cos(endAngle) * 0.5; 402 var largeArc = 1;403 var sweep = 1;404405 if (endPerc - beginPerc < 0.5)406 {407 largeArc = 0;408 }409410 c.begin();411 c.moveTo(w * 0.5, h * 0.5);412 c.lineTo(x2, y2);413 c.arcTo(w * 0.5, h * 0.5, 0, largeArc, 1, x1, y1);414 c.close();415 c.fillAndStroke();416 }417};418419mxCellRenderer.registerShape(mxShapeMockupPieChart.prototype.cst.SHAPE_PIE_CHART, mxShapeMockupPieChart);420421//**********************************************************************************************************************************************************422//Icon Grid (LEGACY)423//**********************************************************************************************************************************************************424/**425 * Extends mxShape.426 */427function mxShapeMockupIconGrid(bounds, fill, stroke, strokewidth)428{429 mxShape.call(this);430 this.bounds = bounds;431 this.fill = fill;432 this.stroke = stroke;433 this.strokewidth = (strokewidth != null) ? strokewidth : 1;434};435436/**437 * Extends mxShape.438 */439mxUtils.extend(mxShapeMockupIconGrid, mxShape);440441mxShapeMockupIconGrid.prototype.cst = {442 GRID_SIZE : 'gridSize',443 SHAPE_ICON_GRID : 'mxgraph.mockup.graphics.iconGrid'444};445446/**447 * Function: paintVertexShape448 * 449 * Paints the vertex shape.450 */451mxShapeMockupIconGrid.prototype.paintVertexShape = function(c, x, y, w, h)452{453 c.translate(x, y);454 var gridSize = mxUtils.getValue(this.style, mxShapeMockupIconGrid.prototype.cst.GRID_SIZE, '3,3').toString().split(',');455 this.background(c, w, h, gridSize);456 c.setShadow(false);457458 this.foreground(c, w, h, gridSize);459};460461mxShapeMockupIconGrid.prototype.background = function(c, w, h, gridSize)462{463 var boxSizeX = w / (parseInt(gridSize[0],10) + (gridSize[0]-1) * 0.5);464 var boxSizeY = h / (parseInt(gridSize[1],10) + (gridSize[1]-1) * 0.5);465466 for (var i = 0; i < gridSize[0]; i++)467 {468 for (var j = 0; j < gridSize[1]; j++)469 {470 c.rect(boxSizeX * 1.5 * i, boxSizeY * 1.5 * j, boxSizeX, boxSizeY);471 c.fillAndStroke();472 }473 }474};475476mxShapeMockupIconGrid.prototype.foreground = function(c, w, h, gridSize)477{478 var boxSizeX = w / (parseInt(gridSize[0],10) + (gridSize[0]-1) * 0.5);479 var boxSizeY = h / (parseInt(gridSize[1],10) + (gridSize[1]-1) * 0.5);480481 for (var i = 0; i < gridSize[0]; i++)482 {483 for (var j = 0; j < gridSize[1]; j++)484 {485 c.begin();486 c.moveTo(boxSizeX * 1.5 * i, boxSizeY * 1.5 * j);487 c.lineTo(boxSizeX * 1.5 * i + boxSizeX, boxSizeY * 1.5 * j + boxSizeY);488 c.moveTo(boxSizeX * 1.5 * i + boxSizeX, boxSizeY * 1.5 * j);489 c.lineTo(boxSizeX * 1.5 * i, boxSizeY * 1.5 * j + boxSizeY);490 c.stroke();491 }492 }493};494495mxCellRenderer.registerShape(mxShapeMockupIconGrid.prototype.cst.SHAPE_ICON_GRID, mxShapeMockupIconGrid);496497//**********************************************************************************************************************************************************498//Bubble Chart499//**********************************************************************************************************************************************************500/**501 * Extends mxShape.502 */503function mxShapeMockupBubbleChart(bounds, fill, stroke, strokewidth)504{505 mxShape.call(this);506 this.bounds = bounds;507 this.fill = fill;508 this.stroke = stroke;509 this.strokewidth = (strokewidth != null) ? strokewidth : 1;510};511512/**513 * Extends mxShape.514 */515mxUtils.extend(mxShapeMockupBubbleChart, mxShape);516517mxShapeMockupBubbleChart.prototype.cst = {518 STROKE_COLOR2 : 'strokeColor2',519 STROKE_COLOR3 : 'strokeColor3',520 FILL_COLOR2 : 'fillColor2',521 FILL_COLOR3 : 'fillColor3',522 SHAPE_BUBBLE_CHART : 'mxgraph.mockup.graphics.bubbleChart'523};524525mxShapeMockupBubbleChart.prototype.customProperties = [526 {name: 'strokeColor2', dispName: 'Bubble Stroke Color', type: 'color', primary:true},527 {name: 'strokeColor3', dispName: 'Coord. System Color', type: 'color', primary:true},528 {name: 'fillColor2', dispName: 'Bubble1 Color', type: 'color', primary:true},529 {name: 'fillColor3', dispName: 'Bubble2 Color', type: 'color', primary:true}530];531532/**533 * Function: paintVertexShape534 * 535 * Paints the vertex shape.536 */537mxShapeMockupBubbleChart.prototype.paintVertexShape = function(c, x, y, w, h)538{539 c.translate(x, y);540541 this.background(c, x, y, w, h);542543 var bgFill = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, 'none');544545 if (bgFill !== 'none')546 {547 c.setShadow(false);548 }549550 this.bars(c, x, y, w, h);551};552553mxShapeMockupBubbleChart.prototype.background = function(c, x, y, w, h, bgColor, frameColor)554{555 c.rect(0, 0, w, h);556 c.fillAndStroke();557};558559mxShapeMockupBubbleChart.prototype.bars = function(c, x, y, w, h)560{561 var barStroke = mxUtils.getValue(this.style, mxShapeMockupBubbleChart.prototype.cst.STROKE_COLOR2, 'none');562 var coordStroke = mxUtils.getValue(this.style, mxShapeMockupBubbleChart.prototype.cst.STROKE_COLOR3, '#666666');563 var barFill1 = mxUtils.getValue(this.style, mxShapeMockupBubbleChart.prototype.cst.FILL_COLOR2, '#008cff');564 var barFill2 = mxUtils.getValue(this.style, mxShapeMockupBubbleChart.prototype.cst.FILL_COLOR3, '#dddddd');565566 var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1');567568 c.setStrokeColor(barStroke);569 c.setFillColor(barFill1);570571 var cx = w * 0.4;572 var cy = h * 0.45; 573 var r = Math.min(h, w) * 0.14;574 c.ellipse(cx - r, cy - r, 2 * r, 2 * r);575 c.fillAndStroke();576577 cx = w * 0.1;578 cy = h * 0.8; 579 r = Math.min(h, w) * 0.1;580 c.ellipse(cx - r, cy - r, 2 * r, 2 * r);581 c.fillAndStroke();582583 cx = w * 0.7;584 cy = h * 0.7; 585 r = Math.min(h, w) * 0.22;586 c.ellipse(cx - r, cy - r, 2 * r, 2 * r);587 c.fillAndStroke();588589 c.setFillColor(barFill2);590 cx = w * 0.15;591 cy = h * 0.25; 592 r = Math.min(h, w) * 0.19;593 c.ellipse(cx - r, cy - r, 2 * r, 2 * r);594 c.fillAndStroke();595596 cx = w * 0.48;597 cy = h * 0.7; 598 r = Math.min(h, w) * 0.12;599 c.ellipse(cx - r, cy - r, 2 * r, 2 * r);600 c.fillAndStroke();601602 cx = w * 0.74;603 cy = h * 0.17; 604 r = Math.min(h, w) * 0.1;605 c.ellipse(cx - r, cy - r, 2 * r, 2 * r);606 c.fillAndStroke();607608 c.setStrokeWidth(strokeWidth * 2);609 c.setStrokeColor(coordStroke);610611 c.setShadow(false);612 c.begin();613 c.moveTo(0,0);614 c.lineTo(0, h);615 c.lineTo(w, h);616 c.stroke();617};618619mxCellRenderer.registerShape(mxShapeMockupBubbleChart.prototype.cst.SHAPE_BUBBLE_CHART, mxShapeMockupBubbleChart);620621//**********************************************************************************************************************************************************622//Gauge623//**********************************************************************************************************************************************************624/**625 * Extends mxShape.626 */627function mxShapeMockupGauge(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 this.gaugePos = 25;635};636637/**638 * Extends mxShape.639 */640mxUtils.extend(mxShapeMockupGauge, mxShape);641642mxShapeMockupGauge.prototype.cst = {643 SCALE_COLORS : 'scaleColors',644 GAUGE_LABELS : 'gaugeLabels',645 NEEDLE_COLOR : 'needleColor',646 TEXT_COLOR : 'textColor',647 TEXT_SIZE : 'textSize',648 GAUGE_POS : 'gaugePos',649 SHAPE_GAUGE : 'mxgraph.mockup.graphics.gauge'650};651652mxShapeMockupGauge.prototype.customProperties = [653 {name: 'scaleColors', dispName: 'Scale Colors', type: 'string', primary:true},654 {name: 'needleColor', dispName: 'Needle Color', type: 'color', primary:true},655 {name: 'gaugePos', dispName: 'Needle Position', type: 'float', min:0, max:100, defVal:25}656];657658/**659 * Function: paintVertexShape660 * 661 * Paints the vertex shape.662 */663mxShapeMockupGauge.prototype.paintVertexShape = function(c, x, y, w, h)664{665 c.translate(x, y);666 this.background(c, w, h);667 c.setShadow(false);668 this.foreground(c, w, h);669};670671mxShapeMockupGauge.prototype.background = function(c, w, h)672{673 c.ellipse(0, 0, w, h);674 c.fillAndStroke();675};676677mxShapeMockupGauge.prototype.foreground = function(c, w, h)678{679 var gaugePos = mxUtils.getValue(this.style, mxShapeMockupGauge.prototype.cst.GAUGE_POS, '0');680 var scaleColors = decodeURIComponent(mxUtils.getValue(this.style, mxShapeMockupGauge.prototype.cst.SCALE_COLORS, '#888888,#aaaaaa,#444444').toString()).split(',');681 var gaugeLabels = mxUtils.getValue(this.style, mxShapeMockupGauge.prototype.cst.GAUGE_LABELS, 'CPU[%],0,100').toString().split(',');682 var needleColor = mxUtils.getValue(this.style, mxShapeMockupGauge.prototype.cst.NEEDLE_COLOR, '#008cff');683 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');684 var textColor = mxUtils.getValue(this.style, mxShapeMockupGauge.prototype.cst.TEXT_COLOR, '#666666');685 var textSize = mxUtils.getValue(this.style, mxShapeMockupGauge.prototype.cst.TEXT_SIZE, '12');686687 gaugePos = Math.max(0, gaugePos);688 gaugePos = Math.min(100, gaugePos);689690 c.setFillColor(scaleColors[1]);691 c.begin();692 c.moveTo(w * 0.05, h * 0.5);693 c.arcTo(w * 0.4, h * 0.4, 0, 0, 1, w * 0.95, h * 0.5);694 c.lineTo(w, h * 0.5);695 c.arcTo(w * 0.5, h * 0.5, 0, 0, 0, 0, h * 0.5);696 c.close();697 c.fill();698699 c.setFillColor(scaleColors[0]);700 c.begin();701 c.moveTo(w * 0.05, h * 0.5);702 c.arcTo(w * 0.45, h * 0.45, 0, 0, 0, w * 0.182, h * 0.818);703 c.lineTo(w * 0.146, h * 0.854);704 c.arcTo(w * 0.5, h * 0.5, 0, 0, 1, 0, h * 0.5);705 c.close();706 c.fill();707708 c.setFillColor(scaleColors[2]);709 c.begin();710 c.moveTo(w, h * 0.5);711 c.arcTo(w * 0.5, h * 0.5, 0, 0, 1, w * 0.854, h * 0.854);712 c.lineTo(w * 0.818, h * 0.818);713 c.arcTo(w * 0.45, h * 0.45, 0, 0, 0, w * 0.95, h * 0.5);714 c.close();715 c.fill();716717 c.setFontSize(textSize);718 c.setFontColor(textColor);719 c.text(w * 0.5, h * 0.3, 0, 0, gaugeLabels[0], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);720 c.text(w * 0.2, h * 0.85, 0, 0, gaugeLabels[1], mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);721 c.text(w * 0.8, h * 0.85, 0, 0, gaugeLabels[2], mxConstants.ALIGN_RIGHT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);722723 var needlePos = (0.75 * (2 * Math.PI * parseFloat(gaugePos) / 100) + 1.25 * Math.PI);724725 var x1 = w * 0.5 + w * 0.38 * Math.sin(needlePos);726 var y1 = h * 0.5 - h * 0.38 * Math.cos(needlePos);727 var x2 = 0;728 var y2 = 0;729 c.setFillColor(needleColor);730 c.begin();731 c.moveTo(x1, y1);732733 x1 = w * 0.5 + w * 0.05 * Math.cos(needlePos);734 y1 = h * 0.5 + h * 0.05 * Math.sin(needlePos);735 c.lineTo(x1, y1);736737 x2 = w * 0.5 + w * (-0.05) * Math.sin(needlePos);738 y2 = h * 0.5 - h * (-0.05) * Math.cos(needlePos);739 c.arcTo(w * 0.05, h * 0.05, 0, 0, 1, x2, y2);740741 x1 = x2;742 y1 = y2;743 x2 = w * 0.5 - w * 0.05 * Math.cos(needlePos);744 y2 = h * 0.5 - h * 0.05 * Math.sin(needlePos);745 c.arcTo(w * 0.05, h * 0.05, 0, 0, 1, x2, y2);746 c.close();747 c.fill();748749 c.setFillColor(fillColor);750 c.begin();751 c.moveTo(w * 0.49, h * 0.49);752 c.lineTo(w * 0.51, h * 0.49);753 c.lineTo(w * 0.51, h * 0.51);754 c.lineTo(w * 0.49, h * 0.51);755 c.close();756 c.fill();757758 c.begin();759 c.ellipse(0, 0, w, h);760 c.stroke();761762 c.begin();763 c.moveTo(w * 0.146, h * 0.854);764 c.lineTo(w * 0.219, h * 0.781);765 c.moveTo(w * 0.854, h * 0.854);766 c.lineTo(w * 0.781, h * 0.781);767 c.stroke();768};769770mxCellRenderer.registerShape(mxShapeMockupGauge.prototype.cst.SHAPE_GAUGE, mxShapeMockupGauge);771772Graph.handleFactory[mxShapeMockupGauge.prototype.cst.SHAPE_GAUGE] = function(state)773{774 var handles = [Graph.createHandle(state, ['gaugePos'], function(bounds)775 {776 var gaugePos = Math.max(0, Math.min(100, parseFloat(mxUtils.getValue(this.state.style, 'gaugePos', this.gaugePos))));777778 return new mxPoint(bounds.x + bounds.width * 0.2 + gaugePos * 0.6 * bounds.width / 100, bounds.y + bounds.height * 0.8);779 }, function(bounds, pt)780 {781 this.state.style['gaugePos'] = Math.round(1000 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 1000;782 })];783784 return handles;785}786787//**********************************************************************************************************************************************************788//Plot Chart789//**********************************************************************************************************************************************************790/**791 * Extends mxShape.792 */793function mxShapeMockupPlotChart(bounds, fill, stroke, strokewidth)794{795 mxShape.call(this);796 this.bounds = bounds;797 this.fill = fill;798 this.stroke = stroke;799 this.strokewidth = (strokewidth != null) ? strokewidth : 1;800};801802/**803 * Extends mxShape.804 */805mxUtils.extend(mxShapeMockupPlotChart, mxShape);806807mxShapeMockupPlotChart.prototype.cst = {808 STROKE_COLOR2 : 'strokeColor2',809 STROKE_COLOR3 : 'strokeColor3',810 SHAPES_COLORS : 'fillColor2',811 SHAPE_PLOT_CHART : 'mxgraph.mockup.graphics.plotChart'812};813814mxShapeMockupPlotChart.prototype.customProperties = [815 {name: 'strokeColor2', dispName: 'Bubble Stroke Color', type: 'color', primary:true},816 {name: 'strokeColor3', dispName: 'Coord. System Color', type: 'color', primary:true},817 {name: 'fillColor2', dispName: 'Shapes Color', type: 'string', primary:true}818];819820/**821 * Function: paintVertexShape822 * 823 * Paints the vertex shape.824 */825mxShapeMockupPlotChart.prototype.paintVertexShape = function(c, x, y, w, h)826{827 c.translate(x, y);828829 this.background(c, x, y, w, h);830831 var bgFill = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, 'none');832833 if (bgFill !== 'none')834 {835 c.setShadow(false);836 }837838 this.foreground(c, x, y, w, h);839};840841mxShapeMockupPlotChart.prototype.background = function(c, x, y, w, h, bgColor, frameColor)842{843 c.rect(0, 0, w, h);844 c.fillAndStroke();845};846847mxShapeMockupPlotChart.prototype.foreground = function(c, x, y, w, h)848{849 var shapeStroke = mxUtils.getValue(this.style, mxShapeMockupPlotChart.prototype.cst.STROKE_COLOR2, '#dddddd');850 var coordStroke = mxUtils.getValue(this.style, mxShapeMockupPlotChart.prototype.cst.STROKE_COLOR3, '#666666');851 var shapesColors = decodeURIComponent(mxUtils.getValue(this.style, mxShapeMockupPlotChart.prototype.cst.SHAPES_COLORS, '#00aaff,#0044ff,#008cff').toString()).split(',');852853 var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1');854 var shapeSize = Math.min(w, h) * 0.03;855856 c.setStrokeColor(shapeStroke);857 c.setFillColor(shapesColors[0]);858859 var cx = w * 0.2;860 var cy = h * 0.8;861 c.begin();862 c.moveTo(cx - shapeSize * 0.5, cy - shapeSize * 0.5);863 c.lineTo(cx + shapeSize * 0.5, cy - shapeSize * 0.5);864 c.lineTo(cx + shapeSize * 0.5, cy + shapeSize * 0.5);865 c.lineTo(cx - shapeSize * 0.5, cy + shapeSize * 0.5);866 c.close();867 c.fillAndStroke();868869 cx = w * 0.3;870 cy = h * 0.65;871 c.begin();872 c.moveTo(cx - shapeSize * 0.5, cy - shapeSize * 0.5);873 c.lineTo(cx + shapeSize * 0.5, cy - shapeSize * 0.5);874 c.lineTo(cx + shapeSize * 0.5, cy + shapeSize * 0.5);875 c.lineTo(cx - shapeSize * 0.5, cy + shapeSize * 0.5);876 c.close();877 c.fillAndStroke();878879 cx = w * 0.6;880 cy = h * 0.44;881 c.begin();882 c.moveTo(cx - shapeSize * 0.5, cy - shapeSize * 0.5);883 c.lineTo(cx + shapeSize * 0.5, cy - shapeSize * 0.5);884 c.lineTo(cx + shapeSize * 0.5, cy + shapeSize * 0.5);885 c.lineTo(cx - shapeSize * 0.5, cy + shapeSize * 0.5);886 c.close();887 c.fillAndStroke();888889 cx = w * 0.85;890 cy = h * 0.9;891 c.begin();892 c.moveTo(cx - shapeSize * 0.5, cy - shapeSize * 0.5);893 c.lineTo(cx + shapeSize * 0.5, cy - shapeSize * 0.5);894 c.lineTo(cx + shapeSize * 0.5, cy + shapeSize * 0.5);895 c.lineTo(cx - shapeSize * 0.5, cy + shapeSize * 0.5);896 c.close();897 c.fillAndStroke();898899 c.setFillColor(shapesColors[1]);900 cx = w * 0.08;901 cy = h * 0.65;902 c.begin();903 c.moveTo(cx, cy - shapeSize * 0.5);904 c.lineTo(cx + shapeSize * 0.5, cy + shapeSize * 0.5);905 c.lineTo(cx - shapeSize * 0.5, cy + shapeSize * 0.5);906 c.close();907 c.fillAndStroke();908909 cx = w * 0.58;910 cy = h * 0.85;911 c.begin();912 c.moveTo(cx, cy - shapeSize * 0.5);913 c.lineTo(cx + shapeSize * 0.5, cy + shapeSize * 0.5);914 c.lineTo(cx - shapeSize * 0.5, cy + shapeSize * 0.5);915 c.close();916 c.fillAndStroke();917918 cx = w * 0.72;919 cy = h * 0.92;920 c.begin();921 c.moveTo(cx, cy - shapeSize * 0.5);922 c.lineTo(cx + shapeSize * 0.5, cy + shapeSize * 0.5);923 c.lineTo(cx - shapeSize * 0.5, cy + shapeSize * 0.5);924 c.close();925 c.fillAndStroke();926927 c.setFillColor(shapesColors[2]);928 cx = w * 0.32;929 cy = h * 0.28;930 c.begin();931 c.moveTo(cx, cy - shapeSize * 0.75);932 c.lineTo(cx + shapeSize * 0.75, cy);933 c.lineTo(cx, cy + shapeSize * 0.75);934 c.lineTo(cx - shapeSize * 0.75, cy);935 c.close();936 c.fillAndStroke();937938 cx = w * 0.92;939 cy = h * 0.45;940 c.begin();941 c.moveTo(cx, cy - shapeSize * 0.75);942 c.lineTo(cx + shapeSize * 0.75, cy);943 c.lineTo(cx, cy + shapeSize * 0.75);944 c.lineTo(cx - shapeSize * 0.75, cy);945 c.close();946 c.fillAndStroke();947948 cx = w * 0.81;949 cy = h * 0.37;950 c.begin();951 c.moveTo(cx, cy - shapeSize * 0.75);952 c.lineTo(cx + shapeSize * 0.75, cy);953 c.lineTo(cx, cy + shapeSize * 0.75);954 c.lineTo(cx - shapeSize * 0.75, cy);955 c.close();956 c.fillAndStroke();957958 cx = w * 0.51;959 cy = h * 0.7;960 c.begin();961 c.moveTo(cx, cy - shapeSize * 0.75);962 c.lineTo(cx + shapeSize * 0.75, cy);963 c.lineTo(cx, cy + shapeSize * 0.75);964 c.lineTo(cx - shapeSize * 0.75, cy);965 c.close();966 c.fillAndStroke();967968 c.setStrokeWidth(strokeWidth * 2);969 c.setStrokeColor(coordStroke);970971 c.setShadow(false);972 c.begin();973 c.moveTo(0,0);974 c.lineTo(0, h);975 c.lineTo(w, h);976 c.stroke();977};978979mxCellRenderer.registerShape(mxShapeMockupPlotChart.prototype.cst.SHAPE_PLOT_CHART, mxShapeMockupPlotChart);980981//**********************************************************************************************************************************************************982//Gantt Chart983//**********************************************************************************************************************************************************984/**985 * Extends mxShape.986 */987function mxShapeMockupGanttChart(bounds, fill, stroke, strokewidth)988{989 mxShape.call(this);990 this.bounds = bounds;991 this.fill = fill;992 this.stroke = stroke;993 this.strokewidth = (strokewidth != null) ? strokewidth : 1;994};995996/**997 * Extends mxShape.998 */999mxUtils.extend(mxShapeMockupGanttChart, mxShape);10001001mxShapeMockupGanttChart.prototype.cst = {1002 STROKE_COLOR2 : 'strokeColor2',1003 STROKE_COLOR3 : 'strokeColor3',1004 SHAPES_COLORS : 'fillColor2',1005 TEXT_COLOR : 'textColor',1006 TEXT_SIZE : 'textSize',1007 SHAPE_GANTT_CHART : 'mxgraph.mockup.graphics.ganttChart'1008};10091010/**1011 * Function: paintVertexShape1012 * 1013 * Paints the vertex shape.1014 */1015mxShapeMockupGanttChart.prototype.paintVertexShape = function(c, x, y, w, h)1016{1017 c.translate(x, y);1018 this.background(c, x, y, w, h);1019 c.setShadow(false);1020 this.foreground(c, x, y, w, h);1021};10221023mxShapeMockupGanttChart.prototype.background = function(c, x, y, w, h, bgColor, frameColor)1024{1025 c.rect(0, 0, w, h);1026 c.fillAndStroke();1027};10281029mxShapeMockupGanttChart.prototype.foreground = function(c, x, y, w, h)1030{1031 var shapesColors = decodeURIComponent(mxUtils.getValue(this.style, mxShapeMockupGanttChart.prototype.cst.SHAPES_COLORS, '#888888,#bbbbbb').toString()).split(',');1032 var textColor = mxUtils.getValue(this.style, mxShapeMockupGanttChart.prototype.cst.TEXT_COLOR, '#666666');1033 var textSize = mxUtils.getValue(this.style, mxShapeMockupGanttChart.prototype.cst.TEXT_SIZE, '#12');10341035 c.begin();1036 c.moveTo(0, h * 0.13);1037 c.lineTo(w, h * 0.13);1038 c.moveTo(w * 0.4, 0);1039 c.lineTo(w * 0.4, h);1040 c.moveTo(w * 0.4, h * 0.065);1041 c.lineTo(w, h * 0.065);1042 c.moveTo(w * 0.03, 0);1043 c.lineTo(w * 0.03, h * 0.13);1044 c.moveTo(w * 0.1, 0);1045 c.lineTo(w * 0.1, h * 0.13);1046 c.moveTo(w * 0.315, 0);1047 c.lineTo(w * 0.315, h * 0.13);1048 c.moveTo(w * 0.45, h * 0.065);1049 c.lineTo(w * 0.45, h * 0.13);1050 c.moveTo(w * 0.5, h * 0.065);1051 c.lineTo(w * 0.5, h);1052 c.moveTo(w * 0.55, h * 0.065);1053 c.lineTo(w * 0.55, h * 0.13);1054 c.moveTo(w * 0.6, h * 0.065);1055 c.lineTo(w * 0.6, h);1056 c.moveTo(w * 0.65, h * 0.065);1057 c.lineTo(w * 0.65, h * 0.13);1058 c.moveTo(w * 0.7, h * 0.065);1059 c.lineTo(w * 0.7, h);1060 c.moveTo(w * 0.75, 0);1061 c.lineTo(w * 0.75, h * 0.13);1062 c.moveTo(w * 0.8, h * 0.065);1063 c.lineTo(w * 0.8, h);1064 c.moveTo(w * 0.85, h * 0.065);1065 c.lineTo(w * 0.85, h * 0.13);1066 c.moveTo(w * 0.9, h * 0.065);1067 c.lineTo(w * 0.9, h);1068 c.moveTo(w * 0.95, h * 0.065);1069 c.lineTo(w * 0.95, h * 0.13);1070 c.stroke();10711072 c.setFillColor(shapesColors[0]);1073 c.begin();1074 c.moveTo(w * 0.41, h * 0.15);1075 c.lineTo(w * 0.64, h * 0.15);1076 c.lineTo(w * 0.64, h * 0.18);1077 c.lineTo(w * 0.625, h * 0.21);1078 c.lineTo(w * 0.61, h * 0.18);1079 c.lineTo(w * 0.44, h * 0.18);1080 c.lineTo(w * 0.425, h * 0.21);1081 c.lineTo(w * 0.41, h * 0.18);1082 c.close();1083 c.moveTo(w * 0.41, h * 0.24);1084 c.lineTo(w * 0.49, h * 0.24);1085 c.lineTo(w * 0.49, h * 0.275);1086 c.lineTo(w * 0.41, h * 0.275);1087 c.close();1088 c.moveTo(w * 0.46, h * 0.31);1089 c.lineTo(w * 0.64, h * 0.31);1090 c.lineTo(w * 0.64, h * 0.345);1091 c.lineTo(w * 0.46, h * 0.345);1092 c.close();1093 c.moveTo(w * 0.56, h * 0.39);1094 c.lineTo(w * 0.69, h * 0.39);1095 c.lineTo(w * 0.69, h * 0.425);1096 c.lineTo(w * 0.56, h * 0.425);1097 c.close();1098 c.fill();10991100 c.setFillColor(shapesColors[1]);1101 c.begin();1102 c.moveTo(w * 0.46, h * 0.32);1103 c.lineTo(w * 0.58, h * 0.32);1104 c.lineTo(w * 0.58, h * 0.335);1105 c.lineTo(w * 0.46, h * 0.335);1106 c.close();1107 c.fill();1108};11091110mxCellRenderer.registerShape(mxShapeMockupGanttChart.prototype.cst.SHAPE_GANTT_CHART, mxShapeMockupGanttChart);11111112//**********************************************************************************************************************************************************1113//Simple Icon1114//**********************************************************************************************************************************************************1115/**1116* Extends mxShape.1117*/1118function mxShapeMockupSimpleIcon(bounds, fill, stroke, strokewidth)1119{1120 mxShape.call(this);1121 this.bounds = bounds;1122 this.fill = fill;1123 this.stroke = stroke;1124 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1125};11261127/**1128* Extends mxShape.1129*/1130mxUtils.extend(mxShapeMockupSimpleIcon, mxShape);11311132mxShapeMockupSimpleIcon.prototype.cst = {1133 SIMPLE_ICON : 'mxgraph.mockup.graphics.simpleIcon'1134};11351136/**1137* Function: paintVertexShape1138* 1139* Paints the vertex shape.1140*/1141mxShapeMockupSimpleIcon.prototype.paintVertexShape = function(c, x, y, w, h)1142{1143 c.translate(x, y);11441145 c.rect(0, 0, w, h);1146 c.fillAndStroke();1147 1148 c.begin();1149 c.moveTo(0, 0);1150 c.lineTo(w, h);1151 c.moveTo(0, h);1152 c.lineTo(w, 0);1153 c.stroke();1154};11551156mxCellRenderer.registerShape(mxShapeMockupSimpleIcon.prototype.cst.SIMPLE_ICON, mxShapeMockupSimpleIcon);11571158//**********************************************************************************************************************************************************1159//Anchor (a dummy shape without visuals used for anchoring)1160//**********************************************************************************************************************************************************1161/**1162* Extends mxShape.1163*/1164function mxShapeMockupGraphicsAnchor(bounds, fill, stroke, strokewidth)1165{1166 mxShape.call(this);1167 this.bounds = bounds;1168};11691170/**1171* Extends mxShape.1172*/1173mxUtils.extend(mxShapeMockupGraphicsAnchor, mxShape);11741175mxShapeMockupGraphicsAnchor.prototype.cst = {1176 ANCHOR : 'mxgraph.mockup.graphics.anchor'1177};11781179/**1180* Function: paintVertexShape1181* 1182* Paints the vertex shape.1183*/1184mxShapeMockupGraphicsAnchor.prototype.paintVertexShape = function(c, x, y, w, h)1185{1186};11871188mxCellRenderer.registerShape(mxShapeMockupGraphicsAnchor.prototype.cst.ANCHOR, mxShapeMockupGraphicsAnchor);11891190//**********************************************************************************************************************************************************1191//Rounded rectangle (adjustable rounding)1192//**********************************************************************************************************************************************************1193/**1194* Extends mxShape.1195*/1196function mxShapeMockupGraphicsRRect(bounds, fill, stroke, strokewidth)1197{1198 mxShape.call(this);1199 this.bounds = bounds;1200 this.fill = fill;1201 this.stroke = stroke;1202 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1203};12041205/**1206* Extends mxShape.1207*/1208mxUtils.extend(mxShapeMockupGraphicsRRect, mxShape);12091210mxShapeMockupGraphicsRRect.prototype.cst = {1211 RRECT : 'mxgraph.mockup.graphics.rrect',1212 R_SIZE : 'rSize'1213};12141215mxShapeMockupGraphicsRRect.prototype.customProperties = [1216 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10},1217];12181219/**1220* Function: paintVertexShape1221* 1222* Paints the vertex shape.1223*/1224mxShapeMockupGraphicsRRect.prototype.paintVertexShape = function(c, x, y, w, h)1225{1226 c.translate(x, y);12271228 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupGraphicsRRect.prototype.cst.R_SIZE, '10'));1229 c.roundrect(0, 0, w, h, rSize);1230 c.fillAndStroke();1231};12321233mxCellRenderer.registerShape(mxShapeMockupGraphicsRRect.prototype.cst.RRECT, mxShapeMockupGraphicsRRect);1234