🎨 Core API Reference

Framework-agnostic core functionality that works with any JavaScript framework.

📦 Import

import { 
  useCanvasManager,
  useShapeCreator,
  useCanvasPan,
  useCanvasKeyboardShortcuts,
  useAlignmentGuides,
  shapeFactory,
  canvasUtils,
  historyManager,
  EXPORT_FORMATS
} from 'fabricjs-design-tool';

🎨 Canvas Management

useCanvasManager(canvas, options?)

Main hook for managing canvas state and operations.

Function Signature:
useCanvasManager(canvas: fabric.Canvas, options?: CanvasManagerOptions): CanvasManager

Parameters:

  • canvas - The Fabric.js canvas instance
  • options - Optional configuration object

Returns:

CanvasManager object with methods for canvas operations

Usage Example:

import { Canvas } from 'fabric';
import { useCanvasManager } from 'fabricjs-design-tool';

const canvas = new Canvas('my-canvas');
const manager = useCanvasManager(canvas, {
  enableHistory: true,
  enableKeyboardShortcuts: true,
  autoSave: true
});

// Use manager methods
manager.addShape('rectangle', { width: 100, height: 100 });
manager.exportCanvas('png');

✨ Shape Creation

useShapeCreator(canvas)

Hook for creating and adding shapes to the canvas.

Function Signature:
useShapeCreator(canvas: fabric.Canvas): ShapeCreator

Usage Example:

const shapeCreator = useShapeCreator(canvas);

// Create shapes
const rect = shapeCreator.createRectangle({
  left: 100,
  top: 100,
  width: 200,
  height: 150,
  fill: '#3498db'
});

const circle = shapeCreator.createCircle({
  left: 300,
  top: 100,
  radius: 75,
  fill: '#e74c3c'
});

const text = shapeCreator.createText('Hello World!', {
  left: 100,
  top: 300,
  fontSize: 24,
  fill: '#2c3e50'
});

shapeFactory

Static factory for creating shapes without canvas context.

Available Methods:

createRectangle(options)

Creates a rectangle shape

createCircle(options)

Creates a circle shape

createText(text, options)

Creates a text object

createLine(points, options)

Creates a line shape

import { shapeFactory } from 'fabricjs-design-tool';

// Create shapes using factory
const shapes = [
  shapeFactory.createRectangle({ width: 100, height: 50, fill: 'red' }),
  shapeFactory.createCircle({ radius: 30, fill: 'blue' }),
  shapeFactory.createText('Sample Text', { fontSize: 18 }),
  shapeFactory.createLine([0, 0, 100, 100], { stroke: 'green' })
];

// Add all shapes to canvas
canvas.add(...shapes);

🔧 Canvas Utilities

canvasUtils

Collection of utility functions for canvas operations.

Export Functions:

import { canvasUtils } from 'fabricjs-design-tool';

// Export as image
const dataURL = canvasUtils.exportAsImage(canvas, 'png', 1.0);

// Export as JSON
const jsonData = canvasUtils.exportAsJSON(canvas);

// Export as SVG
const svgString = canvasUtils.exportAsSVG(canvas);

// Load from JSON
canvasUtils.loadFromJSON(canvas, jsonData);

Canvas Manipulation:

// Center object on canvas
canvasUtils.centerObject(canvas, selectedObject);

// Fit canvas to container
canvasUtils.fitToContainer(canvas, containerElement);

// Clear canvas
canvasUtils.clearCanvas(canvas);

// Set canvas background
canvasUtils.setBackground(canvas, '#f0f0f0');

🕐 History Management

historyManager

Undo/Redo functionality for canvas operations.

Usage Example:

import { historyManager } from 'fabricjs-design-tool';

// Initialize history for canvas
historyManager.init(canvas);

// Save state manually
historyManager.saveState();

// Undo last action
historyManager.undo();

// Redo last undone action
historyManager.redo();

// Check if undo/redo available
const canUndo = historyManager.canUndo();
const canRedo = historyManager.canRedo();

// Clear history
historyManager.clear();

⌨️ Keyboard Shortcuts

useCanvasKeyboardShortcuts(canvas, options?)

Hook for adding keyboard shortcuts to canvas operations.

Default Shortcuts:

Ctrl+Z Undo
Ctrl+Y Redo
Delete Delete Object
Ctrl+A Select All
Ctrl+C Copy
Ctrl+V Paste

Usage Example:

import { useCanvasKeyboardShortcuts } from 'fabricjs-design-tool';

// Enable default shortcuts
useCanvasKeyboardShortcuts(canvas);

// Custom shortcuts
useCanvasKeyboardShortcuts(canvas, {
  'ctrl+s': () => canvasUtils.exportAsJSON(canvas),
  'ctrl+o': () => loadDesign(),
  'escape': () => canvas.discardActiveObject(),
  'ctrl+d': () => duplicateSelected()
});

📋 Constants

EXPORT_FORMATS

Available export formats for canvas.

import { EXPORT_FORMATS } from 'fabricjs-design-tool';

console.log(EXPORT_FORMATS);
// Output: ['png', 'jpg', 'svg', 'json', 'pdf']

// Usage in export function
canvasUtils.exportAsImage(canvas, EXPORT_FORMATS.PNG);