# Serialization

## Shape Type

Shape types are serialized as `u8`:

| Value | Field  |
| ----- | ------ |
| 0     | Frame  |
| 1     | Group  |
| 2     | Bool   |
| 3     | Rect   |
| 4     | Path   |
| 5     | Text   |
| 6     | Circle |
| 7     | SvgRaw |
| 8     | Image  |
| \_    | Rect   |

## Horizontal Constraint

Horizontal constraints are serialized as `u8`:

| Value | Field     |
| ----- | --------- |
| 0     | Left      |
| 1     | Right     |
| 2     | Leftright |
| 3     | Center    |
| 4     | Scale     |
| \_    | None      |

## Vertical Constraint

Vertical constraints are serialized as `u8`:

| Value | Field     |
| ----- | --------- |
| 0     | Top       |
| 1     | Bottom    |
| 2     | Topbottom |
| 3     | Center    |
| 4     | Scale     |
| \_    | None      |

## Vertical Alignment

Vertical alignment is serialized as `u8`:

| Value | Field  |
| ----- | ------ |
| 0     | Top    |
| 1     | Center |
| 2     | Bottom |
| \_    | Top    |

## Paths

Paths are made of segments of **28 bytes** each. The layout (assuming positions in a `Uint8Array`) is the following:

| Offset | Length (bytes) | Data Type | Field   |
| ------ | -------------- | --------- | ------- |
| 0      | 2              | `u16`     | Command |
| 2      | 2              | `u16`     | Flags   |
| 4      | 4              | `f32`     | `c1_x`  |
| 8      | 4              | `f32`     | `c1_y`  |
| 12     | 4              | `f32`     | `c2_x`  |
| 16     | 4              | `f32`     | `c2_y`  |
| 20     | 4              | `f32`     | `x`     |
| 24     | 4              | `f32`     | `y`     |

**Command** can be one of these values:

- `:move-to`: `1`
- `:line-to`: `2`
- `:curve-to`: `3`
- `:close-path`: `4`

**Flags** is not being used at the moment.

## Fills

All fills take `160` bytes, but depending on the fill type, not all bytes are actually used.

### Solid color fills

| Offset | Length (bytes) | Data Type | Field      |
| ------ | -------------- | --------- | ---------- |
| 0      | 1              | `0x00`    | Fill type  |
| 1      | 3              | ?         | Reserved   |
| 4      | 4              | `u32`     | ARGB color |

### Image fills

| Offset | Length (bytes) | Data Type | Field     |
| ------ | -------------- | --------- | --------- |
| 0      | 1              | `0x03`    | Fill type |
| 1      | 3              | ?         | Reserved  |
| 4      | 4              | `u32`     | `a` (ID)  |
| 8      | 4              | `u32`     | `b` (ID)  |
| 12     | 4              | `u32`     | `c` (ID)  |
| 16     | 4              | `u32`     | `d` (ID)  |
| 20     | 4              | `f32`     | Opacity   |
| 24     | 4              | `width`   | Opacity   |
| 29     | 4              | `height`  | Opacity   |

### Gradient fills

| Offset | Length (bytes) | Data Type   | Field       |
| ------ | -------------- | ----------- | ----------- |
| 0      | 1              | `0x03`      | Fill type\* |
| 1      | 3              | ?           | Reserved    |
| 4      | 4              | `f32`       | Start `x`   |
| 8      | 4              | `f32`       | Start `y`   |
| 12     | 4              | `f32`       | End `x`     |
| 16     | 4              | `f32`       | End `y`     |
| 20     | 4              | `f32`       | Opacity     |
| 24     | 4              | `f32`       | Width\*\*   |
| 28     | 4              | `u8`        | Stop count  |
| 29     | 3              | ?           | Reserved    |
| 32     | 128            | _See below_ | Stop data   |

\*: **Fill type** is `0x01` for linear gradients and `0x02` for radial gradients.

\*\*: **Width** is unused in linear gradients.

#### Gradient stop data

Gradient stops are serialized as a sequence of `16` chunks with the following layout:

| Offset | Length (bytes) | Data Type | Field       |
| ------ | -------------- | --------- | ----------- |
| 0      | 4              | `u32`     | ARGB Color  |
| 4      | 4              | `f32`     | Stop offset |

## Stroke Caps

Stroke caps are serialized as `u8`:

| Value | Field         |
| ----- | ------------- |
| 0     | None          |
| 1     | LineArrow     |
| 2     | TriangleArrow |
| 3     | SquareMarker  |
| 4     | CircleMarker  |
| 5     | DiamondMarker |
| 6     | Round         |
| 7     | Square        |
| \_    | None          |

## Stroke Styles

Stroke styles are serialized as `u8`:

| Value | Field  |
| ----- | ------ |
| 1     | Dotted |
| 2     | Dashed |
| 3     | Mixed  |
| \_    | Solid  |

## Fill rules

Fill rules are serialized as `u8`

| Value | Field   |
| ----- | ------  |
| 0     | Nonzero |
| 1     | Evenodd |
| \_    | Nonzero |

## Stroke linecaps

Stroke linecaps are serialized as `u8`

| Value | Field  |
| ----- | ------ |
| 0     | Butt   |
| 1     | Round  |
| 2     | Square |
| \_    | Butt   |

## Stroke linejoins

Stroke linejoins are serialized as `u8`

| Value | Field  |
| ----- | ------ |
| 0     | Miter  |
| 1     | Round  |
| 2     | Bevel  |
| \_    | Miter  |

## Bool Operations

Bool operations (`bool-type`) are serialized as `u8`:

| Value | Field        |
| ----- | ------------ |
| 0     | Union        |
| 1     | Difference   |
| 2     | Intersection |
| 3     | Exclusion    |
| \_    | Union        |

## BlurType

Blur types are serialized as `u8`:

| Value | Field |
| ----- | ----- |
| 1     | Layer |
| \_    | None  |

## Shadow Styles

Shadow styles are serialized as `u8`:

| Value | Field        |
| ----- | ------------ |
| 0     | Drop Shadow  |
| 1     | Inner Shadow |
| \_    | Drop Shadow  |

## Layout

### Flex Direction

| Value | Field         |
| ----- | ------------- |
| 0     | Row           |
| 1     | RowReverse    |
| 2     | Column        |
| 3     | ColumnReverse |
| \_    | error         |

### Grid Direction

| Value | Field  |
| ----- | ------ |
| 0     | Row    |
| 1     | Column |
| \_    | error  |

### Align Items

| Value | Field   |
| ----- | ------- |
| 0     | Start   |
| 1     | End     |
| 2     | Center  |
| 3     | Stretch |
| \_    | error   |

### Align Content

| Value | Field         |
| ----- | ------------- |
| 0     | Start         |
| 1     | End           |
| 2     | Center        |
| 3     | Space between |
| 4     | Space around  |
| 5     | Space evenly  |
| 6     | Stretch       |
| \_    | error         |

### Justify items

| Value | Field   |
| ----- | ------- |
| 0     | Start   |
| 1     | End     |
| 2     | Center  |
| 3     | Stretch |
| \_    | error   |

### Justify content

| Value | Field         |
| ----- | ------------- |
| 0     | Start         |
| 1     | End           |
| 2     | Center        |
| 3     | Space between |
| 4     | Space around  |
| 5     | Space evenly  |
| 6     | Stretch       |
| \_    | error         |

### Align Self

| Value | Field         |
| ----- | ------------- |
| 0     | (none)        |
| 1     | Auto          |
| 2     | Start         |
| 3     | End           |
| 4     | Center        |
| 5     | Stretch       |
| \_    | (unsupported) |

### Justify Self

| Value | Field         |
| ----- | ------------- |
| 0     | (none)        |
| 1     | Auto          |
| 2     | Start         |
| 3     | End           |
| 4     | Center        |
| 5     | Stretch       |
| \_    | (unsupported) |

### Wrap type

| Value | Field   |
| ----- | ------- |
| 0     | Wrap    |
| 1     | No Wrap |
| \_    | error   |

### Sizing

| Value | Field |
| ----- | ----- |
| 0     | Fill  |
| 1     | Fix   |
| 2     | Auto  |
| \_    | error |

### Grid Track Type

| Value | Field   |
| ----- | ------- |
| 0     | Percent |
| 1     | Flex    |
| 2     | Auto    |
| 3     | Fixed   |
| \_    | error   |

## Font

### Style

| Value | Variant |
| ----- | ------- |
| 0     | Normal  |
| 1     | Italic  |
| \_    | Normal  |