1/** 2 * $Id: mxGCP2.js,v 1.0 2018/08/21 13:05:39 mate Exp $ 3 * Copyright (c) 2006-2018, JGraph Ltd 4 */ 5 6//********************************************************************************************************************************************************** 7//double rect 8//********************************************************************************************************************************************************** 9/** 10* Extends mxShape. 11*/ 12function mxShapeGCP2DoubleRect(bounds, fill, stroke, strokewidth) 13{ 14 mxShape.call(this); 15 this.bounds = bounds; 16 this.fill = fill; 17 this.stroke = stroke; 18 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 19}; 20 21/** 22* Extends mxShape. 23*/ 24mxUtils.extend(mxShapeGCP2DoubleRect, mxShape); 25 26mxShapeGCP2DoubleRect.prototype.cst = { 27 SHAPE_DOUBLE_RECT : 'mxgraph.gcp2.doubleRect' 28}; 29 30/** 31* Function: paintVertexShape 32* 33* Paints the vertex shape. 34*/ 35mxShapeGCP2DoubleRect.prototype.paintVertexShape = function(c, x, y, w, h) 36{ 37 var dx = 8; 38 var dy = 8; 39 40 w = w - dx; 41 h = h - dy; 42 43 c.translate(x, y); 44 c.begin(); 45 c.roundrect(dx, dy, w , h, 1, 1); 46 c.fillAndStroke(); 47 c.roundrect(0, 0, w, h, 1, 1); 48 c.fillAndStroke(); 49}; 50 51mxCellRenderer.registerShape(mxShapeGCP2DoubleRect.prototype.cst.SHAPE_DOUBLE_RECT, mxShapeGCP2DoubleRect); 52mxShapeGCP2DoubleRect.prototype.constraints = mxRectangleShape.prototype.constraints; 53 54//********************************************************************************************************************************************************** 55//hexagonal icon 56//********************************************************************************************************************************************************** 57/** 58* Extends mxShape. 59*/ 60function mxShapeGCP2HexIcon(bounds, fill, stroke, strokewidth) 61{ 62 mxShape.call(this); 63 this.bounds = bounds; 64 this.fill = fill; 65 this.stroke = stroke; 66 this.strokewidth = (strokewidth != null) ? strokewidth : 1; 67}; 68 69/** 70* Extends mxShape. 71*/ 72mxUtils.extend(mxShapeGCP2HexIcon, mxShape); 73 74mxShapeGCP2HexIcon.prototype.cst = { 75 HEX_ICON : 'mxgraph.gcp2.hexIcon' 76}; 77 78mxShapeGCP2HexIcon.prototype.customProperties = [ 79 {name: 'instNum', dispName: 'Number of instances', type: 'int', min: 0, defVal: 0}, 80 {name: 'prType', dispName: 'Instance Type', defVal: 'standard', type: 'enum', 81 enumList: [{val: 'standard', dispName: 'Standard'}, 82 {val: 'dynamic', dispName: 'Dynamic'}, 83 {val: 'multiple', dispName: 'Multiple'}, 84 {val: 'shared', dispName: 'Shared'}, 85 {val: 'replica', dispName: 'Replica'}, 86 {val: 'dynamic2', dispName: 'Dynamic 2'}, 87 {val: 'dynamic3', dispName: 'Dynamic 3'}, 88 {val: 'highmem', dispName: 'High-Mem'}, 89 {val: 'highcomp', dispName: 'High-Comp'}, 90 {val: 'backend', dispName: 'Backend'}, 91 {val: 'input', dispName: 'Input'}]}, 92 {name: 'prIcon', dispName: 'Instance Icon', defVal: 'compute_engine', type: 'enum', 93 enumList: [{val: 'compute_engine', dispName: 'Compute Engine'}, 94 {val: 'gpu', dispName: 'GPU'}, 95 {val: 'app_engine', dispName: 'App Engine'}, 96 {val: 'cloud_functions', dispName: 'Cloud Functions'}, 97 {val: 'container_engine', dispName: 'Kubernetes Engine'}, 98 {val: 'container_optimized_os', dispName: 'Container-Optimized OS'}, 99 {val: 'api_analytics', dispName: 'API Analytics'}, 100 {val: 'apigee_sense', dispName: 'Apigee Sense'}, 101 {val: 'api_monetization', dispName: 'API Monetization'}, 102 {val: 'cloud_endpoints', dispName: 'Cloud Endpoints'}, 103 {val: 'apigee_api_platform', dispName: 'Apigee API Platform'}, 104 {val: 'developer_portal', dispName: 'Developer Portal'}, 105 {val: 'cloud_iam', dispName: 'Cloud IAM'}, 106 {val: 'beyondcorp', dispName: 'BeyondCorp'}, 107 {val: 'cloud_iam', dispName: 'Cloud Resource Manager'}, 108 {val: 'data_loss_prevention_api', dispName: 'Data Loss Prevention API'}, 109 {val: 'cloud_security_scanner', dispName: 'Cloud Security Scanner'}, 110 {val: 'key_management_service', dispName: 'Key Management Service'}, 111 {val: 'identity_aware_proxy', dispName: 'Identity-Aware Proxy'}, 112 {val: 'security_key_enforcement', dispName: 'Security Key Enforcement'}, 113 {val: 'bigquery', dispName: 'BigQuery'}, 114 {val: 'cloud_datalab', dispName: 'Cloud Datalab'}, 115 {val: 'cloud_dataflow', dispName: 'Cloud Dataflow'}, 116 {val: 'cloud_pubsub', dispName: 'Cloud Pub/Sub'}, 117 {val: 'cloud_dataproc', dispName: 'Cloud Dataproc'}, 118 {val: 'genomics', dispName: 'Genomics'}, 119 {val: 'cloud_dataprep', dispName: 'Cloud Dataprep'}, 120 {val: 'data_studio', dispName: 'Data Studio'}, 121 {val: 'transfer_appliance', dispName: 'Transfer Appliance'}, 122 {val: 'cloud_machine_learning', dispName: 'Cloud Machine Learning'}, 123 {val: 'cloud_natural_language_api', dispName: 'Cloud Natural Language API'}, 124 {val: 'cloud_vision_api', dispName: 'Vision API'}, 125 {val: 'cloud_translation_api', dispName: 'Translation API'}, 126 {val: 'cloud_speech_api', dispName: 'Speech API'}, 127 {val: 'cloud_jobs_api', dispName: 'Jobs API'}, 128 {val: 'cloud_video_intelligence_api', dispName: 'Cloud Video Intelligence API'}, 129 {val: 'advanced_solutions_lab', dispName: 'Advanced Solutions Lab'}, 130 {val: 'cloud_iot_core', dispName: 'Cloud IoT Core'}, 131 {val: 'cloud_storage', dispName: 'Cloud Storage'}, 132 {val: 'cloud_sql', dispName: 'Cloud SQL'}, 133 {val: 'cloud_bigtable', dispName: 'Cloud Bigtable'}, 134 {val: 'cloud_spanner', dispName: 'Cloud Spanner'}, 135 {val: 'cloud_datastore', dispName: 'Cloud Datastore'}, 136 {val: 'persistent_disk', dispName: 'Persistent Disk'}, 137 {val: 'cloud_memorystore', dispName: 'Cloud Memorystore'}, 138 {val: 'cloud_filestore', dispName: 'Cloud Filestore'}, 139 {val: 'stackdriver', dispName: 'Stackdriver'}, 140 {val: 'cloud_deployment_manager', dispName: 'Monitoring'}, 141 {val: 'cloud_deployment_manager', dispName: 'Deployment Manager'}, 142 {val: 'logging', dispName: 'Logging'}, 143 {val: 'placeholder', dispName: 'Cloud Console'}, 144 {val: 'error_reporting', dispName: 'Error Reporting'}, 145 {val: 'placeholder', dispName: 'Cloud Shell'}, 146 {val: 'trace', dispName: 'Trace'}, 147 {val: 'placeholder', dispName: 'Cloud Mobile App'}, 148 {val: 'profiler', dispName: 'Profiler'}, 149 {val: 'placeholder', dispName: 'Billing API'}, 150 {val: 'cloud_apis', dispName: 'Cloud APIs'}, 151 {val: 'virtual_private_cloud', dispName: 'Virtual Private Cloud'}, 152 {val: 'dedicated_interconnect', dispName: 'Dedicated Interconnect'}, 153 {val: 'cloud_load_balancing', dispName: 'Cloud Load Balancing'}, 154 {val: 'cloud_dns', dispName: 'Cloud DNS'}, 155 {val: 'cloud_cdn', dispName: 'Cloud CDN'}, 156 {val: 'cloud_network', dispName: 'Cloud Network'}, 157 {val: 'cloud_external_ip_addresses', dispName: 'Cloud External IP Addresses'}, 158 {val: 'cloud_routes', dispName: 'Cloud Routes'}, 159 {val: 'cloud_firewall_rules', dispName: 'Cloud Firewall Rules'}, 160 {val: 'cloud_vpn', dispName: 'Cloud VPN'}, 161 {val: 'cloud_router', dispName: 'Cloud Router'}, 162 {val: 'cloud_armor', dispName: 'Cloud Armor'}, 163 {val: 'standard_network_tier', dispName: 'Standard Network Tier'}, 164 {val: 'premium_network_tier', dispName: 'Premium Network Tier'}, 165 {val: 'partner_interconnect', dispName: 'Partner Interconnect'}, 166 {val: 'placeholder', dispName: 'Cloud SDK'}, 167 {val: 'container_builder', dispName: 'Cloud Build'}, 168 {val: 'cloud_tools_for_powershell', dispName: 'Cloud Tools for Visual Studio'}, 169 {val: 'placeholder', dispName: 'Cloud Source Repositories'}, 170 {val: 'placeholder', dispName: 'Maven App Engine Plugin'}, 171 {val: 'placeholder', dispName: 'Cloud Tools for Eclipse'}, 172 {val: 'placeholder', dispName: 'Cloud Tools for IntelliJ'}, 173 {val: 'placeholder', dispName: 'Cloud Test Lab'}, 174 {val: 'cloud_tools_for_powershell', dispName: 'Cloud Tools for PowerShell'}, 175 {val: 'cloud_tools_for_powershell', dispName: 'IDE Plugins'}, 176 {val: 'container_registry', dispName: 'Container Registry'}, 177 {val: 'cloud_iot_edge', dispName: 'Cloud IoT Edge'}, 178 {val: 'cloud_firestore', dispName: 'Cloud Firestore'}, 179 {val: 'cloud_run', dispName: 'Cloud Run'}, 180 {val: 'gke_on_prem', dispName: 'GKE-on-Prem'}, 181 {val: 'cloud_data_catalog', dispName: 'Cloud Data Catalog'}, 182 {val: 'cloud_data_fusion', dispName: 'Cloud Data Fusion'}, 183 {val: 'ai_hub', dispName: 'AI Hub'}, 184 {val: 'automl_video_intelligence', dispName: 'AutoML Video Intelligence'}, 185 {val: 'automl_natural_language', dispName: 'AutoML Natural Language'}, 186 {val: 'automl_tables', dispName: 'AutoML Tables'}, 187 {val: 'automl_translation', dispName: 'AutoML Translation'}, 188 {val: 'automl_vision', dispName: 'AutoML Vision'}, 189 {val: 'recommendations_ai', dispName: 'Recommendations AI'}, 190 {val: 'cloud_inference_api', dispName: 'Cloud Inference API'}, 191 {val: 'cloud_service_mesh', dispName: 'Cloud Service Mesh'}, 192 {val: 'cloud_nat', dispName: 'Cloud NAT'}, 193 {val: 'traffic_director', dispName: 'Traffic Director'}, 194 {val: 'cloud_test_lab', dispName: 'Cloud Test Lab'}, 195 {val: 'cloud_code', dispName: 'Cloud Code'}, 196 {val: 'cloud_tasks', dispName: 'Cloud Tasks'}, 197 {val: 'placeholder', dispName: 'Gradle App Engine Plugin'}]} 198]; 199 200/** 201* Function: paintVertexShape 202* 203* Paints the vertex shape. 204*/ 205mxShapeGCP2HexIcon.prototype.paintVertexShape = function(c, x, y, w, h) 206{ 207 c.translate(x, y); 208 209 var prIcon = mxUtils.getValue(this.state.style, 'prIcon', 'compute_engine'); 210 var prType = mxUtils.getValue(this.state.style, 'prType', ''); 211 var instNum = parseInt(mxUtils.getValue(this.state.style, 'instNum', 0)); 212 var fillColor = mxUtils.getValue(this.state.style, 'fillColor', '#ffffff'); 213 var opacity = mxUtils.getValue(this.state.style, 'opacity', '100'); 214 var strokeColor = mxUtils.getValue(this.state.style, 'strokeColor', 'none'); 215 var strokeWidth = mxUtils.getValue(this.state.style, 'strokeWidth', 1); 216 var iconSize = Math.min(w, h); 217 218 switch(prType) 219 { 220 case 'dynamic': 221 var bgSt1 = mxStencilRegistry.getStencil('mxgraph.gcp2.outline_blank_2'); 222 c.setAlpha(opacity * 0.5 / 100); 223 c.setStrokeColor('none'); 224 bgSt1.drawShape(c, this, w * 0.21, h * 0.12, w * 0.58, h * 0.76); 225 break; 226 case 'multiple': 227 var bgSt1 = mxStencilRegistry.getStencil('mxgraph.gcp2.outline_blank_2'); 228 c.setAlpha(opacity * 0.5 / 100); 229 c.setStrokeColor('none'); 230 bgSt1.drawShape(c, this, w * 0.21, h * 0.12, w * 0.58, h * 0.76); 231 var bgSt2 = mxStencilRegistry.getStencil('mxgraph.gcp2.outline_blank_3'); 232 c.setAlpha(opacity * 0.7 / 100); 233 c.setStrokeColor('none'); 234 bgSt2.drawShape(c, this, w * 0.17, h * 0.13, w * 0.66, h * 0.74); 235 break; 236 case 'shared': 237 var bgSt1 = mxStencilRegistry.getStencil('mxgraph.gcp2.outline_blank_1'); 238 this.style[mxConstants.STYLE_STROKEWIDTH] = iconSize * 0.038; 239 c.setAlpha(opacity * 0.4 / 100); 240 c.setStrokeColor(fillColor); 241 c.setFillColor('none'); 242 bgSt1.drawShape(c, this, w * 0.02, h * 0, w * 0.96, h); 243 var bgSt2 = mxStencilRegistry.getStencil('mxgraph.gcp2.outline_blank_2'); 244 c.setAlpha(opacity * 0.7 / 100); 245 bgSt2.drawShape(c, this, w * 0.14, h * 0.01, w * 0.72, h * 0.98); 246 c.setAlpha(opacity / 100); 247 c.setFillColor('#ffffff'); 248 bgSt1.drawShape(c, this, w * 0.13, h * 0.12, w * 0.74, h * 0.76); 249 this.style[mxConstants.STYLE_STROKEWIDTH] = strokeWidth; 250 break; 251 case 'replica': 252 var bgSt1 = mxStencilRegistry.getStencil('mxgraph.gcp2.outline_blank_1'); 253 this.style[mxConstants.STYLE_STROKEWIDTH] = iconSize * 0.038; 254 c.setAlpha(opacity * 0.4 / 100); 255 c.setStrokeColor(fillColor); 256 c.setFillColor('none'); 257 bgSt1.drawShape(c, this, w * 0.02, h * 0, w * 0.96, h); 258 c.setAlpha(opacity * 0.7 / 100); 259 bgSt1.drawShape(c, this, w * 0.075, h * 0.06, w * 0.85, h * 0.88); 260 c.setAlpha(opacity / 100); 261 c.setFillColor('#ffffff'); 262 bgSt1.drawShape(c, this, w * 0.13, h * 0.12, w * 0.74, h * 0.76); 263 this.style[mxConstants.STYLE_STROKEWIDTH] = strokeWidth; 264 break; 265 case 'dynamic2': 266 var bgSt1 = mxStencilRegistry.getStencil('mxgraph.gcp2.outline_blank_2'); 267 c.setAlpha(opacity * 0.5 / 100); 268 c.setStrokeColor('none'); 269 bgSt1.drawShape(c, this, w * 0.14, h * 0.01, w * 0.72, h * 0.98); 270 var bgSt2 = mxStencilRegistry.getStencil('mxgraph.gcp2.outline_blank_1'); 271 this.style[mxConstants.STYLE_STROKEWIDTH] = iconSize * 0.01; 272 c.setStrokeColor(fillColor); 273 c.setAlpha(opacity / 100); 274 c.setFillColor('#ffffff'); 275 bgSt2.drawShape(c, this, w * 0.13, h * 0.12, w * 0.74, h * 0.76); 276 this.style[mxConstants.STYLE_STROKEWIDTH] = strokeWidth; 277 break; 278 case 'dynamic3': 279 var bgSt1 = mxStencilRegistry.getStencil('mxgraph.gcp2.outline_blank_2'); 280 c.setStrokeColor('none'); 281 bgSt1.drawShape(c, this, w * 0.14, h * 0.01, w * 0.72, h * 0.98); 282 var bgSt2 = mxStencilRegistry.getStencil('mxgraph.gcp2.outline_blank_1'); 283 this.style[mxConstants.STYLE_STROKEWIDTH] = iconSize * 0.01; 284 c.setStrokeColor(fillColor); 285 c.setAlpha(opacity / 100); 286 c.setFillColor('#ffffff'); 287 bgSt2.drawShape(c, this, w * 0.13, h * 0.12, w * 0.74, h * 0.76); 288 this.style[mxConstants.STYLE_STROKEWIDTH] = strokeWidth; 289 break; 290 case 'highmem': 291 var bgSt1 = mxStencilRegistry.getStencil('mxgraph.gcp2.outline_highmem'); 292 c.setAlpha(opacity * 0.5 / 100); 293 c.setStrokeColor('none'); 294 bgSt1.drawShape(c, this, 0, h * 0.56, w, h * 0.28); 295 break; 296 case 'highcomp': 297 var bgSt1 = mxStencilRegistry.getStencil('mxgraph.gcp2.outline_highcomp'); 298 c.setAlpha(opacity * 0.5 / 100); 299 c.setStrokeColor('none'); 300 bgSt1.drawShape(c, this, 0, h * 0.16, w, h * 0.28); 301 break; 302 case 'backend': 303 var bgSt1 = mxStencilRegistry.getStencil('mxgraph.gcp2.outline_blank_1'); 304 c.setFillColor('#FCC64D'); 305 bgSt1.drawShape(c, this, w * 0.12, h * 0.11, w * 0.76, h * 0.78); 306 break; 307 case 'input': 308 var bgSt1 = mxStencilRegistry.getStencil('mxgraph.gcp2.outline_blank_1'); 309 c.setFillColor('#A5DA40'); 310 bgSt1.drawShape(c, this, w * 0.12, h * 0.11, w * 0.76, h * 0.78); 311 break; 312 case 'standard': 313 default: 314 break; 315 } 316 317 c.setAlpha(opacity / 100); 318 var stencil = mxStencilRegistry.getStencil('mxgraph.gcp2.' + prIcon); 319 320 if (stencil != null) 321 { 322 c.setFillColor(fillColor); 323 c.setStrokeColor('none'); 324 stencil.drawShape(c, this, w * 0.17, h * 0.16, w * 0.66, h * 0.68); 325 } 326 327 if (instNum > 0) 328 { 329 c.setFillColor('#ffffff'); 330 c.setStrokeColor('#ffffff'); 331 c.setStrokeWidth(iconSize * 0.038); 332 c.ellipse(w * 0.2, 0, w * 0.18, h * 0.22); 333 c.fillAndStroke(); 334 335 c.setAlpha(opacity * 0.5 / 100); 336 c.setStrokeColor(fillColor); 337 c.ellipse(w * 0.2, 0, w * 0.18, h * 0.22); 338 c.stroke(); 339 340 c.setAlpha(opacity / 100); 341 c.setFontColor('#4E6B89'); 342 c.setFontStyle(1); 343 c.setFontSize(Math.min(w, h) * 0.1); 344 345 c.text(w * 0.29, h * 0.11 + 1, 0, 0, instNum.toString(), mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0); 346 } 347}; 348 349mxCellRenderer.registerShape(mxShapeGCP2HexIcon.prototype.cst.HEX_ICON, mxShapeGCP2HexIcon); 350 351mxShapeGCP2HexIcon.prototype.getConstraints = function(style, w, h) 352{ 353 var constr = []; 354 355 constr.push(new mxConnectionConstraint(new mxPoint(0.825, 0.5), false)); 356 constr.push(new mxConnectionConstraint(new mxPoint(0.175, 0.5), false)); 357 constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0.16), false)); 358 constr.push(new mxConnectionConstraint(new mxPoint(0.5, 0.84), false)); 359 constr.push(new mxConnectionConstraint(new mxPoint(0.66, 0.17), false)); 360 constr.push(new mxConnectionConstraint(new mxPoint(0.66, 0.83), false)); 361 constr.push(new mxConnectionConstraint(new mxPoint(0.34, 0.17), false)); 362 constr.push(new mxConnectionConstraint(new mxPoint(0.34, 0.83), false)); 363 constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0.33), false)); 364 constr.push(new mxConnectionConstraint(new mxPoint(0.75, 0.67), false)); 365 constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0.33), false)); 366 constr.push(new mxConnectionConstraint(new mxPoint(0.25, 0.67), false)); 367 368 return (constr); 369}; 370 371