@octane-xplat/dnd-kit 0.0.1 → 0.11.0

package/src/components.tsx

@@ -0,0 +1,262 @@
+import {
+	createContext,
+	useContext,
+	useRef,
+	useEffect,
+	useCallback,
+	useSyncExternalStore,
+} from 'octane'
+
+import { View, useMeasure } from '@octane-xplat/ui'
+import { DndController } from './controller'
+import { dragStyle } from './geometry'
+import { arrayMove } from './sort'
+import type {
+	DndId,
+	DndContextProps,
+	DndSnapshot,
+	DraggableOptions,
+	DraggableResult,
+	DroppableOptions,
+	DroppableResult,
+	SortableContextProps,
+	SortableResult,
+	SortableListProps,
+} from './props'
+
+// The universal native context uses this callable as its provider, but the
+// DOM TypeScript signature requires a renderer scope parameter for JSX.
+const Context = createContext<DndController | null>(null)
+const ContextProvider: any = Context
+const SortContext = createContext<readonly (string | number)[] | null>(null)
+const SortContextProvider: any = SortContext
+
+/** Scope registrations to one renderer root. Nested roots need their own DndContext. */
+export function DndContext(props: DndContextProps) {
+	const ref = useRef<DndController | null>(null)
+	if (!ref.current) {
+		ref.current = new DndController()
+	}
+
+	const controller = ref.current
+	controller.options = props
+	useEffect(() => () => controller.disposeController(), [controller])
+	return <ContextProvider value={controller}>{props.children}</ContextProvider>
+}
+
+function useController(): DndController {
+	const controller = useContext(Context)
+	if (!controller) {
+		throw new Error('Drag and drop hooks require DndContext')
+	}
+
+	return controller
+}
+
+/** Subscribes independently so retained native children observe drag state. */
+export function useDndContext(): DndSnapshot {
+	const controller = useController()
+	return useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot)
+}
+
+export function useDraggable(options: DraggableOptions): DraggableResult {
+	const controller = useController()
+	const snapshot = useDndContext()
+	const entity = useRef<ReturnType<DndController['registerDraggable']> | null>(null)
+	const node = useRef<any>(null)
+	const latest = useRef(options)
+	latest.current = options
+	const measurement = useMeasure()
+	useEffect(() => {
+		const registered = controller.registerDraggable(latest.current)
+		entity.current = registered
+		if (node.current) {
+			controller.draggableNodes.set(options.id, node.current)
+		}
+
+		return () => {
+			if (controller.getSnapshot().active?.id === options.id) {
+				controller.cancel()
+			}
+
+			registered.destroy()
+			entity.current = null
+			controller.draggableNodes.delete(options.id)
+		}
+	}, [controller, options.id])
+
+	useEffect(() => {
+		if (!entity.current) {
+			return
+		}
+
+		entity.current.data = options.data ?? {}
+		entity.current.disabled = options.disabled ?? false
+		if (options.disabled && controller.getSnapshot().active?.id === options.id) {
+			controller.cancel()
+		}
+	}, [controller, options.id, options.data, options.disabled])
+
+	const ref = useCallback(
+		(element: any) => {
+			node.current = element
+			measurement.ref(element)
+			if (element) {
+				controller.draggableNodes.set(options.id, element)
+			} else {
+				controller.draggableNodes.delete(options.id)
+			}
+		},
+		[controller, options.id, measurement.ref],
+	)
+
+	const onPan = useCallback(
+		(event: Parameters<DraggableResult['onPan']>[0]) => entity.current?.onPan?.(event),
+		[],
+	)
+
+	const isDragging = snapshot.isDragging && snapshot.active?.id === options.id
+	const transform = isDragging ? snapshot.transform : { x: 0, y: 0 }
+	return { ref, onPan, isDragging, transform, style: dragStyle(transform.x, transform.y) }
+}
+
+export function useDroppable(options: DroppableOptions): DroppableResult {
+	const controller = useController()
+	const snapshot = useDndContext()
+	const entity = useRef<ReturnType<DndController['registerDroppable']> | null>(null)
+	const node = useRef<any>(null)
+	const latest = useRef(options)
+	latest.current = options
+	const measurement = useMeasure()
+	useEffect(() => {
+		const registered = controller.registerDroppable(latest.current)
+		entity.current = registered
+		if (node.current) {
+			controller.droppableNodes.set(options.id, node.current)
+		}
+
+		controller.refresh()
+		return () => {
+			registered.destroy()
+			entity.current = null
+			controller.droppableNodes.delete(options.id)
+			controller.refresh()
+		}
+	}, [controller, options.id])
+
+	useEffect(() => {
+		if (!entity.current) {
+			return
+		}
+
+		entity.current.data = options.data ?? {}
+		entity.current.disabled = options.disabled ?? false
+		entity.current.accept = options.accept
+			? (source) => options.accept!({ id: source.id, data: source.data })
+			: undefined
+
+		controller.refresh()
+	}, [
+		controller,
+		options.data,
+		options.disabled,
+		options.accept,
+		controller.options.collisionDetection,
+		measurement.bounds,
+	])
+
+	const ref = useCallback(
+		(element: any) => {
+			node.current = element
+			measurement.ref(element)
+			if (element) {
+				controller.droppableNodes.set(options.id, element)
+			} else {
+				controller.droppableNodes.delete(options.id)
+			}
+		},
+		[controller, options.id, measurement.ref],
+	)
+
+	return { ref, isOver: snapshot.isDragging && snapshot.over?.id === options.id }
+}
+
+/** Declares list membership for useSortable; it does not own item order. */
+export function SortableContext(props: SortableContextProps) {
+	if (new Set(props.items).size !== props.items.length) {
+		throw new Error('SortableContext requires unique item ids')
+	}
+
+	return <SortContextProvider value={props.items}>{props.children}</SortContextProvider>
+}
+
+/** Bind and spread onPan/style onto one View. Order changes only when the owner commits a drop. */
+export function useSortable(options: DraggableOptions): SortableResult {
+	const items = useContext(SortContext)
+	if (!items?.includes(options.id)) {
+		throw new Error('useSortable requires membership in SortableContext')
+	}
+
+	const drag = useDraggable(options)
+	const drop = useDroppable(options)
+	const ref = useCallback(
+		(element: any) => {
+			drag.ref(element)
+			drop.ref(element)
+		},
+		[drag.ref, drop.ref],
+	)
+
+	return { ...drag, ref, isOver: drop.isOver }
+}
+
+function SortableRow<T extends DndId>(props: {
+	key?: T
+	id: T
+	index: number
+	list: SortableListProps<T>
+}) {
+	const sortable = useSortable({ id: props.id, disabled: props.list.disabled })
+	return (
+		<View ref={sortable.ref} onPan={sortable.onPan} style={sortable.style}>
+			{props.list.renderItem(props.id, props.index)}
+		</View>
+	)
+}
+
+/** A controlled sortable list. Provide stable unique ids and save the order in onReorder. */
+export function SortableList<T extends DndId>(props: SortableListProps<T>) {
+	const {
+		items,
+		renderItem: _renderItem,
+		onReorder,
+		disabled: _disabled,
+		dnd,
+		...viewProps
+	} = props
+
+	return (
+		<DndContext
+			{...dnd}
+			onDragEnd={(event) => {
+				if (event.active && event.over) {
+					const from = items.findIndex((id) => id === event.active!.id)
+					const to = items.findIndex((id) => id === event.over!.id)
+					if (from >= 0 && to >= 0 && from !== to) {
+						onReorder(arrayMove(items, from, to), event)
+					}
+				}
+
+				dnd?.onDragEnd?.(event)
+			}}
+		>
+			<SortableContext items={items}>
+				<View {...viewProps}>
+					{items.map((id, index) => (
+						<SortableRow key={id} id={id} index={index} list={props} />
+					))}
+				</View>
+			</SortableContext>
+		</DndContext>
+	)
+}

package/src/components.web.test.tsx

@@ -0,0 +1,118 @@
+// @vitest-environment jsdom
+import { act, createRoot } from 'octane'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { View } from '@octane-xplat/ui'
+import { DndContext, useDraggable, useDroppable } from './index.web'
+
+const roots: ReturnType<typeof createRoot>[] = []
+
+function mount(jsx: any) {
+	const element = document.createElement('div')
+	document.body.append(element)
+	const root = createRoot(element)
+	roots.push(root)
+	act(() => root.render(jsx))
+	return { element }
+}
+
+function pointer(type: string, clientX: number, clientY: number): PointerEvent {
+	const event = new Event(type, { bubbles: true, cancelable: true })
+	Object.assign(event, { pointerId: 1, clientX, clientY })
+	return event as PointerEvent
+}
+
+function setBounds(element: Element, top: number) {
+	vi.spyOn(element, 'getBoundingClientRect').mockReturnValue({
+		x: 0,
+		y: top,
+		left: 0,
+		top,
+		right: 40,
+		bottom: top + 40,
+		width: 40,
+		height: 40,
+		toJSON: () => ({}),
+	} as DOMRect)
+}
+
+async function flush() {
+	for (let i = 0; i < 40; i++) {
+		await Promise.resolve()
+	}
+}
+
+function DragSource() {
+	const drag = useDraggable({ id: 'source' })
+	return <View id="drag-source" ref={drag.ref} onPan={drag.onPan} style={drag.style} />
+}
+
+function DropTarget() {
+	const drop = useDroppable({ id: 'target' })
+	return <View id="drop-target" ref={drop.ref} style={{ height: 40 }} />
+}
+
+afterEach(() => {
+	for (const root of roots.splice(0)) {
+		act(() => root.unmount())
+	}
+
+	document.body.innerHTML = ''
+})
+
+describe('@octane-xplat/dnd-kit (web)', () => {
+	it('starts and completes a drop from pointer events on ref-attached Views', async () => {
+		const onDragStart = vi.fn()
+		const onDragEnd = vi.fn()
+		const { element } = mount(
+			<DndContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
+				<DragSource />
+				<DropTarget />
+			</DndContext>,
+		)
+
+		await flush()
+
+		const source = element.querySelector('#drag-source')!
+		const target = element.querySelector('#drop-target')!
+		setBounds(source, 0)
+		setBounds(target, 80)
+
+		act(() => source.dispatchEvent(pointer('pointerdown', 20, 20)))
+		await flush()
+		act(() => source.dispatchEvent(pointer('pointermove', 20, 100)))
+		await flush()
+		act(() => source.dispatchEvent(pointer('pointerup', 20, 100)))
+		await flush()
+
+		expect(onDragStart).toHaveBeenCalledTimes(1)
+		expect(onDragEnd).toHaveBeenCalledTimes(1)
+		expect(onDragEnd.mock.calls[0]?.[0]).toMatchObject({
+			active: { id: 'source' },
+			over: { id: 'target' },
+			canceled: false,
+		})
+	})
+
+	it('reports pointer cancellation without a successful drop', async () => {
+		const onDragEnd = vi.fn()
+		const onDragCancel = vi.fn()
+		const { element } = mount(
+			<DndContext onDragEnd={onDragEnd} onDragCancel={onDragCancel}>
+				<DragSource />
+				<DropTarget />
+			</DndContext>,
+		)
+
+		await flush()
+
+		const source = element.querySelector('#drag-source')!
+		setBounds(source, 0)
+		act(() => source.dispatchEvent(pointer('pointerdown', 20, 20)))
+		await flush()
+		act(() => source.dispatchEvent(pointer('pointercancel', 20, 20)))
+		await flush()
+
+		expect(onDragCancel).toHaveBeenCalledTimes(1)
+		expect(onDragEnd).not.toHaveBeenCalled()
+	})
+})

package/src/controller.mobile.test.ts

@@ -0,0 +1,176 @@
+import { describe, it, expect, vi } from 'vitest'
+import { DndController } from './controller'
+import { arrayMove } from './sort'
+
+const node = (x: number, y: number, width = 100, height = 40) => ({
+	isLoaded: true,
+	getLocationOnScreen: () => ({ x, y }),
+	getActualSize: () => ({ width, height }),
+})
+
+const flush = async () => {
+	for (let i = 0; i < 30; i++) {
+		await Promise.resolve()
+	}
+}
+
+const pan = (source: ReturnType<DndController['registerDraggable']>, state: string, dy = 0) =>
+	source.onPan?.({ state, dx: 0, dy, x: 0, y: dy, vx: 0, vy: 0, target: null })
+
+function setup() {
+	const manager = new DndController()
+	manager.draggableNodes.set('a', node(0, 0))
+	manager.droppableNodes.set('a', node(0, 0))
+	manager.droppableNodes.set('b', node(0, 80))
+	const source = manager.registerDraggable({ id: 'a', data: { container: 'first' } })
+	manager.registerDroppable({ id: 'a' })
+	manager.registerDroppable({ id: 'b', data: { container: 'second' } })
+	return { manager, source }
+}
+
+describe('native pan substrate and abstract core', () => {
+	it('delivers committed transforms and drops over another container', async () => {
+		const { manager, source } = setup()
+		const start = vi.fn(),
+			move = vi.fn(),
+			end = vi.fn()
+
+		manager.options = { onDragStart: start, onDragMove: move, onDragEnd: end }
+		pan(source, 'began')
+		await flush()
+		expect(manager.getSnapshot().isDragging).toBe(true)
+		pan(source, 'moved', 80)
+		await flush()
+		expect(manager.getSnapshot().over?.id).toBe('b')
+		expect(manager.getSnapshot().transform.y).toBe(80)
+		pan(source, 'ended', 80)
+		await flush()
+		expect(start).toHaveBeenCalledTimes(1)
+		expect(move).toHaveBeenCalled()
+		expect(end.mock.calls[0]?.[0]).toMatchObject({
+			active: { id: 'a' },
+			over: { id: 'b' },
+			canceled: false,
+		})
+
+		expect(manager.getSnapshot().active).toBeNull()
+		manager.disposeController()
+	})
+
+	it('serializes a quick begin/move/release and permits a second drag', async () => {
+		const { manager, source } = setup()
+		const end = vi.fn()
+		manager.options = { onDragEnd: end }
+		pan(source, 'began')
+		pan(source, 'moved', 80)
+		pan(source, 'ended', 80)
+		await flush()
+		expect(end.mock.calls[0]?.[0].over?.id).toBe('b')
+		pan(source, 'began')
+		await flush()
+		pan(source, 'ended')
+		await flush()
+		expect(end).toHaveBeenCalledTimes(2)
+		manager.disposeController()
+	})
+
+	it('cancels without reporting a successful drop', async () => {
+		const { manager, source } = setup()
+		const end = vi.fn(),
+			cancel = vi.fn()
+
+		manager.options = { onDragEnd: end, onDragCancel: cancel }
+		pan(source, 'began')
+		await flush()
+		pan(source, 'cancelled', 80)
+		await flush()
+		expect(cancel).toHaveBeenCalledTimes(1)
+		expect(end).not.toHaveBeenCalled()
+		expect(manager.getSnapshot().active).toBeNull()
+		manager.disposeController()
+	})
+
+	it('excludes disabled and rejected drop targets', async () => {
+		const { manager, source } = setup()
+		manager.registry.droppables.get('b')!.disabled = true
+		pan(source, 'began')
+		await flush()
+		pan(source, 'moved', 80)
+		await flush()
+		expect(manager.getSnapshot().over).toBeNull()
+		manager.registry.droppables.get('b')!.disabled = false
+		manager.registry.droppables.get('b')!.accept = () => false
+		manager.refresh()
+		await flush()
+		expect(manager.getSnapshot().over).toBeNull()
+		manager.disposeController()
+		await flush()
+	})
+
+	it('does not start disabled or unmeasurable sources and rejects duplicate ids', async () => {
+		const { manager, source } = setup()
+		source.disabled = true
+		pan(source, 'began')
+		await flush()
+		expect(manager.getSnapshot().active).toBeNull()
+		source.disabled = false
+		manager.draggableNodes.delete('a')
+		pan(source, 'began')
+		await flush()
+		expect(manager.getSnapshot().active).toBeNull()
+		expect(() => manager.registerDraggable({ id: 'a' })).toThrow('Duplicate')
+		manager.disposeController()
+	})
+
+	it('scrolls while held near an edge, clamps offsets, and stops on cancel', async () => {
+		vi.useFakeTimers()
+		const { manager, source } = setup()
+		const offsetRef = { current: 0 }
+		const scrollTo = vi.fn((offset: number) => {
+			offsetRef.current = offset
+		})
+
+		manager.options = {
+			autoScroll: {
+				bounds: () => ({ x: 0, y: 0, width: 100, height: 100 }),
+				offsetRef,
+				maxOffset: () => 20,
+				scrollTo,
+			},
+		}
+
+		pan(source, 'began')
+		await flush()
+		pan(source, 'moved', 70)
+		await flush()
+		await vi.advanceTimersByTimeAsync(160)
+		expect(offsetRef.current).toBe(20)
+		expect(manager.getSnapshot().transform.y).toBe(90)
+		manager.cancel()
+		await flush()
+		expect(manager.getSnapshot().transform).toEqual({ x: 0, y: 0 })
+		const calls = scrollTo.mock.calls.length
+		await vi.advanceTimersByTimeAsync(100)
+		expect(scrollTo).toHaveBeenCalledTimes(calls)
+		manager.disposeController()
+		vi.useRealTimers()
+	})
+
+	it('stops queued input and unregisters sensor bindings on destruction', async () => {
+		const { manager, source } = setup()
+		pan(source, 'began')
+		await flush()
+		manager.disposeController()
+		pan(source, 'moved', 80)
+		await flush()
+		expect(source.onPan).toBeUndefined()
+		expect(manager.registry.draggables.has('a')).toBe(false)
+	})
+})
+
+it('arrayMove preserves input and ignores invalid indices', () => {
+	const items = ['a', 'b', 'c']
+	expect(arrayMove(items, 0, 2)).toEqual(['b', 'c', 'a'])
+	expect(items).toEqual(['a', 'b', 'c'])
+	expect(arrayMove(items, -1, 2)).toEqual(items)
+})