@cliquify.me/timeline 5.0.2 → 5.0.4

package/dist/scrollbar/index.d.ts

@@ -0,0 +1,57 @@
+import { TMat2D, TPointerEvent } from 'fabric';
+import { default as Timeline } from '../timeline';
+import { ScrollbarProps, ScrollbarsProps, ScrollbarXProps, ScrollbarYProps } from './types';
+
+export declare class Scrollbars {
+    canvas: Timeline;
+    fill: string;
+    stroke: string;
+    lineWidth: number;
+    hideX: boolean;
+    hideY: boolean;
+    scrollbarMinWidth: number;
+    scrollbarSize: number;
+    scrollSpace: number;
+    padding: number;
+    extraMarginX: number;
+    extraMarginY: number;
+    offsetX: number;
+    offsetY: number;
+    scrollbarWidth: number;
+    scrollbarColor: string;
+    onViewportChange?: (left: number) => void;
+    private _bar?;
+    private _barViewport;
+    private _originalMouseDown;
+    private _originalMouseMove;
+    private _originalMouseUp;
+    constructor(canvas: Timeline, props?: ScrollbarsProps);
+    initBehavior(): void;
+    getScrollbar(e: TPointerEvent): {
+        type: string;
+        start: number;
+        vpt: TMat2D;
+    } | undefined;
+    mouseDownHandler(e: TPointerEvent): void;
+    mouseMoveHandler(e: TPointerEvent): void;
+    mouseUpHandler(e: TPointerEvent): void;
+    beforeRenderHandler(): void;
+    afterRenderHandler(): void;
+    render(ctx: CanvasRenderingContext2D, mapRect: ScrollbarProps, objectRect: ScrollbarProps): void;
+    drawScrollbarX(ctx: CanvasRenderingContext2D, mapRect: ScrollbarXProps, objectRect: ScrollbarXProps): void;
+    drawScrollbarY(ctx: CanvasRenderingContext2D, mapRect: ScrollbarYProps, objectRect: ScrollbarYProps): void;
+    drawRect(ctx: CanvasRenderingContext2D, props: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    }): void;
+    getObjectsBoundingRect(): {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    };
+    applyViewportLimits(vpt: TMat2D): void;
+    dispose(): void;
+}

package/dist/scrollbar/types.d.ts

@@ -0,0 +1,26 @@
+export type ScrollbarsProps = {
+    fill?: string;
+    stroke?: string;
+    lineWidth?: number;
+    hideX?: boolean;
+    hideY?: boolean;
+    scrollbarMinWidth?: number;
+    scrollbarSize?: number;
+    scrollSpace?: number;
+    padding?: number;
+    extraMarginX?: number;
+    extraMarginY?: number;
+    offsetX?: number;
+    offsetY?: number;
+    scrollbarWidth?: number;
+    scrollbarColor?: string;
+    onViewportChange?: (left: number) => void;
+};
+export type ScrollbarProps = {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
+export type ScrollbarXProps = Pick<ScrollbarProps, "left" | "right">;
+export type ScrollbarYProps = Pick<ScrollbarProps, "top" | "bottom">;

package/dist/scrollbar/util.d.ts

@@ -0,0 +1,15 @@
+import { TPointerEventInfo } from 'fabric';
+import { default as Timeline } from '../timeline';
+
+type SizeProps = {
+    min: number;
+    max: number;
+};
+type MouseWheelOptions = {
+    offsetX?: number;
+    offsetY?: number;
+    extraMarginX?: number;
+    extraMarginY?: number;
+} & Partial<SizeProps>;
+export declare const makeMouseWheel: (canvas: Timeline, options?: MouseWheelOptions) => (wheelEvent: TPointerEventInfo<WheelEvent>) => void;
+export {};

package/dist/timeline.d.ts

@@ -25,6 +25,14 @@ export interface TimelineOptions extends CanvasOptions {
     spacing?: CanvasSpacing;
     withTransitions?: string[];
 }
+type ScrollConfig = {
+    offsetX?: number;
+    offsetY?: number;
+    extraMarginX?: number;
+    extraMarginY?: number;
+    scrollbarWidth?: number;
+    scrollbarColor?: string;
+};
 type OnScroll = (v: {
     scrollTop: number;
     scrollLeft: number;
@@ -59,11 +67,17 @@ declare class Timeline extends Canvas {
     spacing: CanvasSpacing;
     guideLineColor: string;
     withTransitions: string[];
+    private _mouseWheelHandler?;
+    private _scrollbars?;
+    private _viewportChangeCallback?;
     constructor(canvasEl: HTMLCanvasElement, options: Partial<TimelineOptions> & {
         scale: ITimelineScaleState;
         duration: number;
         guideLineColor?: string;
     });
+    initScrollbars(config?: ScrollConfig): void;
+    onViewportChange(callback: (left: number) => void): void;
+    disposeScrollbars(): void;
     getItemAccepts(itemType: string): string[];
     getItemSize(itemType: string): number;
     private initializeCanvasDefaults;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cliquify.me/timeline",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -37,7 +37,7 @@
   "peerDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@designcombo/events": "^1.0.2",
-    "@cliquify.me/types": "5.0.2"
+    "@cliquify.me/types": "5.0.4"
   },
   "scripts": {
     "dev": "vite",