microboard-ui-temp 0.0.3

package/src/App/Wheel/WheelEventLogger.ts

@@ -0,0 +1,70 @@
+import { ChromeWheelEvent } from "./Wheel";
+
+export type LogEntryType = {
+	deltaX: number;
+	deltaY: number;
+	deltaZ: number;
+	wheelDeltaX?: number;
+	wheelDeltaY?: number;
+	deltaMode: number;
+	userAgent: string;
+	devicePixelRatio: number;
+	platform: string;
+	isCtrlKey: boolean;
+	isShiftKey: boolean;
+	timestamp: number;
+};
+
+export class WheelEventLogger {
+	private setEvents: React.Dispatch<React.SetStateAction<any[]>>;
+	private setMousePosition: React.Dispatch<
+		React.SetStateAction<{ x: number; y: number }>
+	>;
+
+	constructor(
+		setEvents: React.Dispatch<React.SetStateAction<any[]>>,
+		setMousePosition: React.Dispatch<
+			React.SetStateAction<{ x: number; y: number }>
+		>,
+	) {
+		this.setEvents = setEvents;
+		this.setMousePosition = setMousePosition;
+		this.init();
+	}
+
+	private init(): void {
+		window.addEventListener("wheel", this.logEvent, {
+			capture: true,
+		});
+		window.addEventListener("mousemove", this.updateMousePosition, {
+			capture: true,
+		});
+	}
+
+	private logEvent = (event: ChromeWheelEvent): void => {
+		const logEntry: LogEntryType = {
+			deltaX: event.deltaX,
+			deltaY: event.deltaY,
+			deltaZ: event.deltaZ,
+			wheelDeltaX: event.wheelDeltaX,
+			wheelDeltaY: event.wheelDeltaY,
+			deltaMode: event.deltaMode,
+			userAgent: navigator.userAgent,
+			devicePixelRatio: window.devicePixelRatio,
+			platform: navigator.platform,
+			isCtrlKey: event.ctrlKey || event.metaKey,
+			isShiftKey: event.shiftKey,
+			timestamp: Date.now(),
+		};
+		this.setEvents(prev => [logEntry, ...prev]);
+	};
+
+	private updateMousePosition = (event: MouseEvent): void => {
+		this.setMousePosition({ x: event.clientX, y: event.clientY });
+	};
+
+	cleanup(): void {
+		window.removeEventListener("wheel", this.logEvent);
+		window.removeEventListener("mousemove", this.updateMousePosition);
+	}
+}

package/src/App/Wheel/WheelEvents.spec.ts

@@ -0,0 +1,418 @@
+import { mockWheelData } from "./mockedWheelData";
+import { ChromeWheelEvent, createWheel } from "./Wheel";
+
+describe("WheelEventLogger", () => {
+	const testCases = [
+		{
+			system: "linux",
+			type: "pan",
+			browsers: "chrome",
+			speed: "slow",
+		},
+		{
+			system: "linux",
+			type: "pan",
+			browsers: "chrome",
+			speed: "fast",
+		},
+		{
+			system: "linux",
+			type: "pan",
+			browsers: "firefox",
+			speed: "slow",
+		},
+		{
+			system: "linux",
+			type: "pan",
+			browsers: "firefox",
+			speed: "fast",
+		},
+		{
+			system: "linux",
+			type: "mouse",
+			browsers: "chrome",
+			speed: "slow",
+		},
+		{
+			system: "linux",
+			type: "mouse",
+			browsers: "chrome",
+			speed: "fast",
+		},
+		{
+			system: "linux",
+			type: "mouse",
+			browsers: "firefox",
+			speed: "slow",
+		},
+		{
+			system: "linux",
+			type: "mouse",
+			browsers: "firefox",
+			speed: "fast",
+		},
+		{
+			system: "windows",
+			type: "pan",
+			browsers: "chrome",
+			speed: "slow",
+		},
+		{
+			system: "windows",
+			type: "pan",
+			browsers: "chrome",
+			speed: "fast",
+		},
+		{
+			system: "windows",
+			type: "pan",
+			browsers: "chrome",
+			speed: "default",
+		},
+		{
+			system: "windows",
+			type: "pan",
+			browsers: "firefox",
+			speed: "slow",
+		},
+		{
+			system: "windows",
+			type: "pan",
+			browsers: "firefox",
+			speed: "fast",
+		},
+		{
+			system: "windows",
+			type: "pan",
+			browsers: "firefox",
+			speed: "default",
+		},
+		{
+			system: "windows",
+			type: "pinch",
+			browsers: "chrome",
+			speed: "slow",
+		},
+		{
+			system: "windows",
+			type: "pinch",
+			browsers: "chrome",
+			speed: "fast",
+		},
+		{
+			system: "windows",
+			type: "pinch",
+			browsers: "chrome",
+			speed: "fastFailed",
+		},
+		{
+			system: "windows",
+			type: "pinch",
+			browsers: "chrome",
+			speed: "default",
+		},
+		{
+			system: "windows",
+			type: "pinch",
+			browsers: "chrome",
+			speed: "defaultFailed",
+		},
+		{
+			system: "windows",
+			type: "pinch",
+			browsers: "firefox",
+			speed: "slow",
+		},
+		{
+			system: "windows",
+			type: "pinch",
+			browsers: "firefox",
+			speed: "fast",
+		},
+		{
+			system: "windows",
+			type: "pinch",
+			browsers: "firefox",
+			speed: "default",
+		},
+		{
+			system: "windows",
+			type: "mouse",
+			browsers: "chrome",
+			speed: "slow",
+		},
+		{
+			system: "windows",
+			type: "mouse",
+			browsers: "chrome",
+			speed: "fast",
+		},
+		{
+			system: "windows",
+			type: "mouse",
+			browsers: "chrome",
+			speed: "default",
+		},
+		{
+			system: "windows",
+			type: "mouse",
+			browsers: "firefox",
+			speed: "slow",
+		},
+		{
+			system: "windows",
+			type: "mouse",
+			browsers: "firefox",
+			speed: "fast",
+		},
+		{
+			system: "windows",
+			type: "mouse",
+			browsers: "firefox",
+			speed: "default",
+		},
+		{
+			system: "windows",
+			type: "mouse",
+			browsers: "firefox",
+			speed: "defaultFailed",
+		},
+		{
+			system: "mac",
+			type: "pan",
+			browsers: "chrome",
+			speed: "slow",
+		},
+		{
+			system: "mac",
+			type: "pan",
+			browsers: "chrome",
+			speed: "fast",
+		},
+		{
+			system: "mac",
+			type: "pan",
+			browsers: "chrome",
+			speed: "default",
+		},
+		{
+			system: "mac",
+			type: "pan",
+			browsers: "firefox",
+			speed: "slow",
+		},
+		{
+			system: "mac",
+			type: "pan",
+			browsers: "firefox",
+			speed: "fast",
+		},
+		{
+			system: "mac",
+			type: "pan",
+			browsers: "firefox",
+			speed: "default",
+		},
+		{
+			system: "mac",
+			type: "pan",
+			browsers: "safari",
+			speed: "slow",
+		},
+		{
+			system: "mac",
+			type: "pan",
+			browsers: "safari",
+			speed: "fast",
+		},
+		{
+			system: "mac",
+			type: "pan",
+			browsers: "safari",
+			speed: "default",
+		},
+		{
+			system: "mac",
+			type: "pinch",
+			browsers: "chrome",
+			speed: "default",
+		},
+		{
+			system: "mac",
+			type: "pinch",
+			browsers: "firefox",
+			speed: "default",
+		},
+		{
+			system: "mac",
+			type: "pinch",
+			browsers: "safari",
+			speed: "default",
+		},
+		{
+			system: "mac",
+			type: "mousePan",
+			browsers: "chrome",
+			speed: "slow",
+		},
+		{
+			system: "mac",
+			type: "mousePan",
+			browsers: "chrome",
+			speed: "fast",
+		},
+		{
+			system: "mac",
+			type: "mousePan",
+			browsers: "chrome",
+			speed: "default",
+		},
+		{
+			system: "mac",
+			type: "mousePan",
+			browsers: "firefox",
+			speed: "slow",
+		},
+		{
+			system: "mac",
+			type: "mousePan",
+			browsers: "firefox",
+			speed: "fast",
+		},
+		{
+			system: "mac",
+			type: "mousePan",
+			browsers: "firefox",
+			speed: "default",
+		},
+		{
+			system: "mac",
+			type: "mousePan",
+			browsers: "safari",
+			speed: "slow",
+		},
+		{
+			system: "mac",
+			type: "mousePan",
+			browsers: "safari",
+			speed: "fast",
+		},
+		{
+			system: "mac",
+			type: "mousePan",
+			browsers: "safari",
+			speed: "default",
+		},
+		{
+			system: "mac",
+			type: "mousePinch",
+			browsers: "chrome",
+			speed: "slow",
+		},
+		{
+			system: "mac",
+			type: "mousePinch",
+			browsers: "chrome",
+			speed: "fast",
+		},
+		{
+			system: "mac",
+			type: "mousePinch",
+			browsers: "chrome",
+			speed: "fastFailed",
+		},
+		{
+			system: "mac",
+			type: "mousePinch",
+			browsers: "chrome",
+			speed: "default",
+		},
+		{
+			system: "mac",
+			type: "mousePinch",
+			browsers: "firefox",
+			speed: "slow",
+		},
+		{
+			system: "mac",
+			type: "mousePinch",
+			browsers: "firefox",
+			speed: "fast",
+		},
+		{
+			system: "mac",
+			type: "mousePinch",
+			browsers: "firefox",
+			speed: "default",
+		},
+		{
+			system: "mac",
+			type: "mousePinch",
+			browsers: "safari",
+			speed: "slow",
+		},
+		{
+			system: "mac",
+			type: "mousePinch",
+			browsers: "safari",
+			speed: "slowFailed",
+		},
+		{
+			system: "mac",
+			type: "mousePinch",
+			browsers: "safari",
+			speed: "fast",
+		},
+		{
+			system: "mac",
+			type: "mousePinch",
+			browsers: "safari",
+			speed: "fastFailed",
+		},
+		{
+			system: "mac",
+			type: "mousePinch",
+			browsers: "safari",
+			speed: "default",
+		},
+	];
+
+	function runWheelTest(
+		type: string,
+		browser: string,
+		system: string,
+		speed: string,
+	): void {
+		test(`${speed} ${type} on ${system} ${browser}`, () => {
+			mockWheelData[system][type][browser][speed].forEach(event => {
+				const wheel = createWheel({
+					event,
+					ctrlKey: event.isCtrlKey,
+				} as unknown as ChromeWheelEvent);
+
+				const isMouseWheel = wheel.isProbablyMouseWheel();
+				const isTouchpadPinch = wheel.isTouchpadPinch();
+				const isTouchpad = !(isMouseWheel && isTouchpadPinch);
+				const isPinch =
+					type === "mouse" || type === "mousePinch"
+						? isMouseWheel && isTouchpadPinch
+						: isTouchpadPinch;
+
+				const expected =
+					type === "pinch" || type === "mousePinch"
+						? isPinch
+						: isTouchpad;
+
+				if (!expected) {
+					console.error(`❌ Test failed! Event:`, event);
+				}
+
+				expect(expected).toBe(true);
+			});
+		});
+	}
+
+	testCases.forEach(({ system, type, browsers, speed }) => {
+		runWheelTest(type, browsers, system, speed);
+	});
+});

package/src/App/Wheel/index.ts

@@ -0,0 +1 @@
+export * from "./Wheel";