From bec9f8fc0daa607895b77b4d5c89b2b4b422645a Mon Sep 17 00:00:00 2001
From: Christoph Dornieden <cdor@informatik.uni-kiel.de>
Date: Mon, 20 Jun 2016 17:45:33 +0200
Subject: [PATCH] made style to object
---
.../component.js | 17 +++++++-
.../style.js | 40 +++++++------------
2 files changed, 30 insertions(+), 27 deletions(-)
diff --git a/app/components/architecture-visualisation-cytoscape/component.js b/app/components/architecture-visualisation-cytoscape/component.js
index 33e4b7b..05da656 100644
--- a/app/components/architecture-visualisation-cytoscape/component.js
+++ b/app/components/architecture-visualisation-cytoscape/component.js
@@ -27,7 +27,22 @@ export default Ember.Component.extend({
boxSelectionEnabled: false,
autounselectify: true,
- style: cytoscapeStyle,
+ style: cytoscapeStyle({
+ nodeGroupTextColor: '#3399CC',
+ nodeGroupColor: 'white',
+ borderColor: '#39588A',
+
+ nodeColor: '#B4DCED',
+ nodeTextColor: '#3399CC',
+
+ serviceColor: '#E8F8FF',
+ serviceTextColor: '#3399CC',
+
+ arrowBorderColor: '#3399CC',
+ arrowColor: '#3399CC',
+ arrowLabelColor: 'black'
+ }
+ ),
elements: _.cloneDeep(this.get('graph')), // TODO!
diff --git a/app/components/architecture-visualisation-cytoscape/style.js b/app/components/architecture-visualisation-cytoscape/style.js
index b546c73..1efa160 100644
--- a/app/components/architecture-visualisation-cytoscape/style.js
+++ b/app/components/architecture-visualisation-cytoscape/style.js
@@ -4,23 +4,8 @@
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 `
+export default function(variables){
+ return `
* {
@@ -48,34 +33,36 @@ $node > node { /* compounds. "Nodes" in meta model. $ selects the parent node th
}
[type="node"] {
- background-color: ${nodeColor};
- color: ${nodeTextColor};
+ background-color: ${variables.nodeColor};
+ color: ${variables.nodeTextColor};
font-weight: bold;
}
[type="serviceInstance"] {
- background-color: ${serviceColor};
- color: ${serviceTextColor};
+ background-color: ${variables.serviceColor};
+ color: ${variables.serviceTextColor};
font-weight: bold;
}
[type="communicationInstance"] {
color: #F4EFDC;
- line-color: ${arrowBorderColor};
- target-arrow-color: ${arrowColor};
+ line-color: ${variables.arrowBorderColor};
+ target-arrow-color: ${variables.arrowColor};
}
[type="nodeGroup"] {
- color: ${nodeGroupTextColor};
- background-color: ${nodeGroupColor};
+ color: ${variables.nodeGroupTextColor};
+ background-color: ${variables.nodeGroupColor};
border-style: dotted;
- border-color: ${borderColor};
+ border-color: ${variables.borderColor};
border-width: 2px;
font-weight: bold;
}
edge {
label: data(label);
+ color: ${variables.arrowLabelColor};
+ font-weight: bold;
target-arrow-shape: triangle-backcurve;
curve-style: bezier; /* supports arrows */
width: 2px;
@@ -94,3 +81,4 @@ edge {
`; /* js string end */
+}
--
GitLab