image-editor-canva/dist/index.d.ts

A Canva-like image editor plugin for React

import * as react_jsx_runtime from 'react/jsx-runtime';
import { fabric } from 'fabric';
import { ITextboxOptions } from 'fabric/fabric-impl';
import * as react from 'react';

interface EditorProps {
    initialData: {
        json: string;
        name: string;
        id: string;
        userId: string;
        height: number;
        width: number;
        thumbnailUrl: string | null;
        isTemplate: boolean | null;
        isPro: boolean | null;
        createdAt: string;
        updatedAt: string;
    };
    templates?: {
        id: string;
        name: string;
        width: number;
        height: number;
        thumbnailUrl: string;
        json: string | object;
    }[];
    templateImagePath?: string;
    onClose?: () => void;
}
declare const Editor$1: ({ initialData, onClose }: EditorProps) => react_jsx_runtime.JSX.Element;

declare const JSON_KEYS: string[];
declare const filters: string[];
declare const fonts: string[];
declare const selectionDependentTools: string[];
declare const colors: string[];
type ActiveTool = "select" | "shapes" | "text" | "images" | "elements" | "draw" | "fill" | "stroke-color" | "stroke-width" | "font" | "opacity" | "filter" | "settings" | "ai" | "remove-bg" | "background" | "templates";
declare const FILL_COLOR = "rgba(0,0,0,1)";
declare const STROKE_COLOR = "rgba(0,0,0,1)";
declare const STROKE_WIDTH = 2;
declare const STROKE_DASH_ARRAY: never[];
declare const FONT_FAMILY = "Arial";
declare const FONT_SIZE = 32;
declare const FONT_WEIGHT = 400;
declare const CIRCLE_OPTIONS: {
    radius: number;
    left: number;
    top: number;
    fill: string;
    stroke: string;
    strokeWidth: number;
};
declare const RECTANGLE_OPTIONS: {
    left: number;
    top: number;
    fill: string;
    stroke: string;
    strokeWidth: number;
    width: number;
    height: number;
    angle: number;
};
declare const DIAMOND_OPTIONS: {
    left: number;
    top: number;
    fill: string;
    stroke: string;
    strokeWidth: number;
    width: number;
    height: number;
    angle: number;
};
declare const TRIANGLE_OPTIONS: {
    left: number;
    top: number;
    fill: string;
    stroke: string;
    strokeWidth: number;
    width: number;
    height: number;
    angle: number;
};
declare const TEXT_OPTIONS: {
    type: string;
    left: number;
    top: number;
    fill: string;
    fontSize: number;
    fontFamily: string;
};
interface EditorHookProps {
    defaultState?: string;
    defaultWidth?: number;
    defaultHeight?: number;
    clearSelectionCallback?: () => void;
    saveCallback?: (values: {
        json: string;
        height: number;
        width: number;
    }) => void;
    closeCallback?: () => void;
}
type BuildEditorProps = {
    undo: () => void;
    redo: () => void;
    save: (skip?: boolean) => void;
    canUndo: () => boolean;
    canRedo: () => boolean;
    autoZoom: () => void;
    copy: () => void;
    paste: () => void;
    canvas: fabric.Canvas;
    fillColor: string;
    strokeColor: string;
    strokeWidth: number;
    selectedObjects: fabric.Object[];
    strokeDashArray: number[];
    fontFamily: string;
    setStrokeDashArray: (value: number[]) => void;
    setFillColor: (value: string) => void;
    setStrokeColor: (value: string) => void;
    setStrokeWidth: (value: number) => void;
    setFontFamily: (value: string) => void;
};
interface Editor {
    savePng: () => void;
    saveJpg: () => void;
    saveSvg: () => void;
    saveJson: () => void;
    loadJson: (json: string) => void;
    onUndo: () => void;
    onRedo: () => void;
    canUndo: () => boolean;
    canRedo: () => boolean;
    autoZoom: () => void;
    zoomIn: () => void;
    zoomOut: () => void;
    getWorkspace: () => fabric.Object | undefined;
    changeBackground: (value: string) => void;
    changeSize: (value: {
        width: number;
        height: number;
    }) => void;
    enableDrawingMode: () => void;
    disableDrawingMode: () => void;
    onCopy: () => void;
    onPaste: () => void;
    changeImageFilter: (value: string) => void;
    addImage: (value: string) => void;
    delete: () => void;
    changeFontSize: (value: number) => void;
    getActiveFontSize: () => number;
    changeTextAlign: (value: string) => void;
    getActiveTextAlign: () => string;
    changeFontUnderline: (value: boolean) => void;
    getActiveFontUnderline: () => boolean;
    changeFontLinethrough: (value: boolean) => void;
    getActiveFontLinethrough: () => boolean;
    changeFontStyle: (value: string) => void;
    getActiveFontStyle: () => string;
    changeFontWeight: (value: number) => void;
    getActiveFontWeight: () => number;
    getActiveFontFamily: () => string;
    changeFontFamily: (value: string) => void;
    addText: (value: string, options?: ITextboxOptions) => void;
    getActiveOpacity: () => number;
    changeOpacity: (value: number) => void;
    bringForward: () => void;
    sendBackwards: () => void;
    changeStrokeWidth: (value: number) => void;
    changeFillColor: (value: string) => void;
    changeStrokeColor: (value: string) => void;
    changeStrokeDashArray: (value: number[]) => void;
    addCircle: () => void;
    addSoftRectangle: () => void;
    addRectangle: () => void;
    addTriangle: () => void;
    addInverseTriangle: () => void;
    addDiamond: () => void;
    canvas: fabric.Canvas;
    getActiveFillColor: () => string;
    getActiveStrokeColor: () => string;
    getActiveStrokeWidth: () => number;
    getActiveStrokeDashArray: () => number[];
    selectedObjects: fabric.Object[];
}

declare const useEditor: ({ defaultState, defaultHeight, defaultWidth, clearSelectionCallback, saveCallback, }: EditorHookProps) => {
    init: ({ initialCanvas, initialContainer, }: {
        initialCanvas: fabric.Canvas;
        initialContainer: HTMLDivElement;
    }) => void;
    editor: Editor | undefined;
};

interface UseHistoryProps {
    canvas: fabric.Canvas | null;
    saveCallback?: (values: {
        json: string;
        height: number;
        width: number;
    }) => void;
}
declare const useHistory: ({ canvas, saveCallback }: UseHistoryProps) => {
    save: (skip?: boolean) => void;
    canUndo: () => boolean;
    canRedo: () => boolean;
    undo: () => void;
    redo: () => void;
    setHistoryIndex: react.Dispatch<react.SetStateAction<number>>;
    canvasHistory: react.RefObject<string[]>;
};

interface UseAutoResizeProps {
    canvas: fabric.Canvas | null;
    container: HTMLDivElement | null;
}
declare const useAutoResize: ({ canvas, container }: UseAutoResizeProps) => {
    autoZoom: () => void;
};

interface UseCanvasEventsProps {
    save: () => void;
    canvas: fabric.Canvas | null;
    setSelectedObjects: (objects: fabric.Object[]) => void;
    clearSelectionCallback?: () => void;
}
declare const useCanvasEvents: ({ save, canvas, setSelectedObjects, clearSelectionCallback, }: UseCanvasEventsProps) => void;

interface UseClipboardProps {
    canvas: fabric.Canvas | null;
}
declare const useClipboard: ({ canvas }: UseClipboardProps) => {
    copy: () => void;
    paste: () => void;
};

interface UseHotkeysProps {
    canvas: fabric.Canvas | null;
    undo: () => void;
    redo: () => void;
    save: (skip?: boolean) => void;
    copy: () => void;
    paste: () => void;
}
declare const useHotkeys: ({ canvas, undo, redo, save, copy, paste }: UseHotkeysProps) => void;

interface UseLoadStateProps {
    autoZoom: () => void;
    canvas: fabric.Canvas | null;
    initialState: React.MutableRefObject<string | undefined>;
    canvasHistory: React.MutableRefObject<string[]>;
    setHistoryIndex: React.Dispatch<React.SetStateAction<number>>;
}
declare const useLoadState: ({ canvas, autoZoom, initialState, canvasHistory, setHistoryIndex, }: UseLoadStateProps) => void;

declare const useWindowEvents: () => void;

interface ToolbarProps {
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
}
declare const Toolbar: ({ editor, activeTool, onChangeActiveTool, }: ToolbarProps) => react_jsx_runtime.JSX.Element;

interface FooterProps {
    editor: Editor | undefined;
}
declare const Footer: ({ editor }: FooterProps) => react_jsx_runtime.JSX.Element;

interface NavbarProps {
    id: string;
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
    onClose?: () => void;
}
declare const Navbar: ({ id, editor, activeTool, onChangeActiveTool, onClose, }: NavbarProps) => react_jsx_runtime.JSX.Element;

interface SidebarProps {
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
}
declare const Sidebar: ({ activeTool, onChangeActiveTool, }: SidebarProps) => react_jsx_runtime.JSX.Element;

interface ColorPickerProps {
    value: string;
    onChange: (value: string) => void;
}
declare const ColorPicker: ({ value, onChange, }: ColorPickerProps) => react_jsx_runtime.JSX.Element;

interface SettingsSidebarProps {
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
    onClose?: () => void;
}
declare const SettingsSidebar: ({ editor, activeTool, onChangeActiveTool, onClose, }: SettingsSidebarProps) => react_jsx_runtime.JSX.Element;

interface ShapeSidebarProps {
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
}
declare const ShapeSidebar: ({ editor, activeTool, onChangeActiveTool, }: ShapeSidebarProps) => react_jsx_runtime.JSX.Element;

interface FillColorSidebarProps {
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
}
declare const FillColorSidebar: ({ editor, activeTool, onChangeActiveTool, }: FillColorSidebarProps) => react_jsx_runtime.JSX.Element;

interface StrokeColorSidebarProps {
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
}
declare const StrokeColorSidebar: ({ editor, activeTool, onChangeActiveTool, }: StrokeColorSidebarProps) => react_jsx_runtime.JSX.Element;

interface StrokeWidthSidebarProps {
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
}
declare const StrokeWidthSidebar: ({ editor, activeTool, onChangeActiveTool, }: StrokeWidthSidebarProps) => react_jsx_runtime.JSX.Element;

interface OpacitySidebarProps {
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
}
declare const OpacitySidebar: ({ editor, activeTool, onChangeActiveTool, }: OpacitySidebarProps) => react_jsx_runtime.JSX.Element;

interface TextSidebarProps {
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
}
declare const TextSidebar: ({ editor, activeTool, onChangeActiveTool, }: TextSidebarProps) => react_jsx_runtime.JSX.Element;

interface FontSidebarProps {
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
}
declare const FontSidebar: ({ editor, activeTool, onChangeActiveTool, }: FontSidebarProps) => react_jsx_runtime.JSX.Element;

interface ImageSidebarProps {
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
}
declare const ImageSidebar: ({ editor, activeTool, onChangeActiveTool, }: ImageSidebarProps) => react_jsx_runtime.JSX.Element;

interface ElementsSidebarProps {
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
}
declare const ElementsSidebar: ({ editor, activeTool, onChangeActiveTool, }: ElementsSidebarProps) => react_jsx_runtime.JSX.Element;

interface FilterSidebarProps {
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
}
declare const FilterSidebar: ({ editor, activeTool, onChangeActiveTool, }: FilterSidebarProps) => react_jsx_runtime.JSX.Element;

interface DrawSidebarProps {
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
}
declare const DrawSidebar: ({ editor, activeTool, onChangeActiveTool, }: DrawSidebarProps) => react_jsx_runtime.JSX.Element;

interface AiSidebarProps {
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
}
declare const AiSidebar: ({ activeTool, onChangeActiveTool, }: AiSidebarProps) => react_jsx_runtime.JSX.Element;

interface TemplateSidebarProps {
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
}
declare const TemplateSidebar: ({ editor, activeTool, onChangeActiveTool, }: TemplateSidebarProps) => react_jsx_runtime.JSX.Element;

interface BackgroundSidebarProps {
    editor: Editor | undefined;
    activeTool: ActiveTool;
    onChangeActiveTool: (tool: ActiveTool) => void;
}
declare const BackgroundSidebar: ({ editor, activeTool, onChangeActiveTool, }: BackgroundSidebarProps) => react_jsx_runtime.JSX.Element;

declare function transformText(objects: any): void;
/**
 * Downloads a file with the given content and type
 * Robust implementation with cross-browser support and fallbacks
 */
declare function downloadFile(content: string, fileType: string): void;
declare function isTextType(type: string | undefined): type is "text" | "textbox" | "i-text";
declare const createFilter: (value: string) => any;

export { AiSidebar, BackgroundSidebar, CIRCLE_OPTIONS, ColorPicker, DIAMOND_OPTIONS, DrawSidebar, Editor$1 as Editor, ElementsSidebar, FILL_COLOR, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, FillColorSidebar, FilterSidebar, FontSidebar, Footer, ImageSidebar, JSON_KEYS, Navbar, OpacitySidebar, RECTANGLE_OPTIONS, STROKE_COLOR, STROKE_DASH_ARRAY, STROKE_WIDTH, SettingsSidebar, ShapeSidebar, Sidebar, StrokeColorSidebar, StrokeWidthSidebar, TEXT_OPTIONS, TRIANGLE_OPTIONS, TemplateSidebar, TextSidebar, Toolbar, colors, createFilter, downloadFile, filters, fonts, isTextType, selectionDependentTools, transformText, useAutoResize, useCanvasEvents, useClipboard, useEditor, useHistory, useHotkeys, useLoadState, useWindowEvents };
export type { ActiveTool, BuildEditorProps, EditorHookProps, Editor as EditorInterface };