A UI layout engine for MoonBit

layout

flexbox

css

moon add Milky2018/chicle@0.6.0

Download zip

Author

Milky2018

Version

0.6.0

License

Apache-2.0

Repository

github.com/moonbit-community/chicle

Last updated

27 days ago

Downloads

105

Dependencies

moonbit-community/yaml0.0.6

README

#Milky2018/chicle

MoonBit UI layout engine.

Open the interactive Chicle playground to edit a compact YAML layout document and see the WebAssembly-computed layout update immediately. Valid documents are stored in the URL fragment, so every layout can be shared directly.

Public API: import the focused packages directly: geometry, style, style_helpers, and tree.
Inspired by taffy.

#Compact YAML layout API

The root package parses a concise authoring format and converts it to the same typed LayoutDocument used by the JSON API:

LayoutDocument::from_yaml parses compact YAML.
compute_layout_yaml parses, computes, and returns the same JSON result envelope as compute_layout_json.

space: [640, 360]
layout:
  Dashboard:
    size: [320, 180]
    padding: 16
    gap: { column: 12 }
    children:
      - Sidebar:
          width: 100
      - Content:
          grow: 1

A node is a single-key mapping whose key becomes its unique ID. label defaults to that ID, and ordered children contain more nodes. Numbers represent lengths; strings such as 50%, 1fr, auto, min-content, and max-content represent other dimensions. Common fields include size, width, height, padding, gap, flow, grow, align, grid, place, and absolute. Advanced callers can use a canonical style object instead of compact style fields.

#JSON layout API

The root package provides a backend-independent JSON API for tools and foreign-function boundaries:

LayoutDocument::from_json parses a typed layout document.
compute_layout_document computes a typed LayoutResult.
LayoutResult::to_json serializes node geometry and metadata.
compute_layout_json is the String -> String convenience API exported by the browser Wasm adapter.

Each document contains a root node, optional available_space, and nested children. A node has a unique id, an optional display label, and a partial style; omitted style fields inherit Style::default().

#Quick start

///|
test {
  let chicle : @Milky2018/chicle/tree.ChicleTree[Unit] = @Milky2018/chicle/tree.ChicleTree()
  let child = chicle.new_leaf(@Milky2018/chicle/style.Style::default())
  let root = chicle.new_with_children(
    @Milky2018/chicle/style.Style::default().with_size(
      @Milky2018/chicle/geometry.Size(
        width=@Milky2018/chicle/style_helpers.length(100.0),
        height=@Milky2018/chicle/style_helpers.length(100.0),
      ),
    ),
    [child],
  )
  chicle.compute_layout(root, @Milky2018/chicle/geometry.Size::max_content())
  let layout = chicle.layout(root)
  assert_eq(layout.size.width, 100.0)
  assert_eq(layout.size.height, 100.0)
}

#
LayoutDocumentError

source

pub(all) suberror LayoutDocumentError {
  EmptyNodeId
  DuplicateNodeId(String)
} derive(@moonbitlang/core/debug.Debug
Debug)

#
LayoutYamlError

source

pub(all) suberror LayoutYamlError {
  EmptyYamlDocument
  MultipleYamlDocuments(Int)
} derive(@moonbitlang/core/debug.Debug
Debug)

#
LayoutDocument

source

pub(all) struct LayoutDocument {
  version : Int
  available_space : @Milky2018/chicle/geometry.Size
Size[@Milky2018/chicle/geometry.AvailableSpace
AvailableSpace]
  root : LayoutNode
}

impl ToJson for LayoutDocument

impl FromJson for LayoutDocument

#
LayoutDocument::from_json

source

fn LayoutDocument::from_json(json : Json) -> LayoutDocument raise @moonbitlang/core/json.JsonDecodeError
JsonDecodeError

#
LayoutDocument::from_yaml

source

fn LayoutDocument::from_yaml(source : String) -> LayoutDocument raise

#
LayoutNode

source

pub(all) struct LayoutNode {
  id : String
  label : String
  style : @Milky2018/chicle/style.Style
Style
  children : Array[LayoutNode]
}

impl ToJson for LayoutNode

impl FromJson for LayoutNode

#
LayoutResult

source

pub(all) struct LayoutResult {
  root_id : String
  nodes : Array[LayoutResultNode]
}

impl ToJson for LayoutResult

#
LayoutResult::to_json

source

fn LayoutResult::to_json(self : LayoutResult) -> Json

#
LayoutResultNode

source

pub(all) struct LayoutResultNode {
  id : String
  label : String
  parent_id : String?
  depth : Int
  layout : @Milky2018/chicle/tree.Layout
Layout
}

impl ToJson for LayoutResultNode

#
compute_layout_document

source

fn compute_layout_document(document : LayoutDocument) -> LayoutResult raise

#
compute_layout_json

source

fn compute_layout_json(input : String) -> String

#
compute_layout_yaml

source

fn compute_layout_yaml(input : String) -> String

Source Files

Site source Report issue Packages Build queue Skills Statistics

chicle

#Milky2018/chicle

#Compact YAML layout API

#JSON layout API

#Quick start

#LayoutDocumentError

#LayoutYamlError

#LayoutDocument

#LayoutDocument::from_json

#LayoutDocument::from_yaml

#LayoutNode

#LayoutResult

#LayoutResult::to_json

#LayoutResultNode

#compute_layout_document

#compute_layout_json

#compute_layout_yaml

Source Files

#
LayoutDocumentError

#
LayoutYamlError

#
LayoutDocument

#
LayoutDocument::from_json

#
LayoutDocument::from_yaml

#
LayoutNode

#
LayoutResult

#
LayoutResult::to_json

#
LayoutResultNode

#
compute_layout_document

#
compute_layout_json

#
compute_layout_yaml