### Run React Whiteboard Development Environment Source: https://github.com/spiridonov-oa/react-whiteboard-pdf/blob/main/README.md Provides the necessary shell commands to set up and start the development server for the react-whiteboard-pdf project. Users should first install dependencies and then run the start script. ```shell npm i npm start ``` -------------------------------- ### Install react-whiteboard-pdf Package Source: https://github.com/spiridonov-oa/react-whiteboard-pdf/blob/main/README.md Instructions for installing the react-whiteboard-pdf package using npm or yarn, which are common package managers for JavaScript projects. ```shell npm install react-whiteboard-pdf ``` ```shell yarn add react-whiteboard-pdf ``` -------------------------------- ### Advanced Usage Example of Whiteboard Component with Props and Event Handlers Source: https://github.com/spiridonov-oa/react-whiteboard-pdf/blob/main/README.md Illustrates a comprehensive example of using the Whiteboard component, showcasing various props for state management, drawing settings, UI controls, and event handlers. This snippet provides a practical demonstration of the component's full capabilities. ```javascript import { Whiteboard } from 'react-whiteboard-pdf'; const App = () => { return ( {}} // When a file is added onTabStateChange={(state) => {}} // When tab state changes onObjectAdded={(data, event, canvas) => {}} // When object is added to canvas onObjectRemoved={(data, event, canvas) => {}} // When object is removed onObjectModified={(data, event, canvas) => {}} // When object is modified onCanvasRender={(state) => {}} // When canvas renders onCanvasChange={(state) => {}} // When canvas content changes onZoom={(data, event, canvas) => {}} // When zoom is changed onImageUploaded={(file, event, canvas) => {}} // When image is uploaded onPDFUploaded={(file, event, canvas) => {}} // When PDF is uploaded onPDFUpdated={(fileInfo, event, canvas) => {}} // When PDF is updated onPageChange={(state) => {}} // When page is changed onOptionsChange={(options, state) => {}} // When drawing options change onSaveCanvasAsImage={(blob, event, canvas) => {}} // When canvas saved as image onConfigChange={(settings, event, canvas) => {}} // When config is changed onDocumentChanged={(fileInfo, state) => {}} // When document changes /> ); }; ``` -------------------------------- ### Basic Usage of Whiteboard Component in React Source: https://github.com/spiridonov-oa/react-whiteboard-pdf/blob/main/README.md Demonstrates how to integrate the Whiteboard component into a React application with minimal configuration. This snippet shows the simplest way to render the whiteboard. ```javascript const App = () => { return (
); }; ``` -------------------------------- ### Whiteboard Component API Reference Source: https://github.com/spiridonov-oa/react-whiteboard-pdf/blob/main/README.md Detailed API documentation for the Whiteboard React component, outlining its available props, their types, descriptions, and event handlers. This reference provides a comprehensive overview for customizing the component's behavior and appearance. ```APIDOC Whiteboard Component: Props: state: object tabIndex: number - Current active tab index content: object json: object - Canvas JSON data pageNumber: number - Current page number tabsState: array - Optional state for all tabs fileInfo: object - Optional file information activeTabIndex: number - Current active tab index contentJSON: string - JSON string of canvas content drawingSettings: object brushWidth: number - Brush size for drawing (default: 5) currentMode: string - Drawing mode: PENCIL, LINE, RECTANGLE, etc. currentColor: string - Current drawing color fill: boolean - If true, shapes will be filled with color fileInfo: object fileName: string - Name of the current document totalPages: number - Total number of pages currentPageNumber: number - Current page number (0-based) currentPage: string - Current page data pages: array - Array of page data controls: object (UI Controls visibility) PENCIL: boolean - Pencil/freehand drawing tool LINE: boolean - Line drawing tool RECTANGLE: boolean - Rectangle drawing tool ELLIPSE: boolean - Ellipse/circle drawing tool TRIANGLE: boolean - Triangle drawing tool TEXT: boolean - Text tool SELECT: boolean - Selection tool ERASER: boolean - Eraser tool CLEAR: boolean - Clear canvas button FILL: boolean - Fill toggle for shapes BRUSH: boolean - Brush width control COLOR_PICKER: boolean - Color picker DEFAULT_COLORS: boolean - Default color palette FILES: boolean - File upload button SAVE_AS_IMAGE: boolean - Save as image button GO_TO_START: boolean - Reset view button SAVE_AND_LOAD: boolean - Save/load functionality ZOOM: boolean - Zoom controls TABS: boolean - Tab interface Event Handlers: onFileAdded(fileData: any): void - When a file is added onTabStateChange(state: any): void - When tab state changes onObjectAdded(data: any, event: any, canvas: any): void - When object is added to canvas onObjectRemoved(data: any, event: any, canvas: any): void - When object is removed onObjectModified(data: any, event: any, canvas: any): void - When object is modified onCanvasRender(state: any): void - When canvas renders onCanvasChange(state: any): void - When canvas content changes onZoom(data: any, event: any, canvas: any): void - When zoom is changed onImageUploaded(file: any, event: any, canvas: any): void - When image is uploaded onPDFUploaded(file: any, event: any, canvas: any): void - When PDF is uploaded onPDFUpdated(fileInfo: any, event: any, canvas: any): void - When PDF is updated onPageChange(state: any): void - When page is changed onOptionsChange(options: any, state: any): void - When drawing options change onSaveCanvasAsImage(blob: any, event: any, canvas: any): void - When canvas saved as image onConfigChange(settings: any, event: any, canvas: any): void - When config is changed onDocumentChanged(fileInfo: any, state: any): void - When document changes ``` -------------------------------- ### WhiteboardState Object Structure Reference Source: https://github.com/spiridonov-oa/react-whiteboard-pdf/blob/main/README.md Defines the structure of the state object returned by event handlers in the Whiteboard component. It includes content details, page information, and a map of all tabs' states. ```APIDOC WhiteboardState: content: object tabIndex: number // Current active tab index pageNumber: number // Current page number json: object // Canvas JSON data pageNumber: number // Current page number tabIndex: number // Current active tab newTabIndex?: number // New tab index if tab was changed page: object // Current page information pageNumber: number pageData: object contentJSON: string // JSON string of content zoom: number // Current zoom level viewportTransform: number[] // Canvas viewportTransform array tabsState: Map // Map of all tabs' states ``` -------------------------------- ### Define Whiteboard Drawing Modes in JavaScript Source: https://github.com/spiridonov-oa/react-whiteboard-pdf/blob/main/README.md Enumerates the available drawing modes for the Whiteboard component. This object defines constants for various tools like pencil, line, rectangle, text, select, and eraser. ```javascript const modes = { PENCIL: 'PENCIL', // Freehand pencil drawing LINE: 'LINE', // Line drawing RECTANGLE: 'RECTANGLE', // Rectangle shape ELLIPSE: 'ELLIPSE', // Ellipse/circle shape TRIANGLE: 'TRIANGLE', // Triangle shape TEXT: 'TEXT', // Text tool SELECT: 'SELECT', // Selection tool ERASER: 'ERASER' // Eraser tool }; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.