@twick/canvas 0.15.13 → 0.15.15

package/dist/index.mjs

@@ -1,4 +1,7 @@
-import { Canvas, Control, controlsUtils, FabricImage, Rect, Textbox, Shadow, Group, Circle } from "fabric";
+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);
+import { Canvas, Control, controlsUtils, FabricImage, Rect, Textbox, Shadow, Group, Circle, ActiveSelection } from "fabric";
 import { useState, useRef } from "react";
 const DEFAULT_TEXT_PROPS = {
   /** Font family for text elements */
@@ -46,7 +49,13 @@ 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",
+  /** A new element was added via drop on canvas; payload is { element } */
+  ADDED_NEW_ELEMENT: "ADDED_NEW_ELEMENT",
+  /** Z-order changed (bring to front / send to back). Payload is { elementId, direction }. Timeline should reorder tracks. */
+  Z_ORDER_CHANGED: "Z_ORDER_CHANGED"
 };
 const ELEMENT_TYPES = {
   /** Text element type */
@@ -60,7 +69,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;
@@ -122,6 +135,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;
@@ -132,6 +165,49 @@ const reorderElementsByZIndex = (canvas) => {
   objects.forEach((obj) => canvas.add(obj));
   canvas.renderAll();
 };
+const changeZOrder = (canvas, elementId, direction) => {
+  var _a, _b;
+  if (!canvas) return null;
+  const objects = canvas.getObjects();
+  const sorted = [...objects].sort((a, b) => (a.zIndex || 0) - (b.zIndex || 0));
+  const idx = sorted.findIndex((obj2) => {
+    var _a2;
+    return ((_a2 = obj2.get) == null ? void 0 : _a2.call(obj2, "id")) === elementId;
+  });
+  if (idx < 0) return null;
+  const minZ = ((_a = sorted[0]) == null ? void 0 : _a.zIndex) ?? 0;
+  const maxZ = ((_b = sorted[sorted.length - 1]) == null ? void 0 : _b.zIndex) ?? 0;
+  const obj = sorted[idx];
+  if (direction === "front") {
+    obj.set("zIndex", maxZ + 1);
+    reorderElementsByZIndex(canvas);
+    return maxZ + 1;
+  }
+  if (direction === "back") {
+    obj.set("zIndex", minZ - 1);
+    reorderElementsByZIndex(canvas);
+    return minZ - 1;
+  }
+  if (direction === "forward" && idx < sorted.length - 1) {
+    const next = sorted[idx + 1];
+    const myZ = obj.zIndex ?? idx;
+    const nextZ = next.zIndex ?? idx + 1;
+    obj.set("zIndex", nextZ);
+    next.set("zIndex", myZ);
+    reorderElementsByZIndex(canvas);
+    return nextZ;
+  }
+  if (direction === "backward" && idx > 0) {
+    const prev = sorted[idx - 1];
+    const myZ = obj.zIndex ?? idx;
+    const prevZ = prev.zIndex ?? idx - 1;
+    obj.set("zIndex", prevZ);
+    prev.set("zIndex", myZ);
+    reorderElementsByZIndex(canvas);
+    return prevZ;
+  }
+  return obj.zIndex ?? idx;
+};
 const getCanvasContext = (canvas) => {
   var _a, _b, _c, _d;
   if (!canvas || !((_b = (_a = canvas.elements) == null ? void 0 : _a.lower) == null ? void 0 : _b.ctx)) return;
@@ -152,12 +228,31 @@ const convertToCanvasPosition = (x, y, canvasMetadata) => {
     y: y * canvasMetadata.scaleY + canvasMetadata.height / 2
   };
 };
+const getObjectCanvasCenter = (obj) => {
+  if (obj.getCenterPoint) {
+    const p = obj.getCenterPoint();
+    return { x: p.x, y: p.y };
+  }
+  return { x: obj.left ?? 0, y: obj.top ?? 0 };
+};
+const getObjectCanvasAngle = (obj) => {
+  if (typeof obj.getTotalAngle === "function") {
+    return obj.getTotalAngle();
+  }
+  return obj.angle ?? 0;
+};
 const convertToVideoPosition = (x, y, canvasMetadata, videoSize) => {
   return {
     x: Number((x / canvasMetadata.scaleX - videoSize.width / 2).toFixed(2)),
     y: Number((y / canvasMetadata.scaleY - videoSize.height / 2).toFixed(2))
   };
 };
+const convertToVideoDimensions = (widthCanvas, heightCanvas, canvasMetadata) => {
+  return {
+    width: Number((widthCanvas / canvasMetadata.scaleX).toFixed(2)),
+    height: Number((heightCanvas / canvasMetadata.scaleY).toFixed(2))
+  };
+};
 const getCurrentFrameEffect = (item, seekTime) => {
   var _a;
   let currentFrameEffect;
@@ -169,6 +264,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 Control({
   /** X position offset */
   x: 0,
@@ -600,40 +706,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 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 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 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 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);
@@ -654,7 +786,8 @@ const setImageProps = ({
   img,
   element,
   index,
-  canvasMetadata
+  canvasMetadata,
+  lockAspectRatio = true
 }) => {
   var _a, _b, _c, _d, _e;
   const width = (((_a = element.props) == null ? void 0 : _a.width) || 0) * canvasMetadata.scaleX || canvasMetadata.width;
@@ -674,13 +807,15 @@ const setImageProps = ({
   img.set("selectable", true);
   img.set("hasControls", true);
   img.set("touchAction", "all");
+  img.set("lockUniScaling", lockAspectRatio);
 };
 const addCaptionElement = ({
   element,
   index,
   canvas,
   captionProps,
-  canvasMetadata
+  canvasMetadata,
+  lockAspectRatio = false
 }) => {
   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, _D, _E, _F, _G, _H, _I, _J;
   const { x, y } = convertToCanvasPosition(
@@ -719,6 +854,7 @@ const addCaptionElement = ({
   });
   caption.set("id", element.id);
   caption.set("zIndex", index);
+  caption.set("lockUniScaling", lockAspectRatio);
   caption.controls.mt = disabledControl;
   caption.controls.mb = disabledControl;
   caption.controls.ml = disabledControl;
@@ -766,7 +902,8 @@ const addImageElement = async ({
   index,
   canvas,
   canvasMetadata,
-  currentFrameEffect
+  currentFrameEffect,
+  lockAspectRatio = true
 }) => {
   try {
     const img = await FabricImage.fromURL(imageUrl || element.props.src || "");
@@ -775,7 +912,7 @@ const addImageElement = async ({
       originY: "center",
       lockMovementX: false,
       lockMovementY: false,
-      lockUniScaling: true,
+      lockUniScaling: lockAspectRatio,
       hasControls: false,
       selectable: false
     });
@@ -786,10 +923,11 @@ const addImageElement = async ({
         index,
         canvas,
         canvasMetadata,
-        currentFrameEffect
+        currentFrameEffect,
+        lockAspectRatio
       });
     } else {
-      setImageProps({ img, element, index, canvasMetadata });
+      setImageProps({ img, element, index, canvasMetadata, lockAspectRatio });
       canvas.add(img);
       return img;
     }
@@ -802,7 +940,8 @@ const addMediaGroup = ({
   index,
   canvas,
   canvasMetadata,
-  currentFrameEffect
+  currentFrameEffect,
+  lockAspectRatio = true
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   let frameSize;
@@ -891,6 +1030,7 @@ const addMediaGroup = ({
   group.controls.mtr = rotateControl;
   group.set("id", element.id);
   group.set("zIndex", index);
+  group.set("lockUniScaling", lockAspectRatio);
   canvas.add(group);
   return group;
 };
@@ -898,7 +1038,8 @@ const addRectElement = ({
   element,
   index,
   canvas,
-  canvasMetadata
+  canvasMetadata,
+  lockAspectRatio = false
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const { x, y } = convertToCanvasPosition(
@@ -936,6 +1077,7 @@ const addRectElement = ({
   });
   rect.set("id", element.id);
   rect.set("zIndex", index);
+  rect.set("lockUniScaling", lockAspectRatio);
   rect.controls.mtr = rotateControl;
   canvas.add(rect);
   return rect;
@@ -944,9 +1086,10 @@ const addCircleElement = ({
   element,
   index,
   canvas,
-  canvasMetadata
+  canvasMetadata,
+  lockAspectRatio = true
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g;
   const { x, y } = convertToCanvasPosition(
     ((_a = element.props) == null ? void 0 : _a.x) || 0,
     ((_b = element.props) == null ? void 0 : _b.y) || 0,
@@ -962,7 +1105,9 @@ const addCircleElement = ({
     stroke: ((_e = element.props) == null ? void 0 : _e.stroke) || "#000000",
     strokeWidth: (((_f = element.props) == null ? void 0 : _f.lineWidth) || 0) * canvasMetadata.scaleX,
     originX: "center",
-    originY: "center"
+    originY: "center",
+    // Respect element opacity (0–1). Defaults to fully opaque.
+    opacity: ((_g = element.props) == null ? void 0 : _g.opacity) ?? 1
   });
   circle.controls.mt = disabledControl;
   circle.controls.mb = disabledControl;
@@ -971,6 +1116,7 @@ const addCircleElement = ({
   circle.controls.mtr = disabledControl;
   circle.set("id", element.id);
   circle.set("zIndex", index);
+  circle.set("lockUniScaling", lockAspectRatio);
   canvas.add(circle);
   return circle;
 };
@@ -1005,17 +1151,462 @@ 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 canvasCenter = getObjectCanvasCenter(object);
+    const { x, y } = convertToVideoPosition(
+      canvasCenter.x,
+      canvasCenter.y,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    const scaledW = (object.width ?? 0) * (object.scaleX ?? 1);
+    const scaledH = (object.height ?? 0) * (object.scaleY ?? 1);
+    const { width: fw, height: fh } = convertToVideoDimensions(
+      scaledW,
+      scaledH,
+      context.canvasMetadata
+    );
+    const updatedFrameSize = [fw, fh];
+    const currentFrameEffect = context.elementFrameMapRef.current[element.id];
+    if (currentFrameEffect) {
+      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;
+    return {
+      element: {
+        ...element,
+        frame: {
+          ...frame,
+          rotation: getObjectCanvasAngle(object),
+          size: updatedFrameSize,
+          x,
+          y
+        }
+      }
+    };
+  }
+};
+const ImageElement = {
+  name: ELEMENT_TYPES.IMAGE,
+  async add(params) {
+    var _a;
+    const { element, index, canvas, canvasMetadata, lockAspectRatio } = params;
+    await addImageElement({
+      element,
+      index,
+      canvas,
+      canvasMetadata,
+      lockAspectRatio: lockAspectRatio ?? ((_a = element.props) == null ? void 0 : _a.lockAspectRatio)
+    });
+    if (element.timelineType === "scene") {
+      await addBackgroundColor({
+        element,
+        index,
+        canvas,
+        canvasMetadata
+      });
+    }
+  },
+  updateFromFabricObject(object, element, context) {
+    const canvasCenter = getObjectCanvasCenter(object);
+    const { x, y } = convertToVideoPosition(
+      canvasCenter.x,
+      canvasCenter.y,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    const currentFrameEffect = context.elementFrameMapRef.current[element.id];
+    if (object.type === "group") {
+      const scaledW2 = (object.width ?? 0) * (object.scaleX ?? 1);
+      const scaledH2 = (object.height ?? 0) * (object.scaleY ?? 1);
+      const { width: fw, height: fh } = convertToVideoDimensions(
+        scaledW2,
+        scaledH2,
+        context.canvasMetadata
+      );
+      const updatedFrameSize = [fw, fh];
+      if (currentFrameEffect) {
+        context.elementFrameMapRef.current[element.id] = {
+          ...currentFrameEffect,
+          props: {
+            ...currentFrameEffect.props,
+            framePosition: { x, y },
+            frameSize: updatedFrameSize
+          }
+        };
+        return {
+          element: {
+            ...element,
+            // Keep the base frame in sync with the active frame effect
+            // so visualizer `Rect {...element.frame}` reflects the same size/position.
+            frame: element.frame ? {
+              ...element.frame,
+              rotation: getObjectCanvasAngle(object),
+              size: updatedFrameSize,
+              x,
+              y
+            } : element.frame,
+            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;
+      return {
+        element: {
+          ...element,
+          frame: {
+            ...frame,
+            rotation: getObjectCanvasAngle(object),
+            size: updatedFrameSize,
+            x,
+            y
+          }
+        }
+      };
+    }
+    const scaledW = (object.width ?? 0) * (object.scaleX ?? 1);
+    const scaledH = (object.height ?? 0) * (object.scaleY ?? 1);
+    const { width, height } = convertToVideoDimensions(
+      scaledW,
+      scaledH,
+      context.canvasMetadata
+    );
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          rotation: getObjectCanvasAngle(object),
+          width,
+          height,
+          x,
+          y
+        }
+      }
+    };
+  }
+};
+const RectElement = {
+  name: ELEMENT_TYPES.RECT,
+  async add(params) {
+    var _a;
+    const { element, index, canvas, canvasMetadata, lockAspectRatio } = params;
+    await addRectElement({
+      element,
+      index,
+      canvas,
+      canvasMetadata,
+      lockAspectRatio: lockAspectRatio ?? ((_a = element.props) == null ? void 0 : _a.lockAspectRatio)
+    });
+  },
+  updateFromFabricObject(object, element, context) {
+    var _a, _b;
+    const canvasCenter = getObjectCanvasCenter(object);
+    const { x, y } = convertToVideoPosition(
+      canvasCenter.x,
+      canvasCenter.y,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          rotation: getObjectCanvasAngle(object),
+          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) {
+    var _a;
+    const { element, index, canvas, canvasMetadata, lockAspectRatio } = params;
+    await addCircleElement({
+      element,
+      index,
+      canvas,
+      canvasMetadata,
+      lockAspectRatio: lockAspectRatio ?? ((_a = element.props) == null ? void 0 : _a.lockAspectRatio)
+    });
+  },
+  updateFromFabricObject(object, element, context) {
+    var _a, _b;
+    const canvasCenter = getObjectCanvasCenter(object);
+    const { x, y } = convertToVideoPosition(
+      canvasCenter.x,
+      canvasCenter.y,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    const radius = Number(
+      ((((_a = element.props) == null ? void 0 : _a.radius) ?? 0) * object.scaleX).toFixed(2)
+    );
+    const opacity = object.opacity != null ? object.opacity : (_b = element.props) == null ? void 0 : _b.opacity;
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          rotation: getObjectCanvasAngle(object),
+          radius,
+          height: radius * 2,
+          width: radius * 2,
+          x,
+          y,
+          ...opacity != null && { opacity }
+        }
+      }
+    };
+  }
+};
+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 canvasCenter = getObjectCanvasCenter(object);
+    const { x, y } = convertToVideoPosition(
+      canvasCenter.x,
+      canvasCenter.y,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          rotation: getObjectCanvasAngle(object),
+          x,
+          y
+        }
+      }
+    };
+  }
+};
+const CaptionElement = {
+  name: ELEMENT_TYPES.CAPTION,
+  async add(params) {
+    var _a;
+    const { element, index, canvas, captionProps, canvasMetadata, lockAspectRatio } = params;
+    await addCaptionElement({
+      element,
+      index,
+      canvas,
+      captionProps: captionProps ?? {},
+      canvasMetadata,
+      lockAspectRatio: lockAspectRatio ?? ((_a = element.props) == null ? void 0 : _a.lockAspectRatio)
+    });
+  },
+  updateFromFabricObject(object, element, context) {
+    var _a;
+    const canvasCenter = getObjectCanvasCenter(object);
+    const { x, y } = convertToVideoPosition(
+      canvasCenter.x,
+      canvasCenter.y,
+      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
+  onCanvasOperation,
+  /**
+   * When true, holding Shift while dragging an object will lock movement to
+   * the dominant axis (horizontal or vertical). This mirrors behavior in
+   * professional editors and improves precise alignment.
+   *
+   * Default: false (opt‑in to avoid surprising existing consumers).
+   */
+  enableShiftAxisLock = false
 }) => {
   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 });
   const canvasResolutionRef = useRef({ width: 1, height: 1 });
   const captionPropsRef = useRef(null);
+  const axisLockStateRef = useRef(null);
   const canvasMetadataRef = useRef({
     width: 0,
     height: 0,
@@ -1030,6 +1621,57 @@ const useTwickCanvas = ({
       canvasMetadataRef.current.scaleY = canvasMetadataRef.current.height / videoSize.height;
     }
   };
+  const handleObjectMoving = (event) => {
+    var _a;
+    if (!enableShiftAxisLock) return;
+    const target = event == null ? void 0 : event.target;
+    const transform = event == null ? void 0 : event.transform;
+    const pointerEvent = event == null ? void 0 : event.e;
+    if (!target || !transform || !pointerEvent) {
+      axisLockStateRef.current = null;
+      return;
+    }
+    if (!pointerEvent.shiftKey) {
+      axisLockStateRef.current = null;
+      return;
+    }
+    const original = transform.original;
+    if (!original || typeof target.left !== "number" || typeof target.top !== "number") {
+      axisLockStateRef.current = null;
+      return;
+    }
+    if (!axisLockStateRef.current) {
+      const dx = Math.abs(target.left - original.left);
+      const dy = Math.abs(target.top - original.top);
+      axisLockStateRef.current = {
+        axis: dx >= dy ? "x" : "y"
+      };
+    }
+    if (axisLockStateRef.current.axis === "x") {
+      target.top = original.top;
+    } else {
+      target.left = original.left;
+    }
+    (_a = target.canvas) == null ? void 0 : _a.requestRenderAll();
+  };
+  const applyMarqueeSelectionControls = () => {
+    const canvasInstance = twickCanvasRef.current;
+    if (!canvasInstance) return;
+    const activeObject = canvasInstance.getActiveObject();
+    if (!activeObject) return;
+    if (activeObject instanceof ActiveSelection) {
+      activeObject.controls.mt = disabledControl;
+      activeObject.controls.mb = disabledControl;
+      activeObject.controls.ml = disabledControl;
+      activeObject.controls.mr = disabledControl;
+      activeObject.controls.bl = disabledControl;
+      activeObject.controls.br = disabledControl;
+      activeObject.controls.tl = disabledControl;
+      activeObject.controls.tr = disabledControl;
+      activeObject.controls.mtr = rotateControl;
+      canvasInstance.requestRenderAll();
+    }
+  };
   const buildCanvas = ({
     videoSize,
     canvasSize,
@@ -1049,6 +1691,9 @@ const useTwickCanvas = ({
     if (twickCanvasRef.current) {
       twickCanvasRef.current.off("mouse:up", handleMouseUp);
       twickCanvasRef.current.off("text:editing:exited", onTextEdit);
+      twickCanvasRef.current.off("object:moving", handleObjectMoving);
+      twickCanvasRef.current.off("selection:created", applyMarqueeSelectionControls);
+      twickCanvasRef.current.off("selection:updated", applyMarqueeSelectionControls);
       twickCanvasRef.current.dispose();
     }
     const { canvas, canvasMetadata } = createCanvas({
@@ -1066,6 +1711,9 @@ const useTwickCanvas = ({
     videoSizeRef.current = videoSize;
     canvas == null ? void 0 : canvas.on("mouse:up", handleMouseUp);
     canvas == null ? void 0 : canvas.on("text:editing:exited", onTextEdit);
+    canvas == null ? void 0 : canvas.on("object:moving", handleObjectMoving);
+    canvas == null ? void 0 : canvas.on("selection:created", applyMarqueeSelectionControls);
+    canvas == null ? void 0 : canvas.on("selection:updated", applyMarqueeSelectionControls);
     canvasResolutionRef.current = canvasSize;
     setTwickCanvas(canvas);
     twickCanvasRef.current = canvas;
@@ -1095,7 +1743,8 @@ const useTwickCanvas = ({
     if (event.target) {
       const object = event.target;
       const elementId = object.get("id");
-      if (((_a = event.transform) == null ? void 0 : _a.action) === "drag") {
+      const action = (_a = event.transform) == null ? void 0 : _a.action;
+      if (action === "drag") {
         const original = event.transform.original;
         if (object.left === original.left && object.top === original.top) {
           onCanvasOperation == null ? void 0 : onCanvasOperation(
@@ -1105,149 +1754,67 @@ const useTwickCanvas = ({
           return;
         }
       }
-      switch ((_b = event.transform) == null ? void 0 : _b.action) {
+      const context = {
+        canvasMetadata: canvasMetadataRef.current,
+        videoSize: videoSizeRef.current,
+        elementFrameMapRef: elementFrameMap,
+        captionPropsRef,
+        watermarkPropsRef
+      };
+      if (object instanceof ActiveSelection && (action === "drag" || action === "rotate")) {
+        const objects = object.getObjects();
+        for (const fabricObj of objects) {
+          const id = fabricObj.get("id");
+          if (!id || id === "e-watermark") continue;
+          const currentElement = elementMap.current[id];
+          if (!currentElement) continue;
+          const handler = elementController.get(currentElement.type);
+          const result = (_b = handler == null ? void 0 : handler.updateFromFabricObject) == null ? void 0 : _b.call(
+            handler,
+            fabricObj,
+            currentElement,
+            context
+          );
+          if (result) {
+            elementMap.current[id] = result.element;
+            onCanvasOperation == null ? void 0 : onCanvasOperation(
+              result.operation ?? CANVAS_OPERATIONS.ITEM_UPDATED,
+              result.payload ?? result.element
+            );
+          }
+        }
+        return;
+      }
+      switch (action) {
         case "drag":
         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: {} }, context);
+          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
+    cleanAndAdd = false,
+    lockAspectRatio
   }) => {
     if (!twickCanvas || !getCanvasContext(twickCanvas)) return;
     try {
@@ -1260,21 +1827,36 @@ const useTwickCanvas = ({
         }
       }
       captionPropsRef.current = captionProps;
+      const uniqueElements = [];
+      const seenIds = /* @__PURE__ */ new Set();
+      for (const el of elements) {
+        if (!el || !el.id) continue;
+        if (seenIds.has(el.id)) continue;
+        seenIds.add(el.id);
+        uniqueElements.push(el);
+      }
       await Promise.all(
-        elements.map(async (element, index) => {
+        uniqueElements.map(async (element, index) => {
           try {
             if (!element) return;
+            const zOrder = element.zIndex ?? index;
             await addElementToCanvas({
               element,
-              index,
+              index: zOrder,
               reorder: false,
               seekTime,
-              captionProps
+              captionProps,
+              lockAspectRatio
             });
           } catch {
           }
         })
       );
+      if (watermark) {
+        addWatermarkToCanvas({
+          element: watermark
+        });
+      }
       reorderElementsByZIndex(twickCanvas);
     } catch {
     }
@@ -1284,100 +1866,76 @@ const useTwickCanvas = ({
     index,
     reorder = true,
     seekTime,
-    captionProps
+    captionProps,
+    lockAspectRatio
   }) => {
-    var _a, _b;
+    var _a;
     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,
+        lockAspectRatio: lockAspectRatio ?? ((_a = element.props) == null ? void 0 : _a.lockAspectRatio)
+      });
     }
-    elementMap.current[element.id] = element;
+    elementMap.current[element.id] = { ...element, zIndex: element.zIndex ?? index };
     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;
+    }
+  };
+  const applyZOrder = (elementId, direction) => {
+    if (!twickCanvas) return false;
+    const newZIndex = changeZOrder(twickCanvas, elementId, direction);
+    if (newZIndex == null) return false;
+    const element = elementMap.current[elementId];
+    if (element) elementMap.current[elementId] = { ...element, zIndex: newZIndex };
+    onCanvasOperation == null ? void 0 : onCanvasOperation(CANVAS_OPERATIONS.Z_ORDER_CHANGED, { elementId, direction });
+    return true;
+  };
+  const bringToFront = (elementId) => applyZOrder(elementId, "front");
+  const sendToBack = (elementId) => applyZOrder(elementId, "back");
+  const bringForward = (elementId) => applyZOrder(elementId, "forward");
+  const sendBackward = (elementId) => applyZOrder(elementId, "backward");
   return {
     twickCanvas,
     buildCanvas,
     onVideoSizeChange,
+    addWatermarkToCanvas,
     addElementToCanvas,
-    setCanvasElements
+    setCanvasElements,
+    bringToFront,
+    sendToBack,
+    bringForward,
+    sendBackward
   };
 };
 export {
   CANVAS_OPERATIONS,
+  ELEMENT_TYPES,
+  ElementController,
   addBackgroundColor,
   addCaptionElement,
   addImageElement,
@@ -1388,6 +1946,7 @@ export {
   convertToVideoPosition,
   createCanvas,
   disabledControl,
+  elementController,
   getCurrentFrameEffect,
   reorderElementsByZIndex,
   rotateControl,