@octanejs/drei 0.0.1

package/src/web/ScrollControls.three.tsrx

@@ -0,0 +1,120 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type DomEvent, type RootState, type ThreeRef, useFrame, useStore, useThree } from '@octanejs/three';
+import { type RefObject, useEffect, useImperativeHandle, useMemo, useRef, useState } from '@octanejs/three/renderer';
+import { createContext, type OctaneNode, useContext } from 'octane';
+import { easing } from 'maath';
+import * as THREE from 'three';
+import { mountScrollHtml, setScrollControlsStateProvider } from './scroll-html-root.tsrx';
+
+export type ScrollControlsProps = {
+	eps?: number; horizontal?: boolean; infinite?: boolean; pages?: number; distance?: number;
+	damping?: number; maxSpeed?: number; prepend?: boolean; enabled?: boolean;
+	style?: Partial<CSSStyleDeclaration>; children: OctaneNode;
+};
+
+export type ScrollControlsState = {
+	el: HTMLDivElement; eps: number; fill: HTMLDivElement; fixed: HTMLDivElement;
+	horizontal: boolean | undefined; damping: number; offset: number; delta: number; pages: number;
+	range(from: number, distance: number, margin?: number): number;
+	curve(from: number, distance: number, margin?: number): number;
+	visible(from: number, distance: number, margin?: number): boolean;
+};
+
+const context = createContext<ScrollControlsState>(null as unknown as ScrollControlsState);
+setScrollControlsStateProvider(context.Provider);
+export function useScroll(): ScrollControlsState { return useContext(context); }
+
+export function ScrollControls({ eps = 0.00001, enabled = true, infinite, horizontal, pages = 1,
+	distance = 1, damping = 0.25, maxSpeed = Infinity, prepend = false, style = {}, children }: ScrollControlsProps) @{
+	const rootState = useThree();
+	const { get, setEvents, gl, size, invalidate, events } = rootState;
+	const [el] = useState(() => document.createElement('div'));
+	const [fill] = useState(() => document.createElement('div'));
+	const [fixed] = useState(() => document.createElement('div'));
+	const target = (gl as unknown as THREE.WebGLRenderer).domElement.parentNode as HTMLElement;
+	const scroll = useRef(0);
+	const state = useMemo<ScrollControlsState & { scroll: RefObject<number> }>(() => ({
+		el, eps, fill, fixed, horizontal, damping, offset: 0, delta: 0, scroll, pages,
+		range(from, rangeDistance, margin = 0) { const start = from - margin; const end = start + rangeDistance + margin * 2; return this.offset < start ? 0 : this.offset > end ? 1 : (this.offset - start) / (end - start); },
+		curve(from, rangeDistance, margin = 0) { return Math.sin(this.range(from, rangeDistance, margin) * Math.PI); },
+		visible(from, rangeDistance, margin = 0) { const start = from - margin; const end = start + rangeDistance + margin * 2; return this.offset >= start && this.offset <= end; },
+	}), [eps, damping, horizontal, pages]);
+
+	useEffect(() => {
+		el.style.position = 'absolute'; el.style.width = '100%'; el.style.height = '100%';
+		el.style[horizontal ? 'overflowX' : 'overflowY'] = 'auto';
+		el.style[horizontal ? 'overflowY' : 'overflowX'] = 'hidden';
+		el.style.top = '0px'; el.style.left = '0px';
+		for (const key in style) (el.style as any)[key] = (style as any)[key];
+		fixed.style.position = 'sticky'; fixed.style.top = '0px'; fixed.style.left = '0px';
+		fixed.style.width = '100%'; fixed.style.height = '100%'; fixed.style.overflow = 'hidden'; el.appendChild(fixed);
+		fill.style.height = horizontal ? '100%' : `${pages * distance * 100}%`;
+		fill.style.width = horizontal ? `${pages * distance * 100}%` : '100%'; fill.style.pointerEvents = 'none'; el.appendChild(fill);
+		if (prepend) target.prepend(el); else target.appendChild(el);
+		el[horizontal ? 'scrollLeft' : 'scrollTop'] = 1;
+		const oldTarget = (events.connected || (gl as unknown as THREE.WebGLRenderer).domElement) as HTMLElement;
+		requestAnimationFrame(() => events.connect?.(el));
+		const oldCompute = get().events.compute;
+		setEvents({ compute(event: DomEvent, current: RootState) {
+			const { left, top } = target.getBoundingClientRect();
+			current.pointer.set(((event.clientX - left) / current.size.width) * 2 - 1, -((event.clientY - top) / current.size.height) * 2 + 1);
+			current.raycaster.setFromCamera(current.pointer, current.camera);
+		} });
+		return () => { target.removeChild(el); setEvents({ compute: oldCompute }); events.connect?.(oldTarget); };
+	}, [pages, distance, horizontal, el, fill, fixed, target]);
+
+	useEffect(() => {
+		if (events.connected !== el) return;
+		const containerLength = size[horizontal ? 'width' : 'height'];
+		const scrollLength = el[horizontal ? 'scrollWidth' : 'scrollHeight'];
+		const threshold = scrollLength - containerLength;
+		let disableScroll = true; let firstRun = true;
+		const onScroll = () => {
+			if (!enabled || firstRun) return;
+			invalidate(); const current = el[horizontal ? 'scrollLeft' : 'scrollTop']; scroll.current = current / threshold;
+			if (infinite) {
+				if (!disableScroll) {
+					if (current >= threshold) { const damp = 1 - state.offset; el[horizontal ? 'scrollLeft' : 'scrollTop'] = 1; scroll.current = state.offset = -damp; disableScroll = true; }
+					else if (current <= 0) { const damp = 1 + state.offset; el[horizontal ? 'scrollLeft' : 'scrollTop'] = scrollLength; scroll.current = state.offset = damp; disableScroll = true; }
+				}
+				if (disableScroll) setTimeout(() => (disableScroll = false), 40);
+			}
+		};
+		el.addEventListener('scroll', onScroll, { passive: true });
+		requestAnimationFrame(() => (firstRun = false));
+		const onWheel = (event: WheelEvent) => { el.scrollLeft += event.deltaY / 2; };
+		if (horizontal) el.addEventListener('wheel', onWheel, { passive: true });
+		return () => { el.removeEventListener('scroll', onScroll); if (horizontal) el.removeEventListener('wheel', onWheel); };
+	}, [el, events, size, infinite, state, invalidate, horizontal, enabled]);
+
+	let last = 0;
+	useFrame((_, delta) => { last = state.offset; easing.damp(state, 'offset', scroll.current, damping, delta, maxSpeed, undefined, eps); easing.damp(state, 'delta', Math.abs(last - state.offset), damping, delta, maxSpeed, undefined, eps); if (state.delta > eps) invalidate(); });
+	<context.Provider value={state}>{children}</context.Provider>
+}
+
+export type ScrollProps = { children?: OctaneNode; html?: false; style?: never } | { children?: OctaneNode; html: true; style?: Partial<CSSStyleDeclaration>; [key: string]: unknown };
+
+function ScrollCanvas({ children, ref }: ScrollProps & { ref?: ThreeRef<THREE.Group> }) @{
+	const group = useRef<THREE.Group | null>(null); useImperativeHandle((ref ?? null) as any, () => group.current!, []);
+	const state = useScroll(); const { width, height } = useThree((value) => value.viewport);
+	useFrame(() => { if (group.current) { group.current.position.x = state.horizontal ? -width * (state.pages - 1) * state.offset : 0; group.current.position.y = state.horizontal ? 0 : height * (state.pages - 1) * state.offset; } });
+	<group ref={group}>{children}</group>
+}
+
+function ScrollHtml({ children, style, ref, ...props }: Extract<ScrollProps, { html: true }> & { ref?: ThreeRef<HTMLDivElement> }) @{
+	const state = useScroll(); const [group] = useState(() => document.createElement('div')); const fiberState = useStore();
+	const { width, height } = useThree((value) => value.size);
+	useImperativeHandle((ref ?? null) as any, () => group, [group]);
+	useEffect(() => {
+		Object.assign(group.style, style, { position: 'absolute', top: '0px', left: '0px', willChange: 'transform' });
+		for (const [key, value] of Object.entries(props)) if (value != null) group.setAttribute(key, String(value));
+		state.fixed.appendChild(group);
+		const unmount = mountScrollHtml(group, { state, fiberState, children });
+		return () => { unmount(); group.remove(); };
+	}, [state.fixed]);
+	useFrame(() => { if (state.delta > state.eps) group.style.transform = `translate3d(${state.horizontal ? -width * (state.pages - 1) * state.offset : 0}px,${state.horizontal ? 0 : height * (state.pages - 1) * -state.offset}px,0)`; });
+}
+
+export function Scroll({ html, ref, ...props }: ScrollProps & { ref?: ThreeRef<THREE.Group & HTMLDivElement> }) @{
+	<>{html ? <ScrollHtml ref={ref as any} {...props as any} /> : <ScrollCanvas ref={ref as any} {...props as any} />}</>
+}

package/src/web/Select.three.tsrx

@@ -0,0 +1,155 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ThreeElements, useThree } from '@octanejs/three';
+import { useCallback, useEffect, useReducer, useRef, useState } from '@octanejs/three/renderer';
+import { createContext, useContext } from 'octane';
+import * as THREE from 'three';
+import { SelectionBox } from 'three-stdlib';
+import { shallow } from '@octanejs/zustand/shallow';
+
+const SelectionContext = createContext<THREE.Object3D[]>([]);
+
+export type SelectProps =
+	Omit<ThreeElements['group'], 'ref'> & {
+		multiple?: boolean;
+		box?: boolean;
+		border?: string;
+		backgroundColor?: string;
+		onChange?: (selected: THREE.Object3D[]) => void;
+		onChangePointerUp?: (selected: THREE.Object3D[]) => void;
+		filter?: (selected: THREE.Object3D[]) => THREE.Object3D[];
+	};
+
+type Action = { object?: THREE.Object3D | THREE.Object3D[]; shift?: boolean };
+
+export function Select({
+	box,
+	multiple,
+	children,
+	onChange,
+	onChangePointerUp,
+	border = '1px solid #55aaff',
+	backgroundColor = 'rgba(75, 160, 255, 0.1)',
+	filter: customFilter = (item) => item,
+	...props
+}: SelectProps) @{
+	const [downed, down] = useState(false);
+	const { setEvents, camera, raycaster, gl, controls, size, get } = useThree();
+	const [hovered, hover] = useState(false);
+	const [active, dispatch] = useReducer((state: THREE.Object3D[], { object, shift }: Action) => {
+		if (object === undefined) return [];
+		if (Array.isArray(object)) return object;
+		if (!shift) return state[0] === object ? [] : [object];
+		if (state.includes(object)) return state.filter((entry) => entry !== object);
+		return [object, ...state];
+	}, [] as THREE.Object3D[]);
+	useEffect(() => {
+		if (downed) onChange?.(active);
+		else onChangePointerUp?.(active);
+	}, [active, downed]);
+	const onClick = useCallback((event: any) => {
+		event.stopPropagation();
+		dispatch({ object: customFilter([event.object])[0], shift: multiple && event.shiftKey });
+	}, []);
+	const onPointerMissed = useCallback(() => {
+		if (!hovered) dispatch({});
+	}, [hovered]);
+	const ref = useRef<THREE.Group | null>(null);
+	useEffect(() => {
+		if (!box || !multiple || !ref.current) return;
+		const Selection = SelectionBox as unknown as new (camera: THREE.Camera, scene: THREE.Scene) => SelectionBox;
+		const selectionBox = new Selection(camera, ref.current as unknown as THREE.Scene);
+		const element = document.createElement('div');
+		element.style.pointerEvents = 'none';
+		element.style.border = border;
+		element.style.backgroundColor = backgroundColor;
+		element.style.position = 'fixed';
+		const startPoint = new THREE.Vector2();
+		const pointTopLeft = new THREE.Vector2();
+		const pointBottomRight = new THREE.Vector2();
+		const oldRaycasterEnabled = get().events.enabled;
+		const oldControlsEnabled = (controls as any)?.enabled;
+		let isDown = false;
+		function prepareRay(event: PointerEvent, vector: THREE.Vector2) {
+			const { offsetX, offsetY } = event;
+			vector.set((offsetX / size.width) * 2 - 1, -(offsetY / size.height) * 2 + 1);
+		}
+		function onSelectStart(event: PointerEvent) {
+			if (controls) (controls as any).enabled = false;
+			setEvents({ enabled: false });
+			down(isDown = true);
+			(gl.domElement as HTMLElement).parentElement?.appendChild(element);
+			element.style.left = `${event.clientX}px`;
+			element.style.top = `${event.clientY}px`;
+			element.style.width = '0px';
+			element.style.height = '0px';
+			startPoint.set(event.clientX, event.clientY);
+		}
+		function onSelectMove(event: PointerEvent) {
+			pointBottomRight.set(
+				Math.max(startPoint.x, event.clientX),
+				Math.max(startPoint.y, event.clientY),
+			);
+			pointTopLeft.set(
+				Math.min(startPoint.x, event.clientX),
+				Math.min(startPoint.y, event.clientY),
+			);
+			element.style.left = `${pointTopLeft.x}px`;
+			element.style.top = `${pointTopLeft.y}px`;
+			element.style.width = `${pointBottomRight.x - pointTopLeft.x}px`;
+			element.style.height = `${pointBottomRight.y - pointTopLeft.y}px`;
+		}
+		function onSelectOver() {
+			if (isDown) {
+				if (controls) (controls as any).enabled = oldControlsEnabled;
+				setEvents({ enabled: oldRaycasterEnabled });
+				down(isDown = false);
+				element.parentElement?.removeChild(element);
+			}
+		}
+		function pointerDown(event: PointerEvent) {
+			if (event.shiftKey) {
+				onSelectStart(event);
+				prepareRay(event, selectionBox.startPoint as unknown as THREE.Vector2);
+			}
+		}
+		let previous: THREE.Mesh[] = [];
+		function pointerMove(event: PointerEvent) {
+			if (isDown) {
+				onSelectMove(event);
+				prepareRay(event, selectionBox.endPoint as unknown as THREE.Vector2);
+				const allSelected = (selectionBox.select() as unknown as THREE.Object3D[])
+					.sort((object) => object.uuid as unknown as number)
+					.filter((object): object is THREE.Mesh => (object as THREE.Mesh).isMesh === true);
+				if (!shallow(allSelected, previous)) {
+					previous = allSelected;
+					dispatch({ object: customFilter(allSelected) });
+				}
+			}
+		}
+		function pointerUp() {
+			if (isDown) onSelectOver();
+		}
+		document.addEventListener('pointerdown', pointerDown, { passive: true });
+		document.addEventListener('pointermove', pointerMove, { passive: true, capture: true });
+		document.addEventListener('pointerup', pointerUp, { passive: true });
+		return () => {
+			document.removeEventListener('pointerdown', pointerDown);
+			document.removeEventListener('pointermove', pointerMove, true);
+			document.removeEventListener('pointerup', pointerUp);
+		};
+	}, [size.width, size.height, raycaster, camera, controls, gl]);
+	<group
+		ref={ref}
+		onClick={onClick}
+		onPointerOver={() => hover(true)}
+		onPointerOut={() => hover(false)}
+		onPointerMissed={onPointerMissed}
+		{...props}
+	>
+		<SelectionContext.Provider value={active}>{children}</SelectionContext.Provider>
+	</group>
+}
+
+export function useSelect(): THREE.Object3D[] {
+	return useContext(SelectionContext);
+}

package/src/web/View.three.tsrx

@@ -0,0 +1,46 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { context as threeContext, createPortal, type RootState, type ThreeRef, useFrame, useThree } from '@octanejs/three';
+import { useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from '@octanejs/three/renderer';
+import { type OctaneNode } from 'octane';
+import * as THREE from 'three';
+
+type CanvasSize = { top: number; left: number; height: number; width: number };
+export type ContainerProps = { visible: boolean; scene: THREE.Scene; index: number; children?: OctaneNode; frames: number; rect: { current: DOMRect | null }; track?: { current: HTMLElement | null }; canvasSize: CanvasSize };
+export type ViewProps = { as?: string; id?: string; className?: string; style?: Record<string, unknown>; visible?: boolean; index?: number; frames?: number; children?: OctaneNode; track?: { current: HTMLElement | null }; [key: string]: unknown };
+export type ViewportProps = {
+	(props: ViewProps & { ref?: ThreeRef<HTMLElement | THREE.Group> }): any;
+	Port: typeof ViewPort;
+};
+
+const col = new THREE.Color();
+function position(canvasSize: CanvasSize, rect: DOMRect) { const canvasBottom = canvasSize.top + canvasSize.height; return { position: { width: rect.width, height: rect.height, left: rect.left - canvasSize.left, top: rect.top, bottom: canvasBottom - rect.bottom, right: rect.right }, isOffscreen: rect.bottom < 0 || rect.top > canvasSize.height || rect.right < 0 || rect.left > canvasSize.width }; }
+function prepare(state: RootState, value: ReturnType<typeof position>['position']) { const gl = state.gl as any; const aspect = value.width / value.height; const camera = state.camera as any; if (camera.isOrthographicCamera) { if (!camera.manual) Object.assign(camera, { left: value.width / -2, right: value.width / 2, top: value.height / 2, bottom: value.height / -2 }); camera.updateProjectionMatrix(); } else if (camera.aspect !== aspect) { camera.aspect = aspect; camera.updateProjectionMatrix(); } const autoClear = gl.autoClear; gl.autoClear = false; gl.setViewport(value.left, value.bottom, value.width, value.height); gl.setScissor(value.left, value.bottom, value.width, value.height); gl.setScissorTest(true); return autoClear; }
+function finish(state: RootState, autoClear: boolean) { const gl = state.gl as any; gl.setScissorTest(false); gl.autoClear = autoClear; }
+function clear(state: RootState) { const gl = state.gl as any; gl.getClearColor(col); gl.setClearColor(col, gl.getClearAlpha()); gl.clear(true, true); }
+
+function Container({ visible = true, canvasSize, scene, index, children, frames, rect, track }: ContainerProps) @{
+	const root = useThree(); const [offscreen, setOffscreen] = useState(false); let count = 0;
+	useFrame((state) => { if (frames === Infinity || count <= frames) { if (track) rect.current = track.current?.getBoundingClientRect() ?? null; count++; } if (rect.current) { const result = position(canvasSize, rect.current); if (offscreen !== result.isOffscreen) setOffscreen(result.isOffscreen); if (visible && !offscreen) { const old = prepare(state, result.position); (state.gl as any).render(children ? state.scene : scene, state.camera); finish(state, old); } } }, index);
+	useLayoutEffect(() => { if (rect.current && (!visible || !offscreen)) { const old = prepare(root, position(canvasSize, rect.current).position); clear(root); finish(root, old); } }, [visible, offscreen]);
+	useEffect(() => { if (!track) return; const currentRect = rect.current; const old = root.get().events.connected; root.setEvents({ connected: track.current }); return () => { if (currentRect) { const auto = prepare(root, position(canvasSize, currentRect).position); clear(root); finish(root, auto); } root.setEvents({ connected: old }); }; }, [track]);
+	<>{children}<group onPointerOver={() => null} /></>
+}
+
+function CanvasView({ track, visible = true, index = 1, frames = Infinity, children, ref, ...props }: ViewProps & { ref?: ThreeRef<THREE.Group> }) @{
+	const rect = useRef<DOMRect | null>(null); const { size, scene } = useThree(); const [virtualScene] = useState(() => new THREE.Scene()); const [ready, setReady] = useState(false);
+	const compute = useCallback((event: any, state: RootState) => { if (rect.current && track?.current && event.target === track.current) { const x = event.clientX - rect.current.left; const y = event.clientY - rect.current.top; state.pointer.set((x / rect.current.width) * 2 - 1, -(y / rect.current.height) * 2 + 1); state.raycaster.setFromCamera(state.pointer, state.camera); } }, [rect, track]);
+	useEffect(() => { if (track) rect.current = track.current?.getBoundingClientRect() ?? null; setReady(true); }, [track]);
+	<group ref={ref as any} {...props as any}>{ready && createPortal(<Container visible={visible} canvasSize={size} frames={frames} scene={scene} track={track} rect={rect} index={index}>{children}</Container>, virtualScene, { events: { compute, priority: index }, size: { width: rect.current?.width ?? size.width, height: rect.current?.height ?? size.height, top: rect.current?.top ?? size.top, left: rect.current?.left ?? size.left } })}</group>
+}
+
+function ViewComponent(props: ViewProps & { ref?: ThreeRef<HTMLElement | THREE.Group> }) @{
+	useContext(threeContext);
+	<CanvasView {...props as any} />
+}
+
+// OCTANE DIVERGENCE[view-renderer-boundary][ordinary:view-renderer-boundary]
+export function ViewPort() @{
+	<></>
+}
+export const View = ViewComponent as ViewportProps;
+View.Port = ViewPort;

package/src/web/face-landmarker-resource.ts

@@ -0,0 +1,18 @@
+import type {
+	FaceLandmarker as FaceLandmarkerImpl,
+	FaceLandmarkerOptions,
+} from '@mediapipe/tasks-vision';
+
+export async function loadFaceLandmarker(
+	_prefix: string,
+	basePath: string,
+	serializedOptions: string,
+): Promise<FaceLandmarkerImpl> {
+	const { FilesetResolver, FaceLandmarker: Implementation } =
+		await import('@mediapipe/tasks-vision');
+	const vision = await FilesetResolver.forVisionTasks(basePath);
+	return Implementation.createFromOptions(
+		vision,
+		JSON.parse(serializedOptions) as FaceLandmarkerOptions,
+	);
+}