Mission Control Dashboard - Initial implementation
This commit is contained in:
Daniel Arroyo
279
node_modules/framer-motion/dist/es/gestures/pan/PanSession.mjs
generated
vendored
Normal file
279
node_modules/framer-motion/dist/es/gestures/pan/PanSession.mjs
generated
vendored
Normal file
@@ -0,0 +1,279 @@
|
||||
import { frameData, frame, isPrimaryPointer, cancelFrame } from 'motion-dom';
|
||||
import { pipe, secondsToMilliseconds, millisecondsToSeconds } from 'motion-utils';
|
||||
import { addPointerEvent } from '../../events/add-pointer-event.mjs';
|
||||
import { extractEventInfo } from '../../events/event-info.mjs';
|
||||
import { distance2D } from '../../utils/distance.mjs';
|
||||
|
||||
const overflowStyles = /*#__PURE__*/ new Set(["auto", "scroll"]);
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
class PanSession {
|
||||
constructor(event, handlers, { transformPagePoint, contextWindow = window, dragSnapToOrigin = false, distanceThreshold = 3, element, } = {}) {
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
this.startEvent = null;
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
this.lastMoveEvent = null;
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
this.lastMoveEventInfo = null;
|
||||
/**
|
||||
* Raw (untransformed) event info, re-transformed each frame
|
||||
* so transformPagePoint sees the current parent matrix.
|
||||
* @internal
|
||||
*/
|
||||
this.lastRawMoveEventInfo = null;
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
this.handlers = {};
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
this.contextWindow = window;
|
||||
/**
|
||||
* Scroll positions of scrollable ancestors and window.
|
||||
* @internal
|
||||
*/
|
||||
this.scrollPositions = new Map();
|
||||
/**
|
||||
* Cleanup function for scroll listeners.
|
||||
* @internal
|
||||
*/
|
||||
this.removeScrollListeners = null;
|
||||
this.onElementScroll = (event) => {
|
||||
this.handleScroll(event.target);
|
||||
};
|
||||
this.onWindowScroll = () => {
|
||||
this.handleScroll(window);
|
||||
};
|
||||
this.updatePoint = () => {
|
||||
if (!(this.lastMoveEvent && this.lastMoveEventInfo))
|
||||
return;
|
||||
// Re-transform raw point through current transformPagePoint so
|
||||
// animated parent transforms (e.g. rotation) are picked up each frame
|
||||
if (this.lastRawMoveEventInfo) {
|
||||
this.lastMoveEventInfo = transformPoint(this.lastRawMoveEventInfo, this.transformPagePoint);
|
||||
}
|
||||
const info = getPanInfo(this.lastMoveEventInfo, this.history);
|
||||
const isPanStarted = this.startEvent !== null;
|
||||
// Only start panning if the offset is larger than 3 pixels. If we make it
|
||||
// any larger than this we'll want to reset the pointer history
|
||||
// on the first update to avoid visual snapping to the cursor.
|
||||
const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= this.distanceThreshold;
|
||||
if (!isPanStarted && !isDistancePastThreshold)
|
||||
return;
|
||||
const { point } = info;
|
||||
const { timestamp } = frameData;
|
||||
this.history.push({ ...point, timestamp });
|
||||
const { onStart, onMove } = this.handlers;
|
||||
if (!isPanStarted) {
|
||||
onStart && onStart(this.lastMoveEvent, info);
|
||||
this.startEvent = this.lastMoveEvent;
|
||||
}
|
||||
onMove && onMove(this.lastMoveEvent, info);
|
||||
};
|
||||
this.handlePointerMove = (event, info) => {
|
||||
this.lastMoveEvent = event;
|
||||
this.lastRawMoveEventInfo = info;
|
||||
this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
|
||||
// Throttle mouse move event to once per frame
|
||||
frame.update(this.updatePoint, true);
|
||||
};
|
||||
this.handlePointerUp = (event, info) => {
|
||||
this.end();
|
||||
const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;
|
||||
// Resume animation if dragSnapToOrigin is set OR if no drag started (user just clicked)
|
||||
// This ensures constraint animations continue when interrupted by a click
|
||||
if (this.dragSnapToOrigin || !this.startEvent) {
|
||||
resumeAnimation && resumeAnimation();
|
||||
}
|
||||
if (!(this.lastMoveEvent && this.lastMoveEventInfo))
|
||||
return;
|
||||
const panInfo = getPanInfo(event.type === "pointercancel"
|
||||
? this.lastMoveEventInfo
|
||||
: transformPoint(info, this.transformPagePoint), this.history);
|
||||
if (this.startEvent && onEnd) {
|
||||
onEnd(event, panInfo);
|
||||
}
|
||||
onSessionEnd && onSessionEnd(event, panInfo);
|
||||
};
|
||||
// If we have more than one touch, don't start detecting this gesture
|
||||
if (!isPrimaryPointer(event))
|
||||
return;
|
||||
this.dragSnapToOrigin = dragSnapToOrigin;
|
||||
this.handlers = handlers;
|
||||
this.transformPagePoint = transformPagePoint;
|
||||
this.distanceThreshold = distanceThreshold;
|
||||
this.contextWindow = contextWindow || window;
|
||||
const info = extractEventInfo(event);
|
||||
const initialInfo = transformPoint(info, this.transformPagePoint);
|
||||
const { point } = initialInfo;
|
||||
const { timestamp } = frameData;
|
||||
this.history = [{ ...point, timestamp }];
|
||||
const { onSessionStart } = handlers;
|
||||
onSessionStart &&
|
||||
onSessionStart(event, getPanInfo(initialInfo, this.history));
|
||||
this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
|
||||
// Start scroll tracking if element provided
|
||||
if (element) {
|
||||
this.startScrollTracking(element);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Start tracking scroll on ancestors and window.
|
||||
*/
|
||||
startScrollTracking(element) {
|
||||
// Store initial scroll positions for scrollable ancestors
|
||||
let current = element.parentElement;
|
||||
while (current) {
|
||||
const style = getComputedStyle(current);
|
||||
if (overflowStyles.has(style.overflowX) ||
|
||||
overflowStyles.has(style.overflowY)) {
|
||||
this.scrollPositions.set(current, {
|
||||
x: current.scrollLeft,
|
||||
y: current.scrollTop,
|
||||
});
|
||||
}
|
||||
current = current.parentElement;
|
||||
}
|
||||
// Track window scroll
|
||||
this.scrollPositions.set(window, {
|
||||
x: window.scrollX,
|
||||
y: window.scrollY,
|
||||
});
|
||||
// Capture listener catches element scroll events as they bubble
|
||||
window.addEventListener("scroll", this.onElementScroll, {
|
||||
capture: true,
|
||||
});
|
||||
// Direct window scroll listener (window scroll doesn't bubble)
|
||||
window.addEventListener("scroll", this.onWindowScroll);
|
||||
this.removeScrollListeners = () => {
|
||||
window.removeEventListener("scroll", this.onElementScroll, {
|
||||
capture: true,
|
||||
});
|
||||
window.removeEventListener("scroll", this.onWindowScroll);
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Handle scroll compensation during drag.
|
||||
*
|
||||
* For element scroll: adjusts history origin since pageX/pageY doesn't change.
|
||||
* For window scroll: adjusts lastMoveEventInfo since pageX/pageY would change.
|
||||
*/
|
||||
handleScroll(target) {
|
||||
const initial = this.scrollPositions.get(target);
|
||||
if (!initial)
|
||||
return;
|
||||
const isWindow = target === window;
|
||||
const current = isWindow
|
||||
? { x: window.scrollX, y: window.scrollY }
|
||||
: {
|
||||
x: target.scrollLeft,
|
||||
y: target.scrollTop,
|
||||
};
|
||||
const delta = { x: current.x - initial.x, y: current.y - initial.y };
|
||||
if (delta.x === 0 && delta.y === 0)
|
||||
return;
|
||||
if (isWindow) {
|
||||
// Window scroll: pageX/pageY changes, so update lastMoveEventInfo
|
||||
if (this.lastMoveEventInfo) {
|
||||
this.lastMoveEventInfo.point.x += delta.x;
|
||||
this.lastMoveEventInfo.point.y += delta.y;
|
||||
}
|
||||
}
|
||||
else {
|
||||
// Element scroll: pageX/pageY unchanged, so adjust history origin
|
||||
if (this.history.length > 0) {
|
||||
this.history[0].x -= delta.x;
|
||||
this.history[0].y -= delta.y;
|
||||
}
|
||||
}
|
||||
this.scrollPositions.set(target, current);
|
||||
frame.update(this.updatePoint, true);
|
||||
}
|
||||
updateHandlers(handlers) {
|
||||
this.handlers = handlers;
|
||||
}
|
||||
end() {
|
||||
this.removeListeners && this.removeListeners();
|
||||
this.removeScrollListeners && this.removeScrollListeners();
|
||||
this.scrollPositions.clear();
|
||||
cancelFrame(this.updatePoint);
|
||||
}
|
||||
}
|
||||
function transformPoint(info, transformPagePoint) {
|
||||
return transformPagePoint ? { point: transformPagePoint(info.point) } : info;
|
||||
}
|
||||
function subtractPoint(a, b) {
|
||||
return { x: a.x - b.x, y: a.y - b.y };
|
||||
}
|
||||
function getPanInfo({ point }, history) {
|
||||
return {
|
||||
point,
|
||||
delta: subtractPoint(point, lastDevicePoint(history)),
|
||||
offset: subtractPoint(point, startDevicePoint(history)),
|
||||
velocity: getVelocity(history, 0.1),
|
||||
};
|
||||
}
|
||||
function startDevicePoint(history) {
|
||||
return history[0];
|
||||
}
|
||||
function lastDevicePoint(history) {
|
||||
return history[history.length - 1];
|
||||
}
|
||||
function getVelocity(history, timeDelta) {
|
||||
if (history.length < 2) {
|
||||
return { x: 0, y: 0 };
|
||||
}
|
||||
let i = history.length - 1;
|
||||
let timestampedPoint = null;
|
||||
const lastPoint = lastDevicePoint(history);
|
||||
while (i >= 0) {
|
||||
timestampedPoint = history[i];
|
||||
if (lastPoint.timestamp - timestampedPoint.timestamp >
|
||||
secondsToMilliseconds(timeDelta)) {
|
||||
break;
|
||||
}
|
||||
i--;
|
||||
}
|
||||
if (!timestampedPoint) {
|
||||
return { x: 0, y: 0 };
|
||||
}
|
||||
/**
|
||||
* If the selected point is the pointer-down origin (history[0]),
|
||||
* there are better movement points available, and the time gap
|
||||
* is suspiciously large (>2x timeDelta), use the next point instead.
|
||||
* This prevents stale pointer-down points from diluting velocity
|
||||
* in hold-then-flick gestures.
|
||||
*/
|
||||
if (timestampedPoint === history[0] &&
|
||||
history.length > 2 &&
|
||||
lastPoint.timestamp - timestampedPoint.timestamp >
|
||||
secondsToMilliseconds(timeDelta) * 2) {
|
||||
timestampedPoint = history[1];
|
||||
}
|
||||
const time = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);
|
||||
if (time === 0) {
|
||||
return { x: 0, y: 0 };
|
||||
}
|
||||
const currentVelocity = {
|
||||
x: (lastPoint.x - timestampedPoint.x) / time,
|
||||
y: (lastPoint.y - timestampedPoint.y) / time,
|
||||
};
|
||||
if (currentVelocity.x === Infinity) {
|
||||
currentVelocity.x = 0;
|
||||
}
|
||||
if (currentVelocity.y === Infinity) {
|
||||
currentVelocity.y = 0;
|
||||
}
|
||||
return currentVelocity;
|
||||
}
|
||||
|
||||
export { PanSession };
|
||||
//# sourceMappingURL=PanSession.mjs.map
|
||||
Reference in New Issue
Block a user