@twick/canvas 0.15.15 → 0.15.18

package/dist/index.mjs

@@ -52,9 +52,9 @@ const CANVAS_OPERATIONS = {
   CAPTION_PROPS_UPDATED: "CAPTION_PROPS_UPDATED",
   /** Watermark has been updated */
   WATERMARK_UPDATED: "WATERMARK_UPDATED",
-  /** A new element was added via drop on canvas; payload is { element } */
+  /** A new element was added via drop on canvas; payload is { element } */
   ADDED_NEW_ELEMENT: "ADDED_NEW_ELEMENT",
-  /** Z-order changed (bring to front / send to back). Payload is { elementId, direction }. Timeline should reorder tracks. */
+  /** Z-order changed (bring to front / send to back). Payload is { elementId, direction }. Timeline should reorder tracks. */
   Z_ORDER_CHANGED: "Z_ORDER_CHANGED"
 };
 const ELEMENT_TYPES = {
@@ -1614,6 +1614,30 @@ const useTwickCanvas = ({
     scaleX: 1,
     scaleY: 1
   });
+  const resizeCanvas = ({
+    canvasSize,
+    videoSize = videoSizeRef.current
+  }) => {
+    const canvas = twickCanvasRef.current;
+    if (!canvas || !getCanvasContext(canvas)) return;
+    if (!(videoSize == null ? void 0 : videoSize.width) || !(videoSize == null ? void 0 : videoSize.height)) return;
+    if (canvasResolutionRef.current.width === canvasSize.width && canvasResolutionRef.current.height === canvasSize.height) {
+      return;
+    }
+    canvasMetadataRef.current = {
+      width: canvasSize.width,
+      height: canvasSize.height,
+      aspectRatio: canvasSize.width / canvasSize.height,
+      scaleX: Number((canvasSize.width / videoSize.width).toFixed(2)),
+      scaleY: Number((canvasSize.height / videoSize.height).toFixed(2))
+    };
+    canvas.setDimensions({
+      width: canvasSize.width,
+      height: canvasSize.height
+    });
+    canvasResolutionRef.current = canvasSize;
+    canvas.requestRenderAll();
+  };
   const onVideoSizeChange = (videoSize) => {
     if (videoSize) {
       videoSizeRef.current = videoSize;
@@ -1890,9 +1914,7 @@ const useTwickCanvas = ({
       reorderElementsByZIndex(twickCanvas);
     }
   };
-  const addWatermarkToCanvas = ({
-    element
-  }) => {
+  const addWatermarkToCanvas = ({ element }) => {
     if (!twickCanvas) return;
     const handler = elementController.get("watermark");
     if (handler) {
@@ -1922,6 +1944,7 @@ const useTwickCanvas = ({
   return {
     twickCanvas,
     buildCanvas,
+    resizeCanvas,
     onVideoSizeChange,
     addWatermarkToCanvas,
     addElementToCanvas,