Skip to content

Commit 02c543f

Browse files
akhenryakhenry
committed
Fixed zoom in real-time mode
1 parent b384e84 commit 02c543f

File tree

5 files changed

+120
-53
lines changed

5 files changed

+120
-53
lines changed

‎platform/features/conductor-v2/conductor/res/templates/time-conductor.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@
120120
<input class="time-conductor-zoom flex-elem" type="range"
121121
ng-model="currentZoom"
122122
ng-mouseUp="tcController.zoomStop(currentZoom)"
123-
ng-change="tcController.zoom(currentZoom)"
123+
ng-change="tcController.zoomDrag(currentZoom)"
124124
min="0.01"
125125
step="0.01"
126126
max="0.99" />

‎platform/features/conductor-v2/conductor/src/ui/ConductorAxisController.js

+15-5
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,13 @@ define(
6161
ConductorAxisController.prototype.destroy = function () {
6262
this.conductor.off('timeSystem', this.changeTimeSystem);
6363
this.conductor.off('bounds', this.setScale);
64+
this.conductorViewService.off("zoom", this.onZoom);
65+
this.conductorViewService.off("zoom-stop", this.onZoomStop)
6466
};
6567

6668
ConductorAxisController.prototype.changeBounds = function (bounds) {
6769
this.bounds = bounds;
68-
if (this.initialized) {
70+
if (this.initialized && !this.zooming) {
6971
this.setScale();
7072
}
7173
};
@@ -147,17 +149,25 @@ define(
147149

148150
this.scope.$on("$destroy", this.destroy);
149151

150-
this.conductorViewService.on("zoom", this.zoom);
152+
this.conductorViewService.on("zoom", this.onZoom);
153+
this.conductorViewService.on("zoom-stop", this.onZoomStop);
151154
};
152155

153156
ConductorAxisController.prototype.panStop = function () {
154157
//resync view bounds with time conductor bounds
155-
this.conductor.bounds(this.bounds);
156158
this.conductorViewService.emit("pan-stop");
159+
this.conductor.bounds(this.bounds);
160+
};
161+
162+
ConductorAxisController.prototype.onZoom = function (zoom) {
163+
this.zooming = true;
164+
165+
this.bounds = zoom.bounds;
166+
this.setScale();
157167
};
158168

159-
ConductorAxisController.prototype.zoom = function (bounds) {
160-
this.changeBounds(bounds);
169+
ConductorAxisController.prototype.onZoomStop = function (zoom) {
170+
this.zooming = false;
161171
};
162172

163173
ConductorAxisController.prototype.pan = function (delta) {

‎platform/features/conductor-v2/conductor/src/ui/TimeConductorController.js

+53-34
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ define(
5353
//Set the initial state of the view based on current time conductor
5454
this.initializeScope();
5555

56-
this.conductor.on('bounds', this.setFormFromBounds);
56+
this.conductor.on('bounds', this.changeBounds);
5757
this.conductor.on('timeSystem', this.changeTimeSystem);
5858

5959
// If no mode selected, select fixed as the default
@@ -98,46 +98,58 @@ define(
9898

9999
// Watch scope for selection of mode or time system by user
100100
this.$scope.$watch('modeModel.selectedKey', this.setMode);
101-
this.conductorViewService.on('pan', this.pan);
102101

103-
this.conductorViewService.on('pan-stop', this.panStop);
102+
this.conductorViewService.on('pan', this.onPan);
103+
this.conductorViewService.on('pan-stop', this.onPanStop);
104104

105105
this.$scope.$on('$destroy', this.destroy);
106106
};
107107

108108
TimeConductorController.prototype.destroy = function () {
109109
this.conductor.off('bounds', this.setFormFromBounds);
110110
this.conductor.off('timeSystem', this.changeTimeSystem);
111+
112+
this.conductorViewService.off('pan', this.onPan);
113+
this.conductorViewService.off('pan-stop', this.onPanStop);
111114
};
112115

113-
TimeConductorController.prototype.pan = function (bounds) {
116+
TimeConductorController.prototype.onPan = function (bounds) {
114117
this.$scope.panning = true;
115-
this.setFormFromBounds(bounds);
118+
this.$scope.boundsModel.start = bounds.start;
119+
this.$scope.boundsModel.end = bounds.end;
116120
};
117121

118-
TimeConductorController.prototype.panStop = function () {
122+
TimeConductorController.prototype.onPanStop = function () {
119123
this.$scope.panning = false;
120124
};
121125

126+
TimeConductorController.prototype.changeBounds = function (bounds) {
127+
if (!this.$scope.zooming && !this.$scope.panning) {
128+
this.setFormFromBounds(bounds);
129+
}
130+
};
131+
122132
/**
123133
* Called when the bounds change in the time conductor. Synchronizes
124134
* the bounds values in the time conductor with those in the form
125135
*
126136
* @private
127137
*/
128138
TimeConductorController.prototype.setFormFromBounds = function (bounds) {
129-
this.$scope.boundsModel.start = bounds.start;
130-
this.$scope.boundsModel.end = bounds.end;
131-
132-
this.$scope.currentZoom = this.toSliderValue(bounds.end - bounds.start);
133-
this.toTimeUnits(bounds.end - bounds.start);
134-
135-
if (!this.pendingUpdate) {
136-
this.pendingUpdate = true;
137-
this.$window.requestAnimationFrame(function () {
138-
this.pendingUpdate = false;
139-
this.$scope.$digest();
140-
}.bind(this));
139+
if (!this.$scope.zooming && ! this.$scope.panning) {
140+
this.$scope.boundsModel.start = bounds.start;
141+
this.$scope.boundsModel.end = bounds.end;
142+
143+
this.$scope.currentZoom = this.toSliderValue(bounds.end - bounds.start);
144+
this.toTimeUnits(bounds.end - bounds.start);
145+
146+
if (!this.pendingUpdate) {
147+
this.pendingUpdate = true;
148+
this.$window.requestAnimationFrame(function () {
149+
this.pendingUpdate = false;
150+
this.$scope.$digest();
151+
}.bind(this));
152+
}
141153
}
142154
};
143155

@@ -267,30 +279,37 @@ define(
267279
}
268280
};
269281

270-
TimeConductorController.prototype.toTimeSpan = function (sliderValue) {
271-
var center = this.$scope.boundsModel.start +
272-
((this.$scope.boundsModel.end - this.$scope.boundsModel.start) / 2);
273-
var zoomDefaults = this.conductor.timeSystem().defaults().zoom;
274-
var timeSpan = Math.pow((1 - sliderValue), 4) * (zoomDefaults.min - zoomDefaults.max);
275-
return {start: center - timeSpan / 2, end: center + timeSpan / 2};
276-
};
277-
278282
TimeConductorController.prototype.toTimeUnits = function (timeSpan) {
279283
if (this.conductor.timeSystem()) {
280284
var timeFormat = this.formatService.getFormat(this.conductor.timeSystem().formats()[0]);
281285
this.$scope.timeUnits = timeFormat.timeUnits && timeFormat.timeUnits(timeSpan);
282286
}
283-
}
287+
};
288+
289+
TimeConductorController.prototype.zoomDrag = function(sliderValue) {
290+
var zoomDefaults = this.conductor.timeSystem().defaults().zoom;
291+
var timeSpan = Math.pow((1 - sliderValue), 4) * (zoomDefaults.min - zoomDefaults.max);
284292

285-
TimeConductorController.prototype.zoom = function(sliderValue) {
286-
var bounds = this.toTimeSpan(sliderValue);
287-
this.setFormFromBounds(bounds);
288-
this.conductorViewService.emit("zoom", bounds);
293+
294+
var zoom = this.conductorViewService.zoom(timeSpan);
295+
296+
this.$scope.boundsModel.start = zoom.bounds.start;
297+
this.$scope.boundsModel.end = zoom.bounds.end;
298+
this.toTimeUnits(zoom.bounds.end - zoom.bounds.start);
299+
300+
if (zoom.deltas) {
301+
this.setFormFromDeltas(zoom.deltas);
302+
}
303+
304+
this.$scope.zooming = true;
289305
};
290306

291-
TimeConductorController.prototype.zoomStop = function (sliderValue) {
292-
var bounds = this.toTimeSpan(sliderValue);
293-
this.conductor.bounds(bounds);
307+
TimeConductorController.prototype.zoomStop = function () {
308+
this.updateBoundsFromForm(this.$scope.boundsModel);
309+
this.updateDeltasFromForm(this.$scope.boundsModel);
310+
311+
this.$scope.zooming = false;
312+
this.conductorViewService.emit('zoom-stop');
294313
};
295314

296315
return TimeConductorController;

‎platform/features/conductor-v2/conductor/src/ui/TimeConductorMode.js

+45-13
Original file line numberDiff line numberDiff line change
@@ -176,24 +176,56 @@ define(
176176
* @returns {TimeSystemDeltas}
177177
*/
178178
TimeConductorMode.prototype.deltas = function (deltas) {
179-
if (arguments.length !== 0) {
180-
var oldEnd = this.conductor.bounds().end;
181-
182-
if (this.dlts && this.dlts.end !== undefined) {
183-
//Calculate the previous raw end value (without delta)
184-
oldEnd = oldEnd - this.dlts.end;
185-
}
179+
if (arguments.length !== 0 && this.metadata().key!=='fixed') {
180+
var bounds = this.calculateBoundsFromDeltas(deltas);
186181

187182
this.dlts = deltas;
183+
this.conductor.bounds(bounds);
184+
}
185+
return this.dlts;
186+
};
188187

189-
var newBounds = {
190-
start: oldEnd - this.dlts.start,
191-
end: oldEnd + this.dlts.end
192-
};
188+
TimeConductorMode.prototype.calculateBoundsFromDeltas = function (deltas) {
189+
var oldEnd = this.conductor.bounds().end;
193190

194-
this.conductor.bounds(newBounds);
191+
if (this.dlts && this.dlts.end !== undefined) {
192+
//Calculate the previous raw end value (without delta)
193+
oldEnd = oldEnd - this.dlts.end;
195194
}
196-
return this.dlts;
195+
196+
var bounds = {
197+
start: oldEnd - deltas.start,
198+
end: oldEnd + deltas.end
199+
};
200+
return bounds;
201+
};
202+
203+
/**
204+
* Performs zoom calculation. Will calculate new bounds and deltas
205+
* based on desired timeSpan
206+
* @param timeSpan
207+
*/
208+
TimeConductorMode.prototype.calculateZoom = function (timeSpan) {
209+
var zoom = {};
210+
211+
// If a tick source is defined, then the concept of 'now' is
212+
// important. Calculate zoom based on 'now'.
213+
if (this.tickSource()){
214+
zoom.deltas = {
215+
start: timeSpan,
216+
end: this.dlts.end
217+
};
218+
zoom.bounds = this.calculateBoundsFromDeltas(zoom.deltas);
219+
// Calculate bounds based on deltas;
220+
} else {
221+
var bounds = this.conductor.bounds();
222+
var center = bounds.start + ((bounds.end - bounds.start)) / 2;
223+
bounds.start = center - timeSpan / 2;
224+
bounds.end = center + timeSpan / 2;
225+
zoom.bounds = bounds;
226+
}
227+
228+
return zoom;
197229
};
198230

199231
return TimeConductorMode;

‎platform/features/conductor-v2/conductor/src/ui/TimeConductorViewService.js

+6
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,12 @@ define(
203203
return this.currentMode.availableTimeSystems();
204204
};
205205

206+
TimeConductorViewService.prototype.zoom = function (timeSpan) {
207+
var zoom = this.currentMode.calculateZoom(timeSpan);
208+
this.emit("zoom", zoom);
209+
return zoom;
210+
};
211+
206212
return TimeConductorViewService;
207213
}
208214
);

0 commit comments

Comments
 (0)