@twick/canvas 0.14.2 → 0.14.4

package/README.md

@@ -2,6 +2,10 @@
 
 A React-based canvas library built with Fabric.js for video and image manipulation.
 
+## Overview
+
+This package provides a comprehensive canvas solution for video and image editing, built on top of Fabric.js with React integration. It offers advanced manipulation capabilities for creating professional video editing applications.
+
 ## Requirements
 
 - Browser environment with Canvas and Video support
@@ -11,10 +15,12 @@ A React-based canvas library built with Fabric.js for video and image manipulati
 ## Installation
 
 ```bash
-pnpm install @twick/canvas
+npm install @twick/canvas
+# or
+pnpm add @twick/canvas
 ```
 
-## Usage
+## Quick Start
 
 ### Basic Canvas Setup
 
@@ -116,6 +122,8 @@ addElementToCanvas({ element: textElement, index: 1 });
 - `CanvasElementProps`: Canvas element props interface
 - `CaptionProps`: Caption configuration props
 
+For complete API documentation, refer to the generated documentation.
+
 ## Browser Support
 
 This library requires a browser environment with support for:
@@ -125,6 +133,18 @@ This library requires a browser environment with support for:
 
 The library will throw appropriate errors if used in an unsupported environment.
 
+## Documentation
+
+For complete documentation, refer to the project documentation site.
+
 ## License
 
-Apache-2.0 
+This package is licensed under the **Sustainable Use License (SUL) Version 1.0**.
+
+- Free for use in commercial and non-commercial apps
+- Can be modified and self-hosted
+- Cannot be sold, rebranded, or distributed as a standalone SDK
+
+For commercial licensing inquiries, contact: contact@kifferai.com
+
+For full license terms, see the main LICENSE.md file in the project root. 

package/dist/index.js

@@ -3,36 +3,61 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fabric = require("fabric");
 const react = require("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";
@@ -106,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 {
@@ -135,14 +169,21 @@ const getCurrentFrameEffect = (item, seekTime) => {
   return currentFrameEffect;
 };
 const disabledControl = new fabric.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();
@@ -153,12 +194,19 @@ const disabledControl = new fabric.Control({
   }
 });
 const rotateControl = new fabric.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: fabric.controlsUtils.rotationWithSnapping,
+  /** Name of the action */
   actionName: "rotate",
+  /** Whether to show connection line */
   withConnection: true
 });
 const getThumbnail = async (videoUrl, seekTime = 0.1, playbackRate = 1) => {
@@ -241,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);
   });
@@ -292,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,
@@ -311,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);
@@ -342,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(
@@ -357,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");
@@ -368,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,
@@ -387,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);
@@ -484,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;
@@ -539,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,
@@ -659,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,
@@ -682,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);
@@ -704,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) {
@@ -844,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) => {