renderers/browser-run/frames/diagramsnet/vendor/assets/shapes/mxInfographic.js - main

main
diagramzip / renderers / browser-run / frames / diagramsnet / vendor / assets / shapes / mxInfographic.js
mxInfographic.js 93.9K wrap lines
1/**2 * Copyright (c) 2006-2018, JGraph Holdings Ltd3 */4//**********************************************************************************************************************************************************5//Numbered entry (vertical)6//**********************************************************************************************************************************************************7/**8* Extends mxShape.9*/10function mxShapeInfographicNumEntryVert(bounds, fill, stroke, strokewidth)11{12	mxShape.call(this);13	this.bounds = bounds;14	this.fill = fill;15	this.stroke = stroke;16	this.strokewidth = (strokewidth != null) ? strokewidth : 1;17	this.dy = 0.5;18};1920/**21* Extends mxShape.22*/23mxUtils.extend(mxShapeInfographicNumEntryVert, mxActor);2425mxShapeInfographicNumEntryVert.prototype.cst = {NUM_ENTRY_VERT : 'mxgraph.infographic.numberedEntryVert'};2627mxShapeInfographicNumEntryVert.prototype.customProperties = [28	{name:'dy', dispName:'Circle Size', min:0, defVal: 25}29];3031/**32* Function: paintVertexShape33* 34* Paints the vertex shape.35*/36mxShapeInfographicNumEntryVert.prototype.paintVertexShape = function(c, x, y, w, h)37{38	c.translate(x, y);3940	var dy = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));4142	var inset = 5;4344	var d = Math.min(dy, w - 2 * inset, h - inset);45	46	c.ellipse(w * 0.5 - d * 0.5, 0, d, d);47	c.fillAndStroke();48	49	c.begin();50	c.moveTo(0, d * 0.5);51	c.lineTo(w * 0.5 - d * 0.5 - inset, d * 0.5);52	c.arcTo(d * 0.5 + inset, d * 0.5 + inset, 0, 0, 0, w * 0.5 + d * 0.5 + inset, d * 0.5);53	c.lineTo(w, d * 0.5);54	c.lineTo(w, h);55	c.lineTo(0, h);56	c.close();57	c.fillAndStroke();58};5960mxCellRenderer.registerShape(mxShapeInfographicNumEntryVert.prototype.cst.NUM_ENTRY_VERT, mxShapeInfographicNumEntryVert);6162Graph.handleFactory[mxShapeInfographicNumEntryVert.prototype.cst.NUM_ENTRY_VERT] = function(state)63{64	var handles = [Graph.createHandle(state, ['dy'], function(bounds)65	{66		var dy = Math.max(0, Math.min(bounds.width, bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));6768		return new mxPoint(bounds.x + bounds.width / 2, bounds.y + dy);69	}, function(bounds, pt)70	{71		this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height, bounds.width, pt.y - bounds.y))) / 100;72	})];73			74	return handles;75};7677mxShapeInfographicNumEntryVert.prototype.getConstraints = function(style, w, h)78{79	var constr = [];80	var dy = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));81	var inset = 5;82	var d = Math.min(dy, w - 2 * inset, h - inset);83	84	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));85	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));86	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, d * 0.5));87	constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false, null, 0, d * 0.5));88	constr.push(new mxConnectionConstraint(new mxPoint(0, 0.5), false, null, 0, d * 0.25));89	constr.push(new mxConnectionConstraint(new mxPoint(1, 0.5), false, null, 0, d * 0.25));90	constr.push(new mxConnectionConstraint(new mxPoint(0, 1), false));91	constr.push(new mxConnectionConstraint(new mxPoint(1, 1), false));9293	return (constr);94};9596//**********************************************************************************************************************************************************97//Bending Arch98//**********************************************************************************************************************************************************99/**100* Extends mxShape.101*/102function mxShapeInfographicBendingArch(bounds, fill, stroke, strokewidth)103{104	mxShape.call(this);105	this.bounds = bounds;106	this.fill = fill;107	this.stroke = stroke;108	this.strokewidth = (strokewidth != null) ? strokewidth : 1;109	this.startAngle = 0.25;110	this.endAngle = 0.75;111	this.arcWidth = 0.5;112};113114/**115* Extends mxShape.116*/117mxUtils.extend(mxShapeInfographicBendingArch, mxActor);118119mxShapeInfographicBendingArch.prototype.cst = {BENDING_ARCH : 'mxgraph.infographic.bendingArch'};120121mxShapeInfographicBendingArch.prototype.customProperties = [122	{name:'startAngle', dispName:'Start Angle', min:0, max:1, defVal: 0.75},123	{name:'endAngle', dispName:'End Angle', min:0, max:1, defVal: 0.25},124	{name:'arcWidth', dispName:'Arc Width', min:0, max:1, defVal: 0.25}125];126127/**128* Function: paintVertexShape129* 130* Paints the vertex shape.131*/132mxShapeInfographicBendingArch.prototype.paintVertexShape = function(c, x, y, w, h)133{134	c.translate(x, y);135136	var startAngle = 2 * Math.PI * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'startAngle', this.startAngle))));137	var endAngle = 2 * Math.PI * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'endAngle', this.endAngle))));138	var arcWidth = 1 - Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'arcWidth', this.arcWidth))));139	var rx = w * 0.5;140	var ry = h * 0.5;141	var rx2 = rx * arcWidth;142	var ry2 = ry * arcWidth;143	144	var startX = rx + Math.sin(startAngle) * rx;145	var startY = ry - Math.cos(startAngle) * ry;146	var innerStartX = rx + Math.sin(startAngle) * rx2;147	var innerStartY = ry - Math.cos(startAngle) * ry2;148	var endX = rx + Math.sin(endAngle) * rx;149	var endY = ry - Math.cos(endAngle) * ry;150	var innerEndX = rx + Math.sin(endAngle) * rx2;151	var innerEndY = ry - Math.cos(endAngle) * ry2;152	153	var angDiff = endAngle - startAngle;154	155	if (angDiff < 0)156	{157		angDiff = angDiff + Math.PI * 2;158	}159		160	var bigArc = 0;161	162	if (angDiff > Math.PI)163	{164		bigArc = 1;165	}166167	var rx3 = rx2 - 5;168	var ry3 = ry2 - 5;169170	c.ellipse(w * 0.5 - rx3, h * 0.5 - ry3, 2 * rx3, 2 * ry3);171	c.fillAndStroke();172	173	c.begin();174	c.moveTo(startX, startY);175	c.arcTo(rx, ry, 0, bigArc, 1, endX, endY);176	c.lineTo(innerEndX, innerEndY);177	c.arcTo(rx2, ry2, 0, bigArc, 0, innerStartX, innerStartY);178	c.close();179	c.fillAndStroke();180};181182mxCellRenderer.registerShape(mxShapeInfographicBendingArch.prototype.cst.BENDING_ARCH, mxShapeInfographicBendingArch);183184mxShapeInfographicBendingArch.prototype.constraints = null;185186Graph.handleFactory[mxShapeInfographicBendingArch.prototype.cst.BENDING_ARCH] = function(state)187{188	var handles = [Graph.createHandle(state, ['startAngle'], function(bounds)189	{190		var startAngle = 2 * Math.PI * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.state.style, 'startAngle', this.startAngle))));191192		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);193	}, function(bounds, pt)194	{195		var handleX = Math.round(100 * Math.max(-1, Math.min(1, (pt.x - bounds.x - bounds.width * 0.5) / (bounds.width * 0.5)))) / 100;196		var handleY = -Math.round(100 * Math.max(-1, Math.min(1, (pt.y - bounds.y - bounds.height * 0.5) / (bounds.height * 0.5)))) / 100;197		198		var res =  0.5 * Math.atan2(handleX, handleY) / Math.PI;199		200		if (res < 0)201		{202			res = 1 + res;203		}204205		this.state.style['startAngle'] = res;206		207	})];208209	var handle2 = Graph.createHandle(state, ['endAngle'], function(bounds)210	{211		var endAngle = 2 * Math.PI * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.state.style, 'endAngle', this.endAngle))));212213		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);214	}, function(bounds, pt)215	{216		var handleX = Math.round(100 * Math.max(-1, Math.min(1, (pt.x - bounds.x - bounds.width * 0.5) / (bounds.width * 0.5)))) / 100;217		var handleY = -Math.round(100 * Math.max(-1, Math.min(1, (pt.y - bounds.y - bounds.height * 0.5) / (bounds.height * 0.5)))) / 100;218		219		var res =  0.5 * Math.atan2(handleX, handleY) / Math.PI;220		221		if (res < 0)222		{223			res = 1 + res;224		}225		226		this.state.style['endAngle'] = res;227	});228	229	handles.push(handle2);230	231	var handle3 = Graph.createHandle(state, ['arcWidth'], function(bounds)232	{233		var arcWidth = Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.state.style, 'arcWidth', this.arcWidth))));234235		return new mxPoint(bounds.x + bounds.width / 2, bounds.y + arcWidth * bounds.height * 0.5);236	}, function(bounds, pt)237	{238		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;239	});240			241	handles.push(handle3);242	243	return handles;244};245246//**********************************************************************************************************************************************************247//Parallelogram248//**********************************************************************************************************************************************************249/**250* Extends mxShape.251*/252function mxShapeInfographicParallelogram(bounds, fill, stroke, strokewidth)253{254	mxShape.call(this);255	this.bounds = bounds;256	this.fill = fill;257	this.stroke = stroke;258	this.strokewidth = (strokewidth != null) ? strokewidth : 1;259	this.dx = 10;260};261262/**263* Extends mxShape.264*/265mxUtils.extend(mxShapeInfographicParallelogram, mxActor);266267mxShapeInfographicParallelogram.prototype.cst = {PARALLELOGRAM : 'mxgraph.infographic.parallelogram'};268269mxShapeInfographicParallelogram.prototype.customProperties = [270	{name:'dx', dispName:'Angle', min:0, defVal: 15}271];272273/**274* Function: paintVertexShape275* 276* Paints the vertex shape.277*/278mxShapeInfographicParallelogram.prototype.paintVertexShape = function(c, x, y, w, h)279{280	c.translate(x, y);281282	var dx = Math.max(0, Math.min(w * 0.5, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));283284	c.begin();285	c.moveTo(0, h);286	c.lineTo(2 * dx, 0);287	c.lineTo(w, 0);288	c.lineTo(w - 2 * dx, h);289	c.close();290	c.fillAndStroke();291};292293mxCellRenderer.registerShape(mxShapeInfographicParallelogram.prototype.cst.PARALLELOGRAM, mxShapeInfographicParallelogram);294295Graph.handleFactory[mxShapeInfographicParallelogram.prototype.cst.PARALLELOGRAM] = function(state)296{297	var handles = [Graph.createHandle(state, ['dx'], function(bounds)298	{299		var dx = Math.max(0, Math.min(bounds.width / 2, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));300301		return new mxPoint(bounds.x + dx, bounds.y + bounds.height / 2);302	}, function(bounds, pt)303	{304		this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width / 2, pt.x - bounds.x))) / 100;305	})];306			307	return handles;308};309310mxShapeInfographicParallelogram.prototype.getConstraints = function(style, w, h)311{312	var constr = [];313	var dx = Math.max(0, Math.min(w * 0.5, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));314	var w2 = w - 2 * dx;315316	constr.push(new mxConnectionConstraint(new mxPoint(0, 1), false));317	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 2 * dx, 0));318	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 2 * dx + w2 * 0.5, 0));319	constr.push(new mxConnectionConstraint(new mxPoint(0, 0.5), false, null, dx, 0));320	constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false));321	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - 2 * dx, h));322	constr.push(new mxConnectionConstraint(new mxPoint(0, 0.5), false, null, w - dx, 0));323	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2 * 0.5, h));324325	return (constr);326};327328//**********************************************************************************************************************************************************329//Ribbon Rolled330//**********************************************************************************************************************************************************331/**332* Extends mxShape.333*/334function mxShapeInfographicRibbonRolled(bounds, fill, stroke, strokewidth)335{336	mxShape.call(this);337	this.bounds = bounds;338	this.fill = fill;339	this.stroke = stroke;340	this.strokewidth = (strokewidth != null) ? strokewidth : 1;341	this.dx = 185;342	this.dy = 15;343};344345/**346* Extends mxShape.347*/348mxUtils.extend(mxShapeInfographicRibbonRolled, mxActor);349350mxShapeInfographicRibbonRolled.prototype.cst = {RIBBON_ROLLED : 'mxgraph.infographic.ribbonRolled'};351352mxShapeInfographicRibbonRolled.prototype.customProperties = [353	{name:'dx', dispName:'Roll Length', min:0, defVal: 185},354	{name:'dy', dispName:'Ribbon Width', min:0, defVal: 15}355];356357/**358* Function: paintVertexShape359* 360* Paints the vertex shape.361*/362mxShapeInfographicRibbonRolled.prototype.paintVertexShape = function(c, x, y, w, h)363{364	c.translate(x, y);365366	var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));367	var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));368369	c.begin();370	c.moveTo(0, dy);371	c.lineTo(dx, 0);372	c.lineTo(dx, dy);373	c.lineTo(w, dy);374	c.lineTo(w, h - dy);375	c.lineTo(w - dx, h);376	c.lineTo(w - dx, h - dy);377	c.lineTo(0, h - dy);378	c.close();379	c.fillAndStroke();380	381	c.setShadow(false);382	c.setFillAlpha('0.2');383	c.setFillColor('#000000');384	c.begin();385	c.moveTo(0, dy);386	c.lineTo(dx, 0);387	c.lineTo(dx, dy);388	c.close();389	c.moveTo(w, h - dy);390	c.lineTo(w - dx, h);391	c.lineTo(w - dx, h - dy);392	c.close();393	c.fill();394	395	c.begin();396	c.moveTo(0, dy);397	c.lineTo(dx, 0);398	c.lineTo(dx, dy);399	c.lineTo(w, dy);400	c.lineTo(w, h - dy);401	c.lineTo(w - dx, h);402	c.lineTo(w - dx, h - dy);403	c.lineTo(0, h - dy);404	c.close();405	c.stroke();406	407};408409mxCellRenderer.registerShape(mxShapeInfographicRibbonRolled.prototype.cst.RIBBON_ROLLED, mxShapeInfographicRibbonRolled);410411Graph.handleFactory[mxShapeInfographicRibbonRolled.prototype.cst.RIBBON_ROLLED] = function(state)412{413	var handles = [Graph.createHandle(state, ['dx', 'dy'], function(bounds)414	{415		var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));416		var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));417418		return new mxPoint(bounds.x + dx, bounds.y + dy);419	}, function(bounds, pt)420	{421		this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 100;422		this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height / 2, pt.y - bounds.y))) / 100;423	})];424			425	return handles;426};427428mxShapeInfographicRibbonRolled.prototype.getConstraints = function(style, w, h)429{430	var constr = [];431	var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));432	var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));433	var h2 = h - dy;434	435	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dy));436	constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false, null, 0, dy));437	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false, null, 0, dy));438	constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false, null, 0, dy));439	constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false, null, 0, dy));440	constr.push(new mxConnectionConstraint(new mxPoint(1, 0.5), false));441	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h2));442	constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false, null, 0, h2));443	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false, null, 0, h2));444	constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false, null, 0, h2));445	constr.push(new mxConnectionConstraint(new mxPoint(0, 1), false, null, 0, -dy));446	constr.push(new mxConnectionConstraint(new mxPoint(0, 0.5), false));447448	return (constr);449};450451//**********************************************************************************************************************************************************452//Ribbon Double Folded453//**********************************************************************************************************************************************************454/**455* Extends mxShape.456*/457function mxShapeInfographicRibbonDoubleFolded(bounds, fill, stroke, strokewidth)458{459	mxShape.call(this);460	this.bounds = bounds;461	this.fill = fill;462	this.stroke = stroke;463	this.strokewidth = (strokewidth != null) ? strokewidth : 1;464	this.dx = 25;465	this.dy = 15;466};467468/**469* Extends mxShape.470*/471mxUtils.extend(mxShapeInfographicRibbonDoubleFolded, mxActor);472473mxShapeInfographicRibbonDoubleFolded.prototype.cst = {RIBBON_DOUBLE_FOLDED : 'mxgraph.infographic.ribbonDoubleFolded'};474475mxShapeInfographicRibbonDoubleFolded.prototype.customProperties = [476	{name:'dx', dispName:'Fold Length', min:0, defVal: 25},477	{name:'dy', dispName:'Ribbon Width', min:0, defVal: 15}478];479480/**481* Function: paintVertexShape482* 483* Paints the vertex shape.484*/485mxShapeInfographicRibbonDoubleFolded.prototype.paintVertexShape = function(c, x, y, w, h)486{487	c.translate(x, y);488489	var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));490	var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));491492	c.begin();493	c.moveTo(0, dy);494	c.lineTo(dx, 0);495	c.lineTo(dx, dy);496	c.lineTo(w, dy);497	c.lineTo(w, h - dy);498	c.lineTo(w - dx, h);499	c.lineTo(w - dx, h - dy);500	c.lineTo(0, h - dy);501	c.close();502	c.fillAndStroke();503	504	c.setShadow(false);505	c.setFillAlpha('0.2');506	c.setFillColor('#000000');507	c.begin();508	c.moveTo(0, dy);509	c.lineTo(dx, 0);510	c.lineTo(dx, h - 2 * dy);511	c.lineTo(0, h - dy);512	c.close();513	c.moveTo(w, h - dy);514	c.lineTo(w - dx, h);515	c.lineTo(w - dx, h - dy);516	c.close();517	c.fill();518	519	c.begin();520	c.moveTo(0, dy);521	c.lineTo(dx, 0);522	c.lineTo(dx, dy);523	c.lineTo(w, dy);524	c.lineTo(w, h - dy);525	c.lineTo(w - dx, h);526	c.lineTo(w - dx, h - dy);527	c.lineTo(0, h - dy);528	c.close();529	c.stroke();530};531532mxCellRenderer.registerShape(mxShapeInfographicRibbonDoubleFolded.prototype.cst.RIBBON_DOUBLE_FOLDED, mxShapeInfographicRibbonDoubleFolded);533534Graph.handleFactory[mxShapeInfographicRibbonDoubleFolded.prototype.cst.RIBBON_DOUBLE_FOLDED] = function(state)535{536	var handles = [Graph.createHandle(state, ['dx', 'dy'], function(bounds)537	{538		var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));539		var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));540541		return new mxPoint(bounds.x + dx, bounds.y + dy);542	}, function(bounds, pt)543	{544		this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 100;545		this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height / 2, pt.y - bounds.y))) / 100;546	})];547			548	return handles;549};550551mxShapeInfographicRibbonDoubleFolded.prototype.getConstraints = function(style, w, h)552{553	var constr = [];554	var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));555	var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));556557	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dy));558	constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false, null, 0, dy));559	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false, null, 0, dy));560	constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false, null, 0, dy));561	constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false, null, 0, dy));562	constr.push(new mxConnectionConstraint(new mxPoint(1, 0.5), false));563	constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false, null, 0, h - dy));564	constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false, null, 0, h - dy));565	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false, null, 0, h - dy));566	constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false, null, 0, h - dy));567	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h - dy));568	constr.push(new mxConnectionConstraint(new mxPoint(0, 0.5), false));569570	return (constr);571};572573//**********************************************************************************************************************************************************574//Ribbon Front Folded575//**********************************************************************************************************************************************************576/**577* Extends mxShape.578*/579function mxShapeInfographicRibbonFrontFolded(bounds, fill, stroke, strokewidth)580{581	mxShape.call(this);582	this.bounds = bounds;583	this.fill = fill;584	this.stroke = stroke;585	this.strokewidth = (strokewidth != null) ? strokewidth : 1;586	this.dx = 0.5;587	this.dy = 0.5;588	this.notch = 0.5;589};590591/**592* Extends mxShape.593*/594mxUtils.extend(mxShapeInfographicRibbonFrontFolded, mxActor);595596mxShapeInfographicRibbonFrontFolded.prototype.cst = {RIBBON_FRONT_FOLDED : 'mxgraph.infographic.ribbonFrontFolded'};597598mxShapeInfographicRibbonFrontFolded.prototype.customProperties = [599	{name:'dx', dispName:'Fold Length', min:0, defVal: 25},600	{name:'dy', dispName:'Ribbon Width', min:0, defVal: 15},601	{name:'notch', dispName:'Notch', min:0, defVal: 15}602];603604/**605* Function: paintVertexShape606* 607* Paints the vertex shape.608*/609mxShapeInfographicRibbonFrontFolded.prototype.paintVertexShape = function(c, x, y, w, h)610{611	c.translate(x, y);612613	var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));614	var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));615	var notch = Math.max(0, Math.min(w - dx, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));616617	c.begin();618	c.moveTo(0, dy);619	c.lineTo(dx, 0);620	c.lineTo(dx, dy);621	c.lineTo(w, dy);622	c.lineTo(w - notch, (h - dy) / 2 + dy);623	c.lineTo(w, h);624	c.lineTo(0, h);625	c.close();626	c.fillAndStroke();627	628	c.setShadow(false);629	c.setFillAlpha('0.2');630	c.setFillColor('#000000');631	c.begin();632	c.moveTo(0, dy);633	c.lineTo(dx, 0);634	c.lineTo(dx, h - dy);635	c.lineTo(0, h);636	c.close();637	c.fill();638	639	c.begin();640	c.moveTo(0, dy);641	c.lineTo(dx, 0);642	c.lineTo(dx, dy);643	c.lineTo(w, dy);644	c.lineTo(w - notch, (h - dy) / 2 + dy);645	c.lineTo(w, h);646	c.lineTo(0, h);647	c.close();648	c.stroke();649};650651mxCellRenderer.registerShape(mxShapeInfographicRibbonFrontFolded.prototype.cst.RIBBON_FRONT_FOLDED, mxShapeInfographicRibbonFrontFolded);652653Graph.handleFactory[mxShapeInfographicRibbonFrontFolded.prototype.cst.RIBBON_FRONT_FOLDED] = function(state)654{655	var handles = [Graph.createHandle(state, ['dx', 'dy'], function(bounds)656	{657		var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));658		var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));659660		return new mxPoint(bounds.x + dx, bounds.y + dy);661	}, function(bounds, pt)662	{663		this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 100;664		this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height / 2, pt.y - bounds.y))) / 100;665	})];666667	var handle2 = Graph.createHandle(state, ['notch'], function(bounds)668	{669		var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));670		var notch = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'notch', this.notch))));671672		return new mxPoint(bounds.x + bounds.width - notch, bounds.y + dy + (bounds.height - dy) * 0.5);673	}, function(bounds, pt)674	{675		this.state.style['notch'] = Math.round(100 * Math.max(0, Math.min(bounds.width, (bounds.width + bounds.x - pt.x)))) / 100;676	});677			678	handles.push(handle2);679680	return handles;681};682683mxShapeInfographicRibbonFrontFolded.prototype.getConstraints = function(style, w, h)684{685	var constr = [];686	var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));687	var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));688	var notch = Math.max(0, Math.min(w - dx, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));689690	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dy));691	constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false, null, 0, dy));692	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false, null, 0, dy));693	constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false, null, 0, dy));694	constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false, null, 0, dy));695	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - notch, (h + dy) * 0.5));696	constr.push(new mxConnectionConstraint(new mxPoint(1, 1), false));697	constr.push(new mxConnectionConstraint(new mxPoint(0.75, 1), false));698	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));699	constr.push(new mxConnectionConstraint(new mxPoint(0.25, 1), false));700	constr.push(new mxConnectionConstraint(new mxPoint(0, 1), false));701	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, (h + dy) * 0.5));702703	return (constr);704};705706//**********************************************************************************************************************************************************707//Ribbon Back Folded708//**********************************************************************************************************************************************************709/**710* Extends mxShape.711*/712function mxShapeInfographicRibbonBackFolded(bounds, fill, stroke, strokewidth)713{714	mxShape.call(this);715	this.bounds = bounds;716	this.fill = fill;717	this.stroke = stroke;718	this.strokewidth = (strokewidth != null) ? strokewidth : 1;719	this.dx = 0.5;720	this.dy = 0.5;721	this.notch = 0.5;722};723724/**725* Extends mxShape.726*/727mxUtils.extend(mxShapeInfographicRibbonBackFolded, mxActor);728729mxShapeInfographicRibbonBackFolded.prototype.cst = {RIBBON_BACK_FOLDED : 'mxgraph.infographic.ribbonBackFolded'};730731mxShapeInfographicRibbonBackFolded.prototype.customProperties = [732	{name:'dx', dispName:'Fold Length', min:0, defVal: 25},733	{name:'dy', dispName:'Ribbon Width', min:0, defVal: 15},734	{name:'notch', dispName:'Notch', min:0, defVal: 15}735];736737/**738* Function: paintVertexShape739* 740* Paints the vertex shape.741*/742mxShapeInfographicRibbonBackFolded.prototype.paintVertexShape = function(c, x, y, w, h)743{744	c.translate(x, y);745746	var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));747	var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));748	var notch = Math.max(0, Math.min(w - dx, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));749750	c.begin();751	c.moveTo(0, dy);752	c.lineTo(dx, 0);753	c.lineTo(dx, dy);754	c.lineTo(w, dy);755	c.lineTo(w - notch, (h - dy) / 2 + dy);756	c.lineTo(w, h);757	c.lineTo(0, h);758	c.close();759	c.fillAndStroke();760	761	c.setShadow(false);762	c.setFillAlpha('0.2');763	c.setFillColor('#000000');764	c.begin();765	c.moveTo(0, dy);766	c.lineTo(dx, 0);767	c.lineTo(dx, dy);768	c.close();769	c.fill();770	771	c.begin();772	c.moveTo(0, dy);773	c.lineTo(dx, 0);774	c.lineTo(dx, dy);775	c.lineTo(w, dy);776	c.lineTo(w - notch, (h - dy) / 2 + dy);777	c.lineTo(w, h);778	c.lineTo(0, h);779	c.close();780	c.stroke();781};782783mxCellRenderer.registerShape(mxShapeInfographicRibbonBackFolded.prototype.cst.RIBBON_BACK_FOLDED, mxShapeInfographicRibbonBackFolded);784785Graph.handleFactory[mxShapeInfographicRibbonBackFolded.prototype.cst.RIBBON_BACK_FOLDED] = function(state)786{787	var handles = [Graph.createHandle(state, ['dx', 'dy'], function(bounds)788	{789		var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));790		var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));791792		return new mxPoint(bounds.x + dx, bounds.y + dy);793	}, function(bounds, pt)794	{795		this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 100;796		this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height / 2, pt.y - bounds.y))) / 100;797	})];798799	var handle2 = Graph.createHandle(state, ['notch'], function(bounds)800	{801		var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));802		var notch = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'notch', this.notch))));803804		return new mxPoint(bounds.x + bounds.width - notch, bounds.y + dy + (bounds.height - dy) * 0.5);805	}, function(bounds, pt)806	{807		this.state.style['notch'] = Math.round(100 * Math.max(0, Math.min(bounds.width, (bounds.width + bounds.x - pt.x)))) / 100;808	});809			810	handles.push(handle2);811	812	return handles;813};814815mxShapeInfographicRibbonBackFolded.prototype.getConstraints = function(style, w, h)816{817	var constr = [];818	var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));819	var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));820	var notch = Math.max(0, Math.min(w - dx, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));821822	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dy));823	constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false, null, 0, dy));824	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false, null, 0, dy));825	constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false, null, 0, dy));826	constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false, null, 0, dy));827	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - notch, (h + dy) * 0.5));828	constr.push(new mxConnectionConstraint(new mxPoint(1, 1), false));829	constr.push(new mxConnectionConstraint(new mxPoint(0.75, 1), false));830	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));831	constr.push(new mxConnectionConstraint(new mxPoint(0.25, 1), false));832	constr.push(new mxConnectionConstraint(new mxPoint(0, 1), false));833	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, (h + dy) * 0.5));834835	return (constr);836};837838//**********************************************************************************************************************************************************839//Banner840//**********************************************************************************************************************************************************841/**842* Extends mxShape.843*/844function mxShapeInfographicBanner(bounds, fill, stroke, strokewidth)845{846	mxShape.call(this);847	this.bounds = bounds;848	this.fill = fill;849	this.stroke = stroke;850	this.strokewidth = (strokewidth != null) ? strokewidth : 1;851	this.dx = 0.5;852	this.dy = 0.5;853	this.notch = 0.5;854};855856/**857* Extends mxShape.858*/859mxUtils.extend(mxShapeInfographicBanner, mxActor);860861mxShapeInfographicBanner.prototype.cst = {BANNER : 'mxgraph.infographic.banner'};862863mxShapeInfographicBanner.prototype.customProperties = [864	{name:'dx', dispName:'Fold Length', min:0, defVal: 25},865	{name:'dy', dispName:'Ribbon Width', min:0, defVal: 15},866	{name:'notch', dispName:'Notch', min:0, defVal: 15}867];868869/**870* Function: paintVertexShape871* 872* Paints the vertex shape.873*/874mxShapeInfographicBanner.prototype.paintVertexShape = function(c, x, y, w, h)875{876	c.translate(x, y);877878	var dx = Math.max(0, Math.min(w / 2, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));879	var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));880	var notch = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));881882	dx = Math.min(w / 2 - 2 * dy, dx);883	884	notch = Math.min(dx, notch);885	886	c.begin();887	c.moveTo(0, dy);888	c.lineTo(dx, dy);889	c.lineTo(dx, 0);890	c.lineTo(w - dx, 0);891	c.lineTo(w - dx, dy);892	c.lineTo(w, dy);893	c.lineTo(w - notch, (h - dy) * 0.5 + dy);894	c.lineTo(w, h);895	c.lineTo(w - dx - 2 * dy, h);896	c.lineTo(w - dx - 2 * dy, h - dy);897	c.lineTo(dx + 2 * dy, h - dy);898	c.lineTo(dx + 2 * dy, h);899	c.lineTo(0, h);900	c.lineTo(notch, (h - dy) * 0.5 + dy);901	c.close();902	c.fillAndStroke();903	904	c.setShadow(false);905	c.setFillAlpha('0.2');906	c.setFillColor('#000000');907	c.begin();908	c.moveTo(0,dy);909	c.lineTo(dx, dy);910	c.lineTo(dx, h - dy);911	c.lineTo(dx + 2 * dy, h);912	c.lineTo(0, h);913	c.lineTo(notch, (h - dy) * 0.5 + dy);914	c.close();915	c.moveTo(w,dy);916	c.lineTo(w - dx, dy);917	c.lineTo(w - dx, h - dy);918	c.lineTo(w - dx - 2 * dy, h);919	c.lineTo(w, h);920	c.lineTo(w - notch, (h - dy) * 0.5 + dy);921	c.close();922	c.fill();923	924	c.setFillAlpha('0.4');925	c.begin();926	c.moveTo(dx, h - dy);927	c.lineTo(dx + 2 * dy, h - dy);928	c.lineTo(dx + 2 * dy, h);929	c.close();930	c.moveTo(w - dx, h - dy);931	c.lineTo(w - dx - 2 * dy, h - dy);932	c.lineTo(w - dx - 2 * dy, h);933	c.close();934	c.fill();935};936937mxCellRenderer.registerShape(mxShapeInfographicBanner.prototype.cst.BANNER, mxShapeInfographicBanner);938939Graph.handleFactory[mxShapeInfographicBanner.prototype.cst.BANNER] = function(state)940{941	var handles = [Graph.createHandle(state, ['dx', 'dy'], function(bounds)942	{943		var dx = Math.max(0, Math.min(bounds.width / 2, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));944		var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));945946		return new mxPoint(bounds.x + bounds.width - dx, bounds.y + dy);947	}, function(bounds, pt)948	{949		this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width / 2, bounds.x + bounds.width - pt.x))) / 100;950		this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height / 2, pt.y - bounds.y))) / 100;951	})];952			953	var handle2 = Graph.createHandle(state, ['notch'], function(bounds)954	{955		var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));956		var dx = Math.max(0, Math.min(bounds.width / 2, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));957		var notch = Math.max(0, Math.min(dx, parseFloat(mxUtils.getValue(this.state.style, 'notch', this.notch))));958959		return new mxPoint(bounds.x + bounds.width - notch, bounds.y + dy + (bounds.height - dy) * 0.5);960	}, function(bounds, pt)961	{962		this.state.style['notch'] = Math.round(100 * Math.max(0, Math.min(bounds.width, (bounds.width + bounds.x - pt.x)))) / 100;963	});964			965	handles.push(handle2);966	967	return handles;968};969970mxShapeInfographicBanner.prototype.getConstraints = function(style, w, h)971{972	var constr = [];973	var dx = Math.max(0, Math.min(w / 2, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));974	var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));975	var notch = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));976	dx = Math.min(w / 2 - 2 * dy, dx);977	notch = Math.min(dx, notch);978	var w2 = w - 2 * dx;979980	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx, 0));981	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2 * 0.25, 0));982	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2 * 0.5, 0));983	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2 * 0.75, 0));984	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2, 0));985	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2, (h - dy) * 0.5));986	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2, h - dy));987	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2 * 0.75, h - dy));988	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2 * 0.5, h - dy));989	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx + w2 * 0.25, h - dy));990	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx, h - dy));991	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx, (h - dy) * 0.5));992	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, notch, (h + dy) * 0.5));993	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - notch, (h + dy) * 0.5));994995	return (constr);996};997998//**********************************************************************************************************************************************************999//Circular Callout1000//**********************************************************************************************************************************************************1001/**1002* Extends mxShape.1003*/1004function mxShapeInfographicCircularCallout(bounds, fill, stroke, strokewidth)1005{1006	mxShape.call(this);1007	this.bounds = bounds;1008	this.fill = fill;1009	this.stroke = stroke;1010	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1011	this.dy = 0.5;1012};10131014/**1015* Extends mxShape.1016*/1017mxUtils.extend(mxShapeInfographicCircularCallout, mxActor);10181019mxShapeInfographicCircularCallout.prototype.cst = {CIRCULAR_CALLOUT : 'mxgraph.infographic.circularCallout'};10201021mxShapeInfographicCircularCallout.prototype.customProperties = [1022	{name:'dy', dispName:'Ribbon Width', min:0, defVal: 15}1023];10241025/**1026* Function: paintVertexShape1027* 1028* Paints the vertex shape.1029*/1030mxShapeInfographicCircularCallout.prototype.paintVertexShape = function(c, x, y, w, h)1031{1032	c.translate(x, y);10331034	var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));1035	1036	var rx = Math.max(0, Math.min(w * 0.5, w * 0.5 - dy));1037	var ry = Math.max(0, Math.min(h * 0.5, h * 0.5 - dy));1038	1039	c.begin();1040	c.moveTo(w, h * 0.5);1041	c.arcTo(w * 0.5, h * 0.5, 0, 0, 1, w * 0.5, h);1042	c.arcTo(w * 0.5, h * 0.5, 0, 0, 1, 0, h * 0.5);1043	c.arcTo(w * 0.5, h * 0.5, 0, 0, 1, w * 0.5, 0);1044	c.lineTo(w, 0);1045	c.close();1046	c.moveTo(w * 0.5, dy);1047	c.arcTo(rx, ry, 0, 0, 0, w * 0.5 - rx, h * 0.5);1048	c.arcTo(rx, ry, 0, 0, 0, w * 0.5, h * 0.5 + ry);1049	c.arcTo(rx, ry, 0, 0, 0, w * 0.5 + rx, h * 0.5);1050	c.arcTo(rx, ry, 0, 0, 0, w * 0.5, h * 0.5 - ry);1051	c.close();1052	c.fillAndStroke();1053};10541055mxCellRenderer.registerShape(mxShapeInfographicCircularCallout.prototype.cst.CIRCULAR_CALLOUT, mxShapeInfographicCircularCallout);10561057Graph.handleFactory[mxShapeInfographicCircularCallout.prototype.cst.CIRCULAR_CALLOUT] = function(state)1058{1059	var handles = [Graph.createHandle(state, ['dy'], function(bounds)1060	{1061		var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));10621063		return new mxPoint(bounds.x + bounds.width * 0.5, bounds.y + dy);1064	}, function(bounds, pt)1065	{1066		this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height / 2, pt.y - bounds.y))) / 100;1067	})];1068			1069	return handles;1070};10711072mxShapeInfographicCircularCallout.prototype.getConstraints = function(style, w, h)1073{1074	var constr = [];1075	var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));1076	var rx = Math.max(0, Math.min(w * 0.5, w * 0.5 - dy));1077	var ry = Math.max(0, Math.min(h * 0.5, h * 0.5 - dy));1078	1079	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));1080	constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false));1081	constr.push(new mxConnectionConstraint(new mxPoint(1, 0.5), false));1082	constr.push(new mxConnectionConstraint(new mxPoint(0.855, 0.855), false));1083	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));1084	constr.push(new mxConnectionConstraint(new mxPoint(0.145, 0.855), false));1085	constr.push(new mxConnectionConstraint(new mxPoint(0, 0.5), false));1086	constr.push(new mxConnectionConstraint(new mxPoint(0.145, 0.145), false));10871088	return (constr);1089};10901091//**********************************************************************************************************************************************************1092//Shaded triangle1093//**********************************************************************************************************************************************************1094/**1095* Extends mxShape.1096*/1097function mxShapeInfographicShadedTriangle(bounds, fill, stroke, strokewidth)1098{1099	mxShape.call(this);1100	this.bounds = bounds;1101	this.fill = fill;1102	this.stroke = stroke;1103	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1104};11051106/**1107* Extends mxShape.1108*/1109mxUtils.extend(mxShapeInfographicShadedTriangle, mxActor);11101111mxShapeInfographicShadedTriangle.prototype.cst = {SHADED_TRIANGLE : 'mxgraph.infographic.shadedTriangle'};11121113/**1114* Function: paintVertexShape1115* 1116* Paints the vertex shape.1117*/1118mxShapeInfographicShadedTriangle.prototype.paintVertexShape = function(c, x, y, w, h)1119{1120	c.translate(x, y);11211122	c.begin();1123	c.moveTo(0, h);1124	c.lineTo(w * 0.5, 0);1125	c.lineTo(w, h);1126	c.close();1127	c.fillAndStroke();1128	1129	c.setShadow(false);1130	1131	c.setFillColor('#ffffff');1132	c.setFillAlpha('0.2');1133	1134	c.begin();1135	c.moveTo(0, h);1136	c.lineTo(w * 0.5, 0);1137	c.lineTo(w * 0.5, h * 0.67);1138	c.close();1139	c.fill();1140	1141	c.setFillColor('#000000');11421143	c.begin();1144	c.moveTo(w, h);1145	c.lineTo(w * 0.5, h * 0.67);1146	c.lineTo(w * 0.5, 0);1147	c.close();1148	c.fill();1149	1150	c.begin();1151	c.moveTo(0, h);1152	c.lineTo(w * 0.5, 0);1153	c.lineTo(w, h);1154	c.close();1155	c.stroke();1156};11571158mxCellRenderer.registerShape(mxShapeInfographicShadedTriangle.prototype.cst.SHADED_TRIANGLE, mxShapeInfographicShadedTriangle);11591160mxShapeInfographicShadedTriangle.prototype.getConstraints = function(style, w, h)1161{1162	var constr = [];11631164	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));1165	constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0.5), false));1166	constr.push(new mxConnectionConstraint(new mxPoint(1, 1), false));1167	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));1168	constr.push(new mxConnectionConstraint(new mxPoint(0, 1), false));1169	constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0.5), false));11701171	return (constr);1172};11731174//**********************************************************************************************************************************************************1175//Shaded pyramid1176//**********************************************************************************************************************************************************1177/**1178* Extends mxShape.1179*/1180function mxShapeInfographicShadedPyramid(bounds, fill, stroke, strokewidth)1181{1182	mxShape.call(this);1183	this.bounds = bounds;1184	this.fill = fill;1185	this.stroke = stroke;1186	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1187};11881189/**1190* Extends mxShape.1191*/1192mxUtils.extend(mxShapeInfographicShadedPyramid, mxActor);11931194mxShapeInfographicShadedPyramid.prototype.cst = {SHADED_PYRAMID : 'mxgraph.infographic.shadedPyramid'};11951196/**1197* Function: paintVertexShape1198* 1199* Paints the vertex shape.1200*/1201mxShapeInfographicShadedPyramid.prototype.paintVertexShape = function(c, x, y, w, h)1202{1203	c.translate(x, y);12041205	var h1 = Math.max(h - w * 0.3, 0);1206	c.begin();1207	c.moveTo(0, h1);1208	c.lineTo(w * 0.5, 0);1209	c.lineTo(w, h1);1210	c.lineTo(w * 0.5, h);1211	c.close();1212	c.fillAndStroke();1213	1214	c.setShadow(false);1215	1216	c.setFillColor('#ffffff');1217	c.setFillAlpha('0.2');1218	1219	c.begin();1220	c.moveTo(0, h1);1221	c.lineTo(w * 0.5, 0);1222	c.lineTo(w * 0.5, h);1223	c.close();1224	c.fill();1225	1226	c.setFillColor('#000000');12271228	c.begin();1229	c.moveTo(w, h1);1230	c.lineTo(w * 0.5, h);1231	c.lineTo(w * 0.5, 0);1232	c.close();1233	c.fill();1234	1235	c.begin();1236	c.moveTo(0, h1);1237	c.lineTo(w * 0.5, 0);1238	c.lineTo(w, h1);1239	c.lineTo(w * 0.5, h);1240	c.close();1241	c.stroke();1242};12431244mxCellRenderer.registerShape(mxShapeInfographicShadedPyramid.prototype.cst.SHADED_PYRAMID, mxShapeInfographicShadedPyramid);12451246mxShapeInfographicShadedPyramid.prototype.getConstraints = function(style, w, h)1247{1248	var constr = [];1249	var h1 = Math.max(h - w * 0.3, 0);1250	1251	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));1252	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.75, h1 * 0.5));1253	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h1));1254	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.75, (h + h1) * 0.5));1255	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5, h));1256	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.25, (h + h1) * 0.5));1257	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h1));1258	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.25, h1 * 0.5));12591260	return (constr);1261};12621263//**********************************************************************************************************************************************************1264//Pyramid step1265//**********************************************************************************************************************************************************1266/**1267* Extends mxShape.1268*/1269function mxShapeInfographicPyramidStep(bounds, fill, stroke, strokewidth)1270{1271	mxShape.call(this);1272	this.bounds = bounds;1273	this.fill = fill;1274	this.stroke = stroke;1275	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1276};12771278/**1279* Extends mxShape.1280*/1281mxUtils.extend(mxShapeInfographicPyramidStep, mxActor);12821283mxShapeInfographicPyramidStep.prototype.cst = {PYRAMID_STEP : 'mxgraph.infographic.pyramidStep'};12841285/**1286* Function: paintVertexShape1287* 1288* Paints the vertex shape.1289*/1290mxShapeInfographicPyramidStep.prototype.paintVertexShape = function(c, x, y, w, h)1291{1292	c.translate(x, y);12931294	var h1 = Math.max(w * 0.1, 0);1295	c.begin();1296	c.moveTo(0, h1);1297	c.lineTo(w * 0.5, 0);1298	c.lineTo(w, h1);1299	c.lineTo(w, h);1300	c.lineTo(0, h);1301	c.close();1302	c.fillAndStroke();1303	1304	c.setShadow(false);1305	1306	c.setFillColor('#ffffff');1307	c.setFillAlpha('0.2');1308	1309	c.begin();1310	c.moveTo(0, h1);1311	c.lineTo(w * 0.5, 0);1312	c.lineTo(w * 0.5, h);1313	c.lineTo(0, h);1314	c.close();1315	c.fill();1316	1317	c.setFillColor('#000000');13181319	c.begin();1320	c.moveTo(w, h1);1321	c.lineTo(w, h);1322	c.lineTo(w * 0.5, h);1323	c.lineTo(w * 0.5, 0);1324	c.close();1325	c.fill();1326	1327	c.begin();1328	c.moveTo(0, h1);1329	c.lineTo(w * 0.5, 0);1330	c.lineTo(w, h1);1331	c.lineTo(w, h);1332	c.lineTo(0, h);1333	c.close();1334	c.stroke();1335};13361337mxCellRenderer.registerShape(mxShapeInfographicPyramidStep.prototype.cst.PYRAMID_STEP, mxShapeInfographicPyramidStep);13381339mxShapeInfographicPyramidStep.prototype.getConstraints = function(style, w, h)1340{1341	var constr = [];1342	var h1 = Math.max(w * 0.1, 0);1343	1344	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));1345	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.75, h1 * 0.5));1346	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h1));1347	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h1 + (h - h1) * 0.25));1348	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h1 + (h - h1) * 0.5));1349	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h1 + (h - h1) * 0.75));1350	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h));1351	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.75, h));1352	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5, h));1353	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.25, h));1354	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h));1355	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h1 + (h - h1) * 0.75));1356	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h1 + (h - h1) * 0.5));1357	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h1 + (h - h1) * 0.25));1358	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.25, h1 * 0.5));1359	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h1));1360	return (constr);1361};13621363//**********************************************************************************************************************************************************1364//Cylinder1365//**********************************************************************************************************************************************************1366/**1367* Extends mxShape.1368*/1369function mxShapeInfographicCylinder(bounds, fill, stroke, strokewidth)1370{1371	mxShape.call(this);1372	this.bounds = bounds;1373	this.fill = fill;1374	this.stroke = stroke;1375	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1376};13771378/**1379* Extends mxShape.1380*/1381mxUtils.extend(mxShapeInfographicCylinder, mxActor);13821383mxShapeInfographicCylinder.prototype.cst = {CYLINDER : 'mxgraph.infographic.cylinder'};13841385/**1386* Function: paintVertexShape1387* 1388* Paints the vertex shape.1389*/1390mxShapeInfographicCylinder.prototype.paintVertexShape = function(c, x, y, w, h)1391{1392	c.translate(x, y);1393	1394	var dy = 20;1395	var rx = w * 0.5;1396	var ry = dy * 0.5;1397	1398	c.begin();1399	c.moveTo(0, dy * 0.5);1400	c.arcTo(rx, ry, 0, 0, 1, w, ry);1401	c.lineTo(w, h - ry);1402	c.arcTo(rx, ry, 0, 0, 1, 0, h - ry);1403	c.close();1404	c.fillAndStroke();1405	1406	c.setShadow(false);1407	c.setGradient('#000000', '#ffffff', 0, 0, w, h, mxConstants.DIRECTION_EAST, 0.4, 0.4);1408	1409	c.begin();1410	c.moveTo(0, dy * 0.5);1411	c.arcTo(rx, ry, 0, 0, 0, w, ry);1412	c.lineTo(w, h - ry);1413	c.arcTo(rx, ry, 0, 0, 1, 0, h - ry);1414	c.close();1415	c.fill();14161417	c.begin();1418	c.moveTo(0, dy * 0.5);1419	c.arcTo(rx, ry, 0, 0, 1, w, ry);1420	c.lineTo(w, h - ry);1421	c.arcTo(rx, ry, 0, 0, 1, 0, h - ry);1422	c.close();1423	c.stroke();1424};14251426mxCellRenderer.registerShape(mxShapeInfographicCylinder.prototype.cst.CYLINDER, mxShapeInfographicCylinder);14271428mxShapeInfographicCylinder.prototype.getConstraints = function(style, w, h)1429{1430	var constr = [];1431	var dy = 20;1432	var rx = w * 0.5;1433	var ry = dy * 0.5;1434	1435	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dy * 0.5));1436	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));1437	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dy * 0.5));1438	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dy * 0.5 + (h - dy) * 0.25));1439	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dy * 0.5 + (h - dy) * 0.5));1440	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dy * 0.5 + (h - dy) * 0.75));1441	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h - dy * 0.5));1442	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));1443	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h - dy * 0.5));1444	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dy * 0.5 + (h - dy) * 0.75));1445	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dy * 0.5 + (h - dy) * 0.5));1446	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dy * 0.5 + (h - dy) * 0.25));14471448	return (constr);1449};14501451//**********************************************************************************************************************************************************1452//Circular Callout 21453//**********************************************************************************************************************************************************1454/**1455* Extends mxShape.1456*/1457function mxShapeInfographicCircularCallout2(bounds, fill, stroke, strokewidth)1458{1459	mxShape.call(this);1460	this.bounds = bounds;1461	this.fill = fill;1462	this.stroke = stroke;1463	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1464	this.dy = 0.5;1465};14661467/**1468* Extends mxShape.1469*/1470mxUtils.extend(mxShapeInfographicCircularCallout2, mxActor);14711472mxShapeInfographicCircularCallout2.prototype.cst = {CIRCULAR_CALLOUT_2 : 'mxgraph.infographic.circularCallout2'};14731474/**1475* Function: paintVertexShape1476* 1477* Paints the vertex shape.1478*/1479mxShapeInfographicCircularCallout2.prototype.paintVertexShape = function(c, x, y, w, h)1480{1481	c.translate(x, y);14821483	var fillColor = mxUtils.getValue(this.style, mxConstants.STYLE_FILLCOLOR, 'none');1484	var strokeColor = mxUtils.getValue(this.style, mxConstants.STYLE_STROKECOLOR, 'none');1485	c.setFillColor(strokeColor);14861487	var rx = Math.max(0, Math.min(w * 0.5, h * 0.4, h * 0.5 - 7));14881489	c.begin();1490	c.moveTo(w * 0.5 - 2, 2.15 * rx);1491	c.arcTo(rx * 0.23, rx * 0.23, 0, 0, 0, w * 0.5 - rx * 0.2, rx * 1.97);1492	c.arcTo(rx, rx, 0, 0, 1, w * 0.5 - rx, rx);1493	c.arcTo(rx, rx, 0, 0, 1, w * 0.5, 0);1494	c.arcTo(rx, rx, 0, 0, 1, w * 0.5 + rx, rx);1495	c.arcTo(rx, rx, 0, 0, 1, w * 0.5 + rx * 0.2, rx * 1.97);1496	c.arcTo(rx * 0.23, rx * 0.23, 0, 0, 0, w * 0.5 + 2, 2.15 * rx);14971498	var rxMin = Math.max(rx * 0.1, 6);1499	1500	if (rx * 0.04 > 4)1501	{1502		c.lineTo(w * 0.5 + 2, h - rx * 0.22);1503		c.arcTo(rx * 0.05, rx * 0.05, 0, 0, 0, w * 0.5 + rx * 0.04, h - rx * 0.19);1504	}1505	else1506	{1507		c.lineTo(w * 0.5 + 2, h - 2 * rxMin);1508	}1509	1510	c.arcTo(rxMin, rxMin, 0, 0, 1, w * 0.5 + rxMin, h - rxMin);1511	c.arcTo(rxMin, rxMin, 0, 0, 1, w * 0.5, h);1512	c.arcTo(rxMin, rxMin, 0, 0, 1, w * 0.5 - rxMin, h - rxMin);15131514	if (rx * 0.04 > 4)1515	{1516		c.arcTo(rxMin, rxMin, 0, 0, 1, w * 0.5 - rx * 0.04, h - rx * 0.19);1517		c.arcTo(rxMin * 0.5, rxMin * 0.5, 0, 0, 0, w * 0.5 - 2, h - rx * 0.22);1518	}1519	else1520	{1521		c.arcTo(rxMin, rxMin, 0, 0, 1, w * 0.5 - 2, h - 2 * rxMin);1522	}1523	1524	c.close();1525	c.moveTo(w * 0.5, rx * 0.2);1526	c.arcTo(rx * 0.8, rx * 0.8, 0, 0, 0, w * 0.5 - rx * 0.8, rx * 0.8);1527	c.arcTo(rx * 0.8, rx * 0.8, 0, 0, 0, w * 0.5, rx * 1.8);1528	c.arcTo(rx * 0.8, rx * 0.8, 0, 0, 0, w * 0.5 + rx * 0.8, rx * 0.8);1529	c.arcTo(rx * 0.8, rx * 0.8, 0, 0, 0, w * 0.5, rx * 0.2);1530	c.close();1531	c.moveTo(w * 0.5, h - rxMin * 1.75);1532	c.arcTo(rxMin * 0.75, rxMin * 0.75, 0, 0, 0, w * 0.5 - rxMin * 0.75, h - rxMin );1533	c.arcTo(rxMin * 0.75, rxMin * 0.75, 0, 0, 0, w * 0.5, h - rxMin * 0.25);1534	c.arcTo(rxMin * 0.75, rxMin * 0.75, 0, 0, 0, w * 0.5 + rxMin * 0.75, h - rxMin);1535	c.arcTo(rxMin * 0.75, rxMin * 0.75, 0, 0, 0, w * 0.5, h - rxMin * 1.75);1536	c.close();1537	c.fill();1538	1539	c.setFillColor(fillColor);1540	c.setShadow(false);1541	1542	c.begin();1543	c.moveTo(w * 0.5, rx * 0.2);1544	c.arcTo(rx * 0.8, rx * 0.8, 0, 0, 0, w * 0.5 - rx * 0.8, rx * 0.8);1545	c.arcTo(rx * 0.8, rx * 0.8, 0, 0, 0, w * 0.5, rx * 1.8);1546	c.arcTo(rx * 0.8, rx * 0.8, 0, 0, 0, w * 0.5 + rx * 0.8, rx * 0.8);1547	c.arcTo(rx * 0.8, rx * 0.8, 0, 0, 0, w * 0.5, rx * 0.2);1548	c.close();1549	c.moveTo(w * 0.5, h - rxMin * 1.75);1550	c.arcTo(rxMin * 0.75, rxMin * 0.75, 0, 0, 0, w * 0.5 - rxMin * 0.75, h - rxMin );1551	c.arcTo(rxMin * 0.75, rxMin * 0.75, 0, 0, 0, w * 0.5, h - rxMin * 0.25);1552	c.arcTo(rxMin * 0.75, rxMin * 0.75, 0, 0, 0, w * 0.5 + rxMin * 0.75, h - rxMin);1553	c.arcTo(rxMin * 0.75, rxMin * 0.75, 0, 0, 0, w * 0.5, h - rxMin * 1.75);1554	c.close();1555	c.fill();1556};15571558mxCellRenderer.registerShape(mxShapeInfographicCircularCallout2.prototype.cst.CIRCULAR_CALLOUT_2, mxShapeInfographicCircularCallout2);15591560mxShapeInfographicCircularCallout2.prototype.getConstraints = function(style, w, h)1561{1562	var constr = [];1563	var rx = Math.max(0, Math.min(w * 0.5, h * 0.4, h * 0.5 - 7));15641565	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 - rx, rx));1566	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));1567	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 + rx, rx));1568	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));15691570	return (constr);1571};15721573//**********************************************************************************************************************************************************1574//Banner Single Fold1575//**********************************************************************************************************************************************************1576/**1577* Extends mxShape.1578*/1579function mxShapeInfographicBannerSingleFold(bounds, fill, stroke, strokewidth)1580{1581	mxShape.call(this);1582	this.bounds = bounds;1583	this.fill = fill;1584	this.stroke = stroke;1585	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1586	this.dx = 0.5;1587	this.dy = 0.5;1588	this.dx2 = 0.5;1589	this.notch = 0.5;1590};15911592/**1593* Extends mxShape.1594*/1595mxUtils.extend(mxShapeInfographicBannerSingleFold, mxActor);15961597mxShapeInfographicBannerSingleFold.prototype.cst = {BANNER_SINGLE_FOLD : 'mxgraph.infographic.bannerSingleFold'};15981599mxShapeInfographicBannerSingleFold.prototype.customProperties = [1600	{name:'dx', dispName: 'Fold Length', type:'float', defVal:32, min:0},1601	{name:'dy', dispName: 'Banner Width', type:'float', defVal:17, min:0},1602	{name:'notch', dispName: 'Notch', type:'float', defVal:15, min:0}1603];16041605/**1606* Function: paintVertexShape1607* 1608* Paints the vertex shape.1609*/1610mxShapeInfographicBannerSingleFold.prototype.paintVertexShape = function(c, x, y, w, h)1611{1612	c.translate(x, y);16131614	var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));1615	var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));1616	var notch = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));16171618	dx = Math.min(w - 2 * dy, dx);16191620	var dx2 = Math.max(0, Math.min(w - dx - 2 * dy, parseFloat(mxUtils.getValue(this.style, 'dx2', this.dx2))));16211622	notch = Math.min(dx, notch);1623	1624	c.begin();1625	c.moveTo(dx2, 0);1626	c.lineTo(w - dx, 0);1627	c.lineTo(w - dx, dy);1628	c.lineTo(w, dy);1629	c.lineTo(w - notch, (h - dy) * 0.5 + dy);1630	c.lineTo(w, h);1631	c.lineTo(w - dx - 2 * dy, h);1632	c.lineTo(w - dx - 2 * dy, h - dy);1633	c.lineTo(dx2, h - dy);1634	c.lineTo(0, (h - dy) * 0.5);1635	c.close();1636	c.fillAndStroke();1637	1638	c.setShadow(false);1639	c.setFillAlpha('0.05');1640	c.setFillColor('#000000');1641	c.begin();1642	c.moveTo(w,dy);1643	c.lineTo(w - dx, dy);1644	c.lineTo(w - dx, h - dy);1645	c.lineTo(w - dx - 2 * dy, h);1646	c.lineTo(w, h);1647	c.lineTo(w - notch, (h - dy) * 0.5 + dy);1648	c.close();1649	c.fill();1650	1651	c.setFillAlpha('0.4');1652	c.begin();1653	c.moveTo(w - dx, h - dy);1654	c.lineTo(w - dx - 2 * dy, h - dy);1655	c.lineTo(w - dx - 2 * dy, h);1656	c.close();1657	c.fill();1658	1659	c.begin();1660	c.moveTo(dx2, 0);1661	c.lineTo(w - dx, 0);1662	c.lineTo(w - dx, dy);1663	c.lineTo(w, dy);1664	c.lineTo(w - notch, (h - dy) * 0.5 + dy);1665	c.lineTo(w, h);1666	c.lineTo(w - dx - 2 * dy, h);1667	c.lineTo(w - dx - 2 * dy, h - dy);1668	c.lineTo(dx2, h - dy);1669	c.lineTo(0, (h - dy) * 0.5);1670	c.close();1671	c.stroke();1672};16731674mxCellRenderer.registerShape(mxShapeInfographicBannerSingleFold.prototype.cst.BANNER_SINGLE_FOLD, mxShapeInfographicBannerSingleFold);16751676Graph.handleFactory[mxShapeInfographicBannerSingleFold.prototype.cst.BANNER_SINGLE_FOLD] = function(state)1677{1678	var handles = [Graph.createHandle(state, ['dx', 'dy'], function(bounds)1679	{1680		var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));1681		var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));16821683		return new mxPoint(bounds.x + bounds.width - dx, bounds.y + dy);1684	}, function(bounds, pt)1685	{1686		this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width, bounds.x + bounds.width - pt.x))) / 100;1687		this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height / 2, pt.y - bounds.y))) / 100;1688	})];1689			1690	var handle2 = Graph.createHandle(state, ['notch'], function(bounds)1691	{1692		var dy = Math.max(0, Math.min(bounds.height / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));1693		var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));1694		var notch = Math.max(0, Math.min(dx, parseFloat(mxUtils.getValue(this.state.style, 'notch', this.notch))));16951696		return new mxPoint(bounds.x + bounds.width - notch, bounds.y + dy + (bounds.height - dy) * 0.5);1697	}, function(bounds, pt)1698	{1699		this.state.style['notch'] = Math.round(100 * Math.max(0, Math.min(bounds.width, (bounds.width + bounds.x - pt.x)))) / 100;1700	});1701			1702	handles.push(handle2);17031704	var handle3 = Graph.createHandle(state, ['dx2'], function(bounds)1705	{1706		var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));1707		var dy = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));1708		var dx2 = Math.max(0, Math.min(bounds.width - dx, parseFloat(mxUtils.getValue(this.state.style, 'dx2', this.dx2))));17091710		return new mxPoint(bounds.x + dx2, bounds.y + (bounds.height - dy) * 0.5);1711	}, function(bounds, pt)1712	{1713		var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));1714		var dy = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));1715		1716		this.state.style['dx2'] = Math.round(100 * Math.max(0, Math.min(bounds.width - dx - 2 * dy, pt.x - bounds.x))) / 100;1717	});1718			1719	handles.push(handle3);1720	17211722	return handles;1723};17241725mxShapeInfographicBannerSingleFold.prototype.getConstraints = function(style, w, h)1726{1727	var constr = [];1728	var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));1729	var dy = Math.max(0, Math.min(h * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));1730	var notch = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));1731	dx = Math.min(w - 2 * dy, dx);1732	var dx2 = Math.max(0, Math.min(w - dx - 2 * dy, parseFloat(mxUtils.getValue(this.style, 'dx2', this.dx2))));1733	notch = Math.min(dx, notch);1734	var w2 = w - dx - dx2;1735	1736	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, (h - dy) * 0.5));1737	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2, 0));1738	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.25, 0));1739	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.5, 0));1740	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.75, 0));1741	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2, 0));1742	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx * 0.25, dy));1743	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx * 0.5, dy));1744	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx * 0.75, dy));1745	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dy));1746	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - notch, (h + dy) * 0.5));1747	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h));1748	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx - 2 * dy, h));1749	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - (dx + 2 * dy) * 0.75, h));1750	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - (dx + 2 * dy) * 0.5, h));1751	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - (dx + 2 * dy) * 0.25, h));1752	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2, h - dy));1753	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.25, h - dy));1754	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.5, h - dy));1755	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.75, h - dy));1756	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2, h - dy));1757	1758	return (constr);1759};17601761//**********************************************************************************************************************************************************1762//Shaded Cube1763//**********************************************************************************************************************************************************1764/**1765* Extends mxShape.1766*/1767function mxShapeInfographicShadedCube(bounds, fill, stroke, strokewidth)1768{1769	mxShape.call(this);1770	this.bounds = bounds;1771	this.fill = fill;1772	this.stroke = stroke;1773	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1774	this.isoAngle = 15;1775};17761777/**1778* Extends mxShape.1779*/1780mxUtils.extend(mxShapeInfographicShadedCube, mxActor);17811782mxShapeInfographicShadedCube.prototype.cst = {SHADED_CUBE : 'mxgraph.infographic.shadedCube'};17831784mxShapeInfographicShadedCube.prototype.customProperties = [1785	{name:'isoAngle', dispName: 'Perspective', type:'float', defVal:15, min:0}1786];17871788/**1789* Function: paintVertexShape1790* 1791* Paints the vertex shape.1792*/1793mxShapeInfographicShadedCube.prototype.paintVertexShape = function(c, x, y, w, h)1794{1795	c.translate(x, y);17961797	var isoAngle = Math.max(0.01, Math.min(94, parseFloat(mxUtils.getValue(this.style, 'isoAngle', this.isoAngle)))) * Math.PI / 200 ;1798	var isoH = Math.min(w * Math.tan(isoAngle), h * 0.5);1799	1800	c.begin();1801	c.moveTo(w * 0.5, 0);1802	c.lineTo(w, isoH);1803	c.lineTo(w, h - isoH);1804	c.lineTo(w * 0.5, h);1805	c.lineTo(0, h - isoH);1806	c.lineTo(0, isoH);1807	c.close();1808	c.fillAndStroke();18091810	c.setShadow(false);1811	c.setFillAlpha('0.2');1812	c.setFillColor('#000000');1813	1814	c.begin();1815	c.moveTo(w * 0.5, 2 * isoH);1816	c.lineTo(w, isoH);1817	c.lineTo(w, h - isoH);1818	c.lineTo(w * 0.5, h);1819	c.close();1820	c.fill();18211822	c.setFillColor('#ffffff');1823	c.begin();1824	c.moveTo(w * 0.5, 2 * isoH);1825	c.lineTo(0, isoH);1826	c.lineTo(0, h - isoH);1827	c.lineTo(w * 0.5, h);1828	c.close();1829	c.fill();1830};18311832mxCellRenderer.registerShape(mxShapeInfographicShadedCube.prototype.cst.SHADED_CUBE, mxShapeInfographicShadedCube);18331834Graph.handleFactory[mxShapeInfographicShadedCube.prototype.cst.SHADED_CUBE] = function(state)1835{1836	var handles = [Graph.createHandle(state, ['isoAngle'], function(bounds)1837	{1838		var isoAngle = Math.max(0.01, Math.min(94, parseFloat(mxUtils.getValue(this.state.style, 'isoAngle', this.isoAngle)))) * Math.PI / 200 ;1839		var isoH = Math.min(bounds.width * Math.tan(isoAngle), bounds.height * 0.5);18401841		return new mxPoint(bounds.x, bounds.y + isoH);1842	}, function(bounds, pt)1843	{1844		this.state.style['isoAngle'] = Math.round(100 * Math.max(0, Math.min(100, pt.y - bounds.y))) / 100;1845	})];1846			1847	return handles;1848};18491850mxShapeInfographicShadedCube.prototype.getConstraints = function(style, w, h)1851{1852	var constr = [];1853	var isoAngle = Math.max(0.01, Math.min(94, parseFloat(mxUtils.getValue(this.style, 'isoAngle', this.isoAngle)))) * Math.PI / 200 ;1854	var isoH = Math.min(w * Math.tan(isoAngle), h * 0.5);1855	1856	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));1857	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.75, isoH * 0.5));1858	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, isoH));1859	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, isoH + (h - 2 * isoH) * 0.25));1860	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, isoH + (h - 2 * isoH) * 0.5));1861	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, isoH + (h - 2 * isoH) * 0.75));1862	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h - isoH));1863	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.75, h - isoH * 0.5));1864	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));1865	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.25, h - isoH * 0.5));1866	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h - isoH));1867	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h - isoH));1868	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, isoH + (h - 2 * isoH) * 0.75));1869	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, isoH + (h - 2 * isoH) * 0.5));1870	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, isoH + (h - 2 * isoH) * 0.25));1871	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, isoH));1872	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.25, isoH * 0.5));18731874	return (constr);1875};18761877//**********************************************************************************************************************************************************1878//Partial Concentric Ellipse1879//**********************************************************************************************************************************************************1880/**1881* Extends mxShape.1882*/1883function mxShapeInfographicPartConcEllipse(bounds, fill, stroke, strokewidth)1884{1885	mxShape.call(this);1886	this.bounds = bounds;1887	this.fill = fill;1888	this.stroke = stroke;1889	this.strokewidth = (strokewidth != null) ? strokewidth : 1;1890	this.startAngle = 0.25;1891	this.endAngle = 0.75;1892	this.arcWidth = 0.5;1893};18941895/**1896* Extends mxShape.1897*/1898mxUtils.extend(mxShapeInfographicPartConcEllipse, mxActor);18991900mxShapeInfographicPartConcEllipse.prototype.cst = {PART_CONC_ELLIPSE : 'mxgraph.infographic.partConcEllipse'};19011902mxShapeInfographicPartConcEllipse.prototype.customProperties = [1903	{name:'startAngle', dispName:'Start Angle', min:0, max:1, defVal: 0.25},1904	{name:'endAngle', dispName:'End Angle', min:0, max:1, defVal: 0.1},1905	{name:'arcWidth', dispName:'Arc Width', min:0, max:1, defVal: 0.5}1906];19071908/**1909* Function: paintVertexShape1910* 1911* Paints the vertex shape.1912*/1913mxShapeInfographicPartConcEllipse.prototype.paintVertexShape = function(c, x, y, w, h)1914{1915	c.translate(x, y);19161917	var startAngle = 2 * Math.PI * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'startAngle', this.startAngle))));1918	var endAngle = 2 * Math.PI * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'endAngle', this.endAngle))));1919	var arcWidth = 1 - Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'arcWidth', this.arcWidth))));1920	var rx = w * 0.5;1921	var ry = h * 0.5;1922	var rx2 = rx * arcWidth;1923	var ry2 = ry * arcWidth;1924	1925	var angDiff = endAngle - startAngle;1926	1927	if (angDiff < 0)1928	{1929		angDiff = angDiff + Math.PI * 2;1930	}1931	else if (angDiff == Math.PI)1932	{1933		endAngle = endAngle + 0.00001;1934	}1935		1936	var startX = rx + Math.sin(startAngle) * rx;1937	var startY = ry - Math.cos(startAngle) * ry;1938	var innerStartX = rx + Math.sin(startAngle) * rx2;1939	var innerStartY = ry - Math.cos(startAngle) * ry2;1940	var endX = rx + Math.sin(endAngle) * rx;1941	var endY = ry - Math.cos(endAngle) * ry;1942	var innerEndX = rx + Math.sin(endAngle) * rx2;1943	var innerEndY = ry - Math.cos(endAngle) * ry2;1944	1945	var bigArc = 0;1946	1947	if (angDiff <= Math.PI)1948	{1949		bigArc = 1;1950	}1951		1952	c.begin();1953	c.moveTo(rx, 0);1954	c.arcTo(rx, ry, 0, 0, 1, w, ry);1955	c.arcTo(rx, ry, 0, 0, 1, rx, h);1956	c.arcTo(rx, ry, 0, 0, 1, 0, ry);1957	c.arcTo(rx, ry, 0, 0, 1, rx, 0);1958	c.close();1959	c.moveTo(rx, h * 0.5 - ry2);1960	c.arcTo(rx2, ry2, 0, 0, 0, w * 0.5 - rx2, ry);1961	c.arcTo(rx2, ry2, 0, 0, 0, rx, h * 0.5 + ry2);1962	c.arcTo(rx2, ry2, 0, 0, 0, w * 0.5 + rx2, ry);1963	c.arcTo(rx2, ry2, 0, 0, 0, rx, h * 0.5 - ry2);1964	c.close();1965	c.fillAndStroke();1966	1967	c.setShadow(false);1968	c.setFillAlpha('0.2');1969	c.setFillColor('#ffffff');1970	1971	c.begin();1972	c.moveTo(startX, startY);1973	c.arcTo(rx, ry, 0, bigArc, 0, endX, endY);1974	c.lineTo(innerEndX, innerEndY);1975	c.arcTo(rx2, ry2, 0, bigArc, 1, innerStartX, innerStartY);1976	c.close();1977	c.fill();1978	1979	var rx = w * 0.5;1980	var ry = h * 0.5;1981	var rx2 = rx * arcWidth;1982	var ry2 = ry * arcWidth;19831984	var rx3 = rx2 + (rx - rx2) * 0.25;1985	var ry3 = ry2 + (ry - ry2) * 0.25;19861987	c.setFillColor('#000000');1988	1989	c.begin();1990	c.moveTo(rx, h * 0.5 - ry2);1991	c.arcTo(rx2, ry2, 0, 0, 1, w * 0.5 + rx2, ry);1992	c.arcTo(rx2, ry2, 0, 0, 1, rx, h * 0.5 + ry2);1993	c.arcTo(rx2, ry2, 0, 0, 1, w * 0.5 - rx2, ry);1994	c.arcTo(rx2, ry2, 0, 0, 1, rx, h * 0.5 - ry2);1995	c.close();1996	c.moveTo(rx, h * 0.5 - ry3);1997	c.arcTo(rx3, ry3, 0, 0, 0, w * 0.5 - rx3, ry);1998	c.arcTo(rx3, ry3, 0, 0, 0, rx, h * 0.5 + ry3);1999	c.arcTo(rx3, ry3, 0, 0, 0, w * 0.5 + rx3, ry);2000	c.arcTo(rx3, ry3, 0, 0, 0, rx, h * 0.5 - ry3);2001	c.close();2002	c.fill();2003};20042005mxCellRenderer.registerShape(mxShapeInfographicPartConcEllipse.prototype.cst.PART_CONC_ELLIPSE, mxShapeInfographicPartConcEllipse);20062007Graph.handleFactory[mxShapeInfographicPartConcEllipse.prototype.cst.PART_CONC_ELLIPSE] = function(state)2008{2009	var handles = [Graph.createHandle(state, ['startAngle'], function(bounds)2010	{2011		var startAngle = 2 * Math.PI * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.state.style, 'startAngle', this.startAngle))));20122013		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);2014	}, function(bounds, pt)2015	{2016		var handleX = Math.round(100 * Math.max(-1, Math.min(1, (pt.x - bounds.x - bounds.width * 0.5) / (bounds.width * 0.5)))) / 100;2017		var handleY = -Math.round(100 * Math.max(-1, Math.min(1, (pt.y - bounds.y - bounds.height * 0.5) / (bounds.height * 0.5)))) / 100;2018		2019		var res =  0.5 * Math.atan2(handleX, handleY) / Math.PI;2020		2021		if (res < 0)2022		{2023			res = 1 + res;2024		}20252026		this.state.style['startAngle'] = res;2027		2028	})];20292030	var handle2 = Graph.createHandle(state, ['endAngle'], function(bounds)2031	{2032		var endAngle = 2 * Math.PI * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.state.style, 'endAngle', this.endAngle))));20332034		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);2035	}, function(bounds, pt)2036	{2037		var handleX = Math.round(100 * Math.max(-1, Math.min(1, (pt.x - bounds.x - bounds.width * 0.5) / (bounds.width * 0.5)))) / 100;2038		var handleY = -Math.round(100 * Math.max(-1, Math.min(1, (pt.y - bounds.y - bounds.height * 0.5) / (bounds.height * 0.5)))) / 100;2039		2040		var res =  0.5 * Math.atan2(handleX, handleY) / Math.PI;2041		2042		if (res < 0)2043		{2044			res = 1 + res;2045		}2046		2047		this.state.style['endAngle'] = res;2048	});2049	2050	handles.push(handle2);2051	2052	var handle3 = Graph.createHandle(state, ['arcWidth'], function(bounds)2053	{2054		var arcWidth = Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.state.style, 'arcWidth', this.arcWidth))));20552056		return new mxPoint(bounds.x + bounds.width / 2, bounds.y + arcWidth * bounds.height * 0.5);2057	}, function(bounds, pt)2058	{2059		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;2060	});2061			2062	handles.push(handle3);2063	2064	return handles;2065};20662067mxShapeInfographicPartConcEllipse.prototype.getConstraints = function(style, w, h)2068{2069	var constr = [];2070	2071	constr.push(new mxConnectionConstraint(new mxPoint(0.145, 0.145), false));2072	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));2073	constr.push(new mxConnectionConstraint(new mxPoint(0.855, 0.145), false));2074	constr.push(new mxConnectionConstraint(new mxPoint(1, 0.5), false));2075	constr.push(new mxConnectionConstraint(new mxPoint(0.855, 0.855), false));2076	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 1), false));2077	constr.push(new mxConnectionConstraint(new mxPoint(0.145, 0.855), false));2078	constr.push(new mxConnectionConstraint(new mxPoint(0, 0.5), false));20792080	return (constr);2081};20822083//**********************************************************************************************************************************************************2084//Banner Half Fold2085//**********************************************************************************************************************************************************2086/**2087* Extends mxShape.2088*/2089function mxShapeInfographicBannerHalfFold(bounds, fill, stroke, strokewidth)2090{2091	mxShape.call(this);2092	this.bounds = bounds;2093	this.fill = fill;2094	this.stroke = stroke;2095	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2096	this.dx = 0.5;2097	this.dx2 = 0.5;2098	this.notch = 0.5;2099};21002101/**2102* Extends mxShape.2103*/2104mxUtils.extend(mxShapeInfographicBannerHalfFold, mxActor);21052106mxShapeInfographicBannerHalfFold.prototype.cst = {BANNER_HALF_FOLD : 'mxgraph.infographic.bannerHalfFold'};21072108mxShapeInfographicBannerHalfFold.prototype.customProperties = [2109	{name:'dx', dispName:'Banner Width', min:0, defVal: 40},2110	{name:'dx2', dispName:'Spike Size', min:0, defVal: 20},2111	{name:'notch', dispName:'Notch Size', min:0, defVal: 15}2112];21132114/**2115* Function: paintVertexShape2116* 2117* Paints the vertex shape.2118*/2119mxShapeInfographicBannerHalfFold.prototype.paintVertexShape = function(c, x, y, w, h)2120{2121	c.translate(x, y);21222123	var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));2124	var dx2 = Math.max(0, Math.min(w - dx, parseFloat(mxUtils.getValue(this.style, 'dx2', this.dx2))));2125	var notch = Math.max(0, Math.min(h - dx, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));21262127	c.begin();2128	c.moveTo(dx2, 0);2129	c.lineTo(w - dx, 0);2130	c.lineTo(w, dx);2131	c.lineTo(w, h);2132	c.lineTo(w - dx * 0.5, h - notch);2133	c.lineTo(w - dx, h);2134	c.lineTo(w - dx, dx);2135	c.lineTo(dx2, dx);2136	c.lineTo(0, dx * 0.5);2137	c.close();2138	c.fillAndStroke();2139	2140	c.setShadow(false);2141	c.setFillAlpha('0.2');2142	c.setFillColor('#000000');2143	c.begin();2144	c.moveTo(w - dx, dx);2145	c.lineTo(w, dx);2146	c.lineTo(w, h);2147	c.lineTo(w - dx * 0.5, h - notch);2148	c.lineTo(w - dx, h);2149	c.lineTo(w - dx, dx);2150	c.lineTo(0, dx);2151	c.close();2152	c.fill();2153	2154	c.begin();2155	c.moveTo(dx2, 0);2156	c.lineTo(w - dx, 0);2157	c.lineTo(w, dx);2158	c.lineTo(w, h);2159	c.lineTo(w - dx * 0.5, h - notch);2160	c.lineTo(w - dx, h);2161	c.lineTo(w - dx, dx);2162	c.lineTo(dx2, dx);2163	c.lineTo(0, dx * 0.5);2164	c.close();2165	c.stroke();2166};21672168mxCellRenderer.registerShape(mxShapeInfographicBannerHalfFold.prototype.cst.BANNER_HALF_FOLD, mxShapeInfographicBannerHalfFold);21692170Graph.handleFactory[mxShapeInfographicBannerHalfFold.prototype.cst.BANNER_HALF_FOLD] = function(state)2171{2172	var handles = [Graph.createHandle(state, ['dx'], function(bounds)2173	{2174		var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));21752176		return new mxPoint(bounds.x + bounds.width - dx, bounds.y + dx);2177	}, function(bounds, pt)2178	{2179		this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width, bounds.x + bounds.width - pt.x))) / 100;2180	})];2181			2182	var handle2 = Graph.createHandle(state, ['notch'], function(bounds)2183	{2184		var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));2185		var notch = Math.max(0, Math.min(bounds.height - dx, parseFloat(mxUtils.getValue(this.state.style, 'notch', this.notch))));21862187		return new mxPoint(bounds.x + bounds.width - dx * 0.5, bounds.y + bounds.height - notch);2188	}, function(bounds, pt)2189	{2190		this.state.style['notch'] = Math.round(100 * Math.max(0, Math.min(bounds.height, (bounds.height + bounds.y - pt.y)))) / 100;2191	});2192			2193	handles.push(handle2);2194	2195	var handle3 = Graph.createHandle(state, ['dx2'], function(bounds)2196	{2197		var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));2198		var dx2 = Math.max(0, Math.min(bounds.width - dx, parseFloat(mxUtils.getValue(this.state.style, 'dx2', this.dx2))));21992200		return new mxPoint(bounds.x + dx2, bounds.y + dx);2201	}, function(bounds, pt)2202	{2203		var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));2204		2205		this.state.style['dx2'] = Math.round(100 * Math.max(0, Math.min(bounds.width - dx, pt.x - bounds.x))) / 100;2206	});2207			2208	handles.push(handle3);2209	2210	return handles;2211};22122213mxShapeInfographicBannerHalfFold.prototype.getConstraints = function(style, w, h)2214{2215	var constr = [];2216	var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));2217	var dx2 = Math.max(0, Math.min(w - dx, parseFloat(mxUtils.getValue(this.style, 'dx2', this.dx2))));2218	var notch = Math.max(0, Math.min(h - dx, parseFloat(mxUtils.getValue(this.style, 'notch', this.notch))));2219	var w2 = w - dx - dx2;2220	var h2 = h - dx;22212222	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, dx * 0.5));2223	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2, 0));2224	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.25, 0));2225	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.5, 0));2226	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.75, 0));2227	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx, 0));2228	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx * 0.5, dx * 0.5));2229	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dx));2230	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dx + h2 * 0.25));2231	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dx + h2 * 0.5));2232	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, dx + h2 * 0.75));2233	constr.push(new mxConnectionConstraint(new mxPoint(1, 1), false));2234	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx * 0.5, h - notch));2235	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx, h));2236	constr.push(new mxConnectionConstraint(new mxPoint(1, 1), false));2237	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx, dx + h2 * 0.75));2238	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx, dx + h2 * 0.5));2239	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx, dx + h2 * 0.25));2240	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w - dx, dx));2241	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.25, dx));2242	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.5, dx));2243	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2 + w2 * 0.75, dx));2244	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx2, dx));22452246	return (constr);2247};22482249//**********************************************************************************************************************************************************2250//Circular Dial2251//**********************************************************************************************************************************************************2252/**2253* Extends mxShape.2254*/2255function mxShapeInfographicCircularDial(bounds, fill, stroke, strokewidth)2256{2257	mxShape.call(this);2258	this.bounds = bounds;2259	this.fill = fill;2260	this.stroke = stroke;2261	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2262	this.dy = 0.5;2263};22642265/**2266* Extends mxShape.2267*/2268mxUtils.extend(mxShapeInfographicCircularDial, mxActor);22692270mxShapeInfographicCircularDial.prototype.cst = {CIRCULAR_DIAL : 'mxgraph.infographic.circularDial'};22712272mxShapeInfographicCircularDial.prototype.customProperties = [2273	{name:'dy', dispName:'Hole Size', min:0, defVal: 15}2274];22752276/**2277* Function: paintVertexShape2278* 2279* Paints the vertex shape.2280*/2281mxShapeInfographicCircularDial.prototype.paintVertexShape = function(c, x, y, w, h)2282{2283	c.translate(x, y);22842285	var dy = Math.max(0, Math.min(h * 0.5 - 10, w * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));2286	2287	var rx = Math.max(0, Math.min(w * 0.5, h * 0.5 - 10));2288	var rx2 = rx - dy;2289	2290	c.begin();2291	c.moveTo(w * 0.5 - rx, h);2292	c.lineTo(w * 0.5 - rx, rx);2293	c.arcTo(rx, rx, 0, 0, 1, w * 0.5, 0);2294	c.arcTo(rx, rx, 0, 0, 1, w * 0.5 + rx, rx);2295	c.lineTo(w * 0.5 + rx, h);2296	c.close();2297	c.moveTo(w * 0.5, dy);2298	c.arcTo(rx2, rx2, 0, 0, 0, w * 0.5 - rx2, rx);2299	c.arcTo(rx2, rx2, 0, 0, 0, w * 0.5, rx + rx2);2300	c.arcTo(rx2, rx2, 0, 0, 0, w * 0.5 + rx2, rx);2301	c.arcTo(rx2, rx2, 0, 0, 0, w * 0.5, dy);2302	c.close();2303	c.fillAndStroke();2304	2305	c.setShadow(false);2306	c.setFillAlpha('0.2');2307	c.setFillColor('#000000');23082309	c.begin();2310	c.moveTo(w * 0.5 - rx, 2 * rx);2311	c.lineTo(w * 0.5 + rx, 2 * rx);2312	c.lineTo(w * 0.5 + rx, h);2313	c.lineTo(w * 0.5 - rx, h);2314	c.close();2315	c.fill();2316};23172318mxCellRenderer.registerShape(mxShapeInfographicCircularDial.prototype.cst.CIRCULAR_DIAL, mxShapeInfographicCircularDial);23192320Graph.handleFactory[mxShapeInfographicCircularDial.prototype.cst.CIRCULAR_DIAL] = function(state)2321{2322	var handles = [Graph.createHandle(state, ['dy'], function(bounds)2323	{2324		var dy = Math.max(0, Math.min(bounds.height / 2, bounds.width / 2, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));23252326		return new mxPoint(bounds.x + bounds.width * 0.5, bounds.y + dy);2327	}, function(bounds, pt)2328	{2329		this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height / 2, bounds.width / 2, pt.y - bounds.y))) / 100;2330	})];2331			2332	return handles;2333};23342335mxShapeInfographicCircularDial.prototype.getConstraints = function(style, w, h)2336{2337	var constr = [];2338	var dy = Math.max(0, Math.min(h * 0.5 - 10, w * 0.5, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));2339	var rx = Math.max(0, Math.min(w * 0.5, h * 0.5 - 10));2340	var rx2 = rx - dy;2341	2342	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 - rx, h));2343	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 - rx, (rx + h) * 0.5));2344	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 - rx, rx));2345	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 - rx * 0.71, rx * 0.29));2346	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5, 0));2347	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 + rx * 0.71, rx * 0.29));2348	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 + rx, rx));2349	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 + rx, (rx + h) * 0.5));2350	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 + rx, h));2351	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 + rx * 0.5, h));2352	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5 - rx * 0.5, h));23532354	return (constr);2355};23562357//**********************************************************************************************************************************************************2358//Simple ribbon2359//**********************************************************************************************************************************************************2360/**2361* Extends mxShape.2362*/2363function mxShapeInfographicRibbonSimple(bounds, fill, stroke, strokewidth)2364{2365	mxShape.call(this);2366	this.bounds = bounds;2367	this.fill = fill;2368	this.stroke = stroke;2369	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2370	this.notch1 = 0.5;2371	this.notch2 = 0.5;2372};23732374/**2375* Extends mxShape.2376*/2377mxUtils.extend(mxShapeInfographicRibbonSimple, mxActor);23782379mxShapeInfographicRibbonSimple.prototype.cst = {RIBBON_SIMPLE : 'mxgraph.infographic.ribbonSimple'};23802381mxShapeInfographicRibbonSimple.prototype.customProperties = [2382	{name:'notch1', dispName:'Notch Size', min:0, defVal: 20},2383	{name:'notch2', dispName:'Spike Size', min:0, defVal: 20}2384];23852386/**2387* Function: paintVertexShape2388* 2389* Paints the vertex shape.2390*/2391mxShapeInfographicRibbonSimple.prototype.paintVertexShape = function(c, x, y, w, h)2392{2393	c.translate(x, y);23942395	var notch1 = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'notch1', this.notch2))));2396	var notch2 = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'notch2', this.notch2))));23972398	c.begin();2399	c.moveTo(0, h);2400	c.lineTo(notch1, h * 0.5);2401	c.lineTo(0, 0);2402	c.lineTo(w - notch2, 0);2403	c.lineTo(w, h * 0.5);2404	c.lineTo(w - notch2, h);2405	c.close();2406	c.fillAndStroke();2407};24082409mxCellRenderer.registerShape(mxShapeInfographicRibbonSimple.prototype.cst.RIBBON_SIMPLE, mxShapeInfographicRibbonSimple);24102411Graph.handleFactory[mxShapeInfographicRibbonSimple.prototype.cst.RIBBON_SIMPLE] = function(state)2412{2413	var handles = [Graph.createHandle(state, ['notch1'], function(bounds)2414	{2415		var notch1 = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'notch1', this.notch1))));24162417		return new mxPoint(bounds.x + notch1, bounds.y + bounds.height * 0.5);2418	}, function(bounds, pt)2419	{2420		this.state.style['notch1'] = Math.round(100 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 100;2421	})];24222423	var handle2 = Graph.createHandle(state, ['notch2'], function(bounds)2424	{2425		var notch2 = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'notch2', this.notch2))));24262427		return new mxPoint(bounds.x + bounds.width - notch2, bounds.y);2428	}, function(bounds, pt)2429	{2430		this.state.style['notch2'] = Math.round(100 * Math.max(0, Math.min(bounds.width, (bounds.width + bounds.x - pt.x)))) / 100;2431	});2432			2433	handles.push(handle2);24342435	return handles;2436};24372438mxShapeInfographicRibbonSimple.prototype.getConstraints = function(style, w, h)2439{2440	var constr = [];2441	var notch1 = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'notch1', this.notch2))));2442	var notch2 = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'notch2', this.notch2))));2443	var w2 = w - notch2;2444	2445	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false));2446	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2 * 0.25, 0));2447	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2 * 0.5, 0));2448	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2 * 0.75, 0));2449	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2, 0));2450	constr.push(new mxConnectionConstraint(new mxPoint(1, 0.5), false));2451	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2, h));2452	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2 * 0.75, h));2453	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2 * 0.5, h));2454	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w2 * 0.25, h));2455	constr.push(new mxConnectionConstraint(new mxPoint(0, 1), false));2456	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, notch1, h * 0.5));24572458	return (constr);2459};24602461//**********************************************************************************************************************************************************2462//Bar with callout2463//**********************************************************************************************************************************************************2464/**2465* Extends mxShape.2466*/2467function mxShapeInfographicBarCallout(bounds, fill, stroke, strokewidth)2468{2469	mxShape.call(this);2470	this.bounds = bounds;2471	this.fill = fill;2472	this.stroke = stroke;2473	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2474	this.dx = 0.5;2475	this.dy = 0.5;2476};24772478/**2479* Extends mxShape.2480*/2481mxUtils.extend(mxShapeInfographicBarCallout, mxActor);24822483mxShapeInfographicBarCallout.prototype.cst = {BAR_CALLOUT : 'mxgraph.infographic.barCallout'};24842485mxShapeInfographicBarCallout.prototype.customProperties = [2486	{name:'dx', dispName:'Callout Position', min:0, defVal: 100},2487	{name:'dy', dispName:'Callout Size', min:0, defVal: 30}2488];24892490/**2491* Function: paintVertexShape2492* 2493* Paints the vertex shape.2494*/2495mxShapeInfographicBarCallout.prototype.paintVertexShape = function(c, x, y, w, h)2496{2497	c.translate(x, y);24982499	var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));2500	var dy = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));25012502	var x1 = Math.max(dx - dy * 0.35, 0);2503	var x2 = Math.min(dx + dy * 0.35, w);2504	2505	c.begin();2506	c.moveTo(0, 0);2507	c.lineTo(w, 0);2508	c.lineTo(w, h - dy);2509	c.lineTo(x2, h - dy);2510	c.lineTo(dx, h);2511	c.lineTo(x1, h - dy);2512	c.lineTo(0, h - dy);2513	c.close();2514	c.fillAndStroke();2515};25162517mxCellRenderer.registerShape(mxShapeInfographicBarCallout.prototype.cst.BAR_CALLOUT, mxShapeInfographicBarCallout);25182519mxShapeInfographicBarCallout.prototype.constraints = null;25202521Graph.handleFactory[mxShapeInfographicBarCallout.prototype.cst.BAR_CALLOUT] = function(state)2522{2523	var handles = [Graph.createHandle(state, ['dx', 'dy'], function(bounds)2524	{2525		var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));2526		var dy = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));25272528		return new mxPoint(bounds.x + dx, bounds.y + bounds.height -  dy);2529	}, function(bounds, pt)2530	{2531		this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 100;2532		this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height, bounds.y + bounds.height - pt.y))) / 100;2533	})];2534			2535	return handles;2536};25372538mxShapeInfographicBarCallout.prototype.getConstraints = function(style, w, h)2539{2540	var constr = [];2541	var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));2542	var dy = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));2543	var x1 = Math.max(dx - dy * 0.35, 0);2544	var x2 = Math.min(dx + dy * 0.35, w);25452546	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false));2547	constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false));2548	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));2549	constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false));2550	constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false));2551	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, (h - dy) * 0.5));2552	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h - dy));2553	constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false, null, 0, h - dy));2554	constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false, null, 0, h - dy));2555	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx, h));2556	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h - dy));25572558	return (constr);2559};25602561//**********************************************************************************************************************************************************2562//Flag2563//**********************************************************************************************************************************************************2564/**2565* Extends mxShape.2566*/2567function mxShapeInfographicFlag(bounds, fill, stroke, strokewidth)2568{2569	mxShape.call(this);2570	this.bounds = bounds;2571	this.fill = fill;2572	this.stroke = stroke;2573	this.strokewidth = (strokewidth != null) ? strokewidth : 1;2574	this.dx = 0.5;2575	this.dy = 0.5;2576};25772578/**2579* Extends mxShape.2580*/2581mxUtils.extend(mxShapeInfographicFlag, mxActor);25822583mxShapeInfographicFlag.prototype.cst = {FLAG : 'mxgraph.infographic.flag'};25842585mxShapeInfographicFlag.prototype.customProperties = [2586	{name:'dx', dispName:'Pole Width', min:0, defVal: 30},2587	{name:'dy', dispName:'Spike Size', min:0, defVal: 20}2588];25892590/**2591* Function: paintVertexShape2592* 2593* Paints the vertex shape.2594*/2595mxShapeInfographicFlag.prototype.paintVertexShape = function(c, x, y, w, h)2596{2597	c.translate(x, y);25982599	var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));2600	var dy = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));26012602	c.begin();2603	c.moveTo(0, 0);2604	c.lineTo(w, 0);2605	c.lineTo(w, h - dy);2606	c.lineTo(dx, h - dy);2607	c.lineTo(dx * 0.5, h);2608	c.lineTo(0, h - dy);2609	c.close();2610	c.fillAndStroke();2611	2612	c.setShadow(false);2613	c.setFillAlpha('0.2');2614	c.setFillColor('#ffffff');2615	c.begin();2616	c.moveTo(0, 0);2617	c.lineTo(dx, 0);2618	c.lineTo(dx, h - dy);2619	c.lineTo(dx * 0.5, h);2620	c.lineTo(0, h - dy);2621	c.close();2622	c.fill();2623};26242625mxCellRenderer.registerShape(mxShapeInfographicFlag.prototype.cst.FLAG, mxShapeInfographicFlag);26262627Graph.handleFactory[mxShapeInfographicFlag.prototype.cst.FLAG] = function(state)2628{2629	var handles = [Graph.createHandle(state, ['dx', 'dy'], function(bounds)2630	{2631		var dx = Math.max(0, Math.min(bounds.width, parseFloat(mxUtils.getValue(this.state.style, 'dx', this.dx))));2632		var dy = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'dy', this.dy))));26332634		return new mxPoint(bounds.x + dx, bounds.y + bounds.height - dy);2635	}, function(bounds, pt)2636	{2637		this.state.style['dx'] = Math.round(100 * Math.max(0, Math.min(bounds.width, pt.x - bounds.x))) / 100;2638		this.state.style['dy'] = Math.round(100 * Math.max(0, Math.min(bounds.height, bounds.y + bounds.height - pt.y))) / 100;2639	})];2640			2641	return handles;2642};26432644mxShapeInfographicFlag.prototype.getConstraints = function(style, w, h)2645{2646	var constr = [];2647	var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));2648	var dy = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));26492650	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false));2651	constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0), false));2652	constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0), false));2653	constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0), false));2654	constr.push(new mxConnectionConstraint(new mxPoint(1, 0), false));2655	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, (h - dy) * 0.5));2656	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w, h - dy));2657	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, h - dy));2658	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, 0, (h - dy) * 0.5));2659	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.75, h - dy));2660	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.5, h - dy));2661	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, w * 0.25, h - dy));2662	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx * 0.5, h));2663	constr.push(new mxConnectionConstraint(new mxPoint(0, 0), false, null, dx * 0.5, 0));26642665	return (constr);2666};2667