Skip to content

Latest commit

 

History

History
71 lines (58 loc) · 4.86 KB

morphorm-style-properties.md

File metadata and controls

71 lines (58 loc) · 4.86 KB

Morphorm Styles

Unique Types

LayoutType (corresponds to Display in Taffy):

enum LayoutType {
    Row,
    Column,
    Grid,
}

PositionType (corresponds to Position in Taffy):

pub enum PositionType {
    SelfDirected, // = Position::Absolute
    ParentDirected, // = Position::Relative
}

Units (corresponds to Dimension in Taffy):

pub enum Units {
    Pixels(f32), // = Dimension::Length
    Percentage(f32), // = Dimension::Percent
    Auto, // = Dimension::Auto
    Stretch(f32), // No equivalent in Taffy!
}

Style Properties

Property Type Description
Layout Mode
layout_mode LayoutType Row vs. Column vs. Grid
position_type Position SelfDirected (absolute) vs. ParentDirected (in-flow) position
Item size
size Size<Units> The preferred height and width of item
min_size Size<Units> The minimum height and width of the item
max_size Size<Units> The maximum height and width of the item
Border
border Rect<Units> How large should the border be on each side?
Morphorm Container
child_spacing Rect<Units> Sets the default "spacing" (~margin) on each side of child nodes
row_between Units Sets the default vertical "spacing" (~margin) between child nodes
col_between Units Sets the default horizontal "spacing" (~margin) between child nodes
grid_rows Vec<Units> (Grid Container) Row definitions with a size for each row
grid_cols Vec<Units> (Grid Container) Column definitions with a size for each column
Morphorm Item
spacing Rect<Units> The preferred spacing on each side of the item
min_spacing Rect<Units> The minimum spacing on each side of the item
max_spacing Rect<Units> The maximum spacing on each side of the item
row_index usize (Grid Item) Zero-based index for the start row of the item
col_index usize (Grid Item) Zero-based index for the start column of the item
row_span usize (Grid Item) The number of rows the item spans
col_span usize (Grid Item) The number of columns the item spans

Analysis

Nearly everything in Morphorm is simplified version of either Flexbox or CSS Grid. There are really three things that aren't:

  • 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.
  • The min_spacing and max_spacing properties. CSS does not allow you to specify min or max values for margins.
  • 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.

The 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]) actually does define this functionality) and in fact even calls it stretch. The CSS version doesn't have the weighting parameter (although I have opened an issue 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.