\r\n );\r\n};\r\n\r\nexport default App;\r\n```\r\n\r\n---\r\n\r\n## 📚 API Reference\r\n\r\n### `` Props\r\n\r\n| Prop | Type | Description | Default |\r\n|-----------------------------|-------------------------------------------|------------------------------------------------------------------|--------------------|\r\n| `image_url` | `string` | URL of the image to annotate (**required**) | — |\r\n| `initial_Annotations` | `MetaData[]` | Initial comment annotations | `[]` |\r\n| `initial_Paths` | `UserCanvasPath[]` | Initial drawing paths | `[]` |\r\n| `onCommentAdd` | `(comment: MetaData) => void` | Callback when a new comment is added | — |\r\n| `onReplyAdd` | `(reply: MetaData, parentId: string) => void` | Callback when a reply to a comment is added | — |\r\n| `onSave` | `(metaData: MetaData[], paths: UserCanvasPath[]) => void` | Callback when save action is triggered | — |\r\n| `onDelete` | `(metadataId: string) => void` | Callback when a comment or reply is deleted | — |\r\n| `enableDrawing` | `boolean` | Enable or disable drawing mode | `true` |\r\n| `currentUserData` | `{ userId: string; userName?: string }` | Current user info for created comments | `{ userId: 'Unknown' }` |\r\n| `maxWidth` | `number` | Max width of image container | Responsive default |\r\n| `maxHeight` | `number` | Max height of image container | Responsive default |\r\n| `commentPillStyle` | `React.CSSProperties` | Custom style for comment pills | — |\r\n| `commentHoverMenuStyle` | `React.CSSProperties` | Style for comment hover menu | — |\r\n| `commentSidebarStyle` | `React.CSSProperties` | Style for the comment sidebar | — |\r\n| `commentOptionMenuStyle` | `React.CSSProperties` | Style for comment option menus | — |\r\n| `actionIcons` | `Record` | Custom action icons for toolbar | — |\r\n| `actionToolbarStyle` | `React.CSSProperties` | Style for the action toolbar | — |\r\n| `sketchCanvasStyle` | `React.CSSProperties` | Style for the drawing canvas | — |\r\n| `imageContainerStyle` | `React.CSSProperties` | Style for the image container wrapper | — |\r\n| `commentItems` | `React.ReactNode` | Custom comment item renderer | — |\r\n| `disableAnnotationDragging` | `boolean` | Disable dragging of comment annotations | `false` |\r\n| `drawingOptions` | `{ strokeColor?: string; strokeWidth?: number; }` | Drawing tool options (color, width) | — |\r\n| `renderPathTooltip` | `(path: UserCanvasPath, index: number) => React.ReactNode` | Custom tooltip renderer for drawing paths | — |\r\n\r\n#### Callback Details\r\n\r\n- **onCommentAdd(comment: MetaData):**\r\n Called when a new comment is added. Receives the comment object.\r\n- **onReplyAdd(reply: MetaData, parentId: string):**\r\n Called when a reply is added to a comment. Receives the reply and parent comment ID.\r\n- **onSave(metaData: MetaData[], paths: UserCanvasPath[]):**\r\n Called when the user triggers a save action. Receives all metadata and drawing paths.\r\n- **onDelete(metadataId: string):**\r\n Called when a comment or reply is deleted. Receives the metadata ID.\r\n\r\n---\r\n\r\n## 🧩 Custom Drawing Path Tooltip (`renderPathTooltip`)\r\n\r\nYou can provide a custom tooltip for each drawing path using the `renderPathTooltip` prop. This function receives the path object and its index, and should return a React node to display as a tooltip when hovering over a path.\r\n\r\n**Example:**\r\n\r\n```jsx\r\nconst renderPathTooltip = (path, index) => (\r\n
\r\n
Drawn by: {path.user?.userName || 'Unknown'}
\r\n
Path #{index + 1}
\r\n
Points: {path.paths.length}
\r\n
\r\n);\r\n\r\n\r\n```\r\n\r\n---\r\n\r\n## 🏗️ Architecture Overview\r\n\r\n- **Component Structure:**\r\n - `Annotator` is the main component, managing state and context for annotation, drawing, and UI.\r\n - Modular subcomponents: `SketchCanvas`, `MetaDataLayer`, `ActionBar`, `MetaDataSideBar`, `BottomMetaDataMenu`, etc.\r\n - Uses React Context for state sharing and hooks for responsive layout and performance.\r\n- **Drawing Engine:**\r\n - Freehand drawing with undo/redo, eraser, and color/stroke selection.\r\n - Drawing paths are normalized for responsive scaling.\r\n- **Comment System:**\r\n - Threaded comments with drag-and-drop, reply, and delete support.\r\n - Sidebar and overlay UI for managing and viewing comments.\r\n- **Customization:**\r\n - All UI elements can be styled or replaced via props.\r\n - Supports custom icons, toolbars, and comment rendering.\r\n\r\n---\r\n\r\n## 🤝 Contributing\r\n\r\nContributions are welcome! To contribute:\r\n\r\n1. Fork the repository and create your branch from `main`.\r\n2. Run `npm install` to install dependencies.\r\n3. Make your changes and add tests if applicable.\r\n4. Run `npm run lint` and `npm run build` to ensure code quality.\r\n5. Submit a pull request with a clear description of your changes.\r\n\r\n### Guidelines\r\n- Follow the existing code style and naming conventions.\r\n- Write clear, concise commit messages.\r\n- Add or update documentation as needed.\r\n- Ensure all tests pass before submitting.\r\n\r\n---\r\n\r\n## 📄 License\r\n\r\nMIT\r\n\r\n\r\n\r\n","readmeFilename":"README.md"}