@twick/canvas 0.0.1

package/README.md

@@ -0,0 +1,130 @@
+# @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 

package/dist/index.d.ts

@@ -0,0 +1,73 @@
+import { addBackgroundColor } from './components/elements';
+import { addCaptionElement } from './components/elements';
+import { addImageElement } from './components/elements';
+import { addRectElement } from './components/elements';
+import { addTextElement } from './components/elements';
+import { addVideoElement } from './components/elements';
+import { CANVAS_OPERATIONS } from './helpers/constants';
+import { CanvasElement } from './types';
+import { CanvasElementProps } from './types';
+import { CanvasMetadata } from './types';
+import { CanvasProps } from './types';
+import { CaptionProps } from './types';
+import { convertToCanvasPosition } from './helpers/canvas.util';
+import { convertToVideoPosition } from './helpers/canvas.util';
+import { createCanvas } from './helpers/canvas.util';
+import { disabledControl } from './components/element-controls';
+import { FrameEffect } from './types';
+import { getCurrentFrameEffect } from './helpers/canvas.util';
+import { reorderElementsByZIndex } from './helpers/canvas.util';
+import { rotateControl } from './components/element-controls';
+import { useTwickCanvas } from './hooks/use-twick-canvas';
+
+export { addBackgroundColor }
+
+export { addCaptionElement }
+
+export { addImageElement }
+
+export { addRectElement }
+
+export { addTextElement }
+
+export { addVideoElement }
+
+export { CANVAS_OPERATIONS }
+
+export { CanvasElement }
+
+export { CanvasElementProps }
+
+export { CanvasMetadata }
+
+export { CanvasProps }
+
+export { CaptionProps }
+
+export { convertToCanvasPosition }
+
+export { convertToVideoPosition }
+
+export { createCanvas }
+
+export { disabledControl }
+
+export { FrameEffect }
+
+export { getCurrentFrameEffect }
+
+export { reorderElementsByZIndex }
+
+export { rotateControl }
+
+export { useTwickCanvas }
+
+export { }
+
+
+declare module 'fabric' {
+    interface FabricObject {
+        zIndex?: number;
+    }
+}
+