Skip to content

feat(editor): show camera zoom curves on timeline#1894

Open
ivan17lai wants to merge 30 commits into
CapSoftware:mainfrom
ivan17lai:feat/zoom-curves
Open

feat(editor): show camera zoom curves on timeline#1894
ivan17lai wants to merge 30 commits into
CapSoftware:mainfrom
ivan17lai:feat/zoom-curves

Conversation

@ivan17lai
Copy link
Copy Markdown

@ivan17lai ivan17lai commented Jun 7, 2026

Description

This PR introduces "Zoom Curves" visualization on the timeline, replacing the static color blocks. It provides users with an intuitive, visual representation of the camera's physical zoom dynamics.

Key Features

  • Zoom Curve Visualization: Renders smooth Bezier curves on the timeline that perfectly mirror the physical zoom logic (1.0x to 4.5x) from the rendering backend.
  • Collapse/Expand View: You can easily toggle the zoom curve view by hovering over the magnifying glass icon on the left track header and clicking the collapse/expand button.

Greptile Summary

This PR adds a ZoomCurveTrack component that renders SVG Bézier curves on a collapsible timeline sub-row, visually representing camera zoom dynamics from the rendering backend. A new showZoomCurves boolean in editor state controls the row's visibility, toggled via a hover overlay on the zoom track's icon.

  • ZoomCurveTrack uses a <For> loop to draw gray baseline and blue ramp SVGs per segment, with overflow-visible to extend transition curves across segment boundaries and into adjacent gaps.
  • TrackIcon / TrackRow gain subordinate, onClick, and iconOverlay props to support the tree-connected sub-row header and the collapse/expand toggle button.
  • SegmentRoot receives an overflowVisible prop to conditionally remove overflow-hidden, intended for an in-segment inline curve that is computed (d signal) but whose <svg> rendering was not added to the returned JSX in this PR.

Confidence Score: 5/5

Safe to merge — the new ZoomCurveTrack renders correctly and all changes are additive; the unused path computation in ZoomTrack is dead code that does not affect runtime behaviour

All changes are additive UI features behind a new state flag. ZoomCurveTrack curve math and SVG rendering are self-contained and do not touch any data-mutation paths. The dead d signal in ZoomTrack is never executed at runtime. No regressions to existing zoom segment drag, resize, or playback logic were introduced.

ZoomTrack.tsx contains dead path-computation code that should be resolved before further work builds on the in-segment curve machinery

Important Files Changed

Filename Overview
apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx Adds ZoomCurveTrack component and dead-code path variables inside ZoomTrack segment rendering; the computed d accessor and all its helper signals are never referenced in the returned JSX
apps/desktop/src/routes/editor/Timeline/index.tsx Adds collapse/expand zoom curve row via CSS height/opacity; ZoomCurveTrack is always mounted in the DOM rather than conditionally rendered
apps/desktop/src/routes/editor/Timeline/TrackManager.tsx TrackIcon gains onClick, subordinate, and tree-connector rendering; Show import added inline but functional
apps/desktop/src/routes/editor/Timeline/Track.tsx Adds overflowVisible prop to SegmentRoot to conditionally remove overflow-hidden; intended for inline SVG curves that are not yet rendered
apps/desktop/src/routes/editor/context.ts Adds showZoomCurves: true to timeline state; defaults to expanded/visible on every session open
packages/ui-solid/src/auto-imports.d.ts Auto-generated; adds icon type declarations for new Lucide icons
Prompt To Fix All With AI
Fix the following 2 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 2
apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx:641-675
**Dead path computation — SVG element never rendered**

The `d` signal and all 14 helper variables (`isInstant`, `prev`, `next`, `isContiguousWithPrev`, `isContiguousWithNext`, `prevAmt`, `currAmt`, `nextAmt`, `getY`, `startY`, `currY`, `endY`, `W`, `rampUpPct`, `rampDownPct`) are computed inside the `ZoomTrack` segment IIFE but the returned `<Switch>` block never references any of them — no `<svg>` element was added here. The `overflowVisible={true}` on `SegmentRoot` (added in the same PR) was presumably intended to let an inline SVG bleed beyond the segment edges, but since no SVG is rendered inside the segment, it's also currently a no-op change that removes `overflow-hidden` from the inner div unnecessarily.

### Issue 2 of 2
apps/desktop/src/routes/editor/Timeline/index.tsx:997-1008
**ZoomCurveTrack always mounted regardless of visibility state**

The collapsible wrapper uses CSS (`h-0 opacity-0`) to hide the track row but always keeps `ZoomCurveTrack` in the DOM. When `showZoomCurves` is `false`, the `<For>` loop, reactive signal subscriptions for every zoom segment, and all SVG path computations still run on every change to `zoomSegments` or `secsPerPixel`. Wrapping the inner content in a `<Show when={editorState.timeline.showZoomCurves}>` (while keeping the outer div for the CSS transition) would eliminate these unnecessary reactive updates.

Reviews (2): Last reviewed commit: "chore(ui): remove dead inline curve code..." | Re-trigger Greptile

yihuan added 27 commits June 7, 2026 02:10
feat(ui): change zoom curve track icon to Spline
Comment thread apps/desktop/src/routes/editor/Timeline/index.tsx Outdated
Comment thread apps/desktop/src/routes/editor/Timeline/TrackManager.tsx
Comment thread apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx Outdated
Comment thread apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx Outdated
@richiemcilroy
Copy link
Copy Markdown
Member

hey @greptileai please review the PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants