@twick/canvas 0.15.27 → 0.15.28

package/dist/index.mjs

@@ -1,7 +1,7 @@
 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, Triangle, ActiveSelection } from "fabric";
+import { Canvas, Control, controlsUtils, filters, setFilterBackend, Canvas2dFilterBackend, FabricImage, Rect, Textbox, Shadow, Group, Circle, Triangle, ActiveSelection } from "fabric";
 import { useState, useRef, useCallback } from "react";
 const DEFAULT_TEXT_PROPS = {
   /** Font family for text elements */
@@ -70,6 +70,8 @@ const ELEMENT_TYPES = {
   CIRCLE: "circle",
   /** Icon element type */
   ICON: "icon",
+  /** Emoji sticker element type */
+  EMOJI: "emoji",
   /** Arrow annotation element type */
   ARROW: "arrow",
   /** Line annotation / shape element type */
@@ -320,6 +322,24 @@ const rotateControl = new Control({
   /** Whether to show connection line */
   withConnection: true
 });
+const COLOR_FILTERS = {
+  SATURATED: "saturated",
+  BRIGHT: "bright",
+  VIBRANT: "vibrant",
+  RETRO: "retro",
+  BLACK_WHITE: "blackWhite",
+  SEPIA: "sepia",
+  COOL: "cool",
+  WARM: "warm",
+  CINEMATIC: "cinematic",
+  SOFT_GLOW: "softGlow",
+  MOODY: "moody",
+  DREAMY: "dreamy",
+  INVERTED: "inverted",
+  VINTAGE: "vintage",
+  DRAMATIC: "dramatic",
+  FADED: "faded"
+};
 class LRUCache {
   constructor(maxSize = 100) {
     if (maxSize <= 0) {
@@ -703,6 +723,275 @@ const getObjectFitSize = (objectFit, elementSize, containerSize) => {
       };
   }
 };
+const {
+  Blur,
+  Brightness,
+  ColorMatrix,
+  Contrast,
+  Grayscale,
+  HueRotation,
+  Invert,
+  Saturation,
+  Sepia
+} = filters;
+let canvas2dFilterBackendInstalled = false;
+function ensureCanvas2dImageFilterBackend() {
+  if (canvas2dFilterBackendInstalled) return;
+  canvas2dFilterBackendInstalled = true;
+  setFilterBackend(new Canvas2dFilterBackend());
+}
+function getSourceBitmapSize(img) {
+  const el = img.getElement();
+  if (!el) return null;
+  const w = "naturalWidth" in el && el.naturalWidth > 0 ? el.naturalWidth : el.width;
+  const h = "naturalHeight" in el && el.naturalHeight > 0 ? el.naturalHeight : el.height;
+  if (!w || !h) return null;
+  return { w, h };
+}
+function applyFiltersSafe(img) {
+  ensureCanvas2dImageFilterBackend();
+  img.applyFilters();
+}
+const bright = (m) => Math.min(1, Math.max(-1, (m - 1) * 0.48));
+const contr = (m) => Math.min(1, Math.max(-1, (m - 1) * 0.55));
+const sat = (m) => Math.min(1, Math.max(-1, (m - 1) * 0.72));
+const IDENTITY = [
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0
+];
+const SEPIA_MATRIX = [
+  0.393,
+  0.769,
+  0.189,
+  0,
+  0,
+  0.349,
+  0.686,
+  0.168,
+  0,
+  0,
+  0.272,
+  0.534,
+  0.131,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0
+];
+function sepiaMix(strength) {
+  const t = Math.min(1, Math.max(0, strength));
+  const m = IDENTITY.map((v, i) => v + (SEPIA_MATRIX[i] - v) * t);
+  return new ColorMatrix({ matrix: m, colorsOnly: true });
+}
+const twickBlurToFabric = (v) => Math.min(0.22, Math.max(0, v * 0.045));
+function buildFilters(filterType) {
+  switch (filterType) {
+    case COLOR_FILTERS.SATURATED:
+      return {
+        filters: [
+          new Saturation({ saturation: sat(1.4) }),
+          new Contrast({ contrast: contr(1.1) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.BRIGHT:
+      return {
+        filters: [
+          new Brightness({ brightness: bright(1.3) }),
+          new Contrast({ contrast: contr(1.05) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.VIBRANT:
+      return {
+        filters: [
+          new Saturation({ saturation: sat(1.6) }),
+          new Brightness({ brightness: bright(1.15) }),
+          new Contrast({ contrast: contr(1.1) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.RETRO:
+      return {
+        filters: [
+          sepiaMix(0.8),
+          new Contrast({ contrast: contr(1.3) }),
+          new Brightness({ brightness: bright(0.85) }),
+          new Saturation({ saturation: sat(0.8) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.BLACK_WHITE:
+      return {
+        filters: [
+          new Grayscale(),
+          new Contrast({ contrast: contr(1.25) }),
+          new Brightness({ brightness: bright(1.05) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.SEPIA:
+      return {
+        filters: [
+          new Sepia(),
+          new Contrast({ contrast: contr(1.08) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.COOL:
+      return {
+        filters: [
+          new HueRotation({ rotation: 15 / 180 }),
+          new Brightness({ brightness: bright(1.1) }),
+          new Saturation({ saturation: sat(1.3) }),
+          new Contrast({ contrast: contr(1.05) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.WARM:
+      return {
+        filters: [
+          new HueRotation({ rotation: -15 / 180 }),
+          new Brightness({ brightness: bright(1.15) }),
+          new Saturation({ saturation: sat(1.3) }),
+          new Contrast({ contrast: contr(1.05) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.CINEMATIC:
+      return {
+        filters: [
+          new Contrast({ contrast: contr(1.4) }),
+          new Brightness({ brightness: bright(0.95) }),
+          new Saturation({ saturation: sat(0.85) }),
+          sepiaMix(0.2)
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.SOFT_GLOW:
+      return {
+        filters: [
+          new Brightness({ brightness: bright(1.2) }),
+          new Contrast({ contrast: contr(0.95) }),
+          new Blur({ blur: twickBlurToFabric(1.2) }),
+          new Saturation({ saturation: sat(1.1) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.MOODY:
+      return {
+        filters: [
+          new Brightness({ brightness: bright(1.05) }),
+          new Contrast({ contrast: contr(1.4) }),
+          new Saturation({ saturation: sat(0.65) }),
+          sepiaMix(0.2)
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.DREAMY:
+      return {
+        filters: [
+          new Brightness({ brightness: bright(1.3) }),
+          new Blur({ blur: twickBlurToFabric(2) }),
+          new Saturation({ saturation: sat(1.4) }),
+          new Contrast({ contrast: contr(0.95) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.INVERTED:
+      return {
+        filters: [
+          new Invert({ invert: true, alpha: false }),
+          new HueRotation({ rotation: 1 })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.VINTAGE:
+      return {
+        filters: [
+          sepiaMix(0.4),
+          new Saturation({ saturation: sat(1.4) }),
+          new Contrast({ contrast: contr(1.2) }),
+          new Brightness({ brightness: bright(1.1) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.DRAMATIC:
+      return {
+        filters: [
+          new Contrast({ contrast: contr(1.5) }),
+          new Brightness({ brightness: bright(0.9) }),
+          new Saturation({ saturation: sat(1.2) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.FADED:
+      return {
+        filters: [
+          new Brightness({ brightness: bright(1.2) }),
+          new Saturation({ saturation: sat(0.8) }),
+          new Contrast({ contrast: contr(0.9) })
+        ],
+        opacityFactor: 0.9
+      };
+    default:
+      return { filters: [], opacityFactor: 1 };
+  }
+}
+function applyFabricMediaColorFilters(img, mediaFilter, elementOpacity) {
+  const key = (mediaFilter == null ? void 0 : mediaFilter.trim()) || "none";
+  if (key === "none") {
+    img.filters = [];
+    img.set("opacity", elementOpacity);
+    applyFiltersSafe(img);
+    return;
+  }
+  const { filters: filterList, opacityFactor } = buildFilters(key);
+  if (filterList.length === 0) {
+    img.filters = [];
+    img.set("opacity", elementOpacity);
+    applyFiltersSafe(img);
+    return;
+  }
+  if (!getSourceBitmapSize(img)) {
+    img.filters = [];
+    img.set("opacity", elementOpacity);
+    return;
+  }
+  img.filters = filterList;
+  img.set("opacity", elementOpacity * opacityFactor);
+  try {
+    applyFiltersSafe(img);
+  } catch {
+    img.filters = [];
+    img.set("opacity", elementOpacity);
+    try {
+      applyFiltersSafe(img);
+    } catch {
+    }
+  }
+}
 const MARGIN = 10;
 const addTextElement = ({
   element,
@@ -793,7 +1082,7 @@ const setImageProps = ({
   canvasMetadata,
   lockAspectRatio = true
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const width = (((_a = element.props) == null ? void 0 : _a.width) || 0) * canvasMetadata.scaleX || canvasMetadata.width;
   const height = (((_b = element.props) == null ? void 0 : _b.height) || 0) * canvasMetadata.scaleY || canvasMetadata.height;
   const { x, y } = convertToCanvasPosition(
@@ -807,11 +1096,15 @@ const setImageProps = ({
   img.set("height", height);
   img.set("left", x);
   img.set("top", y);
-  img.set("opacity", ((_e = element.props) == null ? void 0 : _e.opacity) ?? 1);
   img.set("selectable", true);
   img.set("hasControls", true);
   img.set("touchAction", "all");
   img.set("lockUniScaling", lockAspectRatio);
+  applyFabricMediaColorFilters(
+    img,
+    (_e = element.props) == null ? void 0 : _e.mediaFilter,
+    ((_f = element.props) == null ? void 0 : _f.opacity) ?? 1
+  );
 };
 const addCaptionElement = ({
   element,
@@ -821,48 +1114,52 @@ const addCaptionElement = ({
   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, _K, _L;
-  const applyToAll = (captionProps == null ? void 0 : captionProps.applyToAll) ?? false;
-  const captionTextColor = ((_a = captionProps == null ? void 0 : captionProps.colors) == null ? void 0 : _a.text) ?? ((_b = captionProps == null ? void 0 : captionProps.color) == null ? void 0 : _b.text);
+  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;
+  const useTrackDefaults = ((_a = element.props) == null ? void 0 : _a.useTrackDefaults) ?? true;
+  const trackColors = captionProps == null ? void 0 : captionProps.colors;
+  const elementColors = (_b = element.props) == null ? void 0 : _b.colors;
+  const resolvedColors = useTrackDefaults ? trackColors : { ...trackColors ?? {}, ...elementColors ?? {} };
+  const captionTextColor = (resolvedColors == null ? void 0 : resolvedColors.text) ?? ((_c = captionProps == null ? void 0 : captionProps.color) == null ? void 0 : _c.text);
   const { x, y } = convertToCanvasPosition(
-    (applyToAll ? captionProps == null ? void 0 : captionProps.x : ((_c = element.props) == null ? void 0 : _c.x) ?? (captionProps == null ? void 0 : captionProps.x)) ?? 0,
-    (applyToAll ? captionProps == null ? void 0 : captionProps.y : ((_d = element.props) == null ? void 0 : _d.y) ?? (captionProps == null ? void 0 : captionProps.y)) ?? 0,
+    (useTrackDefaults ? captionProps == null ? void 0 : captionProps.x : (_d = element.props) == null ? void 0 : _d.x) ?? (captionProps == null ? void 0 : captionProps.x) ?? 0,
+    (useTrackDefaults ? captionProps == null ? void 0 : captionProps.y : (_e = element.props) == null ? void 0 : _e.y) ?? (captionProps == null ? void 0 : captionProps.y) ?? 0,
     canvasMetadata
   );
-  let width = ((_e = element.props) == null ? void 0 : _e.width) ? element.props.width * canvasMetadata.scaleX : canvasMetadata.width - 2 * MARGIN;
-  if ((_f = element.props) == null ? void 0 : _f.maxWidth) {
+  let width = ((_f = element.props) == null ? void 0 : _f.width) ? element.props.width * canvasMetadata.scaleX : canvasMetadata.width - 2 * MARGIN;
+  if ((_g = element.props) == null ? void 0 : _g.maxWidth) {
     width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
   }
-  const elementColors = (_g = element.props) == null ? void 0 : _g.colors;
-  const resolvedFill = (applyToAll ? captionTextColor : ((_h = element.props) == null ? void 0 : _h.fill) ?? (elementColors == null ? void 0 : elementColors.text) ?? captionTextColor) ?? DEFAULT_CAPTION_PROPS.fill;
-  const trackColors = captionProps == null ? void 0 : captionProps.colors;
+  const resolvedFill = (useTrackDefaults ? void 0 : (_h = element.props) == null ? void 0 : _h.fill) ?? captionTextColor ?? DEFAULT_CAPTION_PROPS.fill;
   const trackStroke = trackColors == null ? void 0 : trackColors.outlineColor;
   const elementStroke = (elementColors == null ? void 0 : elementColors.outlineColor) ?? ((_i = element.props) == null ? void 0 : _i.stroke);
-  const resolvedStroke = (applyToAll ? trackStroke ?? elementStroke : elementStroke ?? trackStroke) ?? void 0;
-  const caption = new Textbox(((_j = element.props) == null ? void 0 : _j.text) || element.t || "", {
+  const resolvedStroke = (useTrackDefaults ? trackStroke : elementStroke ?? trackStroke) ?? void 0;
+  const trackFont = (captionProps == null ? void 0 : captionProps.font) ?? {};
+  const elementFont = ((_j = element.props) == null ? void 0 : _j.font) ?? {};
+  const resolvedFont = useTrackDefaults ? trackFont : { ...trackFont, ...elementFont };
+  const caption = new Textbox(((_k = element.props) == null ? void 0 : _k.text) || element.t || "", {
     left: x,
     top: y,
     originX: "center",
     originY: "center",
-    angle: ((_k = element.props) == null ? void 0 : _k.rotation) || 0,
+    angle: ((_l = element.props) == null ? void 0 : _l.rotation) || 0,
     fontSize: Math.round(
-      ((applyToAll ? (_l = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _l.size : ((_n = (_m = element.props) == null ? void 0 : _m.font) == null ? void 0 : _n.size) ?? ((_o = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _o.size)) ?? DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
+      ((resolvedFont == null ? void 0 : resolvedFont.size) ?? DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
     ),
-    fontFamily: (applyToAll ? (_p = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _p.family : ((_r = (_q = element.props) == null ? void 0 : _q.font) == null ? void 0 : _r.family) ?? ((_s = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _s.family)) ?? DEFAULT_CAPTION_PROPS.family,
+    fontFamily: (resolvedFont == null ? void 0 : resolvedFont.family) ?? DEFAULT_CAPTION_PROPS.family,
     fill: resolvedFill,
-    fontWeight: (applyToAll ? (_t = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _t.weight : ((_v = (_u = element.props) == null ? void 0 : _u.font) == null ? void 0 : _v.weight) ?? ((_w = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _w.weight)) ?? DEFAULT_CAPTION_PROPS.fontWeight,
+    fontWeight: (resolvedFont == null ? void 0 : resolvedFont.weight) ?? DEFAULT_CAPTION_PROPS.fontWeight,
     ...resolvedStroke ? { stroke: resolvedStroke } : {},
-    opacity: (applyToAll ? captionProps == null ? void 0 : captionProps.opacity : ((_x = element.props) == null ? void 0 : _x.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
+    opacity: (useTrackDefaults ? void 0 : (_m = element.props) == null ? void 0 : _m.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity) ?? 1,
     width,
     splitByGrapheme: false,
-    textAlign: ((_y = element.props) == null ? void 0 : _y.textAlign) ?? "center",
+    textAlign: ((_n = element.props) == null ? void 0 : _n.textAlign) ?? "center",
     shadow: new Shadow({
-      offsetX: (applyToAll ? (_z = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _z[0] : ((_B = (_A = element.props) == null ? void 0 : _A.shadowOffset) == null ? void 0 : _B[0]) ?? ((_C = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _C[0])) ?? ((_D = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _D[0]),
-      offsetY: (applyToAll ? (_E = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _E[1] : ((_G = (_F = element.props) == null ? void 0 : _F.shadowOffset) == null ? void 0 : _G[1]) ?? ((_H = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _H[1])) ?? ((_I = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _I[1]),
-      blur: (applyToAll ? captionProps == null ? void 0 : captionProps.shadowBlur : ((_J = element.props) == null ? void 0 : _J.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur)) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
-      color: (applyToAll ? captionProps == null ? void 0 : captionProps.shadowColor : ((_K = element.props) == null ? void 0 : _K.shadowColor) ?? (captionProps == null ? void 0 : captionProps.shadowColor)) ?? DEFAULT_CAPTION_PROPS.shadowColor
+      offsetX: (useTrackDefaults ? void 0 : (_p = (_o = element.props) == null ? void 0 : _o.shadowOffset) == null ? void 0 : _p[0]) ?? ((_q = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _q[0]) ?? ((_r = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _r[0]),
+      offsetY: (useTrackDefaults ? void 0 : (_t = (_s = element.props) == null ? void 0 : _s.shadowOffset) == null ? void 0 : _t[1]) ?? ((_u = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _u[1]) ?? ((_v = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _v[1]),
+      blur: (useTrackDefaults ? void 0 : (_w = element.props) == null ? void 0 : _w.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
+      color: (useTrackDefaults ? void 0 : (_x = element.props) == null ? void 0 : _x.shadowColor) ?? (captionProps == null ? void 0 : captionProps.shadowColor) ?? DEFAULT_CAPTION_PROPS.shadowColor
     }),
-    strokeWidth: ((applyToAll ? captionProps == null ? void 0 : captionProps.lineWidth : ((_L = element.props) == null ? void 0 : _L.lineWidth) ?? (captionProps == null ? void 0 : captionProps.lineWidth)) ?? DEFAULT_CAPTION_PROPS.lineWidth) * 0.025
+    strokeWidth: ((useTrackDefaults ? void 0 : (_y = element.props) == null ? void 0 : _y.lineWidth) ?? (captionProps == null ? void 0 : captionProps.lineWidth) ?? DEFAULT_CAPTION_PROPS.lineWidth) * 0.025
   });
   caption.set("id", element.id);
   caption.set("zIndex", index);
@@ -917,8 +1214,13 @@ const addImageElement = async ({
   currentFrameEffect,
   lockAspectRatio = true
 }) => {
+  var _a, _b;
   try {
-    const img = await FabricImage.fromURL(imageUrl || element.props.src || "");
+    const rawSrc = imageUrl || element.props.src || "";
+    const mediaFilter = (_b = (_a = element.props) == null ? void 0 : _a.mediaFilter) == null ? void 0 : _b.trim();
+    const useFilter = !!mediaFilter && mediaFilter !== "none";
+    const fromUrlOpts = useFilter && /^https?:\/\//i.test(rawSrc) ? { crossOrigin: "anonymous" } : {};
+    const img = await FabricImage.fromURL(rawSrc, fromUrlOpts);
     img.set({
       originX: "center",
       originY: "center",
@@ -955,7 +1257,7 @@ const addMediaGroup = ({
   currentFrameEffect,
   lockAspectRatio = true
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
   let frameSize;
   let angle;
   let framePosition;
@@ -1010,9 +1312,13 @@ const addMediaGroup = ({
     originX: "center",
     originY: "center",
     scaleX: newSize.width / img.width,
-    scaleY: newSize.height / img.height,
-    opacity: ((_n = element.props) == null ? void 0 : _n.opacity) ?? 1
+    scaleY: newSize.height / img.height
   });
+  applyFabricMediaColorFilters(
+    img,
+    (_n = element.props) == null ? void 0 : _n.mediaFilter,
+    ((_o = element.props) == null ? void 0 : _o.opacity) ?? 1
+  );
   const { x, y } = convertToCanvasPosition(
     (framePosition == null ? void 0 : framePosition.x) || 0,
     (framePosition == null ? void 0 : framePosition.y) || 0,
@@ -1498,7 +1804,8 @@ const CaptionElement = {
       context.canvasMetadata,
       context.videoSize
     );
-    if ((_a = context.captionPropsRef.current) == null ? void 0 : _a.applyToAll) {
+    const useTrackDefaults = ((_a = element.props) == null ? void 0 : _a.useTrackDefaults) ?? true;
+    if (useTrackDefaults) {
       return {
         element,
         operation: CANVAS_OPERATIONS.CAPTION_PROPS_UPDATED,
@@ -1715,6 +2022,72 @@ const EffectElement = {
     return;
   }
 };
+const EmojiElement = {
+  name: ELEMENT_TYPES.EMOJI,
+  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) ?? true
+    });
+  },
+  updateFromFabricObject(object, element, context) {
+    const canvasCenter = getObjectCanvasCenter(object);
+    const { x, y } = convertToVideoPosition(
+      canvasCenter.x,
+      canvasCenter.y,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    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];
+      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
+        }
+      }
+    };
+  }
+};
 class ElementController {
   constructor() {
     __publicField(this, "elements", /* @__PURE__ */ new Map());
@@ -1736,6 +2109,7 @@ function registerElements() {
   elementController.register(RectElement);
   elementController.register(CircleElement);
   elementController.register(TextElement);
+  elementController.register(EmojiElement);
   elementController.register(CaptionElement);
   elementController.register(WatermarkElement);
   elementController.register(ArrowElement);