@deck.gl-community/timeline-layers 9.2.8 → 9.3.1-alpha.0

package/src/layers/timeline-layer/timeline-layout.ts

@@ -0,0 +1,80 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+// ===== STYLE TYPES =====
+
+export type SelectionStyle = {
+  selectedClipColor?: [number, number, number, number];
+  hoveredClipColor?: [number, number, number, number];
+  selectedTrackColor?: [number, number, number, number];
+  hoveredTrackColor?: [number, number, number, number];
+  selectedLineWidth?: number;
+  hoveredLineWidth?: number;
+};
+
+export type TimelineLayout = {
+  x?: number;
+  y?: number;
+  width?: number;
+  trackHeight?: number;
+  trackSpacing?: number;
+  showTopAxis?: boolean;
+  showBottomAxis?: boolean;
+  axisHeight?: number;
+  axisTickHeight?: number;
+  axisLabelSize?: number;
+  showVerticalGrid?: boolean;
+  showTrackLabels?: boolean;
+  trackLabelWidth?: number;
+  scrubberWidth?: number;
+  scrubberHandleSize?: number;
+  scrubberLabelSize?: number;
+  clipPadding?: number;
+  clipLabelSize?: number;
+  showClipLabels?: boolean;
+  clipLabelsMinZoom?: number;
+  maxClipLabels?: number;
+  backgroundColor?: [number, number, number, number];
+  trackBackgroundColor?: [number, number, number, number];
+  trackBorderColor?: [number, number, number, number];
+  scrubberColor?: [number, number, number, number];
+  axisColor?: [number, number, number, number];
+  gridColor?: [number, number, number, number];
+  selectedClipColor?: [number, number, number, number];
+  hoveredClipColor?: [number, number, number, number];
+};
+
+// ===== CONSTANTS =====
+
+export const DEFAULT_TIMELINE_LAYOUT: Required<TimelineLayout> = {
+  x: 50,
+  y: 100,
+  width: 800,
+  trackHeight: 60,
+  trackSpacing: 10,
+  showTopAxis: true,
+  showBottomAxis: false,
+  axisHeight: 30,
+  axisTickHeight: 10,
+  axisLabelSize: 11,
+  showVerticalGrid: true,
+  showTrackLabels: true,
+  trackLabelWidth: 100,
+  scrubberWidth: 3,
+  scrubberHandleSize: 16,
+  scrubberLabelSize: 10,
+  clipPadding: 5,
+  clipLabelSize: 10,
+  showClipLabels: true,
+  clipLabelsMinZoom: 1.5,
+  maxClipLabels: 1000,
+  backgroundColor: [255, 255, 255, 0],
+  trackBackgroundColor: [240, 240, 240, 100],
+  trackBorderColor: [200, 200, 200, 255],
+  scrubberColor: [255, 69, 0, 255],
+  axisColor: [50, 50, 50, 255],
+  gridColor: [200, 200, 200, 128],
+  selectedClipColor: [255, 255, 0, 220],
+  hoveredClipColor: [255, 255, 255, 255]
+};

package/src/layers/timeline-layer/timeline-types.ts

@@ -0,0 +1,146 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+// ===== CORE DATA TYPES =====
+
+export type TimelineClip = {
+  id: string | number;
+  startMs: number;
+  endMs: number;
+  color?: [number, number, number, number];
+  label?: string;
+  subtrackIndex?: number;
+  [key: string]: unknown;
+};
+
+export type TimelineTrack = {
+  id: string | number;
+  clips: TimelineClip[];
+  visible?: boolean;
+  name?: string;
+  [key: string]: unknown;
+};
+
+// ===== INTERNAL DATA TYPES =====
+
+/** A clip that has been assigned to a specific subtrack by the collision-detection algorithm */
+export type ClipWithSubtrack = TimelineClip & {
+  subtrackIndex: number;
+};
+
+export type TrackWithSubtracks = {
+  track: TimelineTrack;
+  trackIndex: number;
+  clips: ClipWithSubtrack[];
+  subtrackCount: number;
+};
+
+export type TrackPosition = {
+  y: number;
+  height: number;
+  subtrackCount: number;
+};
+
+export type TrackBackgroundData = {
+  id: string;
+  track: TimelineTrack;
+  trackIndex: number;
+  polygon: [number, number][];
+  color: [number, number, number, number];
+};
+
+export type TrackLabelData = {
+  text: string;
+  position: [number, number, number];
+};
+
+export type ClipPolygonData = {
+  id: string | number;
+  clip: TimelineClip;
+  track: TimelineTrack;
+  clipIndex: number;
+  trackIndex: number;
+  subtrackIndex: number;
+  polygon: [number, number][];
+  color: [number, number, number, number];
+  label: string;
+  labelPosition: [number, number, number];
+};
+
+export type ClipLabelData = {
+  text: string;
+  position: [number, number, number];
+};
+
+export type SeparatorLineData = {
+  sourcePosition: [number, number];
+  targetPosition: [number, number];
+};
+
+export type AxisLineData = {
+  sourcePosition: [number, number];
+  targetPosition: [number, number];
+};
+
+export type AxisLabelData = {
+  text: string;
+  position: [number, number, number];
+};
+
+export type ScrubberLineData = {
+  sourcePosition: [number, number];
+  targetPosition: [number, number];
+};
+
+export type ScrubberHandleData = {
+  id: string;
+  polygon: [number, number][];
+  color: [number, number, number, number];
+};
+
+export type ScrubberLabelData = {
+  text: string;
+  position: [number, number, number];
+};
+
+export type TimelineTick = {
+  position: number;
+  timeMs: number;
+  label: string;
+};
+
+// ===== CALLBACK INFO TYPES =====
+
+export type TimelineViewport = {
+  startMs?: number;
+  endMs?: number;
+};
+
+export type TimelineClipInfo = {
+  clip: TimelineClip;
+  track: TimelineTrack;
+  clipIndex: number;
+  trackIndex: number;
+  subtrackIndex: number;
+};
+
+export type TimelineTrackInfo = {
+  track: TimelineTrack;
+  index: number;
+};
+
+export type TimelineScrubberInfo = {
+  timeMs: number;
+  isDragging: boolean;
+};
+
+export type TimelineViewportInfo = {
+  startMs: number;
+  endMs: number;
+  zoomLevel: number;
+};
+
+// ===== FORMATTER TYPE =====
+
+export type TimeAxisLabelFormatter = (timeMs: number) => string;

package/src/layers/timeline-layer/timeline-utils.ts

@@ -0,0 +1,85 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {TimeAxisLabelFormatter, TimelineTick} from './timeline-types';
+
+// ===== TIME FORMATTERS =====
+
+export const timeAxisFormatters = {
+  seconds: (timeMs: number): string => `${(timeMs / 1000).toFixed(1)}s`,
+  timestamp: (timeMs: number): string => new Date(timeMs).toLocaleTimeString(),
+  minutesSeconds: (timeMs: number): string => {
+    const totalSeconds = Math.floor(timeMs / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  },
+  hoursMinutesSeconds: (timeMs: number): string => {
+    const totalSeconds = Math.floor(timeMs / 1000);
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+    return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+  }
+};
+
+// ===== TIMELINE HELPERS =====
+
+export type GenerateTicksOptions = {
+  startMs: number;
+  endMs: number;
+  timelineX: number;
+  timelineWidth: number;
+  tickCount: number;
+  formatter: TimeAxisLabelFormatter;
+};
+
+/**
+ * Generate timeline axis ticks
+ */
+export function generateTimelineTicks(opts: GenerateTicksOptions): TimelineTick[] {
+  const {startMs, endMs, timelineX, timelineWidth, tickCount, formatter} = opts;
+  const ticks: TimelineTick[] = [];
+  const timeRange = endMs - startMs;
+  const step = timeRange / (tickCount - 1);
+
+  for (let i = 0; i < tickCount; i++) {
+    const timeMs = startMs + i * step;
+    const position = timelineX + (i / (tickCount - 1)) * timelineWidth;
+    const label = formatter(timeMs);
+    ticks.push({position, timeMs, label});
+  }
+
+  return ticks;
+}
+
+/**
+ * Convert canvas/pixel position to time
+ */
+export function positionToTime(
+  x: number,
+  timelineX: number,
+  timelineWidth: number,
+  startMs: number,
+  endMs: number
+): number {
+  const ratio = (x - timelineX) / timelineWidth;
+  const clampedRatio = Math.max(0, Math.min(1, ratio));
+  return startMs + clampedRatio * (endMs - startMs);
+}
+
+/**
+ * Convert time to canvas/pixel position
+ */
+export function timeToPosition(
+  timeMs: number,
+  timelineX: number,
+  timelineWidth: number,
+  startMs: number,
+  endMs: number
+): number {
+  const timeRatio = (timeMs - startMs) / (endMs - startMs);
+  const clampedRatio = Math.max(0, Math.min(1, timeRatio));
+  return timelineX + clampedRatio * timelineWidth;
+}