2669 lines
94 KiB
JavaScript
Vendored
2669 lines
94 KiB
JavaScript
Vendored
/**
|
|
* $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);
|
|
};
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Circular Callout 2
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeInfographicCircularCallout2(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(mxShapeInfographicCircularCallout2, mxActor);
|
|
|
|
mxShapeInfographicCircularCallout2.prototype.cst = {CIRCULAR_CALLOUT_2 : 'mxgraph.infographic.circularCallout2'};
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeInfographicCircularCallout2.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, 'none');
|
|
var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, 'none');
|
|
c.setFillColor(strokeColor);
|
|
|
|
var rx = Math.max(0, Math.min(w * 0.5, h * 0.4, h * 0.5 - 7));
|
|
|
|
c.begin();
|
|
c.moveTo(w * 0.5 - 2, 2.15 * rx);
|
|
c.arcTo(rx * 0.23, rx * 0.23, 0, 0, 0, w * 0.5 - rx * 0.2, rx * 1.97);
|
|
c.arcTo(rx, rx, 0, 0, 1, w * 0.5 - rx, rx);
|
|
c.arcTo(rx, rx, 0, 0, 1, w * 0.5, 0);
|
|
c.arcTo(rx, rx, 0, 0, 1, w * 0.5 + rx, rx);
|
|
c.arcTo(rx, rx, 0, 0, 1, w * 0.5 + rx * 0.2, rx * 1.97);
|
|
c.arcTo(rx * 0.23, rx * 0.23, 0, 0, 0, w * 0.5 + 2, 2.15 * rx);
|
|
|
|
var rxMin = Math.max(rx * 0.1, 6);
|
|
|
|
if (rx * 0.04 > 4)
|
|
{
|
|
c.lineTo(w * 0.5 + 2, h - rx * 0.22);
|
|
c.arcTo(rx * 0.05, rx * 0.05, 0, 0, 0, w * 0.5 + rx * 0.04, h - rx * 0.19);
|
|
}
|
|
else
|
|
{
|
|
c.lineTo(w * 0.5 + 2, h - 2 * rxMin);
|
|
}
|
|
|
|
c.arcTo(rxMin, rxMin, 0, 0, 1, w * 0.5 + rxMin, h - rxMin);
|
|
c.arcTo(rxMin, rxMin, 0, 0, 1, w * 0.5, h);
|
|
c.arcTo(rxMin, rxMin, 0, 0, 1, w * 0.5 - rxMin, h - rxMin);
|
|
|
|
if (rx * 0.04 > 4)
|
|
{
|
|
c.arcTo(rxMin, rxMin, 0, 0, 1, w * 0.5 - rx * 0.04, h - rx * 0.19);
|
|
c.arcTo(rxMin * 0.5, rxMin * 0.5, 0, 0, 0, w * 0.5 - 2, h - rx * 0.22);
|
|
}
|
|
else
|
|
{
|
|
c.arcTo(rxMin, rxMin, 0, 0, 1, w * 0.5 - 2, h - 2 * rxMin);
|
|
}
|
|
|
|
c.close();
|
|
c.moveTo(w * 0.5, rx * 0.2);
|
|
c.arcTo(rx * 0.8, rx * 0.8, 0, 0, 0, w * 0.5 - rx * 0.8, rx * 0.8);
|
|
c.arcTo(rx * 0.8, rx * 0.8, 0, 0, 0, w * 0.5, rx * 1.8);
|
|
c.arcTo(rx * 0.8, rx * 0.8, 0, 0, 0, w * 0.5 + rx * 0.8, rx * 0.8);
|
|
c.arcTo(rx * 0.8, rx * 0.8, 0, 0, 0, w * 0.5, rx * 0.2);
|
|
c.close();
|
|
c.moveTo(w * 0.5, h - rxMin * 1.75);
|
|
c.arcTo(rxMin * 0.75, rxMin * 0.75, 0, 0, 0, w * 0.5 - rxMin * 0.75, h - rxMin );
|
|
c.arcTo(rxMin * 0.75, rxMin * 0.75, 0, 0, 0, w * 0.5, h - rxMin * 0.25);
|
|
c.arcTo(rxMin * 0.75, rxMin * 0.75, 0, 0, 0, w * 0.5 + rxMin * 0.75, h - rxMin);
|
|
c.arcTo(rxMin * 0.75, rxMin * 0.75, 0, 0, 0, w * 0.5, h - rxMin * 1.75);
|
|
c.close();
|
|
c.fill();
|
|
|
|
c.setFillColor(fillColor);
|
|
c.setShadow(false);
|
|
|
|
c.begin();
|
|
c.moveTo(w * 0.5, rx * 0.2);
|
|
c.arcTo(rx * 0.8, rx * 0.8, 0, 0, 0, w * 0.5 - rx * 0.8, rx * 0.8);
|
|
c.arcTo(rx * 0.8, rx * 0.8, 0, 0, 0, w * 0.5, rx * 1.8);
|
|
c.arcTo(rx * 0.8, rx * 0.8, 0, 0, 0, w * 0.5 + rx * 0.8, rx * 0.8);
|
|
c.arcTo(rx * 0.8, rx * 0.8, 0, 0, 0, w * 0.5, rx * 0.2);
|
|
c.close();
|
|
c.moveTo(w * 0.5, h - rxMin * 1.75);
|
|
c.arcTo(rxMin * 0.75, rxMin * 0.75, 0, 0, 0, w * 0.5 - rxMin * 0.75, h - rxMin );
|
|
c.arcTo(rxMin * 0.75, rxMin * 0.75, 0, 0, 0, w * 0.5, h - rxMin * 0.25);
|
|
c.arcTo(rxMin * 0.75, rxMin * 0.75, 0, 0, 0, w * 0.5 + rxMin * 0.75, h - rxMin);
|
|
c.arcTo(rxMin * 0.75, rxMin * 0.75, 0, 0, 0, w * 0.5, h - rxMin * 1.75);
|
|
c.close();
|
|
c.fill();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeInfographicCircularCallout2.prototype.cst.CIRCULAR_CALLOUT_2, mxShapeInfographicCircularCallout2);
|
|
|
|
mxShapeInfographicCircularCallout2.prototype.getConstraints = function(style, w, h)
|
|
{
|
|
var constr = [];
|
|
var rx = Math.max(0, Math.min(w * 0.5, h * 0.4, h * 0.5 - 7));
|
|
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 - rx, rx));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 + rx, rx));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));
|
|
|
|
return (constr);
|
|
};
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Banner Single Fold
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeInfographicBannerSingleFold(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.dx2 = 0.5;
|
|
this.notch = 0.5;
|
|
};
|
|
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
mxUtils.extend(mxShapeInfographicBannerSingleFold, mxActor);
|
|
|
|
mxShapeInfographicBannerSingleFold.prototype.cst = {BANNER_SINGLE_FOLD : 'mxgraph.infographic.bannerSingleFold'};
|
|
|
|
mxShapeInfographicBannerSingleFold.prototype.customProperties = [
|
|
{name:'dx', dispName: 'Fold Length', type:'float', defVal:32, min:0},
|
|
{name:'dy', dispName: 'Banner Width', type:'float', defVal:17, min:0},
|
|
{name:'notch', dispName: 'Notch', type:'float', defVal:15, min:0}
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeInfographicBannerSingleFold.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, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));
|
|
|
|
dx = Math.min(w - 2 * dy, dx);
|
|
|
|
var dx2 = Math.max(0, Math.min(w - dx - 2 * dy, parseFloat(mxUtils.getValue(this.style, 'dx2', this.dx2))));
|
|
|
|
notch = Math.min(dx, notch);
|
|
|
|
c.begin();
|
|
c.moveTo(dx2, 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(dx2, h - dy);
|
|
c.lineTo(0, (h - dy) * 0.5);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
|
|
c.setShadow(false);
|
|
c.setFillAlpha('0.05');
|
|
c.setFillColor('#000000');
|
|
c.begin();
|
|
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(w - dx, h - dy);
|
|
c.lineTo(w - dx - 2 * dy, h - dy);
|
|
c.lineTo(w - dx - 2 * dy, h);
|
|
c.close();
|
|
c.fill();
|
|
|
|
c.begin();
|
|
c.moveTo(dx2, 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(dx2, h - dy);
|
|
c.lineTo(0, (h - dy) * 0.5);
|
|
c.close();
|
|
c.stroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeInfographicBannerSingleFold.prototype.cst.BANNER_SINGLE_FOLD, mxShapeInfographicBannerSingleFold);
|
|
|
|
Graph.handleFactory[mxShapeInfographicBannerSingleFold.prototype.cst.BANNER_SINGLE_FOLD] = 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 + bounds.width - dx, bounds.y + dy);
|
|
}, function(bounds, pt)
|
|
{
|
|
this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width, 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, 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);
|
|
|
|
var handle3 = Graph.createHandle(state, ['dx2'], 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, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));
|
|
var dx2 = Math.max(0, Math.min(bounds.width - dx, parseFloat(mxUtils.getValue(this.state.style, 'dx2', this.dx2))));
|
|
|
|
return new mxPoint(bounds.x + dx2, bounds.y + (bounds.height - dy) * 0.5);
|
|
}, function(bounds, pt)
|
|
{
|
|
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, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));
|
|
|
|
this.state.style['dx2'] = Math.round(100 * Math.max(0, Math.min(bounds.width - dx - 2 * dy, pt.x - bounds.x))) / 100;
|
|
});
|
|
|
|
handles.push(handle3);
|
|
|
|
|
|
return handles;
|
|
};
|
|
|
|
mxShapeInfographicBannerSingleFold.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, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));
|
|
dx = Math.min(w - 2 * dy, dx);
|
|
var dx2 = Math.max(0, Math.min(w - dx - 2 * dy, parseFloat(mxUtils.getValue(this.style, 'dx2', this.dx2))));
|
|
notch = Math.min(dx, notch);
|
|
var w2 = w - dx - dx2;
|
|
|
|
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, dx2, 0));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.25, 0));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.5, 0));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.75, 0));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2, 0));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx * 0.25, dy));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx * 0.5, dy));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx * 0.75, dy));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dy));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - notch, (h + dy) * 0.5));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx - 2 * dy, h));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - (dx + 2 * dy) * 0.75, h));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - (dx + 2 * dy) * 0.5, h));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - (dx + 2 * dy) * 0.25, h));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2, h - dy));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.25, h - dy));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.5, h - dy));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.75, h - dy));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2, h - dy));
|
|
|
|
return (constr);
|
|
};
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Shaded Cube
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeInfographicShadedCube(bounds, fill, stroke, strokewidth)
|
|
{
|
|
mxShape.call(this);
|
|
this.bounds = bounds;
|
|
this.fill = fill;
|
|
this.stroke = stroke;
|
|
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
|
|
this.isoAngle = 15;
|
|
};
|
|
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
mxUtils.extend(mxShapeInfographicShadedCube, mxActor);
|
|
|
|
mxShapeInfographicShadedCube.prototype.cst = {SHADED_CUBE : 'mxgraph.infographic.shadedCube'};
|
|
|
|
mxShapeInfographicShadedCube.prototype.customProperties = [
|
|
{name:'isoAngle', dispName: 'Perspective', type:'float', defVal:15, min:0}
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeInfographicShadedCube.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var isoAngle = Math.max(0.01, Math.min(94, parseFloat(mxUtils.getValue(this.style, 'isoAngle', this.isoAngle)))) * Math.PI / 200 ;
|
|
var isoH = Math.min(w * Math.tan(isoAngle), h * 0.5);
|
|
|
|
c.begin();
|
|
c.moveTo(w * 0.5, 0);
|
|
c.lineTo(w, isoH);
|
|
c.lineTo(w, h - isoH);
|
|
c.lineTo(w * 0.5, h);
|
|
c.lineTo(0, h - isoH);
|
|
c.lineTo(0, isoH);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
|
|
c.setShadow(false);
|
|
c.setFillAlpha('0.2');
|
|
c.setFillColor('#000000');
|
|
|
|
c.begin();
|
|
c.moveTo(w * 0.5, 2 * isoH);
|
|
c.lineTo(w, isoH);
|
|
c.lineTo(w, h - isoH);
|
|
c.lineTo(w * 0.5, h);
|
|
c.close();
|
|
c.fill();
|
|
|
|
c.setFillColor('#ffffff');
|
|
c.begin();
|
|
c.moveTo(w * 0.5, 2 * isoH);
|
|
c.lineTo(0, isoH);
|
|
c.lineTo(0, h - isoH);
|
|
c.lineTo(w * 0.5, h);
|
|
c.close();
|
|
c.fill();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeInfographicShadedCube.prototype.cst.SHADED_CUBE, mxShapeInfographicShadedCube);
|
|
|
|
Graph.handleFactory[mxShapeInfographicShadedCube.prototype.cst.SHADED_CUBE] = function(state)
|
|
{
|
|
var handles = [Graph.createHandle(state, ['isoAngle'], function(bounds)
|
|
{
|
|
var isoAngle = Math.max(0.01, Math.min(94, parseFloat(mxUtils.getValue(this.state.style, 'isoAngle', this.isoAngle)))) * Math.PI / 200 ;
|
|
var isoH = Math.min(bounds.width * Math.tan(isoAngle), bounds.height * 0.5);
|
|
|
|
return new mxPoint(bounds.x, bounds.y + isoH);
|
|
}, function(bounds, pt)
|
|
{
|
|
this.state.style['isoAngle'] = Math.round(100 * Math.max(0, Math.min(100, pt.y - bounds.y))) / 100;
|
|
})];
|
|
|
|
return handles;
|
|
};
|
|
|
|
mxShapeInfographicShadedCube.prototype.getConstraints = function(style, w, h)
|
|
{
|
|
var constr = [];
|
|
var isoAngle = Math.max(0.01, Math.min(94, parseFloat(mxUtils.getValue(this.style, 'isoAngle', this.isoAngle)))) * Math.PI / 200 ;
|
|
var isoH = Math.min(w * Math.tan(isoAngle), h * 0.5);
|
|
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.75, isoH * 0.5));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, isoH));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, isoH + (h - 2 * isoH) * 0.25));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, isoH + (h - 2 * isoH) * 0.5));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, isoH + (h - 2 * isoH) * 0.75));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h - isoH));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.75, h - isoH * 0.5));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.25, h - isoH * 0.5));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h - isoH));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h - isoH));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, isoH + (h - 2 * isoH) * 0.75));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, isoH + (h - 2 * isoH) * 0.5));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, isoH + (h - 2 * isoH) * 0.25));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, isoH));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.25, isoH * 0.5));
|
|
|
|
return (constr);
|
|
};
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Partial Concentric Ellipse
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeInfographicPartConcEllipse(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(mxShapeInfographicPartConcEllipse, mxActor);
|
|
|
|
mxShapeInfographicPartConcEllipse.prototype.cst = {PART_CONC_ELLIPSE : 'mxgraph.infographic.partConcEllipse'};
|
|
|
|
mxShapeInfographicPartConcEllipse.prototype.customProperties = [
|
|
{name:'startAngle', dispName:'Start Angle', min:0, max:1, defVal: 0.25},
|
|
{name:'endAngle', dispName:'End Angle', min:0, max:1, defVal: 0.1},
|
|
{name:'arcWidth', dispName:'Arc Width', min:0, max:1, defVal: 0.5}
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeInfographicPartConcEllipse.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 angDiff = endAngle - startAngle;
|
|
|
|
if (angDiff < 0)
|
|
{
|
|
angDiff = angDiff + Math.PI * 2;
|
|
}
|
|
else if (angDiff == Math.PI)
|
|
{
|
|
endAngle = endAngle + 0.00001;
|
|
}
|
|
|
|
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 bigArc = 0;
|
|
|
|
if (angDiff <= Math.PI)
|
|
{
|
|
bigArc = 1;
|
|
}
|
|
|
|
c.begin();
|
|
c.moveTo(rx, 0);
|
|
c.arcTo(rx, ry, 0, 0, 1, w, ry);
|
|
c.arcTo(rx, ry, 0, 0, 1, rx, h);
|
|
c.arcTo(rx, ry, 0, 0, 1, 0, ry);
|
|
c.arcTo(rx, ry, 0, 0, 1, rx, 0);
|
|
c.close();
|
|
c.moveTo(rx, h * 0.5 - ry2);
|
|
c.arcTo(rx2, ry2, 0, 0, 0, w * 0.5 - rx2, ry);
|
|
c.arcTo(rx2, ry2, 0, 0, 0, rx, h * 0.5 + ry2);
|
|
c.arcTo(rx2, ry2, 0, 0, 0, w * 0.5 + rx2, ry);
|
|
c.arcTo(rx2, ry2, 0, 0, 0, rx, h * 0.5 - ry2);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
|
|
c.setShadow(false);
|
|
c.setFillAlpha('0.2');
|
|
c.setFillColor('#ffffff');
|
|
|
|
c.begin();
|
|
c.moveTo(startX, startY);
|
|
c.arcTo(rx, ry, 0, bigArc, 0, endX, endY);
|
|
c.lineTo(innerEndX, innerEndY);
|
|
c.arcTo(rx2, ry2, 0, bigArc, 1, innerStartX, innerStartY);
|
|
c.close();
|
|
c.fill();
|
|
|
|
var rx = w * 0.5;
|
|
var ry = h * 0.5;
|
|
var rx2 = rx * arcWidth;
|
|
var ry2 = ry * arcWidth;
|
|
|
|
var rx3 = rx2 + (rx - rx2) * 0.25;
|
|
var ry3 = ry2 + (ry - ry2) * 0.25;
|
|
|
|
c.setFillColor('#000000');
|
|
|
|
c.begin();
|
|
c.moveTo(rx, h * 0.5 - ry2);
|
|
c.arcTo(rx2, ry2, 0, 0, 1, w * 0.5 + rx2, ry);
|
|
c.arcTo(rx2, ry2, 0, 0, 1, rx, h * 0.5 + ry2);
|
|
c.arcTo(rx2, ry2, 0, 0, 1, w * 0.5 - rx2, ry);
|
|
c.arcTo(rx2, ry2, 0, 0, 1, rx, h * 0.5 - ry2);
|
|
c.close();
|
|
c.moveTo(rx, h * 0.5 - ry3);
|
|
c.arcTo(rx3, ry3, 0, 0, 0, w * 0.5 - rx3, ry);
|
|
c.arcTo(rx3, ry3, 0, 0, 0, rx, h * 0.5 + ry3);
|
|
c.arcTo(rx3, ry3, 0, 0, 0, w * 0.5 + rx3, ry);
|
|
c.arcTo(rx3, ry3, 0, 0, 0, rx, h * 0.5 - ry3);
|
|
c.close();
|
|
c.fill();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeInfographicPartConcEllipse.prototype.cst.PART_CONC_ELLIPSE, mxShapeInfographicPartConcEllipse);
|
|
|
|
Graph.handleFactory[mxShapeInfographicPartConcEllipse.prototype.cst.PART_CONC_ELLIPSE] = 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;
|
|
};
|
|
|
|
mxShapeInfographicPartConcEllipse.prototype.getConstraints = function(style, w, h)
|
|
{
|
|
var constr = [];
|
|
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0.145, 0.145), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0.855, 0.145), 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));
|
|
|
|
return (constr);
|
|
};
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Banner Half Fold
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeInfographicBannerHalfFold(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.dx2 = 0.5;
|
|
this.notch = 0.5;
|
|
};
|
|
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
mxUtils.extend(mxShapeInfographicBannerHalfFold, mxActor);
|
|
|
|
mxShapeInfographicBannerHalfFold.prototype.cst = {BANNER_HALF_FOLD : 'mxgraph.infographic.bannerHalfFold'};
|
|
|
|
mxShapeInfographicBannerHalfFold.prototype.customProperties = [
|
|
{name:'dx', dispName:'Banner Width', min:0, defVal: 40},
|
|
{name:'dx2', dispName:'Spike Size', min:0, defVal: 20},
|
|
{name:'notch', dispName:'Notch Size', min:0, defVal: 15}
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeInfographicBannerHalfFold.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 - dx, parseFloat(mxUtils.getValue(this.style, 'dx2', this.dx2))));
|
|
var notch = Math.max(0, Math.min(h - dx, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));
|
|
|
|
c.begin();
|
|
c.moveTo(dx2, 0);
|
|
c.lineTo(w - dx, 0);
|
|
c.lineTo(w, dx);
|
|
c.lineTo(w, h);
|
|
c.lineTo(w - dx * 0.5, h - notch);
|
|
c.lineTo(w - dx, h);
|
|
c.lineTo(w - dx, dx);
|
|
c.lineTo(dx2, dx);
|
|
c.lineTo(0, dx * 0.5);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
|
|
c.setShadow(false);
|
|
c.setFillAlpha('0.2');
|
|
c.setFillColor('#000000');
|
|
c.begin();
|
|
c.moveTo(w - dx, dx);
|
|
c.lineTo(w, dx);
|
|
c.lineTo(w, h);
|
|
c.lineTo(w - dx * 0.5, h - notch);
|
|
c.lineTo(w - dx, h);
|
|
c.lineTo(w - dx, dx);
|
|
c.lineTo(0, dx);
|
|
c.close();
|
|
c.fill();
|
|
|
|
c.begin();
|
|
c.moveTo(dx2, 0);
|
|
c.lineTo(w - dx, 0);
|
|
c.lineTo(w, dx);
|
|
c.lineTo(w, h);
|
|
c.lineTo(w - dx * 0.5, h - notch);
|
|
c.lineTo(w - dx, h);
|
|
c.lineTo(w - dx, dx);
|
|
c.lineTo(dx2, dx);
|
|
c.lineTo(0, dx * 0.5);
|
|
c.close();
|
|
c.stroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeInfographicBannerHalfFold.prototype.cst.BANNER_HALF_FOLD, mxShapeInfographicBannerHalfFold);
|
|
|
|
Graph.handleFactory[mxShapeInfographicBannerHalfFold.prototype.cst.BANNER_HALF_FOLD] = 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 + bounds.width - dx, bounds.y + dx);
|
|
}, function(bounds, pt)
|
|
{
|
|
this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width, bounds.x + bounds.width - pt.x))) / 100;
|
|
})];
|
|
|
|
var handle2 = Graph.createHandle(state, ['notch'], function(bounds)
|
|
{
|
|
var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));
|
|
var notch = Math.max(0, Math.min(bounds.height - dx, parseFloat(mxUtils.getValue(this.state.style, 'notch', this.notch))));
|
|
|
|
return new mxPoint(bounds.x + bounds.width - dx * 0.5, bounds.y + bounds.height - notch);
|
|
}, function(bounds, pt)
|
|
{
|
|
this.state.style['notch'] = Math.round(100 * Math.max(0, Math.min(bounds.height, (bounds.height + bounds.y - pt.y)))) / 100;
|
|
});
|
|
|
|
handles.push(handle2);
|
|
|
|
var handle3 = Graph.createHandle(state, ['dx2'], function(bounds)
|
|
{
|
|
var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));
|
|
var dx2 = Math.max(0, Math.min(bounds.width - dx, parseFloat(mxUtils.getValue(this.state.style, 'dx2', this.dx2))));
|
|
|
|
return new mxPoint(bounds.x + dx2, bounds.y + dx);
|
|
}, function(bounds, pt)
|
|
{
|
|
var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));
|
|
|
|
this.state.style['dx2'] = Math.round(100 * Math.max(0, Math.min(bounds.width - dx, pt.x - bounds.x))) / 100;
|
|
});
|
|
|
|
handles.push(handle3);
|
|
|
|
return handles;
|
|
};
|
|
|
|
mxShapeInfographicBannerHalfFold.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 dx2 = Math.max(0, Math.min(w - dx, parseFloat(mxUtils.getValue(this.style, 'dx2', this.dx2))));
|
|
var notch = Math.max(0, Math.min(h - dx, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));
|
|
var w2 = w - dx - dx2;
|
|
var h2 = h - dx;
|
|
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dx * 0.5));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2, 0));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.25, 0));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.5, 0));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.75, 0));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx, 0));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx * 0.5, dx * 0.5));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dx));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dx + h2 * 0.25));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dx + h2 * 0.5));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dx + h2 * 0.75));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(1, 1), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx * 0.5, h - notch));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx, h));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(1, 1), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx, dx + h2 * 0.75));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx, dx + h2 * 0.5));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx, dx + h2 * 0.25));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx, dx));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.25, dx));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.5, dx));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.75, dx));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2, dx));
|
|
|
|
return (constr);
|
|
};
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Circular Dial
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeInfographicCircularDial(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(mxShapeInfographicCircularDial, mxActor);
|
|
|
|
mxShapeInfographicCircularDial.prototype.cst = {CIRCULAR_DIAL : 'mxgraph.infographic.circularDial'};
|
|
|
|
mxShapeInfographicCircularDial.prototype.customProperties = [
|
|
{name:'dy', dispName:'Hole Size', min:0, defVal: 15}
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeInfographicCircularDial.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var dy = Math.max(0, Math.min(h * 0.5 - 10, w * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
|
|
|
|
var rx = Math.max(0, Math.min(w * 0.5, h * 0.5 - 10));
|
|
var rx2 = rx - dy;
|
|
|
|
c.begin();
|
|
c.moveTo(w * 0.5 - rx, h);
|
|
c.lineTo(w * 0.5 - rx, rx);
|
|
c.arcTo(rx, rx, 0, 0, 1, w * 0.5, 0);
|
|
c.arcTo(rx, rx, 0, 0, 1, w * 0.5 + rx, rx);
|
|
c.lineTo(w * 0.5 + rx, h);
|
|
c.close();
|
|
c.moveTo(w * 0.5, dy);
|
|
c.arcTo(rx2, rx2, 0, 0, 0, w * 0.5 - rx2, rx);
|
|
c.arcTo(rx2, rx2, 0, 0, 0, w * 0.5, rx + rx2);
|
|
c.arcTo(rx2, rx2, 0, 0, 0, w * 0.5 + rx2, rx);
|
|
c.arcTo(rx2, rx2, 0, 0, 0, w * 0.5, dy);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
|
|
c.setShadow(false);
|
|
c.setFillAlpha('0.2');
|
|
c.setFillColor('#000000');
|
|
|
|
c.begin();
|
|
c.moveTo(w * 0.5 - rx, 2 * rx);
|
|
c.lineTo(w * 0.5 + rx, 2 * rx);
|
|
c.lineTo(w * 0.5 + rx, h);
|
|
c.lineTo(w * 0.5 - rx, h);
|
|
c.close();
|
|
c.fill();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeInfographicCircularDial.prototype.cst.CIRCULAR_DIAL, mxShapeInfographicCircularDial);
|
|
|
|
Graph.handleFactory[mxShapeInfographicCircularDial.prototype.cst.CIRCULAR_DIAL] = function(state)
|
|
{
|
|
var handles = [Graph.createHandle(state, ['dy'], function(bounds)
|
|
{
|
|
var dy = Math.max(0, Math.min(bounds.height / 2, bounds.width / 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, bounds.width / 2, pt.y - bounds.y))) / 100;
|
|
})];
|
|
|
|
return handles;
|
|
};
|
|
|
|
mxShapeInfographicCircularDial.prototype.getConstraints = function(style, w, h)
|
|
{
|
|
var constr = [];
|
|
var dy = Math.max(0, Math.min(h * 0.5 - 10, w * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
|
|
var rx = Math.max(0, Math.min(w * 0.5, h * 0.5 - 10));
|
|
var rx2 = rx - dy;
|
|
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 - rx, h));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 - rx, (rx + h) * 0.5));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 - rx, rx));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 - rx * 0.71, rx * 0.29));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5, 0));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 + rx * 0.71, rx * 0.29));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 + rx, rx));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 + rx, (rx + h) * 0.5));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 + rx, h));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 + rx * 0.5, h));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 - rx * 0.5, h));
|
|
|
|
return (constr);
|
|
};
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Simple ribbon
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeInfographicRibbonSimple(bounds, fill, stroke, strokewidth)
|
|
{
|
|
mxShape.call(this);
|
|
this.bounds = bounds;
|
|
this.fill = fill;
|
|
this.stroke = stroke;
|
|
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
|
|
this.notch1 = 0.5;
|
|
this.notch2 = 0.5;
|
|
};
|
|
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
mxUtils.extend(mxShapeInfographicRibbonSimple, mxActor);
|
|
|
|
mxShapeInfographicRibbonSimple.prototype.cst = {RIBBON_SIMPLE : 'mxgraph.infographic.ribbonSimple'};
|
|
|
|
mxShapeInfographicRibbonSimple.prototype.customProperties = [
|
|
{name:'notch1', dispName:'Notch Size', min:0, defVal: 20},
|
|
{name:'notch2', dispName:'Spike Size', min:0, defVal: 20}
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeInfographicRibbonSimple.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
var notch1 = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'notch1', this.notch2))));
|
|
var notch2 = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'notch2', this.notch2))));
|
|
|
|
c.begin();
|
|
c.moveTo(0, h);
|
|
c.lineTo(notch1, h * 0.5);
|
|
c.lineTo(0, 0);
|
|
c.lineTo(w - notch2, 0);
|
|
c.lineTo(w, h * 0.5);
|
|
c.lineTo(w - notch2, h);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeInfographicRibbonSimple.prototype.cst.RIBBON_SIMPLE, mxShapeInfographicRibbonSimple);
|
|
|
|
Graph.handleFactory[mxShapeInfographicRibbonSimple.prototype.cst.RIBBON_SIMPLE] = function(state)
|
|
{
|
|
var handles = [Graph.createHandle(state, ['notch1'], function(bounds)
|
|
{
|
|
var notch1 = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'notch1', this.notch1))));
|
|
|
|
return new mxPoint(bounds.x + notch1, bounds.y + bounds.height * 0.5);
|
|
}, function(bounds, pt)
|
|
{
|
|
this.state.style['notch1'] = Math.round(100 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 100;
|
|
})];
|
|
|
|
var handle2 = Graph.createHandle(state, ['notch2'], function(bounds)
|
|
{
|
|
var notch2 = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'notch2', this.notch2))));
|
|
|
|
return new mxPoint(bounds.x + bounds.width - notch2, bounds.y);
|
|
}, function(bounds, pt)
|
|
{
|
|
this.state.style['notch2'] = Math.round(100 * Math.max(0, Math.min(bounds.width, (bounds.width + bounds.x - pt.x)))) / 100;
|
|
});
|
|
|
|
handles.push(handle2);
|
|
|
|
return handles;
|
|
};
|
|
|
|
mxShapeInfographicRibbonSimple.prototype.getConstraints = function(style, w, h)
|
|
{
|
|
var constr = [];
|
|
var notch1 = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'notch1', this.notch2))));
|
|
var notch2 = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'notch2', this.notch2))));
|
|
var w2 = w - notch2;
|
|
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2 * 0.25, 0));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2 * 0.5, 0));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2 * 0.75, 0));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2, 0));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(1, 0.5), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2, h));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2 * 0.75, h));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2 * 0.5, h));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2 * 0.25, h));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 1), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, notch1, h * 0.5));
|
|
|
|
return (constr);
|
|
};
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Bar with callout
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeInfographicBarCallout(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;
|
|
};
|
|
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
mxUtils.extend(mxShapeInfographicBarCallout, mxActor);
|
|
|
|
mxShapeInfographicBarCallout.prototype.cst = {BAR_CALLOUT : 'mxgraph.infographic.barCallout'};
|
|
|
|
mxShapeInfographicBarCallout.prototype.customProperties = [
|
|
{name:'dx', dispName:'Callout Position', min:0, defVal: 100},
|
|
{name:'dy', dispName:'Callout Size', min:0, defVal: 30}
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeInfographicBarCallout.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, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
|
|
|
|
var x1 = Math.max(dx - dy * 0.35, 0);
|
|
var x2 = Math.min(dx + dy * 0.35, w);
|
|
|
|
c.begin();
|
|
c.moveTo(0, 0);
|
|
c.lineTo(w, 0);
|
|
c.lineTo(w, h - dy);
|
|
c.lineTo(x2, h - dy);
|
|
c.lineTo(dx, h);
|
|
c.lineTo(x1, h - dy);
|
|
c.lineTo(0, h - dy);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeInfographicBarCallout.prototype.cst.BAR_CALLOUT, mxShapeInfographicBarCallout);
|
|
|
|
mxShapeInfographicBarCallout.prototype.constraints = null;
|
|
|
|
Graph.handleFactory[mxShapeInfographicBarCallout.prototype.cst.BAR_CALLOUT] = 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, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));
|
|
|
|
return new mxPoint(bounds.x + dx, bounds.y + bounds.height - 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, bounds.y + bounds.height - pt.y))) / 100;
|
|
})];
|
|
|
|
return handles;
|
|
};
|
|
|
|
mxShapeInfographicBarCallout.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, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
|
|
var x1 = Math.max(dx - dy * 0.35, 0);
|
|
var x2 = Math.min(dx + dy * 0.35, w);
|
|
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, (h - dy) * 0.5));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h - dy));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0.75, 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, dx, h));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h - dy));
|
|
|
|
return (constr);
|
|
};
|
|
|
|
//**********************************************************************************************************************************************************
|
|
//Flag
|
|
//**********************************************************************************************************************************************************
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
function mxShapeInfographicFlag(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;
|
|
};
|
|
|
|
/**
|
|
* Extends mxShape.
|
|
*/
|
|
mxUtils.extend(mxShapeInfographicFlag, mxActor);
|
|
|
|
mxShapeInfographicFlag.prototype.cst = {FLAG : 'mxgraph.infographic.flag'};
|
|
|
|
mxShapeInfographicFlag.prototype.customProperties = [
|
|
{name:'dx', dispName:'Pole Width', min:0, defVal: 30},
|
|
{name:'dy', dispName:'Spike Size', min:0, defVal: 20}
|
|
];
|
|
|
|
/**
|
|
* Function: paintVertexShape
|
|
*
|
|
* Paints the vertex shape.
|
|
*/
|
|
mxShapeInfographicFlag.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, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
|
|
|
|
c.begin();
|
|
c.moveTo(0, 0);
|
|
c.lineTo(w, 0);
|
|
c.lineTo(w, h - dy);
|
|
c.lineTo(dx, h - dy);
|
|
c.lineTo(dx * 0.5, h);
|
|
c.lineTo(0, h - dy);
|
|
c.close();
|
|
c.fillAndStroke();
|
|
|
|
c.setShadow(false);
|
|
c.setFillAlpha('0.2');
|
|
c.setFillColor('#ffffff');
|
|
c.begin();
|
|
c.moveTo(0, 0);
|
|
c.lineTo(dx, 0);
|
|
c.lineTo(dx, h - dy);
|
|
c.lineTo(dx * 0.5, h);
|
|
c.lineTo(0, h - dy);
|
|
c.close();
|
|
c.fill();
|
|
};
|
|
|
|
mxCellRenderer.registerShape(mxShapeInfographicFlag.prototype.cst.FLAG, mxShapeInfographicFlag);
|
|
|
|
Graph.handleFactory[mxShapeInfographicFlag.prototype.cst.FLAG] = 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, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));
|
|
|
|
return new mxPoint(bounds.x + dx, bounds.y + bounds.height - 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, bounds.y + bounds.height - pt.y))) / 100;
|
|
})];
|
|
|
|
return handles;
|
|
};
|
|
|
|
mxShapeInfographicFlag.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, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
|
|
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, (h - dy) * 0.5));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h - dy));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h - dy));
|
|
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, w * 0.75, h - dy));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5, h - dy));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.25, h - dy));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx * 0.5, h));
|
|
constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx * 0.5, 0));
|
|
|
|
return (constr);
|
|
};
|
|
|