React Whiteboard PDF

https://github.com/spiridonov-oa/react-whiteboard-pdf
Admin
A React virtual whiteboard component with functionality for uploading and interacting with PDF...
Tokens:2,272
Snippets:7
Trust Score:6.1
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### 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 (
    <Whiteboard
      // State management for tab, canvas, and pages
      state={{
        tabIndex: 0, // Current active tab index
        content: {
          // Canvas content information
          json: canvasJSON, // Canvas JSON data
          pageNumber: 0, // Current page number
        },
        tabsState: [], // Optional state for all tabs
        fileInfo: {}, // Optional file information
      }}
      // Active tab index
      activeTabIndex={0}
      // JSON string of canvas content
      contentJSON={JSON.stringify(canvasJSON)}
      // Drawing settings
      drawingSettings={{
        brushWidth: 5, // Brush size for drawing (default: 5)
        currentMode: 'PENCIL', // Drawing mode: PENCIL, LINE, RECTANGLE, etc.
        currentColor: '#000000', // Current drawing color
        fill: false, // If true, shapes will be filled with color
      }}
      // File information
      fileInfo={{
        fileName: 'Document', // Name of the current document
        totalPages: 1, // Total number of pages
        currentPageNumber: 0, // Current page number (0-based)
        currentPage: '', // Current page data
        pages: [], // Array of page data
      }}
      // UI Controls visibility
      controls={{
        PENCIL: true, // Pencil/freehand drawing tool
        LINE: true, // Line drawing tool
        RECTANGLE: true, // Rectangle drawing tool
        ELLIPSE: true, // Ellipse/circle drawing tool
        TRIANGLE: true, // Triangle drawing tool
        TEXT: true, // Text tool
        SELECT: true, // Selection tool
        ERASER: true, // Eraser tool
        CLEAR: true, // Clear canvas button
        FILL: true, // Fill toggle for shapes
        BRUSH: true, // Brush width control
        COLOR_PICKER: true, // Color picker
        DEFAULT_COLORS: true, // Default color palette
        FILES: true, // File upload button
        SAVE_AS_IMAGE: true, // Save as image button
        GO_TO_START: true, // Reset view button
        SAVE_AND_LOAD: true, // Save/load functionality
        ZOOM: true, // Zoom controls
        TABS: true, // Tab interface
      }}
      // Event handlers
      onFileAdded={(fileData) => {}} // 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 (
    <div>
      <Whiteboard />
    </div>
  );
};
```

--------------------------------

### 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<number, TabState> // 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
};
```
Tokens:
Raw