cotis-layout 0.1.0-alpha.1

Flexbox-style layout engine for Cotis
Documentation

cotis-layout

cotis-layout is the reference flexbox-style layout engine for Cotis. It implements Cotis's layout traits, runs sizing and positioning over a configured element tree, and produces a stream of render commands for downstream pipes and renderers.

Status: Early 0.1.0-alpha release. APIs are still evolving alongside the core Cotis crates.

This repository contains the layout engine only. It does not open a window or draw pixels by itself. For a runnable desktop app, combine it with core Cotis crates, a pipe, and a renderer backend from the ecosystem below.

Architecture

Each frame flows through five stages. This crate owns the layout manager stage:

flowchart LR
    UI[UI_closure] --> LayoutMgr[CotisLayoutManager]
    LayoutMgr --> LayoutOut[RenderCommandOutput]
    LayoutOut --> Pipe[cotis-pipes]
    Pipe --> Renderer[CotisRenderer]
  1. A layout manager prepares for the frame.
  2. UI code builds the element tree through the configurator API.
  3. The layout manager produces layout output items.
  4. A pipe transforms those items into renderer commands.
  5. A renderer draws the command stream.

Installation

Add the layout engine and required core crates to your Cargo.toml:

cotis-layout = "0.1.0-alpha"
cotis = "0.1.0-alpha"
cotis-defaults = "0.1.0-alpha"
cotis-utils = "0.1.0-alpha"

A full desktop application also needs a pipe and a renderer. See Quick start and Ecosystem.

Quick start

Clone a renderer backend and run its example:

git clone https://github.com/igna-778/cotis-wgpu
cd cotis-wgpu
cargo run --example basic_example -p cotis-wgpu

That example opens a resizable window, lays out UI with cotis-layout and cotis-pipes, and renders through wgpu.

Typical app wiring

use cotis::cotis_app::CotisApp;
use cotis_layout::preamble::CotisLayoutManager;
use cotis_pipes::cotis_layout_pipes::CotisLayoutToRenderListPipeForGenerics;
use cotis_utils::math::Dimensions;
use cotis_wgpu::prelude::*;

let renderer = CotisWgpuRenderer::auto_start();
let manager = CotisLayoutManager::new(Dimensions::new(1000.0, 800.0));
let mut app = CotisApp::new(renderer, manager, CotisLayoutToRenderListPipeForGenerics);

while !app.render().window_should_close() {
    app.compute_frame(|root| {
        // Build your UI tree here.
    });
}

Swap cotis-wgpu for cotis-raylib or another backend without changing layout or UI code.

Local examples

This repository ships source examples under examples/ (basic_example, circle_example, gradients_example). They use cotis-raylib as the renderer backend. Once the Cotis ecosystem crates are published to crates.io, you can run:

cargo run --example basic_example

Until then, use the runnable demos in cotis-wgpu or cotis-raylib.

Ecosystem

Cotis is split across several repositories. This repo provides the layout engine; sibling repos provide core traits, pipes, and render backends.

Repository Role
cotis Core traits and CotisApp orchestration
cotis-layout (this repo) Flexbox-style layout engine (CotisLayoutManager)
cotis-pipes Layout output to render commands (CotisLayoutToRenderListPipeForGenerics)
cotis-wgpu Desktop renderer (wgpu + winit + glyphon)
cotis-raylib Desktop renderer (raylib)
cotis-renderer-template Scaffold for authoring a custom render backend
cotis-cli Plugin host for installable build and run routines

Pick a renderer backend and swap it without changing layout or UI code. Use cotis-renderer-template to implement a new backend.

Features

Feature Effect
serialization Enables serde on render output types and serialization in cotis, cotis-defaults, and cotis-utils

Documentation