mxGCP2.js 16 KB

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