@twick/timeline 0.14.3 → 0.14.4

package/dist/context/timeline-context.d.ts

@@ -1,6 +1,6 @@
 import { Track } from '../core/track/track';
 import { TrackElement } from '../core/elements/base.element';
-import { ProjectJSON, TrackJSON } from '../types';
+import { ProjectJSON, Size, TrackJSON } from '../types';
 import { TimelineEditor } from '../core/editor/timeline.editor';
 
 /**
@@ -36,6 +36,8 @@ export type TimelineContextType = {
         type: string;
         payload: any;
     };
+    /** Resolution of the video */
+    videoResolution: Size;
     /** Total duration of the timeline in seconds */
     totalDuration: number;
     /** Current project state */
@@ -48,6 +50,8 @@ export type TimelineContextType = {
     setSelectedItem: (item: Track | TrackElement | null) => void;
     /** Function to set timeline actions */
     setTimelineAction: (type: string, payload: any) => void;
+    /** Function to set the video resolution */
+    setVideoResolution: (size: Size) => void;
 };
 /**
  * Props for the TimelineProvider component.
@@ -70,6 +74,8 @@ export interface TimelineProviderProps {
     children: React.ReactNode;
     /** Unique identifier for this timeline context */
     contextId: string;
+    /** resolution of the video */
+    resolution?: Size;
     /** Initial timeline data to load */
     initialData?: {
         tracks: TrackJSON[];
@@ -100,7 +106,7 @@ export interface TimelineProviderProps {
  * </TimelineProvider>
  * ```
  */
-export declare const TimelineProvider: ({ contextId, children, initialData, undoRedoPersistenceKey, maxHistorySize, }: TimelineProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimelineProvider: ({ contextId, children, resolution, initialData, undoRedoPersistenceKey, maxHistorySize, }: TimelineProviderProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Hook to access the Timeline context.
  * Provides access to timeline state, editor instance, and timeline management functions.

package/dist/core/addOns/animation.d.ts

@@ -3,6 +3,7 @@ import { Animation } from '../../types';
 export declare class ElementAnimation {
     private name;
     private interval?;
+    private duration?;
     private intensity?;
     private animate?;
     private mode?;
@@ -10,11 +11,13 @@ export declare class ElementAnimation {
     constructor(name: string);
     getName(): string;
     getInterval(): number | undefined;
+    getDuration(): number | undefined;
     getIntensity(): number | undefined;
     getAnimate(): "enter" | "exit" | "both" | undefined;
     getMode(): "in" | "out" | undefined;
     getDirection(): "left" | "center" | "right" | "up" | "down" | undefined;
     setInterval(interval?: number): this;
+    setDuration(duration?: number): this;
     setIntensity(intensity?: number): this;
     setAnimate(animate?: "enter" | "exit" | "both"): this;
     setMode(mode?: "in" | "out"): this;

package/dist/core/editor/timeline.editor.d.ts

@@ -33,7 +33,7 @@ export declare class TimelineEditor {
     getTimelineData(): TimelineTrackData | null;
     getLatestVersion(): number;
     protected setTimelineData(tracks: Track[], version?: number): TimelineTrackData;
-    addTrack(name: string): Track;
+    addTrack(name: string, type?: string): Track;
     getTrackById(id: string): Track | null;
     getTrackByName(name: string): Track | null;
     removeTrackById(id: string): void;
@@ -58,9 +58,9 @@ export declare class TimelineEditor {
     /**
      * Update an element in a specific track using the visitor pattern
      * @param element The updated element
-     * @returns boolean true if element was updated successfully
+     * @returns TrackElement the updated element
      */
-    updateElement(element: TrackElement): boolean;
+    updateElement(element: TrackElement): TrackElement;
     /**
      * Split an element at a specific time point using the visitor pattern
      * @param element The element to split

package/dist/core/elements/base.element.d.ts

@@ -23,6 +23,8 @@ export declare abstract class TrackElement {
     getName(): string;
     getAnimation(): ElementAnimation | undefined;
     getPosition(): Position;
+    getRotation(): number;
+    getOpacity(): number;
     setId(id: string): this;
     setType(type: string): this;
     setStart(s: number): this;
@@ -31,5 +33,7 @@ export declare abstract class TrackElement {
     setName(name: string): this;
     setAnimation(animation?: ElementAnimation): this;
     setPosition(position: Position): this;
+    setRotation(rotation: number): this;
+    setOpacity(opacity: number): this;
     setProps(props: Record<string, any>): this;
 }

package/dist/core/elements/circle.element.d.ts

@@ -7,7 +7,11 @@ export declare class CircleElement extends TrackElement {
     constructor(fill: string, radius: number);
     getFill(): string;
     getRadius(): number;
+    getStrokeColor(): string;
+    getLineWidth(): number;
     setFill(fill: string): this;
     setRadius(radius: number): this;
+    setStrokeColor(strokeColor: string): this;
+    setLineWidth(lineWidth: number): this;
     accept<T>(visitor: ElementVisitor<T>): T;
 }

package/dist/core/elements/icon.element.d.ts

@@ -1,9 +1,14 @@
 import { TrackElement } from './base.element';
 import { ElementVisitor } from '../visitor/element-visitor';
-import { IconProps, Size } from '../../types';
+import { Size } from '../../types';
 
 export declare class IconElement extends TrackElement {
-    protected props: IconProps;
-    constructor(src: string, size: Size);
+    constructor(src: string, size: Size, fill?: string);
+    getSrc(): string;
+    getFill(): string;
+    getSize(): Size | undefined;
+    setSrc(src: string): this;
+    setFill(fill: string): this;
+    setSize(size: Size): this;
     accept<T>(visitor: ElementVisitor<T>): T;
 }

package/dist/core/elements/rect.element.d.ts

@@ -5,7 +5,15 @@ import { ElementVisitor } from '../visitor/element-visitor';
 export declare class RectElement extends TrackElement {
     protected props: RectProps;
     constructor(fill: string, size: Size);
+    getFill(): string;
     setFill(fill: string): this;
+    getSize(): Size;
+    getCornerRadius(): number;
+    getStrokeColor(): string;
+    getLineWidth(): number;
     setSize(size: Size): this;
+    setCornerRadius(cornerRadius: number): this;
+    setStrokeColor(strokeColor: string): this;
+    setLineWidth(lineWidth: number): this;
     accept<T>(visitor: ElementVisitor<T>): T;
 }

package/dist/core/track/track.d.ts

@@ -38,15 +38,16 @@ export declare class Track {
      * Creates a new Track instance.
      *
      * @param name - The display name for the track
+     * @param type - The type of the track
      * @param id - Optional unique identifier (auto-generated if not provided)
      *
      * @example
      * ```js
      * const track = new Track("My Video Track");
-     * const trackWithId = new Track("Audio Track", "audio-track-1");
+     * const trackWithId = new Track("Audio Track", "element", "video-track-1");
      * ```
      */
-    constructor(name: string, id?: string);
+    constructor(name: string, type?: string, id?: string);
     /**
      * Creates a friend instance for explicit access to protected methods.
      * This implements the Friend Class Pattern to allow controlled access
@@ -126,7 +127,7 @@ export declare class Track {
      *
      * @example
      * ```js
-     * const track = new Track("My Track", "track-123");
+     * const track = new Track("My Track", "element", "track-123");
      * const id = track.getId(); // "track-123"
      * ```
      */

package/dist/index.js

@@ -484,7 +484,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.type = type;
       this.props = {
         x: 0,
-        y: 0
+        y: 0,
+        opacity: 1,
+        rotation: 0
       };
     }
     getId() {
@@ -521,6 +523,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         y: ((_b = this.props) == null ? void 0 : _b.y) ?? 0
       };
     }
+    getRotation() {
+      return this.props.rotation ?? 0;
+    }
+    getOpacity() {
+      return this.props.opacity ?? 1;
+    }
     setId(id) {
       this.id = id;
       return this;
@@ -554,6 +562,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.props.y = position.y;
       return this;
     }
+    setRotation(rotation) {
+      this.props.rotation = rotation;
+      return this;
+    }
+    setOpacity(opacity) {
+      this.props.opacity = opacity;
+      return this;
+    }
     setProps(props) {
       this.props = structuredClone(props);
       return this;
@@ -1042,13 +1058,35 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   }
   class IconElement extends TrackElement {
-    constructor(src, size) {
+    constructor(src, size, fill = "#866bbf") {
       super(TIMELINE_ELEMENT_TYPE.ICON);
       this.props = {
         src,
+        fill,
         size
       };
     }
+    getSrc() {
+      return this.props.src;
+    }
+    getFill() {
+      return this.props.fill;
+    }
+    getSize() {
+      return this.props.size;
+    }
+    setSrc(src) {
+      this.props.src = src;
+      return this;
+    }
+    setFill(fill) {
+      this.props.fill = fill;
+      return this;
+    }
+    setSize(size) {
+      this.props.size = size;
+      return this;
+    }
     accept(visitor) {
       return visitor.visitIconElement(this);
     }
@@ -1058,7 +1096,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       super(TIMELINE_ELEMENT_TYPE.CIRCLE);
       this.props = {
         radius,
-        fill
+        fill,
+        strokeColor: fill,
+        lineWidth: 1
       };
     }
     getFill() {
@@ -1067,6 +1107,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     getRadius() {
       return this.props.radius;
     }
+    getStrokeColor() {
+      return this.props.strokeColor || this.props.fill;
+    }
+    getLineWidth() {
+      return this.props.lineWidth ?? 0;
+    }
     setFill(fill) {
       this.props.fill = fill;
       return this;
@@ -1075,6 +1121,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.props.radius = radius;
       return this;
     }
+    setStrokeColor(strokeColor) {
+      this.props.strokeColor = strokeColor;
+      return this;
+    }
+    setLineWidth(lineWidth) {
+      this.props.lineWidth = lineWidth;
+      return this;
+    }
     accept(visitor) {
       return visitor.visitCircleElement(this);
     }
@@ -1085,18 +1139,48 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.props = {
         width: size.width,
         height: size.height,
-        fill
+        fill,
+        radius: 0,
+        strokeColor: fill,
+        lineWidth: 1
       };
     }
+    getFill() {
+      return this.props.fill;
+    }
     setFill(fill) {
       this.props.fill = fill;
       return this;
     }
+    getSize() {
+      return { width: this.props.width, height: this.props.height };
+    }
+    getCornerRadius() {
+      return this.props.radius;
+    }
+    getStrokeColor() {
+      return this.props.strokeColor || this.props.fill;
+    }
+    getLineWidth() {
+      return this.props.lineWidth ?? 0;
+    }
     setSize(size) {
       this.props.width = size.width;
       this.props.height = size.height;
       return this;
     }
+    setCornerRadius(cornerRadius) {
+      this.props.radius = cornerRadius;
+      return this;
+    }
+    setStrokeColor(strokeColor) {
+      this.props.strokeColor = strokeColor;
+      return this;
+    }
+    setLineWidth(lineWidth) {
+      this.props.lineWidth = lineWidth;
+      return this;
+    }
     accept(visitor) {
       return visitor.visitRectElement(this);
     }
@@ -1105,6 +1189,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     constructor(name) {
       __publicField(this, "name");
       __publicField(this, "interval");
+      __publicField(this, "duration");
       __publicField(this, "intensity");
       __publicField(this, "animate");
       __publicField(this, "mode");
@@ -1117,6 +1202,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     getInterval() {
       return this.interval;
     }
+    getDuration() {
+      return this.duration;
+    }
     getIntensity() {
       return this.intensity;
     }
@@ -1133,6 +1221,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.interval = interval;
       return this;
     }
+    setDuration(duration) {
+      this.duration = duration;
+      return this;
+    }
     setIntensity(intensity) {
       this.intensity = intensity;
       return this;
@@ -1153,6 +1245,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return {
         name: this.name,
         interval: this.interval,
+        duration: this.duration,
         intensity: this.intensity,
         animate: this.animate,
         mode: this.mode,
@@ -1162,6 +1255,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     static fromJSON(json) {
       const animation = new ElementAnimation(json.name);
       animation.setInterval(json.interval);
+      animation.setDuration(json.duration);
       animation.setIntensity(json.intensity);
       animation.setAnimate(json.animate);
       animation.setMode(json.mode);
@@ -1247,7 +1341,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return {
         name: this.name,
         delay: this.delay,
-        duration: this.duration,
+        duration: this.duration ?? 1,
         bufferTime: this.bufferTime
       };
     }
@@ -1315,11 +1409,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return captionElement;
     }
     static deserializeIconElement(json) {
-      var _a, _b;
-      const size = ((_a = json.props) == null ? void 0 : _a.size) ? { width: json.props.size[0], height: json.props.size[1] } : { width: 0, height: 0 };
+      var _a, _b, _c;
+      const size = ((_a = json.props) == null ? void 0 : _a.size) ?? { width: 100, height: 100 };
       const iconElement = new IconElement(
         ((_b = json.props) == null ? void 0 : _b.src) || "",
-        size
+        size,
+        (_c = json.props) == null ? void 0 : _c.fill
       );
       ElementDeserializer.deserializeBaseElement(iconElement, json);
       return iconElement;
@@ -1555,10 +1650,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const basicValidation = this.validateBasicProperties(element);
       const errors = [...basicValidation.errors];
       const warnings = [...basicValidation.warnings];
-      const props = element.getProps();
-      if (!(props == null ? void 0 : props.icon)) {
-        errors.push("Icon element must have an icon name");
-      }
       return { errors, warnings };
     }
     validateCircleElement(element) {
@@ -1714,15 +1805,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
      * Creates a new Track instance.
      * 
      * @param name - The display name for the track
+     * @param type - The type of the track
      * @param id - Optional unique identifier (auto-generated if not provided)
      * 
      * @example
      * ```js
      * const track = new Track("My Video Track");
-     * const trackWithId = new Track("Audio Track", "audio-track-1");
+     * const trackWithId = new Track("Audio Track", "element", "video-track-1");
      * ```
      */
-    constructor(name, id) {
+    constructor(name, type = "element", id) {
       __publicField(this, "id");
       __publicField(this, "name");
       __publicField(this, "type");
@@ -1730,7 +1822,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       __publicField(this, "validator");
       this.name = name;
       this.id = id ?? `t-${generateShortUuid}`;
-      this.type = "element";
+      this.type = type;
       this.elements = [];
       this.validator = new ElementValidator();
     }
@@ -1821,7 +1913,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
      * 
      * @example
      * ```js
-     * const track = new Track("My Track", "track-123");
+     * const track = new Track("My Track", "element", "track-123");
      * const id = track.getId(); // "track-123"
      * ```
      */
@@ -2163,7 +2255,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
      * ```
      */
     static fromJSON(json) {
-      const track = new Track(json.name, json.id);
+      const track = new Track(json.name, json.type ?? "element", json.id);
       track.type = json.type;
       track.elements = (json.elements || []).map(ElementDeserializer.fromJSON);
       return track;
@@ -2585,7 +2677,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     visitIconElement(element) {
       const clonedElement = new IconElement(
         element.getProps().src,
-        element.getProps().size
+        element.getProps().size,
+        element.getProps().fill
       );
       this.cloneElementProperties(element, clonedElement);
       return clonedElement;
@@ -2774,10 +2867,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.context.updateChangeLog();
       return updatedTimelineData;
     }
-    addTrack(name) {
+    addTrack(name, type = "element") {
       const prevTimelineData = this.getTimelineData();
       const id = `t-${generateShortUuid()}`;
-      const track = new Track(name, id);
+      const track = new Track(name, type, id);
       const updatedTimelines = [...(prevTimelineData == null ? void 0 : prevTimelineData.tracks) || [], track];
       this.setTimelineData(updatedTimelines);
       return track;
@@ -2864,12 +2957,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     /**
      * Update an element in a specific track using the visitor pattern
      * @param element The updated element
-     * @returns boolean true if element was updated successfully
+     * @returns TrackElement the updated element
      */
     updateElement(element) {
       const track = this.getTrackById(element.getTrackId());
       if (!track) {
-        return false;
+        return element;
       }
       try {
         const elementUpdater = new ElementUpdater(track);
@@ -2880,9 +2973,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             this.setTimelineData(currentData.tracks);
           }
         }
-        return result;
+        return element;
       } catch (error) {
-        return false;
+        return element;
       }
     }
     /**
@@ -7695,6 +7788,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const TimelineProviderInner = ({
     contextId,
     children,
+    resolution,
     initialData
   }) => {
     const [timelineAction, setTimelineActionState] = React.useState({
@@ -7704,6 +7798,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const [selectedItem, setSelectedItem] = React.useState(
       null
     );
+    const [videoResolution, setVideoResolution] = React.useState(resolution ?? { width: 720, height: 1280 });
     const [totalDuration, setTotalDuration] = React.useState(0);
     const [changeLog, setChangeLog] = React.useState(0);
     const undoRedoContext = useUndoRedo();
@@ -7758,9 +7853,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       timelineAction,
       totalDuration,
       changeLog,
+      videoResolution,
       present: undoRedoContext.present,
       canUndo: undoRedoContext.canUndo,
       canRedo: undoRedoContext.canRedo,
+      setVideoResolution,
       setSelectedItem,
       setTimelineAction,
       editor
@@ -7771,6 +7868,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const TimelineProvider = ({
     contextId,
     children,
+    resolution = { width: 720, height: 1280 },
     initialData,
     undoRedoPersistenceKey,
     maxHistorySize
@@ -7792,6 +7890,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             children: /* @__PURE__ */ jsxRuntime.jsx(
               TimelineProviderInner,
               {
+                resolution,
                 initialData,
                 contextId,
                 undoRedoPersistenceKey,