penpot/render-wasm/docs/serialization.md
2025-05-06 14:41:40 +02:00

6.9 KiB

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

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
1 Line
2 Triangle
3 Rectangle
4 Circle
5 Diamond
6 Round
7 Square
_ None

Stroke Sytles

Stroke styles are serialized as u8:

Value Field
1 Dotted
2 Dashed
3 Mixed
_ Solid

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 self

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 Auto
1 Start
2 End
3 Center
4 Stretch
_ error

Justify Self

Value Field
0 Auto
1 Start
2 End
3 Center
4 Stretch
_ error

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