@twick/timeline 0.14.3 → 0.14.5

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;
@@ -2759,7 +2852,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const timelineData = timelineContextStore.getTimelineData(contextId);
       return (timelineData == null ? void 0 : timelineData.version) || 0;
     }
-    setTimelineData(tracks, version) {
+    setTimelineData({
+      tracks,
+      version,
+      updatePlayerData
+    }) {
+      var _a, _b;
       const prevTimelineData = this.getTimelineData();
       const updatedVersion = version ?? ((prevTimelineData == null ? void 0 : prevTimelineData.version) || 0) + 1;
       const updatedTimelineData = {
@@ -2772,14 +2870,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       );
       this.updateHistory(updatedTimelineData);
       this.context.updateChangeLog();
+      if (updatePlayerData) {
+        (_b = (_a = this.context) == null ? void 0 : _a.setTimelineAction) == null ? void 0 : _b.call(
+          _a,
+          TIMELINE_ACTION.UPDATE_PLAYER_DATA,
+          updatedTimelineData
+        );
+      }
       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);
+      this.setTimelineData({ tracks: updatedTimelines, updatePlayerData: true });
       return track;
     }
     getTrackById(id) {
@@ -2796,13 +2901,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       var _a;
       const tracks = ((_a = this.getTimelineData()) == null ? void 0 : _a.tracks) || [];
       const updatedTracks = tracks.filter((t2) => t2.getId() !== id);
-      this.setTimelineData(updatedTracks);
+      this.setTimelineData({ tracks: updatedTracks, updatePlayerData: true });
     }
     removeTrack(track) {
       var _a;
       const tracks = ((_a = this.getTimelineData()) == null ? void 0 : _a.tracks) || [];
       const updatedTracks = tracks.filter((t2) => t2.getId() !== track.getId());
-      this.setTimelineData(updatedTracks);
+      this.setTimelineData({ tracks: updatedTracks, updatePlayerData: true });
     }
     /**
      * Refresh the timeline data
@@ -2810,7 +2915,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     refresh() {
       const currentData = this.getTimelineData();
       if (currentData) {
-        this.setTimelineData(currentData.tracks);
+        this.setTimelineData({ tracks: currentData.tracks, updatePlayerData: true });
       }
     }
     /**
@@ -2829,7 +2934,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         if (result) {
           const currentData = this.getTimelineData();
           if (currentData) {
-            this.setTimelineData(currentData.tracks);
+            this.setTimelineData({ tracks: currentData.tracks, updatePlayerData: true });
           }
         }
         return result;
@@ -2853,7 +2958,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         if (result) {
           const currentData = this.getTimelineData();
           if (currentData) {
-            this.setTimelineData(currentData.tracks);
+            this.setTimelineData({ tracks: currentData.tracks, updatePlayerData: true });
           }
         }
         return result;
@@ -2864,12 +2969,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);
@@ -2877,12 +2982,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         if (result) {
           const currentData = this.getTimelineData();
           if (currentData) {
-            this.setTimelineData(currentData.tracks);
+            this.setTimelineData({ tracks: currentData.tracks });
           }
         }
-        return result;
+        return element;
       } catch (error) {
-        return false;
+        return element;
       }
     }
     /**
@@ -2907,7 +3012,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           result.secondElement.accept(elementAdder);
           const currentData = this.getTimelineData();
           if (currentData) {
-            this.setTimelineData(currentData.tracks);
+            this.setTimelineData({ tracks: currentData.tracks, updatePlayerData: true });
           }
         }
         return result;
@@ -2929,7 +3034,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     }
     reorderTracks(tracks) {
-      this.setTimelineData(tracks);
+      this.setTimelineData({ tracks, updatePlayerData: true });
     }
     updateHistory(timelineTrackData) {
       const tracks = timelineTrackData.tracks.map((t2) => t2.serialize());
@@ -3014,7 +3119,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.pauseVideo();
       this.context.handleResetHistory();
       const timelineTracks = tracks.map((t2) => Track.fromJSON(t2));
-      this.setTimelineData(timelineTracks, version);
+      this.setTimelineData({ tracks: timelineTracks, version, updatePlayerData: true });
       if ((_a = this.context) == null ? void 0 : _a.setTimelineAction) {
         this.context.setTimelineAction(TIMELINE_ACTION.UPDATE_PLAYER_DATA, {
           tracks,
@@ -7695,6 +7800,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const TimelineProviderInner = ({
     contextId,
     children,
+    resolution,
     initialData
   }) => {
     const [timelineAction, setTimelineActionState] = React.useState({
@@ -7704,6 +7810,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 +7865,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 +7880,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 +7902,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             children: /* @__PURE__ */ jsxRuntime.jsx(
               TimelineProviderInner,
               {
+                resolution,
                 initialData,
                 contextId,
                 undoRedoPersistenceKey,