Skip to content

Commit

Permalink
Fix horizontal zoom step ratio
Browse files Browse the repository at this point in the history 
The step for zooming by mouse wheel or keyboard is now 80%/125% of
current window range. It no longer depends on mouse cursor y position.

Browser zoom is disabled when using mouse wheel on time axis.

Signed-off-by: Patrick Tasse <patrick.tasse@ericsson.com>
  • Loading branch information
@PatrickTasse
PatrickTasse committed Mar 8, 2021
1 parent 65ced9e commit e8f2d34
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 36 deletions.
32 changes: 9 additions & 23 deletions timeline-chart/src/layer/time-graph-axis.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,29 +41,14 @@ export class TimeGraphAxis extends TimeGraphLayer {
const mw = _.throttle((ev: WheelEvent) => {
if (this.controlKeyDown) {
// ZOOM AROUND MOUSE POINTER
let newViewRangeLength = this.unitController.viewRangeLength;
let xOffset = 0;
let moveX = false;
if (Math.abs(ev.deltaX) > Math.abs(ev.deltaY)) {
xOffset = -(ev.deltaX / this.stateController.zoomFactor);
moveX = true;
} else {
const zoomPosition = (ev.offsetX / this.stateController.zoomFactor);
const deltaLength = (ev.deltaY / this.stateController.zoomFactor);
newViewRangeLength += deltaLength;
xOffset = ((zoomPosition / this.unitController.viewRangeLength) * deltaLength);
}
let start = this.unitController.viewRange.start - xOffset;
if (start < 0) {
start = 0;
}
let end = start + newViewRangeLength;
if (end > this.unitController.absoluteRange) {
end = this.unitController.absoluteRange;
if (moveX) {
start = end - newViewRangeLength;
}
}
const zoomPosition = (ev.offsetX / this.stateController.zoomFactor);
const zoomIn = ev.deltaY < 0;
const newViewRangeLength = Math.max(1, Math.min(this.unitController.absoluteRange,
this.unitController.viewRangeLength * (zoomIn ? 0.8 : 1.25)));
const center = this.unitController.viewRange.start + zoomPosition;
const start = Math.max(0, Math.min(this.unitController.absoluteRange - newViewRangeLength,
center - zoomPosition * newViewRangeLength / this.unitController.viewRangeLength));
const end = start + newViewRangeLength;
this.unitController.viewRange = {
start,
end
Expand All @@ -83,6 +68,7 @@ export class TimeGraphAxis extends TimeGraphLayer {
}
this.unitController.viewRange = { start, end }
}
ev.preventDefault();
return false;
});
this.onCanvasEvent('mousewheel', mw);
Expand Down
24 changes: 11 additions & 13 deletions timeline-chart/src/layer/time-graph-chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ export class TimeGraphChart extends TimeGraphChartLayer {

protected afterAddToContainer() {
let mousePositionX = 1;
let mousePositionY = 1;
const horizontalDelta = 3;
let triggerKeyEvent = false;

Expand Down Expand Up @@ -88,11 +87,13 @@ export class TimeGraphChart extends TimeGraphChartLayer {
this.rowController.verticalOffset = verticalOffset;
}

const adjustZoom = (zoomPosition: number, deltaLength: number) => {
const newViewRangeLength = this.unitController.viewRangeLength + deltaLength;
const xOffset = ((zoomPosition / this.unitController.viewRangeLength) * deltaLength);
const start = Math.max(0, this.unitController.viewRange.start - xOffset);
const end = Math.min(start + newViewRangeLength, this.unitController.absoluteRange);
const adjustZoom = (zoomPosition: number, zoomIn: boolean) => {
const newViewRangeLength = Math.max(1, Math.min(this.unitController.absoluteRange,
this.unitController.viewRangeLength * (zoomIn ? 0.8 : 1.25)));
const center = this.unitController.viewRange.start + zoomPosition;
const start = Math.max(0, Math.min(this.unitController.absoluteRange - newViewRangeLength,
center - zoomPosition * newViewRangeLength / this.unitController.viewRangeLength));
const end = start + newViewRangeLength;
if (Math.trunc(start) !== Math.trunc(end)) {
this.unitController.viewRange = {
start,
Expand All @@ -103,7 +104,6 @@ export class TimeGraphChart extends TimeGraphChartLayer {

const mouseMoveHandler = (event: MouseEvent) => {
mousePositionX = event.offsetX;
mousePositionY = event.offsetY;
};

const keyDownHandler = (event: KeyboardEvent) => {
Expand All @@ -112,13 +112,11 @@ export class TimeGraphChart extends TimeGraphChartLayer {
if (triggerKeyEvent) {
if (keyBoardNavs['zoomin'].indexOf(keyPressed) >= 0) {
const zoomPosition = (mousePositionX / this.stateController.zoomFactor);
const deltaLength = -(mousePositionY / this.stateController.zoomFactor);
adjustZoom(zoomPosition, deltaLength);
adjustZoom(zoomPosition, true);

} else if (keyBoardNavs['zoomout'].indexOf(keyPressed) >= 0) {
const zoomPosition = (mousePositionX / this.stateController.zoomFactor);
const deltaLength = (mousePositionY / this.stateController.zoomFactor);
adjustZoom(zoomPosition, deltaLength);
adjustZoom(zoomPosition, false);

} else if (keyBoardNavs['panleft'].indexOf(keyPressed) >= 0) {
moveHorizontally(-horizontalDelta);
Expand All @@ -141,8 +139,8 @@ export class TimeGraphChart extends TimeGraphChartLayer {
const mouseWheelHandler = (ev: WheelEvent) => {
if (ev.ctrlKey) {
const zoomPosition = (ev.offsetX / this.stateController.zoomFactor);
const deltaLength = (ev.deltaY / this.stateController.zoomFactor);
adjustZoom(zoomPosition, deltaLength);
const zoomIn = ev.deltaY < 0;
adjustZoom(zoomPosition, zoomIn);

} else if (ev.shiftKey) {
moveHorizontally(ev.deltaY);
Expand Down

0 comments on commit e8f2d34

Please sign in to comment.