/** * $Id: mxGmdl.js,v 1.0 2015/09/09 17:05:39 mate Exp $ * Copyright (c) 2006-2015, JGraph Ltd */ //********************************************************************************************************************************************************** //player //********************************************************************************************************************************************************** /** * Extends mxShape. */ function mxShapeGmdlPlayer(bounds, fill, stroke, strokewidth) { mxShape.call(this); this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = (strokewidth != null) ? strokewidth : 1; }; /** * Extends mxShape. */ mxUtils.extend(mxShapeGmdlPlayer, mxShape); mxShapeGmdlPlayer.prototype.cst = { SHAPE_PLAYER : 'mxgraph.gmdl.player' }; /** * Function: paintVertexShape * * Paints the vertex shape. */ mxShapeGmdlPlayer.prototype.paintVertexShape = function(c, x, y, w, h) { c.translate(x, y); c.begin(); c.rect(0, 0, w, h); c.fill(); c.setShadow(false); this.foreground(c, x, y, w, h); }; mxShapeGmdlPlayer.prototype.foreground = function(c, x, y, w, h) { if ( h >= 4) { c.setFillColor('#FFED00'); c.begin(); c.rect(0, 0, w * 0.8, 4); c.fill(); } if ( h >= 14 && w >= 33) { c.setFillColor('#717171'); c.begin(); c.rect(w - 33, h * 0.5 - 7, 4, 14); c.fill(); c.begin(); c.rect(w - 25, h * 0.5 - 7, 4, 14); c.fill(); } }; mxCellRenderer.prototype.defaultShapes[mxShapeGmdlPlayer.prototype.cst.SHAPE_PLAYER] = mxShapeGmdlPlayer; //********************************************************************************************************************************************************** //switch //********************************************************************************************************************************************************** /** * Extends mxShape. */ function mxShapeGmdlSwitch(bounds, fill, stroke, strokewidth) { mxShape.call(this); this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = (strokewidth != null) ? strokewidth : 1; }; /** * Extends mxShape. */ mxUtils.extend(mxShapeGmdlSwitch, mxShape); mxShapeGmdlSwitch.prototype.cst = { SHAPE_SWITCH : 'mxgraph.gmdl.switch', STATE : 'switchState', STATE_ON : 'on', STATE_OFF : 'off' }; /** * Function: paintVertexShape * * Paints the vertex shape. */ mxShapeGmdlSwitch.prototype.paintVertexShape = function(c, x, y, w, h) { c.translate(x, y); var state = mxUtils.getValue(this.style, mxShapeGmdlSwitch.prototype.cst.STATE, mxShapeGmdlSwitch.prototype.cst.STATE_ON); this.background(c, x, y, w, h, state); c.setShadow(true); this.foreground(c, x, y, w, h, state); }; mxShapeGmdlSwitch.prototype.background = function(c, x, y, w, h, state) { c.begin(); if (state === mxShapeGmdlSwitch.prototype.cst.STATE_ON) { c.save(); c.setAlpha('0.5'); c.moveTo(w * 0.135, h * 0.8); c.arcTo(w * 0.135, h * 0.3, 0, 0, 1, w * 0.135, h * 0.2); c.lineTo(w * 0.675, h * 0.2); c.arcTo(w * 0.135, h * 0.3, 0, 0, 1, w * 0.675, h * 0.8); c.close(); c.fillAndStroke(); c.restore(); } else { c.setFillColor('#BCBBBB'); c.moveTo(w * 0.225, h * 0.8); c.arcTo(w * 0.135, h * 0.3, 0, 0, 1, w * 0.225, h * 0.2); c.lineTo(w * 0.865, h * 0.2); c.arcTo(w * 0.135, h * 0.3, 0, 0, 1, w * 0.865, h * 0.8); c.close(); c.fillAndStroke(); } }; mxShapeGmdlSwitch.prototype.foreground = function(c, x, y, w, h, state) { c.begin(); if (state === mxShapeGmdlSwitch.prototype.cst.STATE_ON) { c.ellipse(w * 0.36, 0, w * 0.64, h); } else { c.setFillColor('#F1F1F1'); c.ellipse(0, 0, w * 0.64, h); } c.fillAndStroke(); }; mxCellRenderer.prototype.defaultShapes[mxShapeGmdlSwitch.prototype.cst.SHAPE_SWITCH] = mxShapeGmdlSwitch; //********************************************************************************************************************************************************** //rect with margins //********************************************************************************************************************************************************** /** * Extends mxShape. */ function mxShapeGmdlMarginRect(bounds, fill, stroke, strokewidth) { mxShape.call(this); this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = (strokewidth != null) ? strokewidth : 1; }; /** * Extends mxShape. */ mxUtils.extend(mxShapeGmdlMarginRect, mxShape); mxShapeGmdlMarginRect.prototype.cst = { SHAPE_MARGIN_RECT : 'mxgraph.gmdl.marginRect', MARGIN : 'rectMargin', MARGIN_TOP : 'rectMarginTop', MARGIN_LEFT : 'rectMarginLeft', MARGIN_BOTTOM : 'rectMarginBottom', MARGIN_RIGHT : 'rectMarginRight' }; /** * Function: paintVertexShape * * Paints the vertex shape. */ mxShapeGmdlMarginRect.prototype.paintVertexShape = function(c, x, y, w, h) { c.translate(x, y); this.background(c, x, y, w, h); }; mxShapeGmdlMarginRect.prototype.background = function(c, x, y, w, h, state) { var margin = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlMarginRect.prototype.cst.MARGIN, '0')); var marginTop = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlMarginRect.prototype.cst.MARGIN_TOP, '0')); var marginLeft = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlMarginRect.prototype.cst.MARGIN_LEFT, '0')); var marginBottom = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlMarginRect.prototype.cst.MARGIN_BOTTOM, '0')); var marginRight = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlMarginRect.prototype.cst.MARGIN_RIGHT, '0')); var x1 = margin + marginLeft; var y1 = margin + marginTop; var w1 = w - marginRight - x1 - margin; var h1 = h - marginBottom - y1 - margin; if (w1 >0 && h1 > 0) { c.begin(); c.rect(x1, y1, w1, h1); c.fillAndStroke(); } }; mxCellRenderer.prototype.defaultShapes[mxShapeGmdlMarginRect.prototype.cst.SHAPE_MARGIN_RECT] = mxShapeGmdlMarginRect; //********************************************************************************************************************************************************** //slider normal //********************************************************************************************************************************************************** /** * Extends mxShape. */ function mxShapeGmdlSliderNormal(bounds, fill, stroke, strokewidth) { mxShape.call(this); this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = (strokewidth != null) ? strokewidth : 1; }; /** * Extends mxShape. */ mxUtils.extend(mxShapeGmdlSliderNormal, mxShape); mxShapeGmdlSliderNormal.prototype.cst = { SHAPE_SLIDER_NORMAL : 'mxgraph.gmdl.sliderNormal', HANDLE_SIZE : 'handleSize' }; /** * Function: paintVertexShape * * Paints the vertex shape. */ mxShapeGmdlSliderNormal.prototype.paintVertexShape = function(c, x, y, w, h) { c.translate(x, y); this.background(c, x, y, w, h); c.setShadow(true); }; mxShapeGmdlSliderNormal.prototype.background = function(c, x, y, w, h) { var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderNormal.prototype.cst.HANDLE_SIZE, '10')); c.ellipse(0, h * 0.5 - hSize * 0.5, hSize, hSize); c.stroke(); c.begin(); c.moveTo(hSize, h * 0.5); c.lineTo(w, h * 0.5); c.fillAndStroke(); }; mxCellRenderer.prototype.defaultShapes[mxShapeGmdlSliderNormal.prototype.cst.SHAPE_SLIDER_NORMAL] = mxShapeGmdlSliderNormal; //********************************************************************************************************************************************************** //slider normal v2 //********************************************************************************************************************************************************** /** * Extends mxShape. */ function mxShapeGmdlSlider2(bounds, fill, stroke, strokewidth) { mxShape.call(this); this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = (strokewidth != null) ? strokewidth : 1; }; /** * Extends mxShape. */ mxUtils.extend(mxShapeGmdlSlider2, mxShape); mxShapeGmdlSlider2.prototype.cst = { SHAPE_SLIDER : 'mxgraph.gmdl.slider2', BAR_POS : 'barPos', HANDLE_SIZE : 'handleSize' }; /** * Function: paintVertexShape * * Paints the vertex shape. */ mxShapeGmdlSlider2.prototype.paintVertexShape = function(c, x, y, w, h) { c.translate(x, y); this.background(c, x, y, w, h); c.setShadow(true); }; mxShapeGmdlSlider2.prototype.background = function(c, x, y, w, h) { var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSlider2.prototype.cst.HANDLE_SIZE, '10')); var barPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSlider2.prototype.cst.BAR_POS, '40')) / 100; barPos = Math.max(0, Math.min(1, barPos)); c.save(); c.setStrokeColor('#bbbbbb'); c.begin(); c.moveTo(0, h * 0.5); c.lineTo(w, h * 0.5); c.fillAndStroke(); c.restore(); c.begin(); c.moveTo(0, h * 0.5); c.lineTo(barPos * w, h * 0.5); c.fillAndStroke(); c.begin(); c.ellipse(barPos * w - hSize * 0.5, h * 0.5 - hSize * 0.5, hSize, hSize); c.fillAndStroke(); }; mxCellRenderer.prototype.defaultShapes[mxShapeGmdlSlider2.prototype.cst.SHAPE_SLIDER] = mxShapeGmdlSlider2; mxShapeGmdlSlider2.prototype.constraints = null; Graph.handleFactory[mxShapeGmdlSlider2.prototype.cst.SHAPE_SLIDER] = function(state) { var handles = [Graph.createHandle(state, ['barPos'], function(bounds) { var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4)))); return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2); }, function(bounds, pt) { this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100; })]; return handles; }; //********************************************************************************************************************************************************** //slider focused v2 //********************************************************************************************************************************************************** /** * Extends mxShape. */ function mxShapeGmdlSliderFocused(bounds, fill, stroke, strokewidth) { mxShape.call(this); this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = (strokewidth != null) ? strokewidth : 1; }; /** * Extends mxShape. */ mxUtils.extend(mxShapeGmdlSliderFocused, mxShape); mxShapeGmdlSliderFocused.prototype.cst = { SHAPE_SLIDER_FOCUSED : 'mxgraph.gmdl.sliderFocused', BAR_POS : 'barPos', HANDLE_SIZE : 'handleSize' }; /** * Function: paintVertexShape * * Paints the vertex shape. */ mxShapeGmdlSliderFocused.prototype.paintVertexShape = function(c, x, y, w, h) { c.translate(x, y); this.background(c, x, y, w, h); c.setShadow(true); }; mxShapeGmdlSliderFocused.prototype.background = function(c, x, y, w, h) { var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderFocused.prototype.cst.HANDLE_SIZE, '10')); var barPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderFocused.prototype.cst.BAR_POS, '40')) / 100; var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#ffffff'); barPos = Math.max(0, Math.min(1, barPos)); c.save(); c.setStrokeColor('#bbbbbb'); c.begin(); c.moveTo(0, h * 0.5); c.lineTo(w, h * 0.5); c.fillAndStroke(); c.restore(); c.begin(); c.moveTo(0, h * 0.5); c.lineTo(barPos * w, h * 0.5); c.fillAndStroke(); c.begin(); c.ellipse(barPos * w - hSize * 0.167, h * 0.5 - hSize * 0.167, hSize * 0.33, hSize * 0.33); c.fillAndStroke(); c.setFillColor(strokeColor); c.setAlpha(0.15); c.begin(); c.ellipse(barPos * w - hSize * 0.5, h * 0.5 - hSize * 0.5, hSize, hSize); c.fill(); }; mxCellRenderer.prototype.defaultShapes[mxShapeGmdlSliderFocused.prototype.cst.SHAPE_SLIDER_FOCUSED] = mxShapeGmdlSliderFocused; mxShapeGmdlSliderFocused.prototype.constraints = null; Graph.handleFactory[mxShapeGmdlSliderFocused.prototype.cst.SHAPE_SLIDER_FOCUSED] = function(state) { var handles = [Graph.createHandle(state, ['barPos'], function(bounds) { var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4)))); return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2); }, function(bounds, pt) { this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100; })]; return handles; }; //********************************************************************************************************************************************************** //slider disabled //********************************************************************************************************************************************************** /** * Extends mxShape. */ function mxShapeGmdlSliderDisabled(bounds, fill, stroke, strokewidth) { mxShape.call(this); this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = (strokewidth != null) ? strokewidth : 1; }; /** * Extends mxShape. */ mxUtils.extend(mxShapeGmdlSliderDisabled, mxShape); mxShapeGmdlSliderDisabled.prototype.cst = { SHAPE_SLIDER_DISABLED : 'mxgraph.gmdl.sliderDisabled', HANDLE_POSITION : 'hPos', HANDLE_SIZE : 'handleSize' }; /** * Function: paintVertexShape * * Paints the vertex shape. */ mxShapeGmdlSliderDisabled.prototype.paintVertexShape = function(c, x, y, w, h) { c.translate(x, y); this.background(c, x, y, w, h); c.setShadow(true); }; mxShapeGmdlSliderDisabled.prototype.background = function(c, x, y, w, h) { var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDisabled.prototype.cst.HANDLE_SIZE, '10')); var hPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDisabled.prototype.cst.HANDLE_POSITION, '50')) / 100; hPos = Math.max(hPos, 0); hPos = Math.min(hPos, 1); c.ellipse(w * hPos - hSize * 0.5, (h - hSize) * 0.5, hSize, hSize); c.fillAndStroke(); var endL = w * hPos - 7; var startR = w * hPos + 7; if (endL > 0) { c.begin(); c.moveTo(0, h * 0.5); c.lineTo(endL, h * 0.5); c.stroke(); } if (startR < w) { c.begin(); c.moveTo(startR, h * 0.5); c.lineTo(w, h * 0.5); c.stroke(); } }; mxCellRenderer.prototype.defaultShapes[mxShapeGmdlSliderDisabled.prototype.cst.SHAPE_SLIDER_DISABLED] = mxShapeGmdlSliderDisabled; //********************************************************************************************************************************************************** //slider disabled v2 //********************************************************************************************************************************************************** /** * Extends mxShape. */ function mxShapeGmdlSliderDisabled2(bounds, fill, stroke, strokewidth) { mxShape.call(this); this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = (strokewidth != null) ? strokewidth : 1; }; /** * Extends mxShape. */ mxUtils.extend(mxShapeGmdlSliderDisabled2, mxShape); mxShapeGmdlSliderDisabled2.prototype.cst = { SHAPE_SLIDER_DISABLED : 'mxgraph.gmdl.sliderDisabled2', HANDLE_POSITION : 'hPos', HANDLE_SIZE : 'handleSize' }; /** * Function: paintVertexShape * * Paints the vertex shape. */ mxShapeGmdlSliderDisabled2.prototype.paintVertexShape = function(c, x, y, w, h) { c.translate(x, y); this.background(c, x, y, w, h); c.setShadow(true); }; mxShapeGmdlSliderDisabled2.prototype.background = function(c, x, y, w, h) { var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDisabled2.prototype.cst.HANDLE_SIZE, '10')); var hPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDisabled2.prototype.cst.HANDLE_POSITION, '50')) / 100; hPos = Math.min(Math.max(hPos, 0), 1); c.ellipse(w * hPos - hSize * 0.5, (h - hSize) * 0.5, hSize, hSize); c.fillAndStroke(); var endL = w * hPos - 7; var startR = w * hPos + 7; if (endL > 0) { c.begin(); c.moveTo(0, h * 0.5); c.lineTo(endL, h * 0.5); c.stroke(); } if (startR < w) { c.begin(); c.moveTo(startR, h * 0.5); c.lineTo(w, h * 0.5); c.stroke(); } }; mxCellRenderer.prototype.defaultShapes[mxShapeGmdlSliderDisabled2.prototype.cst.SHAPE_SLIDER_DISABLED] = mxShapeGmdlSliderDisabled2; mxShapeGmdlSlider2.prototype.constraints = null; Graph.handleFactory[mxShapeGmdlSliderDisabled2.prototype.cst.SHAPE_SLIDER_DISABLED] = function(state) { var handles = [Graph.createHandle(state, ['hPos'], function(bounds) { var hPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'hPos', 0.4)))); return new mxPoint(bounds.x + hPos * bounds.width / 100, bounds.y + bounds.height / 2); }, function(bounds, pt) { this.state.style['hPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100; })]; return handles; }; //********************************************************************************************************************************************************** //slider discrete //********************************************************************************************************************************************************** /** * Extends mxShape. */ function mxShapeGmdlSliderDiscrete(bounds, fill, stroke, strokewidth) { mxShape.call(this); this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = (strokewidth != null) ? strokewidth : 1; }; /** * Extends mxShape. */ mxUtils.extend(mxShapeGmdlSliderDiscrete, mxShape); mxShapeGmdlSliderDiscrete.prototype.cst = { SHAPE_DISCRETE : 'mxgraph.gmdl.sliderDiscrete', BAR_POS : 'barPos', HANDLE_SIZE : 'handleSize' }; /** * Function: paintVertexShape * * Paints the vertex shape. */ mxShapeGmdlSliderDiscrete.prototype.paintVertexShape = function(c, x, y, w, h) { c.translate(x, y); this.background(c, x, y, w, h); c.setShadow(true); }; mxShapeGmdlSliderDiscrete.prototype.background = function(c, x, y, w, h) { var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDiscrete.prototype.cst.HANDLE_SIZE, '10')); var barPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDiscrete.prototype.cst.BAR_POS, '40')) / 100; var fontSize = parseFloat(mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '12')); var fontColor = mxUtils.getValue(this.style, mxConstants.STYLE_FONTCOLOR, '#000000'); barPos = Math.max(0, Math.min(1, barPos)); c.save(); c.setStrokeColor('#bbbbbb'); c.begin(); c.moveTo(0, h * 0.5 + 22.5); c.lineTo(w, h * 0.5 + 22.5); c.fillAndStroke(); c.restore(); c.begin(); c.moveTo(0, h * 0.5 + 22.5); c.lineTo(barPos * w, h * 0.5 + 22.5); c.fillAndStroke(); c.begin(); c.moveTo(barPos * w, h * 0.5 + 15.5); c.lineTo(barPos * w - 10.5, h * 0.5 + 2.5); c.arcTo(15, 15, 0, 0, 1, barPos * w, h * 0.5 - 22.5); c.arcTo(15, 15, 0, 0, 1, barPos * w + 10.5, h * 0.5 + 2.5); c.close(); c.fillAndStroke(); c.setFontSize(fontSize); c.setFontColor(fontColor); var p = Math.round(barPos * 100); c.text(barPos * w, h * 0.5 - 9, 0, 0, p.toString() , mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); }; mxCellRenderer.prototype.defaultShapes[mxShapeGmdlSliderDiscrete.prototype.cst.SHAPE_DISCRETE] = mxShapeGmdlSliderDiscrete; mxShapeGmdlSliderDiscrete.prototype.constraints = null; Graph.handleFactory[mxShapeGmdlSliderDiscrete.prototype.cst.SHAPE_DISCRETE] = function(state) { var handles = [Graph.createHandle(state, ['barPos'], function(bounds) { var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4)))); return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2 + 22.5); }, function(bounds, pt) { this.state.style['barPos'] = Math.round(100 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 100; })]; return handles; }; //********************************************************************************************************************************************************** //slider discrete with dots //********************************************************************************************************************************************************** /** * Extends mxShape. */ function mxShapeGmdlSliderDiscreteDots(bounds, fill, stroke, strokewidth) { mxShape.call(this); this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = (strokewidth != null) ? strokewidth : 1; }; /** * Extends mxShape. */ mxUtils.extend(mxShapeGmdlSliderDiscreteDots, mxShape); mxShapeGmdlSliderDiscreteDots.prototype.cst = { SHAPE_DISCRETE_DOTS : 'mxgraph.gmdl.sliderDiscreteDots', BAR_POS : 'barPos', HANDLE_SIZE : 'handleSize' }; /** * Function: paintVertexShape * * Paints the vertex shape. */ mxShapeGmdlSliderDiscreteDots.prototype.paintVertexShape = function(c, x, y, w, h) { c.translate(x, y); this.background(c, x, y, w, h); c.setShadow(true); }; mxShapeGmdlSliderDiscreteDots.prototype.background = function(c, x, y, w, h) { var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDiscreteDots.prototype.cst.HANDLE_SIZE, '10')); var barPos = parseFloat(mxUtils.getValue(this.style, mxShapeGmdlSliderDiscreteDots.prototype.cst.BAR_POS, '40')) / 100; var fontSize = parseFloat(mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '12')); var fontColor = mxUtils.getValue(this.style, mxConstants.STYLE_FONTCOLOR, '#000000'); var bright = mxUtils.getValue(this.style, 'bright', '1'); barPos = Math.max(0, Math.min(1, barPos)); c.save(); c.setStrokeColor('#bebebe'); c.begin(); c.moveTo(0, h * 0.5 + 22.5); c.lineTo(w, h * 0.5 + 22.5); c.fillAndStroke(); c.restore(); if (barPos <= 0.1) { c.setFillColor('#bebebe'); } c.begin(); c.moveTo(0, h * 0.5 + 22.5); c.lineTo(barPos * w, h * 0.5 + 22.5); c.fillAndStroke(); c.begin(); c.moveTo(barPos * w, h * 0.5 + 15.5); c.lineTo(barPos * w - 10.5, h * 0.5 + 2.5); c.arcTo(15, 15, 0, 0, 1, barPos * w, h * 0.5 - 22.5); c.arcTo(15, 15, 0, 0, 1, barPos * w + 10.5, h * 0.5 + 2.5); c.close(); c.fill(); if (bright == '1') { c.setFillColor('#000000'); } else { c.setFillColor('#ffffff'); } c.ellipse(-1.5, h * 0.5 + 21, 3, 3); c.fill(); c.ellipse(w * 0.2 - 1.5, h * 0.5 + 21, 3, 3); c.fill(); c.ellipse(w * 0.4 - 1.5, h * 0.5 + 21, 3, 3); c.fill(); c.ellipse(w * 0.6 - 1.5, h * 0.5 + 21, 3, 3); c.fill(); c.ellipse(w * 0.8 - 1.5, h * 0.5 + 21, 3, 3); c.fill(); c.ellipse(w - 1.5, h * 0.5 + 21, 3, 3); c.fill(); c.setFontSize(fontSize); c.setFontColor(fontColor); var p = Math.round(barPos * 100); c.text(barPos * w, h * 0.5 - 9, 0, 0, p.toString() , mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); }; mxCellRenderer.prototype.defaultShapes[mxShapeGmdlSliderDiscreteDots.prototype.cst.SHAPE_DISCRETE_DOTS] = mxShapeGmdlSliderDiscreteDots; mxShapeGmdlSliderDiscreteDots.prototype.constraints = null; Graph.handleFactory[mxShapeGmdlSliderDiscreteDots.prototype.cst.SHAPE_DISCRETE_DOTS] = function(state) { var handles = [Graph.createHandle(state, ['barPos'], function(bounds) { var barPos = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'barPos', 0.4)))); return new mxPoint(bounds.x + barPos * bounds.width / 100, bounds.y + bounds.height / 2 + 22.5); }, function(bounds, pt) { this.state.style['barPos'] = Math.round(0.05 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 0.05; })]; return handles; }; //********************************************************************************************************************************************************** //Progress Bar //********************************************************************************************************************************************************** /** * Extends mxShape. */ function mxShapeGmdlProgressBar(bounds, fill, stroke, strokewidth) { mxShape.call(this); this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = (strokewidth != null) ? strokewidth : 1; this.dx1 = 0.8; }; /** * Extends mxShape. */ mxUtils.extend(mxShapeGmdlProgressBar, mxShape); mxShapeGmdlProgressBar.prototype.cst = { PROGRESS_BAR : 'mxgraph.gmdl.progressBar' }; /** * Function: paintVertexShape * * Paints the vertex shape. */ mxShapeGmdlProgressBar.prototype.paintVertexShape = function(c, x, y, w, h) { var dx1 = w * Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx1', this.dx1)))); c.translate(x, y); c.save(); c.setStrokeColor('#aaaaaa'); c.begin(); c.moveTo(0, h * 0.5); c.lineTo(w , h * 0.5); c.stroke(); c.restore(); c.setShadow(false); c.begin(); c.moveTo(0, h * 0.5); c.lineTo(dx1, h * 0.5); c.stroke(); // c.setStrokeColor('#000000'); // c.setAlpha('0.2'); // c.begin(); // c.moveTo(0, h * 0.5); // c.lineTo(dx1, h * 0.5); // c.stroke(); }; mxCellRenderer.registerShape(mxShapeGmdlProgressBar.prototype.cst.PROGRESS_BAR, mxShapeGmdlProgressBar); mxShapeGmdlProgressBar.prototype.constraints = null; Graph.handleFactory[mxShapeGmdlProgressBar.prototype.cst.PROGRESS_BAR] = function(state) { var handles = [Graph.createHandle(state, ['dx1'], function(bounds) { var dx1 = Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.state.style, 'dx1', this.dx1)))); return new mxPoint(bounds.x + dx1 * bounds.width, bounds.y + bounds.height / 2); }, function(bounds, pt) { this.state.style['dx1'] = Math.round(100 * Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width))) / 100; })]; var handle2 = Graph.createHandle(state, ['dx2'], function(bounds) { var dx2 = Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.state.style, 'dx2', this.dx1)))); return new mxPoint(bounds.x + dx2 * bounds.width, bounds.y + bounds.height / 2); }, function(bounds, pt) { this.state.style['dx2'] = Math.round(100 * Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width))) / 100; }); handles.push(handle2); return handles; };