🚀 Getting Started

Welcome to FabricJS Design Tool! This guide will help you get up and running quickly.

📦 Installation

NPM

npm install @rifrocket/fabricjs-design-tool

Yarn

yarn add @rifrocket/fabricjs-design-tool

PNPM

pnpm add @rifrocket/fabricjs-design-tool

⚡ Quick Setup

React App Setup

import React from 'react';
import { CanvasWrapper, LeftSidebar, RightSidebar } from '@rifrocket/fabricjs-design-tool/ui';

function App() {
  return (
    <div className="flex h-screen">
      <LeftSidebar />
      <div className="flex-1">
        <CanvasWrapper />
      </div>
      <RightSidebar />
    </div>
  );
}

🎨 Basic Canvas Setup

1. HTML Structure

<!DOCTYPE html>
<html>
<head>
  <title>My Design Tool</title>
</head>
<body>
  <div id="app">
    <canvas id="design-canvas" width="800" height="600"></canvas>
  </div>
</body>
</html>

2. JavaScript Setup

import { Canvas } from 'fabric';
import { useCanvasManager, shapeFactory } from '@rifrocket/fabricjs-design-tool';

// Initialize Fabric.js canvas
const canvas = new Canvas('design-canvas');

// Use the canvas manager for enhanced functionality
const canvasManager = useCanvasManager(canvas);

// Add some shapes
const circle = shapeFactory.createCircle({
  left: 100,
  top: 100,
  radius: 50,
  fill: 'red'
});

const text = shapeFactory.createText('Hello World!', {
  left: 200,
  top: 100,
  fontSize: 24
});

canvas.add(circle, text);

⚛️ React Integration

Basic React Component

import React, { useRef, useEffect } from 'react';
import { Canvas } from 'fabric';
import { useCanvasManager } from '@rifrocket/fabricjs-design-tool';

function DesignCanvas() {
  const canvasRef = useRef(null);
  const [canvas, setCanvas] = useState(null);

  useEffect(() => {
    const fabricCanvas = new Canvas(canvasRef.current);
    const manager = useCanvasManager(fabricCanvas);
    setCanvas(fabricCanvas);

    return () => {
      fabricCanvas.dispose();
    };
  }, []);

  return (
    <div className="canvas-container">
      <canvas ref={canvasRef} width={800} height={600} />
    </div>
  );
}

Using Pre-built Components

import React from 'react';
import { 
  CanvasWrapper, 
  LeftSidebar, 
  RightSidebar, 
  Header 
} from '@rifrocket/fabricjs-design-tool/ui';

function DesignTool() {
  return (
    <div className="h-screen flex flex-col">
      <Header />
      <div className="flex flex-1">
        <LeftSidebar />
        <CanvasWrapper className="flex-1" />
        <RightSidebar />
      </div>
    </div>
  );
}

📱 Responsive Design

Making Canvas Responsive

import { canvasUtils } from '@rifrocket/fabricjs-design-tool';

function makeCanvasResponsive(canvas) {
  function resizeCanvas() {
    const container = canvas.getElement().parentElement;
    const containerWidth = container.clientWidth;
    const containerHeight = container.clientHeight;
    
    canvas.setDimensions({
      width: containerWidth,
      height: containerHeight
    });
    
    canvas.renderAll();
  }
  
  window.addEventListener('resize', resizeCanvas);
  resizeCanvas(); // Initial resize
}

🎯 Next Steps

Now that you have the basics set up, explore these guides:

🎨 Core API Reference

All available functions and hooks

⚛️ React Components

Complete UI components

🔧 Customization Guide

Customization and extension

🔧 Troubleshooting

Common issues and solutions

❓ Common Issues

Canvas Not Rendering

// Make sure to call renderAll() after adding objects
canvas.add(object);
canvas.renderAll(); // ← Important!

TypeScript Errors

# Install type definitions if needed
npm install --save-dev @types/fabric

Module Not Found

// Make sure you're importing from the correct path
import { useCanvasManager } from '@rifrocket/fabricjs-design-tool'; // ✅ Core
import { CanvasWrapper } from '@rifrocket/fabricjs-design-tool/ui';  // ✅ UI Components

Need help? Check our Troubleshooting Guide or open an issue!