feat(timeline-layers): add TimelineLayer CompositeLayer + example#517
feat(timeline-layers): add TimelineLayer CompositeLayer + example#517
Conversation
Co-authored-by: charlieforward9 <62311337+charlieforward9@users.noreply.github.com>
|
@ibgreen I'd rather get a packaged example out now and incrementally split it up. Just put something on master and make it available for the community to help test out. @copilot I want to call it time.gl or temp.gl - shorter. and make it released - finally - we want his branch off the existing work we did months ago. Keep the history |
…ine-types, use in TrackWithSubtracks Co-authored-by: charlieforward9 <62311337+charlieforward9@users.noreply.github.com>
Fixed the CI failure in e3c6113. The TS2345 error was because Fix: moved On renaming to |
|
@copilot we need some tests for this layer |
…tection, time utils Co-authored-by: charlieforward9 <62311337+charlieforward9@users.noreply.github.com>
Added
|
Extracts the timeline prototype from PR #379 into a proper reusable
TimelineLayerin@deck.gl-community/timeline-layers, addressing Ib's feedback and the noodles.gl cross-project timeline discussion. The goal: a shared GPU-accelerated timeline primitive both noodles.gl and other deck.gl apps can mount directly.Module:
modules/timeline-layers/src/layers/timeline-layer/timeline-types.ts—TimelineClip,ClipWithSubtrack,TimelineTrack,TrackWithSubtracks, and all internal/callback info typestimeline-utils.ts—positionToTime,timeToPosition,timeAxisFormatters(seconds,minutesSeconds,hoursMinutesSeconds,timestamp)timeline-collision.ts— greedy subtrack assignment: overlapping clips automatically stack into subtrackstimeline-layout.ts—SelectionStyle,TimelineLayout,DEFAULT_TIMELINE_LAYOUTtimeline-layer.ts—TimelineLayer extends CompositeLayer: tracks, clips, axis, scrubber, hover/select state, zoom/pan APIAll new exports re-exported from the module root.
Example:
examples/timeline-layers/timeline-layer/Per Ib's review comments on #379 — app is concise, scrubber/controls broken into separate components:
app.tsx— lean DeckGL + OrthographicView mountdemo-controls.tsx— sidebar panel (track count, duration, formatter, scrubber, zoom, advanced settings)timeline-hooks.ts— interaction hooks:useWheelZoom,useContainerHandlers,useDeckGLHandlers,useCursorGetterdemo-utils.ts— random track/clip generator with 30% overlap probability to exercise collision detectionTests:
modules/timeline-layers/test/timeline-layer.spec.ts47 unit tests across 7 suites covering all pure-function logic (no WebGL context required):
assignClipsToSubtracks— empty input, non-overlapping lanes, overlapping lanes, packing, sort-order independence, property preservationcalculateSubtrackCount— 1/2/3 subtrack scenariospositionToTime— edges, midpoint, clamping, offset, non-zero startMstimeToPosition— edges, midpoint, clamping, round-trip withpositionToTimetimeAxisFormatters—seconds,minutesSeconds(padding),hoursMinutesSecondsgenerateTimelineTicks— count, first/last positions, formatter labelsTimelineLayer— static props,zoomToPoint(zoom in/out, max/min clamp, viewport callback range, boundary clamping)Usage
zoomToPoint(zoomFactor, mouseX, currentZoom)is exposed on the layer instance for wheel-zoom integration from the host app.🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.