@designcombo/video 0.1.8 → 0.1.10

package/dist/studio/selection-manager.d.ts

@@ -0,0 +1,49 @@
+import { Application, Container, Graphics } from 'pixi.js';
+import { IClip } from '../clips/iclip';
+import { Transformer } from '../transfomer/transformer';
+import { Studio } from '../studio';
+export declare class SelectionManager {
+    private studio;
+    selectedClips: Set<IClip>;
+    activeTransformer: Transformer | null;
+    interactiveClips: Set<IClip>;
+    selectionGraphics: Graphics | null;
+    isDragSelecting: boolean;
+    private dragSelectionStart;
+    private isUpdatingTextClipRealtime;
+    private textClipResizedWidth;
+    private textClipResizeHandle;
+    private textClipResizedSx;
+    private textClipResizedSy;
+    constructor(studio: Studio);
+    init(app: Application, artboard: Container): void;
+    private onStagePointerDown;
+    private onStagePointerMove;
+    private onStagePointerUp;
+    /**
+     * Setup sprite interactivity for click selection
+     */
+    setupSpriteInteractivity(clip: IClip): void;
+    /**
+     * Find the topmost clip (highest zIndex) at a given point
+     */
+    getTopmostClipAtPoint(globalPoint: {
+        x: number;
+        y: number;
+    }): IClip | null;
+    /**
+     * Select a clip and show transform controls
+     */
+    selectClip(clip: IClip, addToSelection?: boolean): void;
+    selectClipsByIds(ids: string[]): void;
+    setSelection(clips: IClip[]): void;
+    deselectClip(): void;
+    clear(): void;
+    private recreateTransformer;
+    private destroyTransformer;
+    private createTransformer;
+    private syncSelectedClipsTransformsRealtime;
+    private syncSelectedClipsTransforms;
+    private syncSpriteToClipProperties;
+    deleteSelected(): Promise<void>;
+}

package/dist/studio/timeline-model.d.ts

@@ -0,0 +1,77 @@
+import { Studio, StudioTrack } from '../studio';
+import { IClip } from '../clips/iclip';
+import { VideoClip } from '../clips/video-clip';
+import { ImageClip } from '../clips/image-clip';
+import { ProjectJSON } from '../json-serialization';
+export declare class TimelineModel {
+    private studio;
+    tracks: StudioTrack[];
+    clips: IClip[];
+    constructor(studio: Studio);
+    getTrackById(trackId: string): StudioTrack | undefined;
+    getClipById(clipId: string): IClip | undefined;
+    findTrackIdByClipId(clipId: string): string | undefined;
+    getTrackIndex(trackId: string): number;
+    /**
+     * Add a new track to the studio
+     */
+    addTrack(track: {
+        name: string;
+        type: string;
+        id?: string;
+    }): StudioTrack;
+    /**
+     * Remove a track and all its clips
+     */
+    removeTrack(trackId: string): Promise<void>;
+    /**
+     * Add a Media clip (Video/Image) to the main track with ripple effect
+     */
+    addMedia(clip: VideoClip | ImageClip): Promise<void>;
+    /**
+     * Add a Transition clip at the join where the selected clip starts.
+     */
+    addTransition(transitionKey: string, duration?: number, fromClipId?: string | null, toClipId?: string | null): Promise<void>;
+    /**
+     * Add a clip to the studio
+     */
+    addClip(clip: IClip, options?: {
+        trackId?: string;
+        audioSource?: string | File | Blob;
+    } | string | File | Blob): Promise<void>;
+    removeClip(clip: IClip): Promise<void>;
+    removeClipById(clipId: string): Promise<void>;
+    updateClip(clipId: string, updates: Partial<IClip>): Promise<void>;
+    /**
+     * Export current project state to JSON
+     */
+    exportToJSON(): ProjectJSON;
+    /**
+     * Load clips from JSON
+     */
+    loadFromJSON(json: ProjectJSON): Promise<void>;
+    private loadClipIntoTrack;
+    /**
+     * Delete all currently selected clips
+     */
+    deleteSelected(): Promise<void>;
+    /**
+     * Duplicate all currently selected clips
+     */
+    duplicateSelected(): Promise<void>;
+    /**
+     * Split the selected clip at the given time or current time
+     */
+    splitSelected(splitTime?: number): Promise<void>;
+    /**
+     * Trim the selected clip from a specified time
+     * @param trimFromSeconds - Number of seconds to trim from the start of the clip
+     */
+    trimSelected(trimFromSeconds: number): Promise<void>;
+    updateSelected(updates: Partial<IClip>): Promise<void>;
+    setTracks(tracks: StudioTrack[]): Promise<void>;
+    recalculateMaxDuration(): Promise<void>;
+    private setupPlaybackForClip;
+    private isPlaybackCapable;
+    clear(): Promise<void>;
+}

package/dist/studio/transport.d.ts

@@ -0,0 +1,36 @@
+import { Studio } from '../studio';
+import { IClip, IPlaybackCapable } from '../clips/iclip';
+export interface PlaybackElementInfo {
+    element: HTMLVideoElement | HTMLAudioElement;
+    objectUrl?: string;
+}
+export declare class Transport {
+    private studio;
+    isPlaying: boolean;
+    currentTime: number;
+    maxDuration: number;
+    private playStartTime;
+    private playStartTimestamp;
+    private rafId;
+    playbackElements: Map<IClip, PlaybackElementInfo>;
+    constructor(studio: Studio);
+    setMaxDuration(duration: number): void;
+    /**
+     * Start playback
+     */
+    play(): Promise<void>;
+    /**
+     * Pause playback
+     */
+    pause(): void;
+    /**
+     * Stop playback and reset to start
+     */
+    stop(): Promise<void>;
+    /**
+     * Seek to a specific time (in microseconds)
+     */
+    seek(time: number): Promise<void>;
+    private renderLoop;
+    isPlaybackCapable(clip: any): clip is IPlaybackCapable;
+}

package/dist/studio.d.ts

@@ -1,10 +1,15 @@
-import { Texture } from 'pixi.js';
+import { Application, Sprite, Texture, Container, Graphics, RenderTexture } from 'pixi.js';
 import { ImageClip } from './clips/image-clip';
 import { IClip } from './clips/iclip';
 import { VideoClip } from './clips/video-clip';
+import { PixiSpriteRenderer } from './sprite/pixi-sprite-renderer';
 import { ProjectJSON } from './json-serialization';
+import { Transformer } from './transfomer/transformer';
 import { EffectKey } from './effect/glsl/gl-effect';
 import { default as EventEmitter } from './event-emitter';
+import { SelectionManager } from './studio/selection-manager';
+import { Transport } from './studio/transport';
+import { TimelineModel } from './studio/timeline-model';
 export interface IStudioOpts {
     width: number;
     height: number;
@@ -13,6 +18,19 @@ export interface IStudioOpts {
     canvas?: HTMLCanvasElement;
     interactivity?: boolean;
 }
+interface ActiveGlobalEffect {
+    id: string;
+    key: EffectKey;
+    startTime: number;
+    duration: number;
+    trackIndex?: number;
+}
+interface GlobalEffectInfo {
+    id: string;
+    key: EffectKey;
+    startTime: number;
+    duration: number;
+}
 export interface StudioEvents {
     'selection:created': {
         selected: IClip[];
@@ -57,63 +75,57 @@ export interface StudioTrack {
     type: string;
     clipIds: string[];
 }
-/**
- * Interactive preview studio for clips with playback controls
- * Useful for previewing clips before rendering with Compositor
- *
- * @example
- * const studio = new Studio({
- *   width: 1280,
- *   height: 720,
- *   fps: 30,
- *   bgColor: '#000'
- * });
- *
- * await studio.addClip(spr1);
- * await studio.addClip(spr2);
- * studio.play();
- *
- * studio.on('selection:created', ({ selected }) => {
- *   console.log('Selection created', selected);
- * });
- */
 export declare class Studio extends EventEmitter<StudioEvents> {
-    private pixiApp;
-    private tracks;
-    private clips;
-    private spriteRenderers;
-    private artboard;
-    private clipContainer;
-    private artboardMask;
-    private artboardBg;
-    private activeTransformer;
-    private selectedClips;
-    private interactiveClips;
-    private playbackElements;
-    private videoSprites;
-    private clipListeners;
-    private isPlaying;
-    private currentTime;
-    private playStartTime;
-    private playStartTimestamp;
-    private rafId;
-    private maxDuration;
-    private opts;
-    private destroyed;
-    private globalEffects;
-    private activeGlobalEffect;
-    private currentGlobalEffectSprite;
-    private effectFilters;
-    private transitionRenderers;
-    private transitionSprites;
-    private transFromTexture;
-    private transToTexture;
-    private transBgGraphics;
-    private clipsNormalContainer;
-    private clipsEffectContainer;
-    private videoTextureCache;
-    private lastFromFrame;
-    private lastToFrame;
+    selection: SelectionManager;
+    transport: Transport;
+    timeline: TimelineModel;
+    pixiApp: Application | null;
+    get tracks(): StudioTrack[];
+    get clips(): IClip[];
+    spriteRenderers: Map<IClip, PixiSpriteRenderer>;
+    artboard: Container | null;
+    clipContainer: Container | null;
+    artboardMask: Graphics | null;
+    artboardBg: Graphics | null;
+    get activeTransformer(): Transformer | null;
+    set activeTransformer(val: Transformer | null);
+    get selectedClips(): Set<IClip>;
+    set selectedClips(val: Set<IClip>);
+    get interactiveClips(): Set<IClip>;
+    set interactiveClips(val: Set<IClip>);
+    get playbackElements(): Map<IClip, import('./studio/transport').PlaybackElementInfo>;
+    videoSprites: Map<IClip, Sprite>;
+    clipListeners: Map<IClip, () => void>;
+    get isPlaying(): boolean;
+    set isPlaying(val: boolean);
+    get currentTime(): number;
+    set currentTime(val: number);
+    get maxDuration(): number;
+    set maxDuration(val: number);
+    opts: Required<Omit<IStudioOpts, 'canvas'>> & {
+        canvas?: HTMLCanvasElement;
+    };
+    destroyed: boolean;
+    globalEffects: Map<string, GlobalEffectInfo>;
+    activeGlobalEffect: ActiveGlobalEffect | null;
+    currentGlobalEffectSprite: Sprite | null;
+    effectFilters: Map<string, {
+        filter: import('pixi.js').Filter;
+        render({ width, height, canvasTexture, progress }: import('./effect/types').EffectRendererOptions): RenderTexture;
+    }>;
+    transitionRenderers: Map<string, {
+        render({ width, height, from, to, progress }: import('./transition/types').TransitionRendererOptions): RenderTexture;
+        destroy(): void;
+    }>;
+    transitionSprites: Map<string, Sprite>;
+    transFromTexture: RenderTexture | null;
+    transToTexture: RenderTexture | null;
+    transBgGraphics: Graphics | null;
+    clipsNormalContainer: Container | null;
+    clipsEffectContainer: Container | null;
+    videoTextureCache: WeakMap<HTMLVideoElement, Texture<import('pixi.js').TextureSource<any>>>;
+    lastFromFrame: Texture | ImageBitmap | null;
+    lastToFrame: Texture | ImageBitmap | null;
     /**
      * Convert hex color string to number
      */
@@ -123,6 +135,8 @@ export declare class Studio extends EventEmitter<StudioEvents> {
      * Create a new Studio instance
      */
     constructor(opts: IStudioOpts);
+    private handleTimelineChange;
+    private handleClipRemoved;
     private initPixiApp;
     /**
      * Get studio options
@@ -141,10 +155,10 @@ export declare class Studio extends EventEmitter<StudioEvents> {
     /**
      * Add a Media clip (Video/Image) to the main track with ripple effect
      */
-    addMedia(clip: VideoClip | ImageClip): Promise<void>;
     /**
-     * Add a Transition clip at the join where the selected clip starts.
+     * Add a Media clip (Video/Image) to the main track with ripple effect
      */
+    addMedia(clip: VideoClip | ImageClip): Promise<void>;
     addTransition(transitionKey: string, duration?: number, fromClipId?: string | null, toClipId?: string | null): Promise<void>;
     findTrackIdByClipId(clipId: string): string | undefined;
     /**
@@ -164,73 +178,40 @@ export declare class Studio extends EventEmitter<StudioEvents> {
         type: string;
         id?: string;
     }): StudioTrack;
-    /**
-     * Set tracks (and implicitly clips if they are new)
-     */
     setTracks(tracks: StudioTrack[]): Promise<void>;
-    /**
-     * Remove a track and all its clips
-     */
     removeTrack(trackId: string): Promise<void>;
     /**
      * Get a clip by its ID
      */
     getClipById(id: string): IClip | undefined;
-    /**
-     * Update a clip's properties
-     * Handles consistency between display (from/to) and duration
-     */
     updateClip(id: string, updates: Partial<IClip>): Promise<void>;
-    /**
-     * Get all tracks
-     */
     getTracks(): StudioTrack[];
-    /**
-     * Get a clip by ID
-     */
     getClip(id: string): IClip | undefined;
     /**
      * Setup sprite interactivity for click selection
+     * Delegated to SelectionManager
      */
-    private setupSpriteInteractivity;
+    setupSpriteInteractivity(clip: IClip): void;
     /**
      * Setup playback element for a clip (if it supports playback)
      */
-    private setupPlaybackForClip;
-    private isPlaybackCapable;
     /**
      * Remove a clip from the studio
      */
     removeClip(clip: IClip): Promise<void>;
-    /**
-     * Remove a clip by its ID
-     */
     removeClipById(clipId: string): Promise<void>;
-    /**
-     * Delete all currently selected clips
-     */
     deleteSelected(): Promise<void>;
     /**
      * Duplicate all currently selected clips
      */
     duplicateSelected(): Promise<void>;
-    /**
-     * Split the selected clip at the given time or current time
-     */
     splitSelected(splitTime?: number): Promise<void>;
-    /**
-     * Trim the selected clip from a specified time
-     * @param trimFromSeconds - Number of seconds to trim from the start of the clip
-     */
     trimSelected(trimFromSeconds: number): Promise<void>;
-    /**
-     * Update properties for all currently selected clips
-     */
     updateSelected(updates: Partial<IClip>): Promise<void>;
     /**
      * Clear all clips from the studio
      */
-    clear(): void;
+    clear(): Promise<void>;
     /**
      * Start playback
      */
@@ -253,7 +234,6 @@ export declare class Studio extends EventEmitter<StudioEvents> {
     getCurrentTime(): number;
     /**
      * Get maximum duration (in microseconds)
-     * Returns 0 if duration is invalid (Infinity, NaN, or <= 0)
      */
     getMaxDuration(): number;
     /**
@@ -264,10 +244,9 @@ export declare class Studio extends EventEmitter<StudioEvents> {
      * Get currently selected clips
      */
     getSelectedClips(): IClip[];
-    private renderLoop;
     private getVideoTexture;
-    private updateFrame;
-    private recalculateMaxDuration;
+    private isPlaybackCapable;
+    updateFrame(timestamp: number): Promise<void>;
     /**
      * Apply global effect to the current scene
      */
@@ -297,32 +276,9 @@ export declare class Studio extends EventEmitter<StudioEvents> {
     destroy(): void;
     /**
      * Select a clip and show transform controls
+     * Delegated to InteractionManager
      */
     selectClip(clip: IClip, addToSelection?: boolean): void;
-    /**
-     * Create transformer for currently selected clips
-     */
-    private createTransformer;
-    private isUpdatingTextClipRealtime;
-    private textClipResizedWidth;
-    private textClipResizeHandle;
-    private textClipResizedSx;
-    private textClipResizedSy;
-    /**
-     * Sync sprite transforms in real-time during drag (for TextClip reflow)
-     * This is called during the drag operation to prevent visual scaling
-     * Only works for mid-right handle (mr)
-     */
-    private syncSelectedClipsTransformsRealtime;
-    /**
-     * Sync sprite transforms back to clip properties for all selected clips
-     * This ensures clip properties are always up-to-date during transformations
-     */
-    private syncSelectedClipsTransforms;
-    /**
-     * Sync sprite transforms back to clip properties
-     */
-    private syncSpriteToClipProperties;
     /**
      * Set the selection to a specific list of clips
      */
@@ -340,10 +296,6 @@ export declare class Studio extends EventEmitter<StudioEvents> {
      * @param sourceUrlMap Optional map of clips to their source URLs (required for proper serialization)
      */
     exportToJSON(): ProjectJSON;
-    /**
-     * Load clips from JSON
-     * @param json The JSON project data
-     */
     loadFromJSON(json: ProjectJSON): Promise<void>;
-    private loadClipIntoTrack;
 }
+export {};

package/dist/transfomer/transformer.d.ts

@@ -1,10 +1,11 @@
-import { Container, Point } from 'pixi.js';
+import { Container, Point, Graphics } from 'pixi.js';
 import { Wireframe } from './parts/wireframe';
 import { HandleKind } from './parts/handle';
 export declare class Transformer extends Container {
     #private;
     group: Container[];
     wireframe: Wireframe;
+    selectionOutlines: Graphics;
     isDragging: boolean;
     lastPointer: Point;
     activeHandle: HandleKind | null;

package/dist/{webworkerAll-D3jYu9HP.js → webworkerAll-DKfEYGh2.js}

@@ -1,4 +1,4 @@
-import { E as p, U as Ne, T as ee, F as je, G as he, v as fe, M as P, l as C, d as pe, I as v, t as w, a8 as $, R as N, w as L, H as me, a5 as G, a6 as ge, c as F, B as T, D as j, S as M, y as D, af as qe, ag as q, L as Y, ah as U, s as Q, a0 as Qe, $ as X, n as xe, q as _e, aa as be, ad as ye, o as Je, p as Ze, ab as et, ac as tt, ae as rt, ai as nt, aj as st, ak as it, al as H, am as at, an as ot, m as ve, ao as te, ap as k, e as b, aq as ut } from "./index-BB-WOZJr.js";
+import { E as p, U as Ne, T as ee, F as je, G as he, v as fe, M as P, l as C, d as pe, I as v, t as w, a8 as $, R as N, w as L, H as me, a5 as G, a6 as ge, c as F, B as T, D as j, S as M, y as D, af as qe, ag as q, L as Y, ah as U, s as Q, a0 as Qe, $ as X, n as xe, q as _e, aa as be, ad as ye, o as Je, p as Ze, ab as et, ac as tt, ae as rt, ai as nt, aj as st, ak as it, al as H, am as at, an as ot, m as ve, ao as te, ap as k, e as b, aq as ut } from "./index-DBEPaJbQ.js";
 import { c as z, a as lt, b as ct, B as Te } from "./colorToUniform-C2jGzNe1.js";
 class Pe {
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcombo/video",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Video rendering and processing library",
   "type": "module",
   "publishConfig": {
@@ -8,7 +8,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/designcombo/combo-new.git",
+    "url": "https://github.com/designcombo/combo-video.git",
     "directory": "packages/video"
   },
   "keywords": [
@@ -22,7 +22,7 @@
   "files": [
     "dist"
   ],
-  "main": "dist/index.umd.js",
+ "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "exports": {