(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 gn = 'mxgraph.bootstrap'; var dt = 'bootstrap '; var sb = this; var fns = [ this.addEntry(dt + 'button bar dark', function() { var bg = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'rect;fillColor=#222222;strokeColor=none;whiteSpace=wrap;'); bg.vertex = true; var button1 = new mxCell('Company', new mxGeometry(0, 0, 80, 40), s2 + 'fontColor=#999999;fontSize=14;whiteSpace=wrap;'); button1.vertex = true; bg.insert(button1); var button2 = new mxCell('People', new mxGeometry(80, 0, 90, 40), s + 'rect;fillColor=#000000;strokeColor=none;fontColor=#ffffff;spacingRight=30;whiteSpace=wrap;'); button2.vertex = true; bg.insert(button2); var notif1 = new mxCell('84', new mxGeometry(1, 0.5, 25, 16), s + 'rrect;rSize=8;fillColor=#ff0000;strokeColor=none;fontColor=#ffffff;whiteSpace=wrap;'); notif1.geometry.relative = true; notif1.geometry.offset = new mxPoint(-30, -8); notif1.vertex = true; button2.insert(notif1); var button3 = new mxCell('Violations', new mxGeometry(170, 0, 110, 40), s2 + 'fontColor=#999999;spacingRight=30;whiteSpace=wrap;'); button3.vertex = true; bg.insert(button3); var notif2 = new mxCell('42', new mxGeometry(1, 0.5, 25, 16), s + 'rrect;rSize=8;fillColor=#ff0000;strokeColor=none;fontColor=#ffffff;whiteSpace=wrap;'); notif2.geometry.relative = true; notif2.geometry.offset = new mxPoint(-30, -8); notif2.vertex = true; button3.insert(notif2); var button4 = new mxCell('Statistics', new mxGeometry(280, 0, 80, 40), s2 + 'fontColor=#999999;whiteSpace=wrap;'); button4.vertex = true; bg.insert(button4); var button5 = new mxCell('Settings', new mxGeometry(360, 0, 70, 40), s2 + 'fontColor=#999999;whiteSpace=wrap;'); button5.vertex = true; bg.insert(button5); var button6 = new mxCell('Profile', new mxGeometry(660, 0, 70, 40), s2 + 'fontColor=#999999;whiteSpace=wrap;'); button6.vertex = true; bg.insert(button6); var button7 = new mxCell('Log Out', new mxGeometry(730, 0, 70, 40), s2 + 'fontColor=#999999;whiteSpace=wrap;'); button7.vertex = true; bg.insert(button7); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button Bar (Dark)'); }), this.addEntry(dt + 'button bar bright', function() { var bg = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'rect;fillColor=#f6f6f6;strokeColor=none;whiteSpace=wrap;'); bg.vertex = true; var button1 = new mxCell('Company', new mxGeometry(0, 0, 80, 40), s2 + 'fontColor=#dddddd;fontSize=14;whiteSpace=wrap;'); button1.vertex = true; bg.insert(button1); var button2 = new mxCell('People', new mxGeometry(80, 0, 90, 40), s + 'rect;fillColor=#f0f0f0;strokeColor=none;fontColor=#999999;spacingRight=30;whiteSpace=wrap;'); button2.vertex = true; bg.insert(button2); var notif1 = new mxCell('84', new mxGeometry(1, 0.5, 25, 16), s + 'rrect;rSize=8;fillColor=#ff0000;strokeColor=none;fontColor=#ffffff;whiteSpace=wrap;'); notif1.geometry.relative = true; notif1.geometry.offset = new mxPoint(-30, -8); notif1.vertex = true; button2.insert(notif1); var button3 = new mxCell('Violations', new mxGeometry(170, 0, 110, 40), s2 + 'fontColor=#dddddd;spacingRight=30;whiteSpace=wrap;'); button3.vertex = true; bg.insert(button3); var notif2 = new mxCell('42', new mxGeometry(1, 0.5, 25, 16), s + 'rrect;rSize=8;fillColor=#ff0000;strokeColor=none;fontColor=#ffffff;whiteSpace=wrap;'); notif2.geometry.relative = true; notif2.geometry.offset = new mxPoint(-30, -8); notif2.vertex = true; button3.insert(notif2); var button4 = new mxCell('Statistics', new mxGeometry(280, 0, 80, 40), s2 + 'fontColor=#dddddd;whiteSpace=wrap;'); button4.vertex = true; bg.insert(button4); var button5 = new mxCell('Settings', new mxGeometry(360, 0, 70, 40), s2 + 'fontColor=#dddddd;whiteSpace=wrap;'); button5.vertex = true; bg.insert(button5); var button6 = new mxCell('Search...', new mxGeometry(650, 5, 130, 30), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#dddddd;fontColor=#dddddd;align=left;spacingLeft=10;whiteSpace=wrap;'); button6.vertex = true; bg.insert(button6); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button Bar (Bright)'); }), this.addEntry(dt + 'button group vertical', function() { var bg = new mxCell('', new mxGeometry(0, 0, 100, 150), s + 'rrect;rSize=5;strokeColor=#dddddd;html=1;whiteSpace=wrap;fillColor=#ffffff;'); bg.vertex = true; var button1 = new mxCell('Edit', new mxGeometry(0, 0, 100, 30), s + 'topButton;rSize=5;fillColor=none;strokeColor=#dddddd;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); button1.geometry.relative = true; button1.vertex = true; bg.insert(button1); var button2 = new mxCell('Create', new mxGeometry(0, 0, 100, 30), s + 'rect;fillColor=none;strokeColor=#dddddd;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('Delete', new mxGeometry(0, 0, 100, 30), s + 'rect;fillColor=none;strokeColor=#dddddd;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('Append', new mxGeometry(0, 0, 100, 30), s + 'rect;fillColor=none;strokeColor=#dddddd;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('Prepend', new mxGeometry(0, 1, 100, 30), s + 'bottomButton;rSize=5;fillColor=none;strokeColor=#dddddd;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); button5.geometry.relative = true; button5.geometry.offset = new mxPoint(0, -30); button5.vertex = true; bg.insert(button5); var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-15, -2.5); marker1.vertex = true; button2.insert(marker1); 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, 160, 160), s + 'rrect;rSize=5;strokeColor=#dddddd;html=1;whiteSpace=wrap;fillColor=#ffffff;'); bg.vertex = true; var button2 = new mxCell('Verified', new mxGeometry(0, 0, 160, 40), s + 'rect;fillColor=none;strokeColor=#dddddd;spacingLeft=10;align=left;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); button2.geometry.relative = true; button2.geometry.offset = new mxPoint(0, 40); button2.vertex = true; bg.insert(button2); var button3 = new mxCell('Banned', new mxGeometry(0, 0, 160, 40), s + 'rect;fillColor=none;strokeColor=#dddddd;spacingLeft=10;align=left;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); button3.geometry.relative = true; button3.geometry.offset = new mxPoint(0, 80); button3.vertex = true; bg.insert(button3); var button4 = new mxCell('Deleted', new mxGeometry(0, 1, 160, 40), s + 'bottomButton;rSize=5;fillColor=none;strokeColor=#dddddd;spacingLeft=10;align=left;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); button4.geometry.relative = true; button4.geometry.offset = new mxPoint(0, -40); button4.vertex = true; bg.insert(button4); var button1 = new mxCell('All Users', new mxGeometry(0, 0, 160, 40), s + 'topButton;rSize=5;fillColor=#3D8BCD;strokeColor=#3D8BCD;fontColor=#ffffff;spacingLeft=10;align=left;whiteSpace=wrap;resizeWidth=1;'); button1.geometry.relative = true; button1.vertex = true; bg.insert(button1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button Group (Vertical)'); }), this.createVertexTemplateEntry(s + 'topButton;rSize=5;fillColor=#3D8BCD;strokeColor=#0D5B9D;fontColor=#ffffff;spacingLeft=10;align=left;whiteSpace=wrap;', 160, 40, 'All Users', 'Top Button', null, null, this.getTagsForStencil(gn, 'topButton', dt + 'top button').join(' ')), this.createVertexTemplateEntry(s + 'bottomButton;rSize=5;fillColor=#3D8BCD;strokeColor=#0D5B9D;fontColor=#ffffff;spacingLeft=10;align=left;whiteSpace=wrap;', 160, 40, 'All Users', 'Bottom Button', null, null, this.getTagsForStencil(gn, 'bottomButton', dt + 'bottom button').join(' ')), this.createVertexTemplateEntry(s + 'rightButton;rSize=5;fillColor=#3D8BCD;strokeColor=#0D5B9D;fontColor=#ffffff;spacingLeft=10;align=left;whiteSpace=wrap;', 160, 40, 'All Users', 'Right Button', null, null, this.getTagsForStencil(gn, 'rightButton', dt + 'right button').join(' ')), this.createVertexTemplateEntry(s + 'leftButton;rSize=5;fillColor=#3D8BCD;strokeColor=#0D5B9D;fontColor=#ffffff;spacingLeft=10;align=left;whiteSpace=wrap;', 160, 40, 'All Users', 'Left Button', null, null, this.getTagsForStencil(gn, 'leftButton', dt + 'left button').join(' ')), this.addEntry(dt + 'dropdown large', function() { var bg = new mxCell('Dropdown', new mxGeometry(0, 0, 140, 40), s + 'rrect;rSize=5;strokeColor=#dddddd;spacingRight=10;fontSize=16;whiteSpace=wrap;fillColor=#ffffff;align=center;'); bg.vertex = true; var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-20, -2.5); marker1.vertex = true; bg.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropdown (Large)'); }), this.addEntry(dt + 'dropdown normal', function() { var bg = new mxCell('Dropdown', new mxGeometry(0, 0, 120, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;spacingRight=10;fontSize=14;whiteSpace=wrap;fillColor=#ffffff;align=center;'); bg.vertex = true; var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-20, -2.5); marker1.vertex = true; bg.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropdown (Normal)'); }), this.addEntry(dt + 'dropdown small', function() { var bg = new mxCell('Dropdown', new mxGeometry(0, 0, 100, 22), s + 'rrect;fontSize=12;rSize=5;strokeColor=#dddddd;spacingRight=10;perimeter=none;whiteSpace=wrap;fillColor=#ffffff;align=center;'); bg.vertex = true; var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-20, -2.5); marker1.vertex = true; bg.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropdown (Small)'); }), this.addEntry(dt + 'dropdown tiny', function() { var bg = new mxCell('Dropdown', new mxGeometry(0, 0, 90, 20), s + 'rrect;rSize=5;strokeColor=#dddddd;spacingRight=10;fontSize=10;whiteSpace=wrap;fillColor=#ffffff;align=center;'); bg.vertex = true; var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-20, -2.5); marker1.vertex = true; bg.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropdown (Tiny)'); }), this.addEntry(dt + 'button group justified large', function() { var bg = new mxCell('', new mxGeometry(0, 0, 240, 40), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;'); bg.vertex = true; var button1 = new mxCell('Left', new mxGeometry(0, 0, 80, 40), s + 'rect;fillColor=none;strokeColor=none;perimeter=none;fontSize=16;whiteSpace=wrap;'); button1.vertex = true; bg.insert(button1); var button2 = new mxCell('Middle', new mxGeometry(80, 0, 80, 40), s + 'rect;fillColor=none;strokeColor=#dddddd;perimeter=none;fontSize=16;whiteSpace=wrap;'); button2.vertex = true; bg.insert(button2); var button3 = new mxCell('Right', new mxGeometry(160, 0, 80, 40), s + 'rect;fillColor=none;strokeColor=none;perimeter=none;fontSize=16;whiteSpace=wrap;'); button3.vertex = true; bg.insert(button3); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button Group (Justified, Large)'); }), this.addEntry(dt + 'button group justified normal', function() { var bg = new mxCell('', new mxGeometry(0, 0, 180, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;'); bg.vertex = true; var button1 = new mxCell('Left', new mxGeometry(0, 0, 60, 30), s + 'rect;fillColor=none;strokeColor=none;perimeter=none;fontSize=14;whiteSpace=wrap;'); button1.vertex = true; bg.insert(button1); var button2 = new mxCell('Middle', new mxGeometry(60, 0, 60, 30), s + 'rect;fillColor=none;strokeColor=#dddddd;perimeter=none;fontSize=14;whiteSpace=wrap;'); button2.vertex = true; bg.insert(button2); var button3 = new mxCell('Right', new mxGeometry(120, 0, 60, 30), s + 'rect;fillColor=none;strokeColor=none;perimeter=none;fontSize=14;whiteSpace=wrap;'); button3.vertex = true; bg.insert(button3); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button Group (Justified, Normal)'); }), this.addEntry(dt + 'button group justified small', function() { var bg = new mxCell('', new mxGeometry(0, 0, 150, 22), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;'); bg.vertex = true; var button1 = new mxCell('Left', new mxGeometry(0, 0, 50, 22), s + 'rect;fillColor=none;strokeColor=none;perimeter=none;whiteSpace=wrap;'); button1.vertex = true; bg.insert(button1); var button2 = new mxCell('Middle', new mxGeometry(50, 0, 50, 22), s + 'rect;fillColor=none;strokeColor=#dddddd;perimeter=none;whiteSpace=wrap;'); button2.vertex = true; bg.insert(button2); var button3 = new mxCell('Right', new mxGeometry(100, 0, 50, 22), s + 'rect;fillColor=none;strokeColor=none;perimeter=none;whiteSpace=wrap;'); button3.vertex = true; bg.insert(button3); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button Group (Justified, Small)'); }), this.addEntry(dt + 'button group justified tiny', function() { var bg = new mxCell('', new mxGeometry(0, 0, 120, 20), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;'); bg.vertex = true; var button1 = new mxCell('Left', new mxGeometry(0, 0, 40, 20), s + 'rect;fillColor=none;strokeColor=none;perimeter=none;fontSize=10;whiteSpace=wrap;'); button1.vertex = true; bg.insert(button1); var button2 = new mxCell('Middle', new mxGeometry(40, 0, 40, 20), s + 'rect;fillColor=none;strokeColor=#dddddd;perimeter=none;fontSize=10;whiteSpace=wrap;'); button2.vertex = true; bg.insert(button2); var button3 = new mxCell('Right', new mxGeometry(80, 0, 40, 20), s + 'rect;fillColor=none;strokeColor=none;perimeter=none;fontSize=10;whiteSpace=wrap;'); button3.vertex = true; bg.insert(button3); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button Group (Justified, Tiny)'); }), this.addEntry(dt + 'button toolbar', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 120, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;'); bg1.vertex = true; var button1 = new mxCell('1', new mxGeometry(0, 0, 30, 30), s + 'leftButton;rSize=5;strokeColor=#dddddd;perimeter=none;fontSize=14;whiteSpace=wrap;'); button1.vertex = true; bg1.insert(button1); var button2 = new mxCell('2', new mxGeometry(30, 0, 30, 30), s + 'rect;strokeColor=#dddddd;perimeter=none;fontSize=14;whiteSpace=wrap;'); button2.vertex = true; bg1.insert(button2); var button3 = new mxCell('3', new mxGeometry(60, 0, 30, 30), s + 'rect;strokeColor=#dddddd;perimeter=none;fontSize=14;whiteSpace=wrap;'); button3.vertex = true; bg1.insert(button3); var button4 = new mxCell('4', new mxGeometry(90, 0, 30, 30), s + 'rightButton;rSize=5;strokeColor=#dddddd;perimeter=none;fontSize=14;whiteSpace=wrap;'); button4.vertex = true; bg1.insert(button4); var bg2 = new mxCell('', new mxGeometry(130, 0, 90, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;'); bg2.vertex = true; var button1 = new mxCell('5', new mxGeometry(0, 0, 30, 30), s + 'leftButton;rSize=5;strokeColor=#dddddd;perimeter=none;fontSize=14;whiteSpace=wrap;'); button1.vertex = true; bg2.insert(button1); var button2 = new mxCell('6', new mxGeometry(30, 0, 30, 30), s + 'rect;strokeColor=#dddddd;perimeter=none;fontSize=14;whiteSpace=wrap;'); button2.vertex = true; bg2.insert(button2); var button4 = new mxCell('7', new mxGeometry(60, 0, 30, 30), s + 'rightButton;rSize=5;strokeColor=#dddddd;perimeter=none;fontSize=14;whiteSpace=wrap;'); button4.vertex = true; bg2.insert(button4); var bg3 = new mxCell('8', new mxGeometry(230, 0, 30, 30), s + 'rrect;fontSize=12;align=center;rSize=5;strokeColor=#dddddd;whiteSpace=wrap;fillColor=#ffffff;'); bg3.vertex = true; return sb.createVertexTemplateFromCells([bg1, bg2, bg3], 260, 30, 'Button Toolbar'); }), this.addEntry(dt + 'button group nested', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 160, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;'); bg1.vertex = true; var button1 = new mxCell('1', new mxGeometry(0, 0, 30, 30), s + 'leftButton;rSize=5;strokeColor=#dddddd;perimeter=none;fontSize=14;whiteSpace=wrap;'); button1.vertex = true; bg1.insert(button1); var button2 = new mxCell('2', new mxGeometry(30, 0, 30, 30), s + 'rect;strokeColor=#dddddd;perimeter=none;fontSize=14;whiteSpace=wrap;'); button2.vertex = true; bg1.insert(button2); var button3 = new mxCell('Dropdown', new mxGeometry(60, 0, 100, 30), s + 'rect;strokeColor=#dddddd;perimeter=none;fontSize=14;spacingRight=10;whiteSpace=wrap;'); button3.vertex = true; bg1.insert(button3); var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-15, -2.5); marker1.vertex = true; button3.insert(marker1); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Button Group (Nested)'); }), this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;align=center;fontSize=16;whiteSpace=wrap;', 80, 40, 'Button', 'Button (Large)', null, null, this.getTagsForStencil(gn, '', dt + 'button large').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;align=center;fontSize=14;whiteSpace=wrap;', 60, 30, 'Button', 'Button (Normal)', null, null, this.getTagsForStencil(gn, '', dt + 'button normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;align=center;fontSize=12;whiteSpace=wrap;', 44, 22, 'Button', 'Button (Small)', null, null, this.getTagsForStencil(gn, '', dt + 'button small').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;align=center;fontSize=10;whiteSpace=wrap;', 40, 20, 'Button', 'Button (Tiny)', null, null, this.getTagsForStencil(gn, '', dt + 'button tiny').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#3D8BCD;align=center;strokeColor=#3D8BCD;fontColor=#ffffff;fontSize=16;whiteSpace=wrap;', 80, 40, 'Button', 'Button (Large)', null, null, this.getTagsForStencil(gn, '', dt + 'button large').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#3D8BCD;align=center;strokeColor=#3D8BCD;fontColor=#ffffff;fontSize=14;whiteSpace=wrap;', 60, 30, 'Button', 'Button (Normal)', null, null, this.getTagsForStencil(gn, '', dt + 'button normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#3D8BCD;align=center;strokeColor=#3D8BCD;fontColor=#ffffff;fontSize=12;whiteSpace=wrap;', 44, 22, 'Button', 'Button (Small)', null, null, this.getTagsForStencil(gn, '', dt + 'button small').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#3D8BCD;align=center;strokeColor=#3D8BCD;fontColor=#ffffff;fontSize=10;whiteSpace=wrap;', 40, 20, 'Button', 'Button (Tiny)', null, null, this.getTagsForStencil(gn, '', dt + 'button tiny').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#58B957;align=center;strokeColor=#58B957;fontColor=#ffffff;fontSize=16;whiteSpace=wrap;', 80, 40, 'Button', 'Button (Large)', null, null, this.getTagsForStencil(gn, '', dt + 'button large').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#58B957;align=center;strokeColor=#58B957;fontColor=#ffffff;fontSize=14;whiteSpace=wrap;', 60, 30, 'Button', 'Button (Normal)', null, null, this.getTagsForStencil(gn, '', dt + 'button normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#58B957;align=center;strokeColor=#58B957;fontColor=#ffffff;fontSize=12;whiteSpace=wrap;', 44, 22, 'Button', 'Button (Small)', null, null, this.getTagsForStencil(gn, '', dt + 'button small').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#58B957;align=center;strokeColor=#58B957;fontColor=#ffffff;fontSize=10;whiteSpace=wrap;', 40, 20, 'Button', 'Button (Tiny)', null, null, this.getTagsForStencil(gn, '', dt + 'button tiny').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#55BFE0;align=center;strokeColor=#55BFE0;fontColor=#ffffff;fontSize=16;whiteSpace=wrap;', 80, 40, 'Button', 'Button (Large)', null, null, this.getTagsForStencil(gn, '', dt + 'button large').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#55BFE0;align=center;strokeColor=#55BFE0;fontColor=#ffffff;fontSize=14;whiteSpace=wrap;', 60, 30, 'Button', 'Button (Normal)', null, null, this.getTagsForStencil(gn, '', dt + 'button normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#55BFE0;align=center;strokeColor=#55BFE0;fontColor=#ffffff;fontSize=12;whiteSpace=wrap;', 44, 22, 'Button', 'Button (Small)', null, null, this.getTagsForStencil(gn, '', dt + 'button small').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#55BFE0;align=center;strokeColor=#55BFE0;fontColor=#ffffff;fontSize=10;whiteSpace=wrap;', 40, 20, 'Button', 'Button (Tiny)', null, null, this.getTagsForStencil(gn, '', dt + 'button tiny').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#EFAC43;align=center;strokeColor=#EFAC43;fontColor=#ffffff;fontSize=16;whiteSpace=wrap;', 80, 40, 'Button', 'Button (Large)', null, null, this.getTagsForStencil(gn, '', dt + 'button large').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#EFAC43;align=center;strokeColor=#EFAC43;fontColor=#ffffff;fontSize=14;whiteSpace=wrap;', 60, 30, 'Button', 'Button (Normal)', null, null, this.getTagsForStencil(gn, '', dt + 'button normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#EFAC43;align=center;strokeColor=#EFAC43;fontColor=#ffffff;fontSize=12;whiteSpace=wrap;', 44, 22, 'Button', 'Button (Small)', null, null, this.getTagsForStencil(gn, '', dt + 'button small').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#EFAC43;align=center;strokeColor=#EFAC43;fontColor=#ffffff;fontSize=10;whiteSpace=wrap;', 40, 20, 'Button', 'Button (Tiny)', null, null, this.getTagsForStencil(gn, '', dt + 'button tiny').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#DB524C;align=center;strokeColor=#DB524C;fontColor=#ffffff;fontSize=16;whiteSpace=wrap;', 80, 40, 'Button', 'Button (Large)', null, null, this.getTagsForStencil(gn, '', dt + 'button large').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#DB524C;align=center;strokeColor=#DB524C;fontColor=#ffffff;fontSize=14;whiteSpace=wrap;', 60, 30, 'Button', 'Button (Normal)', null, null, this.getTagsForStencil(gn, '', dt + 'button normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#DB524C;align=center;strokeColor=#DB524C;fontColor=#ffffff;fontSize=12;whiteSpace=wrap;', 44, 22, 'Button', 'Button (Small)', null, null, this.getTagsForStencil(gn, '', dt + 'button small').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#DB524C;align=center;strokeColor=#DB524C;fontColor=#ffffff;fontSize=10;whiteSpace=wrap;', 40, 20, 'Button', 'Button (Tiny)', null, null, this.getTagsForStencil(gn, '', dt + 'button tiny').join(' ')), this.addEntry(dt + 'dropdown small', function() { var bg = new mxCell('Primary', new mxGeometry(0, 0, 100, 22), s + 'rrect;align=center;rSize=5;fillColor=#3D8BCD;strokeColor=#3D8BCD;fontColor=#ffffff;spacingRight=10;whiteSpace=wrap;'); bg.vertex = true; 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(-20, -2.5); marker1.vertex = true; bg.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropdown (Small)'); }), this.addEntry(dt + 'dropdown small', function() { var bg = new mxCell('Success', new mxGeometry(0, 0, 100, 22), s + 'rrect;align=center;rSize=5;fillColor=#58B957;strokeColor=#58B957;fontColor=#ffffff;spacingRight=10;whiteSpace=wrap;'); bg.vertex = true; 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(-20, -2.5); marker1.vertex = true; bg.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropdown (Small)'); }), this.addEntry(dt + 'dropdown small', function() { var bg = new mxCell('Info', new mxGeometry(0, 0, 100, 22), s + 'rrect;align=center;rSize=5;fillColor=#55BFE0;strokeColor=#55BFE0;fontColor=#ffffff;spacingRight=10;whiteSpace=wrap;'); bg.vertex = true; var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#ffffff;strokeColor=none;perimeter=none;whiteSpace=wrap;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-20, -2.5); marker1.vertex = true; bg.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropdown (Small)'); }), this.addEntry(dt + 'dropdown small', function() { var bg = new mxCell('Warning', new mxGeometry(0, 0, 100, 22), s + 'rrect;align=center;rSize=5;fillColor=#EFAC43;strokeColor=#EFAC43;fontColor=#ffffff;spacingRight=10;whiteSpace=wrap;'); bg.vertex = true; var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#ffffff;strokeColor=none;perimeter=none;whiteSpace=wrap;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-20, -2.5); marker1.vertex = true; bg.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropdown (Small)'); }), this.addEntry(dt + 'dropdown small', function() { var bg = new mxCell('Danger', new mxGeometry(0, 0, 100, 22), s + 'rrect;align=center;rSize=5;fillColor=#DB524C;strokeColor=#DB524C;fontColor=#ffffff;spacingRight=10;whiteSpace=wrap;'); bg.vertex = true; 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(-20, -2.5); marker1.vertex = true; bg.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropdown (Small)'); }), this.addEntry(dt + 'dropdown split', function() { var bg = new mxCell('Default', new mxGeometry(0, 0, 120, 30), s + 'rrect;fillColor=#ffffff;align=center;rSize=5;strokeColor=#dddddd;spacingRight=20;fontSize=14;whiteSpace=wrap;'); bg.vertex = true; var button1 = new mxCell('', new mxGeometry(1, 0, 30, 30), s + 'rightButton;rSize=5;fillColor=none;strokeColor=#dddddd;perimeter=none;resizeHeight=1;'); button1.geometry.relative = true; button1.geometry.offset = new mxPoint(-30, 0); button1.vertex = true; bg.insert(button1); var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-20, -2.5); marker1.vertex = true; button1.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropdown (Split)'); }), this.addEntry(dt + 'dropdown split', function() { var bg = new mxCell('Primary', new mxGeometry(0, 0, 120, 30), s + 'rrect;align=center;rSize=5;fillColor=#3D8BCD;strokeColor=#0D5B9D;spacingRight=20;fontSize=14;fontColor=#ffffff;whiteSpace=wrap;'); bg.vertex = true; var button1 = new mxCell('', new mxGeometry(1, 0, 30, 30), s + 'rightButton;rSize=5;fillColor=none;strokeColor=#0D5B9D;perimeter=none;resizeHeight=1;'); button1.geometry.relative = true; button1.geometry.offset = new mxPoint(-30, 0); button1.vertex = true; bg.insert(button1); 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(-20, -2.5); marker1.vertex = true; button1.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropdown (Split)'); }), this.addEntry(dt + 'dropdown split', function() { var bg = new mxCell('Success', new mxGeometry(0, 0, 120, 30), s + 'rrect;align=center;rSize=5;fillColor=#58B957;strokeColor=#288927;spacingRight=20;fontSize=14;fontColor=#ffffff;whiteSpace=wrap;'); bg.vertex = true; var button1 = new mxCell('', new mxGeometry(1, 0, 30, 30), s + 'rightButton;rSize=5;fillColor=none;strokeColor=#288927;perimeter=none;resizeHeight=1;'); button1.geometry.relative = true; button1.geometry.offset = new mxPoint(-30, 0); button1.vertex = true; bg.insert(button1); 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(-20, -2.5); marker1.vertex = true; button1.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropdown (Split)'); }), this.addEntry(dt + 'dropdown split', function() { var bg = new mxCell('Info', new mxGeometry(0, 0, 120, 30), s + 'rrect;align=center;rSize=5;fillColor=#55BFE0;strokeColor=#258FB0;spacingRight=20;fontSize=14;fontColor=#ffffff;whiteSpace=wrap;'); bg.vertex = true; var button1 = new mxCell('', new mxGeometry(1, 0, 30, 30), s + 'rightButton;rSize=5;fillColor=none;strokeColor=#258FB0;perimeter=none;resizeHeight=1;'); button1.geometry.relative = true; button1.geometry.offset = new mxPoint(-30, 0); button1.vertex = true; bg.insert(button1); 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(-20, -2.5); marker1.vertex = true; button1.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropdown (Split)'); }), this.addEntry(dt + 'dropdown split', function() { var bg = new mxCell('Warning', new mxGeometry(0, 0, 120, 30), s + 'rrect;align=center;rSize=5;fillColor=#EFAC43;strokeColor=#BF7C13;spacingRight=20;fontSize=14;fontColor=#ffffff;whiteSpace=wrap;'); bg.vertex = true; var button1 = new mxCell('', new mxGeometry(1, 0, 30, 30), s + 'rightButton;rSize=5;fillColor=none;strokeColor=#BF7C13;perimeter=none;resizeHeight=1;'); button1.geometry.relative = true; button1.geometry.offset = new mxPoint(-30, 0); button1.vertex = true; bg.insert(button1); 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(-20, -2.5); marker1.vertex = true; button1.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropdown (Split)'); }), this.addEntry(dt + 'dropdown split', function() { var bg = new mxCell('Danger', new mxGeometry(0, 0, 120, 30), s + 'rrect;align=center;rSize=5;fillColor=#DB524C;strokeColor=#AB221C;spacingRight=20;fontSize=14;fontColor=#ffffff;whiteSpace=wrap;'); bg.vertex = true; var button1 = new mxCell('', new mxGeometry(1, 0, 30, 30), s + 'rightButton;rSize=5;fillColor=none;strokeColor=#AB221C;perimeter=none;resizeHeight=1;'); button1.geometry.relative = true; button1.geometry.offset = new mxPoint(-30, 0); button1.vertex = true; bg.insert(button1); 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(-20, -2.5); marker1.vertex = true; button1.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropdown (Split)'); }), this.addEntry(dt + 'dropup split', function() { var bg = new mxCell('Dropup', new mxGeometry(0, 0, 120, 30), s + 'rrect;fillColor=#ffffff;align=center;rSize=5;strokeColor=#dddddd;spacingRight=20;fontSize=14;whiteSpace=wrap;'); bg.vertex = true; var button1 = new mxCell('', new mxGeometry(1, 0, 30, 30), s + 'rightButton;rSize=5;fillColor=none;strokeColor=#dddddd;perimeter=none;resizeHeight=1;'); button1.geometry.relative = true; button1.geometry.offset = new mxPoint(-30, 0); button1.vertex = true; bg.insert(button1); var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=north;fillColor=#000000;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-20, -2.5); marker1.vertex = true; button1.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropup (Split)'); }), this.addEntry(dt + 'dropup split', function() { var bg = new mxCell('Right dropup', new mxGeometry(0, 0, 140, 30), s + 'rrect;align=center;rSize=5;fillColor=#3D8BCD;strokeColor=#0D5B9D;spacingRight=20;fontSize=14;fontColor=#ffffff;whiteSpace=wrap;'); bg.vertex = true; var button1 = new mxCell('', new mxGeometry(1, 0, 30, 30), s + 'rightButton;rSize=5;fillColor=none;strokeColor=#0D5B9D;perimeter=none;resizeHeight=1;'); button1.geometry.relative = true; button1.geometry.offset = new mxPoint(-30, 0); button1.vertex = true; bg.insert(button1); var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=north;fillColor=#ffffff;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-20, -2.5); marker1.vertex = true; button1.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropup (Split)'); }), this.addEntry(dt + 'dropdown menu', function() { var bg = new mxCell('Dropdown', new mxGeometry(0, 0, 140, 40), s + 'rrect;align=center;rSize=5;strokeColor=#dddddd;spacingRight=10;fontSize=16;gradientColor=#e4e4e4;gradientDirection=north;whiteSpace=wrap;'); bg.vertex = true; var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-20, -2.5); marker1.vertex = true; bg.insert(marker1); var bg1 = new mxCell('Action\nAnother Action', new mxGeometry(0, 42, 160, 48), s + 'rect;fillColor=#ffffff;fontSize=12;fontColor=#000000;fontFamily=Helvetica;fontStyle=0;strokeColor=#dddddd;spacingLeft=10;shadow=1;align=left;verticalAlign=top;spacingTop=3;'); bg1.vertex = true; return sb.createVertexTemplateFromCells([bg, bg1], 160, 90, 'Dropdown (Menu)'); }), this.addEntry(dt + 'dropdown menu header', function() { var bg = new mxCell('Dropdown', new mxGeometry(0, 0, 110, 40), s + 'rrect;rSize=5;strokeColor=#dddddd;spacingRight=10;fontSize=16;fillColor=#FFFFFF;align=left;spacingLeft=10;whiteSpace=wrap;'); bg.vertex = true; var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-20, -2.5); marker1.vertex = true; bg.insert(marker1); var bg1 = new mxCell('', new mxGeometry(0, 42, 160, 108), s + 'rect;fillColor=#ffffff;strokeColor=#dddddd;shadow=1;'); bg1.vertex = true; var bg2 = new mxCell('Action', new mxGeometry(0, 0, 160, 20), s + 'rect;strokeColor=none;spacingLeft=10;align=left;fillColor=none;whiteSpace=wrap;resizeWidth=1;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(0, 8); bg2.vertex = true; bg1.insert(bg2); var bg3 = new mxCell('Another action', new mxGeometry(0, 0, 160, 20), s + 'rect;strokeColor=none;spacingLeft=10;align=left;fillColor=none;whiteSpace=wrap;resizeWidth=1;'); bg3.geometry.relative = true; bg3.geometry.offset = new mxPoint(0, 28); bg3.vertex = true; bg1.insert(bg3); var bg4 = new mxCell('Disabled link', new mxGeometry(0, 0, 160, 20), s + 'rect;strokeColor=none;spacingLeft=10;align=left;fillColor=none;fontColor=#dddddd;whiteSpace=wrap;resizeWidth=1;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(0, 48); bg4.vertex = true; bg1.insert(bg4); var bg5 = new mxCell('', new mxGeometry(0, 0, 160, 20), 'shape=line;strokeColor=#dddddd;perimeter=none;resizeWidth=1;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(0, 68); bg5.vertex = true; bg1.insert(bg5); var bg7 = new mxCell('Separated link', new mxGeometry(0, 0, 160, 20), s + 'rect;strokeColor=none;spacingLeft=10;align=left;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg7.geometry.relative = true; bg7.geometry.offset = new mxPoint(0, 88); bg7.vertex = true; bg1.insert(bg7); return sb.createVertexTemplateFromCells([bg, bg1], 160, 150, 'Dropdown (Menu, Headers)'); }), this.addEntry(dt + 'dropdown menu', function() { var bg = new mxCell('Dropdown', new mxGeometry(0, 0, 110, 40), s + 'rrect;rSize=5;strokeColor=#dddddd;spacingRight=10;fontSize=16;fillColor=#FFFFFF;align=left;spacingLeft=10;whiteSpace=wrap;'); bg.vertex = true; var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-20, -2.5); marker1.vertex = true; bg.insert(marker1); var bg1 = new mxCell('', new mxGeometry(0, 42, 160, 158), s + 'rect;fillColor=#ffffff;strokeColor=#dddddd;shadow=1;'); bg1.vertex = true; var bg2 = new mxCell('Dropdown header', new mxGeometry(0, 0, 160, 16), s + 'rect;strokeColor=none;spacingLeft=10;align=left;fillColor=none;perimeter=none;fontColor=#dddddd;fontSize=11;whiteSpace=wrap;resizeWidth=1;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(0, 8); bg2.vertex = true; bg1.insert(bg2); var bg3 = new mxCell('Action', new mxGeometry(0, 0, 160, 20), s + 'rect;strokeColor=none;spacingLeft=10;align=left;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg3.geometry.relative = true; bg3.geometry.offset = new mxPoint(0, 28); bg3.vertex = true; bg1.insert(bg3); var bg4 = new mxCell('Another action', new mxGeometry(0, 0, 160, 20), s + 'rect;strokeColor=none;spacingLeft=10;align=left;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(0, 48); bg4.vertex = true; bg1.insert(bg4); var bg5 = new mxCell('Disabled link', new mxGeometry(0, 0, 160, 20), s + 'rect;strokeColor=none;spacingLeft=10;align=left;fillColor=none;fontColor=#dddddd;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(0, 68); bg5.vertex = true; bg1.insert(bg5); var bg6 = new mxCell('', new mxGeometry(0, 0, 160, 20), 'shape=line;strokeColor=#dddddd;perimeter=none;resizeWidth=1;'); bg6.geometry.relative = true; bg6.geometry.offset = new mxPoint(0, 88); bg6.vertex = true; bg1.insert(bg6); var bg7 = new mxCell('Dropdown header', new mxGeometry(0, 0, 160, 16), s + 'rect;strokeColor=none;spacingLeft=10;align=left;fillColor=none;perimeter=none;fontColor=#dddddd;fontSize=11;whiteSpace=wrap;resizeWidth=1;'); bg7.geometry.relative = true; bg7.geometry.offset = new mxPoint(0, 108); bg7.vertex = true; bg1.insert(bg7); var bg8 = new mxCell('Separated link', new mxGeometry(0, 0, 160, 20), s + 'rect;strokeColor=none;spacingLeft=10;align=left;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg8.geometry.relative = true; bg8.geometry.offset = new mxPoint(0, 128); bg8.vertex = true; bg1.insert(bg8); return sb.createVertexTemplateFromCells([bg, bg1], 160, 200, 'Dropdown (Menu)'); }), this.addEntry(dt + 'input group', function() { var bg = new mxCell('Username', new mxGeometry(0, 0, 250, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;spacingLeft=50;fontSize=14;align=left;fontColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var bg2 = new mxCell('@', new mxGeometry(0, 0, 40, 30), s + 'leftButton;rSize=5;strokeColor=#dddddd;fillColor=#f0f0f0;whiteSpace=wrap;resizeHeight=1;'); bg2.geometry.relative = true; bg2.vertex = true; bg.insert(bg2); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Input Group'); }), this.addEntry(dt + 'input group', function() { var bg = new mxCell('', new mxGeometry(0, 0, 250, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;spacingLeft=10;fontSize=14;align=left;fontColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var bg2 = new mxCell('.00', new mxGeometry(1, 0, 40, 30), s + 'rightButton;rSize=5;strokeColor=#dddddd;fillColor=#f0f0f0;whiteSpace=wrap;resizeHeight=1;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(-40, 0); bg2.vertex = true; bg.insert(bg2); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Input Group'); }), this.addEntry(dt + 'input group', function() { var bg = new mxCell('', new mxGeometry(0, 0, 250, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;spacingLeft=50;fontSize=14;align=left;fontColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var bg1 = new mxCell('$', new mxGeometry(0, 0, 40, 30), s + 'leftButton;rSize=5;strokeColor=#dddddd;fillColor=#f0f0f0;whiteSpace=wrap;resizeHeight=1;'); bg1.geometry.relative = true; bg1.vertex = true; bg.insert(bg1); var bg3 = new mxCell('.00', new mxGeometry(1, 0, 40, 30), s + 'rightButton;rSize=5;strokeColor=#dddddd;fillColor=#f0f0f0;whiteSpace=wrap;resizeHeight=1;'); bg3.geometry.relative = true; bg3.geometry.offset = new mxPoint(-40, 0); bg3.vertex = true; bg.insert(bg3); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Input Group'); }), this.addEntry(dt + 'input group', function() { var bg = new mxCell('Username', new mxGeometry(0, 0, 250, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;spacingLeft=50;fontSize=14;align=left;fontColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var bg2 = new mxCell('', new mxGeometry(0, 0, 40, 30), s + 'leftButton;rSize=5;strokeColor=#dddddd;fillColor=#f0f0f0;whiteSpace=wrap;resizeHeight=1;'); bg2.geometry.relative = true; bg2.vertex = true; bg.insert(bg2); var marker1 = new mxCell('', new mxGeometry(0.5, 0.5, 16, 16), s + 'checkbox;rSize=3;strokeColor=#666666;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-8, -8); marker1.vertex = true; bg2.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Input Group'); }), this.addEntry(dt + 'input group', function() { var bg = new mxCell('Username', new mxGeometry(0, 0, 250, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;spacingLeft=50;fontSize=14;align=left;fontColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var bg2 = new mxCell('', new mxGeometry(0, 0, 40, 30), s + 'leftButton;rSize=5;strokeColor=#dddddd;fillColor=#f0f0f0;whiteSpace=wrap;resizeHeight=1;'); bg2.geometry.relative = true; bg2.vertex = true; bg.insert(bg2); var marker1 = new mxCell('', new mxGeometry(0.5, 0.5, 16, 16), s + 'radioButton;rSize=3;strokeColor=#666666;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-8, -8); marker1.vertex = true; bg2.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Input Group'); }), this.addEntry(dt + 'username large', function() { var bg = new mxCell('Username', new mxGeometry(0, 0, 250, 40), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;spacingLeft=60;fontSize=16;align=left;fontColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var bg2 = new mxCell('', new mxGeometry(0, 0, 50, 40), s + 'leftButton;rSize=5;strokeColor=#dddddd;fillColor=#f0f0f0;whiteSpace=wrap;resizeHeight=1;'); bg2.geometry.relative = true; bg2.vertex = true; bg.insert(bg2); var marker1 = new mxCell('', new mxGeometry(0.5, 0.5, 20, 20), s + 'user;rSize=5;strokeColor=none;fillColor=#000000;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-10, -10); marker1.vertex = true; bg2.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Username (Large)'); }), this.addEntry(dt + 'username normal', function() { var bg = new mxCell('Username', new mxGeometry(0, 0, 250, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;spacingLeft=50;fontSize=14;align=left;fontColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var bg2 = new mxCell('', new mxGeometry(0, 0, 40, 30), s + 'leftButton;rSize=5;strokeColor=#dddddd;fillColor=#f0f0f0;whiteSpace=wrap;resizeHeight=1;'); bg2.geometry.relative = true; bg2.vertex = true; bg.insert(bg2); var marker1 = new mxCell('', new mxGeometry(0.5, 0.5, 15, 15), s + 'user;rSize=5;strokeColor=none;fillColor=#000000;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-7.5, -7.5); marker1.vertex = true; bg2.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Username (Normal)'); }), this.addEntry(dt + 'username tiny', function() { var bg = new mxCell('Username', new mxGeometry(0, 0, 250, 20), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;spacingLeft=40;fontSize=10;align=left;fontColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var bg2 = new mxCell('', new mxGeometry(0, 0, 30, 20), s + 'leftButton;rSize=5;strokeColor=#dddddd;fillColor=#f0f0f0;whiteSpace=wrap;resizeHeight=1'); bg2.geometry.relative = true; bg2.vertex = true; bg.insert(bg2); var marker1 = new mxCell('', new mxGeometry(0.5, 0.5, 10, 10), s + 'user;rSize=5;strokeColor=none;fillColor=#000000;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-5, -5); marker1.vertex = true; bg2.insert(marker1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Username (Tiny)'); }), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#dddddd;fontSize=16;align=left;spacingLeft=10;whiteSpace=wrap;', 250, 40, 'Johnny Boo', 'Full Name (Large)', null, null, this.getTagsForStencil(gn, '', dt + 'full name large').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#dddddd;fontSize=14;align=left;spacingLeft=8;whiteSpace=wrap;', 250, 30, 'Johnny Boo', 'Full Name (Normal)', null, null, this.getTagsForStencil(gn, '', dt + 'full name normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#dddddd;fontSize=10;align=left;spacingLeft=6;whiteSpace=wrap;', 250, 20, 'Johnny Boo', 'Full Name (Tiny)', null, null, this.getTagsForStencil(gn, '', dt + 'full name tiny').join(' ')), this.addEntry(dt + 'final price large', function() { var bg = new mxCell('Amount', new mxGeometry(0, 0, 200, 40), s + 'rrect;fillColor=#ffffff;rSize=5;strokeColor=#dddddd;spacingLeft=10;fontSize=16;align=left;fontColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var bg1 = new mxCell('UAH', new mxGeometry(1, 0, 50, 40), s + 'rightButton;rSize=5;strokeColor=#dddddd;fillColor=#f0f0f0;fontSize=16;whiteSpace=wrap;resizeHeight=1;'); bg1.geometry.relative = true; bg1.geometry.offset = new mxPoint(-50, 0); bg1.vertex = true; bg.insert(bg1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Final Price (Large)'); }), this.addEntry(dt + 'final price normal', function() { var bg = new mxCell('Amount', new mxGeometry(0, 0, 200, 30), s + 'rrect;fillColor=#ffffff;rSize=5;strokeColor=#dddddd;spacingLeft=8;fontSize=14;align=left;fontColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var bg1 = new mxCell('UAH', new mxGeometry(1, 0, 40, 30), s + 'rightButton;rSize=5;strokeColor=#dddddd;fillColor=#f0f0f0;fontSize=14;whiteSpace=wrap;resizeHeight=1;'); bg1.geometry.relative = true; bg1.geometry.offset = new mxPoint(-40, 0); bg1.vertex = true; bg.insert(bg1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Final Price (Normal)'); }), this.addEntry(dt + 'final price tiny', function() { var bg = new mxCell('Amount', new mxGeometry(0, 0, 200, 20), s + 'rrect;fillColor=#ffffff;rSize=5;strokeColor=#dddddd;spacingLeft=6;fontSize=10;align=left;fontColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var bg1 = new mxCell('UAH', new mxGeometry(1, 0, 30, 20), s + 'rightButton;rSize=5;strokeColor=#dddddd;fillColor=#f0f0f0;fontSize=10;whiteSpace=wrap;resizeHeight=1;'); bg1.geometry.relative = true; bg1.geometry.offset = new mxPoint(-30, 0); bg1.vertex = true; bg.insert(bg1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Final Price (Tiny)'); }), this.addEntry(dt + 'segmented button large', function() { var bg = new mxCell('Search...', new mxGeometry(0, 0, 400, 40), s + 'rrect;fillColor=#ffffff;rSize=5;strokeColor=#dddddd;fontSize=16;fontColor=#dddddd;align=left;spacingLeft=90;whiteSpace=wrap;'); bg.vertex = true; var bg1 = new mxCell('Users', new mxGeometry(0, 0, 80, 40), s + 'leftButton;rSize=5;strokeColor=#dddddd;fillColor=none;fontSize=16;align=left;spacingLeft=10;whiteSpace=wrap;resizeHeight=1;'); bg1.geometry.relative = true; bg1.vertex = true; bg.insert(bg1); var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-20, -2.5); marker1.vertex = true; bg1.insert(marker1); var bg2 = new mxCell('Go!', new mxGeometry(1, 0, 50, 40), s + 'rightButton;rSize=5;strokeColor=#dddddd;fillColor=none;fontSize=16;whiteSpace=wrap;resizeHeight=1;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(-50, 0); bg2.vertex = true; bg.insert(bg2); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Segmented Button (Large)'); }), this.addEntry(dt + 'segmented button normal', function() { var bg = new mxCell('Search...', new mxGeometry(0, 0, 400, 30), s + 'rrect;fillColor=#ffffff;rSize=5;strokeColor=#dddddd;fontSize=14;fontColor=#dddddd;align=left;spacingLeft=80;whiteSpace=wrap;'); bg.vertex = true; var bg1 = new mxCell('Users', new mxGeometry(0, 0, 70, 30), s + 'leftButton;rSize=5;strokeColor=#dddddd;fillColor=none;fontSize=14;align=left;spacingLeft=6;whiteSpace=wrap;resizeHeight=1;'); bg1.geometry.relative = true; bg1.vertex = true; bg.insert(bg1); var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-20, -2.5); marker1.vertex = true; bg1.insert(marker1); var bg2 = new mxCell('Go!', new mxGeometry(1, 0, 40, 30), s + 'rightButton;rSize=5;strokeColor=#dddddd;fillColor=none;fontSize=14;whiteSpace=wrap;resizeHeight=1;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(-40, 0); bg2.vertex = true; bg.insert(bg2); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Segmented Button (Normal)'); }), this.addEntry(dt + 'segmented button tiny', function() { var bg = new mxCell('Search...', new mxGeometry(0, 0, 400, 20), s + 'rrect;fillColor=#ffffff;rSize=5;strokeColor=#dddddd;fontSize=10;fontColor=#dddddd;align=left;spacingLeft=70;whiteSpace=wrap;'); bg.vertex = true; var bg1 = new mxCell('Users', new mxGeometry(0, 0, 60, 20), s + 'leftButton;rSize=5;strokeColor=#dddddd;fillColor=none;fontSize=10;align=left;spacingLeft=3;whiteSpace=wrap;resizeHeight=1;'); bg1.geometry.relative = true; bg1.vertex = true; bg.insert(bg1); var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-20, -2.5); marker1.vertex = true; bg1.insert(marker1); var bg2 = new mxCell('Go!', new mxGeometry(1, 0, 30, 20), s + 'rightButton;rSize=5;strokeColor=#dddddd;fillColor=none;fontSize=10;whiteSpace=wrap;resizeHeight=1;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(-30, 0); bg2.vertex = true; bg.insert(bg2); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Segmented Button (Tiny)'); }), this.addEntry(dt + 'search button large', function() { var bg = new mxCell('Search...', new mxGeometry(0, 0, 200, 40), s + 'rrect;fillColor=#ffffff;rSize=5;strokeColor=#dddddd;align=left;spacingLeft=10;fontSize=16;fontColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var bg1 = new mxCell('Go!', new mxGeometry(1, 0, 50, 40), s + 'rightButton;rSize=5;strokeColor=#dddddd;fillColor=none;fontSize=16;whiteSpace=wrap;resizeHeight=1;'); bg1.geometry.relative = true; bg1.geometry.offset = new mxPoint(-50, 0); bg1.vertex = true; bg.insert(bg1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Search Button (Large)'); }), this.addEntry(dt + 'search button normal', function() { var bg = new mxCell('Search...', new mxGeometry(0, 0, 200, 30), s + 'rrect;fillColor=#ffffff;rSize=5;strokeColor=#dddddd;align=left;spacingLeft=6;fontSize=14;fontColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var bg1 = new mxCell('Go!', new mxGeometry(1, 0, 40, 30), s + 'rightButton;rSize=5;strokeColor=#dddddd;fillColor=none;fontSize=14;whiteSpace=wrap;resizeHeight=1;'); bg1.geometry.relative = true; bg1.geometry.offset = new mxPoint(-40, 0); bg1.vertex = true; bg.insert(bg1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Search Button (Normal)'); }), this.addEntry(dt + 'search button tiny', function() { var bg = new mxCell('Search...', new mxGeometry(0, 0, 200, 20), s + 'rrect;fillColor=#ffffff;rSize=5;strokeColor=#dddddd;align=left;spacingLeft=3;fontSize=10;fontColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var bg1 = new mxCell('Go!', new mxGeometry(1, 0, 30, 20), s + 'rightButton;rSize=5;strokeColor=#dddddd;fillColor=none;fontSize=10;whiteSpace=wrap;resizeHeight=1;'); bg1.geometry.relative = true; bg1.geometry.offset = new mxPoint(-30, 0); bg1.vertex = true; bg.insert(bg1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Search Button (Tiny)'); }), this.addEntry(dt + 'dropdown menu', function() { var bg = new mxCell('Dubai, UAE', new mxGeometry(0, 0, 300, 40), s + 'rrect;rSize=5;strokeColor=#dddddd;spacingRight=10;fontSize=16;gradientColor=#e4e4e4;gradientDirection=north;spacingLeft=10;align=left;whiteSpace=wrap;'); bg.vertex = true; var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-15, -2.5); marker1.vertex = true; bg.insert(marker1); var bg1 = new mxCell('', new mxGeometry(0, 42, 300, 258), s + 'rect;fillColor=#ffffff;strokeColor=#dddddd;spacingLeft=10;shadow=1;align=left;verticalAlign=top;spacingTop=3;perimeter=none;'); bg1.vertex = true; var bg2 = new mxCell('Search...', new mxGeometry(0, 0, 280, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;spacingLeft=10;align=left;fontColor=#dddddd;whiteSpace=wrap;resizeWidth=1;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(10, 9); bg2.vertex = true; bg1.insert(bg2); var bg3 = new mxCell('Beijing, China', new mxGeometry(0, 0, 300, 30), s + 'rect;strokeColor=#dddddd;spacingLeft=10;align=left;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg3.geometry.relative = true; bg3.geometry.offset = new mxPoint(0, 48); bg3.vertex = true; bg1.insert(bg3); var bg4 = new mxCell('Dubai, UAE', new mxGeometry(0, 0, 300, 30), s + 'rect;strokeColor=#dddddd;spacingLeft=10;align=left;fontStyle=1;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(0, 78); bg4.vertex = true; bg1.insert(bg4); var marker2 = new mxCell('', new mxGeometry(1, 0.5, 10, 8), s + 'check;strokeWidth=3;strokeColor=#666666;'); marker2.geometry.relative = true; marker2.geometry.offset = new mxPoint(-15, -4); marker2.vertex = true; bg4.insert(marker2); var bg5 = new mxCell('Kiev, Ukraine', new mxGeometry(0, 0, 300, 30), s + 'rect;strokeColor=#dddddd;spacingLeft=10;align=left;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(0, 108); bg5.vertex = true; bg1.insert(bg5); var bg6 = new mxCell('London, UK', new mxGeometry(0, 0, 300, 30), s + 'rect;strokeColor=#dddddd;spacingLeft=10;align=left;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg6.geometry.relative = true; bg6.geometry.offset = new mxPoint(0, 138); bg6.vertex = true; bg1.insert(bg6); var bg7 = new mxCell('Moscow, Russia', new mxGeometry(0, 0, 300, 30), s + 'rect;strokeColor=#dddddd;spacingLeft=10;align=left;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg7.geometry.relative = true; bg7.geometry.offset = new mxPoint(0, 168); bg7.vertex = true; bg1.insert(bg7); var bg8 = new mxCell('New York, USA', new mxGeometry(0, 0, 300, 30), s + 'rect;strokeColor=#dddddd;spacingLeft=10;align=left;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg8.geometry.relative = true; bg8.geometry.offset = new mxPoint(0, 198); bg8.vertex = true; bg1.insert(bg8); var bg9 = new mxCell('Tokyo, Japan', new mxGeometry(0, 0, 300, 30), s + 'rect;strokeColor=#dddddd;spacingLeft=10;align=left;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg9.geometry.relative = true; bg9.geometry.offset = new mxPoint(0, 228); bg9.vertex = true; bg1.insert(bg9); return sb.createVertexTemplateFromCells([bg, bg1], 300, 300, 'Dropdown (Menu)'); }), this.addEntry(dt + 'dropdown menu', function() { var bg = new mxCell('Dubai, UAE', new mxGeometry(0, 0, 200, 40), s + 'rrect;rSize=5;strokeColor=#dddddd;spacingRight=10;fontSize=16;gradientColor=#e4e4e4;gradientDirection=north;spacingLeft=10;align=left;whiteSpace=wrap;'); bg.vertex = true; var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-15, -2.5); marker1.vertex = true; bg.insert(marker1); var bg1 = new mxCell('', new mxGeometry(0, 42, 200, 210), s + 'rect;fillColor=#ffffff;strokeColor=#dddddd;spacingLeft=10;shadow=1;align=left;verticalAlign=top;spacingTop=3;perimeter=none;'); bg1.vertex = true; var bg3 = new mxCell('Beijing, China', new mxGeometry(0, 0, 200, 30), s + 'rect;strokeColor=#dddddd;spacingLeft=10;align=left;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg3.geometry.relative = true; bg3.vertex = true; bg1.insert(bg3); var bg4 = new mxCell('Dubai, UAE', new mxGeometry(0, 0, 200, 30), s + 'rect;strokeColor=#dddddd;spacingLeft=10;align=left;fontStyle=1;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(0, 30); bg4.vertex = true; bg1.insert(bg4); var marker2 = new mxCell('', new mxGeometry(1, 0.5, 10, 8), s + 'check;strokeWidth=3;strokeColor=#666666;'); marker2.geometry.relative = true; marker2.geometry.offset = new mxPoint(-15, -4); marker2.vertex = true; bg4.insert(marker2); var bg5 = new mxCell('Kiev, Ukraine', new mxGeometry(0, 0, 200, 30), s + 'rect;strokeColor=#dddddd;spacingLeft=10;align=left;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(0, 60); bg5.vertex = true; bg1.insert(bg5); var bg6 = new mxCell('London, UK', new mxGeometry(0, 0, 200, 30), s + 'rect;strokeColor=#dddddd;spacingLeft=10;align=left;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg6.geometry.relative = true; bg6.geometry.offset = new mxPoint(0, 90); bg6.vertex = true; bg1.insert(bg6); var bg7 = new mxCell('Moscow, Russia', new mxGeometry(0, 0, 200, 30), s + 'rect;strokeColor=#dddddd;spacingLeft=10;align=left;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg7.geometry.relative = true; bg7.geometry.offset = new mxPoint(0, 120); bg7.vertex = true; bg1.insert(bg7); var bg8 = new mxCell('New York, USA', new mxGeometry(0, 0, 200, 30), s + 'rect;strokeColor=#dddddd;spacingLeft=10;align=left;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg8.geometry.relative = true; bg8.geometry.offset = new mxPoint(0, 150); bg8.vertex = true; bg1.insert(bg8); var bg9 = new mxCell('Tokyo, Japan', new mxGeometry(0, 0, 200, 30), s + 'rect;strokeColor=#dddddd;spacingLeft=10;align=left;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;'); bg9.geometry.relative = true; bg9.geometry.offset = new mxPoint(0, 180); bg9.vertex = true; bg1.insert(bg9); return sb.createVertexTemplateFromCells([bg, bg1], 200, 252, 'Dropdown (Menu)'); }), this.addEntry(dt + 'context menu', function() { var bg = new mxCell('', new mxGeometry(0, 0, 140, 128), s + 'rect;fillColor=#ffffff;strokeColor=#dddddd;shadow=1;whiteSpace=wrap;'); bg.vertex = true; var bg1 = new mxCell('Dropdown header', new mxGeometry(0, 0, 140, 16), s + 'rect;strokeColor=none;spacingLeft=6;align=left;fillColor=none;perimeter=none;fontColor=#dddddd;fontSize=10;whiteSpace=wrap;resizeWidth=1;'); bg1.geometry.relative = true; bg1.geometry.offset = new mxPoint(0, 8); bg1.vertex = true; bg.insert(bg1); var bg2 = new mxCell('Action', new mxGeometry(0, 0, 140, 16), s + 'rect;strokeColor=none;spacingLeft=6;align=left;fillColor=none;perimeter=none;fontSize=10;whiteSpace=wrap;resizeWidth=1;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(0, 24); bg2.vertex = true; bg.insert(bg2); var bg3 = new mxCell('Another action', new mxGeometry(0, 0, 140, 16), s + 'rect;strokeColor=none;spacingLeft=6;align=left;fillColor=none;perimeter=none;fontSize=10;whiteSpace=wrap;resizeWidth=1;'); bg3.geometry.relative = true; bg3.geometry.offset = new mxPoint(0, 40); bg3.vertex = true; bg.insert(bg3); var bg4 = new mxCell('Something else here', new mxGeometry(0, 0, 140, 16), s + 'rect;strokeColor=none;spacingLeft=6;align=left;fillColor=none;perimeter=none;fontSize=10;whiteSpace=wrap;resizeWidth=1;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(0, 56); bg4.vertex = true; bg.insert(bg4); var bg5 = new mxCell('', new mxGeometry(0, 0, 140, 16), 'shape=line;strokeColor=#dddddd;perimeter=none;resizeWidth=1;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(0, 72); bg5.vertex = true; bg.insert(bg5); var bg6 = new mxCell('Dropdown header', new mxGeometry(0, 0, 140, 16), s + 'rect;strokeColor=none;spacingLeft=6;align=left;fillColor=none;perimeter=none;fontColor=#dddddd;fontSize=10;whiteSpace=wrap;resizeWidth=1;'); bg6.geometry.relative = true; bg6.geometry.offset = new mxPoint(0, 88); bg6.vertex = true; bg.insert(bg6); var bg7 = new mxCell('Separated link', new mxGeometry(0, 0, 140, 16), s + 'rect;strokeColor=none;spacingLeft=6;align=left;fillColor=none;perimeter=none;fontSize=10;whiteSpace=wrap;resizeWidth=1;'); bg7.geometry.relative = true; bg7.geometry.offset = new mxPoint(0, 104); bg7.vertex = true; bg.insert(bg7); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Context Menu'); }), this.addEntry(dt + 'context menu', function() { var bg = new mxCell('', new mxGeometry(0, 0, 140, 96), s + 'rect;fillColor=#ffffff;strokeColor=#dddddd;shadow=1;'); bg.vertex = true; var bg2 = new mxCell('Action', new mxGeometry(0, 0, 140, 16), s + 'rect;strokeColor=none;spacingLeft=6;align=left;fillColor=none;perimeter=none;fontSize=10;whiteSpace=wrap;resizeWidth=1;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(0, 8); bg2.vertex = true; bg.insert(bg2); var bg3 = new mxCell('Another action', new mxGeometry(0, 0, 140, 16), s + 'rect;strokeColor=none;spacingLeft=6;align=left;fillColor=none;perimeter=none;fontSize=10;whiteSpace=wrap;resizeWidth=1;'); bg3.geometry.relative = true; bg3.geometry.offset = new mxPoint(0, 24); bg3.vertex = true; bg.insert(bg3); var bg4 = new mxCell('Something else here', new mxGeometry(0, 0, 140, 16), s + 'rect;strokeColor=none;spacingLeft=6;align=left;fillColor=none;perimeter=none;fontSize=10;whiteSpace=wrap;resizeWidth=1;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(0, 40); bg4.vertex = true; bg.insert(bg4); var bg5 = new mxCell('', new mxGeometry(0, 0, 140, 16), 'shape=line;strokeColor=#dddddd;perimeter=none;resizeWidth=1;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(0, 56); bg5.vertex = true; bg.insert(bg5); var bg7 = new mxCell('Separated link', new mxGeometry(0, 0, 140, 16), s + 'rect;strokeColor=none;spacingLeft=6;align=left;fillColor=none;perimeter=none;fontSize=10;whiteSpace=wrap;resizeWidth=1;'); bg7.geometry.relative = true; bg7.geometry.offset = new mxPoint(0, 72); bg7.vertex = true; bg.insert(bg7); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Context Menu'); }), this.addEntry(dt + 'pagination', function() { var bg = new mxCell('', new mxGeometry(0, 0, 330, 30), s + 'rrect;fillColor=#ffffff;strokeColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var bg2 = new mxCell('<<', new mxGeometry(0, 0, 30, 30), s + 'leftButton;strokeColor=none;fillColor=none;fontColor=#3D8BCD;whiteSpace=wrap;'); bg2.vertex = true; bg.insert(bg2); var bg3 = new mxCell('1', new mxGeometry(30, 0, 30, 30), s + 'rect;strokeColor=#dddddd;fillColor=none;perimeter=none;fontColor=#3D8BCD;whiteSpace=wrap;'); bg3.vertex = true; bg.insert(bg3); var bg5 = new mxCell('3', new mxGeometry(90, 0, 30, 30), s + 'rect;strokeColor=#dddddd;fillColor=none;perimeter=none;fontColor=#3D8BCD;whiteSpace=wrap;'); bg5.vertex = true; bg.insert(bg5); var bg6 = new mxCell('4', new mxGeometry(120, 0, 30, 30), s + 'rect;strokeColor=#dddddd;fillColor=none;perimeter=none;fontColor=#3D8BCD;whiteSpace=wrap;'); bg6.vertex = true; bg.insert(bg6); var bg7 = new mxCell('5', new mxGeometry(150, 0, 30, 30), s + 'rect;strokeColor=#dddddd;fillColor=none;perimeter=none;fontColor=#3D8BCD;whiteSpace=wrap;'); bg7.vertex = true; bg.insert(bg7); var bg8 = new mxCell('6', new mxGeometry(180, 0, 30, 30), s + 'rect;strokeColor=#dddddd;fillColor=none;perimeter=none;fontColor=#3D8BCD;whiteSpace=wrap;'); bg8.vertex = true; bg.insert(bg8); var bg9 = new mxCell('7', new mxGeometry(210, 0, 30, 30), s + 'rect;strokeColor=#dddddd;fillColor=none;perimeter=none;fontColor=#3D8BCD;whiteSpace=wrap;'); bg9.vertex = true; bg.insert(bg9); var bg10 = new mxCell('8', new mxGeometry(240, 0, 30, 30), s + 'rect;strokeColor=#dddddd;fillColor=none;perimeter=none;fontColor=#3D8BCD;whiteSpace=wrap;'); bg10.vertex = true; bg.insert(bg10); var bg11 = new mxCell('9', new mxGeometry(270, 0, 30, 30), s + 'rect;strokeColor=#dddddd;fillColor=none;perimeter=none;fontColor=#3D8BCD;whiteSpace=wrap;'); bg11.vertex = true; bg.insert(bg11); var bg12 = new mxCell('>>', new mxGeometry(300, 0, 30, 30), s + 'rightButton;strokeColor=#dddddd;fillColor=none;fontColor=#3D8BCD;whiteSpace=wrap;'); bg12.vertex = true; bg.insert(bg12); var bg4 = new mxCell('2', new mxGeometry(60, 0, 30, 30), s + 'rect;strokeColor=#3D8BCD;fillColor=#3D8BCD;perimeter=none;fontColor=#ffffff;whiteSpace=wrap;'); bg4.vertex = true; bg.insert(bg4); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Pagination'); }), this.createVertexTemplateEntry(s + 'roundedButton;fillColor=#ffffff;align=center;strokeColor=#dddddd;fontColor=#3D8BCD;whiteSpace=wrap;', 100, 30, 'Previous', 'Button (Previous)', null, null, this.getTagsForStencil(gn, '', dt + '').join(' ')), this.createVertexTemplateEntry(s + 'roundedButton;fillColor=#ffffff;align=center;strokeColor=#dddddd;fontColor=#3D8BCD;whiteSpace=wrap;', 60, 30, 'Next', 'Button (Next)', null, null, this.getTagsForStencil(gn, '', dt + '').join(' ')), this.addEntry(dt + 'button older', function() { var bg = new mxCell('Older', new mxGeometry(0, 0, 100, 30), s + 'roundedButton;fillColor=#ffffff;align=center;strokeColor=#dddddd;fontColor=#dddddd;spacingLeft=10;whiteSpace=wrap;'); bg.vertex = true; var bg2 = new mxCell('', new mxGeometry(0, 0.5, 16, 4), s + 'arrow;strokeColor=#dddddd;flipH=1;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(12, -2); bg2.vertex = true; bg.insert(bg2); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button (Older)'); }), this.addEntry(dt + 'button newer', function() { var bg = new mxCell('Newer', new mxGeometry(0, 0, 100, 30), s + 'roundedButton;fillColor=#ffffff;align=center;strokeColor=#dddddd;fontColor=#3D8BCD;spacingRight=10;whiteSpace=wrap;'); bg.vertex = true; var bg2 = new mxCell('', new mxGeometry(1, 0.5, 16, 4), s + 'arrow;strokeColor=#3D8BCD;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(-28, -2); bg2.vertex = true; bg.insert(bg2); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button (Newer)'); }), this.addEntry(dt + 'tabs', function() { var bg = new mxCell('Home', new mxGeometry(0, 0, 58, 40), s + 'tabTop;fillColor=#ffffff;align=center;fontColor=#000000;strokeColor=#dddddd;rSize=5;whiteSpace=wrap;'); bg.vertex = true; var bg2 = new mxCell('', new mxGeometry(58, 35, 402, 10), 'shape=line;strokeColor=#dddddd;'); bg2.vertex = true; var bg3 = new mxCell('Disabled Link', new mxGeometry(62, 0, 100, 40), s + 'topButton;fillColor=#ffffff;strokeColor=none;rSize=5;fontColor=#dddddd;whiteSpace=wrap;'); bg3.vertex = true; var bg4 = new mxCell('Messages', new mxGeometry(166, 0, 116, 40), s + 'topButton;align=center;fillColor=#ffffff;strokeColor=none;rSize=5;fontColor=#3D8BCD;spacingRight=30;whiteSpace=wrap;'); bg4.vertex = true; var notif1 = new mxCell('24', new mxGeometry(1, 0.5, 25, 16), s + 'rrect;rSize=8;fillColor=#999999;strokeColor=none;fontColor=#ffffff;perimeter=none;whiteSpace=wrap;'); notif1.geometry.relative = true; notif1.geometry.offset = new mxPoint(-36, -8); notif1.vertex = true; bg4.insert(notif1); var bg5 = new mxCell('Action Logs', new mxGeometry(286, 0, 106, 40), s + 'topButton;fillColor=#ffffff;strokeColor=none;rSize=5;fontColor=#3D8BCD;spacingRight=20;whiteSpace=wrap;'); bg5.vertex = true; var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#3D8BCD;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-21, -2.5); marker1.vertex = true; bg5.insert(marker1); return sb.createVertexTemplateFromCells([bg, bg3, bg4, bg5, bg2], 460, 45, 'Tabs'); }), this.addEntry(dt + 'pills', function() { var bg = new mxCell('Home', new mxGeometry(0, 0, 58, 40), s + 'rrect;align=center;rSize=5;strokeColor=none;fillColor=#3D8BCD;fontColor=#ffffff;rSize=5;whiteSpace=wrap;'); bg.vertex = true; var bg3 = new mxCell('Disabled Link', new mxGeometry(62, 0, 100, 40), s + 'rrect;fillColor=#ffffff;align=center;rSize=5;;strokeColor=none;rSize=5;fontColor=#dddddd;whiteSpace=wrap;'); bg3.vertex = true; var bg4 = new mxCell('Messages', new mxGeometry(166, 0, 116, 40), s + 'rrect;rSize=5;fillColor=#ffffff;align=center;strokeColor=none;rSize=5;fontColor=#3D8BCD;spacingRight=30;whiteSpace=wrap;'); bg4.vertex = true; var notif1 = new mxCell('24', new mxGeometry(1, 0.5, 25, 16), s + 'rrect;rSize=8;fillColor=#999999;strokeColor=none;fontColor=#ffffff;perimeter=none;whiteSpace=wrap;'); notif1.geometry.relative = true; notif1.geometry.offset = new mxPoint(-36, -8); notif1.vertex = true; bg4.insert(notif1); var bg5 = new mxCell('Action Logs', new mxGeometry(286, 0, 106, 40), s + 'rrect;rSize=5;fillColor=#ffffff;align=center;strokeColor=none;rSize=5;fontColor=#3D8BCD;spacingRight=20;whiteSpace=wrap;'); bg5.vertex = true; var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#3D8BCD;strokeColor=none;perimeter=none;'); marker1.geometry.relative = true; marker1.geometry.offset = new mxPoint(-21, -2.5); marker1.vertex = true; bg5.insert(marker1); return sb.createVertexTemplateFromCells([bg, bg3, bg4, bg5], 392, 45, 'Pills'); }), this.addEntry(dt + 'breadcrumb', function() { var bg = new mxCell('', new mxGeometry(0, 0, 460, 30), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;'); bg.vertex = true; var bg1 = new mxCell('Home', new mxGeometry(0, 0, 50, 30), s + 'rect;perimeter=none;strokeColor=none;fillColor=none;fontColor=#3D8BCD;spacingLeft=10;whiteSpace=wrap;resizeHeight=1;'); bg1.geometry.relative = true; bg1.vertex = true; bg.insert(bg1); var bg2 = new mxCell('/', new mxGeometry(0, 0, 20, 30), s + 'rect;perimeter=none;strokeColor=none;fillColor=none;fontColor=#dddddd;whiteSpace=wrap;resizeHeight=1;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(50, 0); bg2.vertex = true; bg.insert(bg2); var bg3 = new mxCell('Library', new mxGeometry(0, 0, 50, 30), s + 'rect;perimeter=none;strokeColor=none;fillColor=none;fontColor=#3D8BCD;whiteSpace=wrap;resizeHeight=1;'); bg3.geometry.relative = true; bg3.geometry.offset = new mxPoint(70, 0); bg3.vertex = true; bg.insert(bg3); var bg4 = new mxCell('/', new mxGeometry(0, 0, 20, 30), s + 'rect;perimeter=none;strokeColor=none;fillColor=none;fontColor=#dddddd;whiteSpace=wrap;resizeHeight=1;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(120, 0); bg4.vertex = true; bg.insert(bg4); var bg5 = new mxCell('Data', new mxGeometry(0, 0, 50, 30), s + 'rect;perimeter=none;strokeColor=none;fillColor=none;fontColor=#dddddd;whiteSpace=wrap;resizeHeight=1;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(140, 0); bg5.vertex = true; bg.insert(bg5); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Breadcrumb'); }), this.addEntry(dt + 'pills vertical', function() { var bg = new mxCell('', new mxGeometry(0, 0, 200, 158), s + 'rrect;rSize5=;strokeColor=none;fillColor=#ffffff;'); bg.vertex = true; var bg1 = new mxCell('Home', new mxGeometry(0, 0, 200, 30), s + 'rrect;rSize=5;strokeColor=none;fillColor=#3D8BCD;fontColor=#ffffff;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;'); bg1.geometry.relative = true; bg1.vertex = true; bg.insert(bg1); var notif1 = new mxCell('42', new mxGeometry(1, 0.5, 25, 16), s + 'rrect;rSize=8;fillColor=#ffffff;strokeColor=none;fontColor=#3D8BCD;whiteSpace=wrap;'); notif1.geometry.relative = true; notif1.geometry.offset = new mxPoint(-33, -8); notif1.vertex = true; bg1.insert(notif1); var bg2 = new mxCell('Profile', new mxGeometry(0, 0, 200, 30), s + 'rrect;fillColor=#ffffff;rSize=5;strokeColor=none;fontColor=#3D8BCD;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(0, 32); bg2.vertex = true; bg.insert(bg2); var bg3 = new mxCell('Messages', new mxGeometry(0, 0, 200, 30), s + 'rrect;fillColor=#ffffff;rSize=5;strokeColor=none;fontColor=#3D8BCD;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;'); bg3.geometry.relative = true; bg3.geometry.offset = new mxPoint(0, 64); bg3.vertex = true; bg.insert(bg3); var notif2 = new mxCell('24', new mxGeometry(1, 0.5, 25, 16), s + 'rrect;rSize=8;fillColor=#999999;strokeColor=none;fontColor=#ffffff;whiteSpace=wrap;'); notif2.geometry.relative = true; notif2.geometry.offset = new mxPoint(-33, -8); notif2.vertex = true; bg3.insert(notif2); var bg4 = new mxCell('Disabled Link', new mxGeometry(0, 0, 200, 30), s + 'rrect;fillColor=#ffffff;rSize=5;strokeColor=none;fontColor=#dddddd;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(0, 96); bg4.vertex = true; bg.insert(bg4); var bg5 = new mxCell('System Settings', new mxGeometry(0, 0, 200, 30), s + 'rrect;fillColor=#ffffff;rSize=5;strokeColor=none;fontColor=#3D8BCD;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(0, 128); bg5.vertex = true; bg.insert(bg5); var notif3 = new mxCell('1', new mxGeometry(1, 0.5, 25, 16), s + 'rrect;rSize=8;fillColor=#999999;strokeColor=none;fontColor=#ffffff;whiteSpace=wrap;'); notif3.geometry.relative = true; notif3.geometry.offset = new mxPoint(-33, -8); notif3.vertex = true; bg5.insert(notif3); return sb.createVertexTemplateFromCells([bg], 200, 158, 'Pills (Vertical)'); }), this.addEntry(dt + 'navbar', function() { var bg = new mxCell('', new mxGeometry(0, 0, 720, 100), s + 'rrect;rSize=5;fillColor=#f6f6f6;strokeColor=#dddddd;recursiveResize=0;'); bg.vertex = true; var button1 = new mxCell('Brand', new mxGeometry(0, 0, 80, 40), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;fontSize=14;whiteSpace=wrap;'); button1.vertex = true; bg.insert(button1); var button2 = new mxCell('Link', new mxGeometry(80, 0, 60, 40), s + 'rect;fillColor=#dddddd;strokeColor=none;fontColor=#999999;whiteSpace=wrap;'); button2.vertex = true; bg.insert(button2); var button3 = new mxCell('Link', new mxGeometry(140, 0, 60, 40), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;whiteSpace=wrap;'); button3.vertex = true; bg.insert(button3); var button4 = new mxCell('Dropdown', new mxGeometry(200, 0, 100, 40), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;spacingRight=10;whiteSpace=wrap;'); button4.vertex = true; bg.insert(button4); var notif1 = new mxCell('', new mxGeometry(1, 0.5, 8, 5), 'shape=triangle;fillColor=#999999;strokeColor=none;direction=south;perimeter=none;'); notif1.geometry.relative = true; notif1.geometry.offset = new mxPoint(-19, -3); notif1.vertex = true; button4.insert(notif1); var button6 = new mxCell('Search...', new mxGeometry(305, 5, 200, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;fontColor=#dddddd;align=left;spacingLeft=10;whiteSpace=wrap;'); button6.vertex = true; bg.insert(button6); var button7 = new mxCell('Submit', new mxGeometry(510, 5, 80, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;whiteSpace=wrap;'); button7.vertex = true; bg.insert(button7); var button8 = new mxCell('Link', new mxGeometry(1, 1, 60, 40), s + 'anchor;fontColor=#999999;whiteSpace=wrap;'); button8.geometry.relative = true; button8.geometry.offset = new mxPoint(-180, -40); button8.vertex = true; bg.insert(button8); var button9 = new mxCell('Dropdown', new mxGeometry(1, 1, 100, 40), s + 'anchor;fontColor=#999999;spacingRight=10;whiteSpace=wrap;'); button9.geometry.relative = true; button9.geometry.offset = new mxPoint(-120, -40); button9.vertex = true; bg.insert(button9); var notif2 = new mxCell('', new mxGeometry(1, 0.5, 8, 5), 'shape=triangle;fillColor=#999999;strokeColor=none;direction=south;perimeter=none;'); notif2.geometry.relative = true; notif2.geometry.offset = new mxPoint(-19, -3); notif2.vertex = true; button9.insert(notif2); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar'); }), this.addEntry(dt + 'navbar form', function() { var bg = new mxCell('', new mxGeometry(0, 0, 720, 40), s + 'rrect;rSize=5;fillColor=#f6f6f6;strokeColor=#dddddd;'); bg.vertex = true; var button1 = new mxCell('Brand', new mxGeometry(0, 0, 80, 40), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;fontSize=14;whiteSpace=wrap;resizeHeight=1;'); button1.geometry.relative = true; button1.vertex = true; bg.insert(button1); var button2 = new mxCell('Search...', new mxGeometry(0, 0, 200, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;fontColor=#dddddd;align=left;spacingLeft=10;whiteSpace=wrap;resizeHeight=1;'); button2.geometry.relative = true; button2.geometry.offset = new mxPoint(85, 5); button2.vertex = true; bg.insert(button2); var button3 = new mxCell('Submit', new mxGeometry(0, 0, 80, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;whiteSpace=wrap;resizeHeight=1;'); button3.geometry.relative = true; button3.geometry.offset = new mxPoint(290, 5); button3.vertex = true; bg.insert(button3); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar Form'); }), this.addEntry(dt + 'navbar button', function() { var bg = new mxCell('', new mxGeometry(0, 0, 720, 40), s + 'rrect;rSize=5;fillColor=#f6f6f6;strokeColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var button1 = new mxCell('Brand', new mxGeometry(0, 0, 80, 40), s + 'anchor;fontColor=#999999;fontSize=14;whiteSpace=wrap;resizeHeight=1;'); button1.geometry.relative = true; button1.vertex = true; bg.insert(button1); var button2 = new mxCell('Sign in', new mxGeometry(0, 0, 60, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;whiteSpace=wrap;resizeHeight=1;'); button2.geometry.relative = true; button2.geometry.offset = new mxPoint(80, 5); button2.vertex = true; bg.insert(button2); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar Button'); }), this.addEntry(dt + 'navbar text', function() { var bg = new mxCell('', new mxGeometry(0, 0, 720, 40), s + 'rrect;rSize=5;fillColor=#f6f6f6;strokeColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var button1 = new mxCell('Brand', new mxGeometry(0, 0, 80, 40), s + 'anchor;fontColor=#999999;fontSize=14;whiteSpace=wrap;resizeHeight=1;'); button1.geometry.relative = true; button1.vertex = true; bg.insert(button1); var button2 = new mxCell('Signed in as Mark Otto', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=10;whiteSpace=wrap;resizeHeight=1;'); button2.geometry.relative = true; button2.geometry.offset = new mxPoint(80, 0); button2.vertex = true; bg.insert(button2); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar Text'); }), this.addEntry(dt + 'non nav link', function() { var bg = new mxCell('', new mxGeometry(0, 0, 720, 40), s + 'rrect;rSize=5;fillColor=#f6f6f6;strokeColor=#dddddd;'); bg.vertex = true; var button1 = new mxCell('Brand', new mxGeometry(0, 0, 80, 40), s + 'anchor;fontColor=#999999;fontSize=14;whiteSpace=wrap;resizeHeight=1;'); button1.geometry.relative = true; button1.vertex = true; bg.insert(button1); var button2 = new mxCell('Signed in as Mark Otto', new mxGeometry(1, 0, 160, 40), s + 'anchor;fontColor=#999999;align=right;spacingRight=20;whiteSpace=wrap;resizeHeight=1;'); button2.geometry.relative = true; button2.geometry.offset = new mxPoint(-160, 0); button2.vertex = true; bg.insert(button2); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Non-nav Link'); }), this.addEntry(dt + 'navbar', function() { var bg = new mxCell('', new mxGeometry(0, 0, 720, 40), s + 'rrect;strokeColor=none;rSize=5;fillColor=#222222;'); bg.vertex = true; var button1 = new mxCell('Brand', new mxGeometry(0, 0, 80, 40), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;fontSize=14;whiteSpace=wrap;resizeHeight=1;'); button1.geometry.relative = true; button1.vertex = true; bg.insert(button1); var button2 = new mxCell('Home', new mxGeometry(0, 0, 60, 40), s + 'rect;fillColor=#000000;strokeColor=none;fontColor=#ffffff;whiteSpace=wrap;resizeHeight=1;'); button2.geometry.relative = true; button2.geometry.offset = new mxPoint(80, 0); button2.vertex = true; bg.insert(button2); var button3 = new mxCell('Link', new mxGeometry(0, 0, 60, 40), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;whiteSpace=wrap;resizeHeight=1;'); button3.geometry.relative = true; button3.geometry.offset = new mxPoint(140, 0); button3.vertex = true; bg.insert(button3); var button4 = new mxCell('Link', new mxGeometry(0, 0, 60, 40), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;whiteSpace=wrap;resizeHeight=1;'); button4.geometry.relative = true; button4.geometry.offset = new mxPoint(200, 0); button4.vertex = true; bg.insert(button4); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar'); }), this.addEntry(dt + 'jumbotron', function() { var bg = new mxCell('', new mxGeometry(0, 0, 800, 500), s + 'rrect;rSize=5;fillColor=#f0f0f0;strokeColor=none;'); bg.vertex = true; var button1 = new mxCell('Hello, world!', new mxGeometry(60, 80, 680, 80), s + 'anchor;fontSize=80;align=left;whiteSpace=wrap;'); button1.vertex = true; bg.insert(button1); var button2 = new mxCell( 'This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.', new mxGeometry(60, 180, 660, 100), s + 'anchor;fontSize=24;whiteSpace=wrap;align=left;'); button2.vertex = true; bg.insert(button2); var button3 = new mxCell('Learn more', new mxGeometry(0.075, 0.6, 180, 60), s + 'rrect;fontColor=#FFFFFF;fillColor=#3D8BCD;strokeColor=none;fontSize=24;whiteSpace=wrap;'); button3.geometry.relative = true; button3.vertex = true; bg.insert(button3); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Jumbotron'); }), this.addEntry(dt + 'page header', function() { var button1 = new mxCell('Example page header', new mxGeometry(0, 0, 360, 50), s + 'anchor;fontSize=35;align=left;whiteSpace=wrap;'); button1.vertex = true; var button2 = new mxCell('Subtext for header', new mxGeometry(360, 10, 300, 40), s + 'anchor;fontSize=24;align=left;fontColor=#999999;whiteSpace=wrap;'); button2.vertex = true; var button3 = new mxCell('', new mxGeometry(0, 50, 750, 10), 'shape=line;strokeColor=#dddddd;'); button3.vertex = true; return sb.createVertexTemplateFromCells([button1, button2, button3], 700, 80, 'Page header'); }), this.addEntry(dt + 'thumbnail custom content', function() { var bg = new mxCell('', new mxGeometry(0, 0, 330, 400), s + 'rrect;fillColor=#ffffff;rSize=5;strokeColor=#dddddd;'); bg.vertex = true; var button1 = new mxCell('320x200', new mxGeometry(5, 5, 320, 200), 'shape=rect;fontSize=24;fillColor=#f0f0f0;strokeColor=none;fontColor=#999999;whiteSpace=wrap;'); button1.vertex = true; bg.insert(button1); var button2 = new mxCell('Thumbnail label', new mxGeometry(15, 220, 300, 40), s + 'anchor;fontSize=26;align=left;whiteSpace=wrap;'); button2.vertex = true; bg.insert(button2); var button3 = new mxCell( 'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh' + ' ultricies vehicula ut id elit.', new mxGeometry(15, 260, 300, 80), s + 'anchor;strokeColor=#dddddd;whiteSpace=wrap;align=left;verticalAlign=top;fontSize=14;whiteSpace=wrap;'); button3.vertex = true; bg.insert(button3); var button4 = new mxCell('Button', new mxGeometry(0, 1, 80, 40), s + 'rrect;rSize=5;fontSize=16;fillColor=#3D8BCD;strokeColor=none;fontColor=#ffffff;whiteSpace=wrap;'); button4.geometry.relative = true; button4.geometry.offset = new mxPoint(15, -60); button4.vertex = true; bg.insert(button4); var button5 = new mxCell('Button', new mxGeometry(0, 1, 80, 40), s + 'rrect;rSize=5;fontSize=16;strokeColor=#dddddd;whiteSpace=wrap;'); button5.geometry.relative = true; button5.geometry.offset = new mxPoint(100, -60); button5.vertex = true; bg.insert(button5); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Thumbnail with custom content'); }), this.createVertexTemplateEntry(s + 'rrect;align=center;rSize=5;strokeColor=none;fillColor=#999999;fontColor=#ffffff;fontStyle=1;whiteSpace=wrap;', 60, 30, 'Label', 'Label (Normal)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;align=center;rSize=5;strokeColor=none;fillColor=#0D5B9D;fontColor=#ffffff;fontStyle=1;whiteSpace=wrap;', 60, 30, 'Label', 'Label (Normal)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;align=center;rSize=5;strokeColor=none;fillColor=#58B957;fontColor=#ffffff;fontStyle=1;whiteSpace=wrap;', 60, 30, 'Label', 'Label (Normal)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;align=center;rSize=5;strokeColor=none;fillColor=#55BFE0;fontColor=#ffffff;fontStyle=1;whiteSpace=wrap;', 60, 30, 'Label', 'Label (Normal)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;align=center;rSize=5;strokeColor=none;fillColor=#EFAC43;fontColor=#ffffff;fontStyle=1;whiteSpace=wrap;', 60, 30, 'Label', 'Label (Normal)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;align=center;rSize=5;strokeColor=none;fillColor=#DB524C;fontColor=#ffffff;fontStyle=1;whiteSpace=wrap;', 60, 30, 'Label', 'Label (Normal)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;align=center;rSize=5;strokeColor=none;fillColor=#999999;fontColor=#ffffff;fontStyle=1;whiteSpace=wrap;fontSize=10;', 40, 20, 'Label', 'Label (Small)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;align=center;rSize=5;strokeColor=none;fillColor=#0D5B9D;fontColor=#ffffff;fontStyle=1;whiteSpace=wrap;fontSize=10;', 40, 20, 'Label', 'Label (Small)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;align=center;rSize=5;strokeColor=none;fillColor=#58B957;fontColor=#ffffff;fontStyle=1;whiteSpace=wrap;fontSize=10;', 40, 20, 'Label', 'Label (Small)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;align=center;rSize=5;strokeColor=none;fillColor=#55BFE0;fontColor=#ffffff;fontStyle=1;whiteSpace=wrap;fontSize=10;', 40, 20, 'Label', 'Label (Small)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;align=center;rSize=5;strokeColor=none;fillColor=#EFAC43;fontColor=#ffffff;fontStyle=1;whiteSpace=wrap;fontSize=10;', 40, 20, 'Label', 'Label (Small)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rrect;align=center;rSize=5;strokeColor=none;fillColor=#DB524C;fontColor=#ffffff;fontStyle=1;whiteSpace=wrap;fontSize=10;', 40, 20, 'Label', 'Label (Small)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rect;strokeColor=none;fillColor=none;fontSize=30;align=left;spacingLeft=10;', 250, 40, 'Header Text', 'Header Text (30)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rect;strokeColor=none;fillColor=none;fontSize=25;align=left;spacingLeft=10;', 250, 35, 'Header Text', 'Header Text (25)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rect;strokeColor=none;fillColor=none;fontSize=20;align=left;spacingLeft=10;', 250, 30, 'Header Text', 'Header Text (20)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rect;strokeColor=none;fillColor=none;fontSize=16;align=left;spacingLeft=10;', 250, 26, 'Header Text', 'Header Text (16)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rect;strokeColor=none;fillColor=none;fontSize=12;align=left;spacingLeft=10;', 250, 22, 'Header Text', 'Header Text (12)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'rect;strokeColor=none;fillColor=none;fontSize=10;align=left;spacingLeft=10;', 250, 20, 'Header Text', 'Header Text (10)', null, null, this.getTagsForStencil(gn, '', dt + 'label normal').join(' ')), this.createVertexTemplateEntry(s + 'image;align=center;rSize=5;strokeColor=#f6f6f6;fillColor=#f6f6f6;fontColor=#999999;strokeWidth=2;whiteSpace=wrap;', 150, 150, 'Image', 'Image', null, null, this.getTagsForStencil(gn, 'image', dt + '').join(' ')), this.addEntry(dt + 'image', function() { var bg1 = new mxCell('Image', new mxGeometry(0, 0, 150, 70), s + 'image;align=center;rSize=5;strokeColor=#f6f6f6;fillColor=#f6f6f6;fontColor=#999999;strokeWidth=2;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('Image', new mxGeometry(0, 80, 70, 70), s + 'image;align=center;rSize=5;strokeColor=#f6f6f6;fillColor=#f6f6f6;fontColor=#999999;strokeWidth=2;whiteSpace=wrap;'); bg2.vertex = true; var bg3 = new mxCell('Image', new mxGeometry(80, 80, 70, 70), s + 'image;align=center;rSize=5;strokeColor=#f6f6f6;fillColor=#f6f6f6;fontColor=#999999;strokeWidth=2;whiteSpace=wrap;'); bg3.vertex = true; return sb.createVertexTemplateFromCells([bg1, bg2, bg3], 150, 150, 'Images'); }), this.addEntry(dt + 'dismissible alert', function() { var bg1 = new mxCell( '
Well done! You successfully read this important alert message.
', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=none;fillColor=#E0F0D6;fontColor=#59B958;overflow=fill;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('', new mxGeometry(1, 0.5, 10, 10), s + 'x;strokeColor=#59B958;strokeWidth=2;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(-25, -5); bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Dismissible Alert'); }), this.addEntry(dt + 'dismissible alert', function() { var bg1 = new mxCell( '
Heads up! This alert needs you attention, but it\'s not super important.
', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=none;fillColor=#D9EDF8;fontColor=#55C0E0;overflow=fill;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('', new mxGeometry(1, 0.5, 10, 10), s + 'x;strokeColor=#55C0E0;strokeWidth=2;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(-25, -5); bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Dismissible Alert'); }), this.addEntry(dt + 'dismissible alert', function() { var bg1 = new mxCell( '
Warning! Better check yourself, you\'re not looking too good.
', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=none;fillColor=#FDF8E4;fontColor=#F2AE43;overflow=fill;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('', new mxGeometry(1, 0.5, 10, 10), s + 'x;strokeColor=#F2AE43;strokeWidth=2;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(-25, -5); bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Dismissible Alert'); }), this.addEntry(dt + 'dismissible alert', function() { var bg1 = new mxCell( '
Oh snap! Change a few things up and try submitting again.
', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=none;fillColor=#F2DEDF;fontColor=#DB524C;overflow=fill;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('', new mxGeometry(1, 0.5, 10, 10), s + 'x;strokeColor=#DB524C;strokeWidth=2;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(-25, -5); bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Dismissible Alert'); }), this.addEntry(dt + 'progress bar', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 20), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('60%', new mxGeometry(0, 0, 500, 20), s + 'leftButton;rSize=5;strokeColor=none;fillColor=#59B958;fontColor=#FFFFFF;whiteSpace=wrap;'); bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Progress Bar'); }), this.addEntry(dt + 'progress bar', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 20), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('60%', new mxGeometry(0, 0, 500, 20), s + 'leftButton;rSize=5;strokeColor=none;fillColor=#55C0E0;fontColor=#FFFFFF;whiteSpace=wrap;'); bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Progress Bar'); }), this.addEntry(dt + 'progress bar', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 20), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('60%', new mxGeometry(0, 0, 500, 20), s + 'leftButton;rSize=5;strokeColor=none;fillColor=#F2AE43;fontColor=#FFFFFF;whiteSpace=wrap;'); bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Progress Bar'); }), this.addEntry(dt + 'progress bar', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 20), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('60%', new mxGeometry(0, 0, 500, 20), s + 'leftButton;rSize=5;strokeColor=none;fillColor=#DB524C;fontColor=#FFFFFF;whiteSpace=wrap;'); bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Progress Bar'); }), this.addEntry(dt + 'progress bar low percentage', function() { var bg1 = new mxCell('0%', new mxGeometry(0, 0, 800, 20), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;fontColor=#000000;align=left;spacingLeft=5;whiteSpace=wrap;'); bg1.vertex = true; return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Progress Bar (Low percentage)'); }), this.addEntry(dt + 'progress bar low percentage', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 20), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('2%', new mxGeometry(0, 0, 30, 20), s + 'leftButton;rSize=5;strokeColor=none;fillColor=#55C0E0;fontColor=#FFFFFF;whiteSpace=wrap;'); bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Progress Bar (Low percentage)'); }), this.addEntry(dt + 'progress bar striped', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 20), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('60%', new mxGeometry(0, 0, 500, 20), s + 'leftButtonStriped;fillColor=#59B958;fontColor=#FFFFFF;whiteSpace=wrap;'); bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Progress Bar (Striped)'); }), this.addEntry(dt + 'progress bar striped', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 20), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('60%', new mxGeometry(0, 0, 500, 20), s + 'leftButtonStriped;fillColor=#55BFE0;fontColor=#FFFFFF;whiteSpace=wrap;'); bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Progress Bar (Striped)'); }), this.addEntry(dt + 'progress bar striped', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 20), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('60%', new mxGeometry(0, 0, 500, 20), s + 'leftButtonStriped;fillColor=#EFAC43;fontColor=#FFFFFF;whiteSpace=wrap;'); bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Progress Bar (Striped)'); }), this.addEntry(dt + 'progress bar striped', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 20), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('60%', new mxGeometry(0, 0, 500, 20), s + 'leftButtonStriped;fillColor=#DB524C;fontColor=#FFFFFF;whiteSpace=wrap;'); bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Progress Bar (Striped)'); }), this.addEntry(dt + 'progress bar', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 20), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('', new mxGeometry(0, 0, 150, 20), s + 'leftButton;rSize=5;strokeColor=none;fillColor=#DB524C;whiteSpace=wrap;'); bg2.vertex = true; bg1.insert(bg2); var bg3 = new mxCell('', new mxGeometry(150, 0, 200, 20), 'rect;strokeColor=none;fillColor=#F2AE43;html=1;whiteSpace=wrap;'); bg3.vertex = true; bg1.insert(bg3); var bg4 = new mxCell('', new mxGeometry(350, 0, 50, 20), 'rect;strokeColor=none;fillColor=#59B958;html=1;whiteSpace=wrap;'); bg4.vertex = true; bg1.insert(bg4); var bg5 = new mxCell('', new mxGeometry(400, 0, 150, 20), 'rect;strokeColor=none;fillColor=#55C0E0;html=1;whiteSpace=wrap;'); bg5.vertex = true; bg1.insert(bg5); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Progress Bar'); }), this.addEntry(dt + 'default media', function() { var bg1 = new mxCell('64x64', new mxGeometry(0, 0, 64, 64), s + 'rect;align=center;strokeColor=none;fillColor=#f6f6f6;fontColor=#999999;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('Media heading', new mxGeometry(70, 0, 200, 30), s + 'anchor;fontSize=24;align=left;whiteSpace=wrap;'); bg2.vertex = true; var bg3 = new mxCell( 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in ' + 'vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.', new mxGeometry(70, 30, 630, 60), s + 'anchor;align=left;verticalAlign=top;whiteSpace=wrap;fontSize=14;whiteSpace=wrap;'); bg3.vertex = true; var bg4 = new mxCell('64x64', new mxGeometry(0, 100, 64, 64), s + 'rect;align=center;strokeColor=none;fillColor=#f6f6f6;fontColor=#999999;whiteSpace=wrap;'); bg4.vertex = true; var bg5 = new mxCell('Media heading', new mxGeometry(70, 100, 200, 30), s + 'anchor;fontSize=24;align=left;whiteSpace=wrap;'); bg5.vertex = true; var bg6 = new mxCell( 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in ' + 'vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.', new mxGeometry(70, 130, 630, 60), s + 'anchor;align=left;verticalAlign=top;whiteSpace=wrap;fontSize=14;whiteSpace=wrap;'); bg6.vertex = true; var bg7 = new mxCell('64x64', new mxGeometry(70, 200, 64, 64), s + 'rect;align=center;strokeColor=none;fillColor=#f6f6f6;fontColor=#999999;whiteSpace=wrap;'); bg7.vertex = true; var bg8 = new mxCell('Nested media heading', new mxGeometry(140, 200, 300, 30), s + 'anchor;fontSize=24;align=left;whiteSpace=wrap;'); bg8.vertex = true; var bg9 = new mxCell( 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in ' + 'vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.', new mxGeometry(140, 230, 560, 60), s + 'anchor;align=left;verticalAlign=top;whiteSpace=wrap;fontSize=14;whiteSpace=wrap;'); bg9.vertex = true; return sb.createVertexTemplateFromCells([bg1, bg2, bg3, bg4, bg5, bg6, bg7, bg8, bg9], 700, 290, 'Default Media'); }), this.addEntry(dt + 'media list', function() { var bg1 = new mxCell('64x64', new mxGeometry(0, 0, 64, 64), s + 'rect;align=center;strokeColor=none;fillColor=#f6f6f6;fontColor=#999999;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('Media heading', new mxGeometry(70, 0, 200, 30), s + 'anchor;fontSize=24;align=left;whiteSpace=wrap;'); bg2.vertex = true; var bg3 = new mxCell( 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in ' + 'vulputate at, tempus viverra turpis.', new mxGeometry(70, 30, 630, 60), s + 'anchor;align=left;verticalAlign=top;whiteSpace=wrap;fontSize=14;whiteSpace=wrap;'); bg3.vertex = true; var bg4 = new mxCell('64x64', new mxGeometry(70, 90, 64, 64), s + 'rect;align=center;strokeColor=none;fillColor=#f6f6f6;fontColor=#999999;whiteSpace=wrap;'); bg4.vertex = true; var bg5 = new mxCell('Nested Media heading', new mxGeometry(140, 90, 300, 30), s + 'anchor;fontSize=24;align=left;whiteSpace=wrap;'); bg5.vertex = true; var bg6 = new mxCell( 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in ' + 'vulputate at, tempus viverra turpis.', new mxGeometry(140, 120, 560, 60), s + 'anchor;align=left;verticalAlign=top;whiteSpace=wrap;fontSize=14;whiteSpace=wrap;'); bg6.vertex = true; var bg7 = new mxCell('64x64', new mxGeometry(140, 180, 64, 64), s + 'rect;align=center;strokeColor=none;fillColor=#f6f6f6;fontColor=#999999;whiteSpace=wrap;'); bg7.vertex = true; var bg8 = new mxCell('Nested media heading', new mxGeometry(210, 180, 300, 30), s + 'anchor;fontSize=24;align=left;whiteSpace=wrap;'); bg8.vertex = true; var bg9 = new mxCell( 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in ' + 'vulputate at, tempus viverra turpis.', new mxGeometry(210, 210, 490, 60), s + 'anchor;align=left;verticalAlign=top;whiteSpace=wrap;fontSize=14;whiteSpace=wrap;'); bg9.vertex = true; var bg10 = new mxCell('64x64', new mxGeometry(70, 280, 64, 64), s + 'rect;align=center;strokeColor=none;fillColor=#f6f6f6;fontColor=#999999;whiteSpace=wrap;'); bg10.vertex = true; var bg11 = new mxCell('Nested Media heading', new mxGeometry(140, 280, 300, 30), s + 'anchor;fontSize=24;align=left;whiteSpace=wrap;'); bg11.vertex = true; var bg12 = new mxCell( 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in ' + 'vulputate at, tempus viverra turpis.', new mxGeometry(140, 310, 560, 60), s + 'anchor;align=left;verticalAlign=top;whiteSpace=wrap;fontSize=14;whiteSpace=wrap;'); bg12.vertex = true; var bg13 = new mxCell('64x64', new mxGeometry(636, 370, 64, 64), s + 'rect;align=center;strokeColor=none;fillColor=#f6f6f6;fontColor=#999999;whiteSpace=wrap;'); bg13.vertex = true; var bg14 = new mxCell('Media heading', new mxGeometry(0, 370, 200, 30), s + 'anchor;fontSize=24;align=left;whiteSpace=wrap;'); bg14.vertex = true; var bg15 = new mxCell( 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in ' + 'vulputate at, tempus viverra turpis.', new mxGeometry(0, 400, 630, 60), s + 'anchor;align=left;verticalAlign=top;whiteSpace=wrap;fontSize=14;whiteSpace=wrap;'); bg15.vertex = true; return sb.createVertexTemplateFromCells([bg1, bg2, bg3, bg4, bg5, bg6, bg7, bg8, bg9, bg10, bg11, bg12, bg13, bg14, bg15], 700, 460, 'Media List'); }), this.addEntry(dt + 'linked item custom content', function() { var bg = new mxCell('', new mxGeometry(0, 0, 400, 240), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#dddddd;whiteSpace=wrap;'); bg.vertex = true; var button2 = new mxCell('Donec id elit non mi porta gravida at eget metus.\nMaecenas sed diam eget risus varius blandit.', new mxGeometry(0, 0, 400, 80), s + 'rect;fillColor=none;strokeColor=#dddddd;perimeter=none;spacingLeft=10;align=left;fontSize=14;whiteSpace=wrap;verticalAlign=bottom;spacingBottom=10;resizeWidth=1;'); button2.geometry.relative = true; button2.geometry.offset = new mxPoint(0, 80); button2.vertex = true; bg.insert(button2); var heading2 = new mxCell('List group item heading', new mxGeometry(0, 0, 400, 40), s + 'anchor;spacingLeft=10;align=left;fontSize=18;whiteSpace=wrap;resizeWidth=1;'); heading2.geometry.relative = true; heading2.vertex = true; button2.insert(heading2); var button3 = new mxCell('Donec id elit non mi porta gravida at eget metus.\nMaecenas sed diam eget risus varius blandit.', new mxGeometry(0, 1, 400, 80), s + 'bottomButton;rSize=5;fillColor=none;strokeColor=#dddddd;spacingLeft=10;align=left;fontSize=14;perimeter=none;whiteSpace=wrap;verticalAlign=bottom;spacingBottom=13;resizeWidth=1;'); button3.geometry.relative = true; button3.geometry.offset = new mxPoint(0, -80); button3.vertex = true; bg.insert(button3); var heading3 = new mxCell('List group item heading', new mxGeometry(0, 0, 400, 40), s + 'anchor;spacingLeft=10;align=left;fontSize=18;whiteSpace=wrap;resizeWidth=1;'); heading3.geometry.relative = true; heading3.vertex = true; button3.insert(heading3); var button1 = new mxCell('Donec id elit non mi porta gravida at eget metus.\nMaecenas sed diam eget risus varius blandit.', new mxGeometry(0, 0, 400, 80), s + 'topButton;rSize=5;fillColor=#3D8BCD;strokeColor=#3D8BCD;fontColor=#ffffff;spacingLeft=10;align=left;fontSize=14;perimeter=none;whiteSpace=wrap;verticalAlign=bottom;spacingBottom=13;resizeWidth=1;'); button1.geometry.relative = true; button1.vertex = true; bg.insert(button1); var heading1 = new mxCell('List group item heading', new mxGeometry(0, 0, 400, 40), s + 'anchor;fontColor=#ffffff;spacingLeft=10;align=left;fontSize=18;whiteSpace=wrap;resizeWidth=1;'); heading1.geometry.relative = true; heading1.vertex = true; button1.insert(heading1); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Linked Items (Custom Content)'); }), this.addEntry(dt + 'panel', function() { var bg1 = new mxCell('Panel content', new mxGeometry(0, 0, 150, 200), s + 'rrect;align=center;rSize=5;strokeColor=#E0F0D6;fillColor=#ffffff;fontColor=#f0f0f0;spacingTop=30;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('Panel title', new mxGeometry(0, 0, 150, 30), s + 'topButton;rSize=5;strokeColor=none;fillColor=#E0F0D6;fontColor=#59B958;fontSize=14;fontStyle=1;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;'); bg2.geometry.relative = true; bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Panel'); }), this.addEntry(dt + 'panel', function() { var bg1 = new mxCell('Panel content', new mxGeometry(0, 0, 150, 200), s + 'rrect;align=center;rSize=5;strokeColor=#D9EDF8;fillColor=#ffffff;fontColor=#f0f0f0;spacingTop=30;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('Panel title', new mxGeometry(0, 0, 150, 30), s + 'topButton;rSize=5;strokeColor=none;fillColor=#D9EDF8;fontColor=#55C0E0;fontSize=14;fontStyle=1;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;'); bg2.geometry.relative = true; bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Panel'); }), this.addEntry(dt + 'panel', function() { var bg1 = new mxCell('Panel content', new mxGeometry(0, 0, 150, 200), s + 'rrect;align=center;rSize=5;strokeColor=#FDF8E4;fillColor=#ffffff;fontColor=#f0f0f0;spacingTop=30;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('Panel title', new mxGeometry(0, 0, 150, 30), s + 'topButton;rSize=5;strokeColor=none;fillColor=#FDF8E4;fontColor=#F2AE43;fontSize=14;fontStyle=1;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;'); bg2.geometry.relative = true; bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Panel'); }), this.addEntry(dt + 'panel', function() { var bg1 = new mxCell('Panel content', new mxGeometry(0, 0, 150, 200), s + 'rrect;align=center;rSize=5;strokeColor=#F2DEDF;fillColor=#ffffff;fontColor=#f0f0f0;spacingTop=30;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('Panel title', new mxGeometry(0, 0, 150, 30), s + 'topButton;rSize=5;strokeColor=none;fillColor=#F2DEDF;fontColor=#DB524C;fontSize=14;fontStyle=1;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;'); bg2.geometry.relative = true; bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Panel'); }), this.addEntry(dt + 'panel', function() { var bg1 = new mxCell('Panel content', new mxGeometry(0, 0, 150, 200), s + 'rrect;align=center;rSize=5;strokeColor=#3D8BCD;fillColor=#ffffff;fontColor=#f0f0f0;spacingTop=30;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('Panel title', new mxGeometry(0, 0, 150, 30), s + 'topButton;rSize=5;strokeColor=none;fillColor=#3D8BCD;fontColor=#ffffff;fontSize=14;fontStyle=1;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;'); bg2.geometry.relative = true; bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Panel'); }), this.addEntry(dt + 'panel footer', function() { var bg1 = new mxCell('Panel content', new mxGeometry(0, 0, 150, 200), s + 'rrect;align=center;rSize=5;strokeColor=#E0F0D6;fillColor=#ffffff;fontColor=#f0f0f0;spacingBottom=30;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('Panel title', new mxGeometry(0, 1, 150, 30), s + 'bottomButton;rSize=5;strokeColor=none;fillColor=#E0F0D6;fontColor=#59B958;fontSize=14;fontStyle=1;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(0, -30); bg2.vertex = true; bg1.insert(bg2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Panel (Footer)'); }), this.addEntry(dt + 'table', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 280), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('Panel title', new mxGeometry(0, 0, 800, 40), s + 'topButton;rSize=5;strokeColor=#dddddd;fillColor=#fdfdfd;fontColor=#999999;fontSize=14;fontStyle=1;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;'); bg2.geometry.relative = true; bg2.vertex = true; bg1.insert(bg2); var bg2a = new mxCell( 'Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. ' + 'Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula. ', new mxGeometry(0, 0, 800, 80), s + 'rect;strokeColor=#dddddd;fillColor=none;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;'); bg2a.geometry.relative = true; bg2a.geometry.offset = new mxPoint(0, 40); bg2a.vertex = true; bg1.insert(bg2a); var bg3 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'rect;strokeColor=#dddddd;fillColor=#fdfdfd;whiteSpace=wrap;resizeWidth=1;'); bg3.geometry.relative = true; bg3.geometry.offset = new mxPoint (0, 120); bg3.vertex = true; bg1.insert(bg3); var bg4 = new mxCell('#', new mxGeometry(0, 0, 50, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;whiteSpace=wrap;resizeHeight=1;'); bg4.geometry.relative = true; bg4.vertex = true; bg3.insert(bg4); var bg5 = new mxCell('First Name', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(80, 0); bg5.vertex = true; bg3.insert(bg5); var bg6 = new mxCell('Last Name', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg6.geometry.relative = true; bg6.geometry.offset = new mxPoint(230, 0); bg6.vertex = true; bg3.insert(bg6); var bg7 = new mxCell('Username', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg7.geometry.relative = true; bg7.geometry.offset = new mxPoint(380, 0); bg7.vertex = true; bg3.insert(bg7); var bg8 = new mxCell('Active', new mxGeometry(0, 0, 100, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg8.geometry.relative = true; bg8.geometry.offset = new mxPoint(560, 0); bg8.vertex = true; bg3.insert(bg8); var bg9 = new mxCell('Boss', new mxGeometry(0, 0, 100, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg9.geometry.relative = true; bg9.geometry.offset = new mxPoint(700, 0); bg9.vertex = true; bg3.insert(bg9); var bg10 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'rect;strokeColor=#dddddd;fillColor=none;whiteSpace=wrap;resizeWidth=1;'); bg10.geometry.relative = true; bg10.geometry.offset = new mxPoint(0, 160); bg10.vertex = true; bg1.insert(bg10); var bg11 = new mxCell('1', new mxGeometry(0, 0, 50, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;whiteSpace=wrap;resizeHeight=1;'); bg11.geometry.relative = true; bg11.vertex = true; bg10.insert(bg11); var bg12 = new mxCell('John', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg12.geometry.relative = true; bg12.geometry.offset = new mxPoint(80, 0); bg12.vertex = true; bg10.insert(bg12); var bg13 = new mxCell('Boo', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg13.geometry.relative = true; bg13.geometry.offset = new mxPoint(230, 0); bg13.vertex = true; bg10.insert(bg13); var bg14 = new mxCell('johnny81', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg14.geometry.relative = true; bg14.geometry.offset = new mxPoint(380, 0); bg14.vertex = true; bg10.insert(bg14); var notif1 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), s + 'checkbox;strokeColor=#666666;'); notif1.geometry.relative = true; notif1.geometry.offset = new mxPoint(560, -10); notif1.vertex = true; bg10.insert(notif1); var notif2 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=#666666;html=1;'); notif2.geometry.relative = true; notif2.geometry.offset = new mxPoint(700, -10); notif2.vertex = true; bg10.insert(notif2); var bg17 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'rect;strokeColor=#dddddd;fillColor=none;whiteSpace=wrap;resizeWidth=1;'); bg17.geometry.relative = true; bg17.geometry.offset = new mxPoint(0, 200); bg17.vertex = true; bg1.insert(bg17); var bg18 = new mxCell('2', new mxGeometry(0, 0, 50, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;whiteSpace=wrap;resizeHeight=1;'); bg18.geometry.relative = true; bg18.vertex = true; bg17.insert(bg18); var bg19 = new mxCell('Mary', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg19.geometry.relative = true; bg19.geometry.offset = new mxPoint(80, 0); bg19.vertex = true; bg17.insert(bg19); var bg20 = new mxCell('Brown', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg20.geometry.relative = true; bg20.geometry.offset = new mxPoint(230, 0); bg20.vertex = true; bg17.insert(bg20); var bg21 = new mxCell('missmary', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg21.geometry.relative = true; bg21.geometry.offset = new mxPoint(380, 0); bg21.vertex = true; bg17.insert(bg21); var notif3 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), s + 'checkbox;strokeColor=#666666;'); notif3.geometry.relative = true; notif3.geometry.offset = new mxPoint(560, -10); notif3.vertex = true; bg17.insert(notif3); var notif4 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), s + 'radioButton;strokeColor=#666666;'); notif4.geometry.relative = true; notif4.geometry.offset = new mxPoint(700, -10); notif4.vertex = true; bg17.insert(notif4); var bg24 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'bottomButton;rSize=5;strokeColor=#dddddd;fillColor=none;whiteSpace=wrap;resizeWidth=1;'); bg24.geometry.relative = true; bg24.geometry.offset = new mxPoint(0, 240); bg24.vertex = true; bg1.insert(bg24); var bg25 = new mxCell('3', new mxGeometry(0, 0, 50, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;whiteSpace=wrap;resizeHeight=1;'); bg25.geometry.relative = true; bg25.vertex = true; bg24.insert(bg25); var bg26 = new mxCell('James', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg26.geometry.relative = true; bg26.geometry.offset = new mxPoint(80, 0); bg26.vertex = true; bg24.insert(bg26); var bg27 = new mxCell('Mooray', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg27.geometry.relative = true; bg27.geometry.offset = new mxPoint(230, 0); bg27.vertex = true; bg24.insert(bg27); var bg28 = new mxCell('jijames', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg28.geometry.relative = true; bg28.geometry.offset = new mxPoint(380, 0); bg28.vertex = true; bg24.insert(bg28); var notif5 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), s + 'rrect;rSize=3;strokeColor=#666666;'); notif5.geometry.relative = true; notif5.geometry.offset = new mxPoint(560, -10); notif5.vertex = true; bg24.insert(notif5); var notif6 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=#666666;html=1;'); notif6.geometry.relative = true; notif6.geometry.offset = new mxPoint(700, -10); notif6.vertex = true; bg24.insert(notif6); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Table'); }), this.addEntry(dt + 'panel list group', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 600, 320), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;'); bg1.vertex = true; var bg2 = new mxCell('Panel title', new mxGeometry(0, 0, 600, 40), s + 'topButton;rSize=5;strokeColor=#dddddd;fillColor=#fdfdfd;fontColor=#999999;fontSize=14;fontStyle=1;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;'); bg2.geometry.relative = true; bg2.vertex = true; bg1.insert(bg2); var bg3 = new mxCell( 'Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. ' + 'Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula. ', new mxGeometry(0, 0, 600, 80), s + 'rect;strokeColor=#dddddd;fillColor=none;align=left;spacingLeft=10;whiteSpace=wrap;fontSize=14;whiteSpace=wrap;resizeWidth=1;'); bg3.geometry.relative = true; bg3.geometry.offset = new mxPoint(0, 40); bg3.vertex = true; bg1.insert(bg3); var bg4 = new mxCell('Cras justo odio', new mxGeometry(0, 0, 600, 40), s + 'rect;strokeColor=#dddddd;fillColor=none;spacingLeft=10;fontSize=14;align=left;whiteSpace=wrap;resizeWidth=1;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(0, 120); bg4.vertex = true; bg1.insert(bg4); var bg5 = new mxCell('Dapibus ac facilisis in', new mxGeometry(0, 0, 600, 40), s + 'rect;strokeColor=#dddddd;fillColor=none;spacingLeft=10;fontSize=14;align=left;whiteSpace=wrap;resizeWidth=1;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(0, 160); bg5.vertex = true; bg1.insert(bg5); var bg6 = new mxCell('Morbi leo risus', new mxGeometry(0, 0, 600, 40), s + 'rect;strokeColor=#dddddd;fillColor=none;spacingLeft=10;fontSize=14;align=left;whiteSpace=wrap;resizeWidth=1;'); bg6.geometry.relative = true; bg6.geometry.offset = new mxPoint(0, 200); bg6.vertex = true; bg1.insert(bg6); var bg7 = new mxCell('Porta ac consectetur ac', new mxGeometry(0, 0, 600, 40), s + 'rect;strokeColor=#dddddd;fillColor=none;spacingLeft=10;fontSize=14;align=left;whiteSpace=wrap;resizeWidth=1;'); bg7.geometry.relative = true; bg7.geometry.offset = new mxPoint(0, 240); bg7.vertex = true; bg1.insert(bg7); var bg8 = new mxCell('Vestibulum at eros', new mxGeometry(0, 1, 600, 40), s + 'bottomButton;rSize=5;strokeColor=#dddddd;fillColor=none;spacingLeft=10;fontSize=14;align=left;whiteSpace=wrap;resizeWidth=1;'); bg8.geometry.relative = true; bg8.geometry.offset = new mxPoint(0, -40); bg8.vertex = true; bg1.insert(bg8); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Panel (List Group)'); }), this.addEntry(dt + 'table', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 160), s + 'rect;strokeColor=none;fillColor=#ffffff;'); bg1.vertex = true; var bg2 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'horLines;strokeColor=#dddddd;fillColor=#fdfdfd;resizeWidth=1;'); bg2.geometry.relative = true; bg2.vertex = true; bg1.insert(bg2); var bg3 = new mxCell('#', new mxGeometry(0, 0, 50, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;whiteSpace=wrap;resizeHeight=1;'); bg3.geometry.relative = true; bg3.vertex = true; bg2.insert(bg3); var bg4 = new mxCell('First Name', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(80, 0); bg4.vertex = true; bg2.insert(bg4); var bg5 = new mxCell('Last Name', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(230, 0); bg5.vertex = true; bg2.insert(bg5); var bg6 = new mxCell('Username', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg6.geometry.relative = true; bg6.geometry.offset = new mxPoint(380, 0); bg6.vertex = true; bg2.insert(bg6); var bg7 = new mxCell('Active', new mxGeometry(0, 0, 100, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg7.geometry.relative = true; bg7.geometry.offset = new mxPoint(560, 0); bg7.vertex = true; bg2.insert(bg7); var bg8 = new mxCell('Boss', new mxGeometry(0, 0, 100, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg8.geometry.relative = true; bg8.geometry.offset = new mxPoint(700, 0); bg8.vertex = true; bg2.insert(bg8); var bg9 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg9.geometry.relative = true; bg9.geometry.offset = new mxPoint(0, 40); bg9.vertex = true; bg1.insert(bg9); var bg10 = new mxCell('1', new mxGeometry(0, 0, 50, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;whiteSpace=wrap;resizeHeight=1;'); bg10.geometry.relative = true; bg10.vertex = true; bg9.insert(bg10); var bg11 = new mxCell('John', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg11.geometry.relative = true; bg11.geometry.offset = new mxPoint(80, 0); bg11.vertex = true; bg9.insert(bg11); var bg12 = new mxCell('Boo', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg12.geometry.relative = true; bg12.geometry.offset = new mxPoint(230, 0); bg12.vertex = true; bg9.insert(bg12); var bg13 = new mxCell('johnny81', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg13.geometry.relative = true; bg13.geometry.offset = new mxPoint(380, 0); bg13.vertex = true; bg9.insert(bg13); var notif1 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), s + 'checkbox;strokeColor=#666666;'); notif1.geometry.relative = true; notif1.geometry.offset = new mxPoint(560, -10); notif1.vertex = true; bg9.insert(notif1); var notif2 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=#666666;html=1;'); notif2.geometry.relative = true; notif2.geometry.offset = new mxPoint(700, -10); notif2.vertex = true; bg9.insert(notif2); var bg16 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg16.geometry.relative = true; bg16.geometry.offset = new mxPoint(0, 80); bg16.vertex = true; bg1.insert(bg16); var bg17 = new mxCell('2', new mxGeometry(0, 0, 50, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;whiteSpace=wrap;resizeHeight=1;'); bg17.geometry.relative = true; bg17.vertex = true; bg16.insert(bg17); var bg18 = new mxCell('Mary', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg18.geometry.relative = true; bg18.geometry.offset = new mxPoint(80, 0); bg18.vertex = true; bg16.insert(bg18); var bg19 = new mxCell('Brown', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg19.geometry.relative = true; bg19.geometry.offset = new mxPoint(230, 0); bg19.vertex = true; bg16.insert(bg19); var bg20 = new mxCell('missmary', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg20.geometry.relative = true; bg20.geometry.offset = new mxPoint(380, 0); bg20.vertex = true; bg16.insert(bg20); var notif3 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), s + 'checkbox;strokeColor=#666666;'); notif3.geometry.relative = true; notif3.geometry.offset = new mxPoint(560, -10); notif3.vertex = true; bg16.insert(notif3); var notif4 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), s + 'radioButton;strokeColor=#666666;'); notif4.geometry.relative = true; notif4.geometry.offset = new mxPoint(700, -10); notif4.vertex = true; bg16.insert(notif4); var bg23 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg23.geometry.relative = true; bg23.geometry.offset = new mxPoint(0, 120); bg23.vertex = true; bg1.insert(bg23); var bg24 = new mxCell('3', new mxGeometry(0, 0, 50, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;whiteSpace=wrap;resizeHeight=1;'); bg24.geometry.relative = true; bg24.vertex = true; bg23.insert(bg24); var bg25 = new mxCell('James', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg25.geometry.relative = true; bg25.geometry.offset = new mxPoint(80, 0); bg25.vertex = true; bg23.insert(bg25); var bg26 = new mxCell('Mooray', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg26.geometry.relative = true; bg26.geometry.offset = new mxPoint(230, 0); bg26.vertex = true; bg23.insert(bg26); var bg27 = new mxCell('jijames', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg27.geometry.relative = true; bg27.geometry.offset = new mxPoint(380, 0); bg27.vertex = true; bg23.insert(bg27); var notif5 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), s + 'rrect;rSize=3;strokeColor=#666666;'); notif5.geometry.relative = true; notif5.geometry.offset = new mxPoint(560, -10); notif5.vertex = true; bg23.insert(notif5); var notif6 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=#666666;html=1;'); notif6.geometry.relative = true; notif6.geometry.offset = new mxPoint(700, -10); notif6.vertex = true; bg23.insert(notif6); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Table'); }), this.addEntry(dt + 'table', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 360), s + 'rect;strokeColor=none;fillColor=#ffffff;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'horLines;strokeColor=#dddddd;fillColor=#fdfdfd;resizeWidth=1;'); bg2.geometry.relative = true; bg2.vertex = true; bg1.insert(bg2); var bg3 = new mxCell('Name', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg3.geometry.relative = true; bg3.geometry.offset = new mxPoint(50, 0); bg3.vertex = true; bg2.insert(bg3); var bg4 = new mxCell('Double-Line\nHeader', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(250, 0); bg4.vertex = true; bg2.insert(bg4); var bg5 = new mxCell('Rating', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(450, 0); bg5.vertex = true; bg2.insert(bg5); var bg6 = new mxCell('Signed Up', new mxGeometry(0, 0, 100, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg6.geometry.relative = true; bg6.geometry.offset = new mxPoint(620, 0); bg6.vertex = true; bg2.insert(bg6); var notif1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;strokeColor=none;fillColor=#000000;'); notif1.geometry.relative = true; notif1.geometry.offset = new mxPoint(-25, -2.5); notif1.vertex = true; bg6.insert(notif1); var bg8 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg8.geometry.relative = true; bg8.geometry.offset = new mxPoint(0, 40); bg8.vertex = true; bg1.insert(bg8); var notif2 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=none;fillColor=#dddddd;html=1;'); notif2.geometry.relative = true; notif2.geometry.offset = new mxPoint(15, -10); notif2.vertex = true; bg8.insert(notif2); var notif3 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 12), s + 'user;strokeColor=none;fillColor=#999999;'); notif3.geometry.relative = true; notif3.geometry.offset = new mxPoint(-7, -6); notif3.vertex = true; notif2.insert(notif3); var bg11 = new mxCell('John Boo', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg11.geometry.relative = true; bg11.geometry.offset = new mxPoint(50, 0); bg11.vertex = true; bg8.insert(bg11); var notif4 = new mxCell('ok', new mxGeometry(0, 0.5, 30, 20), s + 'rrect;rSize=3;strokeColor=none;fillColor=#58B957;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); notif4.geometry.relative = true; notif4.geometry.offset = new mxPoint(250, -10); notif4.vertex = true; bg8.insert(notif4); var notif5 = new mxCell('', new mxGeometry(0, 0.5, 150, 14), s + 'rating;strokeColor=none;fillColor=#EFAC43;emptyFillColor=#dddddd;grade=3;ratingScale=5;ratingStyle=star;'); notif5.geometry.relative = true; notif5.geometry.offset = new mxPoint(450, -7); notif5.vertex = true; bg8.insert(notif5); var bg14 = new mxCell( '
15 Sep, 8:56 AM (2013)
', new mxGeometry(0, 0, 160, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg14.geometry.relative = true; bg14.geometry.offset = new mxPoint(620, 0); bg14.vertex = true; bg8.insert(bg14); var bg15 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg15.geometry.relative = true; bg15.geometry.offset = new mxPoint(0, 80); bg15.vertex = true; bg1.insert(bg15); var notif6 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=none;fillColor=#dddddd;html=1;'); notif6.geometry.relative = true; notif6.geometry.offset = new mxPoint(15, -10); notif6.vertex = true; bg15.insert(notif6); var notif7 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 12), s + 'user;strokeColor=none;fillColor=#999999;'); notif7.geometry.relative = true; notif7.geometry.offset = new mxPoint(-7, -6); notif7.vertex = true; notif6.insert(notif7); var bg18 = new mxCell('Michael Robinson', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg18.geometry.relative = true; bg18.geometry.offset = new mxPoint(50, 0); bg18.vertex = true; bg15.insert(bg18); var notif8 = new mxCell('ok', new mxGeometry(0, 0.5, 30, 20), s + 'rrect;rSize=3;strokeColor=none;fillColor=#58B957;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); notif8.geometry.relative = true; notif8.geometry.offset = new mxPoint(250, -10); notif8.vertex = true; bg15.insert(notif8); var notif9 = new mxCell('', new mxGeometry(0, 0.5, 150, 14), s + 'rating;strokeColor=none;fillColor=#EFAC43;emptyFillColor=#dddddd;grade=5;ratingScale=5;ratingStyle=star;'); notif9.geometry.relative = true; notif9.geometry.offset = new mxPoint(450, -7); notif9.vertex = true; bg15.insert(notif9); var bg21 = new mxCell( '
15 Sep, 7:12 AM (2013)
', new mxGeometry(0, 0, 160, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg21.geometry.relative = true; bg21.geometry.offset = new mxPoint(620, 0); bg21.vertex = true; bg15.insert(bg21); var bg22 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg22.geometry.relative = true; bg22.geometry.offset = new mxPoint(0, 120); bg22.vertex = true; bg1.insert(bg22); var notif10 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=none;fillColor=#dddddd;html=1;'); notif10.geometry.relative = true; notif10.geometry.offset = new mxPoint(15, -10); notif10.vertex = true; bg22.insert(notif10); var notif11 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 12), s + 'user;strokeColor=none;fillColor=#999999;'); notif11.geometry.relative = true; notif11.geometry.offset = new mxPoint(-7, -6); notif11.vertex = true; notif10.insert(notif11); var bg25 = new mxCell('Alexander Robson', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg25.geometry.relative = true; bg25.geometry.offset = new mxPoint(50, 0); bg25.vertex = true; bg22.insert(bg25); var notif12 = new mxCell('Blocked', new mxGeometry(0, 0.5, 70, 20), s + 'rrect;rSize=3;strokeColor=none;fillColor=#999999;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); notif12.geometry.relative = true; notif12.geometry.offset = new mxPoint(250, -10); notif12.vertex = true; bg22.insert(notif12); var bg27 = new mxCell( '
15 Sep, 4:32 AM (2013)
', new mxGeometry(0, 0, 160, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg27.geometry.relative = true; bg27.geometry.offset = new mxPoint(620, 0); bg27.vertex = true; bg22.insert(bg27); var bg28 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg28.geometry.relative = true; bg28.geometry.offset = new mxPoint(0, 160); bg28.vertex = true; bg1.insert(bg28); var notif13 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=none;fillColor=#dddddd;html=1;'); notif13.geometry.relative = true; notif13.geometry.offset = new mxPoint(15, -10); notif13.vertex = true; bg28.insert(notif13); var notif14 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 12), s + 'user;strokeColor=none;fillColor=#999999;'); notif14.geometry.relative = true; notif14.geometry.offset = new mxPoint(-7, -6); notif14.vertex = true; notif13.insert(notif14); var bg31 = new mxCell('Jennifer Pinsker', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg31.geometry.relative = true; bg31.geometry.offset = new mxPoint(50, 0); bg31.vertex = true; bg28.insert(bg31); var notif15 = new mxCell('Blocked 24h', new mxGeometry(0, 0.5, 90, 20), s + 'rrect;rSize=3;strokeColor=none;fillColor=#999999;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); notif15.geometry.relative = true; notif15.geometry.offset = new mxPoint(250, -10); notif15.vertex = true; bg28.insert(notif15); var bg33 = new mxCell( '
15 Sep, 2:08 AM (2013)
', new mxGeometry(0, 0, 160, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg33.geometry.relative = true; bg33.geometry.offset = new mxPoint(620, 0); bg33.vertex = true; bg28.insert(bg33); var bg34 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg34.geometry.relative = true; bg34.geometry.offset = new mxPoint(0, 200); bg34.vertex = true; bg1.insert(bg34); var notif16 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=none;fillColor=#dddddd;html=1;'); notif16.geometry.relative = true; notif16.geometry.offset = new mxPoint(15, -10); notif16.vertex = true; bg34.insert(notif16); var notif17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 12), s + 'user;strokeColor=none;fillColor=#999999;'); notif17.geometry.relative = true; notif17.geometry.offset = new mxPoint(-7, -6); notif17.vertex = true; notif16.insert(notif17); var bg37 = new mxCell('Bob Robson', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg37.geometry.relative = true; bg37.geometry.offset = new mxPoint(50, 0); bg37.vertex = true; bg34.insert(bg37); var notif18 = new mxCell('ok', new mxGeometry(0, 0.5, 30, 20), s + 'rrect;rSize=3;strokeColor=none;fillColor=#58B957;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); notif18.geometry.relative = true; notif18.geometry.offset = new mxPoint(250, -10); notif18.vertex = true; bg34.insert(notif18); var notif20 = new mxCell('', new mxGeometry(0, 0.5, 150, 14), s + 'rating;strokeColor=none;fillColor=#EFAC43;emptyFillColor=#dddddd;grade=1;ratingScale=5;ratingStyle=star;'); notif20.geometry.relative = true; notif20.geometry.offset = new mxPoint(450, -7); notif20.vertex = true; bg34.insert(notif20); var bg40 = new mxCell( '
15 Sep, 8:56 AM (2013)
', new mxGeometry(0, 0, 160, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg40.geometry.relative = true; bg40.geometry.offset = new mxPoint(620, 0); bg40.vertex = true; bg34.insert(bg40); var bg41 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg41.geometry.relative = true; bg41.geometry.offset = new mxPoint(0, 240); bg41.vertex = true; bg1.insert(bg41); var notif21 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=none;fillColor=#dddddd;html=1;'); notif21.geometry.relative = true; notif21.geometry.offset = new mxPoint(15, -10); notif21.vertex = true; bg41.insert(notif21); var notif22 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 12), s + 'user;strokeColor=none;fillColor=#999999;'); notif22.geometry.relative = true; notif22.geometry.offset = new mxPoint(-7, -6); notif22.vertex = true; notif21.insert(notif22); var bg44 = new mxCell('Michael Robinson', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg44.geometry.relative = true; bg44.geometry.offset = new mxPoint(50, 0); bg44.vertex = true; bg41.insert(bg44); var notif23 = new mxCell('Suspect', new mxGeometry(0, 0.5, 70, 20), s + 'rrect;rSize=3;strokeColor=none;fillColor=#55BFE0;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); notif23.geometry.relative = true; notif23.geometry.offset = new mxPoint(250, -10); notif23.vertex = true; bg41.insert(notif23); var notif24 = new mxCell('', new mxGeometry(0, 0.5, 150, 14), s + 'rating;strokeColor=none;fillColor=#EFAC43;emptyFillColor=#dddddd;grade=4;ratingScale=5;ratingStyle=star;'); notif24.geometry.relative = true; notif24.geometry.offset = new mxPoint(450, -7); notif24.vertex = true; bg41.insert(notif24); var bg47 = new mxCell( '
15 Sep, 7:12 AM (2013)
', new mxGeometry(0, 0, 160, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg47.geometry.relative = true; bg47.geometry.offset = new mxPoint(620, 0); bg47.vertex = true; bg41.insert(bg47); var bg48 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg48.geometry.relative = true; bg48.geometry.offset = new mxPoint(0, 280); bg48.vertex = true; bg1.insert(bg48); var notif25 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=none;fillColor=#dddddd;html=1;'); notif25.geometry.relative = true; notif25.geometry.offset = new mxPoint(15, -10); notif25.vertex = true; bg48.insert(notif25); var notif26 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 12), s + 'user;strokeColor=none;fillColor=#999999;'); notif26.geometry.relative = true; notif26.geometry.offset = new mxPoint(-7, -6); notif26.vertex = true; notif25.insert(notif26); var bg51 = new mxCell('Jennifer Pinsker', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg51.geometry.relative = true; bg51.geometry.offset = new mxPoint(50, 0); bg51.vertex = true; bg48.insert(bg51); var notif27 = new mxCell('ok', new mxGeometry(0, 0.5, 30, 20), s + 'rrect;rSize=3;strokeColor=none;fillColor=#58B957;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); notif27.geometry.relative = true; notif27.geometry.offset = new mxPoint(250, -10); notif27.vertex = true; bg48.insert(notif27); var bg53 = new mxCell( '
15 Sep, 4:34 AM (2013)
', new mxGeometry(0, 0, 160, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg53.geometry.relative = true; bg53.geometry.offset = new mxPoint(620, 0); bg53.vertex = true; bg48.insert(bg53); var bg54 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg54.geometry.relative = true; bg54.geometry.offset = new mxPoint(0, 320); bg54.vertex = true; bg1.insert(bg54); var notif28 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=none;fillColor=#dddddd;html=1;'); notif28.geometry.relative = true; notif28.geometry.offset = new mxPoint(15, -10); notif28.vertex = true; bg54.insert(notif28); var notif29 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 12), s + 'user;strokeColor=none;fillColor=#999999;'); notif29.geometry.relative = true; notif29.geometry.offset = new mxPoint(-7, -6); notif29.vertex = true; notif28.insert(notif29); var bg57 = new mxCell('John Boo', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg57.geometry.relative = true; bg57.geometry.offset = new mxPoint(50, 0); bg57.vertex = true; bg54.insert(bg57); var notif30 = new mxCell('Violation', new mxGeometry(0, 0.5, 70, 20), s + 'rrect;rSize=3;strokeColor=none;fillColor=#DB524C;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); notif30.geometry.relative = true; notif30.geometry.offset = new mxPoint(250, -10); notif30.vertex = true; bg54.insert(notif30); var notif31 = new mxCell('', new mxGeometry(0, 0.5, 150, 14), s + 'rating;strokeColor=none;fillColor=#EFAC43;emptyFillColor=#dddddd;grade=2;ratingScale=5;ratingStyle=star;'); notif31.geometry.relative = true; notif31.geometry.offset = new mxPoint(450, -7); notif31.vertex = true; bg54.insert(notif31); var bg60 = new mxCell( '
15 Sep, 2:08 AM (2013)
', new mxGeometry(0, 0, 160, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg60.geometry.relative = true; bg60.geometry.offset = new mxPoint(620, 0); bg60.vertex = true; bg54.insert(bg60); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Table'); }), this.addEntry(dt + 'table', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 340), s + 'rect;strokeColor=none;fillColor=#ffffff;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'horLines;strokeColor=#dddddd;fillColor=#fdfdfd;resizeWidth=1;'); bg2.geometry.relative = true; bg2.vertex = true; bg1.insert(bg2); var bg3 = new mxCell('Admin Name', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg3.geometry.relative = true; bg3.geometry.offset = new mxPoint(10, 0); bg3.vertex = true; bg2.insert(bg3); var bg4 = new mxCell('Object', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(200, 0); bg4.vertex = true; bg2.insert(bg4); var bg5 = new mxCell('Action', new mxGeometry(0, 0, 150, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(400, 0); bg5.vertex = true; bg2.insert(bg5); var bg6 = new mxCell('Date', new mxGeometry(0, 0, 100, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;whiteSpace=wrap;resizeHeight=1;'); bg6.geometry.relative = true; bg6.geometry.offset = new mxPoint(620, 0); bg6.vertex = true; bg2.insert(bg6); var notif1 = new mxCell('', new mxGeometry(0, 0.5, 10, 5), 'shape=triangle;direction=south;strokeColor=none;fillColor=#000000;'); notif1.geometry.relative = true; notif1.geometry.offset = new mxPoint(665, -2.5); notif1.vertex = true; bg2.insert(notif1); var bg8 = new mxCell('', new mxGeometry(0, 0, 800, 50), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg8.geometry.relative = true; bg8.geometry.offset = new mxPoint(0, 40); bg8.vertex = true; bg1.insert(bg8); var bg9 = new mxCell('Jennifer Pinsker\n', new mxGeometry(0, 0, 150, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg9.geometry.relative = true; bg9.geometry.offset = new mxPoint(10, 0); bg9.vertex = true; bg8.insert(bg9); var notif2 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=none;fillColor=#dddddd;html=1;'); notif2.geometry.relative = true; notif2.geometry.offset = new mxPoint(200, -15); notif2.vertex = true; bg8.insert(notif2); var notif3 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 12), s + 'user;strokeColor=none;fillColor=#999999;'); notif3.geometry.relative = true; notif3.geometry.offset = new mxPoint(-7, -6); notif3.vertex = true; notif2.insert(notif3); var bg12 = new mxCell('John Boo\n', new mxGeometry(0, 0, 150, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg12.geometry.relative = true; bg12.geometry.offset = new mxPoint(230, 0); bg12.vertex = true; bg8.insert(bg12); var bg13 = new mxCell( '
Profile Updated
First Name is set to Bobby
', new mxGeometry(0, 0, 210, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg13.geometry.relative = true; bg13.geometry.offset = new mxPoint(400, 0); bg13.vertex = true; bg8.insert(bg13); var bg14 = new mxCell( '
15 Sep, 8:56 AM (2013)

', new mxGeometry(0, 0, 160, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg14.geometry.relative = true; bg14.geometry.offset = new mxPoint(620, 0); bg14.vertex = true; bg8.insert(bg14); var bg15 = new mxCell('', new mxGeometry(0, 0, 800, 50), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg15.geometry.relative = true; bg15.geometry.offset = new mxPoint(0, 90); bg15.vertex = true; bg1.insert(bg15); var bg16 = new mxCell('Bob Robson\n', new mxGeometry(0, 0, 150, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg16.geometry.relative = true; bg16.geometry.offset = new mxPoint(10, 0); bg16.vertex = true; bg15.insert(bg16); var notif4 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=none;fillColor=#dddddd;html=1;'); notif4.geometry.relative = true; notif4.geometry.offset = new mxPoint(200, -15); notif4.vertex = true; bg15.insert(notif4); var notif5 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 12), s + 'user;strokeColor=none;fillColor=#999999;'); notif5.geometry.relative = true; notif5.geometry.offset = new mxPoint(-7, -6); notif5.vertex = true; notif4.insert(notif5); var bg19 = new mxCell('Michael Robinson\n', new mxGeometry(0, 0, 150, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg19.geometry.relative = true; bg19.geometry.offset = new mxPoint(230, 0); bg19.vertex = true; bg15.insert(bg19); var bg20 = new mxCell( '
Violation Resolved
Fake Person Violation resolved
', new mxGeometry(0, 0, 210, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg20.geometry.relative = true; bg20.geometry.offset = new mxPoint(400, 0); bg20.vertex = true; bg15.insert(bg20); var bg21 = new mxCell( '
15 Sep, 7:12 AM (2013)

', new mxGeometry(0, 0, 160, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg21.geometry.relative = true; bg21.geometry.offset = new mxPoint(620, 0); bg21.vertex = true; bg15.insert(bg21); var bg8 = new mxCell('', new mxGeometry(0, 0, 800, 50), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg8.geometry.relative = true; bg8.geometry.offset = new mxPoint(0, 140); bg8.vertex = true; bg1.insert(bg8); var bg9 = new mxCell('Michael Robinson\n', new mxGeometry(0, 0, 150, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg9.geometry.relative = true; bg9.geometry.offset = new mxPoint(10, 0); bg9.vertex = true; bg8.insert(bg9); var notif6 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=none;fillColor=#dddddd;html=1;'); notif6.geometry.relative = true; notif6.geometry.offset = new mxPoint(200, -15); notif6.vertex = true; bg8.insert(notif6); var notif7 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 12), s + 'user;strokeColor=none;fillColor=#999999;'); notif7.geometry.relative = true; notif7.geometry.offset = new mxPoint(-7, -6); notif7.vertex = true; notif6.insert(notif7); var bg12 = new mxCell('Alexander Robson\n', new mxGeometry(0, 0, 150, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1'); bg12.geometry.relative = true; bg12.geometry.offset = new mxPoint(230, 0); bg12.vertex = true; bg8.insert(bg12); var bg13 = new mxCell( '
Suspect Resolved
Mass Friending Suspect resolved
', new mxGeometry(0, 0, 210, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeWidth=1;'); bg13.geometry.relative = true; bg13.geometry.offset = new mxPoint(400, 0); bg13.vertex = true; bg8.insert(bg13); var bg14 = new mxCell( '
15 Sep, 4:34 AM (2013)

', new mxGeometry(0, 0, 160, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg14.geometry.relative = true; bg14.geometry.offset = new mxPoint(620, 0); bg14.vertex = true; bg8.insert(bg14); var bg8 = new mxCell('', new mxGeometry(0, 0, 800, 50), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg8.geometry.relative = true; bg8.geometry.offset = new mxPoint(0, 190); bg8.vertex = true; bg1.insert(bg8); var bg9 = new mxCell('Jennifer Pinsker\n', new mxGeometry(0, 0, 150, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg9.geometry.relative = true; bg9.geometry.offset = new mxPoint(10, 0); bg9.vertex = true; bg8.insert(bg9); var notif8 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=none;fillColor=#dddddd;html=1;'); notif8.geometry.relative = true; notif8.geometry.offset = new mxPoint(200, -15); notif8.vertex = true; bg8.insert(notif8); var notif9 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 12), s + 'user;strokeColor=none;fillColor=#999999;'); notif9.geometry.relative = true; notif9.geometry.offset = new mxPoint(-7, -6); notif9.vertex = true; notif8.insert(notif9); var bg12 = new mxCell('Jennifer Pinsker\n', new mxGeometry(0, 0, 150, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg12.geometry.relative = true; bg12.geometry.offset = new mxPoint(230, 0); bg12.vertex = true; bg8.insert(bg12); var bg13 = new mxCell( '
Profile Violation Detected
First Name is marked as Violation
', new mxGeometry(0, 0, 210, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg13.geometry.relative = true; bg13.geometry.offset = new mxPoint(400, 0); bg13.vertex = true; bg8.insert(bg13); var bg14 = new mxCell( '
15 Sep, 2:08 AM (2013)

', new mxGeometry(0, 0, 160, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg14.geometry.relative = true; bg14.geometry.offset = new mxPoint(620, 0); bg14.vertex = true; bg8.insert(bg14); var bg8 = new mxCell('', new mxGeometry(0, 0, 800, 50), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg8.geometry.relative = true; bg8.geometry.offset = new mxPoint(0, 240); bg8.vertex = true; bg1.insert(bg8); var bg9 = new mxCell('John Boo\n', new mxGeometry(0, 0, 150, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg9.geometry.relative = true; bg9.geometry.offset = new mxPoint(10, 0); bg9.vertex = true; bg8.insert(bg9); var notif10 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=none;fillColor=#dddddd;html=1;'); notif10.geometry.relative = true; notif10.geometry.offset = new mxPoint(200, -15); notif10.vertex = true; bg8.insert(notif10); var notif11 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 12), s + 'user;strokeColor=none;fillColor=#999999;'); notif11.geometry.relative = true; notif11.geometry.offset = new mxPoint(-7, -6); notif11.vertex = true; notif10.insert(notif11); var bg12 = new mxCell('Bob Robson\n', new mxGeometry(0, 0, 150, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg12.geometry.relative = true; bg12.geometry.offset = new mxPoint(230, 0); bg12.vertex = true; bg8.insert(bg12); var bg13 = new mxCell( '
Profile Updated
First Name is set to Bobby
', new mxGeometry(0, 0, 210, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg13.geometry.relative = true; bg13.geometry.offset = new mxPoint(400, 0); bg13.vertex = true; bg8.insert(bg13); var bg14 = new mxCell( '
15 Sep, 8:56 AM (2013)

', new mxGeometry(0, 0, 160, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg14.geometry.relative = true; bg14.geometry.offset = new mxPoint(620, 0); bg14.vertex = true; bg8.insert(bg14); var bg8 = new mxCell('', new mxGeometry(0, 0, 800, 50), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg8.geometry.relative = true; bg8.geometry.offset = new mxPoint(0, 290); bg8.vertex = true; bg1.insert(bg8); var bg9 = new mxCell('Michael Robinson\n', new mxGeometry(0, 0, 150, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg9.geometry.relative = true; bg9.geometry.offset = new mxPoint(10, 0); bg9.vertex = true; bg8.insert(bg9); var notif12 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'shape=ellipse;strokeColor=none;fillColor=#dddddd;html=1;'); notif12.geometry.relative = true; notif12.geometry.offset = new mxPoint(200, -15); notif12.vertex = true; bg8.insert(notif12); var notif13 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 12), s + 'user;strokeColor=none;fillColor=#999999;'); notif13.geometry.relative = true; notif13.geometry.offset = new mxPoint(-7, -6); notif13.vertex = true; notif12.insert(notif13); var bg12 = new mxCell('Michael Robinson\n', new mxGeometry(0, 0, 150, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;whiteSpace=wrap;resizeHeight=1;'); bg12.geometry.relative = true; bg12.geometry.offset = new mxPoint(230, 0); bg12.vertex = true; bg8.insert(bg12); var bg13 = new mxCell( '
User Blocked
Blocked for 24 hours
', new mxGeometry(0, 0, 210, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg13.geometry.relative = true; bg13.geometry.offset = new mxPoint(400, 0); bg13.vertex = true; bg8.insert(bg13); var bg14 = new mxCell( '
15 Sep, 7:12 AM (2013)

', new mxGeometry(0, 0, 160, 50), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;align=left;overflow=fill;whiteSpace=wrap;resizeHeight=1;'); bg14.geometry.relative = true; bg14.geometry.offset = new mxPoint(620, 0); bg14.vertex = true; bg8.insert(bg14); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Table'); }), this.addEntry(dt + 'table', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 430), s + 'rect;strokeColor=none;fillColor=#ffffff;'); bg1.vertex = true; var bg2 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'horLines;strokeColor=#dddddd;fillColor=#fdfdfd;resizeWidth=1;'); bg2.geometry.relative = true; bg2.vertex = true; bg1.insert(bg2); var bg3 = new mxCell('Template Name', new mxGeometry(0, 0, 200, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;spacingLeft=10;whiteSpace=wrap;resizeHeight=1;'); bg3.geometry.relative = true; bg3.vertex = true; bg2.insert(bg3); var bg4 = new mxCell('Message', new mxGeometry(0, 0, 200, 40), s + 'rect;strokeColor=none;fillColor=none;fontSize=14;fontStyle=1;align=left;spacingLeft=10;whiteSpace=wrap;resizeWidth=1;resizeHeight=1;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(200, 0); bg4.vertex = true; bg2.insert(bg4); var bg5 = new mxCell('', new mxGeometry(0, 0, 800, 130), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(0, 40); bg5.vertex = true; bg1.insert(bg5); var bg6 = new mxCell('Uncompleted Profile', new mxGeometry(0, 0, 200, 40), s + 'rect;strokeColor=none;fillColor=none;align=left;spacingLeft=10;whiteSpace=wrap;'); bg6.geometry.relative = true; bg6.vertex = true; bg5.insert(bg6); var bg7 = new mxCell( 'Hello! At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium deleniti atque corrupti quos dolores' + 'et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est' + 'laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Name libero tempore, cum soluta nobis est eligendi' + 'optio cumque nihil impedit quo.', new mxGeometry(0, 0, 400, 130), s + 'rect;strokeColor=none;fillColor=none;align=left;valign=top;spacingLeft=10;verticalAlign=top;spacingTop=6;whiteSpace=wrap;resizeWidth=1;'); bg7.geometry.relative = true; bg7.geometry.offset = new mxPoint(200, 0); bg7.vertex = true; bg5.insert(bg7); var notif1 = new mxCell('Edit', new mxGeometry(1, 0, 50, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;whiteSpace=wrap;'); notif1.geometry.relative = true; notif1.geometry.offset = new mxPoint(-140, 15); notif1.vertex = true; bg5.insert(notif1); var notif2 = new mxCell('Delete', new mxGeometry(1, 0, 60, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;whiteSpace=wrap;'); notif2.geometry.relative = true; notif2.geometry.offset = new mxPoint(-80, 15); notif2.vertex = true; bg5.insert(notif2); var bg8 = new mxCell('', new mxGeometry(0, 0, 800, 100), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg8.geometry.relative = true; bg8.geometry.offset = new mxPoint(0, 170); bg8.vertex = true; bg1.insert(bg8); var bg9 = new mxCell('Spam Suspect', new mxGeometry(0, 0, 200, 40), s + 'rect;strokeColor=none;fillColor=none;align=left;spacingLeft=10;whiteSpace=wrap;'); bg9.geometry.relative = true; bg9.vertex = true; bg8.insert(bg9); var bg10 = new mxCell( 'Hello, deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui' + 'officia deserunt mollitia animi, id est fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam nobis est eligendi optio cumque' + 'nihil impedit quo minus id quod maxime placeat.', new mxGeometry(0, 0, 400, 100), s + 'rect;strokeColor=none;fillColor=none;align=left;valign=top;spacingLeft=10;verticalAlign=top;spacingTop=6;whiteSpace=wrap;resizeWidth=1;'); bg10.geometry.relative = true; bg10.geometry.offset = new mxPoint(200, 0); bg10.vertex = true; bg8.insert(bg10); var notif3 = new mxCell('Edit', new mxGeometry(1, 0, 50, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;whiteSpace=wrap;'); notif3.geometry.relative = true; notif3.geometry.offset = new mxPoint(-140, 15); notif3.vertex = true; bg8.insert(notif3); var notif4 = new mxCell('Delete', new mxGeometry(1, 0, 60, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;whiteSpace=wrap;'); notif4.geometry.relative = true; notif4.geometry.offset = new mxPoint(-80, 15); notif4.vertex = true; bg8.insert(notif4); var bg11 = new mxCell('', new mxGeometry(0, 0, 800, 160), s + 'horLines;strokeColor=#dddddd;fillColor=none;resizeWidth=1;'); bg11.geometry.relative = true; bg11.geometry.offset = new mxPoint(0, 270); bg11.vertex = true; bg1.insert(bg11); var bg12 = new mxCell('Profile Blocked', new mxGeometry(0, 0, 200, 40), s + 'rect;strokeColor=none;fillColor=none;align=left;spacingLeft=10;whiteSpace=wrap;'); bg12.vertex = true; bg11.insert(bg12); var bg13 = new mxCell( 'Hello! Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa' + 'quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit' + 'aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,' + 'qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore' + 'magnam aliquam quaerat voluptarem.', new mxGeometry(0, 0, 400, 160), s + 'rect;strokeColor=none;fillColor=none;align=left;valign=top;spacingLeft=10;verticalAlign=top;spacingTop=6;whiteSpace=wrap;resizeWidth=1;'); bg13.geometry.relative = true; bg13.geometry.offset = new mxPoint(200, 0); bg13.vertex = true; bg11.insert(bg13); var notif1 = new mxCell('Edit', new mxGeometry(1, 0, 50, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;whiteSpace=wrap;'); notif1.geometry.relative = true; notif1.geometry.offset = new mxPoint(-140, 15); notif1.vertex = true; bg11.insert(notif1); var notif2 = new mxCell('Delete', new mxGeometry(1, 0, 60, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;whiteSpace=wrap;'); notif2.geometry.relative = true; notif2.geometry.offset = new mxPoint(-80, 15); notif2.vertex = true; bg11.insert(notif2); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Table'); }), this.addEntry(dt + 'table', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 80), s + 'horLines;strokeColor=#dddddd;fillColor=#fdfdfd;'); bg1.vertex = true; var bg2 = new mxCell('Group Name', new mxGeometry(20, 20, 500, 40), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#ffffff;align=left;spacingLeft=10;fontSize=18;fontColor=#999999;whiteSpace=wrap;'); bg2.vertex = true; bg1.insert(bg2); var bg3 = new mxCell('Create Templates Group', new mxGeometry(540, 20, 240, 40), s + 'rrect;rSize=5;strokeColor=none;fillColor=#3D8BCD;fontSize=18;fontColor=#ffffff;whiteSpace=wrap;'); bg3.vertex = true; bg1.insert(bg3); return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Table'); }), this.addEntry(dt + 'edit template', function() { var bg1 = new mxCell('Template name', new mxGeometry(0, 0, 200, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('Uncompleted Profile', new mxGeometry(0, 20, 800, 40), s + 'rrect;rSize=5;strokeColor=#dddddd;;fillColor=#ffffff;align=left;spacingLeft=10;fontSize=16;whiteSpace=wrap;'); bg2.vertex = true; var bg3 = new mxCell('Subject', new mxGeometry(0, 80, 200, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;'); bg3.vertex = true; var bg4 = new mxCell('Hello, %USER_FULL_NAME%', new mxGeometry(0, 100, 800, 40), s + 'rrect;rSize=5;strokeColor=#dddddd;;fillColor=#ffffff;align=left;spacingLeft=10;fontSize=16;whiteSpace=wrap;'); bg4.vertex = true; var bg5 = new mxCell('Insert System Variable', new mxGeometry(650, 80, 120, 20), s + 'rect;strokeColor=none;fillColor=none;align=right;fontSize=10;whiteSpace=wrap;'); bg5.vertex = true; var bg6 = new mxCell('', new mxGeometry(772, 87, 8, 4), 'shape=triangle;strokeColor=none;fillColor=#000000;direction=south;'); bg6.vertex = true; var bg7 = new mxCell('Message', new mxGeometry(0, 160, 200, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;'); bg7.vertex = true; var bg8 = new mxCell( 'Hello %USER_FULL_NAME%!\n\n' + 'At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos' + 'dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia' + 'animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta' + 'nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda' + 'est, omnis dolor repellendus.', new mxGeometry(0, 180, 800, 240), s + 'rrect;rSize=5;fontSize=12;strokeColor=#dddddd;;fillColor=#ffffff;align=left;spacing=10;verticalAlign=top;whiteSpace=wrap;'); bg8.vertex = true; var bg9 = new mxCell('Insert System Variable', new mxGeometry(650, 160, 120, 20), s + 'rect;strokeColor=none;fillColor=none;align=right;fontSize=10;whiteSpace=wrap;'); bg9.vertex = true; var bg10 = new mxCell('', new mxGeometry(772, 167, 8, 4), 'shape=triangle;strokeColor=none;fillColor=#000000;direction=south;'); bg10.vertex = true; var bg11 = new mxCell( '%USER_FULL_NAME%\n' + '%USER_EMAIL%\n' + '%USER_PROFILE_COMPLETENESS%\n' + '%USER_NUM_SUCCESS_TRADES%\n' + '%USER_FULL_NAME%\n' + '%USER_EMAIL%\n' + '%USER_PROFILE_COMPLETENESS%\n' + '%USER_NUM_SUCCESS_SELLS%', new mxGeometry(550, 175, 240, 140), s + 'rrect;fontSize=12;rSize=2;strokeColor=#dddddd;fillColor=#ffffff;align=left;verticalAlign=top;spacing=10;shadow=1;whiteSpace=wrap;'); bg11.vertex = true; var bg12 = new mxCell('Message Type', new mxGeometry(0, 440, 200, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;'); bg12.vertex = true; var bg13 = new mxCell('Email + Push', new mxGeometry(0, 460, 390, 40), s + 'rrect;rSize=5;strokeColor=#dddddd;;fillColor=#ffffff;align=left;spacingLeft=10;fontSize=16;whiteSpace=wrap;'); bg13.vertex = true; var bg14 = new mxCell('', new mxGeometry(370, 477, 10, 5), 'shape=triangle;strokeColor=none;fillColor=#000000;direction=south;'); bg14.vertex = true; var bg15 = new mxCell('Tap target', new mxGeometry(410, 440, 200, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;'); bg15.vertex = true; var bg16 = new mxCell('Profile Screen', new mxGeometry(410, 460, 390, 40), s + 'rrect;rSize=5;strokeColor=#dddddd;;fillColor=#ffffff;align=left;spacingLeft=10;fontSize=16;whiteSpace=wrap;'); bg16.vertex = true; var bg17 = new mxCell('', new mxGeometry(780, 477, 10, 5), 'shape=triangle;strokeColor=none;fillColor=#000000;direction=south;'); bg17.vertex = true; var bg18 = new mxCell('Send to Group', new mxGeometry(0, 520, 200, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;'); bg18.vertex = true; var bg19 = new mxCell('Top Management', new mxGeometry(10, 543, 14, 14), s + 'checkbox;fontSize=12;strokeColor=#999999;fillColor=#ffffff;align=left;labelPosition=right;spacingLeft=5;'); bg19.vertex = true; var bg20 = new mxCell('Marketing Department', new mxGeometry(10, 563, 14, 14), s + 'rrect;fontSize=12;rSize=3;strokeColor=#999999;fillColor=#ffffff;align=left;labelPosition=right;spacingLeft=5;'); bg20.vertex = true; var bg21 = new mxCell('Design Department', new mxGeometry(10, 583, 14, 14), s + 'checkbox;fontSize=12;strokeColor=#999999;fillColor=#ffffff;align=left;labelPosition=right;spacingLeft=5;'); bg21.vertex = true; var bg22 = new mxCell('Financial Department', new mxGeometry(10, 603, 14, 14), s + 'rrect;fontSize=12;rSize=3;strokeColor=#999999;fillColor=#ffffff;align=left;labelPosition=right;spacingLeft=5;'); bg22.vertex = true; var bg23 = new mxCell('Supply Department', new mxGeometry(10, 623, 14, 14), s + 'rrect;fontSize=12;rSize=3;strokeColor=#999999;fillColor=#ffffff;align=left;labelPosition=right;spacingLeft=5;'); bg23.vertex = true; var bg24 = new mxCell('Set Type', new mxGeometry(410, 520, 200, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;'); bg24.vertex = true; var bg25 = new mxCell('', new mxGeometry(420, 543, 14, 14), 'shape=ellipse;dashed=0;strokeColor=#999999;fillColor=#ffffff;html=1;'); bg25.vertex = true; var bg26 = new mxCell('News', new mxGeometry(440, 543, 40, 14), s + 'rrect;align=center;rSize=3;strokeColor=none;fillColor=#58B957;fontColor=#ffffff;fontStyle=1;fontSize=10;whiteSpace=wrap;'); bg26.vertex = true; var bg27 = new mxCell('', new mxGeometry(420, 563, 14, 14), s + 'radioButton;strokeColor=#999999;fillColor=#ffffff;'); bg27.vertex = true; var bg28 = new mxCell('Reports', new mxGeometry(440, 563, 50, 14), s + 'rrect;align=center;rSize=3;strokeColor=none;fillColor=#55BFE0;fontColor=#ffffff;fontStyle=1;fontSize=10;whiteSpace=wrap;'); bg28.vertex = true; var bg29 = new mxCell('', new mxGeometry(420, 583, 14, 14), 'shape=ellipse;dashed=0;strokeColor=#999999;fillColor=#ffffff;html=1;'); bg29.vertex = true; var bg30 = new mxCell('Documents', new mxGeometry(440, 583, 70, 14), s + 'rrect;align=center;rSize=3;strokeColor=none;fillColor=#EFAC43;fontColor=#ffffff;fontStyle=1;fontSize=10;whiteSpace=wrap;'); bg30.vertex = true; var bg31 = new mxCell('', new mxGeometry(420, 603, 14, 14), 'shape=ellipse;dashed=0;strokeColor=#999999;fillColor=#ffffff;html=1;'); bg31.vertex = true; var bg32 = new mxCell('Media', new mxGeometry(440, 603, 40, 14), s + 'rrect;align=center;rSize=3;strokeColor=none;fillColor=#3D8BCD;fontColor=#ffffff;fontStyle=1;fontSize=10;whiteSpace=wrap;'); bg32.vertex = true; var bg33 = new mxCell('', new mxGeometry(420, 623, 14, 14), 'shape=ellipse;dashed=0;strokeColor=#999999;fillColor=#ffffff;html=1;'); bg33.vertex = true; var bg34 = new mxCell('Text', new mxGeometry(440, 623, 30, 14), s + 'rrect;align=center;rSize=3;strokeColor=none;fillColor=#999999;fontColor=#ffffff;fontStyle=1;fontSize=10;whiteSpace=wrap;'); bg34.vertex = true; var bg35 = new mxCell('Save Template', new mxGeometry(0, 680, 150, 40), s + 'rrect;align=center;rSize=5;strokeColor=none;fillColor=#3D8BCD;fontColor=#ffffff;fontSize=16;whiteSpace=wrap;'); bg35.vertex = true; var bg36 = new mxCell('Cancel', new mxGeometry(170, 680, 100, 40), s + 'rrect;fillColor=#ffffff;align=center;rSize=5;strokeColor=#dddddd;fontSize=16;whiteSpace=wrap;'); bg36.vertex = true; var bg37 = new mxCell('Delete Template', new mxGeometry(630, 680, 170, 40), s + 'rrect;align=center;rSize=5;strokeColor=none;fillColor=#DB524C;fontColor=#ffffff;fontSize=16;whiteSpace=wrap;'); bg37.vertex = true; return sb.createVertexTemplateFromCells([bg1, bg2, bg3, bg4, bg5, bg6, bg7, bg8, bg9, bg10, bg11, bg12, bg13, bg14, bg15, bg16, bg17, bg18, bg19, bg20, bg21, bg22, bg23, bg24, bg25, bg26, bg27, bg28, bg29, bg30, bg31, bg32, bg33, bg34, bg35, bg36, bg37], 800, 720, 'Edit Template'); }), this.addEntry(dt + 'business contact', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 50), s + 'horLines;strokeColor=#dddddd;fillColor=#fdfdfd;'); bg1.vertex = true; var notif1 = new mxCell('2 fields selected', new mxGeometry(0, 0.5, 14, 14), s + 'checkbox;strokeColor=#dddddd;fillColor=none;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;'); notif1.geometry.relative = true; notif1.geometry.offset = new mxPoint(13, -7); notif1.vertex = true; bg1.insert(notif1); var bg3 = new mxCell('Mark as OK', new mxGeometry(0, 0.5, 90, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;;fillColor=#ffffff;whiteSpace=wrap;'); bg3.geometry.relative = true; bg3.geometry.offset = new mxPoint(150, -15); bg3.vertex = true; bg1.insert(bg3); var bg4 = new mxCell('Mark as Violation', new mxGeometry(0, 0.5, 120, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;;fillColor=#ffffff;whiteSpace=wrap;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(250, -15); bg4.vertex = true; bg1.insert(bg4); var bg5 = new mxCell('Mark all as OK', new mxGeometry(1, 0.5, 100, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;;fillColor=#ffffff;whiteSpace=wrap;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(-110, -15); bg5.vertex = true; bg1.insert(bg5); var bg6 = new mxCell('Phone', new mxGeometry(40, 70, 100, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;'); bg6.vertex = true; var bg7 = new mxCell('', new mxGeometry(13, 103, 14, 14), s + 'checkbox;strokeColor=#999999;fillColor=#ffffff;'); bg7.vertex = true; var bg8 = new mxCell('+38 (066) 875 67 97', new mxGeometry(40, 90, 640, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;'); bg8.vertex = true; var bg9 = new mxCell('ok', new mxGeometry(700, 100, 30, 20), s + 'rrect;align=center;rSize=3;strokeColor=none;fillColor=#58B957;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); bg9.vertex = true; var bg10 = new mxCell('Business email', new mxGeometry(40, 140, 100, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;'); bg10.vertex = true; var bg11 = new mxCell('', new mxGeometry(13, 173, 14, 14), s + 'checkbox;strokeColor=#999999;fillColor=#ffffff;'); bg11.vertex = true; var bg12 = new mxCell('seo@apple.com', new mxGeometry(40, 160, 640, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#FDF8E4;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;'); bg12.vertex = true; var bg13 = new mxCell('To Moderate', new mxGeometry(700, 170, 90, 20), s + 'rrect;align=center;rSize=3;strokeColor=none;fillColor=#EFAC43;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); bg13.vertex = true; var bg14 = new mxCell('Skype', new mxGeometry(40, 210, 100, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;'); bg14.vertex = true; var bg15 = new mxCell('', new mxGeometry(13, 243, 14, 14), s + 'rrect;rSize=3;strokeColor=#999999;fillColor=#ffffff;'); bg15.vertex = true; var bg16 = new mxCell('alex.robby', new mxGeometry(40, 230, 640, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;'); bg16.vertex = true; var bg17 = new mxCell('ok', new mxGeometry(700, 240, 30, 20), s + 'rrect;rSize=3;align=center;strokeColor=none;fillColor=#58B957;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); bg17.vertex = true; return sb.createVertexTemplateFromCells([bg1, bg6, bg7, bg8, bg9, bg10, bg11, bg12, bg13, bg14, bg15, bg16, bg17], 800, 270, 'Business Contacts'); }), this.addEntry(dt + 'experience', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 50), s + 'horLines;strokeColor=#dddddd;fillColor=#fdfdfd;'); bg1.vertex = true; var notif1 = new mxCell('Select fields to update status', new mxGeometry(0, 0.5, 14, 14), s + 'rrect;rSize=3;strokeColor=#dddddd;fillColor=#ffffff;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;'); notif1.geometry.relative = true; notif1.geometry.offset = new mxPoint(13, -7); notif1.vertex = true; bg1.insert(notif1); var bg3 = new mxCell('Position', new mxGeometry(40, 70, 100, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;'); bg3.vertex = true; var bg4 = new mxCell('', new mxGeometry(13, 103, 14, 14), s + 'rrect;rSize=3;strokeColor=#999999;fillColor=#ffffff;'); bg4.vertex = true; var bg5 = new mxCell('Senior Engineer', new mxGeometry(40, 90, 640, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;'); bg5.vertex = true; var bg6 = new mxCell('ok', new mxGeometry(700, 100, 30, 20), s + 'rrect;rSize=3;align=center;strokeColor=none;fillColor=#58B957;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); bg6.vertex = true; var bg7 = new mxCell('Company', new mxGeometry(40, 140, 100, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;'); bg7.vertex = true; var bg8 = new mxCell('', new mxGeometry(13, 173, 14, 14), s + 'rrect;rSize=3;strokeColor=#999999;fillColor=#ffffff;whiteSpace=wrap;'); bg8.vertex = true; var bg9 = new mxCell('Tesla Motors', new mxGeometry(40, 160, 640, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;'); bg9.vertex = true; var bg10 = new mxCell('ok', new mxGeometry(700, 170, 30, 20), s + 'rrect;rSize=3;align=center;strokeColor=none;fillColor=#58B957;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); bg10.vertex = true; var bg11 = new mxCell('Working from', new mxGeometry(40, 210, 100, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;'); bg11.vertex = true; var bg12 = new mxCell('', new mxGeometry(13, 243, 14, 14), s + 'rrect;rSize=3;strokeColor=#999999;fillColor=#ffffff;'); bg12.vertex = true; var bg13 = new mxCell('October', new mxGeometry(40, 230, 130, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;'); bg13.vertex = true; var bg14 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;whiteSpace=wrap;'); bg14.geometry.relative = true; bg14.geometry.offset = new mxPoint(-30, -3); bg14.vertex = true; bg13.insert(bg14); var bg15 = new mxCell('2011', new mxGeometry(190, 230, 130, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;'); bg15.vertex = true; var bg16 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;whiteSpace=wrap;'); bg16.geometry.relative = true; bg16.geometry.offset = new mxPoint(-30, -3); bg16.vertex = true; bg15.insert(bg16); var bg17 = new mxCell('Working to', new mxGeometry(400, 210, 100, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#999999;align=left;spacingLeft=5;whiteSpace=wrap;'); bg17.vertex = true; var bg18 = new mxCell('Current time', new mxGeometry(580, 210, 100, 20), s + 'rect;strokeColor=none;fillColor=none;align=right;spacingRight=5;fontColor=#55C0E0;whiteSpace=wrap;'); bg18.vertex = true; var bg19 = new mxCell('', new mxGeometry(340, 240, 40, 20), 'shape=line;strokeWidth=2;shadow=0;dashed=0;'); bg19.vertex = true; var bg20 = new mxCell('December', new mxGeometry(400, 230, 130, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;'); bg20.vertex = true; var bg21 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); bg21.geometry.relative = true; bg21.geometry.offset = new mxPoint(-30, -3); bg21.vertex = true; bg20.insert(bg21); var bg22 = new mxCell('2012', new mxGeometry(550, 230, 130, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;'); bg22.vertex = true; var bg23 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;'); bg23.geometry.relative = true; bg23.geometry.offset = new mxPoint(-30, -3); bg23.vertex = true; bg22.insert(bg23); var bg24 = new mxCell('ok', new mxGeometry(700, 240, 30, 20), s + 'rrect;rSize=3;align=center;strokeColor=none;fillColor=#58B957;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); bg24.vertex = true; return sb.createVertexTemplateFromCells([bg1, bg3, bg4, bg5, bg6, bg7, bg8, bg9, bg10, bg11, bg12, bg13, bg15, bg17, bg18, bg19, bg20, bg22, bg24], 800, 270, 'Experience'); }), this.addEntry(dt + 'skills', function() { var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 50), s + 'horLines;strokeColor=#dddddd;fillColor=#fdfdfd;'); bg1.vertex = true; var notif1 = new mxCell('Select fields to update status', new mxGeometry(0, 0.5, 14, 14), s + 'rrect;rSize=3;strokeColor=#dddddd;fillColor=#ffffff;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;'); notif1.geometry.relative = true; notif1.geometry.offset = new mxPoint(13, -7); notif1.vertex = true; bg1.insert(notif1); var bg3 = new mxCell('Mark all as OK', new mxGeometry(1, 0.5, 100, 30), s + 'rrect;rSize=5;strokeColor=#dddddd;fillColor=#fdfdfd;whiteSpace=wrap;'); bg3.geometry.relative = true; bg3.geometry.offset = new mxPoint(-120, -15); bg3.vertex = true; bg1.insert(bg3); var bg4 = new mxCell('', new mxGeometry(13, 103, 14, 14), s + 'rrect;rSize=3;strokeColor=#999999;fillColor=#ffffff;'); bg4.vertex = true; var bg5 = new mxCell('Engineering', new mxGeometry(40, 90, 640, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;'); bg5.vertex = true; var bg6 = new mxCell('ok', new mxGeometry(700, 100, 30, 20), s + 'rrect;align=center;rSize=3;strokeColor=none;fillColor=#58B957;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); bg6.vertex = true; var bg7 = new mxCell('', new mxGeometry(13, 173, 14, 14), s + 'rrect;rSize=3;strokeColor=#999999;fillColor=#ffffff;'); bg7.vertex = true; var bg8 = new mxCell('Thinking', new mxGeometry(40, 160, 640, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#FDF8E4;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;'); bg8.vertex = true; var bg9 = new mxCell('To Moderate', new mxGeometry(700, 170, 90, 20), s + 'rrect;align=center;rSize=3;strokeColor=none;fillColor=#EFAC43;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); bg9.vertex = true; var bg10 = new mxCell('', new mxGeometry(13, 243, 14, 14), s + 'rrect;rSize=3;strokeColor=#999999;fillColor=#ffffff;'); bg10.vertex = true; var bg11 = new mxCell('Working', new mxGeometry(40, 230, 640, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;'); bg11.vertex = true; var bg12 = new mxCell('ok', new mxGeometry(700, 240, 30, 20), s + 'rrect;align=center;rSize=3;strokeColor=none;fillColor=#58B957;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); bg12.vertex = true; var bg13 = new mxCell('', new mxGeometry(13, 313, 14, 14), s + 'rrect;rSize=3;strokeColor=#999999;fillColor=#ffffff;'); bg13.vertex = true; var bg14 = new mxCell('Sleeping', new mxGeometry(40, 300, 640, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;'); bg14.vertex = true; var bg15 = new mxCell('ok', new mxGeometry(700, 310, 30, 20), s + 'rrect;align=center;rSize=3;strokeColor=none;fillColor=#58B957;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); bg15.vertex = true; var bg16 = new mxCell('', new mxGeometry(13, 383, 14, 14), s + 'rrect;rSize=3;strokeColor=#999999;fillColor=#ffffff;'); bg16.vertex = true; var bg17 = new mxCell('Eating', new mxGeometry(40, 370, 640, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;'); bg17.vertex = true; var bg18 = new mxCell('ok', new mxGeometry(700, 380, 30, 20), s + 'rrect;align=center;rSize=3;strokeColor=none;fillColor=#58B957;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); bg18.vertex = true; var bg19 = new mxCell('', new mxGeometry(13, 453, 14, 14), s + 'rrect;rSize=3;strokeColor=#999999;fillColor=#ffffff;'); bg19.vertex = true; var bg20 = new mxCell('Walking', new mxGeometry(40, 440, 640, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;align=left;fontSize=16;spacingLeft=10;whiteSpace=wrap;'); bg20.vertex = true; var bg21 = new mxCell('ok', new mxGeometry(700, 450, 30, 20), s + 'rrect;align=center;rSize=3;strokeColor=none;fillColor=#58B957;fontSize=12;fontStyle=1;fontColor=#ffffff;whiteSpace=wrap;'); bg21.vertex = true; return sb.createVertexTemplateFromCells([bg1, bg4, bg5, bg6, bg7, bg8, bg9, bg10, bg11, bg12, bg13, bg14, bg15, bg16, bg17, bg18, bg19, bg20, bg21], 800, 480, 'Skills'); }), this.addEntry(dt + 'chat', function() { var bg2 = new mxCell('', new mxGeometry(0, 0, 400, 660), s + 'rect;strokeColor=#333333;fillColor=#ffffff;whiteSpace=wrap;'); bg2.vertex = true; var bg1 = new mxCell('', new mxGeometry(0, 0, 400, 50), s + 'rect;strokeColor=#333333;fillColor=#333333;whiteSpace=wrap;resizeWidth=1;'); bg1.geometry.relative = true; bg1.vertex = true; bg2.insert(bg1); var notif1 = new mxCell('John Boo', new mxGeometry(0, 0.5, 30, 30), 'shape=ellipse;strokeColor=none;fillColor=#f0f0f0;labelPosition=right;align=left;spacingLeft=10;fontColor=#f0f0f0;html=1;'); notif1.geometry.relative = true; notif1.geometry.offset = new mxPoint(15, -15); notif1.vertex = true; bg1.insert(notif1); var notif2 = new mxCell('', new mxGeometry(0.5, 0.5, 20, 20), s + 'user;strokeColor=none;fillColor=#999999;'); notif2.geometry.relative = true; notif2.geometry.offset = new mxPoint(-10, -10); notif2.vertex = true; notif1.insert(notif2); var notif3 = new mxCell('Michael Robinson', new mxGeometry(1, 0.5, 30, 30), 'shape=ellipse;strokeColor=none;fillColor=#f0f0f0;labelPosition=left;align=right;spacingRight=10;fontColor=#f0f0f0;html=1;'); notif3.geometry.relative = true; notif3.geometry.offset = new mxPoint(-45, -15); notif3.vertex = true; bg1.insert(notif3); var notif4 = new mxCell('', new mxGeometry(0.5, 0.5, 20, 20), s + 'user;strokeColor=none;fillColor=#999999;'); notif4.geometry.relative = true; notif4.geometry.offset = new mxPoint(-10, -10); notif4.vertex = true; notif3.insert(notif4); var bg7 = new mxCell('15 September 2013', new mxGeometry(0, 0, 400, 30), s + 'rrect;rSize=5;strokeColor=none;fillColor=#fdfdfd;fontColor=#999999;whiteSpace=wrap;resizeWidth=1;'); bg7.geometry.relative = true; bg7.geometry.offset = new mxPoint(0, 75); bg7.vertex = true; bg2.insert(bg7); var bg8 = new mxCell('Hi man!', new mxGeometry(0, 0, 80, 40), s + 'rrect;rSize=5;strokeColor=none;fillColor=#E0F0D6;align=left;spacingLeft=15;whiteSpace=wrap;'); bg8.geometry.relative = true; bg8.geometry.offset = new mxPoint(20, 135); bg8.vertex = true; bg2.insert(bg8); var bg9 = new mxCell('8:56:14 AM', new mxGeometry(0, 0, 100, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#dddddd;fontSize=10;align=left;whiteSpace=wrap;'); bg9.geometry.relative = true; bg9.geometry.offset = new mxPoint(20, 175); bg9.vertex = true; bg2.insert(bg9); var bg10 = new mxCell('Hello there...', new mxGeometry(1, 0, 100, 40), s + 'rrect;rSize=5;strokeColor=none;fillColor=#D9EDF8;align=right;spacingRight=15;whiteSpace=wrap;'); bg10.geometry.relative = true; bg10.geometry.offset = new mxPoint(-120, 195); bg10.vertex = true; bg2.insert(bg10); var bg11 = new mxCell('8:56:14 AM', new mxGeometry(1, 0, 100, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#dddddd;fontSize=10;align=right;whiteSpace=wrap;'); bg11.geometry.relative = true; bg11.geometry.offset = new mxPoint(-120, 235); bg11.vertex = true; bg2.insert(bg11); var bg12 = new mxCell('Duis aute inure dolor in reprehenderit in voluptate velit esse cilium dolore eu fugiat nulla pariatur.', new mxGeometry(0, 0, 240, 80), s + 'rrect;rSize=5;strokeColor=none;fillColor=#E0F0D6;align=left;spacing=15;whiteSpace=wrap;'); bg12.geometry.relative = true; bg12.geometry.offset = new mxPoint(20, 255); bg12.vertex = true; bg2.insert(bg12); var bg13 = new mxCell('8:56:14 AM', new mxGeometry(0, 0, 100, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#dddddd;fontSize=10;align=left;whiteSpace=wrap;'); bg13.geometry.relative = true; bg13.geometry.offset = new mxPoint(20, 335); bg13.vertex = true; bg2.insert(bg13); var bg14 = new mxCell('Really?! Can\'t believe that, man!', new mxGeometry(1, 0, 200, 40), s + 'rrect;rSize=5;strokeColor=none;fillColor=#D9EDF8;align=right;spacing=15;whiteSpace=wrap;'); bg14.geometry.relative = true; bg14.geometry.offset = new mxPoint(-220, 355); bg14.vertex = true; bg2.insert(bg14); var bg15 = new mxCell('8:56:14 AM', new mxGeometry(1, 0, 100, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#dddddd;fontSize=10;align=right;whiteSpace=wrap;'); bg15.geometry.relative = true; bg15.geometry.offset = new mxPoint(-120, 395); bg15.vertex = true; bg2.insert(bg15); var bg16 = new mxCell( 'And even nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas' + 'assumenda est, omnis dolor!', new mxGeometry(0, 0, 240, 100), s + 'rrect;rSize=5;strokeColor=none;fillColor=#E0F0D6;align=left;spacing=15;whiteSpace=wrap;'); bg16.geometry.relative = true; bg16.geometry.offset = new mxPoint(20, 415); bg16.vertex = true; bg2.insert(bg16); var bg17 = new mxCell('8:56:14 AM', new mxGeometry(0, 0, 100, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#dddddd;fontSize=10;align=left;whiteSpace=wrap;'); bg17.geometry.relative = true; bg17.geometry.offset = new mxPoint(20, 515); bg17.vertex = true; bg2.insert(bg17); var bg18 = new mxCell('Ok. Deal!', new mxGeometry(1, 0, 80, 40), s + 'rrect;rSize=5;strokeColor=none;fillColor=#D9EDF8;align=right;spacing=15;whiteSpace=wrap;'); bg18.geometry.relative = true; bg18.geometry.offset = new mxPoint(-100, 535); bg18.vertex = true; bg2.insert(bg18); var bg19 = new mxCell('8:56:14 AM', new mxGeometry(1, 0, 100, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#dddddd;fontSize=10;align=right;whiteSpace=wrap;'); bg19.geometry.relative = true; bg19.geometry.offset = new mxPoint(-120, 575); bg19.vertex = true; bg2.insert(bg19); var bg20 = new mxCell('Huh..', new mxGeometry(0, 0, 60, 40), s + 'rrect;rSize=5;strokeColor=none;fillColor=#E0F0D6;align=left;spacing=15;whiteSpace=wrap;whiteSpace=wrap;'); bg20.geometry.relative = true; bg20.geometry.offset = new mxPoint(20, 595); bg20.vertex = true; bg2.insert(bg20); var bg21 = new mxCell('8:56:14 AM', new mxGeometry(0, 0, 100, 20), s + 'rect;strokeColor=none;fillColor=none;fontColor=#dddddd;fontSize=10;align=left;whiteSpace=wrap;'); bg21.geometry.relative = true; bg21.geometry.offset = new mxPoint(20, 635); bg21.vertex = true; bg2.insert(bg21); return sb.createVertexTemplateFromCells([bg2], 400, 660, 'Chat'); }), this.addEntry(dt + 'log in', function() { var bg1 = new mxCell('Control Panel', new mxGeometry(0, 0, 240, 220), s + 'rrect;fillColor=#ffffff;align=center;rSize=5;strokeColor=#000000;verticalAlign=top;spacingTop=20;fontSize=14;fontStyle=1;whiteSpace=wrap;'); bg1.vertex = true; var bg2 = new mxCell('Email', new mxGeometry(0, 0, 190, 30), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;fontSize=14;fontColor=#dddddd;align=left;spacingLeft=40;whiteSpace=wrap;resizeWidth=1;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(30, 60); bg2.vertex = true; bg1.insert(bg2); var bg3 = new mxCell('', new mxGeometry(0, 0, 30, 30), s + 'leftButton;rSize=5;strokeColor=#999999;fillColor=#fdfdfd;resizeHeight=1;'); bg3.geometry.relative = true; bg3.vertex = true; bg2.insert(bg3); var bg4 = new mxCell('', new mxGeometry(0.5, 0.5, 16, 12), s + 'mail;strokeColor=#fdfdfd;fillColor=#999999;strokeWidth=1.3;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(-8, -6); bg4.vertex = true; bg3.insert(bg4); var bg4 = new mxCell('Password', new mxGeometry(0, 0, 190, 30), s + 'rrect;fillColor=#ffffff;rSize=5;strokeColor=#999999;fontSize=14;fontColor=#dddddd;align=left;spacingLeft=40;whiteSpace=wrap;resizeWidth=1;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(30, 100); bg4.vertex = true; bg1.insert(bg4); var bg5 = new mxCell('', new mxGeometry(0, 0, 30, 30), s + 'leftButton;rSize=5;strokeColor=#999999;fillColor=#fdfdfd;resizeHeight=1;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(0, 0); bg5.vertex = true; bg4.insert(bg5); var bg6 = new mxCell('', new mxGeometry(0.5, 0.5, 16, 16), s + 'password;strokeColor=#999999;strokeWidth=3;'); bg6.geometry.relative = true; bg6.geometry.offset = new mxPoint(-8, -8); bg6.vertex = true; bg5.insert(bg6); var bg7 = new mxCell('Remember me', new mxGeometry(0, 0, 14, 14), s + 'checkbox;rSize=3;strokeColor=#666666;fillColor=#ffffff;labelPosition=right;align=left;spacingLeft=5;fontSize=10;'); bg7.geometry.relative = true; bg7.geometry.offset = new mxPoint(73, 148); bg7.vertex = true; bg1.insert(bg7); var bg8 = new mxCell('Log In', new mxGeometry(0, 1, 190, 30), s + 'rrect;rSize=5;strokeColor=none;fillColor=#58B957;fontColor=#ffffff;fontSize=14;fontStyle=1;whiteSpace=wrap;resizeWidth=1;'); bg8.geometry.relative = true; bg8.geometry.offset = new mxPoint(30, -50); bg8.vertex = true; bg1.insert(bg8); return sb.createVertexTemplateFromCells([bg1], 240, 220, 'Log in'); }), this.addEntry(dt + 'log in', function() { var bg1 = new mxCell('Control Panel', new mxGeometry(0, 0, 240, 260), s + 'rrect;fillColor=#ffffff;align=center;rSize=5;strokeColor=#000000;verticalAlign=top;spacingTop=20;fontSize=14;fontStyle=1;whiteSpace=wrap;'); bg1.vertex = true; var bg10 = new mxCell( '
Incorrect Email or Password
', new mxGeometry(0, 0, 190, 40), s + 'rrect;rSize=5;strokeColor=none;fillColor=#F2DEDF;fontColor=#DB524C;overflow=fill;whiteSpace=wrap;resizeWidth=1;'); bg10.geometry.relative = true; bg10.geometry.offset = new mxPoint(30, 50); bg10.vertex = true; bg1.insert(bg10); var bg2 = new mxCell('john@gmail.com', new mxGeometry(0, 0, 190, 30), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#fdfdfd;fontSize=14;align=left;spacingLeft=40;whiteSpace=wrap;resizeWidth=1;'); bg2.geometry.relative = true; bg2.geometry.offset = new mxPoint(30, 100); bg2.vertex = true; bg1.insert(bg2); var bg3 = new mxCell('', new mxGeometry(0, 0, 30, 30), s + 'leftButton;rSize=5;strokeColor=#999999;fillColor=#ffffff;resizeHeight=1;'); bg3.geometry.relative = true; bg3.vertex = true; bg2.insert(bg3); var bg4 = new mxCell('', new mxGeometry(0.5, 0.5, 16, 12), s + 'mail;strokeColor=#fdfdfd;fillColor=#999999;strokeWidth=1.3;'); bg4.geometry.relative = true; bg4.geometry.offset = new mxPoint(-8, -6); bg4.vertex = true; bg3.insert(bg4); var bg5 = new mxCell('********', new mxGeometry(0, 0, 190, 30), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#fdfdfd;fontSize=14;align=left;spacingLeft=40;whiteSpace=wrap;resizeWidth=1;'); bg5.geometry.relative = true; bg5.geometry.offset = new mxPoint(30, 140); bg5.vertex = true; bg1.insert(bg5); var bg6 = new mxCell('', new mxGeometry(0, 0, 30, 30), s + 'leftButton;rSize=5;strokeColor=#999999;fillColor=#ffffff;resizeHeight=1;'); bg6.geometry.relative = true; bg6.vertex = true; bg5.insert(bg6); var bg7 = new mxCell('', new mxGeometry(0.5, 0.5, 16, 16), s + 'password;strokeColor=#999999;strokeWidth=3;'); bg7.geometry.relative = true; bg7.geometry.offset = new mxPoint(-8, -8); bg7.vertex = true; bg6.insert(bg7); var bg8 = new mxCell('Remember me', new mxGeometry(0, 1, 14, 14), s + 'checkbox;rSize=3;strokeColor=#666666;fillColor=#ffffff;labelPosition=right;align=left;spacingLeft=5;fontSize=10;'); bg8.geometry.relative = true; bg8.geometry.offset = new mxPoint(73, -72); bg8.vertex = true; bg1.insert(bg8); var bg9 = new mxCell('Log In', new mxGeometry(0, 1, 190, 30), s + 'rrect;rSize=5;strokeColor=none;fillColor=#58B957;fontColor=#ffffff;fontSize=14;fontStyle=1;whiteSpace=wrap;resizeWidth=1;'); bg9.geometry.relative = true; bg9.geometry.offset = new mxPoint(30, -50); bg9.vertex = true; bg1.insert(bg9); return sb.createVertexTemplateFromCells([bg1], 240, 260, 'Log in'); }) ]; this.addPalette('bootstrap', mxResources.get('bootstrap'), false, mxUtils.bind(this, function(content) { for (var i = 0; i < fns.length; i++) { content.appendChild(fns[i](content)); } })); }; })();