Drag Auto Scroll

'use client';
import * as React from 'react';
import { Draggable } from '@base-ui/react/draggable';
import { DropTarget } from '@base-ui/react/drop-target';
import { DragAutoScroll } from '@base-ui/react/drag-auto-scroll';
import styles from './hero.module.css';

type Zone = 'plain' | 'slow';

interface Task {
  id: string;
  label: string;
}

const taskKind = Draggable.createKind<Task>('task');

const INITIAL_TASKS: Record<Zone, Task[]> = {
  plain: [
    { id: 'plants', label: 'Water the plants' },
    { id: 'reply', label: 'Reply to Alex' },
    { id: 'dentist', label: 'Book a dentist' },
    { id: 'invoice', label: 'Send the invoice' },
    { id: 'sprint', label: 'Plan the sprint' },
    { id: 'bank', label: 'Call the bank' },
    { id: 'groceries', label: 'Buy groceries' },
    { id: 'desk', label: 'Clean the desk' },
    { id: 'flights', label: 'Book the flights' },
    { id: 'draft', label: 'Review the draft' },
    { id: 'budget', label: 'Update the budget' },
    { id: 'standup', label: 'Move the standup' },
    { id: 'keys', label: 'Copy the keys' },
    { id: 'photos', label: 'Sort the photos' },
    { id: 'router', label: 'Reboot the router' },
    { id: 'gift', label: 'Wrap the gift' },
  ],
  slow: [
    { id: 'rent', label: 'Pay the rent' },
    { id: 'resume', label: 'Update resume' },
    { id: 'backup', label: 'Back up the laptop' },
    { id: 'docs', label: 'Read the docs' },
    { id: 'bug', label: 'Fix the bug' },
    { id: 'tests', label: 'Write the tests' },
    { id: 'team', label: 'Email the team' },
    { id: 'supplies', label: 'Order supplies' },
    { id: 'changelog', label: 'Write the changelog' },
    { id: 'deps', label: 'Bump the deps' },
    { id: 'flaky', label: 'Fix the flaky test' },
    { id: 'release', label: 'Tag the release' },
    { id: 'metrics', label: 'Check the metrics' },
    { id: 'onboard', label: 'Onboard the intern' },
    { id: 'retro', label: 'Book the retro' },
    { id: 'archive', label: 'Archive the branch' },
  ],
};

const UPCOMING = ['Renew passport', 'Cancel the trial', 'Refill the coffee', 'Label the boxes'];

// Resolve the insertion slot closest to the pointer, including positions outside
// the currently visible portion of the list.
function resolveDrop(container: HTMLElement, clientY: number): { index: number; slotY: number } {
  // The dragged card's preview is a clone and carries the same `data-card`.
  // Skip it: it follows the pointer and is not a real slot.
  const cards = Array.from(
    container.querySelectorAll<HTMLElement>('[data-card]:not([data-drag-preview])'),
  );
  if (cards.length === 0) {
    return { index: 0, slotY: container.getBoundingClientRect().top };
  }

  const slotYs = [cards[0].getBoundingClientRect().top];
  for (let i = 1; i < cards.length; i += 1) {
    const prev = cards[i - 1].getBoundingClientRect();
    const curr = cards[i].getBoundingClientRect();
    slotYs.push((prev.bottom + curr.top) / 2);
  }
  slotYs.push(cards[cards.length - 1].getBoundingClientRect().bottom);

  let index = 0;
  let bestDy = Infinity;
  for (let i = 0; i < slotYs.length; i += 1) {
    const dy = Math.abs(clientY - slotYs[i]);
    if (dy < bestDy) {
      bestDy = dy;
      index = i;
    }
  }
  return { index, slotY: slotYs[index] };
}

function Grip() {
  return (
    <svg className={styles.Grip} width="8" height="14" viewBox="0 0 8 14" aria-hidden="true">
      <g fill="currentColor">
        <circle cx="2" cy="2" r="1.2" />
        <circle cx="6" cy="2" r="1.2" />
        <circle cx="2" cy="7" r="1.2" />
        <circle cx="6" cy="7" r="1.2" />
        <circle cx="2" cy="12" r="1.2" />
        <circle cx="6" cy="12" r="1.2" />
      </g>
    </svg>
  );
}

function Card({ task, draggable }: { task: Task; draggable?: boolean }) {
  if (!draggable) {
    return (
      <div data-card className={styles.Card}>
        <Grip />
        {task.label}
      </div>
    );
  }
  return (
    <Draggable.Root
      label={task.label}
      kind={taskKind}
      payload={task}
      data-card
      data-id={task.id}
      role="button"
      className={styles.Card}
    >
      <Grip />
      {task.label}
    </Draggable.Root>
  );
}

function DropZone({
  label,
  tasks,
  maxSpeed,
  onInsert,
}: {
  label: string;
  tasks: Task[];
  // Left out on the plain list, so it keeps the engine's default speed.
  maxSpeed?: number;
  onInsert: (task: Task, index: number) => void;
}) {
  const listRef = React.useRef<HTMLDivElement | null>(null);
  // Y offset (in the list's scrolled content) of the line previewing the drop.
  const [dropLineTop, setDropLineTop] = React.useState<number | null>(null);

  const cards = (
    <React.Fragment>
      {tasks.map((task) => (
        <Card key={task.id} task={task} />
      ))}
      {dropLineTop != null && (
        <div className={styles.DropLine} style={{ top: dropLineTop }} aria-hidden="true" />
      )}
    </React.Fragment>
  );
  const scrollRegion =
    maxSpeed === undefined ? (
      <div ref={listRef} className={styles.Cards}>
        {cards}
      </div>
    ) : (
      <DragAutoScroll.Root ref={listRef} className={styles.Cards} maxSpeed={maxSpeed}>
        {cards}
      </DragAutoScroll.Root>
    );

  return (
    <DropTarget.Root
      className={styles.Zone}
      label={label}
      accept={taskKind}
      onDrag={({ location }) => {
        const container = listRef.current;
        if (!container) {
          return;
        }
        const { slotY } = resolveDrop(container, location.current.input.clientY);
        setDropLineTop(slotY - container.getBoundingClientRect().top + container.scrollTop);
      }}
      onDragLeave={() => setDropLineTop(null)}
      onDrop={({ source, location }) => {
        const container = listRef.current;
        if (container) {
          const { index } = resolveDrop(container, location.current.input.clientY);
          onInsert(source.payload, index);
        }
        setDropLineTop(null);
      }}
    >
      <span className={styles.Label}>{label}</span>
      {scrollRegion}
    </DropTarget.Root>
  );
}

export default function AutoScrollBoard() {
  const [tasks, setTasks] = React.useState<Record<Zone, Task[]>>(INITIAL_TASKS);
  // Index into `UPCOMING`, so the tray always holds another card to drag.
  const [handedOut, setHandedOut] = React.useState(0);
  const rootRef = React.useRef<HTMLDivElement | null>(null);
  // Id of the card just dropped; scrolled back into view after the commit.
  const droppedIdRef = React.useRef<string | null>(null);

  const pending: Task = {
    id: `new-${handedOut}`,
    label: UPCOMING[handedOut % UPCOMING.length],
  };

  function insert(zone: Zone, task: Task, index: number) {
    droppedIdRef.current = task.id;
    setTasks((prev) => ({
      ...prev,
      [zone]: [...prev[zone].slice(0, index), task, ...prev[zone].slice(index)],
    }));
    setHandedOut((count) => count + 1);
  }

  // The drop can land the card outside the visible window, since the list
  // reflows around it. Reveal it so the insertion is never invisible.
  React.useEffect(() => {
    const id = droppedIdRef.current;
    if (id == null) {
      return;
    }
    droppedIdRef.current = null;
    rootRef.current?.querySelector(`[data-id="${id}"]`)?.scrollIntoView({ block: 'nearest' });
  }, [tasks]);

  return (
    <DragAutoScroll.Provider>
      <div ref={rootRef} className={styles.Root}>
        <p className={styles.Hint}>
          Drag the card into either list, at the slot you want. The provider enables both; only the
          second list configures its region.
        </p>
        <div className={styles.Tray}>
          <Card task={pending} draggable />
        </div>
        <div className={styles.Columns}>
          <DropZone
            label="Default"
            tasks={tasks.plain}
            onInsert={(task, index) => insert('plain', task, index)}
          />
          <DropZone
            label="maxSpeed={150}"
            tasks={tasks.slow}
            maxSpeed={150}
            onInsert={(task, index) => insert('slow', task, index)}
          />
        </div>
      </div>
    </DragAutoScroll.Provider>
  );
}

'use client';
import * as React from 'react';
import { Draggable } from '@base-ui/react/draggable';
import { DropTarget } from '@base-ui/react/drop-target';
import { DragAutoScroll } from '@base-ui/react/drag-auto-scroll';
import styles from './axis.module.css';

interface Stop {
  id: string;
  label: string;
}

const stopKind = Draggable.createKind<string>('stop');

// Enough stops that the lane overflows its width and is scrollable on mount, so
// dragging toward an edge has somewhere to scroll.
const INITIAL_STOPS: Stop[] = [
  { id: 'wake', label: 'Wake up' },
  { id: 'coffee', label: 'Coffee' },
  { id: 'standup', label: 'Standup' },
  { id: 'review', label: 'Code review' },
  { id: 'lunch', label: 'Lunch' },
  { id: 'design', label: 'Design sync' },
  { id: 'focus', label: 'Focus block' },
  { id: 'errands', label: 'Errands' },
  { id: 'gym', label: 'Gym' },
  { id: 'dinner', label: 'Dinner' },
  { id: 'reading', label: 'Reading' },
  { id: 'sleep', label: 'Sleep' },
];

// Resolve the insertion slot closest to the pointer along the lane. Candidate
// slots sit before the first stop, between consecutive stops (the midpoint of
// each gap), and after the last one.
function resolveDropIndex(track: HTMLElement, clientX: number): number {
  // The dragged stop's preview is a clone injected next to it, and it carries
  // the same `data-stop`. Skip it: it follows the pointer and is not a real slot.
  const stops = Array.from(
    track.querySelectorAll<HTMLElement>('[data-stop]:not([data-drag-preview])'),
  );
  if (stops.length === 0) {
    return 0;
  }

  const slotXs = [stops[0].getBoundingClientRect().left];
  for (let i = 1; i < stops.length; i += 1) {
    const previous = stops[i - 1].getBoundingClientRect();
    const current = stops[i].getBoundingClientRect();
    slotXs.push((previous.right + current.left) / 2);
  }
  slotXs.push(stops[stops.length - 1].getBoundingClientRect().right);

  let index = 0;
  let bestDx = Infinity;
  for (let i = 0; i < slotXs.length; i += 1) {
    const dx = Math.abs(clientX - slotXs[i]);
    if (dx < bestDx) {
      bestDx = dx;
      index = i;
    }
  }
  return index;
}

function Grip() {
  return (
    <svg className={styles.Grip} width="8" height="14" viewBox="0 0 8 14" aria-hidden="true">
      <g fill="currentColor">
        <circle cx="2" cy="2" r="1.2" />
        <circle cx="6" cy="2" r="1.2" />
        <circle cx="2" cy="7" r="1.2" />
        <circle cx="6" cy="7" r="1.2" />
        <circle cx="2" cy="12" r="1.2" />
        <circle cx="6" cy="12" r="1.2" />
      </g>
    </svg>
  );
}

export default function AxisLane() {
  const [stops, setStops] = React.useState(INITIAL_STOPS);
  const trackRef = React.useRef<HTMLDivElement | null>(null);

  function moveStop(id: string, insertIndex: number) {
    setStops((previous) => {
      const sourceIndex = previous.findIndex((stop) => stop.id === id);
      // Dropping immediately before or after the source position is a no-op.
      if (sourceIndex === -1 || insertIndex === sourceIndex || insertIndex === sourceIndex + 1) {
        return previous;
      }
      const stop = previous[sourceIndex];
      const without = previous.filter((entry) => entry.id !== id);
      // Removing the stop shifts indices above the source down by one.
      const adjusted = sourceIndex < insertIndex ? insertIndex - 1 : insertIndex;
      return [...without.slice(0, adjusted), stop, ...without.slice(adjusted)];
    });
  }

  return (
    <div className={styles.Root}>
      <p className={styles.Hint}>
        Drag a stop toward the left or right edge and the lane scrolls to follow. It only scrolls
        sideways, so moving the pointer up or down never scrolls it.
      </p>
      <DragAutoScroll.Root allowedAxis="horizontal" className={styles.Lane}>
        <DropTarget.Root
          ref={trackRef}
          className={styles.Track}
          label="Stop lane"
          accept={stopKind}
          trackDragOver={false}
          onDrop={({ source, location }) => {
            const track = trackRef.current;
            if (track) {
              moveStop(source.payload, resolveDropIndex(track, location.current.input.clientX));
            }
          }}
        >
          {stops.map((stop) => (
            <Draggable.Root
              key={stop.id}
              label={stop.label}
              kind={stopKind}
              payload={stop.id}
              data-stop
              role="button"
              className={styles.Stop}
            >
              <Grip />
              {stop.label}
            </Draggable.Root>
          ))}
        </DropTarget.Root>
      </DragAutoScroll.Root>
    </div>
  );
}

'use client';
import * as React from 'react';
import { Draggable } from '@base-ui/react/draggable';
import { DropTarget } from '@base-ui/react/drop-target';
import { DragAutoScroll } from '@base-ui/react/drag-auto-scroll';
import styles from './canvas.module.css';

interface Pin {
  id: string;
  label: string;
  x: number;
  y: number;
}

const pinKind = Draggable.createKind<string>('pin');

const INITIAL_PINS: Pin[] = [
  { id: 'kickoff', label: 'Kickoff', x: 40, y: 40 },
  { id: 'research', label: 'Research', x: 190, y: 110 },
];

// Well below the visible area, so the only way to reach it is to hold the pointer
// at the bottom edge and let the canvas pan.
const ARCHIVE = { x: 60, y: 520 };

export default function CanvasPan() {
  const [pins, setPins] = React.useState(INITIAL_PINS);
  const [archived, setArchived] = React.useState<string[]>([]);
  const viewportRef = React.useRef<HTMLDivElement | null>(null);
  const contentRef = React.useRef<HTMLDivElement | null>(null);
  const cameraRef = React.useRef({ x: 0, y: 0 });
  const dragStartCameraRef = React.useRef({ x: 0, y: 0 });

  return (
    <div className={styles.Root}>
      <p className={styles.Hint}>
        Drag a pin to the bottom edge and hold still. The canvas has nothing to scroll, so it moves
        its own camera, and the archive scrolls into reach.
      </p>

      <DragAutoScroll.Root
        ref={viewportRef}
        accept={pinKind}
        className={styles.Viewport}
        applyScroll={({ x, y }) => {
          cameraRef.current = { x: cameraRef.current.x + x, y: cameraRef.current.y + y };
          // Written straight to the DOM, not through state: the engine re-resolves
          // what is under the pointer on the frame after this call.
          const content = contentRef.current;
          if (content) {
            content.style.transform = `translate(${-cameraRef.current.x}px, ${-cameraRef.current.y}px)`;
          }
        }}
      >
        <div ref={contentRef} className={styles.Content}>
          <DropTarget.Root
            label="Archive"
            accept={pinKind}
            className={styles.Archive}
            style={{ left: ARCHIVE.x, top: ARCHIVE.y }}
            onDrop={({ source }) => {
              setPins((previous) => previous.filter((pin) => pin.id !== source.payload));
              setArchived((previous) => [...previous, source.payload]);
            }}
          >
            Archive
          </DropTarget.Root>

          {pins.map((pin) => (
            <Draggable.Root
              key={pin.id}
              kind={pinKind}
              payload={pin.id}
              label={pin.label}
              role="button"
              className={styles.Pin}
              style={{ left: pin.x, top: pin.y }}
              onDragStart={() => {
                dragStartCameraRef.current = cameraRef.current;
              }}
              onDragEnd={({ location, canceled, dropTarget }) => {
                if (canceled || dropTarget) {
                  return;
                }
                // The pin must land under the pointer, and the canvas moved
                // underneath it: add the camera's own delta to the pointer's.
                const dx = location.current.input.clientX - location.initial.input.clientX;
                const dy = location.current.input.clientY - location.initial.input.clientY;
                const panX = cameraRef.current.x - dragStartCameraRef.current.x;
                const panY = cameraRef.current.y - dragStartCameraRef.current.y;
                setPins((previous) =>
                  previous.map((entry) =>
                    entry.id === pin.id
                      ? { ...entry, x: entry.x + dx + panX, y: entry.y + dy + panY }
                      : entry,
                  ),
                );
              }}
            >
              {pin.label}
              {/* The preview is a clone of the pin. Keep it inside the board rather
                  than letting it trail off over the page. */}
              <Draggable.ClonedPreview modifiers={Draggable.restrictToElement(viewportRef)} />
            </Draggable.Root>
          ))}
        </div>
      </DragAutoScroll.Root>

      <p className={styles.Hint}>
        Archived: {archived.length > 0 ? archived.join(', ') : 'nothing yet'}
      </p>
    </div>
  );
}