react-native-layout-dnd 0.1.0-alpha.0

package/src/pointer/listTarget.ts

@@ -0,0 +1,56 @@
+import { screenToContent } from '../adapters/coordinates';
+import type { ListLocation } from '../contracts';
+import { computeListIndex } from '../engine/list';
+import { findListTargetIndex } from '../engine/listIndex';
+import type { DndMotion, ListRegistration } from '../runtime/dndRuntime';
+import { rectContains } from './geometry';
+
+/** Target from committed order; candidate reflow must not move its own thresholds. */
+export function listTarget(
+  state: DndMotion,
+  registrations: ReadonlyMap<
+    string,
+    ListRegistration & { layoutVersion: number }
+  >,
+): ListLocation | null {
+  if (!rectContains(state.root, state.pointer.x, state.pointer.y)) return null;
+  for (const measured of state.zones) {
+    const registration = registrations.get(measured.zoneId);
+    if (
+      !registration ||
+      registration.revision !== state.revision ||
+      registration.layout.revision !== state.revision ||
+      registration.layoutVersion !== measured.layoutVersion ||
+      !rectContains(measured.viewport.rect, state.pointer.x, state.pointer.y)
+    )
+      continue;
+    const vertical = registration.orientation === 'vertical';
+    const center = {
+      x: state.pointer.x - state.grip.x + state.width / 2,
+      y: state.pointer.y - state.grip.y + state.height / 2,
+    };
+    const content = screenToContent(
+      center,
+      {
+        viewport: measured.viewport,
+        scrollOffset: vertical
+          ? { x: 0, y: measured.offset }
+          : { x: measured.offset, y: 0 },
+      },
+      { revision: state.revision },
+    );
+    if (!content.valid) return null;
+    const mainAxisCenter = vertical ? content.value.y : content.value.x;
+    const index = registration.targetIndex
+      ? findListTargetIndex(
+          registration.targetIndex,
+          state.itemId,
+          mainAxisCenter,
+        )
+      : computeListIndex(registration.layout, state.itemId, mainAxisCenter);
+    return index === null
+      ? null
+      : { kind: 'list', zoneId: measured.zoneId, index };
+  }
+  return null;
+}

package/src/pointer/motion.ts

@@ -0,0 +1,66 @@
+import type { ValidationIssue } from '../types';
+
+export type GridMotionConfig = {
+  /** Duration in milliseconds for item movement and preview settling. Defaults to 180. */
+  durationMs?: number;
+  /** Respect the device accessibility setting by default. */
+  reduceMotion?: 'system' | 'always' | 'never';
+};
+
+type ResolvedGridMotionConfig = Required<GridMotionConfig>;
+
+export const DEFAULT_GRID_MOTION: Readonly<ResolvedGridMotionConfig> =
+  Object.freeze({ durationMs: 180, reduceMotion: 'system' });
+
+type GridMotionResult =
+  | { valid: true; motion: ResolvedGridMotionConfig }
+  | { valid: false; issues: ValidationIssue[] };
+
+/** Validate before sharing animation settings with the UI runtime. */
+export function resolveGridMotion(value: unknown): GridMotionResult {
+  const fail = (message: string): GridMotionResult => ({
+    valid: false,
+    issues: [{ code: 'invalid-configuration', message }],
+  });
+  if (value === undefined)
+    return { valid: true, motion: { ...DEFAULT_GRID_MOTION } };
+  if (!value || typeof value !== 'object' || Array.isArray(value))
+    return fail('motion must be an object with durationMs and reduceMotion.');
+  const config = value as Record<string, unknown>;
+  if (
+    Object.keys(config).some(
+      key => key !== 'durationMs' && key !== 'reduceMotion',
+    )
+  )
+    return fail('motion supports only durationMs and reduceMotion.');
+
+  const durationMs =
+    config.durationMs === undefined
+      ? DEFAULT_GRID_MOTION.durationMs
+      : config.durationMs;
+  if (
+    typeof durationMs !== 'number' ||
+    !Number.isFinite(durationMs) ||
+    durationMs < 0
+  )
+    return fail('motion.durationMs must be a finite non-negative number.');
+
+  const reduceMotion =
+    config.reduceMotion === undefined
+      ? DEFAULT_GRID_MOTION.reduceMotion
+      : config.reduceMotion;
+  if (
+    reduceMotion !== 'system' &&
+    reduceMotion !== 'always' &&
+    reduceMotion !== 'never'
+  )
+    return fail('motion.reduceMotion must be system, always or never.');
+
+  return {
+    valid: true,
+    motion: {
+      durationMs: reduceMotion === 'always' ? 0 : durationMs,
+      reduceMotion,
+    },
+  };
+}

package/src/runtime/dndPresentation.ts

@@ -0,0 +1,113 @@
+import type { LayoutLocation, LayoutRect } from '../contracts';
+
+/**
+ * Only validated numeric geometry crosses into the UI runtime. Coordinates
+ * form one typed array so a zone table crosses runtimes as a single buffer;
+ * the slot map is reused while a zone keeps the same items, so repeated
+ * candidates serialize only the coordinates.
+ */
+export type DndZonePresentation = {
+  /** Prefixed item ID → slot; four coordinates per slot in `rects`. */
+  slots: Readonly<Record<string, number>>;
+  /** x, y, width and height of each slot, in zone content coordinates. */
+  rects: Float64Array;
+};
+
+export type DndPresentation = {
+  token: number;
+  revision: number;
+  zones: Record<string, DndZonePresentation>;
+  /** Last policy-approved preview, usable for motion before JS acknowledges release. */
+  releaseTarget?: {
+    target: LayoutLocation;
+    policyRevision: number;
+    /** Final pointer already validated by JS; controlled state may still be pending. */
+    releasedSeq?: number;
+  };
+};
+
+export const EMPTY_DND_PRESENTATION: DndPresentation = {
+  token: 0,
+  revision: 0,
+  zones: {},
+};
+
+export function presentationRect(
+  presentation: DndPresentation | undefined,
+  zoneId: string,
+  itemId: string,
+): LayoutRect | undefined {
+  'worklet';
+  const zone = presentation?.zones[`#${zoneId}`];
+  if (zone === undefined) return undefined;
+  const slot = zone.slots[`#${itemId}`];
+  if (slot === undefined) return undefined;
+  const offset = slot * 4;
+  return {
+    x: zone.rects[offset],
+    y: zone.rects[offset + 1],
+    width: zone.rects[offset + 2],
+    height: zone.rects[offset + 3],
+  };
+}
+
+/**
+ * Build a zone table from item rects. The previous table's slot map is kept
+ * when it lists exactly these items, so unchanged maps keep their identity.
+ */
+export function createZonePresentation(
+  entries: ReadonlyArray<readonly [itemId: string, rect: LayoutRect]>,
+  previous?: DndZonePresentation | null,
+): DndZonePresentation {
+  let slots = previous?.slots;
+  let count = slots ? Object.keys(slots).length : 0;
+  if (
+    !slots ||
+    count !== entries.length ||
+    entries.some(([itemId]) => slots![`#${itemId}`] === undefined)
+  ) {
+    const next: Record<string, number> = {};
+    count = 0;
+    for (const [itemId] of entries) {
+      const key = `#${itemId}`;
+      if (next[key] === undefined) next[key] = count++;
+    }
+    slots = next;
+  }
+  const rects = new Float64Array(count * 4);
+  for (const [itemId, rect] of entries) {
+    const offset = slots[`#${itemId}`] * 4;
+    rects[offset] = rect.x;
+    rects[offset + 1] = rect.y;
+    rects[offset + 2] = rect.width;
+    rects[offset + 3] = rect.height;
+  }
+  return { slots, rects };
+}
+
+/** Build a zone table from a `#itemId` keyed rect record. */
+export function zonePresentationFromRects(
+  rects: Readonly<Record<string, LayoutRect>>,
+): DndZonePresentation {
+  return createZonePresentation(
+    Object.entries(rects).map(([key, rect]) => [key.slice(1), rect] as const),
+  );
+}
+
+/** Read a zone table back as a `#itemId` keyed rect record. */
+export function zonePresentationRects(
+  zone: DndZonePresentation | undefined,
+): Record<string, LayoutRect> {
+  const result: Record<string, LayoutRect> = {};
+  if (!zone) return result;
+  for (const [key, slot] of Object.entries(zone.slots)) {
+    const offset = slot * 4;
+    result[key] = {
+      x: zone.rects[offset],
+      y: zone.rects[offset + 1],
+      width: zone.rects[offset + 2],
+      height: zone.rects[offset + 3],
+    };
+  }
+  return result;
+}

package/src/runtime/dndRenderStore.ts

@@ -0,0 +1,246 @@
+import type { DndItem, LayoutZone } from '../contracts';
+import type { DndSessionSnapshot } from '../controller/dndSession';
+
+type DndSnapshotSource<T = unknown> = {
+  getSnapshot(): DndSessionSnapshot<T>;
+  subscribe(listener: () => void): () => void;
+};
+
+export type DndZoneSnapshot = {
+  zone: LayoutZone | undefined;
+  display: LayoutZone | undefined;
+  items: readonly DndItem<unknown>[] | undefined;
+  revision: number;
+  displayRevision: number;
+  activeItemId: string | null;
+  scrollEnabled: boolean;
+};
+
+type DndItemSnapshot = {
+  index: number;
+  row?: number;
+  col?: number;
+};
+
+/**
+ * Answers once per drag session whether a zone keeps its native slots in
+ * committed order while `activeItemId` is dragged. Adapters whose mounted set
+ * depends on slot order (windowed lists) answer from their render window.
+ */
+export type RetainSlotsRule = (activeItemId: string) => boolean;
+
+/** Native cells keep their slots during a preview. Shared geometry moves them. */
+function retainNativeSlots(
+  previous: LayoutZone | undefined,
+  next: LayoutZone | undefined,
+): LayoutZone | undefined {
+  if (!previous || !next || previous.kind !== next.kind) return next;
+  if (previous === next) return previous;
+  if (previous.kind === 'list' && next.kind === 'list') {
+    if (
+      previous.orientation !== next.orientation ||
+      previous.itemIds.length !== next.itemIds.length
+    )
+      return next;
+    const ids = new Set(previous.itemIds);
+    return next.itemIds.every(id => ids.has(id)) ? previous : next;
+  }
+  if (previous.kind === 'grid' && next.kind === 'grid') {
+    if (
+      previous.rows !== next.rows ||
+      previous.columns !== next.columns ||
+      previous.placements.length !== next.placements.length
+    )
+      return next;
+    const placements = new Map(
+      previous.placements.map(placement => [placement.itemId, placement]),
+    );
+    return next.placements.every(placement => {
+      const old = placements.get(placement.itemId);
+      return (
+        old &&
+        old.span.rows === placement.span.rows &&
+        old.span.cols === placement.span.cols &&
+        old.placement === placement.placement
+      );
+    })
+      ? previous
+      : next;
+  }
+  return next;
+}
+
+/** Separate React subscriptions from frame-by-frame approved presentation. */
+export class DndRenderStore<T = unknown> {
+  private provider: DndSessionSnapshot<T> | undefined;
+  private zones = new Map<string, DndZoneSnapshot>();
+  private itemIndices = new WeakMap<LayoutZone, Map<string, DndItemSnapshot>>();
+  private items = new Map<string, Map<string, DndItemSnapshot>>();
+  private retainDecisions = new Map<
+    string,
+    { sessionId: string | null; itemId: string; retain: boolean }
+  >();
+
+  constructor(private readonly source: DndSnapshotSource<T>) {}
+
+  getSnapshot = (): DndSessionSnapshot<T> => this.source.getSnapshot();
+
+  getProviderSnapshot = (): DndSessionSnapshot<T> => {
+    const next = this.source.getSnapshot();
+    const previous = this.provider;
+    if (
+      previous &&
+      previous.value === next.value &&
+      previous.phase === next.phase &&
+      previous.sessionId === next.sessionId &&
+      previous.itemId === next.itemId &&
+      previous.sourceZoneId === next.sourceZoneId &&
+      previous.targetZoneId === next.targetZoneId &&
+      previous.validity === next.validity &&
+      previous.disabled === next.disabled
+    )
+      return previous;
+    return (this.provider = next);
+  };
+
+  getZoneSnapshot = (
+    zoneId: string,
+    preserveSlots: boolean | RetainSlotsRule = true,
+  ): DndZoneSnapshot => {
+    const current = this.source.getSnapshot();
+    const zone = current.value?.zones.find(entry => entry.id === zoneId);
+    const items = current.value?.items;
+    const revision = current.value?.revision ?? 0;
+    const key = `${preserveSlots === false ? 'ordered' : 'stable'}:${zoneId}`;
+    const previous = this.zones.get(key);
+    const candidate = current.displayValue?.zones.find(
+      entry => entry.id === zoneId,
+    );
+    const display =
+      current.phase !== 'idle' && this.retainSlots(key, current, preserveSlots)
+        ? retainNativeSlots(
+            previous &&
+              previous.zone === zone &&
+              previous.items === items &&
+              previous.revision === revision
+              ? previous.display
+              : zone,
+            candidate,
+          )
+        : candidate;
+    // The revision of the value the display comes from: candidate geometry is
+    // prepared under the candidate's revision, exactly as the provider asks
+    // the adapter to prepare it for the UI runtime.
+    const displayRevision =
+      display === zone
+        ? revision
+        : display === candidate
+          ? (current.displayValue?.revision ?? revision)
+          : (previous?.displayRevision ?? revision);
+    const next: DndZoneSnapshot = {
+      zone,
+      display,
+      items,
+      revision,
+      displayRevision,
+      activeItemId: current.itemId,
+      scrollEnabled: current.phase === 'idle',
+    };
+    if (
+      previous &&
+      (Object.keys(next) as Array<keyof DndZoneSnapshot>).every(
+        field => previous[field] === next[field],
+      )
+    )
+      return previous;
+    this.zones.set(key, next);
+    return next;
+  };
+
+  /** A rule is consulted once per drag session so its answer cannot flip mid-drag. */
+  private retainSlots(
+    key: string,
+    current: DndSessionSnapshot<T>,
+    preserveSlots: boolean | RetainSlotsRule,
+  ): boolean {
+    if (typeof preserveSlots !== 'function') return preserveSlots;
+    if (current.itemId === null) return true;
+    const decision = this.retainDecisions.get(key);
+    if (
+      decision &&
+      decision.sessionId === current.sessionId &&
+      decision.itemId === current.itemId
+    )
+      return decision.retain;
+    const retain = preserveSlots(current.itemId);
+    this.retainDecisions.set(key, {
+      sessionId: current.sessionId,
+      itemId: current.itemId,
+      retain,
+    });
+    return retain;
+  }
+
+  getItemSnapshot = (
+    zoneId: string,
+    itemId: string,
+  ): DndItemSnapshot | undefined => {
+    const zone = this.source
+      .getSnapshot()
+      .displayValue?.zones.find(entry => entry.id === zoneId);
+    let indices = zone && this.itemIndices.get(zone);
+    if (zone && !indices) {
+      const prepared = new Map<string, DndItemSnapshot>();
+      if (zone.kind === 'list')
+        zone.itemIds.forEach((id, index) => prepared.set(id, { index }));
+      else
+        zone.placements.forEach((entry, index) =>
+          prepared.set(entry.itemId, {
+            index,
+            row: entry.position.row,
+            col: entry.position.col,
+          }),
+        );
+      // Many mounted cells read the same approved display in one notification.
+      // Build its ID index once instead of scanning the zone for every cell.
+      this.itemIndices.set(zone, prepared);
+      indices = prepared;
+    }
+    const next = indices?.get(itemId);
+    let selected = this.items.get(zoneId);
+    if (!next) {
+      selected?.delete(itemId);
+      return undefined;
+    }
+    const previous = selected?.get(itemId);
+    if (
+      previous &&
+      previous.index === next.index &&
+      previous.row === next.row &&
+      previous.col === next.col
+    )
+      return previous;
+    if (!selected) {
+      selected = new Map();
+      this.items.set(zoneId, selected);
+    }
+    selected.set(itemId, next);
+    return next;
+  };
+
+  subscribeSelection<Selection>(
+    get: () => Selection,
+    listener: () => void,
+  ): () => void {
+    let previous = get();
+    return this.source.subscribe(() => {
+      const next = get();
+      if (Object.is(previous, next)) return;
+      previous = next;
+      listener();
+    });
+  }
+
+  subscribeProvider = (listener: () => void): (() => void) =>
+    this.subscribeSelection(this.getProviderSnapshot, listener);
+}