# maths-kit

一个功能完善的数学工具包，包含直尺、量角器、三角板等工具，专为交互式白板和教育应用设计。

## 功能特性

- 🎯 **多种工具**：支持直尺、量角器以及三角板（30°和45°）
- 🎨 **主题支持**：支持亮色和暗色主题
- 🖱️ **交互操作**：拖拽、旋转、拉伸等直观的操作控制
- 📏 **精确测量**：实时显示角度和长度测量结果
- 🔄 **变换支持**：完整的矩阵变换支持，用于定位和缩放
- 📐 **标记线**：支持在画布上标记线和圆
- 🎛️ **可定制**：可配置的默认状态和样式

## 安装

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

## 快速开始

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

// 创建容器元素
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);

// 初始化管理器
const mathsKitManager = new MathsKitManager({
  container: container,
  target: document.body, // 绘图操作的目标元素
  theme: 'light', // 或 'dark'
  globalScale: 1,
});

// 激活管理器
mathsKitManager.setActive(true);

// 创建直尺
mathsKitManager.create(MathsKitType.Ruler);

// 创建量角器
mathsKitManager.create(MathsKitType.Protractor);

// 创建三角板
mathsKitManager.create(MathsKitType.Triangle30);
mathsKitManager.create(MathsKitType.Triangle45);
```

## API 参考

### MathsKitManager

用于创建和管理数学工具的主管理器类。

#### 构造函数选项

```typescript
interface MathsKitManagerOptions {
  /** 容器元素 */
  container: HTMLDivElement;
  /** 绘图操作的目标元素 */
  target: HTMLElement;
  /** 默认工具状态 */
  defaultKitState?: Omit<MathsKitState, 'custom' | 'zIndex' | 'type'>;
  /** 主题：'light' 或 'dark' */
  theme?: 'light' | 'dark';
  /** 全局缩放因子 */
  globalScale?: number;
}
```

#### 方法

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

创建一个新的数学工具。

**示例：**
```typescript
mathsKitManager.create(MathsKitType.Ruler);
```

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

更新工具的状态。

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

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

根据ID删除工具。

**示例：**
```typescript
mathsKitManager.delete('Ruler-1234567890');
```

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

激活或停用管理器。

**示例：**
```typescript
mathsKitManager.setActive(true);
```

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

更改所有工具的主题。

**示例：**
```typescript
mathsKitManager.setTheme('dark');
```

#### 事件

管理器继承自 `EventEmitter2`，因此可以监听事件：

```typescript
// 监听状态变化
mathsKitManager.on('stateChange', (operation, key, value) => {
  console.log('状态已更改:', operation, key, value);
});
```

### MathsKitType

可用工具类型的枚举：

```typescript
enum MathsKitType {
  /** 直尺 */
  Ruler = 'Ruler',
  /** 45度三角板 */
  Triangle45 = 'Triangle45',
  /** 30度三角板 */
  Triangle30 = 'Triangle30',
  /** 量角器 */
  Protractor = 'Protractor',
}
```

### MathsKitState

工具状态的接口：

```typescript
interface MathsKitState {
  /** 工具类型 */
  type: MathsKitType;
  /** X坐标（相对于容器宽度的归一化数据） */
  x: number;
  /** Y坐标（相对于容器高度的归一化数据） */
  y: number;
  /** 工具宽度 */
  width: number;
  /** 工具高度 */
  height: number;
  /** 变换矩阵 */
  matrix: number[];
  /** Z轴索引 */
  zIndex: number;
  /** 自定义数据 */
  custom?: Record<string, any>;
}
```

## 组件

### 直尺 (Ruler)

带有测量刻度的直尺。支持：
- 拖拽移动位置
- 旋转并显示角度
- 拉伸调整长度
- 实时显示长度测量结果

### 量角器 (Protractor)

用于测量角度的半圆形量角器。支持：
- 拖拽移动位置
- 旋转
- 调整起始和结束角度
- 角度测量显示

### 三角板 (Triangle 30° & 45°)

30°-60°-90°和45°-45°-90°的直角三角形。支持：
- 拖拽移动位置
- 旋转
- 实时显示长度和角度测量结果

## 操作

所有工具支持以下操作：

- **拖拽**：点击并拖拽以移动工具
- **旋转**：使用旋转按钮旋转工具
- **拉伸**：拖拽拉伸手柄以调整大小（如适用）
- **删除**：点击删除按钮以移除工具

## 主题

工具包支持两种主题：

- **亮色主题**：默认主题，带有浅色背景
- **暗色主题**：暗色模式，为低光照环境调整了颜色

您可以使用 `setTheme()` 方法切换主题，或在构造函数中使用主题进行初始化。

## 浏览器支持

支持 ES6+ 的现代浏览器：
- Chrome (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- Edge (最新版本)

## 开发

```bash
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 代码检查
pnpm lint

# 修复代码检查问题
pnpm lint:fix
```

## 许可证

MIT

## 作者

hqer