@twick/canvas 0.14.0 → 0.14.3

package/README.md

@@ -1,130 +1,150 @@
-# @twick/canvas
-
-A React-based canvas library built with Fabric.js for video and image manipulation.
-
-## Requirements
-
-- Browser environment with Canvas and Video support
-- React 18 or higher
-- Fabric.js 6.6.2 or higher
-
-## Installation
-
-```bash
-pnpm install @twick/canvas
-```
-
-## Usage
-
-### Basic Canvas Setup
-
-```tsx
-import { useTwickCanvas } from '@twick/canvas';
-import { useRef, useEffect } from 'react';
-
-function CustomCanvas() {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const { twickCanvas, buildCanvas, addElementToCanvas } = useTwickCanvas({
-    onCanvasReady: (canvas) => {
-      console.log("Canvas ready", canvas);
-    },
-    onCanvasOperation: (operation, data) => {
-      console.log("Canvas operation", operation, data);
-    }
-  });
-
-  useEffect(() => {
-    const container = containerRef.current;
-    const canvasSize = {
-      width: container?.clientWidth,
-      height: container?.clientHeight,
-    };
-    
-    buildCanvas({
-      videoSize: {
-        width: 720,
-        height: 1280,
-      },
-      canvasSize,
-      canvasRef: canvasRef.current,
-    });
-  }, []);
-
-  return (
-    <div ref={containerRef}>
-      <canvas ref={canvasRef} />
-    </div>
-  );
-}
-```
-
-### Adding Elements
-
-```tsx
-// Add an image
-const imageElement = {
-  type: "image",
-  id: "image-1",
-  frame: {
-    size: [400, 300],
-  },
-  props: {
-    src: "https://example.com/image.jpg",
-  }
-};
-
-addElementToCanvas({ element: imageElement, index: 0 });
-
-// Add text
-const textElement = {
-  type: "text",
-  id: "text-1",
-  props: {
-    x: 100,
-    y: 100,
-    text: "Hello World",
-    fontSize: 64,
-    fill: "#FFFFFF",
-  }
-};
-
-addElementToCanvas({ element: textElement, index: 1 });
-```
-
-## API Reference
-
-### Hooks
-
-- `useTwickCanvas`: Custom hook for canvas manipulation
-
-### Helpers
-
-- `createCanvas`: Create a new Fabric.js canvas instance
-- `reorderElementsByZIndex`: Reorder canvas elements by z-index
-- `getCurrentFrameEffect`: Get current frame effect
-- `convertToCanvasPosition`: Convert video coordinates to canvas coordinates
-- `convertToVideoPosition`: Convert canvas coordinates to video coordinates
-
-### Types
-
-- `CanvasProps`: Canvas configuration props
-- `CanvasMetadata`: Canvas metadata interface
-- `FrameEffect`: Frame effect interface
-- `CanvasElement`: Canvas element interface
-- `CanvasElementProps`: Canvas element props interface
-- `CaptionProps`: Caption configuration props
-
-## Browser Support
-
-This library requires a browser environment with support for:
-- HTML5 Canvas
-- HTML5 Video
-- Modern JavaScript features (ES2020+)
-
-The library will throw appropriate errors if used in an unsupported environment.
-
-## License
-
-Apache-2.0 
+# @twick/canvas
+
+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
+- React 18 or higher
+- Fabric.js 6.6.2 or higher
+
+## Installation
+
+```bash
+npm install @twick/canvas
+# or
+pnpm add @twick/canvas
+```
+
+## Quick Start
+
+### Basic Canvas Setup
+
+```tsx
+import { useTwickCanvas } from '@twick/canvas';
+import { useRef, useEffect } from 'react';
+
+function CustomCanvas() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const { twickCanvas, buildCanvas, addElementToCanvas } = useTwickCanvas({
+    onCanvasReady: (canvas) => {
+      console.log("Canvas ready", canvas);
+    },
+    onCanvasOperation: (operation, data) => {
+      console.log("Canvas operation", operation, data);
+    }
+  });
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const canvasSize = {
+      width: container?.clientWidth,
+      height: container?.clientHeight,
+    };
+    
+    buildCanvas({
+      videoSize: {
+        width: 720,
+        height: 1280,
+      },
+      canvasSize,
+      canvasRef: canvasRef.current,
+    });
+  }, []);
+
+  return (
+    <div ref={containerRef}>
+      <canvas ref={canvasRef} />
+    </div>
+  );
+}
+```
+
+### Adding Elements
+
+```tsx
+// Add an image
+const imageElement = {
+  type: "image",
+  id: "image-1",
+  frame: {
+    size: [400, 300],
+  },
+  props: {
+    src: "https://example.com/image.jpg",
+  }
+};
+
+addElementToCanvas({ element: imageElement, index: 0 });
+
+// Add text
+const textElement = {
+  type: "text",
+  id: "text-1",
+  props: {
+    x: 100,
+    y: 100,
+    text: "Hello World",
+    fontSize: 64,
+    fill: "#FFFFFF",
+  }
+};
+
+addElementToCanvas({ element: textElement, index: 1 });
+```
+
+## API Reference
+
+### Hooks
+
+- `useTwickCanvas`: Custom hook for canvas manipulation
+
+### Helpers
+
+- `createCanvas`: Create a new Fabric.js canvas instance
+- `reorderElementsByZIndex`: Reorder canvas elements by z-index
+- `getCurrentFrameEffect`: Get current frame effect
+- `convertToCanvasPosition`: Convert video coordinates to canvas coordinates
+- `convertToVideoPosition`: Convert canvas coordinates to video coordinates
+
+### Types
+
+- `CanvasProps`: Canvas configuration props
+- `CanvasMetadata`: Canvas metadata interface
+- `FrameEffect`: Frame effect interface
+- `CanvasElement`: Canvas element interface
+- `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:
+- HTML5 Canvas
+- HTML5 Video
+- Modern JavaScript features (ES2020+)
+
+The library will throw appropriate errors if used in an unsupported environment.
+
+## Documentation
+
+For complete documentation, refer to the project documentation site.
+
+## License
+
+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";
@@ -135,14 +160,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 +185,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) => {