[Time Conductor] Fixed zoom slider behavior

This commit is contained in:
Henry 2016-10-22 16:47:11 -07:00
parent f5806613b9
commit 49e600dcc9
3 changed files with 33 additions and 18 deletions

View File

@ -1,7 +1,7 @@
<!-- Parent holder for time conductor. follow-mode | fixed-mode --> <!-- Parent holder for time conductor. follow-mode | fixed-mode -->
<div ng-controller="TimeConductorController as tcController" <div ng-controller="TimeConductorController as tcController"
class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selectedKey}}-mode {{timeSystemModel.selected.metadata.key}}-time-system" class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selectedKey}}-mode {{timeSystemModel.selected.metadata.key}}-time-system"
ng-class="{'status-panning': panning}"> ng-class="{'status-panning': tcController.panning}">
<div class="flex-elem holder time-conductor-icon"> <div class="flex-elem holder time-conductor-icon">
<div class="hand-little"></div> <div class="hand-little"></div>
@ -113,13 +113,15 @@
}"> }">
</mct-control> </mct-control>
<!-- Zoom control --> <!-- Zoom control -->
<div class="l-time-conductor-zoom-w grows flex-elem l-flex-row"> <div ng-if="tcController.supportsZoom"
class="l-time-conductor-zoom-w grows flex-elem l-flex-row">
{{currentZoom}}
<span <span
class="time-conductor-zoom-current-range flex-elem flex-fixed holder">{{timeUnits}}</span> class="time-conductor-zoom-current-range flex-elem flex-fixed holder">{{timeUnits}}</span>
<input class="time-conductor-zoom flex-elem" type="range" <input class="time-conductor-zoom flex-elem" type="range"
ng-model="currentZoom" ng-model="tcController.currentZoom"
ng-mouseUp="tcController.zoomStop(currentZoom)" ng-mouseUp="tcController.zoomStop(tcController.currentZoom)"
ng-change="tcController.zoomDrag(currentZoom)" ng-change="tcController.zoomDrag(tcController.currentZoom)"
min="0.01" min="0.01"
step="0.01" step="0.01"
max="0.99" /> max="0.99" />

View File

@ -72,8 +72,10 @@ define(
//If conductor has a time system selected already, populate the //If conductor has a time system selected already, populate the
//form from it //form from it
this.$scope.timeSystemModel = {}; this.$scope.timeSystemModel = {};
if (this.conductor.timeSystem()) { var timeSystem = this.conductor.timeSystem();
this.setFormFromTimeSystem(this.conductor.timeSystem()); if (timeSystem) {
this.setFormFromTimeSystem(timeSystem);
this.supportsZoom = timeSystem.defaults().zoom !== undefined;
} }
//Represents the various modes, and the currently selected mode //Represents the various modes, and the currently selected mode
@ -114,17 +116,17 @@ define(
}; };
TimeConductorController.prototype.onPan = function (bounds) { TimeConductorController.prototype.onPan = function (bounds) {
this.$scope.panning = true; this.panning = true;
this.$scope.boundsModel.start = bounds.start; this.$scope.boundsModel.start = bounds.start;
this.$scope.boundsModel.end = bounds.end; this.$scope.boundsModel.end = bounds.end;
}; };
TimeConductorController.prototype.onPanStop = function () { TimeConductorController.prototype.onPanStop = function () {
this.$scope.panning = false; this.panning = false;
}; };
TimeConductorController.prototype.changeBounds = function (bounds) { TimeConductorController.prototype.changeBounds = function (bounds) {
if (!this.$scope.zooming && !this.$scope.panning) { if (!this.zooming && !this.panning) {
this.setFormFromBounds(bounds); this.setFormFromBounds(bounds);
} }
}; };
@ -136,12 +138,14 @@ define(
* @private * @private
*/ */
TimeConductorController.prototype.setFormFromBounds = function (bounds) { TimeConductorController.prototype.setFormFromBounds = function (bounds) {
if (!this.$scope.zooming && ! this.$scope.panning) { if (!this.zooming && ! this.panning) {
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 = this.toSliderValue(bounds.end - bounds.start); if (this.supportsZoom) {
this.toTimeUnits(bounds.end - bounds.start); this.currentZoom = this.toSliderValue(bounds.end - bounds.start);
this.toTimeUnits(bounds.end - bounds.start);
}
if (!this.pendingUpdate) { if (!this.pendingUpdate) {
this.pendingUpdate = true; this.pendingUpdate = true;
@ -182,8 +186,10 @@ define(
timeSystemModel.selected = timeSystem; timeSystemModel.selected = timeSystem;
timeSystemModel.format = timeSystem.formats()[0]; timeSystemModel.format = timeSystem.formats()[0];
timeSystemModel.deltaFormat = timeSystem.deltaFormat(); timeSystemModel.deltaFormat = timeSystem.deltaFormat();
timeSystemModel.minZoom = timeSystem.defaults().zoom.min; if (this.supportsZoom) {
timeSystemModel.maxZoom = timeSystem.defaults().zoom.max; timeSystemModel.minZoom = timeSystem.defaults().zoom.min;
timeSystemModel.maxZoom = timeSystem.defaults().zoom.max;
}
}; };
@ -265,6 +271,8 @@ define(
this.setFormFromDeltas(deltas); this.setFormFromDeltas(deltas);
this.setFormFromBounds(bounds); this.setFormFromBounds(bounds);
this.supportsZoom = newTimeSystem.defaults().zoom !== undefined;
} }
this.setFormFromTimeSystem(newTimeSystem); this.setFormFromTimeSystem(newTimeSystem);
} }
@ -300,15 +308,13 @@ define(
if (zoom.deltas) { if (zoom.deltas) {
this.setFormFromDeltas(zoom.deltas); this.setFormFromDeltas(zoom.deltas);
} }
this.$scope.zooming = true;
}; };
TimeConductorController.prototype.zoomStop = function () { TimeConductorController.prototype.zoomStop = function () {
this.updateBoundsFromForm(this.$scope.boundsModel); this.updateBoundsFromForm(this.$scope.boundsModel);
this.updateDeltasFromForm(this.$scope.boundsModel); this.updateDeltasFromForm(this.$scope.boundsModel);
this.zooming = false;
this.$scope.zooming = false;
this.conductorViewService.emit('zoom-stop'); this.conductorViewService.emit('zoom-stop');
}; };

View File

@ -597,6 +597,10 @@ define(
return rowsToFilter.filter(matchRow.bind(null, filters)); return rowsToFilter.filter(matchRow.bind(null, filters));
}; };
/**
* @param displayRowIndex {number} The index in the displayed rows
* to scroll to.
*/
MCTTableController.prototype.scrollToRow = function (displayRowIndex) { MCTTableController.prototype.scrollToRow = function (displayRowIndex) {
var visible = displayRowIndex > this.firstVisible() && displayRowIndex < this.lastVisible(); var visible = displayRowIndex > this.firstVisible() && displayRowIndex < this.lastVisible();
@ -639,6 +643,9 @@ define(
this.setTimeOfInterest(this.conductor.timeOfInterest()); this.setTimeOfInterest(this.conductor.timeOfInterest());
}; };
/**
* @private
*/
MCTTableController.prototype.onRowClick = function (event, rowIndex) { MCTTableController.prototype.onRowClick = function (event, rowIndex) {
if (this.$scope.timeColumns.indexOf(this.$scope.sortColumn) !== -1) { if (this.$scope.timeColumns.indexOf(this.$scope.sortColumn) !== -1) {
var selectedTime = this.$scope.displayRows[rowIndex][this.$scope.sortColumn].text; var selectedTime = this.$scope.displayRows[rowIndex][this.$scope.sortColumn].text;