XY Pad

'use client';

import { XYPad } from '@/components/panelui/xy-pad';

export default function XYPadOverview() {
  return (
    <XYPad label="Framing" defaultValue={{ x: 0.32, y: -0.18 }} className="max-w-sm">
      <XYPad.Value />
    </XYPad>
  );
}

'use client';

import { useEffect, useRef, useState } from 'react';
import { XYPad, type XYPadPoint } from '@/components/panelui/xy-pad';

/** Held off centre, the map scrolls at that speed; let go and it stops. */
export default function XYPadJoystick() {
  const [speed, setSpeed] = useState<XYPadPoint>({ x: 0, y: 0 });
  const [offset, setOffset] = useState({ x: 0, y: 0 });
  const live = useRef(speed);
  live.current = speed;

  useEffect(() => {
    let frame = 0;
    let last = performance.now();
    const tick = (now: number) => {
      const seconds = (now - last) / 1000;
      last = now;
      const { x, y } = live.current;
      if (x !== 0 || y !== 0) setOffset((at) => ({ x: at.x - x * 220 * seconds, y: at.y + y * 220 * seconds }));
      frame = requestAnimationFrame(tick);
    };
    frame = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(frame);
  }, []);

  return (
    <div className="flex items-center gap-4">
      <XYPad
        label="Pan"
        snapBack
        grid={6}
        aspect="1 / 1"
        color="warning"
        value={speed}
        onValueChange={setSpeed}
        className="w-44 shrink-0"
      />
      <div
        aria-hidden
        className="relative size-44 shrink-0 overflow-hidden rounded-2xl bg-card ring-1 ring-border"
        style={{
          backgroundImage:
            'linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px)',
          backgroundSize: '28px 28px',
          backgroundPosition: `${offset.x}px ${offset.y}px`,
        }}
      >
        <span
          className="absolute size-3 rounded-full bg-chart-2"
          style={{ left: `calc(30% + ${offset.x % 400}px)`, top: `calc(40% + ${offset.y % 400}px)` }}
        />
        <span
          className="absolute size-3 rounded-full bg-chart-4"
          style={{ left: `calc(70% + ${(offset.x * 1.0) % 400}px)`, top: `calc(65% + ${offset.y % 400}px)` }}
        />
        <span className="absolute inset-0 m-auto size-2 rounded-full ring-2 ring-foreground/60" />
      </div>
    </div>
  );
}

'use client';

import { XYPad } from '@/components/panelui/xy-pad';

export default function XYPadTrail() {
  return (
    <XYPad label="Motion path" trail aspect="1 / 1" color="primary" grid={10} className="max-w-64">
      <XYPad.Value />
    </XYPad>
  );
}

'use client';

import { useState } from 'react';
import { Slider } from '@/components/panelui/slider';
import { XYPad, type XYPadPoint } from '@/components/panelui/xy-pad';

const signed = (v: number) => `${v > 0 ? '+' : v < 0 ? '−' : ''}${Math.abs(v).toFixed(2)}`;

export default function XYPadLinked() {
  const [light, setLight] = useState<XYPadPoint>({ x: -0.45, y: 0.6 });
  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <XYPad label="Key light" value={light} onValueChange={setLight} color="success" aspect="4 / 3" />
      <Slider
        label="Across"
        origin="center"
        min={-1}
        max={1}
        step={0.01}
        value={light.x}
        onValueChange={(x) => setLight((at) => ({ ...at, x }))}
        format={signed}
        color="success"
      />
      <Slider
        label="Height"
        origin="center"
        min={-1}
        max={1}
        step={0.01}
        value={light.y}
        onValueChange={(y) => setLight((at) => ({ ...at, y }))}
        format={signed}
        color="success"
      />
    </div>
  );
}

'use client';

import { useState } from 'react';
import { XYPad, type XYPadPoint } from '@/components/panelui/xy-pad';

const COLUMNS = ['Left', 'Centre-left', 'Centre', 'Centre-right', 'Right'];
const ROWS = ['Bottom', 'Low', 'Middle', 'High', 'Top'];

export default function XYPadGrid() {
  const [anchor, setAnchor] = useState<XYPadPoint>({ x: 3, y: 3 });
  return (
    <div className="flex flex-col items-center gap-3">
      <XYPad
        label="Anchor"
        x={[0, 4]}
        y={[0, 4]}
        grid={4}
        snapToGrid
        aspect="1 / 1"
        value={anchor}
        onValueChange={setAnchor}
        format={(v, axis) => (axis === 'x' ? COLUMNS : ROWS)[v] ?? ''}
        className="w-48"
      />
      <p className="text-sm text-muted-foreground">
        Pinned <span className="text-foreground">{ROWS[anchor.y]?.toLowerCase()}</span>,{' '}
        <span className="text-foreground">{COLUMNS[anchor.x]?.toLowerCase()}</span>
      </p>
    </div>
  );
}