rege 0.2.0 → 0.4.0

package/src/pinch/index.ts

@@ -0,0 +1,447 @@
+import { EventState, event } from 'reev/src'
+import { PinchState } from './types'
+import { vec2, addV, subV, cpV } from '../utils'
+import { pinchDevice, touchDistanceAngle, pointerDistanceAngle, getCurrentTargetTouchIds, wheelPinchDelta, WebKitGestureEvent, DistanceAngle } from './utils'
+
+export * from './types'
+
+export const EVENT_FOR_PINCH = {
+        touch: {
+                start: 'touchstart',
+                move: 'touchmove',
+                end: 'touchend',
+                cancel: 'touchcancel',
+        },
+        pointer: {
+                start: 'pointerdown',
+                move: 'pointermove',
+                end: 'pointerup',
+                cancel: 'pointercancel',
+        },
+        gesture: {
+                start: 'gesturestart',
+                change: 'gesturechange',
+                end: 'gestureend',
+        },
+}
+
+export const pinchEvent = <El extends Element = Element>(config: Partial<PinchState<El>> = {}) => {
+        const initValues = () => {
+                vec2(0, 0, self.value)
+                vec2(0, 0, self._value)
+                vec2(0, 0, self.delta)
+                vec2(0, 0, self.movement)
+        }
+
+        const pinch = () => {
+                self.isPinchStart = self.active && !self._active
+                self.isPinching = self.active && self._active
+                self.isPinchEnd = !self.active && self._active
+        }
+
+        // ===== Common pinch handlers =====
+
+        const pinchStart = (e: Event, payload: DistanceAngle) => {
+                self.event = e
+                self.active = true
+
+                // Store initial values [distance, angle]
+                vec2(payload.distance, payload.angle, self.value)
+                vec2(payload.distance, payload.angle, self.initial)
+                cpV(payload.origin, self.origin)
+
+                self.scale = 1
+                self.turns = 0
+
+                self.pinch(self)
+        }
+
+        const pinching = (e: Event, payload: DistanceAngle) => {
+                if (!self.active) return
+
+                self.event = e
+                self._active = self.active
+
+                // Store previous values
+                cpV(self.value, self._value)
+
+                // Current values [distance, angle]
+                const prevAngle = self._value[1]
+                let newAngle = payload.angle
+
+                // Handle angle wrapping (for full rotations)
+                const deltaAngle = newAngle - prevAngle
+                if (Math.abs(deltaAngle) > 270) {
+                        self.turns += Math.sign(deltaAngle)
+                        newAngle -= 360 * Math.sign(deltaAngle)
+                }
+
+                vec2(payload.distance, newAngle, self.value)
+                cpV(payload.origin, self.origin)
+
+                // Calculate movement: [scaleRatio - 1, angleDelta]
+                // scaleRatio = currentDistance / initialDistance
+                const scaleRatio = self.value[0] / self.initial[0] - 1
+                const angleDelta = self.value[1] - self.initial[1]
+                vec2(scaleRatio, angleDelta, self.movement)
+
+                // Calculate delta from previous frame
+                subV(self.value, self._value, self.delta)
+                // Convert distance delta to scale delta for consistency
+                self.delta[0] = self._value[0] !== 0 ? self.value[0] / self._value[0] - 1 : 0
+
+                // Update offset (cumulative)
+                addV(self.offset, self.delta, self.offset)
+
+                // Update scale
+                self.scale = self.initial[0] !== 0 ? self.value[0] / self.initial[0] : 1
+
+                self.pinch(self)
+        }
+
+        const pinchEnd = (e: Event) => {
+                self.event = e
+                self._active = true
+                self.active = false
+                initValues()
+                self.pinch(self)
+        }
+
+        // ===== Touch event handlers =====
+
+        const touchStart = (e: TouchEvent) => {
+                const touchIds = getCurrentTargetTouchIds(e)
+
+                if (self.active) {
+                        // Check if the touches that started the gesture are still present
+                        if (self._touchIds.every((id) => touchIds.includes(id))) return
+                }
+
+                if (touchIds.length < 2) return
+
+                // Store the first two touch ids
+                self._touchIds = touchIds.slice(0, 2)
+
+                const payload = touchDistanceAngle(e, self._touchIds)
+                if (!payload) return
+
+                pinchStart(e, payload)
+        }
+
+        const touchMove = (e: TouchEvent) => {
+                if (!self.active) return
+
+                const payload = touchDistanceAngle(e, self._touchIds)
+                if (!payload) return
+
+                pinching(e, payload)
+        }
+
+        const touchEnd = (e: TouchEvent) => {
+                if (!self.active) return
+
+                // Check if any of our tracked touches ended
+                const currentTouchIds = Array.from(e.touches).map((t) => t.identifier)
+                if (self._touchIds.some((id) => !currentTouchIds.includes(id))) {
+                        pinchEnd(e)
+                }
+        }
+
+        // ===== Pointer event handlers =====
+
+        const pointerStart = (e: PointerEvent) => {
+                // Only track left mouse button or touch
+                if (e.buttons != null && e.buttons % 2 !== 1) return
+
+                const _pointerEvents = self._pointerEvents
+
+                if (self.active) {
+                        // Check if the pointers that started the gesture are still present
+                        if (Array.from(_pointerEvents.keys()).every((id) => self._pointerEvents.has(id))) return
+                }
+
+                // Capture the pointer
+                try {
+                        ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+                } catch {}
+
+                if (_pointerEvents.size < 2) {
+                        _pointerEvents.set(e.pointerId, e)
+                }
+
+                if (_pointerEvents.size < 2) return
+
+                const payload = pointerDistanceAngle(_pointerEvents)
+                if (!payload) return
+
+                pinchStart(e, payload)
+        }
+
+        const pointerMove = (e: PointerEvent) => {
+                const _pointerEvents = self._pointerEvents
+
+                if (_pointerEvents.has(e.pointerId)) {
+                        _pointerEvents.set(e.pointerId, e)
+                }
+
+                if (!self.active) return
+
+                const payload = pointerDistanceAngle(_pointerEvents)
+                if (!payload) return
+
+                pinching(e, payload)
+        }
+
+        const pointerEnd = (e: PointerEvent) => {
+                try {
+                        ;(e.target as HTMLElement).releasePointerCapture(e.pointerId)
+                } catch {}
+
+                const _pointerEvents = self._pointerEvents
+
+                if (_pointerEvents.has(e.pointerId)) {
+                        _pointerEvents.delete(e.pointerId)
+                }
+
+                if (!self.active) return
+
+                if (_pointerEvents.size < 2) {
+                        pinchEnd(e)
+                }
+        }
+
+        // ===== Safari Gesture event handlers =====
+
+        const gestureStart = (e: Event) => {
+                const ge = e as WebKitGestureEvent
+                if (e.cancelable) e.preventDefault()
+
+                if (self.active) return
+
+                self.event = e
+                self.active = true
+
+                // GestureEvent provides scale and rotation directly
+                vec2(ge.scale, ge.rotation, self.value)
+                vec2(ge.scale, ge.rotation, self.initial)
+                vec2(ge.clientX, ge.clientY, self.origin)
+
+                self.scale = 1
+                self.turns = 0
+
+                self.pinch(self)
+        }
+
+        const gestureChange = (e: Event) => {
+                const ge = e as WebKitGestureEvent
+                if (e.cancelable) e.preventDefault()
+
+                if (!self.active) return
+
+                self.event = e
+                self._active = self.active
+
+                cpV(self.value, self._value)
+
+                // GestureEvent gives us scale and rotation directly
+                vec2(ge.scale, ge.rotation, self.value)
+                vec2(ge.clientX, ge.clientY, self.origin)
+
+                // movement = [scale - 1, rotation]
+                vec2(ge.scale - 1, ge.rotation, self.movement)
+
+                // delta from previous
+                subV(self.value, self._value, self.delta)
+
+                // Update offset
+                addV(self.offset, self.delta, self.offset)
+
+                self.scale = ge.scale
+
+                self.pinch(self)
+        }
+
+        const gestureEnd = (e: Event) => {
+                if (!self.active) return
+                pinchEnd(e)
+        }
+
+        // ===== Wheel event handlers (trackpad pinch fallback) =====
+
+        const wheelStart = (e: WheelEvent) => {
+                self.event = e
+                self.active = true
+
+                // For wheel, we track scale change as value[0], rotation as value[1] (always 0)
+                vec2(1, 0, self.value)
+                vec2(1, 0, self.initial)
+                vec2(e.clientX, e.clientY, self.origin)
+
+                self.scale = 1
+                self.turns = 0
+
+                // Apply the initial wheel delta
+                const scaleDelta = wheelPinchDelta(e, self.offset[0] + 1)
+                self.delta[0] = scaleDelta
+                self.delta[1] = 0
+                self.value[0] += scaleDelta
+                addV(self.offset, self.delta, self.offset)
+                vec2(self.value[0] - 1, 0, self.movement)
+
+                self.scale = self.value[0]
+
+                self.pinch(self)
+        }
+
+        const wheeling = (e: WheelEvent) => {
+                // Set up timeout to detect wheel end
+                const id = setTimeout(() => wheelEnd(e), self.timeout)
+                self.clearTimeout()
+                self.clearTimeout = () => clearTimeout(id)
+
+                if (!self.active) {
+                        wheelStart(e)
+                        return
+                }
+
+                self.event = e
+                self._active = self.active
+
+                cpV(self.value, self._value)
+                vec2(e.clientX, e.clientY, self.origin)
+
+                // Calculate scale delta from wheel
+                const scaleDelta = wheelPinchDelta(e, self.offset[0] + 1)
+                self.delta[0] = scaleDelta
+                self.delta[1] = 0
+
+                self.value[0] += scaleDelta
+                addV(self.offset, self.delta, self.offset)
+                vec2(self.value[0] - 1, 0, self.movement)
+
+                self.scale = self.value[0]
+
+                self.pinch(self)
+        }
+
+        const wheelEnd = (e: Event) => {
+                if (!self.active) return
+                self.event = e
+                self._active = true
+                self.active = false
+                initValues()
+                self.pinch(self)
+        }
+
+        // ===== Lifecycle methods =====
+
+        const mount = (target: El) => {
+                self.target = target
+                const device = self.device
+
+                if (device === 'wheel') {
+                        target.addEventListener('wheel', wheeling as EventListener, { passive: false })
+                } else if (device === 'gesture') {
+                        const events = EVENT_FOR_PINCH.gesture
+                        target.addEventListener(events.start, gestureStart)
+                        target.addEventListener(events.change, gestureChange)
+                        target.addEventListener(events.end, gestureEnd)
+                } else if (device === 'touch') {
+                        const events = EVENT_FOR_PINCH.touch
+                        target.addEventListener(events.start, touchStart as EventListener)
+                        target.addEventListener(events.move, touchMove as EventListener)
+                        target.addEventListener(events.end, touchEnd as EventListener)
+                        target.addEventListener(events.cancel, touchEnd as EventListener)
+                } else if (device === 'pointer') {
+                        const events = EVENT_FOR_PINCH.pointer
+                        target.addEventListener(events.start, pointerStart as EventListener)
+                        target.addEventListener(events.move, pointerMove as EventListener)
+                        target.addEventListener(events.end, pointerEnd as EventListener)
+                        target.addEventListener(events.cancel, pointerEnd as EventListener)
+                }
+        }
+
+        const clean = () => {
+                const target = self.target
+                if (!target) return
+                const device = self.device
+
+                if (device === 'wheel') {
+                        target.removeEventListener('wheel', wheeling as EventListener)
+                } else if (device === 'gesture') {
+                        const events = EVENT_FOR_PINCH.gesture
+                        target.removeEventListener(events.start, gestureStart)
+                        target.removeEventListener(events.change, gestureChange)
+                        target.removeEventListener(events.end, gestureEnd)
+                } else if (device === 'touch') {
+                        const events = EVENT_FOR_PINCH.touch
+                        target.removeEventListener(events.start, touchStart as EventListener)
+                        target.removeEventListener(events.move, touchMove as EventListener)
+                        target.removeEventListener(events.end, touchEnd as EventListener)
+                        target.removeEventListener(events.cancel, touchEnd as EventListener)
+                } else if (device === 'pointer') {
+                        const events = EVENT_FOR_PINCH.pointer
+                        target.removeEventListener(events.start, pointerStart as EventListener)
+                        target.removeEventListener(events.move, pointerMove as EventListener)
+                        target.removeEventListener(events.end, pointerEnd as EventListener)
+                        target.removeEventListener(events.cancel, pointerEnd as EventListener)
+                }
+        }
+
+        const ref = (el: El | null) => {
+                self(config as PinchState<El>)
+                if (el) {
+                        self.mount(el)
+                } else self.clean()
+        }
+
+        const self = event({
+                _active: false,
+                active: false,
+                device: pinchDevice(),
+                _value: vec2(0, 0),
+                value: vec2(0, 0),
+                delta: vec2(0, 0),
+                offset: vec2(0, 0),
+                movement: vec2(0, 0),
+                initial: vec2(0, 0),
+                origin: vec2(0, 0),
+                _touchIds: [] as number[],
+                _pointerEvents: new Map<number, PointerEvent>(),
+                scale: 1,
+                turns: 0,
+                target: null as unknown as El,
+                event: null as unknown as Event,
+                memo: {},
+                timeout: 100,
+                clearTimeout: () => {},
+                isPinchStart: false,
+                isPinching: false,
+                isPinchEnd: false,
+                pinch,
+                pinchStart: (e: Event) => {
+                        // This is called externally, need to detect device and delegate
+                        if (self.device === 'touch') touchStart(e as TouchEvent)
+                        else if (self.device === 'pointer') pointerStart(e as PointerEvent)
+                        else if (self.device === 'gesture') gestureStart(e)
+                        else if (self.device === 'wheel') wheeling(e as WheelEvent)
+                },
+                pinching: (e: Event) => {
+                        if (self.device === 'touch') touchMove(e as TouchEvent)
+                        else if (self.device === 'pointer') pointerMove(e as PointerEvent)
+                        else if (self.device === 'gesture') gestureChange(e)
+                        else if (self.device === 'wheel') wheeling(e as WheelEvent)
+                },
+                pinchEnd: (e: Event) => {
+                        if (self.device === 'touch') touchEnd(e as TouchEvent)
+                        else if (self.device === 'pointer') pointerEnd(e as PointerEvent)
+                        else if (self.device === 'gesture') gestureEnd(e)
+                        else if (self.device === 'wheel') wheelEnd(e)
+                },
+                mount,
+                clean,
+                ref,
+        }) as EventState<PinchState<El>>
+
+        return self
+}

package/src/pinch/react.ts

@@ -0,0 +1,22 @@
+import { useOnce, useMutable } from 'reev/src/react'
+import { pinchEvent } from '.'
+import { PinchArg, PinchState } from './types'
+import { isF } from '../utils'
+import type { ReactNode } from 'react'
+
+export const usePinch = <El extends Element = Element>(arg?: PinchArg) => {
+        if (isF(arg)) arg = { pinch: arg }
+        const memo = useMutable(arg)
+        return useOnce(() => pinchEvent<El>(memo as any))
+}
+
+export default usePinch
+
+export interface PinchProps<El extends Element = Element> extends Partial<PinchState<El>> {
+        children: (state: PinchState<El>) => ReactNode
+}
+
+export const Pinch = (props: PinchProps) => {
+        const { children, ...other } = props
+        return children(usePinch(other))
+}

package/src/pinch/types.ts

@@ -0,0 +1,63 @@
+import { Vec2 } from '../utils'
+
+export type PinchDevice = 'mouse' | 'pointer' | 'touch' | 'wheel' | 'gesture'
+
+export interface PinchState<El extends Element = Element> {
+        device: PinchDevice
+
+        // Lifecycle flags
+        active: boolean
+        _active: boolean
+
+        // Pinch values: [distance, angle] for touch/pointer, [scale, rotation] for gesture
+        value: Vec2
+        _value: Vec2
+        delta: Vec2
+        offset: Vec2 // [cumulativeScale, cumulativeAngle]
+        movement: Vec2 // [scaleChange, angleChange] since start
+
+        // Initial values for computing relative changes
+        initial: Vec2
+
+        // Origin point (center between two fingers)
+        origin: Vec2
+
+        // Touch tracking
+        _touchIds: number[]
+
+        // Pointer tracking
+        _pointerEvents: Map<number, PointerEvent>
+
+        // Scale (derived from distance change)
+        scale: number
+
+        // Rotation turns (for tracking full rotations)
+        turns: number
+
+        // Element and event
+        target: El
+        event: Event | null
+        memo: Record<string, unknown>
+
+        // Timeout for wheel end detection
+        timeout: number
+        clearTimeout: () => void
+
+        // State flags
+        isPinchStart: boolean
+        isPinching: boolean
+        isPinchEnd: boolean
+
+        // Callbacks
+        pinch: (self: PinchState<El>) => void
+        pinchStart: (e: Event) => void
+        pinching: (e: Event) => void
+        pinchEnd: (e: Event) => void
+
+        // Lifecycle methods
+        mount: (target: El) => void
+        clean: () => void
+        ref: (el: El | null) => void
+}
+
+export type PinchArg<El extends Element = Element> = Partial<PinchState<El>> | PinchState<El>['pinch']

package/src/pinch/utils.ts

@@ -0,0 +1,106 @@
+import { SUPPORT, Vec2, vec2 } from '../utils'
+
+/**
+ * ref:
+ * https://github.com/pmndrs/use-gesture/blob/main/packages/core/src/config/pinchConfigResolver.ts
+ */
+export const pinchDevice = (touch = false) => {
+        if (!SUPPORT.touch && SUPPORT.gesture) return 'gesture'
+        if (SUPPORT.touch && touch) return 'touch'
+        if (SUPPORT.touchscreen) {
+                if (SUPPORT.pointer) return 'pointer'
+                if (SUPPORT.touch) return 'touch'
+        }
+        return 'wheel'
+}
+
+/**
+ * Wheel delta normalization constants
+ * ref: https://github.com/facebookarchive/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js
+ */
+const LINE_HEIGHT = 40
+const PAGE_HEIGHT = 800
+const PINCH_WHEEL_RATIO = 100
+
+/**
+ * Calculate distance and angle between two touch/pointer points
+ * ref: https://github.com/pmndrs/use-gesture/blob/main/packages/core/src/utils/events.ts
+ */
+export interface DistanceAngle {
+        distance: number
+        angle: number
+        origin: Vec2
+}
+
+export const distanceAngle = (p1: Touch | PointerEvent, p2: Touch | PointerEvent): DistanceAngle | null => {
+        try {
+                const dx = p2.clientX - p1.clientX
+                const dy = p2.clientY - p1.clientY
+                const cx = (p2.clientX + p1.clientX) / 2
+                const cy = (p2.clientY + p1.clientY) / 2
+
+                const distance = Math.hypot(dx, dy)
+                // Convert to degrees, negative to match natural gesture direction
+                const angle = -(Math.atan2(dx, dy) * 180) / Math.PI
+                const origin = vec2(cx, cy)
+
+                return { distance, angle, origin }
+        } catch {
+                return null
+        }
+}
+
+/**
+ * Get touch distance and angle from touch event using stored touch ids
+ */
+export const touchDistanceAngle = (event: TouchEvent, ids: number[]): DistanceAngle | null => {
+        const touches = Array.from(event.touches).filter((touch) => ids.includes(touch.identifier))
+        if (touches.length < 2) return null
+        return distanceAngle(touches[0], touches[1])
+}
+
+/**
+ * Get pointer distance and angle from pointer events map
+ */
+export const pointerDistanceAngle = (pointerEvents: Map<number, PointerEvent>): DistanceAngle | null => {
+        const pointers = Array.from(pointerEvents.values())
+        if (pointers.length < 2) return null
+        return distanceAngle(pointers[0], pointers[1])
+}
+
+/**
+ * Get all touch identifiers for the current target
+ */
+export const getCurrentTargetTouchIds = (event: TouchEvent): number[] => {
+        return Array.from(event.touches)
+                .filter((touch) => touch.target === event.currentTarget || (event.currentTarget as Node)?.contains?.(touch.target as Node))
+                .map((touch) => touch.identifier)
+}
+
+/**
+ * Normalize wheel values for pinch gesture (trackpad pinch)
+ * Returns scale delta based on wheel deltaY
+ */
+export const wheelPinchDelta = (event: WheelEvent, currentScale: number): number => {
+        let { deltaY, deltaMode } = event
+
+        // Normalize wheel values
+        if (deltaMode === 1) {
+                deltaY *= LINE_HEIGHT
+        } else if (deltaMode === 2) {
+                deltaY *= PAGE_HEIGHT
+        }
+
+        // Convert to scale delta (negative because wheel down = zoom out)
+        return (-deltaY / PINCH_WHEEL_RATIO) * currentScale
+}
+
+/**
+ * WebKit gesture event type (Safari)
+ */
+export interface WebKitGestureEvent extends UIEvent {
+        scale: number
+        rotation: number
+        clientX: number
+        clientY: number
+}

package/src/react.ts

@@ -0,0 +1,7 @@
+export * from './drag/react'
+export * from './hover/react'
+export * from './key/react'
+export * from './pinch/react'
+export * from './resize/react'
+export * from './scroll/react'
+export * from './wheel/react'

package/src/resize/index.ts

@@ -0,0 +1,49 @@
+import { EventState, event } from 'reev/src'
+import { ResizeState } from './types'
+
+export * from './types'
+
+const DELAY = 100
+
+type ResizeEventCallback = (entry: ResizeObserverEntry) => () => void
+
+export const resizeEvent = <El extends Element = Element>(state: ResizeState) => {
+        const on: ResizeEventCallback = (entry) => () => {
+                // ???
+        }
+
+        const mount = (target: El) => {
+                const register = (entry: ResizeObserverEntry) => {
+                        if (entry.target !== target) return
+                        const id = setTimeout(on(entry), DELAY)
+                        self.listener()
+                        self.listener = () => clearTimeout(id)
+                }
+
+                self.observer = new ResizeObserver((entries) => {
+                        entries.forEach(register)
+                })
+
+                self.observer.observe(target)
+        }
+
+        const clean = () => {}
+
+        const ref = (el: El) => {
+                self(state)
+                if (el) {
+                        self.mount(el)
+                } else self.clean(null)
+        }
+
+        const self = event({
+                observer: null,
+                listener: () => {},
+                resize: () => {},
+                mount,
+                clean,
+                ref,
+        }) as EventState<ResizeState<El>>
+
+        return self
+}