Skip to content
Snippets Groups Projects
Commit 6bb8d9c3 authored by Mathis Neumann's avatar Mathis Neumann
Browse files

switch to observer based events for visualisationEvents

parent 20928bf8
Branches
No related tags found
No related merge requests found
import Ember from 'ember';
export default Ember.Component.extend({
visualisationEvents: Ember.inject.service(),
const { Component, inject, computed } = Ember;
export default Component.extend({
visualisationEvents: inject.service(),
graph: null,
entityDetails: null,
classNameBindings: ['resizing'],
resizing: false,
resizing: computed('visualisationEvents.resizing', function() {
return this.get('visualisationEvents.resizing');
}),
init() {
this._super();
this.debug('init!', this.get('graph'), this.get('layoutAlgorithm'));
// add class while the sidebar grows
const visualisationEvents = this.get('visualisationEvents');
const startListener = () => this.set('resizing', true);
const endListener = () => this.set('resizing', false);
visualisationEvents.on('resize:start', startListener);
visualisationEvents.on('resize:end', endListener);
this.on('willDestroyElement', () => {
visualisationEvents.off('resize:start', startListener);
visualisationEvents.off('resize:end', endListener);
});
},
actions: {
graphClick(rawEntity) {
......
......@@ -25,14 +25,6 @@ export default Component.extend({
cycola( cytoscape, window.cola );
this._super();
this.debug('loaded', this.get('graph'));
// we only need to listen to :end since opacity changes are done via css, since architecture-viewer adds a resizing class
const visualisationEvents = this.get('visualisationEvents');
const resizeListener = this.resize.bind(this);
visualisationEvents.on('resize:end', resizeListener);
this.on('willDestroyElement', () => {
visualisationEvents.off('resize:start', resizeListener);
});
},
/**
* Observer method that renders the visualisation in a canvas using Cytoscape
......@@ -83,10 +75,11 @@ export default Component.extend({
window.cy = cytoscape;
window.cytoscape = this.rendering;
})),
resize() {
// TODO: we only need to listen to :end since opacity changes are done via css, since architecture-viewer adds a resizing class
resize: observer('visualisationEvents.resizing', () => {
if(this.rendering) {
this.rendering.resize();
this.rendering.center(this.get('_clickedElement')); // TODO: keep focus or even focus clicked element
}
this.rendering.center(this.get('_clickedElement'));
}
})
});
......@@ -19,22 +19,19 @@ export default Component.extend({
height: 300,
plot: null,
init() {
const visualisationEvents = this.get('visualisationEvents');
const resizeListener = this.resize.bind(this);
visualisationEvents.on('resize:end', resizeListener);
this._super(...arguments);
},
style: computed('height', function () { // flot requires a fix height
return Ember.String.htmlSafe(`height: ${this.get('height')}px;`);
}),
resize() {
resize: observer('visualisationEvents.resizing', () => {
const plot = this.get('plot');
if(plot) {
plot.resize();
plot.setupGrid();
plot.draw();
}
},
}),
willDestroy() {
this.set('plot', null);
this._super(...arguments);
......@@ -50,7 +47,7 @@ export default Component.extend({
const plotData = this.get('timeSeries.series')
.map((valueObj) => [get(valueObj, 'timestamp'), get(valueObj, 'value')]);
this.set('options.yaxis.axisLabel', this.get('timeSeries.valueLabel'));
// this.set('options.yaxis.axisLabel', this.get('timeSeries.valueLabel'));
// wrap in additional array since flot can handle multiple graphs at once, we only need one
const plot = $this.plot([plotData], this.get('options')).data('plot');
......
......@@ -145,7 +145,7 @@ export default Route.extend({
},
actions: {
error: function() {
this.debug('error', ...arguments);
console.error('error', ...arguments);
this.transitionTo('deployments');
this.get('flashMessages').danger(`Could not find system with id "${this.get('systemId')}"`);
},
......
import Ember from 'ember';
const { Route, inject, run, $ } = Ember;
/**
* Loads the details for a specific entity.
*
......@@ -7,9 +9,9 @@ import Ember from 'ember';
* @extends Ember.Route
* @module routes
*/
export default Ember.Route.extend({
visualisationEvents: Ember.inject.service(),
loadingState: Ember.inject.service(),
export default Route.extend({
visualisationEvents: inject.service(),
loadingState: inject.service(),
/**
* the duration of the extending sidebar animation, which is configured as transition in _architecture.scss.
* Since we apparently cannot listen to css transitionEnd events, we have to manually wait the time.
......@@ -27,23 +29,24 @@ export default Ember.Route.extend({
},
activate() {
this.debug('route activated');
Ember.$('body').addClass('extendedSidebar');
$('body').addClass('extendedSidebar');
this.notifyResize();
},
deactivate() {
this.debug('route deactivated');
Ember.$('body').removeClass('extendedSidebar');
$('body').removeClass('extendedSidebar');
this.notifyResize();
},
notifyResize() {
if(this.animationTimeout) { // in case a user navigated too fast
run.cancel(this.animationTimeout);
this.endAnimation();
}
this.get('visualisationEvents').trigger('resize:start');
this.animationTimeout = setTimeout(this.endAnimation.bind(this), this.animationDuration);
this.set('visualisationEvents.resizing', true);
this.animationTimeout = run.later(this, this.endAnimation, this.animationDuration);
},
endAnimation() {
this.get('visualisationEvents').trigger('resize:end');
this.set('visualisationEvents.resizing', false);
this.animationTimeout = null;
}
});
......@@ -9,46 +9,12 @@ import Ember from 'ember';
* @class VisualisationEventsService
* @extends {Ember.Service}
*/
export default Ember.Service.extend(Ember.Evented, {
export default Ember.Service.extend({
/**
* forces listing of allowed events to improve documentations.
* Currently only resizing, used by deployments/single route (triggers events),
* cytoscape and architecture viewer component.
* Property that signlas if the visualisation is currently expanding/contracting.
* Use observers to subscribe to changes
*
* @type {Array}
* @property allowedEvents
* @default resize:start, resize:end
* @type {Boolean}
*/
allowedEvents: [
'resize:start',
'resize:end'
],
/**
* triggers an events, see Ember docs.
*
* @method trigger
* @parameter {String} eventName
* @throws {Error} exception if an unknown event name was used.
*/
trigger(eventName) {
if(this.get('allowedEvents').indexOf(eventName) < 0) {
throw new Error(`unknown event "${eventName}"`);
} else {
this._super(...arguments);
}
},
/**
* Subscribes to an event, see Ember docs.
*
* @method on
* @parameter {String} eventName
* @throws {Error} exception if an unknown event name was used.
*/
on(eventName) {
if(this.get('allowedEvents').indexOf(eventName) < 0) {
throw new Error(`unknown event "${eventName}"`);
} else {
this._super(...arguments);
}
},
isResizing: false
});
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment