@bycrux/editor 1.1.0 → 1.2.1

package/src/video/timeline/canvas/__tests__/TimelineCanvas.test.tsx

@@ -10,11 +10,11 @@
  */
 import { StrictMode } from 'react'
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
-import { render, act, cleanup } from '@testing-library/react'
+import { render, act, cleanup, screen, fireEvent } from '@testing-library/react'
 import { createPlaybackClock } from '../../../playback-clock'
 import type { Project } from '../../../../types'
 import TimelineCanvas from '../TimelineCanvas'
-import { LIGHT_TIMELINE_COLORS, TIMELINE_COLORS, type TimelineMode } from '../draw'
+import { LIGHT_TIMELINE_COLORS, TIMELINE_COLORS, computeTimelineLayout, type TimelineMode } from '../draw'
 import { createViewportStore, type ViewportStore } from '../viewport'
 
 interface RecordedCall { method: string; args: unknown[] }
@@ -405,3 +405,107 @@ describe('TimelineCanvas — theme mode', () => {
     expect(overlay).toHaveLength(0)
   })
 })
+
+// ── Marker rename box ────────────────────────────────────────────────────
+//
+// The gesture DECISION (double-click on a marker → `editMarker` effect) is
+// covered as pure data in pointer-machine.test.ts. What only a mounted
+// component can show is the box itself: that it mounts, that it prefills,
+// and that Enter/Escape commit or cancel through the same
+// onProjectChange/onOverlayEdit pair every other discrete edit here uses.
+describe('marker rename box', () => {
+  const markerProject = {
+    id: 'p-marker',
+    tracks: [[{ id: 'c0', type: 'video', src: 'a.mp4', start: 0, end: 8 }]],
+    markers: [{ id: 'm1', t: 2, label: '1' }],
+  } as unknown as Project
+
+  // Derived from the layout itself, not hardcoded, so a strip-height change
+  // elsewhere can't quietly desync this from where the flag actually paints.
+  const MARKER_STRIP = computeTimelineLayout(markerProject).markers!
+  const MARKER_STRIP_Y = Math.round(MARKER_STRIP.y + MARKER_STRIP.height / 2)
+
+  function renderMarkerCanvas(overrides: Partial<React.ComponentProps<typeof TimelineCanvas>> = {}) {
+    const store = createViewportStore()
+    const clock = createPlaybackClock()
+    const utils = render(
+      <TimelineCanvas
+        project={markerProject}
+        clock={clock}
+        store={store}
+        totalDuration={20}
+        fps={30}
+        selectedIds={NO_SELECTION}
+        {...overrides}
+      />,
+    )
+    act(() => { vi.advanceTimersByTime(32) })
+    // Pin the scale so the marker's on-screen x is deterministic: t=2s at
+    // 100px/s is x=200.
+    act(() => { store.set({ pxPerSecond: 100, scrollSeconds: 0, widthPx: 1000 }) })
+    act(() => { vi.advanceTimersByTime(32) })
+    return { ...utils, store, clock }
+  }
+
+  /** Dispatches a real `dblclick` at marker m1's surface coordinates, exactly
+   *  the way an operator's browser event would arrive — not by poking state. */
+  function doubleClickAtMarker(container: HTMLElement) {
+    const surface = container.querySelector('[data-timeline-canvas]') as HTMLElement
+    act(() => {
+      surface.dispatchEvent(new MouseEvent('dblclick', {
+        clientX: 200, clientY: MARKER_STRIP_Y, bubbles: true, cancelable: true,
+      }))
+    })
+  }
+
+  it('is not mounted until a marker is double-clicked', () => {
+    renderMarkerCanvas()
+    expect(screen.queryByLabelText('Rename marker')).toBeNull()
+  })
+
+  it('mounts prefilled with the marker label after an editMarker effect', () => {
+    const { container } = renderMarkerCanvas()
+    doubleClickAtMarker(container)
+    // The state update lands synchronously inside `doubleClickAtMarker`'s own
+    // `act()`, so the box is already in the DOM — no need for `findBy`'s
+    // real-timer polling, which never fires under `vi.useFakeTimers()`.
+    const input = screen.getByLabelText('Rename marker')
+    expect((input as HTMLInputElement).value).toBe('1')
+  })
+
+  it('Enter commits the new name through onProjectChange and onOverlayEdit', () => {
+    const onProjectChange = vi.fn()
+    const onOverlayEdit = vi.fn()
+    const { container } = renderMarkerCanvas({ onProjectChange, onOverlayEdit })
+    doubleClickAtMarker(container)
+    const input = screen.getByLabelText('Rename marker')
+    fireEvent.change(input, { target: { value: 'intro' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onProjectChange).toHaveBeenCalled()
+    const next = onProjectChange.mock.calls[onProjectChange.mock.calls.length - 1][0] as Project
+    expect(next.markers![0].label).toBe('intro')
+    expect(onOverlayEdit).toHaveBeenCalled()   // one undo entry
+    expect(screen.queryByLabelText('Rename marker')).toBeNull()
+  })
+
+  it('Escape cancels and commits nothing', () => {
+    const onProjectChange = vi.fn()
+    const { container } = renderMarkerCanvas({ onProjectChange })
+    doubleClickAtMarker(container)
+    const input = screen.getByLabelText('Rename marker')
+    fireEvent.change(input, { target: { value: 'nope' } })
+    fireEvent.keyDown(input, { key: 'Escape' })
+    expect(onProjectChange).not.toHaveBeenCalled()
+    expect(screen.queryByLabelText('Rename marker')).toBeNull()
+  })
+
+  it('is a real <input>, so the document keymap ignores typing in it', () => {
+    // useKeymap's isTypingTarget guards INPUT/TEXTAREA/contentEditable — this
+    // pins that the box is a real input in the document, not a canvas-drawn
+    // fake.
+    const { container } = renderMarkerCanvas()
+    doubleClickAtMarker(container)
+    const input = screen.getByLabelText('Rename marker')
+    expect(input.tagName).toBe('INPUT')
+  })
+})

package/src/video/timeline/canvas/__tests__/draw.test.ts

@@ -26,8 +26,10 @@ import {
   LIGHT_TRACK_PALETTE,
   timelinePalette,
   drawCursorLine,
+  drawMarkers,
   drawMarquee,
   drawRuler,
+  MARKER_STRIP_HEIGHT_PX,
   type TimelinePalette,
   CLIP_HANDLE_WIDTH_PX,
   FADE_GRIP_SIZE_PX,
@@ -2196,3 +2198,74 @@ describe('drawTimelineContent / drawTimelineOverlay — mode', () => {
     expect(styles).not.toContain(LIGHT_TIMELINE_COLORS.marqueeFill)
   })
 })
+
+describe('marker strip layout', () => {
+  it('is absent, and the ruler still starts at 0, when the project has no markers', () => {
+    // A marker-less project must lay out byte-identically to before the feature.
+    const layout = computeTimelineLayout(project({ tracks: [{ id: 'trk-0', items: [] }] }))
+    expect(layout.markers).toBeUndefined()
+    expect(layout.ruler).toEqual({ y: 0, height: RULER_HEIGHT_PX })
+  })
+
+  it('claims the top strip and pushes the ruler down once markers exist', () => {
+    const layout = computeTimelineLayout(project({
+      tracks: [{ id: 'trk-0', items: [] }],
+      markers: [{ id: 'a', t: 1, label: '1' }],
+    }))
+    expect(layout.markers).toEqual({ y: 0, height: MARKER_STRIP_HEIGHT_PX })
+    expect(layout.ruler).toEqual({ y: MARKER_STRIP_HEIGHT_PX, height: RULER_HEIGHT_PX })
+  })
+
+  it('pushes every row down by exactly the strip height', () => {
+    const withOut = computeTimelineLayout(project({ tracks: [{ id: 'trk-0', items: [clip()] }] }))
+    const withIn = computeTimelineLayout(project({
+      tracks: [{ id: 'trk-0', items: [clip()] }],
+      markers: [{ id: 'a', t: 1, label: '1' }],
+    }))
+    expect(withIn.rows[0].y - withOut.rows[0].y).toBe(MARKER_STRIP_HEIGHT_PX)
+    expect(withIn.height - withOut.height).toBe(MARKER_STRIP_HEIGHT_PX)
+  })
+})
+
+describe('drawMarkers', () => {
+  const strip = { y: 0, height: MARKER_STRIP_HEIGHT_PX }
+
+  it('draws nothing at all for an empty list', () => {
+    const r = recordingContext()
+    drawMarkers(r.ctx, [], viewport(), strip, 800, [])
+    expect(r.calls).toHaveLength(0)   // not even a background fill
+  })
+
+  it('draws a flag and its label at the marker time', () => {
+    const r = recordingContext()
+    const vp = viewport({ pxPerSecond: 10, scrollSeconds: 0 })
+    drawMarkers(r.ctx, [{ id: 'a', t: 5, label: 'intro' }], vp, strip, 800, [])
+    const text = r.of('fillText')
+    expect(text).toHaveLength(1)
+    expect(text[0].args[0]).toBe('intro')
+    // Label sits just right of the flag, which stands at timeToX(5) = 50.
+    expect(text[0].args[1]).toBeGreaterThanOrEqual(50)
+    expect(r.of('fillRect').length).toBeGreaterThan(0)
+  })
+
+  it('skips a marker scrolled out of view', () => {
+    const r = recordingContext()
+    drawMarkers(r.ctx, [{ id: 'a', t: 500, label: '1' }], viewport({ pxPerSecond: 10, scrollSeconds: 0 }), strip, 800, [])
+    expect(r.of('fillText')).toHaveLength(0)
+  })
+
+  it('paints a selected marker in the selected colour', () => {
+    const base = recordingContext()
+    drawMarkers(base.ctx, [{ id: 'a', t: 5, label: '1' }], viewport({ pxPerSecond: 10 }), strip, 800, [])
+    const sel = recordingContext()
+    drawMarkers(sel.ctx, [{ id: 'a', t: 5, label: '1' }], viewport({ pxPerSecond: 10 }), strip, 800, ['a'])
+    const fills = (r: typeof base) => r.calls.filter(c => c.method === 'set:fillStyle').map(c => c.args[0])
+    expect(fills(sel)).not.toEqual(fills(base))
+  })
+
+  it('truncates a long label instead of letting it run across the strip', () => {
+    const r = recordingContext()
+    drawMarkers(r.ctx, [{ id: 'a', t: 0, label: 'a'.repeat(400) }], viewport({ pxPerSecond: 10 }), strip, 800, [])
+    expect((r.of('fillText')[0].args[0] as string).length).toBeLessThan(400)
+  })
+})

package/src/video/timeline/canvas/__tests__/hit-test.test.ts

@@ -18,6 +18,7 @@ import { AUDIO_ITEM_INSET_PX, RULER_HEIGHT_PX, computeTimelineLayout } from '../
 import {
   AUDIO_EDGE_TOLERANCE_PX,
   FADE_GRIP_ZONE_HEIGHT_PX,
+  MARKER_HIT_WIDTH_PX,
   VISUAL_EDGE_TOLERANCE_PX,
   hitTest,
   isCaptionHit,
@@ -474,6 +475,81 @@ describe('hitTest — outside the rows', () => {
   })
 })
 
+describe('marker hit region', () => {
+  // A marker-bearing twin of the module fixture. Local, because adding markers
+  // to the shared `project` would shift every other probe's Y by the strip
+  // height and rewrite this whole file's expectations.
+  const markers = [{ id: 'm1', t: 5, label: 'intro' }]
+  const markerProject = { ...project, markers } as unknown as Project
+  const markerLayout = () => computeTimelineLayout(markerProject)
+  // x === t * 100 at this viewport, so the flag stands at 500.
+  const FLAG_X = 500
+
+  it('hits the marker when the pointer is on its flag in the strip', () => {
+    const hit = hitTest({ x: FLAG_X, y: 8 }, markerLayout(), VIEWPORT, { markers })
+    expect(hit.kind).toBe('marker')
+    expect(hit.markerId).toBe('m1')
+  })
+
+  it('claims the whole label box, not just the flag stem', () => {
+    // The label is what the operator aims at — a 2px stem is not a target.
+    const hit = hitTest({ x: FLAG_X + 40, y: 8 }, markerLayout(), VIEWPORT, { markers })
+    expect(hit.kind).toBe('marker')
+  })
+
+  it('does not claim strip for a marker scrolled off the LEFT edge', () => {
+    // `drawMarkers` culls a marker whose flag has scrolled left of x=0 — the
+    // whole marker, label included. Without the same cull here, the hit region
+    // outlives the picture: the marker is invisible but its 72px claim still
+    // covers the left of the strip, so a click on apparently-empty strip
+    // selects (and can then DRAG) a marker nobody can see. Painting and hitting
+    // have to cull on the same rule or one of them is lying.
+    const scrolled = { ...VIEWPORT, scrollSeconds: 5.05 }   // marker t=5 → x = -5
+    const hit = hitTest({ x: 10, y: 8 }, markerLayout(), scrolled, { markers })
+    expect(hit.kind).toBe('background')
+  })
+
+  it('still claims a marker whose flag is just INSIDE the left edge', () => {
+    // The boundary the cull sits on, from the visible side — proves the fix
+    // culls off-screen markers rather than simply narrowing the hit region.
+    const scrolled = { ...VIEWPORT, scrollSeconds: 4.99 }   // marker t=5 → x = +1
+    const hit = hitTest({ x: 10, y: 8 }, markerLayout(), scrolled, { markers })
+    expect(hit.kind).toBe('marker')
+    expect(hit.markerId).toBe('m1')
+  })
+
+  it('stops claiming past the label box', () => {
+    const hit = hitTest({ x: FLAG_X + MARKER_HIT_WIDTH_PX + 10, y: 8 }, markerLayout(), VIEWPORT, { markers })
+    expect(hit.kind).not.toBe('marker')
+  })
+
+  it('is background, NOT ruler, on empty strip — a click there must not seek', () => {
+    const hit = hitTest({ x: 20, y: 8 }, markerLayout(), VIEWPORT, { markers })
+    expect(hit.kind).toBe('background')
+  })
+
+  it('never returns a marker for a point in the RULER band', () => {
+    // The ruler keeps its band and its scrub behaviour, untouched.
+    const layout = markerLayout()
+    const hit = hitTest({ x: FLAG_X, y: layout.ruler.y + 4 }, layout, VIEWPORT, { markers })
+    expect(hit.kind).toBe('ruler')
+  })
+
+  it('catches a pointer that has run off the TOP of the surface', () => {
+    // The ruler's own early return used to be what caught this; the strip now
+    // sits above it and must inherit the same duty.
+    const hit = hitTest({ x: FLAG_X, y: -20 }, markerLayout(), VIEWPORT, { markers })
+    expect(hit.kind).toBe('marker')
+  })
+
+  it('returns ruler in the top band when the project has no markers', () => {
+    // No strip exists, so y=8 is inside the ruler exactly as it was before —
+    // this is the guard that every existing probe in this file still holds.
+    const layout = computeTimelineLayout(project as unknown as Project)
+    expect(hitTest({ x: 50, y: 8 }, layout, VIEWPORT).kind).toBe('ruler')
+  })
+})
+
 describe('hitTest — time', () => {
   it('always reports the time under x, whatever was hit', () => {
     expect(at(250, BASE_Y).t).toBeCloseTo(2.5)

package/src/video/timeline/canvas/__tests__/pointer-machine.test.ts

@@ -38,7 +38,7 @@ import {
 } from '../pointer-machine'
 import { FADE_GRIP_ZONE_HEIGHT_PX, hitTest } from '../hit-test'
 import type { SnapConfig } from '../snap'
-import { xToTime, type Viewport } from '../viewport'
+import { timeToX, xToTime, type Viewport } from '../viewport'
 
 const VIEWPORT: Viewport = { pxPerSecond: 100, scrollSeconds: 0, widthPx: 1000 }
 
@@ -3472,3 +3472,102 @@ describe('caption lanes — hole collapse at commit', () => {
     expect(lanes(committed[0].project)).toEqual({ low: 0, mid: 1, top: 2 })
   })
 })
+
+describe('marker drag', () => {
+  const MARKERS = [{ id: 'm1', t: 5, label: '1' }]
+  /** The module fixture plus markers, so the strip exists in the layout. */
+  function markerCtx(over: Partial<PointerContext> = {}): PointerContext {
+    return makeContext({ project: { ...baseProject(), markers: MARKERS }, ...over })
+  }
+  /** x of the flag, and a y inside the strip. */
+  const flagX = (ctx: PointerContext) => timeToX(5, ctx.viewport)
+  const STRIP_Y = 8
+
+  it('pressing a marker does NOT scrub — the ruler branch must not claim it', () => {
+    // The whole risk of this feature: pointerDown scrubs on sight for the ruler
+    // and for the playhead grab band, with no drag threshold.
+    const ctx = markerCtx()
+    const m = createPointerMachine()
+    const effects = m.dispatch({ type: 'pointerDown', point: { x: flagX(ctx), y: STRIP_Y }, modifiers: NO_MODIFIERS, ctx })
+    expect(effects.some(e => e.type === 'seek')).toBe(false)
+    expect(m.state.kind).toBe('pressed')
+  })
+
+  it('still scrubs on the ruler band itself', () => {
+    const ctx = markerCtx()
+    const m = createPointerMachine()
+    const y = ctx.layout.ruler.y + 4
+    const effects = m.dispatch({ type: 'pointerDown', point: { x: 200, y }, modifiers: NO_MODIFIERS, ctx })
+    expect(effects.some(e => e.type === 'seek')).toBe(true)
+  })
+
+  it('a marker sitting under the playhead is still grabbable', () => {
+    // grabsPlayhead is not y-gated, so without an explicit exclusion the
+    // playhead swallows any marker that happens to line up with it — and a
+    // marker dropped with M lands exactly on the playhead, so that is the
+    // COMMONEST marker, not an edge case.
+    const ctx = markerCtx({ playheadTime: 5 })
+    const m = createPointerMachine()
+    const effects = m.dispatch({ type: 'pointerDown', point: { x: flagX(ctx), y: STRIP_Y }, modifiers: NO_MODIFIERS, ctx })
+    expect(effects.some(e => e.type === 'seek')).toBe(false)
+  })
+
+  it('dragging past the threshold retimes the marker', () => {
+    const ctx = markerCtx()
+    const m = createPointerMachine()
+    const x0 = flagX(ctx)
+    m.dispatch({ type: 'pointerDown', point: { x: x0, y: STRIP_Y }, modifiers: NO_MODIFIERS, ctx })
+    const effects = m.dispatch({ type: 'pointerMove', point: { x: x0 + 100, y: STRIP_Y }, modifiers: NO_MODIFIERS, ctx })
+    const changes = of(effects, 'projectChange')
+    expect(changes).toHaveLength(1)
+    const moved = changes[0].project.markers![0]
+    expect(moved.t).toBeGreaterThan(5)
+    expect(moved.id).toBe('m1')
+  })
+
+  it('drags grab-relative — pressing the label does not teleport the marker to the cursor', () => {
+    // The 40px press offset is the entire point of this test. The hit region is
+    // a flat MARKER_HIT_WIDTH_PX (72) wide, so a press 40px right of the flag
+    // lands on the LABEL — the common case, not a contrived one — and the two
+    // candidate behaviours diverge there by exactly that offset. At 100px/s a
+    // 100px drag is 1s: grab-relative lands the marker at 6, absolute lands it
+    // at 6.4, the cursor's own time. Only one of those can pass, which is what
+    // the `> 5` assertion in the test above cannot distinguish.
+    const ctx = markerCtx()
+    const m = createPointerMachine()
+    const x0 = flagX(ctx) + 40
+    m.dispatch({ type: 'pointerDown', point: { x: x0, y: STRIP_Y }, modifiers: NO_MODIFIERS, ctx })
+    const effects = m.dispatch({ type: 'pointerMove', point: { x: x0 + 100, y: STRIP_Y }, modifiers: NO_MODIFIERS, ctx })
+    const changes = of(effects, 'projectChange')
+    expect(changes).toHaveLength(1)
+    const moved = changes[0].project.markers![0]
+    expect(moved.t).toBeCloseTo(6, 6)
+    expect(moved.t).not.toBeCloseTo(xToTime(x0 + 100, ctx.viewport), 6)
+  })
+
+  it('commits once on release', () => {
+    const ctx = markerCtx()
+    const m = createPointerMachine()
+    const x0 = flagX(ctx)
+    m.dispatch({ type: 'pointerDown', point: { x: x0, y: STRIP_Y }, modifiers: NO_MODIFIERS, ctx })
+    m.dispatch({ type: 'pointerMove', point: { x: x0 + 100, y: STRIP_Y }, modifiers: NO_MODIFIERS, ctx })
+    const up = m.dispatch({ type: 'pointerUp', point: { x: x0 + 100, y: STRIP_Y }, modifiers: NO_MODIFIERS, ctx })
+    expect(up.filter(e => e.type === 'commit')).toHaveLength(1)
+  })
+
+  it('a press with no drag selects the marker instead of moving it', () => {
+    const ctx = markerCtx()
+    const m = createPointerMachine()
+    const x0 = flagX(ctx)
+    m.dispatch({ type: 'pointerDown', point: { x: x0, y: STRIP_Y }, modifiers: NO_MODIFIERS, ctx })
+    const up = m.dispatch({ type: 'pointerUp', point: { x: x0, y: STRIP_Y }, modifiers: NO_MODIFIERS, ctx })
+    expect(up).toContainEqual(expect.objectContaining({ type: 'select', id: 'm1' }))
+  })
+
+  it('double-clicking a marker asks the host to edit it', () => {
+    const ctx = markerCtx()
+    const m = createPointerMachine()
+    const effects = m.dispatch({ type: 'doubleClick', point: { x: flagX(ctx), y: STRIP_Y }, modifiers: NO_MODIFIERS, ctx })
+    expect(effects).toContainEqual({ type: 'editMarker', id: 'm1' })
+  })
+})