@cliquify.me/timeline 3.1.8 → 3.1.10

package/dist/timeline.d.ts

@@ -0,0 +1,94 @@
+import { Canvas, CanvasOptions, TPointerEvent } from 'fabric';
+import { default as CanvasMixin } from './mixins/canvas';
+import { default as TrackItemsMixin } from './mixins/track-items';
+import { default as TracksMixin } from './mixins/tracks';
+import { default as TransitionsMixin } from './mixins/transitions';
+import { ITimelineScaleState, ITrack, ITrackItem, ITransition, IStateManager, IUpdateStateOptions, IItem, CanvasSpacing } from '@cliquify.me/types';
+
+interface Bounding {
+    width: number;
+    height: number;
+}
+export interface TimelineOptions extends CanvasOptions {
+    bounding?: {
+        width: number;
+        height: number;
+    };
+    onScroll?: OnScroll;
+    onResizeCanvas?: OnResizeCanvas;
+    tScale?: number;
+    scale: ITimelineScaleState;
+    state?: IStateManager;
+    acceptsMap?: Record<string, string[]>;
+    sizesMap?: Record<string, number>;
+    spacing?: CanvasSpacing;
+}
+type OnScroll = (v: {
+    scrollTop: number;
+    scrollLeft: number;
+}) => void;
+type OnResizeCanvas = (v: {
+    width: number;
+    height: number;
+}) => void;
+interface Timeline extends Canvas, CanvasMixin, TrackItemsMixin, TracksMixin, TransitionsMixin {
+}
+declare class Timeline extends Canvas {
+    static registerItems(classes: Record<any, any>): void;
+    acceptsMap: Record<string, string[]>;
+    sizesMap: Record<string, number>;
+    tracks: ITrack[];
+    trackItemsMap: Record<string, ITrackItem>;
+    trackItemIds: string[];
+    transitionIds: string[];
+    transitionsMap: Record<string, ITransition>;
+    trackItemDetailsMap: Record<string, IItem>;
+    scale: ITimelineScaleState;
+    duration: number;
+    bounding: Bounding;
+    onScroll?: OnScroll;
+    onResizeCanvas?: OnResizeCanvas;
+    tScale: number;
+    state: IStateManager;
+    activeIds: string[];
+    spacing: CanvasSpacing;
+    guideLineColor: string;
+    transitionGroups: (ITrackItem | ITransition)[][];
+    constructor(canvasEl: HTMLCanvasElement, options: Partial<TimelineOptions> & {
+        scale: ITimelineScaleState;
+        duration: number;
+        guideLineColor?: string;
+    });
+    private initializeCanvasDefaults;
+    __onMouseDown(e: TPointerEvent): void;
+    initEventListeners(): void;
+    setActiveIds(activeIds: string[]): void;
+    updateState(dataHistory?: IUpdateStateOptions): void;
+    private getUpdatedState;
+    getDurationBasedOnTrackItemsPosition(): number;
+    notify(dataHistory?: IUpdateStateOptions): void;
+    getState(): {
+        tracks: ITrack[];
+        trackItemIds: string[];
+        trackItemsMap: Record<string, ITrackItem>;
+        transitionIds: string[];
+        transitionsMap: Record<string, ITransition>;
+        trackItemDetailsMap: Record<string, IItem>;
+        scale: ITimelineScaleState;
+        duration: number;
+    };
+    purge(): void;
+    scrollTo({ scrollLeft, scrollTop }: {
+        scrollLeft?: number;
+        scrollTop?: number;
+    }): void;
+    setBounding(bounding: Bounding): void;
+    calcBounding(): void;
+    setViewportPos(posX: number, posY: number): void;
+    getViewportPos(posX: number, posY: number): {
+        x: number;
+        y: number;
+    };
+    setScale(scale: ITimelineScaleState): void;
+}
+export default Timeline;

package/dist/utils/accepts.d.ts

@@ -0,0 +1,2 @@
+export declare const generateAcceptsMap: (aceptsMap?: Record<string, string[]>) => Record<string, string[]>;
+export declare const generateSizesMap: (sizesMap?: Record<string, number>) => Record<string, number>;

package/dist/utils/apply-mixins.d.ts

@@ -0,0 +1,7 @@
+export type Constructor<T = object> = new (...args: any[]) => T;
+/***
+ * https://www.typescriptlang.org/docs/handbook/mixins.html#alternative-pattern
+ */
+export declare function applyMixins<T extends Constructor, S extends Constructor>(derivedCtor: T, constructors: S[]): T & {
+    prototype: InstanceType<T & S>;
+};

package/dist/utils/array.d.ts

@@ -0,0 +1,6 @@
+import { ITrack } from '@cliquify.me/types';
+
+export declare function findRelativePosition(arr: number[], referenceValue: number, targetValue: number): number | null;
+export declare function createCombinedTracksArray(refTrack: ITrack, newTracks: (ITrack & {
+    tempIndex: number;
+})[]): ITrack[];

package/dist/utils/canvas.d.ts

@@ -0,0 +1,8 @@
+import { Canvas, FabricObject, TPointerEvent } from 'fabric';
+import { CanvasSpacing } from '@cliquify.me/types';
+
+export declare const clearPlaceholderObjects: (canvas: Canvas, placeholderMovingObjects: FabricObject[]) => void;
+export declare const clearTrackHelperGuides: (allObjects: FabricObject[]) => void;
+export declare const isHelperTrack: (obj: FabricObject | undefined) => boolean;
+export declare const calcCanvasSpacing: (payload?: Partial<CanvasSpacing>) => CanvasSpacing;
+export declare const isTouchEvent: (event: TPointerEvent) => boolean;

package/dist/utils/clone-deep.d.ts

@@ -0,0 +1 @@
+export declare function cloneDeep<T>(obj: T): T;

package/dist/utils/fabric.d.ts

@@ -0,0 +1,15 @@
+import { Transform, TransformActionHandler } from 'fabric';
+
+/**
+ * Checks if transform is centered
+ * @param {Object} transform transform data
+ * @return {Boolean} true if transform is centered
+ */
+export declare function isTransformCentered(transform: Transform): boolean;
+/**
+ * Wrap an action handler with saving/restoring object position on the transform.
+ * this is the code that permits to objects to keep their position while transforming.
+ * @param {Function} actionHandler the function to wrap
+ * @return {Function} a function with an action handler signature
+ */
+export declare function wrapWithFixedAnchor<T extends Transform>(actionHandler: TransformActionHandler<T>): TransformActionHandler<T>;

package/dist/utils/group-by-transition.d.ts

@@ -0,0 +1,18 @@
+import { ITrackItemsMap, ITransition, ITrackItem } from '@cliquify.me/types';
+import { FabricObject, RectProps } from 'fabric';
+
+export type GroupElement = ITrackItem | ITransition;
+export declare const compareTransitionGroups: (a: GroupElement[], b: GroupElement[]) => boolean;
+export declare const groupByTransition: (data: {
+    trackItemIds: string[];
+    transitionsMap: Record<string, ITransition>;
+    trackItemsMap: ITrackItemsMap;
+}) => GroupElement[][];
+export declare function getNextTransitionMappings(tracks: FabricObject[], trackItems: FabricObject[], currentTransitionsMap: Record<string, ITransition>, positionAfterTransform: Record<string, Pick<RectProps, "left" | "top">>): {
+    newTransitionIds: string[];
+    newTransitionsMap: Record<string, ITransition>;
+};
+export declare const getAdjustedTrackItemDimensions: (id: string, transitionGroup: GroupElement[]) => {
+    durationDiff: number;
+    offsetTransitions: number;
+};

package/dist/utils/group-items.d.ts

@@ -0,0 +1,11 @@
+import { ITrackItemsMap, ITransition, ITrackItem } from '@cliquify.me/types';
+import { default as Timeline } from '../timeline';
+
+type GroupElement = ITrackItem | ITransition;
+export declare const groupTrackItems: (data: {
+    trackItemIds: string[];
+    transitionsMap: Record<string, ITransition>;
+    trackItemsMap: ITrackItemsMap;
+}) => GroupElement[][];
+export declare const getPrevTransitionDuration: (timeline: Timeline, id: string) => number;
+export {};

package/dist/utils/guideline.d.ts

@@ -0,0 +1,57 @@
+import { Canvas, FabricObject, TBBox } from 'fabric';
+import { default as Timeline } from '../timeline';
+
+export declare const clearAuxiliaryObjects: (canvas: Canvas, allObjects: FabricObject[]) => void;
+interface LineGuide {
+    val: number;
+    start: number;
+    end: number;
+}
+export declare const getLineGuideStops: (skipShapes: FabricObject[], canvas: Canvas) => {
+    vertical: LineGuide[];
+    horizontal: LineGuide[];
+};
+export declare const getGuides: (lineGuideStops: {
+    vertical: LineGuide[];
+    horizontal: LineGuide[];
+}, itemBounds: {
+    vertical: {
+        guide: number;
+        offset: number;
+        snap: string;
+    }[];
+    horizontal: {
+        guide: number;
+        offset: number;
+        snap: string;
+    }[];
+}) => Guide[];
+interface Guide {
+    lineGuide: number;
+    offset: number;
+    orientation: "V" | "H";
+    snap: string;
+    targetDim: {
+        start: number;
+        end: number;
+    };
+}
+export declare const drawGuides: (guides: Guide[], _: TBBox, canvas: Timeline) => void;
+export declare const getObjectSnappingEdges: (target: FabricObject) => {
+    vertical: {
+        guide: number;
+        offset: number;
+        snap: string;
+    }[];
+    horizontal: {
+        guide: number;
+        offset: number;
+        snap: string;
+    }[];
+};
+export declare const getStopsForObject: (start: number, distance: number, drawStart: number, drawDistance: number) => {
+    val: number;
+    start: number;
+    end: number;
+}[];
+export {};

package/dist/utils/id.d.ts

@@ -0,0 +1 @@
+export declare function generateId(length?: number): string;

package/dist/utils/index.d.ts

@@ -0,0 +1,6 @@
+export { changeWidth } from '../resize/common';
+export * from '../controls/controls';
+export * from './timeline';
+export * from './id';
+export * from './resolve-origin';
+export * from './fabric';

package/dist/utils/item.d.ts

@@ -0,0 +1,3 @@
+import { ITrack } from '@cliquify.me/types';
+
+export declare function removeItemsFromTrack(tracks: ITrack[], itemsToRemove: string[]): ITrack[];

package/dist/utils/load-object.d.ts

@@ -0,0 +1,43 @@
+import { Audio, Caption, Image, Text, Video } from '../objects';
+import { IAudio, IDisplay, ITextDetails, ITrackItem, ITrackItemAndDetails, ITrim, IVideo } from '@cliquify.me/types';
+import { default as Template } from '../objects/template';
+
+export declare const loadVideoObject: (item: IVideo, options: {
+    tScale: number;
+    sizesMap: Record<string, number>;
+}) => Video;
+export declare const loadTextObject: (item: {
+    display: IDisplay;
+    id: string;
+    details: ITextDetails;
+}, options: {
+    tScale: number;
+    sizesMap: Record<string, number>;
+}) => Text;
+export declare const loadCaptionObject: (item: {
+    display: IDisplay;
+    id: string;
+    details: ITextDetails;
+}, options: {
+    tScale: number;
+    sizesMap: Record<string, number>;
+}) => Caption;
+export declare const loadImageObject: (item: ITrackItem, options: {
+    tScale: number;
+    sizesMap: Record<string, number>;
+}) => Image;
+export declare const loadAudioObject: (item: IAudio, options: {
+    tScale: number;
+    sizesMap: Record<string, number>;
+}) => Audio;
+export declare const loadTemplateObject: (item: {
+    id: string;
+    display: IDisplay;
+    trim?: ITrim;
+}, options: {
+    tScale: number;
+}) => Template;
+export declare const loadMediaObject: (item: ITrackItemAndDetails, options: {
+    tScale: number;
+    sizesMap: Record<string, number>;
+}) => Image | Video | Audio | Text | Caption | Template | undefined;

package/dist/utils/over-element.d.ts

@@ -0,0 +1,6 @@
+import { FabricObject, Point } from 'fabric';
+
+export declare const detectOverObject: (point: Point, objects: FabricObject[]) => {
+    isOverObject: boolean;
+    overObjects: FabricObject<Partial<import('fabric').FabricObjectProps>, import('fabric').SerializedObjectProps, import('fabric').ObjectEvents>[];
+};

package/dist/utils/resolve-origin.d.ts

@@ -0,0 +1,9 @@
+import { TOriginX, TOriginY } from 'fabric';
+
+/**
+ * Resolves origin value relative to center
+ * @private
+ * @param {TOriginX | TOriginY} originValue originX / originY
+ * @returns number
+ */
+export declare const resolveOrigin: (originValue: TOriginX | TOriginY | number) => number;

package/dist/utils/sizes.d.ts

@@ -0,0 +1,3 @@
+import { ItemType } from '@cliquify.me/types';
+
+export declare const getItemHeight: (type: ItemType | "helperTop" | "helperBottom" | "helperCenter" | "main") => number;

package/dist/utils/timeline.d.ts

@@ -0,0 +1,6 @@
+import { ITrackItem } from '@cliquify.me/types';
+
+export declare function timeMsToUnits(timeMs: number, zoom?: number, playbackRate?: number): number;
+export declare function unitsToTimeMs(units: number, zoom?: number, playbackRate?: number): number;
+export declare function calculateTimelineWidth(totalLengthMs: number, zoom?: number): number;
+export declare const getDuration: (trackItems: Record<string, ITrackItem>) => number;

package/package.json

@@ -1,13 +1,20 @@
 {
   "name": "@cliquify.me/timeline",
-  "version": "3.1.8",
+  "version": "3.1.10",
   "private": false,
   "files": [
     "dist"
   ],
-  "main": "src/index.ts",
-  "module": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.11.24",
@@ -27,7 +34,7 @@
   "peerDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@designcombo/events": "^1.0.2",
-    "@cliquify.me/types": "3.1.8"
+    "@cliquify.me/types": "3.1.10"
   },
   "scripts": {
     "dev": "vite",

package/src/index.ts

@@ -1,18 +0,0 @@
-export { drawVerticalLine } from "./controls/draw";
-export * from "./objects";
-export { default } from "./timeline";
-export * from "./utils";
-export * from "./constants";
-export * from "./resize";
-export * from "./global";
-export * from "./timeline";
-export {
-  FabricObject,
-  Control,
-  classRegistry,
-  Rect,
-  util,
-  controlsUtils,
-  Pattern
-} from "fabric";
-export type { TransformActionHandler } from "fabric";