drawio-offline
Version:
diagrams.net desktop
620 lines (571 loc) • 332 kB
JavaScript
(function()
{
// Adds Bootstrap shapes
Sidebar.prototype.addBootstrapPalette = function()
{
var s = 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.';
var s2 = 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;shape=mxgraph.bootstrap.rect;';
var inh = 'strokeColor=inherit;fillColor=inherit;gradientColor=inherit;fontColor=inherit;';
var gn = 'mxgraph.bootstrap';
var dt = 'bootstrap ';
var sb = this;
this.setCurrentSearchEntryLibrary('bootstrap');
var fns = [
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#B8DCFE;strokeWidth=1;fillColor=#CCE7FE;fontColor=#004583;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;',
800, 40, 'A simple primary alert!', 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#D6D8DB;strokeWidth=1;fillColor=#E2E3E5;fontColor=#383D41;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;',
800, 40, 'A simple secondary alert!', 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#E0F0D6;fontColor=#59B958;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;',
800, 40, 'A simple success alert!', 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#F4C5CB;strokeWidth=1;fillColor=#F8D6DA;fontColor=#711623;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;',
800, 40, 'A simple danger alert!', 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#FFECBC;strokeWidth=1;fillColor=#FFF1CF;fontColor=#856110;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;',
800, 40, 'A simple warning alert!', 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#BFE6EB;strokeWidth=1;fillColor=#D1EDF1;fontColor=#0E5560;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;',
800, 40, 'A simple info alert!', 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#FDFDFE;strokeWidth=1;fillColor=#FEFEFE;fontColor=#818182;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;',
800, 40, 'A simple light alert!', 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#C6C8CA;strokeWidth=1;fillColor=#D6D8D9;fontColor=#1B1E21;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;',
800, 40, 'A simple dark alert!', 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#E0F0D6;fontColor=#59B958;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=20;',
800, 210,
'<font size="1"><b style="font-size: 18px">Title</b></font><br><br><font style="font-size: 14px"><span style="font-family: "open sans" , "arial" , sans-serif ; text-align: justify">' +
'<font style="font-size: 14px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ' +
'ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt ' +
'in culpa qui officia deserunt mollit anim id est laborum.</font></span><br><br></font><hr style="border: 1px solid rgb(89 , 185 , 88); font-size: 14px"><font style="font-size: 14px"><br>' +
'<span style="font-family: "open sans" , "arial" , sans-serif ; text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et ' +
'dolore magna aliqua.</span></font>',
'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;fontStyle=1;fontSize=18;',
60, 40, 'New', 'Badge', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge').join(' ')),
this.addEntry(dt + 'alert', function()
{
var bg = new mxCell(
'Notifications',
new mxGeometry(0, 0, 130, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#0085FC;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;fontStyle=0;fontSize=14;');
bg.vertex = true;
var button1 = new mxCell('4', new mxGeometry(1, 0.5, 20, 20), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#ffffff;fontColor=#000000;whiteSpace=wrap;align=center;verticalAlign=middle;fontSize=12;');
button1.geometry.relative = true;
button1.geometry.offset = new mxPoint(-30, -10);
button1.vertex = true;
bg.insert(button1);
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Badge');
}),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#0085FC;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;',
60, 20, 'Primary', 'Badge, primary', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge primary').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;',
80, 20, 'Secondary', 'Badge, secondary', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge secondary').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#33A64C;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;',
65, 20, 'Success', 'Badge, success', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge success').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#DB2843;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;',
60, 20, 'Danger', 'Badge, danger', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge danger').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#FFBC26;fontColor=#000000;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;',
65, 20, 'Warning', 'Badge, warning', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge warning').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#1CA5B8;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;',
35, 20, 'Info', 'Badge, info', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge info').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#F8F9FA;fontColor=#000000;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;',
45, 20, 'Light', 'Badge, light', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge light').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#343A40;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;',
40, 20, 'Dark', 'Badge, dark', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge dark').join(' ')),
this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#0085FC;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;',
70, 20, 'Primary', 'Pill badge, primary', null, null, this.getTagsForStencil(gn, 'badge', dt + 'pill badge primary').join(' ')),
this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;',
90, 20, 'Secondary', 'Pill badge, secondary', null, null, this.getTagsForStencil(gn, 'badge', dt + 'pill badge secondary').join(' ')),
this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#33A64C;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;',
75, 20, 'Success', 'Pill badge, success', null, null, this.getTagsForStencil(gn, 'badge', dt + 'pill badge success').join(' ')),
this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#DB2843;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;',
65, 20, 'Danger', 'Pill badge, danger', null, null, this.getTagsForStencil(gn, 'badge', dt + 'pill badge danger').join(' ')),
this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#FFBC26;fontColor=#000000;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;',
75, 20, 'Warning', 'Pill badge, warning', null, null, this.getTagsForStencil(gn, 'badge', dt + 'pill badge warning').join(' ')),
this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#1CA5B8;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;',
45, 20, 'Info', 'Pill badge, info', null, null, this.getTagsForStencil(gn, 'badge', dt + 'pill badge info').join(' ')),
this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#F8F9FA;fontColor=#000000;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;',
55, 20, 'Light', 'Pill badge, light', null, null, this.getTagsForStencil(gn, 'badge', dt + 'pill badge light').join(' ')),
this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#343A40;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;',
50, 20, 'Dark', 'Pill badge, dark', null, null, this.getTagsForStencil(gn, 'badge', dt + 'pill badge dark').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#E9ECEF;fontColor=#6C757D;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=14;spacing=10;',
800, 40, 'Home', 'Breadcrumb, one level', null, null, this.getTagsForStencil(gn, 'breadcrumb', dt + 'breadcrumb one level').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#E9ECEF;fontColor=#6C757D;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=14;spacing=10;',
800, 40, '<font color="#0085fc">Home</font> / Library', 'Breadcrumb, two level', null, null, this.getTagsForStencil(gn, 'breadcrumb', dt + 'breadcrumb two level').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#E9ECEF;fontColor=#6C757D;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=14;spacing=10;',
800, 40, '<font color="#0085fc">Home</font> / <font color="#0085fc">Library</font> / Data', 'Breadcrumb, three level', null, null, this.getTagsForStencil(gn, 'breadcrumb', dt + 'breadcrumb three level').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#0085FC;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
80, 40, 'Primary', 'Button, primary', null, null, this.getTagsForStencil(gn, 'button', dt + 'button primary').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
100, 40, 'Secondary', 'Button, secondary', null, null, this.getTagsForStencil(gn, 'button', dt + 'button secondary').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#33A64C;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
90, 40, 'Success', 'Button, success', null, null, this.getTagsForStencil(gn, 'button', dt + 'button success').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#DB2843;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
80, 40, 'Danger', 'Button, danger', null, null, this.getTagsForStencil(gn, 'button', dt + 'button danger').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#FFBC26;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
90, 40, 'Warning', 'Button, warning', null, null, this.getTagsForStencil(gn, 'button', dt + 'button warning').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#1CA5B8;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
50, 40, 'Info', 'Button, info', null, null, this.getTagsForStencil(gn, 'button', dt + 'button info').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#F8F9FA;fontColor=#000000;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
60, 40, 'Light', 'Button, light', null, null, this.getTagsForStencil(gn, 'button', dt + 'button light').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#343A40;fontColor=#ffffff;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
60, 40, 'Dark', 'Button, dark', null, null, this.getTagsForStencil(gn, 'button', dt + 'button dark').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=none;fontColor=#0085FC;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
60, 40, 'Link', 'Button, link', null, null, this.getTagsForStencil(gn, 'button', dt + 'button link').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#0085FC;strokeWidth=1;fillColor=none;fontColor=#0085FC;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
80, 40, 'Primary', 'Button, primary', null, null, this.getTagsForStencil(gn, 'button', dt + 'button primary').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#6C767D;strokeWidth=1;fillColor=none;fontColor=#6C767D;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
100, 40, 'Secondary', 'Button, secondary', null, null, this.getTagsForStencil(gn, 'button', dt + 'button secondary').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#33A64C;strokeWidth=1;fillColor=none;fontColor=#33A64C;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
90, 40, 'Success', 'Button, success', null, null, this.getTagsForStencil(gn, 'button', dt + 'button success').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#DB2843;strokeWidth=1;fillColor=none;fontColor=#DB2843;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
80, 40, 'Danger', 'Button, danger', null, null, this.getTagsForStencil(gn, 'button', dt + 'button danger').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#FFBC26;strokeWidth=1;fillColor=none;fontColor=#FFBC26;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
90, 40, 'Warning', 'Button, warning', null, null, this.getTagsForStencil(gn, 'button', dt + 'button warning').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#1CA5B8;strokeWidth=1;fillColor=none;fontColor=#1CA5B8;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
50, 40, 'Info', 'Button, info', null, null, this.getTagsForStencil(gn, 'button', dt + 'button info').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#F8F9FA;strokeWidth=1;fillColor=none;fontColor=#F8F9FA;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
60, 40, 'Light', 'Button, light', null, null, this.getTagsForStencil(gn, 'button', dt + 'button light').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#343A40;strokeWidth=1;fillColor=none;fontColor=#343A40;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
60, 40, 'Dark', 'Button, dark', null, null, this.getTagsForStencil(gn, 'button', dt + 'button dark').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#0085FC;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
800, 40, 'Block level button', 'Block level button', null, null, this.getTagsForStencil(gn, 'button', dt + 'button block level').join(' ')),
this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
800, 40, 'Block level button', 'Block level button', null, null, this.getTagsForStencil(gn, 'button', dt + 'button block level').join(' ')),
this.addEntry(dt + 'button group horizontal', function()
{
var bg = new mxCell('', new mxGeometry(0, 0, 180, 30), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;');
bg.vertex = true;
var button1 = new mxCell('Left', new mxGeometry(0, 0, 60, 30), inh + s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button1.geometry.relative = true;
button1.vertex = true;
bg.insert(button1);
var button2 = new mxCell('Middle', new mxGeometry(0, 0, 60, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button2.geometry.relative = true;
button2.geometry.offset = new mxPoint(60, 0);
button2.vertex = true;
bg.insert(button2);
var button3 = new mxCell('Right', new mxGeometry(1, 0, 60, 30), inh + s + 'rightButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button3.geometry.relative = true;
button3.geometry.offset = new mxPoint(-60, 0);
button3.vertex = true;
bg.insert(button3);
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button group, horizontal');
}),
this.addEntry(dt + 'button group horizontal', function()
{
var bg1 = new mxCell('', new mxGeometry(0, 0, 120, 30), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;');
bg1.vertex = true;
var button1 = new mxCell('1', new mxGeometry(0, 0, 30, 30), inh + s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button1.geometry.relative = true;
button1.vertex = true;
bg1.insert(button1);
var button2 = new mxCell('2', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button2.geometry.relative = true;
button2.geometry.offset = new mxPoint(30, 0);
button2.vertex = true;
bg1.insert(button2);
var button3 = new mxCell('3', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button3.geometry.relative = true;
button3.geometry.offset = new mxPoint(60, 0);
button3.vertex = true;
bg1.insert(button3);
var button4 = new mxCell('4', new mxGeometry(1, 0, 30, 30), inh + s + 'rightButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button4.geometry.relative = true;
button4.geometry.offset = new mxPoint(-30, 0);
button4.vertex = true;
bg1.insert(button4);
var bg2 = new mxCell('', new mxGeometry(130, 0, 90, 30), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;');
bg2.vertex = true;
var button1 = new mxCell('5', new mxGeometry(0, 0, 30, 30), inh + s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button1.geometry.relative = true;
button1.vertex = true;
bg2.insert(button1);
var button2 = new mxCell('6', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button2.geometry.relative = true;
button2.geometry.offset = new mxPoint(30, 0);
button2.vertex = true;
bg2.insert(button2);
var button3 = new mxCell('7', new mxGeometry(1, 0, 30, 30), inh + s + 'rightButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button3.geometry.relative = true;
button3.geometry.offset = new mxPoint(-30, 0);
button3.vertex = true;
bg2.insert(button3);
var bg3 = new mxCell('8', new mxGeometry(230, 0, 30, 30), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;');
bg3.vertex = true;
return sb.createVertexTemplateFromCells([bg1, bg2, bg3], 260, 30, 'Button group, horizontal');
}),
this.addEntry(dt + 'button group horizontal', function()
{
var bg1 = new mxCell('', new mxGeometry(0, 0, 120, 30), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;');
bg1.vertex = true;
var button1 = new mxCell('1', new mxGeometry(0, 0, 30, 30), inh + s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button1.geometry.relative = true;
button1.vertex = true;
bg1.insert(button1);
var button2 = new mxCell('2', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button2.geometry.relative = true;
button2.geometry.offset = new mxPoint(30, 0);
button2.vertex = true;
bg1.insert(button2);
var button3 = new mxCell('3', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button3.geometry.relative = true;
button3.geometry.offset = new mxPoint(60, 0);
button3.vertex = true;
bg1.insert(button3);
var button4 = new mxCell('4', new mxGeometry(1, 0, 30, 30), inh + s + 'rightButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button4.geometry.relative = true;
button4.geometry.offset = new mxPoint(-30, 0);
button4.vertex = true;
bg1.insert(button4);
var bg2 = new mxCell('Input Group Example', new mxGeometry(130, 0, 200, 30), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacingLeft=40;');
bg2.vertex = true;
var button1 = new mxCell('@', new mxGeometry(0, 0, 30, 30), s + 'leftButton;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button1.geometry.relative = true;
button1.vertex = true;
bg2.insert(button1);
return sb.createVertexTemplateFromCells([bg1, bg2], 230, 30, 'Button group, horizontal');
}),
this.addEntry(dt + 'button group horizontal', function()
{
var bg1 = new mxCell('', new mxGeometry(0, 0, 150, 30), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;');
bg1.vertex = true;
var button1 = new mxCell('1', new mxGeometry(0, 0, 30, 30), inh + s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button1.geometry.relative = true;
button1.vertex = true;
bg1.insert(button1);
var button2 = new mxCell('2', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;');
button2.geometry.relative = true;
button2.geometry.offset = new mxPoint(30, 0);
button2.vertex = true;
bg1.insert(button2);
var button4 = new mxCell('Dropdown', new mxGeometry(1, 0, 90, 30), inh + s + 'rightButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;align=left;spacing=10;');
button4.geometry.relative = true;
button4.geometry.offset = new mxPoint(-90, 0);
button4.vertex = true;
bg1.insert(button4);
var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#ffffff;strokeColor=none;perimeter=none;');
marker1.geometry.relative = true;
marker1.geometry.offset = new mxPoint(-17, -2.5);
marker1.vertex = true;
button4.insert(marker1);
return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Button group, horizontal');
}),
this.addEntry(dt + 'button group vertical', function()
{
var bg = new mxCell('', new mxGeometry(0, 0, 60, 180), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;');
bg.vertex = true;
var button1 = new mxCell('Button', new mxGeometry(0, 0, 60, 30), inh + s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;');
button1.geometry.relative = true;
button1.vertex = true;
bg.insert(button1);
var button2 = new mxCell('Button', new mxGeometry(0, 0, 60, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;');
button2.geometry.relative = true;
button2.geometry.offset = new mxPoint(0, 30);
button2.vertex = true;
bg.insert(button2);
var button3 = new mxCell('Button', new mxGeometry(0, 0, 60, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;');
button3.geometry.relative = true;
button3.geometry.offset = new mxPoint(0, 60);
button3.vertex = true;
bg.insert(button3);
var button4 = new mxCell('Button', new mxGeometry(0, 0, 60, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;');
button4.geometry.relative = true;
button4.geometry.offset = new mxPoint(0, 90);
button4.vertex = true;
bg.insert(button4);
var button5 = new mxCell('Button', new mxGeometry(0, 0, 60, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;');
button5.geometry.relative = true;
button5.geometry.offset = new mxPoint(0, 120);
button5.vertex = true;
bg.insert(button5);
var button6 = new mxCell('Button', new mxGeometry(0, 1, 60, 30), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;');
button6.geometry.relative = true;
button6.geometry.offset = new mxPoint(0, -30);
button6.vertex = true;
bg.insert(button6);
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button group, vertical');
}),
this.addEntry(dt + 'button group vertical', function()
{
var bg = new mxCell('', new mxGeometry(0, 0, 90, 180), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;');
bg.vertex = true;
var button1 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;');
button1.geometry.relative = true;
button1.vertex = true;
bg.insert(button1);
var button2 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;');
button2.geometry.relative = true;
button2.geometry.offset = new mxPoint(0, 30);
button2.vertex = true;
bg.insert(button2);
var button3 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;');
button3.geometry.relative = true;
button3.geometry.offset = new mxPoint(0, 60);
button3.vertex = true;
bg.insert(button3);
var button4 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;');
button4.geometry.relative = true;
button4.geometry.offset = new mxPoint(0, 90);
button4.vertex = true;
bg.insert(button4);
var button5 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;');
button5.geometry.relative = true;
button5.geometry.offset = new mxPoint(0, 120);
button5.vertex = true;
bg.insert(button5);
var button6 = new mxCell('Button', new mxGeometry(0, 1, 90, 30), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;');
button6.geometry.relative = true;
button6.geometry.offset = new mxPoint(0, -30);
button6.vertex = true;
bg.insert(button6);
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button group, vertical');
}),
this.addEntry(dt + 'button group vertical', function()
{
var bg = new mxCell('', new mxGeometry(0, 0, 90, 180), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;');
bg.vertex = true;
var button1 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;');
button1.geometry.relative = true;
button1.vertex = true;
bg.insert(button1);
var button2 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;');
button2.geometry.relative = true;
button2.geometry.offset = new mxPoint(0, 30);
button2.vertex = true;
bg.insert(button2);
var button3 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;');
button3.geometry.relative = true;
button3.geometry.offset = new mxPoint(0, 60);
button3.vertex = true;
bg.insert(button3);
var button4 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;');
button4.geometry.relative = true;
button4.geometry.offset = new mxPoint(0, 90);
button4.vertex = true;
bg.insert(button4);
var button5 = new mxCell('Dropdown', new mxGeometry(0, 0, 90, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;');
button5.geometry.relative = true;
button5.geometry.offset = new mxPoint(0, 120);
button5.vertex = true;
bg.insert(button5);
var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#ffffff;strokeColor=none;perimeter=none;');
marker1.geometry.relative = true;
marker1.geometry.offset = new mxPoint(-17, -2.5);
marker1.vertex = true;
button5.insert(marker1);
var button6 = new mxCell('Dropdown', new mxGeometry(0, 1, 90, 30), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;align=left;spacing=10;');
button6.geometry.relative = true;
button6.geometry.offset = new mxPoint(0, -30);
button6.vertex = true;
bg.insert(button6);
var marker2 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#ffffff;strokeColor=none;perimeter=none;');
marker2.geometry.relative = true;
marker2.geometry.offset = new mxPoint(-17, -2.5);
marker2.vertex = true;
button6.insert(marker2);
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button group, vertical');
}),
this.addEntry(dt + 'card', function()
{
var bg = new mxCell(
'<b><font style="font-size: 20px">Card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.',
new mxGeometry(0, 0, 250, 350), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=bottom;align=left;spacing=20;spacingBottom=50;fontSize=14;');
bg.vertex = true;
var button1 = new mxCell('Image cap', new mxGeometry(0, 0, 250, 180), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;');
button1.geometry.relative = true;
button1.vertex = true;
bg.insert(button1);
var button2 = new mxCell('Go somewhere', new mxGeometry(0, 1, 120, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;resizeWidth=1;fontSize=14;');
button2.geometry.relative = true;
button2.geometry.offset = new mxPoint(20, -60);
button2.vertex = true;
bg.insert(button2);
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card');
}),
this.addEntry(dt + 'card', function()
{
var bg = new mxCell(
'<b><font style="font-size: 20px">Card title</font></b><font color="#6c767d"><b><font style="font-size: 14px"><br style="font-size: 10px">Card subtitle<br></font></b></font><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.',
new mxGeometry(0, 0, 250, 190), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;fontSize=14;');
bg.vertex = true;
var button1 = new mxCell('Card link', new mxGeometry(0, 1, 80, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=none;strokeColor=none;fontColor=#0085FC;resizeWidth=1;fontSize=14;align=center;');
button1.geometry.relative = true;
button1.geometry.offset = new mxPoint(10, -50);
button1.vertex = true;
bg.insert(button1);
var button2 = new mxCell('Another link', new mxGeometry(0, 1, 100, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=none;strokeColor=none;fontColor=#0085FC;resizeWidth=1;fontSize=14;align=center;');
button2.geometry.relative = true;
button2.geometry.offset = new mxPoint(100, -50);
button2.vertex = true;
bg.insert(button2);
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card');
}),
this.addEntry(dt + 'image', function()
{
var bg = new mxCell(
'Some quick example text to build on the card title and make up the bulk of the card\'s content.',
new mxGeometry(0, 0, 250, 260), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=bottom;align=left;spacing=20;fontSize=14;');
bg.vertex = true;
var button1 = new mxCell('Image cap', new mxGeometry(0, 0, 250, 180), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;');
button1.geometry.relative = true;
button1.vertex = true;
bg.insert(button1);
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Image');
}),
this.addEntry(dt + 'list group', function()
{
var bg = new mxCell('', new mxGeometry(0, 0, 200, 90), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;');
bg.vertex = true;
var button1 = new mxCell('Cras justo odio', new mxGeometry(0, 0, 200, 30), inh + s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;');
button1.geometry.relative = true;
button1.vertex = true;
bg.insert(button1);
var button2 = new mxCell('Dapibus ac facilisis in', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;');
button2.geometry.relative = true;
button2.geometry.offset = new mxPoint(0, 30);
button2.vertex = true;
bg.insert(button2);
var button3 = new mxCell('Vestibulum at eros', new mxGeometry(0, 1, 200, 30), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;align=left;spacing=10;');
button3.geometry.relative = true;
button3.geometry.offset = new mxPoint(0, -30);
button3.vertex = true;
bg.insert(button3);
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'List group');
}),
this.addEntry(dt + 'list group', function()
{
var bg = new mxCell('', new mxGeometry(0, 0, 200, 120), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;');
bg.vertex = true;
var button1 = new mxCell('Featured', new mxGeometry(0, 0, 200, 30), s + 'topButton;strokeColor=inherit;fillColor=#F7F7F7;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;');
button1.geometry.relative = true;
button1.vertex = true;
bg.insert(button1);
var button2 = new mxCell('Cras justo odio', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;');
button2.geometry.relative = true;
button2.geometry.offset = new mxPoint(0, 30);
button2.vertex = true;
bg.insert(button2);
var button3 = new mxCell('Dapibus ac facilisis in', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;');
button3.geometry.relative = true;
button3.geometry.offset = new mxPoint(0, 60);
button3.vertex = true;
bg.insert(button3);
var button4 = new mxCell('Vestibulum at eros', new mxGeometry(0, 1, 200, 30), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;align=left;spacing=10;');
button4.geometry.relative = true;
button4.geometry.offset = new mxPoint(0, -30);
button4.vertex = true;
bg.insert(button4);
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'List group');
}),
this.addEntry(dt + 'card', function()
{
var bg = new mxCell('', new mxGeometry(0, 0, 250, 450), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=bottom;align=left;spacing=20;spacingBottom=130;fontSize=14;');
bg.vertex = true;
var item1 = new mxCell('Image cap', new mxGeometry(0, 0, 250, 180), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;');
item1.geometry.relative = true;
item1.vertex = true;
bg.insert(item1);
var item2 = new mxCell('<b><font style="font-size: 20px">Card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.',
new mxGeometry(0, 0, 250, 120), 'perimeter=none;html=1;whiteSpace=wrap;fillColor=none;strokeColor=none;resizeWidth=1;verticalAlign=top;align=left;spacing=20;spacingTop=-10;fontSize=14;');
item2.geometry.relative = true;
item2.geometry.offset = new mxPoint(0, 180);
item2.vertex = true;
bg.insert(item2);
var item3 = new mxCell('Cras justo odio', new mxGeometry(0, 0, 250, 30), 'html=1;shadow=0;dashed=0;strokeColor=none;fontSize=14;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;');
item3.geometry.relative = true;
item3.geometry.offset = new mxPoint(0, 300);
item3.vertex = true;
bg.insert(item3);
var item4 = new mxCell('Dapibus ac facilisis in', new mxGeometry(0, 0, 250, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;fontSize=14;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;');
item4.geometry.relative = true;
item4.geometry.offset = new mxPoint(0, 330);
item4.vertex = true;
bg.insert(item4);
var item5 = new mxCell('Vestibulum at eros', new mxGeometry(0, 0, 250, 30), inh + s + 'bottomButton;rSize=5;perimeter=none;fontSize=14;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;align=left;spacing=10;');
item5.geometry.relative = true;
item5.geometry.offset = new mxPoint(0, 360);
item5.vertex = true;
bg.insert(item5);
var button1 = new mxCell('Card link', new mxGeometry(0, 1, 80, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=none;strokeColor=none;fontColor=#0085FC;resizeWidth=1;fontSize=14;align=center;');
button1.geometry.relative = true;
button1.geometry.offset = new mxPoint(10, -50);
button1.vertex = true;
bg.insert(button1);
var button2 = new mxCell('Another link', new mxGeometry(0, 1, 100, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=none;strokeColor=none;fontColor=#0085FC;resizeWidth=1;fontSize=14;align=center;');
button2.geometry.relative = true;
button2.geometry.offset = new mxPoint(100, -50);
button2.vertex = true;
bg.insert(button2);
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card');
}),
this.addEntry(dt + 'card', function()
{
var bg = new mxCell('', new mxGeometry(0, 0, 800, 190), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;');
bg.vertex = true;
var item1 = new mxCell('Featured', new mxGeometry(0, 0, 800, 40), s + 'topButton;strokeColor=inherit;fillColor=#F7F7F7;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=20;fontSize=14;');
item1.geometry.relative = true;
item1.vertex = true;
bg.insert(item1);
var item2 = new mxCell('<b><font style="font-size: 20px">Special title treatment</font></b><br style="font-size: 14px"><br style="font-size: 14px">With supporting text below as a natural lead-in to additional content.',
new mxGeometry(0, 0, 800, 120), 'perimeter=none;html=1;whiteSpace=wrap;fillColor=none;strokeColor=none;resizeWidth=1;verticalAlign=top;align=left;spacing=20;spacingTop=-10;fontSize=14;');
item2.geometry.relative = true;
item2.geometry.offset = new mxPoint(0, 40);
item2.vertex = true;
bg.insert(item2);
var button1 = new mxCell('Go somewhere', new mxGeometry(0, 1, 120, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;resizeWidth=1;fontSize=14;');
button1.geometry.relative = true;
button1.geometry.offset = new mxPoint(20, -60);
button1.vertex = true;
bg.insert(button1);
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card with header and footer');
}),
this.addEntry(dt + 'card', function()
{
var bg = new mxCell('', new mxGeometry(0, 0, 800, 120), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;');
bg.vertex = true;
var item1 = new mxCell('Quote', new mxGeometry(0, 0, 800, 40), s + 'topButton;strokeColor=inherit;fillColor=#F7F7F7;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=20;fontSize=14;');
item1.geometry.relative = true;
item1.vertex = true;
bg.insert(item1);
var item2 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<font style="font-size: 14px" color="#999999"><br><br>- <b>Someone famous</b> in <i>Source Title</i></font>',
new mxGeometry(0, 0, 800, 80), 'perimeter=none;html=1;whiteSpace=wrap;fillColor=none;strokeColor=none;resizeWidth=1;verticalAlign=top;align=left;spacing=20;spacingTop=-10;fontSize=14;');
item2.geometry.relative = true;
item2.geometry.offset = new mxPoint(0, 40);
item2.vertex = true;
bg.insert(item2);
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card with header and footer');
}),
this.addEntry(dt + 'card', function()
{
var bg = new mxCell('', new mxGeometry(0, 0, 800, 230), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;');
bg.vertex = true;
var item1 = new mxCell('Featured', new mxGeometry(0, 0, 800, 40), s + 'topButton;strokeColor=inherit;fillColor=#F7F7F7;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;');
item1.geometry.relative = true;
item1.vertex = true;
bg.insert(item1);
var item2 = new mxCell('<b><font style="font-size: 20px">Special title treatment</font></b><br style="font-size: 14px"><br style="font-size: 14px">With supporting text below as a natural lead-in to additional content.',
new mxGeometry(0, 0, 800, 120), 'perimeter=none;html=1;whiteSpace=wrap;fillColor=none;strokeColor=none;resizeWidth=1;verticalAlign=top;align=center;spacing=20;spacingTop=-10;fontSize=14;');
item2.geometry.relative = true;
item2.geometry.offset = new mxPoint(0, 40);
item2.vertex = true;
bg.insert(item2);
var button1 = new mxCell('Go somewhere', new mxGeometry(0.5, 1, 120, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;align=center;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;resizeWidth=1;fontSize=14;');
button1.geometry.relative = true;
button1.geometry.offset = new mxPoint(-60, -100);
button1.vertex = true;
bg.insert(button1);
var item3 = new mxCell('2 days ago', new mxGeometry(0, 1, 800, 40), s + 'bottomButton;strokeColor=inherit;fillColor=#F7F7F7;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#818181;');
item3.geometry.relative = true;
item3.geometry.offset = new mxPoint(0, -40);
item3.vertex = true;
bg.insert(item3);
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card with header and footer');
}),
this.addEntry(dt + 'card', function()
{
var bg1 = new mxCell('<b><font style="font-size: 20px">Special title treatment</font></b><br style="font-size: 14px"><br style="font-size: 14px">With supporting text below as a natural lead-in to additional content.',
new mxGeometry(0, 0, 380, 170), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;align=left;verticalAlign=top;spacing=20;fontSize=14;');
bg1.vertex = true;
var button1 = new mxCell('Go somewhere', new mxGeometry(0, 1, 120, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;resizeWidth=1;fontSize=14;');
button1.geometry.relative = true;
button1.geometry.offset = new mxPoint(20, -60);
button1.vertex = true;
bg1.insert(button1);
var bg2 = new mxCell('<b><font style="font-size: 20px">Special title treatment</font></b><br style="font-size: 14px"><br style="font-size: 14px">With supporting text below as a natural lead-in to additional content.',
new mxGeometry(420, 0, 380, 170), s + 'rrect;rSize=5;strokeC