@twick/canvas 0.14.2 → 0.14.4

package/dist/index.mjs

@@ -1,36 +1,61 @@
 import { Canvas, Control, controlsUtils, FabricImage, Rect, FabricText, Shadow, Group } from "fabric";
 import { useState, useRef } from "react";
 const DEFAULT_TEXT_PROPS = {
+  /** Font family for text elements */
   family: "Poppins",
+  /** Font size in pixels */
   size: 48,
+  /** Text fill color */
   fill: "#FFFFFF",
+  /** Text stroke color */
   stroke: "#000000",
+  /** Stroke line width */
   lineWidth: 0
 };
 const DEFAULT_CAPTION_PROPS = {
+  /** Font family for caption elements */
   family: "Poppins",
+  /** Font size in pixels */
   size: 48,
+  /** Text fill color */
   fill: "#FFFFFF",
+  /** Font weight */
   fontWeight: 600,
+  /** Text stroke color */
   stroke: "#000000",
+  /** Stroke line width */
   lineWidth: 0.2,
+  /** Shadow color */
   shadowColor: "#000000",
+  /** Shadow blur radius */
   shadowBlur: 2,
+  /** Shadow offset [x, y] */
   shadowOffset: [0, 0]
 };
 const CANVAS_OPERATIONS = {
+  /** An item has been selected on the canvas */
   ITEM_SELECTED: "ITEM_SELECTED",
+  /** An item has been updated/modified on the canvas */
   ITEM_UPDATED: "ITEM_UPDATED",
+  /** An item has been deleted from the canvas */
   ITEM_DELETED: "ITEM_DELETED",
+  /** A new item has been added to the canvas */
   ITEM_ADDED: "ITEM_ADDED",
+  /** Items have been grouped together */
   ITEM_GROUPED: "ITEM_GROUPED",
+  /** Items have been ungrouped */
   ITEM_UNGROUPED: "ITEM_UNGROUPED"
 };
 const ELEMENT_TYPES = {
+  /** Text element type */
   TEXT: "text",
+  /** Caption element type */
   CAPTION: "caption",
+  /** Image element type */
   IMAGE: "image",
+  /** Video element type */
   VIDEO: "video",
+  /** Rectangle element type */
   RECT: "rect"
 };
 const isBrowser = typeof window !== "undefined";
@@ -104,10 +129,19 @@ const reorderElementsByZIndex = (canvas) => {
   objects.forEach((obj) => canvas.add(obj));
   canvas.renderAll();
 };
+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;
+  return (_d = (_c = canvas.elements) == null ? void 0 : _c.lower) == null ? void 0 : _d.ctx;
+};
 const clearCanvas = (canvas) => {
-  if (!canvas) return;
-  canvas.clear();
-  canvas.renderAll();
+  try {
+    if (!canvas || !getCanvasContext(canvas)) return;
+    canvas.clear();
+    canvas.renderAll();
+  } catch (error) {
+    console.warn("Error clearing canvas:", error);
+  }
 };
 const convertToCanvasPosition = (x, y, canvasMetadata) => {
   return {
@@ -133,14 +167,21 @@ const getCurrentFrameEffect = (item, seekTime) => {
   return currentFrameEffect;
 };
 const disabledControl = new Control({
+  /** X position offset */
   x: 0,
+  /** Y position offset */
   y: -0.5,
+  /** Additional Y offset */
   offsetY: 0,
+  /** Cursor style when hovering */
   cursorStyle: "pointer",
+  /** Action handler that does nothing */
   actionHandler: () => {
     return true;
   },
+  /** Name of the action */
   actionName: "scale",
+  /** Render function for the control */
   render: function(ctx, left, top) {
     const size = 0;
     ctx.save();
@@ -151,12 +192,19 @@ const disabledControl = new Control({
   }
 });
 const rotateControl = new Control({
+  /** X position offset */
   x: 0,
+  /** Y position offset */
   y: -0.5,
+  /** Additional Y offset for positioning */
   offsetY: -25,
+  /** Cursor style when hovering */
   cursorStyle: "crosshair",
+  /** Action handler with rotation and snapping */
   actionHandler: controlsUtils.rotationWithSnapping,
+  /** Name of the action */
   actionName: "rotate",
+  /** Whether to show connection line */
   withConnection: true
 });
 const getThumbnail = async (videoUrl, seekTime = 0.1, playbackRate = 1) => {
@@ -239,7 +287,7 @@ const getThumbnail = async (videoUrl, seekTime = 0.1, playbackRate = 1) => {
     timeoutId = window.setTimeout(() => {
       cleanup();
       reject(new Error("Video loading timed out"));
-    }, 5e3);
+    }, 15e3);
     video.src = videoUrl;
     document.body.appendChild(video);
   });
@@ -290,7 +338,7 @@ 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;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
   const { x, y } = convertToCanvasPosition(
     ((_a = element.props) == null ? void 0 : _a.x) || 0,
     ((_b = element.props) == null ? void 0 : _b.y) || 0,
@@ -309,15 +357,16 @@ const addTextElement = ({
     fontStyle: ((_g = element.props) == null ? void 0 : _g.fontStyle) || "normal",
     fontWeight: ((_h = element.props) == null ? void 0 : _h.fontWeight) || "normal",
     fill: ((_i = element.props) == null ? void 0 : _i.fill) || DEFAULT_TEXT_PROPS.fill,
+    opacity: ((_j = element.props) == null ? void 0 : _j.opacity) ?? 1,
     skipWrapping: false,
-    textAlign: ((_j = element.props) == null ? void 0 : _j.textAlign) || "center",
-    stroke: ((_k = element.props) == null ? void 0 : _k.stroke) || DEFAULT_TEXT_PROPS.stroke,
-    strokeWidth: ((_l = element.props) == null ? void 0 : _l.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
-    shadow: ((_m = element.props) == null ? void 0 : _m.shadowColor) ? new Shadow({
-      offsetX: ((_o = (_n = element.props) == null ? void 0 : _n.shadowOffset) == null ? void 0 : _o.length) && ((_q = (_p = element.props) == null ? void 0 : _p.shadowOffset) == null ? void 0 : _q.length) > 1 ? element.props.shadowOffset[0] / 2 : 1,
-      offsetY: ((_s = (_r = element.props) == null ? void 0 : _r.shadowOffset) == null ? void 0 : _s.length) && ((_t = element.props) == null ? void 0 : _t.shadowOffset.length) > 1 ? element.props.shadowOffset[1] / 2 : 1,
-      blur: (((_u = element.props) == null ? void 0 : _u.shadowBlur) || 2) / 2,
-      color: (_v = element.props) == null ? void 0 : _v.shadowColor
+    textAlign: ((_k = element.props) == null ? void 0 : _k.textAlign) || "center",
+    stroke: ((_l = element.props) == null ? void 0 : _l.stroke) || DEFAULT_TEXT_PROPS.stroke,
+    strokeWidth: ((_m = element.props) == null ? void 0 : _m.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
+    shadow: ((_n = element.props) == null ? void 0 : _n.shadowColor) ? new Shadow({
+      offsetX: ((_p = (_o = element.props) == null ? void 0 : _o.shadowOffset) == null ? void 0 : _p.length) && ((_r = (_q = element.props) == null ? void 0 : _q.shadowOffset) == null ? void 0 : _r.length) > 1 ? element.props.shadowOffset[0] / 2 : 1,
+      offsetY: ((_t = (_s = element.props) == null ? void 0 : _s.shadowOffset) == null ? void 0 : _t.length) && ((_u = element.props) == null ? void 0 : _u.shadowOffset.length) > 1 ? element.props.shadowOffset[1] / 2 : 1,
+      blur: (((_v = element.props) == null ? void 0 : _v.shadowBlur) || 2) / 2,
+      color: (_w = element.props) == null ? void 0 : _w.shadowColor
     }) : void 0
   });
   text.set("id", element.id);
@@ -340,7 +389,7 @@ const setImageProps = ({
   index,
   canvasMetadata
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   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(
@@ -355,6 +404,7 @@ 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");
@@ -366,7 +416,7 @@ 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;
+  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;
   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,
@@ -385,13 +435,14 @@ const addCaptionElement = ({
     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,
     shadow: new Shadow({
-      offsetX: ((_s = (_r = element.props) == null ? void 0 : _r.shadowOffset) == null ? void 0 : _s[0]) || ((_t = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _t[0]),
-      offsetY: ((_v = (_u = element.props) == null ? void 0 : _u.shadowOffset) == null ? void 0 : _v[1]) || ((_w = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _w[1]),
-      blur: ((_x = element.props) == null ? void 0 : _x.shadowBlur) || DEFAULT_CAPTION_PROPS.shadowBlur,
-      color: ((_y = element.props) == null ? void 0 : _y.shadowColor) || DEFAULT_CAPTION_PROPS.shadowColor
+      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
     }),
-    strokeWidth: ((_z = element.props) == null ? void 0 : _z.lineWidth) || DEFAULT_CAPTION_PROPS.lineWidth
+    strokeWidth: ((_A = element.props) == null ? void 0 : _A.lineWidth) || DEFAULT_CAPTION_PROPS.lineWidth
   });
   caption.set("id", element.id);
   caption.set("zIndex", index);
@@ -482,7 +533,7 @@ const addMediaGroup = ({
   canvasMetadata,
   currentFrameEffect
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   let frameSize;
   let angle;
   let framePosition;
@@ -537,7 +588,8 @@ const addMediaGroup = ({
     originX: "center",
     originY: "center",
     scaleX: newSize.width / img.width,
-    scaleY: newSize.height / img.height
+    scaleY: newSize.height / img.height,
+    opacity: ((_n = element.props) == null ? void 0 : _n.opacity) ?? 1
   });
   const { x, y } = convertToCanvasPosition(
     (framePosition == null ? void 0 : framePosition.x) || 0,
@@ -657,6 +709,7 @@ const useTwickCanvas = ({
   const elementFrameMap = useRef({});
   const twickCanvasRef = useRef(null);
   const videoSizeRef = useRef({ width: 1, height: 1 });
+  const canvasResolutionRef = useRef({ width: 1, height: 1 });
   const canvasMetadataRef = useRef({
     width: 0,
     height: 0,
@@ -680,9 +733,13 @@ const useTwickCanvas = ({
     selectionLineWidth = 2,
     uniScaleTransform = true,
     enableRetinaScaling = true,
-    touchZoomThreshold = 10
+    touchZoomThreshold = 10,
+    forceBuild = false
   }) => {
     if (!canvasRef) return;
+    if (!forceBuild && canvasResolutionRef.current.width === canvasSize.width && canvasResolutionRef.current.height === canvasSize.height) {
+      return;
+    }
     if (twickCanvasRef.current) {
       console.log("Destroying twickCanvas");
       twickCanvasRef.current.off("mouse:up", handleMouseUp);
@@ -702,6 +759,7 @@ const useTwickCanvas = ({
     canvasMetadataRef.current = canvasMetadata;
     videoSizeRef.current = videoSize;
     canvas == null ? void 0 : canvas.on("mouse:up", handleMouseUp);
+    canvasResolutionRef.current = canvasSize;
     setTwickCanvas(canvas);
     twickCanvasRef.current = canvas;
     if (onCanvasReady) {
@@ -842,13 +900,18 @@ const useTwickCanvas = ({
     captionProps,
     cleanAndAdd = false
   }) => {
-    if (!twickCanvas) {
-      console.warn("Canvas not initialized");
+    if (!twickCanvas || !getCanvasContext(twickCanvas)) {
+      console.warn("Canvas not properly initialized");
       return;
     }
     try {
-      if (cleanAndAdd) {
+      if (cleanAndAdd && getCanvasContext(twickCanvas)) {
+        const backgroundColor = twickCanvas.backgroundColor;
         clearCanvas(twickCanvas);
+        if (backgroundColor) {
+          twickCanvas.backgroundColor = backgroundColor;
+          twickCanvas.renderAll();
+        }
       }
       await Promise.all(
         elements.map(async (element, index) => {