diff --git a/app/components/architecture-visualisation-cytoscape/component.js b/app/components/architecture-visualisation-cytoscape/component.js index afef77cd001e8e2846ab7c8e920106333152169c..0ceae58093abed2d0aa6d13e914d77d578885013 100644 --- a/app/components/architecture-visualisation-cytoscape/component.js +++ b/app/components/architecture-visualisation-cytoscape/component.js @@ -69,7 +69,8 @@ export default Ember.Component.extend({ layout: { name: 'cola', - padding: 5 + padding: 5, + maxSimulationTime: 1000 } }); } diff --git a/app/components/architecture-visualisation-cytoscape/style.js b/app/components/architecture-visualisation-cytoscape/style.js index 9a6e64422b11d6211279c90ac8bdad8c1bd20726..b546c7357875093d01d5d5308f69d2da6c44acca 100644 --- a/app/components/architecture-visualisation-cytoscape/style.js +++ b/app/components/architecture-visualisation-cytoscape/style.js @@ -3,8 +3,26 @@ this is a .js file, because we can then use static imports which ember-cli can properly build. Notice that this is only pseudo-css for cytoscape. See the cytoscape.js docs for more info. */ + +/*https://color.adobe.com/anggo-djago-color-theme-2691053/*/ +const arrowBorderColor = '#002A4A'; +const arrowColor = arrowBorderColor; + + +const nodeTextColor = '#002A4A'; +const nodeColor = '#17607D'; + +const serviceColor = '#ED8910'; +const serviceTextColor = '#FFFEED';/* '#FFF1CE';*/ + +const nodeGroupTextColor = nodeTextColor; +const nodeGroupColor = 'white'; +const borderColor = '#D64700'; + + export default ` + * { font-size: 10pt; } @@ -14,6 +32,10 @@ node { /* all nodes */ shape: roundrectangle; text-valign: center; text-halign: center; + width: 100px; + height: 60px; + text-wrap: wrap; + text-max-width: 90px; } $node > node { /* compounds. "Nodes" in meta model. $ selects the parent node that has a node instead of the node (as css would) */ @@ -26,14 +48,30 @@ $node > node { /* compounds. "Nodes" in meta model. $ selects the parent node th } [type="node"] { - background-color: #CCC; + background-color: ${nodeColor}; + color: ${nodeTextColor}; + font-weight: bold; + +} + +[type="serviceInstance"] { + background-color: ${serviceColor}; + color: ${serviceTextColor}; + font-weight: bold; +} +[type="communicationInstance"] { + color: #F4EFDC; + line-color: ${arrowBorderColor}; + target-arrow-color: ${arrowColor}; } [type="nodeGroup"] { - background-color: white; + color: ${nodeGroupTextColor}; + background-color: ${nodeGroupColor}; border-style: dotted; - border-color: #999; + border-color: ${borderColor}; border-width: 2px; + font-weight: bold; } edge { @@ -55,4 +93,4 @@ edge { } -`; /* js string end */ \ No newline at end of file +`; /* js string end */