@twick/canvas 0.15.20 → 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

@@ -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,7 +825,7 @@ 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;
+  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(
@@ -844,19 +850,19 @@ const addCaptionElement = ({
     ),
     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 : ((_t = element.props) == null ? void 0 : _t.fontWeight) ?? ((_u = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _u.weight)) ?? DEFAULT_CAPTION_PROPS.fontWeight,
-    stroke: (applyToAll ? captionProps == null ? void 0 : captionProps.stroke : ((_v = element.props) == null ? void 0 : _v.stroke) ?? (captionProps == null ? void 0 : captionProps.stroke)) ?? DEFAULT_CAPTION_PROPS.stroke,
-    opacity: (applyToAll ? captionProps == null ? void 0 : captionProps.opacity : ((_w = element.props) == null ? void 0 : _w.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
+    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: ((_x = element.props) == null ? void 0 : _x.textAlign) ?? "center",
+    textAlign: ((_y = element.props) == null ? void 0 : _y.textAlign) ?? "center",
     shadow: new fabric.Shadow({
-      offsetX: (applyToAll ? (_y = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _y[0] : ((_A = (_z = element.props) == null ? void 0 : _z.shadowOffset) == null ? void 0 : _A[0]) ?? ((_B = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _B[0])) ?? ((_C = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _C[0]),
-      offsetY: (applyToAll ? (_D = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _D[1] : ((_F = (_E = element.props) == null ? void 0 : _E.shadowOffset) == null ? void 0 : _F[1]) ?? ((_G = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _G[1])) ?? ((_H = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _H[1]),
-      blur: (applyToAll ? captionProps == null ? void 0 : captionProps.shadowBlur : ((_I = element.props) == null ? void 0 : _I.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur)) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
-      color: (applyToAll ? captionProps == null ? void 0 : captionProps.shadowColor : ((_J = element.props) == null ? void 0 : _J.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: (applyToAll ? captionProps == null ? void 0 : captionProps.lineWidth : ((_K = element.props) == null ? void 0 : _K.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);
@@ -1567,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());
@@ -1590,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,
@@ -1983,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;