From 8e46b33de6eb490f802776eb0bf8946a3076b035 Mon Sep 17 00:00:00 2001
From: Mathis Neumann <mathis@simpletechs.net>
Date: Tue, 21 Jun 2016 10:54:06 +0200
Subject: [PATCH] color theme support
---
app/components/architecture-viewer.js | 10 ++++++-
.../component.js | 26 +++++--------------
.../themes.js | 14 ++++++++++
.../components/architecture-viewer.hbs | 10 ++++++-
4 files changed, 38 insertions(+), 22 deletions(-)
create mode 100644 app/components/architecture-visualisation-cytoscape/themes.js
diff --git a/app/components/architecture-viewer.js b/app/components/architecture-viewer.js
index bc0595c..acc7b12 100644
--- a/app/components/architecture-viewer.js
+++ b/app/components/architecture-viewer.js
@@ -1,11 +1,16 @@
import Ember from 'ember';
+import Themes from './architecture-visualisation-cytoscape/themes';
+
+
export default Ember.Component.extend({
graph: null,
layoutAlgorithm: 'cose',
+ theme: Themes[Object.keys(Themes)[0]], // first theme
+ themes: Object.keys(Themes),
layoutAlgorithms: [
'cose',
- // 'cose-bilkent', // broken
+ 'cose-bilkent', // broken
'cola',
'grid',
'concentric',
@@ -19,6 +24,9 @@ export default Ember.Component.extend({
selectLayoutAlgorithm(value) {
this.debug('value', value);
this.set('layoutAlgorithm', value);
+ },
+ selectTheme(theme) {
+ this.set('theme', Themes[theme]);
}
}
});
diff --git a/app/components/architecture-visualisation-cytoscape/component.js b/app/components/architecture-visualisation-cytoscape/component.js
index 215d492..199c423 100644
--- a/app/components/architecture-visualisation-cytoscape/component.js
+++ b/app/components/architecture-visualisation-cytoscape/component.js
@@ -9,6 +9,7 @@ import coseBilkent from 'npm:cytoscape-cose-bilkent';
coseBilkent(cytoscape); // register
export default Ember.Component.extend({
+ theme: null,
layoutAlgorithm: 'cose',
classNames: ['cytoscapeRenderingSpace'],
init: function()Â {
@@ -19,33 +20,18 @@ export default Ember.Component.extend({
willDestroyElement() {
clearInterval(this.interval);
},
- layoutChanged: Ember.observer('layout', function(newLayout) {
+ layoutChanged: function(newLayout) {
this.debug('layout changed!', newLayout);
- }),
+ }.observes('layout'),
renderGraph: function() {
- this.debug('graph', this.get('graph'));
+ this.debug('graph',this.get('theme'), this.get('graph'));
this.cytoscape = cytoscape({
container: this.element,
boxSelectionEnabled: false,
autounselectify: true,
- style: cytoscapeStyle({
- nodeGroupTextColor: '#3399CC',
- nodeGroupColor: 'white',
- borderColor: '#39588A',
-
- nodeColor: '#B4DCED',
- nodeTextColor: '#3399CC',
-
- serviceColor: '#E8F8FF',
- serviceTextColor: '#3399CC',
-
- arrowBorderColor: '#3399CC',
- arrowColor: '#3399CC',
- arrowLabelColor: 'black'
- }
- ),
+ style: cytoscapeStyle(this.get('theme')),
elements: _.cloneDeep(this.get('graph')), // TODO!
@@ -60,5 +46,5 @@ export default Ember.Component.extend({
window.cy = cytoscape;
window.cytoscape = this.cytoscape;
- }.on('didInsertElement').observes('layoutAlgorithm', 'graph')
+ }.on('didInsertElement').observes('layoutAlgorithm', 'graph', 'theme')
});
diff --git a/app/components/architecture-visualisation-cytoscape/themes.js b/app/components/architecture-visualisation-cytoscape/themes.js
new file mode 100644
index 0000000..2baa5ad
--- /dev/null
+++ b/app/components/architecture-visualisation-cytoscape/themes.js
@@ -0,0 +1,14 @@
+export default {
+ 'arctic': {
+ nodeGroupTextColor: '#3399CC',
+ nodeGroupColor: 'white',
+ borderColor: '#39588A',
+ nodeColor: '#B4DCED',
+ nodeTextColor: '#3399CC',
+ serviceColor: '#E8F8FF',
+ serviceTextColor: '#3399CC',
+ arrowBorderColor: '#3399CC',
+ arrowColor: '#3399CC',
+ arrowLabelColor: 'black'
+ }
+};
\ No newline at end of file
diff --git a/app/templates/components/architecture-viewer.hbs b/app/templates/components/architecture-viewer.hbs
index 9f185d5..ce7d54b 100644
--- a/app/templates/components/architecture-viewer.hbs
+++ b/app/templates/components/architecture-viewer.hbs
@@ -1,6 +1,6 @@
<div class="row">
<div class="col-md-10 visualisationContainer">
- {{architecture-visualisation-cytoscape graph=graph layoutAlgorithm=layoutAlgorithm}}
+ {{architecture-visualisation-cytoscape graph=graph layoutAlgorithm=layoutAlgorithm theme=theme}}
</div>
<div class="col-md-2">
<div class="form-group">
@@ -11,6 +11,14 @@
{{/each}}
</select>
</div>
+ <div class="form-group">
+ <label for="layoutTheme">Theme:</label>
+ <select class="form-control" id="layoutTheme" onchange={{action "selectTheme" value="target.value"}}>
+ {{#each themes as |theme|}}
+ <option>{{theme}}</option>
+ {{/each}}
+ </select>
+ </div>
</div>
</div>
--
GitLab