# `Rect`

A rectangle by its top-left corner and its size, written like an SVG `viewBox`: `0 0 300 200`.

Use it for a crop or a region of an image. For space around an edge, use [`Insets`](/docs/types/type-insets.md).

## Shape

| Field | Type | Required? |
|---|---|---|
| `x` | `Decimal` | Yes |
| `y` | `Decimal` | Yes |
| `width` | `Decimal` | Yes |
| `height` | `Decimal` | Yes |

## Example

```jadpo
Rect { x: 0.0 y: 0.0 width: 300.0 height: 200.0 }
```

`text.parse(raw, as: Rect)` reads one from text that comes from outside. Text that isn't one at all fails `malformed`, such as `0,0,300,200`, `0 0 -1 200` or `0 0 300 -0.5`.

## Good to know

- `x` and `y` can be below zero, but the width and height can't.
- `==` tells you whether two are the same. `<` and `list.sort_by` don't take it, so sort by one of its parts instead.

## In JSON

An object of its parts, in a request, a response or `json.write`:

```json
{"x":"0","y":"0","width":"300","height":"200"}
{"x":"-10.5","y":"20","width":"300.25","height":"0"}
{"x":"12","y":"8","width":"0.5","height":"1.50"}
```

## Details

<details>
<summary>Text form, storage, how it is shown, and operations</summary>

`Rect` is in the group Media and visual, and has been in Jadpo since 0.1.0.

### Text form

`text.from` writes one standard text form, the same form `text.parse` reads back: `0 0 300 200`, `-10.5 20 300.25 0` and `12 8 0.5 1.50`.

### How it is stored

It is stored in 4 columns, each named for the field, `_` and its suffix. This is `-10.5 20 300.25 0`:

| Column | Type | Holds |
|---|---|---|
| `<field>_x` | `numeric` | `-10.5` |
| `<field>_y` | `numeric` | `20` |
| `<field>_width` | `numeric` | `300.25` |
| `<field>_height` | `numeric` | `0` |

### How it is shown to people

`text.format(value, locale:)` shows it to people in their locale.

With `locale: Locale.en_gb`:

| Value | Shown |
|---|---|
| `0 0 300 200` | `0 0 300 200` |
| `-10.5 20 300.25 0` | `-10.5 20 300.25 0` |
| `12 8 0.5 1.50` | `12 8 0.5 1.50` |

### Operations

It also takes `text.parse`, `text.from`, `text.format`, `json.read`, `json.write` and `==`. [How every standard type behaves](/docs/every-standard-type-meets-one-contract.md) says how they work.

</details>