rege 0.2.0 → 0.4.0

package/src/resize/react.ts

@@ -0,0 +1,22 @@
+import { resizeEvent } from '.'
+import { useMutable, useOnce } from 'reev/src/react'
+import { ResizeArg, ResizeState } from './types'
+import { isF } from '../utils'
+import type { ReactNode } from 'react'
+
+export const useResize = (arg: ResizeArg) => {
+        if (isF(arg)) arg = { resize: arg }
+        const memo = useMutable(arg)
+        return useOnce(() => resizeEvent(memo as any))
+}
+
+export default useResize
+
+export interface ResizeProps<El extends Element = Element> extends Partial<ResizeState<El>> {
+        children: (state: ResizeState<El>) => ReactNode
+}
+
+export const Resize = <El extends Element = Element>(props: ResizeProps<El>) => {
+        const { children, ...other } = props
+        return children(useResize(other))
+}

package/src/resize/types.ts

@@ -0,0 +1,10 @@
+export interface ResizeState<El extends Element = Element> {
+        observer: ResizeObserver | null
+        listener(): void
+        mount(el: El): void
+        clean(el: null): void
+        resize(self: ResizeState<El>): void
+        ref(target: El): void
+}
+
+export type ResizeArg<El extends Element = Element> = Partial<ResizeState<El>> | ResizeState<El>['resize']

package/src/scroll/index.ts

@@ -0,0 +1,101 @@
+import { vec2, addV, cpV, subV } from '../utils'
+import { scrollValues } from './utils'
+import { EventState, event } from 'reev/src'
+import { ScrollState } from './types'
+
+export * from './types'
+
+export const scrollEvent = <El extends Element = Element>(config?: ScrollState) => {
+        const initValues = () => {
+                vec2(0, 0, self.value)
+                vec2(0, 0, self._value)
+                vec2(0, 0, self.delta)
+                vec2(0, 0, self.movement)
+        }
+
+        const scroll = () => {
+                self.isScrollStart = self.active && !self._active
+                self.isScrolling = self.active && self._active
+                self.isScrollEnd = !self.active && self._active
+        }
+
+        const scrollStart = (e: Event) => {
+                self.event = e
+                self.active = true
+                scrollValues(e, self.value)
+                self.scroll(self)
+        }
+
+        const scrolling = (e: Event) => {
+                // register wheelEnd
+                const id = setTimeout(() => self.scrollEnd(e), self.timeout)
+                self.clearTimeout()
+                self.clearTimeout = () => clearTimeout(id)
+
+                if (!self.active) {
+                        self.scrollStart(e)
+                        return
+                }
+
+                self.event = e
+                self._active = self.active
+                cpV(self.value, self._value)
+                scrollValues(e, self.value)
+                if (self._active) {
+                        subV(self.value, self._value, self.delta)
+                        addV(self.offset, self.delta, self.offset)
+                        addV(self.movement, self.delta, self.movement)
+                }
+                self.scroll(self)
+        }
+
+        const scrollEnd = (e: Event) => {
+                self.event = e
+                self.active = false
+                initValues()
+                self.scroll(self)
+        }
+
+        const mount = (target: El) => {
+                self.target = target // @TODO set event to target
+                window.addEventListener('scroll', self.scrolling)
+        }
+
+        const clean = () => {
+                window.removeEventListener('scroll', self.scrolling)
+        }
+
+        const ref = (el: Element | null) => {
+                self(config as ScrollState<El>)
+                if (el) {
+                        self.mount(el)
+                } else self.clean(null)
+        }
+
+        const self = event({
+                active: false,
+                _active: false,
+                _value: vec2(0, 0),
+                value: vec2(0, 0),
+                delta: vec2(0, 0),
+                offset: vec2(0, 0),
+                movement: vec2(0, 0),
+                target: null,
+                event: null,
+                memo: {},
+                timeout: 100,
+                clearTimeout: () => {},
+                isScrollStart: false,
+                isScrolling: false,
+                isScrollEnd: false,
+                scroll,
+                scrollStart,
+                scrolling,
+                scrollEnd,
+                mount,
+                clean,
+                ref,
+        }) as EventState<ScrollState<El>>
+
+        return self
+}

package/src/scroll/react.ts

@@ -0,0 +1,22 @@
+import { useOnce, useMutable } from 'reev/src/react'
+import { ScrollConfig, ScrollState } from './types'
+import { scrollEvent } from './index'
+import { isF } from '../utils'
+import type { ReactNode } from 'react'
+
+export const useScroll = <El extends Element = Element>(config: ScrollConfig) => {
+        if (isF(config)) config = { scroll: config }
+        const memo = useMutable(config)
+        return useOnce(() => scrollEvent<El>(memo as any))
+}
+
+export default useScroll
+
+export interface ScrollProps<El extends Element = Element> extends Partial<ScrollState<El>> {
+        children: (state: ScrollState<El>) => ReactNode
+}
+
+export const Scroll = <El extends Element = Element>(props: ScrollProps<El>) => {
+        const { children, ...other } = props
+        return children(useScroll(other))
+}

package/src/scroll/types.ts

@@ -0,0 +1,29 @@
+import { Vec2 } from '../utils'
+
+export interface ScrollState<El extends Element = Element> {
+        _active: boolean
+        active: boolean
+        _value: Vec2
+        value: Vec2
+        delta: Vec2
+        offset: Vec2
+        movement: Vec2
+        target: El
+        event: Event
+        memo: any
+        isScrollStart: boolean
+        isScrolling: boolean
+        isScrollEnd: boolean
+        timeout: number
+        clearTimeout(): void
+        scroll(self: ScrollState<El>): void
+        scrollStart(e: Event): void
+        scrolling(e: Event): void
+        scrollEnd(e: Event): void
+        mount(target: Element): void
+        clean(target: null): void
+        ref(traget: Element): void
+        tick?: () => void
+}
+
+export type ScrollConfig<El extends Element = Element> = Partial<ScrollState<El>> | ScrollState<El>['scroll']

package/src/scroll/utils.ts

@@ -0,0 +1,7 @@
+import { vec2, Vec2 } from '../utils'
+
+export const scrollValues = (e: any, out = vec2()): Vec2 => {
+        const { scrollX: x, scrollLeft: xx } = e.currentTarget
+        const { scrollY: y, scrollTop: yy } = e.currentTarget
+        return vec2(x ?? xx ?? 0, y ?? yy ?? 0, out)
+}

package/src/utils.ts

@@ -0,0 +1,109 @@
+/**
+ * CALCULATE VECTOR
+ * REF: https://github.com/toji/gl-matrix/blob/master/src/vec2.js
+ */
+export const isF = (f: unknown): f is Function => typeof f === 'function'
+
+const Vec = typeof Float32Array !== 'undefined' ? Float32Array : Array
+
+export const vec2 = (x = 0, y = 0, out = new Vec(2)): Vec2 => {
+        out[0] = x
+        out[1] = y
+        return out as Vec2
+}
+
+export type Vec2 = [x: number, y: number]
+
+export const addV = (a: Vec2, b: Vec2, out = vec2()): Vec2 => {
+        out[0] = a[0] + b[0]
+        out[1] = a[1] + b[1]
+        return out
+}
+
+export const subV = (a: Vec2, b: Vec2, out = vec2()): Vec2 => {
+        out[0] = a[0] - b[0]
+        out[1] = a[1] - b[1]
+        return out
+}
+
+export const cpV = (a: Vec2, out = vec2()): Vec2 => {
+        out[0] = a[0]
+        out[1] = a[1]
+        return out
+}
+
+/**
+ * SUPPORT
+ */
+const isBrowser = typeof window !== 'undefined' && !!window.document && !!window.document.createElement
+
+const supportsTouchEvents = () => isBrowser && 'ontouchstart' in window
+
+const isTouchScreen = () => supportsTouchEvents() || (isBrowser && window.navigator.maxTouchPoints > 1)
+
+const supportsPointerEvents = () => isBrowser && 'onpointerdown' in window
+
+const supportsPointerLock = () => isBrowser && 'exitPointerLock' in window.document
+
+const supportsGestureEvents = () => {
+        try {
+                // @ts-ignore eslint-disable-next-line
+                return 'constructor' in GestureEvent
+        } catch (e) {
+                return false
+        }
+}
+
+// prettier-ignore
+export const SUPPORT: Record<string, boolean> = {                       // Mac
+        isBrowser, // true
+        get gesture() {
+                return (
+                        SUPPORT._gesture ??
+                        (SUPPORT._gesture = supportsGestureEvents())
+                )
+        },
+        get touch() {
+                return (
+                        SUPPORT._touch ??
+                        (SUPPORT._touch = supportsTouchEvents())
+                )
+        },
+        get touchscreen() {
+                return (
+                        SUPPORT._touchscreen ??
+                        (SUPPORT._touchscreen = isTouchScreen())
+                )
+        },
+        get pointer() {
+                return (
+                        SUPPORT._pointer ??
+                        (SUPPORT._pointer = supportsPointerEvents())
+                )
+        },
+        get pointerLock() {
+                return (
+                        SUPPORT._pointerLock ??
+                        (SUPPORT._pointerLock = supportsPointerLock())
+                )
+        },
+}
+
+/**
+ * https://github.com/pmndrs/use-gesture/blob/main/packages/core/src/config/dragConfigResolver.ts
+ */
+export const getDevice = (lock = false) => {
+        const pointerLock = lock && SUPPORT.pointerLock
+        if (pointerLock) return 'mouse'
+        if (SUPPORT.touch) return 'touch'
+        if (SUPPORT.pointer) return 'pointer'
+        return 'mouse'
+}
+
+export const getClientVec2 = (e: any, device: unknown, out: Vec2): Vec2 => {
+        if (device !== 'touch') {
+                return vec2(e.clientX, e.clientY, out)
+        }
+        const [touch] = e.changedTouches
+        return vec2(touch.clientX, touch.clientY, out)
+}

package/src/wheel/index.ts

@@ -0,0 +1,98 @@
+import { vec2, addV, cpV } from '../utils'
+import { wheelValues } from './utils'
+import { EventState, event } from 'reev/src'
+import { WheelState } from './types'
+
+export * from './types'
+
+export const wheelEvent = <El extends Element = Element>(config?: WheelState) => {
+        const initValues = () => {
+                vec2(0, 0, self.value)
+                vec2(0, 0, self._value)
+                vec2(0, 0, self.delta)
+                vec2(0, 0, self.movement)
+        }
+
+        const wheel = () => {
+                self.isWheelStart = self.active && !self._active
+                self.isWheeling = self.active && self._active
+                self.isWheelEnd = !self.active && self._active
+        }
+        const wheelStart = (e: WheelEvent) => {
+                self.event = e
+                self.active = true
+                wheelValues(e, self.delta)
+                self.wheel(self)
+        }
+
+        const wheeling = (e: Event) => {
+                // register wheelEnd
+                const id = setTimeout(() => self.wheelEnd(e), self.timeout)
+                self.clearTimeout()
+                self.clearTimeout = () => clearTimeout(id)
+                self.event = e
+                if (!self.active) {
+                        self.wheelStart(e)
+                        return
+                }
+
+                self._active = self.active
+                cpV(self.value, self._value)
+                wheelValues(e, self.delta)
+                addV(self.offset, self.delta, self.offset)
+                addV(self.movement, self.delta, self.movement)
+                self.wheel(self)
+        }
+
+        const wheelEnd = (e: Event) => {
+                self.event = e
+                self.active = false
+                initValues()
+                self.wheel(self)
+        }
+
+        const mount = (target: El) => {
+                self.target = target
+                target.addEventListener('wheel', self.wheeling)
+        }
+
+        const clean = () => {
+                const target = self.target
+                if (!target) return
+                target.removeEventListener('wheel', self.wheeling)
+        }
+
+        const ref = (el: Element | null) => {
+                self(config as WheelState<El>)
+                if (el) {
+                        self.mount(el)
+                } else self.clean(null)
+        }
+
+        const self = event({
+                active: false,
+                _active: false,
+                _value: vec2(0, 0),
+                value: vec2(0, 0),
+                delta: vec2(0, 0),
+                offset: vec2(0, 0),
+                movement: vec2(0, 0),
+                target: null,
+                event: null,
+                timeout: 100,
+                clearTimeout: () => {},
+                memo: {},
+                isWheelStart: false,
+                isWheeling: false,
+                isWheelEnd: false,
+                wheel,
+                wheelStart,
+                wheeling,
+                wheelEnd,
+                mount,
+                clean,
+                ref,
+        }) as EventState<WheelState<El>>
+
+        return self
+}

package/src/wheel/react.ts

@@ -0,0 +1,22 @@
+import { useOnce, useMutable } from 'reev/src/react'
+import { WheelConfig, WheelState } from './types'
+import { wheelEvent } from './index'
+import { isF } from '../utils'
+import type { ReactNode } from 'react'
+
+export const useWheel = <El extends Element = Element>(config: WheelConfig) => {
+        if (isF(config)) config = { wheel: config }
+        const memo = useMutable(config)
+        return useOnce(() => wheelEvent<El>(memo as any))
+}
+
+export default useWheel
+
+export interface WheelProps<El extends Element = Element> extends Partial<WheelState<El>> {
+        children: (state: WheelState<El>) => ReactNode
+}
+
+export const Wheel = <El extends Element = Element>(props: WheelProps<El>) => {
+        const { children, ...other } = props
+        return children(useWheel(other))
+}

package/src/wheel/types.ts

@@ -0,0 +1,29 @@
+import { Vec2 } from '../utils'
+
+export interface WheelState<El extends Element = Element> {
+        _active: boolean
+        active: boolean
+        _value: Vec2
+        value: Vec2
+        delta: Vec2
+        offset: Vec2
+        movement: Vec2
+        target: El
+        event: Event
+        timeout: number
+        clearTimeout(): void
+        memo: any
+        isWheelStart: boolean
+        isWheeling: boolean
+        isWheelEnd: boolean
+        wheel(self: WheelState<El>): void
+        wheelStart(e: Event): void
+        wheeling(e: Event): void
+        wheelEnd(e: Event): void
+        mount(target: Element): void
+        clean(target: null): void
+        ref(traget: Element | null): void
+        tick?: () => void
+}
+
+export type WheelConfig<El extends Element = Element> = Partial<WheelState<El>> | WheelState<El>['wheel']

package/src/wheel/utils.ts

@@ -0,0 +1,19 @@
+import { vec2, Vec2 } from '../utils'
+
+const LINE_HEIGHT = 40
+
+const PAGE_HEIGHT = 800
+
+export const wheelValues = (event: Event, out: Vec2): Vec2 => {
+        if (!(event instanceof WheelEvent)) return vec2(0, 0, out)
+
+        let { deltaX, deltaY, deltaMode } = event
+        if (deltaMode === 1) {
+                deltaX *= LINE_HEIGHT
+                deltaY *= LINE_HEIGHT
+        } else if (deltaMode === 2) {
+                deltaX *= PAGE_HEIGHT
+                deltaY *= PAGE_HEIGHT
+        }
+        return vec2(deltaX, deltaY, out)
+}