@octanejs/three 0.1.0

package/src/web/events.ts

@@ -0,0 +1,79 @@
+import { flushSync } from 'octane';
+import type { RootState, RootStore } from '../core/store.js';
+import {
+	createEvents,
+	getThreeEventPriority,
+	type DomEvent,
+	type EventManager,
+	type Events,
+} from '../core/events.js';
+
+const DOM_EVENTS = {
+	onClick: ['click', false],
+	onContextMenu: ['contextmenu', false],
+	onDoubleClick: ['dblclick', false],
+	onWheel: ['wheel', true],
+	onPointerDown: ['pointerdown', true],
+	onPointerUp: ['pointerup', true],
+	onPointerLeave: ['pointerleave', true],
+	onPointerMove: ['pointermove', true],
+	onPointerCancel: ['pointercancel', true],
+	onLostPointerCapture: ['lostpointercapture', true],
+} as const;
+
+/** Default R3F-compatible event manager for web canvases. */
+export function createPointerEvents(store: RootStore): EventManager<HTMLElement> {
+	const { handlePointer } = createEvents(store);
+	const handlers = Object.fromEntries(
+		(Object.keys(DOM_EVENTS) as Array<keyof typeof DOM_EVENTS>).map((name) => {
+			const handleEvent = handlePointer(name);
+			return [
+				name,
+				getThreeEventPriority(name) === 'discrete'
+					? (event: Event) => flushSync(() => handleEvent(event))
+					: handleEvent,
+			];
+		}),
+	) as unknown as Events;
+
+	return {
+		priority: 1,
+		enabled: true,
+		compute(event: DomEvent, state: RootState) {
+			state.pointer.set(
+				(event.offsetX / state.size.width) * 2 - 1,
+				-(event.offsetY / state.size.height) * 2 + 1,
+			);
+			state.raycaster.setFromCamera(state.pointer, state.camera);
+		},
+		connected: undefined,
+		handlers,
+		update() {
+			const { events, internal } = store.getState();
+			if (internal.lastEvent.current !== null && events.handlers !== undefined) {
+				events.handlers.onPointerMove(internal.lastEvent.current);
+			}
+		},
+		connect(target) {
+			const { events, set } = store.getState();
+			events.disconnect?.();
+			set((state) => ({ events: { ...state.events, connected: target } }));
+			if (events.handlers === undefined) return;
+			for (const name of Object.keys(DOM_EVENTS) as Array<keyof typeof DOM_EVENTS>) {
+				const [eventName, passive] = DOM_EVENTS[name];
+				target.addEventListener(eventName, events.handlers[name], { passive });
+			}
+		},
+		disconnect() {
+			const { events, set } = store.getState();
+			if (!events.connected) return;
+			if (events.handlers !== undefined) {
+				for (const name of Object.keys(DOM_EVENTS) as Array<keyof typeof DOM_EVENTS>) {
+					const [eventName] = DOM_EVENTS[name];
+					events.connected.removeEventListener(eventName, events.handlers[name]);
+				}
+			}
+			set((state) => ({ events: { ...state.events, connected: undefined } }));
+		},
+	};
+}

package/src/web/measure.ts

@@ -0,0 +1,96 @@
+import type { Size } from '../core/store.js';
+
+export interface ResizeOptions {
+	debounce?: number | { resize: number; scroll: number };
+	scroll?: boolean;
+	polyfill?: ResizeObserverConstructor;
+	offsetSize?: boolean;
+}
+
+export interface ResizeObserverConstructor {
+	new (callback: ResizeObserverCallback): ResizeObserver;
+}
+
+function debounceDelay(options: ResizeOptions, kind: 'resize' | 'scroll'): number {
+	const configured = options.debounce;
+	if (typeof configured === 'number') return configured;
+	return configured?.[kind] ?? 0;
+}
+
+function measuredSize(
+	element: HTMLElement,
+	entry: ResizeObserverEntry | undefined,
+	offsetSize: boolean,
+): Size {
+	const bounds = element.getBoundingClientRect();
+	let width = bounds.width;
+	let height = bounds.height;
+	if (offsetSize) {
+		width = element.offsetWidth;
+		height = element.offsetHeight;
+	} else if (entry !== undefined) {
+		// ResizeObserver callbacks can arrive before layout APIs expose their new
+		// values (and controlled test/browser shims commonly behave this way).
+		// Prefer the element rect, but retain the observer's positive dimensions.
+		if (width <= 0 && entry.contentRect.width > 0) width = entry.contentRect.width;
+		if (height <= 0 && entry.contentRect.height > 0) height = entry.contentRect.height;
+	}
+	return { width, height, top: bounds.top, left: bounds.left };
+}
+
+/**
+ * Observe the DOM box used to configure a Three root.
+ *
+ * The first rect is delivered synchronously; a zero-sized shell remains
+ * dormant until ResizeObserver reports a positive layout.
+ */
+export function observeCanvasSize(
+	element: HTMLElement,
+	options: ResizeOptions,
+	onSize: (size: Size) => void,
+): () => void {
+	let disposed = false;
+	let resizeTimer: ReturnType<typeof setTimeout> | undefined;
+	let scrollTimer: ReturnType<typeof setTimeout> | undefined;
+	const deliver = (entry?: ResizeObserverEntry) => {
+		if (!disposed) onSize(measuredSize(element, entry, options.offsetSize === true));
+	};
+	const schedule = (kind: 'resize' | 'scroll', entry?: ResizeObserverEntry) => {
+		const delay = debounceDelay(options, kind);
+		if (delay <= 0) {
+			deliver(entry);
+			return;
+		}
+		if (kind === 'resize') {
+			if (resizeTimer !== undefined) clearTimeout(resizeTimer);
+			resizeTimer = setTimeout(() => deliver(entry), delay);
+		} else {
+			if (scrollTimer !== undefined) clearTimeout(scrollTimer);
+			scrollTimer = setTimeout(() => deliver(entry), delay);
+		}
+	};
+
+	const Observer = options.polyfill ?? globalThis.ResizeObserver;
+	const observer =
+		typeof Observer === 'function'
+			? new Observer((entries) => schedule('resize', entries[0]))
+			: undefined;
+	observer?.observe(element);
+
+	const handleScroll = () => schedule('scroll');
+	if (options.scroll === true && typeof window !== 'undefined') {
+		window.addEventListener('scroll', handleScroll, true);
+	}
+	deliver();
+
+	return () => {
+		if (disposed) return;
+		disposed = true;
+		if (resizeTimer !== undefined) clearTimeout(resizeTimer);
+		if (scrollTimer !== undefined) clearTimeout(scrollTimer);
+		observer?.disconnect();
+		if (options.scroll === true && typeof window !== 'undefined') {
+			window.removeEventListener('scroll', handleScroll, true);
+		}
+	};
+}