package toffee

  1. Overview
  2. Docs
CSS layout engine for OCaml (Flexbox, Grid, Block)

Install 

dune-project
 Dependency

github.com Readme Changelog Edit opam file Versions (1)

Authors

  1. Thibaut Mattio

Maintainers

  1. Thibaut Mattio

Sources

mosaic-0.1.0.tbz
sha256=9e4e90d17f9b2af1b07071fe425bc2c519c849c4f1d1ab73cde512be2d874849
sha512=06e9c4a741590942e81a27738d0b5c0413fafec8cf3b7dae047ad69f155e7b718aa4223818dc161b7d028efffcfd3365905e264d6fd31d453910ddfa91dcf9b9

doc/toffee.tree/Tree/Layout/index.html

Module Tree.LayoutSource

Final computed layout for a single node.

Layout represents the output of a layout algorithm, containing all spatial and box model information needed to render a node. This includes the node's position, dimensions, spacing properties (border, padding, margin), and rendering order.

Box Model

CSS layout uses a nested box model where each node has multiple boxes:

  • Margin box: outermost, transparent spacing around the border
  • Border box: contains the border, padding, and content
  • Padding box: spacing between border and content
  • Content box: innermost, holds the actual content

The size field represents the border box dimensions. Use content_box_size to compute the content box dimensions. The content_size field may exceed size when content overflows, which is important for computing scroll dimensions.

Coordinate System

The location field specifies the top-left corner of the node's margin box relative to its parent's content box origin. This is the primary positioning coordinate. To compute other box positions, use content_box_x and content_box_y which add the appropriate spacing offsets.

Type

Sourcetype t = {
  1. order : int;
    (*

    Rendering order for layering. Nodes with higher order values render on top of nodes with lower values. This implements a topological sort of the tree.

    *)
  2. location : float Geometry.point;
    (*

    Top-left corner of the margin box relative to the parent's content box.

    *)
  3. size : float Geometry.size;
    (*

    Width and height of the border box (includes padding and border, but not margin).

    *)
  4. content_size : float Geometry.size;
    (*

    Width and height of the content inside the node. May exceed size when content overflows, useful for computing scroll dimensions.

    *)
  5. scrollbar_size : float Geometry.size;
    (*

    Size of scrollbars in each dimension. Zero when no scrollbar is present.

    *)
  6. border : float Geometry.rect;
    (*

    Border widths on each edge.

    *)
  7. padding : float Geometry.rect;
    (*

    Padding on each edge.

    *)
  8. margin : float Geometry.rect;
    (*

    Margin on each edge.

    *)
}

t represents the complete layout state for a node after layout computation.

Construction

Sourceval make : order:int -> location:float Geometry.point -> size:float Geometry.size -> content_size:float Geometry.size -> scrollbar_size:float Geometry.size -> border:float Geometry.rect -> padding:float Geometry.rect -> margin:float Geometry.rect -> t

make ~order ~location ~size ~content_size ~scrollbar_size ~border ~padding ~margin creates a layout with all fields specified.

Sourceval default : t

default is a zero layout with all dimensions and spacing set to zero and order set to 0.

Sourceval with_order : int -> t

with_order order creates a zero layout with the specified order value. All other fields are set to zero.

Field Accessors

Sourceval order : t -> int

order layout returns the rendering order.

Sourceval location : t -> float Geometry.point

location layout returns the top-left corner position.

Sourceval size : t -> float Geometry.size

size layout returns the border box dimensions.

Sourceval content_size : t -> float Geometry.size

content_size layout returns the content dimensions.

Sourceval scrollbar_size : t -> float Geometry.size

scrollbar_size layout returns the scrollbar dimensions.

Sourceval border : t -> float Geometry.rect

border layout returns the border widths.

Sourceval padding : t -> float Geometry.rect

padding layout returns the padding.

Sourceval margin : t -> float Geometry.rect

margin layout returns the margin.

Content Box Dimensions

Sourceval content_box_width : t -> float

content_box_width layout computes the width of the content box.

This is the border box width minus horizontal padding and border: size.width - padding.left - padding.right - border.left - border.right.

Sourceval content_box_height : t -> float

content_box_height layout computes the height of the content box.

This is the border box height minus vertical padding and border: size.height - padding.top - padding.bottom - border.top - border.bottom.

Sourceval content_box_size : t -> float Geometry.size

content_box_size layout computes the content box dimensions.

Equivalent to {width = content_box_width layout; height = content_box_height layout}.

Sourceval content_box_x : t -> float

content_box_x layout computes the x offset of the content box relative to the parent's content box.

This is location.x + margin.left + border.left + padding.left.

Sourceval content_box_y : t -> float

content_box_y layout computes the y offset of the content box relative to the parent's content box.

This is location.y + margin.top + border.top + padding.top.

Scroll Dimensions

Sourceval scroll_width : t -> float

scroll_width layout computes the horizontal scroll extent.

Returns the amount by which content overflows horizontally, accounting for scrollbar width. Result is always non-negative. Returns 0.0 when content fits within the border box.

Formula: max 0.0 (content_size.width + min scrollbar_size.width size.width - size.width + border.right).

Sourceval scroll_height : t -> float

scroll_height layout computes the vertical scroll extent.

Returns the amount by which content overflows vertically, accounting for scrollbar height. Result is always non-negative. Returns 0.0 when content fits within the border box.

Formula: max 0.0 (content_size.height + min scrollbar_size.height size.height - size.height + border.bottom).

Comparison and Formatting

Sourceval compare : t -> t -> int

compare a b compares layouts lexicographically.

Fields are compared in order: order, location, size, content_size, scrollbar_size, border, padding, margin.

Sourceval equal : t -> t -> bool

equal a b tests whether two layouts are structurally equal.

Sourceval to_string : t -> string

to_string layout converts layout to a string representation showing order, location, size, and content_size.

Sourceval pp : Format.formatter -> t -> unit

pp fmt layout formats layout for printing.