drawio-offline
Version:
diagrams.net desktop
520 lines (466 loc) • 160 kB
JavaScript
(function()
{
Sidebar.prototype.addInfographicPalette = function()
{
var w = 100;
var h = 100;
var s = 'whiteSpace=wrap;html=1;shape=mxgraph.infographic.';
var s2 = mxConstants.STYLE_VERTICAL_LABEL_POSITION + '=bottom;' + mxConstants.STYLE_VERTICAL_ALIGN + '=top;html=1;shape=mxgraph.infographic.';
var s3 = mxConstants.STYLE_VERTICAL_LABEL_POSITION + '=bottom;' + mxConstants.STYLE_VERTICAL_ALIGN + '=top;html=1;shape=';
var s4 = mxConstants.STYLE_VERTICAL_LABEL_POSITION + '=bottom;' + mxConstants.STYLE_VERTICAL_ALIGN + '=top;html=1;shape=mxgraph.basic.';
var gn = 'mxgraph.infographic';
var dt = '';
this.setCurrentSearchEntryLibrary('infographic');
this.addPaletteFunctions('infographic', 'Infographic', false,
[
this.createVertexTemplateEntry(s4 + 'pie;fillColor=#10739E;strokeColor=none;startAngle=0.2;endAngle=0.9;', w, h, '', 'Pie', null, null, this.getTagsForStencil(gn, 'pie', dt).join(' ')),
this.createVertexTemplateEntry(s4 + 'arc;strokeColor=#10739E;strokeWidth=6;startAngle=0.3;endAngle=0.1;', w, h, '', 'Arc', null, null, this.getTagsForStencil(gn, 'arc', dt).join(' ')),
this.createVertexTemplateEntry(s4 + 'partConcEllipse;fillColor=#10739E;strokeColor=none;startAngle=0.25;endAngle=0.1;arcWidth=0.5;', w, h, '', 'Partial Concentric Ellipse', null, null, this.getTagsForStencil(gn, 'partConcEllipse', dt).join(' ')),
this.createVertexTemplateEntry(s2 + 'parallelogram;dx=15;fillColor=#10739E;strokeColor=none;', w, h * 0.7, '', 'Trapezoid', null, null, this.getTagsForStencil(gn, 'partConcEllipse', dt).join(' ')),
this.createVertexTemplateEntry(
'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=20;notch2=20;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;',
w * 2, h * 0.4, 'Label', 'Ribbon', null, null, this.getTagsForStencil(gn, 'ribbonRolled', dt).join(' ')),
this.createVertexTemplateEntry(
'html=1;shape=mxgraph.infographic.ribbonRolled;dx=185;dy=15;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;',
w * 2, h * 0.7, 'Label', 'Ribbon (rolled)', null, null, this.getTagsForStencil(gn, 'ribbonRolled', dt).join(' ')),
this.createVertexTemplateEntry(
'html=1;shape=mxgraph.infographic.ribbonDoubleFolded;dx=25;dy=15;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;',
w * 2, h * 0.7, 'Label', 'Ribbon (double folded)', null, null, this.getTagsForStencil(gn, 'ribbonDoubleFolded', dt).join(' ')),
this.createVertexTemplateEntry(
'html=1;shape=mxgraph.infographic.ribbonFrontFolded;dx=25;dy=15;notch=15;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;spacingTop=10;',
w * 2, h * 0.55, 'Label', 'Ribbon (front folded)', null, null, this.getTagsForStencil(gn, 'ribbonFrontFolded', dt).join(' ')),
this.createVertexTemplateEntry(
'html=1;shape=mxgraph.infographic.ribbonBackFolded;dx=25;dy=15;notch=15;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;spacingTop=10;',
w * 2, h * 0.55, 'Label', 'Ribbon (back folded)', null, null, this.getTagsForStencil(gn, 'ribbonBackFolded', dt).join(' ')),
this.createVertexTemplateEntry(
'html=1;shape=mxgraph.infographic.banner;dx=32;dy=17;notch=15;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;spacingBottom=15;',
w * 2.6, h * 0.7, 'Label', 'Banner', null, null, this.getTagsForStencil(gn, 'banner', dt).join(' ')),
this.createVertexTemplateEntry(
'html=1;shape=mxgraph.infographic.bannerSingleFold;dx=32;dx2=20;dy=17;notch=15;fillColor=#10739E;strokeColor=none;align=left;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;spacingBottom=15;spacingLeft=25;',
w * 2.6, h * 0.7, 'Label', 'Banner (single fold)', null, null, this.getTagsForStencil(gn, 'bannerSingleFold', dt).join(' ')),
this.createVertexTemplateEntry(
'html=1;shape=mxgraph.infographic.bannerHalfFold;dx=40;dx2=20;notch=15;fillColor=#10739E;strokeColor=none;align=left;verticalAlign=top;fontColor=#ffffff;fontSize=14;fontStyle=1;spacingLeft=25;spacingTop=5;',
w * 2, h * 2, 'Label', 'Banner (half fold)', null, null, this.getTagsForStencil(gn, 'bannerHalfFold', dt).join(' ')),
this.createVertexTemplateEntry(
'html=1;shape=mxgraph.infographic.barCallout;dx=100;dy=30;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=top;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=0;spacingTop=5;',
w * 2, h * 0.7, 'Label', 'Bar with callout', null, null, this.getTagsForStencil(gn, 'ribbonRolled', dt).join(' ')),
this.createVertexTemplateEntry(
'html=1;shape=mxgraph.infographic.flag;dx=30;dy=20;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=top;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=0;spacingTop=5;',
w * 2, h * 0.7, 'Label', 'Flag', null, null, this.getTagsForStencil(gn, 'flag', dt).join(' ')),
this.createVertexTemplateEntry(s2 + 'shadedTriangle;fillColor=#10739E;strokeColor=none;', w * 0.8, h, '', 'Triangle', null, null, this.getTagsForStencil(gn, 'shadedTriangle', dt).join(' ')),
this.createVertexTemplateEntry(s2 + 'shadedPyramid;fillColor=#10739E;strokeColor=none;', w * 0.6, h, '', 'Pyramid', null, null, this.getTagsForStencil(gn, 'shadedTriangle', dt).join(' ')),
this.createVertexTemplateEntry(s2 + 'pyramidStep;fillColor=#10739E;strokeColor=none;', w * 0.6, h, '', 'Pyramid step', null, null, this.getTagsForStencil(gn, 'pyramidStep', dt).join(' ')),
this.createVertexTemplateEntry(s2 + 'cylinder;fillColor=#10739E;strokeColor=none;', w * 0.6, h, '', 'Cylinder', null, null, this.getTagsForStencil(gn, 'cylinder', dt).join(' ')),
this.createVertexTemplateEntry(s2 + 'shadedCube;isoAngle=15;fillColor=#10739E;strokeColor=none;', w, h, '', 'Cube', null, null, this.getTagsForStencil(gn, 'shaded cube', dt).join(' ')),
this.createVertexTemplateEntry(
'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;shape=mxgraph.infographic.partConcEllipse;fillColor=#10739E;strokeColor=none;startAngle=0;endAngle=0.75;arcWidth=0.4;fontSize=20;fontColor=#10739E;align=center;fontStyle=1;',
w, h, '75%', 'Partial Concentric Ellipse', null, null, this.getTagsForStencil(gn, 'partConcEllipse', dt).join(' ')),
this.createVertexTemplateEntry(
'verticalLabelPosition=middle;verticalAlign=bottom;html=1;shape=mxgraph.infographic.circularDial;dy=15;fillColor=#10739E;strokeColor=none;labelPosition=center;align=center;fontStyle=1;fontSize=15;spacingBottom=5;',
w * 0.8, h * 1.1, 'Label', 'Circular Dial', null, null, this.getTagsForStencil(gn, 'circularDial', dt).join(' ')),
this.addEntry(dt + 'chevron list', function()
{
var button1 = new mxCell('LABEL', new mxGeometry(0, 0, 200, 30), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#10739E;strokeColor=none;fontSize=17;fontStyle=1;align=center;');
button1.vertex = true;
var button2 = new mxCell(' - Lorem ipsum dolor sit amet<br>' +
' - consectetur adipisicing elit<br>' +
' - sed do eiusmod tempor<br>' +
' - incididunt ut labore et dolore<br>' +
' - magna aliqua.',
new mxGeometry(0, 40, 190, 120), 'shape=rect;fillColor=#B1DDF0;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;');
button2.vertex = true;
return sb.createVertexTemplateFromCells([button1, button2], 200, 160, 'Chevron list');
}),
this.addEntry(dt + 'roadmap vertical', function()
{
var chevron1 = new mxCell('', new mxGeometry(0, 0, 70, 80), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;direction=south;fillColor=#10739E;strokeColor=none;rounded=0;');
chevron1.vertex = true;
var label1 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#10739E"><b>Label</b></font><br><br><font size="1">' +
'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>',
new mxGeometry(100, 0, 200, 70), 'rounded=1;strokeColor=none;fillColor=#DDDDDD;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;');
label1.vertex = true;
return sb.createVertexTemplateFromCells([chevron1, label1], 300, 70, 'Roadmap (vertical)');
}),
this.addEntry(dt + 'numbered entry', function()
{
var rect1 = new mxCell('Label', new mxGeometry(30, 10, 170, 40), 'shape=rect;rounded=1;whiteSpace=wrap;html=1;shadow=0;strokeColor=none;fillColor=#B1DDF0;arcSize=30;fontSize=14;spacingLeft=42;fontStyle=1;fontColor=#FFFFFF;align=left;');
rect1.vertex = true;
var ellipse1 = new mxCell('1', new mxGeometry(0, 0, 60, 60), 'shape=ellipse;perimeter=ellipsePerimeter;fontSize=22;fontStyle=1;shadow=0;strokeColor=#ffffff;fillColor=#10739E;strokeWidth=4;fontColor=#ffffff;align=center;');
ellipse1.vertex = true;
return sb.createVertexTemplateFromCells([rect1, ellipse1], 200, 60, 'Numbered Entry');
}),
this.createVertexTemplateEntry(mxConstants.STYLE_VERTICAL_LABEL_POSITION + '=middle;' + mxConstants.STYLE_VERTICAL_ALIGN + '=top;html=1;shape=mxgraph.infographic.numberedEntryVert;dy=25;fillColor=#10739E;strokeColor=none;fontSize=17;fontColor=#FFFFFF;align=center;labelPosition=center;spacingTop=32;fontStyle=1;', w * 0.8, h * 1.6, 'Label', 'Numbered Entry (vertical)', null, null, this.getTagsForStencil(gn, 'numberedEntryVert', dt).join(' ')),
this.createVertexTemplateEntry('verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.bendingArch;startAngle=0.75;endAngle=0.25;arcWidth=0.25;fillColor=#10739E;strokeColor=none;fontSize=19;fontColor=#FFFFFF;labelPosition=center;align=center;fontStyle=1', w, h, '50%', 'Bending Arch', null, null, this.getTagsForStencil(gn, 'bendingArch', dt).join(' ')),
this.createVertexTemplateEntry(
'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.circularCallout;dy=15;fillColor=#10739E;strokeColor=none;labelPosition=center;align=center;fontColor=#10739E;fontStyle=1;fontSize=24;',
w, h, '50%', 'Circular Callout', null, null, this.getTagsForStencil(gn, 'circularCallout', dt).join(' ')),
this.createVertexTemplateEntry(
'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.circularCallout2;dy=15;strokeColor=#10739E;labelPosition=center;align=center;fontColor=#10739E;fontStyle=1;fontSize=24;',
w * 0.6, h * 1.4, '', 'Circular Callout', null, null, this.getTagsForStencil(gn, 'circularCallout2', dt).join(' ')),
this.addEntry(dt + 'circular dial', function()
{
var part1 = new mxCell('', new mxGeometry(0, 0, 100, 100), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.donut;dx=10;strokeColor=none;fillColor=#10739E;fontSize=10;align=center;fillOpacity=20;');
part1.vertex = true;
var part2 = new mxCell('65%', new mxGeometry(0, 0, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0;endAngle=0.65;arcWidth=0.2;strokeColor=none;fillColor=#10739E;fontSize=22;fontColor=#10739E;align=center;fontStyle=1');
part2.vertex = true;
part1.insert(part2);
return sb.createVertexTemplateFromCells([part1], part1.geometry.width, part1.geometry.height, 'Circular Dial');
}),
this.addEntry(dt + 'angled entry', function()
{
var part1 = new mxCell('1', new mxGeometry(0, 0, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#10739E;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;');
part1.vertex = true;
var part2 = new mxCell('Label', new mxGeometry(45, 0, 95, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#B1DDF0;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;');
part2.vertex = true;
return sb.createVertexTemplateFromCells([part1, part2], 140, 30, 'Angled Entry');
}),
this.addEntry(dt + 'chevron list', function()
{
var str1 = ' - Lorem ipsum dolor sit amet<br>' +
' - consectetur adipisicing elit<br>' +
' - sed do eiusmod tempor<br>' +
' - incididunt ut labore et dolore<br>' +
' - magna aliqua.';
var chrevron1 = new mxCell('LABEL', new mxGeometry(0, 0, 200, 30), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#10739E;strokeColor=none;fontSize=17;fontColor=#FFFFFF;fontStyle=1;align=center;rounded=0;');
chrevron1.vertex = true;
var process1 = new mxCell(str1, new mxGeometry(0, 40, 190, 120),
'shape=rect;fillColor=#B1DDF0;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;');
process1.vertex = true;
var process2 = new mxCell(str1,
new mxGeometry(0, 170, 190, 120), 'shape=rect;fillColor=#B1DDF0;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;');
process2.vertex = true;
var process3 = new mxCell(str1,
new mxGeometry(0, 300, 190, 120), 'shape=rect;fillColor=#B1DDF0;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;');
process3.vertex = true;
var chrevron2 = new mxCell('LABEL', new mxGeometry(200, 0, 200, 30), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#F2931E;strokeColor=none;fontSize=17;fontColor=#FFFFFF;fontStyle=1;align=center;rounded=0;');
chrevron2.vertex = true;
var process4 = new mxCell(str1,
new mxGeometry(200, 40, 190, 120), 'shape=rect;fillColor=#FCE7CD;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;');
process4.vertex = true;
var process5 = new mxCell(str1,
new mxGeometry(200, 170, 190, 120), 'shape=rect;fillColor=#FCE7CD;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;');
process5.vertex = true;
var process6 = new mxCell(str1,
new mxGeometry(200, 300, 190, 120), 'shape=rect;fillColor=#FCE7CD;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;');
process6.vertex = true;
var chrevron3 = new mxCell('LABEL', new mxGeometry(400, 0, 200, 30), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#AE4132;strokeColor=none;fontSize=17;fontColor=#FFFFFF;fontStyle=1;align=center;rounded=0;');
chrevron3.vertex = true;
var process7 = new mxCell(str1,
new mxGeometry(400, 40, 190, 120), 'shape=rect;fillColor=#FAD9D5;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;');
process7.vertex = true;
var process8 = new mxCell(str1,
new mxGeometry(400, 170, 190, 120), 'shape=rect;fillColor=#FAD9D5;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;');
process8.vertex = true;
var process9 = new mxCell(str1,
new mxGeometry(400, 300, 190, 120), 'shape=rect;fillColor=#FAD9D5;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;');
process9.vertex = true;
var chrevron4 = new mxCell('LABEL', new mxGeometry(600, 0, 200, 30), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#23445D;strokeColor=none;fontSize=17;fontColor=#FFFFFF;fontStyle=1;align=center;rounded=0;');
chrevron4.vertex = true;
var process10 = new mxCell(str1,
new mxGeometry(600, 40, 190, 120), 'shape=rect;fillColor=#BAC8D3;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;');
process10.vertex = true;
var process11 = new mxCell(str1,
new mxGeometry(600, 170, 190, 120), 'shape=rect;fillColor=#BAC8D3;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;');
process11.vertex = true;
var process12 = new mxCell(str1,
new mxGeometry(600, 300, 190, 120), 'shape=rect;fillColor=#BAC8D3;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;');
process12.vertex = true;
var chrevron5 = new mxCell('LABEL', new mxGeometry(800, 0, 200, 30), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#12AAB5;strokeColor=none;fontSize=17;fontColor=#FFFFFF;fontStyle=1;align=center;rounded=0;');
chrevron5.vertex = true;
var process13 = new mxCell(str1,
new mxGeometry(800, 40, 190, 120), 'shape=rect;fillColor=#B0E3E6;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;');
process13.vertex = true;
var process14 = new mxCell(str1,
new mxGeometry(800, 170, 190, 120), 'shape=rect;fillColor=#B0E3E6;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;');
process14.vertex = true;
var process15 = new mxCell(str1,
new mxGeometry(800, 300, 190, 120), 'shape=rect;fillColor=#B0E3E6;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;');
process15.vertex = true;
return sb.createVertexTemplateFromCells([chrevron1, chrevron2, chrevron3, chrevron4, chrevron5, process1, process2, process3, process4, process5, process6, process7, process8, process9, process10, process11, process12, process13, process14, process15], 1000, 420, 'Chevron list');
}),
this.addEntry(dt + 'roadmap vertical', function()
{
var chevron1 = new mxCell('', new mxGeometry(0, 0, 70, 80), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;direction=south;fillColor=#10739E;strokeColor=none;rounded=0;');
chevron1.vertex = true;
var label1 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#10739E"><b>Label</b></font><br><br><font size="1">' +
'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>',
new mxGeometry(100, 0, 200, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;');
label1.vertex = true;
var chevron2 = new mxCell('', new mxGeometry(0, 80, 70, 80), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;direction=south;fillColor=#F2931E;strokeColor=none;rounded=0;');
chevron2.vertex = true;
var label2 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#F2931E"><b>Label</b></font><br><br><font size="1">' +
'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>',
new mxGeometry(100, 80, 200, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;');
label2.vertex = true;
var chevron3 = new mxCell('', new mxGeometry(0, 160, 70, 80), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;direction=south;fillColor=#AE4132;strokeColor=none;rounded=0;');
chevron3.vertex = true;
var label3 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#AE4132"><b>Label</b></font><br><br><font size="1">' +
'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>',
new mxGeometry(100, 160, 200, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;');
label3.vertex = true;
var chevron4 = new mxCell('', new mxGeometry(0, 240, 70, 80), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;direction=south;fillColor=#23445D;strokeColor=none;rounded=0;');
chevron4.vertex = true;
var label4 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#23445D"><b>Label</b></font><br><br><font size="1">' +
'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>',
new mxGeometry(100, 240, 200, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;');
label4.vertex = true;
var chevron5 = new mxCell('', new mxGeometry(0, 320, 70, 80), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;direction=south;fillColor=#12AAB5;strokeColor=none;rounded=0;');
chevron5.vertex = true;
var label5 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#12AAB5"><b>Label</b></font><br><br><font size="1">' +
'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>',
new mxGeometry(100, 320, 200, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;');
label5.vertex = true;
return sb.createVertexTemplateFromCells([chevron1, chevron2, chevron3, chevron4, chevron5, label1, label2, label3, label4, label5], 300, 400, 'Roadmap (vertical)');
}),
this.addEntry(dt + 'numbered list', function()
{
var rect1 = new mxCell('Label', new mxGeometry(30, 10, 220, 40), 'shape=rect;rounded=1;whiteSpace=wrap;html=1;shadow=0;strokeColor=none;fillColor=#64BBE2;arcSize=30;fontSize=14;spacingLeft=42;fontStyle=1;fontColor=#FFFFFF;align=left;');
rect1.vertex = true;
var ellipse1 = new mxCell('1', new mxGeometry(0, 0, 60, 60), 'shape=ellipse;perimeter=ellipsePerimeter;fontSize=22;fontStyle=1;shadow=0;strokeColor=#ffffff;fillColor=#10739E;strokeWidth=4;fontColor=#ffffff;align=center;');
ellipse1.vertex = true;
var rect2 = new mxCell('Label', new mxGeometry(30, 75, 220, 40), 'shape=rect;rounded=1;whiteSpace=wrap;html=1;shadow=0;strokeColor=none;fillColor=#F8C382;arcSize=30;fontSize=14;spacingLeft=42;fontStyle=1;fontColor=#FFFFFF;align=left;');
rect2.vertex = true;
var ellipse2 = new mxCell('2', new mxGeometry(0, 65, 60, 60), 'shape=ellipse;perimeter=ellipsePerimeter;fontSize=22;fontStyle=1;shadow=0;strokeColor=#ffffff;fillColor=#F2931E;strokeWidth=4;fontColor=#ffffff;align=center;');
ellipse2.vertex = true;
var rect3 = new mxCell('Label', new mxGeometry(30, 140, 220, 40), 'shape=rect;rounded=1;whiteSpace=wrap;html=1;shadow=0;strokeColor=none;fillColor=#F08E81;arcSize=30;fontSize=14;spacingLeft=42;fontStyle=1;fontColor=#FFFFFF;align=left;');
rect3.vertex = true;
var ellipse3 = new mxCell('3', new mxGeometry(0, 130, 60, 60), 'shape=ellipse;perimeter=ellipsePerimeter;fontSize=22;fontStyle=1;shadow=0;strokeColor=#ffffff;fillColor=#AE4132;strokeWidth=4;fontColor=#ffffff;align=center;');
ellipse3.vertex = true;
var rect4 = new mxCell('Label', new mxGeometry(30, 205, 220, 40), 'shape=rect;rounded=1;whiteSpace=wrap;html=1;shadow=0;strokeColor=none;fillColor=#5D7F99;arcSize=30;fontSize=14;spacingLeft=42;fontStyle=1;fontColor=#FFFFFF;align=left;');
rect4.vertex = true;
var ellipse4 = new mxCell('4', new mxGeometry(0, 195, 60, 60), 'shape=ellipse;perimeter=ellipsePerimeter;fontSize=22;fontStyle=1;shadow=0;strokeColor=#ffffff;fillColor=#23445D;strokeWidth=4;fontColor=#ffffff;align=center;');
ellipse4.vertex = true;
var rect5 = new mxCell('Label', new mxGeometry(30, 270, 220, 40), 'shape=rect;rounded=1;whiteSpace=wrap;html=1;shadow=0;strokeColor=none;fillColor=#61C6CE;arcSize=30;fontSize=14;spacingLeft=42;fontStyle=1;fontColor=#FFFFFF;align=left;');
rect5.vertex = true;
var ellipse5 = new mxCell('5', new mxGeometry(0, 260, 60, 60), 'shape=ellipse;perimeter=ellipsePerimeter;fontSize=22;fontStyle=1;shadow=0;strokeColor=#ffffff;fillColor=#12AAB5;strokeWidth=4;fontColor=#ffffff;align=center;');
ellipse5.vertex = true;
return sb.createVertexTemplateFromCells([rect1, ellipse1, rect2, ellipse2, rect3, ellipse3, rect4, ellipse4, rect5, ellipse5], 200, 320, 'Numbered List');
}),
this.addEntry(dt + 'list', function()
{
var st1 = mxConstants.STYLE_VERTICAL_LABEL_POSITION + '=middle;' + mxConstants.STYLE_VERTICAL_ALIGN + '=top;html=1;shape=mxgraph.infographic.numberedEntryVert;dy=25;strokeColor=none;fontSize=17;fontColor=#FFFFFF;align=center;labelPosition=center;spacingTop=32;fontStyle=1;fillColor=#'
var item1 = new mxCell('Label', new mxGeometry(0, 0, 80, 160), st1 + '10739E;');
item1.vertex = true;
var item2 = new mxCell('Label', new mxGeometry(85, 0, 80, 160), st1 + 'F2931E;');
item2.vertex = true;
var item3 = new mxCell('Label', new mxGeometry(170, 0, 80, 160), st1 + 'AE4132;');
item3.vertex = true;
var item4 = new mxCell('Label', new mxGeometry(255, 0, 80, 160), st1 + '23445D;');
item4.vertex = true;
var item5 = new mxCell('Label', new mxGeometry(340, 0, 80, 160), st1 + '12AAB5;');
item5.vertex = true;
return sb.createVertexTemplateFromCells([item1, item2, item3, item4, item5], 420, 160, 'List');
}),
this.addEntry(dt + 'rodmap horizontal', function()
{
var arch1 = new mxCell('', new mxGeometry(0, 90, 120, 120), s4 + 'partConcEllipse;startAngle=0.25;endAngle=0.75;arcWidth=0.25;fillColor=#10739E;strokeColor=none;');
arch1.vertex = true;
var arch2 = new mxCell('', new mxGeometry(105, 90, 120, 120), s4 + 'partConcEllipse;startAngle=0.75;endAngle=0.25;arcWidth=0.25;fillColor=#F2931E;strokeColor=none;');
arch2.vertex = true;
var arch3 = new mxCell('', new mxGeometry(210, 90, 120, 120), s4 + 'partConcEllipse;startAngle=0.25;endAngle=0.75;arcWidth=0.25;fillColor=#AE4132;strokeColor=none;');
arch3.vertex = true;
var arch4 = new mxCell('', new mxGeometry(315, 90, 120, 120), s4 + 'partConcEllipse;startAngle=0.75;endAngle=0.25;arcWidth=0.25;fillColor=#23445D;strokeColor=none;');
arch4.vertex = true;
var arch5 = new mxCell('', new mxGeometry(420, 90, 120, 120), s4 + 'partConcEllipse;startAngle=0.25;endAngle=0.75;arcWidth=0.25;fillColor=#15AA96;strokeColor=none;');
arch5.vertex = true;
var circle1 = new mxCell('1', new mxGeometry(35, 125, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#10739E;fontSize=15;html=0;fontStyle=1;fontColor=#10739E;');
circle1.vertex = true;
var circle2 = new mxCell('2', new mxGeometry(140, 125, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#F2931E;fontSize=15;html=0;fontStyle=1;fontColor=#F2931E;');
circle2.vertex = true;
var circle3 = new mxCell('3', new mxGeometry(245, 125, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#AE4132;fontSize=15;html=0;fontStyle=1;fontColor=#AE4132;');
circle3.vertex = true;
var circle4 = new mxCell('4', new mxGeometry(350, 125, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#23445D;fontSize=15;html=0;fontStyle=1;fontColor=#23445D;');
circle4.vertex = true;
var circle5 = new mxCell('5', new mxGeometry(455, 125, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#12AAB5;fontSize=15;html=0;fontStyle=1;fontColor=#12AAB5;');
circle5.vertex = true;
var label1 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#10739E"><b>Label</b></font><br><br><font size="1">' +
'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>',
new mxGeometry(0, 220, 120, 80), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;');
label1.vertex = true;
var label2 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#F2931E"><b>Label</b></font><br><br><font size="1">' +
'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>',
new mxGeometry(105, 0, 120, 80), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;');
label2.vertex = true;
var label3 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#AE4132"><b>Label</b></font><br><br><font size="1">' +
'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>',
new mxGeometry(210, 220, 120, 80), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;');
label3.vertex = true;
var label4 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#23445D"><b>Label</b></font><br><br><font size="1">' +
'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>',
new mxGeometry(315, 0, 120, 80), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;');
label4.vertex = true;
var label5 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#12AAB5"><b>Label</b></font><br><br><font size="1">' +
'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>',
new mxGeometry(420, 220, 120, 80), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;');
label5.vertex = true;
return sb.createVertexTemplateFromCells([arch1, arch2, arch3, arch4, arch5, circle1, circle2, circle3, circle4, circle5, label1, label2, label3, label4, label5], 540, 300, 'Roadmap (horizontal)');
}),
this.addEntry(dt + 'roadmap diagonal', function()
{
var arch1 = new mxCell('', new mxGeometry(190, 0, 120, 120), s4 + 'partConcEllipse;startAngle=0.75;endAngle=0.5;arcWidth=0.25;fillColor=#10739E;strokeColor=none;shadow=0;');
arch1.vertex = true;
var arch2 = new mxCell('', new mxGeometry(190, 105, 120, 120), s4 + 'partConcEllipse;startAngle=0.25;endAngle=0;arcWidth=0.25;fillColor=#F2931E;strokeColor=none;shadow=0;');
arch2.vertex = true;
var arch3 = new mxCell('', new mxGeometry(295, 105, 120, 120), s4 + 'partConcEllipse;startAngle=0.75;endAngle=0.5;arcWidth=0.25;fillColor=#AE4132;strokeColor=none;shadow=0;');
arch3.vertex = true;
var arch4 = new mxCell('', new mxGeometry(295, 210, 120, 120), s4 + 'partConcEllipse;startAngle=0.25;endAngle=0;arcWidth=0.25;fillColor=#23445D;strokeColor=none;shadow=0;');
arch4.vertex = true;
var arch5 = new mxCell('', new mxGeometry(400, 210, 120, 120), s4 + 'partConcEllipse;startAngle=0.75;endAngle=0.5;arcWidth=0.25;fillColor=#12AAB5;strokeColor=none;shadow=0;');
arch5.vertex = true;
var circle1 = new mxCell('1', new mxGeometry(225, 35, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#10739E;fontSize=15;html=1;fontStyle=1;fontColor=#10739E;shadow=1;');
circle1.vertex = true;
var circle2 = new mxCell('2', new mxGeometry(225, 140, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#F2931E;fontSize=15;html=1;fontStyle=1;fontColor=#F2931E;shadow=1;');
circle2.vertex = true;
var circle3 = new mxCell('3', new mxGeometry(330, 140, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#AE4132;fontSize=15;html=1;fontStyle=1;fontColor=#AE4132;shadow=1;');
circle3.vertex = true;
var circle4 = new mxCell('4', new mxGeometry(330, 245, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#23445D;fontSize=15;html=1;fontStyle=1;fontColor=#23445D;shadow=1;');
circle4.vertex = true;
var circle5 = new mxCell('5', new mxGeometry(435, 245, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#12AAB5;fontSize=15;html=1;fontStyle=1;fontColor=#12AAB5;shadow=1;');
circle5.vertex = true;
var label1 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#10739E"><b>Label</b></font><br><br><font size="1">' +
'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>',
new mxGeometry(320, 20, 180, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=3;shadow=0;');
label1.vertex = true;
var label2 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#F2931E"><b>Label</b></font><br><br><font size="1">' +
'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>',
new mxGeometry(0, 130, 180, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=3;shadow=0;');
label2.vertex = true;
var label3 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#AE4132"><b>Label</b></font><br><br><font size="1">' +
'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>',
new mxGeometry(425, 130, 180, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=3;shadow=0;');
label3.vertex = true;
var label4 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#23445D"><b>Label</b></font><br><br><font size="1">' +
'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>',
new mxGeometry(105, 235, 180, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=3;shadow=0;');
label4.vertex = true;
var label5 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#12AAB5"><b>Label</b></font><br><br><font size="1">' +
'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>',
new mxGeometry(530, 235, 180, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=3;shadow=0;');
label5.vertex = true;
return sb.createVertexTemplateFromCells([arch1, arch2, arch3, arch4, arch5, circle1, circle2, circle3, circle4, circle5, label1, label2, label3, label4, label5], 710, 330, 'Roadmap (diagonal)');
}),
this.addEntry(dt + 'arrow list', function()
{
var part1 = new mxCell('1', new mxGeometry(0, 0, 40, 40), 'html=1;fillColor=#10739E;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;rounded=0;');
part1.vertex = true;
var part2 = new mxCell('Label', new mxGeometry(45, 0, 95, 40), 'shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=10;notch=0;html=1;fillColor=#64BBE2;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;');
part2.vertex = true;
var part3 = new mxCell('2', new mxGeometry(0, 45, 40, 40), 'html=1;fillColor=#F2931E;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;rounded=0;');
part3.vertex = true;
var part4 = new mxCell('Label', new mxGeometry(45, 45, 115, 40), 'shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=10;notch=0;html=1;fillColor=#F8C382;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;');
part4.vertex = true;
var part5 = new mxCell('3', new mxGeometry(0, 90, 40, 40), 'html=1;fillColor=#AE4132;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;rounded=0;');
part5.vertex = true;
var part6 = new mxCell('Label', new mxGeometry(45, 90, 135, 40), 'shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=10;notch=0;html=1;fillColor=#F08E81;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;');
part6.vertex = true;
var part7 = new mxCell('4', new mxGeometry(0, 135, 40, 40), 'html=1;fillColor=#23445D;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;rounded=0;');
part7.vertex = true;
var part8 = new mxCell('Label', new mxGeometry(45,135, 155, 40), 'shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=10;notch=0;html=1;fillColor=#5D7F99;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;');
part8.vertex = true;
var part9 = new mxCell('5', new mxGeometry(0, 180, 40, 40), 'html=1;fillColor=#12AAB5;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;rounded=0;');
part9.vertex = true;
var part10 = new mxCell('Label', new mxGeometry(45, 180, 175, 40), 'shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=10;notch=0;html=1;fillColor=#61C6CE;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;');
part10.vertex = true;
return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7, part8, part9, part10], 220, 220, 'Arrow List');
}),
this.addEntry(dt + 'angled list', function()
{
var part1 = new mxCell('1', new mxGeometry(0, 0, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#10739E;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;');
part1.vertex = true;
var part2 = new mxCell('Label', new mxGeometry(45, 0, 95, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#64BBE2;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;');
part2.vertex = true;
var part3 = new mxCell('2', new mxGeometry(0, 35, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#F2931E;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;');
part3.vertex = true;
var part4 = new mxCell('Label', new mxGeometry(45, 35, 115, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#F8C382;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;');
part4.vertex = true;
var part5 = new mxCell('3', new mxGeometry(0, 70, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#AE4132;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;');
part5.vertex = true;
var part6 = new mxCell('Label', new mxGeometry(45, 70, 135, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#F08E81;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;');
part6.vertex = true;
var part7 = new mxCell('4', new mxGeometry(0, 105, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#23445D;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;');
part7.vertex = true;
var part8 = new mxCell('Label', new mxGeometry(45, 105, 155, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#5D7F99;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;');
part8.vertex = true;
var part9 = new mxCell('5', new mxGeometry(0, 140, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#12AAB5;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;');
part9.vertex = true;
var part10 = new mxCell('Label', new mxGeometry(45, 140, 175, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#61C6CE;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;');
part10.vertex = true;
return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7, part8, part9, part10], 220, 170, 'Angled List');
}),
this.addEntry(dt + 'angled list', function()
{
var part1 = new mxCell('1', new mxGeometry(200, 0, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#10739E;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;');
part1.vertex = true;
var part2 = new mxCell('Label', new mxGeometry(245, 0, 145, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#64BBE2;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;');
part2.vertex = true;
var part3 = new mxCell('2', new mxGeometry(150, 35, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#F2931E;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;');
part3.vertex = true;
var part4 = new mxCell('Label', new mxGeometry(195, 35, 145, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#F8C382;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;');
part4.vertex = true;
var part5 = new mxCell('3', new mxGeometry(100, 70, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#AE4132;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;');
part5.vertex = true;
var part6 = new mxCell('Label', new mxGeometry(145, 70, 145, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#F08E81;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;');
part6.vertex = true;
var part7 = new mxCell('4', new mxGeometry(50, 105, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#23445D;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;');
part7.vertex = true;
var part8 = new mxCell('Label', new mxGeometry(95, 105, 145, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#5D7F99;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;');
part8.vertex = true;
var part9 = new mxCell('5', new mxGeometry(0, 140, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#12AAB5;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;');
part9.vertex = true;
var part10 = new mxCell('Label', new mxGeometry(45, 140, 145, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#61C6CE;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;');
part10.vertex = true;
return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7, part8, part9, part10], 390, 170, 'Angled List');
}),
this.addEntry(dt + 'matrix', function()
{
var part1 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(35, 35, 100, 100), 'html=1;fillColor=#10739E;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;');
part1.vertex = true;
var part2 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(140, 35, 100, 100), 'html=1;fillColor=#F2931E;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;');
part2.vertex = true;
var part3 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(35, 140, 100, 100), 'html=1;fillColor=#AE4132;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;');
part3.vertex = true;
var part4 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(140, 140, 100, 100), 'html=1;fillColor=#23445D;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;');
part4.vertex = true;
var part5 = new mxCell('Label', new mxGeometry(0, 35, 30, 100), 'html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;horizontal=0;rounded=0;');
part5.vertex = true;
var part6 = new mxCell('Label', new mxGeometry(0, 140, 30, 100), 'html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;horizontal=0;rounded=0;');
part6.vertex = true;
var part7 = new mxCell('Label', new mxGeometry(35, 0, 100, 30), 'html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;rounded=0;');
part7.vertex = true;
var part8 = new mxCell('Label', new mxGeometry(140, 0, 100, 30), 'html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;rounded=0;');
part8.vertex = true;
return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7, part8], 240, 240, 'Matrix (2x2)');
}),
this.addEntry(dt + 'matrix', function()
{
var part1 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(35, 35, 100, 100), 'shape=mxgraph.basic.three_corner_round_rect;dx=18;flipH=1;html=1;fillColor=#10739E;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;');
part1.vertex = true;
var part2 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(140, 35, 100, 100), 'shape=mxgraph.basic.three_corner_round_rect;dx=18;html=1;fillColor=#F2931E;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;');
part2.vertex = true;
var part3 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(35, 140, 100, 100), 'shape=mxgraph.basic.three_corner_round_rect;dx=18;flipH=1;flipV=1;html=1;fillColor=#AE4132;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;');
part3.vertex = true;
var part4 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(140, 140, 100, 100), 'shape=mxgraph.basic.three_corner_round_rect;dx=18;flipV=1;html=1;fillColor=#23445D;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;');
part4.vertex = true;
var part5 = new mxCell('Label', new mxGeometry(0, 45, 30, 80), 'rounded=1;arcSize=50;html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;horizontal=0;');
part5.vertex = true;
var part6 = new mxCell('Label', new mxGeometry(0, 150, 30, 80), 'rounded=1;arcSize=50;html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;horizontal=0;');
part6.vertex = true;
var part7 = new mxCell('Label', new mxGeometry(45, 0, 80, 30), 'rounded=1;arcSize=50;html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;');
part7.vertex = true;
var part8 = new mxCell('Label', new mxGeometry(150, 0, 80, 30), 'rounded=1;arcSize=50;html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;');
part8.vertex = true;
return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7, part8], 240, 240, 'Matrix (2x2)');
}),
this.addEntry(dt + 'matrix', function()
{
var part11 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(35, 35, 100, 100), 'html=1;fillColor=#F2931E;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;');
part11.vertex = true;
var part12 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(140, 35, 100, 100), 'html=1;fillColor=#F5AB50;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;');
part12.vertex = true;
var part13 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(245, 35, 100, 100), 'html=1;fillColor=#F8C382;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;');
part13.vertex = true;
var part21 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(35, 140, 100, 100), 'html=1;fillColor=#444444;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;');
part21.vertex = true;
var part22 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(140, 140, 100, 100), 'html=1;fillColor=#777777;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;');
part22.vertex = true;
var part23 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(245, 140, 100, 100), 'html=1;fillColor=#909090;strokeColor=non