ColorRM Data Format v2.md

View and share code snippets on Pastefy.

# ColorRM Data Format v2

This document describes the ColorRM JSON data format version 2, used for storing and rendering drawings.

## Format Overview

```json
{
  "metadata": { ... },
  "history": [ ... ]
}
```

## Metadata

```json
{
  "version": 2,
  "sourceType": "svg",
  "width": 800,
  "height": 600,
  "viewBox": { "x": 0, "y": 0, "w": 800, "h": 600 },
  "elementCount": 42,
  "statistics": {
    "pen": 10,
    "highlighter": 5,
    "shape": 8,
    "text": 15,
    "image": 4
  },
  "backgroundCount": 1
}
```

| Field | Type | Description |
|-------|------|-------------|
| `version` | number | Format version (2 for this spec) |
| `sourceType` | string | Source format ("svg", "native") |
| `width` | number | Document width in pixels |
| `height` | number | Document height in pixels |
| `viewBox` | object | SVG viewBox (if from SVG source) |
| `elementCount` | number | Total number of elements |
| `statistics` | object | Count per tool type |
| `backgroundCount` | number | Number of detected background images |

## History Elements

The `history` array contains drawing elements in z-order (first = bottom, last = top).

### Common Properties (all elements)

| Property | Type | Required | Description |
|----------|------|----------|-------------|
| `id` | string | Yes | Unique element ID |
| `lastMod` | number | Yes | Last modification timestamp |
| `tool` | string | Yes | Tool type (see below) |
| `deleted` | boolean | No | If true, element is hidden |

### Tool Types

---

## 1. Pen (`tool: "pen"`)

Freehand strokes with solid color.

```json
{
  "id": "abc123",
  "lastMod": 1704067200000,
  "tool": "pen",
  "pts": [
    { "x": 100, "y": 200 },
    { "x": 105, "y": 202 },
    { "x": 110, "y": 205 }
  ],
  "color": "#000000",
  "size": 2,
  "opacity": 1,
  "lineCap": "round",
  "lineJoin": "round",
  "rotation": 0,
  "deleted": false
}
```

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `pts` | array | Required | Array of {x, y} points |
| `color` | string | "#000000" | Stroke color (hex) |
| `size` | number | 2 | Stroke width in pixels |
| `opacity` | number | 1 | Opacity (0-1) |
| `lineCap` | string | "round" | Line cap style |
| `lineJoin` | string | "round" | Line join style |

---

## 2. Highlighter (`tool: "highlighter"`)

Semi-transparent strokes, typically wider.

```json
{
  "id": "def456",
  "tool": "highlighter",
  "pts": [...],
  "color": "#FFFF00",
  "size": 20,
  "opacity": 0.4
}
```

Same properties as `pen`, but typically:
- Larger `size` (10-40)
- Lower `opacity` (0.2-0.5)

---

## 3. Shape (`tool: "shape"`)

Geometric shapes with fill and border.

```json
{
  "id": "ghi789",
  "tool": "shape",
  "shapeType": "rectangle",
  "x": 50,
  "y": 100,
  "w": 200,
  "h": 150,
  "fillColor": "#FFCC00",
  "borderColor": "#000000",
  "fillOpacity": 0.5,
  "borderOpacity": 1,
  "borderSize": 2,
  "borderType": "solid",
  "rotation": 0
}
```

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `shapeType` | string | "rectangle" | Shape type (see below) |
| `x`, `y` | number | 0 | Position |
| `w`, `h` | number | 100 | Dimensions |
| `fillColor` | string | "transparent" | Fill color |
| `borderColor` | string | "#000000" | Border color |
| `fillOpacity` | number | 1 | Fill opacity |
| `borderOpacity` | number | 1 | Border opacity |
| `borderSize` | number | 2 | Border width |
| `borderType` | string | "solid" | Border style |
| `rotation` | number | 0 | Rotation in degrees |

### Shape Types
- `rectangle` - Rectangular shape
- `ellipse` - Ellipse/oval
- `circle` - Perfect circle
- `triangle` - Triangle
- `arrow` - Arrow shape
- `line` - Straight line
- `polygon` - Custom polygon (uses `pts`)

### Border Types
- `solid` - Solid line
- `dashed` - Dashed line (stroke-dasharray: "10,5")
- `dotted` - Dotted line (stroke-dasharray: "2,3")

### Polygon Shape

When `shapeType: "polygon"`, uses normalized points:

```json
{
  "shapeType": "polygon",
  "x": 100,
  "y": 100,
  "w": 200,
  "h": 150,
  "pts": [
    { "x": 0.5, "y": 0 },
    { "x": 1,

Tags