@octane-xplat/dnd-kit 0.0.1 → 0.11.0

package/src/controller.ts

@@ -0,0 +1,301 @@
+import { DragDropManager, Draggable, Droppable, Sensor } from '@dnd-kit/abstract'
+import { defaultCollisionDetection } from '@dnd-kit/collision'
+import { batch, effect, signal, untracked } from '@dnd-kit/state'
+import type { Rectangle } from '@dnd-kit/geometry'
+import type { PanEvent } from '@octane-xplat/ui'
+import type {
+	DndContextProps,
+	DndId,
+	DndSnapshot,
+	DragEvent,
+	DraggableOptions,
+	DroppableOptions,
+} from './props'
+
+import { measure } from './geometry'
+
+class PanDraggable extends Draggable {
+	onPan?: (event: PanEvent) => void
+}
+
+/** Xplat View supplies normalized pan input; the abstract core owns the drag lifecycle. */
+class PanSensor extends Sensor {
+	bind(input: Draggable) {
+		const source = input as PanDraggable
+		let origin: Rectangle | null = null
+		let bound = true
+		let base = { x: 0, y: 0 }
+		let queue = Promise.resolve()
+		const handle = async (event: PanEvent) => {
+			const manager = this.manager as DndController
+			if (!bound) {
+				return
+			}
+
+			if (event.state === 'began') {
+				if (source.disabled || !manager.dragOperation.status.idle) {
+					return
+				}
+
+				origin = measure(manager.draggableNodes.get(source.id))
+				if (!origin) {
+					return
+				}
+
+				base = { x: event.dx, y: event.dy }
+				manager.scrollShift$.value = { x: 0, y: 0 }
+				manager.actions.start({ source, coordinates: origin.center })
+				manager.dragOperation.shape = origin
+				manager.refresh()
+				await manager.renderer.rendering
+				return
+			}
+
+			if (
+				!origin ||
+				manager.dragOperation.source?.id !== source.id ||
+				!manager.dragOperation.status.dragging
+			) {
+				return
+			}
+
+			const x = event.dx - base.x
+			const y = event.dy - base.y
+			manager.actions.move({ to: { x: origin.center.x + x, y: origin.center.y + y } })
+			// The core commits movement in a microtask. Serialize release after it.
+			await Promise.resolve()
+			manager.dragOperation.shape = origin.translate(x, y)
+			manager.refresh()
+			if (event.state === 'ended' || event.state === 'cancelled') {
+				manager.actions.stop({ canceled: event.state === 'cancelled' })
+				origin = null
+			} else {
+				manager.startAutoScroll()
+			}
+		}
+
+		source.onPan = (event) => {
+			queue = queue
+				.then(() => handle(event))
+				.catch((error) => {
+					origin = null
+
+					;(this.manager as DndController).cancel()
+					console.error('[dnd-kit] pan failed', error)
+				})
+		}
+
+		return () => {
+			bound = false
+			source.onPan = undefined
+			origin = null
+		}
+	}
+}
+
+/** One controller per DndContext; no global registry or cross-root context assumptions. */
+export class DndController extends DragDropManager<PanDraggable, Droppable> {
+	options: DndContextProps = {}
+	readonly draggableNodes = new Map<DndId, any>()
+	readonly droppableNodes = new Map<DndId, any>()
+	readonly scrollShift$ = signal({ x: 0, y: 0 })
+	private listeners = new Set<() => void>()
+	private snapshot: DndSnapshot = {
+		active: null,
+		over: null,
+		transform: { x: 0, y: 0 },
+		isDragging: false,
+	}
+	private dispose: () => void
+	private scrollTimer: ReturnType<typeof setInterval> | undefined
+	private destroyed = false
+	constructor() {
+		super({ sensors: [PanSensor] })
+		this.dispose = effect(() => {
+			const operation = this.dragOperation
+			const active = operation.source
+			const over = operation.target
+			const transform = operation.transform
+			const isDragging = operation.status.dragging
+			this.snapshot = {
+				active: active && !operation.status.idle ? { id: active.id, data: active.data } : null,
+				over: over && !operation.status.idle ? { id: over.id, data: over.data } : null,
+				transform: {
+					x: operation.status.idle ? 0 : transform.x + this.scrollShift$.value.x,
+					y: operation.status.idle ? 0 : transform.y + this.scrollShift$.value.y,
+				},
+				isDragging,
+			}
+
+			untracked(() => {
+				for (const listener of this.listeners) {
+					listener()
+				}
+			})
+		})
+
+		const event = (canceled = false): DragEvent => {
+			const operation = this.dragOperation
+			return {
+				active: operation.source ? { id: operation.source.id, data: operation.source.data } : null,
+				over: operation.target ? { id: operation.target.id, data: operation.target.data } : null,
+				transform: { ...operation.transform },
+				isDragging: operation.status.dragging,
+				canceled,
+			}
+		}
+
+		this.monitor.addEventListener('dragstart', () => this.options.onDragStart?.(event()))
+		this.monitor.addEventListener('dragover', () => this.options.onDragOver?.(event()))
+		// dragmove fires before position is committed, so deliver the committed snapshot.
+		this.monitor.addEventListener('dragmove', () =>
+			queueMicrotask(() =>
+				queueMicrotask(() => {
+					if (!this.destroyed && this.dragOperation.status.dragging) {
+						this.options.onDragMove?.(event())
+					}
+				}),
+			),
+		)
+
+		this.monitor.addEventListener('dragend', ({ canceled }) => {
+			this.stopAutoScroll()
+			if (canceled) {
+				this.options.onDragCancel?.(event(true))
+			} else {
+				this.options.onDragEnd?.(event())
+			}
+		})
+	}
+	getSnapshot = (): DndSnapshot => this.snapshot
+	subscribe = (listener: () => void) => {
+		this.listeners.add(listener)
+		return () => {
+			this.listeners.delete(listener)
+		}
+	}
+	registerDraggable(options: DraggableOptions) {
+		if (this.registry.draggables.has(options.id)) {
+			throw new Error(`Duplicate draggable id: ${options.id}`)
+		}
+
+		const source: PanDraggable = new PanDraggable(
+			{
+				...options,
+				register: false,
+				effects: () => [() => this.registry.sensors.get(PanSensor)!.bind(source)],
+			},
+			this,
+		)
+
+		source.register()
+		return source
+	}
+	registerDroppable(options: DroppableOptions) {
+		if (this.registry.droppables.has(options.id)) {
+			throw new Error(`Duplicate droppable id: ${options.id}`)
+		}
+
+		const target = new Droppable(
+			{
+				...options,
+				register: false,
+				accept: options.accept
+					? (source) => options.accept!({ id: source.id, data: source.data })
+					: undefined,
+				collisionDetector: (input) =>
+					input.dragOperation.source?.id === input.droppable.id
+						? null
+						: (this.options.collisionDetection ?? defaultCollisionDetection)(input),
+			},
+			this,
+		)
+
+		target.register()
+		return target
+	}
+	refresh() {
+		batch(() => {
+			for (const droppable of this.registry.droppables) {
+				droppable.shape = measure(this.droppableNodes.get(droppable.id)) ?? undefined
+			}
+		})
+
+		this.collisionObserver.forceUpdate()
+	}
+	cancel() {
+		this.stopAutoScroll()
+		this.actions.stop({ canceled: true })
+	}
+	startAutoScroll() {
+		if (this.scrollTimer || !this.options.autoScroll) {
+			return
+		}
+
+		this.scrollTimer = setInterval(() => {
+			const scroll = this.options.autoScroll
+			if (!scroll || !this.dragOperation.status.dragging) {
+				this.stopAutoScroll()
+				return
+			}
+
+			const bounds = scroll.bounds()
+			if (!bounds) {
+				return
+			}
+
+			const horizontal = scroll.axis === 'x'
+			const start = horizontal ? bounds.x : bounds.y
+			const size = horizontal ? bounds.width : bounds.height
+			const point = horizontal
+				? this.dragOperation.position.current.x
+				: this.dragOperation.position.current.y
+
+			const threshold = Math.min(scroll.threshold ?? 40, size / 2)
+			if (threshold <= 0 || point < start || point > start + size) {
+				return
+			}
+
+			const strength =
+				point < start + threshold
+					? -(1 - (point - start) / threshold)
+					: point > start + size - threshold
+						? 1 - (start + size - point) / threshold
+						: 0
+
+			const next = Math.max(
+				0,
+				Math.min(scroll.maxOffset(), scroll.offsetRef.current + strength * (scroll.speed ?? 12)),
+			)
+
+			if (next !== scroll.offsetRef.current) {
+				const before = scroll.offsetRef.current
+				scroll.scrollTo(next)
+				const delta = scroll.offsetRef.current - before
+				const shift = this.scrollShift$.peek()
+				this.scrollShift$.value = {
+					x: shift.x + (horizontal ? delta : 0),
+					y: shift.y + (horizontal ? 0 : delta),
+				}
+
+				this.refresh()
+			}
+		}, 16)
+	}
+	private stopAutoScroll() {
+		if (this.scrollTimer) {
+			clearInterval(this.scrollTimer)
+		}
+
+		this.scrollTimer = undefined
+	}
+	disposeController() {
+		this.destroyed = true
+		this.cancel()
+		this.dispose()
+		this.listeners.clear()
+		this.draggableNodes.clear()
+		this.droppableNodes.clear()
+		this.destroy()
+	}
+}

package/src/geometry.macos.test.ts

@@ -0,0 +1,34 @@
+import { it, expect, vi } from 'vitest'
+import { measure, dragStyle } from './geometry.macos'
+
+it('uses converted window bounds and normalizes unflipped coordinates', () => {
+	const content = {
+		bounds: { origin: { x: 5, y: 10 }, size: { width: 500, height: 400 } },
+		isFlipped: false,
+	}
+
+	const convertRectToView = vi.fn(() => ({
+		origin: { x: 25, y: 310 },
+		size: { width: 100, height: 40 },
+	}))
+
+	const view = { window: { contentView: content }, bounds: {}, convertRectToView }
+	const rect = measure(view)!
+	expect(rect.boundingRectangle).toMatchObject({ left: 20, top: 60, width: 100, height: 40 })
+	expect(convertRectToView).toHaveBeenCalledWith(view.bounds, content)
+	content.isFlipped = true
+	expect(measure(view)!.boundingRectangle.top).toBe(300)
+})
+
+it('ignores detached and zero-size views and exposes reversible drag styles', () => {
+	expect(measure({})).toBeNull()
+	expect(
+		measure({
+			window: { contentView: {} },
+			convertRectToView: () => ({ size: { width: 0, height: 10 } }),
+		}),
+	).toBeNull()
+
+	expect(dragStyle(12, 30)).toEqual({ translateX: 12, translateY: 30, zIndex: 1 })
+	expect(dragStyle(0, 0)).toEqual({ translateX: 0, translateY: 0, zIndex: 0 })
+})

package/src/geometry.macos.ts

@@ -0,0 +1,32 @@
+import { Rectangle } from '@dnd-kit/geometry'
+
+/** AppKit points in top-left window-content coordinates, independent of parent and scroll offsets. */
+export function measure(view: any): Rectangle | null {
+	const content = view?.window?.contentView
+	if (!content || !view?.convertRectToView) {
+		return null
+	}
+
+	const frame = view.convertRectToView(view.bounds, content)
+	if (frame.size.width <= 0 || frame.size.height <= 0) {
+		return null
+	}
+
+	const bounds = content.bounds
+	const flipped = typeof content.isFlipped === 'function' ? content.isFlipped() : content.isFlipped
+	const x = Number(frame.origin.x) - Number(bounds.origin.x)
+	const y = flipped
+		? Number(frame.origin.y) - Number(bounds.origin.y)
+		: Number(bounds.origin.y) +
+			Number(bounds.size.height) -
+			Number(frame.origin.y) -
+			Number(frame.size.height)
+
+	return frame.size.width > 0 && frame.size.height > 0
+		? new Rectangle(x, y, Number(frame.size.width), Number(frame.size.height))
+		: null
+}
+
+export function dragStyle(x: number, y: number): Record<string, number | string> {
+	return { translateX: x, translateY: y, zIndex: x || y ? 1 : 0 }
+}

package/src/geometry.ts

@@ -0,0 +1,18 @@
+import { Rectangle } from '@dnd-kit/geometry'
+
+/** NativeScript screen coordinates and dimensions are in DIPs. */
+export function measure(element: any): Rectangle | null {
+	if (!element || element.isLoaded === false) {
+		return null
+	}
+
+	const point = element.getLocationOnScreen?.()
+	const size = element.getActualSize?.()
+	return point && size && size.width > 0 && size.height > 0
+		? new Rectangle(point.x, point.y, size.width, size.height)
+		: null
+}
+
+export function dragStyle(x: number, y: number): Record<string, number | string> {
+	return { translateX: x, translateY: y, zIndex: x || y ? 1 : 0 }
+}

package/src/geometry.web.ts

@@ -0,0 +1,14 @@
+import { Rectangle } from '@dnd-kit/geometry'
+
+export function measure(element: any): Rectangle | null {
+	if (!element?.isConnected) {
+		return null
+	}
+
+	const rect = element.getBoundingClientRect()
+	return rect.width > 0 && rect.height > 0 ? Rectangle.from(rect) : null
+}
+
+export function dragStyle(x: number, y: number): Record<string, number | string> {
+	return { transform: `translate(${x}px, ${y}px)`, touchAction: 'none', zIndex: x || y ? 1 : 0 }
+}

package/src/index.macos.ts

@@ -0,0 +1,23 @@
+import './abort.macos'
+
+export {
+	DndContext,
+	useDndContext,
+	useDraggable,
+	useDroppable,
+	SortableContext,
+	useSortable,
+	SortableList,
+} from './components'
+
+export { arrayMove } from './sort'
+export {
+	closestCenter,
+	closestCorners,
+	pointerIntersection,
+	shapeIntersection,
+	defaultCollisionDetection,
+} from '@dnd-kit/collision'
+
+export type { CollisionDetector } from '@dnd-kit/abstract'
+export type * from './props'

package/src/index.ts

@@ -0,0 +1,21 @@
+export {
+	DndContext,
+	useDndContext,
+	useDraggable,
+	useDroppable,
+	SortableContext,
+	useSortable,
+	SortableList,
+} from './components'
+
+export { arrayMove } from './sort'
+export {
+	closestCenter,
+	closestCorners,
+	pointerIntersection,
+	shapeIntersection,
+	defaultCollisionDetection,
+} from '@dnd-kit/collision'
+
+export type { CollisionDetector } from '@dnd-kit/abstract'
+export type * from './props'

package/src/index.web.ts

@@ -0,0 +1,21 @@
+export {
+	DndContext,
+	useDndContext,
+	useDraggable,
+	useDroppable,
+	SortableContext,
+	useSortable,
+	SortableList,
+} from './components'
+
+export { arrayMove } from './sort'
+export {
+	closestCenter,
+	closestCorners,
+	pointerIntersection,
+	shapeIntersection,
+	defaultCollisionDetection,
+} from '@dnd-kit/collision'
+
+export type { CollisionDetector } from '@dnd-kit/abstract'
+export type * from './props'

package/src/props.ts

@@ -0,0 +1,83 @@
+import type { CollisionDetector, Data, UniqueIdentifier } from '@dnd-kit/abstract'
+import type { PanEvent, ViewProps } from '@octane-xplat/ui'
+
+export type DndId = UniqueIdentifier
+export interface DndItem {
+	id: DndId
+	data: Data
+}
+
+export interface DndSnapshot {
+	active: DndItem | null
+	over: DndItem | null
+	transform: { x: number; y: number }
+	isDragging: boolean
+}
+
+export interface DragEvent extends DndSnapshot {
+	canceled: boolean
+}
+
+/** Supply current viewport bounds and offsets; scrollTo must update offsetRef synchronously. */
+export interface AutoScroll {
+	bounds(): { x: number; y: number; width: number; height: number } | null
+	offsetRef: { current: number }
+	maxOffset(): number
+	scrollTo(offset: number): void
+	axis?: 'x' | 'y'
+	threshold?: number
+	speed?: number
+}
+
+export interface DndContextProps {
+	children?: ViewProps['children']
+	collisionDetection?: CollisionDetector
+	autoScroll?: AutoScroll
+	onDragStart?: (event: DragEvent) => void
+	onDragMove?: (event: DragEvent) => void
+	onDragOver?: (event: DragEvent) => void
+	onDragEnd?: (event: DragEvent) => void
+	onDragCancel?: (event: DragEvent) => void
+}
+
+export interface DraggableOptions {
+	id: DndId
+	data?: Data
+	disabled?: boolean
+}
+
+export interface DroppableOptions extends DraggableOptions {
+	accept?: (source: DndItem) => boolean
+}
+
+export interface DraggableResult {
+	ref(element: any): void
+	onPan(event: PanEvent): void
+	isDragging: boolean
+	transform: { x: number; y: number }
+	/** Spread into View with ref and onPan. */
+	style: NonNullable<ViewProps['style']>
+}
+
+export interface DroppableResult {
+	ref(element: any): void
+	isOver: boolean
+}
+
+export interface SortableResult extends DraggableResult {
+	isOver: boolean
+}
+
+export interface SortableContextProps {
+	items: readonly DndId[]
+	children?: ViewProps['children']
+}
+
+export interface SortableListProps<T extends DndId = DndId> extends Omit<ViewProps, 'children'> {
+	items: readonly T[]
+	renderItem(id: T, index: number): ViewProps['children']
+	/** Called after a successful drop within this list; caller owns the item order. */
+	onReorder(items: T[], event: DragEvent): void
+	disabled?: boolean
+	dnd?: Omit<DndContextProps, 'children'>
+}

package/src/sort.ts

@@ -0,0 +1,19 @@
+/** Return a new order. Invalid indices leave the order unchanged. */
+export function arrayMove<T>(items: readonly T[], from: number, to: number): T[] {
+	const result = [...items]
+	if (
+		!Number.isInteger(from) ||
+		!Number.isInteger(to) ||
+		from < 0 ||
+		to < 0 ||
+		from >= items.length ||
+		to >= items.length ||
+		from === to
+	) {
+		return result
+	}
+
+	const [item] = result.splice(from, 1)
+	result.splice(to, 0, item!)
+	return result
+}

package/types/generated/.tsrx-typegen-manifest.json

@@ -0,0 +1,11 @@
+{
+  "version": 1,
+  "files": [
+    "components.d.ts",
+    "controller.d.ts",
+    "geometry.web.d.ts",
+    "index.d.ts",
+    "props.d.ts",
+    "sort.d.ts"
+  ]
+}

package/types/generated/components.d.ts

@@ -0,0 +1,13 @@
+import type { DndId, DndContextProps, DndSnapshot, DraggableOptions, DraggableResult, DroppableOptions, DroppableResult, SortableContextProps, SortableResult, SortableListProps } from './props.js';
+/** Scope registrations to one renderer root. Nested roots need their own DndContext. */
+export declare function DndContext(props: DndContextProps): import("octane/jsx-runtime").JSX.Element;
+/** Subscribes independently so retained native children observe drag state. */
+export declare function useDndContext(): DndSnapshot;
+export declare function useDraggable(options: DraggableOptions): DraggableResult;
+export declare function useDroppable(options: DroppableOptions): DroppableResult;
+/** Declares list membership for useSortable; it does not own item order. */
+export declare function SortableContext(props: SortableContextProps): import("octane/jsx-runtime").JSX.Element;
+/** Bind and spread onPan/style onto one View. Order changes only when the owner commits a drop. */
+export declare function useSortable(options: DraggableOptions): SortableResult;
+/** A controlled sortable list. Provide stable unique ids and save the order in onReorder. */
+export declare function SortableList<T extends DndId>(props: SortableListProps<T>): import("octane/jsx-runtime").JSX.Element;

package/types/generated/controller.d.ts

@@ -0,0 +1,32 @@
+import { DragDropManager, Draggable, Droppable } from '@dnd-kit/abstract';
+import type { PanEvent } from '@octane-xplat/ui';
+import type { DndContextProps, DndSnapshot, DraggableOptions, DroppableOptions } from './props.js';
+declare class PanDraggable extends Draggable {
+    onPan?: (event: PanEvent) => void;
+}
+/** One controller per DndContext; no global registry or cross-root context assumptions. */
+export declare class DndController extends DragDropManager<PanDraggable, Droppable> {
+    options: DndContextProps;
+    readonly draggableNodes: Map<import("@dnd-kit/abstract").UniqueIdentifier, any>;
+    readonly droppableNodes: Map<import("@dnd-kit/abstract").UniqueIdentifier, any>;
+    readonly scrollShift$: import("@dnd-kit/state").Signal<{
+        x: number;
+        y: number;
+    }>;
+    private listeners;
+    private snapshot;
+    private dispose;
+    private scrollTimer;
+    private destroyed;
+    constructor();
+    getSnapshot: () => DndSnapshot;
+    subscribe: (listener: () => void) => () => void;
+    registerDraggable(options: DraggableOptions): PanDraggable;
+    registerDroppable(options: DroppableOptions): Droppable<import("@dnd-kit/abstract").Data, this>;
+    refresh(): void;
+    cancel(): void;
+    startAutoScroll(): void;
+    private stopAutoScroll;
+    disposeController(): void;
+}
+export {};

package/types/generated/geometry.web.d.ts

@@ -0,0 +1,3 @@
+import { Rectangle } from '@dnd-kit/geometry';
+export declare function measure(element: any): Rectangle | null;
+export declare function dragStyle(x: number, y: number): Record<string, number | string>;

package/types/generated/index.d.ts

@@ -0,0 +1,5 @@
+export { DndContext, useDndContext, useDraggable, useDroppable, SortableContext, useSortable, SortableList, } from './components.js';
+export { arrayMove } from './sort.js';
+export { closestCenter, closestCorners, pointerIntersection, shapeIntersection, defaultCollisionDetection, } from '@dnd-kit/collision';
+export type { CollisionDetector } from '@dnd-kit/abstract';
+export type * from './props.js';