1(function() 2{ 3 Sidebar.prototype.addC4Palette = function() 4 { 5 var w = 100; 6 var h = 100; 7 var gn = 'mxgraph.c4'; 8 var dt = 'c4 '; 9 var pts = 'points=[[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];'; 10 this.setCurrentSearchEntryLibrary('c4'); 11 12 this.addPaletteFunctions('c4', 'C4', false, 13 [ 14 this.addEntry(dt + 'person', function() 15 { 16 var bg = new mxCell('', 17 new mxGeometry(0, 0, w * 2, h * 1.8), 'html=1;fontSize=11;dashed=0;whitespace=wrap;fillColor=#083F75;strokeColor=#06315C;fontColor=#ffffff;shape=mxgraph.c4.person2;align=center;metaEdit=1;points=[[0.5,0,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0]];resizable=0;'); 18 bg.vertex = true; 19 bg.setValue(mxUtils.createXmlDocument().createElement('object')); 20 bg.setAttribute('placeholders', '1'); 21 bg.setAttribute('c4Name', 'Person name'); 22 bg.setAttribute('c4Type', 'Person'); 23 bg.setAttribute('c4Description', 'Description of person.'); 24 bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Name%</b></font><div>[%c4Type%]</div><br><div><font style="font-size: 11px"><font color="#cccccc">%c4Description%</font></div>'); 25 26 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Person'); 27 }), 28 this.addEntry(dt + 'external person', function() 29 { 30 var bg = new mxCell('', 31 new mxGeometry(0, 0, w * 2, h * 1.8), 'html=1;fontSize=11;dashed=0;whitespace=wrap;fillColor=#6C6477;strokeColor=#4D4D4D;fontColor=#ffffff;shape=mxgraph.c4.person2;align=center;metaEdit=1;points=[[0.5,0,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0]];resizable=0;'); 32 bg.vertex = true; 33 bg.setValue(mxUtils.createXmlDocument().createElement('object')); 34 bg.setAttribute('placeholders', '1'); 35 bg.setAttribute('c4Name', 'External person name'); 36 bg.setAttribute('c4Type', 'Person'); 37 bg.setAttribute('c4Description', 'Description of external person.'); 38 bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Name%</b></font><div>[%c4Type%]</div><br><div><font style="font-size: 11px"><font color="#cccccc">%c4Description%</font></div>'); 39 40 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'External Person'); 41 }), 42 this.addEntry(dt + 'software system', function() 43 { 44 var bg = new mxCell('', 45 new mxGeometry(0, 0, w * 2.4, h * 1.2), 'rounded=1;whiteSpace=wrap;html=1;labelBackgroundColor=none;fillColor=#1061B0;fontColor=#ffffff;align=center;arcSize=10;strokeColor=#0D5091;metaEdit=1;resizable=0;' + pts); 46 bg.vertex = true; 47 bg.setValue(mxUtils.createXmlDocument().createElement('object')); 48 bg.setAttribute('placeholders', '1'); 49 bg.setAttribute('c4Name', 'System name'); 50 bg.setAttribute('c4Type', 'Software System'); 51 bg.setAttribute('c4Description', 'Description of software system.'); 52 bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Name%</b></font><div>[%c4Type%]</div><br><div><font style="font-size: 11px"><font color="#cccccc">%c4Description%</font></div>'); 53 54 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Software System'); 55 }), 56 this.addEntry(dt + 'external software system', function() 57 { 58 var bg = new mxCell('', 59 new mxGeometry(0, 0, w * 2.4, h * 1.2), 'rounded=1;whiteSpace=wrap;html=1;labelBackgroundColor=none;fillColor=#8C8496;fontColor=#ffffff;align=center;arcSize=10;strokeColor=#736782;metaEdit=1;resizable=0;' + pts); 60 bg.vertex = true; 61 bg.setValue(mxUtils.createXmlDocument().createElement('object')); 62 bg.setAttribute('placeholders', '1'); 63 bg.setAttribute('c4Name', 'External system name'); 64 bg.setAttribute('c4Type', 'Software System'); 65 bg.setAttribute('c4Description', 'Description of external software system.'); 66 bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Name%</b></font><div>[%c4Type%]</div><br><div><font style="font-size: 11px"><font color="#cccccc">%c4Description%</font></div>'); 67 68 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'External Software System'); 69 }), 70 this.addEntry(dt + 'container', function() 71 { 72 var bg = new mxCell('', 73 new mxGeometry(0, 0, w * 2.4, h * 1.2), 'rounded=1;whiteSpace=wrap;html=1;fontSize=11;labelBackgroundColor=none;fillColor=#23A2D9;fontColor=#ffffff;align=center;arcSize=10;strokeColor=#0E7DAD;metaEdit=1;resizable=0;' + pts); 74 bg.vertex = true; 75 bg.setValue(mxUtils.createXmlDocument().createElement('object')); 76 bg.setAttribute('placeholders', '1'); 77 bg.setAttribute('c4Name', 'Container name'); 78 bg.setAttribute('c4Type', 'Container'); 79 bg.setAttribute('c4Technology', 'e.g. SpringBoot, ElasticSearch, etc.'); 80 bg.setAttribute('c4Description', 'Description of container role/responsibility.'); 81 bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Name%</b></font><div>[%c4Type%: %c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>'); 82 83 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Container'); 84 }), 85 this.addEntry(dt + 'data container', function() 86 { 87 var bg = new mxCell('', 88 new mxGeometry(0, 0, w * 2.4, h * 1.2), 'shape=cylinder3;size=15;whiteSpace=wrap;html=1;boundedLbl=1;rounded=0;labelBackgroundColor=none;fillColor=#23A2D9;fontSize=12;fontColor=#ffffff;align=center;strokeColor=#0E7DAD;metaEdit=1;points=[[0.5,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.5,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];resizable=0;'); 89 bg.vertex = true; 90 bg.setValue(mxUtils.createXmlDocument().createElement('object')); 91 bg.setAttribute('placeholders', '1'); 92 bg.setAttribute('c4Type', 'Container name'); 93 bg.setAttribute('c4Container', 'Container '); 94 bg.setAttribute('c4Technology', 'e.g. Oracle Database 12'); 95 bg.setAttribute('c4Description', 'Description of storage type container role/responsibility.'); 96 bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Type%</font><div>[%c4Container%: %c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>'); 97 98 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Data Container'); 99 }), 100 this.addEntry(dt + 'microservice container', function() 101 { 102 var bg = new mxCell('', 103 new mxGeometry(0, 0, w * 2, h * 1.7), 'shape=hexagon;size=50;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;rounded=1;labelBackgroundColor=none;fillColor=#23A2D9;fontSize=12;fontColor=#ffffff;align=center;strokeColor=#0E7DAD;metaEdit=1;points=[[0.5,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.5,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];resizable=0;'); 104 bg.vertex = true; 105 bg.setValue(mxUtils.createXmlDocument().createElement('object')); 106 bg.setAttribute('placeholders', '1'); 107 bg.setAttribute('c4Type', 'Container name'); 108 bg.setAttribute('c4Container', 'Container '); 109 bg.setAttribute('c4Technology', 'e.g. Micronaut, etc.'); 110 bg.setAttribute('c4Description', 'Description of microservice type container role/responsibility.'); 111 bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Type%</font><div>[%c4Container%: %c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>'); 112 113 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Microservice Container'); 114 }), 115 this.addEntry(dt + 'message bus container', function() 116 { 117 var bg = new mxCell('', 118 new mxGeometry(0, 0, w * 2.4, h * 1.2), 'shape=cylinder3;size=15;direction=south;whiteSpace=wrap;html=1;boundedLbl=1;rounded=0;labelBackgroundColor=none;fillColor=#23A2D9;fontSize=12;fontColor=#ffffff;align=center;strokeColor=#0E7DAD;metaEdit=1;points=[[0.5,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.5,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];resizable=0;'); 119 bg.vertex = true; 120 bg.setValue(mxUtils.createXmlDocument().createElement('object')); 121 bg.setAttribute('placeholders', '1'); 122 bg.setAttribute('c4Type', 'Container name'); 123 bg.setAttribute('c4Container', 'Container '); 124 bg.setAttribute('c4Technology', 'e.g. Apache Kafka, etc.'); 125 bg.setAttribute('c4Description', 'Description of message bus type container role/responsibility.'); 126 bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Type%</font><div>[%c4Container%: %c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>'); 127 128 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Message Bus Container'); 129 }), 130 this.addEntry(dt + 'web browser container', function() 131 { 132 var bg = new mxCell('', 133 new mxGeometry(0, 0, w * 2.4, h * 1.6), 'shape=mxgraph.c4.webBrowserContainer;whiteSpace=wrap;html=1;boundedLbl=1;rounded=0;labelBackgroundColor=none;fillColor=#118ACD;fontSize=12;fontColor=#ffffff;align=center;strokeColor=#0E7DAD;metaEdit=1;points=[[0.5,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.5,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];resizable=0;'); 134 bg.vertex = true; 135 bg.setValue(mxUtils.createXmlDocument().createElement('object')); 136 bg.setAttribute('placeholders', '1'); 137 bg.setAttribute('c4Type', 'Container name'); 138 bg.setAttribute('c4Container', 'Container '); 139 bg.setAttribute('c4Technology', 'e.g. JavaScript, Angular etc.'); 140 bg.setAttribute('c4Description', 'Description of web browser container role/responsibility.'); 141 bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Type%</font><div>[%c4Container%: %c4Technology%]</div><br><div><font style="font-size: 11px"><font color="#E6E6E6">%c4Description%</font></div>'); 142 143 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Web Browser Container'); 144 }), 145 this.addEntry(dt + 'component', function() 146 { 147 var bg = new mxCell('', 148 new mxGeometry(0, 0, w * 2.4, h * 1.2), 'rounded=1;whiteSpace=wrap;html=1;labelBackgroundColor=none;fillColor=#63BEF2;fontColor=#ffffff;align=center;arcSize=6;strokeColor=#2086C9;metaEdit=1;resizable=0;' + pts); 149 bg.vertex = true; 150 bg.setValue(mxUtils.createXmlDocument().createElement('object')); 151 bg.setAttribute('placeholders', '1'); 152 bg.setAttribute('c4Name', 'Component name'); 153 bg.setAttribute('c4Type', 'Component'); 154 bg.setAttribute('c4Technology', 'e.g. Spring Service'); 155 bg.setAttribute('c4Description', 'Description of component role/responsibility.'); 156 bg.setAttribute('label', '<font style="font-size: 16px"><b>%c4Name%</b></font><div>[%c4Type%: %c4Technology%]</div><br><div><font style="font-size: 11px">%c4Description%</font></div>'); 157 158 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Component'); 159 }), 160 this.addEntry(dt + 'relationship description technology', function() 161 { 162 var edge = new mxCell('', 163 new mxGeometry(0, 0, w * 2.4, 0), 'endArrow=blockThin;html=1;fontSize=10;fontColor=#404040;strokeWidth=1;endFill=1;strokeColor=#828282;elbow=vertical;metaEdit=1;endSize=14;startSize=14;jumpStyle=arc;jumpSize=16;rounded=0;edgeStyle=orthogonalEdgeStyle;'); 164 edge.geometry.setTerminalPoint(new mxPoint(0, 0), true); 165 edge.geometry.setTerminalPoint(new mxPoint(w * 2.4, 0), false); 166 edge.geometry.relative = true; 167 edge.edge = true; 168 edge.setValue(mxUtils.createXmlDocument().createElement('object')); 169 edge.setAttribute('placeholders', '1'); 170 edge.setAttribute('c4Type', 'Relationship'); 171 edge.setAttribute('c4Technology', 'e.g. JSON/HTTP'); 172 edge.setAttribute('c4Description', 'e.g. Makes API calls'); 173 edge.setAttribute('label', '<div style="text-align: left"><div style="text-align: center"><b>%c4Description%</b></div><div style="text-align: center">[%c4Technology%]</div></div>'); 174 175 return sb.createEdgeTemplateFromCells([edge], edge.geometry.width, edge.geometry.height, 'Relationship with description and technology'); 176 }), 177 this.addEntry(dt + 'relationship description', function() 178 { 179 var edge = new mxCell('', 180 new mxGeometry(0, 0, w * 2.4, 0), 'endArrow=blockThin;html=1;fontSize=10;fontColor=#404040;strokeWidth=1;endFill=1;strokeColor=#828282;elbow=vertical;metaEdit=1;endSize=14;startSize=14;jumpStyle=arc;jumpSize=16;rounded=0;edgeStyle=orthogonalEdgeStyle;'); 181 edge.geometry.setTerminalPoint(new mxPoint(0, 0), true); 182 edge.geometry.setTerminalPoint(new mxPoint(w * 2.4, 0), false); 183 edge.geometry.relative = true; 184 edge.edge = true; 185 edge.setValue(mxUtils.createXmlDocument().createElement('object')); 186 edge.setAttribute('placeholders', '1'); 187 edge.setAttribute('c4Type', 'Relationship'); 188 edge.setAttribute('c4Description', 'e.g. Visits pages'); 189 edge.setAttribute('label', '<div style="text-align: left"><div style="text-align: center"><b>%c4Description%</b></div>'); 190 191 return sb.createEdgeTemplateFromCells([edge], edge.geometry.width, edge.geometry.height, 'Relationship with description'); 192 }), 193 this.addEntry(dt + 'relationship', function() 194 { 195 var edge = new mxCell('', 196 new mxGeometry(0, 0, w * 2.4, 0), 'endArrow=blockThin;html=1;fontSize=10;fontColor=#404040;strokeWidth=1;endFill=1;strokeColor=#828282;elbow=vertical;metaEdit=1;endSize=14;startSize=14;jumpStyle=arc;jumpSize=16;rounded=0;edgeStyle=orthogonalEdgeStyle;'); 197 edge.geometry.setTerminalPoint(new mxPoint(0, 0), true); 198 edge.geometry.setTerminalPoint(new mxPoint(w * 2.4, 0), false); 199 edge.geometry.relative = true; 200 edge.edge = true; 201 edge.setValue(mxUtils.createXmlDocument().createElement('object')); 202 edge.setAttribute('placeholders', '1'); 203 edge.setAttribute('c4Type', 'Relationship'); 204 205 return sb.createEdgeTemplateFromCells([edge], edge.geometry.width, edge.geometry.height, 'Relationship'); 206 }), 207 this.addEntry(dt + 'system scope boundary', function() 208 { 209 var bg = new mxCell('', 210 new mxGeometry(0, 0, w * 2.4, h * 2.1), 'rounded=1;fontSize=11;whiteSpace=wrap;html=1;dashed=1;arcSize=20;fillColor=none;strokeColor=#666666;fontColor=#333333;labelBackgroundColor=none;align=left;verticalAlign=bottom;labelBorderColor=none;spacingTop=0;spacing=10;dashPattern=8 4;metaEdit=1;rotatable=0;perimeter=rectanglePerimeter;noLabel=0;labelPadding=0;allowArrows=0;connectable=0;expand=0;recursiveResize=0;editable=1;pointerEvents=0;absoluteArcSize=1;' + pts); 211 bg.vertex = true; 212 bg.setValue(mxUtils.createXmlDocument().createElement('object')); 213 bg.setAttribute('placeholders', '1'); 214 bg.setAttribute('c4Name', 'System name'); 215 bg.setAttribute('c4Type', 'SystemScopeBoundary'); 216 bg.setAttribute('c4Application', 'Software System'); 217 bg.setAttribute('label', '<font style="font-size: 16px"><b><div style="text-align: left">%c4Name%</div></b></font><div style="text-align: left">[%c4Application%]</div>'); 218 219 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'System scope boundary'); 220 }), 221 this.addEntry(dt + 'container scope boundary', function() 222 { 223 var bg = new mxCell('', 224 new mxGeometry(0, 0, w * 2.4, h * 2.1), 'rounded=1;fontSize=11;whiteSpace=wrap;html=1;dashed=1;arcSize=20;fillColor=none;strokeColor=#666666;fontColor=#333333;labelBackgroundColor=none;align=left;verticalAlign=bottom;labelBorderColor=none;spacingTop=0;spacing=10;dashPattern=8 4;metaEdit=1;rotatable=0;perimeter=rectanglePerimeter;noLabel=0;labelPadding=0;allowArrows=0;connectable=0;expand=0;recursiveResize=0;editable=1;pointerEvents=0;absoluteArcSize=1;' + pts); 225 bg.vertex = true; 226 bg.setValue(mxUtils.createXmlDocument().createElement('object')); 227 bg.setAttribute('placeholders', '1'); 228 bg.setAttribute('c4Name', 'Container name'); 229 bg.setAttribute('c4Type', 'ContainerScopeBoundary'); 230 bg.setAttribute('c4Application', 'Container'); 231 bg.setAttribute('label', '<font style="font-size: 16px"><b><div style="text-align: left">%c4Name%</div></b></font><div style="text-align: left">[%c4Application%]</div>'); 232 233 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Container scope boundary'); 234 }), 235 this.addEntry(dt + 'system context diagram title', function() 236 { 237 var bg = new mxCell('', 238 new mxGeometry(0, 0, w * 2.6, h * 0.4), 'text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=top;whiteSpace=wrap;rounded=0;metaEdit=1;allowArrows=0;resizable=1;rotatable=0;connectable=0;recursiveResize=0;expand=0;pointerEvents=0;' + pts); 239 bg.vertex = true; 240 bg.setValue(mxUtils.createXmlDocument().createElement('object')); 241 bg.setAttribute('placeholders', '1'); 242 bg.setAttribute('c4Name', '[System Context] Diagram title'); 243 bg.setAttribute('c4Type', 'ContainerScopeBoundary'); 244 bg.setAttribute('c4Description', 'Diagram short description'); 245 bg.setAttribute('label', '<font style="font-size: 16px"><b><div style="text-align: left">%c4Name%</div></b></font><div style="text-align: left">%c4Description%</div>'); 246 247 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'System Context diagram title'); 248 }), 249 this.addEntry(dt + 'container diagram title', function() 250 { 251 var bg = new mxCell('', 252 new mxGeometry(0, 0, w * 2.6, h * 0.4), 'text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=top;whiteSpace=wrap;rounded=0;metaEdit=1;allowArrows=0;resizable=1;rotatable=0;connectable=0;recursiveResize=0;expand=0;pointerEvents=0;' + pts); 253 bg.vertex = true; 254 bg.setValue(mxUtils.createXmlDocument().createElement('object')); 255 bg.setAttribute('placeholders', '1'); 256 bg.setAttribute('c4Name', '[Containers] Diagram title'); 257 bg.setAttribute('c4Type', 'ContainerDiagramTitle'); 258 bg.setAttribute('c4Description', 'Diagram short description'); 259 bg.setAttribute('label', '<font style="font-size: 16px"><b><div style="text-align: left">%c4Name%</div></b></font><div style="text-align: left">%c4Description%</div>'); 260 261 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Containers diagram title'); 262 }), 263 this.addEntry(dt + 'component diagram title', function() 264 { 265 var bg = new mxCell('', 266 new mxGeometry(0, 0, w * 2.6, h * 0.4), 'text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=top;whiteSpace=wrap;rounded=0;metaEdit=1;allowArrows=0;resizable=1;rotatable=0;connectable=0;recursiveResize=0;expand=0;pointerEvents=0;' + pts); 267 bg.vertex = true; 268 bg.setValue(mxUtils.createXmlDocument().createElement('object')); 269 bg.setAttribute('placeholders', '1'); 270 bg.setAttribute('c4Name', '[Components] Diagram title'); 271 bg.setAttribute('c4Type', 'ContainerDiagramTitle'); 272 bg.setAttribute('c4Description', 'Diagram short description'); 273 bg.setAttribute('label', '<font style="font-size: 16px"><b><div style="text-align: left">%c4Name%</div></b></font><div style="text-align: left">%c4Description%</div>'); 274 275 return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Components diagram title'); 276 }), 277 this.addEntry(dt + 'legend', function() 278 { 279 var bg1 = new mxCell('Legend', 280 new mxGeometry(0, 0, w * 1.8, h * 0.3), 'align=left;fontSize=16;fontStyle=1;strokeColor=none;fillColor=none;fontColor=#4D4D4D;spacingTop=-8;resizable=0;'); 281 bg1.vertex = true; 282 var bg2 = new mxCell('', 283 new mxGeometry(0, 30, w * 1.8, h * 1.8), 'shape=table;html=1;whiteSpace=wrap;startSize=0;container=1;collapsible=0;childLayout=tableLayout;fillColor=none;align=left;spacingLeft=10;strokeColor=none;rounded=1;arcSize=11;fontColor=#FFFFFF;resizable=0;' + pts); 284 bg2.vertex = true; 285 var tableEntry1 = new mxCell('Person', new mxGeometry(0, 0, 160, 30), 'shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;fillColor=#1E4074;top=0;left=0;bottom=0;right=0;overflow=hidden;pointerEvents=1;align=left;spacingLeft=10;strokeColor=none;fontColor=#FFFFFF;'); 286 tableEntry1.vertex = true; 287 bg2.insert(tableEntry1); 288 var tableEntry2 = new mxCell('Software System', new mxGeometry(0, 30, 160, 30), 'shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;fillColor=#3162AF;top=0;left=0;bottom=0;right=0;overflow=hidden;pointerEvents=1;align=left;spacingLeft=10;fontColor=#FFFFFF;'); 289 tableEntry2.vertex = true; 290 bg2.insert(tableEntry2); 291 var tableEntry3 = new mxCell('Container', new mxGeometry(0, 30, 160, 30), 'shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;fillColor=#52A2D8;top=0;left=0;bottom=0;right=0;overflow=hidden;pointerEvents=1;align=left;spacingLeft=10;fontColor=#FFFFFF;'); 292 tableEntry3.vertex = true; 293 bg2.insert(tableEntry3); 294 var tableEntry4 = new mxCell('Component', new mxGeometry(0, 30, 160, 30), 'shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;fillColor=#7CBEF1;top=0;left=0;bottom=0;right=0;overflow=hidden;pointerEvents=1;align=left;spacingLeft=10;fontColor=#FFFFFF;'); 295 tableEntry4.vertex = true; 296 bg2.insert(tableEntry4); 297 var tableEntry5 = new mxCell('External Person', new mxGeometry(0, 30, 160, 30), 'shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;fillColor=#6B6477;top=0;left=0;bottom=0;right=0;overflow=hidden;pointerEvents=1;align=left;spacingLeft=10;fontColor=#FFFFFF;'); 298 tableEntry5.vertex = true; 299 bg2.insert(tableEntry5); 300 var tableEntry6 = new mxCell('External Software System', new mxGeometry(0, 30, 160, 30), 'shape=partialRectangle;html=1;whiteSpace=wrap;connectable=0;fillColor=#8B8496;top=0;left=0;bottom=0;right=0;overflow=hidden;pointerEvents=1;align=left;spacingLeft=10;fontColor=#FFFFFF;'); 301 tableEntry6.vertex = true; 302 bg2.insert(tableEntry6); 303 304 return sb.createVertexTemplateFromCells([bg1, bg2], bg2.geometry.width, bg1.geometry.height + bg2.geometry.height, 'Legend'); 305 }) 306 ]); 307 308 this.setCurrentSearchEntryLibrary(); 309 }; 310})(); 311