Keys dragged in the graph editor

export function fromPx(view, x, y) {
  const p = view.pad ?? 12;
  return [view.t0 + ((x - p) / (view.w - 2 * p)) * (view.t1 - view.t0), view.v0 + ((view.h - p - y) / (view.h - 2 * p)) * (view.v1 - view.v0)];
}

/** A key dragged to (t, v): its time moves (onto another key's time it replaces it) and that number of its value changes. */
export function dragKey(anim, p, t, v) {
  const tr = trackOf(anim, p.track);
  if (!tr) return anim;
  const k = tr.keys[p.i];
  if (!k) return anim;
  const to = Math.max(0, r3(t));
  let a = Math.abs(to - k.t) > 1e-9 ? moveKey(anim, p.track, k.t, to) : anim;
  const tr2 = trackOf(a, p.track), k2 = tr2 && tr2.keys.find((x) => x.t === to);
  if (!k2) return a;
  const val = k2.v.slice();
  val[p.comp] = v;
  return setPropKey(a, tr2.target, tr2.prop, to, val, k2.ease);
}

/** A handle dragged to (t, v): the other numbers of its key keep their handle values. */
export function dragHandle(anim, p, side, t, v) {
  const tr = trackOf(anim, p.track), k = tr && tr.keys[p.i];
  if (!k) return anim;
  const h = handlePoints(tr, p.i)[side];
  let dt = t - k.t;
  if (side === 'l') dt = Math.min(0, dt); else dt = Math.max(0, dt);
  const dv = h[1].map((x, j) => x - k.v[j]);
  dv[p.comp] = v - k.v[p.comp];
  return setHandle(anim, p.track, k.t, side, [dt, ...dv]);
}