@taskctrl/canvas-timeline 0.1.0 → 0.1.2

package/dist/interaction/InteractionHandler.d.ts

@@ -0,0 +1,35 @@
+import type { Item } from '../types';
+export type InteractionMode = 'move' | 'resize-left' | 'resize-right';
+export interface InteractionState {
+    item: Item;
+    mode: InteractionMode;
+    startX: number;
+    startY: number;
+    currentX: number;
+    currentY: number;
+    deltaX: number;
+    originalGroup: string | number;
+    currentGroup: string | number;
+}
+export declare class InteractionHandler {
+    private state;
+    private dragSnap;
+    private activated;
+    constructor(dragSnap: number);
+    startInteraction(item: Item, mode: InteractionMode, x: number, y: number): void;
+    update(x: number, y: number): void;
+    setCurrentGroup(groupId: string | number): void;
+    endMove(pixelsPerMs: number): {
+        newStartTime: number;
+        newGroupId: string | number;
+    } | null;
+    endResize(pixelsPerMs: number): {
+        newTime: number;
+        edge: 'left' | 'right';
+    } | null;
+    cancel(): void;
+    getState(): InteractionState | null;
+    getMode(): InteractionMode | null;
+    isActive(): boolean;
+    isPending(): boolean;
+}

package/dist/interaction/ScrollHandler.d.ts

@@ -0,0 +1,9 @@
+export declare class ScrollHandler {
+    private onScrollVertical;
+    private onScrollHorizontal;
+    constructor(onScrollVertical: (deltaY: number) => void, onScrollHorizontal: (deltaX: number) => void);
+    handleWheel(event: WheelEvent): void;
+    handleVerticalScroll(deltaY: number): void;
+    handleHorizontalScroll(deltaX: number): void;
+    attach(element: HTMLElement): () => void;
+}

package/dist/interaction/ZoomHandler.d.ts

@@ -0,0 +1,10 @@
+export declare class ZoomHandler {
+    private onZoom;
+    private visibleTimeStart;
+    private visibleTimeEnd;
+    private minZoom;
+    private maxZoom;
+    constructor(onZoom: (newStart: number, newEnd: number) => void, visibleTimeStart: number, visibleTimeEnd: number, minZoom: number, maxZoom: number);
+    updateBounds(start: number, end: number): void;
+    handleWheelZoom(e: WheelEvent, cursorRatio: number): void;
+}

package/dist/types.d.ts

@@ -0,0 +1,149 @@
+import type React from 'react';
+export interface Group {
+    id: number | string;
+    title: string;
+    type?: string;
+    hierarchy?: string;
+    root?: boolean;
+    [key: string]: unknown;
+}
+export interface Item {
+    id: number;
+    group: number | string;
+    start_time: number;
+    end_time: number;
+    type?: string;
+    [key: string]: unknown;
+}
+export interface ItemBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ItemState {
+    selected: boolean;
+    hovered: boolean;
+    dragging: boolean;
+    filtered: boolean;
+}
+export interface DrawHelpers {
+    roundRect(x: number, y: number, w: number, h: number, radius?: number): void;
+    fillText(text: string, x: number, y: number, maxWidth?: number): void;
+    gradient(x: number, w: number, color1: string, color2: string): CanvasGradient;
+    leftBar(color: string, width?: number): void;
+    icon(type: 'check' | 'danger-red' | 'danger-yellow', x: number, y: number, size?: number): void;
+    badge(text: string, x: number, y: number, bgColor: string): void;
+}
+export type CanvasItemRenderer = (ctx: CanvasRenderingContext2D, item: Item, bounds: ItemBounds, state: ItemState, helpers: DrawHelpers) => void;
+export type CanvasGroupItemRenderer = CanvasItemRenderer;
+export interface DayStyle {
+    backgroundColor?: string;
+    borderColor?: string;
+    opacity?: number;
+}
+export interface RowStyle {
+    backgroundColor?: string;
+    borderBottomColor?: string;
+}
+export interface Dependency {
+    fromItemId: number;
+    toItemId: number;
+    type?: 'finish-to-start' | 'start-to-start' | 'finish-to-finish';
+    color?: string;
+}
+export interface TimelineTheme {
+    primary: string;
+    trainColors: Record<string, string>;
+    status: {
+        red: string;
+        yellow: string;
+        green: string;
+    };
+    grid: {
+        line: string;
+        rowAlt: string;
+        weekend: string;
+    };
+    item: {
+        radius: number;
+        text: string;
+        selectedRing: string;
+    };
+    marker: {
+        today: string;
+        milestone: string;
+        cursor: string;
+    };
+    sidebar: {
+        bg: string;
+        border: string;
+        text: string;
+    };
+    header: {
+        bg: string;
+        border: string;
+        text: string;
+    };
+}
+export declare const DEFAULT_THEME: TimelineTheme;
+export interface MarkerConfig {
+    date: number;
+    color: string;
+    width: number;
+    label?: string;
+}
+export interface CanvasTimelineProps {
+    groups: Group[];
+    items: Item[];
+    defaultTimeStart: number;
+    defaultTimeEnd: number;
+    visibleTimeStart?: number;
+    visibleTimeEnd?: number;
+    sidebarWidth: number;
+    lineHeight: number;
+    itemHeightRatio: number;
+    stackItems: boolean;
+    buffer?: number;
+    canMove: boolean;
+    canResize: false | 'left' | 'right' | 'both';
+    canChangeGroup: boolean;
+    dragSnap: number;
+    minZoom: number;
+    maxZoom: number;
+    theme?: Partial<TimelineTheme>;
+    dayStyle?: (date: Date) => DayStyle | null;
+    rowStyle?: (group: Group) => RowStyle | null;
+    showCursorLine?: boolean;
+    itemRenderer: CanvasItemRenderer;
+    groupRenderer?: CanvasGroupItemRenderer;
+    sidebarGroupRenderer: (group: Group) => React.ReactNode;
+    rightSidebarWidth?: number;
+    rightSidebarGroupRenderer?: (group: Group) => React.ReactNode;
+    dependencies?: Dependency[];
+    onItemClick?: (itemId: number, e: PointerEvent) => void;
+    onItemDoubleClick?: (itemId: number, e: PointerEvent) => void;
+    onItemContextMenu?: (itemId: number, e: PointerEvent) => void;
+    onItemMove?: (itemId: number, newStartTime: number, newGroupId: string | number) => void;
+    onItemResize?: (itemId: number, newTime: number, edge: 'left' | 'right') => void;
+    /** Validate and optionally constrain move/resize. Return the (possibly modified) time. */
+    moveResizeValidator?: (action: 'move' | 'resize', itemId: number, time: number, edge?: 'left' | 'right') => number;
+    onItemHover?: (itemId: number | null, e: PointerEvent) => void;
+    onCanvasDoubleClick?: (groupId: number, time: number) => void;
+    onCanvasContextMenu?: (groupId: number, time: number, e: PointerEvent) => void;
+    onTimeChange?: (start: number, end: number) => void;
+    onZoom?: (start: number, end: number) => void;
+    selected?: number[];
+    /** Called when the timeline is ready, providing the capture API */
+    onReady?: (api: CanvasTimelineRef) => void;
+    children?: React.ReactNode;
+}
+export interface CaptureOptions {
+    timeStart: number;
+    timeEnd: number;
+    scale: number;
+    sidebarWidth: number;
+}
+export interface CanvasTimelineRef {
+    captureToCanvas(options: CaptureOptions): HTMLCanvasElement;
+}

package/package.json

@@ -1,13 +1,18 @@
 {
   "name": "@taskctrl/canvas-timeline",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "High-performance canvas-based timeline component for React",
   "scripts": {
     "build": "rimraf ./dist && tsc && vite build",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
-    "lint": "eslint --ext .ts --ext .tsx ./src"
+    "lint": "eslint --ext .ts --ext .tsx ./src",
+    "release": "yarn release:patch",
+    "release:patch": "npm version patch -m \"chore: release v%s\" && git push origin HEAD --follow-tags",
+    "release:minor": "npm version minor -m \"chore: release v%s\" && git push origin HEAD --follow-tags",
+    "release:major": "npm version major -m \"chore: release v%s\" && git push origin HEAD --follow-tags",
+    "release:beta": "npm version prerelease --preid=beta -m \"chore: release v%s\" && git push origin HEAD --follow-tags"
   },
   "main": "./dist/canvas-timeline.cjs.js",
   "module": "./dist/canvas-timeline.es.js",