rege 0.2.0 → 0.3.0

package/src/drag/index.ts

@@ -0,0 +1,126 @@
+import { EventState, event } from 'reev/src'
+import { DragState } from './types'
+import { vec2, addV, subV, cpV, getDevice, getClientVec2 } from '../utils'
+
+export * from './types'
+
+export const EVENT_FOR_DRAG = {
+        touch: {
+                start: 'touchstart',
+                move: 'touchmove',
+                end: 'touchend',
+                up: 'touchcancel',
+        },
+        pointer: {
+                start: 'pointerdown',
+                move: 'pointermove',
+                end: 'pointerup',
+                up: 'pointercancel',
+        },
+        mouse: {
+                start: 'mousedown',
+                move: 'mousemove',
+                end: 'mouseup',
+                up: 'mousecancel',
+        },
+}
+
+export const dragEvent = <El extends Element = Element>(state: Partial<DragState<El>> = {}) => {
+        const initValues = () => {
+                vec2(0, 0, self.value)
+                vec2(0, 0, self._value)
+                vec2(0, 0, self.delta)
+                vec2(0, 0, self.movement)
+        }
+
+        const drag = () => {
+                self.isDragStart = self.active && !self._active
+                self.isDragging = self.active && self._active
+                self.isDragEnd = !self.active && self._active
+        }
+
+        const dragStart = (e: Event) => {
+                self.event = e
+                self.active = true
+                getClientVec2(e, self.device, self.value)
+                if (self.target.setPointerCapture && 'pointerId' in e)
+                        // @ts-ignore
+                        self.target.setPointerCapture(e.pointerId)
+                self.drag(self)
+        }
+
+        const dragging = (e: Event) => {
+                self.event = e
+                self._active = self.active
+                cpV(self.value, self._value)
+                getClientVec2(e, self.device, 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.drag(self)
+        }
+
+        const dragEnd = (e: Event) => {
+                self.event = e
+                self.active = false
+                initValues()
+                if (self.target.releasePointerCapture && 'pointerId' in e)
+                        // @ts-ignore
+                        self.target.releasePointerCapture(e.pointerId)
+                self.drag(self)
+        }
+
+        const mount = (target: El) => {
+                self.target = target
+                const { start, move, end, up } = EVENT_FOR_DRAG[self.device]
+                target.addEventListener(start, self.dragStart)
+                target.addEventListener(move, self.dragging)
+                target.addEventListener(end, self.dragEnd)
+                target.addEventListener(up, self.dragEnd)
+        }
+
+        const clean = () => {
+                const target = self.target
+                if (!target) return
+                const { start, move, end, up } = EVENT_FOR_DRAG[self.device]
+                target.removeEventListener(start, self.dragStart)
+                target.removeEventListener(move, self.dragging)
+                target.removeEventListener(end, self.dragEnd)
+                target.removeEventListener(up, self.dragEnd)
+        }
+
+        const ref = (el: El) => {
+                self(state as DragState<El>)
+                if (el) {
+                        self.mount(el)
+                } else self.clean()
+        }
+
+        const self = event({
+                _active: false,
+                active: false,
+                device: getDevice(),
+                _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: {},
+                isDragStart: false,
+                isDragging: false,
+                isDragEnd: false,
+                drag,
+                dragStart,
+                dragging,
+                dragEnd,
+                mount,
+                clean,
+                ref,
+        }) as EventState<DragState<El>>
+
+        return self
+}

package/src/drag/react.ts

@@ -0,0 +1,22 @@
+import { useOnce, useMutable } from 'reev/src/react'
+import { DragArg, DragState } from './types'
+import { dragEvent } from './index'
+import { isF } from '../utils'
+import type { ReactNode } from 'react'
+
+export const useDrag = <El extends Element = Element>(arg: DragArg<El>) => {
+        if (isF(arg)) arg = { drag: arg }
+        const memo = useMutable(arg)
+        return useOnce(() => dragEvent<El>(memo as any))
+}
+
+export default useDrag
+
+export interface DragProps<El extends Element = Element> extends Partial<DragState<El>> {
+        children(self: DragState<El>): ReactNode
+}
+
+export const Drag = <El extends Element = Element>(props: DragProps<El>) => {
+        const { children, ...other } = props
+        return children(useDrag(other))
+}

package/src/drag/types.ts

@@ -0,0 +1,29 @@
+import { Vec2 } from '../utils'
+
+export type DragDevice = 'mouse' | 'touch' | 'pointer'
+
+export interface DragState<El extends Element = Element> {
+        _active: boolean
+        active: boolean
+        device: DragDevice
+        _value: Vec2
+        value: Vec2
+        delta: Vec2
+        offset: Vec2
+        movement: Vec2
+        target: El
+        event: Event
+        memo: any
+        isDragStart: boolean
+        isDragging: boolean
+        isDragEnd: boolean
+        drag(self: DragState<El>): void
+        dragStart(e: Event): void
+        dragging(e: Event): void
+        dragEnd(e: Event): void
+        mount(target: Element): void
+        clean(): void
+        ref(traget: Element): void
+}
+
+export type DragArg<El extends Element> = Partial<DragState<El>> | DragState<El>['drag']

package/src/hover/index.ts

@@ -0,0 +1,121 @@
+import { HoverState } from './types'
+import { EventState, event } from 'reev/src'
+import { vec2, addV, subV, getDevice, getClientVec2, cpV } from '../utils'
+
+export * from './types'
+
+export const EVENT_FOR_HOVER = {
+        touch: {
+                start: 'touchstart',
+                move: 'touchmove',
+                end: 'touchend',
+                up: 'touchcancel',
+        },
+        pointer: {
+                start: 'pointerenter',
+                move: 'pointermove',
+                end: 'pointerleave',
+                up: 'pointercancel',
+        },
+        mouse: {
+                start: 'mouseenter',
+                move: 'mousemove',
+                end: 'mouseleave',
+                up: 'mousecancel',
+        },
+}
+
+export const hoverEvent = <El extends Element = Element>(state: Partial<HoverState<El>> = {}) => {
+        const initValues = () => {
+                vec2(0, 0, self.value)
+                vec2(0, 0, self._value)
+                vec2(0, 0, self.delta)
+                vec2(0, 0, self.movement)
+        }
+
+        const hover = () => {
+                self.isHoverStart = !self._active && self.active
+                self.isHovering = self._active && self.active
+                self.isHoverEnd = self._active && !self.active
+        }
+
+        const hoverStart = (e: Event) => {
+                self.event = e
+                self.active = true
+                getClientVec2(e, self.device, self.value)
+                self.hover(self)
+        }
+
+        const hovering = (e: Event) => {
+                self.event = e
+                self._active = self.active
+                cpV(self.value, self._value)
+                getClientVec2(e, self.device, 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.hover(self)
+        }
+
+        const hoverEnd = (e: Event) => {
+                self.event = e
+                self._active = true
+                self.active = false
+                initValues()
+                self.hover(self)
+        }
+
+        const mount = (target: El) => {
+                self.target = target
+                const { start, move, end, up } = EVENT_FOR_HOVER[self.device]
+                target.addEventListener(start, self.hoverStart)
+                target.addEventListener(move, self.hovering)
+                target.addEventListener(end, self.hoverEnd)
+                target.addEventListener(up, self.hoverEnd)
+        }
+
+        const clean = () => {
+                const target = self.target
+                if (!target) return
+                const { start, move, end, up } = EVENT_FOR_HOVER[self.device]
+                target.removeEventListener(start, self.hoverStart)
+                target.removeEventListener(move, self.hovering)
+                target.removeEventListener(end, self.hoverEnd)
+                target.removeEventListener(up, self.hoverEnd)
+        }
+
+        const ref = (target: El | null) => {
+                self(state as HoverState<El>)
+                if (target) {
+                        self.mount(target)
+                } else self.clean()
+        }
+
+        const self = event({
+                _active: false,
+                active: false,
+                device: getDevice(),
+                _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: {},
+                isHoverStart: false,
+                isHovering: false,
+                isHoverEnd: false,
+                hover,
+                hoverStart,
+                hovering,
+                hoverEnd,
+                mount,
+                clean,
+                ref,
+        }) as EventState<HoverState<El>>
+
+        return self
+}

package/src/hover/react.ts

@@ -0,0 +1,22 @@
+import { useOnce, useMutable } from 'reev/src/react'
+import { hoverEvent } from '.'
+import { HoverArg, HoverState } from './types'
+import { isF } from '../utils'
+import type { ReactNode } from 'react'
+
+export const useHover = <El extends Element = Element>(arg?: HoverArg) => {
+        if (isF(arg)) arg = { hover: arg }
+        const memo = useMutable(arg)
+        return useOnce(() => hoverEvent<El>(memo as any))
+}
+
+export default useHover
+
+export interface HoverProps<El extends Element = Element> extends Partial<HoverState<El>> {
+        children: (state: HoverState<El>) => ReactNode
+}
+
+export const Hover = (props: HoverProps) => {
+        const { children, ...other } = props
+        return children(useHover(other))
+}

package/src/hover/types.ts

@@ -0,0 +1,25 @@
+import { Vec2 } from '../utils'
+export interface HoverState<El extends Element = Element> {
+        _active: boolean
+        active: boolean
+        device: 'mouse' | 'pointer' | 'touch'
+        _value: Vec2
+        value: Vec2
+        delta: Vec2
+        offset: Vec2
+        movement: Vec2
+        event: Event
+        target: El
+        isHoverStart: boolean
+        isHovering: boolean
+        isHoverEnd: boolean
+        hover: (self: HoverState) => void
+        hoverStart(e: Event): void
+        hovering(e: Event): void
+        hoverEnd(e: Event): void
+        mount(target: El): void
+        clean(target?: El): void
+        ref(target: El | null): void
+}
+
+export type HoverArg<El extends Element = Element> = Partial<HoverState<El>> | HoverState<El>['hover']

package/src/index.ts

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

package/src/key/index.ts

@@ -0,0 +1,37 @@
+import { event } from 'reev/src'
+import { KeyState } from './types'
+
+export * from './types'
+
+export const keyEvent = <El extends Element = Element>(state: Partial<KeyState<El>> = {}) => {
+        const keydown = (e: KeyboardEvent) => {
+                self.event = e
+                self.pressedKey = e.key
+                self.code = e.code
+                self.key?.(self)
+        }
+
+        const mount = (el: El | Window) => {
+                if (!el) el = el || window
+                self.target = el
+
+                // @ts-ignore set tabindex to make element focusable
+                el.setAttribute('tabindex', '1') // @ts-ignore
+                el.addEventListener('keydown', self.keydown)
+        }
+
+        const clean = () => {
+                const el = self.target
+                if (!el) return // @ts-ignore
+                el.removeEventListener('keydown', self.keydown)
+        }
+
+        const ref = (el: Element | null) => {
+                self(state)
+                if (el) self.mount(el as El)
+                else self.clean()
+        }
+
+        const self = event<KeyState<El>>({ keydown, mount, clean, ref })
+        return self
+}

package/src/key/react.ts

@@ -0,0 +1,20 @@
+import { useMutable, useOnce } from 'reev/src/react'
+import { keyEvent } from '.'
+import { KeyArg, KeyState } from './types'
+import { isF } from '../utils'
+import type { ReactNode } from 'react'
+
+export const useKey = <El extends Element = Element>(arg: KeyArg<El>) => {
+        if (isF(arg)) arg = { key: arg }
+        const memo = useMutable(arg)
+        return useOnce(() => keyEvent<El>(memo as any))
+}
+
+export interface KeyProps<El extends Element = Element> extends Partial<KeyState<El>> {
+        children: (state: KeyState<El>) => ReactNode
+}
+
+export const Key = <El extends Element = Element>(props: KeyProps<El>) => {
+        const { children, ...other } = props
+        return children(useKey(other))
+}

package/src/key/types.ts

@@ -0,0 +1,12 @@
+export interface KeyState<El extends Element = Element> {
+        target: El | Window
+        pressedKey: string
+        code: string
+        event: KeyboardEvent
+        key(e: KeyState): void
+        keydown(e: KeyboardEvent): void
+        mount(el: El): void
+        clean(): void
+        ref(el: Element | null): void
+}
+export type KeyArg<El extends Element = Element> = Partial<KeyState<El>> | KeyState<El>['key']