[Time Conductor] Refactored out use of angular event bus in favor of making TimeConductorViewService an event emitter.

This commit is contained in:
Henry 2016-09-22 17:22:25 -07:00
parent 49ee5cb74b
commit 3c95c095f1
5 changed files with 36 additions and 22 deletions

View File

@ -77,7 +77,8 @@ define([
"implementation": ConductorAxisController, "implementation": ConductorAxisController,
"depends": [ "depends": [
"timeConductor", "timeConductor",
"formatService" "formatService",
"timeConductorViewService"
] ]
} }
], ],

View File

@ -32,11 +32,12 @@ define(
* labelled 'ticks'. It requires 'start' and 'end' integer values to * labelled 'ticks'. It requires 'start' and 'end' integer values to
* be specified as attributes. * be specified as attributes.
*/ */
function ConductorAxisController(conductor, formatService) { function ConductorAxisController(conductor, formatService, conductorViewService) {
// Dependencies // Dependencies
this.d3 = d3; this.d3 = d3;
this.formatService = formatService; this.formatService = formatService;
this.conductor = conductor; this.conductor = conductor;
this.conductorViewService = conductorViewService;
// Runtime properties (set by 'link' function) // Runtime properties (set by 'link' function)
this.target = undefined; this.target = undefined;
@ -53,8 +54,8 @@ define(
Object.keys(ConductorAxisController.prototype).filter(function (key) { Object.keys(ConductorAxisController.prototype).filter(function (key) {
return typeof ConductorAxisController.prototype[key] === 'function'; return typeof ConductorAxisController.prototype[key] === 'function';
}).forEach(function (key) { }).forEach(function (key) {
self[key] = self[key].bind(self); this[key] = ConductorAxisController.prototype[key].bind(this);
}); }.bind(this));
} }
ConductorAxisController.prototype.destroy = function () { ConductorAxisController.prototype.destroy = function () {
@ -137,7 +138,7 @@ define(
if (this.timeSystem !== undefined) { if (this.timeSystem !== undefined) {
this.changeTimeSystem(this.timeSystem); this.changeTimeSystem(this.timeSystem);
this.setScale(this.bounds); this.setScale();
} }
//Respond to changes in conductor //Respond to changes in conductor
@ -146,15 +147,17 @@ define(
this.scope.$on("$destroy", this.destroy); this.scope.$on("$destroy", this.destroy);
scope.$on("zoom", function (evt, bounds){ this.conductorViewService.on("zoom", this.zoom);
this.changeBounds(bounds);
}.bind(this));
}; };
ConductorAxisController.prototype.panEnd = function () { ConductorAxisController.prototype.panStop = function () {
//resync view bounds with time conductor bounds //resync view bounds with time conductor bounds
this.conductor.bounds(this.bounds); this.conductor.bounds(this.bounds);
this.scope.$emit("pan-stop"); this.conductorViewService.emit("pan-stop");
};
ConductorAxisController.prototype.zoom = function (bounds) {
this.changeBounds(bounds);
}; };
ConductorAxisController.prototype.pan = function (delta) { ConductorAxisController.prototype.pan = function (delta) {
@ -168,7 +171,7 @@ define(
end: end end: end
}; };
this.setScale(); this.setScale();
this.scope.$emit("pan", this.bounds); this.conductorViewService.emit("pan", this.bounds);
} }
}; };

View File

@ -41,7 +41,7 @@ define([], function () {
template: '<div class="l-axis-holder" ' + template: '<div class="l-axis-holder" ' +
' mct-drag-down="axis.panStart()"' + ' mct-drag-down="axis.panStart()"' +
' mct-drag-up="axis.panEnd(delta)"' + ' mct-drag-up="axis.panStop(delta)"' +
' mct-drag="axis.pan(delta)"' + ' mct-drag="axis.pan(delta)"' +
' mct-resize="axis.resize()"></div>' ' mct-resize="axis.resize()"></div>'
} }

View File

@ -97,14 +97,9 @@ define(
// Watch scope for selection of mode or time system by user // Watch scope for selection of mode or time system by user
this.$scope.$watch('modeModel.selectedKey', this.setMode); this.$scope.$watch('modeModel.selectedKey', this.setMode);
this.$scope.$on('pan', function (e, bounds) { this.conductorViewService.on('pan', this.pan);
this.$scope.panning = true;
this.setFormFromBounds(bounds);
}.bind(this));
this.$scope.$on('pan-stop', function () { this.conductorViewService.on('pan-stop', this.panStop);
this.$scope.panning = false;
}.bind(this));
this.$scope.$on('$destroy', this.destroy); this.$scope.$on('$destroy', this.destroy);
}; };
@ -114,6 +109,15 @@ define(
this.conductor.off('timeSystem', this.changeTimeSystem); this.conductor.off('timeSystem', this.changeTimeSystem);
}; };
TimeConductorController.prototype.pan = function (bounds) {
this.$scope.panning = true;
this.setFormFromBounds(bounds);
};
TimeConductorController.prototype.panStop = function () {
this.$scope.panning = false;
};
/** /**
* Called when the bounds change in the time conductor. Synchronizes * Called when the bounds change in the time conductor. Synchronizes
* the bounds values in the time conductor with those in the form * the bounds values in the time conductor with those in the form
@ -123,7 +127,7 @@ define(
TimeConductorController.prototype.setFormFromBounds = function (bounds) { TimeConductorController.prototype.setFormFromBounds = function (bounds) {
this.$scope.boundsModel.start = bounds.start; this.$scope.boundsModel.start = bounds.start;
this.$scope.boundsModel.end = bounds.end; this.$scope.boundsModel.end = bounds.end;
//this.$scope.currentZoom = bounds.end - bounds.start;
this.$scope.currentZoom = this.toSliderValue(bounds.end - bounds.start); this.$scope.currentZoom = this.toSliderValue(bounds.end - bounds.start);
if (!this.pendingUpdate) { if (!this.pendingUpdate) {
this.pendingUpdate = true; this.pendingUpdate = true;
@ -272,7 +276,7 @@ define(
var bounds = this.toTimeSpan(sliderValue); var bounds = this.toTimeSpan(sliderValue);
this.setFormFromBounds(bounds); this.setFormFromBounds(bounds);
this.$scope.$broadcast("zoom", bounds); this.conductorViewService.emit("zoom", bounds);
}; };
TimeConductorController.prototype.zoomStop = function (sliderValue) { TimeConductorController.prototype.zoomStop = function (sliderValue) {

View File

@ -22,9 +22,10 @@
define( define(
[ [
'EventEmitter',
'./TimeConductorMode' './TimeConductorMode'
], ],
function (TimeConductorMode) { function (EventEmitter, TimeConductorMode) {
/** /**
* A class representing the state of the time conductor view. This * A class representing the state of the time conductor view. This
@ -36,6 +37,9 @@ define(
* @constructor * @constructor
*/ */
function TimeConductorViewService(conductor, timeSystems) { function TimeConductorViewService(conductor, timeSystems) {
EventEmitter.call(this);
this.systems = timeSystems.map(function (timeSystemConstructor) { this.systems = timeSystems.map(function (timeSystemConstructor) {
return timeSystemConstructor(); return timeSystemConstructor();
}); });
@ -97,6 +101,8 @@ define(
} }
} }
TimeConductorViewService.prototype = Object.create(EventEmitter.prototype);
/** /**
* Getter/Setter for the Time Conductor Mode. Modes determine the * Getter/Setter for the Time Conductor Mode. Modes determine the
* behavior of the time conductor, especially with regards to the * behavior of the time conductor, especially with regards to the