@twick/canvas 0.15.12 → 0.15.14

package/dist/index.js

@@ -1,4 +1,7 @@
 "use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fabric = require("fabric");
 const react = require("react");
@@ -48,7 +51,9 @@ const CANVAS_OPERATIONS = {
   /** Items have been ungrouped */
   ITEM_UNGROUPED: "ITEM_UNGROUPED",
   /** 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 */
@@ -62,7 +67,11 @@ const ELEMENT_TYPES = {
   /** Rectangle element type */
   RECT: "rect",
   /** Circle element type */
-  CIRCLE: "circle"
+  CIRCLE: "circle",
+  /** Icon element type */
+  ICON: "icon",
+  /** Background color element type */
+  BACKGROUND_COLOR: "backgroundColor"
 };
 const isBrowser = typeof window !== "undefined";
 const isCanvasSupported = isBrowser && !!window.HTMLCanvasElement;
@@ -124,6 +133,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;
@@ -171,6 +200,17 @@ const getCurrentFrameEffect = (item, seekTime) => {
   }
   return currentFrameEffect;
 };
+const hexToRgba = (hex, alpha) => {
+  const color = hex.replace(/^#/, "");
+  const fullHex = color.length === 3 ? color.split("").map((c) => c + c).join("") : color;
+  if (fullHex.length !== 6) {
+    return hex;
+  }
+  const r = parseInt(fullHex.slice(0, 2), 16);
+  const g = parseInt(fullHex.slice(2, 4), 16);
+  const b = parseInt(fullHex.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
 const disabledControl = new fabric.Control({
   /** X position offset */
   x: 0,
@@ -602,40 +642,66 @@ const addTextElement = ({
   canvas,
   canvasMetadata
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C;
   const { x, y } = 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 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 = ((_e = element.props) == null ? void 0 : _e.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 ((_h = element.props) == null ? void 0 : _h.maxWidth) {
+      width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
+    }
+  } else {
+    const textContent = ((_i = element.props) == null ? void 0 : _i.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 text = new fabric.Textbox(((_e = element.props) == null ? void 0 : _e.text) || element.t || "", {
+  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 fabric.Textbox(((_m = element.props) == null ? void 0 : _m.text) || element.t || "", {
     left: x,
     top: y,
     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: ((_h = element.props) == null ? void 0 : _h.fontFamily) || DEFAULT_TEXT_PROPS.family,
-    fontStyle: ((_i = element.props) == null ? void 0 : _i.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: ((_n = element.props) == null ? void 0 : _n.rotation) || 0,
+    fontSize,
+    fontFamily,
+    fontStyle,
+    fontWeight,
+    fill: ((_o = element.props) == null ? void 0 : _o.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: ((_n = element.props) == null ? void 0 : _n.stroke) || DEFAULT_TEXT_PROPS.stroke,
-    strokeWidth: ((_o = element.props) == null ? void 0 : _o.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
-    shadow: ((_p = element.props) == null ? void 0 : _p.shadowColor) ? new fabric.Shadow({
-      offsetX: ((_r = (_q = element.props) == null ? void 0 : _q.shadowOffset) == null ? void 0 : _r.length) && ((_t = (_s = element.props) == null ? void 0 : _s.shadowOffset) == null ? void 0 : _t.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: ((_r = element.props) == null ? void 0 : _r.stroke) || DEFAULT_TEXT_PROPS.stroke,
+    strokeWidth: ((_s = element.props) == null ? void 0 : _s.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
+    ...backgroundColor && { backgroundColor },
+    shadow: ((_t = element.props) == null ? void 0 : _t.shadowColor) ? new fabric.Shadow({
+      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);
@@ -1007,12 +1073,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, y } = 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, y },
+          frameSize: updatedFrameSize
+        }
+      };
+      return {
+        element: {
+          ...element,
+          frameEffects: (element.frameEffects || []).map(
+            (fe) => fe.id === (currentFrameEffect == null ? void 0 : currentFrameEffect.id) ? {
+              ...fe,
+              props: {
+                ...fe.props,
+                framePosition: { x, y },
+                frameSize: updatedFrameSize
+              }
+            } : fe
+          )
+        }
+      };
+    }
+    const frame = element.frame;
+    updatedFrameSize = [
+      (frame.size[0] ?? 0) * object.scaleX,
+      (frame.size[1] ?? 0) * object.scaleY
+    ];
+    return {
+      element: {
+        ...element,
+        frame: {
+          ...frame,
+          rotation: object.angle,
+          size: updatedFrameSize,
+          x,
+          y
+        }
+      }
+    };
+  }
+};
+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, y } = 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, y },
+            frameSize: updatedFrameSize
+          }
+        };
+        return {
+          element: {
+            ...element,
+            frameEffects: (element.frameEffects || []).map(
+              (fe) => fe.id === (currentFrameEffect == null ? void 0 : currentFrameEffect.id) ? {
+                ...fe,
+                props: {
+                  ...fe.props,
+                  framePosition: { x, y },
+                  frameSize: updatedFrameSize
+                }
+              } : fe
+            )
+          }
+        };
+      }
+      const frame = element.frame;
+      updatedFrameSize = [
+        (frame.size[0] ?? 0) * object.scaleX,
+        (frame.size[1] ?? 0) * object.scaleY
+      ];
+      return {
+        element: {
+          ...element,
+          frame: {
+            ...frame,
+            rotation: object.angle,
+            size: updatedFrameSize,
+            x,
+            y
+          }
+        }
+      };
+    }
+    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,
+          y
+        }
+      }
+    };
+  }
+};
+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, y } = 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,
+          y
+        }
+      }
+    };
+  }
+};
+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, y } = 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,
+          y
+        }
+      }
+    };
+  }
+};
+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, y } = convertToVideoPosition(
+      object.left,
+      object.top,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          rotation: object.angle,
+          x,
+          y
+        }
+      }
+    };
+  }
+};
+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, y } = 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,
+            y
+          }
+        }
+      };
+    }
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          x,
+          y
+        }
+      }
+    };
+  }
+};
+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, y } = 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, y },
+      ...rotation != null && { rotation },
+      ...opacity != null && { opacity },
+      ...Object.keys(props).length > 0 && { props }
+    };
+    return {
+      element: { ...element, props: { ...element.props, x, y, rotation, opacity, ...props } },
+      operation: CANVAS_OPERATIONS.WATERMARK_UPDATED,
+      payload
+    };
+  }
+};
+class ElementController {
+  constructor() {
+    __publicField(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] = react.useState(null);
   const elementMap = react.useRef({});
+  const watermarkPropsRef = react.useRef(null);
   const elementFrameMap = react.useRef({});
   const twickCanvasRef = react.useRef(null);
   const videoSizeRef = react.useRef({ width: 1, height: 1 });
@@ -1112,141 +1585,33 @@ const useTwickCanvas = ({
         case "scale":
         case "scaleX":
         case "scaleY":
-        case "rotate":
-          const { x, y } = 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,
-                  y
-                }
-              });
-            } else {
-              elementMap.current[elementId] = {
-                ...elementMap.current[elementId],
-                props: {
-                  ...elementMap.current[elementId].props,
-                  x,
-                  y
-                }
-              };
-              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,
-                          y
-                        },
-                        frameSize: updatedFrameSize
-                      }
-                    } : frameEffect
-                  )
-                };
-                elementFrameMap.current[elementId] = {
-                  ...elementFrameMap.current[elementId],
-                  framePosition: {
-                    x,
-                    y
-                  },
-                  frameSize: updatedFrameSize
-                };
-              } else {
-                elementMap.current[elementId] = {
-                  ...elementMap.current[elementId],
-                  frame: {
-                    ...elementMap.current[elementId].frame,
-                    rotation: object.angle,
-                    size: updatedFrameSize,
-                    x,
-                    y
-                  }
-                };
-              }
-            } else {
-              if ((object == null ? void 0 : object.type) === "text") {
-                elementMap.current[elementId] = {
-                  ...elementMap.current[elementId],
-                  props: {
-                    ...elementMap.current[elementId].props,
-                    rotation: object.angle,
-                    x,
-                    y
-                  }
-                };
-              } 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,
-                    y
-                  }
-                };
-              } 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,
-                    y
-                  }
-                };
-              }
-            }
+          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
@@ -1277,6 +1642,11 @@ const useTwickCanvas = ({
           }
         })
       );
+      if (watermark) {
+        addWatermarkToCanvas({
+          element: watermark
+        });
+      }
       reorderElementsByZIndex(twickCanvas);
     } catch {
     }
@@ -1288,97 +1658,53 @@ 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
   };
 };
 exports.CANVAS_OPERATIONS = CANVAS_OPERATIONS;
+exports.ELEMENT_TYPES = ELEMENT_TYPES;
+exports.ElementController = ElementController;
 exports.addBackgroundColor = addBackgroundColor;
 exports.addCaptionElement = addCaptionElement;
 exports.addImageElement = addImageElement;
@@ -1389,6 +1715,7 @@ exports.convertToCanvasPosition = convertToCanvasPosition;
 exports.convertToVideoPosition = convertToVideoPosition;
 exports.createCanvas = createCanvas;
 exports.disabledControl = disabledControl;
+exports.elementController = elementController;
 exports.getCurrentFrameEffect = getCurrentFrameEffect;
 exports.reorderElementsByZIndex = reorderElementsByZIndex;
 exports.rotateControl = rotateControl;