@twick/canvas 0.15.15 → 0.15.16

package/dist/index.d.ts

@@ -1,9 +1,12 @@
 import { addBackgroundColor } from './components/elements';
 import { addCaptionElement } from './components/elements';
+import { AddElementToCanvasOptions } from './types';
 import { addImageElement } from './components/elements';
 import { addRectElement } from './components/elements';
 import { addTextElement } from './components/elements';
 import { addVideoElement } from './components/elements';
+import { AddWatermarkToCanvasOptions } from './types';
+import { BuildCanvasOptions } from './types';
 import { CANVAS_OPERATIONS } from './helpers/constants';
 import { CanvasElement } from './types';
 import { CanvasElementAddParams } from './types';
@@ -24,7 +27,9 @@ import { default as elementController } from './controllers/element.controller';
 import { FrameEffect } from './types';
 import { getCurrentFrameEffect } from './helpers/canvas.util';
 import { reorderElementsByZIndex } from './helpers/canvas.util';
+import { ResizeCanvasOptions } from './types';
 import { rotateControl } from './components/element-controls';
+import { SetCanvasElementsOptions } from './types';
 import { useTwickCanvas } from './hooks/use-twick-canvas';
 import { WatermarkUpdatePayload } from './types';
 
@@ -32,6 +37,8 @@ export { addBackgroundColor }
 
 export { addCaptionElement }
 
+export { AddElementToCanvasOptions }
+
 export { addImageElement }
 
 export { addRectElement }
@@ -40,6 +47,10 @@ export { addTextElement }
 
 export { addVideoElement }
 
+export { AddWatermarkToCanvasOptions }
+
+export { BuildCanvasOptions }
+
 export { CANVAS_OPERATIONS }
 
 export { CanvasElement }
@@ -80,8 +91,12 @@ export { getCurrentFrameEffect }
 
 export { reorderElementsByZIndex }
 
+export { ResizeCanvasOptions }
+
 export { rotateControl }
 
+export { SetCanvasElementsOptions }
+
 export { useTwickCanvas }
 
 export { WatermarkUpdatePayload }

package/dist/index.js

@@ -54,9 +54,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 = {
@@ -1616,6 +1616,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;
@@ -1892,9 +1916,7 @@ const useTwickCanvas = ({
       reorderElementsByZIndex(twickCanvas);
     }
   };
-  const addWatermarkToCanvas = ({
-    element
-  }) => {
+  const addWatermarkToCanvas = ({ element }) => {
     if (!twickCanvas) return;
     const handler = elementController.get("watermark");
     if (handler) {
@@ -1924,6 +1946,7 @@ const useTwickCanvas = ({
   return {
     twickCanvas,
     buildCanvas,
+    resizeCanvas,
     onVideoSizeChange,
     addWatermarkToCanvas,
     addElementToCanvas,