@twick/timeline 0.14.3 → 0.14.4

package/dist/index.mjs

@@ -482,7 +482,9 @@ class TrackElement {
     this.type = type;
     this.props = {
       x: 0,
-      y: 0
+      y: 0,
+      opacity: 1,
+      rotation: 0
     };
   }
   getId() {
@@ -519,6 +521,12 @@ class TrackElement {
       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;
@@ -552,6 +560,14 @@ class TrackElement {
     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;
@@ -1040,13 +1056,35 @@ class CaptionElement extends TrackElement {
   }
 }
 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);
   }
@@ -1056,7 +1094,9 @@ class CircleElement extends TrackElement {
     super(TIMELINE_ELEMENT_TYPE.CIRCLE);
     this.props = {
       radius,
-      fill
+      fill,
+      strokeColor: fill,
+      lineWidth: 1
     };
   }
   getFill() {
@@ -1065,6 +1105,12 @@ class CircleElement extends TrackElement {
   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;
@@ -1073,6 +1119,14 @@ class CircleElement extends TrackElement {
     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);
   }
@@ -1083,18 +1137,48 @@ class RectElement extends TrackElement {
     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);
   }
@@ -1103,6 +1187,7 @@ class ElementAnimation {
   constructor(name) {
     __publicField(this, "name");
     __publicField(this, "interval");
+    __publicField(this, "duration");
     __publicField(this, "intensity");
     __publicField(this, "animate");
     __publicField(this, "mode");
@@ -1115,6 +1200,9 @@ class ElementAnimation {
   getInterval() {
     return this.interval;
   }
+  getDuration() {
+    return this.duration;
+  }
   getIntensity() {
     return this.intensity;
   }
@@ -1131,6 +1219,10 @@ class ElementAnimation {
     this.interval = interval;
     return this;
   }
+  setDuration(duration) {
+    this.duration = duration;
+    return this;
+  }
   setIntensity(intensity) {
     this.intensity = intensity;
     return this;
@@ -1151,6 +1243,7 @@ class ElementAnimation {
     return {
       name: this.name,
       interval: this.interval,
+      duration: this.duration,
       intensity: this.intensity,
       animate: this.animate,
       mode: this.mode,
@@ -1160,6 +1253,7 @@ class ElementAnimation {
   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);
@@ -1245,7 +1339,7 @@ class ElementTextEffect {
     return {
       name: this.name,
       delay: this.delay,
-      duration: this.duration,
+      duration: this.duration ?? 1,
       bufferTime: this.bufferTime
     };
   }
@@ -1313,11 +1407,12 @@ class ElementDeserializer {
     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;
@@ -1553,10 +1648,6 @@ class ElementValidator {
     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) {
@@ -1712,15 +1803,16 @@ 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, id) {
+  constructor(name, type = "element", id) {
     __publicField(this, "id");
     __publicField(this, "name");
     __publicField(this, "type");
@@ -1728,7 +1820,7 @@ class Track {
     __publicField(this, "validator");
     this.name = name;
     this.id = id ?? `t-${generateShortUuid}`;
-    this.type = "element";
+    this.type = type;
     this.elements = [];
     this.validator = new ElementValidator();
   }
@@ -1819,7 +1911,7 @@ 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"
    * ```
    */
@@ -2161,7 +2253,7 @@ class Track {
    * ```
    */
   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;
@@ -2583,7 +2675,8 @@ class ElementCloner {
   visitIconElement(element) {
     const clonedElement = new IconElement(
       element.getProps().src,
-      element.getProps().size
+      element.getProps().size,
+      element.getProps().fill
     );
     this.cloneElementProperties(element, clonedElement);
     return clonedElement;
@@ -2772,10 +2865,10 @@ class TimelineEditor {
     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;
@@ -2862,12 +2955,12 @@ 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) {
     const track = this.getTrackById(element.getTrackId());
     if (!track) {
-      return false;
+      return element;
     }
     try {
       const elementUpdater = new ElementUpdater(track);
@@ -2878,9 +2971,9 @@ class TimelineEditor {
           this.setTimelineData(currentData.tracks);
         }
       }
-      return result;
+      return element;
     } catch (error) {
-      return false;
+      return element;
     }
   }
   /**
@@ -7693,6 +7786,7 @@ const TimelineContext = createContext(
 const TimelineProviderInner = ({
   contextId,
   children,
+  resolution,
   initialData
 }) => {
   const [timelineAction, setTimelineActionState] = useState({
@@ -7702,6 +7796,7 @@ const TimelineProviderInner = ({
   const [selectedItem, setSelectedItem] = useState(
     null
   );
+  const [videoResolution, setVideoResolution] = useState(resolution ?? { width: 720, height: 1280 });
   const [totalDuration, setTotalDuration] = useState(0);
   const [changeLog, setChangeLog] = useState(0);
   const undoRedoContext = useUndoRedo();
@@ -7756,9 +7851,11 @@ const TimelineProviderInner = ({
     timelineAction,
     totalDuration,
     changeLog,
+    videoResolution,
     present: undoRedoContext.present,
     canUndo: undoRedoContext.canUndo,
     canRedo: undoRedoContext.canRedo,
+    setVideoResolution,
     setSelectedItem,
     setTimelineAction,
     editor
@@ -7769,6 +7866,7 @@ const TimelineProviderInner = ({
 const TimelineProvider = ({
   contextId,
   children,
+  resolution = { width: 720, height: 1280 },
   initialData,
   undoRedoPersistenceKey,
   maxHistorySize
@@ -7790,6 +7888,7 @@ const TimelineProvider = ({
           children: /* @__PURE__ */ jsx(
             TimelineProviderInner,
             {
+              resolution,
               initialData,
               contextId,
               undoRedoPersistenceKey,