logo

Tessera UI v2.0.0: Opt, Components and Router

53 points ExaminationFluid17 0 comments
View on Reddit ↗

Tessera UI is a GPU-first, immediate-mode UI framework based on rust and wgpu.

What's New

The updates for v2.0.0 are as follows:

Website

Tessera UI now has its own homepage: tessera-ui.github.io. It includes documentation, guides, and examples.

Shard & Navigation

Shard is a brand new feature introduced in v2.0.0 to facilitate the creation of page-based components and navigation functionality.

For details, see the Documentation - Shard & Navigation.

Renderer

  • Dirty Frame Detection: Implemented a dirty frame detection mechanism. When the UI has not changed, the renderer skips most GPU work, significantly reducing CPU and GPU usage for static scenes.
  • Instruction Reordering & Batching: Introduced a dependency graph-based rendering instruction reordering system that intelligently groups instructions to maximize the merging of render batches and reduce expensive state changes. Multiple rendering pipelines (Shape, Text, FluidGlass) have been refactored to support instanced batch rendering.
  • Partial Rendering & Computation: Implemented draw command scissoring. For effects like glass morphism, the renderer automatically calculates and applies the minimum required rendering area. Compute shaders (e.g., blur) can now also execute within a specified local area, optimizing the performance of localized effects.
  • Component Content Clipping: Implemented core component content clipping, preventing child components from being drawn outside the bounds of their parent.
  • Pipeline Dispatch Optimization: Optimized render pipeline dispatch from an O(n) linear search to an O(1) hash map lookup, speeding up instruction dispatch.
  • Render Pipeline API Change: The draw method signature for custom rendering pipelines has been updated. It now requires a clip_rect parameter.

Layout

  • Container API Change: Container components like column, row, and boxed have deprecated the old macro and trait APIs, unifying on a more flexible scoped closure API (scope.child(...)).
  • Dimension Unit Change: The width and height fields of components are no longer Option<DimensionValue> but DimensionValue. A value must be explicitly provided or rely on the default (WRAP).
  • Layout Constraint Enforcement: Using DimensionValue::Fill within a finite parent constraint without providing a max value will now trigger a panic to prevent ambiguous layout behavior.
  • RoundedRectangle Enhancement: The corner radius unit for RoundedRectangle has been changed from pixels (f32) to Dp, and it now supports independent radius values for each of the four corners.

Event Handling

  • API Renaming: The entire event handling-related API (e.g., StateHandlerFn, StateHandlerInput) has been renamed from state_handler to input_handler for clearer semantics.
  • Clipboard Abstraction: Added a clipboard abstraction in the core library tessera-ui with native support for the Android platform.
  • API Improvements: Unified the cursor_position API, now split into relative (rel) and absolute (abs) positions. Added event blocking methods to StateHandlerInput.
  • Bug Fix: Fixed a critical issue where a child node's absolute position was not calculated when its parent was culled by the viewport, causing a panic during event handling.

Component Library

  • New Components:
    • SideBar: A side panel that can slide out from the side, supporting glass and material backgrounds.
    • BottomSheet: A bottom sheet that can slide up from the bottom, supporting glass and material backgrounds.
    • Tabs: A tab component that supports content switching and animated indicators.
    • BottomNavBar: A bottom navigation bar that supports route switching and an animated selection indicator.
    • ScrollBar: A reusable scrollbar that supports dragging, clicking, and hover animations, and is integrated into the scrollable component.
    • Glass Progress: A progress bar with a glassmorphism effect.
  • Component State Management Refactor: The state management for several components, including Tabs, Switch, GlassSwitch, and Checkbox, has been refactored. They no longer use internal state and instead require an externally owned state (Arc<RwLock<...State>>) to be passed in, achieving complete state decoupling.
  • Component Improvements:
    • Scrollable: Added Overlay and Alongside scrollbar layouts, as well as AlwaysVisible, AutoHide, and Hidden behavior modes.
    • Dialog: Integrated a unified DialogProvider API. The scrim now supports Glass and Material styles, and content fade-in/out animations have been added.
    • Button and Surface: Added a configurable shadow property.
    • TextEditor: Added an on_change callback and implemented smooth pixel-based scrolling.
    • Switch: The animation curve has been changed to a smoother ease-in-out effect.
    • FluidGlass: Enhanced the border's highlight effect to simulate a 3D bevel.
    • Text: Added an LRU cache for TextData to avoid redundant layout and construction for identical text, improving rendering efficiency.
    • Image: The image component API now accepts Arc<ImageData> instead of owned data to support data sharing.
  • Component Visibility Adjustment: Some internal helper components have now been correctly made private to prevent misuse.

Other Improvements

  • Redesigned the logo for the homepage and documentation.
  • Dependency updates.
  • Code refactoring and cleanup.

About Tessera UI

For a further introduction to Tessera UI itself, please see Guide - What is Tessera UI.