@twick/canvas 0.14.7 → 0.14.8

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Canvas, Control, controlsUtils, FabricImage, Rect, FabricText, Shadow, Group } from "fabric";
+import { Canvas, Control, controlsUtils, FabricImage, Rect, FabricText, Shadow, Group, Circle } from "fabric";
 import { useState, useRef } from "react";
 const DEFAULT_TEXT_PROPS = {
   /** Font family for text elements */
@@ -44,7 +44,9 @@ const CANVAS_OPERATIONS = {
   /** Items have been grouped together */
   ITEM_GROUPED: "ITEM_GROUPED",
   /** Items have been ungrouped */
-  ITEM_UNGROUPED: "ITEM_UNGROUPED"
+  ITEM_UNGROUPED: "ITEM_UNGROUPED",
+  /** Caption properties have been updated */
+  CAPTION_PROPS_UPDATED: "CAPTION_PROPS_UPDATED"
 };
 const ELEMENT_TYPES = {
   /** Text element type */
@@ -56,7 +58,9 @@ const ELEMENT_TYPES = {
   /** Video element type */
   VIDEO: "video",
   /** Rectangle element type */
-  RECT: "rect"
+  RECT: "rect",
+  /** Circle element type */
+  CIRCLE: "circle"
 };
 const isBrowser = typeof window !== "undefined";
 const isCanvasSupported = isBrowser && !!window.HTMLCanvasElement;
@@ -416,33 +420,33 @@ const addCaptionElement = ({
   captionProps,
   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, _z, _A;
+  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;
   const { x, y } = convertToCanvasPosition(
-    ((_b = (_a = element.props) == null ? void 0 : _a.pos) == null ? void 0 : _b.x) || ((_c = captionProps == null ? void 0 : captionProps.pos) == null ? void 0 : _c.x) || 0,
-    ((_e = (_d = element.props) == null ? void 0 : _d.pos) == null ? void 0 : _e.y) || ((_f = captionProps == null ? void 0 : captionProps.pos) == null ? void 0 : _f.y) || 0,
+    ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.x : (_a = element.props) == null ? void 0 : _a.x) ?? 0,
+    ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.y : (_b = element.props) == null ? void 0 : _b.y) ?? 0,
     canvasMetadata
   );
-  const caption = new FabricText(((_g = element.props) == null ? void 0 : _g.text) || element.t || "", {
+  const caption = new FabricText(((_c = element.props) == null ? void 0 : _c.text) || element.t || "", {
     left: x,
     top: y,
     originX: "center",
     originY: "center",
-    angle: ((_h = element.props) == null ? void 0 : _h.rotation) || 0,
+    angle: ((_d = element.props) == null ? void 0 : _d.rotation) || 0,
     fontSize: Math.round(
-      (((_j = (_i = element.props) == null ? void 0 : _i.font) == null ? void 0 : _j.size) || ((_k = captionProps.font) == null ? void 0 : _k.size) || DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
+      (((captionProps == null ? void 0 : captionProps.applyToAll) ? (_e = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _e.size : ((_g = (_f = element.props) == null ? void 0 : _f.font) == null ? void 0 : _g.size) ?? ((_h = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _h.size)) ?? DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
     ),
-    fontFamily: ((_m = (_l = element.props) == null ? void 0 : _l.font) == null ? void 0 : _m.family) || ((_n = captionProps.font) == null ? void 0 : _n.family) || DEFAULT_CAPTION_PROPS.family,
-    fill: ((_o = element.props) == null ? void 0 : _o.fill) || ((_p = captionProps.color) == null ? void 0 : _p.text) || DEFAULT_CAPTION_PROPS.fill,
-    fontWeight: DEFAULT_CAPTION_PROPS.fontWeight,
-    stroke: ((_q = element.props) == null ? void 0 : _q.stroke) || DEFAULT_CAPTION_PROPS.stroke,
-    opacity: ((_r = element.props) == null ? void 0 : _r.opacity) ?? 1,
+    fontFamily: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_i = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _i.family : ((_k = (_j = element.props) == null ? void 0 : _j.font) == null ? void 0 : _k.family) ?? ((_l = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _l.family)) ?? DEFAULT_CAPTION_PROPS.family,
+    fill: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_m = captionProps.color) == null ? void 0 : _m.text : ((_n = element.props) == null ? void 0 : _n.fill) ?? ((_o = captionProps.color) == null ? void 0 : _o.text)) ?? DEFAULT_CAPTION_PROPS.fill,
+    fontWeight: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_p = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _p.weight : ((_q = element.props) == null ? void 0 : _q.fontWeight) ?? ((_r = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _r.weight)) ?? DEFAULT_CAPTION_PROPS.fontWeight,
+    stroke: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.stroke : ((_s = element.props) == null ? void 0 : _s.stroke) ?? (captionProps == null ? void 0 : captionProps.stroke)) ?? DEFAULT_CAPTION_PROPS.stroke,
+    opacity: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.opacity : ((_t = element.props) == null ? void 0 : _t.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
     shadow: new Shadow({
-      offsetX: ((_t = (_s = element.props) == null ? void 0 : _s.shadowOffset) == null ? void 0 : _t[0]) || ((_u = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _u[0]),
-      offsetY: ((_w = (_v = element.props) == null ? void 0 : _v.shadowOffset) == null ? void 0 : _w[1]) || ((_x = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _x[1]),
-      blur: ((_y = element.props) == null ? void 0 : _y.shadowBlur) || DEFAULT_CAPTION_PROPS.shadowBlur,
-      color: ((_z = element.props) == null ? void 0 : _z.shadowColor) || DEFAULT_CAPTION_PROPS.shadowColor
+      offsetX: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_u = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _u[0] : ((_w = (_v = element.props) == null ? void 0 : _v.shadowOffset) == null ? void 0 : _w[0]) ?? ((_x = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _x[0])) ?? ((_y = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _y[0]),
+      offsetY: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_z = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _z[1] : ((_B = (_A = element.props) == null ? void 0 : _A.shadowOffset) == null ? void 0 : _B[1]) ?? ((_C = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _C[1])) ?? ((_D = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _D[1]),
+      blur: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.shadowBlur : ((_E = element.props) == null ? void 0 : _E.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur)) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
+      color: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.shadowColor : ((_F = element.props) == null ? void 0 : _F.shadowColor) ?? (captionProps == null ? void 0 : captionProps.shadowColor)) ?? DEFAULT_CAPTION_PROPS.shadowColor
     }),
-    strokeWidth: ((_A = element.props) == null ? void 0 : _A.lineWidth) || DEFAULT_CAPTION_PROPS.lineWidth
+    strokeWidth: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.lineWidth : ((_G = element.props) == null ? void 0 : _G.lineWidth) ?? (captionProps == null ? void 0 : captionProps.lineWidth)) ?? DEFAULT_CAPTION_PROPS.lineWidth
   });
   caption.set("id", element.id);
   caption.set("zIndex", index);
@@ -669,6 +673,40 @@ const addRectElement = ({
   canvas.add(rect);
   return rect;
 };
+const addCircleElement = ({
+  element,
+  index,
+  canvas,
+  canvasMetadata
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const { x, y } = convertToCanvasPosition(
+    ((_a = element.props) == null ? void 0 : _a.x) || 0,
+    ((_b = element.props) == null ? void 0 : _b.y) || 0,
+    canvasMetadata
+  );
+  const circle = new Circle({
+    left: x,
+    // X-coordinate on the canvas
+    top: y,
+    // Y-coordinate on the canvas
+    radius: (((_c = element.props) == null ? void 0 : _c.radius) || 0) * canvasMetadata.scaleX,
+    fill: ((_d = element.props) == null ? void 0 : _d.fill) || "#000000",
+    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"
+  });
+  circle.controls.mt = disabledControl;
+  circle.controls.mb = disabledControl;
+  circle.controls.ml = disabledControl;
+  circle.controls.mr = disabledControl;
+  circle.controls.mtr = disabledControl;
+  circle.set("id", element.id);
+  circle.set("zIndex", index);
+  canvas.add(circle);
+  return circle;
+};
 const addBackgroundColor = ({
   element,
   index,
@@ -710,6 +748,7 @@ const useTwickCanvas = ({
   const twickCanvasRef = useRef(null);
   const videoSizeRef = useRef({ width: 1, height: 1 });
   const canvasResolutionRef = useRef({ width: 1, height: 1 });
+  const captionPropsRef = useRef(null);
   const canvasMetadataRef = useRef({
     width: 0,
     height: 0,
@@ -767,7 +806,7 @@ const useTwickCanvas = ({
     }
   };
   const handleMouseUp = (event) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (event.target) {
       const object = event.target;
       const elementId = object.get("id");
@@ -794,20 +833,29 @@ const useTwickCanvas = ({
             videoSizeRef.current
           );
           if (elementMap.current[elementId].type === "caption") {
-            elementMap.current[elementId] = {
-              ...elementMap.current[elementId],
-              props: {
-                ...elementMap.current[elementId].props,
-                pos: {
+            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
                 }
-              }
-            };
-            onCanvasOperation == null ? void 0 : onCanvasOperation(
-              CANVAS_OPERATIONS.ITEM_UPDATED,
-              elementMap.current[elementId]
-            );
+              });
+            } 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];
@@ -871,6 +919,22 @@ const useTwickCanvas = ({
                     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],
@@ -913,6 +977,7 @@ const useTwickCanvas = ({
           twickCanvas.renderAll();
         }
       }
+      captionPropsRef.current = captionProps;
       await Promise.all(
         elements.map(async (element, index) => {
           try {
@@ -951,7 +1016,10 @@ const useTwickCanvas = ({
     }
     switch (element.type) {
       case ELEMENT_TYPES.VIDEO:
-        const currentFrameEffect = getCurrentFrameEffect(element, seekTime || 0);
+        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({
@@ -995,6 +1063,14 @@ const useTwickCanvas = ({
           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,