@hyperframes/studio 0.7.78 → 0.7.80

package/src/player/components/TimelineDiamondConnectors.tsx

@@ -37,13 +37,6 @@ export function TimelineDiamondConnectors({
   keyframeTarget: (keyframe: TimelineDiamondKeyframe) => TimelineKeyframeTarget;
   onSelectSegment?: (target: TimelineKeyframeTarget) => void;
 }) {
-  // The ease button sits dead centre of its segment, which on a two-keyframe clip
-  // is the centre of the clip bar — the natural place to grab a clip and drag it.
-  // Swallowing pointerdown there made that grab a no-op. Instead the press falls
-  // through to the clip (so the drag starts normally) and the button keeps only
-  // the click, which we drop if the pointer actually travelled.
-  const pressXRef = useRef<number | null>(null);
-
   return (
     <>
       {markers.map((marker, i) => {
@@ -55,13 +48,6 @@ export function TimelineDiamondConnectors({
         if (x2 - x1 < 1) return null;
         const connectorLeft = x1 + previous.visualSize / 2;
         const connectorWidth = x2 - x1 - previous.visualSize / 2 - marker.visualSize / 2;
-        // The ease button targets one segment, so it needs the keyframe's own
-        // animationId/tweenPercentage. On a merged inline row the button is
-        // hidden where the segment is ambiguous (two source animations collide
-        // at this % with different eases; see easeAmbiguous) or the keyframe has
-        // no source animation id (runtime-scanned) so there is no tween to target.
-        const target = keyframeTarget(kf);
-        const ease = kf.ease ?? globalEase;
         return (
           <Fragment key={`line-${i}-${previous.keyframe.percentage}-${kf.percentage}`}>
             <div
@@ -78,64 +64,22 @@ export function TimelineDiamondConnectors({
                 borderRadius: 1,
               }}
             />
-            {onSelectSegment && !kf.easeAmbiguous && kf.animationId !== undefined && (
-              <div
-                className="group absolute"
-                data-keyframe-ease-segment=""
-                style={{
-                  left: x1,
-                  top: centerY,
-                  width: x2 - x1,
-                  height: 18,
-                  transform: "translateY(-50%)",
-                  // Own a stacking context above the diamond buttons. At fit
-                  // zoom the 16px ease control can overlap its neighbouring
-                  // diamond; without a z-index here the later diamond wins the
-                  // hit test even though the child button has z-index 3.
-                  zIndex: 3,
-                  // Only the centered control is interactive. The transparent
-                  // segment wrapper must not swallow connector/clip gestures.
-                  pointerEvents: "none",
-                }}
-              >
-                <button
-                  type="button"
-                  data-keyframe-ease-button=""
-                  aria-label={`Edit ${ease} easing`}
-                  title={`Edit ${ease} easing`}
-                  className="absolute flex items-center justify-center rounded opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
-                  style={{
-                    left: "50%",
-                    top: "50%",
-                    width: 16,
-                    height: 16,
-                    transform: "translate(-50%, -50%)",
-                    zIndex: 3,
-                    pointerEvents: "auto",
-                    padding: 0,
-                    border: "1px solid rgba(255, 255, 255, 0.14)",
-                    background: "#171717",
-                    cursor: "pointer",
-                  }}
-                  onPointerDown={(e) => {
-                    pressXRef.current = e.clientX;
-                  }}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    const pressX = pressXRef.current;
-                    pressXRef.current = null;
-                    if (
-                      pressX !== null &&
-                      Math.abs(e.clientX - pressX) >= KEYFRAME_DRAG_THRESHOLD_PX
-                    ) {
-                      return;
-                    }
-                    onSelectSegment(target);
-                  }}
-                >
-                  <MiniCurveSvg ease={ease} active size={12} />
-                </button>
-              </div>
+            {onSelectSegment && showsEaseControl(kf) && (
+              <SegmentEaseControl
+                left={x1}
+                width={x2 - x1}
+                centerY={centerY}
+                ease={kf.ease ?? globalEase}
+                target={keyframeTarget(kf)}
+                // connectorWidth is the clear span between the two diamonds'
+                // edges, so a 24x24 target centred in it overhangs a diamond as
+                // soon as the span is narrower than 24. The segment wrapper sits
+                // at z-index 3, above the diamonds, so that overhang would win
+                // the hit test and steal their clicks at fit zoom. Grow the
+                // target only where the room exists.
+                roomForFullTarget={connectorWidth >= 24}
+                onSelectSegment={onSelectSegment}
+              />
             )}
           </Fragment>
         );
@@ -143,3 +87,105 @@ export function TimelineDiamondConnectors({
     </>
   );
 }
+
+/**
+ * The ease control targets one segment, so it needs the keyframe's own
+ * animationId. A merged keyframe now shows one too: the editor edits every
+ * colliding tween together, so one button standing for several curves is
+ * honest. Only a keyframe with no source animation id (runtime-scanned) is left
+ * out, because there is no tween to target.
+ */
+function showsEaseControl(kf: TimelineDiamondKeyframe): boolean {
+  return kf.animationId !== undefined;
+}
+
+/**
+ * The ease button centred on one connector segment, plus the transparent
+ * wrapper that positions it. Split out of the connector map so that map stays a
+ * geometry loop and this keeps the press guard, hit-target sizing and click
+ * filtering together.
+ */
+function SegmentEaseControl({
+  left,
+  width,
+  centerY,
+  ease,
+  target,
+  roomForFullTarget,
+  onSelectSegment,
+}: {
+  left: number;
+  width: number;
+  centerY: number;
+  ease: string;
+  target: TimelineKeyframeTarget;
+  roomForFullTarget: boolean;
+  onSelectSegment: (target: TimelineKeyframeTarget) => void;
+}) {
+  // The ease button sits dead centre of its segment, which on a two-keyframe clip
+  // is the centre of the clip bar, the natural place to grab a clip and drag it.
+  // Swallowing pointerdown there made that grab a no-op. Instead the press falls
+  // through to the clip (so the drag starts normally) and the button keeps only
+  // the click, which we drop if the pointer actually travelled.
+  const pressXRef = useRef<number | null>(null);
+  return (
+    <div
+      className="group absolute"
+      data-keyframe-ease-segment=""
+      style={{
+        left,
+        top: centerY,
+        width,
+        height: 18,
+        transform: "translateY(-50%)",
+        // Own a stacking context above the diamond buttons. At fit zoom the 16px
+        // ease control can overlap its neighbouring diamond; without a z-index
+        // here the later diamond wins the hit test even though the child button
+        // has z-index 3.
+        zIndex: 3,
+        // Only the centered control is interactive. The transparent segment
+        // wrapper must not swallow connector/clip gestures.
+        pointerEvents: "none",
+      }}
+    >
+      <button
+        type="button"
+        data-keyframe-ease-button=""
+        aria-label={`Edit ${ease} easing`}
+        title={`Edit ${ease} easing`}
+        // A visible 24x24 badge would collide with the diamonds either side, so
+        // the WCAG 2.2 (2.5.8) target is met with a centered transparent
+        // ::before overlay; the box stays 16x16. Where the segment is too narrow
+        // for that overlay the button keeps its 16x16 hit area, which is WCAG's
+        // target-spacing exception: the neighbouring diamonds are themselves the
+        // reason it cannot grow, and stealing their clicks is the worse failure.
+        className={`absolute flex items-center justify-center rounded opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 ${roomForFullTarget ? "before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']" : ""}`}
+        style={{
+          left: "50%",
+          top: "50%",
+          width: 16,
+          height: 16,
+          transform: "translate(-50%, -50%)",
+          zIndex: 3,
+          pointerEvents: "auto",
+          padding: 0,
+          border: "1px solid rgba(255, 255, 255, 0.14)",
+          background: "#171717",
+          cursor: "pointer",
+        }}
+        onPointerDown={(e) => {
+          pressXRef.current = e.clientX;
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          const pressX = pressXRef.current;
+          pressXRef.current = null;
+          if (pressX !== null && Math.abs(e.clientX - pressX) >= KEYFRAME_DRAG_THRESHOLD_PX) return;
+          onSelectSegment(target);
+        }}
+      >
+        <MiniCurveSvg ease={ease} active size={12} />
+      </button>
+    </div>
+  );
+}

package/src/player/components/TimelineLanes.test.tsx

@@ -0,0 +1,281 @@
+// @vitest-environment happy-dom
+
+import React, { act, createRef } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TimelineLanes } from "./TimelineLanes";
+import { getTrackStyle } from "./timelineIcons";
+import { defaultTimelineTheme } from "./timelineTheme";
+import { TRACK_H } from "./timelineLayout";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import type { MultiDragPreviewInput } from "./timelineMultiDragPreview";
+import type { TimelineEditCallbacks } from "./timelineCallbacks";
+import type { DraggedClipState, BlockedClipState } from "./useTimelineClipDrag";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  usePlayerStore.getState().reset();
+});
+
+/** The z-order sort keys really are fractional: a clip nudged between two lanes
+ *  lands on the midpoint. These are the values that used to reach aria-label. */
+const TRACK_A = 1 / 6;
+const TRACK_B = 0.5;
+
+function element(id: string, track: number): TimelineElement {
+  return { id, label: id, tag: "div", start: 0, duration: 2, track };
+}
+
+function positionTween(id: string): GsapAnimation {
+  return {
+    id: `${id}-tween`,
+    targetSelector: `#${id}`,
+    method: "to",
+    position: 0,
+    duration: 2,
+    properties: {},
+    propertyGroup: "position",
+    keyframes: {
+      format: "percentage",
+      keyframes: [
+        { percentage: 0, properties: { x: 0 } },
+        { percentage: 100, properties: { x: 100 } },
+      ],
+    },
+  };
+}
+
+interface RenderLanesOptions {
+  elements?: TimelineElement[];
+  animations?: Map<string, GsapAnimation[]>;
+  expandedClipIds?: string[];
+  selectedElementIds?: Set<string>;
+  multiDragPreview?: MultiDragPreviewInput | null;
+  draggedClip?: DraggedClipState | null;
+  onToggleTrackHidden?: TimelineEditCallbacks["onToggleTrackHidden"];
+  onContextMenuLane?: (e: React.MouseEvent, track: number, time: number) => void;
+}
+
+function renderLanes(options: RenderLanesOptions = {}): {
+  host: HTMLDivElement;
+  root: Root;
+  rerender: (next: RenderLanesOptions) => void;
+} {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const render = (next: RenderLanesOptions) => {
+    const elements = next.elements ?? [element("clip-a", TRACK_A)];
+    const gsapAnimations = next.animations ?? new Map<string, GsapAnimation[]>();
+    const displayTrackOrder = [...new Set(elements.map((el) => el.track))].sort((a, b) => a - b);
+    const tracks: [number, TimelineElement[]][] = displayTrackOrder.map((track) => [
+      track,
+      elements.filter((el) => el.track === track),
+    ]);
+    const laneCounts = new Map(
+      elements.map((el) => [el.id, (gsapAnimations.get(el.id) ?? []).length]),
+    );
+    act(() => {
+      usePlayerStore.setState({ expandedClipIds: new Set(next.expandedClipIds ?? []) });
+      root.render(
+        <TimelineLanes
+          pps={100}
+          contentOrigin={232}
+          contentGutter={32}
+          trackContentWidth={800}
+          theme={defaultTimelineTheme}
+          displayTrackOrder={displayTrackOrder}
+          rowHeights={displayTrackOrder.map(() => TRACK_H)}
+          trackOrder={displayTrackOrder}
+          tracks={tracks}
+          trackStyles={new Map()}
+          laneCounts={laneCounts}
+          selectedElementId={null}
+          selectedElementIds={next.selectedElementIds ?? new Set()}
+          hoveredClip={null}
+          draggedClip={next.draggedClip ?? null}
+          draggedElement={null}
+          multiDragPreview={next.multiDragPreview ?? null}
+          blockedClipRef={createRef<BlockedClipState | null>()}
+          suppressClickRef={{ current: false }}
+          scrollRef={createRef<HTMLDivElement>()}
+          setHoveredClip={vi.fn()}
+          setShowPopover={vi.fn()}
+          setRangeSelection={vi.fn()}
+          setResizingClip={vi.fn()}
+          setDraggedClip={vi.fn()}
+          setSelectedElementId={vi.fn()}
+          syncClipDragAutoScroll={vi.fn()}
+          shiftClickClipRef={createRef()}
+          getPreviewElement={(el) => el}
+          getTrackStyle={getTrackStyle}
+          gsapAnimations={gsapAnimations}
+          selectedKeyframes={new Set()}
+          currentTime={0}
+          onContextMenuLane={next.onContextMenuLane}
+          onToggleTrackHidden={next.onToggleTrackHidden}
+          onTogglePropertyGroupKeyframe={vi.fn()}
+          onResizeElement={vi.fn()}
+          onMoveElement={vi.fn()}
+          onRazorSplit={vi.fn()}
+          onRazorSplitAll={vi.fn()}
+        />,
+      );
+    });
+  };
+  render(options);
+  return { host, root, rerender: render };
+}
+
+function visibilityLabels(host: HTMLElement): (string | null)[] {
+  return Array.from(host.querySelectorAll("button[aria-label^='Hide track ']")).map((button) =>
+    button.getAttribute("aria-label"),
+  );
+}
+
+describe("TimelineLanes track numbering", () => {
+  // Screen readers literally announced "Hide track 0.16666666666666666".
+  it("numbers tracks contiguously from 1 regardless of the fractional sort keys", () => {
+    const view = renderLanes({
+      elements: [element("clip-a", TRACK_A), element("clip-b", TRACK_B)],
+    });
+
+    expect(visibilityLabels(view.host)).toEqual(["Hide track 1", "Hide track 2"]);
+    expect(view.host.innerHTML).not.toContain("0.16666666666666666");
+    act(() => view.root.unmount());
+  });
+
+  it("hands the visibility toggle the real track key, not the display index", () => {
+    const onToggleTrackHidden = vi.fn();
+    const view = renderLanes({
+      elements: [element("clip-a", TRACK_A), element("clip-b", TRACK_B)],
+      onToggleTrackHidden,
+    });
+
+    const second = view.host.querySelector<HTMLButtonElement>('button[aria-label="Hide track 2"]');
+    act(() => second?.click());
+
+    expect(onToggleTrackHidden).toHaveBeenCalledWith(TRACK_B, true);
+    act(() => view.root.unmount());
+  });
+
+  // The gap menu inserts at the track it is given, so a display index here would
+  // drop the new clip on the wrong lane.
+  it("hands the lane context menu the real track key, not the display index", () => {
+    const onContextMenuLane = vi.fn();
+    const view = renderLanes({
+      elements: [element("clip-a", TRACK_A), element("clip-b", TRACK_B)],
+      onContextMenuLane,
+    });
+
+    // Row children: [sticky header column, time-mapped track content].
+    const rows = Array.from(view.host.children);
+    const secondTrackContent = rows[1]?.children.item(1);
+    act(() => {
+      secondTrackContent?.dispatchEvent(
+        new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: 100 }),
+      );
+    });
+
+    expect(onContextMenuLane).toHaveBeenCalledOnce();
+    expect(onContextMenuLane.mock.calls[0]?.[1]).toBe(TRACK_B);
+    act(() => view.root.unmount());
+  });
+});
+
+describe("TimelineLanes disclosure target", () => {
+  const ANIMATIONS = new Map([["clip-a", [positionTween("clip-a")]]]);
+
+  function ariaControlsTarget(host: HTMLElement): HTMLElement | null {
+    const caret = host.querySelector("button[aria-controls]");
+    const id = caret?.getAttribute("aria-controls");
+    return id ? host.querySelector<HTMLElement>(`#${id}`) : null;
+  }
+
+  // aria-controls used to name a div in the sticky label column: it computed to
+  // 0x0 and held no diamonds at all.
+  it("resolves the caret's aria-controls to an element holding the property lanes", () => {
+    const view = renderLanes({ animations: ANIMATIONS, expandedClipIds: ["clip-a"] });
+    const target = ariaControlsTarget(view.host);
+
+    expect(target).not.toBeNull();
+    expect(target?.querySelectorAll("[data-timeline-property-lane]").length).toBeGreaterThan(0);
+    act(() => view.root.unmount());
+  });
+
+  it("still resolves the caret's aria-controls while the layer is collapsed", () => {
+    const view = renderLanes({ animations: ANIMATIONS, expandedClipIds: [] });
+    const target = ariaControlsTarget(view.host);
+
+    expect(target).not.toBeNull();
+    expect(target?.querySelectorAll("[data-timeline-property-lane]")).toHaveLength(0);
+    act(() => view.root.unmount());
+  });
+
+  // Two timelines on one page (a mini-timeline in a modal beside the main one)
+  // both minted `timeline-lanes-track-0`, so every caret's aria-controls
+  // resolved to whichever instance mounted first.
+  it("mints lane ids that do not collide with a second TimelineLanes on the page", () => {
+    const first = renderLanes({ animations: ANIMATIONS, expandedClipIds: ["clip-a"] });
+    const second = renderLanes({ animations: ANIMATIONS, expandedClipIds: ["clip-a"] });
+
+    const idsFor = (host: HTMLElement) =>
+      Array.from(host.querySelectorAll("button[aria-controls]")).map((caret) =>
+        caret.getAttribute("aria-controls"),
+      );
+    const firstIds = idsFor(first.host);
+    const secondIds = idsFor(second.host);
+
+    expect(firstIds.length).toBeGreaterThan(0);
+    expect(firstIds.some((id) => secondIds.includes(id))).toBe(false);
+    // Still a legal CSS id selector: the aria-controls lookups above use `#id`.
+    for (const id of [...firstIds, ...secondIds]) {
+      expect(id).toMatch(/^[A-Za-z][\w-]*$/);
+    }
+    act(() => first.root.unmount());
+    act(() => second.root.unmount());
+  });
+
+  // The passenger branch wraps [clip, lanes] in a transformed div that re-renders
+  // on every pointer move. An unstable key there remounts the lanes and drops the
+  // in-flight drag.
+  it("does not remount the lanes while a multi-clip drag slides the formation", () => {
+    const elements = [element("clip-a", TRACK_A), element("clip-b", TRACK_A)];
+    const selectedElementIds = new Set(["clip-a", "clip-b"]);
+    const preview = (draggedPreviewStart: number): MultiDragPreviewInput => ({
+      dragStarted: true,
+      draggedKey: "clip-b",
+      draggedOriginStart: 0,
+      draggedPreviewStart,
+      selectedKeys: selectedElementIds,
+    });
+    const view = renderLanes({
+      elements,
+      animations: ANIMATIONS,
+      expandedClipIds: ["clip-a"],
+      selectedElementIds,
+      multiDragPreview: preview(0.25),
+    });
+
+    const before = ariaControlsTarget(view.host);
+    const beforeLane = before?.querySelector("[data-timeline-property-lane]");
+    expect(before).not.toBeNull();
+    expect(beforeLane).not.toBeNull();
+
+    view.rerender({
+      elements,
+      animations: ANIMATIONS,
+      expandedClipIds: ["clip-a"],
+      selectedElementIds,
+      multiDragPreview: preview(0.75),
+    });
+
+    // Node identity, not just presence: a remount replaces these nodes.
+    expect(ariaControlsTarget(view.host)).toBe(before);
+    expect(before?.querySelector("[data-timeline-property-lane]")).toBe(beforeLane);
+    act(() => view.root.unmount());
+  });
+});