# maths-kit

A comprehensive toolkit for mathematical tools, including Ruler, Protractor, and Triangle, designed for interactive whiteboards and educational applications.

## Features

- 🎯 **Multiple Tools**: Support for Ruler, Protractor, and Triangles (30° & 45°)
- 🎨 **Themes**: Light and dark theme support
- 🖱️ **Interactive Operations**: Drag, rotate, and stretch tools with intuitive controls
- 📏 **Precise Measurement**: Real-time angle and length measurement display
- 🔄 **Transform Support**: Full matrix transformation support for positioning and scaling
- 📐 **Mark Lines**: Support for marking lines and circles on the canvas
- 🎛️ **Customizable**: Configurable default states and styles

## Installation

```bash
npm install @netless/maths-kit
# or
yarn add @netless/maths-kit
# or
pnpm add @netless/maths-kit
```

## Quick Start

```typescript
import { MathsKitManager, MathsKitType } from '@netless/maths-kit';

// Create a container element
const container = document.createElement('div');
container.style.position = 'absolute';
container.style.top = '0';
container.style.left = '0';
container.style.width = '100%';
container.style.height = '100%';
document.body.appendChild(container);

// Initialize the manager
const mathsKitManager = new MathsKitManager({
  container: container,
  target: document.body, // Target element for drawing operations
  theme: 'light', // or 'dark'
  globalScale: 1,
});

// Activate the manager
mathsKitManager.setActive(true);

// Create a ruler
mathsKitManager.create(MathsKitType.Ruler);

// Create a protractor
mathsKitManager.create(MathsKitType.Protractor);

// Create triangles
mathsKitManager.create(MathsKitType.Triangle30);
mathsKitManager.create(MathsKitType.Triangle45);
```

## API Reference

### MathsKitManager

The main manager class for creating and managing mathematical tools.

#### Constructor Options

```typescript
interface MathsKitManagerOptions {
  /** Container element */
  container: HTMLDivElement;
  /** Target element for drawing operations */
  target: HTMLElement;
  /** Default tool state */
  defaultKitState?: Omit<MathsKitState, 'custom' | 'zIndex' | 'type'>;
  /** Theme: 'light' or 'dark' */
  theme?: 'light' | 'dark';
  /** Global scale factor */
  globalScale?: number;
}
```

#### Methods

##### `create(type: MathsKitType): void`

Create a new mathematical tool.

**Example:**
```typescript
mathsKitManager.create(MathsKitType.Ruler);
```

##### `update(kitId: string, state: Partial<MathsKitState>): void`

Update the state of a tool.

**Example:**
```typescript
mathsKitManager.update('Ruler-1234567890', {
  x: 0.5,
  y: 0.5,
  width: 500,
});
```

##### `delete(kitId: string): void`

Delete a tool by its ID.

**Example:**
```typescript
mathsKitManager.delete('Ruler-1234567890');
```

##### `setActive(isActive: boolean): void`

Activate or deactivate the manager.

**Example:**
```typescript
mathsKitManager.setActive(true);
```

##### `setTheme(theme: 'light' | 'dark'): void`

Change the theme for all tools.

**Example:**
```typescript
mathsKitManager.setTheme('dark');
```

#### Events

The manager extends `EventEmitter2`, so you can listen to events:

```typescript
// Listen to state changes
mathsKitManager.on('stateChange', (operation, key, value) => {
  console.log('State changed:', operation, key, value);
});
```

### MathsKitType

Enumeration of available tool types:

```typescript
enum MathsKitType {
  /** Ruler */
  Ruler = 'Ruler',
  /** 45-degree triangle */
  Triangle45 = 'Triangle45',
  /** 30-degree triangle */
  Triangle30 = 'Triangle30',
  /** Protractor */
  Protractor = 'Protractor',
}
```

### MathsKitState

Interface for tool state:

```typescript
interface MathsKitState {
  /** Tool type */
  type: MathsKitType;
  /** X coordinate (normalized to container width) */
  x: number;
  /** Y coordinate (normalized to container height) */
  y: number;
  /** Tool width */
  width: number;
  /** Tool height */
  height: number;
  /** Transformation matrix */
  matrix: number[];
  /** Z-index */
  zIndex: number;
  /** Custom data */
  custom?: Record<string, any>;
}
```

## Components

### Ruler

A straightedge ruler with measurement markings. Supports:
- Dragging to reposition
- Rotating with angle display
- Stretching to adjust length
- Real-time length measurement display

### Protractor

A semicircular protractor for measuring angles. Supports:
- Dragging to reposition
- Rotating
- Adjusting start and end angles
- Angle measurement display

### Triangle (30° & 45°)

Right-angled triangles with 30°-60°-90° and 45°-45°-90° angles. Support:
- Dragging to reposition
- Rotating
- Real-time length and angle measurements

## Operations

All tools support the following operations:

- **Drag**: Click and drag to move the tool
- **Rotate**: Use the rotate button to rotate the tool
- **Stretch**: Drag the stretch handle to resize (where applicable)
- **Delete**: Click the delete button to remove the tool

## Themes

The toolkit supports two themes:

- **Light Theme**: Default theme with light backgrounds
- **Dark Theme**: Dark mode with adjusted colors for low-light environments

You can switch themes using the `setTheme()` method or initialize with a theme in the constructor.

## Browser Support

Modern browsers with ES6+ support:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Development

```bash
# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Lint code
pnpm lint

# Fix linting issues
pnpm lint:fix
```

## License

MIT

## Author

hqer