934 lines
26 KiB
JavaScript
934 lines
26 KiB
JavaScript
/**
|
|
* $Id: mxBootstrap.js,v 1.0 2014/09/10 07:05:39 mate Exp $
|
|
* Copyright (c) 2006-2014, JGraph Ltd
|
|
*/
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Rounded rectangle (adjustable rounding)
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeBootstrapRRect(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(mxShapeBootstrapRRect, mxShape);
|
|
|
|
mxShapeBootstrapRRect.prototype.cst = {
|
|
PACKAGE : 'mxgraph.bootstrap.rrect',
|
|
R_SIZE : 'rSize'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeBootstrapRRect.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var rSize = parseInt(mxUtils.getValue(this.style, mxShapeBootstrapRRect.prototype.cst.R_SIZE, '10'));
|
|
c.roundrect(0, 0, w, h, rSize);
|
|
c.fillAndStroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeBootstrapRRect.prototype.cst.PACKAGE, mxShapeBootstrapRRect);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Top Button
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeBootstrapTopButton(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(mxShapeBootstrapTopButton, mxShape);
|
|
|
|
mxShapeBootstrapTopButton.prototype.cst = {
|
|
TOP_BUTTON : 'mxgraph.bootstrap.topButton',
|
|
R_SIZE : 'rSize'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeBootstrapTopButton.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var rSize = parseInt(mxUtils.getValue(this.style, mxShapeBootstrapTopButton.prototype.cst.R_SIZE, '10'));
|
|
|
|
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);
|
|
c.lineTo(0, h);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeBootstrapTopButton.prototype.cst.TOP_BUTTON, mxShapeBootstrapTopButton);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Bottom Button
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeBootstrapBottomButton(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(mxShapeBootstrapBottomButton, mxShape);
|
|
|
|
mxShapeBootstrapBottomButton.prototype.cst = {
|
|
BOTTOM_BUTTON : 'mxgraph.bootstrap.bottomButton',
|
|
R_SIZE : 'rSize'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeBootstrapBottomButton.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var rSize = parseInt(mxUtils.getValue(this.style, mxShapeBootstrapBottomButton.prototype.cst.R_SIZE, '10'));
|
|
|
|
c.begin();
|
|
c.moveTo(0, 0);
|
|
c.lineTo(w, 0);
|
|
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();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeBootstrapBottomButton.prototype.cst.BOTTOM_BUTTON, mxShapeBootstrapBottomButton);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Right Button
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeBootstrapRightButton(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(mxShapeBootstrapRightButton, mxShape);
|
|
|
|
mxShapeBootstrapRightButton.prototype.cst = {
|
|
RIGHT_BUTTON : 'mxgraph.bootstrap.rightButton',
|
|
R_SIZE : 'rSize'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeBootstrapRightButton.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var rSize = parseInt(mxUtils.getValue(this.style, mxShapeBootstrapRightButton.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(mxShapeBootstrapRightButton.prototype.cst.RIGHT_BUTTON, mxShapeBootstrapRightButton);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Left Button
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeBootstrapLeftButton(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(mxShapeBootstrapLeftButton, mxShape);
|
|
|
|
mxShapeBootstrapLeftButton.prototype.cst = {
|
|
LEFT_BUTTON : 'mxgraph.bootstrap.leftButton',
|
|
R_SIZE : 'rSize'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeBootstrapLeftButton.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var rSize = parseInt(mxUtils.getValue(this.style, mxShapeBootstrapLeftButton.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(mxShapeBootstrapLeftButton.prototype.cst.LEFT_BUTTON, mxShapeBootstrapLeftButton);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Left Button (Striped)
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeBootstrapLeftButtonStriped(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(mxShapeBootstrapLeftButtonStriped, mxShape);
|
|
|
|
mxShapeBootstrapLeftButtonStriped.prototype.cst = {
|
|
LEFT_BUTTON_STRIPED : 'mxgraph.bootstrap.leftButtonStriped'
|
|
// R_SIZE : 'rSize'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeBootstrapLeftButtonStriped.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
// var rSize = parseInt(mxUtils.getValue(this.style, mxShapeBootstrapLeftButtonStriped.prototype.cst.R_SIZE, '10'));
|
|
rSize = 5;
|
|
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.fill();
|
|
|
|
|
|
var fillColor = '#ffffff';
|
|
c.setAlpha('0.2');
|
|
var stripeW = h * 0.5;
|
|
|
|
c.setFillColor(fillColor);
|
|
c.begin();
|
|
c.moveTo(0, h * 0.75);
|
|
c.lineTo(0, h * 0.25);
|
|
c.lineTo(h * 0.75, h);
|
|
c.lineTo(h * 0.25, h);
|
|
c.close();
|
|
c.fill();
|
|
|
|
var end = false;
|
|
var startX = stripeW * 0.5;
|
|
|
|
while (!end)
|
|
{
|
|
c.begin();
|
|
c.moveTo(startX, 0);
|
|
|
|
if (startX + stripeW >= w)
|
|
{
|
|
c.lineTo(w, 0);
|
|
c.lineTo(w, w - startX);
|
|
}
|
|
else
|
|
{
|
|
c.lineTo(startX + stripeW, 0);
|
|
|
|
if (startX + stripeW + h > w)
|
|
{
|
|
c.lineTo(w, w - startX - stripeW);
|
|
|
|
if (w - startX > h)
|
|
{
|
|
c.lineTo(w, h);
|
|
c.lineTo(startX + h, h);
|
|
}
|
|
else
|
|
{
|
|
c.lineTo(w, w - startX);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
c.lineTo(startX + stripeW + h, h);
|
|
c.lineTo(startX + h, h);
|
|
}
|
|
}
|
|
|
|
c.close();
|
|
c.fill();
|
|
|
|
startX = startX + 2 * stripeW;
|
|
|
|
if (startX > w)
|
|
{
|
|
end = true;
|
|
}
|
|
}
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeBootstrapLeftButtonStriped.prototype.cst.LEFT_BUTTON_STRIPED, mxShapeBootstrapLeftButtonStriped);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Rounded Button
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeBootstrapRoundedButton(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(mxShapeBootstrapRoundedButton, mxShape);
|
|
|
|
mxShapeBootstrapRoundedButton.prototype.cst = {
|
|
ROUNDED_BUTTON : 'mxgraph.bootstrap.roundedButton'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeBootstrapRoundedButton.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
if (w > h)
|
|
{
|
|
var r = h * 0.5;
|
|
|
|
c.begin();
|
|
c.moveTo(w - r, 0);
|
|
c.arcTo(r, r, 0, 0, 1, w - r, h);
|
|
c.lineTo(r, h);
|
|
c.arcTo(r, r, 0, 0, 1, r, 0);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
}
|
|
else
|
|
{
|
|
var r = w * 0.5;
|
|
|
|
c.begin();
|
|
c.moveTo(0, h - r);
|
|
c.arcTo(r, r, 0, 0, 0, w, h - r);
|
|
c.lineTo(w, r);
|
|
c.arcTo(r, r, 0, 0, 0, 0, r);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
}
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeBootstrapRoundedButton.prototype.cst.ROUNDED_BUTTON, mxShapeBootstrapRoundedButton);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Arrow
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeBootstrapArrow(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(mxShapeBootstrapArrow, mxShape);
|
|
|
|
mxShapeBootstrapArrow.prototype.cst = {
|
|
ARROW : 'mxgraph.bootstrap.arrow'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeBootstrapArrow.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
c.begin();
|
|
c.moveTo(0, h * 0.5);
|
|
c.lineTo(w, h * 0.5);
|
|
c.moveTo(w * 0.9, 0);
|
|
c.lineTo(w, h * 0.5);
|
|
c.lineTo(w * 0.9, h);
|
|
c.stroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeBootstrapArrow.prototype.cst.ARROW, mxShapeBootstrapArrow);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Tab Top
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeBootstrapTabTop(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(mxShapeBootstrapTabTop, mxShape);
|
|
|
|
mxShapeBootstrapTabTop.prototype.cst = {
|
|
TAB_TOP : 'mxgraph.bootstrap.tabTop',
|
|
R_SIZE : 'rSize'
|
|
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeBootstrapTabTop.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
var rSize = parseInt(mxUtils.getValue(this.style, mxShapeBootstrapTopButton.prototype.cst.R_SIZE, '10'));
|
|
var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');
|
|
var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');
|
|
|
|
c.setStrokeColor(fillColor);
|
|
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);
|
|
c.lineTo(0, h);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
|
|
c.setStrokeColor(strokeColor);
|
|
c.begin();
|
|
c.moveTo(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.lineTo(w, h);
|
|
c.stroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeBootstrapTabTop.prototype.cst.TAB_TOP, mxShapeBootstrapTabTop);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Image
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeBootstrapImage(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(mxShapeBootstrapImage, mxShape);
|
|
|
|
mxShapeBootstrapImage.prototype.cst = {
|
|
IMAGE : 'mxgraph.bootstrap.image',
|
|
R_SIZE : 'rSize'
|
|
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeBootstrapImage.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
var rSize = Math.max(0, parseInt(mxUtils.getValue(this.style, mxShapeBootstrapTopButton.prototype.cst.R_SIZE, '10')));
|
|
var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');
|
|
var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, '#ffffff');
|
|
|
|
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();
|
|
|
|
var rsHalf = rSize * 0.5;
|
|
c.translate(rsHalf, rsHalf);
|
|
w = Math.max(0, w - rSize);
|
|
h = Math.max(0, h - rSize);
|
|
|
|
c.begin();
|
|
c.moveTo(0, rsHalf);
|
|
c.arcTo(rsHalf, rsHalf, 0, 0, 1, rsHalf, 0);
|
|
c.lineTo(w - rsHalf, 0);
|
|
c.arcTo(rsHalf, rsHalf, 0, 0, 1, w, rsHalf);
|
|
c.lineTo(w, h - rsHalf);
|
|
c.arcTo(rsHalf, rsHalf, 0, 0, 1, w - rsHalf, h);
|
|
c.lineTo(rsHalf, h);
|
|
c.arcTo(rsHalf, rsHalf, 0, 0, 1, 0, h - rsHalf);
|
|
c.close();
|
|
c.fill();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeBootstrapImage.prototype.cst.IMAGE, mxShapeBootstrapImage);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Checkbox
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeBootstrapCheckbox(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(mxShapeBootstrapCheckbox, mxShape);
|
|
|
|
mxShapeBootstrapCheckbox.prototype.cst = {
|
|
CHECKBOX : 'mxgraph.bootstrap.checkbox'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeBootstrapCheckbox.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
var rSize = 3;
|
|
c.roundrect(0, 0, w, h, rSize, rSize);
|
|
c.fillAndStroke();
|
|
|
|
c.setStrokeWidth('3');
|
|
c.begin();
|
|
c.moveTo(w * 0.8, h * 0.2);
|
|
c.lineTo(w * 0.4, h * 0.8);
|
|
c.lineTo(w * 0.25, h * 0.6);
|
|
c.stroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeBootstrapCheckbox.prototype.cst.CHECKBOX, mxShapeBootstrapCheckbox);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Radio Button
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeBootstrapRadioButton(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(mxShapeBootstrapRadioButton, mxShape);
|
|
|
|
mxShapeBootstrapRadioButton.prototype.cst = {
|
|
RADIO_BUTTON : 'mxgraph.bootstrap.radioButton'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeBootstrapRadioButton.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, '#000000');
|
|
c.ellipse(0, 0, w, h);
|
|
c.fillAndStroke();
|
|
|
|
c.setFillColor(strokeColor);
|
|
c.ellipse(w * 0.25, h * 0.25, w * 0.5, h * 0.5);
|
|
c.fill();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeBootstrapRadioButton.prototype.cst.RADIO_BUTTON, mxShapeBootstrapRadioButton);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Horizontal Lines
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeBootstrapHorLines(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(mxShapeBootstrapHorLines, mxShape);
|
|
|
|
mxShapeBootstrapHorLines.prototype.cst = {
|
|
HOR_LINES : 'mxgraph.bootstrap.horLines'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeBootstrapHorLines.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(mxShapeBootstrapHorLines.prototype.cst.HOR_LINES, mxShapeBootstrapHorLines);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//User 2
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeBootstrapUserTwo(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(mxShapeBootstrapUserTwo, mxShape);
|
|
|
|
mxShapeBootstrapUserTwo.prototype.cst = {
|
|
USER2 : 'mxgraph.bootstrap.user2'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeBootstrapUserTwo.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
c.begin();
|
|
c.moveTo(0, h * 0.95);
|
|
c.arcTo(w * 0.3, h * 0.3, 0, 0, 1, w * 0.02, h * 0.87);
|
|
c.arcTo(w * 0.1, h * 0.1, 0, 0, 1, w * 0.08, h * 0.812);
|
|
c.arcTo(w * 3, h * 3, 0, 0, 1, w * 0.29, h * 0.732);
|
|
c.arcTo(w * 0.15, h * 0.15, 0, 0, 0, w * 0.385, h * 0.607);
|
|
c.arcTo(w * 0.11, h * 0.11, 0, 0, 0, w * 0.355, h * 0.53);
|
|
c.arcTo(w * 0.3, h * 0.3, 0, 0, 1, w * 0.305, h * 0.44);
|
|
c.arcTo(w * 0.33, h * 0.38, 0, 0, 1, w * 0.312, h * 0.15);
|
|
c.arcTo(w * 0.218, h * 0.218 , 0, 0, 1, w * 0.688, h * 0.15);
|
|
c.arcTo(w * 0.33, h * 0.38, 0, 0, 1, w * 0.693, h * 0.44);
|
|
c.arcTo(w * 0.25, h * 0.25, 0, 0, 1, w * 0.645, h * 0.53);
|
|
c.arcTo(w * 0.1, h * 0.1, 0, 0, 0, w * 0.612, h * 0.6);
|
|
c.arcTo(w * 0.15, h * 0.15, 0, 0, 0, w * 0.7, h * 0.726);
|
|
c.arcTo(w * 3, h * 3, 0, 0, 1, w * 0.92, h * 0.812);
|
|
c.arcTo(w * 0.1, h * 0.1, 0, 0, 1, w * 0.97, h * 0.865);
|
|
c.arcTo(w * 0.2, h * 0.2, 0, 0, 1, w * 0.995, h * 0.952);
|
|
c.close();
|
|
c.fill();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeBootstrapUserTwo.prototype.cst.USER2, mxShapeBootstrapUserTwo);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Rating
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeBootstrapRating(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(mxShapeBootstrapRating, mxShape);
|
|
|
|
mxShapeBootstrapRating.prototype.cst = {
|
|
RATING : 'mxgraph.bootstrap.rating',
|
|
RATING_STYLE : 'ratingStyle',
|
|
RATING_SCALE : 'ratingScale',
|
|
RATING_HEART : 'heart',
|
|
RATING_STAR : 'star',
|
|
EMPTY_FILL_COLOR : 'emptyFillColor',
|
|
GRADE : 'grade'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeBootstrapRating.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
var ratingStyle = mxUtils.getValue(this.style, mxShapeBootstrapRating.prototype.cst.RATING_STYLE, mxShapeBootstrapRating.prototype.cst.RATING_STAR);
|
|
var grade = mxUtils.getValue(this.style, mxShapeBootstrapRating.prototype.cst.GRADE, '5');
|
|
var ratingScale = mxUtils.getValue(this.style, mxShapeBootstrapRating.prototype.cst.RATING_SCALE, '10');
|
|
|
|
c.translate(x, y);
|
|
|
|
if (ratingStyle === mxShapeBootstrapRating.prototype.cst.RATING_STAR)
|
|
{
|
|
for (var i = 0; i < grade; i++)
|
|
{
|
|
c.begin();
|
|
c.moveTo(i * h * 1.2, 0.33 * h);
|
|
c.lineTo(i * h * 1.2 + 0.364 * h, 0.33 * h);
|
|
c.lineTo(i * h * 1.2 + 0.475 * h, 0);
|
|
c.lineTo(i * h * 1.2 + 0.586 * h, 0.33 * h);
|
|
c.lineTo(i * h * 1.2 + 0.95 * h, 0.33 * h);
|
|
c.lineTo(i * h * 1.2 + 0.66 * h, 0.551 * h);
|
|
c.lineTo(i * h * 1.2 + 0.775 * h, 0.9 * h);
|
|
c.lineTo(i * h * 1.2 + 0.475 * h, 0.684 * h);
|
|
c.lineTo(i * h * 1.2 + 0.175 * h, 0.9 * h);
|
|
c.lineTo(i * h * 1.2 + 0.29 * h, 0.551 * h);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
}
|
|
}
|
|
else if (ratingStyle === mxShapeBootstrapRating.prototype.cst.RATING_HEART)
|
|
{
|
|
for (var i = 0; i < grade; i++)
|
|
{
|
|
c.begin();
|
|
c.moveTo(i * h * 1.2 + h * 0.519, h * 0.947);
|
|
c.curveTo(i * h * 1.2 + 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);
|
|
c.curveTo(i * h * 1.2 + 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);
|
|
c.curveTo(i * h * 1.2 + h * 0.812, 0, i * h * 1.5 + h * 0.631, 0, i * h * 1.5 + h * 0.519, h * 0.115);
|
|
c.curveTo(i * h * 1.2 + h * 0.408, 0, i * h * 1.5 + h * 0.227, 0, i * h * 1.5 + h * 0.115, h * 0.115);
|
|
c.curveTo(i * h * 1.2 + h * 0.03, h * 0.229, i * h * 1.5, h * 0.414, i * h * 1.5 + h * 0.123, h * 0.54);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
}
|
|
}
|
|
|
|
var emptyFillColor = mxUtils.getValue(this.style, mxShapeBootstrapRating.prototype.cst.EMPTY_FILL_COLOR, '#ffffff');
|
|
c.setFillColor(emptyFillColor);
|
|
|
|
if (ratingStyle === mxShapeBootstrapRating.prototype.cst.RATING_STAR)
|
|
{
|
|
for (var i = grade; i < ratingScale; i++)
|
|
{
|
|
c.begin();
|
|
c.moveTo(i * h * 1.2, 0.33 * h);
|
|
c.lineTo(i * h * 1.2 + 0.364 * h, 0.33 * h);
|
|
c.lineTo(i * h * 1.2 + 0.475 * h, 0);
|
|
c.lineTo(i * h * 1.2 + 0.586 * h, 0.33 * h);
|
|
c.lineTo(i * h * 1.2 + 0.95 * h, 0.33 * h);
|
|
c.lineTo(i * h * 1.2 + 0.66 * h, 0.551 * h);
|
|
c.lineTo(i * h * 1.2 + 0.775 * h, 0.9 * h);
|
|
c.lineTo(i * h * 1.2 + 0.475 * h, 0.684 * h);
|
|
c.lineTo(i * h * 1.2 + 0.175 * h, 0.9 * h);
|
|
c.lineTo(i * h * 1.2 + 0.29 * h, 0.551 * h);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
}
|
|
}
|
|
else if (ratingStyle === mxShapeBootstrapRating.prototype.cst.RATING_HEART)
|
|
{
|
|
for (var i = grade; i < ratingScale; i++)
|
|
{
|
|
c.begin();
|
|
c.moveTo(i * h * 1.2 + h * 0.519, h * 0.947);
|
|
c.curveTo(i * h * 1.2 + 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);
|
|
c.curveTo(i * h * 1.2 + 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);
|
|
c.curveTo(i * h * 1.2 + h * 0.812, 0, i * h * 1.5 + h * 0.631, 0, i * h * 1.5 + h * 0.519, h * 0.115);
|
|
c.curveTo(i * h * 1.2 + h * 0.408, 0, i * h * 1.5 + h * 0.227, 0, i * h * 1.5 + h * 0.115, h * 0.115);
|
|
c.curveTo(i * h * 1.2 + h * 0.03, h * 0.229, i * h * 1.5, h * 0.414, i * h * 1.5 + h * 0.123, h * 0.54);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
}
|
|
}
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeBootstrapRating.prototype.cst.RATING, mxShapeBootstrapRating);
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Anchor (a dummy shape without visuals used for anchoring)
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeBoostrapAnchor(bounds, fill, stroke, strokewidth)
|
|
{
|
|
mxShape.call(this);
|
|
this.bounds = bounds;
|
|
};
|
|
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
mxUtils.extend(mxShapeBoostrapAnchor, mxShape);
|
|
|
|
mxShapeBoostrapAnchor.prototype.cst = {
|
|
ANCHOR : 'mxgraph.bootstrap.anchor'
|
|
};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeBoostrapAnchor.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeBoostrapAnchor.prototype.cst.ANCHOR, mxShapeBoostrapAnchor);
|
|
|