1/** 2 * $Id: mxMockupGraphics.js,v 1.5 2013/05/22 12:28:49 mate Exp $ 3 * Copyright (c) 2006-2010, JGraph Ltd 4 */ 5 6//********************************************************************************************************************************************************** 7//Bar Chart 8//********************************************************************************************************************************************************** 9/** 10 * Extends mxShape. 11 */ 12function mxShapeMockupBarChart(bounds, fill, stroke, strokewidth) 13{ 14 mxShape.call(this); 15 this.bounds = bounds; 16 this.fill = fill; 17 this.stroke = stroke; 18 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 19}; 20 21/** 22 * Extends mxShape. 23 */ 24mxUtils.extend(mxShapeMockupBarChart, mxShape); 25 26mxShapeMockupBarChart.prototype.cst = { 27 STROKE_COLOR2 : 'strokeColor2', 28 STROKE_COLOR3 : 'strokeColor3', 29 FILL_COLOR2 : 'fillColor2', 30 FILL_COLOR3 : 'fillColor3', 31 SHAPE_BAR_CHART : 'mxgraph.mockup.graphics.barChart' 32}; 33 34mxShapeMockupBarChart.prototype.customProperties = [ 35 {name: 'strokeColor2', dispName: 'Stroke2 Color', type: 'color'}, 36 {name: 'strokeColor3', dispName: 'Stroke3 Color', type: 'color'}, 37 {name: 'fillColor2', dispName: 'Fill2 Color', type: 'color'}, 38 {name: 'fillColor3', dispName: 'Fill3 Color', type: 'color'} 39]; 40 41/** 42 * Function: paintVertexShape 43 * 44 * Paints the vertex shape. 45 */ 46mxShapeMockupBarChart.prototype.paintVertexShape = function(c, x, y, w, h) 47{ 48 c.translate(x, y); 49 50 this.background(c, x, y, w, h); 51 52 var bgFill = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, 'none'); 53 54 if (bgFill !== 'none') 55 { 56 c.setShadow(false); 57 } 58 59 this.bars(c, x, y, w, h); 60}; 61 62mxShapeMockupBarChart.prototype.background = function(c, x, y, w, h, bgColor, frameColor) 63{ 64 c.rect(0, 0, w, h); 65 c.fillAndStroke(); 66}; 67 68mxShapeMockupBarChart.prototype.bars = function(c, x, y, w, h) 69{ 70 var barStroke = mxUtils.getValue(this.style, mxShapeMockupBarChart.prototype.cst.STROKE_COLOR2, 'none'); 71 var coordStroke = mxUtils.getValue(this.style, mxShapeMockupBarChart.prototype.cst.STROKE_COLOR3, '#666666'); 72 var barFill1 = mxUtils.getValue(this.style, mxShapeMockupBarChart.prototype.cst.FILL_COLOR2, '#008cff'); 73 var barFill2 = mxUtils.getValue(this.style, mxShapeMockupBarChart.prototype.cst.FILL_COLOR3, '#dddddd'); 74 75 var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1'); 76 77 c.setStrokeColor(barStroke); 78 c.setFillColor(barFill1); 79 c.rect(0, h * 0.2, w * 0.75, h * 0.05); 80 c.fillAndStroke(); 81 c.rect(0, h * 0.45, w * 0.6, h * 0.05); 82 c.fillAndStroke(); 83 c.rect(0, h * 0.7, w * 0.95, h * 0.05); 84 c.fillAndStroke(); 85 86 c.setFillColor(barFill2); 87 c.rect(0, h * 0.25, w * 0.85, h * 0.05); 88 c.fillAndStroke(); 89 c.rect(0, h * 0.5, w * 0.65, h * 0.05); 90 c.fillAndStroke(); 91 c.rect(0, h * 0.75, w * 0.8, h * 0.05); 92 c.fillAndStroke(); 93 94 c.setStrokeWidth(strokeWidth * 2); 95 c.setStrokeColor(coordStroke); 96 97 c.setShadow(false); 98 c.begin(); 99 c.moveTo(0,0); 100 c.lineTo(0, h); 101 c.lineTo(w, h); 102 c.stroke(); 103}; 104 105mxCellRenderer.registerShape(mxShapeMockupBarChart.prototype.cst.SHAPE_BAR_CHART, mxShapeMockupBarChart); 106 107//********************************************************************************************************************************************************** 108//Column Chart 109//********************************************************************************************************************************************************** 110/** 111 * Extends mxShape. 112 */ 113function mxShapeMockupColumnChart(bounds, fill, stroke, strokewidth) 114{ 115 mxShape.call(this); 116 this.bounds = bounds; 117 this.fill = fill; 118 this.stroke = stroke; 119 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 120}; 121 122/** 123 * Extends mxShape. 124 */ 125mxUtils.extend(mxShapeMockupColumnChart, mxShape); 126 127mxShapeMockupColumnChart.prototype.cst = { 128 STROKE_COLOR2 : 'strokeColor2', 129 STROKE_COLOR3 : 'strokeColor3', 130 FILL_COLOR2 : 'fillColor2', 131 FILL_COLOR3 : 'fillColor3', 132 SHAPE_COLUMN_CHART : 'mxgraph.mockup.graphics.columnChart' 133}; 134 135mxShapeMockupColumnChart.prototype.customProperties = [ 136 {name: 'strokeColor2', dispName: 'Bar Stroke Color', type: 'color'}, 137 {name: 'strokeColor3', dispName: 'Coord System Color', type: 'color'}, 138 {name: 'fillColor2', dispName: 'Bar1 Color', type: 'color'}, 139 {name: 'fillColor3', dispName: 'Bar2 Color', type: 'color'} 140]; 141 142/** 143 * Function: paintVertexShape 144 * 145 * Paints the vertex shape. 146 */ 147mxShapeMockupColumnChart.prototype.paintVertexShape = function(c, x, y, w, h) 148{ 149 c.translate(x, y); 150 151 this.background(c, x, y, w, h); 152 153 var bgFill = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, 'none'); 154 155 if (bgFill !== 'none') 156 { 157 c.setShadow(false); 158 } 159 160 this.bars(c, x, y, w, h); 161}; 162 163mxShapeMockupColumnChart.prototype.background = function(c, x, y, w, h, bgColor, frameColor) 164{ 165 c.rect(0, 0, w, h); 166 c.fillAndStroke(); 167}; 168 169mxShapeMockupColumnChart.prototype.bars = function(c, x, y, w, h) 170{ 171 var barStroke = mxUtils.getValue(this.style, mxShapeMockupColumnChart.prototype.cst.STROKE_COLOR2, 'none'); 172 var coordStroke = mxUtils.getValue(this.style, mxShapeMockupColumnChart.prototype.cst.STROKE_COLOR3, '#666666'); 173 var barFill1 = mxUtils.getValue(this.style, mxShapeMockupColumnChart.prototype.cst.FILL_COLOR2, '#008cff'); 174 var barFill2 = mxUtils.getValue(this.style, mxShapeMockupColumnChart.prototype.cst.FILL_COLOR3, '#dddddd'); 175 176 var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1'); 177 178 c.setStrokeColor(barStroke); 179 c.setFillColor(barFill1); 180 c.rect(w * 0.2, h * 0.25, w * 0.05, h * 0.75); 181 c.fillAndStroke(); 182 c.rect(w * 0.45, h * 0.4, w * 0.05, h * 0.6); 183 c.fillAndStroke(); 184 c.rect(w * 0.7, h * 0.05, w * 0.05, h * 0.95); 185 c.fillAndStroke(); 186 187 c.setFillColor(barFill2); 188 c.rect(w * 0.25, h * 0.15, w * 0.05, h * 0.85); 189 c.fillAndStroke(); 190 c.rect(w * 0.5, h * 0.35, w * 0.05, h * 0.65); 191 c.fillAndStroke(); 192 c.rect(w * 0.75, h * 0.2, w * 0.05, h * 0.8); 193 c.fillAndStroke(); 194 195 c.setStrokeWidth(strokeWidth * 2); 196 c.setStrokeColor(coordStroke); 197 198 c.setShadow(false); 199 200 c.begin(); 201 c.moveTo(0,0); 202 c.lineTo(0, h); 203 c.lineTo(w, h); 204 c.stroke(); 205}; 206 207mxCellRenderer.registerShape(mxShapeMockupColumnChart.prototype.cst.SHAPE_COLUMN_CHART, mxShapeMockupColumnChart); 208 209//********************************************************************************************************************************************************** 210//Line Chart 211//********************************************************************************************************************************************************** 212/** 213 * Extends mxShape. 214 */ 215function mxShapeMockupLineChart(bounds, fill, stroke, strokewidth) 216{ 217 mxShape.call(this); 218 this.bounds = bounds; 219 this.fill = fill; 220 this.stroke = stroke; 221 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 222}; 223 224/** 225 * Extends mxShape. 226 */ 227mxUtils.extend(mxShapeMockupLineChart, mxShape); 228 229mxShapeMockupLineChart.prototype.cst = { 230 STROKE_COLOR2 : 'strokeColor2', 231 STROKE_COLOR3 : 'strokeColor3', 232 STROKE_COLOR4 : 'strokeColor4', 233 SHAPE_LINE_CHART : 'mxgraph.mockup.graphics.lineChart' 234}; 235 236mxShapeMockupLineChart.prototype.customProperties = [ 237 {name: 'strokeColor2', dispName: 'Coord. System Color', type: 'color'}, 238 {name: 'strokeColor3', dispName: 'Line1 Color', type: 'color'}, 239 {name: 'strokeColor4', dispName: 'Line2 Color', type: 'color'}, 240]; 241 242/** 243 * Function: paintVertexShape 244 * 245 * Paints the vertex shape. 246 */ 247mxShapeMockupLineChart.prototype.paintVertexShape = function(c, x, y, w, h) 248{ 249 c.translate(x, y); 250 251 this.background(c, x, y, w, h); 252 253 var bgFill = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, 'none'); 254 255 if (bgFill !== 'none') 256 { 257 c.setShadow(false); 258 } 259 260 this.bars(c, x, y, w, h); 261}; 262 263mxShapeMockupLineChart.prototype.background = function(c, x, y, w, h, bgColor, frameColor) 264{ 265 c.rect(0, 0, w, h); 266 c.fillAndStroke(); 267}; 268 269mxShapeMockupLineChart.prototype.bars = function(c, x, y, w, h) 270{ 271 var coordStroke = mxUtils.getValue(this.style, mxShapeMockupLineChart.prototype.cst.STROKE_COLOR2, '#666666'); 272 var line1Stroke = mxUtils.getValue(this.style, mxShapeMockupLineChart.prototype.cst.STROKE_COLOR3, '#008cff'); 273 var line2Stroke = mxUtils.getValue(this.style, mxShapeMockupLineChart.prototype.cst.STROKE_COLOR4, '#dddddd'); 274 275 var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1'); 276 277 c.setStrokeWidth(strokeWidth * 2); 278 c.setStrokeColor(line2Stroke); 279 c.begin(); 280 c.moveTo(0, h); 281 c.lineTo(w * 0.3, h * 0.5); 282 c.lineTo(w * 0.6, h * 0.74); 283 c.lineTo(w * 0.9, h * 0.24); 284 c.stroke(); 285 286 c.setStrokeColor(line1Stroke); 287 c.begin(); 288 c.moveTo(0, h); 289 c.lineTo(w * 0.3, h * 0.65); 290 c.lineTo(w * 0.6, h * 0.6); 291 c.lineTo(w * 0.9, h * 0.35); 292 c.stroke(); 293 294 c.setStrokeColor(coordStroke); 295 c.setShadow(false); 296 297 c.begin(); 298 c.moveTo(0,0); 299 c.lineTo(0, h); 300 c.lineTo(w, h); 301 c.stroke(); 302}; 303 304mxCellRenderer.registerShape(mxShapeMockupLineChart.prototype.cst.SHAPE_LINE_CHART, mxShapeMockupLineChart); 305 306//********************************************************************************************************************************************************** 307//Pie Chart 308//********************************************************************************************************************************************************** 309/** 310 * Extends mxShape. 311 */ 312function mxShapeMockupPieChart(bounds, fill, stroke, strokewidth) 313{ 314 mxShape.call(this); 315 this.bounds = bounds; 316 this.fill = fill; 317 this.stroke = stroke; 318 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 319}; 320 321/** 322 * Extends mxShape. 323 */ 324mxUtils.extend(mxShapeMockupPieChart, mxShape); 325 326mxShapeMockupPieChart.prototype.cst = { 327 PARTS : 'parts', 328 PART_COLORS : 'partColors', 329 SHAPE_PIE_CHART : 'mxgraph.mockup.graphics.pieChart' 330}; 331 332mxShapeMockupPieChart.prototype.customProperties = [ 333 {name: 'partsCount', dispName: 'partsCount', type: 'int', defVal: 4, dependentProps: ['partColors', 'parts']}, 334 {name: 'partColors', dispName: 'Part Colors', type: 'staticArr', subType: 'color', sizeProperty: 'partsCount', subDefVal: '#FFFFFF'}, 335 {name: 'parts', dispName: 'Part Sizes', type: 'staticArr', subType: 'int', sizeProperty: 'partsCount', subDefVal: '10'}, 336]; 337 338/** 339 * Function: paintVertexShape 340 * 341 * Paints the vertex shape. 342 */ 343mxShapeMockupPieChart.prototype.paintVertexShape = function(c, x, y, w, h) 344{ 345 c.translate(x, y); 346 this.background(c, x, y, w, h); 347 c.setShadow(false); 348 this.foreground(c, x, y, w, h); 349}; 350 351mxShapeMockupPieChart.prototype.background = function(c, x, y, w, h, bgColor, frameColor) 352{ 353 c.ellipse(0, 0, w, h); 354 c.fillAndStroke(); 355}; 356 357mxShapeMockupPieChart.prototype.foreground = function(c, x, y, w, h) 358{ 359 var parts = mxUtils.getValue(this.style, mxShapeMockupPieChart.prototype.cst.PARTS, '10,20,30').toString().split(','); 360 var partNum = parts.length; 361 var partColors = mxUtils.getValue(this.style, mxShapeMockupPieChart.prototype.cst.PART_COLORS, '#333333,#666666,#999999').toString().split(','); 362 var total = 0; 363 364 for (var i = 0; i < partNum; i++) 365 { 366 total = total + parseInt(parts[i], 10); 367 } 368 369 370 for (var i = 0; i < partNum; i++) 371 { 372 if (partColors.length > i) 373 { 374 c.setFillColor(partColors[i]); 375 } 376 else 377 { 378 c.setFillColor('#ff0000'); 379 } 380 381 var beginPerc = 0; 382 var endPerc = 0; 383 var currPerc = parseInt(parts[i], 10) / total; 384 385 if (currPerc === 0.5) 386 { 387 currPerc = 0.501; 388 } 389 390 for (var j = 0; j < i; j++) 391 { 392 beginPerc = beginPerc + parseInt(parts[j], 10) / total; 393 } 394 395 endPerc = currPerc + beginPerc; 396 var startAngle = 2 * Math.PI * beginPerc; 397 var endAngle = 2 * Math.PI * endPerc; 398 399 var x1 = w * 0.5 - w * Math.sin(startAngle) * 0.5; 400 var y1 = h * 0.5 - h * Math.cos(startAngle) * 0.5; 401 var x2 = w * 0.5 - w * Math.sin(endAngle) * 0.5; 402 var y2 = h * 0.5 - h * Math.cos(endAngle) * 0.5; 403 var largeArc = 1; 404 var sweep = 1; 405 406 if (endPerc - beginPerc < 0.5) 407 { 408 largeArc = 0; 409 } 410 411 c.begin(); 412 c.moveTo(w * 0.5, h * 0.5); 413 c.lineTo(x2, y2); 414 c.arcTo(w * 0.5, h * 0.5, 0, largeArc, 1, x1, y1); 415 c.close(); 416 c.fillAndStroke(); 417 } 418}; 419 420mxCellRenderer.registerShape(mxShapeMockupPieChart.prototype.cst.SHAPE_PIE_CHART, mxShapeMockupPieChart); 421 422//********************************************************************************************************************************************************** 423//Icon Grid (LEGACY) 424//********************************************************************************************************************************************************** 425/** 426 * Extends mxShape. 427 */ 428function mxShapeMockupIconGrid(bounds, fill, stroke, strokewidth) 429{ 430 mxShape.call(this); 431 this.bounds = bounds; 432 this.fill = fill; 433 this.stroke = stroke; 434 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 435}; 436 437/** 438 * Extends mxShape. 439 */ 440mxUtils.extend(mxShapeMockupIconGrid, mxShape); 441 442mxShapeMockupIconGrid.prototype.cst = { 443 GRID_SIZE : 'gridSize', 444 SHAPE_ICON_GRID : 'mxgraph.mockup.graphics.iconGrid' 445}; 446 447/** 448 * Function: paintVertexShape 449 * 450 * Paints the vertex shape. 451 */ 452mxShapeMockupIconGrid.prototype.paintVertexShape = function(c, x, y, w, h) 453{ 454 c.translate(x, y); 455 var gridSize = mxUtils.getValue(this.style, mxShapeMockupIconGrid.prototype.cst.GRID_SIZE, '3,3').toString().split(','); 456 this.background(c, w, h, gridSize); 457 c.setShadow(false); 458 459 this.foreground(c, w, h, gridSize); 460}; 461 462mxShapeMockupIconGrid.prototype.background = function(c, w, h, gridSize) 463{ 464 var boxSizeX = w / (parseInt(gridSize[0],10) + (gridSize[0]-1) * 0.5); 465 var boxSizeY = h / (parseInt(gridSize[1],10) + (gridSize[1]-1) * 0.5); 466 467 for (var i = 0; i < gridSize[0]; i++) 468 { 469 for (var j = 0; j < gridSize[1]; j++) 470 { 471 c.rect(boxSizeX * 1.5 * i, boxSizeY * 1.5 * j, boxSizeX, boxSizeY); 472 c.fillAndStroke(); 473 } 474 } 475}; 476 477mxShapeMockupIconGrid.prototype.foreground = function(c, w, h, gridSize) 478{ 479 var boxSizeX = w / (parseInt(gridSize[0],10) + (gridSize[0]-1) * 0.5); 480 var boxSizeY = h / (parseInt(gridSize[1],10) + (gridSize[1]-1) * 0.5); 481 482 for (var i = 0; i < gridSize[0]; i++) 483 { 484 for (var j = 0; j < gridSize[1]; j++) 485 { 486 c.begin(); 487 c.moveTo(boxSizeX * 1.5 * i, boxSizeY * 1.5 * j); 488 c.lineTo(boxSizeX * 1.5 * i + boxSizeX, boxSizeY * 1.5 * j + boxSizeY); 489 c.moveTo(boxSizeX * 1.5 * i + boxSizeX, boxSizeY * 1.5 * j); 490 c.lineTo(boxSizeX * 1.5 * i, boxSizeY * 1.5 * j + boxSizeY); 491 c.stroke(); 492 } 493 } 494}; 495 496mxCellRenderer.registerShape(mxShapeMockupIconGrid.prototype.cst.SHAPE_ICON_GRID, mxShapeMockupIconGrid); 497 498//********************************************************************************************************************************************************** 499//Bubble Chart 500//********************************************************************************************************************************************************** 501/** 502 * Extends mxShape. 503 */ 504function mxShapeMockupBubbleChart(bounds, fill, stroke, strokewidth) 505{ 506 mxShape.call(this); 507 this.bounds = bounds; 508 this.fill = fill; 509 this.stroke = stroke; 510 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 511}; 512 513/** 514 * Extends mxShape. 515 */ 516mxUtils.extend(mxShapeMockupBubbleChart, mxShape); 517 518mxShapeMockupBubbleChart.prototype.cst = { 519 STROKE_COLOR2 : 'strokeColor2', 520 STROKE_COLOR3 : 'strokeColor3', 521 FILL_COLOR2 : 'fillColor2', 522 FILL_COLOR3 : 'fillColor3', 523 SHAPE_BUBBLE_CHART : 'mxgraph.mockup.graphics.bubbleChart' 524}; 525 526mxShapeMockupBubbleChart.prototype.customProperties = [ 527 {name: 'strokeColor2', dispName: 'Bubble Stroke Color', type: 'color'}, 528 {name: 'strokeColor3', dispName: 'Coord. System Color', type: 'color'}, 529 {name: 'fillColor2', dispName: 'Bubble1 Color', type: 'color'}, 530 {name: 'fillColor3', dispName: 'Bubble2 Color', type: 'color'} 531]; 532 533/** 534 * Function: paintVertexShape 535 * 536 * Paints the vertex shape. 537 */ 538mxShapeMockupBubbleChart.prototype.paintVertexShape = function(c, x, y, w, h) 539{ 540 c.translate(x, y); 541 542 this.background(c, x, y, w, h); 543 544 var bgFill = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, 'none'); 545 546 if (bgFill !== 'none') 547 { 548 c.setShadow(false); 549 } 550 551 this.bars(c, x, y, w, h); 552}; 553 554mxShapeMockupBubbleChart.prototype.background = function(c, x, y, w, h, bgColor, frameColor) 555{ 556 c.rect(0, 0, w, h); 557 c.fillAndStroke(); 558}; 559 560mxShapeMockupBubbleChart.prototype.bars = function(c, x, y, w, h) 561{ 562 var barStroke = mxUtils.getValue(this.style, mxShapeMockupBubbleChart.prototype.cst.STROKE_COLOR2, 'none'); 563 var coordStroke = mxUtils.getValue(this.style, mxShapeMockupBubbleChart.prototype.cst.STROKE_COLOR3, '#666666'); 564 var barFill1 = mxUtils.getValue(this.style, mxShapeMockupBubbleChart.prototype.cst.FILL_COLOR2, '#008cff'); 565 var barFill2 = mxUtils.getValue(this.style, mxShapeMockupBubbleChart.prototype.cst.FILL_COLOR3, '#dddddd'); 566 567 var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1'); 568 569 c.setStrokeColor(barStroke); 570 c.setFillColor(barFill1); 571 572 var cx = w * 0.4; 573 var cy = h * 0.45; 574 var r = Math.min(h, w) * 0.14; 575 c.ellipse(cx - r, cy - r, 2 * r, 2 * r); 576 c.fillAndStroke(); 577 578 cx = w * 0.1; 579 cy = h * 0.8; 580 r = Math.min(h, w) * 0.1; 581 c.ellipse(cx - r, cy - r, 2 * r, 2 * r); 582 c.fillAndStroke(); 583 584 cx = w * 0.7; 585 cy = h * 0.7; 586 r = Math.min(h, w) * 0.22; 587 c.ellipse(cx - r, cy - r, 2 * r, 2 * r); 588 c.fillAndStroke(); 589 590 c.setFillColor(barFill2); 591 cx = w * 0.15; 592 cy = h * 0.25; 593 r = Math.min(h, w) * 0.19; 594 c.ellipse(cx - r, cy - r, 2 * r, 2 * r); 595 c.fillAndStroke(); 596 597 cx = w * 0.48; 598 cy = h * 0.7; 599 r = Math.min(h, w) * 0.12; 600 c.ellipse(cx - r, cy - r, 2 * r, 2 * r); 601 c.fillAndStroke(); 602 603 cx = w * 0.74; 604 cy = h * 0.17; 605 r = Math.min(h, w) * 0.1; 606 c.ellipse(cx - r, cy - r, 2 * r, 2 * r); 607 c.fillAndStroke(); 608 609 c.setStrokeWidth(strokeWidth * 2); 610 c.setStrokeColor(coordStroke); 611 612 c.setShadow(false); 613 c.begin(); 614 c.moveTo(0,0); 615 c.lineTo(0, h); 616 c.lineTo(w, h); 617 c.stroke(); 618}; 619 620mxCellRenderer.registerShape(mxShapeMockupBubbleChart.prototype.cst.SHAPE_BUBBLE_CHART, mxShapeMockupBubbleChart); 621 622//********************************************************************************************************************************************************** 623//Gauge 624//********************************************************************************************************************************************************** 625/** 626 * Extends mxShape. 627 */ 628function mxShapeMockupGauge(bounds, fill, stroke, strokewidth) 629{ 630 mxShape.call(this); 631 this.bounds = bounds; 632 this.fill = fill; 633 this.stroke = stroke; 634 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 635 this.gaugePos = 25; 636}; 637 638/** 639 * Extends mxShape. 640 */ 641mxUtils.extend(mxShapeMockupGauge, mxShape); 642 643mxShapeMockupGauge.prototype.cst = { 644 SCALE_COLORS : 'scaleColors', 645 GAUGE_LABELS : 'gaugeLabels', 646 NEEDLE_COLOR : 'needleColor', 647 TEXT_COLOR : 'textColor', 648 TEXT_SIZE : 'textSize', 649 GAUGE_POS : 'gaugePos', 650 SHAPE_GAUGE : 'mxgraph.mockup.graphics.gauge' 651}; 652 653mxShapeMockupGauge.prototype.customProperties = [ 654 {name: 'scaleColors', dispName: 'Scale Colors', type: 'String'}, 655 {name: 'needleColor', dispName: 'Needle Color', type: 'color'}, 656 {name: 'gaugePos', dispName: 'Needle Position', type: 'float', min:0, max:100, defVal:25} 657]; 658 659/** 660 * Function: paintVertexShape 661 * 662 * Paints the vertex shape. 663 */ 664mxShapeMockupGauge.prototype.paintVertexShape = function(c, x, y, w, h) 665{ 666 c.translate(x, y); 667 this.background(c, w, h); 668 c.setShadow(false); 669 this.foreground(c, w, h); 670}; 671 672mxShapeMockupGauge.prototype.background = function(c, w, h) 673{ 674 c.ellipse(0, 0, w, h); 675 c.fillAndStroke(); 676}; 677 678mxShapeMockupGauge.prototype.foreground = function(c, w, h) 679{ 680 var gaugePos = mxUtils.getValue(this.style, mxShapeMockupGauge.prototype.cst.GAUGE_POS, '0'); 681 var scaleColors = mxUtils.getValue(this.style, mxShapeMockupGauge.prototype.cst.SCALE_COLORS, '#888888,#aaaaaa,#444444').toString().split(','); 682 var gaugeLabels = mxUtils.getValue(this.style, mxShapeMockupGauge.prototype.cst.GAUGE_LABELS, 'CPU[%],0,100').toString().split(','); 683 var needleColor = mxUtils.getValue(this.style, mxShapeMockupGauge.prototype.cst.NEEDLE_COLOR, '#008cff'); 684 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff'); 685 var textColor = mxUtils.getValue(this.style, mxShapeMockupGauge.prototype.cst.TEXT_COLOR, '#666666'); 686 var textSize = mxUtils.getValue(this.style, mxShapeMockupGauge.prototype.cst.TEXT_SIZE, '12'); 687 688 gaugePos = Math.max(0, gaugePos); 689 gaugePos = Math.min(100, gaugePos); 690 691 c.setFillColor(scaleColors[1]); 692 c.begin(); 693 c.moveTo(w * 0.05, h * 0.5); 694 c.arcTo(w * 0.4, h * 0.4, 0, 0, 1, w * 0.95, h * 0.5); 695 c.lineTo(w, h * 0.5); 696 c.arcTo(w * 0.5, h * 0.5, 0, 0, 0, 0, h * 0.5); 697 c.close(); 698 c.fill(); 699 700 c.setFillColor(scaleColors[0]); 701 c.begin(); 702 c.moveTo(w * 0.05, h * 0.5); 703 c.arcTo(w * 0.45, h * 0.45, 0, 0, 0, w * 0.182, h * 0.818); 704 c.lineTo(w * 0.146, h * 0.854); 705 c.arcTo(w * 0.5, h * 0.5, 0, 0, 1, 0, h * 0.5); 706 c.close(); 707 c.fill(); 708 709 c.setFillColor(scaleColors[2]); 710 c.begin(); 711 c.moveTo(w, h * 0.5); 712 c.arcTo(w * 0.5, h * 0.5, 0, 0, 1, w * 0.854, h * 0.854); 713 c.lineTo(w * 0.818, h * 0.818); 714 c.arcTo(w * 0.45, h * 0.45, 0, 0, 0, w * 0.95, h * 0.5); 715 c.close(); 716 c.fill(); 717 718 c.setFontSize(textSize); 719 c.setFontColor(textColor); 720 c.text(w * 0.5, h * 0.3, 0, 0, gaugeLabels[0], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 721 c.text(w * 0.2, h * 0.85, 0, 0, gaugeLabels[1], mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 722 c.text(w * 0.8, h * 0.85, 0, 0, gaugeLabels[2], mxConstants.ALIGN_RIGHT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 723 724 var needlePos = (0.75 * (2 * Math.PI * parseFloat(gaugePos) / 100) + 1.25 * Math.PI); 725 726 var x1 = w * 0.5 + w * 0.38 * Math.sin(needlePos); 727 var y1 = h * 0.5 - h * 0.38 * Math.cos(needlePos); 728 var x2 = 0; 729 var y2 = 0; 730 c.setFillColor(needleColor); 731 c.begin(); 732 c.moveTo(x1, y1); 733 734 x1 = w * 0.5 + w * 0.05 * Math.cos(needlePos); 735 y1 = h * 0.5 + h * 0.05 * Math.sin(needlePos); 736 c.lineTo(x1, y1); 737 738 x2 = w * 0.5 + w * (-0.05) * Math.sin(needlePos); 739 y2 = h * 0.5 - h * (-0.05) * Math.cos(needlePos); 740 c.arcTo(w * 0.05, h * 0.05, 0, 0, 1, x2, y2); 741 742 x1 = x2; 743 y1 = y2; 744 x2 = w * 0.5 - w * 0.05 * Math.cos(needlePos); 745 y2 = h * 0.5 - h * 0.05 * Math.sin(needlePos); 746 c.arcTo(w * 0.05, h * 0.05, 0, 0, 1, x2, y2); 747 c.close(); 748 c.fill(); 749 750 c.setFillColor(fillColor); 751 c.begin(); 752 c.moveTo(w * 0.49, h * 0.49); 753 c.lineTo(w * 0.51, h * 0.49); 754 c.lineTo(w * 0.51, h * 0.51); 755 c.lineTo(w * 0.49, h * 0.51); 756 c.close(); 757 c.fill(); 758 759 c.begin(); 760 c.ellipse(0, 0, w, h); 761 c.stroke(); 762 763 c.begin(); 764 c.moveTo(w * 0.146, h * 0.854); 765 c.lineTo(w * 0.219, h * 0.781); 766 c.moveTo(w * 0.854, h * 0.854); 767 c.lineTo(w * 0.781, h * 0.781); 768 c.stroke(); 769}; 770 771mxCellRenderer.registerShape(mxShapeMockupGauge.prototype.cst.SHAPE_GAUGE, mxShapeMockupGauge); 772 773Graph.handleFactory[mxShapeMockupGauge.prototype.cst.SHAPE_GAUGE] = function(state) 774{ 775 var handles = [Graph.createHandle(state, ['gaugePos'], function(bounds) 776 { 777 var gaugePos = Math.max(0, Math.min(100, parseFloat(mxUtils.getValue(this.state.style, 'gaugePos', this.gaugePos)))); 778 779 return new mxPoint(bounds.x + bounds.width * 0.2 + gaugePos * 0.6 * bounds.width / 100, bounds.y + bounds.height * 0.8); 780 }, function(bounds, pt) 781 { 782 this.state.style['gaugePos'] = Math.round(1000 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 1000; 783 })]; 784 785 return handles; 786} 787 788//********************************************************************************************************************************************************** 789//Plot Chart 790//********************************************************************************************************************************************************** 791/** 792 * Extends mxShape. 793 */ 794function mxShapeMockupPlotChart(bounds, fill, stroke, strokewidth) 795{ 796 mxShape.call(this); 797 this.bounds = bounds; 798 this.fill = fill; 799 this.stroke = stroke; 800 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 801}; 802 803/** 804 * Extends mxShape. 805 */ 806mxUtils.extend(mxShapeMockupPlotChart, mxShape); 807 808mxShapeMockupPlotChart.prototype.cst = { 809 STROKE_COLOR2 : 'strokeColor2', 810 STROKE_COLOR3 : 'strokeColor3', 811 SHAPES_COLORS : 'fillColor2', 812 SHAPE_PLOT_CHART : 'mxgraph.mockup.graphics.plotChart' 813}; 814 815mxShapeMockupPlotChart.prototype.customProperties = [ 816 {name: 'strokeColor2', dispName: 'Bubble Stroke Color', type: 'color'}, 817 {name: 'strokeColor3', dispName: 'Coord. System Color', type: 'color'}, 818 {name: 'fillColor2', dispName: 'Shapes Color', type: 'string'} 819]; 820 821/** 822 * Function: paintVertexShape 823 * 824 * Paints the vertex shape. 825 */ 826mxShapeMockupPlotChart.prototype.paintVertexShape = function(c, x, y, w, h) 827{ 828 c.translate(x, y); 829 830 this.background(c, x, y, w, h); 831 832 var bgFill = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, 'none'); 833 834 if (bgFill !== 'none') 835 { 836 c.setShadow(false); 837 } 838 839 this.foreground(c, x, y, w, h); 840}; 841 842mxShapeMockupPlotChart.prototype.background = function(c, x, y, w, h, bgColor, frameColor) 843{ 844 c.rect(0, 0, w, h); 845 c.fillAndStroke(); 846}; 847 848mxShapeMockupPlotChart.prototype.foreground = function(c, x, y, w, h) 849{ 850 var shapeStroke = mxUtils.getValue(this.style, mxShapeMockupPlotChart.prototype.cst.STROKE_COLOR2, '#dddddd'); 851 var coordStroke = mxUtils.getValue(this.style, mxShapeMockupPlotChart.prototype.cst.STROKE_COLOR3, '#666666'); 852 var shapesColors = mxUtils.getValue(this.style, mxShapeMockupPlotChart.prototype.cst.SHAPES_COLORS, '#00aaff,#0044ff,#008cff').toString().split(','); 853 854 var strokeWidth = mxUtils.getValue(this.style, mxConstants.STYLE_STROKEWIDTH, '1'); 855 var shapeSize = Math.min(w, h) * 0.03; 856 857 c.setStrokeColor(shapeStroke); 858 c.setFillColor(shapesColors[0]); 859 860 var cx = w * 0.2; 861 var cy = h * 0.8; 862 c.begin(); 863 c.moveTo(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.lineTo(cx - shapeSize * 0.5, cy + shapeSize * 0.5); 867 c.close(); 868 c.fillAndStroke(); 869 870 cx = w * 0.3; 871 cy = h * 0.65; 872 c.begin(); 873 c.moveTo(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.lineTo(cx - shapeSize * 0.5, cy + shapeSize * 0.5); 877 c.close(); 878 c.fillAndStroke(); 879 880 cx = w * 0.6; 881 cy = h * 0.44; 882 c.begin(); 883 c.moveTo(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.lineTo(cx - shapeSize * 0.5, cy + shapeSize * 0.5); 887 c.close(); 888 c.fillAndStroke(); 889 890 cx = w * 0.85; 891 cy = h * 0.9; 892 c.begin(); 893 c.moveTo(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.lineTo(cx - shapeSize * 0.5, cy + shapeSize * 0.5); 897 c.close(); 898 c.fillAndStroke(); 899 900 c.setFillColor(shapesColors[1]); 901 cx = w * 0.08; 902 cy = h * 0.65; 903 c.begin(); 904 c.moveTo(cx, cy - shapeSize * 0.5); 905 c.lineTo(cx + shapeSize * 0.5, cy + shapeSize * 0.5); 906 c.lineTo(cx - shapeSize * 0.5, cy + shapeSize * 0.5); 907 c.close(); 908 c.fillAndStroke(); 909 910 cx = w * 0.58; 911 cy = h * 0.85; 912 c.begin(); 913 c.moveTo(cx, cy - shapeSize * 0.5); 914 c.lineTo(cx + shapeSize * 0.5, cy + shapeSize * 0.5); 915 c.lineTo(cx - shapeSize * 0.5, cy + shapeSize * 0.5); 916 c.close(); 917 c.fillAndStroke(); 918 919 cx = w * 0.72; 920 cy = h * 0.92; 921 c.begin(); 922 c.moveTo(cx, cy - shapeSize * 0.5); 923 c.lineTo(cx + shapeSize * 0.5, cy + shapeSize * 0.5); 924 c.lineTo(cx - shapeSize * 0.5, cy + shapeSize * 0.5); 925 c.close(); 926 c.fillAndStroke(); 927 928 c.setFillColor(shapesColors[2]); 929 cx = w * 0.32; 930 cy = h * 0.28; 931 c.begin(); 932 c.moveTo(cx, cy - shapeSize * 0.75); 933 c.lineTo(cx + shapeSize * 0.75, cy); 934 c.lineTo(cx, cy + shapeSize * 0.75); 935 c.lineTo(cx - shapeSize * 0.75, cy); 936 c.close(); 937 c.fillAndStroke(); 938 939 cx = w * 0.92; 940 cy = h * 0.45; 941 c.begin(); 942 c.moveTo(cx, cy - shapeSize * 0.75); 943 c.lineTo(cx + shapeSize * 0.75, cy); 944 c.lineTo(cx, cy + shapeSize * 0.75); 945 c.lineTo(cx - shapeSize * 0.75, cy); 946 c.close(); 947 c.fillAndStroke(); 948 949 cx = w * 0.81; 950 cy = h * 0.37; 951 c.begin(); 952 c.moveTo(cx, cy - shapeSize * 0.75); 953 c.lineTo(cx + shapeSize * 0.75, cy); 954 c.lineTo(cx, cy + shapeSize * 0.75); 955 c.lineTo(cx - shapeSize * 0.75, cy); 956 c.close(); 957 c.fillAndStroke(); 958 959 cx = w * 0.51; 960 cy = h * 0.7; 961 c.begin(); 962 c.moveTo(cx, cy - shapeSize * 0.75); 963 c.lineTo(cx + shapeSize * 0.75, cy); 964 c.lineTo(cx, cy + shapeSize * 0.75); 965 c.lineTo(cx - shapeSize * 0.75, cy); 966 c.close(); 967 c.fillAndStroke(); 968 969 c.setStrokeWidth(strokeWidth * 2); 970 c.setStrokeColor(coordStroke); 971 972 c.setShadow(false); 973 c.begin(); 974 c.moveTo(0,0); 975 c.lineTo(0, h); 976 c.lineTo(w, h); 977 c.stroke(); 978}; 979 980mxCellRenderer.registerShape(mxShapeMockupPlotChart.prototype.cst.SHAPE_PLOT_CHART, mxShapeMockupPlotChart); 981 982//********************************************************************************************************************************************************** 983//Gantt Chart 984//********************************************************************************************************************************************************** 985/** 986 * Extends mxShape. 987 */ 988function mxShapeMockupGanttChart(bounds, fill, stroke, strokewidth) 989{ 990 mxShape.call(this); 991 this.bounds = bounds; 992 this.fill = fill; 993 this.stroke = stroke; 994 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 995}; 996 997/** 998 * Extends mxShape. 999 */ 1000mxUtils.extend(mxShapeMockupGanttChart, mxShape); 1001 1002mxShapeMockupGanttChart.prototype.cst = { 1003 STROKE_COLOR2 : 'strokeColor2', 1004 STROKE_COLOR3 : 'strokeColor3', 1005 SHAPES_COLORS : 'fillColor2', 1006 TEXT_COLOR : 'textColor', 1007 TEXT_SIZE : 'textSize', 1008 SHAPE_GANTT_CHART : 'mxgraph.mockup.graphics.ganttChart' 1009}; 1010 1011/** 1012 * Function: paintVertexShape 1013 * 1014 * Paints the vertex shape. 1015 */ 1016mxShapeMockupGanttChart.prototype.paintVertexShape = function(c, x, y, w, h) 1017{ 1018 c.translate(x, y); 1019 this.background(c, x, y, w, h); 1020 c.setShadow(false); 1021 this.foreground(c, x, y, w, h); 1022}; 1023 1024mxShapeMockupGanttChart.prototype.background = function(c, x, y, w, h, bgColor, frameColor) 1025{ 1026 c.rect(0, 0, w, h); 1027 c.fillAndStroke(); 1028}; 1029 1030mxShapeMockupGanttChart.prototype.foreground = function(c, x, y, w, h) 1031{ 1032 var shapesColors = mxUtils.getValue(this.style, mxShapeMockupGanttChart.prototype.cst.SHAPES_COLORS, '#888888,#bbbbbb').toString().split(','); 1033 var textColor = mxUtils.getValue(this.style, mxShapeMockupGanttChart.prototype.cst.TEXT_COLOR, '#666666'); 1034 var textSize = mxUtils.getValue(this.style, mxShapeMockupGanttChart.prototype.cst.TEXT_SIZE, '#12'); 1035 1036 c.begin(); 1037 c.moveTo(0, h * 0.13); 1038 c.lineTo(w, h * 0.13); 1039 c.moveTo(w * 0.4, 0); 1040 c.lineTo(w * 0.4, h); 1041 c.moveTo(w * 0.4, h * 0.065); 1042 c.lineTo(w, h * 0.065); 1043 c.moveTo(w * 0.03, 0); 1044 c.lineTo(w * 0.03, h * 0.13); 1045 c.moveTo(w * 0.1, 0); 1046 c.lineTo(w * 0.1, h * 0.13); 1047 c.moveTo(w * 0.315, 0); 1048 c.lineTo(w * 0.315, h * 0.13); 1049 c.moveTo(w * 0.45, h * 0.065); 1050 c.lineTo(w * 0.45, h * 0.13); 1051 c.moveTo(w * 0.5, h * 0.065); 1052 c.lineTo(w * 0.5, h); 1053 c.moveTo(w * 0.55, h * 0.065); 1054 c.lineTo(w * 0.55, h * 0.13); 1055 c.moveTo(w * 0.6, h * 0.065); 1056 c.lineTo(w * 0.6, h); 1057 c.moveTo(w * 0.65, h * 0.065); 1058 c.lineTo(w * 0.65, h * 0.13); 1059 c.moveTo(w * 0.7, h * 0.065); 1060 c.lineTo(w * 0.7, h); 1061 c.moveTo(w * 0.75, 0); 1062 c.lineTo(w * 0.75, h * 0.13); 1063 c.moveTo(w * 0.8, h * 0.065); 1064 c.lineTo(w * 0.8, h); 1065 c.moveTo(w * 0.85, h * 0.065); 1066 c.lineTo(w * 0.85, h * 0.13); 1067 c.moveTo(w * 0.9, h * 0.065); 1068 c.lineTo(w * 0.9, h); 1069 c.moveTo(w * 0.95, h * 0.065); 1070 c.lineTo(w * 0.95, h * 0.13); 1071 c.stroke(); 1072 1073 c.setFillColor(shapesColors[0]); 1074 c.begin(); 1075 c.moveTo(w * 0.41, h * 0.15); 1076 c.lineTo(w * 0.64, h * 0.15); 1077 c.lineTo(w * 0.64, h * 0.18); 1078 c.lineTo(w * 0.625, h * 0.21); 1079 c.lineTo(w * 0.61, h * 0.18); 1080 c.lineTo(w * 0.44, h * 0.18); 1081 c.lineTo(w * 0.425, h * 0.21); 1082 c.lineTo(w * 0.41, h * 0.18); 1083 c.close(); 1084 c.moveTo(w * 0.41, h * 0.24); 1085 c.lineTo(w * 0.49, h * 0.24); 1086 c.lineTo(w * 0.49, h * 0.275); 1087 c.lineTo(w * 0.41, h * 0.275); 1088 c.close(); 1089 c.moveTo(w * 0.46, h * 0.31); 1090 c.lineTo(w * 0.64, h * 0.31); 1091 c.lineTo(w * 0.64, h * 0.345); 1092 c.lineTo(w * 0.46, h * 0.345); 1093 c.close(); 1094 c.moveTo(w * 0.56, h * 0.39); 1095 c.lineTo(w * 0.69, h * 0.39); 1096 c.lineTo(w * 0.69, h * 0.425); 1097 c.lineTo(w * 0.56, h * 0.425); 1098 c.close(); 1099 c.fill(); 1100 1101 c.setFillColor(shapesColors[1]); 1102 c.begin(); 1103 c.moveTo(w * 0.46, h * 0.32); 1104 c.lineTo(w * 0.58, h * 0.32); 1105 c.lineTo(w * 0.58, h * 0.335); 1106 c.lineTo(w * 0.46, h * 0.335); 1107 c.close(); 1108 c.fill(); 1109}; 1110 1111mxCellRenderer.registerShape(mxShapeMockupGanttChart.prototype.cst.SHAPE_GANTT_CHART, mxShapeMockupGanttChart); 1112 1113//********************************************************************************************************************************************************** 1114//Simple Icon 1115//********************************************************************************************************************************************************** 1116/** 1117* Extends mxShape. 1118*/ 1119function mxShapeMockupSimpleIcon(bounds, fill, stroke, strokewidth) 1120{ 1121 mxShape.call(this); 1122 this.bounds = bounds; 1123 this.fill = fill; 1124 this.stroke = stroke; 1125 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1126}; 1127 1128/** 1129* Extends mxShape. 1130*/ 1131mxUtils.extend(mxShapeMockupSimpleIcon, mxShape); 1132 1133mxShapeMockupSimpleIcon.prototype.cst = { 1134 SIMPLE_ICON : 'mxgraph.mockup.graphics.simpleIcon' 1135}; 1136 1137/** 1138* Function: paintVertexShape 1139* 1140* Paints the vertex shape. 1141*/ 1142mxShapeMockupSimpleIcon.prototype.paintVertexShape = function(c, x, y, w, h) 1143{ 1144 c.translate(x, y); 1145 1146 c.rect(0, 0, w, h); 1147 c.fillAndStroke(); 1148 1149 c.begin(); 1150 c.moveTo(0, 0); 1151 c.lineTo(w, h); 1152 c.moveTo(0, h); 1153 c.lineTo(w, 0); 1154 c.stroke(); 1155}; 1156 1157mxCellRenderer.registerShape(mxShapeMockupSimpleIcon.prototype.cst.SIMPLE_ICON, mxShapeMockupSimpleIcon); 1158 1159//********************************************************************************************************************************************************** 1160//Anchor (a dummy shape without visuals used for anchoring) 1161//********************************************************************************************************************************************************** 1162/** 1163* Extends mxShape. 1164*/ 1165function mxShapeMockupGraphicsAnchor(bounds, fill, stroke, strokewidth) 1166{ 1167 mxShape.call(this); 1168 this.bounds = bounds; 1169}; 1170 1171/** 1172* Extends mxShape. 1173*/ 1174mxUtils.extend(mxShapeMockupGraphicsAnchor, mxShape); 1175 1176mxShapeMockupGraphicsAnchor.prototype.cst = { 1177 ANCHOR : 'mxgraph.mockup.graphics.anchor' 1178}; 1179 1180/** 1181* Function: paintVertexShape 1182* 1183* Paints the vertex shape. 1184*/ 1185mxShapeMockupGraphicsAnchor.prototype.paintVertexShape = function(c, x, y, w, h) 1186{ 1187}; 1188 1189mxCellRenderer.registerShape(mxShapeMockupGraphicsAnchor.prototype.cst.ANCHOR, mxShapeMockupGraphicsAnchor); 1190 1191//********************************************************************************************************************************************************** 1192//Rounded rectangle (adjustable rounding) 1193//********************************************************************************************************************************************************** 1194/** 1195* Extends mxShape. 1196*/ 1197function mxShapeMockupGraphicsRRect(bounds, fill, stroke, strokewidth) 1198{ 1199 mxShape.call(this); 1200 this.bounds = bounds; 1201 this.fill = fill; 1202 this.stroke = stroke; 1203 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 1204}; 1205 1206/** 1207* Extends mxShape. 1208*/ 1209mxUtils.extend(mxShapeMockupGraphicsRRect, mxShape); 1210 1211mxShapeMockupGraphicsRRect.prototype.cst = { 1212 RRECT : 'mxgraph.mockup.graphics.rrect', 1213 R_SIZE : 'rSize' 1214}; 1215 1216mxShapeMockupGraphicsRRect.prototype.customProperties = [ 1217 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10}, 1218]; 1219 1220/** 1221* Function: paintVertexShape 1222* 1223* Paints the vertex shape. 1224*/ 1225mxShapeMockupGraphicsRRect.prototype.paintVertexShape = function(c, x, y, w, h) 1226{ 1227 c.translate(x, y); 1228 1229 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupGraphicsRRect.prototype.cst.R_SIZE, '10')); 1230 c.roundrect(0, 0, w, h, rSize); 1231 c.fillAndStroke(); 1232}; 1233 1234mxCellRenderer.registerShape(mxShapeMockupGraphicsRRect.prototype.cst.RRECT, mxShapeMockupGraphicsRRect); 1235 1236