react-native-sketch-canvas-enhanced/lib/typescript/types.d.ts

Enhanced react-native-sketch-canvas with shape drawing tools and advanced text annotations. Draw, sketch, and annotate on both iOS and Android devices.

import { StyleProp, ViewStyle } from 'react-native';
export type Orientation = 'portrait' | 'landscape';
export type ShapeType = 'line' | 'rectangle' | 'circle' | 'arrow' | 'none';
export interface PathData {
    id: number;
    color: string;
    width: number;
    data: string[];
    relativeData?: string[];
}
export interface Path {
    path: PathData;
    size: {
        width: number;
        height: number;
    };
    drawer?: any;
    orientation?: Orientation;
    backgroundImage?: {
        filename: string;
        directory: string;
        mode: string;
    } | null;
    contentMode?: 'AspectFit' | 'AspectFill' | 'ScaleToFill';
}
export interface ShapeData {
    id: number;
    type: ShapeType;
    color: string;
    width: number;
    filled: boolean;
    startPoint: {
        x: number;
        y: number;
    };
    endPoint: {
        x: number;
        y: number;
    };
    relativeStartPoint?: {
        x: number;
        y: number;
    };
    relativeEndPoint?: {
        x: number;
        y: number;
    };
    isSelected?: boolean;
    isMovable?: boolean;
    isResizable?: boolean;
    lastMovePoint?: {
        x: number;
        y: number;
    };
}
export interface Shape {
    shape: ShapeData;
    size: {
        width: number;
        height: number;
    };
    drawer?: any;
    orientation?: Orientation;
    backgroundImage?: {
        filename: string;
        directory: string;
        mode: string;
    } | null;
    contentMode?: 'AspectFit' | 'AspectFill' | 'ScaleToFill';
}
export interface CanvasText {
    id: number;
    text: string;
    font?: string;
    fontSize?: number;
    fontColor?: string;
    fontWeight?: 'normal' | 'bold';
    fontStyle?: 'normal' | 'italic';
    textAlign?: 'left' | 'center' | 'right';
    position: {
        x: number;
        y: number;
    };
    relativePosition?: {
        x: number;
        y: number;
    };
    anchor?: {
        x: number;
        y: number;
    };
    coordinate?: 'Absolute' | 'Ratio';
    overlay?: 'TextOnSketch' | 'SketchOnText';
    lineHeightMultiple?: number;
    alignment?: 'Left' | 'Center' | 'Right';
    editable?: boolean;
    draggable?: boolean;
    backgroundColor?: string;
    padding?: number;
    borderWidth?: number;
    borderColor?: string;
    borderRadius?: number;
    rotation?: number;
}
export interface SketchCanvasProps {
    style?: StyleProp<ViewStyle>;
    strokeColor?: string;
    strokeWidth?: number;
    onPathsChange?: (pathsCount: number) => void;
    onStrokeStart?: (x: number, y: number) => void;
    onStrokeChanged?: (x: number, y: number) => void;
    onStrokeEnd?: (path: Path) => void;
    onShapeStart?: (x: number, y: number) => void;
    onShapeChanged?: (shape: Shape) => void;
    onShapeEnd?: (shape: Shape) => void;
    onShapesChange?: (shapesCount: number) => void;
    onShapeTapped?: (shapeId: number) => void;
    onShapeSelected?: (shape: Shape) => void;
    onShapeDeselected?: (shape: Shape) => void;
    onShapeDragStart?: (shapeId: number) => boolean | void;
    onShapeDragChanged?: (shapeId: number, position: {
        startPoint: {
            x: number;
            y: number;
        };
        endPoint: {
            x: number;
            y: number;
        };
    }) => void;
    onShapeDragEnd?: (shapeId: number, position: {
        startPoint: {
            x: number;
            y: number;
        };
        endPoint: {
            x: number;
            y: number;
        };
    }) => void;
    onShapeResizeStart?: (shapeId: number, handle: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight') => boolean | void;
    onShapeResizeChanged?: (shapeId: number, newSize: {
        startPoint: {
            x: number;
            y: number;
        };
        endPoint: {
            x: number;
            y: number;
        };
    }) => void;
    onShapeResizeEnd?: (shapeId: number, newSize: {
        startPoint: {
            x: number;
            y: number;
        };
        endPoint: {
            x: number;
            y: number;
        };
    }) => void;
    onTextTapped?: (textId: number) => void;
    onTextDragStart?: (textId: number) => boolean | void;
    onTextDragChanged?: (textId: number, position: {
        x: number;
        y: number;
    }) => void;
    onTextDragEnd?: (textId: number, position: {
        x: number;
        y: number;
    }) => void;
    onTextEditingComplete?: (text: CanvasText) => void;
    onSketchSaved?: (success: boolean, path: string) => void;
    user?: string;
    touchEnabled?: boolean;
    drawMode?: ShapeType | 'draw' | 'select' | 'move' | 'resize';
    shapeFilled?: boolean;
    shapes?: Shape[];
    text?: CanvasText[];
    shapesMovable?: boolean;
    shapesResizable?: boolean;
    localSourceImage?: {
        filename: string;
        directory?: string;
        mode?: string;
    };
    permissionDialogTitle?: string;
    permissionDialogMessage?: string;
}