@twick/canvas 0.15.19 → 0.15.21

package/dist/index.d.ts

@@ -25,7 +25,9 @@ import { ELEMENT_TYPES } from './helpers/constants';
 import { ElementController } from './controllers/element.controller';
 import { default as elementController } from './controllers/element.controller';
 import { FrameEffect } from './types';
+import { getCanvasHandler } from './controllers/element.controller';
 import { getCurrentFrameEffect } from './helpers/canvas.util';
+import { registerCanvasHandler } from './controllers/element.controller';
 import { reorderElementsByZIndex } from './helpers/canvas.util';
 import { ResizeCanvasOptions } from './types';
 import { rotateControl } from './components/element-controls';
@@ -87,8 +89,12 @@ export { elementController }
 
 export { FrameEffect }
 
+export { getCanvasHandler }
+
 export { getCurrentFrameEffect }
 
+export { registerCanvasHandler }
+
 export { reorderElementsByZIndex }
 
 export { ResizeCanvasOptions }

package/dist/index.js

@@ -18,8 +18,8 @@ const DEFAULT_TEXT_PROPS = {
   lineWidth: 0
 };
 const DEFAULT_CAPTION_PROPS = {
-  /** Font family for caption elements */
-  family: "Poppins",
+  /** Font family for caption elements (matches highlight_bg default) */
+  family: "Bangers",
   /** Font size in pixels */
   size: 48,
   /** Text fill color */
@@ -74,8 +74,14 @@ const ELEMENT_TYPES = {
   CIRCLE: "circle",
   /** Icon element type */
   ICON: "icon",
+  /** Arrow annotation element type */
+  ARROW: "arrow",
+  /** Line annotation / shape element type */
+  LINE: "line",
   /** Background color element type */
-  BACKGROUND_COLOR: "backgroundColor"
+  BACKGROUND_COLOR: "backgroundColor",
+  /** Global / adjustment-layer style effect element */
+  EFFECT: "effect"
 };
 const isBrowser = typeof window !== "undefined";
 const isCanvasSupported = isBrowser && !!window.HTMLCanvasElement;
@@ -819,40 +825,44 @@ 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;
+  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);
   const { x, y } = convertToCanvasPosition(
-    ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.x : ((_a = element.props) == null ? void 0 : _a.x) ?? (captionProps == null ? void 0 : captionProps.x)) ?? 0,
-    ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.y : ((_b = element.props) == null ? void 0 : _b.y) ?? (captionProps == null ? void 0 : captionProps.y)) ?? 0,
+    (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,
     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) {
+  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) {
     width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
   }
-  const caption = new fabric.Textbox(((_e = element.props) == null ? void 0 : _e.text) || element.t || "", {
+  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 caption = new fabric.Textbox(((_i = element.props) == null ? void 0 : _i.text) || element.t || "", {
     left: x,
     top: y,
     originX: "center",
     originY: "center",
-    angle: ((_f = element.props) == null ? void 0 : _f.rotation) || 0,
+    angle: ((_j = element.props) == null ? void 0 : _j.rotation) || 0,
     fontSize: Math.round(
-      (((captionProps == null ? void 0 : captionProps.applyToAll) ? (_g = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _g.size : ((_i = (_h = element.props) == null ? void 0 : _h.font) == null ? void 0 : _i.size) ?? ((_j = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _j.size)) ?? DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
+      ((applyToAll ? (_k = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _k.size : ((_m = (_l = element.props) == null ? void 0 : _l.font) == null ? void 0 : _m.size) ?? ((_n = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _n.size)) ?? DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
     ),
-    fontFamily: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_k = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _k.family : ((_m = (_l = element.props) == null ? void 0 : _l.font) == null ? void 0 : _m.family) ?? ((_n = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _n.family)) ?? DEFAULT_CAPTION_PROPS.family,
-    fill: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_o = captionProps.color) == null ? void 0 : _o.text : ((_p = element.props) == null ? void 0 : _p.fill) ?? ((_q = captionProps.color) == null ? void 0 : _q.text)) ?? DEFAULT_CAPTION_PROPS.fill,
-    fontWeight: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_r = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _r.weight : ((_s = element.props) == null ? void 0 : _s.fontWeight) ?? ((_t = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _t.weight)) ?? DEFAULT_CAPTION_PROPS.fontWeight,
-    stroke: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.stroke : ((_u = element.props) == null ? void 0 : _u.stroke) ?? (captionProps == null ? void 0 : captionProps.stroke)) ?? DEFAULT_CAPTION_PROPS.stroke,
-    opacity: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.opacity : ((_v = element.props) == null ? void 0 : _v.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
+    fontFamily: (applyToAll ? (_o = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _o.family : ((_q = (_p = element.props) == null ? void 0 : _p.font) == null ? void 0 : _q.family) ?? ((_r = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _r.family)) ?? DEFAULT_CAPTION_PROPS.family,
+    fill: resolvedFill,
+    fontWeight: (applyToAll ? (_s = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _s.weight : ((_u = (_t = element.props) == null ? void 0 : _t.font) == null ? void 0 : _u.weight) ?? ((_v = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _v.weight)) ?? DEFAULT_CAPTION_PROPS.fontWeight,
+    stroke: (applyToAll ? captionProps == null ? void 0 : captionProps.stroke : ((_w = element.props) == null ? void 0 : _w.stroke) ?? (captionProps == null ? void 0 : captionProps.stroke)) ?? DEFAULT_CAPTION_PROPS.stroke,
+    opacity: (applyToAll ? captionProps == null ? void 0 : captionProps.opacity : ((_x = element.props) == null ? void 0 : _x.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
     width,
     splitByGrapheme: false,
-    textAlign: ((_w = element.props) == null ? void 0 : _w.textAlign) ?? "center",
+    textAlign: ((_y = element.props) == null ? void 0 : _y.textAlign) ?? "center",
     shadow: new fabric.Shadow({
-      offsetX: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_x = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _x[0] : ((_z = (_y = element.props) == null ? void 0 : _y.shadowOffset) == null ? void 0 : _z[0]) ?? ((_A = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _A[0])) ?? ((_B = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _B[0]),
-      offsetY: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_C = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _C[1] : ((_E = (_D = element.props) == null ? void 0 : _D.shadowOffset) == null ? void 0 : _E[1]) ?? ((_F = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _F[1])) ?? ((_G = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _G[1]),
-      blur: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.shadowBlur : ((_H = element.props) == null ? void 0 : _H.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur)) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
-      color: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.shadowColor : ((_I = element.props) == null ? void 0 : _I.shadowColor) ?? (captionProps == null ? void 0 : captionProps.shadowColor)) ?? DEFAULT_CAPTION_PROPS.shadowColor
+      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
     }),
-    strokeWidth: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.lineWidth : ((_J = element.props) == null ? void 0 : _J.lineWidth) ?? (captionProps == null ? void 0 : captionProps.lineWidth)) ?? DEFAULT_CAPTION_PROPS.lineWidth
+    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
   });
   caption.set("id", element.id);
   caption.set("zIndex", index);
@@ -1563,6 +1573,148 @@ const WatermarkElement = {
     };
   }
 };
+const ArrowElement = {
+  name: ELEMENT_TYPES.ARROW,
+  async add(params) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    const { element, index, canvas, canvasMetadata, lockAspectRatio } = params;
+    const baseWidth = ((_a = element.props) == null ? void 0 : _a.width) ?? 220;
+    const baseHeight = ((_b = element.props) == null ? void 0 : _b.height) ?? 14;
+    const { x, y } = convertToCanvasPosition(
+      ((_c = element.props) == null ? void 0 : _c.x) ?? 0,
+      ((_d = element.props) == null ? void 0 : _d.y) ?? 0,
+      canvasMetadata
+    );
+    const fill = ((_e = element.props) == null ? void 0 : _e.fill) || "#f59e0b";
+    const radius = (((_f = element.props) == null ? void 0 : _f.radius) ?? 4) * canvasMetadata.scaleX;
+    const barWidth = baseWidth * canvasMetadata.scaleX;
+    const barHeight = baseHeight * canvasMetadata.scaleY;
+    const headSize = barHeight * 1.8;
+    const barLength = barWidth - headSize * 0.5;
+    const bar = new fabric.Rect({
+      left: -barWidth / 2,
+      top: -barHeight / 2,
+      originX: "left",
+      originY: "top",
+      width: barLength,
+      height: barHeight,
+      rx: radius,
+      ry: radius,
+      fill
+    });
+    const arrowHead = new fabric.Triangle({
+      left: barWidth / 2 - headSize * 0.25,
+      top: 0,
+      originX: "center",
+      originY: "center",
+      width: headSize,
+      height: headSize,
+      fill,
+      angle: 90
+    });
+    const opacity = ((_g = element.props) == null ? void 0 : _g.opacity) ?? 1;
+    const group = new fabric.Group([bar, arrowHead], {
+      left: x,
+      top: y,
+      originX: "center",
+      originY: "center",
+      angle: ((_h = element.props) == null ? void 0 : _h.rotation) || 0,
+      opacity,
+      selectable: true,
+      hasControls: true
+    });
+    group.set(
+      "lockUniScaling",
+      lockAspectRatio ?? ((_i = element.props) == null ? void 0 : _i.lockAspectRatio) ?? true
+    );
+    group.set("id", element.id);
+    group.set("zIndex", index);
+    canvas.add(group);
+  },
+  updateFromFabricObject(object, element, context) {
+    var _a, _b, _c;
+    const canvasCenter = getObjectCanvasCenter(object);
+    const { x, y } = convertToVideoPosition(
+      canvasCenter.x,
+      canvasCenter.y,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    const baseWidth = ((_a = element.props) == null ? void 0 : _a.width) ?? 220;
+    const baseHeight = ((_b = element.props) == null ? void 0 : _b.height) ?? 14;
+    const opacity = object.opacity ?? ((_c = element.props) == null ? void 0 : _c.opacity) ?? 1;
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          rotation: getObjectCanvasAngle(object),
+          width: baseWidth * object.scaleX,
+          height: baseHeight * object.scaleY,
+          x,
+          y,
+          opacity
+        }
+      }
+    };
+  }
+};
+const LineElement = {
+  name: ELEMENT_TYPES.LINE,
+  async add(params) {
+    var _a;
+    const { element, index, canvas, canvasMetadata, lockAspectRatio } = params;
+    const lineProps = element.props ?? {};
+    const lineElement = {
+      ...element,
+      props: {
+        ...lineProps,
+        // Use fill as stroke color when a stroke is desired; otherwise rely
+        // on fill-only rendering. Avoid the generic "#000000" fallback.
+        stroke: lineProps.stroke ?? lineProps.fill,
+        // If a specific lineWidth is provided, keep it; otherwise default to 0
+        // so the stroke does not override the visual fill color.
+        lineWidth: lineProps.lineWidth ?? 0
+      }
+    };
+    await addRectElement({
+      element: lineElement,
+      index,
+      canvas,
+      canvasMetadata,
+      lockAspectRatio: lockAspectRatio ?? ((_a = lineElement.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 EffectElement = {
+  name: ELEMENT_TYPES.EFFECT,
+  async add() {
+    return;
+  }
+};
 class ElementController {
   constructor() {
     __publicField(this, "elements", /* @__PURE__ */ new Map());
@@ -1586,8 +1738,17 @@ function registerElements() {
   elementController.register(TextElement);
   elementController.register(CaptionElement);
   elementController.register(WatermarkElement);
+  elementController.register(ArrowElement);
+  elementController.register(LineElement);
+  elementController.register(EffectElement);
 }
 registerElements();
+function registerCanvasHandler(handler) {
+  elementController.register(handler);
+}
+function getCanvasHandler(name) {
+  return elementController.get(name);
+}
 const useTwickCanvas = ({
   onCanvasReady,
   onCanvasOperation,
@@ -1943,10 +2104,18 @@ const useTwickCanvas = ({
   const sendToBack = (elementId) => applyZOrder(elementId, "back");
   const bringForward = (elementId) => applyZOrder(elementId, "forward");
   const sendBackward = (elementId) => applyZOrder(elementId, "backward");
+  const setBackgroundColor = react.useCallback((color) => {
+    const canvas = twickCanvasRef.current;
+    if (canvas) {
+      canvas.backgroundColor = color;
+      canvas.requestRenderAll();
+    }
+  }, []);
   return {
     twickCanvas,
     buildCanvas,
     resizeCanvas,
+    setBackgroundColor,
     onVideoSizeChange,
     addWatermarkToCanvas,
     addElementToCanvas,
@@ -1971,7 +2140,9 @@ exports.convertToVideoPosition = convertToVideoPosition;
 exports.createCanvas = createCanvas;
 exports.disabledControl = disabledControl;
 exports.elementController = elementController;
+exports.getCanvasHandler = getCanvasHandler;
 exports.getCurrentFrameEffect = getCurrentFrameEffect;
+exports.registerCanvasHandler = registerCanvasHandler;
 exports.reorderElementsByZIndex = reorderElementsByZIndex;
 exports.rotateControl = rotateControl;
 exports.useTwickCanvas = useTwickCanvas;