@twick/canvas 0.14.3 → 0.14.5

package/dist/index.js

@@ -131,10 +131,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 {
@@ -144,8 +153,8 @@ const convertToCanvasPosition = (x, y, canvasMetadata) => {
 };
 const convertToVideoPosition = (x, y, canvasMetadata, videoSize) => {
   return {
-    x: x / canvasMetadata.scaleX - videoSize.width / 2,
-    y: y / canvasMetadata.scaleY - videoSize.height / 2
+    x: Number((x / canvasMetadata.scaleX - videoSize.width / 2).toFixed(2)),
+    y: Number((y / canvasMetadata.scaleY - videoSize.height / 2).toFixed(2))
   };
 };
 const getCurrentFrameEffect = (item, seekTime) => {
@@ -180,7 +189,7 @@ const disabledControl = new fabric.Control({
     ctx.save();
     ctx.translate(left, top);
     ctx.fillStyle = "#red";
-    ctx.fillRect(-0 / 2, -0 / 2, size, size);
+    ctx.fillRect(-size / 2, -size / 2, size, size);
     ctx.restore();
   }
 });
@@ -280,7 +289,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);
   });
@@ -331,7 +340,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,
@@ -350,15 +359,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 fabric.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 fabric.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);
@@ -381,7 +391,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(
@@ -396,6 +406,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");
@@ -407,7 +418,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,
@@ -426,13 +437,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 fabric.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);
@@ -523,7 +535,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;
@@ -578,7 +590,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,
@@ -698,6 +711,7 @@ const useTwickCanvas = ({
   const elementFrameMap = react.useRef({});
   const twickCanvasRef = react.useRef(null);
   const videoSizeRef = react.useRef({ width: 1, height: 1 });
+  const canvasResolutionRef = react.useRef({ width: 1, height: 1 });
   const canvasMetadataRef = react.useRef({
     width: 0,
     height: 0,
@@ -721,9 +735,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);
@@ -743,6 +761,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) {
@@ -883,13 +902,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) => {