1720 lines
49 KiB
JavaScript
Vendored
1720 lines
49 KiB
JavaScript
Vendored
/**
|
|
* $Id: mxIOS7Ui.js,v 1.6 2013/12/04 16:48:54 mate Exp $
|
|
* Copyright (c) 2006-2013, JGraph Ltd
|
|
*/
|
|
|
|
var mxIOS7C =
|
|
{
|
|
MAIN_TEXT : 'mainText',
|
|
SUB_TEXT : 'subText',
|
|
TEXT_COLOR : 'textColor',
|
|
TEXT_SIZE : 'textSize',
|
|
BAR_POS : 'barPos',
|
|
BUTTON_TEXT : 'buttonText',
|
|
BUTTON_STATE : 'buttonState',
|
|
SELECTED : '+', //has to be one character long
|
|
STATE_ON : 'on',
|
|
STATE_OFF : 'off',
|
|
GRID_SIZE : 'gridSize',
|
|
|
|
SHAPE_IOS7_APP_BAR : 'mxgraph.ios7ui.appBar',
|
|
SHAPE_IOS7_ON_OFF_BUTTON : 'mxgraph.ios7ui.onOffButton',
|
|
SHAPE_IOS7_SLIDER : 'mxgraph.ios7ui.slider',
|
|
SHAPE_IOS7_DOWNLOAD_BAR : 'mxgraph.ios7ui.downloadBar',
|
|
SHAPE_IOS7_ICON : 'mxgraph.ios7ui.icon',
|
|
SHAPE_IOS7_HOR_BUTTON_BAR : 'mxgraph.ios7ui.horButtonBar',
|
|
SHAPE_IOS7_PAGE_CONTROL : 'mxgraph.ios7ui.pageControl',
|
|
SHAPE_IOS7_EXPAND : 'mxgraph.ios7ui.expand',
|
|
SHAPE_IOS7_ICON_GRID : 'mxgraph.ios7ui.iconGrid',
|
|
SHAPE_IOS7_PHONE : 'mxgraph.ios7ui.phone',
|
|
SHAPE_IOS7_SEARCH_BOX : 'mxgraph.ios7ui.searchBox',
|
|
SHAPE_IOS7_URL : 'mxgraph.ios7ui.url',
|
|
SHAPE_IOS7_ACTION_DIALOG : 'mxgraph.ios7ui.actionDialog',
|
|
|
|
STYLE_FILLCOLOR2 : 'fillColor2',
|
|
STYLE_FILLCOLOR3 : 'fillColor3',
|
|
STYLE_TEXTCOLOR : 'textColor',
|
|
STYLE_TEXTCOLOR2 : 'textColor2',
|
|
STYLE_STROKECOLOR2 : 'strokeColor2',
|
|
STYLE_STROKECOLOR3 : 'strokeColor3',
|
|
STYLE_TEXTSIZE : 'textSize'
|
|
};
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//iOS7 Application Bar
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7AppBar(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(mxShapeIOS7AppBar, mxShape);
|
|
|
|
mxShapeIOS7AppBar.prototype.customProperties = [
|
|
{name: 'fillColor2', dispName: 'Fill Color 2', type: 'color'}
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7AppBar.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
this.background(c, x, y, w, h);
|
|
c.setShadow(false);
|
|
this.foreground(c, x, y, w, h);
|
|
};
|
|
|
|
mxShapeIOS7AppBar.prototype.background = function(c, x, y, w, h)
|
|
{
|
|
c.rect(0, 0, w, h);
|
|
c.fill();
|
|
};
|
|
|
|
mxShapeIOS7AppBar.prototype.foreground = function(c, x, y, w, h)
|
|
{
|
|
c.setFillColor(mxUtils.getValue(this.style, mxIOS7C.STYLE_FILLCOLOR2, '#222222'));
|
|
|
|
c.ellipse(5, h * 0.5 - 1.5, 3, 3);
|
|
c.fill();
|
|
c.ellipse(9, h * 0.5 - 1.5, 3, 3);
|
|
c.fill();
|
|
c.ellipse(13, h * 0.5 - 1.5, 3, 3);
|
|
c.fill();
|
|
c.ellipse(17, h * 0.5 - 1.5, 3, 3);
|
|
c.fill();
|
|
c.ellipse(21, h * 0.5 - 1.5, 3, 3);
|
|
c.fill();
|
|
|
|
c.ellipse(54, h * 0.5 + 2, 2, 2);
|
|
c.fillAndStroke();
|
|
|
|
c.setStrokeWidth(2);
|
|
c.begin();
|
|
c.moveTo(52, h * 0.5 + 1);
|
|
c.arcTo(3.5, 3.5, 0, 0, 1, 58, h * 0.5 + 1);
|
|
c.stroke();
|
|
|
|
c.begin();
|
|
c.moveTo(50, h * 0.5 - 1);
|
|
c.arcTo(6, 6, 0, 0, 1, 60, h * 0.5 - 1);
|
|
c.stroke();
|
|
|
|
c.begin();
|
|
c.moveTo(w - 19, h * 0.5 - 2);
|
|
c.lineTo(w - 6, h * 0.5 - 2);
|
|
c.lineTo(w - 6, h * 0.5 + 2);
|
|
c.lineTo(w - 19, h * 0.5 + 2);
|
|
c.close();
|
|
c.fill();
|
|
|
|
c.setStrokeWidth(1);
|
|
c.begin();
|
|
c.moveTo(w - 44, h * 0.5 - 2.5);
|
|
c.lineTo(w - 36, h * 0.5 + 2.5);
|
|
c.lineTo(w - 40, h * 0.5 + 5);
|
|
c.lineTo(w - 40, h * 0.5 - 5);
|
|
c.lineTo(w - 36, h * 0.5 - 2.5);
|
|
c.lineTo(w - 44, h * 0.5 + 2.5);
|
|
c.stroke();
|
|
|
|
c.begin();
|
|
c.moveTo(w - 20, h * 0.5 - 3);
|
|
c.lineTo(w - 5, h * 0.5 - 3);
|
|
c.lineTo(w - 5, h * 0.5 - 1);
|
|
c.lineTo(w - 3.5, h * 0.5 - 1);
|
|
c.lineTo(w - 3.5, h * 0.5 + 1);
|
|
c.lineTo(w - 5, h * 0.5 + 1);
|
|
c.lineTo(w - 5, h * 0.5 + 3);
|
|
c.lineTo(w - 20, h * 0.5 + 3);
|
|
c.close();
|
|
c.stroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_APP_BAR, mxShapeIOS7AppBar);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//On-Off Button
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7OnOffButton(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(mxShapeIOS7OnOffButton, mxShape);
|
|
|
|
mxShapeIOS7OnOffButton.prototype.customProperties = [
|
|
{name: 'buttonState', dispName: 'Button State', type: 'enum',
|
|
enumList: [{val: 'on', dispName: 'On'},
|
|
{val: 'off', dispName: 'Off'}]
|
|
},
|
|
{name: 'strokeColor2', dispName: 'Stroke Color 2', type: 'color'},
|
|
{name: 'fillColor2', dispName: 'Fill Color 2', type: 'color'},
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7OnOffButton.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
w = Math.max(w, 2 * h);
|
|
var state = mxUtils.getValue(this.style, mxIOS7C.BUTTON_STATE, mxIOS7C.STATE_ON);
|
|
this.background(c, x, y, w, h, state);
|
|
c.setShadow(false);
|
|
this.foreground(c, x, y, w, h, state);
|
|
};
|
|
|
|
mxShapeIOS7OnOffButton.prototype.background = function(c, x, y, w, h, state)
|
|
{
|
|
if (state === mxIOS7C.STATE_ON)
|
|
{
|
|
c.roundrect(0, 0, w, h, h * 0.5, h * 0.5);
|
|
c.fillAndStroke();
|
|
}
|
|
else if (state === mxIOS7C.STATE_OFF)
|
|
{
|
|
c.setStrokeColor(mxUtils.getValue(this.style, mxIOS7C.STYLE_STROKECOLOR2, '#aaaaaa'));
|
|
c.setFillColor(mxUtils.getValue(this.style, mxIOS7C.STYLE_FILLCOLOR2, '#ffffff'));
|
|
c.roundrect(0, 0, w, h, h * 0.5, h * 0.5);
|
|
c.fillAndStroke();
|
|
}
|
|
|
|
};
|
|
|
|
mxShapeIOS7OnOffButton.prototype.foreground = function(c, x, y, w, h, state)
|
|
{
|
|
c.setFillColor('#ffffff');
|
|
|
|
if (state === mxIOS7C.STATE_ON)
|
|
{
|
|
c.ellipse(w - h + 1, 1, h - 2, h - 2);
|
|
c.fill();
|
|
}
|
|
else
|
|
{
|
|
c.ellipse(0, 0, h, h);
|
|
c.stroke();
|
|
}
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_ON_OFF_BUTTON, mxShapeIOS7OnOffButton);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Slider
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7Slider(bounds, fill, stroke, strokewidth)
|
|
{
|
|
mxShape.call(this);
|
|
this.bounds = bounds;
|
|
this.fill = fill;
|
|
this.stroke = stroke;
|
|
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
|
|
this.barPos = 80;
|
|
};
|
|
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
mxUtils.extend(mxShapeIOS7Slider, mxShape);
|
|
|
|
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7Slider.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
c.setShadow(false);
|
|
|
|
this.foreground(c, w, h);
|
|
};
|
|
|
|
mxShapeIOS7Slider.prototype.foreground = function(c, w, h)
|
|
{
|
|
c.setStrokeWidth(2);
|
|
|
|
c.begin();
|
|
c.moveTo(0, h * 0.5);
|
|
c.lineTo(w, h * 0.5);
|
|
c.stroke();
|
|
|
|
var barPos = mxUtils.getValue(this.style, mxIOS7C.BAR_POS, '80');
|
|
barPos = Math.min(barPos, 100);
|
|
barPos = Math.max(barPos, 0);
|
|
var deadzone = 0;
|
|
var virRange = w - 2 * deadzone;
|
|
var truePos = deadzone + virRange * barPos / 100;
|
|
|
|
c.setStrokeColor(mxUtils.getValue(this.style, mxIOS7C.STYLE_STROKECOLOR2, '#a0a0a0'));
|
|
c.ellipse(truePos - 5, h * 0.5 - 5, 10, 10);
|
|
c.fillAndStroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_SLIDER, mxShapeIOS7Slider);
|
|
|
|
Graph.handleFactory[mxIOS7C.SHAPE_IOS7_SLIDER] = function(state)
|
|
{
|
|
var handles = [Graph.createHandle(state, ['barPos'], function(bounds)
|
|
{
|
|
var barPos = Math.max(0, Math.min(100, parseFloat(mxUtils.getValue(this.state.style, 'barPos', this.barPos))));
|
|
|
|
return new mxPoint(bounds.x + barPos / 100 * bounds.width, bounds.y + bounds.height / 2);
|
|
}, function(bounds, pt)
|
|
{
|
|
this.state.style['barPos'] = Math.round(1000 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 1000;
|
|
})];
|
|
|
|
return handles;
|
|
}
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Download Bar
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7DownloadBar(bounds, fill, stroke, strokewidth)
|
|
{
|
|
mxShape.call(this);
|
|
this.bounds = bounds;
|
|
this.fill = fill;
|
|
this.stroke = stroke;
|
|
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
|
|
this.barPos = 80;
|
|
};
|
|
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
mxUtils.extend(mxShapeIOS7DownloadBar, mxShape);
|
|
|
|
mxShapeIOS7DownloadBar.prototype.customProperties = [
|
|
{name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, max:1, defVal:30},
|
|
{name: 'strokeColor2', dispName: 'Stroke Color 2', type: 'color'}
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7DownloadBar.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
this.foreground(c, w, h);
|
|
};
|
|
|
|
mxShapeIOS7DownloadBar.prototype.foreground = function(c, w, h)
|
|
{
|
|
var fieldText = mxUtils.getValue(this.style, mxIOS7C.BUTTON_TEXT, '');
|
|
c.setFontStyle(mxConstants.FONT_BOLD);
|
|
c.text(w * 0.5, h * 0.2, 0, 0, fieldText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
|
|
|
|
var barPos = mxUtils.getValue(this.style, mxIOS7C.BAR_POS, '80');
|
|
barPos = Math.min(barPos, 100);
|
|
barPos = Math.max(barPos, 0);
|
|
var truePos = w * barPos / 100;
|
|
|
|
c.setStrokeWidth(2);
|
|
c.setStrokeColor(mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, ''));
|
|
c.begin();
|
|
c.moveTo(0, h * 0.5);
|
|
c.lineTo(w, h * 0.5);
|
|
c.stroke();
|
|
|
|
c.setStrokeColor(mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, ''));
|
|
c.begin();
|
|
c.moveTo(0, h * 0.5);
|
|
c.lineTo(truePos, h * 0.5);
|
|
c.stroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_DOWNLOAD_BAR, mxShapeIOS7DownloadBar);
|
|
|
|
Graph.handleFactory[mxIOS7C.SHAPE_IOS7_DOWNLOAD_BAR] = function(state)
|
|
{
|
|
var handles = [Graph.createHandle(state, ['barPos'], function(bounds)
|
|
{
|
|
var barPos = Math.max(0, Math.min(100, parseFloat(mxUtils.getValue(this.state.style, 'barPos', this.barPos))));
|
|
|
|
return new mxPoint(bounds.x + barPos / 100 * bounds.width, bounds.y + bounds.height / 2);
|
|
}, function(bounds, pt)
|
|
{
|
|
this.state.style['barPos'] = Math.round(1000 * Math.max(0, Math.min(100, (pt.x - bounds.x) * 100 / bounds.width))) / 1000;
|
|
})];
|
|
|
|
return handles;
|
|
}
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Icon
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7Icon(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(mxShapeIOS7Icon, mxShape);
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7Icon.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
this.foreground(c, w, h);
|
|
};
|
|
|
|
mxShapeIOS7Icon.prototype.foreground = function(c, w, h)
|
|
{
|
|
c.setGradient('#00D0F0', '#0080F0', w * 0.325, 0, w * 0.675, h * 0.5, mxConstants.DIRECTION_SOUTH, 1, 1);
|
|
c.roundrect(0, 0, w, h, w * 0.1, h * 0.1);
|
|
c.fill();
|
|
|
|
var fieldText = mxUtils.getValue(this.style, mxIOS7C.BUTTON_TEXT, '');
|
|
c.setFontColor('#ffffff');
|
|
c.setFontStyle(mxConstants.FONT_BOLD);
|
|
c.setFontSize(8);
|
|
c.text(w * 0.5, h * 0.5, 0, 0, fieldText, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_ICON, mxShapeIOS7Icon);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Horizontal Button Bar
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7horButtonBar(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(mxShapeIOS7horButtonBar, mxShape);
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7horButtonBar.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
var textStrings = mxUtils.getValue(this.style, mxIOS7C.BUTTON_TEXT, '+Button 1, Button 2, Button 3').toString().split(',');
|
|
var fontColor = mxUtils.getValue(this.style, mxIOS7C.STYLE_TEXTCOLOR, '#666666');
|
|
var selectedFontColor = mxUtils.getValue(this.style, mxIOS7C.STYLE_TEXTCOLOR2, '#ffffff');
|
|
var fontSize = mxUtils.getValue(this.style, mxConstants.STYLE_FONTSIZE, '8.5').toString();
|
|
var frameColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#666666');
|
|
var bgColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');
|
|
var selectedFillColor = mxUtils.getValue(this.style, mxIOS7C.STYLE_FILLCOLOR2, '#008cff');
|
|
var buttonNum = textStrings.length;
|
|
var buttonWidths = new Array(buttonNum);
|
|
var buttonTotalWidth = 0;
|
|
var selectedButton = -1;
|
|
var rSize = 2.5; //rounding size
|
|
var labelOffset = 2.5;
|
|
|
|
for (var i = 0; i < buttonNum; i++)
|
|
{
|
|
var buttonText = textStrings[i];
|
|
|
|
if(buttonText.charAt(0) === mxIOS7C.SELECTED)
|
|
{
|
|
buttonText = textStrings[i].substring(1);
|
|
selectedButton = i;
|
|
}
|
|
|
|
buttonWidths[i] = mxUtils.getSizeForString(buttonText, fontSize, mxConstants.DEFAULT_FONTFAMILY).width;
|
|
buttonTotalWidth += buttonWidths[i];
|
|
}
|
|
|
|
var trueH = Math.max(h, fontSize * 1.5, 10);
|
|
var minW = 2 * labelOffset * buttonNum + buttonTotalWidth;
|
|
var trueW = Math.max(w, minW);
|
|
|
|
c.translate(x, y);
|
|
this.background(c, trueW, trueH, rSize, buttonNum, buttonWidths, labelOffset, minW, frameColor, bgColor, selectedFillColor, selectedButton);
|
|
c.setShadow(false);
|
|
|
|
var currWidth = 0;
|
|
|
|
for (var i = 0; i < buttonNum; i++)
|
|
{
|
|
if (i === selectedButton)
|
|
{
|
|
c.setFontColor(selectedFontColor);
|
|
}
|
|
else
|
|
{
|
|
c.setFontColor(fontColor);
|
|
}
|
|
|
|
currWidth = currWidth + labelOffset;
|
|
this.buttonText(c, currWidth, trueH, textStrings[i], buttonWidths[i], fontSize, minW, trueW);
|
|
currWidth = currWidth + buttonWidths[i] + labelOffset;
|
|
}
|
|
};
|
|
|
|
mxShapeIOS7horButtonBar.prototype.background = function(c, w, h, rSize, buttonNum, buttonWidths, labelOffset, minW, frameColor, bgColor, selectedFillColor, selectedButton)
|
|
{
|
|
c.begin();
|
|
|
|
//draw the frame
|
|
c.setStrokeColor(frameColor);
|
|
c.setFillColor(bgColor);
|
|
c.moveTo(0, rSize);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);
|
|
c.lineTo(w - rSize, 0);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);
|
|
c.lineTo(w, h - rSize);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);
|
|
c.lineTo(rSize, h);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
|
|
//draw the button separators
|
|
c.setStrokeColor(frameColor);
|
|
c.begin();
|
|
for (var i = 1; i < buttonNum; i++)
|
|
{
|
|
if (i !== selectedButton && i !== (selectedButton + 1))
|
|
{
|
|
var currWidth = 0;
|
|
|
|
for (var j = 0; j < i; j++)
|
|
{
|
|
currWidth += buttonWidths[j] + 2 * labelOffset;
|
|
}
|
|
|
|
currWidth = currWidth * w / minW;
|
|
c.moveTo(currWidth, 0);
|
|
c.lineTo(currWidth, h);
|
|
}
|
|
}
|
|
|
|
c.stroke();
|
|
|
|
//draw the selected button
|
|
var buttonLeft = 0;
|
|
c.setStrokeColor(mxConstants.NONE);
|
|
|
|
for (var i = 0; i < selectedButton; i++)
|
|
{
|
|
buttonLeft += buttonWidths[i] + 2 * labelOffset;
|
|
}
|
|
|
|
buttonLeft = buttonLeft * w / minW;
|
|
var buttonRight = (buttonWidths[selectedButton] + 2 * labelOffset) * w / minW;
|
|
buttonRight += buttonLeft;
|
|
c.setFillColor('#0080F0');
|
|
|
|
if (selectedButton === 0)
|
|
{
|
|
c.begin();
|
|
// we draw a path for the first button
|
|
c.moveTo(0, rSize);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);
|
|
c.lineTo(buttonRight, 0);
|
|
c.lineTo(buttonRight, h);
|
|
c.lineTo(rSize, h);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);
|
|
c.close();
|
|
c.fill();
|
|
}
|
|
else if (selectedButton === buttonNum - 1)
|
|
{
|
|
c.begin();
|
|
// we draw a path for the last button
|
|
c.moveTo(buttonLeft, 0);
|
|
c.lineTo(buttonRight - rSize, 0);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, buttonRight, rSize);
|
|
c.lineTo(buttonRight, h - rSize);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, buttonRight - rSize, h);
|
|
c.lineTo(buttonLeft, h);
|
|
c.close();
|
|
c.fill();
|
|
}
|
|
else if (selectedButton !== -1)
|
|
{
|
|
c.begin();
|
|
// we draw a path rectangle for one of the buttons in the middle
|
|
c.moveTo(buttonLeft, 0);
|
|
c.lineTo(buttonRight, 0);
|
|
c.lineTo(buttonRight, h);
|
|
c.lineTo(buttonLeft, h);
|
|
c.close();
|
|
c.fill();
|
|
}
|
|
|
|
//draw the frame again, to achieve a nicer effect
|
|
c.setStrokeColor(frameColor);
|
|
c.setFillColor(bgColor);
|
|
c.begin();
|
|
c.moveTo(0, rSize);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);
|
|
c.lineTo(w - rSize, 0);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);
|
|
c.lineTo(w, h - rSize);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);
|
|
c.lineTo(rSize, h);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);
|
|
c.close();
|
|
c.stroke();
|
|
};
|
|
|
|
mxShapeIOS7horButtonBar.prototype.buttonText = function(c, w, h, textString, buttonWidth, fontSize, minW, trueW)
|
|
{
|
|
if(textString.charAt(0) === mxIOS7C.SELECTED)
|
|
{
|
|
textString = textString.substring(1);
|
|
}
|
|
|
|
c.begin();
|
|
c.setFontSize(fontSize);
|
|
c.text((w + buttonWidth * 0.5) * trueW / minW, h * 0.5, 0, 0, textString, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_HOR_BUTTON_BAR, mxShapeIOS7horButtonBar);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Page Control
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7pageControl(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(mxShapeIOS7pageControl, mxShape);
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7pageControl.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#000000');
|
|
var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');
|
|
|
|
var rSize = Math.min(h * 0.5, w * 0.05);
|
|
c.setFillColor(strokeColor);
|
|
c.ellipse(0, h * 0.5 - rSize, 2 * rSize, 2 * rSize);
|
|
c.fill();
|
|
c.ellipse(w * 0.25 - rSize * 0.5, h * 0.5 - rSize, 2 * rSize, 2 * rSize);
|
|
c.fill();
|
|
c.ellipse(w * 0.5 - rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize);
|
|
c.fill();
|
|
c.ellipse(w * 0.75 - rSize * 1.5, h * 0.5 - rSize, 2 * rSize, 2 * rSize);
|
|
c.fill();
|
|
c.setFillColor(fillColor);
|
|
c.ellipse(w - 2 * rSize, h * 0.5 - rSize, 2 * rSize, 2 * rSize);
|
|
c.fill();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_PAGE_CONTROL, mxShapeIOS7pageControl);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Icon Grid
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7iconGrid(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(mxShapeIOS7iconGrid, mxShape);
|
|
|
|
mxShapeIOS7iconGrid.prototype.customProperties = [
|
|
{name: 'gridSize', dispName: 'Grid Size', type: 'string'},
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7iconGrid.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
var gridSize = decodeURIComponent(mxUtils.getValue(this.style, mxIOS7C.GRID_SIZE, '4,7').toString()).split(',');
|
|
|
|
var boxSizeX = w / (parseInt(gridSize[0],10) + (gridSize[0]-1) * 0.1);
|
|
var boxSizeY = h / (parseInt(gridSize[1],10) + (gridSize[1]-1) * 0.1);
|
|
|
|
for (var i = 0; i < gridSize[0]; i++)
|
|
{
|
|
for (var j = 0; j < gridSize[1]; j++)
|
|
{
|
|
c.rect(boxSizeX * 1.1 * i, boxSizeY * 1.1 * j, boxSizeX, boxSizeY);
|
|
c.fill();
|
|
}
|
|
}
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_ICON_GRID, mxShapeIOS7iconGrid);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//iPhone Vertical
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7phone(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(mxShapeIOS7phone, mxShape);
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7phone.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
var rSize = 25;
|
|
|
|
c.roundrect(0, 0, w, h, rSize, rSize);
|
|
c.fillAndStroke();
|
|
|
|
c.setShadow(false);
|
|
|
|
this.foreground(c, x, y, w, h, rSize);
|
|
};
|
|
|
|
mxShapeIOS7phone.prototype.foreground = function(c, x, y, w, h, rSize)
|
|
{
|
|
c.rect(w * 0.0625, h * 0.15, w * 0.875, h * 0.7);
|
|
c.stroke();
|
|
|
|
c.ellipse(w * 0.4875, h * 0.04125, w * 0.025, h * 0.0125);
|
|
c.stroke();
|
|
|
|
c.roundrect(w * 0.375, h * 0.075, w * 0.25, h * 0.01875, w * 0.02, h * 0.01);
|
|
c.stroke();
|
|
c.ellipse(w * 0.4, h * 0.875, w * 0.2, h * 0.1);
|
|
c.stroke();
|
|
c.roundrect(w * 0.4575, h * 0.905, w * 0.085, h * 0.04375, h * 0.00625, h * 0.00625);
|
|
c.stroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_PHONE, mxShapeIOS7phone);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Search Box
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7searchBox(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(mxShapeIOS7searchBox, mxShape);
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7searchBox.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
this.background(c, w, h);
|
|
c.setShadow(false);
|
|
this.foreground(c, w, h);
|
|
};
|
|
|
|
mxShapeIOS7searchBox.prototype.background = function(c, w, h)
|
|
{
|
|
c.rect(0, 0, w, h);
|
|
c.fill();
|
|
};
|
|
|
|
mxShapeIOS7searchBox.prototype.foreground = function(c, w, h)
|
|
{
|
|
var mainText = mxUtils.getValue(this.style, mxIOS7C.BUTTON_TEXT, 'Search');
|
|
var fontColor = mxUtils.getValue(this.style, mxIOS7C.STYLE_TEXTCOLOR, '#666666');
|
|
var strokeColor2 = mxUtils.getValue(this.style, mxIOS7C.STYLE_STROKECOLOR2, '#008cff');
|
|
var fontSize = mxUtils.getValue(this.style, mxIOS7C.STYLE_TEXTSIZE, '17');
|
|
var rSize = Math.min(w, h) * 0.1;
|
|
|
|
c.setFillColor('#ffffff');
|
|
c.roundrect(w * 0.05, h * 0.15, w * 0.5, h * 0.7, rSize, rSize);
|
|
c.fillAndStroke();
|
|
|
|
c.setFontColor(fontColor);
|
|
c.setFontSize(Math.min(h * 0.7, w * 0.1));
|
|
|
|
c.text(5, h * 0.5, 0, 0, mainText, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
|
|
|
|
c.setStrokeColor(strokeColor2);
|
|
c.ellipse(w * 0.05 + 3, h * 0.5 - 3, 4, 4);
|
|
c.stroke();
|
|
c.begin();
|
|
c.moveTo(w * 0.05 + 8, h * 0.5 + 3.5);
|
|
c.lineTo(w * 0.05 + 6, h * 0.5 + 0.5);
|
|
c.stroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_SEARCH_BOX, mxShapeIOS7searchBox);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//URL
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7URL(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(mxShapeIOS7URL, mxShape);
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7URL.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
this.background(c, w, h);
|
|
c.setShadow(false);
|
|
this.foreground(c, w, h);
|
|
};
|
|
|
|
mxShapeIOS7URL.prototype.background = function(c, w, h)
|
|
{
|
|
c.rect(0, 0, w, h);
|
|
c.fill();
|
|
};
|
|
|
|
mxShapeIOS7URL.prototype.foreground = function(c, w, h)
|
|
{
|
|
var mainText = mxUtils.getValue(this.style, mxIOS7C.BUTTON_TEXT, 'draw.io');
|
|
var fontColor = mxUtils.getValue(this.style, mxIOS7C.STYLE_TEXTCOLOR, '#666666');
|
|
var strokeColor2 = mxUtils.getValue(this.style, mxIOS7C.STYLE_STROKECOLOR2, '#008cff');
|
|
var fontSize = mxUtils.getValue(this.style, mxIOS7C.STYLE_TEXTSIZE, '17');
|
|
var rSize = Math.min(w, h) * 0.1;
|
|
|
|
c.setFillColor('#d8d8d8');
|
|
c.roundrect(w * 0.05, h * 0.15, w * 0.9, h * 0.7, rSize, rSize);
|
|
c.fill();
|
|
|
|
c.setFontColor(fontColor);
|
|
c.setFontSize(Math.min(h * 0.7, w * 0.1));
|
|
|
|
c.text(w * 0.5, h * 0.5, 0, 0, mainText, mxConstants.ALIGN_LEFT, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
|
|
|
|
c.setStrokeColor(strokeColor2);
|
|
c.begin();
|
|
c.moveTo(w * 0.95 - 5, h * 0.5);
|
|
c.arcTo(3, 3, 0, 1, 1, w * 0.95 - 8, h * 0.5 - 3);
|
|
c.stroke();
|
|
|
|
c.setFillColor(strokeColor2);
|
|
c.begin();
|
|
c.moveTo(w * 0.95 - 8, h * 0.5 - 4);
|
|
c.lineTo(w * 0.95 - 6, h * 0.5 - 3);
|
|
c.lineTo(w * 0.95 - 8, h * 0.5 - 2);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_URL, mxShapeIOS7URL);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Action Dialog
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7Actiondialog(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(mxShapeIOS7Actiondialog, mxShape);
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7Actiondialog.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
var mainText = mxUtils.getValue(this.style, mxIOS7C.MAIN_TEXT, 'Main Text');
|
|
var subText = mxUtils.getValue(this.style, mxIOS7C.SUB_TEXT, 'Sub Text');
|
|
var fontColor = mxUtils.getValue(this.style, mxIOS7C.STYLE_TEXTCOLOR, '#666666');
|
|
var fontSize = mxUtils.getValue(this.style, mxIOS7C.STYLE_TEXTSIZE, '17');
|
|
c.translate(x, y);
|
|
this.background(c, x, y, w, h);
|
|
|
|
c.setShadow(false);
|
|
|
|
c.setFillColor('#e0e0e0');
|
|
c.roundrect(w * 0.05, h * 0.1, w * 0.9, h * 0.35, w * 0.025, h * 0.05);
|
|
c.fill();
|
|
c.roundrect(w * 0.05, h * 0.55, w * 0.9, h * 0.35, w * 0.025, h * 0.05);
|
|
c.fill();
|
|
|
|
c.setFontStyle(mxConstants.FONT_BOLD);
|
|
this.mainText(c, x, y, w, h, mainText, fontSize, fontColor);
|
|
this.subText(c, x, y, w, h, subText, fontSize / 1.4, fontColor);
|
|
};
|
|
|
|
mxShapeIOS7Actiondialog.prototype.background = function(c, x, y, w, h)
|
|
{
|
|
c.rect(0, 0, w, h);
|
|
c.fill();
|
|
};
|
|
|
|
mxShapeIOS7Actiondialog.prototype.mainText = function(c, x, y, w, h, text, fontSize, fontColor)
|
|
{
|
|
c.begin();
|
|
c.setFontSize(fontSize);
|
|
c.setFontColor(fontColor);
|
|
c.text(w * 0.5, h * 0.4, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
|
|
};
|
|
|
|
mxShapeIOS7Actiondialog.prototype.subText = function(c, x, y, w, h, text, fontSize, fontColor)
|
|
{
|
|
c.begin();
|
|
c.setFontSize(fontSize);
|
|
c.text(w * 0.5, h * 0.7, 0, 0, text, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxIOS7C.SHAPE_IOS7_ACTION_DIALOG, mxShapeIOS7Actiondialog);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Anchor (a dummy shape without visuals used for anchoring)
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7Anchor(bounds, fill, stroke, strokewidth)
|
|
{
|
|
mxShape.call(this);
|
|
this.bounds = bounds;
|
|
};
|
|
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
mxUtils.extend(mxShapeIOS7Anchor, mxShape);
|
|
|
|
mxShapeIOS7Anchor.prototype.cst = {
|
|
ANCHOR : 'mxgraph.ios7ui.anchor'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7Anchor.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeIOS7Anchor.prototype.cst.ANCHOR, mxShapeIOS7Anchor);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Rounded rectangle (adjustable rounding)
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7RRect(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(mxShapeIOS7RRect, mxShape);
|
|
|
|
mxShapeIOS7RRect.prototype.cst = {
|
|
RRECT : 'mxgraph.ios7ui.rrect',
|
|
R_SIZE : 'rSize'
|
|
};
|
|
|
|
mxShapeIOS7RRect.prototype.customProperties = [
|
|
{name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:3}
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7RRect.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var rSize = parseInt(mxUtils.getValue(this.style, mxShapeIOS7RRect.prototype.cst.R_SIZE, '10'));
|
|
c.roundrect(0, 0, w, h, rSize);
|
|
c.fillAndStroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeIOS7RRect.prototype.cst.RRECT, mxShapeIOS7RRect);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Left Button
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7LeftButton(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(mxShapeIOS7LeftButton, mxShape);
|
|
|
|
mxShapeIOS7LeftButton.prototype.cst = {
|
|
LEFT_BUTTON : 'mxgraph.ios7ui.leftButton',
|
|
R_SIZE : 'rSize'
|
|
};
|
|
|
|
mxShapeIOS7LeftButton.prototype.customProperties = [
|
|
{name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:3}
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7LeftButton.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var rSize = parseInt(mxUtils.getValue(this.style, mxShapeIOS7LeftButton.prototype.cst.R_SIZE, '10'));
|
|
|
|
c.begin();
|
|
c.moveTo(w, 0);
|
|
c.lineTo(w, h);
|
|
c.lineTo(rSize, h);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, 0, h - rSize);
|
|
c.lineTo(0, rSize);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeIOS7LeftButton.prototype.cst.LEFT_BUTTON, mxShapeIOS7LeftButton);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Right Button
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7RightButton(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(mxShapeIOS7RightButton, mxShape);
|
|
|
|
mxShapeIOS7RightButton.prototype.cst = {
|
|
RIGHT_BUTTON : 'mxgraph.ios7ui.rightButton',
|
|
R_SIZE : 'rSize'
|
|
};
|
|
|
|
mxShapeIOS7RightButton.prototype.customProperties = [
|
|
{name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:3}
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7RightButton.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var rSize = parseInt(mxUtils.getValue(this.style, mxShapeIOS7RightButton.prototype.cst.R_SIZE, '10'));
|
|
|
|
c.begin();
|
|
c.moveTo(0, 0);
|
|
c.lineTo(w - rSize, 0);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);
|
|
c.lineTo(w, h - rSize);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, w - rSize, h);
|
|
c.lineTo(0, h);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeIOS7RightButton.prototype.cst.RIGHT_BUTTON, mxShapeIOS7RightButton);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Top Button
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7TopButton(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(mxShapeIOS7TopButton, mxShape);
|
|
|
|
mxShapeIOS7TopButton.prototype.cst = {
|
|
TOP_BUTTON : 'mxgraph.ios7ui.topButton',
|
|
R_SIZE : 'rSize'
|
|
};
|
|
|
|
mxShapeIOS7TopButton.prototype.customProperties = [
|
|
{name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:3}
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7TopButton.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var rSize = parseInt(mxUtils.getValue(this.style, mxShapeIOS7TopButton.prototype.cst.R_SIZE, '10'));
|
|
|
|
c.begin();
|
|
c.moveTo(w, h);
|
|
c.lineTo(0, h);
|
|
c.lineTo(0, rSize);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, rSize, 0);
|
|
c.lineTo(w - rSize, 0);
|
|
c.arcTo(rSize, rSize, 0, 0, 1, w, rSize);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeIOS7TopButton.prototype.cst.TOP_BUTTON, mxShapeIOS7TopButton);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Bottom Button
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7BottomButton(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(mxShapeIOS7BottomButton, mxShape);
|
|
|
|
mxShapeIOS7BottomButton.prototype.cst = {
|
|
BOTTOM_BUTTON : 'mxgraph.ios7ui.bottomButton',
|
|
R_SIZE : 'rSize'
|
|
};
|
|
|
|
mxShapeIOS7BottomButton.prototype.customProperties = [
|
|
{name: 'rSize', dispName: 'Arc Size', type: 'float', min:0, defVal:3},
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7BottomButton.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var rSize = parseInt(mxUtils.getValue(this.style, mxShapeIOS7BottomButton.prototype.cst.R_SIZE, '10'));
|
|
|
|
c.begin();
|
|
c.moveTo(w, 0);
|
|
c.lineTo(0, 0);
|
|
c.lineTo(0, h - rSize);
|
|
c.arcTo(rSize, rSize, 0, 0, 0, rSize, h);
|
|
c.lineTo(w - rSize, h);
|
|
c.arcTo(rSize, rSize, 0, 0, 0, w, h - rSize);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeIOS7BottomButton.prototype.cst.BOTTOM_BUTTON, mxShapeIOS7BottomButton);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Horizontal Lines
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7HorLines(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(mxShapeIOS7HorLines, mxShape);
|
|
|
|
mxShapeIOS7HorLines.prototype.cst = {
|
|
HOR_LINES : 'mxgraph.ios7ui.horLines'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7HorLines.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
c.rect(0, 0, w, h);
|
|
c.fill();
|
|
|
|
c.begin();
|
|
c.moveTo(0, 0);
|
|
c.lineTo(w, 0);
|
|
c.moveTo(0, h);
|
|
c.lineTo(w, h);
|
|
c.stroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeIOS7HorLines.prototype.cst.HOR_LINES, mxShapeIOS7HorLines);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//rect with margins
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7MarginRect(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(mxShapeIOS7MarginRect, mxShape);
|
|
|
|
mxShapeIOS7MarginRect.prototype.customProperties = [
|
|
{name: 'rx', dispName: 'Hor. Rounding Size', type: 'float', min:0, defVal:3},
|
|
{name: 'ry', dispName: 'Ver. Rounding Size', type: 'float', min:0, defVal:3},
|
|
{name: 'rectMargin', dispName: 'Global Margin', type: 'float', min:0, defVal:5},
|
|
{name: 'rectMarginTop', dispName: 'Top Margin', type: 'float', min:0, defVal:0},
|
|
{name: 'rectMarginLeft', dispName: 'Left Margin', type: 'float', min:0, defVal:0},
|
|
{name: 'rectMarginBottom', dispName: 'Bottom Margin', type: 'float', min:0, defVal:0},
|
|
{name: 'rectMarginRight', dispName: 'Right Margin', type: 'float', min:0, defVal:0}
|
|
];
|
|
|
|
mxShapeIOS7MarginRect.prototype.cst = {
|
|
SHAPE_MARGIN_RECT : 'mxgraph.ios7ui.marginRect',
|
|
MARGIN : 'rectMargin',
|
|
RX : 'rx',
|
|
RY : 'ry',
|
|
MARGIN_TOP : 'rectMarginTop',
|
|
MARGIN_LEFT : 'rectMarginLeft',
|
|
MARGIN_BOTTOM : 'rectMarginBottom',
|
|
MARGIN_RIGHT : 'rectMarginRight'
|
|
};
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7MarginRect.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
|
|
c.translate(x, y);
|
|
this.background(c, x, y, w, h);
|
|
};
|
|
|
|
mxShapeIOS7MarginRect.prototype.background = function(c, x, y, w, h, state)
|
|
{
|
|
var margin = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7MarginRect.prototype.cst.MARGIN, '0'));
|
|
var marginTop = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7MarginRect.prototype.cst.MARGIN_TOP, '0'));
|
|
var marginLeft = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7MarginRect.prototype.cst.MARGIN_LEFT, '0'));
|
|
var marginBottom = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7MarginRect.prototype.cst.MARGIN_BOTTOM, '0'));
|
|
var marginRight = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7MarginRect.prototype.cst.MARGIN_RIGHT, '0'));
|
|
var rx = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7MarginRect.prototype.cst.RX, '0'));
|
|
var ry = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7MarginRect.prototype.cst.RY, '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.roundrect(x1, y1, w1, h1, rx, ry);
|
|
c.fillAndStroke();
|
|
}
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeIOS7MarginRect.prototype.cst.SHAPE_MARGIN_RECT, mxShapeIOS7MarginRect);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Callout
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7Callout(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(mxShapeIOS7Callout, mxShape);
|
|
|
|
mxShapeIOS7Callout.prototype.cst = {
|
|
SHAPE_CALLOUT : 'mxgraph.ios7ui.callout'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7Callout.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
|
|
c.translate(x, y);
|
|
this.background(c, x, y, w, h);
|
|
};
|
|
|
|
mxShapeIOS7Callout.prototype.background = function(c, x, y, w, h, state)
|
|
{
|
|
var r = 10;
|
|
|
|
if (w >= 30 && h >= 20)
|
|
{
|
|
c.begin();
|
|
c.moveTo(15, h - r * 0.3);
|
|
c.arcTo(r * 2, r, 0, 0, 1, 0, h);
|
|
c.arcTo(r * 1.5, r * 1.5, 0, 0, 0, 10, h - r * 1);
|
|
c.lineTo(r, r);
|
|
c.arcTo(r, r, 0, 0, 1, r * 2, 0);
|
|
c.lineTo(w - r, 0);
|
|
c.arcTo(r, r, 0, 0, 1, w, r);
|
|
c.lineTo(w, h - r);
|
|
c.arcTo(r, r, 0, 0, 1, w - r, h);
|
|
c.lineTo(r * 2, h);
|
|
c.arcTo(r, r, 0, 0, 1, r * 1.5, h - r * 0.3);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
}
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeIOS7Callout.prototype.cst.SHAPE_CALLOUT, mxShapeIOS7Callout);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Select Bar
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeIOS7SelectBar(bounds, fill, stroke, strokewidth)
|
|
{
|
|
mxShape.call(this);
|
|
this.bounds = bounds;
|
|
this.fill = fill;
|
|
this.stroke = stroke;
|
|
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
|
|
this.dy = 0.5;
|
|
this.dx = 0.5;
|
|
this.dx2 = 70;
|
|
this.size = 10;
|
|
};
|
|
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
mxUtils.extend(mxShapeIOS7SelectBar, mxActor);
|
|
|
|
mxShapeIOS7SelectBar.prototype.cst = {
|
|
SELECT_BAR : 'mxgraph.ios7ui.selectBar'
|
|
};
|
|
|
|
mxShapeIOS7SelectBar.prototype.customProperties = [
|
|
{name: 'dx', dispName: 'Callout Position', type: 'float', min:0, defVal:120},
|
|
{name: 'dx2', dispName: 'Field Size', type: 'float', min:0, defVal: 75},
|
|
{name: 'size', dispName: 'Rounding size', type: 'float', min:0, defVal:5},
|
|
{name: 'dy', dispName: 'Callout Size', type: 'float', min:0, defVal:5}
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7SelectBar.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));
|
|
var dx2 = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx2', this.dx2))));
|
|
var r = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
|
|
var dy = Math.max(0, Math.min(h, (w - Math.max(20, r) - r) / 2, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
|
|
|
|
r = Math.min(h / 2, w / 2, r);
|
|
dx = Math.max(r + dy, dx);
|
|
dx = Math.min(w - r - dy, w - 20 - dy, dx);
|
|
|
|
c.begin();
|
|
c.moveTo(dx - dy, h);
|
|
c.lineTo(r, h);
|
|
c.arcTo(r, r, 0, 0, 1, 0, h - r);
|
|
c.lineTo(0, r);
|
|
c.arcTo(r, r, 0, 0, 1, r, 0);
|
|
c.lineTo(w - r, 0);
|
|
c.arcTo(r, r, 0, 0, 1, w, r);
|
|
c.lineTo(w, h - r);
|
|
c.arcTo(r, r, 0, 0, 1, w - r, h);
|
|
c.lineTo(dx + dy, h);
|
|
c.lineTo(dx, h + dy);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
|
|
c.setShadow(false);
|
|
|
|
c.begin();
|
|
c.moveTo(w - Math.max(20, r), 0);
|
|
c.lineTo(w - Math.max(20, r), h);
|
|
c.stroke();
|
|
|
|
var currDx = dx2;
|
|
|
|
c.begin();
|
|
|
|
while (currDx < (w - Math.max(20, r)))
|
|
{
|
|
c.moveTo(currDx, 0);
|
|
c.lineTo(currDx, h);
|
|
|
|
currDx = currDx + dx2;
|
|
}
|
|
|
|
c.stroke();
|
|
|
|
var w1 = Math.min(Math.max(20, r), h);
|
|
var x1 = w - w1 * 0.5;
|
|
var y1 = h * 0.5;
|
|
|
|
c.setFillColor(mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, ''));
|
|
c.begin();
|
|
c.moveTo(x1 - w1 * 0.15, y1 - w1 * 0.225);
|
|
c.lineTo(x1 + w1 * 0.25, y1);
|
|
c.lineTo(x1 - w1 * 0.15, y1 + w1 * 0.225);
|
|
c.close();
|
|
c.fill();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeIOS7SelectBar.prototype.cst.SELECT_BAR, mxShapeIOS7SelectBar);
|
|
|
|
mxShapeIOS7SelectBar.prototype.constraints = null;
|
|
|
|
Graph.handleFactory[mxShapeIOS7SelectBar.prototype.cst.SELECT_BAR] = function(state)
|
|
{
|
|
var handles = [Graph.createHandle(state, ['dx'], function(bounds)
|
|
{
|
|
var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));
|
|
|
|
return new mxPoint(bounds.x + dx, bounds.y + bounds.height);
|
|
}, function(bounds, pt)
|
|
{
|
|
var y = parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy)) * 0.6;
|
|
this.state.style['dx'] = Math.round(100 * Math.max(y, Math.min(bounds.width - y, pt.x - bounds.x))) / 100;
|
|
})];
|
|
|
|
var handle2 = Graph.createHandle(state, ['dy'], function(bounds)
|
|
{
|
|
var dy = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));
|
|
|
|
return new mxPoint(bounds.x + parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx)), bounds.y + bounds.height + dy);
|
|
}, function(bounds, pt)
|
|
{
|
|
this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height, pt.y - bounds.y - bounds.height))) / 100;
|
|
});
|
|
|
|
handles.push(handle2);
|
|
|
|
var handle3 = Graph.createHandle(state, ['size'], function(bounds)
|
|
{
|
|
var size = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'size', this.size))));
|
|
|
|
return new mxPoint(bounds.x + bounds.width - size, bounds.y + 10);
|
|
}, function(bounds, pt)
|
|
{
|
|
this.state.style['size'] = Math.round(100 * Math.max(0, Math.min(bounds.width / 2, bounds.height / 2, bounds.x + bounds.width - pt.x))) / 100;
|
|
});
|
|
|
|
handles.push(handle3);
|
|
|
|
var handle4 = Graph.createHandle(state, ['dx2'], function(bounds)
|
|
{
|
|
var dx2 = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx2', this.dx2))));
|
|
|
|
return new mxPoint(bounds.x + dx2, bounds.y + bounds.height / 2);
|
|
}, function(bounds, pt)
|
|
{
|
|
this.state.style['dx2'] = Math.round(100 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 100;
|
|
});
|
|
|
|
handles.push(handle4);
|
|
|
|
return handles;
|
|
|
|
}
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//slider
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
//mxShapeIOS7SelectBar
|
|
function mxShapeIOS7Slider2(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(mxShapeIOS7Slider2, mxShape);
|
|
|
|
mxShapeIOS7Slider2.prototype.cst = {
|
|
SHAPE_SLIDER : 'mxgraph.ios7ui.slider',
|
|
BAR_POS : 'barPos',
|
|
HANDLE_SIZE : 'handleSize'
|
|
};
|
|
|
|
mxShapeIOS7Slider2.prototype.customProperties = [
|
|
{name: 'barPos', dispName: 'Handle Position', type: 'float', min:0, max:1, defVal:20},
|
|
{name: 'handleSize', dispName: 'Handle Size', type: 'float', min:0, defVal:10}
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeIOS7Slider2.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
|
|
c.translate(x, y);
|
|
this.background(c, x, y, w, h);
|
|
c.setShadow(true);
|
|
};
|
|
|
|
mxShapeIOS7Slider2.prototype.background = function(c, x, y, w, h)
|
|
{
|
|
var hSize = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7Slider2.prototype.cst.HANDLE_SIZE, '10'));
|
|
var barPos = parseFloat(mxUtils.getValue(this.style, mxShapeIOS7Slider2.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.setStrokeColor('#bbbbbb');
|
|
c.begin();
|
|
c.ellipse(barPos * w - hSize * 0.5, h * 0.5 - hSize * 0.5, hSize, hSize);
|
|
c.fillAndStroke();
|
|
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeIOS7Slider2.prototype.cst.SHAPE_SLIDER, mxShapeIOS7Slider2);
|
|
|
|
mxShapeIOS7Slider2.prototype.constraints = null;
|
|
|
|
Graph.handleFactory[mxShapeIOS7Slider2.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;
|
|
};
|
|
|