ryan/squoosh
1
0
Fork 0
forked from external-repos/squoosh
Code Pull Requests Activity

Center the image canvas in PinchZoom (#170)

Browse Source 
* Center the image canvas in PinchZoom

* Fixing pinch zoom
This commit is contained in:
Ewa
2018-10-01 14:57:26 +02:00
committed by Jake Archibald
parent cfd42818b7
commit 059c80c05d
2 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Output/custom-els/PinchZoom/index.ts
View File

@@ -288,9 +288,10 @@ export default class PinchZoom extends HTMLElement {
} }
private _onWheel(event: WheelEvent) { private _onWheel(event: WheelEvent) {
if (!this._positioningEl) return;
event.preventDefault(); event.preventDefault();
const thisRect = this.getBoundingClientRect(); const currentRect = this._positioningEl.getBoundingClientRect();
let { deltaY } = event; let { deltaY } = event;
const { ctrlKey, deltaMode } = event; const { ctrlKey, deltaMode } = event;
@@ -305,23 +306,25 @@ export default class PinchZoom extends HTMLElement {
this._applyChange({ this._applyChange({
scaleDiff, scaleDiff,
originX: event.clientX - thisRect.left, originX: event.clientX - currentRect.left,
originY: event.clientY - thisRect.top, originY: event.clientY - currentRect.top,
allowChangeEvent: true, allowChangeEvent: true,
}); });
} }
private _onPointerMove(previousPointers: Pointer[], currentPointers: Pointer[]) { private _onPointerMove(previousPointers: Pointer[], currentPointers: Pointer[]) {
if (!this._positioningEl) return;
// Combine next points with previous points // Combine next points with previous points
const thisRect = this.getBoundingClientRect(); const currentRect = this._positioningEl.getBoundingClientRect();
// For calculating panning movement // For calculating panning movement
const prevMidpoint = getMidpoint(previousPointers[0], previousPointers[1]); const prevMidpoint = getMidpoint(previousPointers[0], previousPointers[1]);
const newMidpoint = getMidpoint(currentPointers[0], currentPointers[1]); const newMidpoint = getMidpoint(currentPointers[0], currentPointers[1]);
// Midpoint within the element // Midpoint within the element
const originX = prevMidpoint.clientX - thisRect.left; const originX = prevMidpoint.clientX - currentRect.left;
const originY = prevMidpoint.clientY - thisRect.top; const originY = prevMidpoint.clientY - currentRect.top;
// Calculate the desired change in scale // Calculate the desired change in scale
const prevDistance = getDistance(previousPointers[0], previousPointers[1]); const prevDistance = getDistance(previousPointers[0], previousPointers[1]);
@@ -350,10 +353,12 @@ export default class PinchZoom extends HTMLElement {
.translate(panX, panY) .translate(panX, panY)
// Scale about the origin. // Scale about the origin.
.translate(originX, originY) .translate(originX, originY)
// Apply current translate
.translate(this.x, this.y)
.scale(scaleDiff) .scale(scaleDiff)
.translate(-originX, -originY) .translate(-originX, -originY)
// Apply current transform. // Apply current scale.
.multiply(this._transform); .scale(this.scale);
// Convert the transform into basic translate & scale. // Convert the transform into basic translate & scale.
this.setTransform({ this.setTransform({

3
src/components/Output/style.scss
View File

@@ -34,6 +34,9 @@ Note: These styles are temporary. They will be replaced before going live.
> pinch-zoom { > pinch-zoom {
@extend %fill; @extend %fill;
outline: none; outline: none;
display: flex;
justify-content: center;
align-items: center;
} }
} }
} }