1# Morphorm Styles
2
3## Unique Types
4
5`LayoutType` (corresponds to `Display` in Taffy):
6
7```rust
8enum LayoutType {
9    Row,
10    Column,
11    Grid,
12}
13```
14
15`PositionType` (corresponds to `Position` in Taffy):
16
17```rust
18pub enum PositionType {
19    SelfDirected, // = Position::Absolute
20    ParentDirected, // = Position::Relative
21}
22```
23
24`Units` (corresponds to `Dimension` in Taffy):
25
26```rust
27pub enum Units {
28    Pixels(f32), // = Dimension::Length
29    Percentage(f32), // = Dimension::Percent
30    Auto, // = Dimension::Auto
31    Stretch(f32), // No equivalent in Taffy!
32}
33```
34
35## Style Properties
36
37| Property               | Type          | Description                                                         |
38| ---                    | ---           | ---                                                                 |
39| **Layout Mode**        |               |                                                                     |
40| `layout_mode`          | `LayoutType`  | Row vs. Column vs. Grid                                             |
41| `position_type`        | `Position`    | SelfDirected (absolute) vs. ParentDirected (in-flow) position       |
42| **Item size**          |               |                                                                     |
43| `size`                 | `Size<Units>` | The preferred height and width of item                              |
44| `min_size`             | `Size<Units>` | The minimum height and width of the item                            |
45| `max_size`             | `Size<Units>` | The maximum height and width of the item                            |
46| **Border**             |               |                                                                     |
47| `border`               | `Rect<Units>` | How large should the border be on each side?                        |
48| **Morphorm Container** |               |                                                                     |
49| `child_spacing`        | `Rect<Units>` | Sets the default "spacing" (~margin) on each side of child nodes    |
50| `row_between`          | `Units`       | Sets the default vertical "spacing" (~margin) between child nodes   |
51| `col_between`          | `Units`       | Sets the default horizontal "spacing" (~margin) between child nodes |
52| `grid_rows`            | `Vec<Units>`  | (Grid Container) Row definitions with a size for each row           |
53| `grid_cols`            | `Vec<Units>`  | (Grid Container) Column definitions with a size for each column     |
54| **Morphorm Item**      |               |                                                                     |
55| `spacing`              | `Rect<Units>` | The preferred spacing on each side of the item                      |
56| `min_spacing`          | `Rect<Units>` | The minimum spacing on each side of the item                        |
57| `max_spacing`          | `Rect<Units>` | The maximum spacing on each side of the item                        |
58| `row_index`            | `usize`       | (Grid Item) Zero-based index for the start row of the item          |
59| `col_index`            | `usize`       | (Grid Item) Zero-based index for the start column of the item       |
60| `row_span`             | `usize`       | (Grid Item) The number of rows the item spans                       |
61| `col_span`             | `usize`       | (Grid Item) The number of columns the item spans                    |
62
63### Analysis
64
65Nearly everything in Morphorm is simplified version of either Flexbox or CSS Grid. There are really three things that aren't:
66
67- The `child_spacing` and `*_between` properties. CSS does not allow you to specify child margins on the parent like this. It does have the `align-items` and `justify-items` properties, but those are not as powerful.
68- The `min_spacing` and `max_spacing` properties. CSS does not allow you to specify min or max values for margins.
69- The `Stretch` variant of `Units`. Flexbox/CSS Grid do not allow you to express "fill available space" as a size like this. To achieve this with Flexbox/CSS Grid you need to use special properties that are specified separately.
70
71The only really tricky thing here is the `width`/`height` properties. They are common to all algorithms, and furthermore by *both* parent and child nodes access this property. This means that the type of these properties really needs to be a single unified type. I thought this might be a blocker, however I have discovered that an upcoming CSS standard ([[css-sizing-4](https://www.w3.org/TR/css-sizing-4)]) actually does [define this functionality](https://www.w3.org/TR/css-sizing-4/#stretch-fit-sizing)) and in fact even calls it `stretch`. The CSS version doesn't have the weighting parameter (although I have [opened an issue](https://github.com/w3c/csswg-drafts/issues/8267) proposing that it does - no idea if that's the right place to do that though) so it is roughly equivalent to `Stretch(1.0)`, but that would a pretty straightforward extension.