PDFDancer Frontend

A React-based Canvas renderer for PDF-like operator streams with XML upload capabilities.

Overview

PDFDancer Frontend is a sophisticated PDF rendering engine that processes XML-formatted PDF operator streams and renders them on HTML5 Canvas. The application supports interactive debugging, font analysis, and element visualization.

Features

• XML Upload & Processing: Upload and parse XML files containing PDF operator streams
• Canvas-based Rendering: High-performance Canvas rendering with support for complex PDF operations
• Interactive Debugging: Toggle debug mode with element bounds visualization
• Font Analysis: Comprehensive font information and resolution tracking
• Multi-page Support: Navigate through multi-page documents
• Live Preview: Real-time rendering updates with debugging capabilities

Tech Stack

• Frontend: React 18 with functional components and hooks
• Rendering: HTML5 Canvas with custom PDF operator implementation
• Build: Rollup for library builds, CRACO for development
• Testing: Jest with React Testing Library
• XML Parsing: SAX parser for efficient XML processing
• Logging: Configurable log levels with loglevel

Development

Prerequisites

• Node.js (version specified in package.json peer dependencies)
• npm or yarn

Installation

npm install

Available Scripts

• npm run dev - Start development server
• npm run build - Build library for distribution
• npm run build:app - Build standalone application
• npm test - Run test suite
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint issues automatically
• npm run cli - Run PDF renderer CLI tool
• npm run xml-roundtrip - XML roundtrip testing utility

Project Structure

src/
├── components/          # React components
├── rendering/           # Canvas rendering engine
├── parsers/            # XML and data parsers
├── models/             # Data models and structures
├── services/           # Business logic services
├── util/               # Utility functions
├── cli/                # Command-line interface
└── test/               # Test files and utilities

Key Components

• PDFDancer: Main rendering component with Canvas integration
• XMLUploader: File upload and XML parsing interface
• Rendering Engine: Core PDF operator stream processor
• Font Resolution: Advanced font handling and caching system

Usage

As a Library

import PDFDancer from 'pdfdancer-react';

// Use PDFDancer component in your React application
<PDFDancer
  xmlContent={xmlData}
  onError={handleError}
  onFontInfo={handleFontInfo}
  debugMode={true}
  showElementBounds={false}
/>

CLI Tool

npm run cli -- [options] input.xml

Configuration

Debug mode can be enabled through:

• Environment variables (see src/util/env.js)
• Runtime toggle in the application interface
• CLI flags for command-line usage

Testing

The project includes comprehensive test coverage for:

• Rendering engine components
• XML parsing and validation
• Font resolution systems
• Canvas operations
• Regression testing with visual comparisons

Run tests with:

npm test

Contributing

1. Follow the existing code style and conventions
2. Run tests before submitting changes
3. Use the linting tools to maintain code quality
4. Check the test results and regression comparisons

License

Private package - see package.json for details.