1(function() 2{ 3 // Adds Bootstrap shapes 4 Sidebar.prototype.addBootstrapPalette = function() 5 { 6 var s = 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.'; 7 var s2 = 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;shape=mxgraph.bootstrap.rect;'; 8 var inh = 'strokeColor=inherit;fillColor=inherit;gradientColor=inherit;fontColor=inherit;'; 9 var gn = 'mxgraph.bootstrap'; 10 var dt = 'bootstrap '; 11 var sb = this; 12 this.setCurrentSearchEntryLibrary('bootstrap'); 13 14 var fns = [ 15 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#B8DCFE;strokeWidth=1;fillColor=#CCE7FE;fontColor=#004583;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;', 16 800, 40, 'A simple primary alert!', 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')), 17 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#D6D8DB;strokeWidth=1;fillColor=#E2E3E5;fontColor=#383D41;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;', 18 800, 40, 'A simple secondary alert!', 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')), 19 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#E0F0D6;fontColor=#59B958;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;', 20 800, 40, 'A simple success alert!', 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')), 21 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#F4C5CB;strokeWidth=1;fillColor=#F8D6DA;fontColor=#711623;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;', 22 800, 40, 'A simple danger alert!', 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')), 23 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#FFECBC;strokeWidth=1;fillColor=#FFF1CF;fontColor=#856110;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;', 24 800, 40, 'A simple warning alert!', 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')), 25 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#BFE6EB;strokeWidth=1;fillColor=#D1EDF1;fontColor=#0E5560;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;', 26 800, 40, 'A simple info alert!', 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')), 27 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#FDFDFE;strokeWidth=1;fillColor=#FEFEFE;fontColor=#818182;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;', 28 800, 40, 'A simple light alert!', 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')), 29 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#C6C8CA;strokeWidth=1;fillColor=#D6D8D9;fontColor=#1B1E21;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;', 30 800, 40, 'A simple dark alert!', 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')), 31 32 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#E0F0D6;fontColor=#59B958;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=20;', 33 800, 210, 34 '<font size="1"><b style="font-size: 18px">Title</b></font><br><br><font style="font-size: 14px"><span style="font-family: "open sans" , "arial" , sans-serif ; text-align: justify">' + 35 '<font style="font-size: 14px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ' + 36 'ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt ' + 37 'in culpa qui officia deserunt mollit anim id est laborum.</font></span><br><br></font><hr style="border: 1px solid rgb(89 , 185 , 88); font-size: 14px"><font style="font-size: 14px"><br>' + 38 '<span style="font-family: "open sans" , "arial" , sans-serif ; text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et ' + 39 'dolore magna aliqua.</span></font>', 40 'Alert', null, null, this.getTagsForStencil(gn, 'alert', dt + 'alert').join(' ')), 41 42 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;fontStyle=1;fontSize=18;', 43 60, 40, 'New', 'Badge', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge').join(' ')), 44 45 this.addEntry(dt + 'alert', function() 46 { 47 var bg = new mxCell( 48 'Notifications', 49 new mxGeometry(0, 0, 130, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#0085FC;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;fontStyle=0;fontSize=14;'); 50 bg.vertex = true; 51 52 var button1 = new mxCell('4', new mxGeometry(1, 0.5, 20, 20), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#ffffff;fontColor=#000000;whiteSpace=wrap;align=center;verticalAlign=middle;fontSize=12;'); 53 button1.geometry.relative = true; 54 button1.geometry.offset = new mxPoint(-30, -10); 55 button1.vertex = true; 56 bg.insert(button1); 57 58 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Badge'); 59 }), 60 61 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#0085FC;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;', 62 60, 20, 'Primary', 'Badge, primary', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge primary').join(' ')), 63 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;', 64 80, 20, 'Secondary', 'Badge, secondary', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge secondary').join(' ')), 65 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#33A64C;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;', 66 65, 20, 'Success', 'Badge, success', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge success').join(' ')), 67 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#DB2843;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;', 68 60, 20, 'Danger', 'Badge, danger', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge danger').join(' ')), 69 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#FFBC26;fontColor=#000000;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;', 70 65, 20, 'Warning', 'Badge, warning', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge warning').join(' ')), 71 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#1CA5B8;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;', 72 35, 20, 'Info', 'Badge, info', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge info').join(' ')), 73 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#F8F9FA;fontColor=#000000;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;', 74 45, 20, 'Light', 'Badge, light', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge light').join(' ')), 75 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#343A40;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;', 76 40, 20, 'Dark', 'Badge, dark', null, null, this.getTagsForStencil(gn, 'badge', dt + 'badge dark').join(' ')), 77 78 this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#0085FC;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;', 79 70, 20, 'Primary', 'Pill badge, primary', null, null, this.getTagsForStencil(gn, 'badge', dt + 'pill badge primary').join(' ')), 80 this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;', 81 90, 20, 'Secondary', 'Pill badge, secondary', null, null, this.getTagsForStencil(gn, 'badge', dt + 'pill badge secondary').join(' ')), 82 this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#33A64C;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;', 83 75, 20, 'Success', 'Pill badge, success', null, null, this.getTagsForStencil(gn, 'badge', dt + 'pill badge success').join(' ')), 84 this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#DB2843;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;', 85 65, 20, 'Danger', 'Pill badge, danger', null, null, this.getTagsForStencil(gn, 'badge', dt + 'pill badge danger').join(' ')), 86 this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#FFBC26;fontColor=#000000;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;', 87 75, 20, 'Warning', 'Pill badge, warning', null, null, this.getTagsForStencil(gn, 'badge', dt + 'pill badge warning').join(' ')), 88 this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#1CA5B8;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;', 89 45, 20, 'Info', 'Pill badge, info', null, null, this.getTagsForStencil(gn, 'badge', dt + 'pill badge info').join(' ')), 90 this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#F8F9FA;fontColor=#000000;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;', 91 55, 20, 'Light', 'Pill badge, light', null, null, this.getTagsForStencil(gn, 'badge', dt + 'pill badge light').join(' ')), 92 this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#343A40;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;', 93 50, 20, 'Dark', 'Pill badge, dark', null, null, this.getTagsForStencil(gn, 'badge', dt + 'pill badge dark').join(' ')), 94 95 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#E9ECEF;fontColor=#6C757D;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=14;spacing=10;', 96 800, 40, 'Home', 'Breadcrumb, one level', null, null, this.getTagsForStencil(gn, 'breadcrumb', dt + 'breadcrumb one level').join(' ')), 97 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#E9ECEF;fontColor=#6C757D;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=14;spacing=10;', 98 800, 40, '<font color="#0085fc">Home</font> / Library', 'Breadcrumb, two level', null, null, this.getTagsForStencil(gn, 'breadcrumb', dt + 'breadcrumb two level').join(' ')), 99 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#E9ECEF;fontColor=#6C757D;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=14;spacing=10;', 100 800, 40, '<font color="#0085fc">Home</font> / <font color="#0085fc">Library</font> / Data', 'Breadcrumb, three level', null, null, this.getTagsForStencil(gn, 'breadcrumb', dt + 'breadcrumb three level').join(' ')), 101 102 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#0085FC;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 103 80, 40, 'Primary', 'Button, primary', null, null, this.getTagsForStencil(gn, 'button', dt + 'button primary').join(' ')), 104 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 105 100, 40, 'Secondary', 'Button, secondary', null, null, this.getTagsForStencil(gn, 'button', dt + 'button secondary').join(' ')), 106 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#33A64C;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 107 90, 40, 'Success', 'Button, success', null, null, this.getTagsForStencil(gn, 'button', dt + 'button success').join(' ')), 108 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#DB2843;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 109 80, 40, 'Danger', 'Button, danger', null, null, this.getTagsForStencil(gn, 'button', dt + 'button danger').join(' ')), 110 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#FFBC26;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 111 90, 40, 'Warning', 'Button, warning', null, null, this.getTagsForStencil(gn, 'button', dt + 'button warning').join(' ')), 112 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#1CA5B8;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 113 50, 40, 'Info', 'Button, info', null, null, this.getTagsForStencil(gn, 'button', dt + 'button info').join(' ')), 114 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#F8F9FA;fontColor=#000000;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 115 60, 40, 'Light', 'Button, light', null, null, this.getTagsForStencil(gn, 'button', dt + 'button light').join(' ')), 116 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#343A40;fontColor=#ffffff;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 117 60, 40, 'Dark', 'Button, dark', null, null, this.getTagsForStencil(gn, 'button', dt + 'button dark').join(' ')), 118 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=none;fontColor=#0085FC;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 119 60, 40, 'Link', 'Button, link', null, null, this.getTagsForStencil(gn, 'button', dt + 'button link').join(' ')), 120 121 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#0085FC;strokeWidth=1;fillColor=none;fontColor=#0085FC;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 122 80, 40, 'Primary', 'Button, primary', null, null, this.getTagsForStencil(gn, 'button', dt + 'button primary').join(' ')), 123 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#6C767D;strokeWidth=1;fillColor=none;fontColor=#6C767D;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 124 100, 40, 'Secondary', 'Button, secondary', null, null, this.getTagsForStencil(gn, 'button', dt + 'button secondary').join(' ')), 125 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#33A64C;strokeWidth=1;fillColor=none;fontColor=#33A64C;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 126 90, 40, 'Success', 'Button, success', null, null, this.getTagsForStencil(gn, 'button', dt + 'button success').join(' ')), 127 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#DB2843;strokeWidth=1;fillColor=none;fontColor=#DB2843;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 128 80, 40, 'Danger', 'Button, danger', null, null, this.getTagsForStencil(gn, 'button', dt + 'button danger').join(' ')), 129 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#FFBC26;strokeWidth=1;fillColor=none;fontColor=#FFBC26;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 130 90, 40, 'Warning', 'Button, warning', null, null, this.getTagsForStencil(gn, 'button', dt + 'button warning').join(' ')), 131 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#1CA5B8;strokeWidth=1;fillColor=none;fontColor=#1CA5B8;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 132 50, 40, 'Info', 'Button, info', null, null, this.getTagsForStencil(gn, 'button', dt + 'button info').join(' ')), 133 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#F8F9FA;strokeWidth=1;fillColor=none;fontColor=#F8F9FA;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 134 60, 40, 'Light', 'Button, light', null, null, this.getTagsForStencil(gn, 'button', dt + 'button light').join(' ')), 135 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#343A40;strokeWidth=1;fillColor=none;fontColor=#343A40;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 136 60, 40, 'Dark', 'Button, dark', null, null, this.getTagsForStencil(gn, 'button', dt + 'button dark').join(' ')), 137 138 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#0085FC;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 139 800, 40, 'Block level button', 'Block level button', null, null, this.getTagsForStencil(gn, 'button', dt + 'button block level').join(' ')), 140 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;', 141 800, 40, 'Block level button', 'Block level button', null, null, this.getTagsForStencil(gn, 'button', dt + 'button block level').join(' ')), 142 143 this.addEntry(dt + 'button group horizontal', function() 144 { 145 var bg = new mxCell('', new mxGeometry(0, 0, 180, 30), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;sketch=0;'); 146 bg.vertex = true; 147 var button1 = new mxCell('Left', new mxGeometry(0, 0, 60, 30), inh + s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 148 button1.geometry.relative = true; 149 button1.vertex = true; 150 bg.insert(button1); 151 var button2 = new mxCell('Middle', new mxGeometry(0, 0, 60, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 152 button2.geometry.relative = true; 153 button2.geometry.offset = new mxPoint(60, 0); 154 button2.vertex = true; 155 bg.insert(button2); 156 var button3 = new mxCell('Right', new mxGeometry(1, 0, 60, 30), inh + s + 'rightButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 157 button3.geometry.relative = true; 158 button3.geometry.offset = new mxPoint(-60, 0); 159 button3.vertex = true; 160 bg.insert(button3); 161 162 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button group, horizontal'); 163 }), 164 165 this.addEntry(dt + 'button group horizontal', function() 166 { 167 var bg1 = new mxCell('', new mxGeometry(0, 0, 120, 30), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;sketch=0;'); 168 bg1.vertex = true; 169 var button1 = new mxCell('1', new mxGeometry(0, 0, 30, 30), inh + s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 170 button1.geometry.relative = true; 171 button1.vertex = true; 172 bg1.insert(button1); 173 var button2 = new mxCell('2', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 174 button2.geometry.relative = true; 175 button2.geometry.offset = new mxPoint(30, 0); 176 button2.vertex = true; 177 bg1.insert(button2); 178 var button3 = new mxCell('3', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 179 button3.geometry.relative = true; 180 button3.geometry.offset = new mxPoint(60, 0); 181 button3.vertex = true; 182 bg1.insert(button3); 183 var button4 = new mxCell('4', new mxGeometry(1, 0, 30, 30), inh + s + 'rightButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 184 button4.geometry.relative = true; 185 button4.geometry.offset = new mxPoint(-30, 0); 186 button4.vertex = true; 187 bg1.insert(button4); 188 189 var bg2 = new mxCell('', new mxGeometry(130, 0, 90, 30), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;sketch=0;'); 190 bg2.vertex = true; 191 var button1 = new mxCell('5', new mxGeometry(0, 0, 30, 30), inh + s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 192 button1.geometry.relative = true; 193 button1.vertex = true; 194 bg2.insert(button1); 195 var button2 = new mxCell('6', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 196 button2.geometry.relative = true; 197 button2.geometry.offset = new mxPoint(30, 0); 198 button2.vertex = true; 199 bg2.insert(button2); 200 var button3 = new mxCell('7', new mxGeometry(1, 0, 30, 30), inh + s + 'rightButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 201 button3.geometry.relative = true; 202 button3.geometry.offset = new mxPoint(-30, 0); 203 button3.vertex = true; 204 bg2.insert(button3); 205 206 var bg3 = new mxCell('8', new mxGeometry(230, 0, 30, 30), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;sketch=0;'); 207 bg3.vertex = true; 208 209 return sb.createVertexTemplateFromCells([bg1, bg2, bg3], 260, 30, 'Button group, horizontal'); 210 }), 211 212 this.addEntry(dt + 'button group horizontal', function() 213 { 214 var bg1 = new mxCell('', new mxGeometry(0, 0, 120, 30), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;sketch=0;'); 215 bg1.vertex = true; 216 var button1 = new mxCell('1', new mxGeometry(0, 0, 30, 30), inh + s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 217 button1.geometry.relative = true; 218 button1.vertex = true; 219 bg1.insert(button1); 220 var button2 = new mxCell('2', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 221 button2.geometry.relative = true; 222 button2.geometry.offset = new mxPoint(30, 0); 223 button2.vertex = true; 224 bg1.insert(button2); 225 var button3 = new mxCell('3', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 226 button3.geometry.relative = true; 227 button3.geometry.offset = new mxPoint(60, 0); 228 button3.vertex = true; 229 bg1.insert(button3); 230 var button4 = new mxCell('4', new mxGeometry(1, 0, 30, 30), inh + s + 'rightButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 231 button4.geometry.relative = true; 232 button4.geometry.offset = new mxPoint(-30, 0); 233 button4.vertex = true; 234 bg1.insert(button4); 235 236 var bg2 = new mxCell('Input Group Example', new mxGeometry(130, 0, 200, 30), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacingLeft=40;sketch=0;'); 237 bg2.vertex = true; 238 var button1 = new mxCell('@', new mxGeometry(0, 0, 30, 30), s + 'leftButton;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 239 button1.geometry.relative = true; 240 button1.vertex = true; 241 bg2.insert(button1); 242 243 return sb.createVertexTemplateFromCells([bg1, bg2], 230, 30, 'Button group, horizontal'); 244 }), 245 246 this.addEntry(dt + 'button group horizontal', function() 247 { 248 var bg1 = new mxCell('', new mxGeometry(0, 0, 150, 30), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;sketch=0;'); 249 bg1.vertex = true; 250 var button1 = new mxCell('1', new mxGeometry(0, 0, 30, 30), inh + s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 251 button1.geometry.relative = true; 252 button1.vertex = true; 253 bg1.insert(button1); 254 var button2 = new mxCell('2', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;sketch=0;'); 255 button2.geometry.relative = true; 256 button2.geometry.offset = new mxPoint(30, 0); 257 button2.vertex = true; 258 bg1.insert(button2); 259 var button4 = new mxCell('Dropdown', new mxGeometry(1, 0, 90, 30), inh + s + 'rightButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;align=left;spacing=10;sketch=0;'); 260 button4.geometry.relative = true; 261 button4.geometry.offset = new mxPoint(-90, 0); 262 button4.vertex = true; 263 bg1.insert(button4); 264 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#ffffff;strokeColor=none;perimeter=none;sketch=0;'); 265 marker1.geometry.relative = true; 266 marker1.geometry.offset = new mxPoint(-17, -2.5); 267 marker1.vertex = true; 268 button4.insert(marker1); 269 270 return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Button group, horizontal'); 271 }), 272 273 this.addEntry(dt + 'button group vertical', function() 274 { 275 var bg = new mxCell('', new mxGeometry(0, 0, 60, 180), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;sketch=0;'); 276 bg.vertex = true; 277 var button1 = new mxCell('Button', new mxGeometry(0, 0, 60, 30), inh + s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;sketch=0;'); 278 button1.geometry.relative = true; 279 button1.vertex = true; 280 bg.insert(button1); 281 var button2 = new mxCell('Button', new mxGeometry(0, 0, 60, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;sketch=0;'); 282 button2.geometry.relative = true; 283 button2.geometry.offset = new mxPoint(0, 30); 284 button2.vertex = true; 285 bg.insert(button2); 286 var button3 = new mxCell('Button', new mxGeometry(0, 0, 60, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;sketch=0;'); 287 button3.geometry.relative = true; 288 button3.geometry.offset = new mxPoint(0, 60); 289 button3.vertex = true; 290 bg.insert(button3); 291 var button4 = new mxCell('Button', new mxGeometry(0, 0, 60, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;sketch=0;'); 292 button4.geometry.relative = true; 293 button4.geometry.offset = new mxPoint(0, 90); 294 button4.vertex = true; 295 bg.insert(button4); 296 var button5 = new mxCell('Button', new mxGeometry(0, 0, 60, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;sketch=0;'); 297 button5.geometry.relative = true; 298 button5.geometry.offset = new mxPoint(0, 120); 299 button5.vertex = true; 300 bg.insert(button5); 301 var button6 = new mxCell('Button', new mxGeometry(0, 1, 60, 30), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;sketch=0;'); 302 button6.geometry.relative = true; 303 button6.geometry.offset = new mxPoint(0, -30); 304 button6.vertex = true; 305 bg.insert(button6); 306 307 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button group, vertical'); 308 }), 309 310 this.addEntry(dt + 'button group vertical', function() 311 { 312 var bg = new mxCell('', new mxGeometry(0, 0, 90, 180), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;sketch=0;'); 313 bg.vertex = true; 314 var button1 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;sketch=0;'); 315 button1.geometry.relative = true; 316 button1.vertex = true; 317 bg.insert(button1); 318 var button2 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;sketch=0;'); 319 button2.geometry.relative = true; 320 button2.geometry.offset = new mxPoint(0, 30); 321 button2.vertex = true; 322 bg.insert(button2); 323 var button3 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;sketch=0;'); 324 button3.geometry.relative = true; 325 button3.geometry.offset = new mxPoint(0, 60); 326 button3.vertex = true; 327 bg.insert(button3); 328 var button4 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;sketch=0;'); 329 button4.geometry.relative = true; 330 button4.geometry.offset = new mxPoint(0, 90); 331 button4.vertex = true; 332 bg.insert(button4); 333 var button5 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;sketch=0;'); 334 button5.geometry.relative = true; 335 button5.geometry.offset = new mxPoint(0, 120); 336 button5.vertex = true; 337 bg.insert(button5); 338 var button6 = new mxCell('Button', new mxGeometry(0, 1, 90, 30), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;sketch=0;'); 339 button6.geometry.relative = true; 340 button6.geometry.offset = new mxPoint(0, -30); 341 button6.vertex = true; 342 bg.insert(button6); 343 344 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button group, vertical'); 345 }), 346 347 this.addEntry(dt + 'button group vertical', function() 348 { 349 var bg = new mxCell('', new mxGeometry(0, 0, 90, 180), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;sketch=0;'); 350 bg.vertex = true; 351 var button1 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;sketch=0;'); 352 button1.geometry.relative = true; 353 button1.vertex = true; 354 bg.insert(button1); 355 var button2 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;sketch=0;'); 356 button2.geometry.relative = true; 357 button2.geometry.offset = new mxPoint(0, 30); 358 button2.vertex = true; 359 bg.insert(button2); 360 var button3 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;sketch=0;'); 361 button3.geometry.relative = true; 362 button3.geometry.offset = new mxPoint(0, 60); 363 button3.vertex = true; 364 bg.insert(button3); 365 var button4 = new mxCell('Button', new mxGeometry(0, 0, 90, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;sketch=0;'); 366 button4.geometry.relative = true; 367 button4.geometry.offset = new mxPoint(0, 90); 368 button4.vertex = true; 369 bg.insert(button4); 370 var button5 = new mxCell('Dropdown', new mxGeometry(0, 0, 90, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;sketch=0;'); 371 button5.geometry.relative = true; 372 button5.geometry.offset = new mxPoint(0, 120); 373 button5.vertex = true; 374 bg.insert(button5); 375 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#ffffff;strokeColor=none;perimeter=none;sketch=0;'); 376 marker1.geometry.relative = true; 377 marker1.geometry.offset = new mxPoint(-17, -2.5); 378 marker1.vertex = true; 379 button5.insert(marker1); 380 var button6 = new mxCell('Dropdown', new mxGeometry(0, 1, 90, 30), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;align=left;spacing=10;sketch=0;'); 381 button6.geometry.relative = true; 382 button6.geometry.offset = new mxPoint(0, -30); 383 button6.vertex = true; 384 bg.insert(button6); 385 var marker2 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#ffffff;strokeColor=none;perimeter=none;sketch=0;'); 386 marker2.geometry.relative = true; 387 marker2.geometry.offset = new mxPoint(-17, -2.5); 388 marker2.vertex = true; 389 button6.insert(marker2); 390 391 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button group, vertical'); 392 }), 393 394 this.addEntry(dt + 'card', function() 395 { 396 var bg = new mxCell( 397 '<b><font style="font-size: 20px">Card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 398 new mxGeometry(0, 0, 250, 350), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=bottom;align=left;spacing=20;spacingBottom=50;fontSize=14;'); 399 bg.vertex = true; 400 var button1 = new mxCell('Image cap', new mxGeometry(0, 0, 250, 180), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 401 button1.geometry.relative = true; 402 button1.vertex = true; 403 bg.insert(button1); 404 var button2 = new mxCell('Go somewhere', new mxGeometry(0, 1, 120, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;resizeWidth=1;fontSize=14;'); 405 button2.geometry.relative = true; 406 button2.geometry.offset = new mxPoint(20, -60); 407 button2.vertex = true; 408 bg.insert(button2); 409 410 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card'); 411 }), 412 413 this.addEntry(dt + 'card', function() 414 { 415 var bg = new mxCell( 416 '<b><font style="font-size: 20px">Card title</font></b><font color="#6c767d"><b><font style="font-size: 14px"><br style="font-size: 10px">Card subtitle<br></font></b></font><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 417 new mxGeometry(0, 0, 250, 190), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;fontSize=14;'); 418 bg.vertex = true; 419 var button1 = new mxCell('Card link', new mxGeometry(0, 1, 80, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=none;strokeColor=none;fontColor=#0085FC;resizeWidth=1;fontSize=14;align=center;'); 420 button1.geometry.relative = true; 421 button1.geometry.offset = new mxPoint(10, -50); 422 button1.vertex = true; 423 bg.insert(button1); 424 var button2 = new mxCell('Another link', new mxGeometry(0, 1, 100, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=none;strokeColor=none;fontColor=#0085FC;resizeWidth=1;fontSize=14;align=center;'); 425 button2.geometry.relative = true; 426 button2.geometry.offset = new mxPoint(100, -50); 427 button2.vertex = true; 428 bg.insert(button2); 429 430 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card'); 431 }), 432 433 this.addEntry(dt + 'image', function() 434 { 435 var bg = new mxCell( 436 'Some quick example text to build on the card title and make up the bulk of the card\'s content.', 437 new mxGeometry(0, 0, 250, 260), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=bottom;align=left;spacing=20;fontSize=14;'); 438 bg.vertex = true; 439 var button1 = new mxCell('Image cap', new mxGeometry(0, 0, 250, 180), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 440 button1.geometry.relative = true; 441 button1.vertex = true; 442 bg.insert(button1); 443 444 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Image'); 445 }), 446 447 this.addEntry(dt + 'list group', function() 448 { 449 var bg = new mxCell('', new mxGeometry(0, 0, 200, 90), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;'); 450 bg.vertex = true; 451 var button1 = new mxCell('Cras justo odio', new mxGeometry(0, 0, 200, 30), inh + s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 452 button1.geometry.relative = true; 453 button1.vertex = true; 454 bg.insert(button1); 455 var button2 = new mxCell('Dapibus ac facilisis in', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 456 button2.geometry.relative = true; 457 button2.geometry.offset = new mxPoint(0, 30); 458 button2.vertex = true; 459 bg.insert(button2); 460 var button3 = new mxCell('Vestibulum at eros', new mxGeometry(0, 1, 200, 30), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;align=left;spacing=10;'); 461 button3.geometry.relative = true; 462 button3.geometry.offset = new mxPoint(0, -30); 463 button3.vertex = true; 464 bg.insert(button3); 465 466 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'List group'); 467 }), 468 469 this.addEntry(dt + 'list group', function() 470 { 471 var bg = new mxCell('', new mxGeometry(0, 0, 200, 120), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;'); 472 bg.vertex = true; 473 var button1 = new mxCell('Featured', new mxGeometry(0, 0, 200, 30), s + 'topButton;strokeColor=inherit;fillColor=#F7F7F7;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 474 button1.geometry.relative = true; 475 button1.vertex = true; 476 bg.insert(button1); 477 var button2 = new mxCell('Cras justo odio', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 478 button2.geometry.relative = true; 479 button2.geometry.offset = new mxPoint(0, 30); 480 button2.vertex = true; 481 bg.insert(button2); 482 var button3 = new mxCell('Dapibus ac facilisis in', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 483 button3.geometry.relative = true; 484 button3.geometry.offset = new mxPoint(0, 60); 485 button3.vertex = true; 486 bg.insert(button3); 487 var button4 = new mxCell('Vestibulum at eros', new mxGeometry(0, 1, 200, 30), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;align=left;spacing=10;'); 488 button4.geometry.relative = true; 489 button4.geometry.offset = new mxPoint(0, -30); 490 button4.vertex = true; 491 bg.insert(button4); 492 493 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'List group'); 494 }), 495 496 this.addEntry(dt + 'card', function() 497 { 498 var bg = new mxCell('', new mxGeometry(0, 0, 250, 450), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=bottom;align=left;spacing=20;spacingBottom=130;fontSize=14;'); 499 bg.vertex = true; 500 var item1 = new mxCell('Image cap', new mxGeometry(0, 0, 250, 180), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 501 item1.geometry.relative = true; 502 item1.vertex = true; 503 bg.insert(item1); 504 var item2 = new mxCell('<b><font style="font-size: 20px">Card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 505 new mxGeometry(0, 0, 250, 120), 'perimeter=none;html=1;whiteSpace=wrap;fillColor=none;strokeColor=none;resizeWidth=1;verticalAlign=top;align=left;spacing=20;spacingTop=-10;fontSize=14;'); 506 item2.geometry.relative = true; 507 item2.geometry.offset = new mxPoint(0, 180); 508 item2.vertex = true; 509 bg.insert(item2); 510 var item3 = new mxCell('Cras justo odio', new mxGeometry(0, 0, 250, 30), 'html=1;shadow=0;dashed=0;strokeColor=none;fontSize=14;fillColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 511 item3.geometry.relative = true; 512 item3.geometry.offset = new mxPoint(0, 300); 513 item3.vertex = true; 514 bg.insert(item3); 515 var item4 = new mxCell('Dapibus ac facilisis in', new mxGeometry(0, 0, 250, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;fontSize=14;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 516 item4.geometry.relative = true; 517 item4.geometry.offset = new mxPoint(0, 330); 518 item4.vertex = true; 519 bg.insert(item4); 520 var item5 = new mxCell('Vestibulum at eros', new mxGeometry(0, 0, 250, 30), inh + s + 'bottomButton;rSize=5;perimeter=none;fontSize=14;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;align=left;spacing=10;'); 521 item5.geometry.relative = true; 522 item5.geometry.offset = new mxPoint(0, 360); 523 item5.vertex = true; 524 bg.insert(item5); 525 526 var button1 = new mxCell('Card link', new mxGeometry(0, 1, 80, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=none;strokeColor=none;fontColor=#0085FC;resizeWidth=1;fontSize=14;align=center;'); 527 button1.geometry.relative = true; 528 button1.geometry.offset = new mxPoint(10, -50); 529 button1.vertex = true; 530 bg.insert(button1); 531 var button2 = new mxCell('Another link', new mxGeometry(0, 1, 100, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=none;strokeColor=none;fontColor=#0085FC;resizeWidth=1;fontSize=14;align=center;'); 532 button2.geometry.relative = true; 533 button2.geometry.offset = new mxPoint(100, -50); 534 button2.vertex = true; 535 bg.insert(button2); 536 537 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card'); 538 }), 539 540 this.addEntry(dt + 'card', function() 541 { 542 var bg = new mxCell('', new mxGeometry(0, 0, 800, 190), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;'); 543 bg.vertex = true; 544 var item1 = new mxCell('Featured', new mxGeometry(0, 0, 800, 40), s + 'topButton;strokeColor=inherit;fillColor=#F7F7F7;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=20;fontSize=14;'); 545 item1.geometry.relative = true; 546 item1.vertex = true; 547 bg.insert(item1); 548 var item2 = new mxCell('<b><font style="font-size: 20px">Special title treatment</font></b><br style="font-size: 14px"><br style="font-size: 14px">With supporting text below as a natural lead-in to additional content.', 549 new mxGeometry(0, 0, 800, 120), 'perimeter=none;html=1;whiteSpace=wrap;fillColor=none;strokeColor=none;resizeWidth=1;verticalAlign=top;align=left;spacing=20;spacingTop=-10;fontSize=14;'); 550 item2.geometry.relative = true; 551 item2.geometry.offset = new mxPoint(0, 40); 552 item2.vertex = true; 553 bg.insert(item2); 554 var button1 = new mxCell('Go somewhere', new mxGeometry(0, 1, 120, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;resizeWidth=1;fontSize=14;'); 555 button1.geometry.relative = true; 556 button1.geometry.offset = new mxPoint(20, -60); 557 button1.vertex = true; 558 bg.insert(button1); 559 560 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card with header and footer'); 561 }), 562 563 this.addEntry(dt + 'card', function() 564 { 565 var bg = new mxCell('', new mxGeometry(0, 0, 800, 120), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;'); 566 bg.vertex = true; 567 var item1 = new mxCell('Quote', new mxGeometry(0, 0, 800, 40), s + 'topButton;strokeColor=inherit;fillColor=#F7F7F7;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=20;fontSize=14;'); 568 item1.geometry.relative = true; 569 item1.vertex = true; 570 bg.insert(item1); 571 var item2 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<font style="font-size: 14px" color="#999999"><br><br>- <b>Someone famous</b> in <i>Source Title</i></font>', 572 new mxGeometry(0, 0, 800, 80), 'perimeter=none;html=1;whiteSpace=wrap;fillColor=none;strokeColor=none;resizeWidth=1;verticalAlign=top;align=left;spacing=20;spacingTop=-10;fontSize=14;'); 573 item2.geometry.relative = true; 574 item2.geometry.offset = new mxPoint(0, 40); 575 item2.vertex = true; 576 bg.insert(item2); 577 578 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card with header and footer'); 579 }), 580 581 this.addEntry(dt + 'card', function() 582 { 583 var bg = new mxCell('', new mxGeometry(0, 0, 800, 230), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;'); 584 bg.vertex = true; 585 var item1 = new mxCell('Featured', new mxGeometry(0, 0, 800, 40), s + 'topButton;strokeColor=inherit;fillColor=#F7F7F7;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;'); 586 item1.geometry.relative = true; 587 item1.vertex = true; 588 bg.insert(item1); 589 var item2 = new mxCell('<b><font style="font-size: 20px">Special title treatment</font></b><br style="font-size: 14px"><br style="font-size: 14px">With supporting text below as a natural lead-in to additional content.', 590 new mxGeometry(0, 0, 800, 120), 'perimeter=none;html=1;whiteSpace=wrap;fillColor=none;strokeColor=none;resizeWidth=1;verticalAlign=top;align=center;spacing=20;spacingTop=-10;fontSize=14;'); 591 item2.geometry.relative = true; 592 item2.geometry.offset = new mxPoint(0, 40); 593 item2.vertex = true; 594 bg.insert(item2); 595 var button1 = new mxCell('Go somewhere', new mxGeometry(0.5, 1, 120, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;align=center;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;resizeWidth=1;fontSize=14;'); 596 button1.geometry.relative = true; 597 button1.geometry.offset = new mxPoint(-60, -100); 598 button1.vertex = true; 599 bg.insert(button1); 600 var item3 = new mxCell('2 days ago', new mxGeometry(0, 1, 800, 40), s + 'bottomButton;strokeColor=inherit;fillColor=#F7F7F7;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#818181;'); 601 item3.geometry.relative = true; 602 item3.geometry.offset = new mxPoint(0, -40); 603 item3.vertex = true; 604 bg.insert(item3); 605 606 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card with header and footer'); 607 }), 608 609 this.addEntry(dt + 'card', function() 610 { 611 var bg1 = new mxCell('<b><font style="font-size: 20px">Special title treatment</font></b><br style="font-size: 14px"><br style="font-size: 14px">With supporting text below as a natural lead-in to additional content.', 612 new mxGeometry(0, 0, 380, 170), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;align=left;verticalAlign=top;spacing=20;fontSize=14;'); 613 bg1.vertex = true; 614 var button1 = new mxCell('Go somewhere', new mxGeometry(0, 1, 120, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;resizeWidth=1;fontSize=14;'); 615 button1.geometry.relative = true; 616 button1.geometry.offset = new mxPoint(20, -60); 617 button1.vertex = true; 618 bg1.insert(button1); 619 var bg2 = new mxCell('<b><font style="font-size: 20px">Special title treatment</font></b><br style="font-size: 14px"><br style="font-size: 14px">With supporting text below as a natural lead-in to additional content.', 620 new mxGeometry(420, 0, 380, 170), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;align=left;verticalAlign=top;spacing=20;fontSize=14;'); 621 bg2.vertex = true; 622 var button2 = new mxCell('Go somewhere', new mxGeometry(0, 1, 120, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;resizeWidth=1;fontSize=14;'); 623 button2.geometry.relative = true; 624 button2.geometry.offset = new mxPoint(20, -60); 625 button2.vertex = true; 626 bg2.insert(button2); 627 628 return sb.createVertexTemplateFromCells([bg1, bg2], 800, 190, 'Two cards'); 629 }), 630 631 this.addEntry(dt + 'card', function() 632 { 633 var bg = new mxCell('', new mxGeometry(0, 0, 800, 200), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;'); 634 bg.vertex = true; 635 var item1 = new mxCell('', new mxGeometry(0, 0, 800, 50), s + 'topButton;strokeColor=inherit;fillColor=#F7F7F7;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;'); 636 item1.geometry.relative = true; 637 item1.vertex = true; 638 bg.insert(item1); 639 var item2 = new mxCell('Active', new mxGeometry(0, 0, 80, 40), s + 'tabTop;strokeColor=#DFDFDF;fillColor=#ffffff;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#4B5259;'); 640 item2.geometry.relative = true; 641 item2.geometry.offset = new mxPoint(10, 10); 642 item2.vertex = true; 643 bg.insert(item2); 644 var item3 = new mxCell('Link', new mxGeometry(0, 0, 50, 40), 'strokeColor=none;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#0085FC;'); 645 item3.geometry.relative = true; 646 item3.geometry.offset = new mxPoint(95, 10); 647 item3.vertex = true; 648 bg.insert(item3); 649 var item4 = new mxCell('Disabled', new mxGeometry(0, 0, 60, 40), 'strokeColor=none;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#0085FC;fontColor=#4B5259;'); 650 item4.geometry.relative = true; 651 item4.geometry.offset = new mxPoint(150, 10); 652 item4.vertex = true; 653 bg.insert(item4); 654 var item5 = new mxCell('<b><font style="font-size: 20px">Special title treatment</font></b><br style="font-size: 14px"><br style="font-size: 14px">With supporting text below as a natural lead-in to additional content.', 655 new mxGeometry(0, 0, 800, 120), 'perimeter=none;html=1;whiteSpace=wrap;fillColor=none;strokeColor=none;resizeWidth=1;verticalAlign=top;align=center;spacing=20;spacingTop=-10;fontSize=14;fontColor=#212529'); 656 item5.geometry.relative = true; 657 item5.geometry.offset = new mxPoint(0, 50); 658 item5.vertex = true; 659 bg.insert(item5); 660 var button1 = new mxCell('Go somewhere', new mxGeometry(0.5, 1, 120, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;align=center;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;resizeWidth=1;fontSize=14;'); 661 button1.geometry.relative = true; 662 button1.geometry.offset = new mxPoint(-60, -60); 663 button1.vertex = true; 664 bg.insert(button1); 665 666 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card navigation'); 667 }), 668 669 this.addEntry(dt + 'card', function() 670 { 671 var bg = new mxCell('', new mxGeometry(0, 0, 800, 210), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;'); 672 bg.vertex = true; 673 var item1 = new mxCell('', new mxGeometry(0, 0, 800, 60), s + 'topButton;strokeColor=inherit;fillColor=#F7F7F7;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;'); 674 item1.geometry.relative = true; 675 item1.vertex = true; 676 bg.insert(item1); 677 var item2 = new mxCell('Active', new mxGeometry(0, 0, 80, 40), s + 'rrect;arcSize=5;strokeColor=none;fillColor=#0085FC;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#ffffff;'); 678 item2.geometry.relative = true; 679 item2.geometry.offset = new mxPoint(10, 10); 680 item2.vertex = true; 681 bg.insert(item2); 682 var item3 = new mxCell('Link', new mxGeometry(0, 0, 50, 40), 'strokeColor=none;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#0085FC;'); 683 item3.geometry.relative = true; 684 item3.geometry.offset = new mxPoint(95, 10); 685 item3.vertex = true; 686 bg.insert(item3); 687 var item4 = new mxCell('Disabled', new mxGeometry(0, 0, 60, 40), 'strokeColor=none;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#0085FC;fontColor=#4B5259;'); 688 item4.geometry.relative = true; 689 item4.geometry.offset = new mxPoint(150, 10); 690 item4.vertex = true; 691 bg.insert(item4); 692 var item5 = new mxCell('<b><font style="font-size: 20px">Special title treatment</font></b><br style="font-size: 14px"><br style="font-size: 14px">With supporting text below as a natural lead-in to additional content.', 693 new mxGeometry(0, 0, 800, 120), 'perimeter=none;html=1;whiteSpace=wrap;fillColor=none;strokeColor=none;resizeWidth=1;verticalAlign=top;align=center;spacing=20;spacingTop=-10;fontSize=14;fontColor=#212529'); 694 item5.geometry.relative = true; 695 item5.geometry.offset = new mxPoint(0, 60); 696 item5.vertex = true; 697 bg.insert(item5); 698 var button1 = new mxCell('Go somewhere', new mxGeometry(0.5, 1, 120, 40), s + 'rrect;rSize=5;perimeter=none;whiteSpace=wrap;align=center;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;resizeWidth=1;fontSize=14;'); 699 button1.geometry.relative = true; 700 button1.geometry.offset = new mxPoint(-60, -60); 701 button1.vertex = true; 702 bg.insert(button1); 703 704 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card navigation'); 705 }), 706 707 this.addEntry(dt + 'card', function() 708 { 709 var bg = new mxCell( 710 '<b><font style="font-size: 20px">Card title</font></b><br><br>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<br><br><font style="font-size: 12px" color="#999999">Last udated 3 mind ago</font>', 711 new mxGeometry(0, 0, 800, 310), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=bottom;align=left;spacing=20;fontSize=14;'); 712 bg.vertex = true; 713 var button1 = new mxCell('Image cap', new mxGeometry(0, 0, 800, 180), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 714 button1.geometry.relative = true; 715 button1.vertex = true; 716 bg.insert(button1); 717 718 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card'); 719 }), 720 721 this.addEntry(dt + 'card', function() 722 { 723 var bg = new mxCell( 724 '<b><font style="font-size: 20px">Card title</font></b><br><br>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<br><br><font style="font-size: 12px" color="#999999">Last udated 3 mind ago</font>', 725 new mxGeometry(0, 0, 800, 310), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;fontSize=14;'); 726 bg.vertex = true; 727 var button1 = new mxCell('Image cap', new mxGeometry(0, 1, 800, 180), s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 728 button1.geometry.relative = true; 729 button1.geometry.offset = new mxPoint(0, -180); 730 button1.vertex = true; 731 bg.insert(button1); 732 733 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card'); 734 }), 735 736 this.addEntry(dt + 'card', function() 737 { 738 var bg = new mxCell( 739 'Card Image', 740 new mxGeometry(0, 0, 800, 280), s + 'rrect;rSize=5;strokeColor=#2D3338;html=1;whiteSpace=wrap;fillColor=#868E96;fontColor=#ffffff;verticalAlign=middle;align=center;spacing=20;fontSize=60;'); 741 bg.vertex = true; 742 var button1 = new mxCell('<b><font style="font-size: 20px">Card title</font></b><br><br>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<br><br>Last updated 3 mins ago', 743 new mxGeometry(0, 0, 800, 120), 'fillColor=none;strokeColor=none;fontColor=#ffffff;html=1;verticalAlign=top;align=left;spacing=20;fontSize=14;'); 744 button1.geometry.relative = true; 745 button1.vertex = true; 746 bg.insert(button1); 747 748 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card'); 749 }), 750 751 this.addEntry(dt + 'card', function() 752 { 753 var bg = new mxCell( 754 '<b><font style="font-size: 20px">Card title</font></b><br><br>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<br><br><font style="font-size: 12px" color="#999999">Last udated 3 mind ago</font>', 755 new mxGeometry(0, 0, 480, 240), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;fontSize=14;spacingLeft=170;'); 756 bg.vertex = true; 757 var button1 = new mxCell('Image', new mxGeometry(0, 0, 170, 240), s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 758 button1.geometry.relative = true; 759 button1.vertex = true; 760 bg.insert(button1); 761 762 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card'); 763 }), 764 765 this.addEntry(dt + 'card', function() 766 { 767 var bg = new mxCell('<b><font style="font-size: 20px">Primary card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 768 new mxGeometry(0, 0, 250, 180), s + 'rrect;rSize=5;strokeColor=#0071D5;html=1;whiteSpace=wrap;fillColor=#0085FC;fontColor=#ffffff;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;'); 769 bg.vertex = true; 770 var item1 = new mxCell('Header', new mxGeometry(0, 0, 250, 50), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#0081F4;strokeColor=#0071D5;fontColor=#ffffff;resizeWidth=1;fontSize=18;align=left;spacing=20;'); 771 item1.geometry.relative = true; 772 item1.vertex = true; 773 bg.insert(item1); 774 775 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Primary card'); 776 }), 777 778 this.addEntry(dt + 'card', function() 779 { 780 var bg = new mxCell('<b><font style="font-size: 20px">Secondary card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 781 new mxGeometry(0, 0, 250, 180), s + 'rrect;rSize=5;strokeColor=#5B646A;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;'); 782 bg.vertex = true; 783 var item1 = new mxCell('Header', new mxGeometry(0, 0, 250, 50), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#697279;strokeColor=#5B646A;fontColor=#ffffff;resizeWidth=1;fontSize=18;align=left;spacing=20;'); 784 item1.geometry.relative = true; 785 item1.vertex = true; 786 bg.insert(item1); 787 788 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Secondary card'); 789 }), 790 791 this.addEntry(dt + 'card', function() 792 { 793 var bg = new mxCell('<b><font style="font-size: 20px">Success card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 794 new mxGeometry(0, 0, 250, 180), s + 'rrect;rSize=5;strokeColor=#2B8D40;html=1;whiteSpace=wrap;fillColor=#33A64C;fontColor=#ffffff;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;'); 795 bg.vertex = true; 796 var item1 = new mxCell('Header', new mxGeometry(0, 0, 250, 50), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#31A14A;strokeColor=#2B8D40;fontColor=#ffffff;resizeWidth=1;fontSize=18;align=left;spacing=20;'); 797 item1.geometry.relative = true; 798 item1.vertex = true; 799 bg.insert(item1); 800 801 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Success card'); 802 }), 803 804 this.addEntry(dt + 'card', function() 805 { 806 var bg = new mxCell('<b><font style="font-size: 20px">Danger card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 807 new mxGeometry(0, 0, 250, 180), s + 'rrect;rSize=5;strokeColor=#BA2239;html=1;whiteSpace=wrap;fillColor=#DB2843;fontColor=#ffffff;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;'); 808 bg.vertex = true; 809 var item1 = new mxCell('Header', new mxGeometry(0, 0, 250, 50), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#D42741;strokeColor=#BA2239;fontColor=#ffffff;resizeWidth=1;fontSize=18;align=left;spacing=20;'); 810 item1.geometry.relative = true; 811 item1.vertex = true; 812 bg.insert(item1); 813 814 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Danger card'); 815 }), 816 817 this.addEntry(dt + 'card', function() 818 { 819 var bg = new mxCell('<b><font style="font-size: 20px">Warning card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 820 new mxGeometry(0, 0, 250, 180), s + 'rrect;rSize=5;strokeColor=#D89F20;html=1;whiteSpace=wrap;fillColor=#FFBC26;fontColor=#ffffff;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;'); 821 bg.vertex = true; 822 var item1 = new mxCell('Header', new mxGeometry(0, 0, 250, 50), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#F7B625;strokeColor=#D89F20;fontColor=#ffffff;resizeWidth=1;fontSize=18;align=left;spacing=20;'); 823 item1.geometry.relative = true; 824 item1.vertex = true; 825 bg.insert(item1); 826 827 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Warning card'); 828 }), 829 830 this.addEntry(dt + 'card', function() 831 { 832 var bg = new mxCell('<b><font style="font-size: 20px">Info card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 833 new mxGeometry(0, 0, 250, 180), s + 'rrect;rSize=5;strokeColor=#188C9C;html=1;whiteSpace=wrap;fillColor=#1CA5B8;fontColor=#ffffff;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;'); 834 bg.vertex = true; 835 var item1 = new mxCell('Header', new mxGeometry(0, 0, 250, 50), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#1BA0B2;strokeColor=#188C9C;fontColor=#ffffff;resizeWidth=1;fontSize=18;align=left;spacing=20;'); 836 item1.geometry.relative = true; 837 item1.vertex = true; 838 bg.insert(item1); 839 840 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Info card'); 841 }), 842 843 this.addEntry(dt + 'card', function() 844 { 845 var bg = new mxCell('<b><font style="font-size: 20px">Light card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 846 new mxGeometry(0, 0, 250, 180), s + 'rrect;rSize=5;strokeColor=#D2D3D4;html=1;whiteSpace=wrap;fillColor=#F8F9FA;fontColor=#212529;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;'); 847 bg.vertex = true; 848 var item1 = new mxCell('Header', new mxGeometry(0, 0, 250, 50), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#F0F1F2;strokeColor=#D2D3D4;fontColor=#212529;resizeWidth=1;fontSize=18;align=left;spacing=20;'); 849 item1.geometry.relative = true; 850 item1.vertex = true; 851 bg.insert(item1); 852 853 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Light card'); 854 }), 855 856 this.addEntry(dt + 'card', function() 857 { 858 var bg = new mxCell('<b><font style="font-size: 20px">Dark card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 859 new mxGeometry(0, 0, 250, 180), s + 'rrect;rSize=5;strokeColor=#2C3136;html=1;whiteSpace=wrap;fillColor=#343A40;fontColor=#ffffff;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;'); 860 bg.vertex = true; 861 var item1 = new mxCell('Header', new mxGeometry(0, 0, 250, 50), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#32383E;strokeColor=#2C3136;fontColor=#ffffff;resizeWidth=1;fontSize=18;align=left;spacing=20;'); 862 item1.geometry.relative = true; 863 item1.vertex = true; 864 bg.insert(item1); 865 866 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dark card'); 867 }), 868 869 this.addEntry(dt + 'card', function() 870 { 871 var bg = new mxCell('<b><font style="font-size: 20px">Primary card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 872 new mxGeometry(0, 0, 250, 180), s + 'rrect;rSize=5;strokeColor=#0085FC;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#0085FC;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;'); 873 bg.vertex = true; 874 var item1 = new mxCell('Header', new mxGeometry(0, 0, 250, 50), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#F7F7F7;strokeColor=#0085FC;fontColor=#212529;resizeWidth=1;fontSize=18;align=left;spacing=20;'); 875 item1.geometry.relative = true; 876 item1.vertex = true; 877 bg.insert(item1); 878 879 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Primary card'); 880 }), 881 882 this.addEntry(dt + 'card', function() 883 { 884 var bg = new mxCell('<b><font style="font-size: 20px">Secondary card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 885 new mxGeometry(0, 0, 250, 180), s + 'rrect;rSize=5;strokeColor=#6C767D;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#6C767D;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;'); 886 bg.vertex = true; 887 var item1 = new mxCell('Header', new mxGeometry(0, 0, 250, 50), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#F7F7F7;strokeColor=#6C767D;fontColor=#6C767D;resizeWidth=1;fontSize=18;align=left;spacing=20;'); 888 item1.geometry.relative = true; 889 item1.vertex = true; 890 bg.insert(item1); 891 892 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Secondary card'); 893 }), 894 895 this.addEntry(dt + 'card', function() 896 { 897 var bg = new mxCell('<b><font style="font-size: 20px">Success card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 898 new mxGeometry(0, 0, 250, 180), s + 'rrect;rSize=5;strokeColor=#33A64C;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#33A64C;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;'); 899 bg.vertex = true; 900 var item1 = new mxCell('Header', new mxGeometry(0, 0, 250, 50), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#F7F7F7;strokeColor=#33A64C;fontColor=#6C767D;resizeWidth=1;fontSize=18;align=left;spacing=20;'); 901 item1.geometry.relative = true; 902 item1.vertex = true; 903 bg.insert(item1); 904 905 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Success card'); 906 }), 907 908 this.addEntry(dt + 'card', function() 909 { 910 var bg = new mxCell('<b><font style="font-size: 20px">Danger card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 911 new mxGeometry(0, 0, 250, 180), s + 'rrect;rSize=5;strokeColor=#DB2843;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#DB2843;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;'); 912 bg.vertex = true; 913 var item1 = new mxCell('Header', new mxGeometry(0, 0, 250, 50), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#F7F7F7;strokeColor=#DB2843;fontColor=#6C767D;resizeWidth=1;fontSize=18;align=left;spacing=20;'); 914 item1.geometry.relative = true; 915 item1.vertex = true; 916 bg.insert(item1); 917 918 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Danger card'); 919 }), 920 921 this.addEntry(dt + 'card', function() 922 { 923 var bg = new mxCell('<b><font style="font-size: 20px">Warning card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 924 new mxGeometry(0, 0, 250, 180), s + 'rrect;rSize=5;strokeColor=#FFBC26;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#FFBC26;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;'); 925 bg.vertex = true; 926 var item1 = new mxCell('Header', new mxGeometry(0, 0, 250, 50), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#F7F7F7;strokeColor=#FFBC26;fontColor=#6C767D;resizeWidth=1;fontSize=18;align=left;spacing=20;'); 927 item1.geometry.relative = true; 928 item1.vertex = true; 929 bg.insert(item1); 930 931 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Warning card'); 932 }), 933 934 this.addEntry(dt + 'card', function() 935 { 936 var bg = new mxCell('<b><font style="font-size: 20px">Info card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 937 new mxGeometry(0, 0, 250, 180), s + 'rrect;rSize=5;strokeColor=#1CA5B8;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#1CA5B8;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;'); 938 bg.vertex = true; 939 var item1 = new mxCell('Header', new mxGeometry(0, 0, 250, 50), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#F7F7F7;strokeColor=#1CA5B8;fontColor=#6C767D;resizeWidth=1;fontSize=18;align=left;spacing=20;'); 940 item1.geometry.relative = true; 941 item1.vertex = true; 942 bg.insert(item1); 943 944 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Info card'); 945 }), 946 947 this.addEntry(dt + 'card', function() 948 { 949 var bg = new mxCell('<b><font style="font-size: 20px">Light card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 950 new mxGeometry(0, 0, 250, 180), s + 'rrect;rSize=5;strokeColor=#F8F9FA;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#212529;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;'); 951 bg.vertex = true; 952 var item1 = new mxCell('Header', new mxGeometry(0, 0, 250, 50), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#F7F7F7;strokeColor=#F8F9FA;fontColor=#6C767D;resizeWidth=1;fontSize=18;align=left;spacing=20;'); 953 item1.geometry.relative = true; 954 item1.vertex = true; 955 bg.insert(item1); 956 957 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Light card'); 958 }), 959 960 this.addEntry(dt + 'card', function() 961 { 962 var bg = new mxCell('<b><font style="font-size: 20px">Dark card title</font></b><br style="font-size: 14px"><br style="font-size: 14px">Some quick example text to build on the card title and make up the bulk of the card\'s content.', 963 new mxGeometry(0, 0, 250, 180), s + 'rrect;rSize=5;strokeColor=#6C767D;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#212529;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;'); 964 bg.vertex = true; 965 var item1 = new mxCell('Header', new mxGeometry(0, 0, 250, 50), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#F7F7F7;strokeColor=#6C767D;fontColor=#6C767D;resizeWidth=1;fontSize=18;align=left;spacing=20;'); 966 item1.geometry.relative = true; 967 item1.vertex = true; 968 bg.insert(item1); 969 970 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dark card'); 971 }), 972 973 this.addEntry(dt + 'card group', function() 974 { 975 var bg = new mxCell('', 976 new mxGeometry(0, 0, 780, 360), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;'); 977 bg.vertex = true; 978 var item1 = new mxCell( 979 '<b><font style="font-size: 20px">Card title</font></b><br><br>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<br><br><font color="#999999" style="font-size: 12px">Last udated 3 mind ago</font>', 980 new mxGeometry(0, 0, 260, 360), s + 'leftButton;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 981 item1.geometry.relative = true; 982 item1.vertex = true; 983 bg.insert(item1); 984 var button1 = new mxCell('Image cap', new mxGeometry(0, 0, 260, 160), 'html=1;shadow=0;dashed=0;shape=mxgraph.basic.corner_round_rect;dx=2;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 985 button1.geometry.relative = true; 986 button1.vertex = true; 987 item1.insert(button1); 988 989 var item2 = new mxCell( 990 '<b><font style="font-size: 20px">Card title</font></b><br><br>This card has supporting text below as a natural lead-in to additional content.<br><br><font color="#999999" style="font-size: 12px">Last udated 3 mind ago</font>', 991 new mxGeometry(0, 0, 260, 360), 'html=1;shadow=0;dashed=0;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 992 item2.geometry.relative = true; 993 item2.geometry.offset = new mxPoint(260, 0); 994 item2.vertex = true; 995 bg.insert(item2); 996 var button2 = new mxCell('Image cap', new mxGeometry(0, 0, 260, 160), 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 997 button2.geometry.relative = true; 998 button2.vertex = true; 999 item2.insert(button2); 1000 1001 var item3 = new mxCell( 1002 '<b><font style="font-size: 20px">Card title</font></b><br><br>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.<br><br><font color="#999999" style="font-size: 12px">Last udated 3 mind ago</font>', 1003 new mxGeometry(1, 0, 260, 360), s + 'rightButton;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 1004 item3.geometry.relative = true; 1005 item3.geometry.offset = new mxPoint(-260, 0); 1006 item3.vertex = true; 1007 bg.insert(item3); 1008 var button3 = new mxCell('Image cap', new mxGeometry(0, 0, 260, 160), 'html=1;shadow=0;dashed=0;shape=mxgraph.basic.corner_round_rect;dx=2;flipH=1;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 1009 button3.geometry.relative = true; 1010 button3.vertex = true; 1011 item3.insert(button3); 1012 1013 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card group'); 1014 }), 1015 1016 this.addEntry(dt + 'card group', function() 1017 { 1018 var bg = new mxCell('', 1019 new mxGeometry(0, 0, 780, 370), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;'); 1020 bg.vertex = true; 1021 var item1 = new mxCell( 1022 '<b><font style="font-size: 20px">Card title</font></b><br><br>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.', 1023 new mxGeometry(0, 0, 260, 370), s + 'leftButton;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 1024 item1.geometry.relative = true; 1025 item1.vertex = true; 1026 bg.insert(item1); 1027 var button1 = new mxCell('Image cap', new mxGeometry(0, 0, 260, 160), 'html=1;shadow=0;dashed=0;shape=mxgraph.basic.corner_round_rect;dx=2;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 1028 button1.geometry.relative = true; 1029 button1.vertex = true; 1030 item1.insert(button1); 1031 var button2 = new mxCell('Last updated 3 mins ago', new mxGeometry(0, 1, 260, 50), 'html=1;shadow=0;dashed=0;shape=mxgraph.basic.corner_round_rect;dx=2;flipV=1;perimeter=none;whiteSpace=wrap;fillColor=#F7F7F7;strokeColor=#DFDFDF;fontColor=#6C767D;resizeWidth=1;fontSize=13;align=left;spacing=20;'); 1032 button2.geometry.relative = true; 1033 button2.geometry.offset = new mxPoint(0, -50); 1034 button2.vertex = true; 1035 item1.insert(button2); 1036 1037 var item2 = new mxCell( 1038 '<b><font style="font-size: 20px">Card title</font></b><br><br>This card has supporting text below as a natural lead-in to additional content.', 1039 new mxGeometry(0, 0, 260, 370), 'html=1;shadow=0;dashed=0;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 1040 item2.geometry.relative = true; 1041 item2.geometry.offset = new mxPoint(260, 0); 1042 item2.vertex = true; 1043 bg.insert(item2); 1044 var button3 = new mxCell('Image cap', new mxGeometry(0, 0, 260, 160), 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 1045 button3.geometry.relative = true; 1046 button3.vertex = true; 1047 item2.insert(button3); 1048 var button4 = new mxCell('Last updated 3 mins ago', new mxGeometry(0, 1, 260, 50), 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;fillColor=#F7F7F7;strokeColor=#DFDFDF;fontColor=#6C767D;resizeWidth=1;fontSize=13;align=left;spacing=20;'); 1049 button4.geometry.relative = true; 1050 button4.geometry.offset = new mxPoint(0, -50); 1051 button4.vertex = true; 1052 item2.insert(button4); 1053 1054 var item3 = new mxCell( 1055 '<b><font style="font-size: 20px">Card title</font></b><br><br>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.', 1056 new mxGeometry(1, 0, 260, 370), s + 'rightButton;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 1057 item3.geometry.relative = true; 1058 item3.geometry.offset = new mxPoint(-260, 0); 1059 item3.vertex = true; 1060 bg.insert(item3); 1061 var button5 = new mxCell('Image cap', new mxGeometry(0, 0, 260, 160), 'html=1;shadow=0;dashed=0;shape=mxgraph.basic.corner_round_rect;dx=2;flipH=1;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 1062 button5.geometry.relative = true; 1063 button5.vertex = true; 1064 item3.insert(button5); 1065 var button6 = new mxCell('Last updated 3 mins ago', new mxGeometry(0, 1, 260, 50), 'html=1;shadow=0;dashed=0;shape=mxgraph.basic.corner_round_rect;dx=2;flipV=1;flipH=1;perimeter=none;whiteSpace=wrap;fillColor=#F7F7F7;strokeColor=#DFDFDF;fontColor=#6C767D;resizeWidth=1;fontSize=13;align=left;spacing=20;'); 1066 button6.geometry.relative = true; 1067 button6.geometry.offset = new mxPoint(0, -50); 1068 button6.vertex = true; 1069 item3.insert(button6); 1070 1071 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Card group'); 1072 }), 1073 1074 this.addEntry(dt + 'card group', function() 1075 { 1076 var item1 = new mxCell( 1077 '<b><font style="font-size: 20px">Card title</font></b><br><br>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<br><br><font color="#999999" style="font-size: 12px">Last udated 3 mind ago</font>', 1078 new mxGeometry(0, 0, 260, 360), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 1079 item1.geometry.relative = true; 1080 item1.vertex = true; 1081 var button1 = new mxCell('Image cap', new mxGeometry(0, 0, 260, 160), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 1082 button1.geometry.relative = true; 1083 button1.vertex = true; 1084 item1.insert(button1); 1085 1086 var item2 = new mxCell( 1087 '<b><font style="font-size: 20px">Card title</font></b><br><br>This card has supporting text below as a natural lead-in to additional content.<br><br><font color="#999999" style="font-size: 12px">Last udated 3 mind ago</font>', 1088 new mxGeometry(280, 0, 260, 360), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 1089 item2.vertex = true; 1090 var button2 = new mxCell('Image cap', new mxGeometry(0, 0, 260, 160), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 1091 button2.geometry.relative = true; 1092 button2.vertex = true; 1093 item2.insert(button2); 1094 1095 var item3 = new mxCell( 1096 '<b><font style="font-size: 20px">Card title</font></b><br><br>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.<br><br><font color="#999999" style="font-size: 12px">Last udated 3 mind ago</font>', 1097 new mxGeometry(560, 0, 260, 360), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 1098 item3.vertex = true; 1099 var button3 = new mxCell('Image cap', new mxGeometry(0, 0, 260, 160), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 1100 button3.geometry.relative = true; 1101 button3.vertex = true; 1102 item3.insert(button3); 1103 1104 return sb.createVertexTemplateFromCells([item1, item2, item3], 820, 360, 'Card group'); 1105 }), 1106 1107 this.addEntry(dt + 'card group', function() 1108 { 1109 var item1 = new mxCell( 1110 '<b><font style="font-size: 20px">Card title</font></b><br><br>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.', 1111 new mxGeometry(0, 0, 260, 370), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 1112 item1.geometry.relative = true; 1113 item1.vertex = true; 1114 var button1 = new mxCell('Image cap', new mxGeometry(0, 0, 260, 160), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 1115 button1.geometry.relative = true; 1116 button1.vertex = true; 1117 item1.insert(button1); 1118 var button2 = new mxCell('Last updated 3 mins ago', new mxGeometry(0, 1, 260, 50), s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#F7F7F7;strokeColor=#DFDFDF;fontColor=#6C767D;resizeWidth=1;fontSize=13;align=left;spacing=20;'); 1119 button2.geometry.relative = true; 1120 button2.geometry.offset = new mxPoint(0, -50); 1121 button2.vertex = true; 1122 item1.insert(button2); 1123 1124 var item2 = new mxCell( 1125 '<b><font style="font-size: 20px">Card title</font></b><br><br>This card has supporting text below as a natural lead-in to additional content.', 1126 new mxGeometry(280, 0, 260, 370), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 1127 item2.vertex = true; 1128 var button3 = new mxCell('Image cap', new mxGeometry(0, 0, 260, 160), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 1129 button3.geometry.relative = true; 1130 button3.vertex = true; 1131 item2.insert(button3); 1132 var button4 = new mxCell('Last updated 3 mins ago', new mxGeometry(0, 1, 260, 50), s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#F7F7F7;strokeColor=#DFDFDF;fontColor=#6C767D;resizeWidth=1;fontSize=13;align=left;spacing=20;'); 1133 button4.geometry.relative = true; 1134 button4.geometry.offset = new mxPoint(0, -50); 1135 button4.vertex = true; 1136 item2.insert(button4); 1137 1138 var item3 = new mxCell( 1139 '<b><font style="font-size: 20px">Card title</font></b><br><br>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.', 1140 new mxGeometry(560, 0, 260, 370), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 1141 item3.vertex = true; 1142 var button5 = new mxCell('Image cap', new mxGeometry(0, 0, 260, 160), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 1143 button5.geometry.relative = true; 1144 button5.vertex = true; 1145 item3.insert(button5); 1146 var button6 = new mxCell('Last updated 3 mins ago', new mxGeometry(0, 1, 260, 50), s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#F7F7F7;strokeColor=#DFDFDF;fontColor=#6C767D;resizeWidth=1;fontSize=13;align=left;spacing=20;'); 1147 button6.geometry.relative = true; 1148 button6.geometry.offset = new mxPoint(0, -50); 1149 button6.vertex = true; 1150 item3.insert(button6); 1151 1152 return sb.createVertexTemplateFromCells([item1, item2, item3], 820, 360, 'Card group'); 1153 }), 1154 1155 this.addEntry(dt + 'card group', function() 1156 { 1157 var item1 = new mxCell( 1158 '<b><font style="font-size: 20px">Card title</font></b><br><br>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.', 1159 new mxGeometry(0, 0, 370, 290), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 1160 item1.vertex = true; 1161 var button1 = new mxCell('Image cap', new mxGeometry(0, 0, 370, 160), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 1162 button1.geometry.relative = true; 1163 button1.vertex = true; 1164 item1.insert(button1); 1165 1166 var item2 = new mxCell( 1167 '<b><font style="font-size: 20px">Card title</font></b><br><br>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.', 1168 new mxGeometry(390, 0, 370, 290), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 1169 item2.vertex = true; 1170 var button2 = new mxCell('Image cap', new mxGeometry(0, 0, 370, 160), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 1171 button2.geometry.relative = true; 1172 button2.vertex = true; 1173 item2.insert(button2); 1174 1175 var item3 = new mxCell( 1176 '<b><font style="font-size: 20px">Card title</font></b><br><br>This is a wider card with supporting text below as a natural lead-in to additional content.', 1177 new mxGeometry(0, 310, 370, 270), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 1178 item3.vertex = true; 1179 var button3 = new mxCell('Image cap', new mxGeometry(0, 0, 370, 160), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 1180 button3.geometry.relative = true; 1181 button3.vertex = true; 1182 item3.insert(button3); 1183 1184 var item4 = new mxCell( 1185 '<b><font style="font-size: 20px">Card title</font></b><br><br>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.', 1186 new mxGeometry(390, 310, 370, 290), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 1187 item4.vertex = true; 1188 var button4 = new mxCell('Image cap', new mxGeometry(0, 0, 370, 160), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 1189 button4.geometry.relative = true; 1190 button4.vertex = true; 1191 item4.insert(button4); 1192 1193 return sb.createVertexTemplateFromCells([item1, item2, item3, item4], 760, 600, 'Grid cards'); 1194 }), 1195 1196 this.addEntry(dt + 'card group', function() 1197 { 1198 var item1 = new mxCell( 1199 '<b><font style="font-size: 17px">Card title that wraps to a new line</font></b><br><br>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.', 1200 new mxGeometry(0, 0, 320, 290), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 1201 item1.vertex = true; 1202 var button1 = new mxCell('Image cap', new mxGeometry(0, 0, 320, 160), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 1203 button1.geometry.relative = true; 1204 button1.vertex = true; 1205 item1.insert(button1); 1206 1207 var item2 = new mxCell( 1208 '<font style="font-size: 18px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<br><br></font><font style="font-size: 12px" color="#999999">- Someone famous in <i>Source Title</i></font>', 1209 new mxGeometry(0, 300, 320, 150), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=30;spacingBottom=0;fontSize=14;spacingTop=0;'); 1210 item2.vertex = true; 1211 1212 var item3 = new mxCell( 1213 '<b><font style="font-size: 17px">Card title</font></b><br><br>This card has supporting text below as a natural lead-in to additional content.<br><br><font color="#999999" style="font-size: 12px">Last updated 3 mins ago</font>', 1214 new mxGeometry(330, 0, 320, 300), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;'); 1215 item3.vertex = true; 1216 var button2 = new mxCell('Image cap', new mxGeometry(0, 0, 320, 160), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;fillColor=#868E96;strokeColor=#DFDFDF;fontColor=#DEE2E6;resizeWidth=1;fontSize=18;'); 1217 button2.geometry.relative = true; 1218 button2.vertex = true; 1219 item3.insert(button2); 1220 1221 var item4 = new mxCell( 1222 '<font style="font-size: 18px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<br><br></font><font style="font-size: 12px">- Someone famous in <i>Source Title</i></font>', 1223 new mxGeometry(330, 310, 320, 130), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#0085FC;fontColor=#FFFFFF;verticalAlign=top;align=center;spacing=10;fontSize=14;'); 1224 item4.vertex = true; 1225 1226 var item5 = new mxCell( 1227 '<font style="font-size: 18px">Card title</font><br><br>This card has a regular title and short paragraphy of text below it.<br><br><font color="#999999" style="font-size: 12px">Last updated 3 mins ago</font>', 1228 new mxGeometry(330, 450, 320, 130), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=center;spacing=10;spacingBottom=0;fontSize=14;spacingTop=0;'); 1229 item5.vertex = true; 1230 1231 var item6 = new mxCell( 1232 'Card image', 1233 new mxGeometry(660, 0, 320, 240), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#868E96;fontColor=#DEE2E6;verticalAlign=middle;align=center;spacing=10;spacingBottom=0;fontSize=14;spacingTop=0;'); 1234 item6.vertex = true; 1235 1236 var item7 = new mxCell( 1237 '<font style="font-size: 18px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<br><br></font><font style="font-size: 12px" color="#999999">- Someone famous in <i>Source Title</i></font>', 1238 new mxGeometry(660, 250, 320, 150), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=right;spacing=30;spacingBottom=0;fontSize=14;spacingTop=0;'); 1239 item7.vertex = true; 1240 1241 var item8 = new mxCell( 1242 '<font style="font-size: 18px"><b>Card title</b></font><br><br>This is another card with title and supporting text below it. This card has some additional content to make it slightly taller overall.<br><br><font color="#999999" style="font-size: 12px">Last updated 3 mins ago</font>', 1243 new mxGeometry(660, 410, 320, 160), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=0;'); 1244 item8.vertex = true; 1245 1246 return sb.createVertexTemplateFromCells([item1, item2, item3, item4, item5, item6, item7, item8], 980, 600, 'Card group'); 1247 }), 1248 1249 this.createVertexTemplateEntry('html=1;shadow=0;dashed=0;strokeColor=none;strokeWidth=1;fillColor=#777777;fontColor=#555555;whiteSpace=wrap;align=center;verticalAlign=middle;fontStyle=0;fontSize=40;', 1250 800, 300, 'First slide', 'Carousel', null, null, this.getTagsForStencil(gn, 'carousel', dt + 'carousel').join(' ')), 1251 1252 this.addEntry(dt + 'carousel with controls', function() 1253 { 1254 var bg = new mxCell( 1255 'First slide', 1256 new mxGeometry(0, 0, 800, 300), 'html=1;shadow=0;dashed=0;strokeColor=none;strokeWidth=1;fillColor=#777777;fontColor=#555555;whiteSpace=wrap;align=center;verticalAlign=middle;fontStyle=0;fontSize=40;'); 1257 bg.vertex = true; 1258 var button1 = new mxCell('', new mxGeometry(1, 0.5, 7, 14), 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=4;shape=mxgraph.ios7.misc.more;strokeColor=#a0a0a0;'); 1259 button1.geometry.relative = true; 1260 button1.geometry.offset = new mxPoint(-50, -7); 1261 button1.vertex = true; 1262 bg.insert(button1); 1263 var button2 = new mxCell('', new mxGeometry(0, 0.5, 7, 14), 'flipH=1;html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=4;shape=mxgraph.ios7.misc.more;strokeColor=#a0a0a0;'); 1264 button2.geometry.relative = true; 1265 button2.geometry.offset = new mxPoint(43, -7); 1266 button2.vertex = true; 1267 bg.insert(button2); 1268 1269 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Carousel with controls'); 1270 }), 1271 1272 this.addEntry(dt + 'carousel with indicators', function() 1273 { 1274 var bg = new mxCell( 1275 'First slide', 1276 new mxGeometry(0, 0, 800, 300), 'html=1;shadow=0;dashed=0;strokeColor=none;strokeWidth=1;fillColor=#777777;fontColor=#555555;whiteSpace=wrap;align=center;verticalAlign=middle;fontStyle=0;fontSize=40;'); 1277 bg.vertex = true; 1278 var button1 = new mxCell('', new mxGeometry(1, 0.5, 7, 14), 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=4;shape=mxgraph.ios7.misc.more;strokeColor=#a0a0a0;'); 1279 button1.geometry.relative = true; 1280 button1.geometry.offset = new mxPoint(-50, -7); 1281 button1.vertex = true; 1282 bg.insert(button1); 1283 var button2 = new mxCell('', new mxGeometry(0, 0.5, 7, 14), 'flipH=1;html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=4;shape=mxgraph.ios7.misc.more;strokeColor=#a0a0a0;'); 1284 button2.geometry.relative = true; 1285 button2.geometry.offset = new mxPoint(43, -7); 1286 button2.vertex = true; 1287 bg.insert(button2); 1288 var item1 = new mxCell('', new mxGeometry(0.5, 1, 30, 4), 'html=1;shadow=0;strokeColor=none;fillColor=#ffffff;'); 1289 item1.geometry.relative = true; 1290 item1.geometry.offset = new mxPoint(-50, -20); 1291 item1.vertex = true; 1292 bg.insert(item1); 1293 var item2 = new mxCell('', new mxGeometry(0.5, 1, 30, 4), 'html=1;shadow=0;strokeColor=none;fillColor=#BBBBBB;'); 1294 item2.geometry.relative = true; 1295 item2.geometry.offset = new mxPoint(-15, -20); 1296 item2.vertex = true; 1297 bg.insert(item2); 1298 var item3 = new mxCell('', new mxGeometry(0.5, 1, 30, 4), 'html=1;shadow=0;strokeColor=none;fillColor=#BBBBBB;'); 1299 item3.geometry.relative = true; 1300 item3.geometry.offset = new mxPoint(20, -20); 1301 item3.vertex = true; 1302 bg.insert(item3); 1303 1304 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Carousel with indicators'); 1305 }), 1306 1307 this.addEntry(dt + 'carousel with captions', function() 1308 { 1309 var bg = new mxCell( 1310 'First slide', 1311 new mxGeometry(0, 0, 800, 300), 'html=1;shadow=0;dashed=0;strokeColor=none;strokeWidth=1;fillColor=#777777;fontColor=#555555;whiteSpace=wrap;align=center;verticalAlign=middle;fontStyle=0;fontSize=40;'); 1312 bg.vertex = true; 1313 var button1 = new mxCell('', new mxGeometry(1, 0.5, 7, 14), 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=4;shape=mxgraph.ios7.misc.more;strokeColor=#a0a0a0;'); 1314 button1.geometry.relative = true; 1315 button1.geometry.offset = new mxPoint(-50, -7); 1316 button1.vertex = true; 1317 bg.insert(button1); 1318 var button2 = new mxCell('', new mxGeometry(0, 0.5, 7, 14), 'flipH=1;html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=4;shape=mxgraph.ios7.misc.more;strokeColor=#a0a0a0;'); 1319 button2.geometry.relative = true; 1320 button2.geometry.offset = new mxPoint(43, -7); 1321 button2.vertex = true; 1322 bg.insert(button2); 1323 var item1 = new mxCell('', new mxGeometry(0.5, 1, 30, 4), 'html=1;shadow=0;strokeColor=none;fillColor=#ffffff;'); 1324 item1.geometry.relative = true; 1325 item1.geometry.offset = new mxPoint(-50, -20); 1326 item1.vertex = true; 1327 bg.insert(item1); 1328 var item2 = new mxCell('', new mxGeometry(0.5, 1, 30, 4), 'html=1;shadow=0;strokeColor=none;fillColor=#BBBBBB;'); 1329 item2.geometry.relative = true; 1330 item2.geometry.offset = new mxPoint(-15, -20); 1331 item2.vertex = true; 1332 bg.insert(item2); 1333 var item3 = new mxCell('', new mxGeometry(0.5, 1, 30, 4), 'html=1;shadow=0;strokeColor=none;fillColor=#BBBBBB;'); 1334 item3.geometry.relative = true; 1335 item3.geometry.offset = new mxPoint(20, -20); 1336 item3.vertex = true; 1337 bg.insert(item3); 1338 var item4 = new mxCell('<font style="font-size: 16px"><b>First slide label</b></font><br style="font-size: 14px"><br style="font-size: 14px">Nulla vitae elit libero, a pharetra augue mollis interdum.', 1339 new mxGeometry(0, 1, 800, 60), 'html=1;shadow=0;strokeColor=none;fillColor=none;resizeWidth=1;fontColor=#FFFFFF;fontSize=14;'); 1340 item4.geometry.relative = true; 1341 item4.geometry.offset = new mxPoint(0, -90); 1342 item4.vertex = true; 1343 bg.insert(item4); 1344 1345 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Carousel with captions'); 1346 }), 1347 1348 this.addEntry(dt + 'dropdown button', function() 1349 { 1350 var bg = new mxCell( 1351 'Dropdown button', 1352 new mxGeometry(0, 0, 140, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#ffffff;whiteSpace=wrap;align=right;verticalAlign=middle;fontStyle=0;fontSize=14;spacingRight=20;'); 1353 bg.vertex = true; 1354 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#ffffff;strokeColor=none;perimeter=none;'); 1355 marker1.geometry.relative = true; 1356 marker1.geometry.offset = new mxPoint(-17, -2.5); 1357 marker1.vertex = true; 1358 bg.insert(marker1); 1359 1360 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropdown button'); 1361 }), 1362 1363 this.addEntry(dt + 'dropdown button', function() 1364 { 1365 var bg = new mxCell( 1366 'Dropdown button', 1367 new mxGeometry(0, 0, 140, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;'); 1368 bg.vertex = true; 1369 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#ffffff;strokeColor=none;perimeter=none;'); 1370 marker1.geometry.relative = true; 1371 marker1.geometry.offset = new mxPoint(-17, -2.5); 1372 marker1.vertex = true; 1373 bg.insert(marker1); 1374 var item1 = new mxCell('', new mxGeometry(0, 43, 170, 110), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;'); 1375 item1.vertex = true; 1376 var item2 = new mxCell('Action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1377 item2.geometry.relative = true; 1378 item2.geometry.offset = new mxPoint(0, 10); 1379 item2.vertex = true; 1380 item1.insert(item2); 1381 var item3 = new mxCell('Another action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1382 item3.geometry.relative = true; 1383 item3.geometry.offset = new mxPoint(0, 40); 1384 item3.vertex = true; 1385 item1.insert(item3); 1386 var item4 = new mxCell('Something else here', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1387 item4.geometry.relative = true; 1388 item4.geometry.offset = new mxPoint(0, 70); 1389 item4.vertex = true; 1390 item1.insert(item4); 1391 1392 return sb.createVertexTemplateFromCells([bg, item1], 170, 153, 'Dropdown button'); 1393 }), 1394 1395 this.addEntry(dt + 'dropdown button', function() 1396 { 1397 var bg = new mxCell( 1398 'Primary', 1399 new mxGeometry(0, 0, 80, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#006AC9;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;'); 1400 bg.vertex = true; 1401 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#ffffff;strokeColor=none;perimeter=none;'); 1402 marker1.geometry.relative = true; 1403 marker1.geometry.offset = new mxPoint(-17, -2.5); 1404 marker1.vertex = true; 1405 bg.insert(marker1); 1406 var item1 = new mxCell('', new mxGeometry(0, 43, 170, 150), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;'); 1407 item1.vertex = true; 1408 var item2 = new mxCell('Action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1409 item2.geometry.relative = true; 1410 item2.geometry.offset = new mxPoint(0, 10); 1411 item2.vertex = true; 1412 item1.insert(item2); 1413 var item3 = new mxCell('Another action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1414 item3.geometry.relative = true; 1415 item3.geometry.offset = new mxPoint(0, 40); 1416 item3.vertex = true; 1417 item1.insert(item3); 1418 var item4 = new mxCell('Something else here', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1419 item4.geometry.relative = true; 1420 item4.geometry.offset = new mxPoint(0, 70); 1421 item4.vertex = true; 1422 item1.insert(item4); 1423 var item5 = new mxCell('', new mxGeometry(0, 0, 170, 10), 'shape=line;strokeColor=#999999;perimeter=none;resizeWidth=1;'); 1424 item5.geometry.relative = true; 1425 item5.geometry.offset = new mxPoint(0, 100); 1426 item5.vertex = true; 1427 item1.insert(item5); 1428 var item6 = new mxCell('Separated link', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1429 item6.geometry.relative = true; 1430 item6.geometry.offset = new mxPoint(0, 110); 1431 item6.vertex = true; 1432 item1.insert(item6); 1433 1434 return sb.createVertexTemplateFromCells([bg, item1], 170, 193, 'Dropdown button'); 1435 }), 1436 1437 this.addEntry(dt + 'dropdown button', function() 1438 { 1439 var bg = new mxCell( 1440 'Secondary', 1441 new mxGeometry(0, 0, 100, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;'); 1442 bg.vertex = true; 1443 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#ffffff;strokeColor=none;perimeter=none;'); 1444 marker1.geometry.relative = true; 1445 marker1.geometry.offset = new mxPoint(-17, -2.5); 1446 marker1.vertex = true; 1447 bg.insert(marker1); 1448 var item1 = new mxCell('', new mxGeometry(0, 43, 170, 150), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;'); 1449 item1.vertex = true; 1450 var item2 = new mxCell('Action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1451 item2.geometry.relative = true; 1452 item2.geometry.offset = new mxPoint(0, 10); 1453 item2.vertex = true; 1454 item1.insert(item2); 1455 var item3 = new mxCell('Another action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1456 item3.geometry.relative = true; 1457 item3.geometry.offset = new mxPoint(0, 40); 1458 item3.vertex = true; 1459 item1.insert(item3); 1460 var item4 = new mxCell('Something else here', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1461 item4.geometry.relative = true; 1462 item4.geometry.offset = new mxPoint(0, 70); 1463 item4.vertex = true; 1464 item1.insert(item4); 1465 var item5 = new mxCell('', new mxGeometry(0, 0, 170, 10), 'shape=line;strokeColor=#999999;perimeter=none;resizeWidth=1;'); 1466 item5.geometry.relative = true; 1467 item5.geometry.offset = new mxPoint(0, 100); 1468 item5.vertex = true; 1469 item1.insert(item5); 1470 var item6 = new mxCell('Separated link', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1471 item6.geometry.relative = true; 1472 item6.geometry.offset = new mxPoint(0, 110); 1473 item6.vertex = true; 1474 item1.insert(item6); 1475 1476 return sb.createVertexTemplateFromCells([bg, item1], 170, 193, 'Dropdown button'); 1477 }), 1478 1479 this.addEntry(dt + 'dropdown button', function() 1480 { 1481 var bg = new mxCell( 1482 'Success', 1483 new mxGeometry(0, 0, 85, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#33A64C;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;'); 1484 bg.vertex = true; 1485 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#ffffff;strokeColor=none;perimeter=none;'); 1486 marker1.geometry.relative = true; 1487 marker1.geometry.offset = new mxPoint(-17, -2.5); 1488 marker1.vertex = true; 1489 bg.insert(marker1); 1490 var item1 = new mxCell('', new mxGeometry(0, 43, 170, 150), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;'); 1491 item1.vertex = true; 1492 var item2 = new mxCell('Action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1493 item2.geometry.relative = true; 1494 item2.geometry.offset = new mxPoint(0, 10); 1495 item2.vertex = true; 1496 item1.insert(item2); 1497 var item3 = new mxCell('Another action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1498 item3.geometry.relative = true; 1499 item3.geometry.offset = new mxPoint(0, 40); 1500 item3.vertex = true; 1501 item1.insert(item3); 1502 var item4 = new mxCell('Something else here', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1503 item4.geometry.relative = true; 1504 item4.geometry.offset = new mxPoint(0, 70); 1505 item4.vertex = true; 1506 item1.insert(item4); 1507 var item5 = new mxCell('', new mxGeometry(0, 0, 170, 10), 'shape=line;strokeColor=#999999;perimeter=none;resizeWidth=1;'); 1508 item5.geometry.relative = true; 1509 item5.geometry.offset = new mxPoint(0, 100); 1510 item5.vertex = true; 1511 item1.insert(item5); 1512 var item6 = new mxCell('Separated link', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1513 item6.geometry.relative = true; 1514 item6.geometry.offset = new mxPoint(0, 110); 1515 item6.vertex = true; 1516 item1.insert(item6); 1517 1518 return sb.createVertexTemplateFromCells([bg, item1], 170, 193, 'Dropdown button'); 1519 }), 1520 1521 this.addEntry(dt + 'dropdown button', function() 1522 { 1523 var bg = new mxCell( 1524 'Info', 1525 new mxGeometry(0, 0, 60, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#1CA5B8;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;'); 1526 bg.vertex = true; 1527 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#ffffff;strokeColor=none;perimeter=none;'); 1528 marker1.geometry.relative = true; 1529 marker1.geometry.offset = new mxPoint(-17, -2.5); 1530 marker1.vertex = true; 1531 bg.insert(marker1); 1532 var item1 = new mxCell('', new mxGeometry(0, 43, 170, 150), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;'); 1533 item1.vertex = true; 1534 var item2 = new mxCell('Action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1535 item2.geometry.relative = true; 1536 item2.geometry.offset = new mxPoint(0, 10); 1537 item2.vertex = true; 1538 item1.insert(item2); 1539 var item3 = new mxCell('Another action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1540 item3.geometry.relative = true; 1541 item3.geometry.offset = new mxPoint(0, 40); 1542 item3.vertex = true; 1543 item1.insert(item3); 1544 var item4 = new mxCell('Something else here', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1545 item4.geometry.relative = true; 1546 item4.geometry.offset = new mxPoint(0, 70); 1547 item4.vertex = true; 1548 item1.insert(item4); 1549 var item5 = new mxCell('', new mxGeometry(0, 0, 170, 10), 'shape=line;strokeColor=#999999;perimeter=none;resizeWidth=1;'); 1550 item5.geometry.relative = true; 1551 item5.geometry.offset = new mxPoint(0, 100); 1552 item5.vertex = true; 1553 item1.insert(item5); 1554 var item6 = new mxCell('Separated link', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1555 item6.geometry.relative = true; 1556 item6.geometry.offset = new mxPoint(0, 110); 1557 item6.vertex = true; 1558 item1.insert(item6); 1559 1560 return sb.createVertexTemplateFromCells([bg, item1], 170, 193, 'Dropdown button'); 1561 }), 1562 1563 this.addEntry(dt + 'dropdown button', function() 1564 { 1565 var bg = new mxCell( 1566 'Warning', 1567 new mxGeometry(0, 0, 90, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#FFBC26;fontColor=#000000;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;'); 1568 bg.vertex = true; 1569 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#000000;strokeColor=none;perimeter=none;sketch=0;'); 1570 marker1.geometry.relative = true; 1571 marker1.geometry.offset = new mxPoint(-17, -2.5); 1572 marker1.vertex = true; 1573 bg.insert(marker1); 1574 var item1 = new mxCell('', new mxGeometry(0, 43, 170, 150), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;'); 1575 item1.vertex = true; 1576 var item2 = new mxCell('Action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1577 item2.geometry.relative = true; 1578 item2.geometry.offset = new mxPoint(0, 10); 1579 item2.vertex = true; 1580 item1.insert(item2); 1581 var item3 = new mxCell('Another action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1582 item3.geometry.relative = true; 1583 item3.geometry.offset = new mxPoint(0, 40); 1584 item3.vertex = true; 1585 item1.insert(item3); 1586 var item4 = new mxCell('Something else here', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1587 item4.geometry.relative = true; 1588 item4.geometry.offset = new mxPoint(0, 70); 1589 item4.vertex = true; 1590 item1.insert(item4); 1591 var item5 = new mxCell('', new mxGeometry(0, 0, 170, 10), 'shape=line;strokeColor=#999999;perimeter=none;resizeWidth=1;'); 1592 item5.geometry.relative = true; 1593 item5.geometry.offset = new mxPoint(0, 100); 1594 item5.vertex = true; 1595 item1.insert(item5); 1596 var item6 = new mxCell('Separated link', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1597 item6.geometry.relative = true; 1598 item6.geometry.offset = new mxPoint(0, 110); 1599 item6.vertex = true; 1600 item1.insert(item6); 1601 1602 return sb.createVertexTemplateFromCells([bg, item1], 170, 193, 'Dropdown button'); 1603 }), 1604 1605 this.addEntry(dt + 'dropdown button', function() 1606 { 1607 var bg = new mxCell( 1608 'Danger', 1609 new mxGeometry(0, 0, 80, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#DB2843;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;'); 1610 bg.vertex = true; 1611 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#ffffff;strokeColor=none;perimeter=none;'); 1612 marker1.geometry.relative = true; 1613 marker1.geometry.offset = new mxPoint(-17, -2.5); 1614 marker1.vertex = true; 1615 bg.insert(marker1); 1616 var item1 = new mxCell('', new mxGeometry(0, 43, 170, 150), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;'); 1617 item1.vertex = true; 1618 var item2 = new mxCell('Action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1619 item2.geometry.relative = true; 1620 item2.geometry.offset = new mxPoint(0, 10); 1621 item2.vertex = true; 1622 item1.insert(item2); 1623 var item3 = new mxCell('Another action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1624 item3.geometry.relative = true; 1625 item3.geometry.offset = new mxPoint(0, 40); 1626 item3.vertex = true; 1627 item1.insert(item3); 1628 var item4 = new mxCell('Something else here', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1629 item4.geometry.relative = true; 1630 item4.geometry.offset = new mxPoint(0, 70); 1631 item4.vertex = true; 1632 item1.insert(item4); 1633 var item5 = new mxCell('', new mxGeometry(0, 0, 170, 10), 'shape=line;strokeColor=#999999;perimeter=none;resizeWidth=1;'); 1634 item5.geometry.relative = true; 1635 item5.geometry.offset = new mxPoint(0, 100); 1636 item5.vertex = true; 1637 item1.insert(item5); 1638 var item6 = new mxCell('Separated link', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1639 item6.geometry.relative = true; 1640 item6.geometry.offset = new mxPoint(0, 110); 1641 item6.vertex = true; 1642 item1.insert(item6); 1643 1644 return sb.createVertexTemplateFromCells([bg, item1], 170, 193, 'Dropdown button'); 1645 }), 1646 1647 this.addEntry(dt + 'dropup button', function() 1648 { 1649 var bg = new mxCell( 1650 'Dropup', 1651 new mxGeometry(0, 0, 80, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;'); 1652 bg.vertex = true; 1653 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=north;fillColor=#ffffff;strokeColor=none;perimeter=none;'); 1654 marker1.geometry.relative = true; 1655 marker1.geometry.offset = new mxPoint(-17, -2.5); 1656 marker1.vertex = true; 1657 bg.insert(marker1); 1658 1659 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropup button'); 1660 }), 1661 1662 this.addEntry(dt + 'dropup button', function() 1663 { 1664 var bg = new mxCell( 1665 'Dropup', 1666 new mxGeometry(0, 153, 80, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;'); 1667 bg.vertex = true; 1668 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=north;fillColor=#ffffff;strokeColor=none;perimeter=none;'); 1669 marker1.geometry.relative = true; 1670 marker1.geometry.offset = new mxPoint(-17, -2.5); 1671 marker1.vertex = true; 1672 bg.insert(marker1); 1673 var item1 = new mxCell('', new mxGeometry(0, 0, 170, 150), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;'); 1674 item1.vertex = true; 1675 var item2 = new mxCell('Action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1676 item2.geometry.relative = true; 1677 item2.geometry.offset = new mxPoint(0, 10); 1678 item2.vertex = true; 1679 item1.insert(item2); 1680 var item3 = new mxCell('Another action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1681 item3.geometry.relative = true; 1682 item3.geometry.offset = new mxPoint(0, 40); 1683 item3.vertex = true; 1684 item1.insert(item3); 1685 var item4 = new mxCell('Something else here', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1686 item4.geometry.relative = true; 1687 item4.geometry.offset = new mxPoint(0, 70); 1688 item4.vertex = true; 1689 item1.insert(item4); 1690 var item5 = new mxCell('', new mxGeometry(0, 0, 170, 10), 'shape=line;strokeColor=#999999;perimeter=none;resizeWidth=1;'); 1691 item5.geometry.relative = true; 1692 item5.geometry.offset = new mxPoint(0, 100); 1693 item5.vertex = true; 1694 item1.insert(item5); 1695 var item6 = new mxCell('Separated link', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1696 item6.geometry.relative = true; 1697 item6.geometry.offset = new mxPoint(0, 110); 1698 item6.vertex = true; 1699 item1.insert(item6); 1700 1701 return sb.createVertexTemplateFromCells([bg, item1], 170, 193, 'Dropup button'); 1702 }), 1703 1704 this.addEntry(dt + 'dropright button', function() 1705 { 1706 var bg = new mxCell( 1707 'Dropright', 1708 new mxGeometry(0, 0, 95, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;'); 1709 bg.vertex = true; 1710 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 5, 10), 'shape=triangle;direction=east;fillColor=#ffffff;strokeColor=none;perimeter=none;'); 1711 marker1.geometry.relative = true; 1712 marker1.geometry.offset = new mxPoint(-15, -5); 1713 marker1.vertex = true; 1714 bg.insert(marker1); 1715 1716 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropright button'); 1717 }), 1718 1719 this.addEntry(dt + 'dropright button', function() 1720 { 1721 var bg = new mxCell( 1722 'Dropright', 1723 new mxGeometry(0, 0, 95, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;'); 1724 bg.vertex = true; 1725 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 5, 10), 'shape=triangle;direction=east;fillColor=#ffffff;strokeColor=none;perimeter=none;'); 1726 marker1.geometry.relative = true; 1727 marker1.geometry.offset = new mxPoint(-15, -5); 1728 marker1.vertex = true; 1729 bg.insert(marker1); 1730 var item1 = new mxCell('', new mxGeometry(98, 0, 170, 150), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;'); 1731 item1.vertex = true; 1732 var item2 = new mxCell('Action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1733 item2.geometry.relative = true; 1734 item2.geometry.offset = new mxPoint(0, 10); 1735 item2.vertex = true; 1736 item1.insert(item2); 1737 var item3 = new mxCell('Another action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1738 item3.geometry.relative = true; 1739 item3.geometry.offset = new mxPoint(0, 40); 1740 item3.vertex = true; 1741 item1.insert(item3); 1742 var item4 = new mxCell('Something else here', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1743 item4.geometry.relative = true; 1744 item4.geometry.offset = new mxPoint(0, 70); 1745 item4.vertex = true; 1746 item1.insert(item4); 1747 var item5 = new mxCell('', new mxGeometry(0, 0, 170, 10), 'shape=line;strokeColor=#999999;perimeter=none;resizeWidth=1;'); 1748 item5.geometry.relative = true; 1749 item5.geometry.offset = new mxPoint(0, 100); 1750 item5.vertex = true; 1751 item1.insert(item5); 1752 var item6 = new mxCell('Separated link', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1753 item6.geometry.relative = true; 1754 item6.geometry.offset = new mxPoint(0, 110); 1755 item6.vertex = true; 1756 item1.insert(item6); 1757 1758 return sb.createVertexTemplateFromCells([bg, item1], 268, 150, 'Dropright button'); 1759 }), 1760 1761 this.addEntry(dt + 'dropleft button', function() 1762 { 1763 var bg = new mxCell( 1764 'Dropleft', 1765 new mxGeometry(0, 0, 85, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#ffffff;whiteSpace=wrap;align=right;verticalAlign=middle;fontStyle=0;fontSize=14;spacingRight=10;'); 1766 bg.vertex = true; 1767 var marker1 = new mxCell('', new mxGeometry(0, 0.5, 5, 10), 'shape=triangle;direction=west;fillColor=#ffffff;strokeColor=none;perimeter=none;'); 1768 marker1.geometry.relative = true; 1769 marker1.geometry.offset = new mxPoint(10, -5); 1770 marker1.vertex = true; 1771 bg.insert(marker1); 1772 1773 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Dropleft button'); 1774 }), 1775 1776 this.addEntry(dt + 'dropleft button', function() 1777 { 1778 var bg = new mxCell( 1779 'Dropleft', 1780 new mxGeometry(173, 0, 85, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#ffffff;whiteSpace=wrap;align=right;verticalAlign=middle;fontStyle=0;fontSize=14;spacingRight=10;'); 1781 bg.vertex = true; 1782 var marker1 = new mxCell('', new mxGeometry(0, 0.5, 5, 10), 'shape=triangle;direction=west;fillColor=#ffffff;strokeColor=none;perimeter=none;'); 1783 marker1.geometry.relative = true; 1784 marker1.geometry.offset = new mxPoint(10, -5); 1785 marker1.vertex = true; 1786 bg.insert(marker1); 1787 var item1 = new mxCell('', new mxGeometry(0, 0, 170, 150), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;'); 1788 item1.vertex = true; 1789 var item2 = new mxCell('Action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1790 item2.geometry.relative = true; 1791 item2.geometry.offset = new mxPoint(0, 10); 1792 item2.vertex = true; 1793 item1.insert(item2); 1794 var item3 = new mxCell('Another action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1795 item3.geometry.relative = true; 1796 item3.geometry.offset = new mxPoint(0, 40); 1797 item3.vertex = true; 1798 item1.insert(item3); 1799 var item4 = new mxCell('Something else here', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1800 item4.geometry.relative = true; 1801 item4.geometry.offset = new mxPoint(0, 70); 1802 item4.vertex = true; 1803 item1.insert(item4); 1804 var item5 = new mxCell('', new mxGeometry(0, 0, 170, 10), 'shape=line;strokeColor=#999999;perimeter=none;resizeWidth=1;'); 1805 item5.geometry.relative = true; 1806 item5.geometry.offset = new mxPoint(0, 100); 1807 item5.vertex = true; 1808 item1.insert(item5); 1809 var item6 = new mxCell('Separated link', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1810 item6.geometry.relative = true; 1811 item6.geometry.offset = new mxPoint(0, 110); 1812 item6.vertex = true; 1813 item1.insert(item6); 1814 1815 return sb.createVertexTemplateFromCells([bg, item1], 268, 150, 'Dropleft button'); 1816 }), 1817 1818 this.addEntry(dt + 'list with active item', function() 1819 { 1820 var bg = new mxCell('', new mxGeometry(0, 0, 170, 110), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;'); 1821 bg.vertex = true; 1822 var item1 = new mxCell('Regular link', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1823 item1.geometry.relative = true; 1824 item1.geometry.offset = new mxPoint(0, 10); 1825 item1.vertex = true; 1826 bg.insert(item1); 1827 var item2 = new mxCell('Active link', new mxGeometry(0, 0, 170, 30), 'fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;align=left;spacing=20;fontSize=14;sketch=0;'); 1828 item2.geometry.relative = true; 1829 item2.geometry.offset = new mxPoint(0, 40); 1830 item2.vertex = true; 1831 bg.insert(item2); 1832 var item3 = new mxCell('Another link', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1833 item3.geometry.relative = true; 1834 item3.geometry.offset = new mxPoint(0, 70); 1835 item3.vertex = true; 1836 bg.insert(item3); 1837 1838 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'List with active item'); 1839 }), 1840 1841 this.addEntry(dt + 'list with disabled item', function() 1842 { 1843 var bg = new mxCell('', new mxGeometry(0, 0, 170, 110), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;'); 1844 bg.vertex = true; 1845 var item1 = new mxCell('Regular link', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1846 item1.geometry.relative = true; 1847 item1.geometry.offset = new mxPoint(0, 10); 1848 item1.vertex = true; 1849 bg.insert(item1); 1850 var item2 = new mxCell('Disabled link', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;fontColor=#6C767D;align=left;spacing=20;fontSize=14;'); 1851 item2.geometry.relative = true; 1852 item2.geometry.offset = new mxPoint(0, 40); 1853 item2.vertex = true; 1854 bg.insert(item2); 1855 var item3 = new mxCell('Another link', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1856 item3.geometry.relative = true; 1857 item3.geometry.offset = new mxPoint(0, 70); 1858 item3.vertex = true; 1859 bg.insert(item3); 1860 1861 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'List with disabled item'); 1862 }), 1863 1864 this.addEntry(dt + 'dropdown right aligned menu', function() 1865 { 1866 var bg = new mxCell( 1867 'Right-aligned menu', 1868 new mxGeometry(15, 0, 155, 40), s + 'rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;'); 1869 bg.vertex = true; 1870 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#ffffff;strokeColor=none;perimeter=none;'); 1871 marker1.geometry.relative = true; 1872 marker1.geometry.offset = new mxPoint(-17, -2.5); 1873 marker1.vertex = true; 1874 bg.insert(marker1); 1875 var item1 = new mxCell('', new mxGeometry(0, 43, 170, 110), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;'); 1876 item1.vertex = true; 1877 var item2 = new mxCell('Action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1878 item2.geometry.relative = true; 1879 item2.geometry.offset = new mxPoint(0, 10); 1880 item2.vertex = true; 1881 item1.insert(item2); 1882 var item3 = new mxCell('Another action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1883 item3.geometry.relative = true; 1884 item3.geometry.offset = new mxPoint(0, 40); 1885 item3.vertex = true; 1886 item1.insert(item3); 1887 var item4 = new mxCell('Something else here', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1888 item4.geometry.relative = true; 1889 item4.geometry.offset = new mxPoint(0, 70); 1890 item4.vertex = true; 1891 item1.insert(item4); 1892 1893 return sb.createVertexTemplateFromCells([bg, item1], 170, 153, 'Dropdown with right aligned menu'); 1894 }), 1895 1896 this.addEntry(dt + 'list with dropdown header', function() 1897 { 1898 var bg = new mxCell('', new mxGeometry(0, 0, 140, 110), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;'); 1899 bg.vertex = true; 1900 var item1 = new mxCell('Dropdown header', new mxGeometry(0, 0, 140, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=12;fontColor=#757E85;fontStyle=1;'); 1901 item1.geometry.relative = true; 1902 item1.geometry.offset = new mxPoint(0, 10); 1903 item1.vertex = true; 1904 bg.insert(item1); 1905 var item2 = new mxCell('Action', new mxGeometry(0, 0, 140, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1906 item2.geometry.relative = true; 1907 item2.geometry.offset = new mxPoint(0, 40); 1908 item2.vertex = true; 1909 bg.insert(item2); 1910 var item3 = new mxCell('Another action', new mxGeometry(0, 0, 140, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1911 item3.geometry.relative = true; 1912 item3.geometry.offset = new mxPoint(0, 70); 1913 item3.vertex = true; 1914 bg.insert(item3); 1915 1916 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'List with dropdown header'); 1917 }), 1918 1919 this.addEntry(dt + 'list with divider', function() 1920 { 1921 var bg = new mxCell('', new mxGeometry(0, 0, 170, 150), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;'); 1922 bg.vertex = true; 1923 var item2 = new mxCell('Action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1924 item2.geometry.relative = true; 1925 item2.geometry.offset = new mxPoint(0, 10); 1926 item2.vertex = true; 1927 bg.insert(item2); 1928 var item3 = new mxCell('Another action', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1929 item3.geometry.relative = true; 1930 item3.geometry.offset = new mxPoint(0, 40); 1931 item3.vertex = true; 1932 bg.insert(item3); 1933 var item4 = new mxCell('Something else here', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1934 item4.geometry.relative = true; 1935 item4.geometry.offset = new mxPoint(0, 70); 1936 item4.vertex = true; 1937 bg.insert(item4); 1938 var item5 = new mxCell('', new mxGeometry(0, 0, 170, 10), 'shape=line;strokeColor=#999999;perimeter=none;resizeWidth=1;'); 1939 item5.geometry.relative = true; 1940 item5.geometry.offset = new mxPoint(0, 100); 1941 item5.vertex = true; 1942 bg.insert(item5); 1943 var item6 = new mxCell('Separated link', new mxGeometry(0, 0, 170, 30), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1944 item6.geometry.relative = true; 1945 item6.geometry.offset = new mxPoint(0, 110); 1946 item6.vertex = true; 1947 bg.insert(item6); 1948 1949 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'List with divider'); 1950 }), 1951 1952 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#999999;strokeWidth=1;fillColor=#FFFFFF;fontColor=#6C767D;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;fontSize=14;spacing=10;', 1953 170, 160, 1954 'Some example text that\'s free-flowing within the dropdown menu.<br style="font-size: 14px"><br style="font-size: 14px">And this is more example text.', 1955 'Text', null, null, this.getTagsForStencil(gn, 'text', dt + 'text').join(' ')), 1956 1957 this.addEntry(dt + 'list with divider', function() 1958 { 1959 var bg = new mxCell('', new mxGeometry(0, 0, 220, 345), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;'); 1960 bg.vertex = true; 1961 var item1 = new mxCell('Email address', new mxGeometry(0, 0, 220, 40), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1962 item1.geometry.relative = true; 1963 item1.geometry.offset = new mxPoint(0, 10); 1964 item1.vertex = true; 1965 bg.insert(item1); 1966 var item2 = new mxCell('email@example.com', new mxGeometry(0, 0, 180, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 1967 item2.geometry.relative = true; 1968 item2.geometry.offset = new mxPoint(20, 50); 1969 item2.vertex = true; 1970 bg.insert(item2); 1971 var item3 = new mxCell('Password', new mxGeometry(0, 0, 220, 40), 'fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1972 item3.geometry.relative = true; 1973 item3.geometry.offset = new mxPoint(0, 90); 1974 item3.vertex = true; 1975 bg.insert(item3); 1976 var item4 = new mxCell('Password', new mxGeometry(0, 0, 180, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 1977 item4.geometry.relative = true; 1978 item4.geometry.offset = new mxPoint(20, 130); 1979 item4.vertex = true; 1980 bg.insert(item4); 1981 var item5 = new mxCell('Remember me', new mxGeometry(0, 0, 10, 10), s + 'rrect;rSize=2;fillColor=#EDEDED;strokeColor=#999999;align=left;fontSize=14;fontColor=#000000;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=5;spacingTop=-2;gradientColor=#DEDEDE;'); 1982 item5.geometry.relative = true; 1983 item5.geometry.offset = new mxPoint(20, 180); 1984 item5.vertex = true; 1985 bg.insert(item5); 1986 var item6 = new mxCell('Sign in', new mxGeometry(0, 0, 70, 40), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;align=center;fontSize=14;fontColor=#FFFFFF;'); 1987 item6.geometry.relative = true; 1988 item6.geometry.offset = new mxPoint(20, 210); 1989 item6.vertex = true; 1990 bg.insert(item6); 1991 var item7 = new mxCell('', new mxGeometry(0, 0, 220, 10), 'shape=line;strokeColor=#999999;perimeter=none;resizeWidth=1;'); 1992 item7.geometry.relative = true; 1993 item7.geometry.offset = new mxPoint(0, 260); 1994 item7.vertex = true; 1995 bg.insert(item7); 1996 var item8 = new mxCell('New around here? Sign up<br><br>Forgot password?', new mxGeometry(0, 0, 220, 60), 'html=1;fillColor=none;strokeColor=none;align=left;spacing=20;fontSize=14;'); 1997 item8.geometry.relative = true; 1998 item8.geometry.offset = new mxPoint(0, 275); 1999 item8.vertex = true; 2000 bg.insert(item8); 2001 2002 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'List with divider'); 2003 }), 2004 2005 this.addEntry(dt + 'form', function() 2006 { 2007 var item1 = new mxCell('Email address', new mxGeometry(0, 0, 260, 40), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2008 item1.geometry.relative = true; 2009 item1.vertex = true; 2010 var item2 = new mxCell('', new mxGeometry(0, 0, 800, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2011 item2.geometry.relative = true; 2012 item2.geometry.offset = new mxPoint(0, 40); 2013 item2.vertex = true; 2014 var item3 = new mxCell('We\'ll never share your email with anyone else.', new mxGeometry(0, 0, 260, 30), 'fillColor=none;strokeColor=none;align=left;spacing=2;fontSize=12;fontColor=#999999;'); 2015 item3.geometry.relative = true; 2016 item3.geometry.offset = new mxPoint(0, 70); 2017 item3.vertex = true; 2018 var item4 = new mxCell('Password', new mxGeometry(0, 0, 260, 40), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2019 item4.geometry.relative = true; 2020 item4.geometry.offset = new mxPoint(0, 100); 2021 item4.vertex = true; 2022 var item5 = new mxCell('', new mxGeometry(0, 0, 800, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2023 item5.geometry.relative = true; 2024 item5.geometry.offset = new mxPoint(0, 140); 2025 item5.vertex = true; 2026 var item6 = new mxCell('Check me out', new mxGeometry(0, 0, 10, 10), s + 'rrect;rSize=2;fillColor=#EDEDED;strokeColor=#999999;align=left;fontSize=14;fontColor=#000000;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=5;spacingTop=-2;gradientColor=#DEDEDE;'); 2027 item6.geometry.relative = true; 2028 item6.geometry.offset = new mxPoint(0, 190); 2029 item6.vertex = true; 2030 var item7 = new mxCell('Sign in', new mxGeometry(0, 0, 70, 40), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;align=center;fontSize=14;fontColor=#FFFFFF;'); 2031 item7.geometry.relative = true; 2032 item7.geometry.offset = new mxPoint(0, 220); 2033 item7.vertex = true; 2034 2035 return sb.createVertexTemplateFromCells([item1, item2, item3, item4, item5, item6, item7], 800, 500, 'Form'); 2036 }), 2037 2038 this.addEntry(dt + 'form controls', function() 2039 { 2040 var item1 = new mxCell('Email address', new mxGeometry(0, 0, 260, 40), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2041 item1.vertex = true; 2042 var item2 = new mxCell('name@example.com', new mxGeometry(0, 0, 800, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2043 item2.geometry.relative = true; 2044 item2.geometry.offset = new mxPoint(0, 40); 2045 item2.vertex = true; 2046 var item3 = new mxCell('Example select', new mxGeometry(0, 0, 260, 40), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2047 item3.geometry.relative = true; 2048 item3.geometry.offset = new mxPoint(0, 80); 2049 item3.vertex = true; 2050 var item4 = new mxCell('1', new mxGeometry(0, 0, 800, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2051 item4.geometry.relative = true; 2052 item4.geometry.offset = new mxPoint(0, 120); 2053 item4.vertex = true; 2054 var item5 = new mxCell('Example multiple select', new mxGeometry(0, 0, 260, 40), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2055 item5.geometry.relative = true; 2056 item5.geometry.offset = new mxPoint(0, 160); 2057 item5.vertex = true; 2058 var item6 = new mxCell('', new mxGeometry(0, 0, 800, 100), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2059 item6.geometry.relative = true; 2060 item6.geometry.offset = new mxPoint(0, 200); 2061 item6.vertex = true; 2062 var item7 = new mxCell('', new mxGeometry(1, 0, 20, 100), s + 'rightButton;rSize=5;fillColor=#F1F1F1;strokeColor=#999999;'); 2063 item7.geometry.relative = true; 2064 item7.geometry.offset = new mxPoint(-20, 0); 2065 item7.vertex = true; 2066 item6.insert(item7); 2067 var item8 = new mxCell('', new mxGeometry(0, 0, 16, 45), 'fillColor=#C1C1C1;strokeColor=none;'); 2068 item8.geometry.relative = true; 2069 item8.geometry.offset = new mxPoint(2, 20); 2070 item8.vertex = true; 2071 item7.insert(item8); 2072 var item9 = new mxCell('', new mxGeometry(0, 0, 10, 5), 'shape=triangle;direction=north;fillColor=#C1C1C1;strokeColor=none;perimeter=none;'); 2073 item9.geometry.relative = true; 2074 item9.geometry.offset = new mxPoint(5, 7.5); 2075 item9.vertex = true; 2076 item7.insert(item9); 2077 var item10 = new mxCell('', new mxGeometry(0, 1, 10, 5), 'shape=triangle;direction=south;fillColor=#505050;strokeColor=none;perimeter=none;'); 2078 item10.geometry.relative = true; 2079 item10.geometry.offset = new mxPoint(5, -12.5); 2080 item10.vertex = true; 2081 item7.insert(item10); 2082 var item11 = new mxCell('1', new mxGeometry(0, 0, 780, 20), 'fillColor=none;strokeColor=none;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2083 item11.geometry.relative = true; 2084 item11.geometry.offset = new mxPoint(0, 10); 2085 item11.vertex = true; 2086 item6.insert(item11); 2087 var item12 = new mxCell('2', new mxGeometry(0, 0, 780, 20), 'fillColor=none;strokeColor=none;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2088 item12.geometry.relative = true; 2089 item12.geometry.offset = new mxPoint(0, 30); 2090 item12.vertex = true; 2091 item6.insert(item12); 2092 var item13 = new mxCell('3', new mxGeometry(0, 0, 780, 20), 'fillColor=none;strokeColor=none;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2093 item13.geometry.relative = true; 2094 item13.geometry.offset = new mxPoint(0, 50); 2095 item13.vertex = true; 2096 item6.insert(item13); 2097 var item14 = new mxCell('4', new mxGeometry(0, 0, 780, 20), 'fillColor=none;strokeColor=none;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2098 item14.geometry.relative = true; 2099 item14.geometry.offset = new mxPoint(0, 70); 2100 item14.vertex = true; 2101 item6.insert(item14); 2102 var item15 = new mxCell('Example textarea', new mxGeometry(0, 0, 260, 40), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2103 item15.geometry.relative = true; 2104 item15.geometry.offset = new mxPoint(0, 310); 2105 item15.vertex = true; 2106 var item16 = new mxCell('', new mxGeometry(0, 0, 800, 90), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2107 item16.geometry.relative = true; 2108 item16.geometry.offset = new mxPoint(0, 350); 2109 item16.vertex = true; 2110 2111 return sb.createVertexTemplateFromCells([item1, item2, item3, item4, item5, item6, item15, item16], 800, 500, 'Form controls'); 2112 }), 2113 2114 this.addEntry(dt + 'file input form', function() 2115 { 2116 var item1 = new mxCell('Example file input', new mxGeometry(0, 0, 150, 40), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2117 item1.vertex = true; 2118 var item2 = new mxCell('Choose File', new mxGeometry(0, 40, 90, 30), 'fillColor=#FEFEFE;strokeColor=#AAAAAA;fontSize=14;gradientColor=#F0F0F0;'); 2119 item2.vertex = true; 2120 var item3 = new mxCell('No file chosen', new mxGeometry(90, 40, 100, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;spacing=5;'); 2121 item3.vertex = true; 2122 2123 return sb.createVertexTemplateFromCells([item1, item2, item3], 190, 70, 'File input form'); 2124 }), 2125 2126 this.addEntry(dt + 'large dropdown button', function() 2127 { 2128 var bg = new mxCell( 2129 'Large select', 2130 new mxGeometry(0, 0, 800, 50), s + 'rrect;rSize=5;strokeColor=#505050;strokeWidth=1;fillColor=#ffffff;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=18;spacing=20;'); 2131 bg.vertex = true; 2132 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#495057;strokeColor=none;perimeter=none;'); 2133 marker1.geometry.relative = true; 2134 marker1.geometry.offset = new mxPoint(-17, -2.5); 2135 marker1.vertex = true; 2136 bg.insert(marker1); 2137 2138 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Large dropdown button'); 2139 }), 2140 2141 this.addEntry(dt + 'default size dropdown button', function() 2142 { 2143 var bg = new mxCell( 2144 'Default select', 2145 new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#505050;strokeWidth=1;fillColor=#ffffff;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingRight=0;spacing=17;'); 2146 bg.vertex = true; 2147 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#495057;strokeColor=none;perimeter=none;'); 2148 marker1.geometry.relative = true; 2149 marker1.geometry.offset = new mxPoint(-17, -2.5); 2150 marker1.vertex = true; 2151 bg.insert(marker1); 2152 2153 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Default size dropdown button'); 2154 }), 2155 2156 this.addEntry(dt + 'small dropdown button', function() 2157 { 2158 var bg = new mxCell( 2159 'Small select', 2160 new mxGeometry(0, 0, 800, 30), s + 'rrect;rSize=5;strokeColor=#505050;strokeWidth=1;fillColor=#ffffff;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=12;spacing=15;'); 2161 bg.vertex = true; 2162 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#495057;strokeColor=none;perimeter=none;'); 2163 marker1.geometry.relative = true; 2164 marker1.geometry.offset = new mxPoint(-17, -2.5); 2165 marker1.vertex = true; 2166 bg.insert(marker1); 2167 2168 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Small dropdown button'); 2169 }), 2170 2171 this.createVertexTemplateEntry(s + 'rrect;rSize=5;strokeColor=#CED4DA;strokeWidth=1;fillColor=#E9ECEF;fontColor=#505050;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;fontSize=14;', 2172 800, 40, 'Readonly input here...', 'Readonly input', null, null, this.getTagsForStencil(gn, 'readonly input', dt + 'read only readonly input').join(' ')), 2173 2174 this.addEntry(dt + 'readonly plain text', function() 2175 { 2176 var item1 = new mxCell( 2177 'Email', 2178 new mxGeometry(0, 0, 150, 40), 'strokeColor=none;fillColor=none;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacing=15;'); 2179 item1.vertex = true; 2180 var item2 = new mxCell( 2181 'email@example.com', 2182 new mxGeometry(150, 0, 150, 40), 'strokeColor=none;fillColor=none;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;'); 2183 item2.vertex = true; 2184 var item3 = new mxCell( 2185 'Password', 2186 new mxGeometry(0, 50, 150, 40), 'strokeColor=none;fillColor=none;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacing=15;'); 2187 item3.vertex = true; 2188 var item4 = new mxCell( 2189 '', 2190 new mxGeometry(150, 50, 650, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacing=15;'); 2191 item4.vertex = true; 2192 2193 return sb.createVertexTemplateFromCells([item1, item2, item3, item4], 800, 90, 'Readonly plain text'); 2194 }), 2195 2196 this.addEntry(dt + 'readonly plain text', function() 2197 { 2198 var item1 = new mxCell( 2199 'email@example.com', 2200 new mxGeometry(0, 0, 150, 40), 'strokeColor=none;fillColor=none;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;'); 2201 item1.vertex = true; 2202 var item2 = new mxCell( 2203 'Password', 2204 new mxGeometry(150, 0, 200, 40), s + 'rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacing=15;'); 2205 item2.vertex = true; 2206 var item3 = new mxCell( 2207 'Confirm identity', 2208 new mxGeometry(360, 0, 125, 40), s + 'rrect;rSize=5;strokeColor=none;fillColor=#0085FC;fontColor=#ffffff;whiteSpace=wrap;align=center;verticalAlign=middle;fontStyle=0;fontSize=14;spacing=14;'); 2209 item3.vertex = true; 2210 2211 return sb.createVertexTemplateFromCells([item1, item2, item3], 485, 40, 'Readonly plain text'); 2212 }), 2213 2214 this.createVertexTemplateEntry(s + 'rangeInput;dx=0.78;strokeColor=#9D968E;fillColor=#E3DDD8;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=bottom;fontStyle=0;fontSize=14;labelPosition=center;verticalLabelPosition=top;gradientColor=#F4F2EF;gradientDirection=north;rangeStyle=rect;handleStyle=rect;', 2215 800, 20, 'Example range input', 'Range input', null, null, this.getTagsForStencil(gn, 'range input', dt + 'range input').join(' ')), 2216 2217 this.addEntry(dt + 'stacked checkboxes', function() 2218 { 2219 var item1 = new mxCell( 2220 'Default checkbox', 2221 new mxGeometry(0, 0, 10, 10), s + 'checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=1;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;'); 2222 item1.vertex = true; 2223 var item2 = new mxCell( 2224 'Disabled checkbox', 2225 new mxGeometry(0, 20, 10, 10), s + 'checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;fontColor=#6C767D;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;'); 2226 item2.vertex = true; 2227 2228 return sb.createVertexTemplateFromCells([item1, item2], 150, 30, 'Stacked checkboxes'); 2229 }), 2230 2231 this.addEntry(dt + 'stacked radio buttons', function() 2232 { 2233 var item1 = new mxCell( 2234 'Default radio', 2235 new mxGeometry(0, 0, 10, 10), s + 'radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=1;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;'); 2236 item1.vertex = true; 2237 var item2 = new mxCell( 2238 'Second default radio', 2239 new mxGeometry(0, 20, 10, 10), s + 'radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;'); 2240 item2.vertex = true; 2241 var item3 = new mxCell( 2242 'Disabled radio', 2243 new mxGeometry(0, 40, 10, 10), s + 'radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;fontColor=#6C767D;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;'); 2244 item3.vertex = true; 2245 2246 return sb.createVertexTemplateFromCells([item1, item2, item3], 150, 50, 'Stacked radio buttons'); 2247 }), 2248 2249 this.addEntry(dt + 'inline checkboxes', function() 2250 { 2251 var item1 = new mxCell( 2252 '1', 2253 new mxGeometry(0, 0, 10, 10), s + 'checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;'); 2254 item1.vertex = true; 2255 var item2 = new mxCell( 2256 '2', 2257 new mxGeometry(50, 0, 10, 10), s + 'checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;'); 2258 item2.vertex = true; 2259 var item3 = new mxCell( 2260 '(disabled)', 2261 new mxGeometry(100, 0, 10, 10), s + 'checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;strokeColor=#D0D0D0;spacing=5;fontColor=#6C767D;checkedFill=#0085FC;checkedStroke=#ffffff;'); 2262 item3.vertex = true; 2263 2264 return sb.createVertexTemplateFromCells([item1, item2, item3], 150, 10, 'Inline checkboxes'); 2265 }), 2266 2267 this.addEntry(dt + 'inline radio buttons', function() 2268 { 2269 var item1 = new mxCell( 2270 '1', 2271 new mxGeometry(0, 0, 10, 10), s + 'radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;'); 2272 item1.vertex = true; 2273 var item2 = new mxCell( 2274 '2', 2275 new mxGeometry(50, 0, 10, 10), s + 'radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;'); 2276 item2.vertex = true; 2277 var item3 = new mxCell( 2278 '(disabled)', 2279 new mxGeometry(100, 0, 10, 10), s + 'radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;strokeColor=#D0D0D0;spacing=5;fontColor=#6C767D;checkedFill=#0085FC;checkedStroke=#ffffff;'); 2280 item3.vertex = true; 2281 2282 return sb.createVertexTemplateFromCells([item1, item2, item3], 150, 10, 'Inline radio buttons'); 2283 }), 2284 2285 this.createVertexTemplateEntry(s + 'checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;', 2286 10, 10, '', 'Checkbox without label', null, null, this.getTagsForStencil(gn, 'checkbox without label', dt + 'checkbox without no label').join(' ')), 2287 2288 this.createVertexTemplateEntry(s + 'radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;', 2289 10, 10, '', 'Radio button without label', null, null, this.getTagsForStencil(gn, 'radio button without label', dt + 'radio button without no label').join(' ')), 2290 2291 this.addEntry(dt + 'form groups', function() 2292 { 2293 var item1 = new mxCell('Example label', new mxGeometry(0, 0, 260, 40), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#212529;'); 2294 item1.vertex = true; 2295 var item2 = new mxCell('Example input placeholder', new mxGeometry(0, 0, 800, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2296 item2.geometry.relative = true; 2297 item2.geometry.offset = new mxPoint(0, 40); 2298 item2.vertex = true; 2299 var item3 = new mxCell('Another label', new mxGeometry(0, 0, 260, 40), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#212529;'); 2300 item3.geometry.relative = true; 2301 item3.geometry.offset = new mxPoint(0, 80); 2302 item3.vertex = true; 2303 var item4 = new mxCell('Another input placeholder', new mxGeometry(0, 0, 800, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2304 item4.geometry.relative = true; 2305 item4.geometry.offset = new mxPoint(0, 120); 2306 item4.vertex = true; 2307 2308 return sb.createVertexTemplateFromCells([item1, item2, item3, item4], 800, 150, 'Form groups'); 2309 }), 2310 2311 this.addEntry(dt + 'form grid', function() 2312 { 2313 var item1 = new mxCell('First name', new mxGeometry(0, 0, 390, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2314 item1.vertex = true; 2315 var item2 = new mxCell('Last name', new mxGeometry(410, 0, 390, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2316 item2.vertex = true; 2317 2318 return sb.createVertexTemplateFromCells([item1, item2], 800, 30, 'Form grid'); 2319 }), 2320 2321 this.addEntry(dt + 'grid layout', function() 2322 { 2323 var item1 = new mxCell('Email', new mxGeometry(0, 0, 400, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#212529;'); 2324 item1.vertex = true; 2325 var item2 = new mxCell('', new mxGeometry(0, 30, 395, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2326 item2.vertex = true; 2327 var item3 = new mxCell('Password', new mxGeometry(400, 0, 400, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#212529;'); 2328 item3.vertex = true; 2329 var item4 = new mxCell('', new mxGeometry(405, 30, 395, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2330 item4.vertex = true; 2331 var item5 = new mxCell('Address', new mxGeometry(0, 70, 390, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#212529;'); 2332 item5.vertex = true; 2333 var item6 = new mxCell('1234 Main St', new mxGeometry(0, 100, 800, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2334 item6.vertex = true; 2335 var item7 = new mxCell('Address 2', new mxGeometry(0, 140, 390, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#212529;'); 2336 item7.vertex = true; 2337 var item8 = new mxCell('Apartment, studio or floor', new mxGeometry(0, 170, 800, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2338 item8.vertex = true; 2339 var item9 = new mxCell('City', new mxGeometry(0, 210, 390, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#212529;'); 2340 item9.vertex = true; 2341 var item10 = new mxCell('', new mxGeometry(0, 240, 390, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2342 item10.vertex = true; 2343 var item11 = new mxCell('State', new mxGeometry(410, 210, 220, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#212529;'); 2344 item11.vertex = true; 2345 var item12 = new mxCell('Choose...', new mxGeometry(410, 240, 270, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2346 item12.vertex = true; 2347 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#212529;strokeColor=none;perimeter=none;'); 2348 marker1.geometry.relative = true; 2349 marker1.geometry.offset = new mxPoint(-17, -2.5); 2350 marker1.vertex = true; 2351 item12.insert(marker1); 2352 var item13 = new mxCell('Zip', new mxGeometry(700, 210, 100, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#212529;'); 2353 item13.vertex = true; 2354 var item14 = new mxCell('', new mxGeometry(700, 240, 100, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2355 item14.vertex = true; 2356 var item15 = new mxCell( 2357 'Check me out', 2358 new mxGeometry(0, 290, 10, 10), s + 'checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;strokeColor=#999999;fontColor=#212529;checkedFill=#0085FC;checkedStroke=#ffffff;'); 2359 item15.vertex = true; 2360 var item16 = new mxCell('Sign in', new mxGeometry(0, 320, 70, 40), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;align=center;fontSize=14;fontColor=#FFFFFF;'); 2361 item16.vertex = true; 2362 2363 return sb.createVertexTemplateFromCells([item1, item2, item3, item4, item5, item6, item7, item8, item9, item10, item11, item12, item13, item14, item15, item16], 800, 360, 'Grid layout'); 2364 }), 2365 2366 this.addEntry(dt + 'horizontal form', function() 2367 { 2368 var item1 = new mxCell('Email', new mxGeometry(0, 0, 200, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#212529;'); 2369 item1.vertex = true; 2370 var item2 = new mxCell('', new mxGeometry(200, 0, 600, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2371 item2.vertex = true; 2372 var item3 = new mxCell('Password', new mxGeometry(0, 40, 200, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#212529;'); 2373 item3.vertex = true; 2374 var item4 = new mxCell('', new mxGeometry(200, 40, 600, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2375 item4.vertex = true; 2376 var item5 = new mxCell('Radios', new mxGeometry(0, 80, 200, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#212529;'); 2377 item5.vertex = true; 2378 var item6 = new mxCell( 2379 'First radio', 2380 new mxGeometry(200, 90, 10, 10), s + 'radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;strokeColor=#666666;checked=1;spacing=5;fontColor=#212529;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;'); 2381 item6.vertex = true; 2382 var item7 = new mxCell( 2383 'Second radio', 2384 new mxGeometry(200, 110, 10, 10), s + 'radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;strokeColor=#666666;checked=0;spacing=5;fontColor=#212529;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;'); 2385 item7.vertex = true; 2386 var item8 = new mxCell( 2387 'Third disabled radio', 2388 new mxGeometry(200, 130, 10, 10), s + 'radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;strokeColor=#D2D2D2;checked=0;spacing=5;fontColor=#7D868C;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;'); 2389 item8.vertex = true; 2390 var item9 = new mxCell('Checkbox', new mxGeometry(0, 160, 200, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#212529;'); 2391 item9.vertex = true; 2392 var item10 = new mxCell( 2393 'Example checkbox', 2394 new mxGeometry(200, 170, 10, 10), s + 'checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;strokeColor=#666666;checked=1;spacing=5;fontColor=#212529;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;'); 2395 item10.vertex = true; 2396 var item11 = new mxCell('Sign in', new mxGeometry(0, 200, 70, 40), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;align=center;fontSize=14;fontColor=#FFFFFF;sketch=0;'); 2397 item11.vertex = true; 2398 2399 return sb.createVertexTemplateFromCells([item1, item2, item3, item4, item5, item6, item7, item8, item9, item10, item11], 800, 200, 'Horizontal form'); 2400 }), 2401 2402 this.addEntry(dt + 'horizontal form label sizing', function() 2403 { 2404 var item1 = new mxCell('Email', new mxGeometry(0, 0, 200, 20), 'fillColor=none;strokeColor=none;align=left;fontSize=12;fontColor=#212529;'); 2405 item1.vertex = true; 2406 var item2 = new mxCell('col-form-label-sm', new mxGeometry(200, 0, 600, 20), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=12;fontColor=#6C767D;'); 2407 item2.vertex = true; 2408 2409 var item3 = new mxCell('Email', new mxGeometry(0, 35, 200, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#212529;'); 2410 item3.vertex = true; 2411 var item4 = new mxCell('col-form-label', new mxGeometry(200, 35, 600, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2412 item4.vertex = true; 2413 2414 var item5 = new mxCell('Email', new mxGeometry(0, 80, 200, 40), 'fillColor=none;strokeColor=none;align=left;fontSize=16;fontColor=#212529;'); 2415 item5.vertex = true; 2416 var item6 = new mxCell('col-form-label-lg', new mxGeometry(200, 80, 600, 40), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=16;fontColor=#6C767D;'); 2417 item6.vertex = true; 2418 2419 return sb.createVertexTemplateFromCells([item1, item2, item3, item4, item5, item6], 800, 110, 'Horizontal form label sizing'); 2420 }), 2421 2422 this.addEntry(dt + 'inline form', function() 2423 { 2424 var item1 = new mxCell('Jane Doe', new mxGeometry(0, 0, 200, 30), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2425 item1.vertex = true; 2426 var item2 = new mxCell('Username', new mxGeometry(210, 0, 200, 30), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;align=left;spacingLeft=50;fontSize=14;fontColor=#6C767D;'); 2427 item2.vertex = true; 2428 var item3 = new mxCell('@', new mxGeometry(0, 0, 40, 30), s + 'leftButton;rSize=5;strokeColor=#999999;fillColor=#f0f0f0;whiteSpace=wrap;resizeHeight=1;'); 2429 item3.geometry.relative = true; 2430 item3.vertex = true; 2431 item2.insert(item3); 2432 var item4 = new mxCell( 2433 'Remember me', 2434 new mxGeometry(420, 10, 10, 10), s + 'checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;strokeColor=#A6A6A6;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;'); 2435 item4.vertex = true; 2436 var item5 = new mxCell('Submit', new mxGeometry(530, 0, 60, 30), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;align=center;spacing=15;fontSize=14;fontColor=#ffffff;'); 2437 item5.vertex = true; 2438 2439 return sb.createVertexTemplateFromCells([item1, item2, item4, item5], 590, 30, 'Inline form'); 2440 }), 2441 2442 this.addEntry(dt + 'inline form', function() 2443 { 2444 var item1 = new mxCell('Choose...', new mxGeometry(0, 0, 100, 30), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2445 item1.vertex = true; 2446 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 7, 3), 'shape=triangle;direction=south;fillColor=#343A40;strokeColor=none;perimeter=none;sketch=0;'); 2447 marker1.geometry.relative = true; 2448 marker1.geometry.offset = new mxPoint(-17, 1); 2449 marker1.vertex = true; 2450 item1.insert(marker1); 2451 var marker2 = new mxCell('', new mxGeometry(1, 0.5, 7, 3), 'shape=triangle;direction=north;fillColor=#343A40;strokeColor=none;perimeter=none;sketch=0;'); 2452 marker2.geometry.relative = true; 2453 marker2.geometry.offset = new mxPoint(-17, -4); 2454 marker2.vertex = true; 2455 item1.insert(marker2); 2456 2457 var item2 = new mxCell( 2458 'Remember my preference', 2459 new mxGeometry(110, 10, 10, 10), s + 'checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;strokeColor=#A6A6A6;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;'); 2460 item2.vertex = true; 2461 var item3 = new mxCell('Submit', new mxGeometry(280, 0, 60, 30), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;align=center;spacing=15;fontSize=14;fontColor=#ffffff;sketch=0;'); 2462 item3.vertex = true; 2463 2464 return sb.createVertexTemplateFromCells([item1, item2, item3], 340, 30, 'Inline form'); 2465 }), 2466 2467 this.addEntry(dt + 'help text', function() 2468 { 2469 var item1 = new mxCell('Password', new mxGeometry(0, 0, 260, 40), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2470 item1.vertex = true; 2471 var item2 = new mxCell('', new mxGeometry(0, 40, 800, 30), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2472 item2.vertex = true; 2473 var item3 = new mxCell('Your password must be 8-20 characters long, contain letters and numbers and must not contain spaces, special characters or emoji.', 2474 new mxGeometry(0, 70, 260, 30), 'fillColor=none;strokeColor=none;align=left;spacing=2;fontSize=12;fontColor=#999999;'); 2475 item3.vertex = true; 2476 2477 return sb.createVertexTemplateFromCells([item1, item2, item3], 800, 100, 'Help text'); 2478 }), 2479 2480 this.addEntry(dt + 'help text', function() 2481 { 2482 var item1 = new mxCell('Password', new mxGeometry(0, 0, 70, 40), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2483 item1.vertex = true; 2484 var item2 = new mxCell('', new mxGeometry(80, 0, 200, 40), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2485 item2.vertex = true; 2486 var item3 = new mxCell('Must be 8-20 characters long.', 2487 new mxGeometry(290, 0, 170, 40), 'fillColor=none;strokeColor=none;align=left;spacing=2;fontSize=12;fontColor=#999999;'); 2488 item3.vertex = true; 2489 2490 return sb.createVertexTemplateFromCells([item1, item2, item3], 460, 40, 'Help text'); 2491 }), 2492 2493 this.addEntry(dt + 'help text', function() 2494 { 2495 var item1 = new mxCell('Disabled input', new mxGeometry(0, 0, 100, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2496 item1.vertex = true; 2497 var item2 = new mxCell('Disabled input', new mxGeometry(0, 30, 800, 40), s + 'rrect;rSize=5;fillColor=#E9ECEF;strokeColor=#CED4DA;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2498 item2.vertex = true; 2499 var item3 = new mxCell('Disabled select menu', new mxGeometry(0, 80, 100, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2500 item3.vertex = true; 2501 var item4 = new mxCell('Disabled select', new mxGeometry(0, 110, 800, 40), s + 'rrect;rSize=5;fillColor=#E9ECEF;strokeColor=#CED4DA;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2502 item4.vertex = true; 2503 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 7, 3), 'shape=triangle;direction=south;fillColor=#343A40;strokeColor=none;perimeter=none;'); 2504 marker1.geometry.relative = true; 2505 marker1.geometry.offset = new mxPoint(-17, 1); 2506 marker1.vertex = true; 2507 item4.insert(marker1); 2508 var item5 = new mxCell( 2509 'Can\'t check this', 2510 new mxGeometry(0, 170, 10, 10), s + 'checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;strokeColor=#A6A6A6;checked=0;spacing=5;fontColor=#6C767D;checkedFill=#0085FC;checkedStroke=#ffffff;'); 2511 item5.vertex = true; 2512 var item6 = new mxCell('Submit', new mxGeometry(0, 200, 70, 40), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;align=center;spacing=15;fontSize=14;fontColor=#ffffff;'); 2513 item6.vertex = true; 2514 2515 return sb.createVertexTemplateFromCells([item1, item2, item3, item4, item5, item6], 800, 240, 'Help text'); 2516 }), 2517 2518 this.addEntry(dt + 'custom styles', function() 2519 { 2520 var item1 = new mxCell('First name', new mxGeometry(0, 0, 100, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2521 item1.vertex = true; 2522 var item2 = new mxCell('Mark', new mxGeometry(0, 30, 260, 40), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#CED4DA;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2523 item2.vertex = true; 2524 var item3 = new mxCell('Last name', new mxGeometry(270, 0, 100, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2525 item3.vertex = true; 2526 var item4 = new mxCell('Otto', new mxGeometry(270, 30, 260, 40), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#CED4DA;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2527 item4.vertex = true; 2528 2529 var item5 = new mxCell('Username', new mxGeometry(540, 0, 100, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2530 item5.vertex = true; 2531 var item6 = new mxCell('', new mxGeometry(540, 30, 260, 40), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#CED4DA;align=left;spacingLeft=50;fontSize=14;fontColor=#6C767D;'); 2532 item6.vertex = true; 2533 var item7 = new mxCell('@', new mxGeometry(0, 0, 40, 40), s + 'leftButton;rSize=5;strokeColor=#CED4DA;fillColor=#f0f0f0;whiteSpace=wrap;resizeHeight=1;fontColor=#495057;'); 2534 item7.geometry.relative = true; 2535 item7.vertex = true; 2536 item6.insert(item7); 2537 2538 var item8 = new mxCell('City', new mxGeometry(0, 80, 100, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2539 item8.vertex = true; 2540 var item9 = new mxCell('', new mxGeometry(0, 110, 390, 40), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#CED4DA;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2541 item9.vertex = true; 2542 var item10 = new mxCell('State', new mxGeometry(400, 80, 100, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2543 item10.vertex = true; 2544 var item11 = new mxCell('Choose...', new mxGeometry(400, 110, 200, 40), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#CED4DA;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2545 item11.vertex = true; 2546 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 7, 3), 'shape=triangle;direction=south;fillColor=#343A40;strokeColor=none;perimeter=none;'); 2547 marker1.geometry.relative = true; 2548 marker1.geometry.offset = new mxPoint(-17, 1); 2549 marker1.vertex = true; 2550 item11.insert(marker1); 2551 var marker2 = new mxCell('', new mxGeometry(1, 0.5, 7, 3), 'shape=triangle;direction=north;fillColor=#343A40;strokeColor=none;perimeter=none;'); 2552 marker2.geometry.relative = true; 2553 marker2.geometry.offset = new mxPoint(-17, -4); 2554 marker2.vertex = true; 2555 item11.insert(marker2); 2556 var item12 = new mxCell('Zip', new mxGeometry(610, 80, 190, 30), 'fillColor=none;strokeColor=none;align=left;fontSize=14;'); 2557 item12.vertex = true; 2558 var item13 = new mxCell('', new mxGeometry(610, 110, 190, 40), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#CED4DA;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2559 item13.vertex = true; 2560 2561 var item14 = new mxCell( 2562 'Agree to term and conditions', 2563 new mxGeometry(0, 170, 10, 10), s + 'checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;strokeColor=#A6A6A6;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;'); 2564 item14.vertex = true; 2565 2566 var item15 = new mxCell('Submit form', new mxGeometry(0, 200, 120, 40), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;align=center;spacing=15;fontSize=14;fontColor=#ffffff;'); 2567 item15.vertex = true; 2568 2569 return sb.createVertexTemplateFromCells([item1, item2, item3, item4, item5, item6, item8, item9, item10, item11, item12, item13, item14, item15], 800, 240, 'Help text'); 2570 }), 2571 2572 this.createVertexTemplateEntry(s + 'switch;strokeColor=#ADB6BD;strokeWidth=1;fillColor=#ffffff;fontColor=#212529;onStrokeColor=#ffffff;onFillColor=#0085FC;align=left;verticalAlign=middle;spacingLeft=10;labelPosition=right;verticalLabelPosition=middle;buttonState=0;sketch=0;', 2573 20, 10, 'Toggle this switch element', 'Switch', null, null, this.getTagsForStencil(gn, 'switch', dt + 'switch').join(' ')), 2574 this.createVertexTemplateEntry(s + 'switch;strokeColor=#ADB6BD;strokeWidth=1;fillColor=#E9ECEF;fontColor=#7D868C;onStrokeColor=#ffffff;onFillColor=#0085FC;align=left;verticalAlign=middle;spacingLeft=10;labelPosition=right;verticalLabelPosition=middle;buttonState=0;sketch=0;', 2575 20, 10, 'Disabled switch element', 'Switch', null, null, this.getTagsForStencil(gn, 'switch', dt + 'switch').join(' ')), 2576 2577 this.addEntry(dt + 'select menu', function() 2578 { 2579 var item1 = new mxCell('Open this select menu', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;fillColor=#ffffff;strokeColor=#CED4DA;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2580 item1.vertex = true; 2581 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 7, 3), 'shape=triangle;direction=south;fillColor=#343A40;strokeColor=none;perimeter=none;'); 2582 marker1.geometry.relative = true; 2583 marker1.geometry.offset = new mxPoint(-17, 1); 2584 marker1.vertex = true; 2585 item1.insert(marker1); 2586 var marker2 = new mxCell('', new mxGeometry(1, 0.5, 7, 3), 'shape=triangle;direction=north;fillColor=#343A40;strokeColor=none;perimeter=none;'); 2587 marker2.geometry.relative = true; 2588 marker2.geometry.offset = new mxPoint(-17, -4); 2589 marker2.vertex = true; 2590 item1.insert(marker2); 2591 2592 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Select menu'); 2593 }), 2594 2595 this.addEntry(dt + 'form controls', function() 2596 { 2597 var item1 = new mxCell('', new mxGeometry(0, 0, 800, 100), s + 'rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;'); 2598 item1.vertex = true; 2599 var item2 = new mxCell('', new mxGeometry(1, 0, 20, 100), s + 'rightButton;rSize=5;fillColor=#F1F1F1;strokeColor=#999999;'); 2600 item2.geometry.relative = true; 2601 item2.geometry.offset = new mxPoint(-20, 0); 2602 item2.vertex = true; 2603 item1.insert(item2); 2604 var item3 = new mxCell('', new mxGeometry(0, 0, 16, 45), 'fillColor=#C1C1C1;strokeColor=none;'); 2605 item3.geometry.relative = true; 2606 item3.geometry.offset = new mxPoint(2, 20); 2607 item3.vertex = true; 2608 item2.insert(item3); 2609 var item4 = new mxCell('', new mxGeometry(0, 0, 10, 5), 'shape=triangle;direction=north;fillColor=#C1C1C1;strokeColor=none;perimeter=none;'); 2610 item4.geometry.relative = true; 2611 item4.geometry.offset = new mxPoint(5, 7.5); 2612 item4.vertex = true; 2613 item2.insert(item4); 2614 var item5 = new mxCell('', new mxGeometry(0, 1, 10, 5), 'shape=triangle;direction=south;fillColor=#505050;strokeColor=none;perimeter=none;'); 2615 item5.geometry.relative = true; 2616 item5.geometry.offset = new mxPoint(5, -12.5); 2617 item5.vertex = true; 2618 item2.insert(item5); 2619 var item6 = new mxCell('Open this select menu', new mxGeometry(0, 0, 760, 20), 'fillColor=#C8C8C8;strokeColor=none;align=left;fontSize=14;fontColor=#323232;'); 2620 item6.geometry.relative = true; 2621 item6.geometry.offset = new mxPoint(10, 10); 2622 item6.vertex = true; 2623 item1.insert(item6); 2624 var item7 = new mxCell('One', new mxGeometry(0, 0, 760, 20), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#495057;'); 2625 item7.geometry.relative = true; 2626 item7.geometry.offset = new mxPoint(10, 30); 2627 item7.vertex = true; 2628 item1.insert(item7); 2629 var item8 = new mxCell('Two', new mxGeometry(0, 0, 760, 20), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#495057;'); 2630 item8.geometry.relative = true; 2631 item8.geometry.offset = new mxPoint(10, 50); 2632 item8.vertex = true; 2633 item1.insert(item8); 2634 var item9 = new mxCell('Three', new mxGeometry(0, 0, 760, 20), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#495057;'); 2635 item9.geometry.relative = true; 2636 item9.geometry.offset = new mxPoint(10, 70); 2637 item9.vertex = true; 2638 item1.insert(item9); 2639 2640 return sb.createVertexTemplateFromCells([item1], item1.geometry.width, item1.geometry.height, 'Form controls'); 2641 }), 2642 2643 this.createVertexTemplateEntry(s + 'rangeInput;dx=0.6;strokeColor=#0085FC;fillColor=#DEE2E6;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=bottom;fontStyle=0;fontSize=14;labelPosition=center;verticalLabelPosition=top;', 2644 800, 20, 'Example range ', 'Range input', null, null, this.getTagsForStencil(gn, 'range input', dt + 'range input').join(' ')), 2645 2646 this.addEntry(dt + 'file browser', function() 2647 { 2648 var bg = new mxCell('Choose file', new mxGeometry(0, 0, 800, 30), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacingLeft=0;spacing=15;fontSize=14;'); 2649 bg.vertex = true; 2650 var button1 = new mxCell('Browse', new mxGeometry(1, 0, 70, 30), s + 'rightButton;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2651 button1.geometry.relative = true; 2652 button1.geometry.offset = new mxPoint(-70, 0); 2653 button1.vertex = true; 2654 bg.insert(button1); 2655 2656 return sb.createVertexTemplateFromCells([bg], 800, 30, 'File browser'); 2657 }), 2658 2659 this.addEntry(dt + 'basic input group', function() 2660 { 2661 var item1 = new mxCell('Username', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=40;fontSize=14;'); 2662 item1.vertex = true; 2663 var item2 = new mxCell('@', new mxGeometry(0, 0, 40, 40), s + 'leftButton;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2664 item2.vertex = true; 2665 item1.insert(item2); 2666 var item3 = new mxCell('Recipient\'s username', new mxGeometry(0, 60, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacingLeft=0;spacing=15;fontSize=14;'); 2667 item3.vertex = true; 2668 var item4 = new mxCell('@example.com', new mxGeometry(1, 0, 120, 40), s + 'rightButton;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2669 item4.geometry.relative = true; 2670 item4.geometry.offset = new mxPoint(-120, 0); 2671 item4.vertex = true; 2672 item3.insert(item4); 2673 var item5 = new mxCell('Your vanity URL', new mxGeometry(0, 110, 200, 30), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=none;fontColor=#212529;align=left;spacingLeft=0;fontSize=14;'); 2674 item5.vertex = true; 2675 var item6 = new mxCell('', new mxGeometry(0, 140, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=40;fontSize=14;'); 2676 item6.vertex = true; 2677 var item7 = new mxCell('http://example.com/users/', new mxGeometry(0, 0, 190, 40), s + 'leftButton;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2678 item7.vertex = true; 2679 item6.insert(item7); 2680 var item8 = new mxCell('', new mxGeometry(0, 200, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=40;fontSize=14;'); 2681 item8.vertex = true; 2682 var item9 = new mxCell('$', new mxGeometry(0, 0, 40, 40), s + 'leftButton;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2683 item9.vertex = true; 2684 item8.insert(item9); 2685 var item10 = new mxCell('.00', new mxGeometry(1, 0, 40, 40), s + 'rightButton;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2686 item10.geometry.relative = true; 2687 item10.geometry.offset = new mxPoint(-40, 0); 2688 item10.vertex = true; 2689 item8.insert(item10); 2690 var item11 = new mxCell('', new mxGeometry(0, 260, 800, 70), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=40;fontSize=14;'); 2691 item11.vertex = true; 2692 var item12 = new mxCell('With textarea', new mxGeometry(0, 0, 100, 70), s + 'leftButton;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2693 item12.vertex = true; 2694 item11.insert(item12); 2695 2696 return sb.createVertexTemplateFromCells([item1, item3, item5, item6, item8, item11], 800, 330, 'Basic input group'); 2697 }), 2698 2699 this.addEntry(dt + 'input group with checkbox', function() 2700 { 2701 var item1 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=40;fontSize=14;'); 2702 item1.vertex = true; 2703 var item2 = new mxCell('', new mxGeometry(0, 0, 40, 40), s + 'leftButton;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2704 item2.vertex = true; 2705 item1.insert(item2); 2706 var item3 = new mxCell( 2707 '', 2708 new mxGeometry(0.5, 0.5, 10, 10), s + 'checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;strokeColor=#A6A6A6;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;'); 2709 item3.geometry.relative = true; 2710 item3.geometry.offset = new mxPoint(-5, -5); 2711 item3.vertex = true; 2712 item2.insert(item3); 2713 2714 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Input groupwith checkbox'); 2715 }), 2716 2717 this.addEntry(dt + 'input group with radio button', function() 2718 { 2719 var item1 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=40;fontSize=14;'); 2720 item1.vertex = true; 2721 var item2 = new mxCell('', new mxGeometry(0, 0, 40, 40), s + 'leftButton;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2722 item2.vertex = true; 2723 item1.insert(item2); 2724 var item3 = new mxCell( 2725 '', 2726 new mxGeometry(0.5, 0.5, 10, 10), s + 'radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;strokeColor=#A6A6A6;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;'); 2727 item3.geometry.relative = true; 2728 item3.geometry.offset = new mxPoint(-5, -5); 2729 item3.vertex = true; 2730 item2.insert(item3); 2731 2732 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Input group with radio button'); 2733 }), 2734 2735 this.addEntry(dt + 'multiple input', function() 2736 { 2737 var item1 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=40;fontSize=14;'); 2738 item1.vertex = true; 2739 var item2 = new mxCell('First and last name', new mxGeometry(0, 0, 140, 40), s + 'leftButton;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2740 item2.vertex = true; 2741 item1.insert(item2); 2742 var item3 = new mxCell('', new mxGeometry(1, 0, 370, 40), s + 'rightButton;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2743 item3.geometry.relative = true; 2744 item3.geometry.offset = new mxPoint(-370, 0); 2745 item3.vertex = true; 2746 item1.insert(item3); 2747 2748 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Multiple input'); 2749 }), 2750 2751 this.addEntry(dt + 'multiple addons', function() 2752 { 2753 var item1 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=40;fontSize=14;'); 2754 item1.vertex = true; 2755 var item2 = new mxCell('$', new mxGeometry(0, 0, 40, 40), s + 'leftButton;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2756 item2.geometry.relative = true; 2757 item2.vertex = true; 2758 item1.insert(item2); 2759 var item3 = new mxCell('0.00', new mxGeometry(0, 0, 60, 40), 'html=1;shadow=0;dashed=0;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2760 item3.geometry.relative = true; 2761 item3.geometry.offset = new mxPoint(40, 0); 2762 item3.vertex = true; 2763 item1.insert(item3); 2764 2765 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Multiple addons'); 2766 }), 2767 2768 this.addEntry(dt + 'multiple addons', function() 2769 { 2770 var item1 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=40;fontSize=14;'); 2771 item1.vertex = true; 2772 var item2 = new mxCell('$', new mxGeometry(1, 0, 40, 40), 'html=1;shadow=0;dashed=0;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2773 item2.geometry.relative = true; 2774 item2.geometry.offset = new mxPoint(-100, 0); 2775 item2.vertex = true; 2776 item1.insert(item2); 2777 var item3 = new mxCell('0.00', new mxGeometry(1, 0, 60, 40), s + 'rightButton;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2778 item3.geometry.relative = true; 2779 item3.geometry.offset = new mxPoint(-60, 0); 2780 item3.vertex = true; 2781 item1.insert(item3); 2782 2783 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Multiple addons'); 2784 }), 2785 2786 this.addEntry(dt + 'button addon', function() 2787 { 2788 var item1 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=40;fontSize=14;'); 2789 item1.vertex = true; 2790 var item2 = new mxCell('Button', new mxGeometry(0, 0, 70, 40), s + 'leftButton;strokeColor=#6C757D;gradientColor=inherit;fontColor=inherit;fillColor=inherit;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2791 item2.geometry.relative = true; 2792 item2.vertex = true; 2793 item1.insert(item2); 2794 2795 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Button addon'); 2796 }), 2797 2798 this.addEntry(dt + 'button addon right', function() 2799 { 2800 var item1 = new mxCell('Recipient\'s username', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacingLeft=0;spacing=15;fontSize=14;'); 2801 item1.vertex = true; 2802 var item2 = new mxCell('Button', new mxGeometry(1, 0, 70, 40), s + 'rightButton;strokeColor=#6C757D;gradientColor=inherit;fontColor=inherit;fillColor=inherit;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2803 item2.geometry.relative = true; 2804 item2.geometry.offset = new mxPoint(-70, 0); 2805 item2.vertex = true; 2806 item2.vertex = true; 2807 item1.insert(item2); 2808 2809 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Button addon right'); 2810 }), 2811 2812 this.addEntry(dt + 'two button addon', function() 2813 { 2814 var item1 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=40;fontSize=14;'); 2815 item1.vertex = true; 2816 var item2 = new mxCell('Button', new mxGeometry(0, 0, 70, 40), s + 'leftButton;strokeColor=#6C757D;gradientColor=inherit;fontColor=inherit;fillColor=inherit;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2817 item2.geometry.relative = true; 2818 item2.vertex = true; 2819 item1.insert(item2); 2820 var item3 = new mxCell('Button', new mxGeometry(0, 0, 70, 40), 'html=1;shadow=0;dashed=0;strokeColor=#6C757D;gradientColor=inherit;fontColor=inherit;fillColor=inherit;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2821 item3.geometry.relative = true; 2822 item3.geometry.offset = new mxPoint(70, 0); 2823 item3.vertex = true; 2824 item1.insert(item3); 2825 2826 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Two button addon'); 2827 }), 2828 2829 this.addEntry(dt + 'two button addon right', function() 2830 { 2831 var item1 = new mxCell('Recipient\'s username', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacingLeft=0;spacing=15;fontSize=14;'); 2832 item1.vertex = true; 2833 var item2 = new mxCell('Button', new mxGeometry(1, 0, 70, 40), s + 'rightButton;strokeColor=#6C757D;gradientColor=inherit;fontColor=inherit;fillColor=inherit;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2834 item2.geometry.relative = true; 2835 item2.geometry.offset = new mxPoint(-70, 0); 2836 item2.vertex = true; 2837 item2.vertex = true; 2838 item1.insert(item2); 2839 var item3 = new mxCell('Button', new mxGeometry(1, 0, 70, 40), 'html=1;shadow=0;dashed=0;strokeColor=#6C757D;gradientColor=inherit;fontColor=inherit;fillColor=inherit;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2840 item3.geometry.relative = true; 2841 item3.geometry.offset = new mxPoint(-140, 0); 2842 item3.vertex = true; 2843 item1.insert(item3); 2844 2845 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Two button addon right'); 2846 }), 2847 2848 this.addEntry(dt + 'button with dropdown', function() 2849 { 2850 var item1 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=40;fontSize=14;'); 2851 item1.vertex = true; 2852 var item2 = new mxCell('Dropdown...', new mxGeometry(0, 0, 120, 40), s + 'leftButton;strokeColor=#6C757D;gradientColor=inherit;fontColor=inherit;fillColor=inherit;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=15;'); 2853 item2.geometry.relative = true; 2854 item2.vertex = true; 2855 item1.insert(item2); 2856 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#6C767D;strokeColor=none;perimeter=none;'); 2857 marker1.geometry.relative = true; 2858 marker1.geometry.offset = new mxPoint(-17, -2.5); 2859 marker1.vertex = true; 2860 item2.insert(marker1); 2861 2862 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Button with dropdown'); 2863 }), 2864 2865 this.addEntry(dt + 'button with dropdown right', function() 2866 { 2867 var item1 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=40;fontSize=14;'); 2868 item1.vertex = true; 2869 var item2 = new mxCell('Dropdown...', new mxGeometry(1, 0, 120, 40), s + 'rightButton;strokeColor=#6C757D;gradientColor=inherit;fontColor=inherit;fillColor=inherit;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=15;'); 2870 item2.geometry.relative = true; 2871 item2.geometry.offset = new mxPoint(-120, 0); 2872 item2.vertex = true; 2873 item1.insert(item2); 2874 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#6C767D;strokeColor=none;perimeter=none;'); 2875 marker1.geometry.relative = true; 2876 marker1.geometry.offset = new mxPoint(-17, -2.5); 2877 marker1.vertex = true; 2878 item2.insert(marker1); 2879 2880 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Button with dropdown right'); 2881 }), 2882 2883 this.addEntry(dt + 'segmented button addon', function() 2884 { 2885 var item1 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=40;fontSize=14;'); 2886 item1.vertex = true; 2887 var item2 = new mxCell('Action', new mxGeometry(0, 0, 70, 40), s + 'leftButton;strokeColor=#6C757D;gradientColor=inherit;fontColor=inherit;fillColor=inherit;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=15;'); 2888 item2.geometry.relative = true; 2889 item2.vertex = true; 2890 item1.insert(item2); 2891 var item3 = new mxCell('', new mxGeometry(0, 0, 30, 40), 'html=1;shadow=0;dashed=0;strokeColor=#6C757D;gradientColor=inherit;fontColor=inherit;fillColor=inherit;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2892 item3.geometry.relative = true; 2893 item3.geometry.offset = new mxPoint(70, 0); 2894 item3.vertex = true; 2895 item1.insert(item3); 2896 var marker1 = new mxCell('', new mxGeometry(0.5, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#6C767D;strokeColor=none;perimeter=none;'); 2897 marker1.geometry.relative = true; 2898 marker1.geometry.offset = new mxPoint(-5, -2.5); 2899 marker1.vertex = true; 2900 item3.insert(marker1); 2901 2902 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Segmented button addon'); 2903 }), 2904 2905 this.addEntry(dt + 'segmented button addon', function() 2906 { 2907 var item1 = new mxCell('', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=40;fontSize=14;'); 2908 item1.vertex = true; 2909 var item2 = new mxCell('', new mxGeometry(1, 0, 30, 40), s + 'rightButton;strokeColor=#6C757D;gradientColor=inherit;fontColor=inherit;fillColor=inherit;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=15;'); 2910 item2.geometry.relative = true; 2911 item2.geometry.offset = new mxPoint(-30, 0); 2912 item2.vertex = true; 2913 item1.insert(item2); 2914 var marker1 = new mxCell('', new mxGeometry(0.5, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#6C767D;strokeColor=none;perimeter=none;'); 2915 marker1.geometry.relative = true; 2916 marker1.geometry.offset = new mxPoint(-5, -2.5); 2917 marker1.vertex = true; 2918 item2.insert(marker1); 2919 var item3 = new mxCell('Action', new mxGeometry(1, 0, 70, 40), 'html=1;shadow=0;dashed=0;strokeColor=#6C757D;gradientColor=inherit;fontColor=inherit;fillColor=inherit;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 2920 item3.geometry.relative = true; 2921 item3.geometry.offset = new mxPoint(-100, 0); 2922 item3.vertex = true; 2923 item1.insert(item3); 2924 2925 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Segmented button addon'); 2926 }), 2927 2928 this.addEntry(dt + 'custom input group', function() 2929 { 2930 var item1 = new mxCell('Choose...', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacingLeft=80;spacing=15;fontSize=14;'); 2931 item1.vertex = true; 2932 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 7, 3), 'shape=triangle;direction=south;fillColor=#343A40;strokeColor=none;perimeter=none;'); 2933 marker1.geometry.relative = true; 2934 marker1.geometry.offset = new mxPoint(-17, 1); 2935 marker1.vertex = true; 2936 item1.insert(marker1); 2937 var marker2 = new mxCell('', new mxGeometry(1, 0.5, 7, 3), 'shape=triangle;direction=north;fillColor=#343A40;strokeColor=none;perimeter=none;'); 2938 marker2.geometry.relative = true; 2939 marker2.geometry.offset = new mxPoint(-17, -4); 2940 marker2.vertex = true; 2941 item1.insert(marker2); 2942 var item2 = new mxCell('Options', new mxGeometry(0, 0, 80, 40), s + 'leftButton;strokeColor=#CED4DA;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=15;'); 2943 item2.geometry.relative = true; 2944 item2.vertex = true; 2945 item1.insert(item2); 2946 2947 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Custom input group'); 2948 }), 2949 2950 this.addEntry(dt + 'custom input group', function() 2951 { 2952 var item1 = new mxCell('Choose...', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;fontSize=14;'); 2953 item1.vertex = true; 2954 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 7, 3), 'shape=triangle;direction=south;fillColor=#343A40;strokeColor=none;perimeter=none;'); 2955 marker1.geometry.relative = true; 2956 marker1.geometry.offset = new mxPoint(-97, 1); 2957 marker1.vertex = true; 2958 item1.insert(marker1); 2959 var marker2 = new mxCell('', new mxGeometry(1, 0.5, 7, 3), 'shape=triangle;direction=north;fillColor=#343A40;strokeColor=none;perimeter=none;'); 2960 marker2.geometry.relative = true; 2961 marker2.geometry.offset = new mxPoint(-97, -4); 2962 marker2.vertex = true; 2963 item1.insert(marker2); 2964 var item2 = new mxCell('Options', new mxGeometry(1, 0, 80, 40), s + 'rightButton;strokeColor=#CED4DA;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=15;'); 2965 item2.geometry.relative = true; 2966 item2.geometry.offset = new mxPoint(-80, 0); 2967 item2.vertex = true; 2968 item1.insert(item2); 2969 2970 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Custom input group'); 2971 }), 2972 2973 this.addEntry(dt + 'custom input group', function() 2974 { 2975 var item1 = new mxCell('Choose...', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacingLeft=80;spacing=15;fontSize=14;'); 2976 item1.vertex = true; 2977 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 7, 3), 'shape=triangle;direction=south;fillColor=#343A40;strokeColor=none;perimeter=none;'); 2978 marker1.geometry.relative = true; 2979 marker1.geometry.offset = new mxPoint(-17, 1); 2980 marker1.vertex = true; 2981 item1.insert(marker1); 2982 var marker2 = new mxCell('', new mxGeometry(1, 0.5, 7, 3), 'shape=triangle;direction=north;fillColor=#343A40;strokeColor=none;perimeter=none;'); 2983 marker2.geometry.relative = true; 2984 marker2.geometry.offset = new mxPoint(-17, -4); 2985 marker2.vertex = true; 2986 item1.insert(marker2); 2987 var item2 = new mxCell('Button', new mxGeometry(0, 0, 80, 40), s + 'leftButton;strokeColor=#6C757D;gradientColor=inherit;fontColor=inherit;fillColor=#ffffff;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=15;'); 2988 item2.geometry.relative = true; 2989 item2.vertex = true; 2990 item1.insert(item2); 2991 2992 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Custom input group'); 2993 }), 2994 2995 this.addEntry(dt + 'custom input group', function() 2996 { 2997 var item1 = new mxCell('Choose...', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;fontSize=14;'); 2998 item1.vertex = true; 2999 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 7, 3), 'shape=triangle;direction=south;fillColor=#343A40;strokeColor=none;perimeter=none;'); 3000 marker1.geometry.relative = true; 3001 marker1.geometry.offset = new mxPoint(-97, 1); 3002 marker1.vertex = true; 3003 item1.insert(marker1); 3004 var marker2 = new mxCell('', new mxGeometry(1, 0.5, 7, 3), 'shape=triangle;direction=north;fillColor=#343A40;strokeColor=none;perimeter=none;'); 3005 marker2.geometry.relative = true; 3006 marker2.geometry.offset = new mxPoint(-97, -4); 3007 marker2.vertex = true; 3008 item1.insert(marker2); 3009 var item2 = new mxCell('Button', new mxGeometry(1, 0, 80, 40), s + 'rightButton;strokeColor=#6C757D;gradientColor=inherit;fontColor=inherit;fillColor=#ffffff;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=15;'); 3010 item2.geometry.relative = true; 3011 item2.geometry.offset = new mxPoint(-80, 0); 3012 item2.vertex = true; 3013 item1.insert(item2); 3014 3015 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Custom input group'); 3016 }), 3017 3018 this.addEntry(dt + 'custom input group', function() 3019 { 3020 var item1 = new mxCell('Choose file', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=80;fontSize=14;'); 3021 item1.vertex = true; 3022 var item2 = new mxCell('Upload', new mxGeometry(0, 0, 80, 40), s + 'leftButton;strokeColor=#CED4DA;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=15;'); 3023 item2.geometry.relative = true; 3024 item2.vertex = true; 3025 item1.insert(item2); 3026 var item3 = new mxCell('Browse', new mxGeometry(1, 0, 80, 40), s + 'rightButton;strokeColor=#CED4DA;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=15;'); 3027 item3.geometry.relative = true; 3028 item3.geometry.offset = new mxPoint(-80, 0); 3029 item3.vertex = true; 3030 item1.insert(item3); 3031 3032 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Custom input group'); 3033 }), 3034 3035 this.addEntry(dt + 'custom input group', function() 3036 { 3037 var item1 = new mxCell('Choose file', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;fontSize=14;'); 3038 item1.vertex = true; 3039 var item2 = new mxCell('Upload', new mxGeometry(1, 0, 80, 40), s + 'rightButton;strokeColor=#CED4DA;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=15;'); 3040 item2.geometry.relative = true; 3041 item2.geometry.offset = new mxPoint(-80, 0); 3042 item2.vertex = true; 3043 item1.insert(item2); 3044 var item3 = new mxCell('Browse', new mxGeometry(1, 0, 80, 40), 'html=1;shadow=0;dashed=0;strokeColor=#CED4DA;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=15;'); 3045 item3.geometry.relative = true; 3046 item3.geometry.offset = new mxPoint(-160, 0); 3047 item3.vertex = true; 3048 item1.insert(item3); 3049 3050 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Custom input group'); 3051 }), 3052 3053 this.addEntry(dt + 'custom input group', function() 3054 { 3055 var item1 = new mxCell('Choose file', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=80;fontSize=14;'); 3056 item1.vertex = true; 3057 var item2 = new mxCell('Button', new mxGeometry(0, 0, 80, 40), s + 'leftButton;strokeColor=#6C757D;gradientColor=inherit;fontColor=inherit;fillColor=#ffffff;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=15;'); 3058 item2.geometry.relative = true; 3059 item2.vertex = true; 3060 item1.insert(item2); 3061 var item3 = new mxCell('Browse', new mxGeometry(1, 0, 80, 40), s + 'rightButton;strokeColor=#CED4DA;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=15;'); 3062 item3.geometry.relative = true; 3063 item3.geometry.offset = new mxPoint(-80, 0); 3064 item3.vertex = true; 3065 item1.insert(item3); 3066 3067 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Custom input group'); 3068 }), 3069 3070 this.addEntry(dt + 'custom input group', function() 3071 { 3072 var item1 = new mxCell('Choose file', new mxGeometry(0, 0, 800, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;fontSize=14;'); 3073 item1.vertex = true; 3074 var item2 = new mxCell('Browse', new mxGeometry(1, 0, 80, 40), 'html=1;shadow=0;dashed=0;strokeColor=#CED4DA;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=15;'); 3075 item2.geometry.relative = true; 3076 item2.geometry.offset = new mxPoint(-160, 0); 3077 item2.vertex = true; 3078 item1.insert(item2); 3079 var item3 = new mxCell('Button', new mxGeometry(1, 0, 80, 40), s + 'rightButton;strokeColor=#6C757D;gradientColor=inherit;fontColor=inherit;fillColor=#ffffff;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=15;'); 3080 item3.geometry.relative = true; 3081 item3.geometry.offset = new mxPoint(-80, 0); 3082 item3.vertex = true; 3083 item1.insert(item3); 3084 3085 return sb.createVertexTemplateFromCells([item1], 800, 40, 'Custom input group'); 3086 }), 3087 3088 this.addEntry(dt + 'jumbotron', function() 3089 { 3090 var item1 = new mxCell('<font style="font-size: 40px">Hello, world!</font><br><br>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.', 3091 new mxGeometry(0, 0, 800, 300), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#E9ECEF;fontColor=#474E4F;align=left;spacing=15;fontSize=14;verticalAlign=top;spacingTop=40;'); 3092 item1.vertex = true; 3093 var item2 = new mxCell('It uses utility classes for typography and spacing to space content out within the larger container.', 3094 new mxGeometry(0, 0, 770, 10), 'shape=line;html=1;shadow=0;dashed=0;strokeColor=#CED4DA;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;align=left;spacing=2;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;spacingTop=10;'); 3095 item2.geometry.relative = true; 3096 item2.geometry.offset = new mxPoint(15, 150); 3097 item2.vertex = true; 3098 item1.insert(item2); 3099 var item3 = new mxCell('Learn more', new mxGeometry(0, 1, 100, 40), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;align=center;spacing=15;fontSize=14;fontColor=#ffffff;'); 3100 item3.geometry.relative = true; 3101 item3.geometry.offset = new mxPoint(15, -80); 3102 item3.vertex = true; 3103 item1.insert(item3); 3104 3105 return sb.createVertexTemplateFromCells([item1], item1.geometry.width, item1.geometry.height, 'Jumbotron'); 3106 }), 3107 3108 this.addEntry(dt + 'fluid jumbotron', function() 3109 { 3110 var item1 = new mxCell('<font style="font-size: 40px">Fluid jumbotron</font><br><br>This is a modified jumbotron that occupies the entire horizontal space of its parent.', 3111 new mxGeometry(0, 0, 800, 220), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#E9ECEF;fontColor=#474E4F;align=left;spacing=15;fontSize=14;verticalAlign=top;spacingTop=40;'); 3112 item1.vertex = true; 3113 3114 return sb.createVertexTemplateFromCells([item1], item1.geometry.width, item1.geometry.height, 'Fluid jumbotron'); 3115 }), 3116 3117 this.addEntry(dt + 'list group', function() 3118 { 3119 var bg = new mxCell('', new mxGeometry(0, 0, 200, 150), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;'); 3120 bg.vertex = true; 3121 var button1 = new mxCell('Cras justo odio', new mxGeometry(0, 0, 200, 30), inh + s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3122 button1.geometry.relative = true; 3123 button1.vertex = true; 3124 bg.insert(button1); 3125 var button2 = new mxCell('Dapibus ac facilisis in', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3126 button2.geometry.relative = true; 3127 button2.geometry.offset = new mxPoint(0, 30); 3128 button2.vertex = true; 3129 bg.insert(button2); 3130 var button3 = new mxCell('Morbi leo risus', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3131 button3.geometry.relative = true; 3132 button3.geometry.offset = new mxPoint(0, 60); 3133 button3.vertex = true; 3134 bg.insert(button3); 3135 var button4 = new mxCell('Porta ac consectetur ac', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3136 button4.geometry.relative = true; 3137 button4.geometry.offset = new mxPoint(0, 90); 3138 button4.vertex = true; 3139 bg.insert(button4); 3140 var button4 = new mxCell('Vestibulum at eros', new mxGeometry(0, 1, 200, 30), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;align=left;spacing=10;'); 3141 button4.geometry.relative = true; 3142 button4.geometry.offset = new mxPoint(0, -30); 3143 button4.vertex = true; 3144 bg.insert(button4); 3145 3146 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'List group'); 3147 }), 3148 3149 this.addEntry(dt + 'list group with active item', function() 3150 { 3151 var bg = new mxCell('', new mxGeometry(0, 0, 200, 150), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;'); 3152 bg.vertex = true; 3153 var button1 = new mxCell('Cras justo odio', new mxGeometry(0, 0, 200, 30), s + 'topButton;rSize=5;strokeColor=none;fillColor=#0085FC;fontColor=#ffffff;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3154 button1.geometry.relative = true; 3155 button1.vertex = true; 3156 bg.insert(button1); 3157 var button2 = new mxCell('Dapibus ac facilisis in', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3158 button2.geometry.relative = true; 3159 button2.geometry.offset = new mxPoint(0, 30); 3160 button2.vertex = true; 3161 bg.insert(button2); 3162 var button3 = new mxCell('Morbi leo risus', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3163 button3.geometry.relative = true; 3164 button3.geometry.offset = new mxPoint(0, 60); 3165 button3.vertex = true; 3166 bg.insert(button3); 3167 var button4 = new mxCell('Porta ac consectetur ac', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3168 button4.geometry.relative = true; 3169 button4.geometry.offset = new mxPoint(0, 90); 3170 button4.vertex = true; 3171 bg.insert(button4); 3172 var button4 = new mxCell('Vestibulum at eros', new mxGeometry(0, 1, 200, 30), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;align=left;spacing=10;'); 3173 button4.geometry.relative = true; 3174 button4.geometry.offset = new mxPoint(0, -30); 3175 button4.vertex = true; 3176 bg.insert(button4); 3177 3178 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'List group with active item'); 3179 }), 3180 3181 this.addEntry(dt + 'list group with disabled item', function() 3182 { 3183 var bg = new mxCell('', new mxGeometry(0, 0, 200, 150), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;'); 3184 bg.vertex = true; 3185 var button1 = new mxCell('Cras justo odio', new mxGeometry(0, 0, 200, 30), s + 'topButton;rSize=5;strokeColor=inherit;fillColor=#ffffff;fontColor=#6C767D;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3186 button1.geometry.relative = true; 3187 button1.vertex = true; 3188 bg.insert(button1); 3189 var button2 = new mxCell('Dapibus ac facilisis in', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3190 button2.geometry.relative = true; 3191 button2.geometry.offset = new mxPoint(0, 30); 3192 button2.vertex = true; 3193 bg.insert(button2); 3194 var button3 = new mxCell('Morbi leo risus', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3195 button3.geometry.relative = true; 3196 button3.geometry.offset = new mxPoint(0, 60); 3197 button3.vertex = true; 3198 bg.insert(button3); 3199 var button4 = new mxCell('Porta ac consectetur ac', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3200 button4.geometry.relative = true; 3201 button4.geometry.offset = new mxPoint(0, 90); 3202 button4.vertex = true; 3203 bg.insert(button4); 3204 var button4 = new mxCell('Vestibulum at eros', new mxGeometry(0, 1, 200, 30), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;align=left;spacing=10;'); 3205 button4.geometry.relative = true; 3206 button4.geometry.offset = new mxPoint(0, -30); 3207 button4.vertex = true; 3208 bg.insert(button4); 3209 3210 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'List group with disabled item'); 3211 }), 3212 3213 this.addEntry(dt + 'list group flush', function() 3214 { 3215 var button1 = new mxCell('Cras justo odio', new mxGeometry(0, 0, 200, 30), 'html=1;strokeColor=none;fillColor=none;fontColor=#212529;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3216 button1.vertex = true; 3217 var button2 = new mxCell('Dapibus ac facilisis in', new mxGeometry(0, 30, 200, 30), 'shape=partialRectangle;whiteSpace=wrap;left=0;right=0;fillColor=none;strokeColor=#DFDFDF;html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3218 button2.vertex = true; 3219 var button3 = new mxCell('Morbi leo risus', new mxGeometry(0, 60, 200, 30), 'shape=partialRectangle;whiteSpace=wrap;left=0;right=0;fillColor=none;strokeColor=#DFDFDF;html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3220 button3.vertex = true; 3221 var button4 = new mxCell('Porta ac consectetur ac', new mxGeometry(0, 90, 200, 30), 'shape=partialRectangle;whiteSpace=wrap;left=0;right=0;fillColor=none;strokeColor=#DFDFDF;html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3222 button4.vertex = true; 3223 var button5 = new mxCell('Vestibulum at eros', new mxGeometry(0, 120, 200, 30), 'html=1;strokeColor=none;fillColor=none;fontColor=#212529;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3224 button5.vertex = true; 3225 3226 return sb.createVertexTemplateFromCells([button1, button2, button3, button4, button5], 200, 150, 'List group flush'); 3227 }), 3228 3229 this.addEntry(dt + 'list group horizontal', function() 3230 { 3231 var bg = new mxCell('', new mxGeometry(0, 0, 360, 30), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#212529;'); 3232 bg.vertex = true; 3233 var button1 = new mxCell('Cras justo odio', new mxGeometry(0, 0, 110, 30), inh + s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;'); 3234 button1.geometry.relative = true; 3235 button1.vertex = true; 3236 bg.insert(button1); 3237 var button2 = new mxCell('Dapibus ac facilis in', new mxGeometry(0, 0, 140, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;'); 3238 button2.geometry.relative = true; 3239 button2.geometry.offset = new mxPoint(110, 0); 3240 button2.vertex = true; 3241 bg.insert(button2); 3242 var button3 = new mxCell('Morbi leo risus', new mxGeometry(1, 0, 110, 30), inh + s + 'rightButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;'); 3243 button3.geometry.relative = true; 3244 button3.geometry.offset = new mxPoint(-110, 0); 3245 button3.vertex = true; 3246 bg.insert(button3); 3247 3248 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'List Group, horizontal'); 3249 }), 3250 3251 this.addEntry(dt + 'contextual classes', function() 3252 { 3253 var bg = new mxCell('', new mxGeometry(0, 0, 250, 270), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;'); 3254 bg.vertex = true; 3255 var button1 = new mxCell('Dapibus ac facilisis in', new mxGeometry(0, 0, 250, 30), inh + s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3256 button1.geometry.relative = true; 3257 button1.vertex = true; 3258 bg.insert(button1); 3259 var button2 = new mxCell('A simple primary list group item', new mxGeometry(0, 0, 250, 30), 'html=1;fillColor=#B8DCFE;strokeColor=#A1C0DE;fontColor=#004583;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3260 button2.geometry.relative = true; 3261 button2.geometry.offset = new mxPoint(0, 30); 3262 button2.vertex = true; 3263 bg.insert(button2); 3264 var button3 = new mxCell('A simple secondary list group item', new mxGeometry(0, 0, 250, 30), 'html=1;fillColor=#D6D8DB;strokeColor=#BBBDC0;fontColor=#383D41;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3265 button3.geometry.relative = true; 3266 button3.geometry.offset = new mxPoint(0, 60); 3267 button3.vertex = true; 3268 bg.insert(button3); 3269 var button4 = new mxCell('A simple success list group item', new mxGeometry(0, 0, 250, 30), 'html=1;fillColor=#C4E6CC;strokeColor=#ABC9B2;fontColor=#ABC9B2;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3270 button4.geometry.relative = true; 3271 button4.geometry.offset = new mxPoint(0, 90); 3272 button4.vertex = true; 3273 bg.insert(button4); 3274 var button5 = new mxCell('A simple danger list group item', new mxGeometry(0, 0, 250, 30), 'html=1;fillColor=#F4C5CB;strokeColor=#D5ACB2;fontColor=#711623;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3275 button5.geometry.relative = true; 3276 button5.geometry.offset = new mxPoint(0, 120); 3277 button5.vertex = true; 3278 bg.insert(button5); 3279 var button6 = new mxCell('A simple warning list group item', new mxGeometry(0, 0, 250, 30), 'html=1;fillColor=#FFECBC;strokeColor=#DFCEA4;fontColor=#856110;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3280 button6.geometry.relative = true; 3281 button6.geometry.offset = new mxPoint(0, 150); 3282 button6.vertex = true; 3283 bg.insert(button6); 3284 var button7 = new mxCell('A simple info list group item', new mxGeometry(0, 0, 250, 30), 'html=1;fillColor=#BFE6EB;strokeColor=#A7C9CE;fontColor=#0E5560;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3285 button7.geometry.relative = true; 3286 button7.geometry.offset = new mxPoint(0, 180); 3287 button7.vertex = true; 3288 bg.insert(button7); 3289 var button8 = new mxCell('A simple light list group item', new mxGeometry(0, 0, 250, 30), 'html=1;fillColor=#FDFDFE;strokeColor=#DDDDDE;fontColor=#818182;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3290 button8.geometry.relative = true; 3291 button8.geometry.offset = new mxPoint(0, 210); 3292 button8.vertex = true; 3293 bg.insert(button8); 3294 var button9 = new mxCell('A simple dark list group item', new mxGeometry(0, 1, 250, 30), s + 'bottomButton;fillColor=#C6C8CA;strokeColor=#ADAFB1;fontColor=#1B1E21;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;align=left;spacing=10;'); 3295 button9.geometry.relative = true; 3296 button9.geometry.offset = new mxPoint(0, -30); 3297 button9.vertex = true; 3298 bg.insert(button9); 3299 3300 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Contextual classes'); 3301 }), 3302 3303 this.addEntry(dt + 'list group with badges', function() 3304 { 3305 var bg = new mxCell('', new mxGeometry(0, 0, 300, 120), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;'); 3306 bg.vertex = true; 3307 var button1 = new mxCell('Cras justo odio', new mxGeometry(0, 0, 300, 40), inh + s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3308 button1.geometry.relative = true; 3309 button1.vertex = true; 3310 bg.insert(button1); 3311 var item1 = new mxCell('14', new mxGeometry(1, 0.5, 25, 16), inh + s + 'rrect;rSize=8;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;whiteSpace=wrap;'); 3312 item1.geometry.relative = true; 3313 item1.geometry.offset = new mxPoint(-40, -8); 3314 item1.vertex = true; 3315 button1.insert(item1); 3316 var button2 = new mxCell('Dapibus ac facilisis in', new mxGeometry(0, 0, 300, 40), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3317 button2.geometry.relative = true; 3318 button2.geometry.offset = new mxPoint(0, 40); 3319 button2.vertex = true; 3320 bg.insert(button2); 3321 var item2 = new mxCell('2', new mxGeometry(1, 0.5, 20, 16), inh + s + 'rrect;rSize=8;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;whiteSpace=wrap;'); 3322 item2.geometry.relative = true; 3323 item2.geometry.offset = new mxPoint(-38, -8); 3324 item2.vertex = true; 3325 button2.insert(item2); 3326 var button3 = new mxCell('Morbi leo risus', new mxGeometry(0, 1, 300, 40), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;align=left;spacing=10;'); 3327 button3.geometry.relative = true; 3328 button3.geometry.offset = new mxPoint(0, -40); 3329 button3.vertex = true; 3330 bg.insert(button3); 3331 var item3 = new mxCell('1', new mxGeometry(1, 0.5, 20, 16), inh + s + 'rrect;rSize=8;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;whiteSpace=wrap;'); 3332 item3.geometry.relative = true; 3333 item3.geometry.offset = new mxPoint(-38, -8); 3334 item3.vertex = true; 3335 button3.insert(item3); 3336 3337 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'List group with badges'); 3338 }), 3339 3340 this.addEntry(dt + 'custom content', function() 3341 { 3342 var bg = new mxCell('', new mxGeometry(0, 0, 300, 300), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#495057;'); 3343 bg.vertex = true; 3344 var button1 = new mxCell('<font style="font-size: 16px">List group item heading</font><br><br>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<br><font style="font-size: 11px">Donec id elit mi porta.</font>', 3345 new mxGeometry(0, 0, 300, 100), s + 'topButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;verticalAlign=top;fillColor=#0085FC;strokeColor=#0085FC;fontColor=#ffffff;'); 3346 button1.geometry.relative = true; 3347 button1.vertex = true; 3348 bg.insert(button1); 3349 var item1 = new mxCell('3 days ago', 3350 new mxGeometry(1, 0, 90, 40), 'strokeColor=none;fillColor=none;fontColor=#ffffff;fontSize=11;'); 3351 item1.geometry.relative = true; 3352 item1.geometry.offset = new mxPoint(-90, 0); 3353 item1.vertex = true; 3354 button1.insert(item1); 3355 var button2 = new mxCell('<font style="font-size: 16px">List group item heading</font><br><br>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<br><font style="font-size: 11px">Donec id elit mi porta.</font>', 3356 new mxGeometry(0, 0, 300, 100), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3357 button2.geometry.relative = true; 3358 button2.geometry.offset = new mxPoint(0, 100); 3359 button2.vertex = true; 3360 bg.insert(button2); 3361 var item2 = new mxCell('3 days ago', 3362 new mxGeometry(1, 0, 90, 40), 'strokeColor=none;fillColor=none;fontColor=#6C767D;fontSize=11;'); 3363 item2.geometry.relative = true; 3364 item2.geometry.offset = new mxPoint(-90, 0); 3365 item2.vertex = true; 3366 button2.insert(item2); 3367 var button3 = new mxCell('<font style="font-size: 16px">List group item heading</font><br><br>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<br><font style="font-size: 11px">Donec id elit mi porta.</font>', 3368 new mxGeometry(0, 1, 300, 100), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;align=left;spacing=10;'); 3369 button3.geometry.relative = true; 3370 button3.geometry.offset = new mxPoint(0, -100); 3371 button3.vertex = true; 3372 bg.insert(button3); 3373 var item3 = new mxCell('3 days ago', 3374 new mxGeometry(1, 0, 90, 40), 'strokeColor=none;fillColor=none;fontColor=#6C767D;fontSize=11;'); 3375 item3.geometry.relative = true; 3376 item3.geometry.offset = new mxPoint(-90, 0); 3377 item3.vertex = true; 3378 button3.insert(item3); 3379 3380 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Custom content'); 3381 }), 3382 3383 this.addEntry(dt + 'list group', function() 3384 { 3385 var bg = new mxCell('', new mxGeometry(0, 0, 200, 120), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;'); 3386 bg.vertex = true; 3387 var button1 = new mxCell('Home', new mxGeometry(0, 0, 200, 30), s + 'topButton;rSize=5;strokeColor=none;fillColor=#0085FC;fontColor=#ffffff;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3388 button1.geometry.relative = true; 3389 button1.vertex = true; 3390 bg.insert(button1); 3391 var button2 = new mxCell('Profile', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3392 button2.geometry.relative = true; 3393 button2.geometry.offset = new mxPoint(0, 30); 3394 button2.vertex = true; 3395 bg.insert(button2); 3396 var button3 = new mxCell('Messages', new mxGeometry(0, 0, 200, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=10;'); 3397 button3.geometry.relative = true; 3398 button3.geometry.offset = new mxPoint(0, 60); 3399 button3.vertex = true; 3400 bg.insert(button3); 3401 var button4 = new mxCell('Settings', new mxGeometry(0, 1, 200, 30), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;align=left;spacing=10;'); 3402 button4.geometry.relative = true; 3403 button4.geometry.offset = new mxPoint(0, -30); 3404 button4.vertex = true; 3405 bg.insert(button4); 3406 var item1 = new mxCell('Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.', 3407 new mxGeometry(220, 0, 580, 100), 'strokeColor=none;fillColor=none;fontColor=#000000;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=2;fontSize=14;verticalAlign=top;'); 3408 item1.vertex = true; 3409 3410 return sb.createVertexTemplateFromCells([bg, item1], 800, 120, 'List group'); 3411 }), 3412 3413 this.addEntry(dt + 'media object', function() 3414 { 3415 var bg = new mxCell('64x64', new mxGeometry(0, 0, 64, 64), 'strokeColor=none;html=1;whiteSpace=wrap;fillColor=#868E96;fontColor=#DEE2E6;'); 3416 bg.vertex = true; 3417 var item1 = new mxCell('<font style="font-size: 20px">Media heading</font><br>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.', 3418 new mxGeometry(74, 0, 726, 90), 'strokeColor=none;fillColor=none;fontColor=#000000;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=2;fontSize=14;verticalAlign=top;html=1;'); 3419 item1.vertex = true; 3420 3421 return sb.createVertexTemplateFromCells([bg, item1], 800, 90, 'Media object'); 3422 }), 3423 3424 this.addEntry(dt + 'nested media objects', function() 3425 { 3426 var bg1 = new mxCell('64x64', new mxGeometry(0, 0, 64, 64), 'strokeColor=none;html=1;whiteSpace=wrap;fillColor=#868E96;fontColor=#DEE2E6;'); 3427 bg1.vertex = true; 3428 var item1 = new mxCell('<font style="font-size: 20px">Media heading</font><br>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.', 3429 new mxGeometry(74, 0, 726, 90), 'strokeColor=none;fillColor=none;fontColor=#000000;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=2;fontSize=14;verticalAlign=top;html=1;'); 3430 item1.vertex = true; 3431 3432 var bg2 = new mxCell('64x64', new mxGeometry(74, 90, 64, 64), 'strokeColor=none;html=1;whiteSpace=wrap;fillColor=#868E96;fontColor=#DEE2E6;'); 3433 bg2.vertex = true; 3434 var item2 = new mxCell('<font style="font-size: 20px">Media heading</font><br>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.', 3435 new mxGeometry(148, 90, 652, 90), 'strokeColor=none;fillColor=none;fontColor=#000000;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=2;fontSize=14;verticalAlign=top;html=1;'); 3436 item2.vertex = true; 3437 3438 return sb.createVertexTemplateFromCells([bg1, item1, bg2, item2], 800, 180, 'Nested media object'); 3439 }), 3440 3441 this.addEntry(dt + 'top aligned media', function() 3442 { 3443 var bg = new mxCell('64x64', new mxGeometry(0, 0, 64, 64), 'strokeColor=none;html=1;whiteSpace=wrap;fillColor=#868E96;fontColor=#DEE2E6;'); 3444 bg.vertex = true; 3445 var item1 = new mxCell('<font style="font-size: 18px">Top-aligned media</font><br><br>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<br><br>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.', 3446 new mxGeometry(74, 0, 726, 150), 'strokeColor=none;fillColor=none;fontColor=#000000;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=2;fontSize=14;verticalAlign=top;html=1;'); 3447 item1.vertex = true; 3448 3449 return sb.createVertexTemplateFromCells([bg, item1], 800, 150, 'Top-aligned media'); 3450 }), 3451 3452 this.addEntry(dt + 'center aligned media', function() 3453 { 3454 var bg = new mxCell('64x64', new mxGeometry(0, 43, 64, 64), 'strokeColor=none;html=1;whiteSpace=wrap;fillColor=#868E96;fontColor=#DEE2E6;'); 3455 bg.vertex = true; 3456 var item1 = new mxCell('<font style="font-size: 18px">Center-aligned media</font><br><br>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<br><br>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.', 3457 new mxGeometry(74, 0, 726, 150), 'strokeColor=none;fillColor=none;fontColor=#000000;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=2;fontSize=14;verticalAlign=top;html=1;'); 3458 item1.vertex = true; 3459 3460 return sb.createVertexTemplateFromCells([bg, item1], 800, 150, 'Center-aligned media'); 3461 }), 3462 3463 this.addEntry(dt + 'bottom aligned media', function() 3464 { 3465 var bg = new mxCell('64x64', new mxGeometry(0, 86, 64, 64), 'strokeColor=none;html=1;whiteSpace=wrap;fillColor=#868E96;fontColor=#DEE2E6;'); 3466 bg.vertex = true; 3467 var item1 = new mxCell('<font style="font-size: 18px">Bottom-aligned media</font><br><br>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<br><br>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.', 3468 new mxGeometry(74, 0, 726, 150), 'strokeColor=none;fillColor=none;fontColor=#000000;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=2;fontSize=14;verticalAlign=top;html=1;'); 3469 item1.vertex = true; 3470 3471 return sb.createVertexTemplateFromCells([bg, item1], 800, 150, 'Bottom-aligned media'); 3472 }), 3473 3474 this.addEntry(dt + 'media object', function() 3475 { 3476 var bg = new mxCell('64x64', new mxGeometry(736, 0, 64, 64), 'strokeColor=none;html=1;whiteSpace=wrap;fillColor=#868E96;fontColor=#DEE2E6;'); 3477 bg.vertex = true; 3478 var item1 = new mxCell('<font style="font-size: 20px">Media object</font><br>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.', 3479 new mxGeometry(0, 0, 726, 90), 'strokeColor=none;fillColor=none;fontColor=#000000;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=2;fontSize=14;verticalAlign=top;html=1;'); 3480 item1.vertex = true; 3481 3482 return sb.createVertexTemplateFromCells([bg, item1], 800, 90, 'Media object'); 3483 }), 3484 3485 this.addEntry(dt + 'media list', function() 3486 { 3487 var bg1 = new mxCell('64x64', new mxGeometry(0, 0, 64, 64), 'strokeColor=none;html=1;whiteSpace=wrap;fillColor=#868E96;fontColor=#DEE2E6;'); 3488 bg1.vertex = true; 3489 var item1 = new mxCell('<font style="font-size: 20px">List-based media object</font><br>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.', 3490 new mxGeometry(74, 0, 726, 90), 'strokeColor=none;fillColor=none;fontColor=#000000;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=2;fontSize=14;verticalAlign=top;html=1;'); 3491 item1.vertex = true; 3492 var bg2 = new mxCell('64x64', new mxGeometry(0, 100, 64, 64), 'strokeColor=none;html=1;whiteSpace=wrap;fillColor=#868E96;fontColor=#DEE2E6;'); 3493 bg2.vertex = true; 3494 var item2 = new mxCell('<font style="font-size: 20px">List-based media object</font><br>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.', 3495 new mxGeometry(74, 100, 726, 90), 'strokeColor=none;fillColor=none;fontColor=#000000;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=2;fontSize=14;verticalAlign=top;html=1;'); 3496 item2.vertex = true; 3497 var bg3 = new mxCell('64x64', new mxGeometry(0, 200, 64, 64), 'strokeColor=none;html=1;whiteSpace=wrap;fillColor=#868E96;fontColor=#DEE2E6;'); 3498 bg3.vertex = true; 3499 var item3 = new mxCell('<font style="font-size: 20px">List-based media object</font><br>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.', 3500 new mxGeometry(74, 200, 726, 90), 'strokeColor=none;fillColor=none;fontColor=#000000;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=2;fontSize=14;verticalAlign=top;html=1;'); 3501 item3.vertex = true; 3502 3503 return sb.createVertexTemplateFromCells([bg1, item1, bg2, item2, bg3, item3], 800, 290, 'Media list'); 3504 }), 3505 3506 this.addEntry(dt + 'modal title', function() 3507 { 3508 var bg = new mxCell('Modal title', new mxGeometry(0, 0, 400, 200), s + 'rrect;rSize=5;html=1;strokeColor=#C8C8C8;fillColor=#ffffff;whiteSpace=wrap;verticalAlign=top;align=left;fontSize=18;spacing=15;spacingTop=-5;'); 3509 bg.vertex = true; 3510 var item1 = new mxCell('', new mxGeometry(0, 0, 400, 10), 'shape=line;strokeColor=#dddddd;resizeWidth=1;'); 3511 item1.geometry.relative = true; 3512 item1.geometry.offset = new mxPoint(0, 50); 3513 item1.vertex = true; 3514 bg.insert(item1); 3515 var item2 = new mxCell('', new mxGeometry(1, 0, 8, 8), s + 'x;strokeColor=#868686;strokeWidth=2;'); 3516 item2.geometry.relative = true; 3517 item2.geometry.offset = new mxPoint(-24, 20); 3518 item2.vertex = true; 3519 bg.insert(item2); 3520 var item3 = new mxCell('Modal body text goes here.', new mxGeometry(0, 0, 400, 40), 'strokeColor=none;fillColor=none;resizeWidth=1;align=left;verticalAlign=top;spacing=10;fontSize=13;'); 3521 item3.geometry.relative = true; 3522 item3.geometry.offset = new mxPoint(0, 60); 3523 item3.vertex = true; 3524 bg.insert(item3); 3525 var item4 = new mxCell('', new mxGeometry(0, 0, 400, 10), 'shape=line;strokeColor=#dddddd;resizeWidth=1;'); 3526 item4.geometry.relative = true; 3527 item4.geometry.offset = new mxPoint(0, 120); 3528 item4.vertex = true; 3529 bg.insert(item4); 3530 var item5 = new mxCell('Save changes', new mxGeometry(1, 1, 110, 40), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;fontColor=#FFFFFF;fontSize=14;'); 3531 item5.geometry.relative = true; 3532 item5.geometry.offset = new mxPoint(-130, -60); 3533 item5.vertex = true; 3534 bg.insert(item5); 3535 var item6 = new mxCell('Close', new mxGeometry(1, 1, 70, 40), s + 'rrect;rSize=5;fillColor=#6C757D;strokeColor=none;fontColor=#FFFFFF;fontSize=14;'); 3536 item6.geometry.relative = true; 3537 item6.geometry.offset = new mxPoint(-220, -60); 3538 item6.vertex = true; 3539 bg.insert(item6); 3540 3541 3542 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Modal title'); 3543 }), 3544 3545 this.addEntry(dt + 'modal title', function() 3546 { 3547 var bg = new mxCell('Modal title', new mxGeometry(0, 0, 400, 510), s + 'rrect;rSize=5;html=1;strokeColor=#C8C8C8;fillColor=#ffffff;whiteSpace=wrap;verticalAlign=top;align=left;fontSize=18;spacing=15;spacingTop=-5;'); 3548 bg.vertex = true; 3549 var item1 = new mxCell('', new mxGeometry(0, 0, 400, 10), 'shape=line;strokeColor=#dddddd;resizeWidth=1;'); 3550 item1.geometry.relative = true; 3551 item1.geometry.offset = new mxPoint(0, 50); 3552 item1.vertex = true; 3553 bg.insert(item1); 3554 var item2 = new mxCell('', new mxGeometry(1, 0, 8, 8), s + 'x;strokeColor=#868686;strokeWidth=2;'); 3555 item2.geometry.relative = true; 3556 item2.geometry.offset = new mxPoint(-24, 20); 3557 item2.vertex = true; 3558 bg.insert(item2); 3559 var item3 = new mxCell('Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.<br><br>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.<br><br>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.<br><br>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.<br><br>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.', 3560 new mxGeometry(0, 0, 400, 350), 'strokeColor=none;fillColor=none;resizeWidth=1;align=left;verticalAlign=top;spacing=10;fontSize=14;whiteSpace=wrap;html=1;'); 3561 item3.geometry.relative = true; 3562 item3.geometry.offset = new mxPoint(0, 60); 3563 item3.vertex = true; 3564 bg.insert(item3); 3565 var item4 = new mxCell('', new mxGeometry(0, 0, 410, 10), 'shape=line;strokeColor=#dddddd;resizeWidth=1;'); 3566 item4.geometry.relative = true; 3567 item4.geometry.offset = new mxPoint(0, 420); 3568 item4.vertex = true; 3569 bg.insert(item4); 3570 var item5 = new mxCell('Save changes', new mxGeometry(1, 1, 110, 40), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;fontColor=#FFFFFF;fontSize=14;'); 3571 item5.geometry.relative = true; 3572 item5.geometry.offset = new mxPoint(-130, -60); 3573 item5.vertex = true; 3574 bg.insert(item5); 3575 var item6 = new mxCell('Close', new mxGeometry(1, 1, 70, 40), s + 'rrect;rSize=5;fillColor=#6C757D;strokeColor=none;fontColor=#FFFFFF;fontSize=14;'); 3576 item6.geometry.relative = true; 3577 item6.geometry.offset = new mxPoint(-220, -60); 3578 item6.vertex = true; 3579 bg.insert(item6); 3580 3581 3582 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Modal title'); 3583 }), 3584 3585 this.addEntry(dt + 'modal title', function() 3586 { 3587 var bg = new mxCell('Modal title', new mxGeometry(0, 0, 400, 340), s + 'rrect;rSize=5;html=1;strokeColor=#C8C8C8;fillColor=#ffffff;whiteSpace=wrap;verticalAlign=top;align=left;fontSize=18;spacing=15;spacingTop=-5;'); 3588 bg.vertex = true; 3589 var item1 = new mxCell('', new mxGeometry(0, 0, 400, 10), 'shape=line;strokeColor=#dddddd;resizeWidth=1;'); 3590 item1.geometry.relative = true; 3591 item1.geometry.offset = new mxPoint(0, 50); 3592 item1.vertex = true; 3593 bg.insert(item1); 3594 var item2 = new mxCell('', new mxGeometry(1, 0, 8, 8), s + 'x;strokeColor=#868686;strokeWidth=2;'); 3595 item2.geometry.relative = true; 3596 item2.geometry.offset = new mxPoint(-24, 20); 3597 item2.vertex = true; 3598 bg.insert(item2); 3599 var item3 = new mxCell('Popover in a modal', 3600 new mxGeometry(0, 0, 400, 50), 'strokeColor=none;fillColor=none;resizeWidth=1;align=left;verticalAlign=top;spacing=10;fontSize=18;whiteSpace=wrap;html=1;'); 3601 item3.geometry.relative = true; 3602 item3.geometry.offset = new mxPoint(0, 60); 3603 item3.vertex = true; 3604 bg.insert(item3); 3605 var item4 = new mxCell('This is a', 3606 new mxGeometry(0, 0, 70, 40), 'strokeColor=none;fillColor=none;align=center;verticalAlign=middle;spacing=2;fontSize=14;whiteSpace=wrap;html=1;'); 3607 item4.geometry.relative = true; 3608 item4.geometry.offset = new mxPoint(0, 110); 3609 item4.vertex = true; 3610 bg.insert(item4); 3611 var item5 = new mxCell('button', new mxGeometry(0, 0, 70, 40), s + 'rrect;rSize=5;fillColor=#6C757D;strokeColor=none;fontColor=#FFFFFF;fontSize=14;'); 3612 item5.geometry.relative = true; 3613 item5.geometry.offset = new mxPoint(70, 110); 3614 item5.vertex = true; 3615 bg.insert(item5); 3616 var item6 = new mxCell('in a modal dialog.', 3617 new mxGeometry(0, 0, 200, 40), 'strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacing=10;fontSize=14;whiteSpace=wrap;html=1;'); 3618 item6.geometry.relative = true; 3619 item6.geometry.offset = new mxPoint(140, 110); 3620 item6.vertex = true; 3621 bg.insert(item6); 3622 var item7 = new mxCell('', new mxGeometry(0, 0, 400, 10), 'shape=line;strokeColor=#dddddd;resizeWidth=1;'); 3623 item7.geometry.relative = true; 3624 item7.geometry.offset = new mxPoint(0, 160); 3625 item7.vertex = true; 3626 bg.insert(item7); 3627 var item8 = new mxCell('Tooltips in a modal', 3628 new mxGeometry(0, 0, 400, 40), 'strokeColor=none;fillColor=none;resizeWidth=1;align=left;verticalAlign=top;spacing=10;fontSize=18;whiteSpace=wrap;html=1;'); 3629 item8.geometry.relative = true; 3630 item8.geometry.offset = new mxPoint(0, 170); 3631 item8.vertex = true; 3632 bg.insert(item8); 3633 var item9 = new mxCell('<font color="#0085fc">This link</font> and <font color="#0085fc">another link </font>are in a modal dialog.', 3634 new mxGeometry(0, 0, 400, 40), 'strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacing=10;fontSize=14;whiteSpace=wrap;html=1;'); 3635 item9.geometry.relative = true; 3636 item9.geometry.offset = new mxPoint(0, 210); 3637 item9.vertex = true; 3638 bg.insert(item9); 3639 var item10 = new mxCell('', new mxGeometry(0, 0, 400, 10), 'shape=line;strokeColor=#dddddd;resizeWidth=1;'); 3640 item10.geometry.relative = true; 3641 item10.geometry.offset = new mxPoint(0, 260); 3642 item10.vertex = true; 3643 bg.insert(item10); 3644 var item11 = new mxCell('Save changes', new mxGeometry(1, 1, 110, 40), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;fontColor=#FFFFFF;fontSize=14;'); 3645 item11.geometry.relative = true; 3646 item11.geometry.offset = new mxPoint(-130, -60); 3647 item11.vertex = true; 3648 bg.insert(item11); 3649 var item12 = new mxCell('Close', new mxGeometry(1, 1, 70, 40), s + 'rrect;rSize=5;fillColor=#6C757D;strokeColor=none;fontColor=#FFFFFF;fontSize=14;'); 3650 item12.geometry.relative = true; 3651 item12.geometry.offset = new mxPoint(-220, -60); 3652 item12.vertex = true; 3653 bg.insert(item12); 3654 3655 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Modal title'); 3656 }), 3657 3658 this.addEntry(dt + 'modal content', function() 3659 { 3660 var bg = new mxCell('New message to @mdo', new mxGeometry(0, 0, 400, 370), s + 'rrect;rSize=5;html=1;strokeColor=#C8C8C8;fillColor=#ffffff;whiteSpace=wrap;verticalAlign=top;align=left;fontSize=18;spacing=15;spacingTop=-5;'); 3661 bg.vertex = true; 3662 var item1 = new mxCell('', new mxGeometry(0, 0, 400, 10), 'shape=line;strokeColor=#dddddd;resizeWidth=1;'); 3663 item1.geometry.relative = true; 3664 item1.geometry.offset = new mxPoint(0, 50); 3665 item1.vertex = true; 3666 bg.insert(item1); 3667 var item2 = new mxCell('', new mxGeometry(1, 0, 8, 8), s + 'x;strokeColor=#868686;strokeWidth=2;'); 3668 item2.geometry.relative = true; 3669 item2.geometry.offset = new mxPoint(-24, 20); 3670 item2.vertex = true; 3671 bg.insert(item2); 3672 var item3 = new mxCell('Recipient:', 3673 new mxGeometry(0, 0, 400, 40), 'strokeColor=none;fillColor=none;resizeWidth=1;align=left;verticalAlign=top;spacing=10;fontSize=14;whiteSpace=wrap;html=1;'); 3674 item3.geometry.relative = true; 3675 item3.geometry.offset = new mxPoint(0, 60); 3676 item3.vertex = true; 3677 bg.insert(item3); 3678 var item4 = new mxCell('@mdo', 3679 new mxGeometry(0, 0, 380, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;fillColor=none;align=left;verticalAlign=middle;spacing=10;fontSize=14;whiteSpace=wrap;html=1;'); 3680 item4.geometry.relative = true; 3681 item4.geometry.offset = new mxPoint(10, 100); 3682 item4.vertex = true; 3683 bg.insert(item4); 3684 var item5 = new mxCell('Message:', 3685 new mxGeometry(0, 0, 400, 40), 'strokeColor=none;fillColor=none;resizeWidth=1;align=left;verticalAlign=top;spacing=10;fontSize=14;whiteSpace=wrap;html=1;'); 3686 item5.geometry.relative = true; 3687 item5.geometry.offset = new mxPoint(0, 160); 3688 item5.vertex = true; 3689 bg.insert(item5); 3690 var item6 = new mxCell('', 3691 new mxGeometry(0, 0, 380, 70), s + 'rrect;rSize=5;strokeColor=#CED4DA;fillColor=none;align=left;verticalAlign=middle;spacing=10;fontSize=14;whiteSpace=wrap;html=1;'); 3692 item6.geometry.relative = true; 3693 item6.geometry.offset = new mxPoint(10, 200); 3694 item6.vertex = true; 3695 bg.insert(item6); 3696 var item7 = new mxCell('', new mxGeometry(0, 0, 400, 10), 'shape=line;strokeColor=#dddddd;resizeWidth=1;'); 3697 item7.geometry.relative = true; 3698 item7.geometry.offset = new mxPoint(0, 290); 3699 item7.vertex = true; 3700 bg.insert(item7); 3701 var item8 = new mxCell('Save changes', new mxGeometry(1, 1, 110, 40), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;fontColor=#FFFFFF;fontSize=14;'); 3702 item8.geometry.relative = true; 3703 item8.geometry.offset = new mxPoint(-130, -60); 3704 item8.vertex = true; 3705 bg.insert(item8); 3706 var item9 = new mxCell('Close', new mxGeometry(1, 1, 70, 40), s + 'rrect;rSize=5;fillColor=#6C757D;strokeColor=none;fontColor=#FFFFFF;fontSize=14;'); 3707 item9.geometry.relative = true; 3708 item9.geometry.offset = new mxPoint(-220, -60); 3709 item9.vertex = true; 3710 bg.insert(item9); 3711 3712 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Modal conent'); 3713 }), 3714 3715 this.addEntry(dt + 'horizontal navigation', function() 3716 { 3717 var item1 = new mxCell('Active', new mxGeometry(0, 0, 80, 30), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#0085FC;'); 3718 item1.vertex = true; 3719 var item2 = new mxCell('Link', new mxGeometry(80, 0, 60, 30), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#0085FC;'); 3720 item2.vertex = true; 3721 var item3 = new mxCell('Link', new mxGeometry(140, 0, 60, 30), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#0085FC;'); 3722 item3.vertex = true; 3723 var item4 = new mxCell('Disabled', new mxGeometry(200, 0, 80, 30), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#7D868C;'); 3724 item4.vertex = true; 3725 3726 return sb.createVertexTemplateFromCells([item1, item2, item3, item4], 280, 30, 'Horizontal navigation'); 3727 }), 3728 3729 this.addEntry(dt + 'vertical navigation', function() 3730 { 3731 var item1 = new mxCell('Active', new mxGeometry(0, 0, 80, 30), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#0085FC;align=left;spacing=10;'); 3732 item1.vertex = true; 3733 var item2 = new mxCell('Link', new mxGeometry(0, 40, 80, 30), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#0085FC;align=left;spacing=10;'); 3734 item2.vertex = true; 3735 var item3 = new mxCell('Link', new mxGeometry(0, 80, 80, 30), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#0085FC;align=left;spacing=10;'); 3736 item3.vertex = true; 3737 var item4 = new mxCell('Disabled', new mxGeometry(0, 120, 80, 30), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#7D868C;align=left;spacing=10;'); 3738 item4.vertex = true; 3739 3740 return sb.createVertexTemplateFromCells([item1, item2, item3, item4], 80, 150, 'Vertical navigation'); 3741 }), 3742 3743 this.addEntry(dt + 'tabs', function() 3744 { 3745 var item1 = new mxCell('Active', new mxGeometry(0, 0, 80, 40), s + 'tabTop;strokeColor=#DFDFDF;fillColor=#ffffff;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#4B5259;'); 3746 item1.vertex = true; 3747 var item2 = new mxCell('Link', new mxGeometry(85, 0, 50, 40), 'strokeColor=none;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#0085FC;'); 3748 item2.vertex = true; 3749 var item3 = new mxCell('Link', new mxGeometry(145, 0, 50, 40), 'strokeColor=none;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#0085FC;'); 3750 item3.vertex = true; 3751 var item4 = new mxCell('Disabled', new mxGeometry(200, 0, 60, 40), 'strokeColor=none;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#0085FC;fontColor=#4B5259;'); 3752 item4.vertex = true; 3753 var item5 = new mxCell('', new mxGeometry(80, 35, 700, 10), 'shape=line;strokeColor=#dddddd;'); 3754 item5.vertex = true; 3755 3756 return sb.createVertexTemplateFromCells([item1, item2, item3, item4, item5], 780, 45, 'Tabs'); 3757 }), 3758 3759 this.addEntry(dt + 'navigation pills', function() 3760 { 3761 var item1 = new mxCell('Active', new mxGeometry(0, 0, 70, 40), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;fontSize=14;fontColor=#ffffff;'); 3762 item1.vertex = true; 3763 var item2 = new mxCell('Link', new mxGeometry(70, 0, 60, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#0085FC;'); 3764 item2.vertex = true; 3765 var item3 = new mxCell('Link', new mxGeometry(130, 0, 60, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#0085FC;'); 3766 item3.vertex = true; 3767 var item4 = new mxCell('Disabled', new mxGeometry(190, 0, 80, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#7D868C;'); 3768 item4.vertex = true; 3769 3770 return sb.createVertexTemplateFromCells([item1, item2, item3, item4], 280, 40, 'Navigation pills'); 3771 }), 3772 3773 this.addEntry(dt + 'tabs with dropdown', function() 3774 { 3775 var item1 = new mxCell('Active', new mxGeometry(0, 0, 80, 40), s + 'tabTop;strokeColor=#DFDFDF;fillColor=#ffffff;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#4B5259;'); 3776 item1.vertex = true; 3777 var item2 = new mxCell('Dropdown', new mxGeometry(85, 0, 100, 40), 'strokeColor=none;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#0085FC;spacingRight=10;'); 3778 item2.vertex = true; 3779 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#0085FC;strokeColor=none;perimeter=none;'); 3780 marker1.geometry.relative = true; 3781 marker1.geometry.offset = new mxPoint(-17, -2.5); 3782 marker1.vertex = true; 3783 item2.insert(marker1); 3784 var item3 = new mxCell('Link', new mxGeometry(195, 0, 50, 40), 'strokeColor=none;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#0085FC;'); 3785 item3.vertex = true; 3786 var item4 = new mxCell('Disabled', new mxGeometry(250, 0, 60, 40), 'strokeColor=none;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#0085FC;fontColor=#4B5259;'); 3787 item4.vertex = true; 3788 var item5 = new mxCell('', new mxGeometry(80, 35, 700, 10), 'shape=line;strokeColor=#dddddd;'); 3789 item5.vertex = true; 3790 3791 return sb.createVertexTemplateFromCells([item1, item2, item3, item4, item5], 780, 45, 'Tabs with dropdown'); 3792 }), 3793 3794 this.addEntry(dt + 'navigation pills with dropdown', function() 3795 { 3796 var item1 = new mxCell('Active', new mxGeometry(0, 0, 70, 40), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;fontSize=14;fontColor=#ffffff;sketch=0;'); 3797 item1.vertex = true; 3798 var item2 = new mxCell('Dropdown', new mxGeometry(80, 0, 100, 40), 'strokeColor=none;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#0085FC;spacingRight=10;'); 3799 item2.vertex = true; 3800 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#0085FC;strokeColor=none;perimeter=none;sketch=0;'); 3801 marker1.geometry.relative = true; 3802 marker1.geometry.offset = new mxPoint(-17, -2.5); 3803 marker1.vertex = true; 3804 item2.insert(marker1); 3805 var item3 = new mxCell('Link', new mxGeometry(180, 0, 60, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#0085FC;'); 3806 item3.vertex = true; 3807 var item4 = new mxCell('Disabled', new mxGeometry(240, 0, 80, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#7D868C;'); 3808 item4.vertex = true; 3809 3810 return sb.createVertexTemplateFromCells([item1, item2, item3, item4], 280, 40, 'Navigation pills with dropdown'); 3811 }), 3812 3813 this.addEntry(dt + 'tabs with description', function() 3814 { 3815 var item1 = new mxCell('Home ', new mxGeometry(0, 0, 80, 40), s + 'tabTop;strokeColor=#DFDFDF;fillColor=#ffffff;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#4B5259;'); 3816 item1.vertex = true; 3817 var item2 = new mxCell('Profile', new mxGeometry(85, 0, 50, 40), 'strokeColor=none;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#0085FC;'); 3818 item2.vertex = true; 3819 var item3 = new mxCell('Contact', new mxGeometry(145, 0, 50, 40), 'strokeColor=none;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#0085FC;'); 3820 item3.vertex = true; 3821 var item4 = new mxCell('', new mxGeometry(80, 35, 700, 10), 'shape=line;strokeColor=#dddddd;'); 3822 item4.vertex = true; 3823 var item5 = new mxCell('Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.', 3824 new mxGeometry(0, 55, 780, 80), 'strokeColor=none;fillColor=none;whiteSpace=wrap;html=1;align=left;verticalAlign=top;fontSize=14;'); 3825 item5.vertex = true; 3826 3827 return sb.createVertexTemplateFromCells([item1, item2, item3, item4, item5], 780, 135, 'Tabs with description'); 3828 }), 3829 3830 this.addEntry(dt + 'navigation pills with description', function() 3831 { 3832 var item1 = new mxCell('Home', new mxGeometry(0, 0, 60, 40), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;fontSize=14;fontColor=#ffffff;'); 3833 item1.vertex = true; 3834 var item2 = new mxCell('Profile', new mxGeometry(60, 0, 70, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#0085FC;'); 3835 item2.vertex = true; 3836 var item3 = new mxCell('Contact', new mxGeometry(130, 0, 60, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#0085FC;'); 3837 item3.vertex = true; 3838 var item4 = new mxCell('Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.', 3839 new mxGeometry(0, 55, 780, 80), 'strokeColor=none;fillColor=none;whiteSpace=wrap;html=1;align=left;verticalAlign=top;fontSize=14;'); 3840 item4.vertex = true; 3841 3842 return sb.createVertexTemplateFromCells([item1, item2, item3, item4], 780, 135, 'Navigation pills with description'); 3843 }), 3844 3845 this.addEntry(dt + 'vertical navigation pills with description', function() 3846 { 3847 var item1 = new mxCell('Home', new mxGeometry(0, 0, 220, 40), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;fontSize=14;fontColor=#ffffff;align=left;spacing=15;'); 3848 item1.vertex = true; 3849 var item2 = new mxCell('Profile', new mxGeometry(0, 40, 220, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#0085FC;align=left;spacing=15;'); 3850 item2.vertex = true; 3851 var item3 = new mxCell('Messages', new mxGeometry(0, 80, 220, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#0085FC;align=left;spacing=15;'); 3852 item3.vertex = true; 3853 var item4 = new mxCell('Settings', new mxGeometry(0, 120, 220, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#0085FC;align=left;spacing=15;'); 3854 item4.vertex = true; 3855 var item5 = new mxCell('Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.', 3856 new mxGeometry(240, 0, 560, 160), 'strokeColor=none;fillColor=none;whiteSpace=wrap;html=1;align=left;verticalAlign=top;fontSize=14;'); 3857 item5.vertex = true; 3858 3859 return sb.createVertexTemplateFromCells([item1, item2, item3, item4, item5], 800, 160, 'Vertical navigation pills with description'); 3860 }), 3861 3862 this.addEntry(dt + 'navbar', function() 3863 { 3864 var bg = new mxCell('Navbar', new mxGeometry(0, 0, 800, 60), 'html=1;shadow=0;dashed=0;fillColor=#F8F9FA;strokeColor=none;fontSize=16;fontColor=#181819;align=left;spacing=15;'); 3865 bg.vertex = true; 3866 var item1 = new mxCell('Home', new mxGeometry(0, 0, 70, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#181819;align=center;'); 3867 item1.geometry.relative = true; 3868 item1.geometry.offset = new mxPoint(70, 10); 3869 item1.vertex = true; 3870 bg.insert(item1); 3871 var item2 = new mxCell('Link', new mxGeometry(0, 0, 50, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#7C7C7D;align=center;'); 3872 item2.geometry.relative = true; 3873 item2.geometry.offset = new mxPoint(140, 10); 3874 item2.vertex = true; 3875 bg.insert(item2); 3876 var item3 = new mxCell('Dropdown', new mxGeometry(0, 0, 100, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#7C7C7D;align=right;spacingRight=20;'); 3877 item3.geometry.relative = true; 3878 item3.geometry.offset = new mxPoint(190, 10); 3879 item3.vertex = true; 3880 bg.insert(item3); 3881 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#7C7C7D;strokeColor=none;perimeter=none;'); 3882 marker1.geometry.relative = true; 3883 marker1.geometry.offset = new mxPoint(-17, -2.5); 3884 marker1.vertex = true; 3885 item3.insert(marker1); 3886 var item4 = new mxCell('Disabled', new mxGeometry(0, 0, 80, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#ADAEAF;align=center;'); 3887 item4.geometry.relative = true; 3888 item4.geometry.offset = new mxPoint(290, 10); 3889 item4.vertex = true; 3890 bg.insert(item4); 3891 var item5 = new mxCell('Search', new mxGeometry(1, 0, 70, 40), s + 'rrect;rSize=5;fontSize=14;fontColor=#33A64C;strokeColor=#33A64C;fillColor=none;'); 3892 item5.geometry.relative = true; 3893 item5.geometry.offset = new mxPoint(-80, 10); 3894 item5.vertex = true; 3895 bg.insert(item5); 3896 var item6 = new mxCell('Search', new mxGeometry(1, 0, 180, 40), s + 'rrect;rSize=5;fontSize=14;fontColor=#6C767D;strokeColor=#CED4DA;fillColor=#ffffff;align=left;spacing=10;'); 3897 item6.geometry.relative = true; 3898 item6.geometry.offset = new mxPoint(-270, 10); 3899 item6.vertex = true; 3900 bg.insert(item6); 3901 3902 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar'); 3903 }), 3904 3905 this.addEntry(dt + 'navbar with image', function() 3906 { 3907 var bg = new mxCell('', new mxGeometry(0, 0, 800, 60), 'html=1;shadow=0;dashed=0;fillColor=#F8F9FA;strokeColor=none;fontSize=16;fontColor=#181819;align=left;spacing=2;spacingLeft=55;'); 3908 bg.vertex = true; 3909 var item1 = new mxCell('', new mxGeometry(0, 0, 40, 40), s + 'logo;fillColor=#54407A;strokeColor=none;sketch=0;'); 3910 item1.geometry.relative = true; 3911 item1.geometry.offset = new mxPoint(10, 10); 3912 item1.vertex = true; 3913 bg.insert(item1); 3914 3915 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar with image'); 3916 }), 3917 3918 this.addEntry(dt + 'navbar with image', function() 3919 { 3920 var bg = new mxCell('Bootstrap', new mxGeometry(0, 0, 800, 60), 'html=1;shadow=0;dashed=0;fillColor=#F8F9FA;strokeColor=none;fontSize=16;fontColor=#181819;align=left;spacing=2;spacingLeft=55;'); 3921 bg.vertex = true; 3922 var item1 = new mxCell('', new mxGeometry(0, 0, 40, 40), s + 'logo;fillColor=#54407A;strokeColor=none;sketch=0;'); 3923 item1.geometry.relative = true; 3924 item1.geometry.offset = new mxPoint(10, 10); 3925 item1.vertex = true; 3926 bg.insert(item1); 3927 3928 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar with image'); 3929 }), 3930 3931 this.addEntry(dt + 'navbar with forms', function() 3932 { 3933 var bg = new mxCell('', new mxGeometry(0, 0, 800, 60), 'html=1;shadow=0;dashed=0;fillColor=#F8F9FA;strokeColor=none;fontSize=16;fontColor=#181819;align=left;spacing=15;'); 3934 bg.vertex = true; 3935 var item1 = new mxCell('Search', new mxGeometry(0, 0, 180, 40), s + 'rrect;rSize=5;fontSize=14;fontColor=#6C767D;strokeColor=#CED4DA;fillColor=#ffffff;align=left;spacing=10;'); 3936 item1.geometry.relative = true; 3937 item1.geometry.offset = new mxPoint(10, 10); 3938 item1.vertex = true; 3939 bg.insert(item1); 3940 var item2 = new mxCell('Search', new mxGeometry(0, 0, 70, 40), s + 'rrect;rSize=5;fontSize=14;fontColor=#33A64C;strokeColor=#33A64C;fillColor=none;'); 3941 item2.geometry.relative = true; 3942 item2.geometry.offset = new mxPoint(200, 10); 3943 item2.vertex = true; 3944 bg.insert(item2); 3945 3946 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar with forms'); 3947 }), 3948 3949 this.addEntry(dt + 'navbar', function() 3950 { 3951 var bg = new mxCell('Navbar', new mxGeometry(0, 0, 800, 60), 'html=1;shadow=0;dashed=0;fillColor=#F8F9FA;strokeColor=none;fontSize=16;fontColor=#181819;align=left;spacing=15;'); 3952 bg.vertex = true; 3953 var item1 = new mxCell('Search', new mxGeometry(1, 0, 70, 40), s + 'rrect;rSize=5;fontSize=14;fontColor=#33A64C;strokeColor=#33A64C;fillColor=none;'); 3954 item1.geometry.relative = true; 3955 item1.geometry.offset = new mxPoint(-80, 10); 3956 item1.vertex = true; 3957 bg.insert(item1); 3958 var item2 = new mxCell('Search', new mxGeometry(1, 0, 180, 40), s + 'rrect;rSize=5;fontSize=14;fontColor=#6C767D;strokeColor=#CED4DA;fillColor=#ffffff;align=left;spacing=10;'); 3959 item2.geometry.relative = true; 3960 item2.geometry.offset = new mxPoint(-270, 10); 3961 item2.vertex = true; 3962 bg.insert(item2); 3963 3964 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar'); 3965 }), 3966 3967 this.addEntry(dt + 'navbar with input group', function() 3968 { 3969 var bg = new mxCell('', new mxGeometry(0, 0, 800, 60), 'html=1;shadow=0;dashed=0;fillColor=#F8F9FA;strokeColor=none;fontSize=16;fontColor=#181819;align=left;spacing=15;'); 3970 bg.vertex = true; 3971 var item1 = new mxCell('Username', new mxGeometry(0, 0, 200, 40), s + 'rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacingLeft=50;fontSize=14;'); 3972 item1.geometry.relative = true; 3973 item1.geometry.offset = new mxPoint(10, 10); 3974 item1.vertex = true; 3975 bg.insert(item1); 3976 var item2 = new mxCell('@', new mxGeometry(0, 0, 40, 40), s + 'leftButton;strokeColor=inherit;gradientColor=inherit;fontColor=inherit;fillColor=#E9ECEF;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;'); 3977 item2.geometry.relative = true; 3978 item2.vertex = true; 3979 item1.insert(item2); 3980 3981 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar with input group'); 3982 }), 3983 3984 this.addEntry(dt + 'navbar with varying button sizes', function() 3985 { 3986 var bg = new mxCell('', new mxGeometry(0, 0, 800, 60), 'html=1;shadow=0;dashed=0;fillColor=#F8F9FA;strokeColor=none;fontSize=16;fontColor=#181819;align=left;spacing=15;'); 3987 bg.vertex = true; 3988 var item1 = new mxCell('Main button', new mxGeometry(0, 0, 120, 40), s + 'rrect;rSize=5;strokeColor=#33A64C;html=1;whiteSpace=wrap;fillColor=none;fontColor=#33A64C;align=center;spacingLeft=0;fontSize=14;'); 3989 item1.geometry.relative = true; 3990 item1.geometry.offset = new mxPoint(10, 10); 3991 item1.vertex = true; 3992 bg.insert(item1); 3993 var item2 = new mxCell('Smaller button', new mxGeometry(0, 0, 120, 30), s + 'rrect;rSize=5;;strokeColor=#6C767D;fontColor=#848D92;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;'); 3994 item2.geometry.relative = true; 3995 item2.geometry.offset = new mxPoint(130, 15); 3996 item2.vertex = true; 3997 bg.insert(item2); 3998 3999 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar with varying button sizes'); 4000 }), 4001 4002 this.addEntry(dt + 'navbar with inline element', function() 4003 { 4004 var bg = new mxCell('Navbar text with an inline element', new mxGeometry(0, 0, 800, 60), 'html=1;shadow=0;dashed=0;fillColor=#F8F9FA;strokeColor=none;fontSize=16;fontColor=#7C7C7D;align=left;spacing=15;'); 4005 bg.vertex = true; 4006 4007 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar with inline element'); 4008 }), 4009 4010 this.addEntry(dt + 'navbar with text', function() 4011 { 4012 var bg = new mxCell('Navbar text with an inline element', new mxGeometry(0, 0, 800, 60), 'html=1;shadow=0;dashed=0;fillColor=#F8F9FA;strokeColor=none;fontSize=16;fontColor=#7C7C7D;align=right;spacing=15;'); 4013 bg.vertex = true; 4014 4015 var item1 = new mxCell('Navbar w/ text', new mxGeometry(0, 0, 130, 40), 'strokeColor=none;html=1;whiteSpace=wrap;fillColor=none;fontColor=#181819;align=left;fontSize=16;spacing=10;'); 4016 item1.geometry.relative = true; 4017 item1.geometry.offset = new mxPoint(10, 10); 4018 item1.vertex = true; 4019 bg.insert(item1); 4020 var item2 = new mxCell('Home', new mxGeometry(0, 0, 60, 40), 'strokeColor=none;html=1;whiteSpace=wrap;fillColor=none;fontColor=#181819;align=left;fontSize=14;spacing=10;'); 4021 item2.geometry.relative = true; 4022 item2.geometry.offset = new mxPoint(140, 10); 4023 item2.vertex = true; 4024 bg.insert(item2); 4025 var item3 = new mxCell('Features', new mxGeometry(0, 0, 80, 40), 'strokeColor=none;html=1;whiteSpace=wrap;fillColor=none;fontColor=#7C7C7D;align=left;fontSize=14;spacing=10;'); 4026 item3.geometry.relative = true; 4027 item3.geometry.offset = new mxPoint(200, 10); 4028 item3.vertex = true; 4029 bg.insert(item3); 4030 var item4 = new mxCell('Pricing', new mxGeometry(0, 0, 60, 40), 'strokeColor=none;html=1;whiteSpace=wrap;fillColor=none;fontColor=#7C7C7D;align=left;fontSize=14;spacing=10;'); 4031 item4.geometry.relative = true; 4032 item4.geometry.offset = new mxPoint(280, 10); 4033 item4.vertex = true; 4034 bg.insert(item4); 4035 4036 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar with text'); 4037 }), 4038 4039 this.addEntry(dt + 'navbar dark', function() 4040 { 4041 var bg = new mxCell('Navbar', new mxGeometry(0, 0, 800, 60), 'html=1;shadow=0;dashed=0;fillColor=#343A40;strokeColor=none;fontSize=16;fontColor=#ffffff;align=left;spacing=15;'); 4042 bg.vertex = true; 4043 var item1 = new mxCell('Home', new mxGeometry(0, 0, 70, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#ffffff;align=center;'); 4044 item1.geometry.relative = true; 4045 item1.geometry.offset = new mxPoint(70, 10); 4046 item1.vertex = true; 4047 bg.insert(item1); 4048 var item2 = new mxCell('Features', new mxGeometry(0, 0, 70, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#9A9DA0;align=center;'); 4049 item2.geometry.relative = true; 4050 item2.geometry.offset = new mxPoint(140, 10); 4051 item2.vertex = true; 4052 bg.insert(item2); 4053 var item3 = new mxCell('Pricing', new mxGeometry(0, 0, 80, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#9A9DA0;align=center;spacingRight=0;'); 4054 item3.geometry.relative = true; 4055 item3.geometry.offset = new mxPoint(210, 10); 4056 item3.vertex = true; 4057 bg.insert(item3); 4058 var item4 = new mxCell('About', new mxGeometry(0, 0, 80, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#9A9DA0;align=center;'); 4059 item4.geometry.relative = true; 4060 item4.geometry.offset = new mxPoint(290, 10); 4061 item4.vertex = true; 4062 bg.insert(item4); 4063 var item5 = new mxCell('Search', new mxGeometry(1, 0, 70, 40), s + 'rrect;rSize=5;fontSize=14;fontColor=#1CA5B8;strokeColor=#1CA5B8;fillColor=none;'); 4064 item5.geometry.relative = true; 4065 item5.geometry.offset = new mxPoint(-80, 10); 4066 item5.vertex = true; 4067 bg.insert(item5); 4068 var item6 = new mxCell('Search', new mxGeometry(1, 0, 180, 40), s + 'rrect;rSize=5;fontSize=14;fontColor=#6C767D;strokeColor=#CED4DA;fillColor=#ffffff;align=left;spacing=10;'); 4069 item6.geometry.relative = true; 4070 item6.geometry.offset = new mxPoint(-270, 10); 4071 item6.vertex = true; 4072 bg.insert(item6); 4073 4074 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar dark'); 4075 }), 4076 4077 this.addEntry(dt + 'navbar blue', function() 4078 { 4079 var bg = new mxCell('Navbar', new mxGeometry(0, 0, 800, 60), 'html=1;shadow=0;dashed=0;fillColor=#0085FC;strokeColor=none;fontSize=16;fontColor=#ffffff;align=left;spacing=15;'); 4080 bg.vertex = true; 4081 var item1 = new mxCell('Home', new mxGeometry(0, 0, 70, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#ffffff;align=center;'); 4082 item1.geometry.relative = true; 4083 item1.geometry.offset = new mxPoint(70, 10); 4084 item1.vertex = true; 4085 bg.insert(item1); 4086 var item2 = new mxCell('Features', new mxGeometry(0, 0, 70, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#79BFFD;align=center;'); 4087 item2.geometry.relative = true; 4088 item2.geometry.offset = new mxPoint(140, 10); 4089 item2.vertex = true; 4090 bg.insert(item2); 4091 var item3 = new mxCell('Pricing', new mxGeometry(0, 0, 80, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#79BFFD;align=center;spacingRight=0;'); 4092 item3.geometry.relative = true; 4093 item3.geometry.offset = new mxPoint(210, 10); 4094 item3.vertex = true; 4095 bg.insert(item3); 4096 var item4 = new mxCell('About', new mxGeometry(0, 0, 80, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#79BFFD;align=center;'); 4097 item4.geometry.relative = true; 4098 item4.geometry.offset = new mxPoint(290, 10); 4099 item4.vertex = true; 4100 bg.insert(item4); 4101 var item5 = new mxCell('Search', new mxGeometry(1, 0, 70, 40), s + 'rrect;rSize=5;fontSize=14;fontColor=#ffffff;strokeColor=#ffffff;fillColor=none;'); 4102 item5.geometry.relative = true; 4103 item5.geometry.offset = new mxPoint(-80, 10); 4104 item5.vertex = true; 4105 bg.insert(item5); 4106 var item6 = new mxCell('Search', new mxGeometry(1, 0, 180, 40), s + 'rrect;rSize=5;fontSize=14;fontColor=#6C767D;strokeColor=#CED4DA;fillColor=#ffffff;align=left;spacing=10;'); 4107 item6.geometry.relative = true; 4108 item6.geometry.offset = new mxPoint(-270, 10); 4109 item6.vertex = true; 4110 bg.insert(item6); 4111 4112 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar blue'); 4113 }), 4114 4115 this.addEntry(dt + 'navbar light', function() 4116 { 4117 var bg = new mxCell('Navbar', new mxGeometry(0, 0, 800, 60), 'html=1;shadow=0;dashed=0;fillColor=#E3F3FD;strokeColor=none;fontSize=16;fontColor=#161819;align=left;spacing=15;'); 4118 bg.vertex = true; 4119 var item1 = new mxCell('Home', new mxGeometry(0, 0, 70, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#161819;align=center;'); 4120 item1.geometry.relative = true; 4121 item1.geometry.offset = new mxPoint(70, 10); 4122 item1.vertex = true; 4123 bg.insert(item1); 4124 var item2 = new mxCell('Features', new mxGeometry(0, 0, 70, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#71797E;align=center;'); 4125 item2.geometry.relative = true; 4126 item2.geometry.offset = new mxPoint(140, 10); 4127 item2.vertex = true; 4128 bg.insert(item2); 4129 var item3 = new mxCell('Pricing', new mxGeometry(0, 0, 80, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#71797E;align=center;spacingRight=0;'); 4130 item3.geometry.relative = true; 4131 item3.geometry.offset = new mxPoint(210, 10); 4132 item3.vertex = true; 4133 bg.insert(item3); 4134 var item4 = new mxCell('About', new mxGeometry(0, 0, 80, 40), 'fillColor=none;strokeColor=none;fontSize=14;fontColor=#71797E;align=center;'); 4135 item4.geometry.relative = true; 4136 item4.geometry.offset = new mxPoint(290, 10); 4137 item4.vertex = true; 4138 bg.insert(item4); 4139 var item5 = new mxCell('Search', new mxGeometry(1, 0, 70, 40), s + 'rrect;rSize=5;fontSize=14;fontColor=#0085FC;strokeColor=#0085FC;fillColor=none;'); 4140 item5.geometry.relative = true; 4141 item5.geometry.offset = new mxPoint(-80, 10); 4142 item5.vertex = true; 4143 bg.insert(item5); 4144 var item6 = new mxCell('Search', new mxGeometry(1, 0, 180, 40), s + 'rrect;rSize=5;fontSize=14;fontColor=#6C767D;strokeColor=#CED4DA;fillColor=#ffffff;align=left;spacing=10;'); 4145 item6.geometry.relative = true; 4146 item6.geometry.offset = new mxPoint(-270, 10); 4147 item6.vertex = true; 4148 bg.insert(item6); 4149 4150 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Navbar light'); 4151 }), 4152 4153 this.addEntry(dt + 'pagination', function() 4154 { 4155 var bg = new mxCell('', new mxGeometry(0, 0, 220, 30), s + 'rrect;rSize=5;strokeColor=#DEE2E6;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#0085FC;fontSize=14;'); 4156 bg.vertex = true; 4157 var button1 = new mxCell('Previous', new mxGeometry(0, 0, 70, 30), inh + s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 4158 button1.geometry.relative = true; 4159 button1.vertex = true; 4160 bg.insert(button1); 4161 var button2 = new mxCell('1', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 4162 button2.geometry.relative = true; 4163 button2.geometry.offset = new mxPoint(70, 0); 4164 button2.vertex = true; 4165 bg.insert(button2); 4166 var button3 = new mxCell('2', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 4167 button3.geometry.relative = true; 4168 button3.geometry.offset = new mxPoint(100, 0); 4169 button3.vertex = true; 4170 bg.insert(button3); 4171 var button4 = new mxCell('3', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 4172 button4.geometry.relative = true; 4173 button4.geometry.offset = new mxPoint(130, 0); 4174 button4.vertex = true; 4175 bg.insert(button4); 4176 var button5 = new mxCell('Next', new mxGeometry(1, 0, 60, 30), inh + s + 'rightButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 4177 button5.geometry.relative = true; 4178 button5.geometry.offset = new mxPoint(-60, 0); 4179 button5.vertex = true; 4180 bg.insert(button5); 4181 4182 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Pagination'); 4183 }), 4184 4185 this.addEntry(dt + 'pagination', function() 4186 { 4187 var bg = new mxCell('', new mxGeometry(0, 0, 150, 30), s + 'rrect;rSize=5;strokeColor=#DEE2E6;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#0085FC;'); 4188 bg.vertex = true; 4189 var button1 = new mxCell('<<', new mxGeometry(0, 0, 30, 30), inh + s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 4190 button1.geometry.relative = true; 4191 button1.vertex = true; 4192 bg.insert(button1); 4193 var button2 = new mxCell('1', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 4194 button2.geometry.relative = true; 4195 button2.geometry.offset = new mxPoint(30, 0); 4196 button2.vertex = true; 4197 bg.insert(button2); 4198 var button3 = new mxCell('2', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 4199 button3.geometry.relative = true; 4200 button3.geometry.offset = new mxPoint(60, 0); 4201 button3.vertex = true; 4202 bg.insert(button3); 4203 var button4 = new mxCell('3', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 4204 button4.geometry.relative = true; 4205 button4.geometry.offset = new mxPoint(90, 0); 4206 button4.vertex = true; 4207 bg.insert(button4); 4208 var button5 = new mxCell('>>', new mxGeometry(1, 0, 30, 30), inh + s + 'rightButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 4209 button5.geometry.relative = true; 4210 button5.geometry.offset = new mxPoint(-30, 0); 4211 button5.vertex = true; 4212 bg.insert(button5); 4213 4214 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Pagination'); 4215 }), 4216 4217 this.addEntry(dt + 'pagination with disabled and active states', function() 4218 { 4219 var bg = new mxCell('', new mxGeometry(0, 0, 220, 30), s + 'rrect;rSize=5;strokeColor=#DEE2E6;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#0085FC;fontSize=14;'); 4220 bg.vertex = true; 4221 var button1 = new mxCell('Previous', new mxGeometry(0, 0, 70, 30), 4222 'strokeColor=inherit;fillColor=inherit;gradientColor=inherit;' + s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontColor=#6C767D;fontSize=14;'); 4223 button1.geometry.relative = true; 4224 button1.vertex = true; 4225 bg.insert(button1); 4226 var button2 = new mxCell('1', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 4227 button2.geometry.relative = true; 4228 button2.geometry.offset = new mxPoint(70, 0); 4229 button2.vertex = true; 4230 bg.insert(button2); 4231 var button3 = new mxCell('2', new mxGeometry(0, 0, 30, 30), 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;fontSize=14;'); 4232 button3.geometry.relative = true; 4233 button3.geometry.offset = new mxPoint(100, 0); 4234 button3.vertex = true; 4235 bg.insert(button3); 4236 var button4 = new mxCell('3', new mxGeometry(0, 0, 30, 30), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 4237 button4.geometry.relative = true; 4238 button4.geometry.offset = new mxPoint(130, 0); 4239 button4.vertex = true; 4240 bg.insert(button4); 4241 var button5 = new mxCell('Next', new mxGeometry(1, 0, 60, 30), inh + s + 'rightButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=14;'); 4242 button5.geometry.relative = true; 4243 button5.geometry.offset = new mxPoint(-60, 0); 4244 button5.vertex = true; 4245 bg.insert(button5); 4246 4247 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Pagination with disabled and active states'); 4248 }), 4249 4250 this.addEntry(dt + 'pagination big', function() 4251 { 4252 var bg = new mxCell('', new mxGeometry(0, 0, 120, 40), s + 'rrect;rSize=5;strokeColor=#DEE2E6;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#0085FC;'); 4253 bg.vertex = true; 4254 var button1 = new mxCell('1', new mxGeometry(0, 0, 40, 40), 4255 'strokeColor=inherit;fillColor=inherit;gradientColor=inherit;' + s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;fontSize=16;'); 4256 button1.geometry.relative = true; 4257 button1.vertex = true; 4258 bg.insert(button1); 4259 var button3 = new mxCell('2', new mxGeometry(0, 0, 40, 40), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=16;'); 4260 button3.geometry.relative = true; 4261 button3.geometry.offset = new mxPoint(40, 0); 4262 button3.vertex = true; 4263 bg.insert(button3); 4264 var button5 = new mxCell('3', new mxGeometry(1, 0, 40, 40), inh + s + 'rightButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=16;'); 4265 button5.geometry.relative = true; 4266 button5.geometry.offset = new mxPoint(-40, 0); 4267 button5.vertex = true; 4268 bg.insert(button5); 4269 4270 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Pagination, big'); 4271 }), 4272 4273 this.addEntry(dt + 'pagination small', function() 4274 { 4275 var bg = new mxCell('', new mxGeometry(0, 0, 75, 25), s + 'rrect;rSize=5;strokeColor=#DEE2E6;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#0085FC;'); 4276 bg.vertex = true; 4277 var button1 = new mxCell('1', new mxGeometry(0, 0, 25, 25), 4278 'strokeColor=inherit;fillColor=inherit;gradientColor=inherit;' + s + 'leftButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;fontSize=12;'); 4279 button1.geometry.relative = true; 4280 button1.vertex = true; 4281 bg.insert(button1); 4282 var button3 = new mxCell('2', new mxGeometry(0, 0, 25, 25), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=12;'); 4283 button3.geometry.relative = true; 4284 button3.geometry.offset = new mxPoint(25, 0); 4285 button3.vertex = true; 4286 bg.insert(button3); 4287 var button5 = new mxCell('3', new mxGeometry(1, 0, 25, 25), inh + s + 'rightButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeHeight=1;fontSize=12;'); 4288 button5.geometry.relative = true; 4289 button5.geometry.offset = new mxPoint(-25, 0); 4290 button5.vertex = true; 4291 bg.insert(button5); 4292 4293 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Pagination, small'); 4294 }), 4295 4296 this.addEntry(dt + 'popover', function() 4297 { 4298 var bg = new mxCell('And here\'s some amazing content. It\'s very engaging. Right?', new mxGeometry(0, 0, 200, 60), 4299 s + 'popover;fillColor=#ffffff;strokeColor=#CCCCCC;dx=35;dy=5;rSize=5;direction=south;whiteSpace=wrap;verticalAlign=bottom;spacing=5;fontSize=10;spacingLeft=5;align=left;'); 4300 bg.vertex = true; 4301 var item1 = new mxCell('Popover title', new mxGeometry(1, 0, 195, 25), s + 'topButton;rSize=5;fillColor=#F7F7F7;strokeColor=#CCCCCC;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=5;'); 4302 item1.geometry.relative = true; 4303 item1.geometry.offset = new mxPoint(-195, 0); 4304 item1.vertex = true; 4305 bg.insert(item1); 4306 4307 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Popover'); 4308 }), 4309 4310 this.addEntry(dt + 'popover on top', function() 4311 { 4312 var bg = new mxCell('Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', new mxGeometry(0, 0, 200, 50), 4313 s + 'popover;fillColor=#ffffff;strokeColor=#CCCCCC;dx=100;dy=5;rSize=5;whiteSpace=wrap;verticalAlign=top;spacing=10;fontSize=10;spacingLeft=0;align=left;spacingTop=-5;'); 4314 bg.vertex = true; 4315 var item1 = new mxCell('Popover on top', new mxGeometry(50, 50, 100, 30), s + 'rrect;rSize=5;fillColor=#6C767D;strokeColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=5;fontColor=#FFFFFF;'); 4316 item1.vertex = true; 4317 4318 return sb.createVertexTemplateFromCells([bg, item1], 200, 80, 'Popover on top'); 4319 }), 4320 4321 this.addEntry(dt + 'progress bar', function() 4322 { 4323 var bg = new mxCell('', new mxGeometry(0, 0, 800, 20), 4324 s + 'rrect;rSize=5;fillColor=#E9ECEF;strokeColor=none;'); 4325 bg.vertex = true; 4326 var item1 = new mxCell('', new mxGeometry(0, 0, 250, 20), s + 'leftButton;rSize=5;fillColor=#0085FC;strokeColor=none;resizeHeight=1;'); 4327 item1.geometry.relative = true; 4328 item1.vertex = true; 4329 bg.insert(item1); 4330 4331 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Progress bar'); 4332 }), 4333 4334 this.addEntry(dt + 'progress bar with label', function() 4335 { 4336 var bg = new mxCell('', new mxGeometry(0, 0, 800, 20), 4337 s + 'rrect;rSize=5;fillColor=#E9ECEF;strokeColor=none;'); 4338 bg.vertex = true; 4339 var item1 = new mxCell('25%', new mxGeometry(0, 0, 250, 20), s + 'leftButton;rSize=5;fillColor=#0085FC;strokeColor=none;fontColor=#ffffff;resizeHeight=1;'); 4340 item1.geometry.relative = true; 4341 item1.vertex = true; 4342 bg.insert(item1); 4343 4344 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Progress bar with label'); 4345 }), 4346 4347 this.addEntry(dt + 'progress bar green', function() 4348 { 4349 var bg = new mxCell('', new mxGeometry(0, 0, 800, 20), 4350 s + 'rrect;rSize=5;fillColor=#E9ECEF;strokeColor=none;'); 4351 bg.vertex = true; 4352 var item1 = new mxCell('', new mxGeometry(0, 0, 250, 20), s + 'leftButton;rSize=5;fillColor=#33A64C;strokeColor=none;resizeHeight=1;'); 4353 item1.geometry.relative = true; 4354 item1.vertex = true; 4355 bg.insert(item1); 4356 4357 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Progress bar, green'); 4358 }), 4359 4360 this.addEntry(dt + 'progress bar azure', function() 4361 { 4362 var bg = new mxCell('', new mxGeometry(0, 0, 800, 20), 4363 s + 'rrect;rSize=5;fillColor=#E9ECEF;strokeColor=none;'); 4364 bg.vertex = true; 4365 var item1 = new mxCell('', new mxGeometry(0, 0, 250, 20), s + 'leftButton;rSize=5;fillColor=#1CA5B8;strokeColor=none;resizeHeight=1;'); 4366 item1.geometry.relative = true; 4367 item1.vertex = true; 4368 bg.insert(item1); 4369 4370 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Progress bar, azure'); 4371 }), 4372 4373 this.addEntry(dt + 'progress bar yellow', function() 4374 { 4375 var bg = new mxCell('', new mxGeometry(0, 0, 800, 20), 4376 s + 'rrect;rSize=5;fillColor=#E9ECEF;strokeColor=none;'); 4377 bg.vertex = true; 4378 var item1 = new mxCell('', new mxGeometry(0, 0, 250, 20), s + 'leftButton;rSize=5;fillColor=#FFBC26;strokeColor=none;resizeHeight=1;'); 4379 item1.geometry.relative = true; 4380 item1.vertex = true; 4381 bg.insert(item1); 4382 4383 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Progress bar, yellow'); 4384 }), 4385 4386 this.addEntry(dt + 'progress bar red', function() 4387 { 4388 var bg = new mxCell('', new mxGeometry(0, 0, 800, 20), 4389 s + 'rrect;rSize=5;fillColor=#E9ECEF;strokeColor=none;'); 4390 bg.vertex = true; 4391 var item1 = new mxCell('', new mxGeometry(0, 0, 250, 20), s + 'leftButton;rSize=5;fillColor=#DB2843;strokeColor=none;resizeHeight=1;'); 4392 item1.geometry.relative = true; 4393 item1.vertex = true; 4394 bg.insert(item1); 4395 4396 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Progress bar, red'); 4397 }), 4398 4399 this.addEntry(dt + 'progress bar multiple', function() 4400 { 4401 var bg = new mxCell('', new mxGeometry(0, 0, 800, 20), 4402 s + 'rrect;rSize=5;fillColor=#E9ECEF;strokeColor=none;'); 4403 bg.vertex = true; 4404 var item1 = new mxCell('', new mxGeometry(0, 0, 550, 20), s + 'leftButton;rSize=5;fillColor=#1CA5B8;strokeColor=none;resizeHeight=1;'); 4405 item1.geometry.relative = true; 4406 item1.vertex = true; 4407 bg.insert(item1); 4408 var item2 = new mxCell('', new mxGeometry(0, 0, 400, 20), s + 'leftButton;rSize=5;fillColor=#33A64C;strokeColor=none;resizeHeight=1;'); 4409 item2.geometry.relative = true; 4410 item2.vertex = true; 4411 bg.insert(item2); 4412 var item3 = new mxCell('', new mxGeometry(0, 0, 150, 20), s + 'leftButton;rSize=5;fillColor=#0085FC;strokeColor=none;resizeHeight=1;'); 4413 item3.geometry.relative = true; 4414 item3.vertex = true; 4415 bg.insert(item3); 4416 4417 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Progress, multiple'); 4418 }), 4419 4420 this.addEntry(dt + 'progress bar striped blue', function() 4421 { 4422 var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 20), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;'); 4423 bg1.vertex = true; 4424 var bg2 = new mxCell('', new mxGeometry(0, 0, 500, 20), s + 'leftButtonStriped;fillColor=#0085FC;fontColor=#FFFFFF;whiteSpace=wrap;'); 4425 bg2.vertex = true; 4426 bg1.insert(bg2); 4427 4428 return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Progress bar, striped, blue'); 4429 }), 4430 4431 this.addEntry(dt + 'progress bar striped green', function() 4432 { 4433 var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 20), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;'); 4434 bg1.vertex = true; 4435 var bg2 = new mxCell('', new mxGeometry(0, 0, 500, 20), s + 'leftButtonStriped;fillColor=#59B958;fontColor=#FFFFFF;whiteSpace=wrap;'); 4436 bg2.vertex = true; 4437 bg1.insert(bg2); 4438 4439 return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Progress Bar, striped, green'); 4440 }), 4441 4442 this.addEntry(dt + 'progress bar striped light blue', function() 4443 { 4444 var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 20), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;'); 4445 bg1.vertex = true; 4446 var bg2 = new mxCell('', new mxGeometry(0, 0, 500, 20), s + 'leftButtonStriped;fillColor=#55BFE0;fontColor=#FFFFFF;whiteSpace=wrap;'); 4447 bg2.vertex = true; 4448 bg1.insert(bg2); 4449 4450 return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Progress bar, striped, light blue'); 4451 }), 4452 4453 this.addEntry(dt + 'progress bar striped yellow', function() 4454 { 4455 var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 20), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;'); 4456 bg1.vertex = true; 4457 var bg2 = new mxCell('', new mxGeometry(0, 0, 500, 20), s + 'leftButtonStriped;fillColor=#EFAC43;fontColor=#FFFFFF;whiteSpace=wrap;'); 4458 bg2.vertex = true; 4459 bg1.insert(bg2); 4460 4461 return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Progress bar, striped, yellow'); 4462 }), 4463 4464 this.addEntry(dt + 'progress bar striped red', function() 4465 { 4466 var bg1 = new mxCell('', new mxGeometry(0, 0, 800, 20), s + 'rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;'); 4467 bg1.vertex = true; 4468 var bg2 = new mxCell('', new mxGeometry(0, 0, 500, 20), s + 'leftButtonStriped;fillColor=#DB524C;fontColor=#FFFFFF;whiteSpace=wrap;'); 4469 bg2.vertex = true; 4470 bg1.insert(bg2); 4471 4472 return sb.createVertexTemplateFromCells([bg1], bg1.geometry.width, bg1.geometry.height, 'Progress bar, striped, red'); 4473 }), 4474 4475 this.addEntry(dt + 'scrollspy', function() 4476 { 4477 var item1 = new mxCell('Navbar', new mxGeometry(0, 0, 800, 40), 'fillColor=#F8F9FA;strokeColor=none;align=left;fontSize=14;spacing=10;'); 4478 item1.vertex = true; 4479 var item2 = new mxCell('@fat', new mxGeometry(1, 0, 50, 30), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=5;fontColor=#FFFFFF;'); 4480 item2.geometry.relative = true; 4481 item2.geometry.offset = new mxPoint(-210, 5); 4482 item2.vertex = true; 4483 item1.insert(item2); 4484 var item3 = new mxCell('@mdo', new mxGeometry(1, 0, 60, 30), 'fillColor=none;strokeColor=none;perimeter=none;whiteSpace=wrap;fontColor=#0085FC;'); 4485 item3.geometry.relative = true; 4486 item3.geometry.offset = new mxPoint(-160, 5); 4487 item3.vertex = true; 4488 item1.insert(item3); 4489 var item4 = new mxCell('Dropdown', new mxGeometry(1, 0, 90, 30), 'fillColor=none;strokeColor=none;perimeter=none;whiteSpace=wrap;fontColor=#0085FC;align=right;spacingRight=20;'); 4490 item4.geometry.relative = true; 4491 item4.geometry.offset = new mxPoint(-100, 5); 4492 item4.vertex = true; 4493 item1.insert(item4); 4494 var marker1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), 'shape=triangle;direction=south;fillColor=#0085FC;strokeColor=none;perimeter=none;'); 4495 marker1.geometry.relative = true; 4496 marker1.geometry.offset = new mxPoint(-17, -2.5); 4497 marker1.vertex = true; 4498 item4.insert(marker1); 4499 var item5 = new mxCell('<font size="1"><b style="font-size: 18px">@fat</b></font><br style="font-size: 14px">Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney\'s photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven\'t heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.<br><br><br style="font-size: 14px"><b><font style="font-size: 16px">@mdo</font></b><br style="font-size: 14px">Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney\'s vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney\'s quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.', 4500 new mxGeometry(0, 0, 800, 200), 'fillColor=none;strokeColor=none;perimeter=none;whiteSpace=wrap;fontColor=#212529;html=1;align=left;verticalAlign=top;spacingRight=25;'); 4501 item5.geometry.relative = true; 4502 item5.geometry.offset = new mxPoint(0, 50); 4503 item5.vertex = true; 4504 var item6 = new mxCell('', new mxGeometry(1, 0, 20, 200), 'html=1;shadow=0;dashed=0;fillColor=#F1F1F1;strokeColor=none;'); 4505 item6.geometry.relative = true; 4506 item6.geometry.offset = new mxPoint(-20, 0); 4507 item6.vertex = true; 4508 item5.insert(item6); 4509 var item7 = new mxCell('', new mxGeometry(0, 0, 16, 45), 'fillColor=#C1C1C1;strokeColor=none;'); 4510 item7.geometry.relative = true; 4511 item7.geometry.offset = new mxPoint(2, 20); 4512 item7.vertex = true; 4513 item6.insert(item7); 4514 var item8 = new mxCell('', new mxGeometry(0, 0, 10, 5), 'shape=triangle;direction=north;fillColor=#C1C1C1;strokeColor=none;perimeter=none;'); 4515 item8.geometry.relative = true; 4516 item8.geometry.offset = new mxPoint(5, 7.5); 4517 item8.vertex = true; 4518 item6.insert(item8); 4519 var item9 = new mxCell('', new mxGeometry(0, 1, 10, 5), 'shape=triangle;direction=south;fillColor=#505050;strokeColor=none;perimeter=none;'); 4520 item9.geometry.relative = true; 4521 item9.geometry.offset = new mxPoint(5, -12.5); 4522 item9.vertex = true; 4523 item6.insert(item9); 4524 return sb.createVertexTemplateFromCells([item1, item5], 800, 300, 'Scrollspy'); 4525 }), 4526 4527 this.addEntry(dt + 'nested nav', function() 4528 { 4529 var item1 = new mxCell('', new mxGeometry(0, 0, 300, 330), 'fillColor=#F8F9FA;strokeColor=none;align=left;fontSize=14;fontColor=#323232;'); 4530 item1.vertex = true; 4531 var item2 = new mxCell('Navbar', new mxGeometry(0, 0, 300, 40), 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;fontSize=18;'); 4532 item2.geometry.relative = true; 4533 item2.vertex = true; 4534 item1.insert(item2); 4535 var item3 = new mxCell('Item 1', new mxGeometry(0.5, 0, 100, 40), s + 'rrect;rSize=5;fillColor=#0085FC;strokeColor=none;perimeter=none;whiteSpace=wrap;align=left;spacing=15;fontColor=#FFFFFF;fontSize=14;'); 4536 item3.geometry.relative = true; 4537 item3.geometry.offset = new mxPoint(-50, 40); 4538 item3.vertex = true; 4539 item1.insert(item3); 4540 var item4 = new mxCell('Item 1-1', new mxGeometry(0.5, 0, 100, 40), 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;perimeter=none;whiteSpace=wrap;align=left;spacing=15;fontColor=#0085FC;fontSize=14;'); 4541 item4.geometry.relative = true; 4542 item4.geometry.offset = new mxPoint(-40, 80); 4543 item4.vertex = true; 4544 item1.insert(item4); 4545 var item5 = new mxCell('Item 1-2', new mxGeometry(0.5, 0, 100, 40), 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;perimeter=none;whiteSpace=wrap;align=left;spacing=15;fontColor=#0085FC;fontSize=14;'); 4546 item5.geometry.relative = true; 4547 item5.geometry.offset = new mxPoint(-40, 120); 4548 item5.vertex = true; 4549 item1.insert(item5); 4550 var item6 = new mxCell('Item 2', new mxGeometry(0.5, 0, 100, 40), 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;perimeter=none;whiteSpace=wrap;align=left;spacing=15;fontColor=#0085FC;fontSize=14;'); 4551 item6.geometry.relative = true; 4552 item6.geometry.offset = new mxPoint(-50, 160); 4553 item6.vertex = true; 4554 item1.insert(item6); 4555 var item7 = new mxCell('Item 3', new mxGeometry(0.5, 0, 100, 40), 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;perimeter=none;whiteSpace=wrap;align=left;spacing=15;fontColor=#0085FC;fontSize=14;'); 4556 item7.geometry.relative = true; 4557 item7.geometry.offset = new mxPoint(-50, 200); 4558 item7.vertex = true; 4559 item1.insert(item7); 4560 var item8 = new mxCell('Item 3-1', new mxGeometry(0.5, 0, 100, 40), 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;perimeter=none;whiteSpace=wrap;align=left;spacing=15;fontColor=#0085FC;fontSize=14;'); 4561 item8.geometry.relative = true; 4562 item8.geometry.offset = new mxPoint(-40, 240); 4563 item8.vertex = true; 4564 item1.insert(item8); 4565 var item8 = new mxCell('Item 3-2', new mxGeometry(0.5, 0, 100, 40), 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;perimeter=none;whiteSpace=wrap;align=left;spacing=15;fontColor=#0085FC;fontSize=14;'); 4566 item8.geometry.relative = true; 4567 item8.geometry.offset = new mxPoint(-40, 280); 4568 item8.vertex = true; 4569 item1.insert(item8); 4570 var item9 = new mxCell('<font style="font-size: 18px"><b>Item 1</b></font><br>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.<br><br><b><font style="font-size: 16px">Item 1-1</font></b><br>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate', 4571 new mxGeometry(320, 0, 480, 330), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#323232;html=1;whiteSpace=wrap;verticalAlign=top;spacingRight=25;'); 4572 item9.vertex = true; 4573 4574 var item10 = new mxCell('', new mxGeometry(1, 0, 20, 330), 'html=1;shadow=0;dashed=0;fillColor=#F1F1F1;strokeColor=none;'); 4575 item10.geometry.relative = true; 4576 item10.geometry.offset = new mxPoint(-20, 0); 4577 item10.vertex = true; 4578 item9.insert(item10); 4579 var item11 = new mxCell('', new mxGeometry(0, 0, 16, 45), 'fillColor=#C1C1C1;strokeColor=none;'); 4580 item11.geometry.relative = true; 4581 item11.geometry.offset = new mxPoint(2, 20); 4582 item11.vertex = true; 4583 item10.insert(item11); 4584 var item12 = new mxCell('', new mxGeometry(0, 0, 10, 5), 'shape=triangle;direction=north;fillColor=#C1C1C1;strokeColor=none;perimeter=none;'); 4585 item12.geometry.relative = true; 4586 item12.geometry.offset = new mxPoint(5, 7.5); 4587 item12.vertex = true; 4588 item10.insert(item12); 4589 var item13 = new mxCell('', new mxGeometry(0, 1, 10, 5), 'shape=triangle;direction=south;fillColor=#505050;strokeColor=none;perimeter=none;'); 4590 item13.geometry.relative = true; 4591 item13.geometry.offset = new mxPoint(5, -12.5); 4592 item13.vertex = true; 4593 item10.insert(item13); 4594 4595 return sb.createVertexTemplateFromCells([item1, item9], 800, 330, 'Nested nav'); 4596 }), 4597 4598 this.addEntry(dt + 'nav with list group', function() 4599 { 4600 var item1 = new mxCell('', new mxGeometry(0, 0, 250, 160), s + 'rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;'); 4601 item1.vertex = true; 4602 var button1 = new mxCell('Item 1', new mxGeometry(0, 0, 250, 40), s + 'topButton;rSize=5;strokeColor=none;fillColor=#0085FC;fontColor=#ffffff;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=15;fontSize=14;'); 4603 button1.geometry.relative = true; 4604 button1.vertex = true; 4605 item1.insert(button1); 4606 var button2 = new mxCell('Item 2', new mxGeometry(0, 0, 250, 40), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=15;fontSize=14;'); 4607 button2.geometry.relative = true; 4608 button2.geometry.offset = new mxPoint(0, 40); 4609 button2.vertex = true; 4610 item1.insert(button2); 4611 var button3 = new mxCell('Item 3', new mxGeometry(0, 0, 250, 40), inh + 'html=1;shadow=0;dashed=0;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=15;fontSize=14;'); 4612 button3.geometry.relative = true; 4613 button3.geometry.offset = new mxPoint(0, 80); 4614 button3.vertex = true; 4615 item1.insert(button3); 4616 var button4 = new mxCell('Item 4', new mxGeometry(0, 1, 250, 40), inh + s + 'bottomButton;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;resizeHeight=0;align=left;spacing=15;fontSize=14;'); 4617 button4.geometry.relative = true; 4618 button4.geometry.offset = new mxPoint(0, -40); 4619 button4.vertex = true; 4620 item1.insert(button4); 4621 var item9 = new mxCell('<font style="font-size: 18px"><b>Item 1</b></font><br>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.', 4622 new mxGeometry(270, 0, 530, 160), 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#323232;html=1;whiteSpace=wrap;verticalAlign=top;spacingRight=25;'); 4623 item9.vertex = true; 4624 var item10 = new mxCell('', new mxGeometry(1, 0, 20, 160), 'html=1;shadow=0;dashed=0;fillColor=#F1F1F1;strokeColor=none;resizeHeight=1;'); 4625 item10.geometry.relative = true; 4626 item10.geometry.offset = new mxPoint(-20, 0); 4627 item10.vertex = true; 4628 item9.insert(item10); 4629 var item11 = new mxCell('', new mxGeometry(0, 0, 16, 45), 'fillColor=#C1C1C1;strokeColor=none;'); 4630 item11.geometry.relative = true; 4631 item11.geometry.offset = new mxPoint(2, 20); 4632 item11.vertex = true; 4633 item10.insert(item11); 4634 var item12 = new mxCell('', new mxGeometry(0, 0, 10, 5), 'shape=triangle;direction=north;fillColor=#C1C1C1;strokeColor=none;perimeter=none;'); 4635 item12.geometry.relative = true; 4636 item12.geometry.offset = new mxPoint(5, 7.5); 4637 item12.vertex = true; 4638 item10.insert(item12); 4639 var item13 = new mxCell('', new mxGeometry(0, 1, 10, 5), 'shape=triangle;direction=south;fillColor=#505050;strokeColor=none;perimeter=none;'); 4640 item13.geometry.relative = true; 4641 item13.geometry.offset = new mxPoint(5, -12.5); 4642 item13.vertex = true; 4643 item10.insert(item13); 4644 4645 return sb.createVertexTemplateFromCells([item1, item9], 800, 160, 'Nav with list-group'); 4646 }), 4647 4648 this.createVertexTemplateEntry('html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#0085FC;', 4649 30, 30, '', 'Border spinner', null, null, this.getTagsForStencil(gn, 'border spinner', dt).join(' ')), 4650 this.createVertexTemplateEntry('html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#6C767D;', 4651 30, 30, '', 'Border spinner', null, null, this.getTagsForStencil(gn, 'border spinner', dt).join(' ')), 4652 this.createVertexTemplateEntry('html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#34A64D;', 4653 30, 30, '', 'Border spinner', null, null, this.getTagsForStencil(gn, 'border spinner', dt).join(' ')), 4654 this.createVertexTemplateEntry('html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#DB2843;', 4655 30, 30, '', 'Border spinner', null, null, this.getTagsForStencil(gn, 'border spinner', dt).join(' ')), 4656 this.createVertexTemplateEntry('html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#FFBC26;', 4657 30, 30, '', 'Border spinner', null, null, this.getTagsForStencil(gn, 'border spinner', dt).join(' ')), 4658 this.createVertexTemplateEntry('html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#1CA5B8;', 4659 30, 30, '', 'Border spinner', null, null, this.getTagsForStencil(gn, 'border spinner', dt).join(' ')), 4660 this.createVertexTemplateEntry('html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#F8F9FA;', 4661 30, 30, '', 'Border spinner', null, null, this.getTagsForStencil(gn, 'border spinner', dt).join(' ')), 4662 this.createVertexTemplateEntry('html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#343A40;', 4663 30, 30, '', 'Border spinner', null, null, this.getTagsForStencil(gn, 'border spinner', dt).join(' ')), 4664 4665 this.addEntry(dt + 'button with spinner', function() 4666 { 4667 var bg = new mxCell('', new mxGeometry(0, 0, 40, 40), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#59AFFD;fontColor=#ffffff;'); 4668 bg.vertex = true; 4669 var item1 = new mxCell('', new mxGeometry(0.5, 0.5, 20, 20), 'html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#ffffff;'); 4670 item1.geometry.relative = true; 4671 item1.geometry.offset = new mxPoint(-10, -10); 4672 item1.vertex = true; 4673 bg.insert(item1); 4674 4675 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button with spinner'); 4676 }), 4677 4678 this.addEntry(dt + 'button with spinner', function() 4679 { 4680 var bg = new mxCell('Loading...', new mxGeometry(0, 0, 110, 40), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#59AFFD;fontColor=#ffffff;align=right;spacing=10;'); 4681 bg.vertex = true; 4682 var item1 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#ffffff;'); 4683 item1.geometry.relative = true; 4684 item1.geometry.offset = new mxPoint(15, -10); 4685 item1.vertex = true; 4686 bg.insert(item1); 4687 4688 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button with spinner'); 4689 }), 4690 4691 this.addEntry(dt + 'button with grow spinner', function() 4692 { 4693 var bg = new mxCell('', new mxGeometry(0, 0, 40, 40), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#59AFFD;fontColor=#ffffff;align=right;spacing=10;'); 4694 bg.vertex = true; 4695 var item1 = new mxCell('', new mxGeometry(0.5, 0.5, 20, 20), 'html=1;shadow=0;dashed=0;shape=ellipse;strokeColor=none;fillColor=#ffffff;'); 4696 item1.geometry.relative = true; 4697 item1.geometry.offset = new mxPoint(-10, -10); 4698 item1.vertex = true; 4699 bg.insert(item1); 4700 4701 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button with grow spinner'); 4702 }), 4703 4704 this.addEntry(dt + 'button with grow spinner', function() 4705 { 4706 var bg = new mxCell('Loading...', new mxGeometry(0, 0, 110, 40), s + 'rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#59AFFD;fontColor=#ffffff;align=right;spacing=10;'); 4707 bg.vertex = true; 4708 var item1 = new mxCell('', new mxGeometry(0, 0.5, 20, 20), 'html=1;shadow=0;dashed=0;shape=ellipse;strokeColor=none;fillColor=#ffffff;'); 4709 item1.geometry.relative = true; 4710 item1.geometry.offset = new mxPoint(15, -10); 4711 item1.vertex = true; 4712 bg.insert(item1); 4713 4714 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Button with grow spinner'); 4715 }), 4716 4717 this.addEntry(dt + 'toast', function() 4718 { 4719 var bg = new mxCell('Hello, world! This is a toast message.', new mxGeometry(0, 0, 320, 80), s + 'rrect;rSize=5;strokeColor=#DFE0E0;html=1;whiteSpace=wrap;fillColor=#FEFEFE;fontColor=#212529;align=left;spacing=15;verticalAlign=bottom;'); 4720 bg.vertex = true; 4721 var item1 = new mxCell('', new mxGeometry(0, 0, 320, 40), s + 'topButton;rSize=5;strokeColor=inherit;fillColor=#ffffff;resizeWidth=1;'); 4722 item1.geometry.relative = true; 4723 item1.vertex = true; 4724 bg.insert(item1); 4725 var item2 = new mxCell('Bootstrap', new mxGeometry(0, 0.5, 20, 20), s + 'rrect;rSize=5;strokeColor=#DFE0E0;html=1;whiteSpace=wrap;fillColor=#0084FC;fontColor=#6C767D;align=left;spacing=10;verticalAlign=middle;labelPosition=right;verticalLabelPosition=middle;fontStyle=1'); 4726 item2.geometry.relative = true; 4727 item2.geometry.offset = new mxPoint(10, -10); 4728 item2.vertex = true; 4729 item1.insert(item2); 4730 var item3 = new mxCell('11 mins ago', new mxGeometry(1, 0.5, 10, 10), s + 'x;strokeColor=#808080;html=1;fontColor=#6C767D;align=right;spacing=10;verticalAlign=middle;labelPosition=left;verticalLabelPosition=middle;fontStyle=0;strokeWidth=2;fontSize=11;fillColor=none;'); 4731 item3.geometry.relative = true; 4732 item3.geometry.offset = new mxPoint(-25, -4); 4733 item3.vertex = true; 4734 item1.insert(item3); 4735 4736 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Toast'); 4737 }), 4738 4739 this.addEntry(dt + 'tooltip on top', function() 4740 { 4741 var bg = new mxCell('Tooltip on top', new mxGeometry(10, 0, 90, 30), 4742 s + 'popover;fillColor=#1A1A1A;strokeColor=none;dx=45;dy=5;rSize=5;whiteSpace=wrap;verticalAlign=top;spacing=10;fontSize=12;spacingLeft=0;align=center;spacingTop=-10;fontColor=#FFFFFF;'); 4743 bg.vertex = true; 4744 var item1 = new mxCell('Tooltip on top', new mxGeometry(0, 30, 110, 30), s + 'rrect;rSize=5;fillColor=#6C767D;strokeColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=5;fontColor=#FFFFFF;fontSize=14;'); 4745 item1.vertex = true; 4746 4747 return sb.createVertexTemplateFromCells([bg, item1], 110, 60, 'Tooltip on top'); 4748 }), 4749 4750 this.addEntry(dt + 'tooltip on right', function() 4751 { 4752 var bg = new mxCell('Tooltip on right', new mxGeometry(120, 3, 110, 24), 4753 s + 'popover;fillColor=#1A1A1A;strokeColor=none;dx=12;dy=5;rSize=5;whiteSpace=wrap;verticalAlign=top;spacing=10;fontSize=12;spacingLeft=0;align=center;spacingTop=-10;fontColor=#FFFFFF;direction=south;spacingLeft=5;'); 4754 bg.vertex = true; 4755 var item1 = new mxCell('Tooltip on right', new mxGeometry(0, 0, 120, 30), s + 'rrect;rSize=5;fillColor=#6C767D;strokeColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=5;fontColor=#FFFFFF;fontSize=14;'); 4756 item1.vertex = true; 4757 4758 return sb.createVertexTemplateFromCells([bg, item1], 230, 30, 'Tooltip on right'); 4759 }), 4760 4761 this.addEntry(dt + 'tooltip on bottom', function() 4762 { 4763 var bg = new mxCell('Tooltip on bottom', new mxGeometry(10, 30, 110, 30), 4764 s + 'popover;fillColor=#1A1A1A;strokeColor=none;dx=55;dy=5;rSize=5;whiteSpace=wrap;verticalAlign=top;spacing=10;fontSize=12;spacingLeft=0;align=center;spacingTop=-5;fontColor=#FFFFFF;direction=west;spacingBottom=0;'); 4765 bg.vertex = true; 4766 var item1 = new mxCell('Tooltip on bottom', new mxGeometry(0, 0, 130, 30), s + 'rrect;rSize=5;fillColor=#6C767D;strokeColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=5;fontColor=#FFFFFF;fontSize=14;'); 4767 item1.vertex = true; 4768 4769 return sb.createVertexTemplateFromCells([bg, item1], 130, 60, 'Tooltip on bottom'); 4770 }), 4771 4772 this.addEntry(dt + 'tooltip on left', function() 4773 { 4774 var bg = new mxCell('Tooltip on left', new mxGeometry(0, 3, 100, 24), 4775 s + 'popover;fillColor=#1A1A1A;strokeColor=none;dx=12;dy=5;rSize=5;whiteSpace=wrap;verticalAlign=top;spacing=10;fontSize=12;spacingLeft=0;align=center;spacingTop=-10;fontColor=#FFFFFF;direction=north;spacingRight=5;'); 4776 bg.vertex = true; 4777 var item1 = new mxCell('Tooltip on left', new mxGeometry(100, 0, 110, 30), s + 'rrect;rSize=5;fillColor=#6C767D;strokeColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=5;fontColor=#FFFFFF;fontSize=14;'); 4778 item1.vertex = true; 4779 4780 return sb.createVertexTemplateFromCells([bg, item1], 210, 30, 'Tooltip on left'); 4781 }), 4782 4783 this.addEntry(dt + 'tooltip with HTML', function() 4784 { 4785 var bg = new mxCell('<i>Tooltip </i><u>with</u> <b>HTML</b>', new mxGeometry(10, 0, 120, 30), 4786 s + 'popover;fillColor=#1A1A1A;strokeColor=none;dx=60;dy=5;rSize=5;whiteSpace=wrap;verticalAlign=top;spacing=10;fontSize=12;spacingLeft=0;align=center;spacingTop=-10;fontColor=#FFFFFF;'); 4787 bg.vertex = true; 4788 var item1 = new mxCell('Tooltip with HTML', new mxGeometry(0, 30, 140, 30), s + 'rrect;rSize=5;fillColor=#6C767D;strokeColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=5;fontColor=#FFFFFF;fontSize=14;'); 4789 item1.vertex = true; 4790 4791 return sb.createVertexTemplateFromCells([bg, item1], 140, 60, 'Tooltip with HTML'); 4792 }) 4793 ]; 4794 4795 this.addPalette('bootstrap', mxResources.get('bootstrap'), false, mxUtils.bind(this, function(content) 4796 { 4797 for (var i = 0; i < fns.length; i++) 4798 { 4799 content.appendChild(fns[i](content)); 4800 } 4801 })); 4802 4803 this.setCurrentSearchEntryLibrary(); 4804 }; 4805})(); 4806