drawio-offline
Version:
diagrams.net desktop
1,452 lines (1,225 loc) • 96.2 kB
JavaScript
/**
* $Id: mxInfographic.js,v 1.5 2016/04/1 12:32:06 mate Exp $
* Copyright (c) 2006-2018, JGraph Ltd
*/
//**********************************************************************************************************************************************************
//Numbered entry (vertical)
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeInfographicNumEntryVert(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;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeInfographicNumEntryVert, mxActor);
mxShapeInfographicNumEntryVert.prototype.cst = {NUM_ENTRY_VERT : 'mxgraph.infographic.numberedEntryVert'};
mxShapeInfographicNumEntryVert.prototype.customProperties = [
{name:'dy', dispName:'Circle Size', min:0, defVal: 25}
];
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeInfographicNumEntryVert.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
var dy = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
var inset = 5;
var d = Math.min(dy, w - 2 * inset, h - inset);
c.ellipse(w * 0.5 - d * 0.5, 0, d, d);
c.fillAndStroke();
c.begin();
c.moveTo(0, d * 0.5);
c.lineTo(w * 0.5 - d * 0.5 - inset, d * 0.5);
c.arcTo(d * 0.5 + inset, d * 0.5 + inset, 0, 0, 0, w * 0.5 + d * 0.5 + inset, d * 0.5);
c.lineTo(w, d * 0.5);
c.lineTo(w, h);
c.lineTo(0, h);
c.close();
c.fillAndStroke();
};
mxCellRenderer.registerShape(mxShapeInfographicNumEntryVert.prototype.cst.NUM_ENTRY_VERT, mxShapeInfographicNumEntryVert);
Graph.handleFactory[mxShapeInfographicNumEntryVert.prototype.cst.NUM_ENTRY_VERT] = function(state)
{
var handles = [Graph.createHandle(state, ['dy'], function(bounds)
{
var dy = Math.max(0, Math.min(bounds.width, bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));
return new mxPoint(bounds.x + bounds.width / 2, bounds.y + dy);
}, function(bounds, pt)
{
this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height, bounds.width, pt.y - bounds.y))) / 100;
})];
return handles;
};
mxShapeInfographicNumEntryVert.prototype.getConstraints = function(style, w, h)
{
var constr = [];
var dy = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
var inset = 5;
var d = Math.min(dy, w - 2 * inset, h - inset);
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, d * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false, null, 0, d * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0.5), false, null, 0, d * 0.25));
constr.push(new mxConnectionConstraint(new mxPoint(1, 0.5), false, null, 0, d * 0.25));
constr.push(new mxConnectionConstraint(new mxPoint(0, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(1, 1), false));
return (constr);
};
//**********************************************************************************************************************************************************
//Bending Arch
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeInfographicBendingArch(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
this.startAngle = 0.25;
this.endAngle = 0.75;
this.arcWidth = 0.5;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeInfographicBendingArch, mxActor);
mxShapeInfographicBendingArch.prototype.cst = {BENDING_ARCH : 'mxgraph.infographic.bendingArch'};
mxShapeInfographicBendingArch.prototype.customProperties = [
{name:'startAngle', dispName:'Start Angle', min:0, max:1, defVal: 0.75},
{name:'endAngle', dispName:'End Angle', min:0, max:1, defVal: 0.25},
{name:'arcWidth', dispName:'Arc Width', min:0, max:1, defVal: 0.25}
];
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeInfographicBendingArch.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
var startAngle = 2 * Math.PI * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'startAngle', this.startAngle))));
var endAngle = 2 * Math.PI * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'endAngle', this.endAngle))));
var arcWidth = 1 - Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'arcWidth', this.arcWidth))));
var rx = w * 0.5;
var ry = h * 0.5;
var rx2 = rx * arcWidth;
var ry2 = ry * arcWidth;
var startX = rx + Math.sin(startAngle) * rx;
var startY = ry - Math.cos(startAngle) * ry;
var innerStartX = rx + Math.sin(startAngle) * rx2;
var innerStartY = ry - Math.cos(startAngle) * ry2;
var endX = rx + Math.sin(endAngle) * rx;
var endY = ry - Math.cos(endAngle) * ry;
var innerEndX = rx + Math.sin(endAngle) * rx2;
var innerEndY = ry - Math.cos(endAngle) * ry2;
var angDiff = endAngle - startAngle;
if (angDiff < 0)
{
angDiff = angDiff + Math.PI * 2;
}
var bigArc = 0;
if (angDiff > Math.PI)
{
bigArc = 1;
}
var rx3 = rx2 - 5;
var ry3 = ry2 - 5;
c.ellipse(w * 0.5 - rx3, h * 0.5 - ry3, 2 * rx3, 2 * ry3);
c.fillAndStroke();
c.begin();
c.moveTo(startX, startY);
c.arcTo(rx, ry, 0, bigArc, 1, endX, endY);
c.lineTo(innerEndX, innerEndY);
c.arcTo(rx2, ry2, 0, bigArc, 0, innerStartX, innerStartY);
c.close();
c.fillAndStroke();
};
mxCellRenderer.registerShape(mxShapeInfographicBendingArch.prototype.cst.BENDING_ARCH, mxShapeInfographicBendingArch);
mxShapeInfographicBendingArch.prototype.constraints = null;
Graph.handleFactory[mxShapeInfographicBendingArch.prototype.cst.BENDING_ARCH] = function(state)
{
var handles = [Graph.createHandle(state, ['startAngle'], function(bounds)
{
var startAngle = 2 * Math.PI * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.state.style, 'startAngle', this.startAngle))));
return new mxPoint(bounds.x + bounds.width * 0.5 + Math.sin(startAngle) * bounds.width * 0.5, bounds.y + bounds.height * 0.5 - Math.cos(startAngle) * bounds.height * 0.5);
}, function(bounds, pt)
{
var handleX = Math.round(100 * Math.max(-1, Math.min(1, (pt.x - bounds.x - bounds.width * 0.5) / (bounds.width * 0.5)))) / 100;
var handleY = -Math.round(100 * Math.max(-1, Math.min(1, (pt.y - bounds.y - bounds.height * 0.5) / (bounds.height * 0.5)))) / 100;
var res = 0.5 * Math.atan2(handleX, handleY) / Math.PI;
if (res < 0)
{
res = 1 + res;
}
this.state.style['startAngle'] = res;
})];
var handle2 = Graph.createHandle(state, ['endAngle'], function(bounds)
{
var endAngle = 2 * Math.PI * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.state.style, 'endAngle', this.endAngle))));
return new mxPoint(bounds.x + bounds.width * 0.5 + Math.sin(endAngle) * bounds.width * 0.5, bounds.y + bounds.height * 0.5 - Math.cos(endAngle) * bounds.height * 0.5);
}, function(bounds, pt)
{
var handleX = Math.round(100 * Math.max(-1, Math.min(1, (pt.x - bounds.x - bounds.width * 0.5) / (bounds.width * 0.5)))) / 100;
var handleY = -Math.round(100 * Math.max(-1, Math.min(1, (pt.y - bounds.y - bounds.height * 0.5) / (bounds.height * 0.5)))) / 100;
var res = 0.5 * Math.atan2(handleX, handleY) / Math.PI;
if (res < 0)
{
res = 1 + res;
}
this.state.style['endAngle'] = res;
});
handles.push(handle2);
var handle3 = Graph.createHandle(state, ['arcWidth'], function(bounds)
{
var arcWidth = Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.state.style, 'arcWidth', this.arcWidth))));
return new mxPoint(bounds.x + bounds.width / 2, bounds.y + arcWidth * bounds.height * 0.5);
}, function(bounds, pt)
{
this.state.style['arcWidth'] = Math.round(100 * Math.max(0, Math.min(bounds.height / 2, bounds.width / 2, (pt.y - bounds.y) / (bounds.height * 0.5)))) / 100;
});
handles.push(handle3);
return handles;
};
//**********************************************************************************************************************************************************
//Parallelogram
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeInfographicParallelogram(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
this.dx = 10;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeInfographicParallelogram, mxActor);
mxShapeInfographicParallelogram.prototype.cst = {PARALLELOGRAM : 'mxgraph.infographic.parallelogram'};
mxShapeInfographicParallelogram.prototype.customProperties = [
{name:'dx', dispName:'Angle', min:0, defVal: 15}
];
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeInfographicParallelogram.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
var dx = Math.max(0, Math.min(w * 0.5, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));
c.begin();
c.moveTo(0, h);
c.lineTo(2 * dx, 0);
c.lineTo(w, 0);
c.lineTo(w - 2 * dx, h);
c.close();
c.fillAndStroke();
};
mxCellRenderer.registerShape(mxShapeInfographicParallelogram.prototype.cst.PARALLELOGRAM, mxShapeInfographicParallelogram);
Graph.handleFactory[mxShapeInfographicParallelogram.prototype.cst.PARALLELOGRAM] = function(state)
{
var handles = [Graph.createHandle(state, ['dx'], function(bounds)
{
var dx = Math.max(0, Math.min(bounds.width / 2, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));
return new mxPoint(bounds.x + dx, bounds.y + bounds.height / 2);
}, function(bounds, pt)
{
this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width / 2, pt.x - bounds.x))) / 100;
})];
return handles;
};
mxShapeInfographicParallelogram.prototype.getConstraints = function(style, w, h)
{
var constr = [];
var dx = Math.max(0, Math.min(w * 0.5, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));
var w2 = w - 2 * dx;
constr.push(new mxConnectionConstraint(new mxPoint(0, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 2 * dx, 0));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 2 * dx + w2 * 0.5, 0));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0.5), false, null, dx, 0));
constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - 2 * dx, h));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0.5), false, null, w - dx, 0));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2 * 0.5, h));
return (constr);
};
//**********************************************************************************************************************************************************
//Ribbon Rolled
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeInfographicRibbonRolled(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
this.dx = 185;
this.dy = 15;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeInfographicRibbonRolled, mxActor);
mxShapeInfographicRibbonRolled.prototype.cst = {RIBBON_ROLLED : 'mxgraph.infographic.ribbonRolled'};
mxShapeInfographicRibbonRolled.prototype.customProperties = [
{name:'dx', dispName:'Roll Length', min:0, defVal: 185},
{name:'dy', dispName:'Ribbon Width', min:0, defVal: 15}
];
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeInfographicRibbonRolled.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 dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
c.begin();
c.moveTo(0, dy);
c.lineTo(dx, 0);
c.lineTo(dx, dy);
c.lineTo(w, dy);
c.lineTo(w, h - dy);
c.lineTo(w - dx, h);
c.lineTo(w - dx, h - dy);
c.lineTo(0, h - dy);
c.close();
c.fillAndStroke();
c.setShadow(false);
c.setFillAlpha('0.2');
c.setFillColor('#000000');
c.begin();
c.moveTo(0, dy);
c.lineTo(dx, 0);
c.lineTo(dx, dy);
c.close();
c.moveTo(w, h - dy);
c.lineTo(w - dx, h);
c.lineTo(w - dx, h - dy);
c.close();
c.fill();
c.begin();
c.moveTo(0, dy);
c.lineTo(dx, 0);
c.lineTo(dx, dy);
c.lineTo(w, dy);
c.lineTo(w, h - dy);
c.lineTo(w - dx, h);
c.lineTo(w - dx, h - dy);
c.lineTo(0, h - dy);
c.close();
c.stroke();
};
mxCellRenderer.registerShape(mxShapeInfographicRibbonRolled.prototype.cst.RIBBON_ROLLED, mxShapeInfographicRibbonRolled);
Graph.handleFactory[mxShapeInfographicRibbonRolled.prototype.cst.RIBBON_ROLLED] = function(state)
{
var handles = [Graph.createHandle(state, ['dx', 'dy'], function(bounds)
{
var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));
var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));
return new mxPoint(bounds.x + dx, bounds.y + dy);
}, function(bounds, pt)
{
this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 100;
this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height / 2, pt.y - bounds.y))) / 100;
})];
return handles;
};
mxShapeInfographicRibbonRolled.prototype.getConstraints = function(style, w, h)
{
var constr = [];
var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));
var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
var h2 = h - dy;
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(1, 0.5), false));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h2));
constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false, null, 0, h2));
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false, null, 0, h2));
constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false, null, 0, h2));
constr.push(new mxConnectionConstraint(new mxPoint(0, 1), false, null, 0, -dy));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0.5), false));
return (constr);
};
//**********************************************************************************************************************************************************
//Ribbon Double Folded
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeInfographicRibbonDoubleFolded(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
this.dx = 25;
this.dy = 15;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeInfographicRibbonDoubleFolded, mxActor);
mxShapeInfographicRibbonDoubleFolded.prototype.cst = {RIBBON_DOUBLE_FOLDED : 'mxgraph.infographic.ribbonDoubleFolded'};
mxShapeInfographicRibbonDoubleFolded.prototype.customProperties = [
{name:'dx', dispName:'Fold Length', min:0, defVal: 25},
{name:'dy', dispName:'Ribbon Width', min:0, defVal: 15}
];
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeInfographicRibbonDoubleFolded.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 dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
c.begin();
c.moveTo(0, dy);
c.lineTo(dx, 0);
c.lineTo(dx, dy);
c.lineTo(w, dy);
c.lineTo(w, h - dy);
c.lineTo(w - dx, h);
c.lineTo(w - dx, h - dy);
c.lineTo(0, h - dy);
c.close();
c.fillAndStroke();
c.setShadow(false);
c.setFillAlpha('0.2');
c.setFillColor('#000000');
c.begin();
c.moveTo(0, dy);
c.lineTo(dx, 0);
c.lineTo(dx, h - 2 * dy);
c.lineTo(0, h - dy);
c.close();
c.moveTo(w, h - dy);
c.lineTo(w - dx, h);
c.lineTo(w - dx, h - dy);
c.close();
c.fill();
c.begin();
c.moveTo(0, dy);
c.lineTo(dx, 0);
c.lineTo(dx, dy);
c.lineTo(w, dy);
c.lineTo(w, h - dy);
c.lineTo(w - dx, h);
c.lineTo(w - dx, h - dy);
c.lineTo(0, h - dy);
c.close();
c.stroke();
};
mxCellRenderer.registerShape(mxShapeInfographicRibbonDoubleFolded.prototype.cst.RIBBON_DOUBLE_FOLDED, mxShapeInfographicRibbonDoubleFolded);
Graph.handleFactory[mxShapeInfographicRibbonDoubleFolded.prototype.cst.RIBBON_DOUBLE_FOLDED] = function(state)
{
var handles = [Graph.createHandle(state, ['dx', 'dy'], function(bounds)
{
var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));
var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));
return new mxPoint(bounds.x + dx, bounds.y + dy);
}, function(bounds, pt)
{
this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 100;
this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height / 2, pt.y - bounds.y))) / 100;
})];
return handles;
};
mxShapeInfographicRibbonDoubleFolded.prototype.getConstraints = function(style, w, h)
{
var constr = [];
var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));
var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(1, 0.5), false));
constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false, null, 0, h - dy));
constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false, null, 0, h - dy));
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false, null, 0, h - dy));
constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false, null, 0, h - dy));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h - dy));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0.5), false));
return (constr);
};
//**********************************************************************************************************************************************************
//Ribbon Front Folded
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeInfographicRibbonFrontFolded(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
this.dx = 0.5;
this.dy = 0.5;
this.notch = 0.5;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeInfographicRibbonFrontFolded, mxActor);
mxShapeInfographicRibbonFrontFolded.prototype.cst = {RIBBON_FRONT_FOLDED : 'mxgraph.infographic.ribbonFrontFolded'};
mxShapeInfographicRibbonFrontFolded.prototype.customProperties = [
{name:'dx', dispName:'Fold Length', min:0, defVal: 25},
{name:'dy', dispName:'Ribbon Width', min:0, defVal: 15},
{name:'notch', dispName:'Notch', min:0, defVal: 15}
];
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeInfographicRibbonFrontFolded.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 dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
var notch = Math.max(0, Math.min(w - dx, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));
c.begin();
c.moveTo(0, dy);
c.lineTo(dx, 0);
c.lineTo(dx, dy);
c.lineTo(w, dy);
c.lineTo(w - notch, (h - dy) / 2 + dy);
c.lineTo(w, h);
c.lineTo(0, h);
c.close();
c.fillAndStroke();
c.setShadow(false);
c.setFillAlpha('0.2');
c.setFillColor('#000000');
c.begin();
c.moveTo(0, dy);
c.lineTo(dx, 0);
c.lineTo(dx, h - dy);
c.lineTo(0, h);
c.close();
c.fill();
c.begin();
c.moveTo(0, dy);
c.lineTo(dx, 0);
c.lineTo(dx, dy);
c.lineTo(w, dy);
c.lineTo(w - notch, (h - dy) / 2 + dy);
c.lineTo(w, h);
c.lineTo(0, h);
c.close();
c.stroke();
};
mxCellRenderer.registerShape(mxShapeInfographicRibbonFrontFolded.prototype.cst.RIBBON_FRONT_FOLDED, mxShapeInfographicRibbonFrontFolded);
Graph.handleFactory[mxShapeInfographicRibbonFrontFolded.prototype.cst.RIBBON_FRONT_FOLDED] = function(state)
{
var handles = [Graph.createHandle(state, ['dx', 'dy'], function(bounds)
{
var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));
var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));
return new mxPoint(bounds.x + dx, bounds.y + dy);
}, function(bounds, pt)
{
this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 100;
this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height / 2, pt.y - bounds.y))) / 100;
})];
var handle2 = Graph.createHandle(state, ['notch'], function(bounds)
{
var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));
var notch = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'notch', this.notch))));
return new mxPoint(bounds.x + bounds.width - notch, bounds.y + dy + (bounds.height - dy) * 0.5);
}, function(bounds, pt)
{
this.state.style['notch'] = Math.round(100 * Math.max(0, Math.min(bounds.width, (bounds.width + bounds.x - pt.x)))) / 100;
});
handles.push(handle2);
return handles;
};
mxShapeInfographicRibbonFrontFolded.prototype.getConstraints = function(style, w, h)
{
var constr = [];
var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));
var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
var notch = Math.max(0, Math.min(w - dx, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - notch, (h + dy) * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(1, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0.75, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0.25, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, (h + dy) * 0.5));
return (constr);
};
//**********************************************************************************************************************************************************
//Ribbon Back Folded
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeInfographicRibbonBackFolded(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
this.dx = 0.5;
this.dy = 0.5;
this.notch = 0.5;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeInfographicRibbonBackFolded, mxActor);
mxShapeInfographicRibbonBackFolded.prototype.cst = {RIBBON_BACK_FOLDED : 'mxgraph.infographic.ribbonBackFolded'};
mxShapeInfographicRibbonBackFolded.prototype.customProperties = [
{name:'dx', dispName:'Fold Length', min:0, defVal: 25},
{name:'dy', dispName:'Ribbon Width', min:0, defVal: 15},
{name:'notch', dispName:'Notch', min:0, defVal: 15}
];
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeInfographicRibbonBackFolded.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 dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
var notch = Math.max(0, Math.min(w - dx, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));
c.begin();
c.moveTo(0, dy);
c.lineTo(dx, 0);
c.lineTo(dx, dy);
c.lineTo(w, dy);
c.lineTo(w - notch, (h - dy) / 2 + dy);
c.lineTo(w, h);
c.lineTo(0, h);
c.close();
c.fillAndStroke();
c.setShadow(false);
c.setFillAlpha('0.2');
c.setFillColor('#000000');
c.begin();
c.moveTo(0, dy);
c.lineTo(dx, 0);
c.lineTo(dx, dy);
c.close();
c.fill();
c.begin();
c.moveTo(0, dy);
c.lineTo(dx, 0);
c.lineTo(dx, dy);
c.lineTo(w, dy);
c.lineTo(w - notch, (h - dy) / 2 + dy);
c.lineTo(w, h);
c.lineTo(0, h);
c.close();
c.stroke();
};
mxCellRenderer.registerShape(mxShapeInfographicRibbonBackFolded.prototype.cst.RIBBON_BACK_FOLDED, mxShapeInfographicRibbonBackFolded);
Graph.handleFactory[mxShapeInfographicRibbonBackFolded.prototype.cst.RIBBON_BACK_FOLDED] = function(state)
{
var handles = [Graph.createHandle(state, ['dx', 'dy'], function(bounds)
{
var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));
var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));
return new mxPoint(bounds.x + dx, bounds.y + dy);
}, function(bounds, pt)
{
this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 100;
this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height / 2, pt.y - bounds.y))) / 100;
})];
var handle2 = Graph.createHandle(state, ['notch'], function(bounds)
{
var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));
var notch = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'notch', this.notch))));
return new mxPoint(bounds.x + bounds.width - notch, bounds.y + dy + (bounds.height - dy) * 0.5);
}, function(bounds, pt)
{
this.state.style['notch'] = Math.round(100 * Math.max(0, Math.min(bounds.width, (bounds.width + bounds.x - pt.x)))) / 100;
});
handles.push(handle2);
return handles;
};
mxShapeInfographicRibbonBackFolded.prototype.getConstraints = function(style, w, h)
{
var constr = [];
var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));
var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
var notch = Math.max(0, Math.min(w - dx, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false, null, 0, dy));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - notch, (h + dy) * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(1, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0.75, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0.25, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, (h + dy) * 0.5));
return (constr);
};
//**********************************************************************************************************************************************************
//Banner
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeInfographicBanner(bounds, fill, stroke, strokewidth)
{
mxShape.call(this);
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
this.dx = 0.5;
this.dy = 0.5;
this.notch = 0.5;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeInfographicBanner, mxActor);
mxShapeInfographicBanner.prototype.cst = {BANNER : 'mxgraph.infographic.banner'};
mxShapeInfographicBanner.prototype.customProperties = [
{name:'dx', dispName:'Fold Length', min:0, defVal: 25},
{name:'dy', dispName:'Ribbon Width', min:0, defVal: 15},
{name:'notch', dispName:'Notch', min:0, defVal: 15}
];
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeInfographicBanner.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
var dx = Math.max(0, Math.min(w / 2, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));
var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
var notch = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));
dx = Math.min(w / 2 - 2 * dy, dx);
notch = Math.min(dx, notch);
c.begin();
c.moveTo(0, dy);
c.lineTo(dx, dy);
c.lineTo(dx, 0);
c.lineTo(w - dx, 0);
c.lineTo(w - dx, dy);
c.lineTo(w, dy);
c.lineTo(w - notch, (h - dy) * 0.5 + dy);
c.lineTo(w, h);
c.lineTo(w - dx - 2 * dy, h);
c.lineTo(w - dx - 2 * dy, h - dy);
c.lineTo(dx + 2 * dy, h - dy);
c.lineTo(dx + 2 * dy, h);
c.lineTo(0, h);
c.lineTo(notch, (h - dy) * 0.5 + dy);
c.close();
c.fillAndStroke();
c.setShadow(false);
c.setFillAlpha('0.2');
c.setFillColor('#000000');
c.begin();
c.moveTo(0,dy);
c.lineTo(dx, dy);
c.lineTo(dx, h - dy);
c.lineTo(dx + 2 * dy, h);
c.lineTo(0, h);
c.lineTo(notch, (h - dy) * 0.5 + dy);
c.close();
c.moveTo(w,dy);
c.lineTo(w - dx, dy);
c.lineTo(w - dx, h - dy);
c.lineTo(w - dx - 2 * dy, h);
c.lineTo(w, h);
c.lineTo(w - notch, (h - dy) * 0.5 + dy);
c.close();
c.fill();
c.setFillAlpha('0.4');
c.begin();
c.moveTo(dx, h - dy);
c.lineTo(dx + 2 * dy, h - dy);
c.lineTo(dx + 2 * dy, h);
c.close();
c.moveTo(w - dx, h - dy);
c.lineTo(w - dx - 2 * dy, h - dy);
c.lineTo(w - dx - 2 * dy, h);
c.close();
c.fill();
};
mxCellRenderer.registerShape(mxShapeInfographicBanner.prototype.cst.BANNER, mxShapeInfographicBanner);
Graph.handleFactory[mxShapeInfographicBanner.prototype.cst.BANNER] = function(state)
{
var handles = [Graph.createHandle(state, ['dx', 'dy'], function(bounds)
{
var dx = Math.max(0, Math.min(bounds.width / 2, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));
var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));
return new mxPoint(bounds.x + bounds.width - dx, bounds.y + dy);
}, function(bounds, pt)
{
this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width / 2, bounds.x + bounds.width - pt.x))) / 100;
this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height / 2, pt.y - bounds.y))) / 100;
})];
var handle2 = Graph.createHandle(state, ['notch'], function(bounds)
{
var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));
var dx = Math.max(0, Math.min(bounds.width / 2, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));
var notch = Math.max(0, Math.min(dx, parseFloat(mxUtils.getValue(this.state.style, 'notch', this.notch))));
return new mxPoint(bounds.x + bounds.width - notch, bounds.y + dy + (bounds.height - dy) * 0.5);
}, function(bounds, pt)
{
this.state.style['notch'] = Math.round(100 * Math.max(0, Math.min(bounds.width, (bounds.width + bounds.x - pt.x)))) / 100;
});
handles.push(handle2);
return handles;
};
mxShapeInfographicBanner.prototype.getConstraints = function(style, w, h)
{
var constr = [];
var dx = Math.max(0, Math.min(w / 2, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));
var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
var notch = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));
dx = Math.min(w / 2 - 2 * dy, dx);
notch = Math.min(dx, notch);
var w2 = w - 2 * dx;
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx, 0));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2 * 0.25, 0));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2 * 0.5, 0));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2 * 0.75, 0));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2, 0));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2, (h - dy) * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2, h - dy));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2 * 0.75, h - dy));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2 * 0.5, h - dy));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2 * 0.25, h - dy));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx, h - dy));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx, (h - dy) * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, notch, (h + dy) * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - notch, (h + dy) * 0.5));
return (constr);
};
//**********************************************************************************************************************************************************
//Circular Callout
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeInfographicCircularCallout(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;
};
/**
* Extends mxShape.
*/
mxUtils.extend(mxShapeInfographicCircularCallout, mxActor);
mxShapeInfographicCircularCallout.prototype.cst = {CIRCULAR_CALLOUT : 'mxgraph.infographic.circularCallout'};
mxShapeInfographicCircularCallout.prototype.customProperties = [
{name:'dy', dispName:'Ribbon Width', min:0, defVal: 15}
];
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeInfographicCircularCallout.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
var rx = Math.max(0, Math.min(w * 0.5, w * 0.5 - dy));
var ry = Math.max(0, Math.min(h * 0.5, h * 0.5 - dy));
c.begin();
c.moveTo(w, h * 0.5);
c.arcTo(w * 0.5, h * 0.5, 0, 0, 1, w * 0.5, h);
c.arcTo(w * 0.5, h * 0.5, 0, 0, 1, 0, h * 0.5);
c.arcTo(w * 0.5, h * 0.5, 0, 0, 1, w * 0.5, 0);
c.lineTo(w, 0);
c.close();
c.moveTo(w * 0.5, dy);
c.arcTo(rx, ry, 0, 0, 0, w * 0.5 - rx, h * 0.5);
c.arcTo(rx, ry, 0, 0, 0, w * 0.5, h * 0.5 + ry);
c.arcTo(rx, ry, 0, 0, 0, w * 0.5 + rx, h * 0.5);
c.arcTo(rx, ry, 0, 0, 0, w * 0.5, h * 0.5 - ry);
c.close();
c.fillAndStroke();
};
mxCellRenderer.registerShape(mxShapeInfographicCircularCallout.prototype.cst.CIRCULAR_CALLOUT, mxShapeInfographicCircularCallout);
Graph.handleFactory[mxShapeInfographicCircularCallout.prototype.cst.CIRCULAR_CALLOUT] = function(state)
{
var handles = [Graph.createHandle(state, ['dy'], function(bounds)
{
var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));
return new mxPoint(bounds.x + bounds.width * 0.5, bounds.y + dy);
}, function(bounds, pt)
{
this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height / 2, pt.y - bounds.y))) / 100;
})];
return handles;
};
mxShapeInfographicCircularCallout.prototype.getConstraints = function(style, w, h)
{
var constr = [];
var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
var rx = Math.max(0, Math.min(w * 0.5, w * 0.5 - dy));
var ry = Math.max(0, Math.min(h * 0.5, h * 0.5 - dy));
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));
constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false));
constr.push(new mxConnectionConstraint(new mxPoint(1, 0.5), false));
constr.push(new mxConnectionConstraint(new mxPoint(0.855, 0.855), false));
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0.145, 0.855), false));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0.5), false));
constr.push(new mxConnectionConstraint(new mxPoint(0.145, 0.145), false));
return (constr);
};
//**********************************************************************************************************************************************************
//Shaded triangle
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeInfographicShadedTriangle(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(mxShapeInfographicShadedTriangle, mxActor);
mxShapeInfographicShadedTriangle.prototype.cst = {SHADED_TRIANGLE : 'mxgraph.infographic.shadedTriangle'};
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeInfographicShadedTriangle.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
c.begin();
c.moveTo(0, h);
c.lineTo(w * 0.5, 0);
c.lineTo(w, h);
c.close();
c.fillAndStroke();
c.setShadow(false);
c.setFillColor('#ffffff');
c.setFillAlpha('0.2');
c.begin();
c.moveTo(0, h);
c.lineTo(w * 0.5, 0);
c.lineTo(w * 0.5, h * 0.67);
c.close();
c.fill();
c.setFillColor('#000000');
c.begin();
c.moveTo(w, h);
c.lineTo(w * 0.5, h * 0.67);
c.lineTo(w * 0.5, 0);
c.close();
c.fill();
c.begin();
c.moveTo(0, h);
c.lineTo(w * 0.5, 0);
c.lineTo(w, h);
c.close();
c.stroke();
};
mxCellRenderer.registerShape(mxShapeInfographicShadedTriangle.prototype.cst.SHADED_TRIANGLE, mxShapeInfographicShadedTriangle);
mxShapeInfographicShadedTriangle.prototype.getConstraints = function(style, w, h)
{
var constr = [];
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));
constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0.5), false));
constr.push(new mxConnectionConstraint(new mxPoint(1, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0.5), false));
return (constr);
};
//**********************************************************************************************************************************************************
//Shaded pyramid
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeInfographicShadedPyramid(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(mxShapeInfographicShadedPyramid, mxActor);
mxShapeInfographicShadedPyramid.prototype.cst = {SHADED_PYRAMID : 'mxgraph.infographic.shadedPyramid'};
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeInfographicShadedPyramid.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
var h1 = Math.max(h - w * 0.3, 0);
c.begin();
c.moveTo(0, h1);
c.lineTo(w * 0.5, 0);
c.lineTo(w, h1);
c.lineTo(w * 0.5, h);
c.close();
c.fillAndStroke();
c.setShadow(false);
c.setFillColor('#ffffff');
c.setFillAlpha('0.2');
c.begin();
c.moveTo(0, h1);
c.lineTo(w * 0.5, 0);
c.lineTo(w * 0.5, h);
c.close();
c.fill();
c.setFillColor('#000000');
c.begin();
c.moveTo(w, h1);
c.lineTo(w * 0.5, h);
c.lineTo(w * 0.5, 0);
c.close();
c.fill();
c.begin();
c.moveTo(0, h1);
c.lineTo(w * 0.5, 0);
c.lineTo(w, h1);
c.lineTo(w * 0.5, h);
c.close();
c.stroke();
};
mxCellRenderer.registerShape(mxShapeInfographicShadedPyramid.prototype.cst.SHADED_PYRAMID, mxShapeInfographicShadedPyramid);
mxShapeInfographicShadedPyramid.prototype.getConstraints = function(style, w, h)
{
var constr = [];
var h1 = Math.max(h - w * 0.3, 0);
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.75, h1 * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h1));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.75, (h + h1) * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5, h));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.25, (h + h1) * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h1));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.25, h1 * 0.5));
return (constr);
};
//**********************************************************************************************************************************************************
//Pyramid step
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeInfographicPyramidStep(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(mxShapeInfographicPyramidStep, mxActor);
mxShapeInfographicPyramidStep.prototype.cst = {PYRAMID_STEP : 'mxgraph.infographic.pyramidStep'};
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeInfographicPyramidStep.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
var h1 = Math.max(w * 0.1, 0);
c.begin();
c.moveTo(0, h1);
c.lineTo(w * 0.5, 0);
c.lineTo(w, h1);
c.lineTo(w, h);
c.lineTo(0, h);
c.close();
c.fillAndStroke();
c.setShadow(false);
c.setFillColor('#ffffff');
c.setFillAlpha('0.2');
c.begin();
c.moveTo(0, h1);
c.lineTo(w * 0.5, 0);
c.lineTo(w * 0.5, h);
c.lineTo(0, h);
c.close();
c.fill();
c.setFillColor('#000000');
c.begin();
c.moveTo(w, h1);
c.lineTo(w, h);
c.lineTo(w * 0.5, h);
c.lineTo(w * 0.5, 0);
c.close();
c.fill();
c.begin();
c.moveTo(0, h1);
c.lineTo(w * 0.5, 0);
c.lineTo(w, h1);
c.lineTo(w, h);
c.lineTo(0, h);
c.close();
c.stroke();
};
mxCellRenderer.registerShape(mxShapeInfographicPyramidStep.prototype.cst.PYRAMID_STEP, mxShapeInfographicPyramidStep);
mxShapeInfographicPyramidStep.prototype.getConstraints = function(style, w, h)
{
var constr = [];
var h1 = Math.max(w * 0.1, 0);
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.75, h1 * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h1));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h1 + (h - h1) * 0.25));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h1 + (h - h1) * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h1 + (h - h1) * 0.75));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.75, h));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5, h));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.25, h));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h1 + (h - h1) * 0.75));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h1 + (h - h1) * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h1 + (h - h1) * 0.25));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.25, h1 * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h1));
return (constr);
};
//**********************************************************************************************************************************************************
//Cylinder
//**********************************************************************************************************************************************************
/**
* Extends mxShape.
*/
function mxShapeInfographicCylinder(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(mxShapeInfographicCylinder, mxActor);
mxShapeInfographicCylinder.prototype.cst = {CYLINDER : 'mxgraph.infographic.cylinder'};
/**
* Function: paintVertexShape
*
* Paints the vertex shape.
*/
mxShapeInfographicCylinder.prototype.paintVertexShape = function(c, x, y, w, h)
{
c.translate(x, y);
var dy = 20;
var rx = w * 0.5;
var ry = dy * 0.5;
c.begin();
c.moveTo(0, dy * 0.5);
c.arcTo(rx, ry, 0, 0, 1, w, ry);
c.lineTo(w, h - ry);
c.arcTo(rx, ry, 0, 0, 1, 0, h - ry);
c.close();
c.fillAndStroke();
c.setShadow(false);
c.setGradient('#000000', '#ffffff', 0, 0, w, h, mxConstants.DIRECTION_EAST, 0.4, 0.4);
c.begin();
c.moveTo(0, dy * 0.5);
c.arcTo(rx, ry, 0, 0, 0, w, ry);
c.lineTo(w, h - ry);
c.arcTo(rx, ry, 0, 0, 1, 0, h - ry);
c.close();
c.fill();
c.begin();
c.moveTo(0, dy * 0.5);
c.arcTo(rx, ry, 0, 0, 1, w, ry);
c.lineTo(w, h - ry);
c.arcTo(rx, ry, 0, 0, 1, 0, h - ry);
c.close();
c.stroke();
};
mxCellRenderer.registerShape(mxShapeInfographicCylinder.prototype.cst.CYLINDER, mxShapeInfographicCylinder);
mxShapeInfographicCylinder.prototype.getConstraints = function(style, w, h)
{
var constr = [];
var dy = 20;
var rx = w * 0.5;
var ry = dy * 0.5;
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dy * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dy * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dy * 0.5 + (h - dy) * 0.25));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dy * 0.5 + (h - dy) * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dy * 0.5 + (h - dy) * 0.75));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h - dy * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h - dy * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dy * 0.5 + (h - dy) * 0.75));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dy * 0.5 + (h - dy) * 0.5));
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dy * 0.5 + (h - dy) * 0.25));
return (constr);
};
//***********