1/**2 * Copyright (c) 2006-2010, JGraph Holdings Ltd3 */45//**********************************************************************************************************************************************************6//Playback Controls7//**********************************************************************************************************************************************************8/**9 * Extends mxShape.10 */11function mxShapeMockupPlaybackControls(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(mxShapeMockupPlaybackControls, mxShape);2425mxShapeMockupPlaybackControls.prototype.cst = {26 SHAPE_PLAYBACK_CONTROLS : 'mxgraph.mockup.misc.playbackControls',27 FILL_COLOR2 : 'fillColor2',28 STROKE_COLOR2 : 'strokeColor2',29 FILL_COLOR3 : 'fillColor3',30 STROKE_COLOR3 : 'strokeColor3'31};3233mxShapeMockupPlaybackControls.prototype.customProperties = [34 {name: 'fillColor2', dispName: 'Outline Color', type: 'color', primary:true},35 {name: 'fillColor3', dispName: 'Symbol Color', type: 'color', primary:true},36 {name: 'strokeColor2', dispName: 'Outline Stroke Color', type: 'color', primary:true},37 {name: 'strokeColor3', dispName: 'Symbol Stroke Color', type: 'color', primary:true}38];3940/**41 * Function: paintVertexShape42 * 43 * Paints the vertex shape.44 */45mxShapeMockupPlaybackControls.prototype.paintVertexShape = function(c, x, y, w, h)46{47 var controlBarHeight = 30;48 var buttonSize = 22;49 var h = Math.max(h, controlBarHeight);50 var w = Math.max(225, w);5152 c.translate(x, y);53 this.background(c, w, h, controlBarHeight);54 c.setShadow(false);55 this.foreground(c, w, h, controlBarHeight, buttonSize);56};5758mxShapeMockupPlaybackControls.prototype.background = function(c, w, h, controlBarHeight)59{60 c.rect(0, (h - controlBarHeight) * 0.5, w, controlBarHeight);61 c.fillAndStroke();62}6364mxShapeMockupPlaybackControls.prototype.foreground = function(c, w, h, controlBarHeight, buttonSize)65{66 var fillColor2 = mxUtils.getValue(this.style, mxShapeMockupPlaybackControls.prototype.cst.FILL_COLOR2, '#99ddff');67 var strokeColor2 = mxUtils.getValue(this.style, mxShapeMockupPlaybackControls.prototype.cst.STROKE_COLOR2, 'none');68 var fillColor3 = mxUtils.getValue(this.style, mxShapeMockupPlaybackControls.prototype.cst.FILL_COLOR3, '#ffffff');69 var strokeColor3 = mxUtils.getValue(this.style, mxShapeMockupPlaybackControls.prototype.cst.STROKE_COLOR3, 'none');7071 c.setStrokeColor(strokeColor2);72 c.setFillColor(fillColor2);73 c.ellipse(10, h * 0.5 - buttonSize * 0.5, buttonSize, buttonSize);74 c.fillAndStroke();75 c.ellipse(40, h * 0.5 - buttonSize * 0.5, buttonSize, buttonSize);76 c.fillAndStroke();77 c.ellipse(70, h * 0.5 - buttonSize * 0.5, buttonSize, buttonSize);78 c.fillAndStroke();79 c.ellipse(100, h * 0.5 - buttonSize * 0.5, buttonSize, buttonSize);80 c.fillAndStroke();81 c.ellipse(130, h * 0.5 - buttonSize * 0.5, buttonSize, buttonSize);82 c.fillAndStroke();83 c.ellipse(160, h * 0.5 - buttonSize * 0.5, buttonSize, buttonSize);84 c.fillAndStroke();85 c.ellipse(190, h * 0.5 - buttonSize * 0.5, buttonSize, buttonSize);86 c.fillAndStroke();878889 c.setStrokeColor(strokeColor3);90 c.setFillColor(fillColor3);91 // start92 var t = h * 0.5 - controlBarHeight * 0.5;93 c.begin();94 c.moveTo(16, t + 10);95 c.lineTo(16, t + 20);96 c.lineTo(18, t + 20);97 c.lineTo(18, t + 10);98 c.close();99 c.moveTo(20, t + 15);100 c.lineTo(25, t + 20);101 c.lineTo(25, t + 10);102 c.close();103 c.fillAndStroke();104 // rewind105 c.begin();106 c.moveTo(44, t + 15);107 c.lineTo(49, t + 20);108 c.lineTo(49, t + 10);109 c.close();110 c.moveTo(51, t + 15);111 c.lineTo(56, t + 20);112 c.lineTo(56, t + 10);113 c.close();114 c.fillAndStroke();115 // back116 c.begin();117 c.moveTo(77, t + 15);118 c.lineTo(82, t + 20);119 c.lineTo(82, t + 10);120 c.close();121 c.fillAndStroke();122 // play/pause123 c.begin();124 c.moveTo(108, t + 10);125 c.lineTo(108, t + 20);126 c.lineTo(110, t + 20);127 c.lineTo(110, t + 10);128 c.close();129 c.moveTo(117, t + 15);130 c.lineTo(112, t + 20);131 c.lineTo(112, t + 10);132 c.close();133 c.fillAndStroke();134 // forward135 c.begin();136 c.moveTo(144, t + 15);137 c.lineTo(139, t + 20);138 c.lineTo(139, t + 10);139 c.close();140 c.fillAndStroke();141 // fast forward142 c.begin();143 c.moveTo(171, t + 15);144 c.lineTo(166, t + 20);145 c.lineTo(166, t + 10);146 c.close();147 c.moveTo(178, t + 15);148 c.lineTo(173, t + 20);149 c.lineTo(173, t + 10);150 c.close();151 c.fillAndStroke();152 // end153 c.begin();154 c.moveTo(203, t + 10);155 c.lineTo(203, t + 20);156 c.lineTo(205, t + 20);157 c.lineTo(205, t + 10);158 c.close();159 c.moveTo(201, t + 15);160 c.lineTo(196, t + 20);161 c.lineTo(196, t + 10);162 c.close();163 c.fillAndStroke();164};165166mxCellRenderer.registerShape(mxShapeMockupPlaybackControls.prototype.cst.SHAPE_PLAYBACK_CONTROLS, mxShapeMockupPlaybackControls);167168//**********************************************************************************************************************************************************169//Progress Bar170//**********************************************************************************************************************************************************171/**172 * Extends mxShape.173 */174function mxShapeMockupProgressBar(bounds, fill, stroke, strokewidth)175{176 mxShape.call(this);177 this.bounds = bounds;178 this.fill = fill;179 this.stroke = stroke;180 this.strokewidth = (strokewidth != null) ? strokewidth : 1;181 this.barPos = 20;182};183184/**185 * Extends mxShape.186 */187mxUtils.extend(mxShapeMockupProgressBar, mxShape);188189mxShapeMockupProgressBar.prototype.cst = {190 SHAPE_PROGRESS_BAR : 'mxgraph.mockup.misc.progressBar',191 BAR_POS : 'barPos',192 FILL_COLOR2 : 'fillColor2'193};194195mxShapeMockupProgressBar.prototype.customProperties = [196 {name: 'fillColor2', dispName: 'Outline Color', type: 'color', primary: true},197 {name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, defVal:80, primary: true}198];199200/**201 * Function: paintVertexShape202 * 203 * Paints the vertex shape.204 */205mxShapeMockupProgressBar.prototype.paintVertexShape = function(c, x, y, w, h)206{207 c.translate(x, y);208209 this.background(c, w, h);210 c.setShadow(false);211 this.foreground(c, w, h);212};213214mxShapeMockupProgressBar.prototype.background = function(c, w, h)215{216 c.roundrect(0, h * 0.5 - 5, w, 10, 5, 5);217 c.fillAndStroke();218};219220mxShapeMockupProgressBar.prototype.foreground = function(c, w, h)221{222 var fillColor2 = mxUtils.getValue(this.style, mxShapeMockupProgressBar.prototype.cst.FILL_COLOR2, '#ddeeff');223 var barPos = mxUtils.getValue(this.style, mxShapeMockupProgressBar.prototype.cst.BAR_POS, '80');224 barPos = Math.min(barPos, 100);225 barPos = Math.max(barPos, 0);226 var deadzone = 0; 227 var virRange = w - 2 * deadzone;228 var truePos = deadzone + virRange * barPos / 100;229230 c.setFillColor(fillColor2);231 c.roundrect(0, h * 0.5 - 5, truePos, 10, 5, 5);232 c.fillAndStroke();233};234235mxCellRenderer.registerShape(mxShapeMockupProgressBar.prototype.cst.SHAPE_PROGRESS_BAR, mxShapeMockupProgressBar);236237Graph.handleFactory[mxShapeMockupProgressBar.prototype.cst.SHAPE_PROGRESS_BAR] = function(state)238{239 var handles = [Graph.createHandle(state, ['barPos'], function(bounds)240 {241 var barPos = Math.max(0, Math.min(100, parseFloat(mxUtils.getValue(this.state.style, 'barPos', this.barPos))));242243 return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height * 0.5);244 }, function(bounds, pt)245 {246 this.state.style['barPos'] = Math.round(1000 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 1000;247 })];248249 return handles;250}251252//**********************************************************************************************************************************************************253//Shopping Cart254//**********************************************************************************************************************************************************255/**256 * Extends mxShape.257 */258function mxShapeMockupShoppingCart(bounds, fill, stroke, strokewidth)259{260 mxShape.call(this);261 this.bounds = bounds;262 this.fill = fill;263 this.stroke = stroke;264 this.strokewidth = (strokewidth != null) ? strokewidth : 1;265};266267/**268 * Extends mxShape.269 */270mxUtils.extend(mxShapeMockupShoppingCart, mxShape);271272mxShapeMockupShoppingCart.prototype.cst = {273 SHAPE_SHOPPING_CART : 'mxgraph.mockup.misc.shoppingCart'274};275276/**277 * Function: paintVertexShape278 * 279 * Paints the vertex shape.280 */281mxShapeMockupShoppingCart.prototype.paintVertexShape = function(c, x, y, w, h)282{283 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');284 c.translate(x, y);285286 c.setStrokeWidth(3);287 c.begin();288 c.moveTo(w * 0.975, h * 0.025);289 c.lineTo(w * 0.82, h * 0.055);290 c.lineTo(w * 0.59, h * 0.66);291 c.lineTo(w * 0.7, h * 0.765);292 c.arcTo(w * 0.06, h * 0.06, 0, 0, 1, w * 0.665, h * 0.86);293 c.lineTo(w * 0.05, h * 0.86);294 c.moveTo(w * 0.74, h * 0.26);295 c.lineTo(w * 0.03, h * 0.28);296 c.lineTo(w * 0.065, h * 0.61);297 c.lineTo(w * 0.59, h * 0.66);298 c.stroke();299300 c.setStrokeWidth(1);301 c.begin();302 c.moveTo(w * 0.15, h * 0.28);303 c.lineTo(w * 0.15, h * 0.62);304 c.moveTo(w * 0.265, h * 0.275);305 c.lineTo(w * 0.265, h * 0.63);306 c.moveTo(w * 0.38, h * 0.27);307 c.lineTo(w * 0.38, h * 0.64);308 c.moveTo(w * 0.495, h * 0.265);309 c.lineTo(w * 0.495, h * 0.65);310 c.moveTo(w * 0.61, h * 0.265);311 c.lineTo(w * 0.61, h * 0.61);312 c.stroke();313314 c.begin();315 c.moveTo(w * 0.69, h * 0.405);316 c.lineTo(w * 0.045, h * 0.405);317 c.moveTo(w * 0.645, h * 0.52);318 c.lineTo(w * 0.055, h * 0.52);319 c.stroke();320 c.setFillColor(strokeColor);321 c.ellipse(w * 0.075, h * 0.89, w * 0.1, h * 0.1);322 c.fillAndStroke();323 c.ellipse(w * 0.62, h * 0.89, w * 0.1, h * 0.1);324 c.fillAndStroke();325};326327mxCellRenderer.registerShape(mxShapeMockupShoppingCart.prototype.cst.SHAPE_SHOPPING_CART, mxShapeMockupShoppingCart);328329//**********************************************************************************************************************************************************330//Rating331//**********************************************************************************************************************************************************332/**333 * Extends mxShape.334 */335function mxShapeMockupRating(bounds, fill, stroke, strokewidth)336{337 mxShape.call(this);338 this.bounds = bounds;339 this.fill = fill;340 this.stroke = stroke;341 this.strokewidth = (strokewidth != null) ? strokewidth : 1;342};343344/**345 * Extends mxShape.346 */347mxUtils.extend(mxShapeMockupRating, mxShape);348349mxShapeMockupRating.prototype.cst = {350 SHAPE_RATING : 'mxgraph.mockup.misc.rating',351 RATING_STYLE : 'ratingStyle',352 RATING_SCALE : 'ratingScale',353 RATING_HEART : 'heart',354 RATING_STAR : 'star',355 EMPTY_FILL_COLOR : 'emptyFillColor',356 GRADE : 'grade'357};358359mxShapeMockupRating.prototype.customProperties = [360 {name: 'ratingStyle', dispName: 'Style', type: 'enum',361 enumList: [{val: 'heart', dispName: 'Heart'}, {val: 'star', dispName: 'Star'}]362 },363 {name: 'ratingScale', dispName: 'Max. Rating', type: 'int'},364 {name: 'grade', dispName: 'Current Rating', type: 'int'},365 {name: 'emptyFillColor', dispName: 'Fill2 Color', type: 'color', primary: true}366];367368/**369 * Function: paintVertexShape370 * 371 * Paints the vertex shape.372 */373mxShapeMockupRating.prototype.paintVertexShape = function(c, x, y, w, h)374{375 var ratingStyle = mxUtils.getValue(this.style, mxShapeMockupRating.prototype.cst.RATING_STYLE, mxShapeMockupRating.prototype.cst.RATING_STAR);376 var grade = mxUtils.getValue(this.style, mxShapeMockupRating.prototype.cst.GRADE, '5');377 var ratingScale = mxUtils.getValue(this.style, mxShapeMockupRating.prototype.cst.RATING_SCALE, '10');378379 c.translate(x, y);380381 if (ratingStyle === mxShapeMockupRating.prototype.cst.RATING_STAR)382 {383 for (var i = 0; i < grade; i++)384 {385 c.begin();386 c.moveTo(i * h * 1.5, 0.33 * h);387 c.lineTo(i * h * 1.5 + 0.364 * h, 0.33 * h);388 c.lineTo(i * h * 1.5 + 0.475 * h, 0);389 c.lineTo(i * h * 1.5 + 0.586 * h, 0.33 * h);390 c.lineTo(i * h * 1.5 + 0.95 * h, 0.33 * h);391 c.lineTo(i * h * 1.5 + 0.66 * h, 0.551 * h);392 c.lineTo(i * h * 1.5 + 0.775 * h, 0.9 * h);393 c.lineTo(i * h * 1.5 + 0.475 * h, 0.684 * h);394 c.lineTo(i * h * 1.5 + 0.175 * h, 0.9 * h);395 c.lineTo(i * h * 1.5 + 0.29 * h, 0.551 * h);396 c.close();397 c.fillAndStroke();398 }399 }400 else if (ratingStyle === mxShapeMockupRating.prototype.cst.RATING_HEART)401 {402 for (var i = 0; i < grade; i++)403 {404 c.begin();405 c.moveTo(i * h * 1.5 + h * 0.519, h * 0.947);406 c.curveTo(i * h * 1.5 + h * 0.558, h * 0.908, i * h * 1.5 + h * 0.778, h * 0.682, i * h * 1.5 + h * 0.916, h * 0.54);407 c.curveTo(i * h * 1.5 + h * 1.039, h * 0.414, i * h * 1.5 + h * 1.036, h * 0.229, i * h * 1.5 + h * 0.924, h * 0.115);408 c.curveTo(i * h * 1.5 + h * 0.812, 0, i * h * 1.5 + h * 0.631, 0, i * h * 1.5 + h * 0.519, h * 0.115);409 c.curveTo(i * h * 1.5 + h * 0.408, 0, i * h * 1.5 + h * 0.227, 0, i * h * 1.5 + h * 0.115, h * 0.115);410 c.curveTo(i * h * 1.5 + h * 0.03, h * 0.229, i * h * 1.5, h * 0.414, i * h * 1.5 + h * 0.123, h * 0.54);411 c.close();412 c.fillAndStroke();413 }414 }415416 var emptyFillColor = mxUtils.getValue(this.style, mxShapeMockupRating.prototype.cst.EMPTY_FILL_COLOR, '#ffffff');417 c.setFillColor(emptyFillColor);418419 if (ratingStyle === mxShapeMockupRating.prototype.cst.RATING_STAR)420 {421 for (var i = grade; i < ratingScale; i++)422 {423 c.begin();424 c.moveTo(i * h * 1.5, 0.33 * h);425 c.lineTo(i * h * 1.5 + 0.364 * h, 0.33 * h);426 c.lineTo(i * h * 1.5 + 0.475 * h, 0);427 c.lineTo(i * h * 1.5 + 0.586 * h, 0.33 * h);428 c.lineTo(i * h * 1.5 + 0.95 * h, 0.33 * h);429 c.lineTo(i * h * 1.5 + 0.66 * h, 0.551 * h);430 c.lineTo(i * h * 1.5 + 0.775 * h, 0.9 * h);431 c.lineTo(i * h * 1.5 + 0.475 * h, 0.684 * h);432 c.lineTo(i * h * 1.5 + 0.175 * h, 0.9 * h);433 c.lineTo(i * h * 1.5 + 0.29 * h, 0.551 * h);434 c.close();435 c.fillAndStroke();436 }437 }438 else if (ratingStyle === mxShapeMockupRating.prototype.cst.RATING_HEART)439 {440 for (var i = grade; i < ratingScale; i++)441 {442 c.begin();443 c.moveTo(i * h * 1.5 + h * 0.519, h * 0.947);444 c.curveTo(i * h * 1.5 + h * 0.558, h * 0.908, i * h * 1.5 + h * 0.778, h * 0.682, i * h * 1.5 + h * 0.916, h * 0.54);445 c.curveTo(i * h * 1.5 + h * 1.039, h * 0.414, i * h * 1.5 + h * 1.036, h * 0.229, i * h * 1.5 + h * 0.924, h * 0.115);446 c.curveTo(i * h * 1.5 + h * 0.812, 0, i * h * 1.5 + h * 0.631, 0, i * h * 1.5 + h * 0.519, h * 0.115);447 c.curveTo(i * h * 1.5 + h * 0.408, 0, i * h * 1.5 + h * 0.227, 0, i * h * 1.5 + h * 0.115, h * 0.115);448 c.curveTo(i * h * 1.5 + h * 0.03, h * 0.229, i * h * 1.5, h * 0.414, i * h * 1.5 + h * 0.123, h * 0.54);449 c.close();450 c.fillAndStroke();451 }452 }453};454455mxCellRenderer.registerShape(mxShapeMockupRating.prototype.cst.SHAPE_RATING, mxShapeMockupRating);456457//**********************************************************************************************************************************************************458//Mail459//**********************************************************************************************************************************************************460/**461 * Extends mxShape.462 */463function mxShapeMockupMail(bounds, fill, stroke, strokewidth)464{465 mxShape.call(this);466 this.bounds = bounds;467 this.fill = fill;468 this.stroke = stroke;469 this.strokewidth = (strokewidth != null) ? strokewidth : 1;470};471472/**473 * Extends mxShape.474 */475mxUtils.extend(mxShapeMockupMail, mxShape);476477mxShapeMockupMail.prototype.cst = {478 SHAPE_MAIL : 'mxgraph.mockup.misc.mail2'479};480481/**482 * Function: paintVertexShape483 * 484 * Paints the vertex shape.485 */486mxShapeMockupMail.prototype.paintVertexShape = function(c, x, y, w, h)487{488 c.translate(x, y);489490 c.rect(0, 0, w, h);491 c.fillAndStroke();492493 c.setShadow(false);494 c.begin();495 c.moveTo(0, 0);496 c.lineTo(w * 0.5, h * 0.5);497 c.lineTo(w, 0);498 c.stroke();499};500501mxCellRenderer.registerShape(mxShapeMockupMail.prototype.cst.SHAPE_MAIL, mxShapeMockupMail);502503//**********************************************************************************************************************************************************504//Volume Slider505//**********************************************************************************************************************************************************506/**507 * Extends mxShape.508 */509function mxShapeMockupVolumeSlider(bounds, fill, stroke, strokewidth)510{511 mxShape.call(this);512 this.bounds = bounds;513 this.fill = fill;514 this.stroke = stroke;515 this.strokewidth = (strokewidth != null) ? strokewidth : 1;516 this.barPos = 80;517};518519/**520 * Extends mxShape.521 */522mxUtils.extend(mxShapeMockupVolumeSlider, mxShape);523524mxShapeMockupVolumeSlider.prototype.cst = {525 SHAPE_VOLUME_SLIDER : 'mxgraph.mockup.misc.volumeSlider',526 BAR_POS : 'barPos',527 FILL_COLOR2 : 'fillColor2'528};529530mxShapeMockupVolumeSlider.prototype.customProperties = [531 {name: 'fillColor2', dispName: 'Fill2 Color', type: 'color', primary:true},532 {name: 'barPos', dispName: 'Handle Position', type: 'float'}533];534535/**536 * Function: paintVertexShape537 * 538 * Paints the vertex shape.539 */540mxShapeMockupVolumeSlider.prototype.paintVertexShape = function(c, x, y, w, h)541{542 c.translate(x, y);543544 var barPos = mxUtils.getValue(this.style, mxShapeMockupVolumeSlider.prototype.cst.BAR_POS, '80');545 var fillColor2 = mxUtils.getValue(this.style, mxShapeMockupVolumeSlider.prototype.cst.FILL_COLOR2, '#ddeeff');546 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#999999');547 //only the progress bar handle needs to be drawn548 barPos = Math.min(barPos, 100);549 barPos = Math.max(barPos, 0);550 var controlBarHeight = 25;551 var h = Math.max(h, controlBarHeight);552 var w = Math.max(w, 3.5 * controlBarHeight);553554 var speakerStartX = w - controlBarHeight;555 var speakerStartY = (h - controlBarHeight) * 0.5;556 c.begin();557 c.moveTo(speakerStartX + controlBarHeight * 0.05, speakerStartY + controlBarHeight * 0.35);558 c.lineTo(speakerStartX + controlBarHeight * 0.15, speakerStartY + controlBarHeight * 0.35);559 c.lineTo(speakerStartX + controlBarHeight * 0.3, speakerStartY + controlBarHeight * 0.2);560 c.lineTo(speakerStartX + controlBarHeight * 0.3, speakerStartY + controlBarHeight * 0.8);561 c.lineTo(speakerStartX + controlBarHeight * 0.15, speakerStartY + controlBarHeight * 0.65);562 c.lineTo(speakerStartX + controlBarHeight * 0.05, speakerStartY + controlBarHeight * 0.65);563 c.close();564 c.fill();565566 //draw the handle based on barPos567 var barMin = 0;568 var barMax = w - controlBarHeight * 1.3;569 var videoBarStartY = (h - controlBarHeight) * 0.5;570 var barRange = barMax - barMin;571 var barPos = barRange * barPos / 100;572 var barEnd = barMin + barPos;573574 var soundStartX = w - controlBarHeight;575 var soundStartY = (h - controlBarHeight) * 0.5;576 c.begin();577 c.moveTo(soundStartX + controlBarHeight * 0.4, soundStartY + controlBarHeight * 0.35);578 c.arcTo(controlBarHeight * 0.2, controlBarHeight * 0.3, 0, 0, 1, soundStartX + controlBarHeight * 0.4, soundStartY + controlBarHeight * 0.65);579 c.moveTo(soundStartX + controlBarHeight * 0.425, soundStartY + controlBarHeight * 0.25);580 c.arcTo(controlBarHeight * 0.225, controlBarHeight * 0.35, 0, 0, 1, soundStartX + controlBarHeight * 0.425, soundStartY + controlBarHeight * 0.75);581 c.moveTo(soundStartX + controlBarHeight * 0.5, soundStartY + controlBarHeight * 0.2);582 c.arcTo(controlBarHeight * 0.25, controlBarHeight * 0.4, 0, 0, 1, soundStartX + controlBarHeight * 0.5, soundStartY + controlBarHeight * 0.8);583 c.fillAndStroke();584585 //now we draw the video progress bar586 var videoBarStartX = 0;587 var videoBarStartY = (h - controlBarHeight) * 0.5;588 var videoBarEndX = w - controlBarHeight * 1.3;589 c.roundrect(videoBarStartX, videoBarStartY + controlBarHeight * 0.35, videoBarEndX, controlBarHeight * 0.3, 5, 5);590 c.fill();591 c.setShadow(false);592 c.setFillColor(fillColor2);593 c.roundrect(barMin, videoBarStartY + controlBarHeight * 0.35, barEnd, controlBarHeight * 0.3, 5, 5);594 c.fill();595596 597 c.ellipse(barEnd - controlBarHeight * 0.25, videoBarStartY + controlBarHeight * 0.25, controlBarHeight * 0.5, controlBarHeight * 0.5);598 c.fillAndStroke();599600};601602mxCellRenderer.registerShape(mxShapeMockupVolumeSlider.prototype.cst.SHAPE_VOLUME_SLIDER, mxShapeMockupVolumeSlider);603604Graph.handleFactory[mxShapeMockupVolumeSlider.prototype.cst.SHAPE_VOLUME_SLIDER] = function(state)605{606 var handles = [Graph.createHandle(state, ['barPos'], function(bounds)607 {608 var barPos = Math.max(0, Math.min(100, parseFloat(mxUtils.getValue(this.state.style, 'barPos', this.barPos))));609610 return new mxPoint(bounds.x + barPos * (bounds.width - 32.5) / 100, bounds.y + bounds.height * 0.5);611 }, function(bounds, pt)612 {613 this.state.style['barPos'] = Math.round(1000 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 1000;614 })];615616 return handles;617}618619//**********************************************************************************************************************************************************620//Edit Icon621//**********************************************************************************************************************************************************622/**623* Extends mxShape.624*/625function mxShapeMockupEdit(bounds, fill, stroke, strokewidth)626{627 mxShape.call(this);628 this.bounds = bounds;629 this.fill = fill;630 this.stroke = stroke;631 this.strokewidth = (strokewidth != null) ? strokewidth : 1;632};633634/**635* Extends mxShape.636*/637mxUtils.extend(mxShapeMockupEdit, mxShape);638639mxShapeMockupEdit.prototype.cst = {640 SHAPE_EDIT : 'mxgraph.mockup.misc.editIcon'641};642643/**644* Function: paintVertexShape645* 646* Paints the vertex shape.647*/648mxShapeMockupEdit.prototype.paintVertexShape = function(c, x, y, w, h)649{650 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#999999');651652 c.translate(x, y);653654 c.roundrect(0, 0, w, h, w * 0.05, h * 0.05);655 c.fillAndStroke();656657 c.setShadow(false);658 c.setFillColor(strokeColor);659 c.begin();660 c.moveTo(w * 0.11, h * 0.8);661 c.lineTo(w * 0.2, h * 0.89);662 c.lineTo(w * 0.05, h * 0.95);663 c.close();664 c.moveTo(w * 0.74, h * 0.16);665 c.lineTo(w * 0.84, h * 0.26);666 c.lineTo(w * 0.22, h * 0.88);667 c.lineTo(w * 0.12, h * 0.78);668 c.close();669 c.moveTo(w * 0.755, h * 0.145);670 c.lineTo(w * 0.82, h * 0.08);671 c.lineTo(w * 0.92, h * 0.18);672 c.lineTo(w * 0.855, h * 0.245);673 c.close();674 c.fill();675};676677mxCellRenderer.registerShape(mxShapeMockupEdit.prototype.cst.SHAPE_EDIT, mxShapeMockupEdit);678679//**********************************************************************************************************************************************************680//Print Icon681//**********************************************************************************************************************************************************682/**683* Extends mxShape.684*/685function mxShapeMockupPrint(bounds, fill, stroke, strokewidth)686{687 mxShape.call(this);688 this.bounds = bounds;689 this.fill = fill;690 this.stroke = stroke;691 this.strokewidth = (strokewidth != null) ? strokewidth : 1;692};693694/**695* Extends mxShape.696*/697mxUtils.extend(mxShapeMockupPrint, mxShape);698699mxShapeMockupPrint.prototype.cst = {700 SHAPE_PRINT : 'mxgraph.mockup.misc.printIcon'701};702703/**704* Function: paintVertexShape705* 706* Paints the vertex shape.707*/708mxShapeMockupPrint.prototype.paintVertexShape = function(c, x, y, w, h)709{710 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#999999');711712 c.translate(x, y);713714 c.roundrect(0, 0, w, h, w * 0.05, h * 0.05);715 c.fillAndStroke();716717 c.setShadow(false);718 c.setFillColor(strokeColor);719 c.begin();720 c.moveTo(w * 0.15, h * 0.58);721 c.arcTo(w * 0.03, h * 0.03, 0, 0, 1, w * 0.18, h * 0.55);722 c.lineTo(w * 0.82, h * 0.55);723 c.arcTo(w * 0.03, h * 0.03, 0, 0, 1, w * 0.85, h * 0.58);724 c.lineTo(w * 0.85, h * 0.82);725 c.arcTo(w * 0.03, h * 0.03, 0, 0, 1, w * 0.82, h * 0.85);726 c.lineTo(w * 0.18, h * 0.85);727 c.arcTo(w * 0.03, h * 0.03, 0, 0, 1, w * 0.15, h * 0.82);728 c.close();729 c.moveTo(w * 0.7, h * 0.52);730 c.lineTo(w * 0.3, h * 0.52);731 c.lineTo(w * 0.3, h * 0.15);732 c.lineTo(w * 0.55, h * 0.15);733 c.lineTo(w * 0.55, h * 0.3);734 c.lineTo(w * 0.7, h * 0.3);735 c.close();736 c.moveTo(w * 0.57, h * 0.15);737 c.lineTo(w * 0.7, h * 0.28);738 c.lineTo(w * 0.57, h * 0.28);739 c.close();740 c.fill();741};742743mxCellRenderer.registerShape(mxShapeMockupPrint.prototype.cst.SHAPE_PRINT, mxShapeMockupPrint);744745//**********************************************************************************************************************************************************746//Print Icon747//**********************************************************************************************************************************************************748/**749* Extends mxShape.750*/751function mxShapeMockupShare(bounds, fill, stroke, strokewidth)752{753 mxShape.call(this);754 this.bounds = bounds;755 this.fill = fill;756 this.stroke = stroke;757 this.strokewidth = (strokewidth != null) ? strokewidth : 1;758};759760/**761* Extends mxShape.762*/763mxUtils.extend(mxShapeMockupShare, mxShape);764765mxShapeMockupShare.prototype.cst = {766 SHAPE_SHARE : 'mxgraph.mockup.misc.shareIcon'767};768769/**770* Function: paintVertexShape771* 772* Paints the vertex shape.773*/774mxShapeMockupShare.prototype.paintVertexShape = function(c, x, y, w, h)775{776 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#999999');777778 c.translate(x, y);779780 c.roundrect(0, 0, w, h, w * 0.05, h * 0.05);781 c.fillAndStroke();782783 c.setShadow(false);784 c.setFillColor(strokeColor);785 c.begin();786 c.moveTo(w * 0.15, h * 0.18);787 c.arcTo(w * 0.03, h * 0.03, 0, 0, 1, w * 0.18, h * 0.15);788 c.lineTo(w * 0.82, h * 0.15);789 c.arcTo(w * 0.03, h * 0.03, 0, 0, 1, w * 0.85, h * 0.18);790 c.lineTo(w * 0.85, h * 0.82);791 c.arcTo(w * 0.03, h * 0.03, 0, 0, 1, w * 0.82, h * 0.85);792 c.lineTo(w * 0.18, h * 0.85);793 c.arcTo(w * 0.03, h * 0.03, 0, 0, 1, w * 0.15, h * 0.82);794 c.close();795 c.fill();796797 var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');798 c.setFillColor(fillColor);799 c.begin();800 c.moveTo(w * 0.563, h * 0.34);801 c.arcTo(w * 0.095, h * 0.095, 0, 1, 1, w * 0.603, h * 0.42);802 c.lineTo(w * 0.44, h * 0.5);803 c.lineTo(w * 0.602, h * 0.582);804 c.arcTo(w * 0.095, h * 0.095, 0, 1, 1, w * 0.563, h * 0.653);805 c.lineTo(w * 0.403, h * 0.575);806 c.arcTo(w * 0.095, h * 0.095, 0, 1, 1, w * 0.4, h * 0.42);807 c.close();808 c.fill();809};810811mxCellRenderer.registerShape(mxShapeMockupShare.prototype.cst.SHAPE_SHARE, mxShapeMockupShare);812813//**********************************************************************************************************************************************************814//Trashcan Icon815//**********************************************************************************************************************************************************816/**817* Extends mxShape.818*/819function mxShapeMockupTrashcan(bounds, fill, stroke, strokewidth)820{821 mxShape.call(this);822 this.bounds = bounds;823 this.fill = fill;824 this.stroke = stroke;825 this.strokewidth = (strokewidth != null) ? strokewidth : 1;826};827828/**829* Extends mxShape.830*/831mxUtils.extend(mxShapeMockupTrashcan, mxShape);832833mxShapeMockupTrashcan.prototype.cst = {834 SHAPE_TRASHCAN : 'mxgraph.mockup.misc.trashcanIcon'835};836837/**838* Function: paintVertexShape839* 840* Paints the vertex shape.841*/842mxShapeMockupTrashcan.prototype.paintVertexShape = function(c, x, y, w, h)843{844 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#999999');845846 c.translate(x, y);847848 c.roundrect(0, 0, w, h, w * 0.05, h * 0.05);849 c.fillAndStroke();850851 c.setShadow(false);852 c.setFillColor(strokeColor);853 c.begin();854 c.moveTo(w * 0.24, h * 0.24);855 c.arcTo(w * 0.04, h * 0.04, 0, 0, 1, w * 0.24, h * 0.16);856 c.lineTo(w * 0.4, h * 0.16);857 c.lineTo(w * 0.4, h * 0.12);858 c.lineTo(w * 0.6, h * 0.12);859 c.lineTo(w * 0.6, h * 0.16);860 c.lineTo(w * 0.76, h * 0.16);861 c.arcTo(w * 0.04, h * 0.04, 0, 0, 1, w * 0.76, h * 0.24);862 c.close();863 c.fill();864865 c.roundrect(w * 0.26, h * 0.3, w * 0.1, h * 0.6, w * 0.06, h * 0.06);866 c.fill();867 c.roundrect(w * 0.44, h * 0.3, w * 0.1, h * 0.6, w * 0.06, h * 0.06);868 c.fill();869 c.roundrect(w * 0.62, h * 0.3, w * 0.1, h * 0.6, w * 0.06, h * 0.06);870 c.fill();871};872873mxCellRenderer.registerShape(mxShapeMockupTrashcan.prototype.cst.SHAPE_TRASHCAN, mxShapeMockupTrashcan);874875//**********************************************************************************************************************************************************876//Copyright Icon877//**********************************************************************************************************************************************************878/**879* Extends mxShape.880*/881function mxShapeMockupCopyright(bounds, fill, stroke, strokewidth)882{883 mxShape.call(this);884 this.bounds = bounds;885 this.fill = fill;886 this.stroke = stroke;887 this.strokewidth = (strokewidth != null) ? strokewidth : 1;888};889890/**891* Extends mxShape.892*/893mxUtils.extend(mxShapeMockupCopyright, mxShape);894895mxShapeMockupCopyright.prototype.cst = {896 SHAPE_COPYRIGHT : 'mxgraph.mockup.misc.copyrightIcon'897};898899/**900* Function: paintVertexShape901* 902* Paints the vertex shape.903*/904mxShapeMockupCopyright.prototype.paintVertexShape = function(c, x, y, w, h)905{906 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#999999');907908 c.translate(x, y);909910 c.ellipse(0, 0, w, h);911 c.fillAndStroke();912913 c.setShadow(false);914 c.setFillColor(strokeColor);915 c.begin();916 c.moveTo(w * 0.713, h * 0.288);917 c.arcTo(w * 0.3, h * 0.3, 0, 1, 0, w * 0.713, h * 0.712);918 c.lineTo(w * 0.784, h * 0.783);919 c.arcTo(w * 0.4, h * 0.4, 0, 1, 1, w * 0.784, h * 0.217);920 c.close();921 c.fill();922923};924925mxCellRenderer.registerShape(mxShapeMockupCopyright.prototype.cst.SHAPE_COPYRIGHT, mxShapeMockupCopyright);926927//**********************************************************************************************************************************************************928//Registered Icon929//**********************************************************************************************************************************************************930/**931* Extends mxShape.932*/933function mxShapeMockupRegistered(bounds, fill, stroke, strokewidth)934{935 mxShape.call(this);936 this.bounds = bounds;937 this.fill = fill;938 this.stroke = stroke;939 this.strokewidth = (strokewidth != null) ? strokewidth : 1;940};941942/**943* Extends mxShape.944*/945mxUtils.extend(mxShapeMockupRegistered, mxShape);946947mxShapeMockupRegistered.prototype.cst = {948 SHAPE_REGISTERED : 'mxgraph.mockup.misc.registeredIcon'949};950951/**952* Function: paintVertexShape953* 954* Paints the vertex shape.955*/956mxShapeMockupRegistered.prototype.paintVertexShape = function(c, x, y, w, h)957{958 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#999999');959960 c.translate(x, y);961962 c.ellipse(0, 0, w, h);963 c.fillAndStroke();964965 c.setShadow(false);966 c.setFillColor(strokeColor);967 c.begin();968 c.moveTo(w * 0.29, h * 0.9);969 c.lineTo(w * 0.29, h * 0.09);970 c.lineTo(w * 0.5, h * 0.09);971 c.arcTo(w * 0.2195, h * 0.2195, 0, 0, 1, w * 0.545, h * 0.525);972 c.lineTo(w * 0.738, h * 0.91);973 c.lineTo(w * 0.674, h * 0.91);974 c.lineTo(w * 0.4825, h * 0.53);975 c.lineTo(w * 0.35, h * 0.53);976 c.lineTo(w * 0.35, h * 0.9);977 c.close();978 c.moveTo(w * 0.35, h * 0.47);979 c.lineTo(w * 0.5, h * 0.47);980 c.arcTo(w * 0.15, h * 0.15, 0, 0, 0, w * 0.5, h * 0.15);981 c.lineTo(w * 0.35, h * 0.15);982 c.close();983 c.fill();984985};986987mxCellRenderer.registerShape(mxShapeMockupRegistered.prototype.cst.SHAPE_REGISTERED, mxShapeMockupRegistered);988989//**********************************************************************************************************************************************************990//Volume Icon991//**********************************************************************************************************************************************************992/**993* Extends mxShape.994*/995function mxShapeMockupVolume(bounds, fill, stroke, strokewidth)996{997 mxShape.call(this);998 this.bounds = bounds;999 this.fill = fill;1000 this.stroke = stroke;1001 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1002};10031004/**1005* Extends mxShape.1006*/1007mxUtils.extend(mxShapeMockupVolume, mxShape);10081009mxShapeMockupVolume.prototype.cst = {1010 SHAPE_VOLUME : 'mxgraph.mockup.misc.volumeIcon'1011};10121013/**1014* Function: paintVertexShape1015* 1016* Paints the vertex shape.1017*/1018mxShapeMockupVolume.prototype.paintVertexShape = function(c, x, y, w, h)1019{1020 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#999999');10211022 c.translate(x, y);10231024 c.roundrect(0, 0, w, h, w * 0.05, h * 0.05);1025 c.fillAndStroke();10261027 c.setShadow(false);1028 c.setFillColor(strokeColor);1029 c.begin();1030 c.moveTo(w * 0.1, h * 0.3);1031 c.lineTo(w * 0.3, h * 0.3);1032 c.lineTo(w * 0.5, h * 0.15);1033 c.lineTo(w * 0.5, h * 0.85);1034 c.lineTo(w * 0.3, h * 0.7);1035 c.lineTo(w * 0.1, h * 0.7);1036 c.close();1037 c.fill();1038 1039 c.begin();1040 c.moveTo(w * 0.6, h * 0.4);1041 c.arcTo(w * 0.2, h * 0.2, 0, 0, 1, w * 0.6, h * 0.6);10421043 c.moveTo(w * 0.7, h * 0.3);1044 c.arcTo(w * 0.3, h * 0.3, 0, 0, 1, w * 0.7, h * 0.7);1045 1046 c.moveTo(w * 0.8, h * 0.2);1047 c.arcTo(w * 0.4, h * 0.4, 0, 0, 1, w * 0.8, h * 0.8);1048 c.stroke();10491050};10511052mxCellRenderer.registerShape(mxShapeMockupVolume.prototype.cst.SHAPE_VOLUME, mxShapeMockupVolume);10531054//**********************************************************************************************************************************************************1055//Ruler1056//**********************************************************************************************************************************************************1057/**1058* Extends mxShape.1059*/1060function mxShapeMockupRuler(bounds, fill, stroke, strokewidth)1061{1062 mxShape.call(this);1063 this.bounds = bounds;1064 this.fill = fill;1065 this.stroke = stroke;1066 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1067};10681069/**1070* Extends mxShape.1071*/1072mxUtils.extend(mxShapeMockupRuler, mxShape);10731074mxShapeMockupRuler.prototype.cst = {1075 SHAPE_RULER : 'mxgraph.mockup.misc.ruler',1076 ORIENTATION : 'rulerOrient',1077 UNIT_SIZE : 'unitSize',1078 FACE_UP : 'up',1079 FACE_DOWN : 'down'1080};10811082/**1083* Function: paintVertexShape1084* 1085* Paints the vertex shape.1086*/1087mxShapeMockupRuler.prototype.paintVertexShape = function(c, x, y, w, h)1088{1089 c.translate(x, y);10901091 this.background(c, w, h);1092 c.setShadow(false);1093 this.foreground(c, w, h);1094};10951096mxShapeMockupRuler.prototype.background = function(c, w, h)1097{1098 c.rect(0, 0, w, h);1099 c.fillAndStroke();1100};11011102mxShapeMockupRuler.prototype.foreground = function(c, w, h)1103{1104 var facing = mxUtils.getValue(this.style, mxShapeMockupRuler.prototype.cst.ORIENTATION, mxShapeMockupRuler.prototype.cst.FACE_DOWN);1105 var unitSize = mxUtils.getValue(this.style, mxShapeMockupRuler.prototype.cst.UNIT_SIZE, '10');1106 1107 unitSize = Math.max(unitSize, 1);1108 1109 var currX = unitSize;1110 var i = 1;11111112 if (facing === mxShapeMockupRuler.prototype.cst.FACE_DOWN)1113 {1114 c.begin();1115 1116 while (currX < w)1117 {1118 var remainder = i % 10;11191120 if (remainder === 0)1121 {1122 c.moveTo(currX, h * 0.5);1123 c.lineTo(currX, h);1124 }1125 else if ( remainder === 5)1126 {1127 c.moveTo(currX, h * 0.7);1128 c.lineTo(currX, h);1129 }1130 else1131 {1132 c.moveTo(currX, h * 0.8);1133 c.lineTo(currX, h);1134 }11351136 currX = currX + unitSize;1137 i = i + 1;1138 }1139 1140 c.stroke();1141 }1142 else if (facing === mxShapeMockupRuler.prototype.cst.FACE_UP)1143 {1144 c.begin();1145 1146 while (currX < w)1147 {1148 var remainder = i % 10;11491150 if (remainder === 0)1151 {1152 c.moveTo(currX, h * 0.5);1153 c.lineTo(currX, 0);1154 }1155 else if ( remainder === 5)1156 {1157 c.moveTo(currX, h * 0.3);1158 c.lineTo(currX, 0);1159 }1160 else1161 {1162 c.moveTo(currX, h * 0.2);1163 c.lineTo(currX, 0);1164 }11651166 currX = currX + unitSize;1167 i = i + 1;1168 }1169 1170 c.stroke();1171 }1172};11731174mxCellRenderer.registerShape(mxShapeMockupRuler.prototype.cst.SHAPE_RULER, mxShapeMockupRuler);11751176//**********************************************************************************************************************************************************1177//Advanced Ruler 1178//**********************************************************************************************************************************************************1179/**1180* Extends mxShape.1181*/1182function mxShapeMockupRuler2(bounds, fill, stroke, strokewidth)1183{1184 mxShape.call(this);1185 this.bounds = bounds;1186 this.fill = fill;1187 this.stroke = stroke;1188 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1189};11901191/**1192* Extends mxShape.1193*/1194mxUtils.extend(mxShapeMockupRuler2, mxShape);11951196mxShapeMockupRuler2.prototype.cst = {1197 SHAPE_RULER : 'mxgraph.mockup.misc.ruler2',1198 ORIENTATION : 'rulerOrient',1199 UNIT_SIZE : 'dx',1200 FACE_UP : 'up',1201 FACE_DOWN : 'down'1202};12031204mxShapeMockupRuler2.prototype.customProperties = [1205 {name: 'rulerOrient', dispName: 'Orientation', defVal:'up', type: 'enum',1206 enumList: [{val: 'up', dispName: 'Up'}, {val: 'down', dispName: 'Down'}]1207 },1208 {name: 'dx', dispName: 'Unit Size', type: 'float', min:0, defVal:100}1209];12101211/**1212* Function: paintVertexShape1213* 1214* Paints the vertex shape.1215*/1216mxShapeMockupRuler2.prototype.paintVertexShape = function(c, x, y, w, h)1217{1218 c.translate(x, y);12191220 this.background(c, w, h);1221 c.setShadow(false);1222 this.foreground(c, x, y, w, h);1223};12241225mxShapeMockupRuler2.prototype.background = function(c, w, h)1226{1227 c.rect(0, 0, w, h);1228 c.fillAndStroke();1229};12301231mxShapeMockupRuler2.prototype.foreground = function(c, x, y, w, h)1232{1233 var facing = mxUtils.getValue(this.style, mxShapeMockupRuler2.prototype.cst.ORIENTATION, mxShapeMockupRuler2.prototype.cst.FACE_DOWN);1234 var fontColor = mxUtils.getValue(this.style, mxConstants.STYLE_FONTCOLOR, '#000000');1235 var dx = mxUtils.getValue(this.style, 'dx', '100');1236 var unitSize = dx / 10;1237 this.state.style['spacingLeft'] = Math.round(1000 * Math.max(0, Math.min(w, dx))) / 1000 - 4;1238 1239 unitSize = Math.max(unitSize, 1);1240 1241 c.setFontColor(fontColor);1242 1243 var currX = unitSize;1244 var i = 1;12451246 if (facing === mxShapeMockupRuler2.prototype.cst.FACE_DOWN)1247 {1248 c.begin();1249 1250 while (currX < w)1251 {1252 var remainder = i % 10;12531254 if (remainder === 0)1255 {1256 c.moveTo(currX, h - 10);1257 c.lineTo(currX, h);1258 1259 var unit = this.state.view.graph.getLabel(this.state.cell);1260 1261 if (!isNaN(unit))1262 {1263 c.stroke();1264 1265 var num = i * Math.round(100 * unit) / 1000;1266 1267 if (i != 10 && num != 0)1268 {1269 c.text(currX, (h - 10) * 0.5, 0, 0, num.toString(), mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1270 }1271 c.begin();1272 }1273 }1274 else if ( remainder === 5)1275 {1276 c.moveTo(currX, h - 6);1277 c.lineTo(currX, h);1278 }1279 else1280 {1281 c.moveTo(currX, h - 4);1282 c.lineTo(currX, h);1283 }12841285 currX = currX + unitSize;1286 i = i + 1;1287 }1288 1289 c.stroke();1290 }1291 else if (facing === mxShapeMockupRuler2.prototype.cst.FACE_UP)1292 {1293 c.begin();1294 1295 while (currX < w)1296 {1297 var remainder = i % 10;12981299 if (remainder === 0)1300 {1301 c.moveTo(currX, 10);1302 c.lineTo(currX, 0);13031304 var unit = this.state.view.graph.getLabel(this.state.cell);1305 1306 if (!isNaN(unit))1307 {1308 c.stroke();1309 1310 var num = i * Math.round(100 * unit) / 1000;1311 1312 if (i != 10 && num != 0)1313 {1314 c.text(currX, (h + 10) * 0.5, 0, 0, num.toString(), mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1315 }1316 c.begin();1317 }1318 }1319 else if ( remainder === 5)1320 {1321 c.moveTo(currX, 6);1322 c.lineTo(currX, 0);1323 }1324 else1325 {1326 c.moveTo(currX, 4);1327 c.lineTo(currX, 0);1328 }13291330 currX = currX + unitSize;1331 i = i + 1;1332 }1333 1334 c.stroke();1335 }1336};13371338mxCellRenderer.registerShape(mxShapeMockupRuler2.prototype.cst.SHAPE_RULER, mxShapeMockupRuler2);13391340Graph.handleFactory[mxShapeMockupRuler2.prototype.cst.SHAPE_RULER] = function(state)1341{1342 var handles = [Graph.createHandle(state, ['dx', 'spacingLeft', 'align', 'varticalAlign', 'spacingBottom', 'spacingTop', 'spacingRight', 'spacing'], function(bounds)1343 {1344 var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));13451346 return new mxPoint(bounds.x + dx, bounds.y + bounds.height - 10);1347 }, function(bounds, pt)1348 {1349 this.state.style['dx'] = Math.round(1000 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 1000;1350 this.state.style['spacingLeft'] = Math.round(1000 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 1000 - 4;1351 this.state.style['align'] = 'left';1352 this.state.style['verticalAlign'] = 'middle';1353 1354 var facing = mxUtils.getValue(this.state.style, 'rulerOrient', '1');1355 1356 if (facing == 'down')1357 {1358 this.state.style['spacingBottom'] = 10;1359 this.state.style['spacingTop'] = 0;1360 }1361 else1362 {1363 this.state.style['spacingBottom'] = 0;1364 this.state.style['spacingTop'] = 10;1365 }1366 1367 this.state.style['spacingRight'] = 0;1368 this.state.style['spacing'] = 0;1369 })];13701371 return handles;1372}13731374//**********************************************************************************************************************************************************1375//Revision Table1376//**********************************************************************************************************************************************************1377/**1378* Extends mxShape.1379*/1380function mxShapeMockupRevisionTable(bounds, fill, stroke, strokewidth)1381{1382 mxShape.call(this);1383 this.bounds = bounds;1384 this.fill = fill;1385 this.stroke = stroke;1386 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1387};13881389/**1390* Extends mxShape.1391*/1392mxUtils.extend(mxShapeMockupRevisionTable, mxShape);13931394mxShapeMockupRevisionTable.prototype.cst = {1395 SHAPE_REVISION_TABLE : 'mxgraph.mockup.misc.revisionTable',1396 MAIN_TEXT : 'mainText',1397 TEXT_COLOR : 'textColor',1398 TEXT_SIZE : 'textSize'1399};14001401/**1402* Function: paintVertexShape1403* 1404* Paints the vertex shape.1405*/1406mxShapeMockupRevisionTable.prototype.paintVertexShape = function(c, x, y, w, h)1407{1408 c.translate(x, y);14091410 this.background(c, w, h);1411 c.setShadow(false);1412 this.foreground(c, w, h);1413};14141415mxShapeMockupRevisionTable.prototype.background = function(c, w, h)1416{1417 c.rect(0, 0, w, h);1418 c.fillAndStroke();1419};14201421mxShapeMockupRevisionTable.prototype.foreground = function(c, w, h)1422{1423 var mainText = mxUtils.getValue(this.style, mxShapeMockupRevisionTable.prototype.cst.MAIN_TEXT, '').toString().split(',');1424 var textColor = mxUtils.getValue(this.style, mxShapeMockupRevisionTable.prototype.cst.TEXT_COLOR, '#999999');1425 var textSize = mxUtils.getValue(this.style, mxShapeMockupRevisionTable.prototype.cst.TEXT_SIZE, '17');1426 1427 c.begin();1428 c.moveTo(0, h * 0.33);1429 c.lineTo(w, h * 0.33);1430 c.moveTo(0, h * 0.67);1431 c.lineTo(w, h * 0.67);1432 c.moveTo(w * 0.125, h * 0.33);1433 c.lineTo(w * 0.125, h);1434 c.moveTo(w * 0.5, h * 0.33);1435 c.lineTo(w * 0.5, h);1436 c.stroke();1437 1438 c.setFontSize(textSize);1439 c.setFontColor(textColor);1440 1441 c.text(w * 0.5, h * 0.165, 0, 0, mainText[0], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1442 c.text(w * 0.0625, h * 0.5, 0, 0, mainText[1], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1443 c.text(w * 0.3125, h * 0.5, 0, 0, mainText[2], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1444 c.text(w * 0.75, h * 0.5, 0, 0, mainText[3], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1445 c.text(w * 0.0625, h * 0.835, 0, 0, mainText[4], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1446 c.text(w * 0.3125, h * 0.835, 0, 0, mainText[5], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1447 c.text(w * 0.75, h * 0.835, 0, 0, mainText[6], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);14481449};14501451mxCellRenderer.registerShape(mxShapeMockupRevisionTable.prototype.cst.SHAPE_REVISION_TABLE, mxShapeMockupRevisionTable);14521453//**********************************************************************************************************************************************************1454//Status Bar1455//**********************************************************************************************************************************************************1456/**1457* Extends mxShape.1458*/1459function mxShapeMockupStatusBar(bounds, fill, stroke, strokewidth)1460{1461 mxShape.call(this);1462 this.bounds = bounds;1463 this.fill = fill;1464 this.stroke = stroke;1465 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1466};14671468/**1469* Extends mxShape.1470*/1471mxUtils.extend(mxShapeMockupStatusBar, mxShape);14721473mxShapeMockupStatusBar.prototype.cst = {1474 SHAPE_STATUS_BAR : 'mxgraph.mockup.misc.statusBar',1475 MAIN_TEXT : 'mainText',1476 FILL_COLOR2 : 'fillColor2',1477 STROKE_COLOR2 : 'strokeColor2',1478 TEXT_COLOR : 'textColor',1479 TEXT_SIZE : 'textSize'1480};14811482mxShapeMockupStatusBar.prototype.customProperties = [1483 {name: 'fillColor2', dispName: 'Fill Color2', type: 'color', primary:true},1484 {name: 'strokeColor2', dispName: 'Stroke Color2', type: 'color', primary:true},1485 {name: 'textColor', dispName: 'Text Color', type: 'color', primary:true}1486];14871488/**1489* Function: paintVertexShape1490* 1491* Paints the vertex shape.1492*/1493mxShapeMockupStatusBar.prototype.paintVertexShape = function(c, x, y, w, h)1494{1495 c.translate(x, y);1496 w = Math.max(w, 105);1497 1498 this.background(c, w, h);1499 c.setShadow(false);1500 this.foreground(c, w, h);1501};15021503mxShapeMockupStatusBar.prototype.background = function(c, w, h)1504{1505 c.rect(0, h * 0.5 - 15, w, 30);1506 c.fillAndStroke();1507};15081509mxShapeMockupStatusBar.prototype.foreground = function(c, w, h)1510{1511 var fillColor2 = mxUtils.getValue(this.style, mxShapeMockupStatusBar.prototype.cst.FILL_COLOR2, '#ddeeff');1512 var strokeColor2 = mxUtils.getValue(this.style, mxShapeMockupStatusBar.prototype.cst.STROKE_COLOR2, '#008cff');1513 var mainText = mxUtils.getValue(this.style, mxShapeMockupStatusBar.prototype.cst.MAIN_TEXT, '').toString().split(',');1514 var textColor = mxUtils.getValue(this.style, mxShapeMockupStatusBar.prototype.cst.TEXT_COLOR, '#999999');1515 var textSize = mxUtils.getValue(this.style, mxShapeMockupStatusBar.prototype.cst.TEXT_SIZE, '17');1516 1517 c.setFillColor(fillColor2);1518 c.roundrect(5, h * 0.5 - 10, (w - 75) * 0.46, 20, 5, 5);1519 c.fill();15201521 c.roundrect(10 + (w - 75) * 0.46, h * 0.5 - 10, (w - 75) * 0.23, 20, 5, 5);1522 c.fill();1523 c.roundrect(15 + (w - 75) * 0.69, h * 0.5 - 10, (w - 75) * 0.276, 20, 5, 5);1524 c.fill();1525 1526 c.setFontSize(textSize);1527 c.setFontColor(textColor);1528 c.text(10, h * 0.5, 0, 0, mainText[0], mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1529 c.text(10 + (w - 75) * 0.575, h * 0.5, 0, 0, mainText[1], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1530 c.text(15 + (w - 75) * 0.828, h * 0.5, 0, 0, mainText[2], mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);1531 1532 c.setStrokeColor(strokeColor2);1533 c.ellipse(w - 25, h * 0.5 - 10, 20, 20);1534 c.stroke();1535 c.begin();1536 c.moveTo(w - 55, h * 0.5 + 10);1537 c.lineTo(w - 35, h * 0.5 + 10);1538 c.stroke();1539};15401541mxCellRenderer.registerShape(mxShapeMockupStatusBar.prototype.cst.SHAPE_STATUS_BAR, mxShapeMockupStatusBar);15421543//**********************************************************************************************************************************************************1544//Pin1545//**********************************************************************************************************************************************************1546/**1547* Extends mxShape.1548*/1549function mxShapeMockupPin(bounds, fill, stroke, strokewidth)1550{1551 mxShape.call(this);1552 this.bounds = bounds;1553 this.fill = fill;1554 this.stroke = stroke;1555 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1556};15571558/**1559* Extends mxShape.1560*/1561mxUtils.extend(mxShapeMockupPin, mxShape);15621563mxShapeMockupPin.prototype.cst = {1564 SHAPE_PIN : 'mxgraph.mockup.misc.pin',1565 FILL_COLOR2 : 'fillColor2',1566 FILL_COLOR3 : 'fillColor3'1567};15681569mxShapeMockupPin.prototype.customProperties = [1570 {name: 'fillColor2', dispName: 'Fill2 Color', type: 'color'},1571 {name: 'fillColor3', dispName: 'Fill3 Color', type: 'color'}1572];15731574/**1575* Function: paintVertexShape1576* 1577* Paints the vertex shape.1578*/1579mxShapeMockupPin.prototype.paintVertexShape = function(c, x, y, w, h)1580{1581 var fillColor2 = mxUtils.getValue(this.style, mxShapeMockupPin.prototype.cst.FILL_COLOR2, '#000000');1582 var fillColor3 = mxUtils.getValue(this.style, mxShapeMockupPin.prototype.cst.FILL_COLOR3, '#000000');1583 var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');1584 c.setShadow(false);1585 c.translate(x, y);15861587 c.setStrokeWidth(3);1588 c.setStrokeColor('#666666');1589 c.begin();1590 c.moveTo(w * 0.5, h * 0.4);1591 c.lineTo(w * 0.5, h);1592 c.stroke();15931594 c.setStrokeWidth(2);1595 c.setStrokeColor(strokeColor);1596 c.setGradient(fillColor2, fillColor3, 0, 0, w, h * 0.4, mxConstants.DIRECTION_SOUTH, 1, 1);1597 c.setAlpha(0.9);1598 c.ellipse(0, 0, w, h * 0.4);1599 c.fillAndStroke();16001601 c.setFillColor('#ffffff');1602 c.setAlpha(0.5);1603 c.ellipse(w * 0.2, h * 0.08, w * 0.3, h * 0.12);1604 c.fill();1605};16061607mxCellRenderer.registerShape(mxShapeMockupPin.prototype.cst.SHAPE_PIN, mxShapeMockupPin);16081609//**********************************************************************************************************************************************************1610//Rounded rectangle (adjustable rounding)1611//**********************************************************************************************************************************************************1612/**1613* Extends mxShape.1614*/1615function mxShapeMockupMiscRRect(bounds, fill, stroke, strokewidth)1616{1617 mxShape.call(this);1618 this.bounds = bounds;1619 this.fill = fill;1620 this.stroke = stroke;1621 this.strokewidth = (strokewidth != null) ? strokewidth : 1;1622};16231624/**1625* Extends mxShape.1626*/1627mxUtils.extend(mxShapeMockupMiscRRect, mxShape);16281629mxShapeMockupMiscRRect.prototype.cst = {1630 RRECT : 'mxgraph.mockup.misc.rrect',1631 R_SIZE : 'rSize'1632};16331634mxShapeMockupMiscRRect.prototype.customProperties = [1635 {name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:10}1636];16371638/**1639* Function: paintVertexShape1640* 1641* Paints the vertex shape.1642*/1643mxShapeMockupMiscRRect.prototype.paintVertexShape = function(c, x, y, w, h)1644{1645 c.translate(x, y);16461647 var rSize = parseInt(mxUtils.getValue(this.style, mxShapeMockupMiscRRect.prototype.cst.R_SIZE, '10'));1648 c.roundrect(0, 0, w, h, rSize);1649 c.fillAndStroke();1650};16511652mxCellRenderer.registerShape(mxShapeMockupMiscRRect.prototype.cst.RRECT, mxShapeMockupMiscRRect);16531654//**********************************************************************************************************************************************************1655//Anchor (a dummy shape without visuals used for anchoring)1656//**********************************************************************************************************************************************************1657/**1658* Extends mxShape.1659*/1660function mxShapeMockupMiscAnchor(bounds, fill, stroke, strokewidth)1661{1662 mxShape.call(this);1663 this.bounds = bounds;1664};16651666/**1667* Extends mxShape.1668*/1669mxUtils.extend(mxShapeMockupMiscAnchor, mxShape);16701671mxShapeMockupMiscAnchor.prototype.cst = {1672 ANCHOR : 'mxgraph.mockup.misc.anchor'1673};16741675/**1676* Function: paintVertexShape1677* 1678* Paints the vertex shape.1679*/1680mxShapeMockupMiscAnchor.prototype.paintVertexShape = function(c, x, y, w, h)1681{1682};16831684mxCellRenderer.registerShape(mxShapeMockupMiscAnchor.prototype.cst.ANCHOR, mxShapeMockupMiscAnchor);1685