Skip to content

Commit

Permalink
Migrate to pointer events
Browse files Browse the repository at this point in the history
  • Loading branch information
@theodorejb
theodorejb committed Nov 8, 2023
1 parent 7bcc4f5 commit 86ab55a
Showing 1 changed file with 76 additions and 70 deletions.
146 changes: 76 additions & 70 deletions croppie.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,10 +390,8 @@ export class Croppie {
}

#initDraggable() {
var isDragging = false,
originalX,
originalY,
originalDistance,
var originalX = 0,
originalY = 0,
vpRect,
transform;

Expand All @@ -416,59 +414,95 @@ export class Croppie {
this.elements.boundary.setAttribute('aria-dropeffect', isDragging ? 'move': 'none');
};

let mouseMove = (ev) => {
ev.preventDefault();
var pageX = ev.pageX,
pageY = ev.pageY;

if (ev.touches) {
var touches = ev.touches[0];
pageX = touches.pageX;
pageY = touches.pageY;
}

var deltaX = pageX - originalX,
deltaY = pageY - originalY;
/**
* @type {PointerEvent[]}
*/
let pEventCache = [];
let origPinchDistance = 0;

if (ev.type === 'touchmove') {
if (ev.touches.length > 1) {
var touch1 = ev.touches[0];
var touch2 = ev.touches[1];
var dist = Math.sqrt((touch1.pageX - touch2.pageX) * (touch1.pageX - touch2.pageX) + (touch1.pageY - touch2.pageY) * (touch1.pageY - touch2.pageY));
/**
* @param {PointerEvent} ev
*/
let pointerMove = (ev) => {
ev.preventDefault();

if (!originalDistance) {
originalDistance = dist / this._currentZoom;
}
// update cached event
const cacheIndex = pEventCache.findIndex((cEv) => cEv.pointerId === ev.pointerId);
pEventCache[cacheIndex] = ev;

var scale = dist / originalDistance;
if (pEventCache.length === 2) {
let touch1 = pEventCache[0];
let touch2 = pEventCache[1];
let dist = Math.sqrt((touch1.pageX - touch2.pageX) * (touch1.pageX - touch2.pageX) + (touch1.pageY - touch2.pageY) * (touch1.pageY - touch2.pageY));

this.setZoom(scale);
return;
if (origPinchDistance === 0) {
origPinchDistance = dist / this._currentZoom;
}

this.setZoom(dist / origPinchDistance);
return;
} else if (origPinchDistance !== 0) {
return; // ignore single pointer movement after pinch zoom
}

let deltaX = ev.pageX - originalX;
let deltaY = ev.pageY - originalY;
assignTransformCoordinates(deltaX, deltaY);

css(this.elements.preview, {
transform: transform.toString(),
});

this.#updateOverlay();
originalY = pageY;
originalX = pageX;
originalX = ev.pageX;
originalY = ev.pageY;
};

let mouseUp = () => {
isDragging = false;
toggleGrabState(isDragging);
window.removeEventListener('mousemove', mouseMove);
window.removeEventListener('touchmove', mouseMove);
window.removeEventListener('mouseup', mouseUp);
window.removeEventListener('touchend', mouseUp);
document.body.style.userSelect = '';
this.#updateCenterPoint();
originalDistance = 0;
}
/**
* @param {PointerEvent} ev
*/
let pointerUp = (ev) => {
const cacheIndex = pEventCache.findIndex((cEv) => cEv.pointerId === ev.pointerId);
pEventCache.splice(cacheIndex, 1);
this.elements.overlay.releasePointerCapture(ev.pointerId);

if (pEventCache.length === 0) {
this.elements.overlay.removeEventListener('pointermove', pointerMove);
this.elements.overlay.removeEventListener('pointerup', pointerUp);
this.elements.overlay.removeEventListener('pointercancel', pointerUp);

toggleGrabState(false);
this.#updateCenterPoint();
origPinchDistance = 0;
}
};

/**
* @param {PointerEvent} ev
*/
let pointerDown = (ev) => {
if (ev.button) {
return; // non-left mouse button press
}

ev.preventDefault();
pEventCache.push(ev);
this.elements.overlay.setPointerCapture(ev.pointerId);

if (pEventCache.length > 1) {
return; // ignore additional pointers
}

originalX = ev.pageX;
originalY = ev.pageY;
toggleGrabState(true);
transform = Transform.parse(this.elements.preview);
vpRect = this.elements.viewport.getBoundingClientRect();

this.elements.overlay.addEventListener('pointermove', pointerMove);
this.elements.overlay.addEventListener('pointerup', pointerUp);
this.elements.overlay.addEventListener('pointercancel', pointerUp);
};

/**
* @param {KeyboardEvent} ev
Expand All @@ -488,7 +522,6 @@ export class Croppie {
let [deltaX, deltaY] = getMovement(ev.key);

transform = Transform.parse(this.elements.preview);
document.body.style.userSelect = 'none';
vpRect = this.elements.viewport.getBoundingClientRect();
assignTransformCoordinates(deltaX, deltaY);

Expand All @@ -497,9 +530,7 @@ export class Croppie {
});

this.#updateOverlay();
document.body.style.userSelect = '';
this.#updateCenterPoint();
originalDistance = 0;
}

function getMovement(key) {
Expand All @@ -515,34 +546,9 @@ export class Croppie {
}
};

let mouseDown = (ev) => {
if (ev.button !== undefined && ev.button !== 0) return;

ev.preventDefault();
if (isDragging) return;
isDragging = true;
originalX = ev.pageX;
originalY = ev.pageY;

if (ev.touches) {
var touches = ev.touches[0];
originalX = touches.pageX;
originalY = touches.pageY;
}
toggleGrabState(isDragging);
transform = Transform.parse(this.elements.preview);
window.addEventListener('mousemove', mouseMove);
window.addEventListener('touchmove', mouseMove);
window.addEventListener('mouseup', mouseUp);
window.addEventListener('touchend', mouseUp);
document.body.style.userSelect = 'none';
vpRect = this.elements.viewport.getBoundingClientRect();
};

this.elements.overlay.addEventListener('mousedown', mouseDown);
this.elements.overlay.addEventListener('pointerdown', pointerDown);
document.addEventListener('keydown', keyDown);
this.keyDownHandler = keyDown;
this.elements.overlay.addEventListener('touchstart', mouseDown);
}

#initializeZoom() {
Expand Down

0 comments on commit 86ab55a

Please sign in to comment.