@twick/video-editor 0.15.13 → 0.15.14

package/dist/index.mjs

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useLivePlayerContext, PLAYER_STATE, LivePlayer } from "@twick/live-player";
-import { useTimelineContext, TIMELINE_ACTION, getCurrentElements, CaptionElement, ElementDeserializer, Track, getDecimalNumber, VideoElement, AudioElement, TrackElement, ValidationError, VALIDATION_ERROR_CODE } from "@twick/timeline";
+import { useTimelineContext, TIMELINE_ACTION, getCurrentElements, CaptionElement as CaptionElement$1, ElementDeserializer, Track, getDecimalNumber, VideoElement as VideoElement$1, AudioElement, TrackElement, ValidationError, VALIDATION_ERROR_CODE } from "@twick/timeline";
 import React, { useState, useRef, useEffect, useMemo, forwardRef, createElement, createContext, useContext, useId, useCallback, useLayoutEffect, useInsertionEffect, Fragment, Component } from "react";
 function t(t2, e3, s2) {
   return (e3 = function(t3) {
@@ -6839,6 +6839,9 @@ class bh extends Va {
   }
 }
 t(bh, "type", "Vibrance"), t(bh, "defaults", { vibrance: 0 }), t(bh, "uniformLocations", ["uVibrance"]), tt.setClass(bh);
+var __defProp2 = Object.defineProperty;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField2 = (obj, key, value) => __defNormalProp2(obj, key + "", value);
 const DEFAULT_TEXT_PROPS = {
   /** Font family for text elements */
   family: "Poppins",
@@ -6877,7 +6880,9 @@ const CANVAS_OPERATIONS = {
   /** An item has been updated/modified on the canvas */
   ITEM_UPDATED: "ITEM_UPDATED",
   /** Caption properties have been updated */
-  CAPTION_PROPS_UPDATED: "CAPTION_PROPS_UPDATED"
+  CAPTION_PROPS_UPDATED: "CAPTION_PROPS_UPDATED",
+  /** Watermark has been updated */
+  WATERMARK_UPDATED: "WATERMARK_UPDATED"
 };
 const ELEMENT_TYPES = {
   /** Text element type */
@@ -6953,6 +6958,26 @@ const createCanvas = ({
     canvasMetadata
   };
 };
+function measureTextWidth(text, options) {
+  if (typeof document === "undefined" || !text) return 0;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return 0;
+  const {
+    fontSize,
+    fontFamily,
+    fontStyle = "normal",
+    fontWeight = "normal"
+  } = options;
+  ctx.font = `${fontStyle} ${String(fontWeight)} ${fontSize}px ${fontFamily}`;
+  const lines = text.split("\n");
+  let maxWidth = 0;
+  for (const line of lines) {
+    const { width } = ctx.measureText(line);
+    if (width > maxWidth) maxWidth = width;
+  }
+  return Math.ceil(maxWidth);
+}
 const reorderElementsByZIndex = (canvas) => {
   if (!canvas) return;
   const backgroundColor = canvas.backgroundColor;
@@ -7000,6 +7025,17 @@ const getCurrentFrameEffect = (item, seekTime) => {
   }
   return currentFrameEffect;
 };
+const hexToRgba = (hex2, alpha2) => {
+  const color2 = hex2.replace(/^#/, "");
+  const fullHex = color2.length === 3 ? color2.split("").map((c2) => c2 + c2).join("") : color2;
+  if (fullHex.length !== 6) {
+    return hex2;
+  }
+  const r2 = parseInt(fullHex.slice(0, 2), 16);
+  const g2 = parseInt(fullHex.slice(2, 4), 16);
+  const b2 = parseInt(fullHex.slice(4, 6), 16);
+  return `rgba(${r2}, ${g2}, ${b2}, ${alpha2})`;
+};
 const disabledControl = new ai({
   /** X position offset */
   x: 0,
@@ -7431,40 +7467,66 @@ const addTextElement = ({
   canvas,
   canvasMetadata
 }) => {
-  var _a, _b, _c, _d, _e2, _f, _g, _h2, _i2, _j, _k, _l, _m, _n2, _o2, _p, _q, _r2, _s2, _t2, _u, _v, _w, _x, _y;
+  var _a, _b, _c, _d, _e2, _f, _g, _h2, _i2, _j, _k, _l, _m, _n2, _o2, _p, _q, _r2, _s2, _t2, _u, _v, _w, _x, _y, _z, _A, _B, _C;
   const { x: x2, y: y2 } = convertToCanvasPosition(
     ((_a = element.props) == null ? void 0 : _a.x) || 0,
     ((_b = element.props) == null ? void 0 : _b.y) || 0,
     canvasMetadata
   );
-  let width = ((_c = element.props) == null ? void 0 : _c.width) ? element.props.width * canvasMetadata.scaleX : canvasMetadata.width - 2 * MARGIN;
-  if ((_d = element.props) == null ? void 0 : _d.maxWidth) {
-    width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
-  }
-  const text = new Uo(((_e2 = element.props) == null ? void 0 : _e2.text) || element.t || "", {
+  const fontSize = Math.floor(
+    (((_c = element.props) == null ? void 0 : _c.fontSize) || DEFAULT_TEXT_PROPS.size) * canvasMetadata.scaleX
+  );
+  const fontFamily = ((_d = element.props) == null ? void 0 : _d.fontFamily) || DEFAULT_TEXT_PROPS.family;
+  const fontStyle = ((_e2 = element.props) == null ? void 0 : _e2.fontStyle) || "normal";
+  const fontWeight = ((_f = element.props) == null ? void 0 : _f.fontWeight) || "normal";
+  let width;
+  if (((_g = element.props) == null ? void 0 : _g.width) != null && element.props.width > 0) {
+    width = element.props.width * canvasMetadata.scaleX;
+    if ((_h2 = element.props) == null ? void 0 : _h2.maxWidth) {
+      width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
+    }
+  } else {
+    const textContent = ((_i2 = element.props) == null ? void 0 : _i2.text) ?? element.t ?? "";
+    width = measureTextWidth(textContent, {
+      fontSize,
+      fontFamily,
+      fontStyle,
+      fontWeight
+    });
+    const padding = 4;
+    width = width + padding * 2;
+    if ((_j = element.props) == null ? void 0 : _j.maxWidth) {
+      width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
+    }
+    if (width <= 0) width = 100;
+  }
+  const backgroundColor = ((_k = element.props) == null ? void 0 : _k.backgroundColor) ? hexToRgba(
+    element.props.backgroundColor,
+    ((_l = element.props) == null ? void 0 : _l.backgroundOpacity) ?? 1
+  ) : void 0;
+  const text = new Uo(((_m = element.props) == null ? void 0 : _m.text) || element.t || "", {
     left: x2,
     top: y2,
     originX: "center",
     originY: "center",
-    angle: ((_f = element.props) == null ? void 0 : _f.rotation) || 0,
-    fontSize: Math.floor(
-      (((_g = element.props) == null ? void 0 : _g.fontSize) || DEFAULT_TEXT_PROPS.size) * canvasMetadata.scaleX
-    ),
-    fontFamily: ((_h2 = element.props) == null ? void 0 : _h2.fontFamily) || DEFAULT_TEXT_PROPS.family,
-    fontStyle: ((_i2 = element.props) == null ? void 0 : _i2.fontStyle) || "normal",
-    fontWeight: ((_j = element.props) == null ? void 0 : _j.fontWeight) || "normal",
-    fill: ((_k = element.props) == null ? void 0 : _k.fill) || DEFAULT_TEXT_PROPS.fill,
-    opacity: ((_l = element.props) == null ? void 0 : _l.opacity) ?? 1,
+    angle: ((_n2 = element.props) == null ? void 0 : _n2.rotation) || 0,
+    fontSize,
+    fontFamily,
+    fontStyle,
+    fontWeight,
+    fill: ((_o2 = element.props) == null ? void 0 : _o2.fill) || DEFAULT_TEXT_PROPS.fill,
+    opacity: ((_p = element.props) == null ? void 0 : _p.opacity) ?? 1,
     width,
     splitByGrapheme: false,
-    textAlign: ((_m = element.props) == null ? void 0 : _m.textAlign) || "center",
-    stroke: ((_n2 = element.props) == null ? void 0 : _n2.stroke) || DEFAULT_TEXT_PROPS.stroke,
-    strokeWidth: ((_o2 = element.props) == null ? void 0 : _o2.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
-    shadow: ((_p = element.props) == null ? void 0 : _p.shadowColor) ? new Ds({
-      offsetX: ((_r2 = (_q = element.props) == null ? void 0 : _q.shadowOffset) == null ? void 0 : _r2.length) && ((_t2 = (_s2 = element.props) == null ? void 0 : _s2.shadowOffset) == null ? void 0 : _t2.length) > 1 ? element.props.shadowOffset[0] / 2 : 1,
-      offsetY: ((_v = (_u = element.props) == null ? void 0 : _u.shadowOffset) == null ? void 0 : _v.length) && ((_w = element.props) == null ? void 0 : _w.shadowOffset.length) > 1 ? element.props.shadowOffset[1] / 2 : 1,
-      blur: (((_x = element.props) == null ? void 0 : _x.shadowBlur) || 2) / 2,
-      color: (_y = element.props) == null ? void 0 : _y.shadowColor
+    textAlign: ((_q = element.props) == null ? void 0 : _q.textAlign) || "center",
+    stroke: ((_r2 = element.props) == null ? void 0 : _r2.stroke) || DEFAULT_TEXT_PROPS.stroke,
+    strokeWidth: ((_s2 = element.props) == null ? void 0 : _s2.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
+    ...backgroundColor && { backgroundColor },
+    shadow: ((_t2 = element.props) == null ? void 0 : _t2.shadowColor) ? new Ds({
+      offsetX: ((_v = (_u = element.props) == null ? void 0 : _u.shadowOffset) == null ? void 0 : _v.length) && ((_x = (_w = element.props) == null ? void 0 : _w.shadowOffset) == null ? void 0 : _x.length) > 1 ? element.props.shadowOffset[0] / 2 : 1,
+      offsetY: ((_z = (_y = element.props) == null ? void 0 : _y.shadowOffset) == null ? void 0 : _z.length) && ((_A = element.props) == null ? void 0 : _A.shadowOffset.length) > 1 ? element.props.shadowOffset[1] / 2 : 1,
+      blur: (((_B = element.props) == null ? void 0 : _B.shadowBlur) || 2) / 2,
+      color: (_C = element.props) == null ? void 0 : _C.shadowColor
     }) : void 0
   });
   text.set("id", element.id);
@@ -7836,12 +7898,419 @@ const addBackgroundColor = ({
   canvas.add(bgRect);
   return bgRect;
 };
+const VideoElement = {
+  name: ELEMENT_TYPES.VIDEO,
+  async add(params) {
+    var _a, _b;
+    const {
+      element,
+      index,
+      canvas,
+      canvasMetadata,
+      seekTime = 0,
+      elementFrameMapRef,
+      getCurrentFrameEffect: getFrameEffect
+    } = params;
+    if (!getFrameEffect || !elementFrameMapRef) return;
+    const currentFrameEffect = getFrameEffect(element, seekTime);
+    elementFrameMapRef.current[element.id] = currentFrameEffect;
+    const snapTime = (seekTime - ((element == null ? void 0 : element.s) ?? 0)) * (((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.playbackRate) ?? 1) + (((_b = element == null ? void 0 : element.props) == null ? void 0 : _b.time) ?? 0);
+    await addVideoElement({
+      element,
+      index,
+      canvas,
+      canvasMetadata,
+      currentFrameEffect,
+      snapTime
+    });
+    if (element.timelineType === "scene") {
+      await addBackgroundColor({
+        element,
+        index,
+        canvas,
+        canvasMetadata
+      });
+    }
+  },
+  updateFromFabricObject(object, element, context) {
+    const { x: x2, y: y2 } = convertToVideoPosition(
+      object.left,
+      object.top,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    const currentFrameEffect = context.elementFrameMapRef.current[element.id];
+    let updatedFrameSize;
+    if (currentFrameEffect) {
+      updatedFrameSize = [
+        currentFrameEffect.props.frameSize[0] * object.scaleX,
+        currentFrameEffect.props.frameSize[1] * object.scaleY
+      ];
+      context.elementFrameMapRef.current[element.id] = {
+        ...currentFrameEffect,
+        props: {
+          ...currentFrameEffect.props,
+          framePosition: { x: x2, y: y2 },
+          frameSize: updatedFrameSize
+        }
+      };
+      return {
+        element: {
+          ...element,
+          frameEffects: (element.frameEffects || []).map(
+            (fe2) => fe2.id === (currentFrameEffect == null ? void 0 : currentFrameEffect.id) ? {
+              ...fe2,
+              props: {
+                ...fe2.props,
+                framePosition: { x: x2, y: y2 },
+                frameSize: updatedFrameSize
+              }
+            } : fe2
+          )
+        }
+      };
+    }
+    const frame2 = element.frame;
+    updatedFrameSize = [
+      (frame2.size[0] ?? 0) * object.scaleX,
+      (frame2.size[1] ?? 0) * object.scaleY
+    ];
+    return {
+      element: {
+        ...element,
+        frame: {
+          ...frame2,
+          rotation: object.angle,
+          size: updatedFrameSize,
+          x: x2,
+          y: y2
+        }
+      }
+    };
+  }
+};
+const ImageElement = {
+  name: ELEMENT_TYPES.IMAGE,
+  async add(params) {
+    const { element, index, canvas, canvasMetadata } = params;
+    await addImageElement({
+      element,
+      index,
+      canvas,
+      canvasMetadata
+    });
+    if (element.timelineType === "scene") {
+      await addBackgroundColor({
+        element,
+        index,
+        canvas,
+        canvasMetadata
+      });
+    }
+  },
+  updateFromFabricObject(object, element, context) {
+    var _a, _b;
+    const { x: x2, y: y2 } = convertToVideoPosition(
+      object.left,
+      object.top,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    const currentFrameEffect = context.elementFrameMapRef.current[element.id];
+    if (object.type === "group") {
+      let updatedFrameSize;
+      if (currentFrameEffect) {
+        updatedFrameSize = [
+          currentFrameEffect.props.frameSize[0] * object.scaleX,
+          currentFrameEffect.props.frameSize[1] * object.scaleY
+        ];
+        context.elementFrameMapRef.current[element.id] = {
+          ...currentFrameEffect,
+          props: {
+            ...currentFrameEffect.props,
+            framePosition: { x: x2, y: y2 },
+            frameSize: updatedFrameSize
+          }
+        };
+        return {
+          element: {
+            ...element,
+            frameEffects: (element.frameEffects || []).map(
+              (fe2) => fe2.id === (currentFrameEffect == null ? void 0 : currentFrameEffect.id) ? {
+                ...fe2,
+                props: {
+                  ...fe2.props,
+                  framePosition: { x: x2, y: y2 },
+                  frameSize: updatedFrameSize
+                }
+              } : fe2
+            )
+          }
+        };
+      }
+      const frame2 = element.frame;
+      updatedFrameSize = [
+        (frame2.size[0] ?? 0) * object.scaleX,
+        (frame2.size[1] ?? 0) * object.scaleY
+      ];
+      return {
+        element: {
+          ...element,
+          frame: {
+            ...frame2,
+            rotation: object.angle,
+            size: updatedFrameSize,
+            x: x2,
+            y: y2
+          }
+        }
+      };
+    }
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          rotation: object.angle,
+          width: (((_a = element.props) == null ? void 0 : _a.width) ?? 0) * object.scaleX,
+          height: (((_b = element.props) == null ? void 0 : _b.height) ?? 0) * object.scaleY,
+          x: x2,
+          y: y2
+        }
+      }
+    };
+  }
+};
+const RectElement = {
+  name: ELEMENT_TYPES.RECT,
+  async add(params) {
+    const { element, index, canvas, canvasMetadata } = params;
+    await addRectElement({
+      element,
+      index,
+      canvas,
+      canvasMetadata
+    });
+  },
+  updateFromFabricObject(object, element, context) {
+    var _a, _b;
+    const { x: x2, y: y2 } = convertToVideoPosition(
+      object.left,
+      object.top,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          rotation: object.angle,
+          width: (((_a = element.props) == null ? void 0 : _a.width) ?? 0) * object.scaleX,
+          height: (((_b = element.props) == null ? void 0 : _b.height) ?? 0) * object.scaleY,
+          x: x2,
+          y: y2
+        }
+      }
+    };
+  }
+};
+const CircleElement = {
+  name: ELEMENT_TYPES.CIRCLE,
+  async add(params) {
+    const { element, index, canvas, canvasMetadata } = params;
+    await addCircleElement({
+      element,
+      index,
+      canvas,
+      canvasMetadata
+    });
+  },
+  updateFromFabricObject(object, element, context) {
+    var _a;
+    const { x: x2, y: y2 } = convertToVideoPosition(
+      object.left,
+      object.top,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    const radius = Number(
+      ((((_a = element.props) == null ? void 0 : _a.radius) ?? 0) * object.scaleX).toFixed(2)
+    );
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          rotation: object.angle,
+          radius,
+          height: radius * 2,
+          width: radius * 2,
+          x: x2,
+          y: y2
+        }
+      }
+    };
+  }
+};
+const TextElement = {
+  name: ELEMENT_TYPES.TEXT,
+  async add(params) {
+    const { element, index, canvas, canvasMetadata } = params;
+    await addTextElement({
+      element,
+      index,
+      canvas,
+      canvasMetadata
+    });
+  },
+  updateFromFabricObject(object, element, context) {
+    const { x: x2, y: y2 } = convertToVideoPosition(
+      object.left,
+      object.top,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          rotation: object.angle,
+          x: x2,
+          y: y2
+        }
+      }
+    };
+  }
+};
+const CaptionElement = {
+  name: ELEMENT_TYPES.CAPTION,
+  async add(params) {
+    const { element, index, canvas, captionProps, canvasMetadata } = params;
+    await addCaptionElement({
+      element,
+      index,
+      canvas,
+      captionProps: captionProps ?? {},
+      canvasMetadata
+    });
+  },
+  updateFromFabricObject(object, element, context) {
+    var _a;
+    const { x: x2, y: y2 } = convertToVideoPosition(
+      object.left,
+      object.top,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    if ((_a = context.captionPropsRef.current) == null ? void 0 : _a.applyToAll) {
+      return {
+        element,
+        operation: CANVAS_OPERATIONS.CAPTION_PROPS_UPDATED,
+        payload: {
+          element,
+          props: {
+            ...context.captionPropsRef.current,
+            x: x2,
+            y: y2
+          }
+        }
+      };
+    }
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          x: x2,
+          y: y2
+        }
+      }
+    };
+  }
+};
+const WatermarkElement = {
+  name: "watermark",
+  async add(params) {
+    const { element, index, canvas, canvasMetadata, watermarkPropsRef } = params;
+    if (element.type === ELEMENT_TYPES.TEXT) {
+      if (watermarkPropsRef) watermarkPropsRef.current = element.props;
+      await addTextElement({
+        element,
+        index,
+        canvas,
+        canvasMetadata
+      });
+    } else if (element.type === ELEMENT_TYPES.IMAGE) {
+      await addImageElement({
+        element,
+        index,
+        canvas,
+        canvasMetadata
+      });
+    }
+  },
+  updateFromFabricObject(object, element, context) {
+    const { x: x2, y: y2 } = convertToVideoPosition(
+      object.left,
+      object.top,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    const rotation = object.angle != null ? object.angle : void 0;
+    const opacity = object.opacity != null ? object.opacity : void 0;
+    const baseProps = element.type === ELEMENT_TYPES.TEXT ? context.watermarkPropsRef.current ?? element.props ?? {} : { ...element.props };
+    const props = element.type === ELEMENT_TYPES.IMAGE && (object.scaleX != null || object.scaleY != null) ? {
+      ...baseProps,
+      width: baseProps.width != null && object.scaleX != null ? baseProps.width * object.scaleX : baseProps.width,
+      height: baseProps.height != null && object.scaleY != null ? baseProps.height * object.scaleY : baseProps.height
+    } : baseProps;
+    const payload = {
+      position: { x: x2, y: y2 },
+      ...rotation != null && { rotation },
+      ...opacity != null && { opacity },
+      ...Object.keys(props).length > 0 && { props }
+    };
+    return {
+      element: { ...element, props: { ...element.props, x: x2, y: y2, rotation, opacity, ...props } },
+      operation: CANVAS_OPERATIONS.WATERMARK_UPDATED,
+      payload
+    };
+  }
+};
+class ElementController {
+  constructor() {
+    __publicField2(this, "elements", /* @__PURE__ */ new Map());
+  }
+  register(handler) {
+    this.elements.set(handler.name, handler);
+  }
+  get(name) {
+    return this.elements.get(name);
+  }
+  list() {
+    return Array.from(this.elements.keys());
+  }
+}
+const elementController = new ElementController();
+function registerElements() {
+  elementController.register(VideoElement);
+  elementController.register(ImageElement);
+  elementController.register(RectElement);
+  elementController.register(CircleElement);
+  elementController.register(TextElement);
+  elementController.register(CaptionElement);
+  elementController.register(WatermarkElement);
+}
+registerElements();
 const useTwickCanvas = ({
   onCanvasReady,
   onCanvasOperation
 }) => {
   const [twickCanvas, setTwickCanvas] = useState(null);
   const elementMap = useRef({});
+  const watermarkPropsRef = useRef(null);
   const elementFrameMap = useRef({});
   const twickCanvasRef = useRef(null);
   const videoSizeRef = useRef({ width: 1, height: 1 });
@@ -7938,141 +8407,33 @@ const useTwickCanvas = ({
         case "scale":
         case "scaleX":
         case "scaleY":
-        case "rotate":
-          const { x: x2, y: y2 } = convertToVideoPosition(
-            object.left,
-            object.top,
-            canvasMetadataRef.current,
-            videoSizeRef.current
+        case "rotate": {
+          const currentElement = elementMap.current[elementId];
+          const handler = elementController.get(
+            elementId === "e-watermark" ? "watermark" : currentElement == null ? void 0 : currentElement.type
           );
-          if (elementMap.current[elementId].type === "caption") {
-            if ((_c = captionPropsRef.current) == null ? void 0 : _c.applyToAll) {
-              onCanvasOperation == null ? void 0 : onCanvasOperation(CANVAS_OPERATIONS.CAPTION_PROPS_UPDATED, {
-                element: elementMap.current[elementId],
-                props: {
-                  ...captionPropsRef.current,
-                  x: x2,
-                  y: y2
-                }
-              });
-            } else {
-              elementMap.current[elementId] = {
-                ...elementMap.current[elementId],
-                props: {
-                  ...elementMap.current[elementId].props,
-                  x: x2,
-                  y: y2
-                }
-              };
-              onCanvasOperation == null ? void 0 : onCanvasOperation(
-                CANVAS_OPERATIONS.ITEM_UPDATED,
-                elementMap.current[elementId]
-              );
-            }
-          } else {
-            if ((object == null ? void 0 : object.type) === "group") {
-              const currentFrameEffect = elementFrameMap.current[elementId];
-              let updatedFrameSize;
-              if (currentFrameEffect) {
-                updatedFrameSize = [
-                  currentFrameEffect.props.frameSize[0] * object.scaleX,
-                  currentFrameEffect.props.frameSize[1] * object.scaleY
-                ];
-              } else {
-                updatedFrameSize = [
-                  elementMap.current[elementId].frame.size[0] * object.scaleX,
-                  elementMap.current[elementId].frame.size[1] * object.scaleY
-                ];
-              }
-              if (currentFrameEffect) {
-                elementMap.current[elementId] = {
-                  ...elementMap.current[elementId],
-                  frameEffects: (elementMap.current[elementId].frameEffects || []).map(
-                    (frameEffect) => frameEffect.id === (currentFrameEffect == null ? void 0 : currentFrameEffect.id) ? {
-                      ...frameEffect,
-                      props: {
-                        ...frameEffect.props,
-                        framePosition: {
-                          x: x2,
-                          y: y2
-                        },
-                        frameSize: updatedFrameSize
-                      }
-                    } : frameEffect
-                  )
-                };
-                elementFrameMap.current[elementId] = {
-                  ...elementFrameMap.current[elementId],
-                  framePosition: {
-                    x: x2,
-                    y: y2
-                  },
-                  frameSize: updatedFrameSize
-                };
-              } else {
-                elementMap.current[elementId] = {
-                  ...elementMap.current[elementId],
-                  frame: {
-                    ...elementMap.current[elementId].frame,
-                    rotation: object.angle,
-                    size: updatedFrameSize,
-                    x: x2,
-                    y: y2
-                  }
-                };
-              }
-            } else {
-              if ((object == null ? void 0 : object.type) === "text") {
-                elementMap.current[elementId] = {
-                  ...elementMap.current[elementId],
-                  props: {
-                    ...elementMap.current[elementId].props,
-                    rotation: object.angle,
-                    x: x2,
-                    y: y2
-                  }
-                };
-              } else if ((object == null ? void 0 : object.type) === "circle") {
-                const radius = Number(
-                  (elementMap.current[elementId].props.radius * object.scaleX).toFixed(2)
-                );
-                elementMap.current[elementId] = {
-                  ...elementMap.current[elementId],
-                  props: {
-                    ...elementMap.current[elementId].props,
-                    rotation: object.angle,
-                    radius,
-                    height: radius * 2,
-                    width: radius * 2,
-                    x: x2,
-                    y: y2
-                  }
-                };
-              } else {
-                elementMap.current[elementId] = {
-                  ...elementMap.current[elementId],
-                  props: {
-                    ...elementMap.current[elementId].props,
-                    rotation: object.angle,
-                    width: elementMap.current[elementId].props.width * object.scaleX,
-                    height: elementMap.current[elementId].props.height * object.scaleY,
-                    x: x2,
-                    y: y2
-                  }
-                };
-              }
-            }
+          const result = (_c = handler == null ? void 0 : handler.updateFromFabricObject) == null ? void 0 : _c.call(handler, object, currentElement ?? { id: elementId, type: "text", props: {} }, {
+            canvasMetadata: canvasMetadataRef.current,
+            videoSize: videoSizeRef.current,
+            elementFrameMapRef: elementFrameMap,
+            captionPropsRef,
+            watermarkPropsRef
+          });
+          if (result) {
+            elementMap.current[elementId] = result.element;
             onCanvasOperation == null ? void 0 : onCanvasOperation(
-              CANVAS_OPERATIONS.ITEM_UPDATED,
-              elementMap.current[elementId]
+              result.operation ?? CANVAS_OPERATIONS.ITEM_UPDATED,
+              result.payload ?? result.element
             );
           }
           break;
+        }
       }
     }
   };
   const setCanvasElements = async ({
     elements,
+    watermark,
     seekTime = 0,
     captionProps,
     cleanAndAdd = false
@@ -8103,6 +8464,11 @@ const useTwickCanvas = ({
           }
         })
       );
+      if (watermark) {
+        addWatermarkToCanvas({
+          element: watermark
+        });
+      }
       reorderElementsByZIndex(twickCanvas);
     } catch {
     }
@@ -8114,92 +8480,46 @@ const useTwickCanvas = ({
     seekTime,
     captionProps
   }) => {
-    var _a, _b;
     if (!twickCanvas) return;
-    switch (element.type) {
-      case ELEMENT_TYPES.VIDEO:
-        const currentFrameEffect = getCurrentFrameEffect(
-          element,
-          seekTime || 0
-        );
-        elementFrameMap.current[element.id] = currentFrameEffect;
-        const snapTime = ((seekTime || 0) - ((element == null ? void 0 : element.s) || 0)) * (((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.playbackRate) || 1) + (((_b = element == null ? void 0 : element.props) == null ? void 0 : _b.time) || 0);
-        await addVideoElement({
-          element,
-          index,
-          canvas: twickCanvas,
-          canvasMetadata: canvasMetadataRef.current,
-          currentFrameEffect,
-          snapTime
-        });
-        if (element.timelineType === "scene") {
-          await addBackgroundColor({
-            element,
-            index,
-            canvas: twickCanvas,
-            canvasMetadata: canvasMetadataRef.current
-          });
-        }
-        break;
-      case ELEMENT_TYPES.IMAGE:
-        await addImageElement({
-          element,
-          index,
-          canvas: twickCanvas,
-          canvasMetadata: canvasMetadataRef.current
-        });
-        if (element.timelineType === "scene") {
-          await addBackgroundColor({
-            element,
-            index,
-            canvas: twickCanvas,
-            canvasMetadata: canvasMetadataRef.current
-          });
-        }
-        break;
-      case ELEMENT_TYPES.RECT:
-        await addRectElement({
-          element,
-          index,
-          canvas: twickCanvas,
-          canvasMetadata: canvasMetadataRef.current
-        });
-        break;
-      case ELEMENT_TYPES.CIRCLE:
-        await addCircleElement({
-          element,
-          index,
-          canvas: twickCanvas,
-          canvasMetadata: canvasMetadataRef.current
-        });
-        break;
-      case ELEMENT_TYPES.TEXT:
-        await addTextElement({
-          element,
-          index,
-          canvas: twickCanvas,
-          canvasMetadata: canvasMetadataRef.current
-        });
-        break;
-      case ELEMENT_TYPES.CAPTION:
-        await addCaptionElement({
-          element,
-          index,
-          canvas: twickCanvas,
-          captionProps,
-          canvasMetadata: canvasMetadataRef.current
-        });
-        break;
+    const handler = elementController.get(element.type);
+    if (handler) {
+      await handler.add({
+        element,
+        index,
+        canvas: twickCanvas,
+        canvasMetadata: canvasMetadataRef.current,
+        seekTime,
+        captionProps: captionProps ?? null,
+        elementFrameMapRef: elementFrameMap,
+        getCurrentFrameEffect
+      });
     }
     elementMap.current[element.id] = element;
     if (reorder) {
       reorderElementsByZIndex(twickCanvas);
     }
   };
+  const addWatermarkToCanvas = ({
+    element
+  }) => {
+    if (!twickCanvas) return;
+    const handler = elementController.get("watermark");
+    if (handler) {
+      handler.add({
+        element,
+        index: Object.keys(elementMap.current).length,
+        canvas: twickCanvas,
+        canvasMetadata: canvasMetadataRef.current,
+        watermarkPropsRef
+      });
+      elementMap.current[element.id] = element;
+    }
+  };
   return {
     twickCanvas,
     buildCanvas,
     onVideoSizeChange,
+    addWatermarkToCanvas,
     addElementToCanvas,
     setCanvasElements
   };
@@ -8222,10 +8542,20 @@ const usePlayerManager = ({
   };
   const handleCanvasOperation = (operation, data) => {
     if (operation === CANVAS_OPERATIONS.CAPTION_PROPS_UPDATED) {
-      const subtitlesTrack = editor.getSubtiltesTrack();
+      const subtitlesTrack = editor.getSubtitlesTrack();
       subtitlesTrack == null ? void 0 : subtitlesTrack.setProps(data.props);
       setSelectedItem(data.element);
       editor.refresh();
+    } else if (operation === CANVAS_OPERATIONS.WATERMARK_UPDATED) {
+      const w2 = editor.getWatermark();
+      if (w2 && data) {
+        if (data.position) w2.setPosition(data.position);
+        if (data.rotation != null) w2.setRotation(data.rotation);
+        if (data.opacity != null) w2.setOpacity(data.opacity);
+        if (data.props) w2.setProps(data.props);
+        editor.setWatermark(w2);
+        currentChangeLog.current = currentChangeLog.current + 1;
+      }
     } else {
       const element = ElementDeserializer.fromJSON(data);
       switch (operation) {
@@ -8258,13 +8588,30 @@ const usePlayerManager = ({
     );
     let captionProps = {};
     (elements || []).forEach((element) => {
-      if (element instanceof CaptionElement) {
+      if (element instanceof CaptionElement$1) {
         const track = editor.getTrackById(element.getTrackId());
         captionProps = (track == null ? void 0 : track.getProps()) ?? {};
       }
     });
+    const watermark = editor.getWatermark();
+    let watermarkElement;
+    if (watermark) {
+      const position = watermark.getPosition();
+      watermarkElement = {
+        id: watermark.getId(),
+        type: watermark.getType(),
+        props: {
+          ...watermark.getProps() || {},
+          x: (position == null ? void 0 : position.x) ?? 0,
+          y: (position == null ? void 0 : position.y) ?? 0,
+          rotation: watermark.getRotation() ?? 0,
+          opacity: watermark.getOpacity() ?? 1
+        }
+      };
+    }
     setCanvasElements({
       elements,
+      watermark: watermarkElement,
       seekTime,
       captionProps,
       cleanAndAdd: true
@@ -17939,7 +18286,7 @@ const useTimelineManager = () => {
     updates
   }) => {
     if (dragType === DRAG_TYPE.START) {
-      if (element instanceof VideoElement || element instanceof AudioElement) {
+      if (element instanceof VideoElement$1 || element instanceof AudioElement) {
         const elementProps = element.getProps();
         const delta = updates.start - element.getStart() * ((elementProps == null ? void 0 : elementProps.playbackRate) || 1);
         if (element instanceof AudioElement) {