@octane-xplat/dnd-kit 0.0.1 → 0.11.0

package/dist/native/controller.js

@@ -0,0 +1,236 @@
+import { measure } from "./geometry.js";
+import { DragDropManager, Draggable, Droppable, Sensor } from "@dnd-kit/abstract";
+import { defaultCollisionDetection } from "@dnd-kit/collision";
+import { batch, effect, signal, untracked } from "@dnd-kit/state";
+//#region src/controller.ts
+var PanDraggable = class extends Draggable {
+	onPan;
+};
+/** Xplat View supplies normalized pan input; the abstract core owns the drag lifecycle. */
+var PanSensor = class extends Sensor {
+	bind(input) {
+		const source = input;
+		let origin = null;
+		let bound = true;
+		let base = {
+			x: 0,
+			y: 0
+		};
+		let queue = Promise.resolve();
+		const handle = async (event) => {
+			const manager = this.manager;
+			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
+			} });
+			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.cancel();
+				console.error("[dnd-kit] pan failed", error);
+			});
+		};
+		return () => {
+			bound = false;
+			source.onPan = void 0;
+			origin = null;
+		};
+	}
+};
+/** One controller per DndContext; no global registry or cross-root context assumptions. */
+var DndController = class extends DragDropManager {
+	options = {};
+	draggableNodes = /* @__PURE__ */ new Map();
+	droppableNodes = /* @__PURE__ */ new Map();
+	scrollShift$ = signal({
+		x: 0,
+		y: 0
+	});
+	listeners = /* @__PURE__ */ new Set();
+	snapshot = {
+		active: null,
+		over: null,
+		transform: {
+			x: 0,
+			y: 0
+		},
+		isDragging: false
+	};
+	dispose;
+	scrollTimer;
+	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) => {
+			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()));
+		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 = () => this.snapshot;
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	};
+	registerDraggable(options) {
+		if (this.registry.draggables.has(options.id)) throw new Error(`Duplicate draggable id: ${options.id}`);
+		const source = new PanDraggable({
+			...options,
+			register: false,
+			effects: () => [() => this.registry.sensors.get(PanSensor).bind(source)]
+		}, this);
+		source.register();
+		return source;
+	}
+	registerDroppable(options) {
+		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
+			}) : void 0,
+			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)) ?? void 0;
+		});
+		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);
+	}
+	stopAutoScroll() {
+		if (this.scrollTimer) clearInterval(this.scrollTimer);
+		this.scrollTimer = void 0;
+	}
+	disposeController() {
+		this.destroyed = true;
+		this.cancel();
+		this.dispose();
+		this.listeners.clear();
+		this.draggableNodes.clear();
+		this.droppableNodes.clear();
+		this.destroy();
+	}
+};
+//#endregion
+export { DndController };

package/dist/native/geometry.js

@@ -0,0 +1,18 @@
+import { Rectangle } from "@dnd-kit/geometry";
+//#region src/geometry.ts
+/** NativeScript screen coordinates and dimensions are in DIPs. */
+function measure(element) {
+	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;
+}
+function dragStyle(x, y) {
+	return {
+		translateX: x,
+		translateY: y,
+		zIndex: x || y ? 1 : 0
+	};
+}
+//#endregion
+export { dragStyle, measure };

package/dist/native/index.js

@@ -0,0 +1,4 @@
+import { arrayMove } from "./sort.js";
+import { DndContext, SortableContext, SortableList, useDndContext, useDraggable, useDroppable, useSortable } from "./components.js";
+import { closestCenter, closestCorners, defaultCollisionDetection, pointerIntersection, shapeIntersection } from "@dnd-kit/collision";
+export { DndContext, SortableContext, SortableList, arrayMove, closestCenter, closestCorners, defaultCollisionDetection, pointerIntersection, shapeIntersection, useDndContext, useDraggable, useDroppable, useSortable };

package/dist/native/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "8f78a056-8239-418e-a4ef-bc1f8e864b18",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/native/sort.js

@@ -0,0 +1,11 @@
+//#region src/sort.ts
+/** Return a new order. Invalid indices leave the order unchanged. */
+function arrayMove(items, from, to) {
+	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;
+}
+//#endregion
+export { arrayMove };

package/dist/web/components.js

@@ -0,0 +1,215 @@
+import { dragStyle } from "./geometry.web.js";
+import { DndController } from "./controller.js";
+import { arrayMove } from "./sort.js";
+import { createContext, createScopedElement, createScopedValue, hookSlots, useContext, useEffect, useRef, useSyncExternalStore, withSlot } from "octane";
+import { createElementFromConfig, deferRecord, isRenderCall, memoPublish, memoSlot, memoTake0, memoTake2, memoTake3 } from "octane/internal/client";
+import { View, useMeasure } from "@octane-xplat/ui";
+//#region src/components.tsx
+var _hs$ = /* @__PURE__ */ hookSlots(27);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
+var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
+var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
+var _h$9 = /* @__PURE__ */ Symbol(_hs$ + 9);
+var _h$10 = /* @__PURE__ */ Symbol(_hs$ + 10);
+var _h$11 = /* @__PURE__ */ Symbol(_hs$ + 11);
+var _h$12 = /* @__PURE__ */ Symbol(_hs$ + 12);
+var _h$13 = /* @__PURE__ */ Symbol(_hs$ + 13);
+var _h$14 = /* @__PURE__ */ Symbol(_hs$ + 14);
+var _h$15 = /* @__PURE__ */ Symbol(_hs$ + 15);
+var _h$16 = /* @__PURE__ */ Symbol(_hs$ + 16);
+var _h$17 = /* @__PURE__ */ Symbol(_hs$ + 17);
+var _h$18 = /* @__PURE__ */ Symbol(_hs$ + 18);
+var _h$19 = /* @__PURE__ */ Symbol(_hs$ + 19);
+var _h$20 = /* @__PURE__ */ Symbol(_hs$ + 20);
+var _h$21 = /* @__PURE__ */ Symbol(_hs$ + 21);
+var _h$22 = /* @__PURE__ */ Symbol(_hs$ + 22);
+function SortableContext$record(props) {
+	return createScopedElement(SortContextProvider, { value: props.items }, () => props.children, "c:a77cf23e");
+}
+var _h$23 = /* @__PURE__ */ Symbol(_hs$ + 23);
+var _h$24 = /* @__PURE__ */ Symbol(_hs$ + 24);
+var _h$25 = /* @__PURE__ */ Symbol(_hs$ + 25);
+var _h$26 = /* @__PURE__ */ Symbol(_hs$ + 26);
+function SortableRow$record(props, sortable) {
+	return createScopedElement(View, {
+		ref: sortable.ref,
+		onPan: sortable.onPan,
+		style: sortable.style
+	}, () => props.list.renderItem(props.id, props.index), "c:8c6475d9");
+}
+function SortableList$record(dnd, items, onReorder, props, viewProps) {
+	return createScopedElement(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);
+		}
+	}, () => createScopedValue(() => createScopedElement(SortableContext, { items }, () => createScopedValue(() => createScopedElement(View, { ...viewProps }, () => items.map((id, index) => createElementFromConfig("c:77195ea5", SortableRow, {
+		key: id,
+		id,
+		index,
+		list: props
+	})), "c:f6688f5f")), "c:75c97215")), "c:ad5a2f41");
+}
+var Context = /* @__PURE__ */ createContext(null);
+var ContextProvider = Context;
+var SortContext = /* @__PURE__ */ createContext(null);
+var SortContextProvider = SortContext;
+function DndContext(props) {
+	const ref = useRef(null, _h$0);
+	if (!ref.current) ref.current = new DndController();
+	const controller = ref.current;
+	controller.options = props;
+	useEffect(() => () => controller.disposeController(), [controller], _h$1);
+	return createScopedElement(ContextProvider, { value: controller }, () => props.children, "c:2162dbab");
+}
+function useController() {
+	const controller = useContext(Context);
+	if (!controller) throw new Error("Drag and drop hooks require DndContext");
+	return controller;
+}
+function useDndContext() {
+	const controller = withSlot(_h$2, useController);
+	return useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot, _h$3);
+}
+function useDraggable(options) {
+	let __hks, __hkd0, __hkd1, __hkd2, __hke, __hks$, __hke$;
+	const controller = withSlot(_h$4, useController);
+	const snapshot = withSlot(_h$5, useDndContext);
+	const entity = useRef(null, _h$6);
+	const node = useRef(null, _h$7);
+	const latest = useRef(options, _h$8);
+	latest.current = options;
+	const measurement = withSlot(_h$9, 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], _h$10);
+	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
+	], _h$11);
+	const ref = (__hkd0 = controller, __hkd1 = options.id, __hkd2 = measurement.ref, __hks = memoSlot(_h$12, "useCallback"), __hke = memoTake3(__hks, __hkd0, __hkd1, __hkd2), __hke === null ? memoPublish(__hks, (element) => {
+		node.current = element;
+		measurement.ref(element);
+		if (element) controller.draggableNodes.set(options.id, element);
+		else controller.draggableNodes.delete(options.id);
+	}, __hkd0, __hkd1, __hkd2) : __hke.value);
+	const onPan = (__hks$ = memoSlot(_h$13, "useCallback"), __hke$ = memoTake0(__hks$), __hke$ === null ? memoPublish(__hks$, (event) => entity.current?.onPan?.(event)) : __hke$.value);
+	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)
+	};
+}
+function useDroppable(options) {
+	let __hks$2, __hkd0$, __hkd1$, __hkd2$, __hke$2;
+	const controller = withSlot(_h$14, useController);
+	const snapshot = withSlot(_h$15, useDndContext);
+	const entity = useRef(null, _h$16);
+	const node = useRef(null, _h$17);
+	const latest = useRef(options, _h$18);
+	latest.current = options;
+	const measurement = withSlot(_h$19, 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], _h$20);
+	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
+		}) : void 0;
+		controller.refresh();
+	}, [
+		controller,
+		options.data,
+		options.disabled,
+		options.accept,
+		controller.options.collisionDetection,
+		measurement.bounds
+	], _h$21);
+	return {
+		ref: (__hkd0$ = controller, __hkd1$ = options.id, __hkd2$ = measurement.ref, __hks$2 = memoSlot(_h$22, "useCallback"), __hke$2 = memoTake3(__hks$2, __hkd0$, __hkd1$, __hkd2$), __hke$2 === null ? memoPublish(__hks$2, (element) => {
+			node.current = element;
+			measurement.ref(element);
+			if (element) controller.droppableNodes.set(options.id, element);
+			else controller.droppableNodes.delete(options.id);
+		}, __hkd0$, __hkd1$, __hkd2$) : __hke$2.value),
+		isOver: snapshot.isDragging && snapshot.over?.id === options.id
+	};
+}
+function SortableContext(props, __renderScope = void 0) {
+	if (new Set(props.items).size !== props.items.length) throw new Error("SortableContext requires unique item ids");
+	return isRenderCall(__renderScope) ? SortableContext$record(props) : deferRecord(SortableContext$record, props);
+}
+function useSortable(options) {
+	let __hks$3, __hkd0$2, __hkd1$2, __hke$3;
+	if (!useContext(SortContext)?.includes(options.id)) throw new Error("useSortable requires membership in SortableContext");
+	const drag = withSlot(_h$23, useDraggable, options);
+	const drop = withSlot(_h$24, useDroppable, options);
+	const ref = (__hkd0$2 = drag.ref, __hkd1$2 = drop.ref, __hks$3 = memoSlot(_h$25, "useCallback"), __hke$3 = memoTake2(__hks$3, __hkd0$2, __hkd1$2), __hke$3 === null ? memoPublish(__hks$3, (element) => {
+		drag.ref(element);
+		drop.ref(element);
+	}, __hkd0$2, __hkd1$2) : __hke$3.value);
+	return {
+		...drag,
+		ref,
+		isOver: drop.isOver
+	};
+}
+function SortableRow(props, __renderScope$ = void 0) {
+	const sortable = withSlot(_h$26, useSortable, {
+		id: props.id,
+		disabled: props.list.disabled
+	});
+	return isRenderCall(__renderScope$) ? SortableRow$record(props, sortable) : deferRecord(SortableRow$record, props, sortable);
+}
+function SortableList(props, __renderScope$2 = void 0) {
+	const { items, renderItem: _renderItem, onReorder, disabled: _disabled, dnd, ...viewProps } = props;
+	return isRenderCall(__renderScope$2) ? SortableList$record(dnd, items, onReorder, props, viewProps) : deferRecord(SortableList$record, dnd, items, onReorder, props, viewProps);
+}
+//#endregion
+export { DndContext, SortableContext, SortableList, useDndContext, useDraggable, useDroppable, useSortable };