react-native-sketch-canvas-enhanced/src/types.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[];
  // Added for background image relative positioning
  relativeData?: string[];
}

export interface Path {
  path: PathData;
  size: { width: number; height: number };
  drawer?: any;
  orientation?: Orientation;
  // Added for background image reference
  backgroundImage?: {
    filename: string;
    directory: string;
    mode: string;
  } | null;
  // Added to track the content mode used when the path was created
  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 };
  // Added for background image relative positioning
  relativeStartPoint?: { x: number; y: number };
  relativeEndPoint?: { x: number; y: number };
  // Added for shape selection, resizing and movement
  isSelected?: boolean;
  isMovable?: boolean;
  isResizable?: boolean;
  // For tracking movement
  lastMovePoint?: { x: number; y: number };
}

export interface Shape {
  shape: ShapeData;
  size: { width: number; height: number };
  drawer?: any;
  orientation?: Orientation;
  // Added for background image reference
  backgroundImage?: {
    filename: string;
    directory: string;
    mode: string;
  } | null;
  // Added to track the content mode used when the shape was created
  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 };
  // Added for background image relative positioning
  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;
  // Shape selection, movement and resizing callbacks
  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;
  // Text callbacks
  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[];
  // Enable/disable shape manipulation
  shapesMovable?: boolean;
  shapesResizable?: boolean;
  localSourceImage?: {
    filename: string;
    directory?: string;
    mode?: string;
  };
  permissionDialogTitle?: string;
  permissionDialogMessage?: string;
}