Release eframe 0.21.3 - fix web input of the the letter P

* eframe: Fix inputting of the letter P on web

* Update changelog

* silence clippy

.cargo/config.toml

@@ -0,0 +1,6 @@
+# clipboard api is still unstable, so web-sys requires the below flag to be passed for copy (ctrl + c) to work
+# https://rustwasm.github.io/docs/wasm-bindgen/web-sys/unstable-apis.html
+# check status at https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
+# we don't use `[build]` because of rust analyzer's build cache invalidation https://github.com/emilk/eframe_template/issues/93
+[target.wasm32-unknown-unknown]
+rustflags = ["--cfg=web_sys_unstable_apis"]

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,10 +7,20 @@ assignees: ''
 
 ---
 
-Please make sure there is not already a similar bug report!
+<!--
+First look if there is already a similar bug report. If there is, upvote the issue with 👍
+
+Please also check if the bug is still present in latest master! Do so by adding the following lines to your Cargo.toml:
+
+
+[patch.crates-io]
+egui = { git = "https://github.com/emilk/egui", branch = "master" }
+# if you're using eframe:
+eframe = { git = "https://github.com/emilk/egui", branch = "master" }
+-->
 
 **Describe the bug**
-<!-- A clear and concise description of what the bug is. -->
+<!-- A clear and concise description of what the bug is. An image is good, a gif or movie is better! -->
 
 **To Reproduce**
 Steps to reproduce the behavior:

.github/ISSUE_TEMPLATE/feature_request.md

@@ -2,12 +2,15 @@
 name: Feature request
 about: Suggest an idea for this project
 title: ''
-labels: enhancement
+labels: feature-request
 assignees: ''
 
 ---
 
-Please make sure there is not already a similar issue!
+<!--
+First look if there is already a similar feature request. If there is, upvote the issue with 👍
+-->
+
 
 **Is your feature request related to a problem? Please describe.**
 <!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when […] -->

.github/pull_request_template.md

@@ -3,13 +3,13 @@ Please read the "Making a PR" section of [`CONTRIBUTING.md`](https://github.com/
 
 * Keep your PR:s small and focused.
 * If applicable, add a screenshot or gif.
-* Open the PR as a draft until you have self-reviewed it and it is green.
-* If it is a noteworthy change, add a line to the relevant `CHANGELOG.md` under "Unreleased".
+* Unless this is a trivial change, add a line to the relevant `CHANGELOG.md` under "Unreleased".
 * If it is a non-trivial addition, consider adding a demo for it to `egui_demo_lib`.
+* Remember to run `cargo fmt` and `cargo clippy`.
+* Open the PR as a draft until you have self-reviewed it and run `./sh/check.sh`.
 * When you have addressed a PR comment, mark it as resolved.
 
 Please be patient! I will review you PR, but my time is limited!
 -->
 
 Closes <https://github.com/emilk/egui/issues/THE_RELEVANT_ISSUE>.
-

.github/workflows/rust.yml

@@ -3,147 +3,209 @@ on: [push, pull_request]
 name: CI
 
 env:
-  # This is required to enable the web_sys clipboard API which egui_web uses
+  # web_sys_unstable_apis is required to enable the web_sys clipboard API which eframe web uses,
+  # as well as by the wasm32-backend of the wgpu crate.
   # https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Clipboard.html
   # https://rustwasm.github.io/docs/wasm-bindgen/web-sys/unstable-apis.html
-  RUSTFLAGS: --cfg=web_sys_unstable_apis
+  RUSTFLAGS: --cfg=web_sys_unstable_apis -D warnings
+  RUSTDOCFLAGS: -D warnings
 
 jobs:
-  check_default:
-    name: cargo check (default features)
-    runs-on: ubuntu-latest
+  fmt-crank-check-test:
+    name: Format + check + test
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v2
-      - uses: actions-rs/toolchain@v1
-        with:
-          profile: minimal
-          toolchain: 1.54.0
-          override: true
-      - run: sudo apt-get update && sudo apt-get install libspeechd-dev
-      - uses: actions-rs/cargo@v1
-        with:
-          command: check
 
-  check_all_features:
-    name: cargo check --all-features
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
       - uses: actions-rs/toolchain@v1
         with:
-          profile: minimal
-          toolchain: 1.54.0
+          profile: default
+          toolchain: 1.65.0
           override: true
-      - run: sudo apt-get update && sudo apt-get install libspeechd-dev
-      - uses: actions-rs/cargo@v1
-        with:
-          command: check
-          args: --all-features
 
-  check_web_default:
-    name: cargo check web (default features)
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions-rs/toolchain@v1
+      - name: Install packages (Linux)
+        if: runner.os == 'Linux'
+        #uses: awalsh128/cache-apt-pkgs-action@v1.2.2
+        #TODO(emilk) use upstream when https://github.com/awalsh128/cache-apt-pkgs-action/pull/90 is merged
+        uses: rerun-io/cache-apt-pkgs-action@59534850182063abf1b2c11bb3686722a12a8397
         with:
-          profile: minimal
-          toolchain: 1.54.0
-          override: true
-      - run: rustup target add wasm32-unknown-unknown
-      - uses: actions-rs/cargo@v1
-        with:
-          command: check
-          args: -p egui_demo_app --lib --target wasm32-unknown-unknown
+          packages: libxcb-render0-dev libxcb-shape0-dev libxcb-xfixes0-dev libxkbcommon-dev libssl-dev libgtk-3-dev # libgtk-3-dev is used by rfd
+          version: 1.0
+          execute_install_scripts: true
 
-  check_web_all_features:
-    name: cargo check web --all-features
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions-rs/toolchain@v1
-        with:
-          profile: minimal
-          toolchain: 1.54.0
-          override: true
-      - run: rustup target add wasm32-unknown-unknown
-      - uses: actions-rs/cargo@v1
-        with:
-          command: check
-          args: -p egui_demo_app --lib --target wasm32-unknown-unknown --all-features
+      - name: Set up cargo cache
+        uses: Swatinem/rust-cache@v2
 
-  test:
-    name: cargo test
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions-rs/toolchain@v1
-        with:
-          profile: minimal
-          toolchain: 1.54.0
-          override: true
-      - run: sudo apt-get update && sudo apt-get install libxcb-render0-dev libxcb-shape0-dev libxcb-xfixes0-dev libspeechd-dev libxkbcommon-dev libssl-dev libgtk-3-dev # libgtk-3-dev is used by rfd
-      - uses: actions-rs/cargo@v1
-        with:
-          command: test
-          args: --all-features
-
-  fmt:
-    name: cargo fmt
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions-rs/toolchain@v1
-        with:
-          profile: minimal
-          toolchain: 1.54.0
-          override: true
-      - run: rustup component add rustfmt
-      - uses: actions-rs/cargo@v1
+      - name: Rustfmt
+        uses: actions-rs/cargo@v1
         with:
           command: fmt
           args: --all -- --check
 
-  clippy:
-    name: cargo clippy
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions-rs/toolchain@v1
+      - name: Install cargo-cranky
+        uses: baptiste0928/cargo-install@v1
         with:
-          profile: minimal
-          toolchain: 1.54.0
-          override: true
-      - run: rustup component add clippy
-      - run: sudo apt-get update && sudo apt-get install libspeechd-dev libgtk-3-dev # libgtk-3-dev is used by rfd
-      - uses: actions-rs/cargo@v1
-        with:
-          command: clippy
-          args: --workspace --all-targets --all-features --  -D warnings -W clippy::all
+          crate: cargo-cranky
 
-  doc:
-    name: cargo doc
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions-rs/toolchain@v1
+      - name: check --all-features
+        uses: actions-rs/cargo@v1
         with:
-          profile: minimal
-          toolchain: 1.54.0
-          override: true
-      - run: sudo apt-get update && sudo apt-get install libspeechd-dev
-      - run: cargo doc -p emath -p epaint -p egui -p eframe -p epi -p egui_web -p egui-winit -p egui_glium -p egui_glow --lib --no-deps --all-features
+          command: check
+          args: --locked --all-features --all-targets
 
-  doc_web:
-    name: cargo doc web
-    runs-on: ubuntu-latest
+      - name: check default features
+        uses: actions-rs/cargo@v1
+        with:
+          command: check
+          args: --locked --all-targets
+
+      - name: check --no-default-features
+        uses: actions-rs/cargo@v1
+        with:
+          command: check
+          args: --locked --no-default-features --lib --all-targets
+
+      - name: check eframe --no-default-features
+        uses: actions-rs/cargo@v1
+        with:
+          command: check
+          args: --locked --no-default-features --lib --all-targets -p eframe
+
+      - name: Test doc-tests
+        uses: actions-rs/cargo@v1
+        with:
+          command: test
+          args: --doc --all-features
+
+      - name: cargo doc --lib
+        uses: actions-rs/cargo@v1
+        with:
+          command: doc
+          args: --lib --no-deps --all-features
+
+      - name: cargo doc --document-private-items
+        uses: actions-rs/cargo@v1
+        with:
+          command: doc
+          args: --document-private-items --no-deps --all-features
+
+      - name: Test
+        uses: actions-rs/cargo@v1
+        with:
+          command: test
+          args: --all-features
+
+      - name: Cranky
+        uses: actions-rs/cargo@v1
+        with:
+          command: cranky
+          args: --all-targets --all-features -- -D warnings
+
+  # ---------------------------------------------------------------------------
+
+  check_wasm:
+    name: Check wasm32 + wasm-bindgen
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v2
       - uses: actions-rs/toolchain@v1
         with:
           profile: minimal
-          toolchain: 1.54.0
+          toolchain: 1.65.0
+          target: wasm32-unknown-unknown
           override: true
-      - run: sudo apt-get update && sudo apt-get install libspeechd-dev
-      - run: rustup target add wasm32-unknown-unknown
-      - run: cargo doc -p egui_web --target wasm32-unknown-unknown --lib --no-deps --all-features
+
+      - run: sudo apt-get update && sudo apt-get install libgtk-3-dev
+
+      - name: Set up cargo cache
+        uses: Swatinem/rust-cache@v2
+
+      - name: Install cargo-cranky
+        uses: baptiste0928/cargo-install@v1
+        with:
+          crate: cargo-cranky
+
+      - name: Check wasm32 egui_demo_app
+        uses: actions-rs/cargo@v1
+        with:
+          command: check
+          args: -p egui_demo_app --lib --target wasm32-unknown-unknown
+
+      - name: Check wasm32 egui_demo_app --all-features
+        uses: actions-rs/cargo@v1
+        with:
+          command: check
+          args: -p egui_demo_app --lib --target wasm32-unknown-unknown --all-features
+
+      - name: Check wasm32 eframe
+        uses: actions-rs/cargo@v1
+        with:
+          command: check
+          args: -p eframe --lib --no-default-features --features glow,persistence --target wasm32-unknown-unknown
+
+      - name: wasm-bindgen
+        uses: jetli/wasm-bindgen-action@v0.1.0
+        with:
+          version: "0.2.84"
+
+      - run: ./sh/wasm_bindgen_check.sh --skip-setup
+
+      - name: Cranky wasm32
+        uses: actions-rs/cargo@v1
+        with:
+          command: cranky
+          args: --target wasm32-unknown-unknown --all-features -p egui_demo_app --lib -- -D warnings
+
+  # ---------------------------------------------------------------------------
+
+  cargo-deny:
+    name: cargo deny
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: EmbarkStudios/cargo-deny-action@v1
+        with:
+          rust-version: "1.65.0"
+
+  # ---------------------------------------------------------------------------
+
+  android:
+    name: android
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions-rs/toolchain@v1
+        with:
+          profile: minimal
+          toolchain: 1.65.0
+          target: aarch64-linux-android
+          override: true
+
+      - name: Set up cargo cache
+        uses: Swatinem/rust-cache@v2
+
+      - run: cargo check --features wgpu --target aarch64-linux-android
+        working-directory: crates/eframe
+
+  # ---------------------------------------------------------------------------
+
+  windows:
+    name: Check Windows
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions-rs/toolchain@v1
+        with:
+          profile: minimal
+          toolchain: 1.65.0
+          override: true
+
+      - name: Set up cargo cache
+        uses: Swatinem/rust-cache@v2
+
+      - name: Check
+        uses: actions-rs/cargo@v1
+        with:
+          command: check
+          args: --all-targets --all-features

.gitignore

@@ -1,4 +1,7 @@
+.DS_Store
 **/target
+**/target_ra
+**/target_wasm
 /.*.json
 /.vscode
 /media/*

.vscode/settings.json

@@ -0,0 +1,32 @@
+{
+    "files.insertFinalNewline": true,
+    "editor.formatOnSave": true,
+    "files.trimTrailingWhitespace": true,
+    "editor.semanticTokenColorCustomizations": {
+        "rules": {
+            "*.unsafe:rust": "#eb5046"
+        }
+    },
+    "files.exclude": {
+        "target/**": true,
+        "target_ra/**": true,
+    },
+    // Tell Rust Analyzer to use its own target directory, so we don't need to wait for it to finish wen we want to `cargo run`
+    "rust-analyzer.checkOnSave.overrideCommand": [
+        "cargo",
+        "cranky",
+        "--target-dir=target_ra",
+        "--workspace",
+        "--message-format=json",
+        "--all-targets"
+    ],
+    "rust-analyzer.cargo.buildScripts.overrideCommand": [
+        "cargo",
+        "check",
+        "--quiet",
+        "--target-dir=target_ra",
+        "--workspace",
+        "--message-format=json",
+        "--all-targets"
+    ],
+}

ARCHITECTURE.md

@@ -1,11 +1,11 @@
-# Arcitecture
+# Architecture
 This document describes how the crates that make up egui are all connected.
 
 Also see [`CONTRIBUTING.md`](https://github.com/emilk/egui/blob/master/CONTRIBUTING.md) for what to do before opening a PR.
 
 
 ## Crate overview
-The crates in this repository are: `egui, emath, epaint, egui, epi, egui-winit, egui_web, egui_glium, egui_glow, egui_demo_lib, egui_demo_app`.
+The crates in this repository are: `egui, emath, epaint, egui_extras, egui-winit, egui_glium, egui_glow, egui_demo_lib, egui_demo_app`.
 
 ### `egui`: The main GUI library.
 Example code: `if ui.button("Click me").clicked() { … }`
@@ -19,20 +19,16 @@ Examples: `Vec2, Pos2, Rect, lerp, remap`
 
 Example: `Shape::Circle { center, radius, fill, stroke }`
 
-Depends on `emath`, [`ab_glyph`](https://crates.io/crates/ab_glyph), [`atomic_refcell`](https://crates.io/crates/atomic_refcell), [`ahash`](https://crates.io/crates/ahash).
+Depends on `emath`.
 
-### `epi`
-Depends only on `egui`.
-Adds a thin application level wrapper around `egui` for hosting an `egui` app inside of `eframe`.
+### `egui_extras`
+This adds additional features on top of `egui`.
 
 ### `egui-winit`
 This crates provides bindings between [`egui`](https://github.com/emilk/egui) and [winit](https://crates.io/crates/winit).
 
 The library translates winit events to egui, handled copy/paste, updates the cursor, open links clicked in egui, etc.
 
-### `egui_web`
-Puts an egui app inside the web browser by compiling to WASM and binding to the web browser with [`js-sys`](https://crates.io/crates/js-sys) and [`wasm-bindgen`](https://crates.io/crates/wasm-bindgen). Paints the triangles that egui outputs using WebGL.
-
 ### `egui_glium`
 Puts an egui app inside a native window on your laptop. Paints the triangles that egui outputs using [glium](https://github.com/glium/glium).
 
@@ -40,12 +36,12 @@ Puts an egui app inside a native window on your laptop. Paints the triangles tha
 Puts an egui app inside a native window on your laptop. Paints the triangles that egui outputs using [glow](https://github.com/grovesNL/glow).
 
 ### `eframe`
-A wrapper around `egui_web` + `egui_glium`, so you can compile the same app for either web or native.
+`eframe` is the official `egui` framework, built so you can compile the same app for either web or native.
 
-The demo that you can see at <https://emilk.github.io/egui/index.html> is using `eframe` to host the `egui`. The demo code is found in:
+The demo that you can see at <https://www.egui.rs> is using `eframe` to host the `egui`. The demo code is found in:
 
 ### `egui_demo_lib`
-Depends on `egui` + `epi`.
+Depends on `egui`.
 This contains a bunch of uses of `egui` and looks like the ui code you would write for an `egui` app.
 
 ### `egui_demo_app`

CHANGELOG.md

@@ -1,64 +1,458 @@
 # egui changelog
+All notable changes to the `egui` crate will be documented in this file.
 
-All notable changes to the egui crate will be documented in this file.
-
-NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_web`](egui_web/CHANGELOG.md), [`egui-winit`](egui-winit/CHANGELOG.md), [`egui_glium`](egui_glium/CHANGELOG.md), and [`egui_glow`](egui_glow/CHANGELOG.md) have their own changelogs!
+NOTE: [`epaint`](crates/epaint/CHANGELOG.md), [`eframe`](crates/eframe/CHANGELOG.md), [`egui-winit`](crates/egui-winit/CHANGELOG.md), [`egui_glium`](crates/egui_glium/CHANGELOG.md), [`egui_glow`](crates/egui_glow/CHANGELOG.md) and [`egui-wgpu`](crates/egui-wgpu/CHANGELOG.md) have their own changelogs!
 
 
 ## Unreleased
 
+
+## 0.21.0 - 2023-02-08 - Deadlock fix and style customizability
+* ⚠️ BREAKING: `egui::Context` now use closures for locking ([#2625](https://github.com/emilk/egui/pull/2625)):
+  * `ctx.input().key_pressed(Key::A)` -> `ctx.input(|i| i.key_pressed(Key::A))`
+  * `ui.memory().toggle_popup(popup_id)` -> `ui.memory_mut(|mem| mem.toggle_popup(popup_id))`
+
 ### Added ⭐
-* Add horizontal scrolling support to `ScrollArea` and `Window` (opt-in).
-* `TextEdit::layouter`: Add custom text layout for e.g. syntax highlighting or WYSIWYG.
-* `Fonts::layout_job`: New text layout engine allowing mixing fonts, colors and styles, with underlining and strikethrough.
-* Add `ui.add_enabled(bool, widget)` to easily add a possibly disabled widget.
-* Add `ui.add_enabled_ui(bool, |ui| …)` to create a possibly disabled UI section.
-* Add feature `"serialize"` separatedly from `"persistence"`.
-* Add `egui::widgets::global_dark_light_mode_buttons` to easily add buttons for switching the egui theme.
-* `TextEdit` can now be used to show text which can be selectedd and copied, but not edited.
-* Add `Memory::caches` for caching things from one frame to the next.
+* Add `Response::drag_started_by` and `Response::drag_released_by` for convenience, similar to `dragged` and `dragged_by` ([#2507](https://github.com/emilk/egui/pull/2507)).
+* Add `PointerState::*_pressed` to check if the given button was pressed in this frame ([#2507](https://github.com/emilk/egui/pull/2507)).
+* `Event::Key` now has a `repeat` field that is set to `true` if the event was the result of a key-repeat ([#2435](https://github.com/emilk/egui/pull/2435)).
+* Add `Slider::drag_value_speed`, which lets you ask for finer precision when dragging the slider value rather than the actual slider.
+* Add `Memory::any_popup_open`, which returns true if any popup is currently open ([#2464](https://github.com/emilk/egui/pull/2464)).
+* Add `Plot::clamp_grid` to only show grid where there is data ([#2480](https://github.com/emilk/egui/pull/2480)).
+* Add `ScrollArea::drag_to_scroll` if you want to turn off that feature.
+* Add `Response::on_hover_and_drag_cursor`.
+* Add `Window::default_open` ([#2539](https://github.com/emilk/egui/pull/2539)).
+* Add `ProgressBar::fill` if you want to set the fill color manually. ([#2618](https://github.com/emilk/egui/pull/2618)).
+* Add `Button::rounding` to enable round buttons ([#2616](https://github.com/emilk/egui/pull/2616)).
+* Add `WidgetVisuals::optional_bg_color` - set it to `Color32::TRANSPARENT` to hide button backgrounds ([#2621](https://github.com/emilk/egui/pull/2621)).
+* Add `Context::screen_rect` and `Context::set_cursor_icon` ([#2625](https://github.com/emilk/egui/pull/2625)).
+* You can turn off the vertical line left of indented regions with `Visuals::indent_has_left_vline` ([#2636](https://github.com/emilk/egui/pull/2636)).
+* Add `Response.highlight` to highlight a widget ([#2632](https://github.com/emilk/egui/pull/2632)).
+* Add `Separator::grow` and `Separator::shrink` ([#2665](https://github.com/emilk/egui/pull/2665)).
+* Add `Slider::trailing_fill` for trailing color behind the circle like a `ProgressBar` ([#2660](https://github.com/emilk/egui/pull/2660)).
 
 ### Changed 🔧
-* Label text will now be centered, right-aligned and/or justified based on the layout.
+* Improved plot grid appearance ([#2412](https://github.com/emilk/egui/pull/2412)).
+* Improved the algorithm for picking the number of decimals to show when hovering values in the `Plot`.
+* Default `ComboBox` is now controlled with `Spacing::combo_width` ([#2621](https://github.com/emilk/egui/pull/2621)).
+* `DragValue` and `Slider` now use the proportional font ([#2638](https://github.com/emilk/egui/pull/2638)).
+* `ScrollArea` is less aggressive about clipping its contents ([#2665](https://github.com/emilk/egui/pull/2665)).
+* Updated to be compatible with a major breaking change in AccessKit that drastically reduces memory usage when accessibility is enabled ([#2678](https://github.com/emilk/egui/pull/2678)).
+* Improve `DragValue` behavior ([#2649](https://github.com/emilk/egui/pull/2649), [#2650](https://github.com/emilk/egui/pull/2650), [#2688](https://github.com/emilk/egui/pull/2688), [#2638](https://github.com/emilk/egui/pull/2638)).
+
+### Fixed 🐛
+* Trigger `PointerEvent::Released` for drags ([#2507](https://github.com/emilk/egui/pull/2507)).
+* Expose `TextEdit`'s multiline flag to AccessKit ([#2448](https://github.com/emilk/egui/pull/2448)).
+* Don't render `\r` (Carriage Return) ([#2452](https://github.com/emilk/egui/pull/2452)).
+* The `button_padding` style option works closer as expected with image+text buttons now ([#2510](https://github.com/emilk/egui/pull/2510)).
+* Menus are now moved to fit on the screen.
+* Fix `Window::pivot` causing windows to move around ([#2694](https://github.com/emilk/egui/pull/2694)).
+
+
+## 0.20.1 - 2022-12-11 - Fix key-repeat
+### Changed 🔧
+* `InputState`: all press functions again include key repeats (like in egui 0.19) ([#2429](https://github.com/emilk/egui/pull/2429)).
+* Improve the look of thin white lines ([#2437](https://github.com/emilk/egui/pull/2437)).
+
+### Fixed 🐛
+* Fix key-repeats for `TextEdit`, `Slider`s, etc ([#2429](https://github.com/emilk/egui/pull/2429)).
+
+
+## 0.20.0 - 2022-12-08 - AccessKit, prettier text, overlapping widgets
+* MSRV (Minimum Supported Rust Version) is now `1.65.0` ([#2314](https://github.com/emilk/egui/pull/2314)).
+* ⚠️ BREAKING: egui now expects integrations to do all color blending in gamma space ([#2071](https://github.com/emilk/egui/pull/2071)).
+* ⚠️ BREAKING: if you have overlapping interactive widgets, only the top widget (last added) will be interactive ([#2244](https://github.com/emilk/egui/pull/2244)).
+
+### Added ⭐
+* Added helper functions for animating panels that collapse/expand ([#2190](https://github.com/emilk/egui/pull/2190)).
+* Added `Context::os/Context::set_os` to query/set what operating system egui believes it is running on ([#2202](https://github.com/emilk/egui/pull/2202)).
+* Added `Button::shortcut_text` for showing keyboard shortcuts in menu buttons ([#2202](https://github.com/emilk/egui/pull/2202)).
+* Added `egui::KeyboardShortcut` for showing keyboard shortcuts in menu buttons ([#2202](https://github.com/emilk/egui/pull/2202)).
+* Texture loading now takes a `TexureOptions` with minification and magnification filters ([#2224](https://github.com/emilk/egui/pull/2224)).
+* Added `Key::Minus` and `Key::Equals` ([#2239](https://github.com/emilk/egui/pull/2239)).
+* Added `egui::gui_zoom` module with helpers for scaling the whole GUI of an app ([#2239](https://github.com/emilk/egui/pull/2239)).
+* You can now put one interactive widget on top of another, and only one will get interaction at a time ([#2244](https://github.com/emilk/egui/pull/2244)).
+* Added `spacing.menu_margin` for customizing menu spacing ([#2036](https://github.com/emilk/egui/pull/2036))
+* Added possibility to enable text wrap for the selected text of `egui::ComboBox` ([#2272](https://github.com/emilk/egui/pull/2272))
+* Added `Area::constrain` and `Window::constrain` which constrains area to the screen bounds ([#2270](https://github.com/emilk/egui/pull/2270)).
+* Added `Area::pivot` and `Window::pivot` which controls what part of the window to position ([#2303](https://github.com/emilk/egui/pull/2303)).
+* Added support for [thin space](https://en.wikipedia.org/wiki/Thin_space).
+* Added optional integration with [AccessKit](https://accesskit.dev/) for implementing platform accessibility APIs ([#2294](https://github.com/emilk/egui/pull/2294)).
+* Added `panel_fill`, `window_fill` and `window_stroke` to `Visuals` for your theming pleasure ([#2406](https://github.com/emilk/egui/pull/2406)).
+* Plots:
+  * Allow linking plot cursors ([#1722](https://github.com/emilk/egui/pull/1722)).
+  * Added `Plot::auto_bounds_x/y` and `Plot::reset` ([#2029](https://github.com/emilk/egui/pull/2029)).
+  * Added `PlotUi::translate_bounds` ([#2145](https://github.com/emilk/egui/pull/2145)).
+  * Added `PlotUi::set_plot_bounds` ([#2320](https://github.com/emilk/egui/pull/2320)).
+  * Added `PlotUi::plot_secondary_clicked` ([#2318](https://github.com/emilk/egui/pull/2318)).
+
+### Changed 🔧
+* Panels always have a separator line, but no stroke on other sides. Their spacing has also changed slightly ([#2261](https://github.com/emilk/egui/pull/2261)).
+* Tooltips are only shown when mouse pointer is still ([#2263](https://github.com/emilk/egui/pull/2263)).
+* Make it slightly easier to click buttons ([#2304](https://github.com/emilk/egui/pull/2304)).
+* `egui::color` has been renamed `egui::ecolor` ([#2399](https://github.com/emilk/egui/pull/2399)).
+
+### Fixed 🐛
+* ⚠️ BREAKING: Fix text being too small ([#2069](https://github.com/emilk/egui/pull/2069)).
+* Improve mixed CJK/Latin line-breaking ([#1986](https://github.com/emilk/egui/pull/1986)).
+* Improved text rendering ([#2071](https://github.com/emilk/egui/pull/2071)).
+* Constrain menu popups to the screen ([#2191](https://github.com/emilk/egui/pull/2191)).
+* Less jitter when calling `Context::set_pixels_per_point` ([#2239](https://github.com/emilk/egui/pull/2239)).
+* Fixed popups and color edit going outside the screen.
+* Fixed keyboard support in `DragValue` ([#2342](https://github.com/emilk/egui/pull/2342)).
+* If you nest `ScrollAreas` inside each other, the inner area will now move its scroll bar so it is always visible ([#2371](https://github.com/emilk/egui/pull/2371)).
+* Ignore key-repeats for `input.key_pressed` ([#2334](https://github.com/emilk/egui/pull/2334), [#2389](https://github.com/emilk/egui/pull/2389)).
+* Fixed issue with calling `set_pixels_per_point` each frame ([#2352](https://github.com/emilk/egui/pull/2352)).
+* Fix bug in `ScrollArea::show_rows` ([#2258](https://github.com/emilk/egui/pull/2258)).
+* Fix bug in `plot::Line::fill` ([#2275](https://github.com/emilk/egui/pull/2275)).
+* Only emit `changed` events in `radio_value` and `selectable_value` if the value actually changed ([#2343](https://github.com/emilk/egui/pull/2343)).
+* Fixed sizing bug in `Grid` ([#2384](https://github.com/emilk/egui/pull/2384)).
+* `ComboBox::width` now correctly sets the outer width ([#2406](https://github.com/emilk/egui/pull/2406)).
+
+
+## 0.19.0 - 2022-08-20
+### Added ⭐
+* Added `*_released` & `*_clicked` methods for `PointerState` ([#1582](https://github.com/emilk/egui/pull/1582)).
+* Added `PointerButton::Extra1` and `PointerButton::Extra2` ([#1592](https://github.com/emilk/egui/pull/1592)).
+* Added `egui::hex_color!` to create `Color32`'s from hex strings under the `color-hex` feature ([#1596](https://github.com/emilk/egui/pull/1596)).
+* Optimized painting of filled circles (e.g. for scatter plots) by 10x or more ([#1616](https://github.com/emilk/egui/pull/1616)).
+* Added opt-in feature `deadlock_detection` to detect double-lock of mutexes on the same thread ([#1619](https://github.com/emilk/egui/pull/1619)).
+* Added `InputState::stable_dt`: a more stable estimate for the delta-time in reactive mode ([#1625](https://github.com/emilk/egui/pull/1625)).
+* You can now specify a texture filter for your textures ([#1636](https://github.com/emilk/egui/pull/1636)).
+* Added functions keys in `egui::Key` ([#1665](https://github.com/emilk/egui/pull/1665)).
+* Added support for using `PaintCallback` shapes with the WGPU backend ([#1684](https://github.com/emilk/egui/pull/1684)).
+* Added `Context::request_repaint_after` ([#1694](https://github.com/emilk/egui/pull/1694)).
+* `ctrl-h` now acts like backspace in `TextEdit` ([#1812](https://github.com/emilk/egui/pull/1812)).
+* Added `custom_formatter` method for `Slider` and `DragValue` ([#1851](https://github.com/emilk/egui/issues/1851)).
+* Added `RawInput::has_focus` which backends can set to indicate whether the UI as a whole has the keyboard focus ([#1859](https://github.com/emilk/egui/pull/1859)).
+* Added `PointerState::button_double_clicked()` and `PointerState::button_triple_clicked()` ([#1906](https://github.com/emilk/egui/issues/1906)).
+* Added `custom_formatter`, `binary`, `octal`, and `hexadecimal` to `DragValue` and `Slider` ([#1953](https://github.com/emilk/egui/issues/1953))
+
+### Changed 🔧
+* MSRV (Minimum Supported Rust Version) is now `1.61.0` ([#1846](https://github.com/emilk/egui/pull/1846)).
+* `PaintCallback` shapes now require the whole callback to be put in an `Arc<dyn Any>` with the value being a backend-specific callback type ([#1684](https://github.com/emilk/egui/pull/1684)).
+* Replaced `needs_repaint` in `FullOutput` with `repaint_after`. Used to force repaint after the set duration in reactive mode ([#1694](https://github.com/emilk/egui/pull/1694)).
+* `Layout::left_to_right` and `Layout::right_to_left` now takes the vertical align as an argument. Previous default was `Align::Center`.
+* Improved ergonomics of adding plot items. All plot items that take a series of 2D coordinates can now be created directly from `Vec<[f64; 2]>`. The `Value` and `Values` types were removed in favor of `PlotPoint` and `PlotPoints` respectively ([#1816](https://github.com/emilk/egui/pull/1816)).
+* `TextBuffer` no longer needs to implement `AsRef<str>` ([#1824](https://github.com/emilk/egui/pull/1824)).
+
+### Fixed 🐛
+* Fixed `Response::changed` for `ui.toggle_value` ([#1573](https://github.com/emilk/egui/pull/1573)).
+* Fixed `ImageButton`'s changing background padding on hover ([#1595](https://github.com/emilk/egui/pull/1595)).
+* Fixed `Plot` auto-bounds bug ([#1599](https://github.com/emilk/egui/pull/1599)).
+* Fixed dead-lock when alt-tabbing while also showing a tooltip ([#1618](https://github.com/emilk/egui/pull/1618)).
+* Fixed `ScrollArea` scrolling when editing an unrelated `TextEdit` ([#1779](https://github.com/emilk/egui/pull/1779)).
+* Fixed `Slider` not always generating events on change ([#1854](https://github.com/emilk/egui/pull/1854)).
+* Fixed jitter of anchored windows for the first frame ([#1856](https://github.com/emilk/egui/pull/1856)).
+* Fixed focus behavior when pressing Tab in a UI with no focused widget ([#1861](https://github.com/emilk/egui/pull/1861)).
+* Fixed automatic plot bounds ([#1865](https://github.com/emilk/egui/pull/1865)).
+
+
+## 0.18.1 - 2022-05-01
+* Change `Shape::Callback` from `&dyn Any` to `&mut dyn Any` to support more backends.
+
+
+## 0.18.0 - 2022-04-30
+
+### Added ⭐
+* Added `Shape::Callback` for backend-specific painting, [with an example](https://github.com/emilk/egui/tree/master/examples/custom_3d_glow) ([#1351](https://github.com/emilk/egui/pull/1351)).
+* Added `Frame::canvas` ([#1362](https://github.com/emilk/egui/pull/1362)).
+* `Context::request_repaint` will now wake up UI thread, if integrations has called `Context::set_request_repaint_callback` ([#1366](https://github.com/emilk/egui/pull/1366)).
+* Added `Plot::allow_scroll`, `Plot::allow_zoom` no longer affects scrolling ([#1382](https://github.com/emilk/egui/pull/1382)).
+* Added `Ui::push_id` to resolve id clashes ([#1374](https://github.com/emilk/egui/pull/1374)).
+* Added `ComboBox::icon` ([#1405](https://github.com/emilk/egui/pull/1405)).
+* Added `Ui::scroll_with_delta`.
+* Added `Frame::outer_margin`.
+* Added `Painter::hline` and `Painter::vline`.
+* Added `Link` and `ui.link` ([#1506](https://github.com/emilk/egui/pull/1506)).
+* Added triple-click support; triple-clicking a TextEdit field will select the whole paragraph ([#1512](https://github.com/emilk/egui/pull/1512)).
+* Added `Plot::x_grid_spacer` and `Plot::y_grid_spacer` for custom grid spacing ([#1180](https://github.com/emilk/egui/pull/1180)).
+* Added `Ui::spinner()` shortcut method ([#1494](https://github.com/emilk/egui/pull/1494)).
+* Added `CursorIcon`s for resizing columns, rows, and the eight cardinal directions.
+* Added `Ui::toggle_value`.
+* Added ability to add any widgets to the header of a collapsing region ([#1538](https://github.com/emilk/egui/pull/1538)).
+
+### Changed 🔧
+* MSRV (Minimum Supported Rust Version) is now `1.60.0` ([#1467](https://github.com/emilk/egui/pull/1467)).
+* `ClippedMesh` has been replaced with `ClippedPrimitive` ([#1351](https://github.com/emilk/egui/pull/1351)).
+* Renamed `Frame::margin` to `Frame::inner_margin`.
+* Renamed `AlphaImage` to `FontImage` to discourage any other use for it ([#1412](https://github.com/emilk/egui/pull/1412)).
+* Warnings will be painted on screen when there is an `Id` clash for `Grid`, `Plot` or `ScrollArea` ([#1452](https://github.com/emilk/egui/pull/1452)).
+* `Checkbox` and `RadioButton` with an empty label (`""`) will now take up much less space ([#1456](https://github.com/emilk/egui/pull/1456)).
+* Replaced `Memory::top_most_layer` with more flexible `Memory::layer_ids`.
+* Renamed the feature `convert_bytemuck` to `bytemuck` ([#1467](https://github.com/emilk/egui/pull/1467)).
+* Renamed the feature `serialize` to `serde` ([#1467](https://github.com/emilk/egui/pull/1467)).
+* Renamed `Painter::sub_region` to `Painter::with_clip_rect`.
+
+### Fixed 🐛
+* Fixed `ComboBox`es always being rendered left-aligned ([#1304](https://github.com/emilk/egui/pull/1304)).
+* Fixed ui code that could lead to a deadlock ([#1380](https://github.com/emilk/egui/pull/1380)).
+* Text is darker and more readable in bright mode ([#1412](https://github.com/emilk/egui/pull/1412)).
+* Fixed a lot of broken/missing doclinks  ([#1419](https://github.com/emilk/egui/pull/1419)).
+* Fixed `Ui::add_visible` sometimes leaving the `Ui` in a disabled state ([#1436](https://github.com/emilk/egui/issues/1436)).
+* Added line breaking rules for Japanese text ([#1498](https://github.com/emilk/egui/pull/1498)).
+
+### Deprecated ☢️
+* Deprecated `CollapsingHeader::selectable` ([#1538](https://github.com/emilk/egui/pull/1538)).
+
+### Removed 🔥
+* Removed the `single_threaded/multi_threaded` flags - egui is now always thread-safe ([#1390](https://github.com/emilk/egui/pull/1390)).
+
+### Contributors 🙏
+* [4JX](https://github.com/4JX)
+* [AlexxxRu](https://github.com/AlexxxRu)
+* [ascclemens](https://github.com/ascclemens)
+* [awaken1ng](https://github.com/awaken1ng)
+* [bigfarts](https://github.com/bigfarts)
+* [bobyclaws](https://github.com/bobyclaws)
+* [Bromeon](https://github.com/Bromeon)
+* [cloudhead](https://github.com/cloudhead)
+* [collin-kemper](https://github.com/collin-kemper)
+* [cpterry](https://github.com/cpterry)
+* [dbuch](https://github.com/dbuch)
+* [DusterTheFirst](https://github.com/DusterTheFirst)
+* [Edgeworth ](https://github.com/Edgeworth )
+* [elwerene](https://github.com/elwerene)
+* [follower](https://github.com/follower)
+* [Friz64](https://github.com/Friz64)
+* [Hunter522 ](https://github.com/Hunter522 )
+* [Jake-Shadle](https://github.com/Jake-Shadle)
+* [jean-airoldie ](https://github.com/jean-airoldie )
+* [JelNiSlaw](https://github.com/JelNiSlaw)
+* [juancampa](https://github.com/juancampa)
+* [LU15W1R7H](https://github.com/LU15W1R7H)
+* [mbillingr](https://github.com/mbillingr)
+* [nicklasmoeller](https://github.com/nicklasmoeller)
+* [rukai](https://github.com/rukai)
+* [tami5](https://github.com/tami5)
+* [Titaniumtown](https://github.com/Titaniumtown)
+* [trevyn](https://github.com/trevyn)
+* [waynr](https://github.com/waynr)
+* [zam-5 ](https://github.com/zam-5 )
+
+
+## 0.17.0 - 2022-02-22 - Improved font selection and image handling
+
+### Added ⭐
+* Much improved font selection ([#1154](https://github.com/emilk/egui/pull/1154)):
+  * You can now select any font size and family using `RichText::size` amd `RichText::family` and the new `FontId`.
+  * Easily change text styles with `Style::text_styles`.
+  * Added `Ui::text_style_height`.
+  * Added `TextStyle::resolve`.
+  * Made the v-align and scale of user fonts tweakable ([#1241](https://github.com/emilk/egui/pull/1027)).
+* Plot:
+  * Added `Plot::x_axis_formatter` and `Plot::y_axis_formatter` for custom axis labels ([#1130](https://github.com/emilk/egui/pull/1130)).
+  * Added `Plot::allow_boxed_zoom()`, `Plot::boxed_zoom_pointer()` for boxed zooming on plots ([#1188](https://github.com/emilk/egui/pull/1188)).
+  * Added plot pointer coordinates with `Plot::coordinates_formatter` ([#1235](https://github.com/emilk/egui/pull/1235)).
+  * Added linked axis support for plots via `plot::LinkedAxisGroup` ([#1184](https://github.com/emilk/egui/pull/1184)).
+* `Context::load_texture` to convert an image into a texture which can be displayed using e.g. `ui.image(texture, size)` ([#1110](https://github.com/emilk/egui/pull/1110)).
+* `Ui::input_mut` to modify how subsequent widgets see the `InputState` and a convenience method `InputState::consume_key` for shortcuts or hotkeys ([#1212](https://github.com/emilk/egui/pull/1212)).
+* Added `Ui::add_visible` and `Ui::add_visible_ui`.
+* Added `CollapsingHeader::icon` to override the default open/close icon using a custom function. ([1147](https://github.com/emilk/egui/pull/1147)).
+* Added `ui.data()`, `ctx.data()`, `ctx.options()` and `ctx.tessellation_options()` ([#1175](https://github.com/emilk/egui/pull/1175)).
+* Added `Response::on_hover_text_at_pointer` as a convenience akin to `Response::on_hover_text` ([1179](https://github.com/emilk/egui/pull/1179)).
+* Opt-in dependency on `tracing` crate for logging warnings ([#1192](https://github.com/emilk/egui/pull/1192)).
+* Added `ui.weak(text)`.
+* Added `Slider::step_by` ([1225](https://github.com/emilk/egui/pull/1225)).
+* Added `Context::move_to_top` and `Context::top_most_layer` for managing the layer on the top ([#1242](https://github.com/emilk/egui/pull/1242)).
+* Support a subset of macOS' emacs input field keybindings in `TextEdit` ([#1243](https://github.com/emilk/egui/pull/1243)).
+* Added ability to scroll an UI into view without specifying an alignment ([1247](https://github.com/emilk/egui/pull/1247)).
+* Added `Ui::scroll_to_rect` ([1252](https://github.com/emilk/egui/pull/1252)).
+
+### Changed 🔧
+* ⚠️ `Context::input` and `Ui::input` now locks a mutex. This can lead to a dead-lock is used in an `if let` binding!
+  * `if let Some(pos) = ui.input().pointer.latest_pos()` and similar must now be rewritten on two lines.
+  * Search for this problem in your code using the regex `if let .*input`.
+* Better contrast in the default light mode style ([#1238](https://github.com/emilk/egui/pull/1238)).
+* Renamed `CtxRef` to `Context` ([#1050](https://github.com/emilk/egui/pull/1050)).
+* `Context` can now be cloned and stored between frames ([#1050](https://github.com/emilk/egui/pull/1050)).
+* Renamed `Ui::visible` to `Ui::is_visible`.
+* Split `Event::Text` into `Event::Text` and `Event::Paste` ([#1058](https://github.com/emilk/egui/pull/1058)).
+* Replaced `Style::body_text_style` with more generic `Style::text_styles` ([#1154](https://github.com/emilk/egui/pull/1154)).
+* `TextStyle` is no longer `Copy` ([#1154](https://github.com/emilk/egui/pull/1154)).
+* Replaced `TextEdit::text_style` with `TextEdit::font` ([#1154](https://github.com/emilk/egui/pull/1154)).
+* `Plot::highlight` now takes a `bool` argument ([#1159](https://github.com/emilk/egui/pull/1159)).
+* `ScrollArea::show` now returns a `ScrollAreaOutput`, so you might need to add `.inner` after the call to it ([#1166](https://github.com/emilk/egui/pull/1166)).
+* Replaced `corner_radius: f32` with `rounding: Rounding`, allowing per-corner rounding settings ([#1206](https://github.com/emilk/egui/pull/1206)).
+* Replaced Frame's `margin: Vec2` with `margin: Margin`, allowing for different margins on opposing sides ([#1219](https://github.com/emilk/egui/pull/1219)).
+* Renamed `Plot::custom_label_func` to `Plot::label_formatter` ([#1235](https://github.com/emilk/egui/pull/1235)).
+* `Areas::layer_id_at` ignores non-interatable layers (i.e. Tooltips) ([#1240](https://github.com/emilk/egui/pull/1240)).
+* `ScrollArea`s will not shrink below a certain minimum size, set by `min_scrolled_width/min_scrolled_height` ([1255](https://github.com/emilk/egui/pull/1255)).
+* For integrations:
+  * `Output` has now been renamed `PlatformOutput` and `Context::run` now returns the new `FullOutput` ([#1292](https://github.com/emilk/egui/pull/1292)).
+  * `FontImage` has been replaced by `TexturesDelta` (found in `FullOutput`), describing what textures were loaded and freed each frame ([#1110](https://github.com/emilk/egui/pull/1110)).
+  * The painter must support partial texture updates ([#1149](https://github.com/emilk/egui/pull/1149)).
+  * Added `RawInput::max_texture_side` which should be filled in with e.g. `GL_MAX_TEXTURE_SIZE` ([#1154](https://github.com/emilk/egui/pull/1154)).
+
+### Fixed 🐛
+* Plot `Orientation` was not public, although fields using this type were ([#1130](https://github.com/emilk/egui/pull/1130)).
+* Context menus now respects the theme ([#1043](https://github.com/emilk/egui/pull/1043)).
+* Calling `Context::set_pixels_per_point` before the first frame will now work.
+* Tooltips that don't fit the window don't flicker anymore ([#1240](https://github.com/emilk/egui/pull/1240)).
+* Scroll areas now follow text cursor ([#1252](https://github.com/emilk/egui/pull/1252)).
+* Slider: correctly respond with drag and focus events when interacting with the value directly ([1270](https://github.com/emilk/egui/pull/1270)).
+
+### Contributors 🙏
+* [4JX](https://github.com/4JX)
+* [55nknown](https://github.com/55nknown)
+* [AlanRace](https://github.com/AlanRace)
+* [AlexxxRu](https://github.com/AlexxxRu)
+* [awaken1ng](https://github.com/awaken1ng)
+* [BctfN0HUK7Yg](https://github.com/BctfN0HUK7Yg)
+* [Bromeon](https://github.com/Bromeon)
+* [cat-state](https://github.com/cat)
+* [danielkeller](https://github.com/danielkeller)
+* [dvec](https://github.com/dvec)
+* [Friz64](https://github.com/Friz64)
+* [Gordon01](https://github.com/Gordon01)
+* [HackerFoo](https://github.com/HackerFoo)
+* [juancampa](https://github.com/juancampa)
+* [justinj](https://github.com/justinj)
+* [lampsitter](https://github.com/lampsitter)
+* [LordMZTE](https://github.com/LordMZTE)
+* [manuel-i](https://github.com/manuel)
+* [Mingun](https://github.com/Mingun)
+* [niklaskorz](https://github.com/niklaskorz)
+* [nongiach](https://github.com/nongiach)
+* [parasyte](https://github.com/parasyte)
+* [psiphi75](https://github.com/psiphi75)
+* [s-nie](https://github.com/s)
+* [t18b219k](https://github.com/t18b219k)
+* [terhechte](https://github.com/terhechte)
+* [xudesheng](https://github.com/xudesheng)
+* [yusdacra](https://github.com/yusdacra)
+
+
+## 0.16.1 - 2021-12-31 - Add back `CtxRef::begin_frame,end_frame`
+
+### Added ⭐
+* Added back `CtxRef::begin_frame,end_frame` as an alternative to `CtxRef::run`.
+
+
+## 0.16.0 - 2021-12-29 - Context menus and rich text
+
+### Added ⭐
+* Added context menus: See `Ui::menu_button` and `Response::context_menu` ([#543](https://github.com/emilk/egui/pull/543)).
+* Most widgets containing text (`Label`, `Button` etc) now supports rich text ([#855](https://github.com/emilk/egui/pull/855)).
+* Plots:
+  * Added bar charts and box plots ([#863](https://github.com/emilk/egui/pull/863)).
+  * You can now query information about the plot (e.g. get the mouse position in plot coordinates, or the plot
+    bounds) while adding items. `Plot` ([#766](https://github.com/emilk/egui/pull/766) and
+    [#892](https://github.com/emilk/egui/pull/892)).
+* You can now read and write the cursor of a `TextEdit` ([#848](https://github.com/emilk/egui/pull/848)).
+* When using a custom font you can now specify a font index ([#873](https://github.com/emilk/egui/pull/873)).
+* Added vertical sliders with `Slider::new(…).vertical()` ([#875](https://github.com/emilk/egui/pull/875)).
+* Added `Button::image_and_text` ([#832](https://github.com/emilk/egui/pull/832)).
+* Added `CollapsingHeader::open` to control if it is open or collapsed ([#1006](https://github.com/emilk/egui/pull/1006)).
+* Added `egui::widgets::color_picker::color_picker_color32` to show the color picker.
+
+### Changed 🔧
+* MSRV (Minimum Supported Rust Version) is now `1.56.0`.
+* `ui.add(Button::new("…").text_color(…))` is now `ui.button(RichText::new("…").color(…))` (same for `Label` )([#855](https://github.com/emilk/egui/pull/855)).
+* Plots now provide a `show` method that has to be used to add items to and show the plot ([#766](https://github.com/emilk/egui/pull/766)).
+* `menu::menu(ui, ...)` is now `ui.menu_button(...)` ([#543](https://github.com/emilk/egui/pull/543))
+* Replaced `CtxRef::begin_frame` and `end_frame` with `CtxRef::run` ([#872](https://github.com/emilk/egui/pull/872)).
+* Replaced `scroll_delta` and `zoom_delta` in `RawInput` with `Event::Scroll` and `Event::Zoom`.
+* Unified the four `Memory` data buckets (`data`, `data_temp`, `id_data` and `id_data_temp`) into a single `Memory::data`, with a new interface ([#836](https://github.com/emilk/egui/pull/836)).
+* Replaced `Ui::__test` with `egui::__run_test_ui` ([#872](https://github.com/emilk/egui/pull/872)).
+
+### Fixed 🐛
+* Fixed `ComboBox` and other popups getting clipped to parent window ([#885](https://github.com/emilk/egui/pull/885)).
+* The color picker is now better at keeping the same hue even when saturation goes to zero ([#886](https://github.com/emilk/egui/pull/886)).
+
+### Removed 🔥
+* Removed `egui::math` (use `egui::emath` instead).
+* Removed `egui::paint` (use `egui::epaint` instead).
+
+### Contributors 🙏
+* [5225225](https://github.com/5225225): [#849](https://github.com/emilk/egui/pull/849).
+* [aevyrie](https://github.com/aevyrie): [#966](https://github.com/emilk/egui/pull/966).
+* [B-Reif](https://github.com/B-Reif): [#875](https://github.com/emilk/egui/pull/875).
+* [Bromeon](https://github.com/Bromeon): [#863](https://github.com/emilk/egui/pull/863), [#918](https://github.com/emilk/egui/pull/918).
+* [d10sfan](https://github.com/d10sfan): [#832](https://github.com/emilk/egui/pull/832).
+* [EmbersArc](https://github.com/EmbersArc): [#766](https://github.com/emilk/egui/pull/766), [#892](https://github.com/emilk/egui/pull/892).
+* [Hperigo](https://github.com/Hperigo): [#905](https://github.com/emilk/egui/pull/905).
+* [isegal](https://github.com/isegal): [#934](https://github.com/emilk/egui/pull/934).
+* [mankinskin](https://github.com/mankinskin): [#543](https://github.com/emilk/egui/pull/543).
+* [niladic](https://github.com/niladic): [#499](https://github.com/emilk/egui/pull/499), [#863](https://github.com/emilk/egui/pull/863).
+* [singalen](https://github.com/singalen): [#973](https://github.com/emilk/egui/pull/973).
+* [sumibi-yakitori](https://github.com/sumibi-yakitori): [#830](https://github.com/emilk/egui/pull/830), [#870](https://github.com/emilk/egui/pull/870).
+* [t18b219k](https://github.com/t18b219k): [#868](https://github.com/emilk/egui/pull/868), [#888](https://github.com/emilk/egui/pull/888).
+
+
+## 0.15.0 - 2021-10-24 - Syntax highlighting and hscroll
+
+<img src="media/egui-0.15-code-editor.gif">
+
+### Added ⭐
+* Added horizontal scrolling support to `ScrollArea` and `Window` (opt-in).
+* `TextEdit::layouter`: Add custom text layout for e.g. syntax highlighting or WYSIWYG.
+* `Fonts::layout_job`: New text layout engine allowing mixing fonts, colors and styles, with underlining and strikethrough.
+* Added `ui.add_enabled(bool, widget)` to easily add a possibly disabled widget.
+* Added `ui.add_enabled_ui(bool, |ui| …)` to create a possibly disabled UI section.
+* Added feature `"serialize"` separatedly from `"persistence"`.
+* Added `egui::widgets::global_dark_light_mode_buttons` to easily add buttons for switching the egui theme.
+* `TextEdit` can now be used to show text which can be selected and copied, but not edited.
+* Added `Memory::caches` for caching things from one frame to the next.
+
+### Changed 🔧
+* Change the default monospace font to [Hack](https://github.com/source-foundry/Hack).
+* Label text will now be centered, right-aligned and/or justified based on the layout of the `Ui` it is in.
 * `Hyperlink` will now word-wrap just like a `Label`.
-* All `Ui`:s must now have a finite `max_rect`.
+* All `Ui`s must now have a finite `max_rect`.
   * Deprecated: `max_rect_finite`, `available_size_before_wrap_finite` and `available_rect_before_wrap_finite`.
 * `Painter`/`Fonts`: text layout now expect a color when creating a `Galley`. You may override that color with `Painter::galley_with_color`.
 * MSRV (Minimum Supported Rust Version) is now `1.54.0`.
-* By default, `DragValue`:s no longer show a tooltip when hovered. Change with `Style::explanation_tooltips`.
+* By default, `DragValue`s no longer show a tooltip when hovered. Change with `Style::explanation_tooltips`.
 * Smaller and nicer color picker.
 * `ScrollArea` will auto-shrink to content size unless told otherwise using `ScollArea::auto_shrink`.
 * By default, `Slider`'s `clamp_to_range` is set to true.
-* Rename `TextEdit::enabled` to `TextEdit::interactive`.
+* Renamed `TextEdit::enabled` to `TextEdit::interactive`.
 * `ui.label` (and friends) now take `impl ToString` as argument instead of `impl Into<Label>`.
 
 ### Fixed 🐛
-* Fix wrongly sized multiline `TextEdit` in justified layouts.
-* Fix clip rectangle of windows that don't fit the central area.
+* Fixed wrongly sized multiline `TextEdit` in justified layouts.
+* Fixed clip rectangle of windows that don't fit the central area.
 * Show tooltips above widgets on touch screens.
-* Fix popups sometimes getting clipped by panels.
+* Fixed popups sometimes getting clipped by panels.
 
 ### Removed 🔥
 * Replace `Button::enabled` with `ui.add_enabled`.
 
+### Contributors 🙏
+* [AlexApps99](https://github.com/AlexApps99)
+* [baysmith](https://github.com/baysmith)
+* [bpostlethwaite](https://github.com/bpostlethwaite)
+* [cwfitzgerald](https://github.com/cwfitzgerald)
+* [DrOptix](https://github.com/DrOptix)
+* [JerzySpendel](https://github.com/JerzySpendel)
+* [NiceneNerd](https://github.com/NiceneNerd)
+* [parasyte](https://github.com/parasyte)
+* [spersson](https://github.com/spersson)
+* [Stock84-dev](https://github.com/Stock84-dev)
+* [sumibi-yakitori](https://github.com/sumibi-yakitori)
+* [t18b219k](https://github.com/t18b219k)
+* [TobTobXX](https://github.com/TobTobXX)
+* [zu1k](https://github.com/zu1k)
+
 
 ## 0.14.2 - 2021-08-28 - Window resize fix
 
 ### Fixed 🐛
-* Fix window resize bug introduced in `0.14.1`.
+* Fixed window resize bug introduced in `0.14.1`.
 
 
 ## 0.14.1 - 2021-08-28 - Layout bug fixes
 
 ### Added ⭐
-* Add `Ui::horizontal_top`.
+* Added `Ui::horizontal_top`.
 
 ### Fixed 🐛
-* Fix `set_width/set_min_width/set_height/set_min_height/expand_to_include_x/expand_to_include_y`.
+* Fixed `set_width/set_min_width/set_height/set_min_height/expand_to_include_x/expand_to_include_y`.
 * Make minimum grid column width propagate properly.
 * Make sure `TextEdit` contents expand to fill width if applicable.
 * `ProgressBar`: add a minimum width and fix for having it in an infinite layout.
-* Fix sometimes not being able to click inside a combo box or popup menu.
+* Fixed sometimes not being able to click inside a combo box or popup menu.
 
 
 ## 0.14.0 - 2021-08-24 - Ui panels and bug fixes
@@ -67,10 +461,10 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
 * Panels can now be added to any `Ui`.
 * Plot:
   * [Line styles](https://github.com/emilk/egui/pull/482).
-  * Add `show_background` and `show_axes` methods to `Plot`.
+  * Added `show_background` and `show_axes` methods to `Plot`.
 * [Progress bar](https://github.com/emilk/egui/pull/519).
 * `Grid::num_columns`: allow the last column to take up the rest of the space of the parent `Ui`.
-* Add an API for dropping files into egui (see `RawInput`).
+* Added an API for dropping files into egui (see `RawInput`).
 * `CollapsingHeader` can now optionally be selectable.
 
 ### Changed 🔧
@@ -80,12 +474,12 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
 * Tooltips are now moved to not cover the widget they are attached to.
 
 ### Fixed 🐛
-* Fix custom font definitions getting replaced when `pixels_per_point` is changed.
-* Fix `lost_focus` for `TextEdit`.
+* Fixed custom font definitions getting replaced when `pixels_per_point` is changed.
+* Fixed `lost_focus` for `TextEdit`.
 * Clicking the edge of a menu button will now properly open the menu.
-* Fix hover detection close to an `Area`.
-* Fix case where `Plot`'s `min_auto_bounds` could be ignored after the first call to `Plot::ui`.
-* Fix slow startup when using large font files.
+* Fixed hover detection close to an `Area`.
+* Fixed case where `Plot`'s `min_auto_bounds` could be ignored after the first call to `Plot::ui`.
+* Fixed slow startup when using large font files.
 
 ### Contributors 🙏
 * [barrowsys](https://github.com/barrowsys)
@@ -117,19 +511,19 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
   * [Plot legend improvements](https://github.com/emilk/egui/pull/410).
   * [Line markers for plots](https://github.com/emilk/egui/pull/363).
 * Panels:
-  * Add right and bottom panels (`SidePanel::right` and `Panel::bottom`).
+  * Added right and bottom panels (`SidePanel::right` and `Panel::bottom`).
   * Panels can now be resized.
-  * Add an option to overwrite frame of a `Panel`.
+  * Added an option to overwrite frame of a `Panel`.
 * [Improve accessibility / screen reader](https://github.com/emilk/egui/pull/412).
-* Add `ScrollArea::show_rows` for efficient scrolling of huge UI:s.
-* Add `ScrollArea::enable_scrolling` to allow freezing scrolling when editing TextEdit widgets within it
-* Add `Ui::set_visible` as a way to hide widgets.
-* Add `Style::override_text_style` to easily change the text style of everything in a `Ui` (or globally).
+* Added `ScrollArea::show_rows` for efficient scrolling of huge UI:s.
+* Added `ScrollArea::enable_scrolling` to allow freezing scrolling when editing TextEdit widgets within it
+* Added `Ui::set_visible` as a way to hide widgets.
+* Added `Style::override_text_style` to easily change the text style of everything in a `Ui` (or globally).
 * You can now change `TextStyle` on checkboxes, radio buttons and `SelectableLabel`.
-* Add support for [cint](https://crates.io/crates/cint) under `cint` feature.
-* Add features `extra_asserts` and `extra_debug_asserts` to enable additional checks.
+* Added support for [cint](https://crates.io/crates/cint) under `cint` feature.
+* Added features `extra_asserts` and `extra_debug_asserts` to enable additional checks.
 * `TextEdit` now supports edits on a generic buffer using `TextBuffer`.
-* Add `Context::set_debug_on_hover` and `egui::trace!(ui)`
+* Added `Context::set_debug_on_hover` and `egui::trace!(ui)`
 
 ### Changed 🔧
 * Minimum Rust version is now 1.51 (used to be 1.52)
@@ -140,36 +534,36 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
 * `SidePanel::left` is resizable by default.
 
 ### Fixed 🐛
-* Fix uneven lettering on non-integral device scales ("extortion lettering").
-* Fix invisible scroll bar when native window is too narrow for egui.
+* Fixed uneven lettering on non-integral device scales ("extortion lettering").
+* Fixed invisible scroll bar when native window is too narrow for egui.
 
 
 ## 0.12.0 - 2021-05-10 - Multitouch, user memory, window pivots, and improved plots
 
 ### Added ⭐
-* Add anchors to windows and areas so you can put a window in e.g. the top right corner.
+* Added anchors to windows and areas so you can put a window in e.g. the top right corner.
 * Make labels interactive with `Label::sense(Sense::click())`.
-* Add `Response::request_focus` and `Response::surrender_focus`.
-* Add `TextEdit::code_editor` (VERY basic).
+* Added `Response::request_focus` and `Response::surrender_focus`.
+* Added `TextEdit::code_editor` (VERY basic).
 * [Pan and zoom plots](https://github.com/emilk/egui/pull/317).
 * [Add plot legends](https://github.com/emilk/egui/pull/349).
 * [Users can now store custom state in `egui::Memory`](https://github.com/emilk/egui/pull/257).
-* Add `Response::on_disabled_hover_text` to show tooltip for disabled widgets.
-* Zoom input: ctrl-scroll and (on `egui_web`) trackpad-pinch gesture.
+* Added `Response::on_disabled_hover_text` to show tooltip for disabled widgets.
+* Zoom input: ctrl-scroll and (on `eframe` web) trackpad-pinch gesture.
 * Support for raw [multi touch](https://github.com/emilk/egui/pull/306) events,
-  enabling zoom, rotate, and more. Works with `egui_web` on mobile devices,
+  enabling zoom, rotate, and more. Works with `eframe` web on mobile devices,
   and should work with `egui_glium` for certain touch devices/screens.
-* Add (optional) compatibility with [mint](https://docs.rs/mint).
+* Added (optional) compatibility with [mint](https://docs.rs/mint).
 
 ### Changed 🔧
 * Make `Memory::has_focus` public (again).
 * `Plot` must now be given a name that is unique within its scope.
 * Tab only selects labels if the `screen_reader` option is turned on.
-* Rename `ui.wrap` to `ui.scope`.
+* Renamed `ui.wrap` to `ui.scope`.
 
 ### Fixed 🐛
-* Fix [defocus-bug on touch screens](https://github.com/emilk/egui/issues/288).
-* Fix bug with the layout of wide `DragValue`:s.
+* Fixed [defocus-bug on touch screens](https://github.com/emilk/egui/issues/288).
+* Fixed bug with the layout of wide `DragValue`s.
 
 ### Removed 🔥
 * Moved experimental markup language to `egui_demo_lib`
@@ -183,24 +577,24 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
   * Use arrow keys to adjust sliders and `DragValue`s.
 * egui will now output events when widgets gain keyboard focus.
   * This can be hooked up to a screen reader to aid the visually impaired
-* Add the option to restrict the dragging bounds of `Window` and `Area` to a specified area using `drag_bounds(rect)`.
-* Add support for small and raised text.
-* Add `ui.set_row_height`.
-* Add `DebugOptions::show_widgets` to debug layouting by hovering widgets.
-* Add `ComboBox` to more easily customize combo boxes.
-* Add `Slider::new` and `DragValue::new` to replace old type-specific constructors.
-* Add `TextEdit::password` to hide input characters.
+* Added the option to restrict the dragging bounds of `Window` and `Area` to a specified area using `drag_bounds(rect)`.
+* Added support for small and raised text.
+* Added `ui.set_row_height`.
+* Added `DebugOptions::show_widgets` to debug layouting by hovering widgets.
+* Added `ComboBox` to more easily customize combo boxes.
+* Added `Slider::new` and `DragValue::new` to replace old type-specific constructors.
+* Added `TextEdit::password` to hide input characters.
 
 ### Changed 🔧
 * `ui.advance_cursor` is now called `ui.add_space`.
 * `kb_focus` is now just called `focus`.
 
 ### Fixed 🐛
-* Fix some bugs related to centered layouts.
+* Fixed some bugs related to centered layouts.
 * Fixed secondary-click to open a menu.
 * [Fix panic for zero-range sliders and zero-speed drag values](https://github.com/emilk/egui/pull/216).
-* Fix false id clash error for wrapping text.
-* Fix bug that would close a popup (e.g. the color picker) when clicking inside of it.
+* Fixed false id clash error for wrapping text.
+* Fixed bug that would close a popup (e.g. the color picker) when clicking inside of it.
 
 ### Deprecated ☢️
 * Deprectated `combo_box_with_label` in favor of new `ComboBox`.
@@ -212,12 +606,12 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
 <img src="media/egui-0.10-plot.gif" width="50%">
 
 ### Added ⭐
-* Add `egui::plot::Plot` to plot some 2D data.
-* Add `Ui::hyperlink_to(label, url)`.
+* Added `egui::plot::Plot` to plot some 2D data.
+* Added `Ui::hyperlink_to(label, url)`.
 * Sliders can now have a value prefix and suffix (e.g. the suffix `"°"` works like a unit).
 * `Context::set_pixels_per_point` to control the scale of the UI.
-* Add `Response::changed()` to query if e.g. a slider was dragged, text was entered or a checkbox was clicked.
-* Add support for all integers in `DragValue` and `Slider` (except 128-bit).
+* Added `Response::changed()` to query if e.g. a slider was dragged, text was entered or a checkbox was clicked.
+* Added support for all integers in `DragValue` and `Slider` (except 128-bit).
 
 ### Changed 🔧
 * Improve the positioning of tooltips.
@@ -231,23 +625,23 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
 <img src="media/0.9.0-disabled.gif" width="50%">
 
 ### Added ⭐
-* Add support for secondary and middle mouse buttons.
-* Add `Label` methods for code, strong, strikethrough, underline and italics.
-* Add `ui.group(|ui| { … })` to visually group some widgets within a frame.
-* Add `Ui` helpers for doing manual layout (`ui.put`, `ui.allocate_ui_at_rect` and more).
-* Add `ui.set_enabled(false)` to disable all widgets in a `Ui` (grayed out and non-interactive).
-* Add `TextEdit::hint_text` for showing a weak hint text when empty.
+* Added support for secondary and middle mouse buttons.
+* Added `Label` methods for code, strong, strikethrough, underline and italics.
+* Added `ui.group(|ui| { … })` to visually group some widgets within a frame.
+* Added `Ui` helpers for doing manual layout (`ui.put`, `ui.allocate_ui_at_rect` and more).
+* Added `ui.set_enabled(false)` to disable all widgets in a `Ui` (grayed out and non-interactive).
+* Added `TextEdit::hint_text` for showing a weak hint text when empty.
 * `egui::popup::popup_below_widget`: show a popup area below another widget.
-* Add `Slider::clamp_to_range(bool)`: if set, clamp the incoming and outgoing values to the slider range.
+* Added `Slider::clamp_to_range(bool)`: if set, clamp the incoming and outgoing values to the slider range.
 * Add: `ui.spacing()`, `ui.spacing_mut()`, `ui.visuals()`, `ui.visuals_mut()`.
 * Add: `ctx.set_visuals()`.
 * You can now control text wrapping with `Style::wrap`.
-* Add `Grid::max_col_width`.
+* Added `Grid::max_col_width`.
 
 ### Changed 🔧
 * Text will now wrap at newlines, spaces, dashes, punctuation or in the middle of a words if necessary, in that order of priority.
 * Widgets will now always line break at `\n` characters.
-* Widgets will now more intelligently choose wether or not to wrap text.
+* Widgets will now more intelligently choose whether or not to wrap text.
 * `mouse` has been renamed `pointer` everywhere (to make it clear it includes touches too).
 * Most parts of `Response` are now methods, so `if ui.button("…").clicked {` is now `if ui.button("…").clicked() {`.
 * `Response::active` is now gone. You can use `response.dragged()` or `response.clicked()` instead.
@@ -274,9 +668,9 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
 
 ### Changed 🔧
 * New simpler and sleeker look!
-* Rename `PaintCmd` to `Shape`.
+* Renamed `PaintCmd` to `Shape`.
 * Replace tuple `(Rect, Shape)` with tuple-struct `ClippedShape`.
-* Rename feature `"serde"` to `"persistence"`.
+* Renamed feature `"serde"` to `"persistence"`.
 * Break out the modules `math` and `paint` into separate crates `emath` and `epaint`.
 
 ### Fixed 🐛
@@ -287,8 +681,8 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
 ## 0.7.0 - 2021-01-04
 
 ### Added ⭐
-* Add `ui.scroll_to_cursor` and `response.scroll_to_me` ([#81](https://github.com/emilk/egui/pull/81) by [lucaspoffo](https://github.com/lucaspoffo)).
-* Add `window.id(…)` and `area.id(…)` for overriding the default `Id`.
+* Added `ui.scroll_to_cursor` and `response.scroll_to_me` ([#81](https://github.com/emilk/egui/pull/81) by [lucaspoffo](https://github.com/lucaspoffo)).
+* Added `window.id(…)` and `area.id(…)` for overriding the default `Id`.
 
 ### Changed 🔧
 * Renamed `Srgba` to `Color32`.
@@ -314,10 +708,10 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
 * Mouse-over explanation to duplicate ID warning.
 * You can now easily constrain egui to a portion of the screen using `RawInput::screen_rect`.
 * You can now control the minimum and maixumum number of decimals to show in a `Slider` or `DragValue`.
-* Add `egui::math::Rot2`: rotation helper.
+* Added `egui::math::Rot2`: rotation helper.
 * `Response` now contains the `Id` of the widget it pertains to.
 * `ui.allocate_response` that allocates space and checks for interactions.
-* Add `response.interact(sense)`, e.g. to check for clicks on labels.
+* Added `response.interact(sense)`, e.g. to check for clicks on labels.
 
 ### Changed 🔧
 * `ui.allocate_space` now returns an `(Id, Rect)` tuple.
@@ -332,7 +726,7 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
 * Combo boxes has scroll bars when needed.
 * Expand `Window` + `Resize` containers to be large enough for last frames content
 * `ui.columns`: Columns now defaults to justified top-to-down layouts.
-* Rename `Sense::nothing()` to  `Sense::hover()`.
+* Renamed `Sense::nothing()` to  `Sense::hover()`.
 * Replaced `parking_lot` dependency with `atomic_refcell` by default.
 
 ### Fixed 🐛
@@ -358,7 +752,7 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
 * `SelectableLabel` (`ui.selectable_label` and `ui.selectable_value`): A text-button that can be selected.
 * `ui.small_button`: A smaller button that looks good embedded in text.
 * `ui.drag_angle_tau`: For those who want to specify angles as fractions of τ (a full turn).
-* Add `Resize::id_source` and `ScrollArea::id_source` to let the user avoid Id clashes.
+* Added `Resize::id_source` and `ScrollArea::id_source` to let the user avoid Id clashes.
 
 ### Changed 🔧
 * New default font: [Ubuntu-Light](https://fonts.google.com/specimen/Ubuntu).
@@ -401,7 +795,7 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
 ### Added ⭐
 * Panels: you can now create panels using `SidePanel`, `TopPanel` and `CentralPanel`.
 * You can now override the default egui fonts.
-* Add ability to override text color with `visuals.override_text_color`.
+* Added ability to override text color with `visuals.override_text_color`.
 * The demo now includes a simple drag-and-drop example.
 * The demo app now has a slider to scale all of egui.
 
@@ -418,7 +812,7 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
 * You can no longer throw windows.
 
 ### Fixed 🐛
-* Fix a bug where some regions would slowly grow for non-integral scales (`pixels_per_point`).
+* Fixed a bug where some regions would slowly grow for non-integral scales (`pixels_per_point`).
 
 
 ## 0.2.0 - 2020-10-10
@@ -430,6 +824,7 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
 * Optimization: coarse culling in the tessellator
 * CHANGED: switch argument order of `ui.checkbox` and `ui.radio`
 
+
 ## 0.1.4 - 2020-09-08
 
 This is when I started the CHANGELOG.md, after almost two years of development. Better late than never.
@@ -441,3 +836,13 @@ This is when I started the CHANGELOG.md, after almost two years of development.
 * Regions: resizing, vertical scrolling, collapsing headers (sections)
 * Rendering: Anti-aliased rendering of lines, circles, text and convex polygons.
 * Tooltips on hover
+
+
+## Earlier:
+
+* 2020-08-10: renamed the project to "egui"
+* 2020-05-30: first release on crates.io (0.1.0)
+* 2020-04-01: serious work starts (pandemic project)
+* 2019-03-12: gave a talk about what would later become egui: https://www.youtube.com/watch?v=-pmwLHw5Gbs
+* 2018-12-23: [initial commit](https://github.com/emilk/egui/commit/856bbf4dae4a69693a0324da34e8b0dd3754dfdf)
+* 2018-11-04: started tinkering on a train

CODE_OF_CONDUCT.md

@@ -0,0 +1,133 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+[the egui discord](https://discord.gg/JFcEma9bJq).
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations
+

CONTRIBUTING.md

@@ -11,12 +11,12 @@
 
 You can ask questions, share screenshots and more at [GitHub Discussions](https://github.com/emilk/egui/discussions).
 
-There is also an `egui` channel on the Embark discord at <https://discord.gg/vY8ZGS292W> (NOTE: I work at [Embark](https://www.embark-studios.com/), but `egui` is my hobby project).
+There is an `egui` discord at <https://discord.gg/vbuv9Xan65>.
 
 
 ## Filing an issue
 
-[Issues](https://github.com/emilk/egui/issues) are for bug reports and feature requests. Issues are not for asking questions (use [Discussions](https://github.com/emilk/egui/discussions) for that).
+[Issues](https://github.com/emilk/egui/issues) are for bug reports and feature requests. Issues are not for asking questions (use [Discussions](https://github.com/emilk/egui/discussions) or [Discord](https://discord.gg/vbuv9Xan65) for that).
 
 Always make sure there is not already a similar issue to the one you are creating.
 
@@ -36,6 +36,8 @@ When you feel the PR is ready to go, do a self-review of the code, and then open
 
 Please keep pull requests small and focused.
 
+Don't worry about having many small commits in the PR - they will be squashed to one commit once merged.
+
 Do not include the `.js` and `.wasm` build artifacts generated for building for web.
 `git` is not great at storing large files like these, so we only commit a new web demo after a new egui release.
 
@@ -57,13 +59,44 @@ Conventions unless otherwise specified:
 
 While using an immediate mode gui is simple, implementing one is a lot more tricky. There are many subtle corner-case you need to think through. The `egui` source code is a bit messy, partially because it is still evolving.
 
-* read some code before writing your own
-* follow the `egui` code style
-* write idiomatic rust
-* avoid `unsafe`
-* avoid code that can cause panics
-* use good names for everything
-* add docstrings to types, `struct` fields and all `pub fn`.
-* add some example code (doc-tests)
-* before making a function longer, consider adding a helper function
-* break the above rules when it makes sense
+* Read some code before writing your own.
+* Follow the `egui` code style.
+* Add blank lines around all `fn`, `struct`, `enum`, etc.
+* `// Comment like this.` and not `//like this`.
+* Use `TODO` instead of `FIXME`.
+* Add your github handle to the `TODO`:s you write, e.g: `TODO(emilk): clean this up`.
+* Write idiomatic rust.
+* Avoid `unsafe`.
+* Avoid code that can cause panics.
+* Use good names for everything.
+* Add docstrings to types, `struct` fields and all `pub fn`.
+* Add some example code (doc-tests).
+* Before making a function longer, consider adding a helper function.
+* If you are only using it in one function, put the `use` statement in that function. This improves locality, making it easier to read and move the code.
+* When importing a `trait` to use it's trait methods, do this: `use Trait as _;`. That lets the reader know why you imported it, even though it seems unused.
+* Follow the [Rust API Guidelines](https://rust-lang.github.io/api-guidelines/).
+* Break the above rules when it makes sense.
+
+
+### Good:
+``` rust
+/// The name of the thing.
+fn name(&self) -> &str {
+    &self.name
+}
+
+fn foo(&self) {
+    // TODO(emilk): implement
+}
+```
+
+### Bad:
+``` rust
+//some function
+fn get_name(&self) -> &str {
+    &self.name
+}
+fn foo(&self) {
+    //FIXME: implement
+}
+```

Cargo.toml

@@ -1,20 +1,19 @@
 [workspace]
 resolver = "2"
 members = [
-    "egui_demo_app",
-    "egui_demo_lib",
-    "egui_glium",
-    "egui_glow",
-    "egui_web",
-    "egui-winit",
-    "egui",
-    "emath",
-    "epaint",
-    "epi",
-]
+    "crates/ecolor",
+    "crates/egui_demo_app",
+    "crates/egui_demo_lib",
+    "crates/egui_extras",
+    "crates/egui_glow",
+    "crates/egui-wgpu",
+    "crates/egui-winit",
+    "crates/egui",
+    "crates/emath",
+    "crates/epaint",
 
-[profile.dev]
-split-debuginfo = "unpacked" # faster debug builds on mac
+    "examples/*",
+]
 
 [profile.release]
 # lto = true # VERY slightly smaller wasm
@@ -24,3 +23,13 @@ opt-level = 2 # fast and small wasm, basically same as `opt-level = 's'`
 # opt-level = 3 # unecessarily large wasm for no performance gain
 
 # debug = true # include debug symbols, useful when profiling wasm
+
+
+[profile.dev]
+# Can't leave this on by default, because it breaks the Windows build. Related: https://github.com/rust-lang/cargo/issues/4897
+# split-debuginfo = "unpacked" # faster debug builds on mac
+# opt-level = 1                # Make debug builds run faster
+
+# Optimize all dependencies even in debug builds (does not affect workspace packages):
+[profile.dev.package."*"]
+opt-level = 2

Cranky.toml

@@ -0,0 +1,124 @@
+# https://github.com/ericseppanen/cargo-cranky
+# cargo install cargo-cranky && cargo cranky
+
+deny = ["unsafe_code"]
+
+warn = [
+  "clippy::all",
+  "clippy::await_holding_lock",
+  "clippy::bool_to_int_with_if",
+  "clippy::char_lit_as_u8",
+  "clippy::checked_conversions",
+  "clippy::cloned_instead_of_copied",
+  "clippy::dbg_macro",
+  "clippy::debug_assert_with_mut_call",
+  "clippy::derive_partial_eq_without_eq",
+  "clippy::disallowed_methods",
+  "clippy::disallowed_script_idents",
+  "clippy::doc_link_with_quotes",
+  "clippy::doc_markdown",
+  "clippy::empty_enum",
+  "clippy::enum_glob_use",
+  "clippy::equatable_if_let",
+  "clippy::exit",
+  "clippy::expl_impl_clone_on_copy",
+  "clippy::explicit_deref_methods",
+  "clippy::explicit_into_iter_loop",
+  "clippy::explicit_iter_loop",
+  "clippy::fallible_impl_from",
+  "clippy::filter_map_next",
+  "clippy::flat_map_option",
+  "clippy::float_cmp_const",
+  "clippy::fn_params_excessive_bools",
+  "clippy::fn_to_numeric_cast_any",
+  "clippy::from_iter_instead_of_collect",
+  "clippy::if_let_mutex",
+  "clippy::implicit_clone",
+  "clippy::imprecise_flops",
+  "clippy::index_refutable_slice",
+  "clippy::inefficient_to_string",
+  "clippy::invalid_upcast_comparisons",
+  "clippy::iter_not_returning_iterator",
+  "clippy::iter_on_empty_collections",
+  "clippy::iter_on_single_items",
+  "clippy::large_digit_groups",
+  "clippy::large_stack_arrays",
+  "clippy::large_types_passed_by_value",
+  "clippy::let_unit_value",
+  "clippy::linkedlist",
+  "clippy::lossy_float_literal",
+  "clippy::macro_use_imports",
+  "clippy::manual_assert",
+  "clippy::manual_instant_elapsed",
+  "clippy::manual_ok_or",
+  "clippy::manual_string_new",
+  "clippy::map_err_ignore",
+  "clippy::map_flatten",
+  "clippy::map_unwrap_or",
+  "clippy::match_on_vec_items",
+  "clippy::match_same_arms",
+  "clippy::match_wild_err_arm",
+  "clippy::match_wildcard_for_single_variants",
+  "clippy::mem_forget",
+  "clippy::mismatched_target_os",
+  "clippy::mismatching_type_param_order",
+  "clippy::missing_enforced_import_renames",
+  "clippy::missing_errors_doc",
+  "clippy::missing_safety_doc",
+  "clippy::mut_mut",
+  "clippy::mutex_integer",
+  "clippy::needless_borrow",
+  "clippy::needless_continue",
+  "clippy::needless_for_each",
+  "clippy::needless_pass_by_value",
+  "clippy::negative_feature_names",
+  "clippy::nonstandard_macro_braces",
+  "clippy::option_option",
+  "clippy::path_buf_push_overwrite",
+  "clippy::ptr_as_ptr",
+  "clippy::rc_mutex",
+  "clippy::ref_option_ref",
+  "clippy::rest_pat_in_fully_bound_structs",
+  "clippy::same_functions_in_if_condition",
+  "clippy::semicolon_if_nothing_returned",
+  "clippy::single_match_else",
+  "clippy::str_to_string",
+  "clippy::string_add_assign",
+  "clippy::string_add",
+  "clippy::string_lit_as_bytes",
+  "clippy::string_to_string",
+  "clippy::todo",
+  "clippy::trailing_empty_array",
+  "clippy::trait_duplication_in_bounds",
+  "clippy::unimplemented",
+  "clippy::unnecessary_wraps",
+  "clippy::unnested_or_patterns",
+  "clippy::unused_peekable",
+  "clippy::unused_rounding",
+  "clippy::unused_self",
+  "clippy::useless_transmute",
+  "clippy::verbose_file_reads",
+  "clippy::zero_sized_map_values",
+  "elided_lifetimes_in_paths",
+  "future_incompatible",
+  "nonstandard_style",
+  "rust_2018_idioms",
+  "rust_2021_prelude_collisions",
+  "rustdoc::missing_crate_level_docs",
+  "semicolon_in_expressions_from_macros",
+  "trivial_numeric_casts",
+  "unused_extern_crates",
+  "unused_import_braces",
+  "unused_lifetimes",
+]
+
+allow = [
+  "clippy::manual_range_contains", # This one is just annoying
+
+  # Some of these we should try to put in "warn":
+  "clippy::type_complexity",
+  "clippy::undocumented_unsafe_blocks",
+  "trivial_casts",
+  "unsafe_op_in_unsafe_fn",             # `unsafe_op_in_unsafe_fn` may become the default in future Rust versions: https://github.com/rust-lang/rust/issues/71668
+  "unused_qualifications",
+]

README.md

@@ -5,11 +5,13 @@
 [![Documentation](https://docs.rs/egui/badge.svg)](https://docs.rs/egui)
 [![unsafe forbidden](https://img.shields.io/badge/unsafe-forbidden-success.svg)](https://github.com/rust-secure-code/safety-dance/)
 [![Build Status](https://github.com/emilk/egui/workflows/CI/badge.svg)](https://github.com/emilk/egui/actions?workflow=CI)
-![MIT](https://img.shields.io/badge/license-MIT-blue.svg)
-![Apache](https://img.shields.io/badge/license-Apache-blue.svg)
+[![MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/emilk/egui/blob/master/LICENSE-MIT)
+[![Apache](https://img.shields.io/badge/license-Apache-blue.svg)](https://github.com/emilk/egui/blob/master/LICENSE-APACHE)
+[![Discord](https://img.shields.io/discord/900275882684477440?label=egui%20discord)](https://discord.gg/JFcEma9bJq)
 
+👉 [Click to run the web demo](https://www.egui.rs/#demo) 👈
 
-egui is a simple, fast, and highly portable immediate mode GUI library for Rust. egui runs on the web, natively, and [in your favorite game engine](#integrations) (or will soon).
+egui (pronounced "e-gooey") is a simple, fast, and highly portable immediate mode GUI library for Rust. egui runs on the web, natively, and [in your favorite game engine](#integrations) (or will soon).
 
 egui aims to be the easiest-to-use Rust GUI library, and the simplest way to make a web app in Rust.
 
@@ -17,42 +19,21 @@ egui can be used anywhere you can draw textured triangles, which means you can e
 
 Sections:
 
+* [Example](#example)
 * [Quick start](#quick-start)
 * [Demo](#demo)
 * [Goals](#goals)
 * [Who is egui for?](#who-is-egui-for)
 * [State / features](#state)
-* [How it works](#how-it-works)
 * [Integrations](#integrations)
 * [Why immediate mode](#why-immediate-mode)
 * [FAQ](#faq)
 * [Other](#other)
+* [Credits](#credits)
 
-## Quick start
+([egui 的中文翻译文档 / chinese translation](https://github.com/Re-Ch-Love/egui-doc-cn/blob/main/README_zh-hans.md))
 
-If you just want to write a GUI application in Rust (for the web or for native), go to <https://github.com/emilk/eframe_template/> and follow the instructions there!
-
-If you want to integrate egui into an existing engine, go to the [Integrations](#integrations) section.
-
-If you have questions, use [Discussions](https://github.com/emilk/egui/discussions). If you want to contribute to egui, please read the [Contributing Guidelines](https://github.com/emilk/egui/blob/master/CONTRIBUTING.md)
-
-## Demo
-
-[Click to run egui web demo](https://emilk.github.io/egui/index.html) (works in any browser with WASM and WebGL support). Uses [`egui_web`](https://github.com/emilk/egui/tree/master/egui_web).
-
-To test the demo app locally, run `cargo run --release -p egui_demo_app`.
-
-The native backend is [`egui_glium`](https://github.com/emilk/egui/tree/master/egui_glium) (using [`glium`](https://github.com/glium/glium)) and should work out-of-the-box on Mac and Windows, but on Linux you need to first run:
-
-`sudo apt-get install libxcb-render0-dev libxcb-shape0-dev libxcb-xfixes0-dev libspeechd-dev libxkbcommon-dev libssl-dev`
-
-On Fedora Rawhide you need to run:
-
-`dnf install clang clang-devel clang-tools-extra speech-dispatcher-devel libxkbcommon-devel pkg-config openssl-devel`
-
-**NOTE**: This is just for the demo app - egui itself is completely platform agnostic!
-
-### Example
+## Example
 
 ``` rust
 ui.heading("My egui Application");
@@ -69,6 +50,30 @@ ui.label(format!("Hello '{}', age {}", name, age));
 
 <img src="media/demo.gif">
 
+## Quick start
+
+There are simple examples in [the `examples/` folder](https://github.com/emilk/egui/blob/master/examples/). If you want to write a web app, then go to <https://github.com/emilk/eframe_template/> and follow the instructions. The official docs are at <https://docs.rs/egui>. For inspiration and more examples, check out the [the egui web demo](https://www.egui.rs/#demo) and follow the links in it to its source code.
+
+If you want to integrate egui into an existing engine, go to the [Integrations](#integrations) section.
+
+If you have questions, use [GitHub Discussions](https://github.com/emilk/egui/discussions). There is also [an egui discord server](https://discord.gg/JFcEma9bJq). If you want to contribute to egui, please read the [Contributing Guidelines](https://github.com/emilk/egui/blob/master/CONTRIBUTING.md).
+
+## Demo
+
+[Click to run egui web demo](https://www.egui.rs/#demo) (works in any browser with WASM and WebGL support). Uses [`eframe`](https://github.com/emilk/egui/tree/master/crates/eframe).
+
+To test the demo app locally, run `cargo run --release -p egui_demo_app`.
+
+The native backend is [`egui_glow`](https://github.com/emilk/egui/tree/master/crates/egui_glow) (using [`glow`](https://crates.io/crates/glow)) and should work out-of-the-box on Mac and Windows, but on Linux you need to first run:
+
+`sudo apt-get install -y libclang-dev libgtk-3-dev libxcb-render0-dev libxcb-shape0-dev libxcb-xfixes0-dev libxkbcommon-dev libssl-dev`
+
+On Fedora Rawhide you need to run:
+
+`dnf install clang clang-devel clang-tools-extra libxkbcommon-devel pkg-config openssl-devel libxcb-devel`
+
+**NOTE**: This is just for the demo app - egui itself is completely platform agnostic!
+
 ## Goals
 
 * The easiest to use GUI library
@@ -79,10 +84,10 @@ ui.label(format!("Hello '{}', age {}", name, age));
 * A simple 2D graphics API for custom painting ([`epaint`](https://docs.rs/epaint)).
 * No callbacks
 * Pure immediate mode
-* Extensible: [easy to write your own widgets for egui](https://github.com/emilk/egui/blob/master/egui_demo_lib/src/apps/demo/toggle_switch.rs)
+* Extensible: [easy to write your own widgets for egui](https://github.com/emilk/egui/blob/master/crates/egui_demo_lib/src/demo/toggle_switch.rs)
 * Modular: You should be able to use small parts of egui and combine them in new ways
 * Safe: there is no `unsafe` code in egui
-* Minimal dependencies: [`ab_glyph`](https://crates.io/crates/ab_glyph) [`ahash`](https://crates.io/crates/ahash) [`atomic_refcell`](https://crates.io/crates/atomic_refcell), [`nohash-hasher`](https://crates.io/crates/nohash-hasher)
+* Minimal dependencies: [`ab_glyph`](https://crates.io/crates/ab_glyph) [`ahash`](https://crates.io/crates/ahash) [`nohash-hasher`](https://crates.io/crates/nohash-hasher) [`parking_lot`](https://crates.io/crates/parking_lot)
 
 egui is *not* a framework. egui is a library you call into, not an environment you program for.
 
@@ -109,7 +114,7 @@ The obvious alternative to egui is [`imgui-rs`](https://github.com/Gekkio/imgui-
 * egui is pure Rust
 * egui is easily compiled to WASM
 * egui lets you use native Rust string types (`imgui-rs` forces you to use annoying macros and wrappers for zero-terminated strings)
-* [Writing your own widgets in egui is simple](https://github.com/emilk/egui/blob/master/egui_demo_lib/src/apps/demo/toggle_switch.rs)
+* [Writing your own widgets in egui is simple](https://github.com/emilk/egui/blob/master/crates/egui_demo_lib/src/demo/toggle_switch.rs)
 
 egui also tries to improve your experience in other small ways:
 
@@ -143,76 +148,83 @@ Light Theme:
 
 <img src="media/light_theme.png" width="50%">
 
-## How it works
-
-Loop:
-
-* Gather input (mouse, touches, keyboard, screen size, etc) and give it to egui
-* Run application code (Immediate Mode GUI)
-* Tell egui to tessellate the frame graphics to a triangle mesh
-* Render the triangle mesh with your favorite graphics API (see [OpenGL example](https://github.com/emilk/egui/blob/master/egui_glium/src/painter.rs)) or use `eframe`, the egui framework crate.
-
 ## Integrations
 
-egui is build to be easy to integrate into any existing game engine or platform you are working on.
+egui is built to be easy to integrate into any existing game engine or platform you are working on.
 egui itself doesn't know or care on what OS it is running or how to render things to the screen - that is the job of the egui integration.
-The integration needs to do two things:
 
-* **IO**: Supply egui with input (mouse position, keyboard presses, …) and handle egui output (cursor changes, copy-paste integration, …).
-* **Painting**: Render the textured triangles that egui outputs.
+An integration needs to do the following each frame:
 
-### Official
+* **Input**: Gather input (mouse, touches, keyboard, screen size, etc) and give it to egui
+* Run the application code
+* **Output**: Handle egui output (cursor changes, paste, texture allocations, …)
+* **Painting**: Render the triangle mesh egui produces (see [OpenGL example](https://github.com/emilk/egui/blob/master/crates/egui_glow/src/painter.rs))
 
-There are three official egui integrations made for apps:
+### Official integrations
 
-* [`egui_web`](https://github.com/emilk/egui/tree/master/egui_web) for making a web app. Compiles to WASM, renders with WebGL. [Click to run the egui demo](https://emilk.github.io/egui/index.html).
-* [`egui_glium`](https://github.com/emilk/egui/tree/master/egui_glium) for compiling native apps with [Glium](https://github.com/glium/glium).
-* [`egui_glow`](https://github.com/emilk/egui/tree/master/egui_glow) for compiling native apps with [Glow](https://github.com/grovesNL/glow).
-* [`egui-winit`](https://github.com/emilk/egui/tree/master/egui-winit) for integrating with [`winit`](https://github.com/rust-windowing/winit). `egui-winit` is used by `egui_glium` and `egui_glow`.
+These are the official egui integrations:
 
-If you making an app, consider using [`eframe`](https://github.com/emilk/egui/tree/master/eframe), a framework which allows you to write code that works on both the web (`egui_web`) and native (using `egui_glium`).
+* [`eframe`](https://github.com/emilk/egui/tree/master/crates/eframe) for compiling the same app to web/wasm and desktop/native. Uses `egui-winit` and `egui_glow` or `egui-wgpu`.
+* [`egui_glow`](https://github.com/emilk/egui/tree/master/crates/egui_glow) for rendering egui with [glow](https://github.com/grovesNL/glow) on native and web, and for making native apps.
+* [`egui-wgpu`](https://github.com/emilk/egui/tree/master/crates/egui-wgpu) for [wgpu](https://crates.io/crates/wgpu) (WebGPU API).
+* [`egui-winit`](https://github.com/emilk/egui/tree/master/crates/egui-winit) for integrating with [winit](https://github.com/rust-windowing/winit).
+* [`egui_glium`](https://github.com/emilk/egui/tree/master/crates/egui_glium) for compiling native apps with [Glium](https://github.com/glium/glium) (DEPRECATED - looking for new maintainer).
 
-### 3rd party
+### 3rd party integrations
 
 * [`amethyst_egui`](https://github.com/jgraef/amethyst_egui) for [the Amethyst game engine](https://amethyst.rs/).
 * [`bevy_egui`](https://github.com/mvlabat/bevy_egui) for [the Bevy game engine](https://bevyengine.org/).
 * [`egui_glfw_gl`](https://github.com/cohaereo/egui_glfw_gl) for [GLFW](https://crates.io/crates/glfw).
-* [`egui-miniquad`](https://github.com/not-fl3/egui-miniquad) for [Miniquad](https://github.com/not-fl3/miniquad).
-* [`egui-macroquad`](https://github.com/optozorax/egui-macroquad) for [macroquad](https://github.com/not-fl3/macroquad).
+* [`egui-glutin-gl`](https://github.com/h3r2tic/egui-glutin-gl/) for [glutin](https://crates.io/crates/glutin).
 * [`egui_sdl2_gl`](https://crates.io/crates/egui_sdl2_gl) for [SDL2](https://crates.io/crates/sdl2).
+* [`egui_sdl2_platform`](https://github.com/ComLarsic/egui_sdl2_platform) for [SDL2](https://crates.io/crates/sdl2).
 * [`egui_vulkano`](https://github.com/derivator/egui_vulkano) for [Vulkano](https://github.com/vulkano-rs/vulkano).
-* [`egui-winit-ash-integration`](https://github.com/MatchaChoco010/egui-winit-ash-integration) for [winit](https://github.com/rust-windowing/winit) and [ash](https://github.com/MaikKlein/ash).
 * [`egui_winit_vulkano`](https://github.com/hakolao/egui_winit_vulkano) for [Vulkano](https://github.com/vulkano-rs/vulkano).
-* [`fltk-egui`](https://crates.io/crates/fltk-egui) for [fltk-rs](https://github.com/fltk-rs/fltk-rs).
-* [`ggez-egui`](https://github.com/NemuiSen/ggez-egui) for the [ggez](https://ggez.rs/) game framework.
-* [`godot-egui`](https://github.com/setzer22/godot-egui) for [`godot-rust`](https://github.com/godot-rust/godot-rust).
-* [`nannou_egui`](https://github.com/AlexEne/nannou_egui) for [nannou](https://nannou.cc).
+* [`egui-macroquad`](https://github.com/optozorax/egui-macroquad) for [macroquad](https://github.com/not-fl3/macroquad).
+* [`egui-miniquad`](https://github.com/not-fl3/egui-miniquad) for [Miniquad](https://github.com/not-fl3/miniquad).
+* [`egui_speedy2d`](https://github.com/heretik31/egui_speedy2d) for [Speedy2d](https://github.com/QuantumBadger/Speedy2D).
 * [`egui-tetra`](https://crates.io/crates/egui-tetra) for [Tetra](https://crates.io/crates/tetra), a 2D game framework.
-* [`egui_wgpu_backend`](https://crates.io/crates/egui_wgpu_backend) for [`wgpu`](https://crates.io/crates/wgpu) (WebGPU API).
+* [`egui-winit-ash-integration`](https://github.com/MatchaChoco010/egui-winit-ash-integration) for [winit](https://github.com/rust-windowing/winit) and [ash](https://github.com/MaikKlein/ash).
+* [`fltk-egui`](https://crates.io/crates/fltk-egui) for [fltk-rs](https://github.com/fltk-rs/fltk-rs).
+* [`ggegui`](https://github.com/NemuiSen/ggegui) for the [ggez](https://ggez.rs/) game framework.
+* [`godot-egui`](https://github.com/setzer22/godot-egui) for [godot-rust](https://github.com/godot-rust/godot-rust).
+* [`nannou_egui`](https://github.com/nannou-org/nannou/tree/master/nannou_egui) for [nannou](https://nannou.cc).
+* [`notan_egui`](https://github.com/Nazariglez/notan/tree/main/crates/notan_egui) for [notan](https://github.com/Nazariglez/notan).
+* [`screen-13-egui`](https://github.com/attackgoat/screen-13/tree/master/contrib/screen-13-egui) for [Screen 13](https://github.com/attackgoat/screen-13).
+* [`egui_skia`](https://github.com/lucasmerlin/egui_skia) for [skia](https://github.com/rust-skia/rust-skia/tree/master/skia-safe).
+* [`smithay-egui`](https://github.com/Smithay/smithay-egui) for [smithay](https://github.com/Smithay/smithay/).
+* [`tauri-egui`](https://github.com/tauri-apps/tauri-egui) for [tauri](https://github.com/tauri-apps/tauri).
 
-Missing an integration for the thing you're working on? Create one, it is easy!
+Missing an integration for the thing you're working on? Create one, it's easy!
 
 ### Writing your own egui integration
 
-You need to collect [`egui::RawInput`](https://docs.rs/egui/latest/egui/struct.RawInput.html), paint [`egui::ClippedMesh`](https://docs.rs/epaint/):es and handle [`egui::Output`](https://docs.rs/egui/latest/egui/struct.Output.html). The basic structure is this:
+You need to collect [`egui::RawInput`](https://docs.rs/egui/latest/egui/struct.RawInput.html) and handle [`egui::FullOutput`](https://docs.rs/egui/latest/egui/struct.FullOutput.html). The basic structure is this:
 
 ``` rust
-let mut egui_ctx = egui::Context::new();
+let mut egui_ctx = egui::CtxRef::default();
 
 // Game loop:
 loop {
+    // Gather input (mouse, touches, keyboard, screen size, etc):
     let raw_input: egui::RawInput = my_integration.gather_input();
-    egui_ctx.begin_frame(raw_input);
-    my_app.ui(&mut egui_ctx); // add panels, windows and widgets to `egui_ctx` here
-    let (output, shapes) = egui_ctx.end_frame();
-    let clipped_meshes = egui_ctx.tessellate(shapes); // create triangles to paint
-    my_integration.paint(clipped_meshes);
-    my_integration.set_cursor_icon(output.cursor_icon);
-    // Also see `egui::Output` for more
+    let full_output = egui_ctx.run(raw_input, |egui_ctx| {
+        my_app.ui(egui_ctx); // add panels, windows and widgets to `egui_ctx` here
+    });
+    let clipped_primitives = egui_ctx.tessellate(full_output.shapes); // creates triangles to paint
+
+    my_integration.paint(&full_output.textures_delta, clipped_primitives);
+
+    let platform_output = full_output.platform_output;
+    my_integration.set_cursor_icon(platform_output.cursor_icon);
+    if !platform_output.copied_text.is_empty() {
+        my_integration.set_clipboard_text(platform_output.copied_text);
+    }
+    // See `egui::FullOutput` and `egui::PlatformOutput` for more
 }
 ```
 
-For a reference OpenGL backend, see [the `egui_glium` painter](https://github.com/emilk/egui/blob/master/egui_glium/src/painter.rs), [the `egui_glow` painter](https://github.com/emilk/egui/blob/master/egui_glow/src/painter.rs), or [the `egui_web` `WebGL` painter](https://github.com/emilk/egui/blob/master/egui_web/src/webgl1.rs).
+For a reference OpenGL backend, see [the `egui_glium` painter](https://github.com/emilk/egui/blob/master/crates/egui_glium/src/painter.rs) or [the `egui_glow` painter](https://github.com/emilk/egui/blob/master/crates/egui_glow/src/painter.rs).
 
 ### Debugging your integration
 
@@ -229,11 +241,12 @@ For a reference OpenGL backend, see [the `egui_glium` painter](https://github.co
 
 * egui uses premultiplied alpha, so make sure your blending function is `(ONE, ONE_MINUS_SRC_ALPHA)`.
 * Make sure your texture sampler is clamped (`GL_CLAMP_TO_EDGE`).
-* Use an sRGBA-aware texture if available (e.g. `GL_SRGB8_ALPHA8`).
-  * Otherwise: remember to decode gamma in the fragment shader.
-* Decode the gamma of the incoming vertex colors in your vertex shader.
-* Turn on sRGBA/linear framebuffer if available (`GL_FRAMEBUFFER_SRGB`).
-  * Otherwise: gamma-encode the colors before you write them again.
+* egui prefers linear color spaces for all blending so:
+  * Use an sRGBA-aware texture if available (e.g. `GL_SRGB8_ALPHA8`).
+    * Otherwise: remember to decode gamma in the fragment shader.
+  * Decode the gamma of the incoming vertex colors in your vertex shader.
+  * Turn on sRGBA/linear framebuffer if available (`GL_FRAMEBUFFER_SRGB`).
+    * Otherwise: gamma-encode the colors before you write them again.
 
 
 ## Why immediate mode
@@ -296,14 +309,26 @@ Also see [GitHub Discussions](https://github.com/emilk/egui/discussions/categori
 Yes! But you need to install your own font (`.ttf` or `.otf`) using `Context::set_fonts`.
 
 ### Can I customize the look of egui?
-Yes! You can customize the colors, spacing and sizes of everything. By default egui comes with a dark and a light theme.
+Yes! You can customize the colors, spacing, fonts and sizes of everything using `Context::set_style`.
+
+Here is an example (from https://github.com/AlexxxRu/TinyPomodoro):
+
+<img src="media/pompodoro-skin.png" width="50%">
+
+### How do I use egui with `async`?
+If you call `.await` in your GUI code, the UI will freeze, which is very bad UX. Instead, keep the GUI thread non-blocking and communicate with any concurrent tasks (`async` tasks or other threads) with something like:
+* Channels (e.g. [`std::sync::mpsc::channel`](https://doc.rust-lang.org/std/sync/mpsc/fn.channel.html)). Make sure to use [`try_recv`](https://doc.rust-lang.org/std/sync/mpsc/struct.Receiver.html#method.try_recv) so you don't block the gui thread!
+* `Arc<Mutex<Value>>` (background thread sets a value; GUI thread reads it)
+* [`poll_promise::Promise`](https://docs.rs/poll-promise) (example: [`examples/download_image/`](https://github.com/emilk/egui/blob/master/examples/download_image/))
+* [`eventuals::Eventual`](https://docs.rs/eventuals/latest/eventuals/struct.Eventual.html)
+* [`tokio::sync::watch::channel`](https://docs.rs/tokio/latest/tokio/sync/watch/fn.channel.html)
 
 ### What about accessibility, such as screen readers?
-There is experimental support for a screen reader. In [the web demo](https://emilk.github.io/egui/index.html) you can enable it in the "Backend" tab.
+egui includes optional support for [AccessKit](https://accesskit.dev/), which currently implements the native accessibility APIs on Windows and macOS. This feature is enabled by default in eframe. For platforms that AccessKit doesn't yet support, including web, there is an experimental built-in screen reader; in [the web demo](https://www.egui.rs/#demo) you can enable it in the "Backend" tab.
 
-Read more at <https://github.com/emilk/egui/issues/167>.
+The original discussion of accessibility in egui is at <https://github.com/emilk/egui/issues/167>. Now that AccessKit support is merged, providing a strong foundation for future accessibility work, please open new issues on specific accessibility problems.
 
-### What is the difference between [egui](https://docs.rs/egui) and [eframe](https://github.com/emilk/egui/tree/master/eframe)?
+### What is the difference between [egui](https://docs.rs/egui) and [eframe](https://github.com/emilk/egui/tree/master/crates/eframe)?
 
 `egui` is a 2D user interface library for laying out and interacting with buttons, sliders, etc.
 `egui` has no idea if it is running on the web or natively, and does not know how to collect input or show things on screen.
@@ -313,16 +338,24 @@ It is common to use `egui` from a game engine (using e.g. [`bevy_egui`](https://
 but you can also use `egui` stand-alone using `eframe`. `eframe` has integration for web and native, and handles input and rendering.
 The _frame_ in `eframe` stands both for the frame in which your egui app resides and also for "framework" (`frame` is a framework, `egui` is a library).
 
-### Why is `egui_web` using so much CPU in Firefox?
-On Linux and Mac, Firefox will copy the WebGL render target from GPU, to CPU and then back again: https://bugzilla.mozilla.org/show_bug.cgi?id=1010527#c0
-
-### Why does my web app not fill the full width of the screen?
-To alleviate the above mentioned performance issues the default max-width of an egui web app is 1024 points. You can change this by overriding the `fn max_size_points` of [`epi::App`](https://docs.rs/epi/latest/epi/trait.App.html).
-
 ### How do I render 3D stuff in an egui area?
-egui can't do 3D graphics itself, but if you use a 3D library (e.g. [`glium`](https://github.com/glium/glium) using [`egui_glium`](https://github.com/emilk/egui/tree/master/egui_glium), or [`miniquad`](https://github.com/not-fl3/miniquad) using [`egui-miniquad`](https://github.com/not-fl3/egui-miniquad)) you can render your 3D content to a texture, then display it using [`ui.image(…)`](https://docs.rs/egui/latest/egui/struct.Ui.html#method.image). You first need to convert the native texture to an [`egui::TextureId`](https://docs.rs/egui/latest/egui/enum.TextureId.html), and how to do this depends on the integration you use (e.g. [`register_glium_texture`](https://docs.rs/egui_glium/latest/egui_glium/struct.Painter.html#method.register_glium_texture)).
+There are multiple ways to combine egui with 3D. The simplest way is to use a 3D library and have egui sit on top of the 3D view. See for instance [`bevy_egui`](https://github.com/mvlabat/bevy_egui) or [`three-d`](https://github.com/asny/three-d).
 
-There is an example for showing a native glium texture in an egui window at <https://github.com/emilk/egui/blob/master/egui_glium/examples/native_texture.rs>.
+If you want to embed 3D into an egui view there are two options.
+
+#### `Shape::Callback`
+Examples:
+* <https://github.com/emilk/egui/blob/master/examples/custom_3d_three-d.rs>
+* <https://github.com/emilk/egui/blob/master/examples/custom_3d_glow.rs>
+
+`Shape::Callback` will call your code when egui gets painted, to show anything using whatever the background rendering context is. When using [`eframe`](https://github.com/emilk/egui/tree/master/crates/eframe) this will be [`glow`](https://github.com/grovesNL/glow). Other integrations will give you other rendering contexts, if they support `Shape::Callback` at all.
+
+#### Render-to-texture
+You can also render your 3D scene to a texture and display it using [`ui.image(…)`](https://docs.rs/egui/latest/egui/struct.Ui.html#method.image). You first need to convert the native texture to an [`egui::TextureId`](https://docs.rs/egui/latest/egui/enum.TextureId.html), and how to do this depends on the integration you use.
+
+Examples:
+* Using [`egui-miniquad`]( https://github.com/not-fl3/egui-miniquad): https://github.com/not-fl3/egui-miniquad/blob/master/examples/render_to_egui_image.rs
+* Using [`egui_glium`](https://github.com/emilk/egui/tree/master/crates/egui_glium): <https://github.com/emilk/egui/blob/master/crates/egui_glium/examples/native_texture.rs>.
 
 
 ## Other
@@ -337,7 +370,9 @@ All colors have premultiplied alpha.
 
 egui uses the builder pattern for construction widgets. For instance: `ui.add(Label::new("Hello").text_color(RED));` I am not a big fan of the builder pattern (it is quite verbose both in implementation and in use) but until Rust has named, default arguments it is the best we can do. To alleviate some of the verbosity there are common-case helper functions, like `ui.label("Hello");`.
 
-Instead of using matching `begin/end` style function calls (which can be error prone) egui prefers to use `FnOnce` closures passed to a wrapping function. Lambdas are a bit ugly though, so I'd like to find a nicer solution to this.
+Instead of using matching `begin/end` style function calls (which can be error prone) egui prefers to use `FnOnce` closures passed to a wrapping function. Lambdas are a bit ugly though, so I'd like to find a nicer solution to this. More discussion of this at <https://github.com/emilk/egui/issues/1004#issuecomment-1001650754>.
+
+egui uses a single `RwLock` for short-time locks on each access of `Context` data. This is to leave implementation simple and transactional and allow users to run their UI logic in parallel. Instead of creating mutex guards, egui uses closures passed to a wrapping function, e.g. `ctx.input(|i| i.key_down(Key::A))`. This is to make it less likely that a user would accidentally double-lock the `Context`, which would lead to a deadlock.
 
 ### Inspiration
 
@@ -349,15 +384,40 @@ The name of the library and the project is "egui" and pronounced as "e-gooey". P
 
 The library was originally called "Emigui", but was renamed to "egui" in 2020.
 
-### Credits / Licenses
+## Credits
 
-egui author: Emil Ernerfeldt
+egui author and maintainer: Emil Ernerfeldt [(@emilk](https://github.com/emilk)).
+
+Notable contributions by:
+
+* [@n2](https://github.com/n2): [Mobile web input and IME support](https://github.com/emilk/egui/pull/253).
+* [@optozorax](https://github.com/optozorax): [Arbitrary widget data storage](https://github.com/emilk/egui/pull/257).
+* [@quadruple-output](https://github.com/quadruple-output): [Multitouch](https://github.com/emilk/egui/pull/306).
+* [@EmbersArc](https://github.com/EmbersArc): [Plots](https://github.com/emilk/egui/pulls?q=+is%3Apr+author%3AEmbersArc).
+* [@AsmPrgmC3](https://github.com/AsmPrgmC3): [Proper sRGBA blending for web](https://github.com/emilk/egui/pull/650).
+* [@AlexApps99](https://github.com/AlexApps99): [`egui_glow`](https://github.com/emilk/egui/pull/685).
+* [@mankinskin](https://github.com/mankinskin): [Context menus](https://github.com/emilk/egui/pull/543).
+* [@t18b219k](https://github.com/t18b219k): [Port glow painter to web](https://github.com/emilk/egui/pull/868).
+* [@danielkeller](https://github.com/danielkeller): [`Context` refactor](https://github.com/emilk/egui/pull/1050).
+* [@MaximOsipenko](https://github.com/MaximOsipenko): [`Context` lock refactor](https://github.com/emilk/egui/pull/2625).
+* And [many more](https://github.com/emilk/egui/graphs/contributors?type=a).
 
 egui is licensed under [MIT](LICENSE-MIT) OR [Apache-2.0](LICENSE-APACHE).
 
-Fonts:
+* The flattening algorithm for the cubic bezier curve and quadratic bezier curve is from [lyon_geom](https://docs.rs/lyon_geom/latest/lyon_geom/)
+
+Default fonts:
 
 * `emoji-icon-font.ttf`: [Copyright (c) 2014 John Slegers](https://github.com/jslegers/emoji-icon-font) , MIT License
 * `Hack-Regular.ttf`: <https://github.com/source-foundry/Hack>, [MIT Licence](https://github.com/source-foundry/Hack/blob/master/LICENSE.md)
 * `NotoEmoji-Regular.ttf`: [google.com/get/noto](https://google.com/get/noto), [SIL Open Font License](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL)
 * `Ubuntu-Light.ttf` by [Dalton Maag](http://www.daltonmaag.com/): [Ubuntu font licence](https://ubuntu.com/legal/font-licence)
+
+---
+
+<div align="center">
+<img src="media/rerun_io_logo.png" width="50%">
+
+egui development is sponsored by [Rerun](https://www.rerun.io/), a startup doing<br>
+visualizations for computer vision and robotics.
+</div>

bacon.toml

@@ -0,0 +1,46 @@
+# This is a configuration file for the bacon tool
+# More info at https://github.com/Canop/bacon
+
+default_job = "cranky"
+
+[jobs]
+
+[jobs.cranky]
+command = ["cargo", "cranky", "--all-targets", "--all-features", "--color", "always"]
+need_stdout = false
+watch = ["tests", "benches", "examples"]
+
+[jobs.test]
+command = ["cargo", "test", "--color", "always"]
+need_stdout = true
+watch = ["tests"]
+
+[jobs.doc]
+command = ["cargo", "doc", "--color", "always", "--all-features", "--no-deps"]
+need_stdout = false
+
+# if the doc compiles, then it opens in your browser and bacon switches
+# to the previous job
+[jobs.doc-open]
+command = ["cargo", "doc", "--color", "always", "--all-features", "--no-deps", "--open"]
+need_stdout = false
+on_success = "back" # so that we don't open the browser at each change
+
+# You can run your application and have the result displayed in bacon,
+# *if* it makes sense for this crate. You can run an example the same
+# way. Don't forget the `--color always` part or the errors won't be
+# properly parsed.
+[jobs.run]
+command = ["cargo", "run", "--color", "always"]
+need_stdout = true
+
+# You may define here keybindings that would be specific to
+# a project, for example a shortcut to launch a specific job.
+# Shortcuts to internal functions (scrolling, toggling, etc.)
+# should go in your personal prefs.toml file instead.
+[keybindings]
+i = "job:initial"
+c = "job:cranky"
+d = "job:doc-open"
+t = "job:test"
+r = "job:run"

clippy.toml

@@ -0,0 +1 @@
+doc-valid-idents = ["AccessKit", ".."]

crates/ecolor/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog for ecolor
+All notable changes to the `ecolor` crate will be noted in this file.
+
+
+## Unreleased
+
+
+## 0.21.0 - 2023-02-08
+* Add `Color32::gamma_multiply` ([#2437](https://github.com/emilk/egui/pull/2437)).
+
+
+## 0.20.0 - 2022-12-08
+* Split out `ecolor` crate from `epaint`

crates/ecolor/Cargo.toml

@@ -0,0 +1,50 @@
+[package]
+name = "ecolor"
+version = "0.21.0"
+authors = [
+  "Emil Ernerfeldt <emil.ernerfeldt@gmail.com>",
+  "Andreas Reich <reichandreas@gmx.de>",
+]
+description = "Color structs and color conversion utilities"
+edition = "2021"
+rust-version = "1.65"
+homepage = "https://github.com/emilk/egui"
+license = "MIT OR Apache-2.0"
+readme = "README.md"
+repository = "https://github.com/emilk/egui"
+categories = ["mathematics", "encoding"]
+keywords = ["gui", "color", "conversion", "gamedev", "images"]
+include = ["../LICENSE-APACHE", "../LICENSE-MIT", "**/*.rs", "Cargo.toml"]
+
+[package.metadata.docs.rs]
+all-features = true
+
+[lib]
+
+
+[features]
+default = []
+
+## Enable additional checks if debug assertions are enabled (debug builds).
+extra_debug_asserts = []
+## Always enable additional checks.
+extra_asserts = []
+
+
+[dependencies]
+#! ### Optional dependencies
+
+## [`bytemuck`](https://docs.rs/bytemuck) enables you to cast `ecolor` types to `&[u8]`.
+bytemuck = { version = "1.7.2", optional = true, features = ["derive"] }
+
+## [`cint`](https://docs.rs/cint) enables interopability with other color libraries.
+cint = { version = "0.3.1", optional = true }
+
+## Enable the [`hex_color`] macro.
+color-hex = { version = "0.2.0", optional = true }
+
+## Enable this when generating docs.
+document-features = { version = "0.2", optional = true }
+
+## Allow serialization using [`serde`](https://docs.rs/serde).
+serde = { version = "1", optional = true, features = ["derive"] }

crates/ecolor/README.md

@@ -0,0 +1,11 @@
+# ecolor - egui color library
+
+[![Latest version](https://img.shields.io/crates/v/ecolor.svg)](https://crates.io/crates/ecolor)
+[![Documentation](https://docs.rs/ecolor/badge.svg)](https://docs.rs/ecolor)
+[![unsafe forbidden](https://img.shields.io/badge/unsafe-forbidden-success.svg)](https://github.com/rust-secure-code/safety-dance/)
+![MIT](https://img.shields.io/badge/license-MIT-blue.svg)
+![Apache](https://img.shields.io/badge/license-Apache-blue.svg)
+
+A simple color storage and conversion library.
+
+Made for [`egui`](https://github.com/emilk/egui/).

crates/ecolor/src/cint_impl.rs

@@ -0,0 +1,161 @@
+use super::*;
+use cint::{Alpha, ColorInterop, EncodedSrgb, Hsv, LinearSrgb, PremultipliedAlpha};
+
+// ---- Color32 ----
+
+impl From<Alpha<EncodedSrgb<u8>>> for Color32 {
+    fn from(srgba: Alpha<EncodedSrgb<u8>>) -> Self {
+        let Alpha {
+            color: EncodedSrgb { r, g, b },
+            alpha: a,
+        } = srgba;
+
+        Color32::from_rgba_unmultiplied(r, g, b, a)
+    }
+}
+
+// No From<Color32> for Alpha<_> because Color32 is premultiplied
+
+impl From<PremultipliedAlpha<EncodedSrgb<u8>>> for Color32 {
+    fn from(srgba: PremultipliedAlpha<EncodedSrgb<u8>>) -> Self {
+        let PremultipliedAlpha {
+            color: EncodedSrgb { r, g, b },
+            alpha: a,
+        } = srgba;
+
+        Color32::from_rgba_premultiplied(r, g, b, a)
+    }
+}
+
+impl From<Color32> for PremultipliedAlpha<EncodedSrgb<u8>> {
+    fn from(col: Color32) -> Self {
+        let (r, g, b, a) = col.to_tuple();
+
+        PremultipliedAlpha {
+            color: EncodedSrgb { r, g, b },
+            alpha: a,
+        }
+    }
+}
+
+impl From<PremultipliedAlpha<EncodedSrgb<f32>>> for Color32 {
+    fn from(srgba: PremultipliedAlpha<EncodedSrgb<f32>>) -> Self {
+        let PremultipliedAlpha {
+            color: EncodedSrgb { r, g, b },
+            alpha: a,
+        } = srgba;
+
+        // This is a bit of an abuse of the function name but it does what we want.
+        let r = linear_u8_from_linear_f32(r);
+        let g = linear_u8_from_linear_f32(g);
+        let b = linear_u8_from_linear_f32(b);
+        let a = linear_u8_from_linear_f32(a);
+
+        Color32::from_rgba_premultiplied(r, g, b, a)
+    }
+}
+
+impl From<Color32> for PremultipliedAlpha<EncodedSrgb<f32>> {
+    fn from(col: Color32) -> Self {
+        let (r, g, b, a) = col.to_tuple();
+
+        // This is a bit of an abuse of the function name but it does what we want.
+        let r = linear_f32_from_linear_u8(r);
+        let g = linear_f32_from_linear_u8(g);
+        let b = linear_f32_from_linear_u8(b);
+        let a = linear_f32_from_linear_u8(a);
+
+        PremultipliedAlpha {
+            color: EncodedSrgb { r, g, b },
+            alpha: a,
+        }
+    }
+}
+
+impl ColorInterop for Color32 {
+    type CintTy = PremultipliedAlpha<EncodedSrgb<u8>>;
+}
+
+// ---- Rgba ----
+
+impl From<PremultipliedAlpha<LinearSrgb<f32>>> for Rgba {
+    fn from(srgba: PremultipliedAlpha<LinearSrgb<f32>>) -> Self {
+        let PremultipliedAlpha {
+            color: LinearSrgb { r, g, b },
+            alpha: a,
+        } = srgba;
+
+        Rgba([r, g, b, a])
+    }
+}
+
+impl From<Rgba> for PremultipliedAlpha<LinearSrgb<f32>> {
+    fn from(col: Rgba) -> Self {
+        let (r, g, b, a) = col.to_tuple();
+
+        PremultipliedAlpha {
+            color: LinearSrgb { r, g, b },
+            alpha: a,
+        }
+    }
+}
+
+impl ColorInterop for Rgba {
+    type CintTy = PremultipliedAlpha<LinearSrgb<f32>>;
+}
+
+// ---- Hsva ----
+
+impl From<Alpha<Hsv<f32>>> for Hsva {
+    fn from(srgba: Alpha<Hsv<f32>>) -> Self {
+        let Alpha {
+            color: Hsv { h, s, v },
+            alpha: a,
+        } = srgba;
+
+        Hsva::new(h, s, v, a)
+    }
+}
+
+impl From<Hsva> for Alpha<Hsv<f32>> {
+    fn from(col: Hsva) -> Self {
+        let Hsva { h, s, v, a } = col;
+
+        Alpha {
+            color: Hsv { h, s, v },
+            alpha: a,
+        }
+    }
+}
+
+impl ColorInterop for Hsva {
+    type CintTy = Alpha<Hsv<f32>>;
+}
+
+// ---- HsvaGamma ----
+
+impl ColorInterop for HsvaGamma {
+    type CintTy = Alpha<Hsv<f32>>;
+}
+
+impl From<Alpha<Hsv<f32>>> for HsvaGamma {
+    fn from(srgba: Alpha<Hsv<f32>>) -> Self {
+        let Alpha {
+            color: Hsv { h, s, v },
+            alpha: a,
+        } = srgba;
+
+        Hsva::new(h, s, v, a).into()
+    }
+}
+
+impl From<HsvaGamma> for Alpha<Hsv<f32>> {
+    fn from(col: HsvaGamma) -> Self {
+        let Hsva { h, s, v, a } = col.into();
+
+        Alpha {
+            color: Hsv { h, s, v },
+            alpha: a,
+        }
+    }
+}

crates/ecolor/src/color32.rs

@@ -0,0 +1,216 @@
+use crate::{gamma_u8_from_linear_f32, linear_f32_from_gamma_u8, linear_f32_from_linear_u8, Rgba};
+
+/// This format is used for space-efficient color representation (32 bits).
+///
+/// Instead of manipulating this directly it is often better
+/// to first convert it to either [`Rgba`] or [`crate::Hsva`].
+///
+/// Internally this uses 0-255 gamma space `sRGBA` color with premultiplied alpha.
+/// Alpha channel is in linear space.
+#[repr(C)]
+#[derive(Clone, Copy, Debug, Default, Eq, Hash, PartialEq)]
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+#[cfg_attr(feature = "bytemuck", derive(bytemuck::Pod, bytemuck::Zeroable))]
+pub struct Color32(pub(crate) [u8; 4]);
+
+impl std::ops::Index<usize> for Color32 {
+    type Output = u8;
+
+    #[inline(always)]
+    fn index(&self, index: usize) -> &u8 {
+        &self.0[index]
+    }
+}
+
+impl std::ops::IndexMut<usize> for Color32 {
+    #[inline(always)]
+    fn index_mut(&mut self, index: usize) -> &mut u8 {
+        &mut self.0[index]
+    }
+}
+
+impl Color32 {
+    // Mostly follows CSS names:
+
+    pub const TRANSPARENT: Color32 = Color32::from_rgba_premultiplied(0, 0, 0, 0);
+    pub const BLACK: Color32 = Color32::from_rgb(0, 0, 0);
+    pub const DARK_GRAY: Color32 = Color32::from_rgb(96, 96, 96);
+    pub const GRAY: Color32 = Color32::from_rgb(160, 160, 160);
+    pub const LIGHT_GRAY: Color32 = Color32::from_rgb(220, 220, 220);
+    pub const WHITE: Color32 = Color32::from_rgb(255, 255, 255);
+
+    pub const BROWN: Color32 = Color32::from_rgb(165, 42, 42);
+    pub const DARK_RED: Color32 = Color32::from_rgb(0x8B, 0, 0);
+    pub const RED: Color32 = Color32::from_rgb(255, 0, 0);
+    pub const LIGHT_RED: Color32 = Color32::from_rgb(255, 128, 128);
+
+    pub const YELLOW: Color32 = Color32::from_rgb(255, 255, 0);
+    pub const LIGHT_YELLOW: Color32 = Color32::from_rgb(255, 255, 0xE0);
+    pub const KHAKI: Color32 = Color32::from_rgb(240, 230, 140);
+
+    pub const DARK_GREEN: Color32 = Color32::from_rgb(0, 0x64, 0);
+    pub const GREEN: Color32 = Color32::from_rgb(0, 255, 0);
+    pub const LIGHT_GREEN: Color32 = Color32::from_rgb(0x90, 0xEE, 0x90);
+
+    pub const DARK_BLUE: Color32 = Color32::from_rgb(0, 0, 0x8B);
+    pub const BLUE: Color32 = Color32::from_rgb(0, 0, 255);
+    pub const LIGHT_BLUE: Color32 = Color32::from_rgb(0xAD, 0xD8, 0xE6);
+
+    pub const GOLD: Color32 = Color32::from_rgb(255, 215, 0);
+
+    pub const DEBUG_COLOR: Color32 = Color32::from_rgba_premultiplied(0, 200, 0, 128);
+
+    /// An ugly color that is planned to be replaced before making it to the screen.
+    pub const TEMPORARY_COLOR: Color32 = Color32::from_rgb(64, 254, 0);
+
+    #[inline(always)]
+    pub const fn from_rgb(r: u8, g: u8, b: u8) -> Self {
+        Self([r, g, b, 255])
+    }
+
+    #[inline(always)]
+    pub const fn from_rgb_additive(r: u8, g: u8, b: u8) -> Self {
+        Self([r, g, b, 0])
+    }
+
+    /// From `sRGBA` with premultiplied alpha.
+    #[inline(always)]
+    pub const fn from_rgba_premultiplied(r: u8, g: u8, b: u8, a: u8) -> Self {
+        Self([r, g, b, a])
+    }
+
+    /// From `sRGBA` WITHOUT premultiplied alpha.
+    pub fn from_rgba_unmultiplied(r: u8, g: u8, b: u8, a: u8) -> Self {
+        if a == 255 {
+            Self::from_rgb(r, g, b) // common-case optimization
+        } else if a == 0 {
+            Self::TRANSPARENT // common-case optimization
+        } else {
+            let r_lin = linear_f32_from_gamma_u8(r);
+            let g_lin = linear_f32_from_gamma_u8(g);
+            let b_lin = linear_f32_from_gamma_u8(b);
+            let a_lin = linear_f32_from_linear_u8(a);
+
+            let r = gamma_u8_from_linear_f32(r_lin * a_lin);
+            let g = gamma_u8_from_linear_f32(g_lin * a_lin);
+            let b = gamma_u8_from_linear_f32(b_lin * a_lin);
+
+            Self::from_rgba_premultiplied(r, g, b, a)
+        }
+    }
+
+    #[inline(always)]
+    pub const fn from_gray(l: u8) -> Self {
+        Self([l, l, l, 255])
+    }
+
+    #[inline(always)]
+    pub const fn from_black_alpha(a: u8) -> Self {
+        Self([0, 0, 0, a])
+    }
+
+    pub fn from_white_alpha(a: u8) -> Self {
+        Rgba::from_white_alpha(linear_f32_from_linear_u8(a)).into()
+    }
+
+    #[inline(always)]
+    pub const fn from_additive_luminance(l: u8) -> Self {
+        Self([l, l, l, 0])
+    }
+
+    #[inline(always)]
+    pub const fn is_opaque(&self) -> bool {
+        self.a() == 255
+    }
+
+    #[inline(always)]
+    pub const fn r(&self) -> u8 {
+        self.0[0]
+    }
+
+    #[inline(always)]
+    pub const fn g(&self) -> u8 {
+        self.0[1]
+    }
+
+    #[inline(always)]
+    pub const fn b(&self) -> u8 {
+        self.0[2]
+    }
+
+    #[inline(always)]
+    pub const fn a(&self) -> u8 {
+        self.0[3]
+    }
+
+    /// Returns an opaque version of self
+    pub fn to_opaque(self) -> Self {
+        Rgba::from(self).to_opaque().into()
+    }
+
+    /// Returns an additive version of self
+    #[inline(always)]
+    pub const fn additive(self) -> Self {
+        let [r, g, b, _] = self.to_array();
+        Self([r, g, b, 0])
+    }
+
+    /// Premultiplied RGBA
+    #[inline(always)]
+    pub const fn to_array(&self) -> [u8; 4] {
+        [self.r(), self.g(), self.b(), self.a()]
+    }
+
+    /// Premultiplied RGBA
+    #[inline(always)]
+    pub const fn to_tuple(&self) -> (u8, u8, u8, u8) {
+        (self.r(), self.g(), self.b(), self.a())
+    }
+
+    pub fn to_srgba_unmultiplied(&self) -> [u8; 4] {
+        Rgba::from(*self).to_srgba_unmultiplied()
+    }
+
+    /// Multiply with 0.5 to make color half as opaque, perceptually.
+    ///
+    /// Fast multiplication in gamma-space.
+    ///
+    /// This is perceptually even, and faster that [`Self::linear_multiply`].
+    #[inline]
+    pub fn gamma_multiply(self, factor: f32) -> Color32 {
+        crate::ecolor_assert!(0.0 <= factor && factor <= 1.0);
+        let Self([r, g, b, a]) = self;
+        Self([
+            (r as f32 * factor + 0.5) as u8,
+            (g as f32 * factor + 0.5) as u8,
+            (b as f32 * factor + 0.5) as u8,
+            (a as f32 * factor + 0.5) as u8,
+        ])
+    }
+
+    /// Multiply with 0.5 to make color half as opaque in linear space.
+    ///
+    /// This is using linear space, which is not perceptually even.
+    /// You may want to use [`Self::gamma_multiply`] instead.
+    pub fn linear_multiply(self, factor: f32) -> Color32 {
+        crate::ecolor_assert!(0.0 <= factor && factor <= 1.0);
+        // As an unfortunate side-effect of using premultiplied alpha
+        // we need a somewhat expensive conversion to linear space and back.
+        Rgba::from(self).multiply(factor).into()
+    }
+
+    /// Converts to floating point values in the range 0-1 without any gamma space conversion.
+    ///
+    /// Use this with great care! In almost all cases, you want to convert to [`crate::Rgba`] instead
+    /// in order to obtain linear space color values.
+    #[inline]
+    pub fn to_normalized_gamma_f32(self) -> [f32; 4] {
+        let Self([r, g, b, a]) = self;
+        [
+            r as f32 / 255.0,
+            g as f32 / 255.0,
+            b as f32 / 255.0,
+            a as f32 / 255.0,
+        ]
+    }
+}

crates/ecolor/src/hex_color_macro.rs

@@ -0,0 +1,39 @@
+/// Construct a [`crate::Color32`] from a hex RGB or RGBA string.
+///
+/// ```
+/// # use ecolor::{hex_color, Color32};
+/// assert_eq!(hex_color!("#202122"), Color32::from_rgb(0x20, 0x21, 0x22));
+/// assert_eq!(hex_color!("#abcdef12"), Color32::from_rgba_unmultiplied(0xab, 0xcd, 0xef, 0x12));
+/// ```
+#[macro_export]
+macro_rules! hex_color {
+    ($s:literal) => {{
+        let array = color_hex::color_from_hex!($s);
+        if array.len() == 3 {
+            $crate::Color32::from_rgb(array[0], array[1], array[2])
+        } else {
+            #[allow(unconditional_panic)]
+            $crate::Color32::from_rgba_unmultiplied(array[0], array[1], array[2], array[3])
+        }
+    }};
+}
+
+#[test]
+fn test_from_rgb_hex() {
+    assert_eq!(
+        crate::Color32::from_rgb(0x20, 0x21, 0x22),
+        hex_color!("#202122")
+    );
+    assert_eq!(
+        crate::Color32::from_rgb_additive(0x20, 0x21, 0x22),
+        hex_color!("#202122").additive()
+    );
+}
+
+#[test]
+fn test_from_rgba_hex() {
+    assert_eq!(
+        crate::Color32::from_rgba_unmultiplied(0x20, 0x21, 0x22, 0x50),
+        hex_color!("20212250")
+    );
+}

crates/ecolor/src/hsva.rs

@@ -0,0 +1,231 @@
+use crate::{
+    gamma_u8_from_linear_f32, linear_f32_from_gamma_u8, linear_f32_from_linear_u8,
+    linear_u8_from_linear_f32, Color32, Rgba,
+};
+
+/// Hue, saturation, value, alpha. All in the range [0, 1].
+/// No premultiplied alpha.
+#[derive(Clone, Copy, Debug, Default, PartialEq)]
+pub struct Hsva {
+    /// hue 0-1
+    pub h: f32,
+
+    /// saturation 0-1
+    pub s: f32,
+
+    /// value 0-1
+    pub v: f32,
+
+    /// alpha 0-1. A negative value signifies an additive color (and alpha is ignored).
+    pub a: f32,
+}
+
+impl Hsva {
+    pub fn new(h: f32, s: f32, v: f32, a: f32) -> Self {
+        Self { h, s, v, a }
+    }
+
+    /// From `sRGBA` with premultiplied alpha
+    pub fn from_srgba_premultiplied(srgba: [u8; 4]) -> Self {
+        Self::from_rgba_premultiplied(
+            linear_f32_from_gamma_u8(srgba[0]),
+            linear_f32_from_gamma_u8(srgba[1]),
+            linear_f32_from_gamma_u8(srgba[2]),
+            linear_f32_from_linear_u8(srgba[3]),
+        )
+    }
+
+    /// From `sRGBA` without premultiplied alpha
+    pub fn from_srgba_unmultiplied(srgba: [u8; 4]) -> Self {
+        Self::from_rgba_unmultiplied(
+            linear_f32_from_gamma_u8(srgba[0]),
+            linear_f32_from_gamma_u8(srgba[1]),
+            linear_f32_from_gamma_u8(srgba[2]),
+            linear_f32_from_linear_u8(srgba[3]),
+        )
+    }
+
+    /// From linear RGBA with premultiplied alpha
+    pub fn from_rgba_premultiplied(r: f32, g: f32, b: f32, a: f32) -> Self {
+        #![allow(clippy::many_single_char_names)]
+        if a == 0.0 {
+            if r == 0.0 && b == 0.0 && a == 0.0 {
+                Hsva::default()
+            } else {
+                Hsva::from_additive_rgb([r, g, b])
+            }
+        } else {
+            let (h, s, v) = hsv_from_rgb([r / a, g / a, b / a]);
+            Hsva { h, s, v, a }
+        }
+    }
+
+    /// From linear RGBA without premultiplied alpha
+    pub fn from_rgba_unmultiplied(r: f32, g: f32, b: f32, a: f32) -> Self {
+        #![allow(clippy::many_single_char_names)]
+        let (h, s, v) = hsv_from_rgb([r, g, b]);
+        Hsva { h, s, v, a }
+    }
+
+    pub fn from_additive_rgb(rgb: [f32; 3]) -> Self {
+        let (h, s, v) = hsv_from_rgb(rgb);
+        Hsva {
+            h,
+            s,
+            v,
+            a: -0.5, // anything negative is treated as additive
+        }
+    }
+
+    pub fn from_rgb(rgb: [f32; 3]) -> Self {
+        let (h, s, v) = hsv_from_rgb(rgb);
+        Hsva { h, s, v, a: 1.0 }
+    }
+
+    pub fn from_srgb([r, g, b]: [u8; 3]) -> Self {
+        Self::from_rgb([
+            linear_f32_from_gamma_u8(r),
+            linear_f32_from_gamma_u8(g),
+            linear_f32_from_gamma_u8(b),
+        ])
+    }
+
+    // ------------------------------------------------------------------------
+
+    pub fn to_opaque(self) -> Self {
+        Self { a: 1.0, ..self }
+    }
+
+    pub fn to_rgb(&self) -> [f32; 3] {
+        rgb_from_hsv((self.h, self.s, self.v))
+    }
+
+    pub fn to_srgb(&self) -> [u8; 3] {
+        let [r, g, b] = self.to_rgb();
+        [
+            gamma_u8_from_linear_f32(r),
+            gamma_u8_from_linear_f32(g),
+            gamma_u8_from_linear_f32(b),
+        ]
+    }
+
+    pub fn to_rgba_premultiplied(&self) -> [f32; 4] {
+        let [r, g, b, a] = self.to_rgba_unmultiplied();
+        let additive = a < 0.0;
+        if additive {
+            [r, g, b, 0.0]
+        } else {
+            [a * r, a * g, a * b, a]
+        }
+    }
+
+    /// Represents additive colors using a negative alpha.
+    pub fn to_rgba_unmultiplied(&self) -> [f32; 4] {
+        let Hsva { h, s, v, a } = *self;
+        let [r, g, b] = rgb_from_hsv((h, s, v));
+        [r, g, b, a]
+    }
+
+    pub fn to_srgba_premultiplied(&self) -> [u8; 4] {
+        let [r, g, b, a] = self.to_rgba_premultiplied();
+        [
+            gamma_u8_from_linear_f32(r),
+            gamma_u8_from_linear_f32(g),
+            gamma_u8_from_linear_f32(b),
+            linear_u8_from_linear_f32(a),
+        ]
+    }
+
+    pub fn to_srgba_unmultiplied(&self) -> [u8; 4] {
+        let [r, g, b, a] = self.to_rgba_unmultiplied();
+        [
+            gamma_u8_from_linear_f32(r),
+            gamma_u8_from_linear_f32(g),
+            gamma_u8_from_linear_f32(b),
+            linear_u8_from_linear_f32(a.abs()),
+        ]
+    }
+}
+
+impl From<Hsva> for Rgba {
+    fn from(hsva: Hsva) -> Rgba {
+        Rgba(hsva.to_rgba_premultiplied())
+    }
+}
+
+impl From<Rgba> for Hsva {
+    fn from(rgba: Rgba) -> Hsva {
+        Self::from_rgba_premultiplied(rgba.0[0], rgba.0[1], rgba.0[2], rgba.0[3])
+    }
+}
+
+impl From<Hsva> for Color32 {
+    fn from(hsva: Hsva) -> Color32 {
+        Color32::from(Rgba::from(hsva))
+    }
+}
+
+impl From<Color32> for Hsva {
+    fn from(srgba: Color32) -> Hsva {
+        Hsva::from(Rgba::from(srgba))
+    }
+}
+
+/// All ranges in 0-1, rgb is linear.
+pub fn hsv_from_rgb([r, g, b]: [f32; 3]) -> (f32, f32, f32) {
+    #![allow(clippy::many_single_char_names)]
+    let min = r.min(g.min(b));
+    let max = r.max(g.max(b)); // value
+
+    let range = max - min;
+
+    let h = if max == min {
+        0.0 // hue is undefined
+    } else if max == r {
+        (g - b) / (6.0 * range)
+    } else if max == g {
+        (b - r) / (6.0 * range) + 1.0 / 3.0
+    } else {
+        // max == b
+        (r - g) / (6.0 * range) + 2.0 / 3.0
+    };
+    let h = (h + 1.0).fract(); // wrap
+    let s = if max == 0.0 { 0.0 } else { 1.0 - min / max };
+    (h, s, max)
+}
+
+/// All ranges in 0-1, rgb is linear.
+pub fn rgb_from_hsv((h, s, v): (f32, f32, f32)) -> [f32; 3] {
+    #![allow(clippy::many_single_char_names)]
+    let h = (h.fract() + 1.0).fract(); // wrap
+    let s = s.clamp(0.0, 1.0);
+
+    let f = h * 6.0 - (h * 6.0).floor();
+    let p = v * (1.0 - s);
+    let q = v * (1.0 - f * s);
+    let t = v * (1.0 - (1.0 - f) * s);
+
+    match (h * 6.0).floor() as i32 % 6 {
+        0 => [v, t, p],
+        1 => [q, v, p],
+        2 => [p, v, t],
+        3 => [p, q, v],
+        4 => [t, p, v],
+        5 => [v, p, q],
+        _ => unreachable!(),
+    }
+}
+
+#[test]
+#[ignore] // a bit expensive
+fn test_hsv_roundtrip() {
+    for r in 0..=255 {
+        for g in 0..=255 {
+            for b in 0..=255 {
+                let srgba = Color32::from_rgb(r, g, b);
+                let hsva = Hsva::from(srgba);
+                assert_eq!(srgba, Color32::from(hsva));
+            }
+        }
+    }
+}

crates/ecolor/src/hsva_gamma.rs

@@ -0,0 +1,66 @@
+use crate::{gamma_from_linear, linear_from_gamma, Color32, Hsva, Rgba};
+
+/// Like Hsva but with the `v` value (brightness) being gamma corrected
+/// so that it is somewhat perceptually even.
+#[derive(Clone, Copy, Debug, Default, PartialEq)]
+pub struct HsvaGamma {
+    /// hue 0-1
+    pub h: f32,
+
+    /// saturation 0-1
+    pub s: f32,
+
+    /// value 0-1, in gamma-space (~perceptually even)
+    pub v: f32,
+
+    /// alpha 0-1. A negative value signifies an additive color (and alpha is ignored).
+    pub a: f32,
+}
+
+impl From<HsvaGamma> for Rgba {
+    fn from(hsvag: HsvaGamma) -> Rgba {
+        Hsva::from(hsvag).into()
+    }
+}
+
+impl From<HsvaGamma> for Color32 {
+    fn from(hsvag: HsvaGamma) -> Color32 {
+        Rgba::from(hsvag).into()
+    }
+}
+
+impl From<HsvaGamma> for Hsva {
+    fn from(hsvag: HsvaGamma) -> Hsva {
+        let HsvaGamma { h, s, v, a } = hsvag;
+        Hsva {
+            h,
+            s,
+            v: linear_from_gamma(v),
+            a,
+        }
+    }
+}
+
+impl From<Rgba> for HsvaGamma {
+    fn from(rgba: Rgba) -> HsvaGamma {
+        Hsva::from(rgba).into()
+    }
+}
+
+impl From<Color32> for HsvaGamma {
+    fn from(srgba: Color32) -> HsvaGamma {
+        Hsva::from(srgba).into()
+    }
+}
+
+impl From<Hsva> for HsvaGamma {
+    fn from(hsva: Hsva) -> HsvaGamma {
+        let Hsva { h, s, v, a } = hsva;
+        HsvaGamma {
+            h,
+            s,
+            v: gamma_from_linear(v),
+            a,
+        }
+    }
+}

crates/ecolor/src/lib.rs

@@ -0,0 +1,173 @@
+//! Color conversions and types.
+//!
+//! If you want a compact color representation, use [`Color32`].
+//! If you want to manipulate RGBA colors use [`Rgba`].
+//! If you want to manipulate colors in a way closer to how humans think about colors, use [`HsvaGamma`].
+//!
+//! ## Feature flags
+#![cfg_attr(feature = "document-features", doc = document_features::document_features!())]
+//!
+
+#![allow(clippy::wrong_self_convention)]
+
+#[cfg(feature = "cint")]
+mod cint_impl;
+#[cfg(feature = "cint")]
+pub use cint_impl::*;
+
+mod color32;
+pub use color32::*;
+
+mod hsva_gamma;
+pub use hsva_gamma::*;
+
+mod hsva;
+pub use hsva::*;
+
+#[cfg(feature = "color-hex")]
+mod hex_color_macro;
+
+mod rgba;
+pub use rgba::*;
+
+// ----------------------------------------------------------------------------
+// Color conversion:
+
+impl From<Color32> for Rgba {
+    fn from(srgba: Color32) -> Rgba {
+        Rgba([
+            linear_f32_from_gamma_u8(srgba.0[0]),
+            linear_f32_from_gamma_u8(srgba.0[1]),
+            linear_f32_from_gamma_u8(srgba.0[2]),
+            linear_f32_from_linear_u8(srgba.0[3]),
+        ])
+    }
+}
+
+impl From<Rgba> for Color32 {
+    fn from(rgba: Rgba) -> Color32 {
+        Color32([
+            gamma_u8_from_linear_f32(rgba.0[0]),
+            gamma_u8_from_linear_f32(rgba.0[1]),
+            gamma_u8_from_linear_f32(rgba.0[2]),
+            linear_u8_from_linear_f32(rgba.0[3]),
+        ])
+    }
+}
+
+/// gamma [0, 255] -> linear [0, 1].
+pub fn linear_f32_from_gamma_u8(s: u8) -> f32 {
+    if s <= 10 {
+        s as f32 / 3294.6
+    } else {
+        ((s as f32 + 14.025) / 269.025).powf(2.4)
+    }
+}
+
+/// linear [0, 255] -> linear [0, 1].
+/// Useful for alpha-channel.
+#[inline(always)]
+pub fn linear_f32_from_linear_u8(a: u8) -> f32 {
+    a as f32 / 255.0
+}
+
+/// linear [0, 1] -> gamma [0, 255] (clamped).
+/// Values outside this range will be clamped to the range.
+pub fn gamma_u8_from_linear_f32(l: f32) -> u8 {
+    if l <= 0.0 {
+        0
+    } else if l <= 0.0031308 {
+        fast_round(3294.6 * l)
+    } else if l <= 1.0 {
+        fast_round(269.025 * l.powf(1.0 / 2.4) - 14.025)
+    } else {
+        255
+    }
+}
+
+/// linear [0, 1] -> linear [0, 255] (clamped).
+/// Useful for alpha-channel.
+#[inline(always)]
+pub fn linear_u8_from_linear_f32(a: f32) -> u8 {
+    fast_round(a * 255.0)
+}
+
+fn fast_round(r: f32) -> u8 {
+    (r + 0.5).floor() as _ // rust does a saturating cast since 1.45
+}
+
+#[test]
+pub fn test_srgba_conversion() {
+    for b in 0..=255 {
+        let l = linear_f32_from_gamma_u8(b);
+        assert!(0.0 <= l && l <= 1.0);
+        assert_eq!(gamma_u8_from_linear_f32(l), b);
+    }
+}
+
+/// gamma [0, 1] -> linear [0, 1] (not clamped).
+/// Works for numbers outside this range (e.g. negative numbers).
+pub fn linear_from_gamma(gamma: f32) -> f32 {
+    if gamma < 0.0 {
+        -linear_from_gamma(-gamma)
+    } else if gamma <= 0.04045 {
+        gamma / 12.92
+    } else {
+        ((gamma + 0.055) / 1.055).powf(2.4)
+    }
+}
+
+/// linear [0, 1] -> gamma [0, 1] (not clamped).
+/// Works for numbers outside this range (e.g. negative numbers).
+pub fn gamma_from_linear(linear: f32) -> f32 {
+    if linear < 0.0 {
+        -gamma_from_linear(-linear)
+    } else if linear <= 0.0031308 {
+        12.92 * linear
+    } else {
+        1.055 * linear.powf(1.0 / 2.4) - 0.055
+    }
+}
+
+// ----------------------------------------------------------------------------
+
+/// An assert that is only active when `epaint` is compiled with the `extra_asserts` feature
+/// or with the `extra_debug_asserts` feature in debug builds.
+#[macro_export]
+macro_rules! ecolor_assert {
+    ($($arg: tt)*) => {
+        if cfg!(any(
+            feature = "extra_asserts",
+            all(feature = "extra_debug_asserts", debug_assertions),
+        )) {
+            assert!($($arg)*);
+        }
+    }
+}
+
+// ----------------------------------------------------------------------------
+
+/// Cheap and ugly.
+/// Made for graying out disabled `Ui`s.
+pub fn tint_color_towards(color: Color32, target: Color32) -> Color32 {
+    let [mut r, mut g, mut b, mut a] = color.to_array();
+
+    if a == 0 {
+        r /= 2;
+        g /= 2;
+        b /= 2;
+    } else if a < 170 {
+        // Cheapish and looks ok.
+        // Works for e.g. grid stripes.
+        let div = (2 * 255 / a as i32) as u8;
+        r = r / 2 + target.r() / div;
+        g = g / 2 + target.g() / div;
+        b = b / 2 + target.b() / div;
+        a /= 2;
+    } else {
+        r = r / 2 + target.r() / 2;
+        g = g / 2 + target.g() / 2;
+        b = b / 2 + target.b() / 2;
+    }
+    Color32::from_rgba_premultiplied(r, g, b, a)
+}

crates/ecolor/src/rgba.rs

@@ -0,0 +1,266 @@
+use crate::{
+    gamma_u8_from_linear_f32, linear_f32_from_gamma_u8, linear_f32_from_linear_u8,
+    linear_u8_from_linear_f32,
+};
+
+/// 0-1 linear space `RGBA` color with premultiplied alpha.
+#[repr(C)]
+#[derive(Clone, Copy, Debug, Default, PartialEq)]
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+#[cfg_attr(feature = "bytemuck", derive(bytemuck::Pod, bytemuck::Zeroable))]
+pub struct Rgba(pub(crate) [f32; 4]);
+
+impl std::ops::Index<usize> for Rgba {
+    type Output = f32;
+
+    #[inline(always)]
+    fn index(&self, index: usize) -> &f32 {
+        &self.0[index]
+    }
+}
+
+impl std::ops::IndexMut<usize> for Rgba {
+    #[inline(always)]
+    fn index_mut(&mut self, index: usize) -> &mut f32 {
+        &mut self.0[index]
+    }
+}
+
+#[inline(always)]
+pub(crate) fn f32_hash<H: std::hash::Hasher>(state: &mut H, f: f32) {
+    if f == 0.0 {
+        state.write_u8(0);
+    } else if f.is_nan() {
+        state.write_u8(1);
+    } else {
+        use std::hash::Hash;
+        f.to_bits().hash(state);
+    }
+}
+
+#[allow(clippy::derive_hash_xor_eq)]
+impl std::hash::Hash for Rgba {
+    #[inline]
+    fn hash<H: std::hash::Hasher>(&self, state: &mut H) {
+        crate::f32_hash(state, self.0[0]);
+        crate::f32_hash(state, self.0[1]);
+        crate::f32_hash(state, self.0[2]);
+        crate::f32_hash(state, self.0[3]);
+    }
+}
+
+impl Rgba {
+    pub const TRANSPARENT: Rgba = Rgba::from_rgba_premultiplied(0.0, 0.0, 0.0, 0.0);
+    pub const BLACK: Rgba = Rgba::from_rgb(0.0, 0.0, 0.0);
+    pub const WHITE: Rgba = Rgba::from_rgb(1.0, 1.0, 1.0);
+    pub const RED: Rgba = Rgba::from_rgb(1.0, 0.0, 0.0);
+    pub const GREEN: Rgba = Rgba::from_rgb(0.0, 1.0, 0.0);
+    pub const BLUE: Rgba = Rgba::from_rgb(0.0, 0.0, 1.0);
+
+    #[inline(always)]
+    pub const fn from_rgba_premultiplied(r: f32, g: f32, b: f32, a: f32) -> Self {
+        Self([r, g, b, a])
+    }
+
+    #[inline(always)]
+    pub fn from_rgba_unmultiplied(r: f32, g: f32, b: f32, a: f32) -> Self {
+        Self([r * a, g * a, b * a, a])
+    }
+
+    #[inline(always)]
+    pub fn from_srgba_premultiplied(r: u8, g: u8, b: u8, a: u8) -> Self {
+        let r = linear_f32_from_gamma_u8(r);
+        let g = linear_f32_from_gamma_u8(g);
+        let b = linear_f32_from_gamma_u8(b);
+        let a = linear_f32_from_linear_u8(a);
+        Self::from_rgba_premultiplied(r, g, b, a)
+    }
+
+    #[inline(always)]
+    pub fn from_srgba_unmultiplied(r: u8, g: u8, b: u8, a: u8) -> Self {
+        let r = linear_f32_from_gamma_u8(r);
+        let g = linear_f32_from_gamma_u8(g);
+        let b = linear_f32_from_gamma_u8(b);
+        let a = linear_f32_from_linear_u8(a);
+        Self::from_rgba_premultiplied(r * a, g * a, b * a, a)
+    }
+
+    #[inline(always)]
+    pub const fn from_rgb(r: f32, g: f32, b: f32) -> Self {
+        Self([r, g, b, 1.0])
+    }
+
+    #[inline(always)]
+    pub const fn from_gray(l: f32) -> Self {
+        Self([l, l, l, 1.0])
+    }
+
+    pub fn from_luminance_alpha(l: f32, a: f32) -> Self {
+        crate::ecolor_assert!(0.0 <= l && l <= 1.0);
+        crate::ecolor_assert!(0.0 <= a && a <= 1.0);
+        Self([l * a, l * a, l * a, a])
+    }
+
+    /// Transparent black
+    #[inline(always)]
+    pub fn from_black_alpha(a: f32) -> Self {
+        crate::ecolor_assert!(0.0 <= a && a <= 1.0);
+        Self([0.0, 0.0, 0.0, a])
+    }
+
+    /// Transparent white
+    #[inline(always)]
+    pub fn from_white_alpha(a: f32) -> Self {
+        crate::ecolor_assert!(0.0 <= a && a <= 1.0, "a: {}", a);
+        Self([a, a, a, a])
+    }
+
+    /// Return an additive version of this color (alpha = 0)
+    #[inline(always)]
+    pub fn additive(self) -> Self {
+        let [r, g, b, _] = self.0;
+        Self([r, g, b, 0.0])
+    }
+
+    /// Multiply with e.g. 0.5 to make us half transparent
+    #[inline(always)]
+    pub fn multiply(self, alpha: f32) -> Self {
+        Self([
+            alpha * self[0],
+            alpha * self[1],
+            alpha * self[2],
+            alpha * self[3],
+        ])
+    }
+
+    #[inline(always)]
+    pub fn r(&self) -> f32 {
+        self.0[0]
+    }
+
+    #[inline(always)]
+    pub fn g(&self) -> f32 {
+        self.0[1]
+    }
+
+    #[inline(always)]
+    pub fn b(&self) -> f32 {
+        self.0[2]
+    }
+
+    #[inline(always)]
+    pub fn a(&self) -> f32 {
+        self.0[3]
+    }
+
+    /// How perceptually intense (bright) is the color?
+    #[inline]
+    pub fn intensity(&self) -> f32 {
+        0.3 * self.r() + 0.59 * self.g() + 0.11 * self.b()
+    }
+
+    /// Returns an opaque version of self
+    pub fn to_opaque(&self) -> Self {
+        if self.a() == 0.0 {
+            // Additive or fully transparent black.
+            Self::from_rgb(self.r(), self.g(), self.b())
+        } else {
+            // un-multiply alpha:
+            Self::from_rgb(
+                self.r() / self.a(),
+                self.g() / self.a(),
+                self.b() / self.a(),
+            )
+        }
+    }
+
+    /// Premultiplied RGBA
+    #[inline(always)]
+    pub fn to_array(&self) -> [f32; 4] {
+        [self.r(), self.g(), self.b(), self.a()]
+    }
+
+    /// Premultiplied RGBA
+    #[inline(always)]
+    pub fn to_tuple(&self) -> (f32, f32, f32, f32) {
+        (self.r(), self.g(), self.b(), self.a())
+    }
+
+    /// unmultiply the alpha
+    pub fn to_rgba_unmultiplied(&self) -> [f32; 4] {
+        let a = self.a();
+        if a == 0.0 {
+            // Additive, let's assume we are black
+            self.0
+        } else {
+            [self.r() / a, self.g() / a, self.b() / a, a]
+        }
+    }
+
+    /// unmultiply the alpha
+    pub fn to_srgba_unmultiplied(&self) -> [u8; 4] {
+        let [r, g, b, a] = self.to_rgba_unmultiplied();
+        [
+            gamma_u8_from_linear_f32(r),
+            gamma_u8_from_linear_f32(g),
+            gamma_u8_from_linear_f32(b),
+            linear_u8_from_linear_f32(a.abs()),
+        ]
+    }
+}
+
+impl std::ops::Add for Rgba {
+    type Output = Rgba;
+
+    #[inline(always)]
+    fn add(self, rhs: Rgba) -> Rgba {
+        Rgba([
+            self[0] + rhs[0],
+            self[1] + rhs[1],
+            self[2] + rhs[2],
+            self[3] + rhs[3],
+        ])
+    }
+}
+
+impl std::ops::Mul<Rgba> for Rgba {
+    type Output = Rgba;
+
+    #[inline(always)]
+    fn mul(self, other: Rgba) -> Rgba {
+        Rgba([
+            self[0] * other[0],
+            self[1] * other[1],
+            self[2] * other[2],
+            self[3] * other[3],
+        ])
+    }
+}
+
+impl std::ops::Mul<f32> for Rgba {
+    type Output = Rgba;
+
+    #[inline(always)]
+    fn mul(self, factor: f32) -> Rgba {
+        Rgba([
+            self[0] * factor,
+            self[1] * factor,
+            self[2] * factor,
+            self[3] * factor,
+        ])
+    }
+}
+
+impl std::ops::Mul<Rgba> for f32 {
+    type Output = Rgba;
+
+    #[inline(always)]
+    fn mul(self, rgba: Rgba) -> Rgba {
+        Rgba([
+            self * rgba[0],
+            self * rgba[1],
+            self * rgba[2],
+            self * rgba[3],
+        ])
+    }
+}

crates/eframe/CHANGELOG.md

@@ -0,0 +1,229 @@
+# Changelog for eframe
+All notable changes to the `eframe` crate.
+
+NOTE: [`egui-winit`](../egui-winit/CHANGELOG.md), [`egui_glium`](../egui_glium/CHANGELOG.md), [`egui_glow`](../egui_glow/CHANGELOG.md),and [`egui-wgpu`](../egui-wgpu/CHANGELOG.md) have their own changelogs!
+
+
+## Unreleased
+
+
+## 0.21.3 - 2023-02-15
+* Fix typing the letter 'P' on web ([#2740](https://github.com/emilk/egui/pull/2740)).
+
+
+## 0.21.2 - 2023-02-12
+* Allow compiling `eframe` with `--no-default-features` ([#2728](https://github.com/emilk/egui/pull/2728)).
+
+
+## 0.21.1 - 2023-02-12
+* Fixed crash when native window position is in an invalid state, which could happen e.g. due to changes in monitor size or DPI ([#2722](https://github.com/emilk/egui/issues/2722)).
+
+
+## 0.21.0 - 2023-02-08 - Update to `winit` 0.28
+* ⚠️ BREAKING: `App::clear_color` now expects you to return a raw float array ([#2666](https://github.com/emilk/egui/pull/2666)).
+* The `screen_reader` feature has now been renamed `web_screen_reader` and only work on web. On other platforms, use the `accesskit` feature flag instead ([#2669](https://github.com/emilk/egui/pull/2669)).
+
+#### Desktop/Native:
+* `eframe::run_native` now returns a `Result` ([#2433](https://github.com/emilk/egui/pull/2433)).
+* Update to `winit` 0.28, adding support for mac trackpad zoom ([#2654](https://github.com/emilk/egui/pull/2654)).
+* Fix bug where the cursor could get stuck using the wrong icon.
+* `NativeOptions::transparent` now works with the wgpu backend ([#2684](https://github.com/emilk/egui/pull/2684)).
+* Add `Frame::set_minimized` and `set_maximized` ([#2292](https://github.com/emilk/egui/pull/2292), [#2672](https://github.com/emilk/egui/pull/2672)).
+* Fixed persistence of native window position on Windows OS ([#2583](https://github.com/emilk/egui/issues/2583)).
+
+#### Web:
+* Prevent ctrl-P/cmd-P from opening the print dialog ([#2598](https://github.com/emilk/egui/pull/2598)).
+
+
+## 0.20.1 - 2022-12-11
+* Fix [docs.rs](https://docs.rs/eframe) build ([#2420](https://github.com/emilk/egui/pull/2420)).
+
+
+## 0.20.0 - 2022-12-08 - AccessKit integration and `wgpu` web support
+* MSRV (Minimum Supported Rust Version) is now `1.65.0` ([#2314](https://github.com/emilk/egui/pull/2314)).
+* Allow empty textures with the glow renderer.
+
+#### Desktop/Native:
+* Don't repaint when just moving window ([#1980](https://github.com/emilk/egui/pull/1980)).
+* Added `NativeOptions::event_loop_builder` hook for apps to change platform specific event loop options ([#1952](https://github.com/emilk/egui/pull/1952)).
+* Enabled deferred render state initialization to support Android ([#1952](https://github.com/emilk/egui/pull/1952)).
+* Added `shader_version` to `NativeOptions` for cross compiling support on different target OpenGL | ES versions (on native `glow` renderer only) ([#1993](https://github.com/emilk/egui/pull/1993)).
+* Fix: app state is now saved when user presses Cmd-Q on Mac ([#2013](https://github.com/emilk/egui/pull/2013)).
+* Added `center` to `NativeOptions` and `monitor_size` to `WindowInfo` on desktop ([#2035](https://github.com/emilk/egui/pull/2035)).
+* Improve IME support ([#2046](https://github.com/emilk/egui/pull/2046)).
+* Added mouse-passthrough option ([#2080](https://github.com/emilk/egui/pull/2080)).
+* Added `NativeOptions::fullsize_content` option on Mac to build titlebar-less windows with floating window controls ([#2049](https://github.com/emilk/egui/pull/2049)).
+* Wgpu device/adapter/surface creation has now various configuration options exposed via `NativeOptions/WebOptions::wgpu_options` ([#2207](https://github.com/emilk/egui/pull/2207)).
+* Fix: Make sure that `native_pixels_per_point` is updated ([#2256](https://github.com/emilk/egui/pull/2256)).
+* Added optional, but enabled by default, integration with [AccessKit](https://accesskit.dev/) for implementing platform accessibility APIs ([#2294](https://github.com/emilk/egui/pull/2294)).
+* Fix: Less flickering on resize on Windows ([#2280](https://github.com/emilk/egui/pull/2280)).
+
+#### Web:
+* ⚠️ BREAKING: `start_web` is a now `async` ([#2107](https://github.com/emilk/egui/pull/2107)).
+* Web: You can now use WebGL on top of `wgpu` by enabling the `wgpu` feature (and disabling `glow` via disabling default features) ([#2107](https://github.com/emilk/egui/pull/2107)).
+* Web: Add `WebInfo::user_agent` ([#2202](https://github.com/emilk/egui/pull/2202)).
+* Web: you can access your application from JS using `AppRunner::app_mut`. See `crates/egui_demo_app/src/lib.rs` ([#1886](https://github.com/emilk/egui/pull/1886)).
+
+
+## 0.19.0 - 2022-08-20
+* MSRV (Minimum Supported Rust Version) is now `1.61.0` ([#1846](https://github.com/emilk/egui/pull/1846)).
+* Added `wgpu` rendering backed ([#1564](https://github.com/emilk/egui/pull/1564)):
+  * Added features `wgpu` and `glow`.
+  * Added `NativeOptions::renderer` to switch between the rendering backends.
+* `egui_glow`: remove calls to `gl.get_error` in release builds to speed up rendering ([#1583](https://github.com/emilk/egui/pull/1583)).
+* Added `App::post_rendering` for e.g. reading the framebuffer ([#1591](https://github.com/emilk/egui/pull/1591)).
+* Use `Arc` for `glow::Context` instead of `Rc` ([#1640](https://github.com/emilk/egui/pull/1640)).
+* Fixed bug where the result returned from `App::on_exit_event` would sometimes be ignored ([#1696](https://github.com/emilk/egui/pull/1696)).
+* Added `NativeOptions::follow_system_theme` and `NativeOptions::default_theme` ([#1726](https://github.com/emilk/egui/pull/1726)).
+* Selectively expose parts of the API based on target arch (`wasm32` or not) ([#1867](https://github.com/emilk/egui/pull/1867)).
+
+#### Desktop/Native:
+* Fixed clipboard on Wayland ([#1613](https://github.com/emilk/egui/pull/1613)).
+* Added ability to read window position and size with `frame.info().window_info` ([#1617](https://github.com/emilk/egui/pull/1617)).
+* Allow running on native without hardware accelerated rendering. Change with `NativeOptions::hardware_acceleration` ([#1681](https://github.com/emilk/egui/pull/1681), [#1693](https://github.com/emilk/egui/pull/1693)).
+* Fixed window position persistence ([#1745](https://github.com/emilk/egui/pull/1745)).
+* Fixed mouse cursor change on Linux ([#1747](https://github.com/emilk/egui/pull/1747)).
+* Added `Frame::set_visible` ([#1808](https://github.com/emilk/egui/pull/1808)).
+* Added fullscreen support ([#1866](https://github.com/emilk/egui/pull/1866)).
+* You can now continue execution after closing the native desktop window ([#1889](https://github.com/emilk/egui/pull/1889)).
+* `Frame::quit` has been renamed to `Frame::close` and `App::on_exit_event` is now `App::on_close_event` ([#1943](https://github.com/emilk/egui/pull/1943)).
+
+#### Web:
+* Added ability to stop/re-run web app from JavaScript. ⚠️ You need to update your CSS with `html, body: { height: 100%; width: 100%; }` ([#1803](https://github.com/emilk/egui/pull/1650)).
+* Added `WebOptions::follow_system_theme` and `WebOptions::default_theme` ([#1726](https://github.com/emilk/egui/pull/1726)).
+* Added option to select WebGL version ([#1803](https://github.com/emilk/egui/pull/1803)).
+
+
+## 0.18.0 - 2022-04-30
+* MSRV (Minimum Supported Rust Version) is now `1.60.0` ([#1467](https://github.com/emilk/egui/pull/1467)).
+* Removed `eframe::epi` - everything is now in `eframe` (`eframe::App`, `eframe::Frame` etc) ([#1545](https://github.com/emilk/egui/pull/1545)).
+* Removed `Frame::request_repaint` - just call `egui::Context::request_repaint` for the same effect ([#1366](https://github.com/emilk/egui/pull/1366)).
+* Changed app creation/setup ([#1363](https://github.com/emilk/egui/pull/1363)):
+  * Removed `App::setup` and `App::name`.
+  * Provide `CreationContext` when creating app with egui context, storage, integration info and glow context.
+  * Change interface of `run_native` and `start_web`.
+* Added `Frame::storage()` and `Frame::storage_mut()` ([#1418](https://github.com/emilk/egui/pull/1418)).
+  * You can now load/save state in `App::update`
+  * Changed `App::update` to take `&mut Frame` instead of `&Frame`.
+  * `Frame` is no longer `Clone` or `Sync`.
+* Added `glow` (OpenGL) context to `Frame` ([#1425](https://github.com/emilk/egui/pull/1425)).
+
+#### Desktop/Native:
+* Remove the `egui_glium` feature. `eframe` will now always use `egui_glow` as the native backend ([#1357](https://github.com/emilk/egui/pull/1357)).
+* Change default for `NativeOptions::drag_and_drop_support` to `true` ([#1329](https://github.com/emilk/egui/pull/1329)).
+* Added new `NativeOptions`: `vsync`, `multisampling`, `depth_buffer`, `stencil_buffer`.
+* `dark-light` (dark mode detection) is now an opt-in feature ([#1437](https://github.com/emilk/egui/pull/1437)).
+* Fixed potential scale bug when DPI scaling changes (e.g. when dragging a  window between different displays) ([#1441](https://github.com/emilk/egui/pull/1441)).
+* Added new feature `puffin` to add [`puffin profiler`](https://github.com/EmbarkStudios/puffin) scopes ([#1483](https://github.com/emilk/egui/pull/1483)).
+* Moved app persistence to a background thread, allowing for smoother frame rates (on native).
+* Added `Frame::set_window_pos` ([#1505](https://github.com/emilk/egui/pull/1505)).
+
+#### Web:
+* Use full browser width by default ([#1378](https://github.com/emilk/egui/pull/1378)).
+* egui code will no longer be called after panic ([#1306](https://github.com/emilk/egui/pull/1306)).
+
+
+## 0.17.0 - 2022-02-22
+* Removed `Frame::alloc_texture`. Use `egui::Context::load_texture` instead ([#1110](https://github.com/emilk/egui/pull/1110)).
+* Shift-scroll will now result in horizontal scrolling on all platforms ([#1136](https://github.com/emilk/egui/pull/1136)).
+* Log using the `tracing` crate. Log to stdout by adding `tracing_subscriber::fmt::init();` to your `main` ([#1192](https://github.com/emilk/egui/pull/1192)).
+
+#### Desktop/Native:
+* The default native backend is now `egui_glow` (instead of `egui_glium`) ([#1020](https://github.com/emilk/egui/pull/1020)).
+* Automatically detect and apply dark or light mode from system ([#1045](https://github.com/emilk/egui/pull/1045)).
+* Fixed horizontal scrolling direction on Linux.
+* Added `App::on_exit_event` ([#1038](https://github.com/emilk/egui/pull/1038))
+* Added `NativeOptions::initial_window_pos`.
+* Fixed `enable_drag` for Windows OS ([#1108](https://github.com/emilk/egui/pull/1108)).
+
+#### Web:
+* The default web painter is now `egui_glow` (instead of WebGL) ([#1020](https://github.com/emilk/egui/pull/1020)).
+* Fixed glow failure on Chromium ([#1092](https://github.com/emilk/egui/pull/1092)).
+* Updated `eframe::IntegrationInfo::web_location_hash` on `hashchange` event ([#1140](https://github.com/emilk/egui/pull/1140)).
+* Expose all parts of the location/url in `frame.info().web_info` ([#1258](https://github.com/emilk/egui/pull/1258)).
+
+
+## 0.16.0 - 2021-12-29
+* `Frame` can now be cloned, saved, and passed to background threads ([#999](https://github.com/emilk/egui/pull/999)).
+* Added `Frame::request_repaint` to replace `repaint_signal` ([#999](https://github.com/emilk/egui/pull/999)).
+* Added `Frame::alloc_texture/free_texture` to replace `tex_allocator` ([#999](https://github.com/emilk/egui/pull/999)).
+
+#### Web:
+* Fixed [dark rendering in WebKitGTK](https://github.com/emilk/egui/issues/794) ([#888](https://github.com/emilk/egui/pull/888/)).
+* Added feature `glow` to switch to a [`glow`](https://github.com/grovesNL/glow) based painter ([#868](https://github.com/emilk/egui/pull/868)).
+
+
+## 0.15.0 - 2021-10-24
+* `Frame` now provides `set_window_title` to set window title dynamically ([#828](https://github.com/emilk/egui/pull/828)).
+* `Frame` now provides `set_decorations` to set whether to show window decorations.
+* Remove "http" feature (use https://github.com/emilk/ehttp instead!).
+* Added `App::persist_native_window` and `App::persist_egui_memory` to control what gets persisted.
+
+#### Desktop/Native:
+* Increase native scroll speed.
+* Added new backend `egui_glow` as an alternative to `egui_glium`. Enable with `default-features = false, features = ["default_fonts", "egui_glow"]`.
+
+#### Web:
+* Implement `eframe::NativeTexture` trait for the WebGL painter.
+* Deprecate `Painter::register_webgl_texture.
+* Fixed multiline paste.
+* Fixed painting with non-opaque backgrounds.
+* Improve text input on mobile and for IME.
+
+
+## 0.14.0 - 2021-08-24
+* Added dragging and dropping files into egui.
+* Improve http fetch API.
+* `run_native` now returns when the app is closed.
+* Web: Made text thicker and less pixelated.
+
+
+## 0.13.1 - 2021-06-24
+* Fixed `http` feature flag and docs
+
+
+## 0.13.0 - 2021-06-24
+* `App::setup` now takes a `Frame` and `Storage` by argument.
+* `App::load` has been removed. Implement `App::setup` instead.
+* Web: Default to light visuals unless the system reports a preference for dark mode.
+* Web: Improve alpha blending, making fonts look much better (especially in light mode)
+* Web: Fix double-paste bug
+
+
+## 0.12.0 - 2021-05-10
+* Moved options out of `trait App` into new `NativeOptions`.
+* Added option for `always_on_top`.
+* Web: Scroll faster when scrolling with mouse wheel.
+
+
+## 0.11.0 - 2021-04-05
+* You can now turn your window transparent with the `App::transparent` option.
+* You can now disable window decorations with the `App::decorated` option.
+* Web: [Fix mobile and IME text input](https://github.com/emilk/egui/pull/253)
+* Web: Hold down a modifier key when clicking a link to open it in a new tab.
+
+Contributors: [n2](https://github.com/n2)
+
+
+## 0.10.0 - 2021-02-28
+* [You can now set your own app icons](https://github.com/emilk/egui/pull/193).
+* You can control the initial size of the native window with `App::initial_window_size`.
+* You can control the maximum egui web canvas size with `App::max_size_points`.
+* `Frame::tex_allocator()` no longer returns an `Option` (there is always a texture allocator).
+
+
+## 0.9.0 - 2021-02-07
+* [Added support for HTTP body](https://github.com/emilk/egui/pull/139).
+* Web: Right-clicks will no longer open browser context menu.
+* Web: Fix a bug where one couldn't select items in a combo box on a touch screen.
+
+
+## 0.8.0 - 2021-01-17
+* Simplify `TextureAllocator` interface.
+* WebGL2 is now supported, with improved texture sampler. WebGL1 will be used as a fallback.
+* Web: Slightly improved alpha-blending (work-around for non-existing linear-space blending).
+* Web: Call `prevent_default` for arrow keys when entering text
+
+
+## 0.7.0 - 2021-01-04
+* Initial release of `eframe`

crates/eframe/Cargo.toml

@@ -0,0 +1,169 @@
+[package]
+name = "eframe"
+version = "0.21.3"
+authors = ["Emil Ernerfeldt <emil.ernerfeldt@gmail.com>"]
+description = "egui framework - write GUI apps that compiles to web and/or natively"
+edition = "2021"
+rust-version = "1.65"
+homepage = "https://github.com/emilk/egui/tree/master/crates/eframe"
+license = "MIT OR Apache-2.0"
+readme = "README.md"
+repository = "https://github.com/emilk/egui/tree/master/crates/eframe"
+categories = ["gui", "game-development"]
+keywords = ["egui", "gui", "gamedev"]
+include = ["../LICENSE-APACHE", "../LICENSE-MIT", "**/*.rs", "Cargo.toml"]
+
+[package.metadata.docs.rs]
+all-features = true
+targets = ["x86_64-unknown-linux-gnu", "wasm32-unknown-unknown"]
+
+[lib]
+
+
+[features]
+default = ["accesskit", "default_fonts", "glow"]
+
+## Enable platform accessibility API implementations through [AccessKit](https://accesskit.dev/).
+accesskit = ["egui/accesskit", "egui-winit/accesskit"]
+
+## Detect dark mode system preference using [`dark-light`](https://docs.rs/dark-light).
+##
+## See also [`NativeOptions::follow_system_theme`] and [`NativeOptions::default_theme`].
+dark-light = ["dep:dark-light"]
+
+## If set, egui will use `include_bytes!` to bundle some fonts.
+## If you plan on specifying your own fonts you may disable this feature.
+default_fonts = ["egui/default_fonts"]
+
+## Use [`glow`](https://github.com/grovesNL/glow) for painting, via [`egui_glow`](https://github.com/emilk/egui/tree/master/crates/egui_glow).
+glow = ["dep:glow", "dep:egui_glow", "dep:glutin", "dep:glutin-winit"]
+
+## Enable saving app state to disk.
+persistence = [
+  "directories-next",
+  "egui-winit/serde",
+  "egui/persistence",
+  "ron",
+  "serde",
+]
+
+## Enable profiling with the [`puffin`](https://docs.rs/puffin) crate.
+##
+## Only enabled on native, because of the low resolution (1ms) of time keeping in browsers.
+## `eframe` will call `puffin::GlobalProfiler::lock().new_frame()` for you
+puffin = ["dep:puffin", "egui_glow?/puffin", "egui-wgpu?/puffin"]
+
+## Enable screen reader support (requires `ctx.options_mut(|o| o.screen_reader = true);`) on web.
+##
+## For other platforms, use the "accesskit" feature instead.
+web_screen_reader = ["tts"]
+
+## If set, eframe will look for the env-var `EFRAME_SCREENSHOT_TO` and write a screenshot to that location, and then quit.
+## This is used to generate images for the examples.
+__screenshot = ["dep:image"]
+
+## Use [`wgpu`](https://docs.rs/wgpu) for painting (via [`egui-wgpu`](https://github.com/emilk/egui/tree/master/crates/egui-wgpu)).
+## This overrides the `glow` feature.
+wgpu = ["dep:wgpu", "dep:egui-wgpu", "dep:pollster"]
+
+
+[dependencies]
+egui = { version = "0.21.0", path = "../egui", default-features = false, features = [
+  "bytemuck",
+  "tracing",
+] }
+thiserror = "1.0.37"
+tracing = { version = "0.1", default-features = false, features = ["std"] }
+
+#! ### Optional dependencies
+## Enable this when generating docs.
+document-features = { version = "0.2", optional = true }
+
+egui_glow = { version = "0.21.0", path = "../egui_glow", optional = true, default-features = false }
+glow = { version = "0.12", optional = true }
+ron = { version = "0.8", optional = true, features = ["integer128"] }
+serde = { version = "1", optional = true, features = ["derive"] }
+
+# -------------------------------------------
+# native:
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+egui-winit = { version = "0.21.1", path = "../egui-winit", default-features = false, features = [
+  "clipboard",
+  "links",
+] }
+raw-window-handle = { version = "0.5.0" }
+winit = "0.28.1"
+
+# optional native:
+dark-light = { version = "1.0", optional = true }
+directories-next = { version = "2", optional = true }
+egui-wgpu = { version = "0.21.0", path = "../egui-wgpu", optional = true, features = [
+  "winit",
+] } # if wgpu is used, use it with winit
+pollster = { version = "0.3", optional = true } # needed for wgpu
+
+# we can expose these to user so that they can select which backends they want to enable to avoid compiling useless deps.
+# this can be done at the same time we expose x11/wayland features of winit crate.
+glutin = { version = "0.30", optional = true }
+glutin-winit = { version = "0.3.0", optional = true }
+image = { version = "0.24", optional = true, default-features = false, features = [
+  "png",
+] }
+puffin = { version = "0.14", optional = true }
+wgpu = { version = "0.15.0", optional = true }
+
+# -------------------------------------------
+# web:
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+bytemuck = "1.7"
+js-sys = "0.3"
+percent-encoding = "2.1"
+wasm-bindgen = "=0.2.84"
+wasm-bindgen-futures = "0.4"
+web-sys = { version = "0.3.58", features = [
+  "BinaryType",
+  "Blob",
+  "Clipboard",
+  "ClipboardEvent",
+  "CompositionEvent",
+  "console",
+  "CssStyleDeclaration",
+  "DataTransfer",
+  "DataTransferItem",
+  "DataTransferItemList",
+  "Document",
+  "DomRect",
+  "DragEvent",
+  "Element",
+  "Event",
+  "EventListener",
+  "EventTarget",
+  "ExtSRgb",
+  "File",
+  "FileList",
+  "FocusEvent",
+  "HtmlCanvasElement",
+  "HtmlElement",
+  "HtmlInputElement",
+  "InputEvent",
+  "KeyboardEvent",
+  "Location",
+  "MediaQueryList",
+  "MouseEvent",
+  "Navigator",
+  "Performance",
+  "Storage",
+  "Touch",
+  "TouchEvent",
+  "TouchList",
+  "WebGl2RenderingContext",
+  "WebglDebugRendererInfo",
+  "WebGlRenderingContext",
+  "WheelEvent",
+  "Window",
+] }
+
+# optional web:
+egui-wgpu = { version = "0.21.0", path = "../egui-wgpu", optional = true } # if wgpu is used, use it without (!) winit
+tts = { version = "0.25", optional = true, default-features = false }
+wgpu = { version = "0.15.0", optional = true, features = ["webgl"] }

crates/eframe/README.md

@@ -0,0 +1,64 @@
+# eframe: the [`egui`](https://github.com/emilk/egui) framework
+
+[![Latest version](https://img.shields.io/crates/v/eframe.svg)](https://crates.io/crates/eframe)
+[![Documentation](https://docs.rs/eframe/badge.svg)](https://docs.rs/eframe)
+[![unsafe forbidden](https://img.shields.io/badge/unsafe-forbidden-success.svg)](https://github.com/rust-secure-code/safety-dance/)
+![MIT](https://img.shields.io/badge/license-MIT-blue.svg)
+![Apache](https://img.shields.io/badge/license-Apache-blue.svg)
+
+`eframe` is the official framework library for writing apps using [`egui`](https://github.com/emilk/egui). The app can be compiled both to run natively (cross platform) or be compiled to a web app (using WASM).
+
+To get started, see the [examples](https://github.com/emilk/egui/tree/master/examples).
+To learn how to set up `eframe` for web and native, go to <https://github.com/emilk/eframe_template/> and follow the instructions there!
+
+There is also a tutorial video at <https://www.youtube.com/watch?v=NtUkr_z7l84>.
+
+For how to use `egui`, see [the egui docs](https://docs.rs/egui).
+
+---
+
+`eframe` uses [`egui_glow`](https://github.com/emilk/egui/tree/master/crates/egui_glow) for rendering, and on native it uses [`egui-winit`](https://github.com/emilk/egui/tree/master/crates/egui-winit).
+
+To use on Linux, first run:
+
+```
+sudo apt-get install libxcb-render0-dev libxcb-shape0-dev libxcb-xfixes0-dev libxkbcommon-dev libssl-dev
+```
+
+You need to either use `edition = "2021"`, or set `resolver = "2"` in the `[workspace]` section of your to-level `Cargo.toml`. See [this link](https://doc.rust-lang.org/edition-guide/rust-2021/default-cargo-resolver.html) for more info.
+
+You can opt-in to the using [`egui_wgpu`](https://github.com/emilk/egui/tree/master/crates/egui_wgpu) for rendering by enabling the `wgpu` feature and setting `NativeOptions::renderer` to `Renderer::Wgpu`.
+
+
+## Alternatives
+`eframe` is not the only way to write an app using `egui`! You can also try [`egui-miniquad`](https://github.com/not-fl3/egui-miniquad), [`bevy_egui`](https://github.com/mvlabat/bevy_egui), [`egui_sdl2_gl`](https://github.com/ArjunNair/egui_sdl2_gl), and others.
+
+You can also use `egui_glow` and [`winit`](https://github.com/rust-windowing/winit) to build your own app as demonstrated in <https://github.com/emilk/egui/blob/master/crates/egui_glow/examples/pure_glow.rs>.
+
+
+## Problems with running egui on the web
+`eframe` uses WebGL (via [`glow`](https://crates.io/crates/glow)) and WASM, and almost nothing else from the web tech stack. This has some benefits, but also produces some challenges and serious downsides.
+
+* Rendering: Getting pixel-perfect rendering right on the web is very difficult.
+* Search: you cannot search an egui web page like you would a normal web page.
+* Bringing up an on-screen keyboard on mobile: there is no JS function to do this, so `eframe` fakes it by adding some invisible DOM elements. It doesn't always work.
+* Mobile text editing is not as good as for a normal web app.
+* Accessibility: There is an experimental screen reader for `eframe`, but it has to be enabled explicitly. There is no JS function to ask "Does the user want a screen reader?" (and there should probably not be such a function, due to user tracking/integrity concerns).
+* No integration with browser settings for colors and fonts.
+
+In many ways, `eframe` is trying to make the browser do something it wasn't designed to do (though there are many things browser vendors could do to improve how well libraries like egui work).
+
+The suggested use for `eframe` are for web apps where performance and responsiveness are more important than accessibility and mobile text editing.
+
+
+## Companion crates
+Not all rust crates work when compiled to WASM, but here are some useful crates have been designed to work well both natively and as WASM:
+
+* Audio: [`cpal`](https://github.com/RustAudio/cpal).
+* HTTP client: [`ehttp`](https://github.com/emilk/ehttp) and [`reqwest`](https://github.com/seanmonstar/reqwest).
+* Time: [`chrono`](https://github.com/chronotope/chrono).
+* WebSockets: [`ewebsock`](https://github.com/rerun-io/ewebsock).
+
+
+## Name
+The _frame_ in `eframe` stands both for the frame in which your `egui` app resides and also for "framework" (`frame` is a framework, `egui` is a library).

crates/eframe/src/lib.rs

@@ -0,0 +1,262 @@
+//! eframe - the [`egui`] framework crate
+//!
+//! If you are planning to write an app for web or native,
+//! and want to use [`egui`] for everything, then `eframe` is for you!
+//!
+//! To get started, see the [examples](https://github.com/emilk/egui/tree/master/examples).
+//! To learn how to set up `eframe` for web and native, go to <https://github.com/emilk/eframe_template/> and follow the instructions there!
+//!
+//! In short, you implement [`App`] (especially [`App::update`]) and then
+//! call [`crate::run_native`] from your `main.rs`, and/or call `eframe::start_web` from your `lib.rs`.
+//!
+//! ## Usage, native:
+//! ``` no_run
+//! use eframe::egui;
+//!
+//! fn main() {
+//!     let native_options = eframe::NativeOptions::default();
+//!     eframe::run_native("My egui App", native_options, Box::new(|cc| Box::new(MyEguiApp::new(cc))));
+//! }
+//!
+//! #[derive(Default)]
+//! struct MyEguiApp {}
+//!
+//! impl MyEguiApp {
+//!     fn new(cc: &eframe::CreationContext<'_>) -> Self {
+//!         // Customize egui here with cc.egui_ctx.set_fonts and cc.egui_ctx.set_visuals.
+//!         // Restore app state using cc.storage (requires the "persistence" feature).
+//!         // Use the cc.gl (a glow::Context) to create graphics shaders and buffers that you can use
+//!         // for e.g. egui::PaintCallback.
+//!         Self::default()
+//!     }
+//! }
+//!
+//! impl eframe::App for MyEguiApp {
+//!    fn update(&mut self, ctx: &egui::Context, frame: &mut eframe::Frame) {
+//!        egui::CentralPanel::default().show(ctx, |ui| {
+//!            ui.heading("Hello World!");
+//!        });
+//!    }
+//! }
+//! ```
+//!
+//! ## Usage, web:
+//! ``` no_run
+//! #[cfg(target_arch = "wasm32")]
+//! use wasm_bindgen::prelude::*;
+//!
+//! /// Call this once from the HTML.
+//! #[cfg(target_arch = "wasm32")]
+//! #[wasm_bindgen]
+//! pub async fn start(canvas_id: &str) -> Result<AppRunnerRef, eframe::wasm_bindgen::JsValue> {
+//!     let web_options = eframe::WebOptions::default();
+//!     eframe::start_web(canvas_id, web_options, Box::new(|cc| Box::new(MyEguiApp::new(cc)))).await
+//! }
+//! ```
+//!
+//! ## Feature flags
+#![cfg_attr(feature = "document-features", doc = document_features::document_features!())]
+//!
+
+#![allow(clippy::needless_doctest_main)]
+
+// Re-export all useful libraries:
+pub use {egui, egui::emath, egui::epaint};
+
+#[cfg(feature = "glow")]
+pub use {egui_glow, glow};
+
+#[cfg(feature = "wgpu")]
+pub use {egui_wgpu, wgpu};
+
+mod epi;
+
+// Re-export everything in `epi` so `eframe` users don't have to care about what `epi` is:
+pub use epi::*;
+
+// ----------------------------------------------------------------------------
+// When compiling for web
+
+#[cfg(target_arch = "wasm32")]
+pub mod web;
+
+#[cfg(target_arch = "wasm32")]
+pub use wasm_bindgen;
+
+#[cfg(target_arch = "wasm32")]
+use web::AppRunnerRef;
+
+#[cfg(target_arch = "wasm32")]
+pub use web_sys;
+
+/// Install event listeners to register different input events
+/// and start running the given app.
+///
+/// ``` no_run
+/// #[cfg(target_arch = "wasm32")]
+/// use wasm_bindgen::prelude::*;
+///
+/// /// This is the entry-point for all the web-assembly.
+/// /// This is called from the HTML.
+/// /// It loads the app, installs some callbacks, then returns.
+/// /// It returns a handle to the running app that can be stopped calling `AppRunner::stop_web`.
+/// /// You can add more callbacks like this if you want to call in to your code.
+/// #[cfg(target_arch = "wasm32")]
+/// #[wasm_bindgen]
+/// pub struct WebHandle {
+///     handle: AppRunnerRef,
+/// }
+/// #[cfg(target_arch = "wasm32")]
+/// #[wasm_bindgen]
+/// pub async fn start(canvas_id: &str) -> Result<WebHandle, eframe::wasm_bindgen::JsValue> {
+///     let web_options = eframe::WebOptions::default();
+///     eframe::start_web(
+///         canvas_id,
+///         web_options,
+///         Box::new(|cc| Box::new(MyEguiApp::new(cc))),
+///     )
+///     .await
+///     .map(|handle| WebHandle { handle })
+/// }
+/// ```
+///
+/// # Errors
+/// Failing to initialize WebGL graphics.
+#[cfg(target_arch = "wasm32")]
+pub async fn start_web(
+    canvas_id: &str,
+    web_options: WebOptions,
+    app_creator: AppCreator,
+) -> std::result::Result<AppRunnerRef, wasm_bindgen::JsValue> {
+    let handle = web::start(canvas_id, web_options, app_creator).await?;
+
+    Ok(handle)
+}
+
+// ----------------------------------------------------------------------------
+// When compiling natively
+
+#[cfg(not(target_arch = "wasm32"))]
+#[cfg(any(feature = "glow", feature = "wgpu"))]
+mod native;
+
+/// This is how you start a native (desktop) app.
+///
+/// The first argument is name of your app, used for the title bar of the native window
+/// and the save location of persistence (see [`App::save`]).
+///
+/// Call from `fn main` like this:
+/// ``` no_run
+/// use eframe::egui;
+///
+/// fn main() {
+///     let native_options = eframe::NativeOptions::default();
+///     eframe::run_native("MyApp", native_options, Box::new(|cc| Box::new(MyEguiApp::new(cc))));
+/// }
+///
+/// #[derive(Default)]
+/// struct MyEguiApp {}
+///
+/// impl MyEguiApp {
+///     fn new(cc: &eframe::CreationContext<'_>) -> Self {
+///         // Customize egui here with cc.egui_ctx.set_fonts and cc.egui_ctx.set_visuals.
+///         // Restore app state using cc.storage (requires the "persistence" feature).
+///         // Use the cc.gl (a glow::Context) to create graphics shaders and buffers that you can use
+///         // for e.g. egui::PaintCallback.
+///         Self::default()
+///     }
+/// }
+///
+/// impl eframe::App for MyEguiApp {
+///    fn update(&mut self, ctx: &egui::Context, frame: &mut eframe::Frame) {
+///        egui::CentralPanel::default().show(ctx, |ui| {
+///            ui.heading("Hello World!");
+///        });
+///    }
+/// }
+/// ```
+///
+/// # Errors
+/// This function can fail if we fail to set up a graphics context.
+#[cfg(not(target_arch = "wasm32"))]
+#[allow(clippy::needless_pass_by_value)]
+#[cfg(any(feature = "glow", feature = "wgpu"))]
+pub fn run_native(
+    app_name: &str,
+    native_options: NativeOptions,
+    app_creator: AppCreator,
+) -> Result<()> {
+    let renderer = native_options.renderer;
+
+    #[cfg(not(feature = "__screenshot"))]
+    assert!(
+        std::env::var("EFRAME_SCREENSHOT_TO").is_err(),
+        "EFRAME_SCREENSHOT_TO found without compiling with the '__screenshot' feature"
+    );
+
+    match renderer {
+        #[cfg(feature = "glow")]
+        Renderer::Glow => {
+            tracing::debug!("Using the glow renderer");
+            native::run::run_glow(app_name, native_options, app_creator)
+        }
+
+        #[cfg(feature = "wgpu")]
+        Renderer::Wgpu => {
+            tracing::debug!("Using the wgpu renderer");
+            native::run::run_wgpu(app_name, native_options, app_creator)
+        }
+    }
+}
+
+// ----------------------------------------------------------------------------
+
+/// The different problems that can occur when trying to run `eframe`.
+#[derive(thiserror::Error, Debug)]
+pub enum Error {
+    #[cfg(not(target_arch = "wasm32"))]
+    #[error("winit error: {0}")]
+    Winit(#[from] winit::error::OsError),
+
+    #[cfg(all(feature = "glow", not(target_arch = "wasm32")))]
+    #[error("glutin error: {0}")]
+    Glutin(#[from] glutin::error::Error),
+
+    #[cfg(all(feature = "glow", not(target_arch = "wasm32")))]
+    #[error("Found no glutin configs matching the template: {0:?}. error: {1:?}")]
+    NoGlutinConfigs(glutin::config::ConfigTemplate, Box<dyn std::error::Error>),
+
+    #[cfg(feature = "wgpu")]
+    #[error("WGPU error: {0}")]
+    Wgpu(#[from] egui_wgpu::WgpuError),
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
+
+// ---------------------------------------------------------------------------
+
+#[cfg(not(target_arch = "wasm32"))]
+#[cfg(any(feature = "glow", feature = "wgpu"))]
+mod profiling_scopes {
+    /// Profiling macro for feature "puffin"
+    macro_rules! profile_function {
+    ($($arg: tt)*) => {
+        #[cfg(feature = "puffin")]
+        puffin::profile_function!($($arg)*);
+    };
+}
+    pub(crate) use profile_function;
+
+    /// Profiling macro for feature "puffin"
+    macro_rules! profile_scope {
+    ($($arg: tt)*) => {
+        #[cfg(feature = "puffin")]
+        puffin::profile_scope!($($arg)*);
+    };
+}
+    pub(crate) use profile_scope;
+}
+
+#[cfg(not(target_arch = "wasm32"))]
+#[cfg(any(feature = "glow", feature = "wgpu"))]
+pub(crate) use profiling_scopes::*;

crates/eframe/src/native/epi_integration.rs

@@ -0,0 +1,567 @@
+use winit::event_loop::EventLoopWindowTarget;
+
+#[cfg(target_os = "macos")]
+use winit::platform::macos::WindowBuilderExtMacOS as _;
+
+#[cfg(feature = "accesskit")]
+use egui::accesskit;
+use egui::NumExt as _;
+#[cfg(feature = "accesskit")]
+use egui_winit::accesskit_winit;
+use egui_winit::{native_pixels_per_point, EventResponse, WindowSettings};
+
+use crate::{epi, Theme, WindowInfo};
+
+#[derive(Default)]
+pub struct WindowState {
+    // We cannot simply call `winit::Window::is_minimized/is_maximized`
+    // because that deadlocks on mac.
+    pub minimized: bool,
+    pub maximized: bool,
+}
+
+pub fn points_to_size(points: egui::Vec2) -> winit::dpi::LogicalSize<f64> {
+    winit::dpi::LogicalSize {
+        width: points.x as f64,
+        height: points.y as f64,
+    }
+}
+
+pub fn read_window_info(
+    window: &winit::window::Window,
+    pixels_per_point: f32,
+    window_state: &WindowState,
+) -> WindowInfo {
+    let position = window
+        .outer_position()
+        .ok()
+        .map(|pos| pos.to_logical::<f32>(pixels_per_point.into()))
+        .map(|pos| egui::Pos2 { x: pos.x, y: pos.y });
+
+    let monitor = window.current_monitor().is_some();
+    let monitor_size = if monitor {
+        let size = window.current_monitor().unwrap().size();
+        Some(egui::vec2(size.width as _, size.height as _))
+    } else {
+        None
+    };
+
+    let size = window
+        .inner_size()
+        .to_logical::<f32>(pixels_per_point.into());
+
+    // NOTE: calling window.is_minimized() or window.is_maximized() deadlocks on Mac.
+
+    WindowInfo {
+        position,
+        fullscreen: window.fullscreen().is_some(),
+        minimized: window_state.minimized,
+        maximized: window_state.maximized,
+        size: egui::Vec2 {
+            x: size.width,
+            y: size.height,
+        },
+        monitor_size,
+    }
+}
+
+pub fn window_builder<E>(
+    event_loop: &EventLoopWindowTarget<E>,
+    title: &str,
+    native_options: &epi::NativeOptions,
+    window_settings: Option<WindowSettings>,
+) -> winit::window::WindowBuilder {
+    let epi::NativeOptions {
+        maximized,
+        decorated,
+        fullscreen,
+        #[cfg(target_os = "macos")]
+        fullsize_content,
+        drag_and_drop_support,
+        icon_data,
+        initial_window_pos,
+        initial_window_size,
+        min_window_size,
+        max_window_size,
+        resizable,
+        transparent,
+        centered,
+        ..
+    } = native_options;
+
+    let window_icon = icon_data.clone().and_then(load_icon);
+
+    let mut window_builder = winit::window::WindowBuilder::new()
+        .with_title(title)
+        .with_decorations(*decorated)
+        .with_fullscreen(fullscreen.then(|| winit::window::Fullscreen::Borderless(None)))
+        .with_maximized(*maximized)
+        .with_resizable(*resizable)
+        .with_transparent(*transparent)
+        .with_window_icon(window_icon)
+        // Keep hidden until we've painted something. See https://github.com/emilk/egui/pull/2279
+        // We must also keep the window hidden until AccessKit is initialized.
+        .with_visible(false);
+
+    #[cfg(target_os = "macos")]
+    if *fullsize_content {
+        window_builder = window_builder
+            .with_title_hidden(true)
+            .with_titlebar_transparent(true)
+            .with_fullsize_content_view(true);
+    }
+
+    if let Some(min_size) = *min_window_size {
+        window_builder = window_builder.with_min_inner_size(points_to_size(min_size));
+    }
+    if let Some(max_size) = *max_window_size {
+        window_builder = window_builder.with_max_inner_size(points_to_size(max_size));
+    }
+
+    window_builder = window_builder_drag_and_drop(window_builder, *drag_and_drop_support);
+
+    let inner_size_points = if let Some(mut window_settings) = window_settings {
+        // Restore pos/size from previous session
+        window_settings.clamp_to_sane_values(largest_monitor_point_size(event_loop));
+        #[cfg(windows)]
+        window_settings.clamp_window_to_sane_position(&event_loop);
+        window_builder = window_settings.initialize_window(window_builder);
+        window_settings.inner_size_points()
+    } else {
+        if let Some(pos) = *initial_window_pos {
+            window_builder = window_builder.with_position(winit::dpi::LogicalPosition {
+                x: pos.x as f64,
+                y: pos.y as f64,
+            });
+        }
+
+        if let Some(initial_window_size) = *initial_window_size {
+            let initial_window_size =
+                initial_window_size.at_most(largest_monitor_point_size(event_loop));
+            window_builder = window_builder.with_inner_size(points_to_size(initial_window_size));
+        }
+
+        *initial_window_size
+    };
+
+    if *centered {
+        if let Some(monitor) = event_loop.available_monitors().next() {
+            let monitor_size = monitor.size();
+            let inner_size = inner_size_points.unwrap_or(egui::Vec2 { x: 800.0, y: 600.0 });
+            if monitor_size.width > 0 && monitor_size.height > 0 {
+                let x = (monitor_size.width - inner_size.x as u32) / 2;
+                let y = (monitor_size.height - inner_size.y as u32) / 2;
+                window_builder = window_builder.with_position(winit::dpi::LogicalPosition {
+                    x: x as f64,
+                    y: y as f64,
+                });
+            }
+        }
+    }
+    window_builder
+}
+
+pub fn apply_native_options_to_window(
+    window: &winit::window::Window,
+    native_options: &crate::NativeOptions,
+) {
+    use winit::window::WindowLevel;
+    window.set_window_level(if native_options.always_on_top {
+        WindowLevel::AlwaysOnTop
+    } else {
+        WindowLevel::Normal
+    });
+}
+
+fn largest_monitor_point_size<E>(event_loop: &EventLoopWindowTarget<E>) -> egui::Vec2 {
+    let mut max_size = egui::Vec2::ZERO;
+
+    for monitor in event_loop.available_monitors() {
+        let size = monitor.size().to_logical::<f32>(monitor.scale_factor());
+        let size = egui::vec2(size.width, size.height);
+        max_size = max_size.max(size);
+    }
+
+    if max_size == egui::Vec2::ZERO {
+        egui::Vec2::splat(16000.0)
+    } else {
+        max_size
+    }
+}
+
+fn load_icon(icon_data: epi::IconData) -> Option<winit::window::Icon> {
+    winit::window::Icon::from_rgba(icon_data.rgba, icon_data.width, icon_data.height).ok()
+}
+
+#[cfg(target_os = "windows")]
+fn window_builder_drag_and_drop(
+    window_builder: winit::window::WindowBuilder,
+    enable: bool,
+) -> winit::window::WindowBuilder {
+    use winit::platform::windows::WindowBuilderExtWindows as _;
+    window_builder.with_drag_and_drop(enable)
+}
+
+#[cfg(not(target_os = "windows"))]
+fn window_builder_drag_and_drop(
+    window_builder: winit::window::WindowBuilder,
+    _enable: bool,
+) -> winit::window::WindowBuilder {
+    // drag and drop can only be disabled on windows
+    window_builder
+}
+
+pub fn handle_app_output(
+    window: &winit::window::Window,
+    current_pixels_per_point: f32,
+    app_output: epi::backend::AppOutput,
+    window_state: &mut WindowState,
+) {
+    let epi::backend::AppOutput {
+        close: _,
+        window_size,
+        window_title,
+        decorated,
+        fullscreen,
+        drag_window,
+        window_pos,
+        visible: _, // handled in post_present
+        always_on_top,
+        minimized,
+        maximized,
+    } = app_output;
+
+    if let Some(decorated) = decorated {
+        window.set_decorations(decorated);
+    }
+
+    if let Some(window_size) = window_size {
+        window.set_inner_size(
+            winit::dpi::PhysicalSize {
+                width: (current_pixels_per_point * window_size.x).round(),
+                height: (current_pixels_per_point * window_size.y).round(),
+            }
+            .to_logical::<f32>(native_pixels_per_point(window) as f64),
+        );
+    }
+
+    if let Some(fullscreen) = fullscreen {
+        window.set_fullscreen(fullscreen.then_some(winit::window::Fullscreen::Borderless(None)));
+    }
+
+    if let Some(window_title) = window_title {
+        window.set_title(&window_title);
+    }
+
+    if let Some(window_pos) = window_pos {
+        window.set_outer_position(winit::dpi::PhysicalPosition {
+            x: window_pos.x as f64,
+            y: window_pos.y as f64,
+        });
+    }
+
+    if drag_window {
+        let _ = window.drag_window();
+    }
+
+    if let Some(always_on_top) = always_on_top {
+        use winit::window::WindowLevel;
+        window.set_window_level(if always_on_top {
+            WindowLevel::AlwaysOnTop
+        } else {
+            WindowLevel::Normal
+        });
+    }
+
+    if let Some(minimized) = minimized {
+        window.set_minimized(minimized);
+        window_state.minimized = minimized;
+    }
+
+    if let Some(maximized) = maximized {
+        window.set_maximized(maximized);
+        window_state.maximized = maximized;
+    }
+}
+
+// ----------------------------------------------------------------------------
+
+/// For loading/saving app state and/or egui memory to disk.
+pub fn create_storage(_app_name: &str) -> Option<Box<dyn epi::Storage>> {
+    #[cfg(feature = "persistence")]
+    if let Some(storage) = super::file_storage::FileStorage::from_app_name(_app_name) {
+        return Some(Box::new(storage));
+    }
+    None
+}
+
+// ----------------------------------------------------------------------------
+
+/// Everything needed to make a winit-based integration for [`epi`].
+pub struct EpiIntegration {
+    pub frame: epi::Frame,
+    last_auto_save: std::time::Instant,
+    pub egui_ctx: egui::Context,
+    pending_full_output: egui::FullOutput,
+    egui_winit: egui_winit::State,
+    /// When set, it is time to close the native window.
+    close: bool,
+    can_drag_window: bool,
+    window_state: WindowState,
+}
+
+impl EpiIntegration {
+    pub fn new<E>(
+        event_loop: &EventLoopWindowTarget<E>,
+        max_texture_side: usize,
+        window: &winit::window::Window,
+        system_theme: Option<Theme>,
+        storage: Option<Box<dyn epi::Storage>>,
+        #[cfg(feature = "glow")] gl: Option<std::sync::Arc<glow::Context>>,
+        #[cfg(feature = "wgpu")] wgpu_render_state: Option<egui_wgpu::RenderState>,
+    ) -> Self {
+        let egui_ctx = egui::Context::default();
+
+        let memory = load_egui_memory(storage.as_deref()).unwrap_or_default();
+        egui_ctx.memory_mut(|mem| *mem = memory);
+
+        let native_pixels_per_point = window.scale_factor() as f32;
+
+        let window_state = WindowState {
+            minimized: window.is_minimized().unwrap_or(false),
+            maximized: window.is_maximized(),
+        };
+
+        let frame = epi::Frame {
+            info: epi::IntegrationInfo {
+                system_theme,
+                cpu_usage: None,
+                native_pixels_per_point: Some(native_pixels_per_point),
+                window_info: read_window_info(window, egui_ctx.pixels_per_point(), &window_state),
+            },
+            output: epi::backend::AppOutput {
+                visible: Some(true),
+                ..Default::default()
+            },
+            storage,
+            #[cfg(feature = "glow")]
+            gl,
+            #[cfg(feature = "wgpu")]
+            wgpu_render_state,
+        };
+
+        let mut egui_winit = egui_winit::State::new(event_loop);
+        egui_winit.set_max_texture_side(max_texture_side);
+        egui_winit.set_pixels_per_point(native_pixels_per_point);
+
+        Self {
+            frame,
+            last_auto_save: std::time::Instant::now(),
+            egui_ctx,
+            egui_winit,
+            pending_full_output: Default::default(),
+            close: false,
+            can_drag_window: false,
+            window_state,
+        }
+    }
+
+    #[cfg(feature = "accesskit")]
+    pub fn init_accesskit<E: From<accesskit_winit::ActionRequestEvent> + Send>(
+        &mut self,
+        window: &winit::window::Window,
+        event_loop_proxy: winit::event_loop::EventLoopProxy<E>,
+    ) {
+        let egui_ctx = self.egui_ctx.clone();
+        self.egui_winit
+            .init_accesskit(window, event_loop_proxy, move || {
+                // This function is called when an accessibility client
+                // (e.g. screen reader) makes its first request. If we got here,
+                // we know that an accessibility tree is actually wanted.
+                egui_ctx.enable_accesskit();
+                // Enqueue a repaint so we'll receive a full tree update soon.
+                egui_ctx.request_repaint();
+                egui_ctx.accesskit_placeholder_tree_update()
+            });
+    }
+
+    pub fn warm_up(&mut self, app: &mut dyn epi::App, window: &winit::window::Window) {
+        crate::profile_function!();
+        let saved_memory: egui::Memory = self.egui_ctx.memory(|mem| mem.clone());
+        self.egui_ctx
+            .memory_mut(|mem| mem.set_everything_is_visible(true));
+        let full_output = self.update(app, window);
+        self.pending_full_output.append(full_output); // Handle it next frame
+        self.egui_ctx.memory_mut(|mem| *mem = saved_memory); // We don't want to remember that windows were huge.
+        self.egui_ctx.clear_animations();
+    }
+
+    /// If `true`, it is time to close the native window.
+    pub fn should_close(&self) -> bool {
+        self.close
+    }
+
+    pub fn on_event(
+        &mut self,
+        app: &mut dyn epi::App,
+        event: &winit::event::WindowEvent<'_>,
+    ) -> EventResponse {
+        use winit::event::{ElementState, MouseButton, WindowEvent};
+
+        match event {
+            WindowEvent::CloseRequested => {
+                tracing::debug!("Received WindowEvent::CloseRequested");
+                self.close = app.on_close_event();
+                tracing::debug!("App::on_close_event returned {}", self.close);
+            }
+            WindowEvent::Destroyed => {
+                tracing::debug!("Received WindowEvent::Destroyed");
+                self.close = true;
+            }
+            WindowEvent::MouseInput {
+                button: MouseButton::Left,
+                state: ElementState::Pressed,
+                ..
+            } => self.can_drag_window = true,
+            WindowEvent::ScaleFactorChanged { scale_factor, .. } => {
+                self.frame.info.native_pixels_per_point = Some(*scale_factor as _);
+            }
+            _ => {}
+        }
+
+        self.egui_winit.on_event(&self.egui_ctx, event)
+    }
+
+    #[cfg(feature = "accesskit")]
+    pub fn on_accesskit_action_request(&mut self, request: accesskit::ActionRequest) {
+        self.egui_winit.on_accesskit_action_request(request);
+    }
+
+    pub fn update(
+        &mut self,
+        app: &mut dyn epi::App,
+        window: &winit::window::Window,
+    ) -> egui::FullOutput {
+        let frame_start = std::time::Instant::now();
+
+        self.frame.info.window_info =
+            read_window_info(window, self.egui_ctx.pixels_per_point(), &self.window_state);
+        let raw_input = self.egui_winit.take_egui_input(window);
+
+        // Run user code:
+        let full_output = self.egui_ctx.run(raw_input, |egui_ctx| {
+            crate::profile_scope!("App::update");
+            app.update(egui_ctx, &mut self.frame);
+        });
+
+        self.pending_full_output.append(full_output);
+        let full_output = std::mem::take(&mut self.pending_full_output);
+
+        {
+            let mut app_output = self.frame.take_app_output();
+            app_output.drag_window &= self.can_drag_window; // Necessary on Windows; see https://github.com/emilk/egui/pull/1108
+            self.can_drag_window = false;
+            if app_output.close {
+                self.close = app.on_close_event();
+                tracing::debug!("App::on_close_event returned {}", self.close);
+            }
+            self.frame.output.visible = app_output.visible; // this is handled by post_present
+            handle_app_output(
+                window,
+                self.egui_ctx.pixels_per_point(),
+                app_output,
+                &mut self.window_state,
+            );
+        }
+
+        let frame_time = frame_start.elapsed().as_secs_f64() as f32;
+        self.frame.info.cpu_usage = Some(frame_time);
+
+        full_output
+    }
+
+    pub fn post_rendering(&mut self, app: &mut dyn epi::App, window: &winit::window::Window) {
+        let inner_size = window.inner_size();
+        let window_size_px = [inner_size.width, inner_size.height];
+
+        app.post_rendering(window_size_px, &self.frame);
+    }
+
+    pub fn post_present(&mut self, window: &winit::window::Window) {
+        if let Some(visible) = self.frame.output.visible.take() {
+            window.set_visible(visible);
+        }
+    }
+
+    pub fn handle_platform_output(
+        &mut self,
+        window: &winit::window::Window,
+        platform_output: egui::PlatformOutput,
+    ) {
+        self.egui_winit
+            .handle_platform_output(window, &self.egui_ctx, platform_output);
+    }
+
+    // ------------------------------------------------------------------------
+    // Persistance stuff:
+
+    pub fn maybe_autosave(&mut self, app: &mut dyn epi::App, window: &winit::window::Window) {
+        let now = std::time::Instant::now();
+        if now - self.last_auto_save > app.auto_save_interval() {
+            self.save(app, window);
+            self.last_auto_save = now;
+        }
+    }
+
+    pub fn save(&mut self, _app: &mut dyn epi::App, _window: &winit::window::Window) {
+        #[cfg(feature = "persistence")]
+        if let Some(storage) = self.frame.storage_mut() {
+            crate::profile_function!();
+
+            if _app.persist_native_window() {
+                crate::profile_scope!("native_window");
+                epi::set_value(
+                    storage,
+                    STORAGE_WINDOW_KEY,
+                    &WindowSettings::from_display(_window),
+                );
+            }
+            if _app.persist_egui_memory() {
+                crate::profile_scope!("egui_memory");
+                self.egui_ctx
+                    .memory(|mem| epi::set_value(storage, STORAGE_EGUI_MEMORY_KEY, mem));
+            }
+            {
+                crate::profile_scope!("App::save");
+                _app.save(storage);
+            }
+
+            crate::profile_scope!("Storage::flush");
+            storage.flush();
+        }
+    }
+}
+
+#[cfg(feature = "persistence")]
+const STORAGE_EGUI_MEMORY_KEY: &str = "egui";
+
+#[cfg(feature = "persistence")]
+const STORAGE_WINDOW_KEY: &str = "window";
+
+pub fn load_window_settings(_storage: Option<&dyn epi::Storage>) -> Option<WindowSettings> {
+    #[cfg(feature = "persistence")]
+    {
+        epi::get_value(_storage?, STORAGE_WINDOW_KEY)
+    }
+    #[cfg(not(feature = "persistence"))]
+    None
+}
+
+pub fn load_egui_memory(_storage: Option<&dyn epi::Storage>) -> Option<egui::Memory> {
+    #[cfg(feature = "persistence")]
+    {
+        epi::get_value(_storage?, STORAGE_EGUI_MEMORY_KEY)
+    }
+    #[cfg(not(feature = "persistence"))]
+    None
+}

crates/eframe/src/native/file_storage.rs

@@ -11,16 +11,27 @@ pub struct FileStorage {
     ron_filepath: PathBuf,
     kv: HashMap<String, String>,
     dirty: bool,
+    last_save_join_handle: Option<std::thread::JoinHandle<()>>,
+}
+
+impl Drop for FileStorage {
+    fn drop(&mut self) {
+        if let Some(join_handle) = self.last_save_join_handle.take() {
+            join_handle.join().ok();
+        }
+    }
 }
 
 impl FileStorage {
     /// Store the state in this .ron file.
     pub fn from_ron_filepath(ron_filepath: impl Into<PathBuf>) -> Self {
         let ron_filepath: PathBuf = ron_filepath.into();
+        tracing::debug!("Loading app state from {:?}…", ron_filepath);
         Self {
             kv: read_ron(&ron_filepath).unwrap_or_default(),
             ron_filepath,
             dirty: false,
+            last_save_join_handle: None,
         }
     }
 
@@ -29,16 +40,17 @@ impl FileStorage {
         if let Some(proj_dirs) = directories_next::ProjectDirs::from("", "", app_name) {
             let data_dir = proj_dirs.data_dir().to_path_buf();
             if let Err(err) = std::fs::create_dir_all(&data_dir) {
-                eprintln!(
+                tracing::warn!(
                     "Saving disabled: Failed to create app path at {:?}: {}",
-                    data_dir, err
+                    data_dir,
+                    err
                 );
                 None
             } else {
                 Some(Self::from_ron_filepath(data_dir.join("app.ron")))
             }
         } else {
-            eprintln!("Saving disabled: Failed to find path to data_dir.");
+            tracing::warn!("Saving disabled: Failed to find path to data_dir.");
             None
         }
     }
@@ -58,11 +70,24 @@ impl crate::Storage for FileStorage {
 
     fn flush(&mut self) {
         if self.dirty {
-            // eprintln!("Persisted to {}", self.path.display());
-            let file = std::fs::File::create(&self.ron_filepath).unwrap();
-            let config = Default::default();
-            ron::ser::to_writer_pretty(file, &self.kv, config).unwrap();
             self.dirty = false;
+
+            let file_path = self.ron_filepath.clone();
+            let kv = self.kv.clone();
+
+            if let Some(join_handle) = self.last_save_join_handle.take() {
+                // wait for previous save to complete.
+                join_handle.join().ok();
+            }
+
+            let join_handle = std::thread::spawn(move || {
+                let file = std::fs::File::create(&file_path).unwrap();
+                let config = Default::default();
+                ron::ser::to_writer_pretty(file, &kv, config).unwrap();
+                tracing::trace!("Persisted to {:?}", file_path);
+            });
+
+            self.last_save_join_handle = Some(join_handle);
         }
     }
 }
@@ -79,7 +104,7 @@ where
             match ron::de::from_reader(reader) {
                 Ok(value) => Some(value),
                 Err(err) => {
-                    eprintln!("ERROR: Failed to parse RON: {}", err);
+                    tracing::warn!("Failed to parse RON: {}", err);
                     None
                 }
             }
@@ -90,27 +115,3 @@ where
         }
     }
 }
-
-// ----------------------------------------------------------------------------
-
-/// Alternative to `FileStorage`
-pub fn read_memory(ctx: &egui::Context, memory_file_path: impl AsRef<std::path::Path>) {
-    let memory: Option<egui::Memory> = read_ron(memory_file_path);
-    if let Some(memory) = memory {
-        *ctx.memory() = memory;
-    }
-}
-
-/// Alternative to `FileStorage`
-///
-/// # Errors
-/// When failing to serialize or create the file.
-pub fn write_memory(
-    ctx: &egui::Context,
-    memory_file_path: impl AsRef<std::path::Path>,
-) -> Result<(), Box<dyn std::error::Error>> {
-    let file = std::fs::File::create(memory_file_path)?;
-    let ron_config = Default::default();
-    ron::ser::to_writer_pretty(file, &*ctx.memory(), ron_config)?;
-    Ok(())
-}

crates/eframe/src/native/mod.rs

@@ -0,0 +1,6 @@
+mod epi_integration;
+pub mod run;
+
+/// File storage which can be used by native backends.
+#[cfg(feature = "persistence")]
+pub mod file_storage;

crates/eframe/src/web/backend.rs

@@ -0,0 +1,585 @@
+use egui::{
+    mutex::{Mutex, MutexGuard},
+    TexturesDelta,
+};
+
+use crate::{epi, App};
+
+use super::{web_painter::WebPainter, *};
+
+// ----------------------------------------------------------------------------
+
+/// Data gathered between frames.
+#[derive(Default)]
+pub struct WebInput {
+    /// Required because we don't get a position on touched
+    pub latest_touch_pos: Option<egui::Pos2>,
+
+    /// Required to maintain a stable touch position for multi-touch gestures.
+    pub latest_touch_pos_id: Option<egui::TouchId>,
+
+    pub raw: egui::RawInput,
+}
+
+impl WebInput {
+    pub fn new_frame(&mut self, canvas_size: egui::Vec2) -> egui::RawInput {
+        egui::RawInput {
+            screen_rect: Some(egui::Rect::from_min_size(Default::default(), canvas_size)),
+            pixels_per_point: Some(native_pixels_per_point()), // We ALWAYS use the native pixels-per-point
+            time: Some(now_sec()),
+            ..self.raw.take()
+        }
+    }
+}
+
+// ----------------------------------------------------------------------------
+
+use std::sync::atomic::Ordering::SeqCst;
+
+/// Stores when to do the next repaint.
+pub struct NeedRepaint(Mutex<f64>);
+
+impl Default for NeedRepaint {
+    fn default() -> Self {
+        Self(Mutex::new(f64::NEG_INFINITY)) // start with a repaint
+    }
+}
+
+impl NeedRepaint {
+    /// Returns the time (in [`now_sec`] scale) when
+    /// we should next repaint.
+    pub fn when_to_repaint(&self) -> f64 {
+        *self.0.lock()
+    }
+
+    /// Unschedule repainting.
+    pub fn clear(&self) {
+        *self.0.lock() = f64::INFINITY;
+    }
+
+    pub fn repaint_after(&self, num_seconds: f64) {
+        let mut repaint_time = self.0.lock();
+        *repaint_time = repaint_time.min(now_sec() + num_seconds);
+    }
+
+    pub fn repaint_asap(&self) {
+        *self.0.lock() = f64::NEG_INFINITY;
+    }
+}
+
+pub struct IsDestroyed(std::sync::atomic::AtomicBool);
+
+impl Default for IsDestroyed {
+    fn default() -> Self {
+        Self(false.into())
+    }
+}
+
+impl IsDestroyed {
+    pub fn fetch(&self) -> bool {
+        self.0.load(SeqCst)
+    }
+
+    pub fn set_true(&self) {
+        self.0.store(true, SeqCst);
+    }
+}
+
+// ----------------------------------------------------------------------------
+
+fn user_agent() -> Option<String> {
+    web_sys::window()?.navigator().user_agent().ok()
+}
+
+fn web_location() -> epi::Location {
+    let location = web_sys::window().unwrap().location();
+
+    let hash = percent_decode(&location.hash().unwrap_or_default());
+
+    let query = location
+        .search()
+        .unwrap_or_default()
+        .strip_prefix('?')
+        .map(percent_decode)
+        .unwrap_or_default();
+
+    let query_map = parse_query_map(&query)
+        .iter()
+        .map(|(k, v)| ((*k).to_owned(), (*v).to_owned()))
+        .collect();
+
+    epi::Location {
+        url: percent_decode(&location.href().unwrap_or_default()),
+        protocol: percent_decode(&location.protocol().unwrap_or_default()),
+        host: percent_decode(&location.host().unwrap_or_default()),
+        hostname: percent_decode(&location.hostname().unwrap_or_default()),
+        port: percent_decode(&location.port().unwrap_or_default()),
+        hash,
+        query,
+        query_map,
+        origin: percent_decode(&location.origin().unwrap_or_default()),
+    }
+}
+
+fn parse_query_map(query: &str) -> BTreeMap<&str, &str> {
+    query
+        .split('&')
+        .filter_map(|pair| {
+            if pair.is_empty() {
+                None
+            } else {
+                Some(if let Some((key, value)) = pair.split_once('=') {
+                    (key, value)
+                } else {
+                    (pair, "")
+                })
+            }
+        })
+        .collect()
+}
+
+#[test]
+fn test_parse_query() {
+    assert_eq!(parse_query_map(""), BTreeMap::default());
+    assert_eq!(parse_query_map("foo"), BTreeMap::from_iter([("foo", "")]));
+    assert_eq!(
+        parse_query_map("foo=bar"),
+        BTreeMap::from_iter([("foo", "bar")])
+    );
+    assert_eq!(
+        parse_query_map("foo=bar&baz=42"),
+        BTreeMap::from_iter([("foo", "bar"), ("baz", "42")])
+    );
+    assert_eq!(
+        parse_query_map("foo&baz=42"),
+        BTreeMap::from_iter([("foo", ""), ("baz", "42")])
+    );
+    assert_eq!(
+        parse_query_map("foo&baz&&"),
+        BTreeMap::from_iter([("foo", ""), ("baz", "")])
+    );
+}
+
+// ----------------------------------------------------------------------------
+
+pub struct AppRunner {
+    pub(crate) frame: epi::Frame,
+    egui_ctx: egui::Context,
+    painter: ActiveWebPainter,
+    pub(crate) input: WebInput,
+    app: Box<dyn epi::App>,
+    pub(crate) needs_repaint: std::sync::Arc<NeedRepaint>,
+    pub(crate) is_destroyed: std::sync::Arc<IsDestroyed>,
+    last_save_time: f64,
+    screen_reader: super::screen_reader::ScreenReader,
+    pub(crate) text_cursor_pos: Option<egui::Pos2>,
+    pub(crate) mutable_text_under_cursor: bool,
+    textures_delta: TexturesDelta,
+    pub events_to_unsubscribe: Vec<EventToUnsubscribe>,
+}
+
+impl Drop for AppRunner {
+    fn drop(&mut self) {
+        tracing::debug!("AppRunner has fully dropped");
+    }
+}
+
+impl AppRunner {
+    /// # Errors
+    /// Failure to initialize WebGL renderer.
+    pub async fn new(
+        canvas_id: &str,
+        web_options: crate::WebOptions,
+        app_creator: epi::AppCreator,
+    ) -> Result<Self, String> {
+        let painter = ActiveWebPainter::new(canvas_id, &web_options).await?;
+
+        let system_theme = if web_options.follow_system_theme {
+            super::system_theme()
+        } else {
+            None
+        };
+
+        let info = epi::IntegrationInfo {
+            web_info: epi::WebInfo {
+                user_agent: user_agent().unwrap_or_default(),
+                location: web_location(),
+            },
+            system_theme,
+            cpu_usage: None,
+            native_pixels_per_point: Some(native_pixels_per_point()),
+        };
+        let storage = LocalStorage::default();
+
+        let egui_ctx = egui::Context::default();
+        egui_ctx.set_os(egui::os::OperatingSystem::from_user_agent(
+            &user_agent().unwrap_or_default(),
+        ));
+        load_memory(&egui_ctx);
+
+        let theme = system_theme.unwrap_or(web_options.default_theme);
+        egui_ctx.set_visuals(theme.egui_visuals());
+
+        let app = app_creator(&epi::CreationContext {
+            egui_ctx: egui_ctx.clone(),
+            integration_info: info.clone(),
+            storage: Some(&storage),
+
+            #[cfg(feature = "glow")]
+            gl: Some(painter.gl().clone()),
+
+            #[cfg(all(feature = "wgpu", not(feature = "glow")))]
+            wgpu_render_state: painter.render_state(),
+            #[cfg(all(feature = "wgpu", feature = "glow"))]
+            wgpu_render_state: None,
+        });
+
+        let frame = epi::Frame {
+            info,
+            output: Default::default(),
+            storage: Some(Box::new(storage)),
+
+            #[cfg(feature = "glow")]
+            gl: Some(painter.gl().clone()),
+
+            #[cfg(all(feature = "wgpu", not(feature = "glow")))]
+            wgpu_render_state: painter.render_state(),
+            #[cfg(all(feature = "wgpu", feature = "glow"))]
+            wgpu_render_state: None,
+        };
+
+        let needs_repaint: std::sync::Arc<NeedRepaint> = Default::default();
+        {
+            let needs_repaint = needs_repaint.clone();
+            egui_ctx.set_request_repaint_callback(move || {
+                needs_repaint.repaint_asap();
+            });
+        }
+
+        let mut runner = Self {
+            frame,
+            egui_ctx,
+            painter,
+            input: Default::default(),
+            app,
+            needs_repaint,
+            is_destroyed: Default::default(),
+            last_save_time: now_sec(),
+            screen_reader: Default::default(),
+            text_cursor_pos: None,
+            mutable_text_under_cursor: false,
+            textures_delta: Default::default(),
+            events_to_unsubscribe: Default::default(),
+        };
+
+        runner.input.raw.max_texture_side = Some(runner.painter.max_texture_side());
+
+        Ok(runner)
+    }
+
+    pub fn egui_ctx(&self) -> &egui::Context {
+        &self.egui_ctx
+    }
+
+    /// Get mutable access to the concrete [`App`] we enclose.
+    ///
+    /// This will panic if your app does not implement [`App::as_any_mut`].
+    pub fn app_mut<ConreteApp: 'static + App>(&mut self) -> &mut ConreteApp {
+        self.app
+            .as_any_mut()
+            .expect("Your app must implement `as_any_mut`, but it doesn't")
+            .downcast_mut::<ConreteApp>()
+            .unwrap()
+    }
+
+    pub fn auto_save(&mut self) {
+        let now = now_sec();
+        let time_since_last_save = now - self.last_save_time;
+
+        if time_since_last_save > self.app.auto_save_interval().as_secs_f64() {
+            if self.app.persist_egui_memory() {
+                save_memory(&self.egui_ctx);
+            }
+            if let Some(storage) = self.frame.storage_mut() {
+                self.app.save(storage);
+            }
+            self.last_save_time = now;
+        }
+    }
+
+    pub fn canvas_id(&self) -> &str {
+        self.painter.canvas_id()
+    }
+
+    pub fn warm_up(&mut self) -> Result<(), JsValue> {
+        if self.app.warm_up_enabled() {
+            let saved_memory: egui::Memory = self.egui_ctx.memory(|m| m.clone());
+            self.egui_ctx
+                .memory_mut(|m| m.set_everything_is_visible(true));
+            self.logic()?;
+            self.egui_ctx.memory_mut(|m| *m = saved_memory); // We don't want to remember that windows were huge.
+            self.egui_ctx.clear_animations();
+        }
+        Ok(())
+    }
+
+    pub fn destroy(&mut self) -> Result<(), JsValue> {
+        let is_destroyed_already = self.is_destroyed.fetch();
+
+        if is_destroyed_already {
+            tracing::warn!("App was destroyed already");
+            Ok(())
+        } else {
+            tracing::debug!("Destroying");
+            for x in self.events_to_unsubscribe.drain(..) {
+                x.unsubscribe()?;
+            }
+
+            self.painter.destroy();
+            self.is_destroyed.set_true();
+            Ok(())
+        }
+    }
+
+    /// Returns how long to wait until the next repaint.
+    ///
+    /// Call [`Self::paint`] later to paint
+    pub fn logic(&mut self) -> Result<(std::time::Duration, Vec<egui::ClippedPrimitive>), JsValue> {
+        let frame_start = now_sec();
+
+        resize_canvas_to_screen_size(self.canvas_id(), self.app.max_size_points());
+        let canvas_size = canvas_size_in_points(self.canvas_id());
+        let raw_input = self.input.new_frame(canvas_size);
+
+        let full_output = self.egui_ctx.run(raw_input, |egui_ctx| {
+            self.app.update(egui_ctx, &mut self.frame);
+        });
+        let egui::FullOutput {
+            platform_output,
+            repaint_after,
+            textures_delta,
+            shapes,
+        } = full_output;
+
+        self.handle_platform_output(platform_output);
+        self.textures_delta.append(textures_delta);
+        let clipped_primitives = self.egui_ctx.tessellate(shapes);
+
+        {
+            let app_output = self.frame.take_app_output();
+            let epi::backend::AppOutput {} = app_output;
+        }
+
+        self.frame.info.cpu_usage = Some((now_sec() - frame_start) as f32);
+        Ok((repaint_after, clipped_primitives))
+    }
+
+    /// Paint the results of the last call to [`Self::logic`].
+    pub fn paint(&mut self, clipped_primitives: &[egui::ClippedPrimitive]) -> Result<(), JsValue> {
+        let textures_delta = std::mem::take(&mut self.textures_delta);
+
+        self.painter.paint_and_update_textures(
+            self.app.clear_color(&self.egui_ctx.style().visuals),
+            clipped_primitives,
+            self.egui_ctx.pixels_per_point(),
+            &textures_delta,
+        )?;
+
+        Ok(())
+    }
+
+    fn handle_platform_output(&mut self, platform_output: egui::PlatformOutput) {
+        if self.egui_ctx.options(|o| o.screen_reader) {
+            self.screen_reader
+                .speak(&platform_output.events_description());
+        }
+
+        let egui::PlatformOutput {
+            cursor_icon,
+            open_url,
+            copied_text,
+            events: _, // already handled
+            mutable_text_under_cursor,
+            text_cursor_pos,
+            #[cfg(feature = "accesskit")]
+                accesskit_update: _, // not currently implemented
+        } = platform_output;
+
+        set_cursor_icon(cursor_icon);
+        if let Some(open) = open_url {
+            super::open_url(&open.url, open.new_tab);
+        }
+
+        #[cfg(web_sys_unstable_apis)]
+        if !copied_text.is_empty() {
+            set_clipboard_text(&copied_text);
+        }
+
+        #[cfg(not(web_sys_unstable_apis))]
+        let _ = copied_text;
+
+        self.mutable_text_under_cursor = mutable_text_under_cursor;
+
+        if self.text_cursor_pos != text_cursor_pos {
+            text_agent::move_text_cursor(text_cursor_pos, self.canvas_id());
+            self.text_cursor_pos = text_cursor_pos;
+        }
+    }
+}
+
+// ----------------------------------------------------------------------------
+
+pub type AppRunnerRef = Arc<Mutex<AppRunner>>;
+
+pub struct TargetEvent {
+    target: EventTarget,
+    event_name: String,
+    closure: Closure<dyn FnMut(web_sys::Event)>,
+}
+
+pub struct IntervalHandle {
+    pub handle: i32,
+    pub closure: Closure<dyn FnMut()>,
+}
+
+pub enum EventToUnsubscribe {
+    TargetEvent(TargetEvent),
+    #[allow(dead_code)]
+    IntervalHandle(IntervalHandle),
+}
+
+impl EventToUnsubscribe {
+    pub fn unsubscribe(self) -> Result<(), JsValue> {
+        match self {
+            EventToUnsubscribe::TargetEvent(handle) => {
+                handle.target.remove_event_listener_with_callback(
+                    handle.event_name.as_str(),
+                    handle.closure.as_ref().unchecked_ref(),
+                )?;
+                Ok(())
+            }
+            EventToUnsubscribe::IntervalHandle(handle) => {
+                let window = web_sys::window().unwrap();
+                window.clear_interval_with_handle(handle.handle);
+                Ok(())
+            }
+        }
+    }
+}
+
+pub struct AppRunnerContainer {
+    pub runner: AppRunnerRef,
+
+    /// Set to `true` if there is a panic.
+    /// Used to ignore callbacks after a panic.
+    pub panicked: Arc<AtomicBool>,
+    pub events: Vec<EventToUnsubscribe>,
+}
+
+impl AppRunnerContainer {
+    /// Convenience function to reduce boilerplate and ensure that all event handlers
+    /// are dealt with in the same way
+    pub fn add_event_listener<E: wasm_bindgen::JsCast>(
+        &mut self,
+        target: &EventTarget,
+        event_name: &'static str,
+        mut closure: impl FnMut(E, MutexGuard<'_, AppRunner>) + 'static,
+    ) -> Result<(), JsValue> {
+        // Create a JS closure based on the FnMut provided
+        let closure = Closure::wrap({
+            // Clone atomics
+            let runner_ref = self.runner.clone();
+            let panicked = self.panicked.clone();
+
+            Box::new(move |event: web_sys::Event| {
+                // Only call the wrapped closure if the egui code has not panicked
+                if !panicked.load(Ordering::SeqCst) {
+                    // Cast the event to the expected event type
+                    let event = event.unchecked_into::<E>();
+
+                    closure(event, runner_ref.lock());
+                }
+            }) as Box<dyn FnMut(web_sys::Event)>
+        });
+
+        // Add the event listener to the target
+        target.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
+
+        let handle = TargetEvent {
+            target: target.clone(),
+            event_name: event_name.to_owned(),
+            closure,
+        };
+
+        self.events.push(EventToUnsubscribe::TargetEvent(handle));
+
+        Ok(())
+    }
+}
+
+// ----------------------------------------------------------------------------
+
+/// Install event listeners to register different input events
+/// and start running the given app.
+pub async fn start(
+    canvas_id: &str,
+    web_options: crate::WebOptions,
+    app_creator: epi::AppCreator,
+) -> Result<AppRunnerRef, JsValue> {
+    #[cfg(not(web_sys_unstable_apis))]
+    tracing::warn!(
+        "eframe compiled without RUSTFLAGS='--cfg=web_sys_unstable_apis'. Copying text won't work."
+    );
+
+    let mut runner = AppRunner::new(canvas_id, web_options, app_creator).await?;
+    runner.warm_up()?;
+    start_runner(runner)
+}
+
+/// Install event listeners to register different input events
+/// and starts running the given [`AppRunner`].
+fn start_runner(app_runner: AppRunner) -> Result<AppRunnerRef, JsValue> {
+    let mut runner_container = AppRunnerContainer {
+        runner: Arc::new(Mutex::new(app_runner)),
+        panicked: Arc::new(AtomicBool::new(false)),
+        events: Vec::with_capacity(20),
+    };
+
+    super::events::install_canvas_events(&mut runner_container)?;
+    super::events::install_document_events(&mut runner_container)?;
+    text_agent::install_text_agent(&mut runner_container)?;
+
+    super::events::paint_and_schedule(&runner_container.runner, runner_container.panicked.clone())?;
+
+    // Disable all event handlers on panic
+    let previous_hook = std::panic::take_hook();
+
+    runner_container.runner.lock().events_to_unsubscribe = runner_container.events;
+
+    std::panic::set_hook(Box::new(move |panic_info| {
+        tracing::info!("egui disabled all event handlers due to panic");
+        runner_container.panicked.store(true, SeqCst);
+
+        // Propagate panic info to the previously registered panic hook
+        previous_hook(panic_info);
+    }));
+
+    Ok(runner_container.runner)
+}
+
+// ----------------------------------------------------------------------------
+
+#[derive(Default)]
+struct LocalStorage {}
+
+impl epi::Storage for LocalStorage {
+    fn get_string(&self, key: &str) -> Option<String> {
+        local_storage_get(key)
+    }
+
+    fn set_string(&mut self, key: &str, value: String) {
+        local_storage_set(key, &value);
+    }
+
+    fn flush(&mut self) {}
+}

crates/eframe/src/web/events.rs

@@ -0,0 +1,538 @@
+use std::sync::atomic::{AtomicBool, Ordering};
+
+use egui::Key;
+
+use super::*;
+
+struct IsDestroyed(pub bool);
+
+pub fn paint_and_schedule(
+    runner_ref: &AppRunnerRef,
+    panicked: Arc<AtomicBool>,
+) -> Result<(), JsValue> {
+    fn paint_if_needed(runner_ref: &AppRunnerRef) -> Result<IsDestroyed, JsValue> {
+        let mut runner_lock = runner_ref.lock();
+        let is_destroyed = runner_lock.is_destroyed.fetch();
+
+        if !is_destroyed && runner_lock.needs_repaint.when_to_repaint() <= now_sec() {
+            runner_lock.needs_repaint.clear();
+            let (repaint_after, clipped_primitives) = runner_lock.logic()?;
+            runner_lock.paint(&clipped_primitives)?;
+            runner_lock
+                .needs_repaint
+                .repaint_after(repaint_after.as_secs_f64());
+            runner_lock.auto_save();
+        }
+
+        Ok(IsDestroyed(is_destroyed))
+    }
+
+    fn request_animation_frame(
+        runner_ref: AppRunnerRef,
+        panicked: Arc<AtomicBool>,
+    ) -> Result<(), JsValue> {
+        let window = web_sys::window().unwrap();
+        let closure = Closure::once(move || paint_and_schedule(&runner_ref, panicked));
+        window.request_animation_frame(closure.as_ref().unchecked_ref())?;
+        closure.forget(); // We must forget it, or else the callback is canceled on drop
+        Ok(())
+    }
+
+    // Only paint and schedule if there has been no panic
+    if !panicked.load(Ordering::SeqCst) {
+        let is_destroyed = paint_if_needed(runner_ref)?;
+        if !is_destroyed.0 {
+            request_animation_frame(runner_ref.clone(), panicked)?;
+        }
+    }
+
+    Ok(())
+}
+
+pub fn install_document_events(runner_container: &mut AppRunnerContainer) -> Result<(), JsValue> {
+    let window = web_sys::window().unwrap();
+    let document = window.document().unwrap();
+
+    runner_container.add_event_listener(
+        &document,
+        "keydown",
+        |event: web_sys::KeyboardEvent, mut runner_lock| {
+            if event.is_composing() || event.key_code() == 229 {
+                // https://web.archive.org/web/20200526195704/https://www.fxsitecompat.dev/en-CA/docs/2018/keydown-and-keyup-events-are-now-fired-during-ime-composition/
+                return;
+            }
+
+            let modifiers = modifiers_from_event(&event);
+            runner_lock.input.raw.modifiers = modifiers;
+
+            let key = event.key();
+            let egui_key = translate_key(&key);
+
+            if let Some(key) = egui_key {
+                runner_lock.input.raw.events.push(egui::Event::Key {
+                    key,
+                    pressed: true,
+                    repeat: false, // egui will fill this in for us!
+                    modifiers,
+                });
+            }
+            if !modifiers.ctrl
+                && !modifiers.command
+                && !should_ignore_key(&key)
+                // When text agent is shown, it sends text event instead.
+                && text_agent::text_agent().hidden()
+            {
+                runner_lock.input.raw.events.push(egui::Event::Text(key));
+            }
+            runner_lock.needs_repaint.repaint_asap();
+
+            let egui_wants_keyboard = runner_lock.egui_ctx().wants_keyboard_input();
+
+            #[allow(clippy::if_same_then_else)]
+            let prevent_default = if egui_key == Some(Key::Tab) {
+                // Always prevent moving cursor to url bar.
+                // egui wants to use tab to move to the next text field.
+                true
+            } else if egui_key == Some(Key::P) {
+                #[allow(clippy::needless_bool)]
+                if modifiers.ctrl || modifiers.command || modifiers.mac_cmd {
+                    true // Prevent ctrl-P opening the print dialog. Users may want to use it for a command palette.
+                } else {
+                    false // let normal P:s through
+                }
+            } else if egui_wants_keyboard {
+                matches!(
+                    event.key().as_str(),
+                    "Backspace" // so we don't go back to previous page when deleting text
+                    | "ArrowDown" | "ArrowLeft" | "ArrowRight" | "ArrowUp" // cmd-left is "back" on Mac (https://github.com/emilk/egui/issues/58)
+                )
+            } else {
+                // We never want to prevent:
+                // * F5 / cmd-R (refresh)
+                // * cmd-shift-C (debug tools)
+                // * cmd/ctrl-c/v/x (or we stop copy/past/cut events)
+                false
+            };
+
+            // tracing::debug!(
+            //     "On key-down {:?}, egui_wants_keyboard: {}, prevent_default: {}",
+            //     event.key().as_str(),
+            //     egui_wants_keyboard,
+            //     prevent_default
+            // );
+
+            if prevent_default {
+                event.prevent_default();
+                // event.stop_propagation();
+            }
+        },
+    )?;
+
+    runner_container.add_event_listener(
+        &document,
+        "keyup",
+        |event: web_sys::KeyboardEvent, mut runner_lock| {
+            let modifiers = modifiers_from_event(&event);
+            runner_lock.input.raw.modifiers = modifiers;
+            if let Some(key) = translate_key(&event.key()) {
+                runner_lock.input.raw.events.push(egui::Event::Key {
+                    key,
+                    pressed: false,
+                    repeat: false,
+                    modifiers,
+                });
+            }
+            runner_lock.needs_repaint.repaint_asap();
+        },
+    )?;
+
+    #[cfg(web_sys_unstable_apis)]
+    runner_container.add_event_listener(
+        &document,
+        "paste",
+        |event: web_sys::ClipboardEvent, mut runner_lock| {
+            if let Some(data) = event.clipboard_data() {
+                if let Ok(text) = data.get_data("text") {
+                    let text = text.replace("\r\n", "\n");
+                    if !text.is_empty() {
+                        runner_lock.input.raw.events.push(egui::Event::Paste(text));
+                        runner_lock.needs_repaint.repaint_asap();
+                    }
+                    event.stop_propagation();
+                    event.prevent_default();
+                }
+            }
+        },
+    )?;
+
+    #[cfg(web_sys_unstable_apis)]
+    runner_container.add_event_listener(
+        &document,
+        "cut",
+        |_: web_sys::ClipboardEvent, mut runner_lock| {
+            runner_lock.input.raw.events.push(egui::Event::Cut);
+            runner_lock.needs_repaint.repaint_asap();
+        },
+    )?;
+
+    #[cfg(web_sys_unstable_apis)]
+    runner_container.add_event_listener(
+        &document,
+        "copy",
+        |_: web_sys::ClipboardEvent, mut runner_lock| {
+            runner_lock.input.raw.events.push(egui::Event::Copy);
+            runner_lock.needs_repaint.repaint_asap();
+        },
+    )?;
+
+    for event_name in &["load", "pagehide", "pageshow", "resize"] {
+        runner_container.add_event_listener(
+            &window,
+            event_name,
+            |_: web_sys::Event, runner_lock| {
+                runner_lock.needs_repaint.repaint_asap();
+            },
+        )?;
+    }
+
+    runner_container.add_event_listener(
+        &window,
+        "hashchange",
+        |_: web_sys::Event, mut runner_lock| {
+            // `epi::Frame::info(&self)` clones `epi::IntegrationInfo`, but we need to modify the original here
+            runner_lock.frame.info.web_info.location.hash = location_hash();
+        },
+    )?;
+
+    Ok(())
+}
+
+pub fn install_canvas_events(runner_container: &mut AppRunnerContainer) -> Result<(), JsValue> {
+    let canvas = canvas_element(runner_container.runner.lock().canvas_id()).unwrap();
+
+    let prevent_default_events = [
+        // By default, right-clicks open a context menu.
+        // We don't want to do that (right clicks is handled by egui):
+        "contextmenu",
+        // Allow users to use ctrl-p for e.g. a command palette
+        "afterprint",
+    ];
+
+    for event_name in prevent_default_events {
+        let closure =
+            move |event: web_sys::MouseEvent,
+                  mut _runner_lock: egui::mutex::MutexGuard<'_, AppRunner>| {
+                event.prevent_default();
+                // event.stop_propagation();
+                // tracing::debug!("Preventing event {:?}", event_name);
+            };
+
+        runner_container.add_event_listener(&canvas, event_name, closure)?;
+    }
+
+    runner_container.add_event_listener(
+        &canvas,
+        "mousedown",
+        |event: web_sys::MouseEvent, mut runner_lock: egui::mutex::MutexGuard<'_, AppRunner>| {
+            if let Some(button) = button_from_mouse_event(&event) {
+                let pos = pos_from_mouse_event(runner_lock.canvas_id(), &event);
+                let modifiers = runner_lock.input.raw.modifiers;
+                runner_lock
+                    .input
+                    .raw
+                    .events
+                    .push(egui::Event::PointerButton {
+                        pos,
+                        button,
+                        pressed: true,
+                        modifiers,
+                    });
+                runner_lock.needs_repaint.repaint_asap();
+            }
+            event.stop_propagation();
+            // Note: prevent_default breaks VSCode tab focusing, hence why we don't call it here.
+        },
+    )?;
+
+    runner_container.add_event_listener(
+        &canvas,
+        "mousemove",
+        |event: web_sys::MouseEvent, mut runner_lock| {
+            let pos = pos_from_mouse_event(runner_lock.canvas_id(), &event);
+            runner_lock
+                .input
+                .raw
+                .events
+                .push(egui::Event::PointerMoved(pos));
+            runner_lock.needs_repaint.repaint_asap();
+            event.stop_propagation();
+            event.prevent_default();
+        },
+    )?;
+
+    runner_container.add_event_listener(
+        &canvas,
+        "mouseup",
+        |event: web_sys::MouseEvent, mut runner_lock| {
+            if let Some(button) = button_from_mouse_event(&event) {
+                let pos = pos_from_mouse_event(runner_lock.canvas_id(), &event);
+                let modifiers = runner_lock.input.raw.modifiers;
+                runner_lock
+                    .input
+                    .raw
+                    .events
+                    .push(egui::Event::PointerButton {
+                        pos,
+                        button,
+                        pressed: false,
+                        modifiers,
+                    });
+                runner_lock.needs_repaint.repaint_asap();
+
+                text_agent::update_text_agent(runner_lock);
+            }
+            event.stop_propagation();
+            event.prevent_default();
+        },
+    )?;
+
+    runner_container.add_event_listener(
+        &canvas,
+        "mouseleave",
+        |event: web_sys::MouseEvent, mut runner_lock| {
+            runner_lock.input.raw.events.push(egui::Event::PointerGone);
+            runner_lock.needs_repaint.repaint_asap();
+            event.stop_propagation();
+            event.prevent_default();
+        },
+    )?;
+
+    runner_container.add_event_listener(
+        &canvas,
+        "touchstart",
+        |event: web_sys::TouchEvent, mut runner_lock| {
+            let mut latest_touch_pos_id = runner_lock.input.latest_touch_pos_id;
+            let pos =
+                pos_from_touch_event(runner_lock.canvas_id(), &event, &mut latest_touch_pos_id);
+            runner_lock.input.latest_touch_pos_id = latest_touch_pos_id;
+            runner_lock.input.latest_touch_pos = Some(pos);
+            let modifiers = runner_lock.input.raw.modifiers;
+            runner_lock
+                .input
+                .raw
+                .events
+                .push(egui::Event::PointerButton {
+                    pos,
+                    button: egui::PointerButton::Primary,
+                    pressed: true,
+                    modifiers,
+                });
+
+            push_touches(&mut runner_lock, egui::TouchPhase::Start, &event);
+            runner_lock.needs_repaint.repaint_asap();
+            event.stop_propagation();
+            event.prevent_default();
+        },
+    )?;
+
+    runner_container.add_event_listener(
+        &canvas,
+        "touchmove",
+        |event: web_sys::TouchEvent, mut runner_lock| {
+            let mut latest_touch_pos_id = runner_lock.input.latest_touch_pos_id;
+            let pos =
+                pos_from_touch_event(runner_lock.canvas_id(), &event, &mut latest_touch_pos_id);
+            runner_lock.input.latest_touch_pos_id = latest_touch_pos_id;
+            runner_lock.input.latest_touch_pos = Some(pos);
+            runner_lock
+                .input
+                .raw
+                .events
+                .push(egui::Event::PointerMoved(pos));
+
+            push_touches(&mut runner_lock, egui::TouchPhase::Move, &event);
+            runner_lock.needs_repaint.repaint_asap();
+            event.stop_propagation();
+            event.prevent_default();
+        },
+    )?;
+
+    runner_container.add_event_listener(
+        &canvas,
+        "touchend",
+        |event: web_sys::TouchEvent, mut runner_lock| {
+            if let Some(pos) = runner_lock.input.latest_touch_pos {
+                let modifiers = runner_lock.input.raw.modifiers;
+                // First release mouse to click:
+                runner_lock
+                    .input
+                    .raw
+                    .events
+                    .push(egui::Event::PointerButton {
+                        pos,
+                        button: egui::PointerButton::Primary,
+                        pressed: false,
+                        modifiers,
+                    });
+                // Then remove hover effect:
+                runner_lock.input.raw.events.push(egui::Event::PointerGone);
+
+                push_touches(&mut runner_lock, egui::TouchPhase::End, &event);
+                runner_lock.needs_repaint.repaint_asap();
+                event.stop_propagation();
+                event.prevent_default();
+            }
+
+            // Finally, focus or blur text agent to toggle mobile keyboard:
+            text_agent::update_text_agent(runner_lock);
+        },
+    )?;
+
+    runner_container.add_event_listener(
+        &canvas,
+        "touchcancel",
+        |event: web_sys::TouchEvent, mut runner_lock| {
+            push_touches(&mut runner_lock, egui::TouchPhase::Cancel, &event);
+            event.stop_propagation();
+            event.prevent_default();
+        },
+    )?;
+
+    runner_container.add_event_listener(
+        &canvas,
+        "wheel",
+        |event: web_sys::WheelEvent, mut runner_lock| {
+            let scroll_multiplier = match event.delta_mode() {
+                web_sys::WheelEvent::DOM_DELTA_PAGE => {
+                    canvas_size_in_points(runner_lock.canvas_id()).y
+                }
+                web_sys::WheelEvent::DOM_DELTA_LINE => {
+                    #[allow(clippy::let_and_return)]
+                    let points_per_scroll_line = 8.0; // Note that this is intentionally different from what we use in winit.
+                    points_per_scroll_line
+                }
+                _ => 1.0, // DOM_DELTA_PIXEL
+            };
+
+            let mut delta =
+                -scroll_multiplier * egui::vec2(event.delta_x() as f32, event.delta_y() as f32);
+
+            // Report a zoom event in case CTRL (on Windows or Linux) or CMD (on Mac) is pressed.
+            // This if-statement is equivalent to how `Modifiers.command` is determined in
+            // `modifiers_from_event()`, but we cannot directly use that fn for a [`WheelEvent`].
+            if event.ctrl_key() || event.meta_key() {
+                let factor = (delta.y / 200.0).exp();
+                runner_lock.input.raw.events.push(egui::Event::Zoom(factor));
+            } else {
+                if event.shift_key() {
+                    // Treat as horizontal scrolling.
+                    // Note: one Mac we already get horizontal scroll events when shift is down.
+                    delta = egui::vec2(delta.x + delta.y, 0.0);
+                }
+
+                runner_lock
+                    .input
+                    .raw
+                    .events
+                    .push(egui::Event::Scroll(delta));
+            }
+
+            runner_lock.needs_repaint.repaint_asap();
+            event.stop_propagation();
+            event.prevent_default();
+        },
+    )?;
+
+    runner_container.add_event_listener(
+        &canvas,
+        "dragover",
+        |event: web_sys::DragEvent, mut runner_lock| {
+            if let Some(data_transfer) = event.data_transfer() {
+                runner_lock.input.raw.hovered_files.clear();
+                for i in 0..data_transfer.items().length() {
+                    if let Some(item) = data_transfer.items().get(i) {
+                        runner_lock.input.raw.hovered_files.push(egui::HoveredFile {
+                            mime: item.type_(),
+                            ..Default::default()
+                        });
+                    }
+                }
+                runner_lock.needs_repaint.repaint_asap();
+                event.stop_propagation();
+                event.prevent_default();
+            }
+        },
+    )?;
+
+    runner_container.add_event_listener(
+        &canvas,
+        "dragleave",
+        |event: web_sys::DragEvent, mut runner_lock| {
+            runner_lock.input.raw.hovered_files.clear();
+            runner_lock.needs_repaint.repaint_asap();
+            event.stop_propagation();
+            event.prevent_default();
+        },
+    )?;
+
+    runner_container.add_event_listener(&canvas, "drop", {
+        let runner_ref = runner_container.runner.clone();
+
+        move |event: web_sys::DragEvent, mut runner_lock| {
+            if let Some(data_transfer) = event.data_transfer() {
+                runner_lock.input.raw.hovered_files.clear();
+                runner_lock.needs_repaint.repaint_asap();
+                // Unlock the runner so it can be locked after a future await point
+                drop(runner_lock);
+
+                if let Some(files) = data_transfer.files() {
+                    for i in 0..files.length() {
+                        if let Some(file) = files.get(i) {
+                            let name = file.name();
+                            let last_modified = std::time::UNIX_EPOCH
+                                + std::time::Duration::from_millis(file.last_modified() as u64);
+
+                            tracing::debug!("Loading {:?} ({} bytes)…", name, file.size());
+
+                            let future = wasm_bindgen_futures::JsFuture::from(file.array_buffer());
+
+                            let runner_ref = runner_ref.clone();
+                            let future = async move {
+                                match future.await {
+                                    Ok(array_buffer) => {
+                                        let bytes = js_sys::Uint8Array::new(&array_buffer).to_vec();
+                                        tracing::debug!(
+                                            "Loaded {:?} ({} bytes).",
+                                            name,
+                                            bytes.len()
+                                        );
+
+                                        // Re-lock the mutex on the other side of the await point
+                                        let mut runner_lock = runner_ref.lock();
+                                        runner_lock.input.raw.dropped_files.push(
+                                            egui::DroppedFile {
+                                                name,
+                                                last_modified: Some(last_modified),
+                                                bytes: Some(bytes.into()),
+                                                ..Default::default()
+                                            },
+                                        );
+                                        runner_lock.needs_repaint.repaint_asap();
+                                    }
+                                    Err(err) => {
+                                        tracing::error!("Failed to read file: {:?}", err);
+                                    }
+                                }
+                            };
+                            wasm_bindgen_futures::spawn_local(future);
+                        }
+                    }
+                }
+                event.stop_propagation();
+                event.prevent_default();
+            }
+        }
+    })?;
+
+    Ok(())
+}

crates/eframe/src/web/input.rs

@@ -0,0 +1,217 @@
+use super::{canvas_element, canvas_origin, AppRunner};
+
+pub fn pos_from_mouse_event(canvas_id: &str, event: &web_sys::MouseEvent) -> egui::Pos2 {
+    let canvas = canvas_element(canvas_id).unwrap();
+    let rect = canvas.get_bounding_client_rect();
+    egui::Pos2 {
+        x: event.client_x() as f32 - rect.left() as f32,
+        y: event.client_y() as f32 - rect.top() as f32,
+    }
+}
+
+pub fn button_from_mouse_event(event: &web_sys::MouseEvent) -> Option<egui::PointerButton> {
+    match event.button() {
+        0 => Some(egui::PointerButton::Primary),
+        1 => Some(egui::PointerButton::Middle),
+        2 => Some(egui::PointerButton::Secondary),
+        3 => Some(egui::PointerButton::Extra1),
+        4 => Some(egui::PointerButton::Extra2),
+        _ => None,
+    }
+}
+
+/// A single touch is translated to a pointer movement. When a second touch is added, the pointer
+/// should not jump to a different position. Therefore, we do not calculate the average position
+/// of all touches, but we keep using the same touch as long as it is available.
+///
+/// `touch_id_for_pos` is the [`TouchId`](egui::TouchId) of the [`Touch`](web_sys::Touch) we previously used to determine the
+/// pointer position.
+pub fn pos_from_touch_event(
+    canvas_id: &str,
+    event: &web_sys::TouchEvent,
+    touch_id_for_pos: &mut Option<egui::TouchId>,
+) -> egui::Pos2 {
+    let touch_for_pos = if let Some(touch_id_for_pos) = touch_id_for_pos {
+        // search for the touch we previously used for the position
+        // (unfortunately, `event.touches()` is not a rust collection):
+        (0..event.touches().length())
+            .into_iter()
+            .map(|i| event.touches().get(i).unwrap())
+            .find(|touch| egui::TouchId::from(touch.identifier()) == *touch_id_for_pos)
+    } else {
+        None
+    };
+    // Use the touch found above or pick the first, or return a default position if there is no
+    // touch at all. (The latter is not expected as the current method is only called when there is
+    // at least one touch.)
+    touch_for_pos
+        .or_else(|| event.touches().get(0))
+        .map_or(Default::default(), |touch| {
+            *touch_id_for_pos = Some(egui::TouchId::from(touch.identifier()));
+            pos_from_touch(canvas_origin(canvas_id), &touch)
+        })
+}
+
+fn pos_from_touch(canvas_origin: egui::Pos2, touch: &web_sys::Touch) -> egui::Pos2 {
+    egui::Pos2 {
+        x: touch.page_x() as f32 - canvas_origin.x,
+        y: touch.page_y() as f32 - canvas_origin.y,
+    }
+}
+
+pub fn push_touches(runner: &mut AppRunner, phase: egui::TouchPhase, event: &web_sys::TouchEvent) {
+    let canvas_origin = canvas_origin(runner.canvas_id());
+    for touch_idx in 0..event.changed_touches().length() {
+        if let Some(touch) = event.changed_touches().item(touch_idx) {
+            runner.input.raw.events.push(egui::Event::Touch {
+                device_id: egui::TouchDeviceId(0),
+                id: egui::TouchId::from(touch.identifier()),
+                phase,
+                pos: pos_from_touch(canvas_origin, &touch),
+                force: touch.force(),
+            });
+        }
+    }
+}
+
+/// Web sends all keys as strings, so it is up to us to figure out if it is
+/// a real text input or the name of a key.
+pub fn should_ignore_key(key: &str) -> bool {
+    let is_function_key = key.starts_with('F') && key.len() > 1;
+    is_function_key
+        || matches!(
+            key,
+            "Alt"
+                | "ArrowDown"
+                | "ArrowLeft"
+                | "ArrowRight"
+                | "ArrowUp"
+                | "Backspace"
+                | "CapsLock"
+                | "ContextMenu"
+                | "Control"
+                | "Delete"
+                | "End"
+                | "Enter"
+                | "Esc"
+                | "Escape"
+                | "GroupNext" // https://github.com/emilk/egui/issues/510
+                | "Help"
+                | "Home"
+                | "Insert"
+                | "Meta"
+                | "NumLock"
+                | "PageDown"
+                | "PageUp"
+                | "Pause"
+                | "ScrollLock"
+                | "Shift"
+                | "Tab"
+        )
+}
+
+/// Web sends all all keys as strings, so it is up to us to figure out if it is
+/// a real text input or the name of a key.
+pub fn translate_key(key: &str) -> Option<egui::Key> {
+    use egui::Key;
+
+    match key {
+        "ArrowDown" => Some(Key::ArrowDown),
+        "ArrowLeft" => Some(Key::ArrowLeft),
+        "ArrowRight" => Some(Key::ArrowRight),
+        "ArrowUp" => Some(Key::ArrowUp),
+
+        "Esc" | "Escape" => Some(Key::Escape),
+        "Tab" => Some(Key::Tab),
+        "Backspace" => Some(Key::Backspace),
+        "Enter" => Some(Key::Enter),
+        "Space" | " " => Some(Key::Space),
+
+        "Help" | "Insert" => Some(Key::Insert),
+        "Delete" => Some(Key::Delete),
+        "Home" => Some(Key::Home),
+        "End" => Some(Key::End),
+        "PageUp" => Some(Key::PageUp),
+        "PageDown" => Some(Key::PageDown),
+
+        "-" => Some(Key::Minus),
+        "+" | "=" => Some(Key::PlusEquals),
+
+        "0" => Some(Key::Num0),
+        "1" => Some(Key::Num1),
+        "2" => Some(Key::Num2),
+        "3" => Some(Key::Num3),
+        "4" => Some(Key::Num4),
+        "5" => Some(Key::Num5),
+        "6" => Some(Key::Num6),
+        "7" => Some(Key::Num7),
+        "8" => Some(Key::Num8),
+        "9" => Some(Key::Num9),
+
+        "a" | "A" => Some(Key::A),
+        "b" | "B" => Some(Key::B),
+        "c" | "C" => Some(Key::C),
+        "d" | "D" => Some(Key::D),
+        "e" | "E" => Some(Key::E),
+        "f" | "F" => Some(Key::F),
+        "g" | "G" => Some(Key::G),
+        "h" | "H" => Some(Key::H),
+        "i" | "I" => Some(Key::I),
+        "j" | "J" => Some(Key::J),
+        "k" | "K" => Some(Key::K),
+        "l" | "L" => Some(Key::L),
+        "m" | "M" => Some(Key::M),
+        "n" | "N" => Some(Key::N),
+        "o" | "O" => Some(Key::O),
+        "p" | "P" => Some(Key::P),
+        "q" | "Q" => Some(Key::Q),
+        "r" | "R" => Some(Key::R),
+        "s" | "S" => Some(Key::S),
+        "t" | "T" => Some(Key::T),
+        "u" | "U" => Some(Key::U),
+        "v" | "V" => Some(Key::V),
+        "w" | "W" => Some(Key::W),
+        "x" | "X" => Some(Key::X),
+        "y" | "Y" => Some(Key::Y),
+        "z" | "Z" => Some(Key::Z),
+
+        "F1" => Some(Key::F1),
+        "F2" => Some(Key::F2),
+        "F3" => Some(Key::F3),
+        "F4" => Some(Key::F4),
+        "F5" => Some(Key::F5),
+        "F6" => Some(Key::F6),
+        "F7" => Some(Key::F7),
+        "F8" => Some(Key::F8),
+        "F9" => Some(Key::F9),
+        "F10" => Some(Key::F10),
+        "F11" => Some(Key::F11),
+        "F12" => Some(Key::F12),
+        "F13" => Some(Key::F13),
+        "F14" => Some(Key::F14),
+        "F15" => Some(Key::F15),
+        "F16" => Some(Key::F16),
+        "F17" => Some(Key::F17),
+        "F18" => Some(Key::F18),
+        "F19" => Some(Key::F19),
+        "F20" => Some(Key::F20),
+
+        _ => None,
+    }
+}
+
+pub fn modifiers_from_event(event: &web_sys::KeyboardEvent) -> egui::Modifiers {
+    egui::Modifiers {
+        alt: event.alt_key(),
+        ctrl: event.ctrl_key(),
+        shift: event.shift_key(),
+
+        // Ideally we should know if we are running or mac or not,
+        // but this works good enough for now.
+        mac_cmd: event.meta_key(),
+
+        // Ideally we should know if we are running or mac or not,
+        // but this works good enough for now.
+        command: event.ctrl_key() || event.meta_key(),
+    }
+}

crates/eframe/src/web/mod.rs

@@ -0,0 +1,258 @@
+//! [`egui`] bindings for web apps (compiling to WASM).
+
+#![allow(clippy::missing_errors_doc)] // So many `-> Result<_, JsValue>`
+
+pub mod backend;
+mod events;
+mod input;
+pub mod screen_reader;
+pub mod storage;
+mod text_agent;
+
+#[cfg(not(any(feature = "glow", feature = "wgpu")))]
+compile_error!("You must enable either the 'glow' or 'wgpu' feature");
+
+mod web_painter;
+
+#[cfg(feature = "glow")]
+mod web_painter_glow;
+#[cfg(feature = "glow")]
+pub(crate) type ActiveWebPainter = web_painter_glow::WebPainterGlow;
+
+#[cfg(feature = "wgpu")]
+mod web_painter_wgpu;
+#[cfg(all(feature = "wgpu", not(feature = "glow")))]
+pub(crate) type ActiveWebPainter = web_painter_wgpu::WebPainterWgpu;
+
+pub use backend::*;
+pub use events::*;
+pub use storage::*;
+
+use std::collections::BTreeMap;
+use std::sync::{
+    atomic::{AtomicBool, Ordering},
+    Arc,
+};
+
+use egui::Vec2;
+use wasm_bindgen::prelude::*;
+use web_sys::EventTarget;
+
+use input::*;
+
+use crate::Theme;
+
+// ----------------------------------------------------------------------------
+
+/// Current time in seconds (since undefined point in time).
+///
+/// Monotonically increasing.
+pub fn now_sec() -> f64 {
+    web_sys::window()
+        .expect("should have a Window")
+        .performance()
+        .expect("should have a Performance")
+        .now()
+        / 1000.0
+}
+
+#[allow(dead_code)]
+pub fn screen_size_in_native_points() -> Option<egui::Vec2> {
+    let window = web_sys::window()?;
+    Some(egui::vec2(
+        window.inner_width().ok()?.as_f64()? as f32,
+        window.inner_height().ok()?.as_f64()? as f32,
+    ))
+}
+
+pub fn native_pixels_per_point() -> f32 {
+    let pixels_per_point = web_sys::window().unwrap().device_pixel_ratio() as f32;
+    if pixels_per_point > 0.0 && pixels_per_point.is_finite() {
+        pixels_per_point
+    } else {
+        1.0
+    }
+}
+
+pub fn system_theme() -> Option<Theme> {
+    let dark_mode = web_sys::window()?
+        .match_media("(prefers-color-scheme: dark)")
+        .ok()??
+        .matches();
+    Some(if dark_mode { Theme::Dark } else { Theme::Light })
+}
+
+pub fn canvas_element(canvas_id: &str) -> Option<web_sys::HtmlCanvasElement> {
+    let document = web_sys::window()?.document()?;
+    let canvas = document.get_element_by_id(canvas_id)?;
+    canvas.dyn_into::<web_sys::HtmlCanvasElement>().ok()
+}
+
+pub fn canvas_element_or_die(canvas_id: &str) -> web_sys::HtmlCanvasElement {
+    canvas_element(canvas_id)
+        .unwrap_or_else(|| panic!("Failed to find canvas with id {:?}", canvas_id))
+}
+
+fn canvas_origin(canvas_id: &str) -> egui::Pos2 {
+    let rect = canvas_element(canvas_id)
+        .unwrap()
+        .get_bounding_client_rect();
+    egui::pos2(rect.left() as f32, rect.top() as f32)
+}
+
+pub fn canvas_size_in_points(canvas_id: &str) -> egui::Vec2 {
+    let canvas = canvas_element(canvas_id).unwrap();
+    let pixels_per_point = native_pixels_per_point();
+    egui::vec2(
+        canvas.width() as f32 / pixels_per_point,
+        canvas.height() as f32 / pixels_per_point,
+    )
+}
+
+pub fn resize_canvas_to_screen_size(canvas_id: &str, max_size_points: egui::Vec2) -> Option<()> {
+    let canvas = canvas_element(canvas_id)?;
+    let parent = canvas.parent_element()?;
+
+    let width = parent.scroll_width();
+    let height = parent.scroll_height();
+
+    let canvas_real_size = Vec2 {
+        x: width as f32,
+        y: height as f32,
+    };
+
+    if width <= 0 || height <= 0 {
+        tracing::error!("egui canvas parent size is {}x{}. Try adding `html, body {{ height: 100%; width: 100% }}` to your CSS!", width, height);
+    }
+
+    let pixels_per_point = native_pixels_per_point();
+
+    let max_size_pixels = pixels_per_point * max_size_points;
+
+    let canvas_size_pixels = pixels_per_point * canvas_real_size;
+    let canvas_size_pixels = canvas_size_pixels.min(max_size_pixels);
+    let canvas_size_points = canvas_size_pixels / pixels_per_point;
+
+    // Make sure that the height and width are always even numbers.
+    // otherwise, the page renders blurry on some platforms.
+    // See https://github.com/emilk/egui/issues/103
+    fn round_to_even(v: f32) -> f32 {
+        (v / 2.0).round() * 2.0
+    }
+
+    canvas
+        .style()
+        .set_property(
+            "width",
+            &format!("{}px", round_to_even(canvas_size_points.x)),
+        )
+        .ok()?;
+    canvas
+        .style()
+        .set_property(
+            "height",
+            &format!("{}px", round_to_even(canvas_size_points.y)),
+        )
+        .ok()?;
+    canvas.set_width(round_to_even(canvas_size_pixels.x) as u32);
+    canvas.set_height(round_to_even(canvas_size_pixels.y) as u32);
+
+    Some(())
+}
+
+// ----------------------------------------------------------------------------
+
+pub fn set_cursor_icon(cursor: egui::CursorIcon) -> Option<()> {
+    let document = web_sys::window()?.document()?;
+    document
+        .body()?
+        .style()
+        .set_property("cursor", cursor_web_name(cursor))
+        .ok()
+}
+
+#[cfg(web_sys_unstable_apis)]
+pub fn set_clipboard_text(s: &str) {
+    if let Some(window) = web_sys::window() {
+        if let Some(clipboard) = window.navigator().clipboard() {
+            let promise = clipboard.write_text(s);
+            let future = wasm_bindgen_futures::JsFuture::from(promise);
+            let future = async move {
+                if let Err(err) = future.await {
+                    tracing::error!("Copy/cut action denied: {:?}", err);
+                }
+            };
+            wasm_bindgen_futures::spawn_local(future);
+        }
+    }
+}
+
+fn cursor_web_name(cursor: egui::CursorIcon) -> &'static str {
+    match cursor {
+        egui::CursorIcon::Alias => "alias",
+        egui::CursorIcon::AllScroll => "all-scroll",
+        egui::CursorIcon::Cell => "cell",
+        egui::CursorIcon::ContextMenu => "context-menu",
+        egui::CursorIcon::Copy => "copy",
+        egui::CursorIcon::Crosshair => "crosshair",
+        egui::CursorIcon::Default => "default",
+        egui::CursorIcon::Grab => "grab",
+        egui::CursorIcon::Grabbing => "grabbing",
+        egui::CursorIcon::Help => "help",
+        egui::CursorIcon::Move => "move",
+        egui::CursorIcon::NoDrop => "no-drop",
+        egui::CursorIcon::None => "none",
+        egui::CursorIcon::NotAllowed => "not-allowed",
+        egui::CursorIcon::PointingHand => "pointer",
+        egui::CursorIcon::Progress => "progress",
+        egui::CursorIcon::ResizeHorizontal => "ew-resize",
+        egui::CursorIcon::ResizeNeSw => "nesw-resize",
+        egui::CursorIcon::ResizeNwSe => "nwse-resize",
+        egui::CursorIcon::ResizeVertical => "ns-resize",
+
+        egui::CursorIcon::ResizeEast => "e-resize",
+        egui::CursorIcon::ResizeSouthEast => "se-resize",
+        egui::CursorIcon::ResizeSouth => "s-resize",
+        egui::CursorIcon::ResizeSouthWest => "sw-resize",
+        egui::CursorIcon::ResizeWest => "w-resize",
+        egui::CursorIcon::ResizeNorthWest => "nw-resize",
+        egui::CursorIcon::ResizeNorth => "n-resize",
+        egui::CursorIcon::ResizeNorthEast => "ne-resize",
+        egui::CursorIcon::ResizeColumn => "col-resize",
+        egui::CursorIcon::ResizeRow => "row-resize",
+
+        egui::CursorIcon::Text => "text",
+        egui::CursorIcon::VerticalText => "vertical-text",
+        egui::CursorIcon::Wait => "wait",
+        egui::CursorIcon::ZoomIn => "zoom-in",
+        egui::CursorIcon::ZoomOut => "zoom-out",
+    }
+}
+
+pub fn open_url(url: &str, new_tab: bool) -> Option<()> {
+    let name = if new_tab { "_blank" } else { "_self" };
+
+    web_sys::window()?
+        .open_with_url_and_target(url, name)
+        .ok()?;
+    Some(())
+}
+
+/// e.g. "#fragment" part of "www.example.com/index.html#fragment",
+///
+/// Percent decoded
+pub fn location_hash() -> String {
+    percent_decode(
+        &web_sys::window()
+            .unwrap()
+            .location()
+            .hash()
+            .unwrap_or_default(),
+    )
+}
+
+pub fn percent_decode(s: &str) -> String {
+    percent_encoding::percent_decode_str(s)
+        .decode_utf8_lossy()
+        .to_string()
+}

crates/eframe/src/web/screen_reader.rs

@@ -1,25 +1,26 @@
 pub struct ScreenReader {
-    #[cfg(feature = "screen_reader")]
+    #[cfg(feature = "tts")]
     tts: Option<tts::Tts>,
 }
 
-#[cfg(not(feature = "screen_reader"))]
+#[cfg(not(feature = "tts"))]
+#[allow(clippy::derivable_impls)] // False positive
 impl Default for ScreenReader {
     fn default() -> Self {
         Self {}
     }
 }
 
-#[cfg(feature = "screen_reader")]
+#[cfg(feature = "tts")]
 impl Default for ScreenReader {
     fn default() -> Self {
         let tts = match tts::Tts::default() {
             Ok(screen_reader) => {
-                eprintln!("Initialized screen reader.");
+                tracing::debug!("Initialized screen reader.");
                 Some(screen_reader)
             }
             Err(err) => {
-                eprintln!("Failed to load screen reader: {}", err);
+                tracing::warn!("Failed to load screen reader: {}", err);
                 None
             }
         };
@@ -28,20 +29,20 @@ impl Default for ScreenReader {
 }
 
 impl ScreenReader {
-    #[cfg(not(feature = "screen_reader"))]
+    #[cfg(not(feature = "tts"))]
     #[allow(clippy::unused_self)]
     pub fn speak(&mut self, _text: &str) {}
 
-    #[cfg(feature = "screen_reader")]
+    #[cfg(feature = "tts")]
     pub fn speak(&mut self, text: &str) {
         if text.is_empty() {
             return;
         }
         if let Some(tts) = &mut self.tts {
-            eprintln!("Speaking: {:?}", text);
+            tracing::debug!("Speaking: {:?}", text);
             let interrupt = true;
             if let Err(err) = tts.speak(text, interrupt) {
-                eprintln!("Failed to read: {}", err);
+                tracing::warn!("Failed to read: {}", err);
             }
         }
     }

crates/eframe/src/web/storage.rs

@@ -0,0 +1,43 @@
+fn local_storage() -> Option<web_sys::Storage> {
+    web_sys::window()?.local_storage().ok()?
+}
+
+pub fn local_storage_get(key: &str) -> Option<String> {
+    local_storage().map(|storage| storage.get_item(key).ok())??
+}
+
+pub fn local_storage_set(key: &str, value: &str) {
+    local_storage().map(|storage| storage.set_item(key, value));
+}
+
+#[cfg(feature = "persistence")]
+pub fn load_memory(ctx: &egui::Context) {
+    if let Some(memory_string) = local_storage_get("egui_memory_ron") {
+        match ron::from_str(&memory_string) {
+            Ok(memory) => {
+                ctx.memory_mut(|m| *m = memory);
+            }
+            Err(err) => {
+                tracing::error!("Failed to parse memory RON: {}", err);
+            }
+        }
+    }
+}
+
+#[cfg(not(feature = "persistence"))]
+pub fn load_memory(_: &egui::Context) {}
+
+#[cfg(feature = "persistence")]
+pub fn save_memory(ctx: &egui::Context) {
+    match ctx.memory(|mem| ron::to_string(mem)) {
+        Ok(ron) => {
+            local_storage_set("egui_memory_ron", &ron);
+        }
+        Err(err) => {
+            tracing::error!("Failed to serialize memory as RON: {}", err);
+        }
+    }
+}
+
+#[cfg(not(feature = "persistence"))]
+pub fn save_memory(_: &egui::Context) {}

crates/eframe/src/web/text_agent.rs

@@ -0,0 +1,225 @@
+//! The text agent is an `<input>` element used to trigger
+//! mobile keyboard and IME input.
+
+use super::{canvas_element, AppRunner, AppRunnerContainer};
+use egui::mutex::MutexGuard;
+use std::cell::Cell;
+use std::rc::Rc;
+use wasm_bindgen::prelude::*;
+
+static AGENT_ID: &str = "egui_text_agent";
+
+pub fn text_agent() -> web_sys::HtmlInputElement {
+    web_sys::window()
+        .unwrap()
+        .document()
+        .unwrap()
+        .get_element_by_id(AGENT_ID)
+        .unwrap()
+        .dyn_into()
+        .unwrap()
+}
+
+/// Text event handler,
+pub fn install_text_agent(runner_container: &mut AppRunnerContainer) -> Result<(), JsValue> {
+    let window = web_sys::window().unwrap();
+    let document = window.document().unwrap();
+    let body = document.body().expect("document should have a body");
+    let input = document
+        .create_element("input")?
+        .dyn_into::<web_sys::HtmlInputElement>()?;
+    let input = std::rc::Rc::new(input);
+    input.set_id(AGENT_ID);
+    let is_composing = Rc::new(Cell::new(false));
+    {
+        let style = input.style();
+        // Transparent
+        style.set_property("opacity", "0").unwrap();
+        // Hide under canvas
+        style.set_property("z-index", "-1").unwrap();
+    }
+    // Set size as small as possible, in case user may click on it.
+    input.set_size(1);
+    input.set_autofocus(true);
+    input.set_hidden(true);
+
+    // When IME is off
+    runner_container.add_event_listener(&input, "input", {
+        let input_clone = input.clone();
+        let is_composing = is_composing.clone();
+
+        move |_event: web_sys::InputEvent, mut runner_lock| {
+            let text = input_clone.value();
+            if !text.is_empty() && !is_composing.get() {
+                input_clone.set_value("");
+                runner_lock.input.raw.events.push(egui::Event::Text(text));
+                runner_lock.needs_repaint.repaint_asap();
+            }
+        }
+    })?;
+
+    {
+        // When IME is on, handle composition event
+        runner_container.add_event_listener(&input, "compositionstart", {
+            let input_clone = input.clone();
+            let is_composing = is_composing.clone();
+
+            move |_event: web_sys::CompositionEvent, mut runner_lock: MutexGuard<'_, AppRunner>| {
+                is_composing.set(true);
+                input_clone.set_value("");
+
+                runner_lock
+                    .input
+                    .raw
+                    .events
+                    .push(egui::Event::CompositionStart);
+                runner_lock.needs_repaint.repaint_asap();
+            }
+        })?;
+
+        runner_container.add_event_listener(
+            &input,
+            "compositionupdate",
+            move |event: web_sys::CompositionEvent, mut runner_lock: MutexGuard<'_, AppRunner>| {
+                if let Some(event) = event.data().map(egui::Event::CompositionUpdate) {
+                    runner_lock.input.raw.events.push(event);
+                    runner_lock.needs_repaint.repaint_asap();
+                }
+            },
+        )?;
+
+        runner_container.add_event_listener(&input, "compositionend", {
+            let input_clone = input.clone();
+
+            move |event: web_sys::CompositionEvent, mut runner_lock: MutexGuard<'_, AppRunner>| {
+                is_composing.set(false);
+                input_clone.set_value("");
+
+                if let Some(event) = event.data().map(egui::Event::CompositionEnd) {
+                    runner_lock.input.raw.events.push(event);
+                    runner_lock.needs_repaint.repaint_asap();
+                }
+            }
+        })?;
+    }
+
+    // When input lost focus, focus on it again.
+    // It is useful when user click somewhere outside canvas.
+    runner_container.add_event_listener(
+        &input,
+        "focusout",
+        move |_event: web_sys::MouseEvent, _| {
+            // Delay 10 ms, and focus again.
+            let func = js_sys::Function::new_no_args(&format!(
+                "document.getElementById('{}').focus()",
+                AGENT_ID
+            ));
+            window
+                .set_timeout_with_callback_and_timeout_and_arguments_0(&func, 10)
+                .unwrap();
+        },
+    )?;
+
+    body.append_child(&input)?;
+
+    Ok(())
+}
+
+/// Focus or blur text agent to toggle mobile keyboard.
+pub fn update_text_agent(runner: MutexGuard<'_, AppRunner>) -> Option<()> {
+    use web_sys::HtmlInputElement;
+    let window = web_sys::window()?;
+    let document = window.document()?;
+    let input: HtmlInputElement = document.get_element_by_id(AGENT_ID)?.dyn_into().unwrap();
+    let canvas_style = canvas_element(runner.canvas_id())?.style();
+
+    if runner.mutable_text_under_cursor {
+        let is_already_editing = input.hidden();
+        if is_already_editing {
+            input.set_hidden(false);
+            input.focus().ok()?;
+
+            // Move up canvas so that text edit is shown at ~30% of screen height.
+            // Only on touch screens, when keyboard popups.
+            if let Some(latest_touch_pos) = runner.input.latest_touch_pos {
+                let window_height = window.inner_height().ok()?.as_f64()? as f32;
+                let current_rel = latest_touch_pos.y / window_height;
+
+                // estimated amount of screen covered by keyboard
+                let keyboard_fraction = 0.5;
+
+                if current_rel > keyboard_fraction {
+                    // below the keyboard
+
+                    let target_rel = 0.3;
+
+                    // Note: `delta` is negative, since we are moving the canvas UP
+                    let delta = target_rel - current_rel;
+
+                    let delta = delta.max(-keyboard_fraction); // Don't move it crazy much
+
+                    let new_pos_percent = format!("{}%", (delta * 100.0).round());
+
+                    canvas_style.set_property("position", "absolute").ok()?;
+                    canvas_style.set_property("top", &new_pos_percent).ok()?;
+                }
+            }
+        }
+    } else {
+        // Drop runner lock
+        drop(runner);
+
+        // Holding the runner lock while calling input.blur() causes a panic.
+        // This is most probably caused by the browser running the event handler
+        // for the triggered blur event synchronously, meaning that the mutex
+        // lock does not get dropped by the time another event handler is called.
+        //
+        // Why this didn't exist before #1290 is a mystery to me, but it exists now
+        // and this apparently is the fix for it
+        //
+        // ¯\_(ツ)_/¯ - @DusterTheFirst
+        input.blur().ok()?;
+
+        input.set_hidden(true);
+        canvas_style.set_property("position", "absolute").ok()?;
+        canvas_style.set_property("top", "0%").ok()?; // move back to normal position
+    }
+    Some(())
+}
+
+/// If context is running under mobile device?
+fn is_mobile() -> Option<bool> {
+    const MOBILE_DEVICE: [&str; 6] = ["Android", "iPhone", "iPad", "iPod", "webOS", "BlackBerry"];
+
+    let user_agent = web_sys::window()?.navigator().user_agent().ok()?;
+    let is_mobile = MOBILE_DEVICE.iter().any(|&name| user_agent.contains(name));
+    Some(is_mobile)
+}
+
+// Move text agent to text cursor's position, on desktop/laptop,
+// candidate window moves following text element (agent),
+// so it appears that the IME candidate window moves with text cursor.
+// On mobile devices, there is no need to do that.
+pub fn move_text_cursor(cursor: Option<egui::Pos2>, canvas_id: &str) -> Option<()> {
+    let style = text_agent().style();
+    // Note: movint agent on mobile devices will lead to unpredictable scroll.
+    if is_mobile() == Some(false) {
+        cursor.as_ref().and_then(|&egui::Pos2 { x, y }| {
+            let canvas = canvas_element(canvas_id)?;
+            let bounding_rect = text_agent().get_bounding_client_rect();
+            let y = (y + (canvas.scroll_top() + canvas.offset_top()) as f32)
+                .min(canvas.client_height() as f32 - bounding_rect.height() as f32);
+            let x = x + (canvas.scroll_left() + canvas.offset_left()) as f32;
+            // Canvas is translated 50% horizontally in html.
+            let x = (x - canvas.offset_width() as f32 / 2.0)
+                .min(canvas.client_width() as f32 - bounding_rect.width() as f32);
+            style.set_property("position", "absolute").ok()?;
+            style.set_property("top", &format!("{}px", y)).ok()?;
+            style.set_property("left", &format!("{}px", x)).ok()
+        })
+    } else {
+        style.set_property("position", "absolute").ok()?;
+        style.set_property("top", "0px").ok()?;
+        style.set_property("left", "0px").ok()
+    }
+}

crates/eframe/src/web/web_painter.rs

@@ -0,0 +1,29 @@
+use wasm_bindgen::JsValue;
+
+/// Renderer for a browser canvas.
+/// As of writing we're not allowing to decide on the painter at runtime,
+/// therefore this trait is merely there for specifying and documenting the interface.
+pub(crate) trait WebPainter {
+    // Create a new web painter targeting a given canvas.
+    // fn new(canvas_id: &str, options: &WebOptions) -> Result<Self, String>
+    // where
+    //     Self: Sized;
+
+    /// Id of the canvas in use.
+    fn canvas_id(&self) -> &str;
+
+    /// Maximum size of a texture in one direction.
+    fn max_texture_side(&self) -> usize;
+
+    /// Update all internal textures and paint gui.
+    fn paint_and_update_textures(
+        &mut self,
+        clear_color: [f32; 4],
+        clipped_primitives: &[egui::ClippedPrimitive],
+        pixels_per_point: f32,
+        textures_delta: &egui::TexturesDelta,
+    ) -> Result<(), JsValue>;
+
+    /// Destroy all resources.
+    fn destroy(&mut self);
+}

crates/eframe/src/web/web_painter_glow.rs

@@ -0,0 +1,184 @@
+use wasm_bindgen::JsCast;
+use wasm_bindgen::JsValue;
+use web_sys::HtmlCanvasElement;
+
+use egui_glow::glow;
+
+use crate::{WebGlContextOption, WebOptions};
+
+use super::web_painter::WebPainter;
+
+pub(crate) struct WebPainterGlow {
+    canvas: HtmlCanvasElement,
+    canvas_id: String,
+    painter: egui_glow::Painter,
+}
+
+impl WebPainterGlow {
+    pub fn gl(&self) -> &std::sync::Arc<glow::Context> {
+        self.painter.gl()
+    }
+
+    pub async fn new(canvas_id: &str, options: &WebOptions) -> Result<Self, String> {
+        let canvas = super::canvas_element_or_die(canvas_id);
+
+        let (gl, shader_prefix) =
+            init_glow_context_from_canvas(&canvas, options.webgl_context_option)?;
+        let gl = std::sync::Arc::new(gl);
+
+        let painter = egui_glow::Painter::new(gl, shader_prefix, None)
+            .map_err(|error| format!("Error starting glow painter: {}", error))?;
+
+        Ok(Self {
+            canvas,
+            canvas_id: canvas_id.to_owned(),
+            painter,
+        })
+    }
+}
+
+impl WebPainter for WebPainterGlow {
+    fn max_texture_side(&self) -> usize {
+        self.painter.max_texture_side()
+    }
+
+    fn canvas_id(&self) -> &str {
+        &self.canvas_id
+    }
+
+    fn paint_and_update_textures(
+        &mut self,
+        clear_color: [f32; 4],
+        clipped_primitives: &[egui::ClippedPrimitive],
+        pixels_per_point: f32,
+        textures_delta: &egui::TexturesDelta,
+    ) -> Result<(), JsValue> {
+        let canvas_dimension = [self.canvas.width(), self.canvas.height()];
+
+        for (id, image_delta) in &textures_delta.set {
+            self.painter.set_texture(*id, image_delta);
+        }
+
+        egui_glow::painter::clear(self.painter.gl(), canvas_dimension, clear_color);
+        self.painter
+            .paint_primitives(canvas_dimension, pixels_per_point, clipped_primitives);
+
+        for &id in &textures_delta.free {
+            self.painter.free_texture(id);
+        }
+
+        Ok(())
+    }
+
+    fn destroy(&mut self) {
+        self.painter.destroy();
+    }
+}
+
+/// Returns glow context and shader prefix.
+fn init_glow_context_from_canvas(
+    canvas: &HtmlCanvasElement,
+    options: WebGlContextOption,
+) -> Result<(glow::Context, &'static str), String> {
+    let result = match options {
+        // Force use WebGl1
+        WebGlContextOption::WebGl1 => init_webgl1(canvas),
+        // Force use WebGl2
+        WebGlContextOption::WebGl2 => init_webgl2(canvas),
+        // Trying WebGl2 first
+        WebGlContextOption::BestFirst => init_webgl2(canvas).or_else(|| init_webgl1(canvas)),
+        // Trying WebGl1 first (useful for testing).
+        WebGlContextOption::CompatibilityFirst => {
+            init_webgl1(canvas).or_else(|| init_webgl2(canvas))
+        }
+    };
+
+    if let Some(result) = result {
+        Ok(result)
+    } else {
+        Err("WebGL isn't supported".into())
+    }
+}
+
+fn init_webgl1(canvas: &HtmlCanvasElement) -> Option<(glow::Context, &'static str)> {
+    let gl1_ctx = canvas
+        .get_context("webgl")
+        .expect("Failed to query about WebGL2 context");
+
+    let gl1_ctx = gl1_ctx?;
+    tracing::debug!("WebGL1 selected.");
+
+    let gl1_ctx = gl1_ctx
+        .dyn_into::<web_sys::WebGlRenderingContext>()
+        .unwrap();
+
+    let shader_prefix = if webgl1_requires_brightening(&gl1_ctx) {
+        tracing::debug!("Enabling webkitGTK brightening workaround.");
+        "#define APPLY_BRIGHTENING_GAMMA"
+    } else {
+        ""
+    };
+
+    let gl = glow::Context::from_webgl1_context(gl1_ctx);
+
+    Some((gl, shader_prefix))
+}
+
+fn init_webgl2(canvas: &HtmlCanvasElement) -> Option<(glow::Context, &'static str)> {
+    let gl2_ctx = canvas
+        .get_context("webgl2")
+        .expect("Failed to query about WebGL2 context");
+
+    let gl2_ctx = gl2_ctx?;
+    tracing::debug!("WebGL2 selected.");
+
+    let gl2_ctx = gl2_ctx
+        .dyn_into::<web_sys::WebGl2RenderingContext>()
+        .unwrap();
+    let gl = glow::Context::from_webgl2_context(gl2_ctx);
+    let shader_prefix = "";
+
+    Some((gl, shader_prefix))
+}
+
+fn webgl1_requires_brightening(gl: &web_sys::WebGlRenderingContext) -> bool {
+    // See https://github.com/emilk/egui/issues/794
+
+    // detect WebKitGTK
+
+    // WebKitGTK use WebKit default unmasked vendor and renderer
+    // but safari use same vendor and renderer
+    // so exclude "Mac OS X" user-agent.
+    let user_agent = web_sys::window().unwrap().navigator().user_agent().unwrap();
+    !user_agent.contains("Mac OS X") && is_safari_and_webkit_gtk(gl)
+}
+
+/// detecting Safari and `webkitGTK`.
+///
+/// Safari and `webkitGTK` use unmasked renderer :Apple GPU
+///
+/// If we detect safari or `webkitGTKs` returns true.
+///
+/// This function used to avoid displaying linear color with `sRGB` supported systems.
+fn is_safari_and_webkit_gtk(gl: &web_sys::WebGlRenderingContext) -> bool {
+    // This call produces a warning in Firefox ("WEBGL_debug_renderer_info is deprecated in Firefox and will be removed.")
+    // but unless we call it we get errors in Chrome when we call `get_parameter` below.
+    // TODO(emilk): do something smart based on user agent?
+    if gl
+        .get_extension("WEBGL_debug_renderer_info")
+        .unwrap()
+        .is_some()
+    {
+        if let Ok(renderer) =
+            gl.get_parameter(web_sys::WebglDebugRendererInfo::UNMASKED_RENDERER_WEBGL)
+        {
+            if let Some(renderer) = renderer.as_string() {
+                if renderer.contains("Apple") {
+                    return true;
+                }
+            }
+        }
+    }
+
+    false
+}

crates/eframe/src/web/web_painter_wgpu.rs

@@ -0,0 +1,282 @@
+use std::sync::Arc;
+
+use wasm_bindgen::JsValue;
+use web_sys::HtmlCanvasElement;
+
+use egui::mutex::RwLock;
+use egui_wgpu::{renderer::ScreenDescriptor, RenderState, SurfaceErrorAction};
+
+use crate::WebOptions;
+
+use super::web_painter::WebPainter;
+
+pub(crate) struct WebPainterWgpu {
+    canvas: HtmlCanvasElement,
+    canvas_id: String,
+    surface: wgpu::Surface,
+    surface_configuration: wgpu::SurfaceConfiguration,
+    limits: wgpu::Limits,
+    render_state: Option<RenderState>,
+    on_surface_error: Arc<dyn Fn(wgpu::SurfaceError) -> SurfaceErrorAction>,
+    depth_format: Option<wgpu::TextureFormat>,
+    depth_texture_view: Option<wgpu::TextureView>,
+}
+
+impl WebPainterWgpu {
+    #[allow(unused)] // only used if `wgpu` is the only active feature.
+    pub fn render_state(&self) -> Option<RenderState> {
+        self.render_state.clone()
+    }
+
+    pub fn generate_depth_texture_view(
+        &self,
+        render_state: &RenderState,
+        width_in_pixels: u32,
+        height_in_pixels: u32,
+    ) -> Option<wgpu::TextureView> {
+        let device = &render_state.device;
+        self.depth_format.map(|depth_format| {
+            device
+                .create_texture(&wgpu::TextureDescriptor {
+                    label: Some("egui_depth_texture"),
+                    size: wgpu::Extent3d {
+                        width: width_in_pixels,
+                        height: height_in_pixels,
+                        depth_or_array_layers: 1,
+                    },
+                    mip_level_count: 1,
+                    sample_count: 1,
+                    dimension: wgpu::TextureDimension::D2,
+                    format: depth_format,
+                    usage: wgpu::TextureUsages::RENDER_ATTACHMENT,
+                    view_formats: &[depth_format],
+                })
+                .create_view(&wgpu::TextureViewDescriptor::default())
+        })
+    }
+
+    #[allow(unused)] // only used if `wgpu` is the only active feature.
+    pub async fn new(canvas_id: &str, options: &WebOptions) -> Result<Self, String> {
+        tracing::debug!("Creating wgpu painter");
+
+        let canvas = super::canvas_element_or_die(canvas_id);
+
+        let instance = wgpu::Instance::new(wgpu::InstanceDescriptor {
+            backends: options.wgpu_options.backends,
+            dx12_shader_compiler: Default::default(),
+        });
+        let surface = instance
+            .create_surface_from_canvas(&canvas)
+            .map_err(|err| format!("failed to create wgpu surface: {err}"))?;
+
+        let adapter = instance
+            .request_adapter(&wgpu::RequestAdapterOptions {
+                power_preference: options.wgpu_options.power_preference,
+                force_fallback_adapter: false,
+                compatible_surface: None,
+            })
+            .await
+            .ok_or_else(|| "No suitable GPU adapters found on the system".to_owned())?;
+
+        let (device, queue) = adapter
+            .request_device(
+                &options.wgpu_options.device_descriptor,
+                None, // Capture doesn't work in the browser environment.
+            )
+            .await
+            .map_err(|err| format!("Failed to find wgpu device: {}", err))?;
+
+        let target_format =
+            egui_wgpu::preferred_framebuffer_format(&surface.get_capabilities(&adapter).formats);
+
+        let depth_format = options.wgpu_options.depth_format;
+        let renderer = egui_wgpu::Renderer::new(&device, target_format, depth_format, 1);
+        let render_state = RenderState {
+            device: Arc::new(device),
+            queue: Arc::new(queue),
+            target_format,
+            renderer: Arc::new(RwLock::new(renderer)),
+        };
+
+        let surface_configuration = wgpu::SurfaceConfiguration {
+            usage: wgpu::TextureUsages::RENDER_ATTACHMENT,
+            format: target_format,
+            width: 0,
+            height: 0,
+            present_mode: options.wgpu_options.present_mode,
+            alpha_mode: wgpu::CompositeAlphaMode::Auto,
+            view_formats: vec![target_format],
+        };
+
+        tracing::debug!("wgpu painter initialized.");
+
+        Ok(Self {
+            canvas,
+            canvas_id: canvas_id.to_owned(),
+            render_state: Some(render_state),
+            surface,
+            surface_configuration,
+            depth_format,
+            depth_texture_view: None,
+            limits: options.wgpu_options.device_descriptor.limits.clone(),
+            on_surface_error: options.wgpu_options.on_surface_error.clone(),
+        })
+    }
+}
+
+impl WebPainter for WebPainterWgpu {
+    fn canvas_id(&self) -> &str {
+        &self.canvas_id
+    }
+
+    fn max_texture_side(&self) -> usize {
+        self.limits.max_texture_dimension_2d as _
+    }
+
+    fn paint_and_update_textures(
+        &mut self,
+        clear_color: [f32; 4],
+        clipped_primitives: &[egui::ClippedPrimitive],
+        pixels_per_point: f32,
+        textures_delta: &egui::TexturesDelta,
+    ) -> Result<(), JsValue> {
+        let size_in_pixels = [self.canvas.width(), self.canvas.height()];
+
+        let render_state = if let Some(render_state) = &self.render_state {
+            render_state
+        } else {
+            return Err(JsValue::from_str(
+                "Can't paint, wgpu renderer was already disposed",
+            ));
+        };
+
+        let mut encoder =
+            render_state
+                .device
+                .create_command_encoder(&wgpu::CommandEncoderDescriptor {
+                    label: Some("egui_webpainter_paint_and_update_textures"),
+                });
+
+        // Upload all resources for the GPU.
+        let screen_descriptor = ScreenDescriptor {
+            size_in_pixels,
+            pixels_per_point,
+        };
+
+        let user_cmd_bufs = {
+            let mut renderer = render_state.renderer.write();
+            for (id, image_delta) in &textures_delta.set {
+                renderer.update_texture(
+                    &render_state.device,
+                    &render_state.queue,
+                    *id,
+                    image_delta,
+                );
+            }
+
+            renderer.update_buffers(
+                &render_state.device,
+                &render_state.queue,
+                &mut encoder,
+                clipped_primitives,
+                &screen_descriptor,
+            )
+        };
+
+        // Resize surface if needed
+        let is_zero_sized_surface = size_in_pixels[0] == 0 || size_in_pixels[1] == 0;
+        let frame = if is_zero_sized_surface {
+            None
+        } else {
+            if size_in_pixels[0] != self.surface_configuration.width
+                || size_in_pixels[1] != self.surface_configuration.height
+            {
+                self.surface_configuration.width = size_in_pixels[0];
+                self.surface_configuration.height = size_in_pixels[1];
+                self.surface
+                    .configure(&render_state.device, &self.surface_configuration);
+                self.depth_texture_view = self.generate_depth_texture_view(
+                    render_state,
+                    size_in_pixels[0],
+                    size_in_pixels[1],
+                );
+            }
+
+            let frame = match self.surface.get_current_texture() {
+                Ok(frame) => frame,
+                #[allow(clippy::single_match_else)]
+                Err(e) => match (*self.on_surface_error)(e) {
+                    SurfaceErrorAction::RecreateSurface => {
+                        self.surface
+                            .configure(&render_state.device, &self.surface_configuration);
+                        return Ok(());
+                    }
+                    SurfaceErrorAction::SkipFrame => {
+                        return Ok(());
+                    }
+                },
+            };
+
+            {
+                let renderer = render_state.renderer.read();
+                let frame_view = frame
+                    .texture
+                    .create_view(&wgpu::TextureViewDescriptor::default());
+                let mut render_pass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
+                    color_attachments: &[Some(wgpu::RenderPassColorAttachment {
+                        view: &frame_view,
+                        resolve_target: None,
+                        ops: wgpu::Operations {
+                            load: wgpu::LoadOp::Clear(wgpu::Color {
+                                r: clear_color[0] as f64,
+                                g: clear_color[1] as f64,
+                                b: clear_color[2] as f64,
+                                a: clear_color[3] as f64,
+                            }),
+                            store: true,
+                        },
+                    })],
+                    depth_stencil_attachment: self.depth_texture_view.as_ref().map(|view| {
+                        wgpu::RenderPassDepthStencilAttachment {
+                            view,
+                            depth_ops: Some(wgpu::Operations {
+                                load: wgpu::LoadOp::Clear(1.0),
+                                store: false,
+                            }),
+                            stencil_ops: None,
+                        }
+                    }),
+                    label: Some("egui_render"),
+                });
+
+                renderer.render(&mut render_pass, clipped_primitives, &screen_descriptor);
+            }
+
+            Some(frame)
+        };
+
+        {
+            let mut renderer = render_state.renderer.write();
+            for id in &textures_delta.free {
+                renderer.free_texture(id);
+            }
+        }
+
+        // Submit the commands: both the main buffer and user-defined ones.
+        render_state.queue.submit(
+            user_cmd_bufs
+                .into_iter()
+                .chain(std::iter::once(encoder.finish())),
+        );
+
+        if let Some(frame) = frame {
+            frame.present();
+        }
+
+        Ok(())
+    }
+
+    fn destroy(&mut self) {
+        self.render_state = None;
+    }
+}

crates/egui-wgpu/CHANGELOG.md

@@ -0,0 +1,37 @@
+# Changelog for egui-wgpu
+All notable changes to the `egui-wgpu` integration will be noted in this file.
+
+
+## Unreleased
+
+
+## 0.21.0 - 2023-02-08
+* Update to `wgpu` 0.15 ([#2629](https://github.com/emilk/egui/pull/2629))
+* Return `Err` instead of panic if we can't find a device ([#2428](https://github.com/emilk/egui/pull/2428)).
+* `winit::Painter::set_window` is now `async` ([#2434](https://github.com/emilk/egui/pull/2434)).
+* `egui-wgpu` now only depends on `epaint` instead of the entire `egui` ([#2438](https://github.com/emilk/egui/pull/2438)).
+* `winit::Painter` now supports transparent backbuffer ([#2684](https://github.com/emilk/egui/pull/2684)).
+
+
+## 0.20.0 - 2022-12-08 - web support
+* Renamed `RenderPass` to `Renderer`.
+* Renamed `RenderPass::execute` to `RenderPass::render`.
+* Renamed `RenderPass::execute_with_renderpass` to `Renderer::render` (replacing existing `Renderer::render`)
+* Reexported `Renderer`.
+* You can now use `egui-wgpu` on web, using WebGL ([#2107](https://github.com/emilk/egui/pull/2107)).
+* `Renderer` no longer handles pass creation and depth buffer creation ([#2136](https://github.com/emilk/egui/pull/2136))
+* `PrepareCallback` now passes `wgpu::CommandEncoder` ([#2136](https://github.com/emilk/egui/pull/2136))
+* `PrepareCallback` can now returns `wgpu::CommandBuffer` that are bundled into a single `wgpu::Queue::submit` call ([#2230](https://github.com/emilk/egui/pull/2230))
+* Only a single vertex & index buffer is now created and resized when necessary (previously, vertex/index buffers were allocated for every mesh) ([#2148](https://github.com/emilk/egui/pull/2148)).
+* `Renderer::update_texture` no longer creates a new `wgpu::Sampler` with every new texture ([#2198](https://github.com/emilk/egui/pull/2198))
+* `Painter`'s instance/device/adapter/surface creation is now configurable via `WgpuConfiguration` ([#2207](https://github.com/emilk/egui/pull/2207))
+* Fix panic on using a depth buffer ([#2316](https://github.com/emilk/egui/pull/2316))
+
+
+## 0.19.0 - 2022-08-20
+* Enables deferred render + surface state initialization for Android ([#1634](https://github.com/emilk/egui/pull/1634)).
+* Make `RenderPass` `Send` and `Sync` ([#1883](https://github.com/emilk/egui/pull/1883)).
+
+
+## 0.18.0 - 2022-05-15
+First published version since moving the code into the `egui` repository from <https://github.com/LU15W1R7H/eww>.

crates/egui-wgpu/Cargo.toml

@@ -0,0 +1,56 @@
+[package]
+name = "egui-wgpu"
+version = "0.21.0"
+description = "Bindings for using egui natively using the wgpu library"
+authors = [
+  "Nils Hasenbanck <nils@hasenbanck.de>",
+  "embotech <opensource@embotech.com>",
+  "Emil Ernerfeldt <emil.ernerfeldt@gmail.com>",
+]
+edition = "2021"
+rust-version = "1.65"
+homepage = "https://github.com/emilk/egui/tree/master/crates/egui-wgpu"
+license = "MIT OR Apache-2.0"
+readme = "README.md"
+repository = "https://github.com/emilk/egui/tree/master/crates/egui-wgpu"
+categories = ["gui", "game-development"]
+keywords = ["wgpu", "egui", "gui", "gamedev"]
+include = [
+  "../LICENSE-APACHE",
+  "../LICENSE-MIT",
+  "**/*.rs",
+  "**/*.wgsl",
+  "Cargo.toml",
+]
+
+[package.metadata.docs.rs]
+all-features = true
+
+
+[features]
+## Enable profiling with the [`puffin`](https://docs.rs/puffin) crate.
+puffin = ["dep:puffin"]
+
+## Enable [`winit`](https://docs.rs/winit) integration.
+winit = ["dep:winit"]
+
+
+[dependencies]
+epaint = { version = "0.21.0", path = "../epaint", default-features = false, features = [
+  "bytemuck",
+] }
+
+bytemuck = "1.7"
+tracing = { version = "0.1", default-features = false, features = ["std"] }
+type-map = "0.5.0"
+wgpu = "0.15.0"
+
+#! ### Optional dependencies
+## Enable this when generating docs.
+document-features = { version = "0.2", optional = true }
+
+winit = { version = "0.28", optional = true }
+
+# Native:
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+puffin = { version = "0.14", optional = true }

crates/egui-wgpu/README.md

@@ -0,0 +1,10 @@
+# egui-wgpu
+
+[![Latest version](https://img.shields.io/crates/v/egui-wgpu.svg)](https://crates.io/crates/egui-wgpu)
+[![Documentation](https://docs.rs/egui-wgpu/badge.svg)](https://docs.rs/egui-wgpu)
+![MIT](https://img.shields.io/badge/license-MIT-blue.svg)
+![Apache](https://img.shields.io/badge/license-Apache-blue.svg)
+
+This crates provides bindings between [`egui`](https://github.com/emilk/egui) and [wgpu](https://crates.io/crates/wgpu).
+
+This was originally hosted at https://github.com/hasenbanck/egui_wgpu_backend

crates/egui-wgpu/src/egui.wgsl

@@ -0,0 +1,91 @@
+// Vertex shader bindings
+
+struct VertexOutput {
+    @location(0) tex_coord: vec2<f32>,
+    @location(1) color: vec4<f32>, // gamma 0-1
+    @builtin(position) position: vec4<f32>,
+};
+
+struct Locals {
+    screen_size: vec2<f32>,
+    // Uniform buffers need to be at least 16 bytes in WebGL.
+    // See https://github.com/gfx-rs/wgpu/issues/2072
+    _padding: vec2<u32>,
+};
+@group(0) @binding(0) var<uniform> r_locals: Locals;
+
+// 0-1 linear  from  0-1 sRGB gamma
+fn linear_from_gamma_rgb(srgb: vec3<f32>) -> vec3<f32> {
+    let cutoff = srgb < vec3<f32>(0.04045);
+    let lower = srgb / vec3<f32>(12.92);
+    let higher = pow((srgb + vec3<f32>(0.055)) / vec3<f32>(1.055), vec3<f32>(2.4));
+    return select(higher, lower, cutoff);
+}
+
+// 0-1 sRGB gamma  from  0-1 linear
+fn gamma_from_linear_rgb(rgb: vec3<f32>) -> vec3<f32> {
+    let cutoff = rgb < vec3<f32>(0.0031308);
+    let lower = rgb * vec3<f32>(12.92);
+    let higher = vec3<f32>(1.055) * pow(rgb, vec3<f32>(1.0 / 2.4)) - vec3<f32>(0.055);
+    return select(higher, lower, cutoff);
+}
+
+// 0-1 sRGBA gamma  from  0-1 linear
+fn gamma_from_linear_rgba(linear_rgba: vec4<f32>) -> vec4<f32> {
+    return vec4<f32>(gamma_from_linear_rgb(linear_rgba.rgb), linear_rgba.a);
+}
+
+// [u8; 4] SRGB as u32 -> [r, g, b, a] in 0.-1
+fn unpack_color(color: u32) -> vec4<f32> {
+    return vec4<f32>(
+        f32(color & 255u),
+        f32((color >> 8u) & 255u),
+        f32((color >> 16u) & 255u),
+        f32((color >> 24u) & 255u),
+    ) / 255.0;
+}
+
+fn position_from_screen(screen_pos: vec2<f32>) -> vec4<f32> {
+    return vec4<f32>(
+        2.0 * screen_pos.x / r_locals.screen_size.x - 1.0,
+        1.0 - 2.0 * screen_pos.y / r_locals.screen_size.y,
+        0.0,
+        1.0,
+    );
+}
+
+@vertex
+fn vs_main(
+    @location(0) a_pos: vec2<f32>,
+    @location(1) a_tex_coord: vec2<f32>,
+    @location(2) a_color: u32,
+) -> VertexOutput {
+    var out: VertexOutput;
+    out.tex_coord = a_tex_coord;
+    out.color = unpack_color(a_color);
+    out.position = position_from_screen(a_pos);
+    return out;
+}
+
+// Fragment shader bindings
+
+@group(1) @binding(0) var r_tex_color: texture_2d<f32>;
+@group(1) @binding(1) var r_tex_sampler: sampler;
+
+@fragment
+fn fs_main_linear_framebuffer(in: VertexOutput) -> @location(0) vec4<f32> {
+    // We always have an sRGB aware texture at the moment.
+    let tex_linear = textureSample(r_tex_color, r_tex_sampler, in.tex_coord);
+    let tex_gamma = gamma_from_linear_rgba(tex_linear);
+    let out_color_gamma = in.color * tex_gamma;
+    return vec4<f32>(linear_from_gamma_rgb(out_color_gamma.rgb), out_color_gamma.a);
+}
+
+@fragment
+fn fs_main_gamma_framebuffer(in: VertexOutput) -> @location(0) vec4<f32> {
+    // We always have an sRGB aware texture at the moment.
+    let tex_linear = textureSample(r_tex_color, r_tex_sampler, in.tex_coord);
+    let tex_gamma = gamma_from_linear_rgba(tex_linear);
+    let out_color_gamma = in.color * tex_gamma;
+    return out_color_gamma;
+}

crates/egui-wgpu/src/lib.rs

@@ -0,0 +1,155 @@
+//! This crates provides bindings between [`egui`](https://github.com/emilk/egui) and [wgpu](https://crates.io/crates/wgpu).
+//!
+//! ## Feature flags
+#![cfg_attr(feature = "document-features", doc = document_features::document_features!())]
+//!
+
+#![allow(unsafe_code)]
+
+pub use wgpu;
+
+/// Low-level painting of [`egui`](https://github.com/emilk/egui) on [`wgpu`].
+pub mod renderer;
+pub use renderer::CallbackFn;
+pub use renderer::Renderer;
+
+/// Module for painting [`egui`](https://github.com/emilk/egui) with [`wgpu`] on [`winit`].
+#[cfg(feature = "winit")]
+pub mod winit;
+
+use std::sync::Arc;
+
+use epaint::mutex::RwLock;
+
+/// Access to the render state for egui.
+#[derive(Clone)]
+pub struct RenderState {
+    pub device: Arc<wgpu::Device>,
+    pub queue: Arc<wgpu::Queue>,
+    pub target_format: wgpu::TextureFormat,
+    pub renderer: Arc<RwLock<Renderer>>,
+}
+
+/// Specifies which action should be taken as consequence of a [`wgpu::SurfaceError`]
+pub enum SurfaceErrorAction {
+    /// Do nothing and skip the current frame.
+    SkipFrame,
+
+    /// Instructs egui to recreate the surface, then skip the current frame.
+    RecreateSurface,
+}
+
+/// Configuration for using wgpu with eframe or the egui-wgpu winit feature.
+#[derive(Clone)]
+pub struct WgpuConfiguration {
+    /// Configuration passed on device request.
+    pub device_descriptor: wgpu::DeviceDescriptor<'static>,
+
+    /// Backends that should be supported (wgpu will pick one of these)
+    pub backends: wgpu::Backends,
+
+    /// Present mode used for the primary surface.
+    pub present_mode: wgpu::PresentMode,
+
+    /// Power preference for the adapter.
+    pub power_preference: wgpu::PowerPreference,
+
+    /// Callback for surface errors.
+    pub on_surface_error: Arc<dyn Fn(wgpu::SurfaceError) -> SurfaceErrorAction>,
+
+    pub depth_format: Option<wgpu::TextureFormat>,
+}
+
+impl Default for WgpuConfiguration {
+    fn default() -> Self {
+        Self {
+            device_descriptor: wgpu::DeviceDescriptor {
+                label: Some("egui wgpu device"),
+                features: wgpu::Features::default(),
+                limits: wgpu::Limits::default(),
+            },
+            backends: wgpu::Backends::PRIMARY | wgpu::Backends::GL,
+            present_mode: wgpu::PresentMode::AutoVsync,
+            power_preference: wgpu::PowerPreference::HighPerformance,
+            depth_format: None,
+
+            on_surface_error: Arc::new(|err| {
+                if err == wgpu::SurfaceError::Outdated {
+                    // This error occurs when the app is minimized on Windows.
+                    // Silently return here to prevent spamming the console with:
+                    // "The underlying surface has changed, and therefore the swap chain must be updated"
+                } else {
+                    tracing::warn!("Dropped frame with error: {err}");
+                }
+                SurfaceErrorAction::SkipFrame
+            }),
+        }
+    }
+}
+
+/// Find the framebuffer format that egui prefers
+pub fn preferred_framebuffer_format(formats: &[wgpu::TextureFormat]) -> wgpu::TextureFormat {
+    for &format in formats {
+        if matches!(
+            format,
+            wgpu::TextureFormat::Rgba8Unorm | wgpu::TextureFormat::Bgra8Unorm
+        ) {
+            return format;
+        }
+    }
+    formats[0] // take the first
+}
+// maybe use this-error?
+#[derive(Debug)]
+pub enum WgpuError {
+    DeviceError(wgpu::RequestDeviceError),
+    SurfaceError(wgpu::CreateSurfaceError),
+}
+
+impl std::fmt::Display for WgpuError {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        std::fmt::Debug::fmt(self, f)
+    }
+}
+
+impl std::error::Error for WgpuError {
+    fn source(&self) -> Option<&(dyn std::error::Error + 'static)> {
+        match self {
+            WgpuError::DeviceError(e) => e.source(),
+            WgpuError::SurfaceError(e) => e.source(),
+        }
+    }
+}
+
+impl From<wgpu::RequestDeviceError> for WgpuError {
+    fn from(e: wgpu::RequestDeviceError) -> Self {
+        Self::DeviceError(e)
+    }
+}
+
+impl From<wgpu::CreateSurfaceError> for WgpuError {
+    fn from(e: wgpu::CreateSurfaceError) -> Self {
+        Self::SurfaceError(e)
+    }
+}
+// ---------------------------------------------------------------------------
+
+/// Profiling macro for feature "puffin"
+macro_rules! profile_function {
+    ($($arg: tt)*) => {
+        #[cfg(feature = "puffin")]
+        #[cfg(not(target_arch = "wasm32"))]
+        puffin::profile_function!($($arg)*);
+    };
+}
+pub(crate) use profile_function;
+
+/// Profiling macro for feature "puffin"
+macro_rules! profile_scope {
+    ($($arg: tt)*) => {
+        #[cfg(feature = "puffin")]
+        #[cfg(not(target_arch = "wasm32"))]
+        puffin::profile_scope!($($arg)*);
+    };
+}
+pub(crate) use profile_scope;

crates/egui-wgpu/src/renderer.rs

@@ -0,0 +1,931 @@
+#![allow(unsafe_code)]
+
+use std::num::NonZeroU64;
+use std::ops::Range;
+use std::{borrow::Cow, collections::HashMap, num::NonZeroU32};
+
+use type_map::concurrent::TypeMap;
+use wgpu;
+use wgpu::util::DeviceExt as _;
+
+use epaint::{emath::NumExt, PaintCallbackInfo, Primitive, Vertex};
+
+/// A callback function that can be used to compose an [`epaint::PaintCallback`] for custom WGPU
+/// rendering.
+///
+/// The callback is composed of two functions: `prepare` and `paint`:
+/// - `prepare` is called every frame before `paint`, and can use the passed-in
+///   [`wgpu::Device`] and [`wgpu::Buffer`] to allocate or modify GPU resources such as buffers.
+/// - `paint` is called after `prepare` and is given access to the [`wgpu::RenderPass`] so
+///   that it can issue draw commands into the same [`wgpu::RenderPass`] that is used for
+///   all other egui elements.
+///
+/// The final argument of both the `prepare` and `paint` callbacks is a the
+/// [`paint_callback_resources`][crate::renderer::Renderer::paint_callback_resources].
+/// `paint_callback_resources` has the same lifetime as the Egui render pass, so it can be used to
+/// store buffers, pipelines, and other information that needs to be accessed during the render
+/// pass.
+///
+/// # Example
+///
+/// See the [`custom3d_wgpu`](https://github.com/emilk/egui/blob/master/crates/egui_demo_app/src/apps/custom3d_wgpu.rs) demo source for a detailed usage example.
+pub struct CallbackFn {
+    prepare: Box<PrepareCallback>,
+    paint: Box<PaintCallback>,
+}
+
+type PrepareCallback = dyn Fn(
+        &wgpu::Device,
+        &wgpu::Queue,
+        &mut wgpu::CommandEncoder,
+        &mut TypeMap,
+    ) -> Vec<wgpu::CommandBuffer>
+    + Sync
+    + Send;
+
+type PaintCallback =
+    dyn for<'a, 'b> Fn(PaintCallbackInfo, &'a mut wgpu::RenderPass<'b>, &'b TypeMap) + Sync + Send;
+
+impl Default for CallbackFn {
+    fn default() -> Self {
+        CallbackFn {
+            prepare: Box::new(|_, _, _, _| Vec::new()),
+            paint: Box::new(|_, _, _| ()),
+        }
+    }
+}
+
+impl CallbackFn {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Set the prepare callback.
+    ///
+    /// The passed-in `CommandEncoder` is egui's and can be used directly to register
+    /// wgpu commands for simple use cases.
+    /// This allows reusing the same [`wgpu::CommandEncoder`] for all callbacks and egui
+    /// rendering itself.
+    ///
+    /// For more complicated use cases, one can also return a list of arbitrary
+    /// `CommandBuffer`s and have complete control over how they get created and fed.
+    /// In particular, this gives an opportunity to parallelize command registration and
+    /// prevents a faulty callback from poisoning the main wgpu pipeline.
+    ///
+    /// When using eframe, the main egui command buffer, as well as all user-defined
+    /// command buffers returned by this function, are guaranteed to all be submitted
+    /// at once in a single call.
+    pub fn prepare<F>(mut self, prepare: F) -> Self
+    where
+        F: Fn(
+                &wgpu::Device,
+                &wgpu::Queue,
+                &mut wgpu::CommandEncoder,
+                &mut TypeMap,
+            ) -> Vec<wgpu::CommandBuffer>
+            + Sync
+            + Send
+            + 'static,
+    {
+        self.prepare = Box::new(prepare) as _;
+        self
+    }
+
+    /// Set the paint callback
+    pub fn paint<F>(mut self, paint: F) -> Self
+    where
+        F: for<'a, 'b> Fn(PaintCallbackInfo, &'a mut wgpu::RenderPass<'b>, &'b TypeMap)
+            + Sync
+            + Send
+            + 'static,
+    {
+        self.paint = Box::new(paint) as _;
+        self
+    }
+}
+
+/// Information about the screen used for rendering.
+pub struct ScreenDescriptor {
+    /// Size of the window in physical pixels.
+    pub size_in_pixels: [u32; 2],
+
+    /// HiDPI scale factor (pixels per point).
+    pub pixels_per_point: f32,
+}
+
+impl ScreenDescriptor {
+    /// size in "logical" points
+    fn screen_size_in_points(&self) -> [f32; 2] {
+        [
+            self.size_in_pixels[0] as f32 / self.pixels_per_point,
+            self.size_in_pixels[1] as f32 / self.pixels_per_point,
+        ]
+    }
+}
+
+/// Uniform buffer used when rendering.
+#[derive(Clone, Copy, Debug, bytemuck::Pod, bytemuck::Zeroable)]
+#[repr(C)]
+struct UniformBuffer {
+    screen_size_in_points: [f32; 2],
+    // Uniform buffers need to be at least 16 bytes in WebGL.
+    // See https://github.com/gfx-rs/wgpu/issues/2072
+    _padding: [u32; 2],
+}
+
+struct SlicedBuffer {
+    buffer: wgpu::Buffer,
+    slices: Vec<Range<wgpu::BufferAddress>>,
+    capacity: wgpu::BufferAddress,
+}
+
+/// Renderer for a egui based GUI.
+pub struct Renderer {
+    pipeline: wgpu::RenderPipeline,
+
+    index_buffer: SlicedBuffer,
+    vertex_buffer: SlicedBuffer,
+
+    uniform_buffer: wgpu::Buffer,
+    uniform_bind_group: wgpu::BindGroup,
+    texture_bind_group_layout: wgpu::BindGroupLayout,
+
+    /// Map of egui texture IDs to textures and their associated bindgroups (texture view +
+    /// sampler). The texture may be None if the TextureId is just a handle to a user-provided
+    /// sampler.
+    textures: HashMap<epaint::TextureId, (Option<wgpu::Texture>, wgpu::BindGroup)>,
+    next_user_texture_id: u64,
+    samplers: HashMap<epaint::textures::TextureOptions, wgpu::Sampler>,
+
+    /// Storage for use by [`epaint::PaintCallback`]'s that need to store resources such as render
+    /// pipelines that must have the lifetime of the renderpass.
+    pub paint_callback_resources: TypeMap,
+}
+
+impl Renderer {
+    /// Creates a renderer for a egui UI.
+    ///
+    /// `output_color_format` should preferably be [`wgpu::TextureFormat::Rgba8Unorm`] or
+    /// [`wgpu::TextureFormat::Bgra8Unorm`], i.e. in gamma-space.
+    pub fn new(
+        device: &wgpu::Device,
+        output_color_format: wgpu::TextureFormat,
+        output_depth_format: Option<wgpu::TextureFormat>,
+        msaa_samples: u32,
+    ) -> Self {
+        crate::profile_function!();
+
+        let shader = wgpu::ShaderModuleDescriptor {
+            label: Some("egui"),
+            source: wgpu::ShaderSource::Wgsl(Cow::Borrowed(include_str!("egui.wgsl"))),
+        };
+        let module = device.create_shader_module(shader);
+
+        let uniform_buffer = device.create_buffer_init(&wgpu::util::BufferInitDescriptor {
+            label: Some("egui_uniform_buffer"),
+            contents: bytemuck::cast_slice(&[UniformBuffer {
+                screen_size_in_points: [0.0, 0.0],
+                _padding: Default::default(),
+            }]),
+            usage: wgpu::BufferUsages::UNIFORM | wgpu::BufferUsages::COPY_DST,
+        });
+
+        let uniform_bind_group_layout =
+            device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
+                label: Some("egui_uniform_bind_group_layout"),
+                entries: &[wgpu::BindGroupLayoutEntry {
+                    binding: 0,
+                    visibility: wgpu::ShaderStages::VERTEX,
+                    ty: wgpu::BindingType::Buffer {
+                        has_dynamic_offset: false,
+                        min_binding_size: NonZeroU64::new(std::mem::size_of::<UniformBuffer>() as _),
+                        ty: wgpu::BufferBindingType::Uniform,
+                    },
+                    count: None,
+                }],
+            });
+
+        let uniform_bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor {
+            label: Some("egui_uniform_bind_group"),
+            layout: &uniform_bind_group_layout,
+            entries: &[wgpu::BindGroupEntry {
+                binding: 0,
+                resource: wgpu::BindingResource::Buffer(wgpu::BufferBinding {
+                    buffer: &uniform_buffer,
+                    offset: 0,
+                    size: None,
+                }),
+            }],
+        });
+
+        let texture_bind_group_layout =
+            device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
+                label: Some("egui_texture_bind_group_layout"),
+                entries: &[
+                    wgpu::BindGroupLayoutEntry {
+                        binding: 0,
+                        visibility: wgpu::ShaderStages::FRAGMENT,
+                        ty: wgpu::BindingType::Texture {
+                            multisampled: false,
+                            sample_type: wgpu::TextureSampleType::Float { filterable: true },
+                            view_dimension: wgpu::TextureViewDimension::D2,
+                        },
+                        count: None,
+                    },
+                    wgpu::BindGroupLayoutEntry {
+                        binding: 1,
+                        visibility: wgpu::ShaderStages::FRAGMENT,
+                        ty: wgpu::BindingType::Sampler(wgpu::SamplerBindingType::Filtering),
+                        count: None,
+                    },
+                ],
+            });
+
+        let pipeline_layout = device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
+            label: Some("egui_pipeline_layout"),
+            bind_group_layouts: &[&uniform_bind_group_layout, &texture_bind_group_layout],
+            push_constant_ranges: &[],
+        });
+
+        let depth_stencil = output_depth_format.map(|format| wgpu::DepthStencilState {
+            format,
+            depth_write_enabled: false,
+            depth_compare: wgpu::CompareFunction::Always,
+            stencil: wgpu::StencilState::default(),
+            bias: wgpu::DepthBiasState::default(),
+        });
+
+        let pipeline = device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
+            label: Some("egui_pipeline"),
+            layout: Some(&pipeline_layout),
+            vertex: wgpu::VertexState {
+                entry_point: "vs_main",
+                module: &module,
+                buffers: &[wgpu::VertexBufferLayout {
+                    array_stride: 5 * 4,
+                    step_mode: wgpu::VertexStepMode::Vertex,
+                    // 0: vec2 position
+                    // 1: vec2 texture coordinates
+                    // 2: uint color
+                    attributes: &wgpu::vertex_attr_array![0 => Float32x2, 1 => Float32x2, 2 => Uint32],
+                }],
+            },
+            primitive: wgpu::PrimitiveState {
+                topology: wgpu::PrimitiveTopology::TriangleList,
+                unclipped_depth: false,
+                conservative: false,
+                cull_mode: None,
+                front_face: wgpu::FrontFace::default(),
+                polygon_mode: wgpu::PolygonMode::default(),
+                strip_index_format: None,
+            },
+            depth_stencil,
+            multisample: wgpu::MultisampleState {
+                alpha_to_coverage_enabled: false,
+                count: msaa_samples,
+                mask: !0,
+            },
+
+            fragment: Some(wgpu::FragmentState {
+                module: &module,
+                entry_point: if output_color_format.describe().srgb {
+                    tracing::warn!("Detected a linear (sRGBA aware) framebuffer {:?}. egui prefers Rgba8Unorm or Bgra8Unorm", output_color_format);
+                    "fs_main_linear_framebuffer"
+                } else {
+                    "fs_main_gamma_framebuffer" // this is what we prefer
+                },
+                targets: &[Some(wgpu::ColorTargetState {
+                    format: output_color_format,
+                    blend: Some(wgpu::BlendState {
+                        color: wgpu::BlendComponent {
+                            src_factor: wgpu::BlendFactor::One,
+                            dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
+                            operation: wgpu::BlendOperation::Add,
+                        },
+                        alpha: wgpu::BlendComponent {
+                            src_factor: wgpu::BlendFactor::OneMinusDstAlpha,
+                            dst_factor: wgpu::BlendFactor::One,
+                            operation: wgpu::BlendOperation::Add,
+                        },
+                    }),
+                    write_mask: wgpu::ColorWrites::ALL,
+                })],
+            }),
+            multiview: None,
+        });
+
+        const VERTEX_BUFFER_START_CAPACITY: wgpu::BufferAddress =
+            (std::mem::size_of::<Vertex>() * 1024) as _;
+        const INDEX_BUFFER_START_CAPACITY: wgpu::BufferAddress =
+            (std::mem::size_of::<u32>() * 1024 * 3) as _;
+
+        Self {
+            pipeline,
+            vertex_buffer: SlicedBuffer {
+                buffer: create_vertex_buffer(device, VERTEX_BUFFER_START_CAPACITY),
+                slices: Vec::with_capacity(64),
+                capacity: VERTEX_BUFFER_START_CAPACITY,
+            },
+            index_buffer: SlicedBuffer {
+                buffer: create_index_buffer(device, INDEX_BUFFER_START_CAPACITY),
+                slices: Vec::with_capacity(64),
+                capacity: INDEX_BUFFER_START_CAPACITY,
+            },
+            uniform_buffer,
+            uniform_bind_group,
+            texture_bind_group_layout,
+            textures: HashMap::new(),
+            next_user_texture_id: 0,
+            samplers: HashMap::new(),
+            paint_callback_resources: TypeMap::default(),
+        }
+    }
+
+    /// Executes the egui renderer onto an existing wgpu renderpass.
+    pub fn render<'rp>(
+        &'rp self,
+        render_pass: &mut wgpu::RenderPass<'rp>,
+        paint_jobs: &[epaint::ClippedPrimitive],
+        screen_descriptor: &ScreenDescriptor,
+    ) {
+        crate::profile_function!();
+
+        let pixels_per_point = screen_descriptor.pixels_per_point;
+        let size_in_pixels = screen_descriptor.size_in_pixels;
+
+        // Whether or not we need to reset the render pass because a paint callback has just
+        // run.
+        let mut needs_reset = true;
+
+        let mut index_buffer_slices = self.index_buffer.slices.iter();
+        let mut vertex_buffer_slices = self.vertex_buffer.slices.iter();
+
+        for epaint::ClippedPrimitive {
+            clip_rect,
+            primitive,
+        } in paint_jobs
+        {
+            if needs_reset {
+                render_pass.set_viewport(
+                    0.0,
+                    0.0,
+                    size_in_pixels[0] as f32,
+                    size_in_pixels[1] as f32,
+                    0.0,
+                    1.0,
+                );
+                render_pass.set_pipeline(&self.pipeline);
+                render_pass.set_bind_group(0, &self.uniform_bind_group, &[]);
+                needs_reset = false;
+            }
+
+            {
+                let rect = ScissorRect::new(clip_rect, pixels_per_point, size_in_pixels);
+
+                if rect.width == 0 || rect.height == 0 {
+                    // Skip rendering zero-sized clip areas.
+                    if let Primitive::Mesh(_) = primitive {
+                        // If this is a mesh, we need to advance the index and vertex buffer iterators:
+                        index_buffer_slices.next().unwrap();
+                        vertex_buffer_slices.next().unwrap();
+                    }
+                    continue;
+                }
+
+                render_pass.set_scissor_rect(rect.x, rect.y, rect.width, rect.height);
+            }
+
+            match primitive {
+                Primitive::Mesh(mesh) => {
+                    let index_buffer_slice = index_buffer_slices.next().unwrap();
+                    let vertex_buffer_slice = vertex_buffer_slices.next().unwrap();
+
+                    if let Some((_texture, bind_group)) = self.textures.get(&mesh.texture_id) {
+                        render_pass.set_bind_group(1, bind_group, &[]);
+                        render_pass.set_index_buffer(
+                            self.index_buffer.buffer.slice(index_buffer_slice.clone()),
+                            wgpu::IndexFormat::Uint32,
+                        );
+                        render_pass.set_vertex_buffer(
+                            0,
+                            self.vertex_buffer.buffer.slice(vertex_buffer_slice.clone()),
+                        );
+                        render_pass.draw_indexed(0..mesh.indices.len() as u32, 0, 0..1);
+                    } else {
+                        tracing::warn!("Missing texture: {:?}", mesh.texture_id);
+                    }
+                }
+                Primitive::Callback(callback) => {
+                    let cbfn = if let Some(c) = callback.callback.downcast_ref::<CallbackFn>() {
+                        c
+                    } else {
+                        // We already warned in the `prepare` callback
+                        continue;
+                    };
+
+                    if callback.rect.is_positive() {
+                        crate::profile_scope!("callback");
+
+                        needs_reset = true;
+
+                        {
+                            // We're setting a default viewport for the render pass as a
+                            // courtesy for the user, so that they don't have to think about
+                            // it in the simple case where they just want to fill the whole
+                            // paint area.
+                            //
+                            // The user still has the possibility of setting their own custom
+                            // viewport during the paint callback, effectively overriding this
+                            // one.
+
+                            let min = (callback.rect.min.to_vec2() * pixels_per_point).round();
+                            let max = (callback.rect.max.to_vec2() * pixels_per_point).round();
+
+                            render_pass.set_viewport(
+                                min.x,
+                                min.y,
+                                max.x - min.x,
+                                max.y - min.y,
+                                0.0,
+                                1.0,
+                            );
+                        }
+
+                        (cbfn.paint)(
+                            PaintCallbackInfo {
+                                viewport: callback.rect,
+                                clip_rect: *clip_rect,
+                                pixels_per_point,
+                                screen_size_px: size_in_pixels,
+                            },
+                            render_pass,
+                            &self.paint_callback_resources,
+                        );
+                    }
+                }
+            }
+        }
+
+        render_pass.set_scissor_rect(0, 0, size_in_pixels[0], size_in_pixels[1]);
+    }
+
+    /// Should be called before `render()`.
+    pub fn update_texture(
+        &mut self,
+        device: &wgpu::Device,
+        queue: &wgpu::Queue,
+        id: epaint::TextureId,
+        image_delta: &epaint::ImageDelta,
+    ) {
+        crate::profile_function!();
+
+        let width = image_delta.image.width() as u32;
+        let height = image_delta.image.height() as u32;
+
+        let size = wgpu::Extent3d {
+            width,
+            height,
+            depth_or_array_layers: 1,
+        };
+
+        let data_color32 = match &image_delta.image {
+            epaint::ImageData::Color(image) => {
+                assert_eq!(
+                    width as usize * height as usize,
+                    image.pixels.len(),
+                    "Mismatch between texture size and texel count"
+                );
+                Cow::Borrowed(&image.pixels)
+            }
+            epaint::ImageData::Font(image) => {
+                assert_eq!(
+                    width as usize * height as usize,
+                    image.pixels.len(),
+                    "Mismatch between texture size and texel count"
+                );
+                Cow::Owned(image.srgba_pixels(None).collect::<Vec<_>>())
+            }
+        };
+        let data_bytes: &[u8] = bytemuck::cast_slice(data_color32.as_slice());
+
+        let queue_write_data_to_texture = |texture, origin| {
+            queue.write_texture(
+                wgpu::ImageCopyTexture {
+                    texture,
+                    mip_level: 0,
+                    origin,
+                    aspect: wgpu::TextureAspect::All,
+                },
+                data_bytes,
+                wgpu::ImageDataLayout {
+                    offset: 0,
+                    bytes_per_row: NonZeroU32::new(4 * width),
+                    rows_per_image: NonZeroU32::new(height),
+                },
+                size,
+            );
+        };
+
+        if let Some(pos) = image_delta.pos {
+            // update the existing texture
+            let (texture, _bind_group) = self
+                .textures
+                .get(&id)
+                .expect("Tried to update a texture that has not been allocated yet.");
+            let origin = wgpu::Origin3d {
+                x: pos[0] as u32,
+                y: pos[1] as u32,
+                z: 0,
+            };
+            queue_write_data_to_texture(
+                texture.as_ref().expect("Tried to update user texture."),
+                origin,
+            );
+        } else {
+            // allocate a new texture
+            // Use same label for all resources associated with this texture id (no point in retyping the type)
+            let label_str = format!("egui_texid_{:?}", id);
+            let label = Some(label_str.as_str());
+            let texture = device.create_texture(&wgpu::TextureDescriptor {
+                label,
+                size,
+                mip_level_count: 1,
+                sample_count: 1,
+                dimension: wgpu::TextureDimension::D2,
+                format: wgpu::TextureFormat::Rgba8UnormSrgb, // Minspec for wgpu WebGL emulation is WebGL2, so this should always be supported.
+                usage: wgpu::TextureUsages::TEXTURE_BINDING | wgpu::TextureUsages::COPY_DST,
+                view_formats: &[wgpu::TextureFormat::Rgba8UnormSrgb],
+            });
+            let sampler = self
+                .samplers
+                .entry(image_delta.options)
+                .or_insert_with(|| create_sampler(image_delta.options, device));
+            let bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor {
+                label,
+                layout: &self.texture_bind_group_layout,
+                entries: &[
+                    wgpu::BindGroupEntry {
+                        binding: 0,
+                        resource: wgpu::BindingResource::TextureView(
+                            &texture.create_view(&wgpu::TextureViewDescriptor::default()),
+                        ),
+                    },
+                    wgpu::BindGroupEntry {
+                        binding: 1,
+                        resource: wgpu::BindingResource::Sampler(sampler),
+                    },
+                ],
+            });
+            let origin = wgpu::Origin3d::ZERO;
+            queue_write_data_to_texture(&texture, origin);
+            self.textures.insert(id, (Some(texture), bind_group));
+        };
+    }
+
+    pub fn free_texture(&mut self, id: &epaint::TextureId) {
+        self.textures.remove(id);
+    }
+
+    /// Get the WGPU texture and bind group associated to a texture that has been allocated by egui.
+    ///
+    /// This could be used by custom paint hooks to render images that have been added through with
+    /// [`egui_extras::RetainedImage`](https://docs.rs/egui_extras/latest/egui_extras/image/struct.RetainedImage.html)
+    /// or [`epaint::Context::load_texture`](https://docs.rs/egui/latest/egui/struct.Context.html#method.load_texture).
+    pub fn texture(
+        &self,
+        id: &epaint::TextureId,
+    ) -> Option<&(Option<wgpu::Texture>, wgpu::BindGroup)> {
+        self.textures.get(id)
+    }
+
+    /// Registers a `wgpu::Texture` with a `epaint::TextureId`.
+    ///
+    /// This enables the application to reference the texture inside an image ui element.
+    /// This effectively enables off-screen rendering inside the egui UI. Texture must have
+    /// the texture format `TextureFormat::Rgba8UnormSrgb` and
+    /// Texture usage `TextureUsage::SAMPLED`.
+    pub fn register_native_texture(
+        &mut self,
+        device: &wgpu::Device,
+        texture: &wgpu::TextureView,
+        texture_filter: wgpu::FilterMode,
+    ) -> epaint::TextureId {
+        self.register_native_texture_with_sampler_options(
+            device,
+            texture,
+            wgpu::SamplerDescriptor {
+                label: Some(format!("egui_user_image_{}", self.next_user_texture_id).as_str()),
+                mag_filter: texture_filter,
+                min_filter: texture_filter,
+                ..Default::default()
+            },
+        )
+    }
+
+    /// Registers a `wgpu::Texture` with an existing `epaint::TextureId`.
+    ///
+    /// This enables applications to reuse `TextureId`s.
+    pub fn update_egui_texture_from_wgpu_texture(
+        &mut self,
+        device: &wgpu::Device,
+        texture: &wgpu::TextureView,
+        texture_filter: wgpu::FilterMode,
+        id: epaint::TextureId,
+    ) {
+        self.update_egui_texture_from_wgpu_texture_with_sampler_options(
+            device,
+            texture,
+            wgpu::SamplerDescriptor {
+                label: Some(format!("egui_user_image_{}", self.next_user_texture_id).as_str()),
+                mag_filter: texture_filter,
+                min_filter: texture_filter,
+                ..Default::default()
+            },
+            id,
+        );
+    }
+
+    /// Registers a `wgpu::Texture` with a `epaint::TextureId` while also accepting custom
+    /// `wgpu::SamplerDescriptor` options.
+    ///
+    /// This allows applications to specify individual minification/magnification filters as well as
+    /// custom mipmap and tiling options.
+    ///
+    /// The `Texture` must have the format `TextureFormat::Rgba8UnormSrgb` and usage
+    /// `TextureUsage::SAMPLED`. Any compare function supplied in the `SamplerDescriptor` will be
+    /// ignored.
+    #[allow(clippy::needless_pass_by_value)] // false positive
+    pub fn register_native_texture_with_sampler_options(
+        &mut self,
+        device: &wgpu::Device,
+        texture: &wgpu::TextureView,
+        sampler_descriptor: wgpu::SamplerDescriptor<'_>,
+    ) -> epaint::TextureId {
+        crate::profile_function!();
+
+        let sampler = device.create_sampler(&wgpu::SamplerDescriptor {
+            compare: None,
+            ..sampler_descriptor
+        });
+
+        let bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor {
+            label: Some(format!("egui_user_image_{}", self.next_user_texture_id).as_str()),
+            layout: &self.texture_bind_group_layout,
+            entries: &[
+                wgpu::BindGroupEntry {
+                    binding: 0,
+                    resource: wgpu::BindingResource::TextureView(texture),
+                },
+                wgpu::BindGroupEntry {
+                    binding: 1,
+                    resource: wgpu::BindingResource::Sampler(&sampler),
+                },
+            ],
+        });
+
+        let id = epaint::TextureId::User(self.next_user_texture_id);
+        self.textures.insert(id, (None, bind_group));
+        self.next_user_texture_id += 1;
+
+        id
+    }
+
+    /// Registers a `wgpu::Texture` with an existing `epaint::TextureId` while also accepting custom
+    /// `wgpu::SamplerDescriptor` options.
+    ///
+    /// This allows applications to reuse `TextureId`s created with custom sampler options.
+    #[allow(clippy::needless_pass_by_value)] // false positive
+    pub fn update_egui_texture_from_wgpu_texture_with_sampler_options(
+        &mut self,
+        device: &wgpu::Device,
+        texture: &wgpu::TextureView,
+        sampler_descriptor: wgpu::SamplerDescriptor<'_>,
+        id: epaint::TextureId,
+    ) {
+        crate::profile_function!();
+
+        let (_user_texture, user_texture_binding) = self
+            .textures
+            .get_mut(&id)
+            .expect("Tried to update a texture that has not been allocated yet.");
+
+        let sampler = device.create_sampler(&wgpu::SamplerDescriptor {
+            compare: None,
+            ..sampler_descriptor
+        });
+
+        let bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor {
+            label: Some(format!("egui_user_image_{}", self.next_user_texture_id).as_str()),
+            layout: &self.texture_bind_group_layout,
+            entries: &[
+                wgpu::BindGroupEntry {
+                    binding: 0,
+                    resource: wgpu::BindingResource::TextureView(texture),
+                },
+                wgpu::BindGroupEntry {
+                    binding: 1,
+                    resource: wgpu::BindingResource::Sampler(&sampler),
+                },
+            ],
+        });
+
+        *user_texture_binding = bind_group;
+    }
+
+    /// Uploads the uniform, vertex and index data used by the renderer.
+    /// Should be called before `render()`.
+    ///
+    /// Returns all user-defined command buffers gathered from prepare callbacks.
+    pub fn update_buffers(
+        &mut self,
+        device: &wgpu::Device,
+        queue: &wgpu::Queue,
+        encoder: &mut wgpu::CommandEncoder,
+        paint_jobs: &[epaint::ClippedPrimitive],
+        screen_descriptor: &ScreenDescriptor,
+    ) -> Vec<wgpu::CommandBuffer> {
+        crate::profile_function!();
+
+        let screen_size_in_points = screen_descriptor.screen_size_in_points();
+
+        {
+            crate::profile_scope!("uniforms");
+            // Update uniform buffer
+            queue.write_buffer(
+                &self.uniform_buffer,
+                0,
+                bytemuck::cast_slice(&[UniformBuffer {
+                    screen_size_in_points,
+                    _padding: Default::default(),
+                }]),
+            );
+        }
+
+        // Determine how many vertices & indices need to be rendered.
+        let (vertex_count, index_count) = {
+            crate::profile_scope!("count_vertices_indices");
+            paint_jobs.iter().fold((0, 0), |acc, clipped_primitive| {
+                match &clipped_primitive.primitive {
+                    Primitive::Mesh(mesh) => {
+                        (acc.0 + mesh.vertices.len(), acc.1 + mesh.indices.len())
+                    }
+                    Primitive::Callback(_) => acc,
+                }
+            })
+        };
+
+        {
+            // Resize index buffer if needed:
+            self.index_buffer.slices.clear();
+            let required_size = (std::mem::size_of::<u32>() * index_count) as u64;
+            if self.index_buffer.capacity < required_size {
+                self.index_buffer.capacity =
+                    (self.index_buffer.capacity * 2).at_least(required_size);
+                self.index_buffer.buffer = create_index_buffer(device, self.index_buffer.capacity);
+            }
+        }
+
+        {
+            // Resize vertex buffer if needed:
+            self.vertex_buffer.slices.clear();
+            let required_size = (std::mem::size_of::<Vertex>() * vertex_count) as u64;
+            if self.vertex_buffer.capacity < required_size {
+                self.vertex_buffer.capacity =
+                    (self.vertex_buffer.capacity * 2).at_least(required_size);
+                self.vertex_buffer.buffer =
+                    create_vertex_buffer(device, self.vertex_buffer.capacity);
+            }
+        }
+
+        // Upload index & vertex data and call user callbacks
+        let mut user_cmd_bufs = Vec::new(); // collect user command buffers
+
+        crate::profile_scope!("primitives");
+        for epaint::ClippedPrimitive { primitive, .. } in paint_jobs.iter() {
+            match primitive {
+                Primitive::Mesh(mesh) => {
+                    {
+                        let index_offset = self.index_buffer.slices.last().unwrap_or(&(0..0)).end;
+                        let data = bytemuck::cast_slice(&mesh.indices);
+                        queue.write_buffer(&self.index_buffer.buffer, index_offset, data);
+                        self.index_buffer
+                            .slices
+                            .push(index_offset..(data.len() as wgpu::BufferAddress + index_offset));
+                    }
+                    {
+                        let vertex_offset = self.vertex_buffer.slices.last().unwrap_or(&(0..0)).end;
+                        let data = bytemuck::cast_slice(&mesh.vertices);
+                        queue.write_buffer(&self.vertex_buffer.buffer, vertex_offset, data);
+                        self.vertex_buffer.slices.push(
+                            vertex_offset..(data.len() as wgpu::BufferAddress + vertex_offset),
+                        );
+                    }
+                }
+                Primitive::Callback(callback) => {
+                    let cbfn = if let Some(c) = callback.callback.downcast_ref::<CallbackFn>() {
+                        c
+                    } else {
+                        tracing::warn!("Unknown paint callback: expected `egui_wgpu::CallbackFn`");
+                        continue;
+                    };
+
+                    crate::profile_scope!("callback");
+                    user_cmd_bufs.extend((cbfn.prepare)(
+                        device,
+                        queue,
+                        encoder,
+                        &mut self.paint_callback_resources,
+                    ));
+                }
+            }
+        }
+
+        user_cmd_bufs
+    }
+}
+
+fn create_sampler(
+    options: epaint::textures::TextureOptions,
+    device: &wgpu::Device,
+) -> wgpu::Sampler {
+    let mag_filter = match options.magnification {
+        epaint::textures::TextureFilter::Nearest => wgpu::FilterMode::Nearest,
+        epaint::textures::TextureFilter::Linear => wgpu::FilterMode::Linear,
+    };
+    let min_filter = match options.minification {
+        epaint::textures::TextureFilter::Nearest => wgpu::FilterMode::Nearest,
+        epaint::textures::TextureFilter::Linear => wgpu::FilterMode::Linear,
+    };
+    device.create_sampler(&wgpu::SamplerDescriptor {
+        label: Some(&format!(
+            "egui sampler (mag: {:?}, min {:?})",
+            mag_filter, min_filter
+        )),
+        mag_filter,
+        min_filter,
+        ..Default::default()
+    })
+}
+
+fn create_vertex_buffer(device: &wgpu::Device, size: u64) -> wgpu::Buffer {
+    crate::profile_function!();
+    device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("egui_vertex_buffer"),
+        usage: wgpu::BufferUsages::VERTEX | wgpu::BufferUsages::COPY_DST,
+        size,
+        mapped_at_creation: false,
+    })
+}
+
+fn create_index_buffer(device: &wgpu::Device, size: u64) -> wgpu::Buffer {
+    crate::profile_function!();
+    device.create_buffer(&wgpu::BufferDescriptor {
+        label: Some("egui_index_buffer"),
+        usage: wgpu::BufferUsages::INDEX | wgpu::BufferUsages::COPY_DST,
+        size,
+        mapped_at_creation: false,
+    })
+}
+
+/// A Rect in physical pixel space, used for setting cliipping rectangles.
+struct ScissorRect {
+    x: u32,
+    y: u32,
+    width: u32,
+    height: u32,
+}
+
+impl ScissorRect {
+    fn new(clip_rect: &epaint::Rect, pixels_per_point: f32, target_size: [u32; 2]) -> Self {
+        // Transform clip rect to physical pixels:
+        let clip_min_x = pixels_per_point * clip_rect.min.x;
+        let clip_min_y = pixels_per_point * clip_rect.min.y;
+        let clip_max_x = pixels_per_point * clip_rect.max.x;
+        let clip_max_y = pixels_per_point * clip_rect.max.y;
+
+        // Round to integer:
+        let clip_min_x = clip_min_x.round() as u32;
+        let clip_min_y = clip_min_y.round() as u32;
+        let clip_max_x = clip_max_x.round() as u32;
+        let clip_max_y = clip_max_y.round() as u32;
+
+        // Clamp:
+        let clip_min_x = clip_min_x.clamp(0, target_size[0]);
+        let clip_min_y = clip_min_y.clamp(0, target_size[1]);
+        let clip_max_x = clip_max_x.clamp(clip_min_x, target_size[0]);
+        let clip_max_y = clip_max_y.clamp(clip_min_y, target_size[1]);
+
+        Self {
+            x: clip_min_x,
+            y: clip_min_y,
+            width: clip_max_x - clip_min_x,
+            height: clip_max_y - clip_min_y,
+        }
+    }
+}
+
+#[test]
+fn renderer_impl_send_sync() {
+    fn assert_send_sync<T: Send + Sync>() {}
+    assert_send_sync::<Renderer>();
+}

crates/egui-wgpu/src/winit.rs

@@ -0,0 +1,418 @@
+use std::sync::Arc;
+
+use epaint::mutex::RwLock;
+
+use tracing::error;
+
+use crate::{renderer, RenderState, Renderer, SurfaceErrorAction, WgpuConfiguration};
+
+struct SurfaceState {
+    surface: wgpu::Surface,
+    alpha_mode: wgpu::CompositeAlphaMode,
+    width: u32,
+    height: u32,
+}
+
+/// Everything you need to paint egui with [`wgpu`] on [`winit`].
+///
+/// Alternatively you can use [`crate::renderer`] directly.
+pub struct Painter {
+    configuration: WgpuConfiguration,
+    msaa_samples: u32,
+    support_transparent_backbuffer: bool,
+    depth_format: Option<wgpu::TextureFormat>,
+    depth_texture_view: Option<wgpu::TextureView>,
+
+    instance: wgpu::Instance,
+    adapter: Option<wgpu::Adapter>,
+    render_state: Option<RenderState>,
+    surface_state: Option<SurfaceState>,
+}
+
+impl Painter {
+    /// Manages [`wgpu`] state, including surface state, required to render egui.
+    ///
+    /// Only the [`wgpu::Instance`] is initialized here. Device selection and the initialization
+    /// of render + surface state is deferred until the painter is given its first window target
+    /// via [`set_window()`](Self::set_window). (Ensuring that a device that's compatible with the
+    /// native window is chosen)
+    ///
+    /// Before calling [`paint_and_update_textures()`](Self::paint_and_update_textures) a
+    /// [`wgpu::Surface`] must be initialized (and corresponding render state) by calling
+    /// [`set_window()`](Self::set_window) once you have
+    /// a [`winit::window::Window`] with a valid `.raw_window_handle()`
+    /// associated.
+    pub fn new(
+        configuration: WgpuConfiguration,
+        msaa_samples: u32,
+        depth_bits: u8,
+        support_transparent_backbuffer: bool,
+    ) -> Self {
+        let instance = wgpu::Instance::new(wgpu::InstanceDescriptor {
+            backends: configuration.backends,
+            dx12_shader_compiler: Default::default(), //
+        });
+
+        Self {
+            configuration,
+            msaa_samples,
+            support_transparent_backbuffer,
+            depth_format: (depth_bits > 0).then_some(wgpu::TextureFormat::Depth32Float),
+            depth_texture_view: None,
+
+            instance,
+            adapter: None,
+            render_state: None,
+            surface_state: None,
+        }
+    }
+
+    /// Get the [`RenderState`].
+    ///
+    /// Will return [`None`] if the render state has not been initialized yet.
+    pub fn render_state(&self) -> Option<RenderState> {
+        self.render_state.clone()
+    }
+
+    async fn init_render_state(
+        &self,
+        adapter: &wgpu::Adapter,
+        target_format: wgpu::TextureFormat,
+    ) -> Result<RenderState, wgpu::RequestDeviceError> {
+        adapter
+            .request_device(&self.configuration.device_descriptor, None)
+            .await
+            .map(|(device, queue)| {
+                let renderer =
+                    Renderer::new(&device, target_format, self.depth_format, self.msaa_samples);
+                RenderState {
+                    device: Arc::new(device),
+                    queue: Arc::new(queue),
+                    target_format,
+                    renderer: Arc::new(RwLock::new(renderer)),
+                }
+            })
+    }
+
+    // We want to defer the initialization of our render state until we have a surface
+    // so we can take its format into account.
+    //
+    // After we've initialized our render state once though we expect all future surfaces
+    // will have the same format and so this render state will remain valid.
+    async fn ensure_render_state_for_surface(
+        &mut self,
+        surface: &wgpu::Surface,
+    ) -> Result<(), wgpu::RequestDeviceError> {
+        if self.adapter.is_none() {
+            self.adapter = self
+                .instance
+                .request_adapter(&wgpu::RequestAdapterOptions {
+                    power_preference: self.configuration.power_preference,
+                    compatible_surface: Some(surface),
+                    force_fallback_adapter: false,
+                })
+                .await;
+        }
+        if self.render_state.is_none() {
+            match &self.adapter {
+                Some(adapter) => {
+                    let swapchain_format = crate::preferred_framebuffer_format(
+                        &surface.get_capabilities(adapter).formats,
+                    );
+                    let rs = self.init_render_state(adapter, swapchain_format).await?;
+                    self.render_state = Some(rs);
+                }
+                None => return Err(wgpu::RequestDeviceError {}),
+            }
+        }
+        Ok(())
+    }
+
+    fn configure_surface(
+        surface_state: &SurfaceState,
+        render_state: &RenderState,
+        present_mode: wgpu::PresentMode,
+    ) {
+        surface_state.surface.configure(
+            &render_state.device,
+            &wgpu::SurfaceConfiguration {
+                usage: wgpu::TextureUsages::RENDER_ATTACHMENT,
+                format: render_state.target_format,
+                width: surface_state.width,
+                height: surface_state.height,
+                present_mode,
+                alpha_mode: surface_state.alpha_mode,
+                view_formats: vec![render_state.target_format],
+            },
+        );
+    }
+
+    /// Updates (or clears) the [`winit::window::Window`] associated with the [`Painter`]
+    ///
+    /// This creates a [`wgpu::Surface`] for the given Window (as well as initializing render
+    /// state if needed) that is used for egui rendering.
+    ///
+    /// This must be called before trying to render via
+    /// [`paint_and_update_textures`](Self::paint_and_update_textures)
+    ///
+    /// # Portability
+    ///
+    /// _In particular it's important to note that on Android a it's only possible to create
+    /// a window surface between `Resumed` and `Paused` lifecycle events, and Winit will panic on
+    /// attempts to query the raw window handle while paused._
+    ///
+    /// On Android [`set_window`](Self::set_window) should be called with `Some(window)` for each
+    /// `Resumed` event and `None` for each `Paused` event. Currently, on all other platforms
+    /// [`set_window`](Self::set_window) may be called with `Some(window)` as soon as you have a
+    /// valid [`winit::window::Window`].
+    ///
+    /// # Safety
+    ///
+    /// The raw Window handle associated with the given `window` must be a valid object to create a
+    /// surface upon and must remain valid for the lifetime of the created surface. (The surface may
+    /// be cleared by passing `None`).
+    ///
+    /// # Errors
+    /// If the provided wgpu configuration does not match an available device.
+    pub async unsafe fn set_window(
+        &mut self,
+        window: Option<&winit::window::Window>,
+    ) -> Result<(), crate::WgpuError> {
+        match window {
+            Some(window) => {
+                let surface = self.instance.create_surface(&window)?;
+
+                self.ensure_render_state_for_surface(&surface).await?;
+
+                let alpha_mode = if self.support_transparent_backbuffer {
+                    let supported_alpha_modes = surface
+                        .get_capabilities(self.adapter.as_ref().unwrap())
+                        .alpha_modes;
+
+                    // Prefer pre multiplied over post multiplied!
+                    if supported_alpha_modes.contains(&wgpu::CompositeAlphaMode::PreMultiplied) {
+                        wgpu::CompositeAlphaMode::PreMultiplied
+                    } else if supported_alpha_modes
+                        .contains(&wgpu::CompositeAlphaMode::PostMultiplied)
+                    {
+                        wgpu::CompositeAlphaMode::PostMultiplied
+                    } else {
+                        tracing::warn!("Transparent window was requested, but the active wgpu surface does not support a `CompositeAlphaMode` with transparency.");
+                        wgpu::CompositeAlphaMode::Auto
+                    }
+                } else {
+                    wgpu::CompositeAlphaMode::Auto
+                };
+
+                let size = window.inner_size();
+                self.surface_state = Some(SurfaceState {
+                    surface,
+                    width: size.width,
+                    height: size.height,
+                    alpha_mode,
+                });
+                self.resize_and_generate_depth_texture_view(size.width, size.height);
+            }
+            None => {
+                self.surface_state = None;
+            }
+        }
+        Ok(())
+    }
+
+    /// Returns the maximum texture dimension supported if known
+    ///
+    /// This API will only return a known dimension after `set_window()` has been called
+    /// at least once, since the underlying device and render state are initialized lazily
+    /// once we have a window (that may determine the choice of adapter/device).
+    pub fn max_texture_side(&self) -> Option<usize> {
+        self.render_state
+            .as_ref()
+            .map(|rs| rs.device.limits().max_texture_dimension_2d as usize)
+    }
+
+    fn resize_and_generate_depth_texture_view(
+        &mut self,
+        width_in_pixels: u32,
+        height_in_pixels: u32,
+    ) {
+        let render_state = self.render_state.as_ref().unwrap();
+        let surface_state = self.surface_state.as_mut().unwrap();
+
+        surface_state.width = width_in_pixels;
+        surface_state.height = height_in_pixels;
+
+        Self::configure_surface(surface_state, render_state, self.configuration.present_mode);
+
+        self.depth_texture_view = self.depth_format.map(|depth_format| {
+            render_state
+                .device
+                .create_texture(&wgpu::TextureDescriptor {
+                    label: Some("egui_depth_texture"),
+                    size: wgpu::Extent3d {
+                        width: width_in_pixels,
+                        height: height_in_pixels,
+                        depth_or_array_layers: 1,
+                    },
+                    mip_level_count: 1,
+                    sample_count: 1,
+                    dimension: wgpu::TextureDimension::D2,
+                    format: depth_format,
+                    usage: wgpu::TextureUsages::RENDER_ATTACHMENT
+                        | wgpu::TextureUsages::TEXTURE_BINDING,
+                    view_formats: &[depth_format],
+                })
+                .create_view(&wgpu::TextureViewDescriptor::default())
+        });
+    }
+
+    pub fn on_window_resized(&mut self, width_in_pixels: u32, height_in_pixels: u32) {
+        if self.surface_state.is_some() {
+            self.resize_and_generate_depth_texture_view(width_in_pixels, height_in_pixels);
+        } else {
+            error!("Ignoring window resize notification with no surface created via Painter::set_window()");
+        }
+    }
+
+    pub fn paint_and_update_textures(
+        &mut self,
+        pixels_per_point: f32,
+        clear_color: [f32; 4],
+        clipped_primitives: &[epaint::ClippedPrimitive],
+        textures_delta: &epaint::textures::TexturesDelta,
+    ) {
+        crate::profile_function!();
+
+        let render_state = match self.render_state.as_mut() {
+            Some(rs) => rs,
+            None => return,
+        };
+        let surface_state = match self.surface_state.as_ref() {
+            Some(rs) => rs,
+            None => return,
+        };
+
+        let output_frame = {
+            crate::profile_scope!("get_current_texture");
+            // This is what vsync-waiting happens, at least on Mac.
+            surface_state.surface.get_current_texture()
+        };
+
+        let output_frame = match output_frame {
+            Ok(frame) => frame,
+            #[allow(clippy::single_match_else)]
+            Err(e) => match (*self.configuration.on_surface_error)(e) {
+                SurfaceErrorAction::RecreateSurface => {
+                    Self::configure_surface(
+                        surface_state,
+                        render_state,
+                        self.configuration.present_mode,
+                    );
+                    return;
+                }
+                SurfaceErrorAction::SkipFrame => {
+                    return;
+                }
+            },
+        };
+
+        let mut encoder =
+            render_state
+                .device
+                .create_command_encoder(&wgpu::CommandEncoderDescriptor {
+                    label: Some("encoder"),
+                });
+
+        // Upload all resources for the GPU.
+        let screen_descriptor = renderer::ScreenDescriptor {
+            size_in_pixels: [surface_state.width, surface_state.height],
+            pixels_per_point,
+        };
+
+        let user_cmd_bufs = {
+            let mut renderer = render_state.renderer.write();
+            for (id, image_delta) in &textures_delta.set {
+                renderer.update_texture(
+                    &render_state.device,
+                    &render_state.queue,
+                    *id,
+                    image_delta,
+                );
+            }
+
+            renderer.update_buffers(
+                &render_state.device,
+                &render_state.queue,
+                &mut encoder,
+                clipped_primitives,
+                &screen_descriptor,
+            )
+        };
+
+        {
+            let renderer = render_state.renderer.read();
+            let frame_view = output_frame
+                .texture
+                .create_view(&wgpu::TextureViewDescriptor::default());
+            let mut render_pass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
+                color_attachments: &[Some(wgpu::RenderPassColorAttachment {
+                    view: &frame_view,
+                    resolve_target: None,
+                    ops: wgpu::Operations {
+                        load: wgpu::LoadOp::Clear(wgpu::Color {
+                            r: clear_color[0] as f64,
+                            g: clear_color[1] as f64,
+                            b: clear_color[2] as f64,
+                            a: clear_color[3] as f64,
+                        }),
+                        store: true,
+                    },
+                })],
+                depth_stencil_attachment: self.depth_texture_view.as_ref().map(|view| {
+                    wgpu::RenderPassDepthStencilAttachment {
+                        view,
+                        depth_ops: Some(wgpu::Operations {
+                            load: wgpu::LoadOp::Clear(1.0),
+                            store: true,
+                        }),
+                        stencil_ops: None,
+                    }
+                }),
+                label: Some("egui_render"),
+            });
+
+            renderer.render(&mut render_pass, clipped_primitives, &screen_descriptor);
+        }
+
+        {
+            let mut renderer = render_state.renderer.write();
+            for id in &textures_delta.free {
+                renderer.free_texture(id);
+            }
+        }
+
+        let encoded = {
+            crate::profile_scope!("CommandEncoder::finish");
+            encoder.finish()
+        };
+
+        // Submit the commands: both the main buffer and user-defined ones.
+        {
+            crate::profile_scope!("Queue::submit");
+            render_state
+                .queue
+                .submit(user_cmd_bufs.into_iter().chain(std::iter::once(encoded)));
+        };
+
+        // Redraw egui
+        {
+            crate::profile_scope!("present");
+            output_frame.present();
+        }
+    }
+
+    #[allow(clippy::unused_self)]
+    pub fn destroy(&mut self) {
+        // TODO(emilk): something here?
+    }
+}

crates/egui-winit/CHANGELOG.md

@@ -0,0 +1,64 @@
+# Changelog for egui-winit
+All notable changes to the `egui-winit` integration will be noted in this file.
+
+
+## Unreleased
+
+
+## 0.21.1 - 2023-02-12
+* Fixed crash when window position is in an invalid state, which could happen e.g. due to changes in monitor size or DPI ([#2722](https://github.com/emilk/egui/issues/2722)).
+
+
+## 0.21.0 - 2023-02-08
+* Fixed persistence of native window position on Windows OS ([#2583](https://github.com/emilk/egui/issues/2583)).
+* Update to `winit` 0.28, adding support for mac trackpad zoom ([#2654](https://github.com/emilk/egui/pull/2654)).
+* Remove the `screen_reader` feature. Use the `accesskit` feature flag instead ([#2669](https://github.com/emilk/egui/pull/2669)).
+* Fix bug where the cursor could get stuck using the wrong icon.
+
+
+## 0.20.1 - 2022-12-11
+* Fix [docs.rs](https://docs.rs/egui-winit) build ([#2420](https://github.com/emilk/egui/pull/2420)).
+
+
+## 0.20.0 - 2022-12-08
+* The default features of the `winit` crate are not enabled if the default features of `egui-winit` are disabled too ([#1971](https://github.com/emilk/egui/pull/1971)).
+* Added new feature `wayland` which enables Wayland support ([#1971](https://github.com/emilk/egui/pull/1971)).
+* Don't repaint when just moving window ([#1980](https://github.com/emilk/egui/pull/1980)).
+* Added optional integration with [AccessKit](https://accesskit.dev/) for implementing platform accessibility APIs ([#2294](https://github.com/emilk/egui/pull/2294)).
+
+## 0.19.0 - 2022-08-20
+* MSRV (Minimum Supported Rust Version) is now `1.61.0` ([#1846](https://github.com/emilk/egui/pull/1846)).
+* Fixed clipboard on Wayland ([#1613](https://github.com/emilk/egui/pull/1613)).
+* Allow deferred render + surface state initialization for Android ([#1634](https://github.com/emilk/egui/pull/1634)).
+* Fixed window position persistence ([#1745](https://github.com/emilk/egui/pull/1745)).
+* Fixed mouse cursor change on Linux ([#1747](https://github.com/emilk/egui/pull/1747)).
+* Use the new `RawInput::has_focus` field to indicate whether the window has the keyboard focus ([#1859](https://github.com/emilk/egui/pull/1859)).
+
+
+## 0.18.0 - 2022-04-30
+* Reexport `egui` crate
+* MSRV (Minimum Supported Rust Version) is now `1.60.0` ([#1467](https://github.com/emilk/egui/pull/1467)).
+* Added new feature `puffin` to add [`puffin profiler`](https://github.com/EmbarkStudios/puffin) scopes ([#1483](https://github.com/emilk/egui/pull/1483)).
+* Renamed the feature `convert_bytemuck` to `bytemuck` ([#1467](https://github.com/emilk/egui/pull/1467)).
+* Renamed the feature `serialize` to `serde` ([#1467](https://github.com/emilk/egui/pull/1467)).
+* Removed the features `dark-light` and `persistence` ([#1542](https://github.com/emilk/egui/pull/1542)).
+
+
+## 0.17.0 - 2022-02-22
+* Fixed horizontal scrolling direction on Linux.
+* Replaced `std::time::Instant` with `instant::Instant` for WebAssembly compatability ([#1023](https://github.com/emilk/egui/pull/1023))
+* Automatically detect and apply dark or light mode from system ([#1045](https://github.com/emilk/egui/pull/1045)).
+* Fixed `enable_drag` on Windows OS ([#1108](https://github.com/emilk/egui/pull/1108)).
+* Shift-scroll will now result in horizontal scrolling on all platforms ([#1136](https://github.com/emilk/egui/pull/1136)).
+* Require knowledge about max texture side (e.g. `GL_MAX_TEXTURE_SIZE`)) ([#1154](https://github.com/emilk/egui/pull/1154)).
+
+
+## 0.16.0 - 2021-12-29
+* Added helper `EpiIntegration` ([#871](https://github.com/emilk/egui/pull/871)).
+* Fixed shift key getting stuck enabled with the X11 option `shift:both_capslock` enabled ([#849](https://github.com/emilk/egui/pull/849)).
+* Removed `State::is_quit_event` and `State::is_quit_shortcut` ([#881](https://github.com/emilk/egui/pull/881)).
+* Updated `winit` to 0.26 ([#930](https://github.com/emilk/egui/pull/930)).
+
+
+## 0.15.0 - 2021-10-24
+First stand-alone release. Previously part of `egui_glium`.

crates/egui-winit/Cargo.toml

@@ -0,0 +1,76 @@
+[package]
+name = "egui-winit"
+version = "0.21.1"
+authors = ["Emil Ernerfeldt <emil.ernerfeldt@gmail.com>"]
+description = "Bindings for using egui with winit"
+edition = "2021"
+rust-version = "1.65"
+homepage = "https://github.com/emilk/egui/tree/master/crates/egui-winit"
+license = "MIT OR Apache-2.0"
+readme = "README.md"
+repository = "https://github.com/emilk/egui/tree/master/crates/egui-winit"
+categories = ["gui", "game-development"]
+keywords = ["winit", "egui", "gui", "gamedev"]
+include = ["../LICENSE-APACHE", "../LICENSE-MIT", "**/*.rs", "Cargo.toml"]
+
+[package.metadata.docs.rs]
+all-features = true
+
+
+[features]
+default = ["clipboard", "links", "wayland", "winit/default"]
+
+## Enable platform accessibility API implementations through [AccessKit](https://accesskit.dev/).
+accesskit = ["accesskit_winit", "egui/accesskit"]
+
+## [`bytemuck`](https://docs.rs/bytemuck) enables you to cast [`egui::epaint::Vertex`], [`egui::Vec2`] etc to `&[u8]`.
+bytemuck = ["egui/bytemuck"]
+
+## Enable cut/copy/paste to OS clipboard.
+## If disabled a clipboard will be simulated so you can still copy/paste within the egui app.
+clipboard = ["arboard", "smithay-clipboard"]
+
+## Enable opening links in a browser when an egui hyperlink is clicked.
+links = ["webbrowser"]
+
+## Enable profiling with the [`puffin`](https://docs.rs/puffin) crate.
+puffin = ["dep:puffin"]
+
+## Allow serialization of [`WindowSettings`] using [`serde`](https://docs.rs/serde).
+serde = ["egui/serde", "dep:serde"]
+
+## Enables Wayland support.
+wayland = ["winit/wayland"]
+
+[dependencies]
+egui = { version = "0.21.0", path = "../egui", default-features = false, features = [
+  "tracing",
+] }
+instant = { version = "0.1", features = [
+  "wasm-bindgen",
+] } # We use instant so we can (maybe) compile for web
+tracing = { version = "0.1", default-features = false, features = ["std"] }
+winit = { version = "0.28", default-features = false }
+
+#! ### Optional dependencies
+
+# feature accesskit
+accesskit_winit = { version = "0.10.0", optional = true }
+
+## Enable this when generating docs.
+document-features = { version = "0.2", optional = true }
+
+puffin = { version = "0.14", optional = true }
+serde = { version = "1.0", optional = true, features = ["derive"] }
+
+webbrowser = { version = "0.8.3", optional = true }
+
+[target.'cfg(any(target_os="linux", target_os="dragonfly", target_os="freebsd", target_os="netbsd", target_os="openbsd"))'.dependencies]
+smithay-clipboard = { version = "0.6.3", optional = true }
+
+[target.'cfg(not(target_os = "android"))'.dependencies]
+arboard = { version = "3.2", optional = true, default-features = false }
+
+[target.'cfg(target_os = "android")'.dependencies]
+# TODO(emilk): this is probably not the right place for specifying native-activity, but we need to do it somewhere for the CI
+android-activity = { version = "0.4", features = ["native-activity"] }

crates/egui-winit/README.md

@@ -6,6 +6,6 @@
 ![MIT](https://img.shields.io/badge/license-MIT-blue.svg)
 ![Apache](https://img.shields.io/badge/license-Apache-blue.svg)
 
-This crates provides bindings between [`egui`](https://github.com/emilk/egui) and [winit](https://crates.io/crates/winit).
+This crates provides bindings between [`egui`](https://github.com/emilk/egui) and [`winit`](https://crates.io/crates/winit).
 
 The library translates winit events to egui, handled copy/paste, updates the cursor, open links clicked in egui, etc.

crates/egui-winit/src/clipboard.rs

@@ -0,0 +1,146 @@
+use std::os::raw::c_void;
+
+/// Handles interfacing with the OS clipboard.
+///
+/// If the "clipboard" feature is off, or we cannot connect to the OS clipboard,
+/// then a fallback clipboard that just works works within the same app is used instead.
+pub struct Clipboard {
+    #[cfg(all(feature = "arboard", not(target_os = "android")))]
+    arboard: Option<arboard::Clipboard>,
+
+    #[cfg(all(
+        any(
+            target_os = "linux",
+            target_os = "dragonfly",
+            target_os = "freebsd",
+            target_os = "netbsd",
+            target_os = "openbsd"
+        ),
+        feature = "smithay-clipboard"
+    ))]
+    smithay: Option<smithay_clipboard::Clipboard>,
+
+    /// Fallback manual clipboard.
+    clipboard: String,
+}
+
+impl Clipboard {
+    #[allow(unused_variables)]
+    pub fn new(#[allow(unused_variables)] wayland_display: Option<*mut c_void>) -> Self {
+        Self {
+            #[cfg(all(feature = "arboard", not(target_os = "android")))]
+            arboard: init_arboard(),
+
+            #[cfg(all(
+                any(
+                    target_os = "linux",
+                    target_os = "dragonfly",
+                    target_os = "freebsd",
+                    target_os = "netbsd",
+                    target_os = "openbsd"
+                ),
+                feature = "smithay-clipboard"
+            ))]
+            smithay: init_smithay_clipboard(wayland_display),
+
+            clipboard: Default::default(),
+        }
+    }
+
+    pub fn get(&mut self) -> Option<String> {
+        #[cfg(all(
+            any(
+                target_os = "linux",
+                target_os = "dragonfly",
+                target_os = "freebsd",
+                target_os = "netbsd",
+                target_os = "openbsd"
+            ),
+            feature = "smithay-clipboard"
+        ))]
+        if let Some(clipboard) = &mut self.smithay {
+            return match clipboard.load() {
+                Ok(text) => Some(text),
+                Err(err) => {
+                    tracing::error!("smithay paste error: {err}");
+                    None
+                }
+            };
+        }
+
+        #[cfg(all(feature = "arboard", not(target_os = "android")))]
+        if let Some(clipboard) = &mut self.arboard {
+            return match clipboard.get_text() {
+                Ok(text) => Some(text),
+                Err(err) => {
+                    tracing::error!("arboard paste error: {err}");
+                    None
+                }
+            };
+        }
+
+        Some(self.clipboard.clone())
+    }
+
+    pub fn set(&mut self, text: String) {
+        #[cfg(all(
+            any(
+                target_os = "linux",
+                target_os = "dragonfly",
+                target_os = "freebsd",
+                target_os = "netbsd",
+                target_os = "openbsd"
+            ),
+            feature = "smithay-clipboard"
+        ))]
+        if let Some(clipboard) = &mut self.smithay {
+            clipboard.store(text);
+            return;
+        }
+
+        #[cfg(all(feature = "arboard", not(target_os = "android")))]
+        if let Some(clipboard) = &mut self.arboard {
+            if let Err(err) = clipboard.set_text(text) {
+                tracing::error!("arboard copy/cut error: {err}");
+            }
+            return;
+        }
+
+        self.clipboard = text;
+    }
+}
+
+#[cfg(all(feature = "arboard", not(target_os = "android")))]
+fn init_arboard() -> Option<arboard::Clipboard> {
+    tracing::debug!("Initializing arboard clipboard…");
+    match arboard::Clipboard::new() {
+        Ok(clipboard) => Some(clipboard),
+        Err(err) => {
+            tracing::warn!("Failed to initialize arboard clipboard: {err}");
+            None
+        }
+    }
+}
+
+#[cfg(all(
+    any(
+        target_os = "linux",
+        target_os = "dragonfly",
+        target_os = "freebsd",
+        target_os = "netbsd",
+        target_os = "openbsd"
+    ),
+    feature = "smithay-clipboard"
+))]
+fn init_smithay_clipboard(
+    wayland_display: Option<*mut c_void>,
+) -> Option<smithay_clipboard::Clipboard> {
+    if let Some(display) = wayland_display {
+        tracing::debug!("Initializing smithay clipboard…");
+        #[allow(unsafe_code)]
+        Some(unsafe { smithay_clipboard::Clipboard::new(display) })
+    } else {
+        tracing::debug!("Cannot initialize smithay clipboard without a display handle");
+        None
+    }
+}

crates/egui-winit/src/lib.rs

@@ -2,87 +2,29 @@
 //!
 //! The library translates winit events to egui, handled copy/paste,
 //! updates the cursor, open links clicked in egui, etc.
+//!
+//! ## Feature flags
+#![cfg_attr(feature = "document-features", doc = document_features::document_features!())]
+//!
 
-#![forbid(unsafe_code)]
-#![warn(
-    clippy::all,
-    clippy::await_holding_lock,
-    clippy::char_lit_as_u8,
-    clippy::checked_conversions,
-    clippy::dbg_macro,
-    clippy::debug_assert_with_mut_call,
-    clippy::doc_markdown,
-    clippy::empty_enum,
-    clippy::enum_glob_use,
-    clippy::exit,
-    clippy::expl_impl_clone_on_copy,
-    clippy::explicit_deref_methods,
-    clippy::explicit_into_iter_loop,
-    clippy::fallible_impl_from,
-    clippy::filter_map_next,
-    clippy::float_cmp_const,
-    clippy::fn_params_excessive_bools,
-    clippy::if_let_mutex,
-    clippy::imprecise_flops,
-    clippy::inefficient_to_string,
-    clippy::invalid_upcast_comparisons,
-    clippy::large_types_passed_by_value,
-    clippy::let_unit_value,
-    clippy::linkedlist,
-    clippy::lossy_float_literal,
-    clippy::macro_use_imports,
-    clippy::manual_ok_or,
-    clippy::map_err_ignore,
-    clippy::map_flatten,
-    clippy::match_on_vec_items,
-    clippy::match_same_arms,
-    clippy::match_wildcard_for_single_variants,
-    clippy::mem_forget,
-    clippy::mismatched_target_os,
-    clippy::missing_errors_doc,
-    clippy::missing_safety_doc,
-    clippy::mut_mut,
-    clippy::mutex_integer,
-    clippy::needless_borrow,
-    clippy::needless_continue,
-    clippy::needless_pass_by_value,
-    clippy::option_option,
-    clippy::path_buf_push_overwrite,
-    clippy::ptr_as_ptr,
-    clippy::ref_option_ref,
-    clippy::rest_pat_in_fully_bound_structs,
-    clippy::same_functions_in_if_condition,
-    clippy::string_add_assign,
-    clippy::string_add,
-    clippy::string_lit_as_bytes,
-    clippy::string_to_string,
-    clippy::todo,
-    clippy::trait_duplication_in_bounds,
-    clippy::unimplemented,
-    clippy::unnested_or_patterns,
-    clippy::unused_self,
-    clippy::useless_transmute,
-    clippy::verbose_file_reads,
-    clippy::zero_sized_map_values,
-    future_incompatible,
-    missing_crate_level_docs,
-    nonstandard_style,
-    rust_2018_idioms
-)]
-#![allow(clippy::float_cmp)]
 #![allow(clippy::manual_range_contains)]
 
+use std::os::raw::c_void;
+
+#[cfg(feature = "accesskit")]
+pub use accesskit_winit;
+pub use egui;
+#[cfg(feature = "accesskit")]
+use egui::accesskit;
 pub use winit;
 
 pub mod clipboard;
-pub mod screen_reader;
 mod window_settings;
 
-#[cfg(feature = "epi")]
-pub mod epi;
-
 pub use window_settings::WindowSettings;
 
+use winit::event_loop::EventLoopWindowTarget;
+
 pub fn native_pixels_per_point(window: &winit::window::Window) -> f32 {
     window.scale_factor() as f32
 }
@@ -92,18 +34,37 @@ pub fn screen_size_in_pixels(window: &winit::window::Window) -> egui::Vec2 {
     egui::vec2(size.width as f32, size.height as f32)
 }
 
+// ----------------------------------------------------------------------------
+
+#[must_use]
+pub struct EventResponse {
+    /// If true, egui consumed this event, i.e. wants exclusive use of this event
+    /// (e.g. a mouse click on an egui window, or entering text into a text field).
+    ///
+    /// For instance, if you use egui for a game, you should only
+    /// pass on the events to your game when [`Self::consumed`] is `false.
+    ///
+    /// Note that egui uses `tab` to move focus between elements, so this will always be `true` for tabs.
+    pub consumed: bool,
+
+    /// Do we need an egui refresh because of this event?
+    pub repaint: bool,
+}
+
+// ----------------------------------------------------------------------------
+
 /// Handles the integration between egui and winit.
 pub struct State {
-    start_time: std::time::Instant,
+    start_time: instant::Instant,
     egui_input: egui::RawInput,
     pointer_pos_in_points: Option<egui::Pos2>,
     any_pointer_button_down: bool,
-    current_cursor_icon: egui::CursorIcon,
+    current_cursor_icon: Option<egui::CursorIcon>,
+
     /// What egui uses.
     current_pixels_per_point: f32,
 
     clipboard: clipboard::Clipboard,
-    screen_reader: screen_reader::ScreenReader,
 
     /// If `true`, mouse inputs will be treated as touches.
     /// Useful for debugging touch support in egui.
@@ -115,35 +76,78 @@ pub struct State {
     ///
     /// Only one touch will be interpreted as pointer at any time.
     pointer_touch_id: Option<u64>,
+
+    /// track ime state
+    input_method_editor_started: bool,
+
+    #[cfg(feature = "accesskit")]
+    accesskit: Option<accesskit_winit::Adapter>,
 }
 
 impl State {
-    /// Initialize with the native `pixels_per_point` (dpi scaling).
-    pub fn new(window: &winit::window::Window) -> Self {
-        Self::from_pixels_per_point(native_pixels_per_point(window))
+    pub fn new<T>(event_loop: &EventLoopWindowTarget<T>) -> Self {
+        Self::new_with_wayland_display(wayland_display(event_loop))
     }
 
-    /// Initialize with a given dpi scaling.
-    pub fn from_pixels_per_point(pixels_per_point: f32) -> Self {
+    pub fn new_with_wayland_display(wayland_display: Option<*mut c_void>) -> Self {
+        let egui_input = egui::RawInput {
+            has_focus: false, // winit will tell us when we have focus
+            ..Default::default()
+        };
+
         Self {
-            start_time: std::time::Instant::now(),
-            egui_input: egui::RawInput {
-                pixels_per_point: Some(pixels_per_point),
-                ..Default::default()
-            },
+            start_time: instant::Instant::now(),
+            egui_input,
             pointer_pos_in_points: None,
             any_pointer_button_down: false,
-            current_cursor_icon: egui::CursorIcon::Default,
-            current_pixels_per_point: pixels_per_point,
+            current_cursor_icon: None,
+            current_pixels_per_point: 1.0,
 
-            clipboard: Default::default(),
-            screen_reader: screen_reader::ScreenReader::default(),
+            clipboard: clipboard::Clipboard::new(wayland_display),
 
             simulate_touch_screen: false,
             pointer_touch_id: None,
+
+            input_method_editor_started: false,
+
+            #[cfg(feature = "accesskit")]
+            accesskit: None,
         }
     }
 
+    #[cfg(feature = "accesskit")]
+    pub fn init_accesskit<T: From<accesskit_winit::ActionRequestEvent> + Send>(
+        &mut self,
+        window: &winit::window::Window,
+        event_loop_proxy: winit::event_loop::EventLoopProxy<T>,
+        initial_tree_update_factory: impl 'static + FnOnce() -> accesskit::TreeUpdate + Send,
+    ) {
+        self.accesskit = Some(accesskit_winit::Adapter::new(
+            window,
+            initial_tree_update_factory,
+            event_loop_proxy,
+        ));
+    }
+
+    /// Call this once a graphics context has been created to update the maximum texture dimensions
+    /// that egui will use.
+    pub fn set_max_texture_side(&mut self, max_texture_side: usize) {
+        self.egui_input.max_texture_side = Some(max_texture_side);
+    }
+
+    /// Call this when a new native Window is created for rendering to initialize the `pixels_per_point`
+    /// for that window.
+    ///
+    /// In particular, on Android it is necessary to call this after each `Resumed` lifecycle
+    /// event, each time a new native window is created.
+    ///
+    /// Once this has been initialized for a new window then this state will be maintained by handling
+    /// [`winit::event::WindowEvent::ScaleFactorChanged`] events.
+    pub fn set_pixels_per_point(&mut self, pixels_per_point: f32) {
+        self.egui_input.pixels_per_point = Some(pixels_per_point);
+        self.current_pixels_per_point = pixels_per_point;
+    }
+
     /// The number of physical pixels per logical point,
     /// as configured on the current egui context (see [`egui::Context::pixels_per_point`]).
     #[inline]
@@ -160,7 +164,7 @@ impl State {
 
     /// Prepare for a new frame by extracting the accumulated input,
     /// as well as setting [the time](egui::RawInput::time) and [screen rectangle](egui::RawInput::screen_rect).
-    pub fn take_egui_input(&mut self, display: &winit::window::Window) -> egui::RawInput {
+    pub fn take_egui_input(&mut self, window: &winit::window::Window) -> egui::RawInput {
         let pixels_per_point = self.pixels_per_point();
 
         self.egui_input.time = Some(self.start_time.elapsed().as_secs_f64());
@@ -168,7 +172,7 @@ impl State {
         // On Windows, a minimized window will have 0 width and height.
         // See: https://github.com/rust-windowing/winit/issues/208
         // This solves an issue where egui window positions would be changed when minimizing on Windows.
-        let screen_size_in_pixels = screen_size_in_pixels(display);
+        let screen_size_in_pixels = screen_size_in_pixels(window);
         let screen_size_in_points = screen_size_in_pixels / pixels_per_point;
         self.egui_input.screen_rect =
             if screen_size_in_points.x > 0.0 && screen_size_in_points.y > 0.0 {
@@ -186,51 +190,63 @@ impl State {
     /// Call this when there is a new event.
     ///
     /// The result can be found in [`Self::egui_input`] and be extracted with [`Self::take_egui_input`].
-    ///
-    /// Returns `true` if egui wants exclusive use of this event
-    /// (e.g. a mouse click on an egui window, or entering text into a text field).
-    /// For instance, if you use egui for a game, you want to first call this
-    /// and only when this returns `false` pass on the events to your game.
-    ///
-    /// Note that egui uses `tab` to move focus between elements, so this will always return `true` for tabs.
     pub fn on_event(
         &mut self,
         egui_ctx: &egui::Context,
         event: &winit::event::WindowEvent<'_>,
-    ) -> bool {
+    ) -> EventResponse {
         use winit::event::WindowEvent;
         match event {
             WindowEvent::ScaleFactorChanged { scale_factor, .. } => {
                 let pixels_per_point = *scale_factor as f32;
                 self.egui_input.pixels_per_point = Some(pixels_per_point);
                 self.current_pixels_per_point = pixels_per_point;
-                false
+                EventResponse {
+                    repaint: true,
+                    consumed: false,
+                }
             }
             WindowEvent::MouseInput { state, button, .. } => {
                 self.on_mouse_button_input(*state, *button);
-                egui_ctx.wants_pointer_input()
+                EventResponse {
+                    repaint: true,
+                    consumed: egui_ctx.wants_pointer_input(),
+                }
             }
             WindowEvent::MouseWheel { delta, .. } => {
                 self.on_mouse_wheel(*delta);
-                egui_ctx.wants_pointer_input()
+                EventResponse {
+                    repaint: true,
+                    consumed: egui_ctx.wants_pointer_input(),
+                }
             }
             WindowEvent::CursorMoved { position, .. } => {
                 self.on_cursor_moved(*position);
-                egui_ctx.is_using_pointer()
+                EventResponse {
+                    repaint: true,
+                    consumed: egui_ctx.is_using_pointer(),
+                }
             }
             WindowEvent::CursorLeft { .. } => {
                 self.pointer_pos_in_points = None;
                 self.egui_input.events.push(egui::Event::PointerGone);
-                false
+                EventResponse {
+                    repaint: true,
+                    consumed: false,
+                }
             }
             // WindowEvent::TouchpadPressure {device_id, pressure, stage, ..  } => {} // TODO
             WindowEvent::Touch(touch) => {
                 self.on_touch(touch);
-                match touch.phase {
+                let consumed = match touch.phase {
                     winit::event::TouchPhase::Started
                     | winit::event::TouchPhase::Ended
                     | winit::event::TouchPhase::Cancelled => egui_ctx.wants_pointer_input(),
                     winit::event::TouchPhase::Moved => egui_ctx.is_using_pointer(),
+                };
+                EventResponse {
+                    repaint: true,
+                    consumed,
                 }
             }
             WindowEvent::ReceivedCharacter(ch) => {
@@ -239,36 +255,92 @@ impl State {
                 let is_mac_cmd = cfg!(target_os = "macos")
                     && (self.egui_input.modifiers.ctrl || self.egui_input.modifiers.mac_cmd);
 
-                if is_printable_char(*ch) && !is_mac_cmd {
+                let consumed = if is_printable_char(*ch) && !is_mac_cmd {
                     self.egui_input
                         .events
                         .push(egui::Event::Text(ch.to_string()));
                     egui_ctx.wants_keyboard_input()
                 } else {
                     false
+                };
+                EventResponse {
+                    repaint: true,
+                    consumed,
+                }
+            }
+            WindowEvent::Ime(ime) => {
+                // on Mac even Cmd-C is preessed during ime, a `c` is pushed to Preedit.
+                // So no need to check is_mac_cmd.
+                //
+                // How winit produce `Ime::Enabled` and `Ime::Disabled` differs in MacOS
+                // and Windows.
+                //
+                // - On Windows, before and after each Commit will produce an Enable/Disabled
+                // event.
+                // - On MacOS, only when user explicit enable/disable ime. No Disabled
+                // after Commit.
+                //
+                // We use input_method_editor_started to mannualy insert CompositionStart
+                // between Commits.
+                match ime {
+                    winit::event::Ime::Enabled | winit::event::Ime::Disabled => (),
+                    winit::event::Ime::Commit(text) => {
+                        self.input_method_editor_started = false;
+                        self.egui_input
+                            .events
+                            .push(egui::Event::CompositionEnd(text.clone()));
+                    }
+                    winit::event::Ime::Preedit(text, ..) => {
+                        if !self.input_method_editor_started {
+                            self.input_method_editor_started = true;
+                            self.egui_input.events.push(egui::Event::CompositionStart);
+                        }
+                        self.egui_input
+                            .events
+                            .push(egui::Event::CompositionUpdate(text.clone()));
+                    }
+                };
+
+                EventResponse {
+                    repaint: true,
+                    consumed: egui_ctx.wants_keyboard_input(),
                 }
             }
             WindowEvent::KeyboardInput { input, .. } => {
                 self.on_keyboard_input(input);
-                egui_ctx.wants_keyboard_input()
-                    || input.virtual_keycode == Some(winit::event::VirtualKeyCode::Tab)
+                let consumed = egui_ctx.wants_keyboard_input()
+                    || input.virtual_keycode == Some(winit::event::VirtualKeyCode::Tab);
+                EventResponse {
+                    repaint: true,
+                    consumed,
+                }
             }
-            WindowEvent::Focused(_) => {
+            WindowEvent::Focused(has_focus) => {
+                self.egui_input.has_focus = *has_focus;
                 // We will not be given a KeyboardInput event when the modifiers are released while
                 // the window does not have focus. Unset all modifier state to be safe.
                 self.egui_input.modifiers = egui::Modifiers::default();
-                false
+                EventResponse {
+                    repaint: true,
+                    consumed: false,
+                }
             }
             WindowEvent::HoveredFile(path) => {
                 self.egui_input.hovered_files.push(egui::HoveredFile {
                     path: Some(path.clone()),
                     ..Default::default()
                 });
-                false
+                EventResponse {
+                    repaint: true,
+                    consumed: false,
+                }
             }
             WindowEvent::HoveredFileCancelled => {
                 self.egui_input.hovered_files.clear();
-                false
+                EventResponse {
+                    repaint: true,
+                    consumed: false,
+                }
             }
             WindowEvent::DroppedFile(path) => {
                 self.egui_input.hovered_files.clear();
@@ -276,15 +348,71 @@ impl State {
                     path: Some(path.clone()),
                     ..Default::default()
                 });
-                false
+                EventResponse {
+                    repaint: true,
+                    consumed: false,
+                }
             }
-            _ => {
-                // dbg!(event);
-                false
+            WindowEvent::ModifiersChanged(state) => {
+                self.egui_input.modifiers.alt = state.alt();
+                self.egui_input.modifiers.ctrl = state.ctrl();
+                self.egui_input.modifiers.shift = state.shift();
+                self.egui_input.modifiers.mac_cmd = cfg!(target_os = "macos") && state.logo();
+                self.egui_input.modifiers.command = if cfg!(target_os = "macos") {
+                    state.logo()
+                } else {
+                    state.ctrl()
+                };
+                EventResponse {
+                    repaint: true,
+                    consumed: false,
+                }
+            }
+
+            // Things that may require repaint:
+            WindowEvent::CloseRequested
+            | WindowEvent::CursorEntered { .. }
+            | WindowEvent::Destroyed
+            | WindowEvent::Occluded(_)
+            | WindowEvent::Resized(_)
+            | WindowEvent::ThemeChanged(_)
+            | WindowEvent::TouchpadPressure { .. } => EventResponse {
+                repaint: true,
+                consumed: false,
+            },
+
+            // Things we completely ignore:
+            WindowEvent::AxisMotion { .. }
+            | WindowEvent::Moved(_)
+            | WindowEvent::SmartMagnify { .. }
+            | WindowEvent::TouchpadRotate { .. } => EventResponse {
+                repaint: false,
+                consumed: false,
+            },
+
+            WindowEvent::TouchpadMagnify { delta, .. } => {
+                // Positive delta values indicate magnification (zooming in).
+                // Negative delta values indicate shrinking (zooming out).
+                let zoom_factor = (*delta as f32).exp();
+                self.egui_input.events.push(egui::Event::Zoom(zoom_factor));
+                EventResponse {
+                    repaint: true,
+                    consumed: egui_ctx.wants_pointer_input(),
+                }
             }
         }
     }
 
+    /// Call this when there is a new [`accesskit::ActionRequest`].
+    ///
+    /// The result can be found in [`Self::egui_input`] and be extracted with [`Self::take_egui_input`].
+    #[cfg(feature = "accesskit")]
+    pub fn on_accesskit_action_request(&mut self, request: accesskit::ActionRequest) {
+        self.egui_input
+            .events
+            .push(egui::Event::AccessKitActionRequest(request));
+    }
+
     fn on_mouse_button_input(
         &mut self,
         state: winit::event::ElementState,
@@ -421,7 +549,7 @@ impl State {
     }
 
     fn on_mouse_wheel(&mut self, delta: winit::event::MouseScrollDelta) {
-        let mut delta = match delta {
+        let delta = match delta {
             winit::event::MouseScrollDelta::LineDelta(x, y) => {
                 let points_per_scroll_line = 50.0; // Scroll speed decided by consensus: https://github.com/emilk/egui/issues/461
                 egui::vec2(x, y) * points_per_scroll_line
@@ -430,46 +558,26 @@ impl State {
                 egui::vec2(delta.x as f32, delta.y as f32) / self.pixels_per_point()
             }
         };
-        if cfg!(target_os = "macos") {
-            // This is still buggy in winit despite
-            // https://github.com/rust-windowing/winit/issues/1695 being closed
-            delta.x *= -1.0;
-        }
 
         if self.egui_input.modifiers.ctrl || self.egui_input.modifiers.command {
             // Treat as zoom instead:
-            self.egui_input.zoom_delta *= (delta.y / 200.0).exp();
+            let factor = (delta.y / 200.0).exp();
+            self.egui_input.events.push(egui::Event::Zoom(factor));
+        } else if self.egui_input.modifiers.shift {
+            // Treat as horizontal scrolling.
+            // Note: one Mac we already get horizontal scroll events when shift is down.
+            self.egui_input
+                .events
+                .push(egui::Event::Scroll(egui::vec2(delta.x + delta.y, 0.0)));
         } else {
-            self.egui_input.scroll_delta += delta;
+            self.egui_input.events.push(egui::Event::Scroll(delta));
         }
     }
 
     fn on_keyboard_input(&mut self, input: &winit::event::KeyboardInput) {
         if let Some(keycode) = input.virtual_keycode {
-            use winit::event::VirtualKeyCode;
-
             let pressed = input.state == winit::event::ElementState::Pressed;
 
-            // We could also use `WindowEvent::ModifiersChanged` instead, I guess.
-            if matches!(keycode, VirtualKeyCode::LAlt | VirtualKeyCode::RAlt) {
-                self.egui_input.modifiers.alt = pressed;
-            }
-            if matches!(keycode, VirtualKeyCode::LControl | VirtualKeyCode::RControl) {
-                self.egui_input.modifiers.ctrl = pressed;
-                if !cfg!(target_os = "macos") {
-                    self.egui_input.modifiers.command = pressed;
-                }
-            }
-            if matches!(keycode, VirtualKeyCode::LShift | VirtualKeyCode::RShift) {
-                self.egui_input.modifiers.shift = pressed;
-            }
-            if cfg!(target_os = "macos")
-                && matches!(keycode, VirtualKeyCode::LWin | VirtualKeyCode::RWin)
-            {
-                self.egui_input.modifiers.mac_cmd = pressed;
-                self.egui_input.modifiers.command = pressed;
-            }
-
             if pressed {
                 // VirtualKeyCode::Paste etc in winit are broken/untrustworthy,
                 // so we detect these things manually:
@@ -479,7 +587,10 @@ impl State {
                     self.egui_input.events.push(egui::Event::Copy);
                 } else if is_paste_command(self.egui_input.modifiers, keycode) {
                     if let Some(contents) = self.clipboard.get() {
-                        self.egui_input.events.push(egui::Event::Text(contents));
+                        let contents = contents.replace("\r\n", "\n");
+                        if !contents.is_empty() {
+                            self.egui_input.events.push(egui::Event::Paste(contents));
+                        }
                     }
                 }
             }
@@ -488,6 +599,7 @@ impl State {
                 self.egui_input.events.push(egui::Event::Key {
                     key,
                     pressed,
+                    repeat: false, // egui will fill this in for us!
                     modifiers: self.egui_input.modifiers,
                 });
             }
@@ -502,85 +614,79 @@ impl State {
     /// * open any clicked urls
     /// * update the IME
     /// *
-    pub fn handle_output(
+    pub fn handle_platform_output(
         &mut self,
         window: &winit::window::Window,
         egui_ctx: &egui::Context,
-        output: egui::Output,
+        platform_output: egui::PlatformOutput,
     ) {
+        let egui::PlatformOutput {
+            cursor_icon,
+            open_url,
+            copied_text,
+            events: _,                    // handled above
+            mutable_text_under_cursor: _, // only used in eframe web
+            text_cursor_pos,
+            #[cfg(feature = "accesskit")]
+            accesskit_update,
+        } = platform_output;
         self.current_pixels_per_point = egui_ctx.pixels_per_point(); // someone can have changed it to scale the UI
 
-        if egui_ctx.memory().options.screen_reader {
-            self.screen_reader.speak(&output.events_description());
+        self.set_cursor_icon(window, cursor_icon);
+
+        if let Some(open_url) = open_url {
+            open_url_in_browser(&open_url.url);
         }
 
-        self.set_cursor_icon(window, output.cursor_icon);
-
-        if let Some(open) = output.open_url {
-            open_url(&open.url);
+        if !copied_text.is_empty() {
+            self.clipboard.set(copied_text);
         }
 
-        if !output.copied_text.is_empty() {
-            self.clipboard.set(output.copied_text);
+        if let Some(egui::Pos2 { x, y }) = text_cursor_pos {
+            window.set_ime_position(winit::dpi::LogicalPosition { x, y });
         }
 
-        if let Some(egui::Pos2 { x, y }) = output.text_cursor_pos {
-            window.set_ime_position(winit::dpi::LogicalPosition { x, y })
-        }
-    }
-
-    /// Returns `true` if Alt-F4 (windows/linux) or Cmd-Q (Mac)
-    pub fn is_quit_shortcut(&self, input: &winit::event::KeyboardInput) -> bool {
-        if cfg!(target_os = "macos") {
-            input.state == winit::event::ElementState::Pressed
-                && self.egui_input.modifiers.mac_cmd
-                && input.virtual_keycode == Some(winit::event::VirtualKeyCode::Q)
-        } else {
-            input.state == winit::event::ElementState::Pressed
-                && self.egui_input.modifiers.alt
-                && input.virtual_keycode == Some(winit::event::VirtualKeyCode::F4)
-        }
-    }
-
-    /// Returns `true` if this a close event or a Cmd-Q/Alt-F4 keyboard command.
-    pub fn is_quit_event(&self, event: &winit::event::WindowEvent<'_>) -> bool {
-        use winit::event::WindowEvent;
-        match event {
-            WindowEvent::CloseRequested | WindowEvent::Destroyed => true,
-            WindowEvent::KeyboardInput { input, .. } => self.is_quit_shortcut(input),
-            _ => false,
+        #[cfg(feature = "accesskit")]
+        if let Some(accesskit) = self.accesskit.as_ref() {
+            if let Some(update) = accesskit_update {
+                accesskit.update_if_active(|| update);
+            }
         }
     }
 
     fn set_cursor_icon(&mut self, window: &winit::window::Window, cursor_icon: egui::CursorIcon) {
-        // prevent flickering near frame boundary when Windows OS tries to control cursor icon for window resizing
-        if self.current_cursor_icon == cursor_icon {
+        if self.current_cursor_icon == Some(cursor_icon) {
+            // Prevent flickering near frame boundary when Windows OS tries to control cursor icon for window resizing.
+            // On other platforms: just early-out to save CPU.
             return;
         }
-        self.current_cursor_icon = cursor_icon;
 
-        if let Some(cursor_icon) = translate_cursor(cursor_icon) {
-            window.set_cursor_visible(true);
+        let is_pointer_in_window = self.pointer_pos_in_points.is_some();
+        if is_pointer_in_window {
+            self.current_cursor_icon = Some(cursor_icon);
 
-            let is_pointer_in_window = self.pointer_pos_in_points.is_some();
-            if is_pointer_in_window {
-                window.set_cursor_icon(cursor_icon);
+            if let Some(winit_cursor_icon) = translate_cursor(cursor_icon) {
+                window.set_cursor_visible(true);
+                window.set_cursor_icon(winit_cursor_icon);
+            } else {
+                window.set_cursor_visible(false);
             }
         } else {
-            window.set_cursor_visible(false);
+            // Remember to set the cursor again once the cursor returns to the screen:
+            self.current_cursor_icon = None;
         }
     }
 }
 
-fn open_url(_url: &str) {
+fn open_url_in_browser(_url: &str) {
     #[cfg(feature = "webbrowser")]
     if let Err(err) = webbrowser::open(_url) {
-        eprintln!("Failed to open url: {}", err);
+        tracing::warn!("Failed to open url: {}", err);
     }
 
     #[cfg(not(feature = "webbrowser"))]
     {
-        eprintln!("Cannot open url - feature \"links\" not enabled.");
+        tracing::warn!("Cannot open url - feature \"links\" not enabled.");
     }
 }
 
@@ -622,6 +728,8 @@ fn translate_mouse_button(button: winit::event::MouseButton) -> Option<egui::Poi
         winit::event::MouseButton::Left => Some(egui::PointerButton::Primary),
         winit::event::MouseButton::Right => Some(egui::PointerButton::Secondary),
         winit::event::MouseButton::Middle => Some(egui::PointerButton::Middle),
+        winit::event::MouseButton::Other(1) => Some(egui::PointerButton::Extra1),
+        winit::event::MouseButton::Other(2) => Some(egui::PointerButton::Extra2),
         winit::event::MouseButton::Other(_) => None,
     }
 }
@@ -649,6 +757,11 @@ fn translate_virtual_key_code(key: winit::event::VirtualKeyCode) -> Option<egui:
         VirtualKeyCode::PageUp => Key::PageUp,
         VirtualKeyCode::PageDown => Key::PageDown,
 
+        VirtualKeyCode::Minus => Key::Minus,
+        // Using Mac the key with the Plus sign on it is reported as the Equals key
+        // (with both English and Swedish keyboard).
+        VirtualKeyCode::Equals => Key::PlusEquals,
+
         VirtualKeyCode::Key0 | VirtualKeyCode::Numpad0 => Key::Num0,
         VirtualKeyCode::Key1 | VirtualKeyCode::Numpad1 => Key::Num1,
         VirtualKeyCode::Key2 | VirtualKeyCode::Numpad2 => Key::Num2,
@@ -687,6 +800,27 @@ fn translate_virtual_key_code(key: winit::event::VirtualKeyCode) -> Option<egui:
         VirtualKeyCode::Y => Key::Y,
         VirtualKeyCode::Z => Key::Z,
 
+        VirtualKeyCode::F1 => Key::F1,
+        VirtualKeyCode::F2 => Key::F2,
+        VirtualKeyCode::F3 => Key::F3,
+        VirtualKeyCode::F4 => Key::F4,
+        VirtualKeyCode::F5 => Key::F5,
+        VirtualKeyCode::F6 => Key::F6,
+        VirtualKeyCode::F7 => Key::F7,
+        VirtualKeyCode::F8 => Key::F8,
+        VirtualKeyCode::F9 => Key::F9,
+        VirtualKeyCode::F10 => Key::F10,
+        VirtualKeyCode::F11 => Key::F11,
+        VirtualKeyCode::F12 => Key::F12,
+        VirtualKeyCode::F13 => Key::F13,
+        VirtualKeyCode::F14 => Key::F14,
+        VirtualKeyCode::F15 => Key::F15,
+        VirtualKeyCode::F16 => Key::F16,
+        VirtualKeyCode::F17 => Key::F17,
+        VirtualKeyCode::F18 => Key::F18,
+        VirtualKeyCode::F19 => Key::F19,
+        VirtualKeyCode::F20 => Key::F20,
+
         _ => {
             return None;
         }
@@ -712,10 +846,23 @@ fn translate_cursor(cursor_icon: egui::CursorIcon) -> Option<winit::window::Curs
         egui::CursorIcon::NotAllowed => Some(winit::window::CursorIcon::NotAllowed),
         egui::CursorIcon::PointingHand => Some(winit::window::CursorIcon::Hand),
         egui::CursorIcon::Progress => Some(winit::window::CursorIcon::Progress),
+
         egui::CursorIcon::ResizeHorizontal => Some(winit::window::CursorIcon::EwResize),
         egui::CursorIcon::ResizeNeSw => Some(winit::window::CursorIcon::NeswResize),
         egui::CursorIcon::ResizeNwSe => Some(winit::window::CursorIcon::NwseResize),
         egui::CursorIcon::ResizeVertical => Some(winit::window::CursorIcon::NsResize),
+
+        egui::CursorIcon::ResizeEast => Some(winit::window::CursorIcon::EResize),
+        egui::CursorIcon::ResizeSouthEast => Some(winit::window::CursorIcon::SeResize),
+        egui::CursorIcon::ResizeSouth => Some(winit::window::CursorIcon::SResize),
+        egui::CursorIcon::ResizeSouthWest => Some(winit::window::CursorIcon::SwResize),
+        egui::CursorIcon::ResizeWest => Some(winit::window::CursorIcon::WResize),
+        egui::CursorIcon::ResizeNorthWest => Some(winit::window::CursorIcon::NwResize),
+        egui::CursorIcon::ResizeNorth => Some(winit::window::CursorIcon::NResize),
+        egui::CursorIcon::ResizeNorthEast => Some(winit::window::CursorIcon::NeResize),
+        egui::CursorIcon::ResizeColumn => Some(winit::window::CursorIcon::ColResize),
+        egui::CursorIcon::ResizeRow => Some(winit::window::CursorIcon::RowResize),
+
         egui::CursorIcon::Text => Some(winit::window::CursorIcon::Text),
         egui::CursorIcon::VerticalText => Some(winit::window::CursorIcon::VerticalText),
         egui::CursorIcon::Wait => Some(winit::window::CursorIcon::Wait),
@@ -723,3 +870,51 @@ fn translate_cursor(cursor_icon: egui::CursorIcon) -> Option<winit::window::Curs
         egui::CursorIcon::ZoomOut => Some(winit::window::CursorIcon::ZoomOut),
     }
 }
+
+/// Returns a Wayland display handle if the target is running Wayland
+fn wayland_display<T>(_event_loop: &EventLoopWindowTarget<T>) -> Option<*mut c_void> {
+    #[cfg(feature = "wayland")]
+    #[cfg(any(
+        target_os = "linux",
+        target_os = "dragonfly",
+        target_os = "freebsd",
+        target_os = "netbsd",
+        target_os = "openbsd"
+    ))]
+    {
+        use winit::platform::wayland::EventLoopWindowTargetExtWayland as _;
+        return _event_loop.wayland_display();
+    }
+
+    #[allow(unreachable_code)]
+    {
+        let _ = _event_loop;
+        None
+    }
+}
+
+// ---------------------------------------------------------------------------
+
+/// Profiling macro for feature "puffin"
+#[allow(unused_macros)]
+macro_rules! profile_function {
+    ($($arg: tt)*) => {
+        #[cfg(feature = "puffin")]
+        puffin::profile_function!($($arg)*);
+    };
+}
+
+#[allow(unused_imports)]
+pub(crate) use profile_function;
+
+/// Profiling macro for feature "puffin"
+#[allow(unused_macros)]
+macro_rules! profile_scope {
+    ($($arg: tt)*) => {
+        #[cfg(feature = "puffin")]
+        puffin::profile_scope!($($arg)*);
+    };
+}
+
+#[allow(unused_imports)]
+pub(crate) use profile_scope;

crates/egui-winit/src/window_settings.rs

@@ -0,0 +1,144 @@
+/// Can be used to store native window settings (position and size).
+#[derive(Clone, Copy, Debug)]
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+pub struct WindowSettings {
+    /// Position of window in physical pixels. This is either
+    /// the inner or outer position depending on the platform.
+    /// See [`winit::window::WindowBuilder::with_position`] for details.
+    position: Option<egui::Pos2>,
+
+    fullscreen: bool,
+
+    /// Inner size of window in logical pixels
+    inner_size_points: Option<egui::Vec2>,
+}
+
+impl WindowSettings {
+    pub fn from_display(window: &winit::window::Window) -> Self {
+        let inner_size_points = window.inner_size().to_logical::<f32>(window.scale_factor());
+        let position = if cfg!(macos) {
+            // MacOS uses inner position when positioning windows.
+            window
+                .inner_position()
+                .ok()
+                .map(|p| egui::pos2(p.x as f32, p.y as f32))
+        } else {
+            // Other platforms use the outer position.
+            window
+                .outer_position()
+                .ok()
+                .map(|p| egui::pos2(p.x as f32, p.y as f32))
+        };
+
+        Self {
+            position,
+
+            fullscreen: window.fullscreen().is_some(),
+
+            inner_size_points: Some(egui::vec2(
+                inner_size_points.width,
+                inner_size_points.height,
+            )),
+        }
+    }
+
+    pub fn inner_size_points(&self) -> Option<egui::Vec2> {
+        self.inner_size_points
+    }
+
+    pub fn initialize_window(
+        &self,
+        mut window: winit::window::WindowBuilder,
+    ) -> winit::window::WindowBuilder {
+        // If the app last ran on two monitors and only one is now connected, then
+        // the given position is invalid.
+        // If this happens on Mac, the window is clamped into valid area.
+        // If this happens on Windows, the clamping behavior is managed by the function
+        // clamp_window_to_sane_position.
+        if let Some(pos) = self.position {
+            window = window.with_position(winit::dpi::PhysicalPosition {
+                x: pos.x as f64,
+                y: pos.y as f64,
+            });
+        }
+
+        if let Some(inner_size_points) = self.inner_size_points {
+            window
+                .with_inner_size(winit::dpi::LogicalSize {
+                    width: inner_size_points.x as f64,
+                    height: inner_size_points.y as f64,
+                })
+                .with_fullscreen(
+                    self.fullscreen
+                        .then_some(winit::window::Fullscreen::Borderless(None)),
+                )
+        } else {
+            window
+        }
+    }
+
+    pub fn clamp_to_sane_values(&mut self, max_size: egui::Vec2) {
+        use egui::NumExt as _;
+
+        if let Some(size) = &mut self.inner_size_points {
+            // Prevent ridiculously small windows
+            let min_size = egui::Vec2::splat(64.0);
+            *size = size.at_least(min_size);
+            *size = size.at_most(max_size);
+        }
+    }
+
+    pub fn clamp_window_to_sane_position<E>(
+        &mut self,
+        event_loop: &winit::event_loop::EventLoopWindowTarget<E>,
+    ) {
+        if let (Some(position), Some(inner_size_points)) =
+            (&mut self.position, &self.inner_size_points)
+        {
+            let monitors = event_loop.available_monitors();
+            // default to primary monitor, in case the correct monitor was disconnected.
+            let mut active_monitor = if let Some(active_monitor) = event_loop
+                .primary_monitor()
+                .or_else(|| event_loop.available_monitors().next())
+            {
+                active_monitor
+            } else {
+                return; // no monitors 🤷
+            };
+            for monitor in monitors {
+                let monitor_x_range = (monitor.position().x - inner_size_points.x as i32)
+                    ..(monitor.position().x + monitor.size().width as i32);
+                let monitor_y_range = (monitor.position().y - inner_size_points.y as i32)
+                    ..(monitor.position().y + monitor.size().height as i32);
+
+                if monitor_x_range.contains(&(position.x as i32))
+                    && monitor_y_range.contains(&(position.y as i32))
+                {
+                    active_monitor = monitor;
+                }
+            }
+
+            let mut inner_size_pixels = *inner_size_points * (active_monitor.scale_factor() as f32);
+            // Add size of title bar. This is 32 px by default in Win 10/11.
+            if cfg!(target_os = "windows") {
+                inner_size_pixels +=
+                    egui::Vec2::new(0.0, 32.0 * active_monitor.scale_factor() as f32);
+            }
+            let monitor_position = egui::Pos2::new(
+                active_monitor.position().x as f32,
+                active_monitor.position().y as f32,
+            );
+            let monitor_size = egui::Vec2::new(
+                active_monitor.size().width as f32,
+                active_monitor.size().height as f32,
+            );
+
+            // Window size cannot be negative or the subsequent `clamp` will panic.
+            let window_size = (monitor_size - inner_size_pixels).max(egui::Vec2::ZERO);
+            // To get the maximum position, we get the rightmost corner of the display, then
+            // subtract the size of the window to get the bottom right most value window.position
+            // can have.
+            *position = position.clamp(monitor_position, monitor_position + window_size);
+        }
+    }
+}

crates/egui/Cargo.toml

@@ -0,0 +1,84 @@
+[package]
+name = "egui"
+version = "0.21.0"
+authors = ["Emil Ernerfeldt <emil.ernerfeldt@gmail.com>"]
+description = "An easy-to-use immediate mode GUI that runs on both web and native"
+edition = "2021"
+rust-version = "1.65"
+homepage = "https://github.com/emilk/egui"
+license = "MIT OR Apache-2.0"
+readme = "../../README.md"
+repository = "https://github.com/emilk/egui"
+categories = ["gui", "game-development"]
+keywords = ["gui", "imgui", "immediate", "portable", "gamedev"]
+include = ["../LICENSE-APACHE", "../LICENSE-MIT", "**/*.rs", "Cargo.toml"]
+
+[package.metadata.docs.rs]
+all-features = true
+
+[lib]
+
+
+[features]
+default = ["default_fonts"]
+
+## [`bytemuck`](https://docs.rs/bytemuck) enables you to cast [`epaint::Vertex`], [`emath::Vec2`] etc to `&[u8]`.
+bytemuck = ["epaint/bytemuck"]
+
+## [`cint`](https://docs.rs/cint) enables interopability with other color libraries.
+cint = ["epaint/cint"]
+
+## Enable the [`hex_color`] macro.
+color-hex = ["epaint/color-hex"]
+
+## This will automatically detect deadlocks due to double-locking on the same thread.
+## If your app freezes, you may want to enable this!
+## Only affects [`epaint::mutex::RwLock`] (which egui uses a lot).
+deadlock_detection = ["epaint/deadlock_detection"]
+
+## If set, egui will use `include_bytes!` to bundle some fonts.
+## If you plan on specifying your own fonts you may disable this feature.
+default_fonts = ["epaint/default_fonts"]
+
+## Enable additional checks if debug assertions are enabled (debug builds).
+extra_debug_asserts = ["epaint/extra_debug_asserts"]
+## Always enable additional checks.
+extra_asserts = ["epaint/extra_asserts"]
+
+## [`mint`](https://docs.rs/mint) enables interopability with other math libraries such as [`glam`](https://docs.rs/glam) and [`nalgebra`](https://docs.rs/nalgebra).
+mint = ["epaint/mint"]
+
+## Enable persistence of memory (window positions etc).
+persistence = ["serde", "epaint/serde", "ron"]
+
+## Allow serialization using [`serde`](https://docs.rs/serde).
+serde = ["dep:serde", "epaint/serde", "accesskit?/serde"]
+
+## Change Vertex layout to be compatible with unity
+unity = ["epaint/unity"]
+
+
+[dependencies]
+epaint = { version = "0.21.0", path = "../epaint", default-features = false }
+
+ahash = { version = "0.8.1", default-features = false, features = [
+    "no-rng", # we don't need DOS-protection, so we let users opt-in to it instead
+    "std",
+] }
+nohash-hasher = "0.2"
+
+#! ### Optional dependencies
+## Exposes detailed accessibility implementation required by platform
+## accessibility APIs. Also requires support in the egui integration.
+accesskit = { version = "0.9.0", optional = true }
+
+## Enable this when generating docs.
+document-features = { version = "0.2", optional = true }
+
+ron = { version = "0.8", optional = true }
+serde = { version = "1", optional = true, features = ["derive", "rc"] }
+
+# egui doesn't log much, but when it does, it uses [`tracing`](https://docs.rs/tracing).
+tracing = { version = "0.1", optional = true, default-features = false, features = [
+    "std",
+] }

crates/egui/examples/README.md

@@ -0,0 +1,7 @@
+There are no stand-alone egui examples, because egui is not stand-alone!
+
+See the top-level [examples](https://github.com/emilk/egui/tree/master/examples/) folder instead.
+
+There are also plenty of examples in [the online demo](https://www.egui.rs/#demo). You can find the source code for it at <https://github.com/emilk/egui/tree/master/crates/egui_demo_lib>.
+
+To learn how to set up `eframe` for web and native, go to <https://github.com/emilk/eframe_template/> and follow the instructions there!

crates/egui/src/animation_manager.rs

@@ -0,0 +1,114 @@
+use crate::{emath::remap_clamp, Id, IdMap, InputState};
+
+#[derive(Clone, Default)]
+pub(crate) struct AnimationManager {
+    bools: IdMap<BoolAnim>,
+    values: IdMap<ValueAnim>,
+}
+
+#[derive(Clone, Debug)]
+struct BoolAnim {
+    value: bool,
+
+    /// when did `value` last toggle?
+    toggle_time: f64,
+}
+
+#[derive(Clone, Debug)]
+struct ValueAnim {
+    from_value: f32,
+
+    to_value: f32,
+
+    /// when did `value` last toggle?
+    toggle_time: f64,
+}
+
+impl AnimationManager {
+    /// See `Context::animate_bool` for documentation
+    pub fn animate_bool(
+        &mut self,
+        input: &InputState,
+        animation_time: f32,
+        id: Id,
+        value: bool,
+    ) -> f32 {
+        match self.bools.get_mut(&id) {
+            None => {
+                self.bools.insert(
+                    id,
+                    BoolAnim {
+                        value,
+                        toggle_time: -f64::INFINITY, // long time ago
+                    },
+                );
+                if value {
+                    1.0
+                } else {
+                    0.0
+                }
+            }
+            Some(anim) => {
+                if anim.value != value {
+                    anim.value = value;
+                    anim.toggle_time = input.time;
+                }
+
+                let time_since_toggle = (input.time - anim.toggle_time) as f32;
+
+                // On the frame we toggle we don't want to return the old value,
+                // so we extrapolate forwards:
+                let time_since_toggle = time_since_toggle + input.predicted_dt;
+
+                if value {
+                    remap_clamp(time_since_toggle, 0.0..=animation_time, 0.0..=1.0)
+                } else {
+                    remap_clamp(time_since_toggle, 0.0..=animation_time, 1.0..=0.0)
+                }
+            }
+        }
+    }
+
+    pub fn animate_value(
+        &mut self,
+        input: &InputState,
+        animation_time: f32,
+        id: Id,
+        value: f32,
+    ) -> f32 {
+        match self.values.get_mut(&id) {
+            None => {
+                self.values.insert(
+                    id,
+                    ValueAnim {
+                        from_value: value,
+                        to_value: value,
+                        toggle_time: -f64::INFINITY, // long time ago
+                    },
+                );
+                value
+            }
+            Some(anim) => {
+                let time_since_toggle = (input.time - anim.toggle_time) as f32;
+                // On the frame we toggle we don't want to return the old value,
+                // so we extrapolate forwards:
+                let time_since_toggle = time_since_toggle + input.predicted_dt;
+                let current_value = remap_clamp(
+                    time_since_toggle,
+                    0.0..=animation_time,
+                    anim.from_value..=anim.to_value,
+                );
+                if anim.to_value != value {
+                    anim.from_value = current_value; //start new animation from current position of playing animation
+                    anim.to_value = value;
+                    anim.toggle_time = input.time;
+                }
+                if animation_time == 0.0 {
+                    anim.from_value = value;
+                    anim.to_value = value;
+                }
+                current_value
+            }
+        }
+    }
+}

crates/egui/src/containers/area.rs

@@ -1,17 +1,18 @@
-//! Area is a `Ui` that has no parent, it floats on the background.
+//! Area is a [`Ui`] that has no parent, it floats on the background.
 //! It has no frame or own size. It is potentially movable.
 //! It is the foundation for windows and popups.
 
-use std::{fmt::Debug, hash::Hash};
-
 use crate::*;
 
-/// State that is persisted between frames
+/// State that is persisted between frames.
+// TODO(emilk): this is not currently stored in `Memory::data`, but maybe it should be?
 #[derive(Clone, Copy, Debug)]
 #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
 pub(crate) struct State {
-    /// Last known pos
-    pub pos: Pos2,
+    /// Last known pos of the pivot
+    pub pivot_pos: Pos2,
+
+    pub pivot: Align2,
 
     /// Last know size. Used for catching clicks.
     pub size: Vec2,
@@ -22,8 +23,22 @@ pub(crate) struct State {
 }
 
 impl State {
+    pub fn left_top_pos(&self) -> Pos2 {
+        pos2(
+            self.pivot_pos.x - self.pivot.x().to_factor() * self.size.x,
+            self.pivot_pos.y - self.pivot.y().to_factor() * self.size.y,
+        )
+    }
+
+    pub fn set_left_top_pos(&mut self, pos: Pos2) {
+        self.pivot_pos = pos2(
+            pos.x + self.pivot.x().to_factor() * self.size.x,
+            pos.y + self.pivot.y().to_factor() * self.size.y,
+        );
+    }
+
     pub fn rect(&self) -> Rect {
-        Rect::from_min_size(self.pos, self.size)
+        Rect::from_min_size(self.left_top_pos(), self.size)
     }
 }
 
@@ -32,14 +47,14 @@ impl State {
 /// This forms the base of the [`Window`] container.
 ///
 /// ```
-/// # let mut ctx = egui::CtxRef::default();
-/// # ctx.begin_frame(Default::default());
-/// # let ctx = &ctx;
+/// # egui::__run_test_ctx(|ctx| {
 /// egui::Area::new("my_area")
 ///     .fixed_pos(egui::pos2(32.0, 32.0))
 ///     .show(ctx, |ui| {
 ///         ui.label("Floating text!");
 ///     });
+/// # });
+/// ```
 #[must_use = "You should call .show()"]
 #[derive(Clone, Copy, Debug)]
 pub struct Area {
@@ -47,23 +62,27 @@ pub struct Area {
     movable: bool,
     interactable: bool,
     enabled: bool,
+    constrain: bool,
     order: Order,
     default_pos: Option<Pos2>,
+    pivot: Align2,
     anchor: Option<(Align2, Vec2)>,
     new_pos: Option<Pos2>,
     drag_bounds: Option<Rect>,
 }
 
 impl Area {
-    pub fn new(id_source: impl Hash) -> Self {
+    pub fn new(id: impl Into<Id>) -> Self {
         Self {
-            id: Id::new(id_source),
+            id: id.into(),
             movable: true,
             interactable: true,
+            constrain: false,
             enabled: true,
             order: Order::Middle,
             default_pos: None,
             new_pos: None,
+            pivot: Align2::LEFT_TOP,
             anchor: None,
             drag_bounds: None,
         }
@@ -128,6 +147,24 @@ impl Area {
         self
     }
 
+    /// Constrains this area to the screen bounds.
+    pub fn constrain(mut self, constrain: bool) -> Self {
+        self.constrain = constrain;
+        self
+    }
+
+    /// Where the "root" of the area is.
+    ///
+    /// For instance, if you set this to [`Align2::RIGHT_TOP`]
+    /// then [`Self::fixed_pos`] will set the position of the right-top
+    /// corner of the area.
+    ///
+    /// Default: [`Align2::LEFT_TOP`].
+    pub fn pivot(mut self, pivot: Align2) -> Self {
+        self.pivot = pivot;
+        self
+    }
+
     /// Positions the window but you can still move it.
     pub fn current_pos(mut self, current_pos: impl Into<Pos2>) -> Self {
         self.new_pos = Some(current_pos.into());
@@ -168,15 +205,22 @@ impl Area {
 pub(crate) struct Prepared {
     layer_id: LayerId,
     state: State,
-    pub(crate) movable: bool,
+    move_response: Response,
     enabled: bool,
     drag_bounds: Option<Rect>,
+
+    /// We always make windows invisible the first frame to hide "first-frame-jitters".
+    ///
+    /// This is so that we use the first frame to calculate the window size,
+    /// and then can correctly position the window and its contents the next frame,
+    /// without having one frame where the window is wrongly positioned or sized.
+    temporarily_invisible: bool,
 }
 
 impl Area {
     pub fn show<R>(
         self,
-        ctx: &CtxRef,
+        ctx: &Context,
         add_contents: impl FnOnce(&mut Ui) -> R,
     ) -> InnerResponse<R> {
         let prepared = self.begin(ctx);
@@ -186,7 +230,7 @@ impl Area {
         InnerResponse { inner, response }
     }
 
-    pub(crate) fn begin(self, ctx: &CtxRef) -> Prepared {
+    pub(crate) fn begin(self, ctx: &Context) -> Prepared {
         let Area {
             id,
             movable,
@@ -195,43 +239,99 @@ impl Area {
             enabled,
             default_pos,
             new_pos,
+            pivot,
             anchor,
             drag_bounds,
+            constrain,
         } = self;
 
         let layer_id = LayerId::new(order, id);
 
-        let state = ctx.memory().areas.get(id).cloned();
+        let state = ctx.memory(|mem| mem.areas.get(id).copied());
         let is_new = state.is_none();
+        if is_new {
+            ctx.request_repaint(); // if we don't know the previous size we are likely drawing the area in the wrong place
+        }
         let mut state = state.unwrap_or_else(|| State {
-            pos: default_pos.unwrap_or_else(|| automatic_area_position(ctx)),
+            pivot_pos: default_pos.unwrap_or_else(|| automatic_area_position(ctx)),
+            pivot,
             size: Vec2::ZERO,
             interactable,
         });
-        state.pos = new_pos.unwrap_or(state.pos);
+        state.pivot_pos = new_pos.unwrap_or(state.pivot_pos);
+        state.interactable = interactable;
 
         if let Some((anchor, offset)) = anchor {
-            if is_new {
-                // unknown size
-                ctx.request_repaint()
-            } else {
-                let screen = ctx.available_rect();
-                state.pos = anchor.align_size_within_rect(state.size, screen).min + offset;
-            }
+            let screen = ctx.available_rect();
+            state.set_left_top_pos(
+                anchor.align_size_within_rect(state.size, screen).left_top() + offset,
+            );
         }
 
-        state.pos = ctx.round_pos_to_pixels(state.pos);
+        // interact right away to prevent frame-delay
+        let move_response = {
+            let interact_id = layer_id.id.with("move");
+            let sense = if movable {
+                Sense::click_and_drag()
+            } else if interactable {
+                Sense::click() // allow clicks to bring to front
+            } else {
+                Sense::hover()
+            };
+
+            let move_response = ctx.interact(
+                Rect::EVERYTHING,
+                ctx.style().spacing.item_spacing,
+                layer_id,
+                interact_id,
+                state.rect(),
+                sense,
+                enabled,
+            );
+
+            // Important check - don't try to move e.g. a combobox popup!
+            if movable {
+                if move_response.dragged() {
+                    state.pivot_pos += ctx.input(|i| i.pointer.delta());
+                }
+
+                state.set_left_top_pos(
+                    ctx.constrain_window_rect_to_area(state.rect(), drag_bounds)
+                        .min,
+                );
+            }
+
+            if (move_response.dragged() || move_response.clicked())
+                || pointer_pressed_on_area(ctx, layer_id)
+                || !ctx.memory(|m| m.areas.visible_last_frame(&layer_id))
+            {
+                ctx.memory_mut(|m| m.areas.move_to_top(layer_id));
+                ctx.request_repaint();
+            }
+
+            move_response
+        };
+
+        state.set_left_top_pos(ctx.round_pos_to_pixels(state.left_top_pos()));
+
+        if constrain {
+            state.set_left_top_pos(
+                ctx.constrain_window_rect_to_area(state.rect(), drag_bounds)
+                    .left_top(),
+            );
+        }
 
         Prepared {
             layer_id,
             state,
-            movable,
+            move_response,
             enabled,
             drag_bounds,
+            temporarily_invisible: is_new,
         }
     }
 
-    pub fn show_open_close_animation(&self, ctx: &CtxRef, frame: &Frame, is_open: bool) {
+    pub fn show_open_close_animation(&self, ctx: &Context, frame: &Frame, is_open: bool) {
         // must be called first so animation managers know the latest state
         let visibility_factor = ctx.animate_bool(self.id.with("close_animation"), is_open);
 
@@ -245,7 +345,7 @@ impl Area {
         }
 
         let layer_id = LayerId::new(self.order, self.id);
-        let area_rect = ctx.memory().areas.get(self.id).map(|area| area.rect());
+        let area_rect = ctx.memory(|mem| mem.areas.get(self.id).map(|area| area.rect()));
         if let Some(area_rect) = area_rect {
             let clip_rect = ctx.available_rect();
             let painter = Painter::new(ctx.clone(), layer_id, clip_rect);
@@ -273,8 +373,8 @@ impl Prepared {
         self.drag_bounds
     }
 
-    pub(crate) fn content_ui(&self, ctx: &CtxRef) -> Ui {
-        let screen_rect = ctx.input().screen_rect();
+    pub(crate) fn content_ui(&self, ctx: &Context) -> Ui {
+        let screen_rect = ctx.screen_rect();
 
         let bounds = if let Some(bounds) = self.drag_bounds {
             bounds.intersect(screen_rect) // protect against infinite bounds
@@ -290,14 +390,16 @@ impl Prepared {
         };
 
         let max_rect = Rect::from_min_max(
-            self.state.pos,
-            bounds.max.at_least(self.state.pos + Vec2::splat(32.0)),
+            self.state.left_top_pos(),
+            bounds
+                .max
+                .at_least(self.state.left_top_pos() + Vec2::splat(32.0)),
         );
 
         let shadow_radius = ctx.style().visuals.window_shadow.extrusion; // hacky
         let clip_rect_margin = ctx.style().visuals.clip_rect_margin.max(shadow_radius);
 
-        let clip_rect = Rect::from_min_max(self.state.pos, bounds.max)
+        let clip_rect = Rect::from_min_max(self.state.left_top_pos(), bounds.max)
             .expand(clip_rect_margin)
             .intersect(bounds);
 
@@ -309,79 +411,46 @@ impl Prepared {
             clip_rect,
         );
         ui.set_enabled(self.enabled);
-
+        ui.set_visible(!self.temporarily_invisible);
         ui
     }
 
     #[allow(clippy::needless_pass_by_value)] // intentional to swallow up `content_ui`.
-    pub(crate) fn end(self, ctx: &CtxRef, content_ui: Ui) -> Response {
+    pub(crate) fn end(self, ctx: &Context, content_ui: Ui) -> Response {
         let Prepared {
             layer_id,
             mut state,
-            movable,
-            enabled,
-            drag_bounds,
+            move_response,
+            enabled: _,
+            drag_bounds: _,
+            temporarily_invisible: _,
         } = self;
 
         state.size = content_ui.min_rect().size();
 
-        let interact_id = layer_id.id.with("move");
-        let sense = if movable {
-            Sense::click_and_drag()
-        } else {
-            Sense::click() // allow clicks to bring to front
-        };
-
-        let move_response = ctx.interact(
-            Rect::EVERYTHING,
-            ctx.style().spacing.item_spacing,
-            layer_id,
-            interact_id,
-            state.rect(),
-            sense,
-            enabled,
-        );
-
-        if move_response.dragged() && movable {
-            state.pos += ctx.input().pointer.delta();
-        }
-
-        // Important check - don't try to move e.g. a combobox popup!
-        if movable {
-            state.pos = ctx
-                .constrain_window_rect_to_area(state.rect(), drag_bounds)
-                .min;
-        }
-
-        if (move_response.dragged() || move_response.clicked())
-            || pointer_pressed_on_area(ctx, layer_id)
-            || !ctx.memory().areas.visible_last_frame(&layer_id)
-        {
-            ctx.memory().areas.move_to_top(layer_id);
-            ctx.request_repaint();
-        }
-        ctx.memory().areas.set_state(layer_id, state);
+        ctx.memory_mut(|m| m.areas.set_state(layer_id, state));
 
         move_response
     }
 }
 
 fn pointer_pressed_on_area(ctx: &Context, layer_id: LayerId) -> bool {
-    if let Some(pointer_pos) = ctx.input().pointer.interact_pos() {
-        ctx.input().pointer.any_pressed() && ctx.layer_id_at(pointer_pos) == Some(layer_id)
+    if let Some(pointer_pos) = ctx.pointer_interact_pos() {
+        let any_pressed = ctx.input(|i| i.pointer.any_pressed());
+        any_pressed && ctx.layer_id_at(pointer_pos) == Some(layer_id)
     } else {
         false
     }
 }
 
 fn automatic_area_position(ctx: &Context) -> Pos2 {
-    let mut existing: Vec<Rect> = ctx
-        .memory()
-        .areas
-        .visible_windows()
-        .into_iter()
-        .map(State::rect)
-        .collect();
+    let mut existing: Vec<Rect> = ctx.memory(|mem| {
+        mem.areas
+            .visible_windows()
+            .into_iter()
+            .map(State::rect)
+            .collect()
+    });
     existing.sort_by_key(|r| r.left().round() as i32);
 
     let available_rect = ctx.available_rect();

crates/egui/src/containers/collapsing_header.rs

@@ -0,0 +1,681 @@
+use std::hash::Hash;
+
+use crate::*;
+use epaint::Shape;
+
+#[derive(Clone, Copy, Debug)]
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+pub(crate) struct InnerState {
+    open: bool,
+
+    /// Height of the region when open. Used for animations
+    #[cfg_attr(feature = "serde", serde(default))]
+    open_height: Option<f32>,
+}
+
+/// This is a a building block for building collapsing regions.
+///
+/// It is used by [`CollapsingHeader`] and [`Window`], but can also be used on its own.
+///
+/// See [`CollapsingState::show_header`] for how to show a collapsing header with a custom header.
+#[derive(Clone, Debug)]
+pub struct CollapsingState {
+    id: Id,
+    state: InnerState,
+}
+
+impl CollapsingState {
+    pub fn load(ctx: &Context, id: Id) -> Option<Self> {
+        ctx.data_mut(|d| {
+            d.get_persisted::<InnerState>(id)
+                .map(|state| Self { id, state })
+        })
+    }
+
+    pub fn store(&self, ctx: &Context) {
+        ctx.data_mut(|d| d.insert_persisted(self.id, self.state));
+    }
+
+    pub fn id(&self) -> Id {
+        self.id
+    }
+
+    pub fn load_with_default_open(ctx: &Context, id: Id, default_open: bool) -> Self {
+        Self::load(ctx, id).unwrap_or(CollapsingState {
+            id,
+            state: InnerState {
+                open: default_open,
+                open_height: None,
+            },
+        })
+    }
+
+    pub fn is_open(&self) -> bool {
+        self.state.open
+    }
+
+    pub fn set_open(&mut self, open: bool) {
+        self.state.open = open;
+    }
+
+    pub fn toggle(&mut self, ui: &Ui) {
+        self.state.open = !self.state.open;
+        ui.ctx().request_repaint();
+    }
+
+    /// 0 for closed, 1 for open, with tweening
+    pub fn openness(&self, ctx: &Context) -> f32 {
+        if ctx.memory(|mem| mem.everything_is_visible()) {
+            1.0
+        } else {
+            ctx.animate_bool(self.id, self.state.open)
+        }
+    }
+
+    /// Will toggle when clicked, etc.
+    pub(crate) fn show_default_button_with_size(
+        &mut self,
+        ui: &mut Ui,
+        button_size: Vec2,
+    ) -> Response {
+        let (_id, rect) = ui.allocate_space(button_size);
+        let response = ui.interact(rect, self.id, Sense::click());
+        if response.clicked() {
+            self.toggle(ui);
+        }
+        let openness = self.openness(ui.ctx());
+        paint_default_icon(ui, openness, &response);
+        response
+    }
+
+    /// Will toggle when clicked, etc.
+    fn show_default_button_indented(&mut self, ui: &mut Ui) -> Response {
+        self.show_button_indented(ui, paint_default_icon)
+    }
+
+    /// Will toggle when clicked, etc.
+    fn show_button_indented(
+        &mut self,
+        ui: &mut Ui,
+        icon_fn: impl FnOnce(&mut Ui, f32, &Response) + 'static,
+    ) -> Response {
+        let size = vec2(ui.spacing().indent, ui.spacing().icon_width);
+        let (_id, rect) = ui.allocate_space(size);
+        let response = ui.interact(rect, self.id, Sense::click());
+        if response.clicked() {
+            self.toggle(ui);
+        }
+
+        let (mut icon_rect, _) = ui.spacing().icon_rectangles(response.rect);
+        icon_rect.set_center(pos2(
+            response.rect.left() + ui.spacing().indent / 2.0,
+            response.rect.center().y,
+        ));
+        let openness = self.openness(ui.ctx());
+        let small_icon_response = response.clone().with_new_rect(icon_rect);
+        icon_fn(ui, openness, &small_icon_response);
+        response
+    }
+
+    /// Shows header and body (if expanded).
+    ///
+    /// The header will start with the default button in a horizontal layout, followed by whatever you add.
+    ///
+    /// Will also store the state.
+    ///
+    /// Returns the response of the collapsing button, the custom header, and the custom body.
+    ///
+    /// ```
+    /// # egui::__run_test_ui(|ui| {
+    /// let id = ui.make_persistent_id("my_collapsing_header");
+    /// egui::collapsing_header::CollapsingState::load_with_default_open(ui.ctx(), id, false)
+    ///     .show_header(ui, |ui| {
+    ///         ui.label("Header"); // you can put checkboxes or whatever here
+    ///     })
+    ///     .body(|ui| ui.label("Body"));
+    /// # });
+    /// ```
+    pub fn show_header<HeaderRet>(
+        mut self,
+        ui: &mut Ui,
+        add_header: impl FnOnce(&mut Ui) -> HeaderRet,
+    ) -> HeaderResponse<'_, HeaderRet> {
+        let header_response = ui.horizontal(|ui| {
+            let prev_item_spacing = ui.spacing_mut().item_spacing;
+            ui.spacing_mut().item_spacing.x = 0.0; // the toggler button uses the full indent width
+            let collapser = self.show_default_button_indented(ui);
+            ui.spacing_mut().item_spacing = prev_item_spacing;
+            (collapser, add_header(ui))
+        });
+        HeaderResponse {
+            state: self,
+            ui,
+            toggle_button_response: header_response.inner.0,
+            header_response: InnerResponse {
+                response: header_response.response,
+                inner: header_response.inner.1,
+            },
+        }
+    }
+
+    /// Show body if we are open, with a nice animation between closed and open.
+    /// Indent the body to show it belongs to the header.
+    ///
+    /// Will also store the state.
+    pub fn show_body_indented<R>(
+        &mut self,
+        header_response: &Response,
+        ui: &mut Ui,
+        add_body: impl FnOnce(&mut Ui) -> R,
+    ) -> Option<InnerResponse<R>> {
+        let id = self.id;
+        self.show_body_unindented(ui, |ui| {
+            ui.indent(id, |ui| {
+                // make as wide as the header:
+                ui.expand_to_include_x(header_response.rect.right());
+                add_body(ui)
+            })
+            .inner
+        })
+    }
+
+    /// Show body if we are open, with a nice animation between closed and open.
+    /// Will also store the state.
+    pub fn show_body_unindented<R>(
+        &mut self,
+        ui: &mut Ui,
+        add_body: impl FnOnce(&mut Ui) -> R,
+    ) -> Option<InnerResponse<R>> {
+        let openness = self.openness(ui.ctx());
+        if openness <= 0.0 {
+            self.store(ui.ctx()); // we store any earlier toggling as promised in the docstring
+            None
+        } else if openness < 1.0 {
+            Some(ui.scope(|child_ui| {
+                let max_height = if self.state.open && self.state.open_height.is_none() {
+                    // First frame of expansion.
+                    // We don't know full height yet, but we will next frame.
+                    // Just use a placeholder value that shows some movement:
+                    10.0
+                } else {
+                    let full_height = self.state.open_height.unwrap_or_default();
+                    remap_clamp(openness, 0.0..=1.0, 0.0..=full_height)
+                };
+
+                let mut clip_rect = child_ui.clip_rect();
+                clip_rect.max.y = clip_rect.max.y.min(child_ui.max_rect().top() + max_height);
+                child_ui.set_clip_rect(clip_rect);
+
+                let ret = add_body(child_ui);
+
+                let mut min_rect = child_ui.min_rect();
+                self.state.open_height = Some(min_rect.height());
+                self.store(child_ui.ctx()); // remember the height
+
+                // Pretend children took up at most `max_height` space:
+                min_rect.max.y = min_rect.max.y.at_most(min_rect.top() + max_height);
+                child_ui.force_set_min_rect(min_rect);
+                ret
+            }))
+        } else {
+            let ret_response = ui.scope(add_body);
+            let full_size = ret_response.response.rect.size();
+            self.state.open_height = Some(full_size.y);
+            self.store(ui.ctx()); // remember the height
+            Some(ret_response)
+        }
+    }
+
+    /// Paint this [CollapsingState](CollapsingState)'s toggle button. Takes an [IconPainter](IconPainter) as the icon.
+    /// ```
+    /// # egui::__run_test_ui(|ui| {
+    /// fn circle_icon(ui: &mut egui::Ui, openness: f32, response: &egui::Response) {
+    ///     let stroke = ui.style().interact(&response).fg_stroke;
+    ///     let radius = egui::lerp(2.0..=3.0, openness);
+    ///     ui.painter().circle_filled(response.rect.center(), radius, stroke.color);
+    /// }
+    ///
+    /// let mut state = egui::collapsing_header::CollapsingState::load_with_default_open(
+    ///     ui.ctx(),
+    ///     ui.make_persistent_id("my_collapsing_state"),
+    ///     false,
+    /// );
+    ///
+    /// let header_res = ui.horizontal(|ui| {
+    ///     ui.label("Header");
+    ///     state.show_toggle_button(ui, circle_icon);
+    /// });
+    ///
+    /// state.show_body_indented(&header_res.response, ui, |ui| ui.label("Body"));
+    /// # });
+    /// ```
+    pub fn show_toggle_button(
+        &mut self,
+        ui: &mut Ui,
+        icon_fn: impl FnOnce(&mut Ui, f32, &Response) + 'static,
+    ) -> Response {
+        self.show_button_indented(ui, icon_fn)
+    }
+}
+
+/// From [`CollapsingState::show_header`].
+#[must_use = "Remember to show the body"]
+pub struct HeaderResponse<'ui, HeaderRet> {
+    state: CollapsingState,
+    ui: &'ui mut Ui,
+    toggle_button_response: Response,
+    header_response: InnerResponse<HeaderRet>,
+}
+
+impl<'ui, HeaderRet> HeaderResponse<'ui, HeaderRet> {
+    /// Returns the response of the collapsing button, the custom header, and the custom body.
+    pub fn body<BodyRet>(
+        mut self,
+        add_body: impl FnOnce(&mut Ui) -> BodyRet,
+    ) -> (
+        Response,
+        InnerResponse<HeaderRet>,
+        Option<InnerResponse<BodyRet>>,
+    ) {
+        let body_response =
+            self.state
+                .show_body_indented(&self.header_response.response, self.ui, add_body);
+        (
+            self.toggle_button_response,
+            self.header_response,
+            body_response,
+        )
+    }
+
+    /// Returns the response of the collapsing button, the custom header, and the custom body, without indentation.
+    pub fn body_unindented<BodyRet>(
+        mut self,
+        add_body: impl FnOnce(&mut Ui) -> BodyRet,
+    ) -> (
+        Response,
+        InnerResponse<HeaderRet>,
+        Option<InnerResponse<BodyRet>>,
+    ) {
+        let body_response = self.state.show_body_unindented(self.ui, add_body);
+        (
+            self.toggle_button_response,
+            self.header_response,
+            body_response,
+        )
+    }
+}
+
+// ----------------------------------------------------------------------------
+
+/// Paint the arrow icon that indicated if the region is open or not
+pub fn paint_default_icon(ui: &mut Ui, openness: f32, response: &Response) {
+    let visuals = ui.style().interact(response);
+
+    let rect = response.rect;
+
+    // Draw a pointy triangle arrow:
+    let rect = Rect::from_center_size(rect.center(), vec2(rect.width(), rect.height()) * 0.75);
+    let rect = rect.expand(visuals.expansion);
+    let mut points = vec![rect.left_top(), rect.right_top(), rect.center_bottom()];
+    use std::f32::consts::TAU;
+    let rotation = emath::Rot2::from_angle(remap(openness, 0.0..=1.0, -TAU / 4.0..=0.0));
+    for p in &mut points {
+        *p = rect.center() + rotation * (*p - rect.center());
+    }
+
+    ui.painter().add(Shape::convex_polygon(
+        points,
+        visuals.fg_stroke.color,
+        Stroke::NONE,
+    ));
+}
+
+/// A function that paints an icon indicating if the region is open or not
+pub type IconPainter = Box<dyn FnOnce(&mut Ui, f32, &Response)>;
+
+/// A header which can be collapsed/expanded, revealing a contained [`Ui`] region.
+///
+/// ```
+/// # egui::__run_test_ui(|ui| {
+/// egui::CollapsingHeader::new("Heading")
+///     .show(ui, |ui| {
+///         ui.label("Body");
+///     });
+///
+/// // Short version:
+/// ui.collapsing("Heading", |ui| { ui.label("Body"); });
+/// # });
+/// ```
+///
+/// If you want to customize the header contents, see [`CollapsingState::show_header`].
+#[must_use = "You should call .show()"]
+pub struct CollapsingHeader {
+    text: WidgetText,
+    default_open: bool,
+    open: Option<bool>,
+    id_source: Id,
+    enabled: bool,
+    selectable: bool,
+    selected: bool,
+    show_background: bool,
+    icon: Option<IconPainter>,
+}
+
+impl CollapsingHeader {
+    /// The [`CollapsingHeader`] starts out collapsed unless you call `default_open`.
+    ///
+    /// The label is used as an [`Id`] source.
+    /// If the label is unique and static this is fine,
+    /// but if it changes or there are several [`CollapsingHeader`] with the same title
+    /// you need to provide a unique id source with [`Self::id_source`].
+    pub fn new(text: impl Into<WidgetText>) -> Self {
+        let text = text.into();
+        let id_source = Id::new(text.text());
+        Self {
+            text,
+            default_open: false,
+            open: None,
+            id_source,
+            enabled: true,
+            selectable: false,
+            selected: false,
+            show_background: false,
+            icon: None,
+        }
+    }
+
+    /// By default, the [`CollapsingHeader`] is collapsed.
+    /// Call `.default_open(true)` to change this.
+    pub fn default_open(mut self, open: bool) -> Self {
+        self.default_open = open;
+        self
+    }
+
+    /// Calling `.open(Some(true))` will make the collapsing header open this frame (or stay open).
+    ///
+    /// Calling `.open(Some(false))` will make the collapsing header close this frame (or stay closed).
+    ///
+    /// Calling `.open(None)` has no effect (default).
+    pub fn open(mut self, open: Option<bool>) -> Self {
+        self.open = open;
+        self
+    }
+
+    /// Explicitly set the source of the [`Id`] of this widget, instead of using title label.
+    /// This is useful if the title label is dynamic or not unique.
+    pub fn id_source(mut self, id_source: impl Hash) -> Self {
+        self.id_source = Id::new(id_source);
+        self
+    }
+
+    /// If you set this to `false`, the [`CollapsingHeader`] will be grayed out and un-clickable.
+    ///
+    /// This is a convenience for [`Ui::set_enabled`].
+    pub fn enabled(mut self, enabled: bool) -> Self {
+        self.enabled = enabled;
+        self
+    }
+
+    /// Can the [`CollapsingHeader`] be selected by clicking it? Default: `false`.
+    #[deprecated = "Use the more powerful egui::collapsing_header::CollapsingState::show_header"] // Deprecated in 2022-04-28, before egui 0.18
+    pub fn selectable(mut self, selectable: bool) -> Self {
+        self.selectable = selectable;
+        self
+    }
+
+    /// If you set this to 'true', the [`CollapsingHeader`] will be shown as selected.
+    ///
+    /// Example:
+    /// ```
+    /// # egui::__run_test_ui(|ui| {
+    /// let mut selected = false;
+    /// let response = egui::CollapsingHeader::new("Select and open me")
+    ///     .selectable(true)
+    ///     .selected(selected)
+    ///     .show(ui, |ui| ui.label("Body"));
+    /// if response.header_response.clicked() {
+    ///     selected = true;
+    /// }
+    /// # });
+    /// ```
+    #[deprecated = "Use the more powerful egui::collapsing_header::CollapsingState::show_header"] // Deprecated in 2022-04-28, before egui 0.18
+    pub fn selected(mut self, selected: bool) -> Self {
+        self.selected = selected;
+        self
+    }
+
+    /// Should the [`CollapsingHeader`] show a background behind it? Default: `false`.
+    ///
+    /// To show it behind all [`CollapsingHeader`] you can just use:
+    /// ```
+    /// # egui::__run_test_ui(|ui| {
+    /// ui.visuals_mut().collapsing_header_frame = true;
+    /// # });
+    /// ```
+    pub fn show_background(mut self, show_background: bool) -> Self {
+        self.show_background = show_background;
+        self
+    }
+
+    /// Use the provided function to render a different [`CollapsingHeader`] icon.
+    /// Defaults to a triangle that animates as the [`CollapsingHeader`] opens and closes.
+    ///
+    /// For example:
+    /// ```
+    /// # egui::__run_test_ui(|ui| {
+    /// fn circle_icon(ui: &mut egui::Ui, openness: f32, response: &egui::Response) {
+    ///     let stroke = ui.style().interact(&response).fg_stroke;
+    ///     let radius = egui::lerp(2.0..=3.0, openness);
+    ///     ui.painter().circle_filled(response.rect.center(), radius, stroke.color);
+    /// }
+    ///
+    /// egui::CollapsingHeader::new("Circles")
+    ///   .icon(circle_icon)
+    ///   .show(ui, |ui| { ui.label("Hi!"); });
+    /// # });
+    /// ```
+    pub fn icon(mut self, icon_fn: impl FnOnce(&mut Ui, f32, &Response) + 'static) -> Self {
+        self.icon = Some(Box::new(icon_fn));
+        self
+    }
+}
+
+struct Prepared {
+    header_response: Response,
+    state: CollapsingState,
+    openness: f32,
+}
+
+impl CollapsingHeader {
+    fn begin(self, ui: &mut Ui) -> Prepared {
+        assert!(
+            ui.layout().main_dir().is_vertical(),
+            "Horizontal collapsing is unimplemented"
+        );
+        let Self {
+            icon,
+            text,
+            default_open,
+            open,
+            id_source,
+            enabled: _,
+            selectable,
+            selected,
+            show_background,
+        } = self;
+
+        // TODO(emilk): horizontal layout, with icon and text as labels. Insert background behind using Frame.
+
+        let id = ui.make_persistent_id(id_source);
+        let button_padding = ui.spacing().button_padding;
+
+        let available = ui.available_rect_before_wrap();
+        let text_pos = available.min + vec2(ui.spacing().indent, 0.0);
+        let wrap_width = available.right() - text_pos.x;
+        let wrap = Some(false);
+        let text = text.into_galley(ui, wrap, wrap_width, TextStyle::Button);
+        let text_max_x = text_pos.x + text.size().x;
+
+        let mut desired_width = text_max_x + button_padding.x - available.left();
+        if ui.visuals().collapsing_header_frame {
+            desired_width = desired_width.max(available.width()); // fill full width
+        }
+
+        let mut desired_size = vec2(desired_width, text.size().y + 2.0 * button_padding.y);
+        desired_size = desired_size.at_least(ui.spacing().interact_size);
+        let (_, rect) = ui.allocate_space(desired_size);
+
+        let mut header_response = ui.interact(rect, id, Sense::click());
+        let text_pos = pos2(
+            text_pos.x,
+            header_response.rect.center().y - text.size().y / 2.0,
+        );
+
+        let mut state = CollapsingState::load_with_default_open(ui.ctx(), id, default_open);
+        if let Some(open) = open {
+            if open != state.is_open() {
+                state.toggle(ui);
+                header_response.mark_changed();
+            }
+        } else if header_response.clicked() {
+            state.toggle(ui);
+            header_response.mark_changed();
+        }
+
+        header_response
+            .widget_info(|| WidgetInfo::labeled(WidgetType::CollapsingHeader, text.text()));
+
+        let openness = state.openness(ui.ctx());
+
+        if ui.is_rect_visible(rect) {
+            let visuals = ui.style().interact_selectable(&header_response, selected);
+
+            if ui.visuals().collapsing_header_frame || show_background {
+                ui.painter().add(epaint::RectShape {
+                    rect: header_response.rect.expand(visuals.expansion),
+                    rounding: visuals.rounding,
+                    fill: visuals.weak_bg_fill,
+                    stroke: visuals.bg_stroke,
+                    // stroke: Default::default(),
+                });
+            }
+
+            if selected || selectable && (header_response.hovered() || header_response.has_focus())
+            {
+                let rect = rect.expand(visuals.expansion);
+
+                ui.painter()
+                    .rect(rect, visuals.rounding, visuals.bg_fill, visuals.bg_stroke);
+            }
+
+            {
+                let (mut icon_rect, _) = ui.spacing().icon_rectangles(header_response.rect);
+                icon_rect.set_center(pos2(
+                    header_response.rect.left() + ui.spacing().indent / 2.0,
+                    header_response.rect.center().y,
+                ));
+                let icon_response = header_response.clone().with_new_rect(icon_rect);
+                if let Some(icon) = icon {
+                    icon(ui, openness, &icon_response);
+                } else {
+                    paint_default_icon(ui, openness, &icon_response);
+                }
+            }
+
+            text.paint_with_visuals(ui.painter(), text_pos, &visuals);
+        }
+
+        Prepared {
+            header_response,
+            state,
+            openness,
+        }
+    }
+
+    #[inline]
+    pub fn show<R>(
+        self,
+        ui: &mut Ui,
+        add_body: impl FnOnce(&mut Ui) -> R,
+    ) -> CollapsingResponse<R> {
+        self.show_dyn(ui, Box::new(add_body), true)
+    }
+
+    #[inline]
+    pub fn show_unindented<R>(
+        self,
+        ui: &mut Ui,
+        add_body: impl FnOnce(&mut Ui) -> R,
+    ) -> CollapsingResponse<R> {
+        self.show_dyn(ui, Box::new(add_body), false)
+    }
+
+    fn show_dyn<'c, R>(
+        self,
+        ui: &mut Ui,
+        add_body: Box<dyn FnOnce(&mut Ui) -> R + 'c>,
+        indented: bool,
+    ) -> CollapsingResponse<R> {
+        // Make sure body is bellow header,
+        // and make sure it is one unit (necessary for putting a [`CollapsingHeader`] in a grid).
+        ui.vertical(|ui| {
+            ui.set_enabled(self.enabled);
+
+            let Prepared {
+                header_response,
+                mut state,
+                openness,
+            } = self.begin(ui); // show the header
+
+            let ret_response = if indented {
+                state.show_body_indented(&header_response, ui, add_body)
+            } else {
+                state.show_body_unindented(ui, add_body)
+            };
+
+            if let Some(ret_response) = ret_response {
+                CollapsingResponse {
+                    header_response,
+                    body_response: Some(ret_response.response),
+                    body_returned: Some(ret_response.inner),
+                    openness,
+                }
+            } else {
+                CollapsingResponse {
+                    header_response,
+                    body_response: None,
+                    body_returned: None,
+                    openness,
+                }
+            }
+        })
+        .inner
+    }
+}
+
+/// The response from showing a [`CollapsingHeader`].
+pub struct CollapsingResponse<R> {
+    /// Response of the actual clickable header.
+    pub header_response: Response,
+
+    /// None iff collapsed.
+    pub body_response: Option<Response>,
+
+    /// None iff collapsed.
+    pub body_returned: Option<R>,
+
+    /// 0.0 if fully closed, 1.0 if fully open, and something in-between while animating.
+    pub openness: f32,
+}
+
+impl<R> CollapsingResponse<R> {
+    /// Was the [`CollapsingHeader`] fully closed (and not being animated)?
+    pub fn fully_closed(&self) -> bool {
+        self.openness <= 0.0
+    }
+
+    /// Was the [`CollapsingHeader`] fully open (and not being animated)?
+    pub fn fully_open(&self) -> bool {
+        self.openness >= 1.0
+    }
+}

crates/egui/src/containers/combo_box.rs

@@ -0,0 +1,429 @@
+use epaint::Shape;
+
+use crate::{style::WidgetVisuals, *};
+
+/// Indicate wether or not a popup will be shown above or below the box.
+#[derive(Clone, Copy, Debug, PartialEq, Eq, Hash)]
+pub enum AboveOrBelow {
+    Above,
+    Below,
+}
+
+/// A function that paints the [`ComboBox`] icon
+pub type IconPainter = Box<dyn FnOnce(&Ui, Rect, &WidgetVisuals, bool, AboveOrBelow)>;
+
+/// A drop-down selection menu with a descriptive label.
+///
+/// ```
+/// # #[derive(Debug, PartialEq)]
+/// # enum Enum { First, Second, Third }
+/// # let mut selected = Enum::First;
+/// # egui::__run_test_ui(|ui| {
+/// egui::ComboBox::from_label("Select one!")
+///     .selected_text(format!("{:?}", selected))
+///     .show_ui(ui, |ui| {
+///         ui.selectable_value(&mut selected, Enum::First, "First");
+///         ui.selectable_value(&mut selected, Enum::Second, "Second");
+///         ui.selectable_value(&mut selected, Enum::Third, "Third");
+///     }
+/// );
+/// # });
+/// ```
+#[must_use = "You should call .show*"]
+pub struct ComboBox {
+    id_source: Id,
+    label: Option<WidgetText>,
+    selected_text: WidgetText,
+    width: Option<f32>,
+    icon: Option<IconPainter>,
+    wrap_enabled: bool,
+}
+
+impl ComboBox {
+    /// Create new [`ComboBox`] with id and label
+    pub fn new(id_source: impl std::hash::Hash, label: impl Into<WidgetText>) -> Self {
+        Self {
+            id_source: Id::new(id_source),
+            label: Some(label.into()),
+            selected_text: Default::default(),
+            width: None,
+            icon: None,
+            wrap_enabled: false,
+        }
+    }
+
+    /// Label shown next to the combo box
+    pub fn from_label(label: impl Into<WidgetText>) -> Self {
+        let label = label.into();
+        Self {
+            id_source: Id::new(label.text()),
+            label: Some(label),
+            selected_text: Default::default(),
+            width: None,
+            icon: None,
+            wrap_enabled: false,
+        }
+    }
+
+    /// Without label.
+    pub fn from_id_source(id_source: impl std::hash::Hash) -> Self {
+        Self {
+            id_source: Id::new(id_source),
+            label: Default::default(),
+            selected_text: Default::default(),
+            width: None,
+            icon: None,
+            wrap_enabled: false,
+        }
+    }
+
+    /// Set the outer width of the button and menu.
+    pub fn width(mut self, width: f32) -> Self {
+        self.width = Some(width);
+        self
+    }
+
+    /// What we show as the currently selected value
+    pub fn selected_text(mut self, selected_text: impl Into<WidgetText>) -> Self {
+        self.selected_text = selected_text.into();
+        self
+    }
+
+    /// Use the provided function to render a different [`ComboBox`] icon.
+    /// Defaults to a triangle that expands when the cursor is hovering over the [`ComboBox`].
+    ///
+    /// For example:
+    /// ```
+    /// # egui::__run_test_ui(|ui| {
+    /// # let text = "Selected text";
+    /// pub fn filled_triangle(
+    ///     ui: &egui::Ui,
+    ///     rect: egui::Rect,
+    ///     visuals: &egui::style::WidgetVisuals,
+    ///     _is_open: bool,
+    ///     _above_or_below: egui::AboveOrBelow,
+    /// ) {
+    ///     let rect = egui::Rect::from_center_size(
+    ///         rect.center(),
+    ///         egui::vec2(rect.width() * 0.6, rect.height() * 0.4),
+    ///     );
+    ///     ui.painter().add(egui::Shape::convex_polygon(
+    ///         vec![rect.left_top(), rect.right_top(), rect.center_bottom()],
+    ///         visuals.fg_stroke.color,
+    ///         visuals.fg_stroke,
+    ///     ));
+    /// }
+    ///
+    /// egui::ComboBox::from_id_source("my-combobox")
+    ///     .selected_text(text)
+    ///     .icon(filled_triangle)
+    ///     .show_ui(ui, |_ui| {});
+    /// # });
+    /// ```
+    pub fn icon(
+        mut self,
+        icon_fn: impl FnOnce(&Ui, Rect, &WidgetVisuals, bool, AboveOrBelow) + 'static,
+    ) -> Self {
+        self.icon = Some(Box::new(icon_fn));
+        self
+    }
+
+    /// Controls whether text wrap is used for the selected text
+    pub fn wrap(mut self, wrap: bool) -> Self {
+        self.wrap_enabled = wrap;
+        self
+    }
+
+    /// Show the combo box, with the given ui code for the menu contents.
+    ///
+    /// Returns `InnerResponse { inner: None }` if the combo box is closed.
+    pub fn show_ui<R>(
+        self,
+        ui: &mut Ui,
+        menu_contents: impl FnOnce(&mut Ui) -> R,
+    ) -> InnerResponse<Option<R>> {
+        self.show_ui_dyn(ui, Box::new(menu_contents))
+    }
+
+    fn show_ui_dyn<'c, R>(
+        self,
+        ui: &mut Ui,
+        menu_contents: Box<dyn FnOnce(&mut Ui) -> R + 'c>,
+    ) -> InnerResponse<Option<R>> {
+        let Self {
+            id_source,
+            label,
+            selected_text,
+            width,
+            icon,
+            wrap_enabled,
+        } = self;
+
+        let button_id = ui.make_persistent_id(id_source);
+
+        ui.horizontal(|ui| {
+            let mut ir = combo_box_dyn(
+                ui,
+                button_id,
+                selected_text,
+                menu_contents,
+                icon,
+                wrap_enabled,
+                width,
+            );
+            if let Some(label) = label {
+                ir.response
+                    .widget_info(|| WidgetInfo::labeled(WidgetType::ComboBox, label.text()));
+                ir.response |= ui.label(label);
+            } else {
+                ir.response
+                    .widget_info(|| WidgetInfo::labeled(WidgetType::ComboBox, ""));
+            }
+            ir
+        })
+        .inner
+    }
+
+    /// Show a list of items with the given selected index.
+    ///
+    ///
+    /// ```
+    /// # #[derive(Debug, PartialEq)]
+    /// # enum Enum { First, Second, Third }
+    /// # let mut selected = Enum::First;
+    /// # egui::__run_test_ui(|ui| {
+    /// let alternatives = ["a", "b", "c", "d"];
+    /// let mut selected = 2;
+    /// egui::ComboBox::from_label("Select one!").show_index(
+    ///     ui,
+    ///     &mut selected,
+    ///     alternatives.len(),
+    ///     |i| alternatives[i].to_owned()
+    /// );
+    /// # });
+    /// ```
+    pub fn show_index(
+        self,
+        ui: &mut Ui,
+        selected: &mut usize,
+        len: usize,
+        get: impl Fn(usize) -> String,
+    ) -> Response {
+        let slf = self.selected_text(get(*selected));
+
+        let mut changed = false;
+
+        let mut response = slf
+            .show_ui(ui, |ui| {
+                for i in 0..len {
+                    if ui.selectable_label(i == *selected, get(i)).clicked() {
+                        *selected = i;
+                        changed = true;
+                    }
+                }
+            })
+            .response;
+
+        if changed {
+            response.mark_changed();
+        }
+        response
+    }
+}
+
+fn combo_box_dyn<'c, R>(
+    ui: &mut Ui,
+    button_id: Id,
+    selected_text: WidgetText,
+    menu_contents: Box<dyn FnOnce(&mut Ui) -> R + 'c>,
+    icon: Option<IconPainter>,
+    wrap_enabled: bool,
+    width: Option<f32>,
+) -> InnerResponse<Option<R>> {
+    let popup_id = button_id.with("popup");
+
+    let is_popup_open = ui.memory(|m| m.is_popup_open(popup_id));
+
+    let popup_height = ui.memory(|m| m.areas.get(popup_id).map_or(100.0, |state| state.size.y));
+
+    let above_or_below =
+        if ui.next_widget_position().y + ui.spacing().interact_size.y + popup_height
+            < ui.ctx().screen_rect().bottom()
+        {
+            AboveOrBelow::Below
+        } else {
+            AboveOrBelow::Above
+        };
+
+    let margin = ui.spacing().button_padding;
+    let button_response = button_frame(ui, button_id, is_popup_open, Sense::click(), |ui| {
+        let icon_spacing = ui.spacing().icon_spacing;
+        // We don't want to change width when user selects something new
+        let full_minimum_width = if wrap_enabled {
+            // Currently selected value's text will be wrapped if needed, so occupy the available width.
+            ui.available_width()
+        } else {
+            // Occupy at least the minimum width assigned to ComboBox.
+            let width = width.unwrap_or_else(|| ui.spacing().combo_width);
+            width - 2.0 * margin.x
+        };
+        let icon_size = Vec2::splat(ui.spacing().icon_width);
+        let wrap_width = if wrap_enabled {
+            // Use the available width, currently selected value's text will be wrapped if exceeds this value.
+            ui.available_width() - icon_spacing - icon_size.x
+        } else {
+            // Use all the width necessary to display the currently selected value's text.
+            f32::INFINITY
+        };
+
+        let galley =
+            selected_text.into_galley(ui, Some(wrap_enabled), wrap_width, TextStyle::Button);
+
+        // The width necessary to contain the whole widget with the currently selected value's text.
+        let width = if wrap_enabled {
+            full_minimum_width
+        } else {
+            // Occupy at least the minimum width needed to contain the widget with the currently selected value's text.
+            galley.size().x + icon_spacing + icon_size.x
+        };
+
+        // Case : wrap_enabled : occupy all the available width.
+        // Case : !wrap_enabled : occupy at least the minimum width assigned to Slider and ComboBox,
+        // increase if the currently selected value needs additional horizontal space to fully display its text (up to wrap_width (f32::INFINITY)).
+        let width = width.at_least(full_minimum_width);
+        let height = galley.size().y.max(icon_size.y);
+
+        let (_, rect) = ui.allocate_space(Vec2::new(width, height));
+        let button_rect = ui.min_rect().expand2(ui.spacing().button_padding);
+        let response = ui.interact(button_rect, button_id, Sense::click());
+        // response.active |= is_popup_open;
+
+        if ui.is_rect_visible(rect) {
+            let icon_rect = Align2::RIGHT_CENTER.align_size_within_rect(icon_size, rect);
+            let visuals = if is_popup_open {
+                &ui.visuals().widgets.open
+            } else {
+                ui.style().interact(&response)
+            };
+
+            if let Some(icon) = icon {
+                icon(
+                    ui,
+                    icon_rect.expand(visuals.expansion),
+                    visuals,
+                    is_popup_open,
+                    above_or_below,
+                );
+            } else {
+                paint_default_icon(
+                    ui.painter(),
+                    icon_rect.expand(visuals.expansion),
+                    visuals,
+                    above_or_below,
+                );
+            }
+
+            let text_rect = Align2::LEFT_CENTER.align_size_within_rect(galley.size(), rect);
+            galley.paint_with_visuals(ui.painter(), text_rect.min, visuals);
+        }
+    });
+
+    if button_response.clicked() {
+        ui.memory_mut(|mem| mem.toggle_popup(popup_id));
+    }
+    let inner = crate::popup::popup_above_or_below_widget(
+        ui,
+        popup_id,
+        &button_response,
+        above_or_below,
+        |ui| {
+            ScrollArea::vertical()
+                .max_height(ui.spacing().combo_height)
+                .show(ui, menu_contents)
+                .inner
+        },
+    );
+
+    InnerResponse {
+        inner,
+        response: button_response,
+    }
+}
+
+fn button_frame(
+    ui: &mut Ui,
+    id: Id,
+    is_popup_open: bool,
+    sense: Sense,
+    add_contents: impl FnOnce(&mut Ui),
+) -> Response {
+    let where_to_put_background = ui.painter().add(Shape::Noop);
+
+    let margin = ui.spacing().button_padding;
+    let interact_size = ui.spacing().interact_size;
+
+    let mut outer_rect = ui.available_rect_before_wrap();
+    outer_rect.set_height(outer_rect.height().at_least(interact_size.y));
+
+    let inner_rect = outer_rect.shrink2(margin);
+    let mut content_ui = ui.child_ui(inner_rect, *ui.layout());
+    add_contents(&mut content_ui);
+
+    let mut outer_rect = content_ui.min_rect().expand2(margin);
+    outer_rect.set_height(outer_rect.height().at_least(interact_size.y));
+
+    let response = ui.interact(outer_rect, id, sense);
+
+    if ui.is_rect_visible(outer_rect) {
+        let visuals = if is_popup_open {
+            &ui.visuals().widgets.open
+        } else {
+            ui.style().interact(&response)
+        };
+
+        ui.painter().set(
+            where_to_put_background,
+            epaint::RectShape {
+                rect: outer_rect.expand(visuals.expansion),
+                rounding: visuals.rounding,
+                fill: visuals.weak_bg_fill,
+                stroke: visuals.bg_stroke,
+            },
+        );
+    }
+
+    ui.advance_cursor_after_rect(outer_rect);
+
+    response
+}
+
+fn paint_default_icon(
+    painter: &Painter,
+    rect: Rect,
+    visuals: &WidgetVisuals,
+    above_or_below: AboveOrBelow,
+) {
+    let rect = Rect::from_center_size(
+        rect.center(),
+        vec2(rect.width() * 0.7, rect.height() * 0.45),
+    );
+
+    match above_or_below {
+        AboveOrBelow::Above => {
+            // Upward pointing triangle
+            painter.add(Shape::convex_polygon(
+                vec![rect.left_bottom(), rect.right_bottom(), rect.center_top()],
+                visuals.fg_stroke.color,
+                Stroke::NONE,
+            ));
+        }
+        AboveOrBelow::Below => {
+            // Downward pointing triangle
+            painter.add(Shape::convex_polygon(
+                vec![rect.left_top(), rect.right_top(), rect.center_bottom()],
+                visuals.fg_stroke.color,
+                Stroke::NONE,
+            ));
+        }
+    }
+}

crates/egui/src/containers/frame.rs

@@ -1,17 +1,34 @@
 //! Frame container
 
-use crate::{layers::ShapeIdx, *};
+use crate::{layers::ShapeIdx, style::Margin, *};
 use epaint::*;
 
-/// Color and margin of a rectangular background of a [`Ui`].
+/// Add a background, frame and/or margin to a rectangular background of a [`Ui`].
+///
+/// ```
+/// # egui::__run_test_ui(|ui| {
+/// egui::Frame::none()
+///     .fill(egui::Color32::RED)
+///     .show(ui, |ui| {
+///         ui.label("Label with red background");
+///     });
+/// # });
+/// ```
 #[derive(Clone, Copy, Debug, Default, PartialEq)]
 #[must_use = "You should call .show()"]
 pub struct Frame {
-    /// On each side
-    pub margin: Vec2,
-    pub corner_radius: f32,
+    /// Margin within the painted frame.
+    pub inner_margin: Margin,
+
+    /// Margin outside the painted frame.
+    pub outer_margin: Margin,
+
+    pub rounding: Rounding,
+
     pub shadow: Shadow,
+
     pub fill: Color32,
+
     pub stroke: Stroke,
 }
 
@@ -23,97 +40,125 @@ impl Frame {
     /// For when you want to group a few widgets together within a frame.
     pub fn group(style: &Style) -> Self {
         Self {
-            margin: Vec2::splat(6.0), // symmetric looks best in corners when nesting
-            corner_radius: style.visuals.widgets.noninteractive.corner_radius,
+            inner_margin: Margin::same(6.0), // same and symmetric looks best in corners when nesting groups
+            rounding: style.visuals.widgets.noninteractive.rounding,
             stroke: style.visuals.widgets.noninteractive.bg_stroke,
             ..Default::default()
         }
     }
 
-    pub(crate) fn side_top_panel(style: &Style) -> Self {
+    pub fn side_top_panel(style: &Style) -> Self {
         Self {
-            margin: Vec2::new(8.0, 2.0),
-            corner_radius: 0.0,
-            fill: style.visuals.window_fill(),
-            stroke: style.visuals.window_stroke(),
+            inner_margin: Margin::symmetric(8.0, 2.0),
+            fill: style.visuals.panel_fill,
             ..Default::default()
         }
     }
 
-    pub(crate) fn central_panel(style: &Style) -> Self {
+    pub fn central_panel(style: &Style) -> Self {
         Self {
-            margin: Vec2::new(8.0, 8.0),
-            corner_radius: 0.0,
-            fill: style.visuals.window_fill(),
-            stroke: Default::default(),
+            inner_margin: Margin::same(8.0),
+            fill: style.visuals.panel_fill,
             ..Default::default()
         }
     }
 
     pub fn window(style: &Style) -> Self {
         Self {
-            margin: style.spacing.window_padding,
-            corner_radius: style.visuals.window_corner_radius,
+            inner_margin: style.spacing.window_margin,
+            rounding: style.visuals.window_rounding,
             shadow: style.visuals.window_shadow,
             fill: style.visuals.window_fill(),
             stroke: style.visuals.window_stroke(),
+            ..Default::default()
         }
     }
 
     pub fn menu(style: &Style) -> Self {
         Self {
-            margin: Vec2::splat(1.0),
-            corner_radius: style.visuals.widgets.noninteractive.corner_radius,
+            inner_margin: style.spacing.menu_margin,
+            rounding: style.visuals.menu_rounding,
             shadow: style.visuals.popup_shadow,
             fill: style.visuals.window_fill(),
             stroke: style.visuals.window_stroke(),
+            ..Default::default()
         }
     }
 
     pub fn popup(style: &Style) -> Self {
         Self {
-            margin: style.spacing.window_padding,
-            corner_radius: style.visuals.widgets.noninteractive.corner_radius,
+            inner_margin: style.spacing.menu_margin,
+            rounding: style.visuals.menu_rounding,
             shadow: style.visuals.popup_shadow,
             fill: style.visuals.window_fill(),
             stroke: style.visuals.window_stroke(),
+            ..Default::default()
         }
     }
 
-    /// dark canvas to draw on
-    pub fn dark_canvas(style: &Style) -> Self {
+    /// A canvas to draw on.
+    ///
+    /// In bright mode this will be very bright,
+    /// and in dark mode this will be very dark.
+    pub fn canvas(style: &Style) -> Self {
         Self {
-            margin: Vec2::new(10.0, 10.0),
-            corner_radius: style.visuals.widgets.noninteractive.corner_radius,
-            fill: Color32::from_black_alpha(250),
+            inner_margin: Margin::same(2.0),
+            rounding: style.visuals.widgets.noninteractive.rounding,
+            fill: style.visuals.extreme_bg_color,
             stroke: style.visuals.window_stroke(),
             ..Default::default()
         }
     }
+
+    /// A dark canvas to draw on.
+    pub fn dark_canvas(style: &Style) -> Self {
+        Self {
+            fill: Color32::from_black_alpha(250),
+            ..Self::canvas(style)
+        }
+    }
 }
 
 impl Frame {
+    #[inline]
     pub fn fill(mut self, fill: Color32) -> Self {
         self.fill = fill;
         self
     }
 
+    #[inline]
     pub fn stroke(mut self, stroke: Stroke) -> Self {
         self.stroke = stroke;
         self
     }
 
-    pub fn corner_radius(mut self, corner_radius: f32) -> Self {
-        self.corner_radius = corner_radius;
+    #[inline]
+    pub fn rounding(mut self, rounding: impl Into<Rounding>) -> Self {
+        self.rounding = rounding.into();
         self
     }
 
-    /// Margin on each side of the frame.
-    pub fn margin(mut self, margin: impl Into<Vec2>) -> Self {
-        self.margin = margin.into();
+    /// Margin within the painted frame.
+    #[inline]
+    pub fn inner_margin(mut self, inner_margin: impl Into<Margin>) -> Self {
+        self.inner_margin = inner_margin.into();
         self
     }
 
+    /// Margin outside the painted frame.
+    #[inline]
+    pub fn outer_margin(mut self, outer_margin: impl Into<Margin>) -> Self {
+        self.outer_margin = outer_margin.into();
+        self
+    }
+
+    #[deprecated = "Renamed inner_margin in egui 0.18"]
+    #[inline]
+    pub fn margin(self, margin: impl Into<Margin>) -> Self {
+        self.inner_margin(margin)
+    }
+
+    #[inline]
     pub fn shadow(mut self, shadow: Shadow) -> Self {
         self.shadow = shadow;
         self
@@ -127,6 +172,16 @@ impl Frame {
     }
 }
 
+impl Frame {
+    /// inner margin plus outer margin.
+    #[inline]
+    pub fn total_margin(&self) -> Margin {
+        self.inner_margin + self.outer_margin
+    }
+}
+
+// ----------------------------------------------------------------------------
+
 pub struct Prepared {
     pub frame: Frame,
     where_to_put_background: ShapeIdx,
@@ -137,7 +192,10 @@ impl Frame {
     pub fn begin(self, ui: &mut Ui) -> Prepared {
         let where_to_put_background = ui.painter().add(Shape::Noop);
         let outer_rect_bounds = ui.available_rect_before_wrap();
-        let mut inner_rect = outer_rect_bounds.shrink2(self.margin);
+
+        let mut inner_rect = outer_rect_bounds;
+        inner_rect.min += self.outer_margin.left_top() + self.inner_margin.left_top();
+        inner_rect.max -= self.outer_margin.right_bottom() + self.inner_margin.right_bottom();
 
         // Make sure we don't shrink to the negative:
         inner_rect.max.x = inner_rect.max.x.max(inner_rect.min.x);
@@ -171,8 +229,9 @@ impl Frame {
 
     pub fn paint(&self, outer_rect: Rect) -> Shape {
         let Self {
-            margin: _,
-            corner_radius,
+            inner_margin: _,
+            outer_margin: _,
+            rounding,
             shadow,
             fill,
             stroke,
@@ -180,7 +239,7 @@ impl Frame {
 
         let frame_shape = Shape::Rect(epaint::RectShape {
             rect: outer_rect,
-            corner_radius,
+            rounding,
             fill,
             stroke,
         });
@@ -188,7 +247,7 @@ impl Frame {
         if shadow == Default::default() {
             frame_shape
         } else {
-            let shadow = shadow.tessellate(outer_rect, corner_radius);
+            let shadow = shadow.tessellate(outer_rect, rounding);
             let shadow = Shape::Mesh(shadow);
             Shape::Vec(vec![shadow, frame_shape])
         }
@@ -196,12 +255,22 @@ impl Frame {
 }
 
 impl Prepared {
-    pub fn outer_rect(&self) -> Rect {
-        self.content_ui.min_rect().expand2(self.frame.margin)
+    fn paint_rect(&self) -> Rect {
+        let mut rect = self.content_ui.min_rect();
+        rect.min -= self.frame.inner_margin.left_top();
+        rect.max += self.frame.inner_margin.right_bottom();
+        rect
+    }
+
+    fn content_with_margin(&self) -> Rect {
+        let mut rect = self.content_ui.min_rect();
+        rect.min -= self.frame.inner_margin.left_top() + self.frame.outer_margin.left_top();
+        rect.max += self.frame.inner_margin.right_bottom() + self.frame.outer_margin.right_bottom();
+        rect
     }
 
     pub fn end(self, ui: &mut Ui) -> Response {
-        let outer_rect = self.outer_rect();
+        let paint_rect = self.paint_rect();
 
         let Prepared {
             frame,
@@ -209,8 +278,11 @@ impl Prepared {
             ..
         } = self;
 
-        let shape = frame.paint(outer_rect);
-        ui.painter().set(where_to_put_background, shape);
-        ui.allocate_rect(outer_rect, Sense::hover())
+        if ui.is_rect_visible(paint_rect) {
+            let shape = frame.paint(paint_rect);
+            ui.painter().set(where_to_put_background, shape);
+        }
+
+        ui.allocate_rect(self.content_with_margin(), Sense::hover())
     }
 }

crates/egui/src/containers/mod.rs

@@ -3,18 +3,18 @@
 //! For instance, a [`Frame`] adds a frame and background to some contained UI.
 
 pub(crate) mod area;
-pub(crate) mod collapsing_header;
+pub mod collapsing_header;
 mod combo_box;
 pub(crate) mod frame;
 pub mod panel;
 pub mod popup;
 pub(crate) mod resize;
-pub(crate) mod scroll_area;
+pub mod scroll_area;
 pub(crate) mod window;
 
 pub use {
     area::Area,
-    collapsing_header::*,
+    collapsing_header::{CollapsingHeader, CollapsingResponse},
     combo_box::*,
     frame::Frame,
     panel::{CentralPanel, SidePanel, TopBottomPanel},

crates/egui/src/containers/popup.rs

@@ -6,36 +6,42 @@ use crate::*;
 
 /// Same state for all tooltips.
 #[derive(Clone, Debug, Default)]
-pub(crate) struct MonoState {
-    last_id: Option<Id>,
-    last_size: Vec<Vec2>,
+pub(crate) struct TooltipState {
+    last_common_id: Option<Id>,
+    individual_ids_and_sizes: ahash::HashMap<usize, (Id, Vec2)>,
 }
 
-impl MonoState {
-    fn tooltip_size(&self, id: Id, index: usize) -> Option<Vec2> {
-        if self.last_id == Some(id) {
-            self.last_size.get(index).cloned()
+impl TooltipState {
+    pub fn load(ctx: &Context) -> Option<Self> {
+        ctx.data_mut(|d| d.get_temp(Id::null()))
+    }
+
+    fn store(self, ctx: &Context) {
+        ctx.data_mut(|d| d.insert_temp(Id::null(), self));
+    }
+
+    fn individual_tooltip_size(&self, common_id: Id, index: usize) -> Option<Vec2> {
+        if self.last_common_id == Some(common_id) {
+            Some(self.individual_ids_and_sizes.get(&index)?.1)
         } else {
             None
         }
     }
 
-    fn set_tooltip_size(&mut self, id: Id, index: usize, size: Vec2) {
-        if self.last_id == Some(id) {
-            if let Some(stored_size) = self.last_size.get_mut(index) {
-                *stored_size = size;
-            } else {
-                self.last_size
-                    .extend((0..index - self.last_size.len()).map(|_| Vec2::ZERO));
-                self.last_size.push(size);
-            }
-            return;
+    fn set_individual_tooltip(
+        &mut self,
+        common_id: Id,
+        index: usize,
+        individual_id: Id,
+        size: Vec2,
+    ) {
+        if self.last_common_id != Some(common_id) {
+            self.last_common_id = Some(common_id);
+            self.individual_ids_and_sizes.clear();
         }
 
-        self.last_id = Some(id);
-        self.last_size.clear();
-        self.last_size.extend((0..index).map(|_| Vec2::ZERO));
-        self.last_size.push(size);
+        self.individual_ids_and_sizes
+            .insert(index, (individual_id, size));
     }
 }
 
@@ -50,14 +56,19 @@ impl MonoState {
 /// Returns `None` if the tooltip could not be placed.
 ///
 /// ```
-/// # let mut ui = egui::Ui::__test();
+/// # egui::__run_test_ui(|ui| {
 /// if ui.ui_contains_pointer() {
 ///     egui::show_tooltip(ui.ctx(), egui::Id::new("my_tooltip"), |ui| {
 ///         ui.label("Helpful text");
 ///     });
 /// }
+/// # });
 /// ```
-pub fn show_tooltip<R>(ctx: &CtxRef, id: Id, add_contents: impl FnOnce(&mut Ui) -> R) -> Option<R> {
+pub fn show_tooltip<R>(
+    ctx: &Context,
+    id: Id,
+    add_contents: impl FnOnce(&mut Ui) -> R,
+) -> Option<R> {
     show_tooltip_at_pointer(ctx, id, add_contents)
 }
 
@@ -70,22 +81,21 @@ pub fn show_tooltip<R>(ctx: &CtxRef, id: Id, add_contents: impl FnOnce(&mut Ui)
 /// Returns `None` if the tooltip could not be placed.
 ///
 /// ```
-/// # let mut ui = egui::Ui::__test();
+/// # egui::__run_test_ui(|ui| {
 /// if ui.ui_contains_pointer() {
 ///     egui::show_tooltip_at_pointer(ui.ctx(), egui::Id::new("my_tooltip"), |ui| {
 ///         ui.label("Helpful text");
 ///     });
 /// }
+/// # });
 /// ```
 pub fn show_tooltip_at_pointer<R>(
-    ctx: &CtxRef,
+    ctx: &Context,
     id: Id,
     add_contents: impl FnOnce(&mut Ui) -> R,
 ) -> Option<R> {
     let suggested_pos = ctx
-        .input()
-        .pointer
-        .hover_pos()
+        .input(|i| i.pointer.hover_pos())
         .map(|pointer_pos| pointer_pos + vec2(16.0, 16.0));
     show_tooltip_at(ctx, id, suggested_pos, add_contents)
 }
@@ -94,13 +104,13 @@ pub fn show_tooltip_at_pointer<R>(
 ///
 /// If the tooltip does not fit under the area, it tries to place it above it instead.
 pub fn show_tooltip_for<R>(
-    ctx: &CtxRef,
+    ctx: &Context,
     id: Id,
     rect: &Rect,
     add_contents: impl FnOnce(&mut Ui) -> R,
 ) -> Option<R> {
     let expanded_rect = rect.expand2(vec2(2.0, 4.0));
-    let (above, position) = if ctx.input().any_touches() {
+    let (above, position) = if ctx.input(|i| i.any_touches()) {
         (true, expanded_rect.left_top())
     } else {
         (false, expanded_rect.left_bottom())
@@ -119,7 +129,7 @@ pub fn show_tooltip_for<R>(
 ///
 /// Returns `None` if the tooltip could not be placed.
 pub fn show_tooltip_at<R>(
-    ctx: &CtxRef,
+    ctx: &Context,
     id: Id,
     suggested_position: Option<Pos2>,
     add_contents: impl FnOnce(&mut Ui) -> R,
@@ -136,75 +146,85 @@ pub fn show_tooltip_at<R>(
 }
 
 fn show_tooltip_at_avoid_dyn<'c, R>(
-    ctx: &CtxRef,
-    mut id: Id,
+    ctx: &Context,
+    individual_id: Id,
     suggested_position: Option<Pos2>,
     above: bool,
     mut avoid_rect: Rect,
     add_contents: Box<dyn FnOnce(&mut Ui) -> R + 'c>,
 ) -> Option<R> {
-    let mut tooltip_rect = Rect::NOTHING;
-    let mut count = 0;
+    let spacing = 4.0;
 
-    let mut position = if let Some((stored_id, stored_tooltip_rect, stored_count)) =
-        ctx.frame_state().tooltip_rect
-    {
-        // if there are multiple tooltips open they should use the same id for the `tooltip_size` caching to work.
-        id = stored_id;
-        tooltip_rect = stored_tooltip_rect;
-        count = stored_count;
-        avoid_rect = avoid_rect.union(tooltip_rect);
+    // if there are multiple tooltips open they should use the same common_id for the `tooltip_size` caching to work.
+    let mut frame_state =
+        ctx.frame_state(|fs| fs.tooltip_state)
+            .unwrap_or(crate::frame_state::TooltipFrameState {
+                common_id: individual_id,
+                rect: Rect::NOTHING,
+                count: 0,
+            });
+
+    let mut position = if frame_state.rect.is_positive() {
+        avoid_rect = avoid_rect.union(frame_state.rect);
         if above {
-            tooltip_rect.left_top()
+            frame_state.rect.left_top() - spacing * Vec2::Y
         } else {
-            tooltip_rect.left_bottom()
+            frame_state.rect.left_bottom() + spacing * Vec2::Y
         }
     } else if let Some(position) = suggested_position {
         position
-    } else if ctx.memory().everything_is_visible() {
+    } else if ctx.memory(|mem| mem.everything_is_visible()) {
         Pos2::ZERO
     } else {
         return None; // No good place for a tooltip :(
     };
 
-    let expected_size = ctx
-        .memory()
-        .data_temp
-        .get_or_default::<crate::containers::popup::MonoState>()
-        .tooltip_size(id, count);
+    let mut long_state = TooltipState::load(ctx).unwrap_or_default();
+    let expected_size =
+        long_state.individual_tooltip_size(frame_state.common_id, frame_state.count);
     let expected_size = expected_size.unwrap_or_else(|| vec2(64.0, 32.0));
 
     if above {
         position.y -= expected_size.y;
     }
 
-    position = position.at_most(ctx.input().screen_rect().max - expected_size);
+    position = position.at_most(ctx.screen_rect().max - expected_size);
 
     // check if we intersect the avoid_rect
     {
         let new_rect = Rect::from_min_size(position, expected_size);
 
-        // Note: We do not use Rect::intersects() since it returns true even if the rects only touch.
+        // Note: We use shrink so that we don't get false positives when the rects just touch
         if new_rect.shrink(1.0).intersects(avoid_rect) {
             if above {
                 // place below instead:
-                position = avoid_rect.left_bottom();
+                position = avoid_rect.left_bottom() + spacing * Vec2::Y;
             } else {
                 // place above instead:
-                position = Pos2::new(position.x, avoid_rect.min.y - expected_size.y);
+                position = Pos2::new(position.x, avoid_rect.min.y - expected_size.y - spacing);
             }
         }
     }
 
-    let position = position.at_least(ctx.input().screen_rect().min);
+    let position = position.at_least(ctx.screen_rect().min);
 
-    let InnerResponse { inner, response } = show_tooltip_area_dyn(ctx, id, position, add_contents);
-    ctx.memory()
-        .data_temp
-        .get_mut_or_default::<crate::containers::popup::MonoState>()
-        .set_tooltip_size(id, count, response.rect.size());
+    let area_id = frame_state.common_id.with(frame_state.count);
+
+    let InnerResponse { inner, response } =
+        show_tooltip_area_dyn(ctx, area_id, position, add_contents);
+
+    long_state.set_individual_tooltip(
+        frame_state.common_id,
+        frame_state.count,
+        individual_id,
+        response.rect.size(),
+    );
+    long_state.store(ctx);
+
+    frame_state.count += 1;
+    frame_state.rect = frame_state.rect.union(response.rect);
+    ctx.frame_state_mut(|fs| fs.tooltip_state = Some(frame_state));
 
-    ctx.frame_state().tooltip_rect = Some((id, tooltip_rect.union(response.rect), count + 1));
     Some(inner)
 }
 
@@ -217,30 +237,32 @@ fn show_tooltip_at_avoid_dyn<'c, R>(
 /// Returns `None` if the tooltip could not be placed.
 ///
 /// ```
-/// # let mut ui = egui::Ui::__test();
+/// # egui::__run_test_ui(|ui| {
 /// if ui.ui_contains_pointer() {
 ///     egui::show_tooltip_text(ui.ctx(), egui::Id::new("my_tooltip"), "Helpful text");
 /// }
+/// # });
 /// ```
-pub fn show_tooltip_text(ctx: &CtxRef, id: Id, text: impl ToString) -> Option<()> {
+pub fn show_tooltip_text(ctx: &Context, id: Id, text: impl Into<WidgetText>) -> Option<()> {
     show_tooltip(ctx, id, |ui| {
-        ui.add(crate::widgets::Label::new(text));
+        crate::widgets::Label::new(text).ui(ui);
     })
 }
 
 /// Show a pop-over window.
 fn show_tooltip_area_dyn<'c, R>(
-    ctx: &CtxRef,
-    id: Id,
+    ctx: &Context,
+    area_id: Id,
     window_pos: Pos2,
     add_contents: Box<dyn FnOnce(&mut Ui) -> R + 'c>,
 ) -> InnerResponse<R> {
     use containers::*;
-    Area::new(id)
+    Area::new(area_id)
         .order(Order::Tooltip)
         .fixed_pos(window_pos)
+        .constrain(true)
         .interactable(false)
-        .drag_bounds(Rect::EVERYTHING) // disable clip rect
+        .drag_bounds(ctx.screen_rect())
         .show(ctx, |ui| {
             Frame::popup(&ctx.style())
                 .show(ui, |ui| {
@@ -251,47 +273,93 @@ fn show_tooltip_area_dyn<'c, R>(
         })
 }
 
-/// Shows a popup below another widget.
-///
-/// Useful for drop-down menus (combo boxes) or suggestion menus under text fields.
-///
-/// You must open the popup with [`Memory::open_popup`] or  [`Memory::toggle_popup`].
-///
-/// Returns `None` if the popup is not open.
-///
-/// ```
-/// # let ui = &mut egui::Ui::__test();
-/// let response = ui.button("Open popup");
-/// let popup_id = ui.make_persistent_id("my_unique_id");
-/// if response.clicked() {
-///     ui.memory().toggle_popup(popup_id);
-/// }
-/// egui::popup::popup_below_widget(ui, popup_id, &response, |ui| {
-///     ui.set_min_width(200.0); // if you want to control the size
-///     ui.label("Some more info, or things you can select:");
-///     ui.label("…");
-/// });
-/// ```
+/// Was this popup visible last frame?
+pub fn was_tooltip_open_last_frame(ctx: &Context, tooltip_id: Id) -> bool {
+    if let Some(state) = TooltipState::load(ctx) {
+        if let Some(common_id) = state.last_common_id {
+            for (count, (individual_id, _size)) in &state.individual_ids_and_sizes {
+                if *individual_id == tooltip_id {
+                    let area_id = common_id.with(count);
+                    let layer_id = LayerId::new(Order::Tooltip, area_id);
+                    if ctx.memory(|mem| mem.areas.visible_last_frame(&layer_id)) {
+                        return true;
+                    }
+                }
+            }
+        }
+    }
+
+    false
+}
+
+/// Helper for [`popup_above_or_below_widget`].
 pub fn popup_below_widget<R>(
     ui: &Ui,
     popup_id: Id,
     widget_response: &Response,
     add_contents: impl FnOnce(&mut Ui) -> R,
 ) -> Option<R> {
-    if ui.memory().is_popup_open(popup_id) {
-        let parent_clip_rect = ui.clip_rect();
+    popup_above_or_below_widget(
+        ui,
+        popup_id,
+        widget_response,
+        AboveOrBelow::Below,
+        add_contents,
+    )
+}
+
+/// Shows a popup above or below another widget.
+///
+/// Useful for drop-down menus (combo boxes) or suggestion menus under text fields.
+///
+/// The opened popup will have the same width as the parent.
+///
+/// You must open the popup with [`Memory::open_popup`] or  [`Memory::toggle_popup`].
+///
+/// Returns `None` if the popup is not open.
+///
+/// ```
+/// # egui::__run_test_ui(|ui| {
+/// let response = ui.button("Open popup");
+/// let popup_id = ui.make_persistent_id("my_unique_id");
+/// if response.clicked() {
+///     ui.memory_mut(|mem| mem.toggle_popup(popup_id));
+/// }
+/// let below = egui::AboveOrBelow::Below;
+/// egui::popup::popup_above_or_below_widget(ui, popup_id, &response, below, |ui| {
+///     ui.set_min_width(200.0); // if you want to control the size
+///     ui.label("Some more info, or things you can select:");
+///     ui.label("…");
+/// });
+/// # });
+/// ```
+pub fn popup_above_or_below_widget<R>(
+    ui: &Ui,
+    popup_id: Id,
+    widget_response: &Response,
+    above_or_below: AboveOrBelow,
+    add_contents: impl FnOnce(&mut Ui) -> R,
+) -> Option<R> {
+    if ui.memory(|mem| mem.is_popup_open(popup_id)) {
+        let (pos, pivot) = match above_or_below {
+            AboveOrBelow::Above => (widget_response.rect.left_top(), Align2::LEFT_BOTTOM),
+            AboveOrBelow::Below => (widget_response.rect.left_bottom(), Align2::LEFT_TOP),
+        };
 
         let inner = Area::new(popup_id)
             .order(Order::Foreground)
-            .fixed_pos(widget_response.rect.left_bottom())
+            .constrain(true)
+            .fixed_pos(pos)
+            .pivot(pivot)
             .show(ui.ctx(), |ui| {
-                ui.set_clip_rect(parent_clip_rect); // for when the combo-box is in a scroll area.
+                // Note: we use a separate clip-rect for this area, so the popup can be outside the parent.
+                // See https://github.com/emilk/egui/issues/825
                 let frame = Frame::popup(ui.style());
-                let frame_margin = frame.margin;
+                let frame_margin = frame.total_margin();
                 frame
                     .show(ui, |ui| {
                         ui.with_layout(Layout::top_down_justified(Align::LEFT), |ui| {
-                            ui.set_width(widget_response.rect.width() - 2.0 * frame_margin.x);
+                            ui.set_width(widget_response.rect.width() - frame_margin.sum().x);
                             add_contents(ui)
                         })
                         .inner
@@ -300,8 +368,8 @@ pub fn popup_below_widget<R>(
             })
             .inner;
 
-        if ui.input().key_pressed(Key::Escape) || widget_response.clicked_elsewhere() {
-            ui.memory().close_popup();
+        if ui.input(|i| i.key_pressed(Key::Escape)) || widget_response.clicked_elsewhere() {
+            ui.memory_mut(|mem| mem.close_popup());
         }
         Some(inner)
     } else {

crates/egui/src/containers/resize.rs

@@ -16,6 +16,16 @@ pub(crate) struct State {
     pub(crate) requested_size: Option<Vec2>,
 }
 
+impl State {
+    pub fn load(ctx: &Context, id: Id) -> Option<Self> {
+        ctx.data_mut(|d| d.get_persisted(id))
+    }
+
+    pub fn store(self, ctx: &Context, id: Id) {
+        ctx.data_mut(|d| d.insert_persisted(id, self));
+    }
+}
+
 /// A region that can be resized by dragging the bottom right corner.
 #[derive(Clone, Copy, Debug)]
 #[must_use = "You should call .show()"]
@@ -42,7 +52,7 @@ impl Default for Resize {
             resizable: true,
             min_size: Vec2::splat(16.0),
             max_size: Vec2::splat(f32::INFINITY),
-            default_size: vec2(320.0, 128.0), // TODO: preferred size of `Resize` area.
+            default_size: vec2(320.0, 128.0), // TODO(emilk): preferred size of [`Resize`] area.
             with_stroke: true,
         }
     }
@@ -55,7 +65,7 @@ impl Resize {
         self
     }
 
-    /// A source for the unique `Id`, e.g. `.id_source("second_resize_area")` or `.id_source(loop_index)`.
+    /// A source for the unique [`Id`], e.g. `.id_source("second_resize_area")` or `.id_source(loop_index)`.
     pub fn id_source(mut self, id_source: impl std::hash::Hash) -> Self {
         self.id_source = Some(Id::new(id_source));
         self
@@ -75,7 +85,7 @@ impl Resize {
     /// Preferred / suggested height. Actual height will depend on contents.
     ///
     /// Examples:
-    /// * if the contents is a `ScrollArea` then this decides the maximum size.
+    /// * if the contents is a [`ScrollArea`] then this decides the maximum size.
     /// * if the contents is a canvas, this decides the height of it,
     /// * if the contents is text and buttons, then the `default_height` is ignored
     ///   and the height is picked automatically..
@@ -94,11 +104,13 @@ impl Resize {
         self.min_size = min_size.into();
         self
     }
+
     /// Won't shrink to smaller than this
     pub fn min_width(mut self, min_width: f32) -> Self {
         self.min_size.x = min_width;
         self
     }
+
     /// Won't shrink to smaller than this
     pub fn min_height(mut self, min_height: f32) -> Self {
         self.min_size.y = min_height;
@@ -160,7 +172,7 @@ impl Resize {
             ui.make_persistent_id(id_source)
         });
 
-        let mut state = *ui.memory().id_data.get_or_insert_with(id, || {
+        let mut state = State::load(ui.ctx(), id).unwrap_or_else(|| {
             ui.ctx().request_repaint(); // counter frame delay
 
             let default_size = self
@@ -168,7 +180,7 @@ impl Resize {
                 .at_least(self.min_size)
                 .at_most(self.max_size)
                 .at_most(
-                    ui.input().screen_rect().size() - 2.0 * ui.spacing().window_padding, // hack for windows
+                    ui.ctx().screen_rect().size() - ui.spacing().window_margin.sum(), // hack for windows
                 );
 
             State {
@@ -207,7 +219,7 @@ impl Resize {
         } else {
             // We are not being actively resized, so auto-expand to include size of last frame.
             // This prevents auto-shrinking if the contents contain width-filling widgets (separators etc)
-            // but it makes a lot of interactions with `Window`s nicer.
+            // but it makes a lot of interactions with [`Window`]s nicer.
             state.desired_size = state.desired_size.max(state.last_content_size);
         }
 
@@ -293,11 +305,11 @@ impl Resize {
             paint_resize_corner(ui, &corner_response);
 
             if corner_response.hovered() || corner_response.dragged() {
-                ui.ctx().output().cursor_icon = CursorIcon::ResizeNwSe;
+                ui.ctx().set_cursor_icon(CursorIcon::ResizeNwSe);
             }
         }
 
-        ui.memory().id_data.insert(id, state);
+        state.store(ui.ctx(), id);
 
         if ui.ctx().style().debug.show_resize {
             ui.ctx().debug_painter().debug_rect(

crates/egui/src/containers/scroll_area.rs

@@ -10,15 +10,19 @@ use crate::*;
 #[derive(Clone, Copy, Debug)]
 #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
 #[cfg_attr(feature = "serde", serde(default))]
-pub(crate) struct State {
+pub struct State {
     /// Positive offset means scrolling down/right
-    offset: Vec2,
+    pub offset: Vec2,
 
+    /// Were the scroll bars visible last frame?
     show_scroll: [bool; 2],
 
+    /// The content were to large to fit large frame.
+    content_is_too_large: [bool; 2],
+
     /// Momentum, used for kinetic scrolling
     #[cfg_attr(feature = "serde", serde(skip))]
-    pub vel: Vec2,
+    vel: Vec2,
 
     /// Mouse offset relative to the top of the handle when started moving the handle.
     scroll_start_offset_from_top_left: [Option<f32>; 2],
@@ -34,6 +38,7 @@ impl Default for State {
         Self {
             offset: Vec2::ZERO,
             show_scroll: [false; 2],
+            content_is_too_large: [false; 2],
             vel: Vec2::ZERO,
             scroll_start_offset_from_top_left: [None; 2],
             scroll_stuck_to_end: [true; 2],
@@ -41,13 +46,45 @@ impl Default for State {
     }
 }
 
+impl State {
+    pub fn load(ctx: &Context, id: Id) -> Option<Self> {
+        ctx.data_mut(|d| d.get_persisted(id))
+    }
+
+    pub fn store(self, ctx: &Context, id: Id) {
+        ctx.data_mut(|d| d.insert_persisted(id, self));
+    }
+}
+
+pub struct ScrollAreaOutput<R> {
+    /// What the user closure returned.
+    pub inner: R,
+
+    /// [`Id`] of the [`ScrollArea`].
+    pub id: Id,
+
+    /// The current state of the scroll area.
+    pub state: State,
+
+    /// The size of the content. If this is larger than [`Self::inner_rect`],
+    /// then there was need for scrolling.
+    pub content_size: Vec2,
+
+    /// Where on the screen the content is (excludes scroll bars).
+    pub inner_rect: Rect,
+}
+
 /// Add vertical and/or horizontal scrolling to a contained [`Ui`].
 ///
 /// ```
-/// # let ui = &mut egui::Ui::__test();
+/// # egui::__run_test_ui(|ui| {
 /// egui::ScrollArea::vertical().show(ui, |ui| {
 ///     // Add a lot of widgets here.
 /// });
+/// # });
+/// ```
+///
+/// You can scroll to an element using [`Response::scroll_to_me`], [`Ui::scroll_to_cursor`] and [`Ui::scroll_to_rect`].
 #[derive(Clone, Debug)]
 #[must_use = "You should call .show()"]
 pub struct ScrollArea {
@@ -55,11 +92,15 @@ pub struct ScrollArea {
     has_bar: [bool; 2],
     auto_shrink: [bool; 2],
     max_size: Vec2,
+    min_scrolled_size: Vec2,
     always_show_scroll: bool,
     id_source: Option<Id>,
-    offset: Option<Vec2>,
+    offset_x: Option<f32>,
+    offset_y: Option<f32>,
+
     /// If false, we ignore scroll events.
     scrolling_enabled: bool,
+    drag_to_scroll: bool,
 
     /// If true for vertical or horizontal the scroll wheel will stick to the
     /// end position until user manually changes position. It will become true
@@ -96,42 +137,59 @@ impl ScrollArea {
             has_bar,
             auto_shrink: [true; 2],
             max_size: Vec2::INFINITY,
+            min_scrolled_size: Vec2::splat(64.0),
             always_show_scroll: false,
             id_source: None,
-            offset: None,
+            offset_x: None,
+            offset_y: None,
             scrolling_enabled: true,
+            drag_to_scroll: true,
             stick_to_end: [false; 2],
         }
     }
 
-    /// Will make the area be as high as it is allowed to be (i.e. fill the [`Ui`] it is in)
-    #[deprecated = "Use pub ScrollArea::vertical() instead"]
-    pub fn auto_sized() -> Self {
-        Self::vertical()
-    }
-
-    /// Use `f32::INFINITY` if you want the scroll area to expand to fit the surrounding Ui
-    #[deprecated = "Use pub ScrollArea::vertical().max_height(…) instead"]
-    pub fn from_max_height(max_height: f32) -> Self {
-        Self::vertical().max_height(max_height)
-    }
-
-    /// The desired width of the outer frame of the scroll area.
+    /// The maximum width of the outer frame of the scroll area.
     ///
-    /// Use `f32::INFINITY` if you want the scroll area to expand to fit the surrounding `Ui` (default).
+    /// Use `f32::INFINITY` if you want the scroll area to expand to fit the surrounding [`Ui`] (default).
+    ///
+    /// See also [`Self::auto_shrink`].
     pub fn max_width(mut self, max_width: f32) -> Self {
         self.max_size.x = max_width;
         self
     }
 
-    /// The desired height of the outer frame of the scroll area.
+    /// The maximum height of the outer frame of the scroll area.
     ///
-    /// Use `f32::INFINITY` if you want the scroll area to expand to fit the surrounding `Ui` (default).
+    /// Use `f32::INFINITY` if you want the scroll area to expand to fit the surrounding [`Ui`] (default).
+    ///
+    /// See also [`Self::auto_shrink`].
     pub fn max_height(mut self, max_height: f32) -> Self {
         self.max_size.y = max_height;
         self
     }
 
+    /// The minimum width of a horizontal scroll area which requires scroll bars.
+    ///
+    /// The [`ScrollArea`] will only become smaller than this if the content is smaller than this
+    /// (and so we don't require scroll bars).
+    ///
+    /// Default: `64.0`.
+    pub fn min_scrolled_width(mut self, min_scrolled_width: f32) -> Self {
+        self.min_scrolled_size.x = min_scrolled_width;
+        self
+    }
+
+    /// The minimum height of a vertical scroll area which requires scroll bars.
+    ///
+    /// The [`ScrollArea`] will only become smaller than this if the content is smaller than this
+    /// (and so we don't require scroll bars).
+    ///
+    /// Default: `64.0`.
+    pub fn min_scrolled_height(mut self, min_scrolled_height: f32) -> Self {
+        self.min_scrolled_size.y = min_scrolled_height;
+        self
+    }
+
     /// If `false` (default), the scroll bar will be hidden when not needed/
     /// If `true`, the scroll bar will always be displayed even if not needed.
     pub fn always_show_scroll(mut self, always_show_scroll: bool) -> Self {
@@ -139,18 +197,44 @@ impl ScrollArea {
         self
     }
 
-    /// A source for the unique `Id`, e.g. `.id_source("second_scroll_area")` or `.id_source(loop_index)`.
+    /// A source for the unique [`Id`], e.g. `.id_source("second_scroll_area")` or `.id_source(loop_index)`.
     pub fn id_source(mut self, id_source: impl std::hash::Hash) -> Self {
         self.id_source = Some(Id::new(id_source));
         self
     }
 
+    /// Set the horizontal and vertical scroll offset position.
+    ///
+    /// Positive offset means scrolling down/right.
+    ///
+    /// See also: [`Self::vertical_scroll_offset`], [`Self::horizontal_scroll_offset`],
+    /// [`Ui::scroll_to_cursor`](crate::ui::Ui::scroll_to_cursor) and
+    /// [`Response::scroll_to_me`](crate::Response::scroll_to_me)
+    pub fn scroll_offset(mut self, offset: Vec2) -> Self {
+        self.offset_x = Some(offset.x);
+        self.offset_y = Some(offset.y);
+        self
+    }
+
     /// Set the vertical scroll offset position.
     ///
-    /// See also: [`Ui::scroll_to_cursor`](crate::ui::Ui::scroll_to_cursor) and
+    /// Positive offset means scrolling down.
+    ///
+    /// See also: [`Self::scroll_offset`], [`Ui::scroll_to_cursor`](crate::ui::Ui::scroll_to_cursor) and
     /// [`Response::scroll_to_me`](crate::Response::scroll_to_me)
-    pub fn scroll_offset(mut self, offset: f32) -> Self {
-        self.offset = Some(Vec2::new(0.0, offset));
+    pub fn vertical_scroll_offset(mut self, offset: f32) -> Self {
+        self.offset_y = Some(offset);
+        self
+    }
+
+    /// Set the horizontal scroll offset position.
+    ///
+    /// Positive offset means scrolling right.
+    ///
+    /// See also: [`Self::scroll_offset`], [`Ui::scroll_to_cursor`](crate::ui::Ui::scroll_to_cursor) and
+    /// [`Response::scroll_to_me`](crate::Response::scroll_to_me)
+    pub fn horizontal_scroll_offset(mut self, offset: f32) -> Self {
+        self.offset_x = Some(offset);
         self
     }
 
@@ -172,12 +256,13 @@ impl ScrollArea {
         self
     }
 
-    /// Control the scrolling behavior
-    /// If `true` (default), the scroll area will respond to user scrolling
-    /// If `false`, the scroll area will not respond to user scrolling
+    /// Control the scrolling behavior.
+    ///
+    /// * If `true` (default), the scroll area will respond to user scrolling.
+    /// * If `false`, the scroll area will not respond to user scrolling.
     ///
     /// This can be used, for example, to optionally freeze scrolling while the user
-    /// is inputing text in a `TextEdit` widget contained within the scroll area.
+    /// is typing text in a [`TextEdit`] widget contained within the scroll area.
     ///
     /// This controls both scrolling directions.
     pub fn enable_scrolling(mut self, enable: bool) -> Self {
@@ -185,11 +270,22 @@ impl ScrollArea {
         self
     }
 
-    /// For each enabled axis, should the containing area shrink
-    /// if the content is small?
+    /// Can the user drag the scroll area to scroll?
     ///
-    /// If true, egui will add blank space outside the scroll area.
-    /// If false, egui will add blank space inside the scroll area.
+    /// This is useful for touch screens.
+    ///
+    /// If `true`, the [`ScrollArea`] will sense drags.
+    ///
+    /// Default: `true`.
+    pub fn drag_to_scroll(mut self, drag_to_scroll: bool) -> Self {
+        self.drag_to_scroll = drag_to_scroll;
+        self
+    }
+
+    /// For each axis, should the containing area shrink if the content is small?
+    ///
+    /// * If `true`, egui will add blank space outside the scroll area.
+    /// * If `false`, egui will add blank space inside the scroll area.
     ///
     /// Default: `[true; 2]`.
     pub fn auto_shrink(mut self, auto_shrink: [bool; 2]) -> Self {
@@ -207,8 +303,8 @@ impl ScrollArea {
     /// it will remain focused on whatever content viewport the user left it on. If the scroll
     /// handle is dragged all the way to the right it will again become stuck and remain there
     /// until manually pulled from the end position.
-    pub fn stick_to_right(mut self) -> Self {
-        self.stick_to_end[0] = true;
+    pub fn stick_to_right(mut self, stick: bool) -> Self {
+        self.stick_to_end[0] = stick;
         self
     }
 
@@ -218,8 +314,8 @@ impl ScrollArea {
     /// it will remain focused on whatever content viewport the user left it on. If the scroll
     /// handle is dragged to the bottom it will again become stuck and remain there until manually
     /// pulled from the end position.
-    pub fn stick_to_bottom(mut self) -> Self {
-        self.stick_to_end[1] = true;
+    pub fn stick_to_bottom(mut self, stick: bool) -> Self {
+        self.stick_to_end[1] = stick;
         self
     }
 }
@@ -233,6 +329,7 @@ struct Prepared {
     /// width of the vertical bar, and the height of the horizontal bar?
     current_bar_use: Vec2,
     always_show_scroll: bool,
+    /// Where on the screen the content is (excludes scroll bars).
     inner_rect: Rect,
     content_ui: Ui,
     /// Relative coordinates: the offset and size of the view of the inner UI.
@@ -248,10 +345,13 @@ impl ScrollArea {
             has_bar,
             auto_shrink,
             max_size,
+            min_scrolled_size,
             always_show_scroll,
             id_source,
-            offset,
+            offset_x,
+            offset_y,
             scrolling_enabled,
+            drag_to_scroll,
             stick_to_end,
         } = self;
 
@@ -259,11 +359,15 @@ impl ScrollArea {
 
         let id_source = id_source.unwrap_or_else(|| Id::new("scroll_area"));
         let id = ui.make_persistent_id(id_source);
-        let mut state = *ctx.memory().id_data.get_or_default::<State>(id);
+        ui.ctx().check_for_id_clash(
+            id,
+            Rect::from_min_size(ui.available_rect_before_wrap().min, Vec2::ZERO),
+            "ScrollArea",
+        );
+        let mut state = State::load(&ctx, id).unwrap_or_default();
 
-        if let Some(offset) = offset {
-            state.offset = offset;
-        }
+        state.offset.x = offset_x.unwrap_or(state.offset.x);
+        state.offset.y = offset_y.unwrap_or(state.offset.y);
 
         let max_scroll_bar_width = max_scroll_bar_width_with_margin(ui);
 
@@ -289,39 +393,108 @@ impl ScrollArea {
 
         let outer_size = available_outer.size().at_most(max_size);
 
-        let inner_size = outer_size - current_bar_use;
+        let inner_size = {
+            let mut inner_size = outer_size - current_bar_use;
+
+            // Don't go so far that we shrink to zero.
+            // In particular, if we put a [`ScrollArea`] inside of a [`ScrollArea`], the inner
+            // one shouldn't collapse into nothingness.
+            // See https://github.com/emilk/egui/issues/1097
+            for d in 0..2 {
+                if has_bar[d] {
+                    inner_size[d] = inner_size[d].max(min_scrolled_size[d]);
+                }
+            }
+            inner_size
+        };
+
         let inner_rect = Rect::from_min_size(available_outer.min, inner_size);
 
-        let mut inner_child_max_size = inner_size;
+        let mut content_max_size = inner_size;
 
         if true {
             // Tell the inner Ui to *try* to fit the content without needing to scroll,
-            // i.e. better to wrap text than showing a horizontal scrollbar!
+            // i.e. better to wrap text and shrink images than showing a horizontal scrollbar!
         } else {
             // Tell the inner Ui to use as much space as possible, we can scroll to see it!
             for d in 0..2 {
                 if has_bar[d] {
-                    inner_child_max_size[d] = f32::INFINITY;
+                    content_max_size[d] = f32::INFINITY;
                 }
             }
         }
 
-        let mut content_ui = ui.child_ui(
-            Rect::from_min_size(inner_rect.min - state.offset, inner_child_max_size),
-            *ui.layout(),
-        );
-        let mut content_clip_rect = inner_rect.expand(ui.visuals().clip_rect_margin);
-        content_clip_rect = content_clip_rect.intersect(ui.clip_rect());
-        // Nice handling of forced resizing beyond the possible:
-        for d in 0..2 {
-            if !has_bar[d] {
-                content_clip_rect.max[d] = ui.clip_rect().max[d] - current_bar_use[d];
+        let content_max_rect = Rect::from_min_size(inner_rect.min - state.offset, content_max_size);
+        let mut content_ui = ui.child_ui(content_max_rect, *ui.layout());
+
+        {
+            // Clip the content, but only when we really need to:
+            let clip_rect_margin = ui.visuals().clip_rect_margin;
+            let scroll_bar_inner_margin = ui.spacing().scroll_bar_inner_margin;
+            let mut content_clip_rect = ui.clip_rect();
+            for d in 0..2 {
+                if has_bar[d] {
+                    if state.content_is_too_large[d] {
+                        content_clip_rect.min[d] = inner_rect.min[d] - clip_rect_margin;
+                        content_clip_rect.max[d] = inner_rect.max[d] + clip_rect_margin;
+                    }
+
+                    if state.show_scroll[d] {
+                        // Make sure content doesn't cover scroll bars
+                        let tiny_gap = 1.0;
+                        content_clip_rect.max[1 - d] =
+                            inner_rect.max[1 - d] + scroll_bar_inner_margin - tiny_gap;
+                    }
+                } else {
+                    // Nice handling of forced resizing beyond the possible:
+                    content_clip_rect.max[d] = ui.clip_rect().max[d] - current_bar_use[d];
+                }
             }
+            // Make sure we din't accidentally expand the clip rect
+            content_clip_rect = content_clip_rect.intersect(ui.clip_rect());
+            content_ui.set_clip_rect(content_clip_rect);
         }
-        content_ui.set_clip_rect(content_clip_rect);
 
         let viewport = Rect::from_min_size(Pos2::ZERO + state.offset, inner_size);
 
+        if (scrolling_enabled && drag_to_scroll)
+            && (state.content_is_too_large[0] || state.content_is_too_large[1])
+        {
+            // Drag contents to scroll (for touch screens mostly).
+            // We must do this BEFORE adding content to the `ScrollArea`,
+            // or we will steal input from the widgets we contain.
+            let content_response = ui.interact(inner_rect, id.with("area"), Sense::drag());
+
+            if content_response.dragged() {
+                for d in 0..2 {
+                    if has_bar[d] {
+                        ui.input(|input| {
+                            state.offset[d] -= input.pointer.delta()[d];
+                            state.vel[d] = input.pointer.velocity()[d];
+                        });
+                        state.scroll_stuck_to_end[d] = false;
+                    } else {
+                        state.vel[d] = 0.0;
+                    }
+                }
+            } else {
+                let stop_speed = 20.0; // Pixels per second.
+                let friction_coeff = 1000.0; // Pixels per second squared.
+                let dt = ui.input(|i| i.unstable_dt);
+
+                let friction = friction_coeff * dt;
+                if friction > state.vel.length() || state.vel.length() < stop_speed {
+                    state.vel = Vec2::ZERO;
+                } else {
+                    state.vel -= friction * state.vel.normalized();
+                    // Offset has an inverted coordinate system compared to
+                    // the velocity, so we subtract it instead of adding it
+                    state.offset -= state.vel * dt;
+                    ui.ctx().request_repaint();
+                }
+            }
+        }
+
         Prepared {
             id,
             state,
@@ -337,44 +510,52 @@ impl ScrollArea {
         }
     }
 
-    /// Show the `ScrollArea`, and add the contents to the viewport.
+    /// Show the [`ScrollArea`], and add the contents to the viewport.
     ///
     /// If the inner area can be very long, consider using [`Self::show_rows`] instead.
-    pub fn show<R>(self, ui: &mut Ui, add_contents: impl FnOnce(&mut Ui) -> R) -> R {
+    pub fn show<R>(
+        self,
+        ui: &mut Ui,
+        add_contents: impl FnOnce(&mut Ui) -> R,
+    ) -> ScrollAreaOutput<R> {
         self.show_viewport_dyn(ui, Box::new(|ui, _viewport| add_contents(ui)))
     }
 
     /// Efficiently show only the visible part of a large number of rows.
     ///
     /// ```
-    /// # let ui = &mut egui::Ui::__test();
+    /// # egui::__run_test_ui(|ui| {
     /// let text_style = egui::TextStyle::Body;
-    /// let row_height = ui.fonts()[text_style].row_height();
+    /// let row_height = ui.text_style_height(&text_style);
     /// // let row_height = ui.spacing().interact_size.y; // if you are adding buttons instead of labels.
-    /// let num_rows = 10_000;
-    /// egui::ScrollArea::vertical().show_rows(ui, row_height, num_rows, |ui, row_range| {
+    /// let total_rows = 10_000;
+    /// egui::ScrollArea::vertical().show_rows(ui, row_height, total_rows, |ui, row_range| {
     ///     for row in row_range {
-    ///         let text = format!("Row {}/{}", row + 1, num_rows);
+    ///         let text = format!("Row {}/{}", row + 1, total_rows);
     ///         ui.label(text);
     ///     }
     /// });
+    /// # });
+    /// ```
     pub fn show_rows<R>(
         self,
         ui: &mut Ui,
         row_height_sans_spacing: f32,
-        num_rows: usize,
+        total_rows: usize,
         add_contents: impl FnOnce(&mut Ui, std::ops::Range<usize>) -> R,
-    ) -> R {
+    ) -> ScrollAreaOutput<R> {
         let spacing = ui.spacing().item_spacing;
         let row_height_with_spacing = row_height_sans_spacing + spacing.y;
         self.show_viewport(ui, |ui, viewport| {
-            ui.set_height((row_height_with_spacing * num_rows as f32 - spacing.y).at_least(0.0));
+            ui.set_height((row_height_with_spacing * total_rows as f32 - spacing.y).at_least(0.0));
 
-            let min_row = (viewport.min.y / row_height_with_spacing)
-                .floor()
-                .at_least(0.0) as usize;
-            let max_row = (viewport.max.y / row_height_with_spacing).ceil() as usize + 1;
-            let max_row = max_row.at_most(num_rows);
+            let mut min_row = (viewport.min.y / row_height_with_spacing).floor() as usize;
+            let mut max_row = (viewport.max.y / row_height_with_spacing).ceil() as usize + 1;
+            if max_row > total_rows {
+                let diff = max_row.saturating_sub(min_row);
+                max_row = total_rows;
+                min_row = total_rows.saturating_sub(diff);
+            }
 
             let y_min = ui.max_rect().top() + min_row as f32 * row_height_with_spacing;
             let y_max = ui.max_rect().top() + max_row as f32 * row_height_with_spacing;
@@ -391,9 +572,13 @@ impl ScrollArea {
 
     /// This can be used to only paint the visible part of the contents.
     ///
-    /// `add_contents` is past the viewport, which is the relative view of the content.
+    /// `add_contents` is given the viewport rectangle, which is the relative view of the content.
     /// So if the passed rect has min = zero, then show the top left content (the user has not scrolled).
-    pub fn show_viewport<R>(self, ui: &mut Ui, add_contents: impl FnOnce(&mut Ui, Rect) -> R) -> R {
+    pub fn show_viewport<R>(
+        self,
+        ui: &mut Ui,
+        add_contents: impl FnOnce(&mut Ui, Rect) -> R,
+    ) -> ScrollAreaOutput<R> {
         self.show_viewport_dyn(ui, Box::new(add_contents))
     }
 
@@ -401,16 +586,25 @@ impl ScrollArea {
         self,
         ui: &mut Ui,
         add_contents: Box<dyn FnOnce(&mut Ui, Rect) -> R + 'c>,
-    ) -> R {
+    ) -> ScrollAreaOutput<R> {
         let mut prepared = self.begin(ui);
-        let ret = add_contents(&mut prepared.content_ui, prepared.viewport);
-        prepared.end(ui);
-        ret
+        let id = prepared.id;
+        let inner_rect = prepared.inner_rect;
+        let inner = add_contents(&mut prepared.content_ui, prepared.viewport);
+        let (content_size, state) = prepared.end(ui);
+        ScrollAreaOutput {
+            inner,
+            id,
+            state,
+            content_size,
+            inner_rect,
+        }
     }
 }
 
 impl Prepared {
-    fn end(self, ui: &mut Ui) {
+    /// Returns content size and state
+    fn end(self, ui: &mut Ui) -> (Vec2, State) {
         let Prepared {
             id,
             mut state,
@@ -430,20 +624,42 @@ impl Prepared {
         for d in 0..2 {
             if has_bar[d] {
                 // We take the scroll target so only this ScrollArea will use it:
-                let scroll_target = content_ui.ctx().frame_state().scroll_target[d].take();
+                let scroll_target = content_ui
+                    .ctx()
+                    .frame_state_mut(|state| state.scroll_target[d].take());
                 if let Some((scroll, align)) = scroll_target {
-                    let center_factor = align.to_factor();
-
                     let min = content_ui.min_rect().min[d];
-                    let visible_range = min..=min + content_ui.clip_rect().size()[d];
-                    let offset = scroll - lerp(visible_range, center_factor);
-
+                    let clip_rect = content_ui.clip_rect();
+                    let visible_range = min..=min + clip_rect.size()[d];
+                    let start = *scroll.start();
+                    let end = *scroll.end();
+                    let clip_start = clip_rect.min[d];
+                    let clip_end = clip_rect.max[d];
                     let mut spacing = ui.spacing().item_spacing[d];
 
-                    // Depending on the alignment we need to add or subtract the spacing
-                    spacing *= remap(center_factor, 0.0..=1.0, -1.0..=1.0);
+                    let delta = if let Some(align) = align {
+                        let center_factor = align.to_factor();
 
-                    state.offset[d] = offset + spacing;
+                        let offset =
+                            lerp(scroll, center_factor) - lerp(visible_range, center_factor);
+
+                        // Depending on the alignment we need to add or subtract the spacing
+                        spacing *= remap(center_factor, 0.0..=1.0, -1.0..=1.0);
+
+                        offset + spacing - state.offset[d]
+                    } else if start < clip_start && end < clip_end {
+                        -(clip_start - start + spacing).min(clip_end - end - spacing)
+                    } else if end > clip_end && start > clip_start {
+                        (end - clip_end + spacing).min(start - clip_start - spacing)
+                    } else {
+                        // Ui is already in view, no need to adjust scroll.
+                        0.0
+                    };
+
+                    if delta != 0.0 {
+                        state.offset[d] += delta;
+                        ui.ctx().request_repaint();
+                    }
                 }
             }
         }
@@ -461,76 +677,21 @@ impl Prepared {
                 };
             }
 
-            let mut inner_rect = Rect::from_min_size(inner_rect.min, inner_size);
-
-            // The window that egui sits in can't be expanded by egui, so we need to respect it:
-            for d in 0..2 {
-                if !has_bar[d] {
-                    // HACK for when we have a vertical-only scroll area in a top level panel,
-                    // and that panel is not wide enough for the contents.
-                    // This code ensures we still see the scroll bar!
-                    let max = ui.input().screen_rect().max[d]
-                        - current_bar_use[d]
-                        - ui.spacing().item_spacing[d];
-                    inner_rect.max[d] = inner_rect.max[d].at_most(max);
-                    // TODO: maybe auto-enable horizontal/vertical scrolling if this limit is reached
-                }
-            }
-
-            inner_rect
+            Rect::from_min_size(inner_rect.min, inner_size)
         };
 
         let outer_rect = Rect::from_min_size(inner_rect.min, inner_rect.size() + current_bar_use);
 
-        let content_is_too_small = [
+        let content_is_too_large = [
             content_size.x > inner_rect.width(),
             content_size.y > inner_rect.height(),
         ];
 
-        if content_is_too_small[0] || content_is_too_small[1] {
-            // Drag contents to scroll (for touch screens mostly):
-            let sense = if self.scrolling_enabled {
-                Sense::drag()
-            } else {
-                Sense::hover()
-            };
-            let content_response = ui.interact(inner_rect, id.with("area"), sense);
-
-            let input = ui.input();
-            if content_response.dragged() {
-                for d in 0..2 {
-                    if has_bar[d] {
-                        state.offset[d] -= input.pointer.delta()[d];
-                        state.vel[d] = input.pointer.velocity()[d];
-                        state.scroll_stuck_to_end[d] = false;
-                    } else {
-                        state.vel[d] = 0.0;
-                    }
-                }
-            } else {
-                let stop_speed = 20.0; // Pixels per second.
-                let friction_coeff = 1000.0; // Pixels per second squared.
-                let dt = input.unstable_dt;
-
-                let friction = friction_coeff * dt;
-                if friction > state.vel.length() || state.vel.length() < stop_speed {
-                    state.vel = Vec2::ZERO;
-                } else {
-                    state.vel -= friction * state.vel.normalized();
-                    // Offset has an inverted coordinate system compared to
-                    // the velocity, so we subtract it instead of adding it
-                    state.offset -= state.vel * dt;
-                    ui.ctx().request_repaint();
-                }
-            }
-        }
-
         let max_offset = content_size - inner_rect.size();
         if scrolling_enabled && ui.rect_contains_pointer(outer_rect) {
             for d in 0..2 {
                 if has_bar[d] {
-                    let mut frame_state = ui.ctx().frame_state();
-                    let scroll_delta = frame_state.scroll_delta;
+                    let scroll_delta = ui.ctx().frame_state(|fs| fs.scroll_delta);
 
                     let scrolling_up = state.offset[d] > 0.0 && scroll_delta[d] > 0.0;
                     let scrolling_down = state.offset[d] < max_offset[d] && scroll_delta[d] < 0.0;
@@ -538,7 +699,7 @@ impl Prepared {
                     if scrolling_up || scrolling_down {
                         state.offset[d] -= scroll_delta[d];
                         // Clear scroll delta so no parent scroll will use it.
-                        frame_state.scroll_delta[d] = 0.0;
+                        ui.ctx().frame_state_mut(|fs| fs.scroll_delta[d] = 0.0);
                         state.scroll_stuck_to_end[d] = false;
                     }
                 }
@@ -546,8 +707,8 @@ impl Prepared {
         }
 
         let show_scroll_this_frame = [
-            content_is_too_small[0] || always_show_scroll,
-            content_is_too_small[1] || always_show_scroll,
+            content_is_too_large[0] || always_show_scroll,
+            content_is_too_large[1] || always_show_scroll,
         ];
 
         let max_scroll_bar_width = max_scroll_bar_width_with_margin(ui);
@@ -567,13 +728,29 @@ impl Prepared {
                 continue;
             }
 
-            // margin between contents and scroll bar
-            let margin = animation_t * ui.spacing().item_spacing.x;
-            let min_cross = inner_rect.max[1 - d] + margin; // left of vertical scroll (d == 1)
-            let max_cross = outer_rect.max[1 - d]; // right of vertical scroll (d == 1)
+            // margin on either side of the scroll bar
+            let inner_margin = animation_t * ui.spacing().scroll_bar_inner_margin;
+            let outer_margin = animation_t * ui.spacing().scroll_bar_outer_margin;
+            let mut min_cross = inner_rect.max[1 - d] + inner_margin; // left of vertical scroll (d == 1)
+            let mut max_cross = outer_rect.max[1 - d] - outer_margin; // right of vertical scroll (d == 1)
             let min_main = inner_rect.min[d]; // top of vertical scroll (d == 1)
             let max_main = inner_rect.max[d]; // bottom of vertical scroll (d == 1)
 
+            if ui.clip_rect().max[1 - d] < max_cross + outer_margin {
+                // Move the scrollbar so it is visible. This is needed in some cases.
+                // For instance:
+                // * When we have a vertical-only scroll area in a top level panel,
+                //   and that panel is not wide enough for the contents.
+                // * When one ScrollArea is nested inside another, and the outer
+                //   is scrolled so that the scroll-bars of the inner ScrollArea (us)
+                //   is outside the clip rectangle.
+                // Really this should use the tighter clip_rect that ignores clip_rect_margin, but we don't store that.
+                // clip_rect_margin is quite a hack. It would be nice to get rid of it.
+                let width = max_cross - min_cross;
+                max_cross = ui.clip_rect().max[1 - d] - outer_margin;
+                min_cross = max_cross - width;
+            }
+
             let outer_scroll_rect = if d == 0 {
                 Rect::from_min_max(
                     pos2(inner_rect.left(), min_cross),
@@ -648,50 +825,52 @@ impl Prepared {
                 state.vel[d] = 0.0;
             }
 
-            // Avoid frame-delay by calculating a new handle rect:
-            let mut handle_rect = if d == 0 {
-                Rect::from_min_max(
-                    pos2(from_content(state.offset.x), min_cross),
-                    pos2(from_content(state.offset.x + inner_rect.width()), max_cross),
-                )
-            } else {
-                Rect::from_min_max(
-                    pos2(min_cross, from_content(state.offset.y)),
-                    pos2(
-                        max_cross,
-                        from_content(state.offset.y + inner_rect.height()),
-                    ),
-                )
-            };
-            let min_handle_size = ui.spacing().scroll_bar_width;
-            if handle_rect.size()[d] < min_handle_size {
-                handle_rect = Rect::from_center_size(
-                    handle_rect.center(),
-                    if d == 0 {
-                        vec2(min_handle_size, handle_rect.size().y)
-                    } else {
-                        vec2(handle_rect.size().x, min_handle_size)
-                    },
-                );
+            if ui.is_rect_visible(outer_scroll_rect) {
+                // Avoid frame-delay by calculating a new handle rect:
+                let mut handle_rect = if d == 0 {
+                    Rect::from_min_max(
+                        pos2(from_content(state.offset.x), min_cross),
+                        pos2(from_content(state.offset.x + inner_rect.width()), max_cross),
+                    )
+                } else {
+                    Rect::from_min_max(
+                        pos2(min_cross, from_content(state.offset.y)),
+                        pos2(
+                            max_cross,
+                            from_content(state.offset.y + inner_rect.height()),
+                        ),
+                    )
+                };
+                let min_handle_size = ui.spacing().scroll_handle_min_length;
+                if handle_rect.size()[d] < min_handle_size {
+                    handle_rect = Rect::from_center_size(
+                        handle_rect.center(),
+                        if d == 0 {
+                            vec2(min_handle_size, handle_rect.size().y)
+                        } else {
+                            vec2(handle_rect.size().x, min_handle_size)
+                        },
+                    );
+                }
+
+                let visuals = if scrolling_enabled {
+                    ui.style().interact(&response)
+                } else {
+                    &ui.style().visuals.widgets.inactive
+                };
+
+                ui.painter().add(epaint::Shape::rect_filled(
+                    outer_scroll_rect,
+                    visuals.rounding,
+                    ui.visuals().extreme_bg_color,
+                ));
+
+                ui.painter().add(epaint::Shape::rect_filled(
+                    handle_rect,
+                    visuals.rounding,
+                    visuals.bg_fill,
+                ));
             }
-
-            let visuals = if scrolling_enabled {
-                ui.style().interact(&response)
-            } else {
-                &ui.style().visuals.widgets.inactive
-            };
-
-            ui.painter().add(epaint::Shape::rect_filled(
-                outer_scroll_rect,
-                visuals.corner_radius,
-                ui.visuals().extreme_bg_color,
-            ));
-
-            ui.painter().add(epaint::Shape::rect_filled(
-                handle_rect,
-                visuals.corner_radius,
-                visuals.bg_fill,
-            ));
         }
 
         ui.advance_cursor_after_rect(outer_rect);
@@ -704,22 +883,30 @@ impl Prepared {
         state.offset = state.offset.min(available_offset);
         state.offset = state.offset.max(Vec2::ZERO);
 
-        // Is scroll handle at end of content? If so enter sticky mode.
+        // Is scroll handle at end of content, or is there no scrollbar
+        // yet (not enough content), but sticking is requested? If so, enter sticky mode.
         // Only has an effect if stick_to_end is enabled but we save in
         // state anyway so that entering sticky mode at an arbitrary time
         // has appropriate effect.
         state.scroll_stuck_to_end = [
-            state.offset[0] == available_offset[0],
-            state.offset[1] == available_offset[1],
+            (state.offset[0] == available_offset[0])
+                || (self.stick_to_end[0] && available_offset[0] < 0.),
+            (state.offset[1] == available_offset[1])
+                || (self.stick_to_end[1] && available_offset[1] < 0.),
         ];
 
         state.show_scroll = show_scroll_this_frame;
+        state.content_is_too_large = content_is_too_large;
 
-        ui.memory().id_data.insert(id, state);
+        state.store(ui.ctx(), id);
+
+        (content_size, state)
     }
 }
 
 /// Width of a vertical scrollbar, or height of a horizontal scroll bar
 fn max_scroll_bar_width_with_margin(ui: &Ui) -> f32 {
-    ui.spacing().item_spacing.x + ui.spacing().scroll_bar_width
+    ui.spacing().scroll_bar_inner_margin
+        + ui.spacing().scroll_bar_width
+        + ui.spacing().scroll_bar_outer_margin
 }

crates/egui/src/containers/window.rs

@@ -1,6 +1,7 @@
 // WARNING: the code in here is horrible. It is a behemoth that needs breaking up into simpler parts.
 
-use crate::{widgets::*, *};
+use crate::collapsing_header::CollapsingState;
+use crate::{widget_text::WidgetTextGalley, *};
 use epaint::*;
 
 use super::*;
@@ -9,27 +10,27 @@ use super::*;
 ///
 /// You can customize:
 /// * title
-/// * default, minimum, maximum and/or fixed size
+/// * default, minimum, maximum and/or fixed size, collapsed/expanded
 /// * if the window has a scroll area (off by default)
 /// * if the window can be collapsed (minimized) to just the title bar (yes, by default)
 /// * if there should be a close button (none by default)
 ///
 /// ```
-/// # let mut ctx = egui::CtxRef::default();
-/// # ctx.begin_frame(Default::default());
-/// # let ctx = &ctx;
+/// # egui::__run_test_ctx(|ctx| {
 /// egui::Window::new("My Window").show(ctx, |ui| {
 ///    ui.label("Hello World!");
 /// });
+/// # });
 #[must_use = "You should call .show()"]
 pub struct Window<'open> {
-    title_label: Label,
+    title: WidgetText,
     open: Option<&'open mut bool>,
     area: Area,
     frame: Option<Frame>,
     resize: Resize,
     scroll: ScrollArea,
     collapsible: bool,
+    default_open: bool,
     with_title_bar: bool,
 }
 
@@ -37,13 +38,11 @@ impl<'open> Window<'open> {
     /// The window title is used as a unique [`Id`] and must be unique, and should not change.
     /// This is true even if you disable the title bar with `.title_bar(false)`.
     /// If you need a changing title, you must call `window.id(…)` with a fixed id.
-    #[allow(clippy::needless_pass_by_value)]
-    pub fn new(title: impl ToString) -> Self {
-        let title = title.to_string();
-        let area = Area::new(&title);
-        let title_label = Label::new(title).text_style(TextStyle::Heading).wrap(false);
+    pub fn new(title: impl Into<WidgetText>) -> Self {
+        let title = title.into().fallback_text_style(TextStyle::Heading);
+        let area = Area::new(Id::new(title.text()));
         Self {
-            title_label,
+            title,
             open: None,
             area,
             frame: None,
@@ -53,6 +52,7 @@ impl<'open> Window<'open> {
                 .default_size([340.0, 420.0]), // Default inner size of a window
             scroll: ScrollArea::neither(),
             collapsible: true,
+            default_open: true,
             with_title_bar: true,
         }
     }
@@ -79,15 +79,27 @@ impl<'open> Window<'open> {
         self
     }
 
+    /// If `false` the window will be non-interactive.
+    pub fn interactable(mut self, interactable: bool) -> Self {
+        self.area = self.area.interactable(interactable);
+        self
+    }
+
+    /// If `false` the window will be immovable.
+    pub fn movable(mut self, movable: bool) -> Self {
+        self.area = self.area.movable(movable);
+        self
+    }
+
     /// Usage: `Window::new(…).mutate(|w| w.resize = w.resize.auto_expand_width(true))`
-    /// Not sure this is a good interface for this.
+    // TODO(emilk): I'm not sure this is a good interface for this.
     pub fn mutate(mut self, mutate: impl Fn(&mut Self)) -> Self {
         mutate(&mut self);
         self
     }
 
     /// Usage: `Window::new(…).resize(|r| r.auto_expand_width(true))`
-    /// Not sure this is a good interface for this.
+    // TODO(emilk): I'm not sure this is a good interface for this.
     pub fn resize(mut self, mutate: impl Fn(Resize) -> Resize) -> Self {
         self.resize = mutate(self.resize);
         self
@@ -104,6 +116,7 @@ impl<'open> Window<'open> {
         self.resize = self.resize.min_width(min_width);
         self
     }
+
     /// Set minimum height of the window.
     pub fn min_height(mut self, min_height: f32) -> Self {
         self.resize = self.resize.min_height(min_height);
@@ -123,6 +136,30 @@ impl<'open> Window<'open> {
         self
     }
 
+    /// Sets the window position and prevents it from being dragged around.
+    pub fn fixed_pos(mut self, pos: impl Into<Pos2>) -> Self {
+        self.area = self.area.fixed_pos(pos);
+        self
+    }
+
+    /// Constrains this window to the screen bounds.
+    pub fn constrain(mut self, constrain: bool) -> Self {
+        self.area = self.area.constrain(constrain);
+        self
+    }
+
+    /// Where the "root" of the window is.
+    ///
+    /// For instance, if you set this to [`Align2::RIGHT_TOP`]
+    /// then [`Self::fixed_pos`] will set the position of the right-top
+    /// corner of the window.
+    ///
+    /// Default: [`Align2::LEFT_TOP`].
+    pub fn pivot(mut self, pivot: Align2) -> Self {
+        self.area = self.area.pivot(pivot);
+        self
+    }
+
     /// Set anchor and distance.
     ///
     /// An anchor of `Align2::RIGHT_TOP` means "put the right-top corner of the window
@@ -139,6 +176,12 @@ impl<'open> Window<'open> {
         self
     }
 
+    /// Set initial collapsed state of the window
+    pub fn default_open(mut self, default_open: bool) -> Self {
+        self.default_open = default_open;
+        self
+    }
+
     /// Set initial size of the window.
     pub fn default_size(mut self, default_size: impl Into<Vec2>) -> Self {
         self.resize = self.resize.default_size(default_size);
@@ -150,29 +193,24 @@ impl<'open> Window<'open> {
         self.resize = self.resize.default_width(default_width);
         self
     }
+
     /// Set initial height of the window.
     pub fn default_height(mut self, default_height: f32) -> Self {
         self.resize = self.resize.default_height(default_height);
         self
     }
 
-    /// Set initial position and size of the window.
-    pub fn default_rect(self, rect: Rect) -> Self {
-        self.default_pos(rect.min).default_size(rect.size())
-    }
-
-    /// Sets the window position and prevents it from being dragged around.
-    pub fn fixed_pos(mut self, pos: impl Into<Pos2>) -> Self {
-        self.area = self.area.fixed_pos(pos);
-        self
-    }
-
     /// Sets the window size and prevents it from being resized by dragging its edges.
     pub fn fixed_size(mut self, size: impl Into<Vec2>) -> Self {
         self.resize = self.resize.fixed_size(size);
         self
     }
 
+    /// Set initial position and size of the window.
+    pub fn default_rect(self, rect: Rect) -> Self {
+        self.default_pos(rect.min).default_size(rect.size())
+    }
+
     /// Sets the window pos and size and prevents it from being moved and resized by dragging its edges.
     pub fn fixed_rect(self, rect: Rect) -> Self {
         self.fixed_pos(rect.min).fixed_size(rect.size())
@@ -225,11 +263,6 @@ impl<'open> Window<'open> {
         self
     }
 
-    #[deprecated = "Use .vscroll(…) instead"]
-    pub fn scroll(self, scroll: bool) -> Self {
-        self.vscroll(scroll)
-    }
-
     /// Constrain the area up to which the window can be dragged.
     pub fn drag_bounds(mut self, bounds: Rect) -> Self {
         self.area = self.area.drag_bounds(bounds);
@@ -243,7 +276,7 @@ impl<'open> Window<'open> {
     #[inline]
     pub fn show<R>(
         self,
-        ctx: &CtxRef,
+        ctx: &Context,
         add_contents: impl FnOnce(&mut Ui) -> R,
     ) -> Option<InnerResponse<Option<R>>> {
         self.show_dyn(ctx, Box::new(add_contents))
@@ -251,23 +284,25 @@ impl<'open> Window<'open> {
 
     fn show_dyn<'c, R>(
         self,
-        ctx: &CtxRef,
+        ctx: &Context,
         add_contents: Box<dyn FnOnce(&mut Ui) -> R + 'c>,
     ) -> Option<InnerResponse<Option<R>>> {
         let Window {
-            title_label,
+            title,
             open,
             area,
             frame,
             resize,
             scroll,
             collapsible,
+            default_open,
             with_title_bar,
         } = self;
 
         let frame = frame.unwrap_or_else(|| Frame::window(&ctx.style()));
 
-        let is_open = !matches!(open, Some(false)) || ctx.memory().everything_is_visible();
+        let is_explicitly_closed = matches!(open, Some(false));
+        let is_open = !is_explicitly_closed || ctx.memory(|mem| mem.everything_is_visible());
         area.show_open_close_animation(ctx, &frame, is_open);
 
         if !is_open {
@@ -277,10 +312,10 @@ impl<'open> Window<'open> {
         let area_id = area.id;
         let area_layer_id = area.layer();
         let resize_id = area_id.with("resize");
-        let collapsing_id = area_id.with("collapsing");
+        let mut collapsing =
+            CollapsingState::load_with_default_open(ctx, area_id.with("collapsing"), default_open);
 
-        let is_collapsed = with_title_bar
-            && !collapsing_header::State::is_open(ctx, collapsing_id).unwrap_or_default();
+        let is_collapsed = with_title_bar && !collapsing.is_open();
         let possible = PossibleInteractions::new(&area, &resize, is_collapsed);
 
         let area = area.movable(false); // We move it manually, or the area will move the window when we want to resize it
@@ -304,11 +339,14 @@ impl<'open> Window<'open> {
             .and_then(|window_interaction| {
                 // Calculate roughly how much larger the window size is compared to the inner rect
                 let title_bar_height = if with_title_bar {
-                    title_label.font_height(ctx.fonts(), &ctx.style()) + title_content_spacing
+                    let style = ctx.style();
+                    ctx.fonts(|f| title.font_height(f, &style)) + title_content_spacing
                 } else {
                     0.0
                 };
-                let margins = 2.0 * frame.margin + vec2(0.0, title_bar_height);
+                let margins = frame.outer_margin.sum()
+                    + frame.inner_margin.sum()
+                    + vec2(0.0, title_bar_height);
 
                 interact(
                     window_interaction,
@@ -331,19 +369,12 @@ impl<'open> Window<'open> {
             let frame_stroke = frame.stroke;
             let mut frame = frame.begin(&mut area_content_ui);
 
-            let default_expanded = true;
-            let mut collapsing = collapsing_header::State::from_memory_with_default_open(
-                ctx,
-                collapsing_id,
-                default_expanded,
-            );
             let show_close_button = open.is_some();
             let title_bar = if with_title_bar {
                 let title_bar = show_title_bar(
                     &mut frame.content_ui,
-                    title_label,
+                    title,
                     show_close_button,
-                    collapsing_id,
                     &mut collapsing,
                     collapsible,
                 );
@@ -354,21 +385,20 @@ impl<'open> Window<'open> {
             };
 
             let (content_inner, content_response) = collapsing
-                .add_contents(&mut frame.content_ui, collapsing_id, |ui| {
+                .show_body_unindented(&mut frame.content_ui, |ui| {
                     resize.show(ui, |ui| {
                         if title_bar.is_some() {
                             ui.add_space(title_content_spacing);
                         }
 
                         if scroll.has_any_bar() {
-                            scroll.show(ui, add_contents)
+                            scroll.show(ui, add_contents).inner
                         } else {
                             add_contents(ui)
                         }
                     })
                 })
-                .map(|ir| (Some(ir.inner), Some(ir.response)))
-                .unwrap_or((None, None));
+                .map_or((None, None), |ir| (Some(ir.inner), Some(ir.response)));
 
             let outer_rect = frame.end(&mut area_content_ui).rect;
             paint_resize_corner(&mut area_content_ui, &possible, outer_rect, frame_stroke);
@@ -386,10 +416,7 @@ impl<'open> Window<'open> {
                 );
             }
 
-            area_content_ui
-                .memory()
-                .id_data
-                .insert(collapsing_id, collapsing);
+            collapsing.store(ctx);
 
             if let Some(interaction) = interaction {
                 paint_frame_interaction(
@@ -399,7 +426,7 @@ impl<'open> Window<'open> {
                     ctx.style().visuals.widgets.active,
                 );
             } else if let Some(hover_interaction) = hover_interaction {
-                if ctx.input().pointer.has_pointer() {
+                if ctx.input(|i| i.pointer.has_pointer()) {
                     paint_frame_interaction(
                         &mut area_content_ui,
                         outer_rect,
@@ -411,9 +438,12 @@ impl<'open> Window<'open> {
             content_inner
         };
 
-        area.state_mut().pos = ctx
-            .constrain_window_rect_to_area(area.state().rect(), area.drag_bounds())
-            .min;
+        {
+            let pos = ctx
+                .constrain_window_rect_to_area(area.state().rect(), area.drag_bounds())
+                .left_top();
+            area.state_mut().set_left_top_pos(pos);
+        }
 
         let full_response = area.end(ctx, area_content_ui);
 
@@ -494,13 +524,13 @@ pub(crate) struct WindowInteraction {
 impl WindowInteraction {
     pub fn set_cursor(&self, ctx: &Context) {
         if (self.left && self.top) || (self.right && self.bottom) {
-            ctx.output().cursor_icon = CursorIcon::ResizeNwSe;
+            ctx.set_cursor_icon(CursorIcon::ResizeNwSe);
         } else if (self.right && self.top) || (self.left && self.bottom) {
-            ctx.output().cursor_icon = CursorIcon::ResizeNeSw;
+            ctx.set_cursor_icon(CursorIcon::ResizeNeSw);
         } else if self.left || self.right {
-            ctx.output().cursor_icon = CursorIcon::ResizeHorizontal;
+            ctx.set_cursor_icon(CursorIcon::ResizeHorizontal);
         } else if self.bottom || self.top {
-            ctx.output().cursor_icon = CursorIcon::ResizeVertical;
+            ctx.set_cursor_icon(CursorIcon::ResizeVertical);
         }
     }
 
@@ -522,18 +552,17 @@ fn interact(
 
     let new_rect = ctx.constrain_window_rect_to_area(new_rect, area.drag_bounds());
 
-    // TODO: add this to a Window state instead as a command "move here next frame"
-    area.state_mut().pos = new_rect.min;
+    // TODO(emilk): add this to a Window state instead as a command "move here next frame"
+    area.state_mut().set_left_top_pos(new_rect.left_top());
 
     if window_interaction.is_resize() {
-        ctx.memory()
-            .id_data
-            .get_mut::<resize::State>(&resize_id)
-            .unwrap()
-            .requested_size = Some(new_rect.size() - margins);
+        if let Some(mut state) = resize::State::load(ctx, resize_id) {
+            state.requested_size = Some(new_rect.size() - margins);
+            state.store(ctx, resize_id);
+        }
     }
 
-    ctx.memory().areas.move_to_top(area_layer_id);
+    ctx.memory_mut(|mem| mem.areas.move_to_top(area_layer_id));
     Some(window_interaction)
 }
 
@@ -541,11 +570,11 @@ fn move_and_resize_window(ctx: &Context, window_interaction: &WindowInteraction)
     window_interaction.set_cursor(ctx);
 
     // Only move/resize windows with primary mouse button:
-    if !ctx.input().pointer.primary_down() {
+    if !ctx.input(|i| i.pointer.primary_down()) {
         return None;
     }
 
-    let pointer_pos = ctx.input().pointer.interact_pos()?;
+    let pointer_pos = ctx.input(|i| i.pointer.interact_pos())?;
     let mut rect = window_interaction.start_rect; // prevent drift
 
     if window_interaction.is_resize() {
@@ -567,8 +596,8 @@ fn move_and_resize_window(ctx: &Context, window_interaction: &WindowInteraction)
         // but we want anything interactive in the window (e.g. slider) to steal
         // the drag from us. It is therefor important not to move the window the first frame,
         // but instead let other widgets to the steal. HACK.
-        if !ctx.input().pointer.any_pressed() {
-            let press_origin = ctx.input().pointer.press_origin()?;
+        if !ctx.input(|i| i.pointer.any_pressed()) {
+            let press_origin = ctx.input(|i| i.pointer.press_origin())?;
             let delta = pointer_pos - press_origin;
             rect = rect.translate(delta);
         }
@@ -586,29 +615,31 @@ fn window_interaction(
     rect: Rect,
 ) -> Option<WindowInteraction> {
     {
-        let drag_id = ctx.memory().interaction.drag_id;
+        let drag_id = ctx.memory(|mem| mem.interaction.drag_id);
 
         if drag_id.is_some() && drag_id != Some(id) {
             return None;
         }
     }
 
-    let mut window_interaction = { ctx.memory().window_interaction };
+    let mut window_interaction = ctx.memory(|mem| mem.window_interaction);
 
     if window_interaction.is_none() {
         if let Some(hover_window_interaction) = resize_hover(ctx, possible, area_layer_id, rect) {
             hover_window_interaction.set_cursor(ctx);
-            if ctx.input().pointer.any_pressed() && ctx.input().pointer.primary_down() {
-                ctx.memory().interaction.drag_id = Some(id);
-                ctx.memory().interaction.drag_is_window = true;
-                window_interaction = Some(hover_window_interaction);
-                ctx.memory().window_interaction = window_interaction;
+            if ctx.input(|i| i.pointer.any_pressed() && i.pointer.primary_down()) {
+                ctx.memory_mut(|mem| {
+                    mem.interaction.drag_id = Some(id);
+                    mem.interaction.drag_is_window = true;
+                    window_interaction = Some(hover_window_interaction);
+                    mem.window_interaction = window_interaction;
+                });
             }
         }
     }
 
     if let Some(window_interaction) = window_interaction {
-        let is_active = ctx.memory().interaction.drag_id == Some(id);
+        let is_active = ctx.memory_mut(|mem| mem.interaction.drag_id == Some(id));
 
         if is_active && window_interaction.area_layer_id == area_layer_id {
             return Some(window_interaction);
@@ -624,9 +655,9 @@ fn resize_hover(
     area_layer_id: LayerId,
     rect: Rect,
 ) -> Option<WindowInteraction> {
-    let pointer = ctx.input().pointer.interact_pos()?;
+    let pointer = ctx.input(|i| i.pointer.interact_pos())?;
 
-    if ctx.input().pointer.any_down() && !ctx.input().pointer.any_pressed() {
+    if ctx.input(|i| i.pointer.any_down() && !i.pointer.any_pressed()) {
         return None; // already dragging (something)
     }
 
@@ -636,7 +667,7 @@ fn resize_hover(
         }
     }
 
-    if ctx.memory().interaction.drag_interest {
+    if ctx.memory(|mem| mem.interaction.drag_interest) {
         // Another widget will become active if we drag here
         return None;
     }
@@ -711,42 +742,62 @@ fn paint_frame_interaction(
 ) {
     use epaint::tessellator::path::add_circle_quadrant;
 
-    let cr = ui.visuals().window_corner_radius;
+    let rounding = ui.visuals().window_rounding;
     let Rect { min, max } = rect;
 
     let mut points = Vec::new();
 
     if interaction.right && !interaction.bottom && !interaction.top {
-        points.push(pos2(max.x, min.y + cr));
-        points.push(pos2(max.x, max.y - cr));
+        points.push(pos2(max.x, min.y + rounding.ne));
+        points.push(pos2(max.x, max.y - rounding.se));
     }
     if interaction.right && interaction.bottom {
-        points.push(pos2(max.x, min.y + cr));
-        points.push(pos2(max.x, max.y - cr));
-        add_circle_quadrant(&mut points, pos2(max.x - cr, max.y - cr), cr, 0.0);
+        points.push(pos2(max.x, min.y + rounding.ne));
+        points.push(pos2(max.x, max.y - rounding.se));
+        add_circle_quadrant(
+            &mut points,
+            pos2(max.x - rounding.se, max.y - rounding.se),
+            rounding.se,
+            0.0,
+        );
     }
     if interaction.bottom {
-        points.push(pos2(max.x - cr, max.y));
-        points.push(pos2(min.x + cr, max.y));
+        points.push(pos2(max.x - rounding.se, max.y));
+        points.push(pos2(min.x + rounding.sw, max.y));
     }
     if interaction.left && interaction.bottom {
-        add_circle_quadrant(&mut points, pos2(min.x + cr, max.y - cr), cr, 1.0);
+        add_circle_quadrant(
+            &mut points,
+            pos2(min.x + rounding.sw, max.y - rounding.sw),
+            rounding.sw,
+            1.0,
+        );
     }
     if interaction.left {
-        points.push(pos2(min.x, max.y - cr));
-        points.push(pos2(min.x, min.y + cr));
+        points.push(pos2(min.x, max.y - rounding.sw));
+        points.push(pos2(min.x, min.y + rounding.nw));
     }
     if interaction.left && interaction.top {
-        add_circle_quadrant(&mut points, pos2(min.x + cr, min.y + cr), cr, 2.0);
+        add_circle_quadrant(
+            &mut points,
+            pos2(min.x + rounding.nw, min.y + rounding.nw),
+            rounding.nw,
+            2.0,
+        );
     }
     if interaction.top {
-        points.push(pos2(min.x + cr, min.y));
-        points.push(pos2(max.x - cr, min.y));
+        points.push(pos2(min.x + rounding.nw, min.y));
+        points.push(pos2(max.x - rounding.ne, min.y));
     }
     if interaction.right && interaction.top {
-        add_circle_quadrant(&mut points, pos2(max.x - cr, min.y + cr), cr, 3.0);
-        points.push(pos2(max.x, min.y + cr));
-        points.push(pos2(max.x, max.y - cr));
+        add_circle_quadrant(
+            &mut points,
+            pos2(max.x - rounding.ne, min.y + rounding.ne),
+            rounding.ne,
+            3.0,
+        );
+        points.push(pos2(max.x, min.y + rounding.ne));
+        points.push(pos2(max.x, max.y - rounding.se));
     }
     ui.painter().add(Shape::line(points, visuals.bg_stroke));
 }
@@ -754,24 +805,32 @@ fn paint_frame_interaction(
 // ----------------------------------------------------------------------------
 
 struct TitleBar {
+    /// A title Id used for dragging windows
     id: Id,
-    title_label: Label,
-    title_galley: std::sync::Arc<Galley>,
+
+    /// Prepared text in the title
+    title_galley: WidgetTextGalley,
+
+    /// Size of the title bar in a collapsed state (if window is collapsible),
+    /// which includes all necessary space for showing the expand button, the
+    /// title and the close button.
     min_rect: Rect,
+
+    /// Size of the title bar in an expanded state. This size become known only
+    /// after expanding window and painting its content
     rect: Rect,
 }
 
 fn show_title_bar(
     ui: &mut Ui,
-    title_label: Label,
+    title: WidgetText,
     show_close_button: bool,
-    collapsing_id: Id,
-    collapsing: &mut collapsing_header::State,
+    collapsing: &mut CollapsingState,
     collapsible: bool,
 ) -> TitleBar {
     let inner_response = ui.horizontal(|ui| {
-        let height = title_label
-            .font_height(ui.fonts(), ui.style())
+        let height = ui
+            .fonts(|fonts| title.font_height(fonts, ui.style()))
             .max(ui.spacing().interact_size.y);
         ui.set_min_height(height);
 
@@ -782,17 +841,10 @@ fn show_title_bar(
 
         if collapsible {
             ui.add_space(pad);
-
-            let (_id, rect) = ui.allocate_space(button_size);
-            let collapse_button_response = ui.interact(rect, collapsing_id, Sense::click());
-            if collapse_button_response.clicked() {
-                collapsing.toggle(ui);
-            }
-            let openness = collapsing.openness(ui.ctx(), collapsing_id);
-            collapsing_header::paint_icon(ui, openness, &collapse_button_response);
+            collapsing.show_default_button_with_size(ui, button_size);
         }
 
-        let title_galley = title_label.layout(ui);
+        let title_galley = title.into_galley(ui, Some(false), f32::INFINITY, TextStyle::Heading);
 
         let minimum_width = if collapsible || show_close_button {
             // If at least one button is shown we make room for both buttons (since title is centered):
@@ -805,7 +857,6 @@ fn show_title_bar(
 
         TitleBar {
             id,
-            title_label,
             title_galley,
             min_rect,
             rect: Rect::NAN, // Will be filled in later
@@ -819,13 +870,27 @@ fn show_title_bar(
 }
 
 impl TitleBar {
+    /// Finishes painting of the title bar when the window content size already known.
+    ///
+    /// # Parameters
+    ///
+    /// - `ui`:
+    /// - `outer_rect`:
+    /// - `content_response`: if `None`, window is collapsed at this frame, otherwise contains
+    ///   a result of rendering the window content
+    /// - `open`: if `None`, no "Close" button will be rendered, otherwise renders and processes
+    ///   the "Close" button and writes a `false` if window was closed
+    /// - `collapsing`: holds the current expanding state. Can be changed by double click on the
+    ///   title if `collapsible` is `true`
+    /// - `collapsible`: if `true`, double click on the title bar will be handled for a change
+    ///   of `collapsing` state
     fn ui(
         mut self,
         ui: &mut Ui,
         outer_rect: Rect,
         content_response: &Option<Response>,
         open: Option<&mut bool>,
-        collapsing: &mut collapsing_header::State,
+        collapsing: &mut CollapsingState,
         collapsible: bool,
     ) {
         if let Some(content_response) = &content_response {
@@ -840,35 +905,30 @@ impl TitleBar {
             }
         }
 
-        // Always have inactive style for the window.
-        // It is VERY annoying to e.g. change it when moving the window.
-        let style = ui.visuals().widgets.inactive;
-
-        self.title_label = self.title_label.text_color(style.fg_stroke.color);
-
         let full_top_rect = Rect::from_x_y_ranges(self.rect.x_range(), self.min_rect.y_range());
         let text_pos =
             emath::align::center_size_in_rect(self.title_galley.size(), full_top_rect).left_top();
-        let text_pos = text_pos - self.title_galley.rect.min.to_vec2();
+        let text_pos = text_pos - self.title_galley.galley().rect.min.to_vec2();
         let text_pos = text_pos - 1.5 * Vec2::Y; // HACK: center on x-height of text (looks better)
-        let text_color = ui.visuals().text_color();
-        self.title_label
-            .paint_galley(ui, text_pos, self.title_galley, false, text_color);
+        self.title_galley.paint_with_fallback_color(
+            ui.painter(),
+            text_pos,
+            ui.visuals().text_color(),
+        );
 
         if let Some(content_response) = &content_response {
             // paint separator between title and content:
-            let left = outer_rect.left();
-            let right = outer_rect.right();
             let y = content_response.rect.top() + ui.spacing().item_spacing.y * 0.5;
             // let y = lerp(self.rect.bottom()..=content_response.rect.top(), 0.5);
-            ui.painter().line_segment(
-                [pos2(left, y), pos2(right, y)],
-                ui.visuals().widgets.noninteractive.bg_stroke,
-            );
+            let stroke = ui.visuals().widgets.noninteractive.bg_stroke;
+            ui.painter().hline(outer_rect.x_range(), y, stroke);
         }
 
+        // Don't cover the close- and collapse buttons:
+        let double_click_rect = self.rect.shrink2(vec2(32.0, 0.0));
+
         if ui
-            .interact(self.rect, self.id, Sense::click())
+            .interact(double_click_rect, self.id, Sense::click())
             .double_clicked()
             && collapsible
         {
@@ -876,6 +936,11 @@ impl TitleBar {
         }
     }
 
+    /// Paints the "Close" button at the right side of the title bar
+    /// and processes clicks on it.
+    ///
+    /// The button is square and its size is determined by the
+    /// [`crate::style::Spacing::icon_width`] setting.
     fn close_button_ui(&self, ui: &mut Ui) -> Response {
         let button_size = Vec2::splat(ui.spacing().icon_width);
         let pad = (self.rect.height() - button_size.y) / 2.0; // calculated so that the icon is on the diagonal (if window padding is symmetrical)
@@ -891,6 +956,16 @@ impl TitleBar {
     }
 }
 
+/// Paints the "Close" button of the window and processes clicks on it.
+///
+/// The close button is just an `X` symbol painted by a current stroke
+/// for foreground elements (such as a label text).
+///
+/// # Parameters
+/// - `ui`:
+/// - `rect`: The rectangular area to fit the button in
+///
+/// Returns the result of a click on a button if it was pressed
 fn close_button(ui: &mut Ui, rect: Rect) -> Response {
     let close_id = ui.auto_id_with("window_close_button");
     let response = ui.interact(rect, close_id, Sense::click());
@@ -899,9 +974,9 @@ fn close_button(ui: &mut Ui, rect: Rect) -> Response {
     let visuals = ui.style().interact(&response);
     let rect = rect.shrink(2.0).expand(visuals.expansion);
     let stroke = visuals.fg_stroke;
-    ui.painter()
+    ui.painter() // paints \
         .line_segment([rect.left_top(), rect.right_bottom()], stroke);
-    ui.painter()
+    ui.painter() // paints /
         .line_segment([rect.right_top(), rect.left_bottom()], stroke);
     response
 }

crates/egui/src/data/input.rs

@@ -0,0 +1,910 @@
+//! The input needed by egui.
+
+use crate::emath::*;
+
+/// What the integrations provides to egui at the start of each frame.
+///
+/// Set the values that make sense, leave the rest at their `Default::default()`.
+///
+/// You can check if `egui` is using the inputs using
+/// [`crate::Context::wants_pointer_input`] and [`crate::Context::wants_keyboard_input`].
+///
+/// All coordinates are in points (logical pixels) with origin (0, 0) in the top left corner.
+#[derive(Clone, Debug, PartialEq)]
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+pub struct RawInput {
+    /// Position and size of the area that egui should use, in points.
+    /// Usually you would set this to
+    ///
+    /// `Some(Rect::from_pos_size(Default::default(), screen_size_in_points))`.
+    ///
+    /// but you could also constrain egui to some smaller portion of your window if you like.
+    ///
+    /// `None` will be treated as "same as last frame", with the default being a very big area.
+    pub screen_rect: Option<Rect>,
+
+    /// Also known as device pixel ratio, > 1 for high resolution screens.
+    /// If text looks blurry you probably forgot to set this.
+    /// Set this the first frame, whenever it changes, or just on every frame.
+    pub pixels_per_point: Option<f32>,
+
+    /// Maximum size of one side of the font texture.
+    ///
+    /// Ask your graphics drivers about this. This corresponds to `GL_MAX_TEXTURE_SIZE`.
+    ///
+    /// The default is a very small (but very portable) 2048.
+    pub max_texture_side: Option<usize>,
+
+    /// Monotonically increasing time, in seconds. Relative to whatever. Used for animations.
+    /// If `None` is provided, egui will assume a time delta of `predicted_dt` (default 1/60 seconds).
+    pub time: Option<f64>,
+
+    /// Should be set to the expected time between frames when painting at vsync speeds.
+    /// The default for this is 1/60.
+    /// Can safely be left at its default value.
+    pub predicted_dt: f32,
+
+    /// Which modifier keys are down at the start of the frame?
+    pub modifiers: Modifiers,
+
+    /// In-order events received this frame.
+    ///
+    /// There is currently no way to know if egui handles a particular event,
+    /// but you can check if egui is using the keyboard with [`crate::Context::wants_keyboard_input`]
+    /// and/or the pointer (mouse/touch) with [`crate::Context::is_using_pointer`].
+    pub events: Vec<Event>,
+
+    /// Dragged files hovering over egui.
+    pub hovered_files: Vec<HoveredFile>,
+
+    /// Dragged files dropped into egui.
+    ///
+    /// Note: when using `eframe` on Windows you need to enable
+    /// drag-and-drop support using `eframe::NativeOptions`.
+    pub dropped_files: Vec<DroppedFile>,
+
+    /// The window has the keyboard focus (i.e. is receiving key presses).
+    pub has_focus: bool,
+}
+
+impl Default for RawInput {
+    fn default() -> Self {
+        Self {
+            screen_rect: None,
+            pixels_per_point: None,
+            max_texture_side: None,
+            time: None,
+            predicted_dt: 1.0 / 60.0,
+            modifiers: Modifiers::default(),
+            events: vec![],
+            hovered_files: Default::default(),
+            dropped_files: Default::default(),
+            has_focus: true, // integrations opt into global focus tracking
+        }
+    }
+}
+
+impl RawInput {
+    /// Helper: move volatile (deltas and events), clone the rest.
+    ///
+    /// * [`Self::hovered_files`] is cloned.
+    /// * [`Self::dropped_files`] is moved.
+    pub fn take(&mut self) -> RawInput {
+        RawInput {
+            screen_rect: self.screen_rect.take(),
+            pixels_per_point: self.pixels_per_point.take(),
+            max_texture_side: self.max_texture_side.take(),
+            time: self.time.take(),
+            predicted_dt: self.predicted_dt,
+            modifiers: self.modifiers,
+            events: std::mem::take(&mut self.events),
+            hovered_files: self.hovered_files.clone(),
+            dropped_files: std::mem::take(&mut self.dropped_files),
+            has_focus: self.has_focus,
+        }
+    }
+
+    /// Add on new input.
+    pub fn append(&mut self, newer: Self) {
+        let Self {
+            screen_rect,
+            pixels_per_point,
+            max_texture_side,
+            time,
+            predicted_dt,
+            modifiers,
+            mut events,
+            mut hovered_files,
+            mut dropped_files,
+            has_focus,
+        } = newer;
+
+        self.screen_rect = screen_rect.or(self.screen_rect);
+        self.pixels_per_point = pixels_per_point.or(self.pixels_per_point);
+        self.max_texture_side = max_texture_side.or(self.max_texture_side);
+        self.time = time; // use latest time
+        self.predicted_dt = predicted_dt; // use latest dt
+        self.modifiers = modifiers; // use latest
+        self.events.append(&mut events);
+        self.hovered_files.append(&mut hovered_files);
+        self.dropped_files.append(&mut dropped_files);
+        self.has_focus = has_focus;
+    }
+}
+
+/// A file about to be dropped into egui.
+#[derive(Clone, Debug, Default, PartialEq, Eq)]
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+pub struct HoveredFile {
+    /// Set by the `egui-winit` backend.
+    pub path: Option<std::path::PathBuf>,
+
+    /// With the `eframe` web backend, this is set to the mime-type of the file (if available).
+    pub mime: String,
+}
+
+/// A file dropped into egui.
+#[derive(Clone, Debug, Default, PartialEq, Eq)]
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+pub struct DroppedFile {
+    /// Set by the `egui-winit` backend.
+    pub path: Option<std::path::PathBuf>,
+
+    /// Name of the file. Set by the `eframe` web backend.
+    pub name: String,
+
+    /// Set by the `eframe` web backend.
+    pub last_modified: Option<std::time::SystemTime>,
+
+    /// Set by the `eframe` web backend.
+    pub bytes: Option<std::sync::Arc<[u8]>>,
+}
+
+/// An input event generated by the integration.
+///
+/// This only covers events that egui cares about.
+#[derive(Clone, Debug, PartialEq)]
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+pub enum Event {
+    /// The integration detected a "copy" event (e.g. Cmd+C).
+    Copy,
+
+    /// The integration detected a "cut" event (e.g. Cmd+X).
+    Cut,
+
+    /// The integration detected a "paste" event (e.g. Cmd+V).
+    Paste(String),
+
+    /// Text input, e.g. via keyboard.
+    ///
+    /// When the user presses enter/return, do not send a [`Text`](Event::Text) (just [`Key::Enter`]).
+    Text(String),
+
+    /// A key was pressed or released.
+    Key {
+        key: Key,
+
+        /// Was it pressed or released?
+        pressed: bool,
+
+        /// If this is a `pressed` event, is it a key-repeat?
+        ///
+        /// On many platforms, holding down a key produces many repeated "pressed" events for it, so called key-repeats.
+        /// Sometimes you will want to ignore such events, and this lets you do that.
+        ///
+        /// egui will automatically detect such repeat events and mark them as such here.
+        /// Therefore, if you are writing an egui integration, you do not need to set this (just set it to `false`).
+        repeat: bool,
+
+        /// The state of the modifier keys at the time of the event.
+        modifiers: Modifiers,
+    },
+
+    /// The mouse or touch moved to a new place.
+    PointerMoved(Pos2),
+
+    /// A mouse button was pressed or released (or a touch started or stopped).
+    PointerButton {
+        /// Where is the pointer?
+        pos: Pos2,
+
+        /// What mouse button? For touches, use [`PointerButton::Primary`].
+        button: PointerButton,
+
+        /// Was it the button/touch pressed this frame, or released?
+        pressed: bool,
+
+        /// The state of the modifier keys at the time of the event.
+        modifiers: Modifiers,
+    },
+
+    /// The mouse left the screen, or the last/primary touch input disappeared.
+    ///
+    /// This means there is no longer a cursor on the screen for hovering etc.
+    ///
+    /// On touch-up first send `PointerButton{pressed: false, …}` followed by `PointerLeft`.
+    PointerGone,
+
+    /// How many points (logical pixels) the user scrolled.
+    ///
+    /// The direction of the vector indicates how to move the _content_ that is being viewed.
+    /// So if you get positive values, the content being viewed should move to the right and down,
+    /// revealing new things to the left and up.
+    ///
+    /// A positive X-value indicates the content is being moved right,
+    /// as when swiping right on a touch-screen or track-pad with natural scrolling.
+    ///
+    /// A positive Y-value indicates the content is being moved down,
+    /// as when swiping down on a touch-screen or track-pad with natural scrolling.
+    ///
+    /// Shift-scroll should result in horizontal scrolling (it is up to the integrations to do this).
+    Scroll(Vec2),
+
+    /// Zoom scale factor this frame (e.g. from ctrl-scroll or pinch gesture).
+    /// * `zoom = 1`: no change.
+    /// * `zoom < 1`: pinch together
+    /// * `zoom > 1`: pinch spread
+    Zoom(f32),
+
+    /// IME composition start.
+    CompositionStart,
+
+    /// A new IME candidate is being suggested.
+    CompositionUpdate(String),
+
+    /// IME composition ended with this final result.
+    CompositionEnd(String),
+
+    /// On touch screens, report this *in addition to*
+    /// [`Self::PointerMoved`], [`Self::PointerButton`], [`Self::PointerGone`]
+    Touch {
+        /// Hashed device identifier (if available; may be zero).
+        /// Can be used to separate touches from different devices.
+        device_id: TouchDeviceId,
+
+        /// Unique identifier of a finger/pen. Value is stable from touch down
+        /// to lift-up
+        id: TouchId,
+
+        /// One of: start move end cancel.
+        phase: TouchPhase,
+
+        /// Position of the touch (or where the touch was last detected)
+        pos: Pos2,
+
+        /// Describes how hard the touch device was pressed. May always be `0` if the platform does
+        /// not support pressure sensitivity.
+        /// The value is in the range from 0.0 (no pressure) to 1.0 (maximum pressure).
+        force: f32,
+    },
+
+    /// An assistive technology (e.g. screen reader) requested an action.
+    #[cfg(feature = "accesskit")]
+    AccessKitActionRequest(accesskit::ActionRequest),
+}
+
+/// Mouse button (or similar for touch input)
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+pub enum PointerButton {
+    /// The primary mouse button is usually the left one.
+    Primary = 0,
+
+    /// The secondary mouse button is usually the right one,
+    /// and most often used for context menus or other optional things.
+    Secondary = 1,
+
+    /// The tertiary mouse button is usually the middle mouse button (e.g. clicking the scroll wheel).
+    Middle = 2,
+
+    /// The first extra mouse button on some mice. In web typically corresponds to the Browser back button.
+    Extra1 = 3,
+
+    /// The second extra mouse button on some mice. In web typically corresponds to the Browser forward button.
+    Extra2 = 4,
+}
+
+/// Number of pointer buttons supported by egui, i.e. the number of possible states of [`PointerButton`].
+pub const NUM_POINTER_BUTTONS: usize = 5;
+
+/// State of the modifier keys. These must be fed to egui.
+///
+/// The best way to compare [`Modifiers`] is by using [`Modifiers::matches`].
+///
+/// NOTE: For cross-platform uses, ALT+SHIFT is a bad combination of modifiers
+/// as on mac that is how you type special characters,
+/// so those key presses are usually not reported to egui.
+#[derive(Clone, Copy, Debug, Default, Hash, PartialEq, Eq)]
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+pub struct Modifiers {
+    /// Either of the alt keys are down (option ⌥ on Mac).
+    pub alt: bool,
+
+    /// Either of the control keys are down.
+    /// When checking for keyboard shortcuts, consider using [`Self::command`] instead.
+    pub ctrl: bool,
+
+    /// Either of the shift keys are down.
+    pub shift: bool,
+
+    /// The Mac ⌘ Command key. Should always be set to `false` on other platforms.
+    pub mac_cmd: bool,
+
+    /// On Windows and Linux, set this to the same value as `ctrl`.
+    /// On Mac, this should be set whenever one of the ⌘ Command keys are down (same as `mac_cmd`).
+    /// This is so that egui can, for instance, select all text by checking for `command + A`
+    /// and it will work on both Mac and Windows.
+    pub command: bool,
+}
+
+impl Modifiers {
+    pub const NONE: Self = Self {
+        alt: false,
+        ctrl: false,
+        shift: false,
+        mac_cmd: false,
+        command: false,
+    };
+
+    pub const ALT: Self = Self {
+        alt: true,
+        ctrl: false,
+        shift: false,
+        mac_cmd: false,
+        command: false,
+    };
+    pub const CTRL: Self = Self {
+        alt: false,
+        ctrl: true,
+        shift: false,
+        mac_cmd: false,
+        command: false,
+    };
+    pub const SHIFT: Self = Self {
+        alt: false,
+        ctrl: false,
+        shift: true,
+        mac_cmd: false,
+        command: false,
+    };
+
+    #[deprecated = "Use `Modifiers::ALT | Modifiers::SHIFT` instead"]
+    pub const ALT_SHIFT: Self = Self {
+        alt: true,
+        ctrl: false,
+        shift: true,
+        mac_cmd: false,
+        command: false,
+    };
+
+    /// The Mac ⌘ Command key
+    pub const MAC_CMD: Self = Self {
+        alt: false,
+        ctrl: false,
+        shift: false,
+        mac_cmd: true,
+        command: false,
+    };
+
+    /// On Mac: ⌘ Command key, elsewhere: Ctrl key
+    pub const COMMAND: Self = Self {
+        alt: false,
+        ctrl: false,
+        shift: false,
+        mac_cmd: false,
+        command: true,
+    };
+
+    /// ```
+    /// # use egui::Modifiers;
+    /// assert_eq!(
+    ///     Modifiers::CTRL | Modifiers::ALT,
+    ///     Modifiers { ctrl: true, alt: true, ..Default::default() }
+    /// );
+    /// assert_eq!(
+    ///     Modifiers::ALT.plus(Modifiers::CTRL),
+    ///     Modifiers::CTRL.plus(Modifiers::ALT),
+    /// );
+    /// assert_eq!(
+    ///     Modifiers::CTRL | Modifiers::ALT,
+    ///     Modifiers::CTRL.plus(Modifiers::ALT),
+    /// );
+    /// ```
+    #[inline]
+    pub const fn plus(self, rhs: Self) -> Self {
+        Self {
+            alt: self.alt | rhs.alt,
+            ctrl: self.ctrl | rhs.ctrl,
+            shift: self.shift | rhs.shift,
+            mac_cmd: self.mac_cmd | rhs.mac_cmd,
+            command: self.command | rhs.command,
+        }
+    }
+
+    #[inline]
+    pub fn is_none(&self) -> bool {
+        self == &Self::default()
+    }
+
+    #[inline]
+    pub fn any(&self) -> bool {
+        !self.is_none()
+    }
+
+    /// Is shift the only pressed button?
+    #[inline]
+    pub fn shift_only(&self) -> bool {
+        self.shift && !(self.alt || self.command)
+    }
+
+    /// true if only [`Self::ctrl`] or only [`Self::mac_cmd`] is pressed.
+    #[inline]
+    pub fn command_only(&self) -> bool {
+        !self.alt && !self.shift && self.command
+    }
+
+    /// Check for equality but with proper handling of [`Self::command`].
+    ///
+    /// ```
+    /// # use egui::Modifiers;
+    /// assert!(Modifiers::CTRL.matches(Modifiers::CTRL));
+    /// assert!(!Modifiers::CTRL.matches(Modifiers::CTRL | Modifiers::SHIFT));
+    /// assert!(!(Modifiers::CTRL | Modifiers::SHIFT).matches(Modifiers::CTRL));
+    /// assert!((Modifiers::CTRL | Modifiers::COMMAND).matches(Modifiers::CTRL));
+    /// assert!((Modifiers::CTRL | Modifiers::COMMAND).matches(Modifiers::COMMAND));
+    /// assert!((Modifiers::MAC_CMD | Modifiers::COMMAND).matches(Modifiers::COMMAND));
+    /// assert!(!Modifiers::COMMAND.matches(Modifiers::MAC_CMD));
+    /// ```
+    pub fn matches(&self, pattern: Modifiers) -> bool {
+        // alt and shift must always match the pattern:
+        if pattern.alt != self.alt || pattern.shift != self.shift {
+            return false;
+        }
+
+        if pattern.mac_cmd {
+            // Mac-specific match:
+            if !self.mac_cmd {
+                return false;
+            }
+            if pattern.ctrl != self.ctrl {
+                return false;
+            }
+            return true;
+        }
+
+        if !pattern.ctrl && !pattern.command {
+            // the pattern explicitly doesn't want any ctrl/command:
+            return !self.ctrl && !self.command;
+        }
+
+        // if the pattern is looking for command, then `ctrl` may or may not be set depending on platform.
+        // if the pattern is looking for `ctrl`, then `command` may or may not be set depending on platform.
+
+        if pattern.ctrl && !self.ctrl {
+            return false;
+        }
+        if pattern.command && !self.command {
+            return false;
+        }
+
+        true
+    }
+}
+
+impl std::ops::BitOr for Modifiers {
+    type Output = Self;
+
+    #[inline]
+    fn bitor(self, rhs: Self) -> Self {
+        self.plus(rhs)
+    }
+}
+
+// ----------------------------------------------------------------------------
+
+/// Names of different modifier keys.
+///
+/// Used to name modifiers.
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+pub struct ModifierNames<'a> {
+    pub is_short: bool,
+
+    pub alt: &'a str,
+    pub ctrl: &'a str,
+    pub shift: &'a str,
+    pub mac_cmd: &'a str,
+
+    /// What goes between the names
+    pub concat: &'a str,
+}
+
+impl ModifierNames<'static> {
+    /// ⌥ ^ ⇧ ⌘ - NOTE: not supported by the default egui font.
+    pub const SYMBOLS: Self = Self {
+        is_short: true,
+        alt: "⌥",
+        ctrl: "^",
+        shift: "⇧",
+        mac_cmd: "⌘",
+        concat: "",
+    };
+
+    /// Alt, Ctrl, Shift, Cmd
+    pub const NAMES: Self = Self {
+        is_short: false,
+        alt: "Alt",
+        ctrl: "Ctrl",
+        shift: "Shift",
+        mac_cmd: "Cmd",
+        concat: "+",
+    };
+}
+
+impl<'a> ModifierNames<'a> {
+    pub fn format(&self, modifiers: &Modifiers, is_mac: bool) -> String {
+        let mut s = String::new();
+
+        let mut append_if = |modifier_is_active, modifier_name| {
+            if modifier_is_active {
+                if !s.is_empty() {
+                    s += self.concat;
+                }
+                s += modifier_name;
+            }
+        };
+
+        if is_mac {
+            append_if(modifiers.ctrl, self.ctrl);
+            append_if(modifiers.shift, self.shift);
+            append_if(modifiers.alt, self.alt);
+            append_if(modifiers.mac_cmd || modifiers.command, self.mac_cmd);
+        } else {
+            append_if(modifiers.ctrl || modifiers.command, self.ctrl);
+            append_if(modifiers.alt, self.alt);
+            append_if(modifiers.shift, self.shift);
+        }
+
+        s
+    }
+}
+
+// ----------------------------------------------------------------------------
+
+/// Keyboard keys.
+///
+/// Includes all keys egui is interested in (such as `Home` and `End`)
+/// plus a few that are useful for detecting keyboard shortcuts.
+///
+/// Many keys are omitted because they are not always physical keys (depending on keyboard language), e.g. `;` and `§`,
+/// and are therefore unsuitable as keyboard shortcuts if you want your app to be portable.
+#[derive(Clone, Copy, Debug, Eq, Ord, PartialEq, PartialOrd, Hash)]
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+pub enum Key {
+    ArrowDown,
+    ArrowLeft,
+    ArrowRight,
+    ArrowUp,
+
+    Escape,
+    Tab,
+    Backspace,
+    Enter,
+    Space,
+
+    Insert,
+    Delete,
+    Home,
+    End,
+    PageUp,
+    PageDown,
+
+    /// The virtual keycode for the Minus key.
+    Minus,
+    /// The virtual keycode for the Plus/Equals key.
+    PlusEquals,
+
+    /// Either from the main row or from the numpad.
+    Num0,
+    /// Either from the main row or from the numpad.
+    Num1,
+    /// Either from the main row or from the numpad.
+    Num2,
+    /// Either from the main row or from the numpad.
+    Num3,
+    /// Either from the main row or from the numpad.
+    Num4,
+    /// Either from the main row or from the numpad.
+    Num5,
+    /// Either from the main row or from the numpad.
+    Num6,
+    /// Either from the main row or from the numpad.
+    Num7,
+    /// Either from the main row or from the numpad.
+    Num8,
+    /// Either from the main row or from the numpad.
+    Num9,
+
+    A, // Used for cmd+A (select All)
+    B,
+    C, // |CMD COPY|
+    D, // |CMD BOOKMARK|
+    E, // |CMD SEARCH|
+    F, // |CMD FIND firefox & chrome|
+    G, // |CMD FIND chrome|
+    H, // |CMD History|
+    I, // italics
+    J, // |CMD SEARCH firefox/DOWNLOAD chrome|
+    K, // Used for ctrl+K (delete text after cursor)
+    L,
+    M,
+    N,
+    O, // |CMD OPEN|
+    P, // |CMD PRINT|
+    Q,
+    R, // |CMD REFRESH|
+    S, // |CMD SAVE|
+    T, // |CMD TAB|
+    U, // Used for ctrl+U (delete text before cursor)
+    V, // |CMD PASTE|
+    W, // Used for ctrl+W (delete previous word)
+    X, // |CMD CUT|
+    Y,
+    Z, // |CMD UNDO|
+
+    // The function keys:
+    F1,
+    F2,
+    F3,
+    F4,
+    F5, // |CMD REFRESH|
+    F6,
+    F7,
+    F8,
+    F9,
+    F10,
+    F11,
+    F12,
+    F13,
+    F14,
+    F15,
+    F16,
+    F17,
+    F18,
+    F19,
+    F20,
+}
+
+impl Key {
+    /// Emoji or name representing the key
+    pub fn symbol_or_name(self) -> &'static str {
+        // TODO(emilk): add support for more unicode symbols (see for instance https://wincent.com/wiki/Unicode_representations_of_modifier_keys).
+        // Before we do we must first make sure they are supported in `Fonts` though,
+        // so perhaps this functions needs to take a `supports_character: impl Fn(char) -> bool` or something.
+        match self {
+            Key::ArrowDown => "⏷",
+            Key::ArrowLeft => "⏴",
+            Key::ArrowRight => "⏵",
+            Key::ArrowUp => "⏶",
+            Key::Minus => "-",
+            Key::PlusEquals => "+",
+            _ => self.name(),
+        }
+    }
+
+    /// Human-readable English name.
+    pub fn name(self) -> &'static str {
+        match self {
+            Key::ArrowDown => "Down",
+            Key::ArrowLeft => "Left",
+            Key::ArrowRight => "Right",
+            Key::ArrowUp => "Up",
+            Key::Escape => "Escape",
+            Key::Tab => "Tab",
+            Key::Backspace => "Backspace",
+            Key::Enter => "Enter",
+            Key::Space => "Space",
+            Key::Insert => "Insert",
+            Key::Delete => "Delete",
+            Key::Home => "Home",
+            Key::End => "End",
+            Key::PageUp => "PageUp",
+            Key::PageDown => "PageDown",
+            Key::Minus => "Minus",
+            Key::PlusEquals => "Plus",
+            Key::Num0 => "0",
+            Key::Num1 => "1",
+            Key::Num2 => "2",
+            Key::Num3 => "3",
+            Key::Num4 => "4",
+            Key::Num5 => "5",
+            Key::Num6 => "6",
+            Key::Num7 => "7",
+            Key::Num8 => "8",
+            Key::Num9 => "9",
+            Key::A => "A",
+            Key::B => "B",
+            Key::C => "C",
+            Key::D => "D",
+            Key::E => "E",
+            Key::F => "F",
+            Key::G => "G",
+            Key::H => "H",
+            Key::I => "I",
+            Key::J => "J",
+            Key::K => "K",
+            Key::L => "L",
+            Key::M => "M",
+            Key::N => "N",
+            Key::O => "O",
+            Key::P => "P",
+            Key::Q => "Q",
+            Key::R => "R",
+            Key::S => "S",
+            Key::T => "T",
+            Key::U => "U",
+            Key::V => "V",
+            Key::W => "W",
+            Key::X => "X",
+            Key::Y => "Y",
+            Key::Z => "Z",
+            Key::F1 => "F1",
+            Key::F2 => "F2",
+            Key::F3 => "F3",
+            Key::F4 => "F4",
+            Key::F5 => "F5",
+            Key::F6 => "F6",
+            Key::F7 => "F7",
+            Key::F8 => "F8",
+            Key::F9 => "F9",
+            Key::F10 => "F10",
+            Key::F11 => "F11",
+            Key::F12 => "F12",
+            Key::F13 => "F13",
+            Key::F14 => "F14",
+            Key::F15 => "F15",
+            Key::F16 => "F16",
+            Key::F17 => "F17",
+            Key::F18 => "F18",
+            Key::F19 => "F19",
+            Key::F20 => "F20",
+        }
+    }
+}
+
+// ----------------------------------------------------------------------------
+
+/// A keyboard shortcut, e.g. `Ctrl+Alt+W`.
+///
+/// Can be used with [`crate::InputState::consume_shortcut`]
+/// and [`crate::Context::format_shortcut`].
+#[derive(Clone, Copy, Debug, Hash, PartialEq, Eq)]
+pub struct KeyboardShortcut {
+    pub modifiers: Modifiers,
+    pub key: Key,
+}
+
+impl KeyboardShortcut {
+    pub const fn new(modifiers: Modifiers, key: Key) -> Self {
+        Self { modifiers, key }
+    }
+
+    pub fn format(&self, names: &ModifierNames<'_>, is_mac: bool) -> String {
+        let mut s = names.format(&self.modifiers, is_mac);
+        if !s.is_empty() {
+            s += names.concat;
+        }
+        if names.is_short {
+            s += self.key.symbol_or_name();
+        } else {
+            s += self.key.name();
+        }
+        s
+    }
+}
+
+#[test]
+fn format_kb_shortcut() {
+    let cmd_shift_f = KeyboardShortcut::new(Modifiers::COMMAND | Modifiers::SHIFT, Key::F);
+    assert_eq!(
+        cmd_shift_f.format(&ModifierNames::NAMES, false),
+        "Ctrl+Shift+F"
+    );
+    assert_eq!(
+        cmd_shift_f.format(&ModifierNames::NAMES, true),
+        "Shift+Cmd+F"
+    );
+    assert_eq!(cmd_shift_f.format(&ModifierNames::SYMBOLS, false), "^⇧F");
+    assert_eq!(cmd_shift_f.format(&ModifierNames::SYMBOLS, true), "⇧⌘F");
+}
+
+// ----------------------------------------------------------------------------
+
+impl RawInput {
+    pub fn ui(&self, ui: &mut crate::Ui) {
+        let Self {
+            screen_rect,
+            pixels_per_point,
+            max_texture_side,
+            time,
+            predicted_dt,
+            modifiers,
+            events,
+            hovered_files,
+            dropped_files,
+            has_focus,
+        } = self;
+
+        ui.label(format!("screen_rect: {:?} points", screen_rect));
+        ui.label(format!("pixels_per_point: {:?}", pixels_per_point))
+            .on_hover_text(
+                "Also called HDPI factor.\nNumber of physical pixels per each logical pixel.",
+            );
+        ui.label(format!("max_texture_side: {:?}", max_texture_side));
+        if let Some(time) = time {
+            ui.label(format!("time: {:.3} s", time));
+        } else {
+            ui.label("time: None");
+        }
+        ui.label(format!("predicted_dt: {:.1} ms", 1e3 * predicted_dt));
+        ui.label(format!("modifiers: {:#?}", modifiers));
+        ui.label(format!("hovered_files: {}", hovered_files.len()));
+        ui.label(format!("dropped_files: {}", dropped_files.len()));
+        ui.label(format!("has_focus: {}", has_focus));
+        ui.scope(|ui| {
+            ui.set_min_height(150.0);
+            ui.label(format!("events: {:#?}", events))
+                .on_hover_text("key presses etc");
+        });
+    }
+}
+
+/// this is a `u64` as values of this kind can always be obtained by hashing
+#[derive(Clone, Copy, Debug, Eq, PartialEq, PartialOrd, Ord)]
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+pub struct TouchDeviceId(pub u64);
+
+/// Unique identification of a touch occurrence (finger or pen or …).
+/// A Touch ID is valid until the finger is lifted.
+/// A new ID is used for the next touch.
+#[derive(Clone, Copy, Debug, Eq, PartialEq, PartialOrd, Ord)]
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+pub struct TouchId(pub u64);
+
+/// In what phase a touch event is in.
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+pub enum TouchPhase {
+    /// User just placed a touch point on the touch surface
+    Start,
+
+    /// User moves a touch point along the surface. This event is also sent when
+    /// any attributes (position, force, …) of the touch point change.
+    Move,
+
+    /// User lifted the finger or pen from the surface, or slid off the edge of
+    /// the surface
+    End,
+
+    /// Touch operation has been disrupted by something (various reasons are possible,
+    /// maybe a pop-up alert or any other kind of interruption which may not have
+    /// been intended by the user)
+    Cancel,
+}
+
+impl From<u64> for TouchId {
+    fn from(id: u64) -> Self {
+        Self(id)
+    }
+}
+
+impl From<i32> for TouchId {
+    fn from(id: i32) -> Self {
+        Self(id as u64)
+    }
+}
+
+impl From<u32> for TouchId {
+    fn from(id: u32) -> Self {
+        Self(id as u64)
+    }
+}

crates/egui/src/data/output.rs

@@ -2,11 +2,61 @@
 
 use crate::WidgetType;
 
-/// What egui emits each frame.
+/// What egui emits each frame from [`crate::Context::run`].
+///
 /// The backend should use this.
 #[derive(Clone, Default, PartialEq)]
+pub struct FullOutput {
+    /// Non-rendering related output.
+    pub platform_output: PlatformOutput,
+
+    /// If `Duration::is_zero()`, egui is requesting immediate repaint (i.e. on the next frame).
+    ///
+    /// This happens for instance when there is an animation, or if a user has called `Context::request_repaint()`.
+    ///
+    /// If `Duration` is greater than zero, egui wants to be repainted at or before the specified
+    /// duration elapses. when in reactive mode, egui spends forever waiting for input and only then,
+    /// will it repaint itself. this can be used to make sure that backend will only wait for a
+    /// specified amount of time, and repaint egui without any new input.
+    pub repaint_after: std::time::Duration,
+
+    /// Texture changes since last frame (including the font texture).
+    ///
+    /// The backend needs to apply [`crate::TexturesDelta::set`] _before_ painting,
+    /// and free any texture in [`crate::TexturesDelta::free`] _after_ painting.
+    pub textures_delta: epaint::textures::TexturesDelta,
+
+    /// What to paint.
+    ///
+    /// You can use [`crate::Context::tessellate`] to turn this into triangles.
+    pub shapes: Vec<epaint::ClippedShape>,
+}
+
+impl FullOutput {
+    /// Add on new output.
+    pub fn append(&mut self, newer: Self) {
+        let Self {
+            platform_output,
+            repaint_after,
+            textures_delta,
+            shapes,
+        } = newer;
+
+        self.platform_output.append(platform_output);
+        self.repaint_after = repaint_after; // if the last frame doesn't need a repaint, then we don't need to repaint
+        self.textures_delta.append(textures_delta);
+        self.shapes = shapes; // Only paint the latest
+    }
+}
+
+/// The non-rendering part of what egui emits each frame.
+///
+/// You can access (and modify) this with [`crate::Context::output`].
+///
+/// The backend should use this.
+#[derive(Default, Clone, PartialEq)]
 #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
-pub struct Output {
+pub struct PlatformOutput {
     /// Set the cursor to this icon.
     pub cursor_icon: CursorIcon,
 
@@ -16,28 +66,35 @@ pub struct Output {
     /// If set, put this text in the system clipboard. Ignore if empty.
     ///
     /// This is often a response to [`crate::Event::Copy`] or [`crate::Event::Cut`].
+    ///
+    /// ```
+    /// # egui::__run_test_ui(|ui| {
+    /// if ui.button("📋").clicked() {
+    ///     ui.output_mut(|o| o.copied_text = "some_text".to_string());
+    /// }
+    /// # });
+    /// ```
     pub copied_text: String,
 
-    /// If `true`, egui is requesting immediate repaint (i.e. on the next frame).
-    ///
-    /// This happens for instance when there is an animation, or if a user has called `Context::request_repaint()`.
-    ///
-    /// As an egui user: don't set this value directly.
-    /// Call `Context::request_repaint()` instead and it will do so for you.
-    pub needs_repaint: bool,
-
     /// Events that may be useful to e.g. a screen reader.
     pub events: Vec<OutputEvent>,
 
-    /// Position of text edit cursor (used for IME).
+    /// Is there a mutable [`TextEdit`](crate::TextEdit) under the cursor?
+    /// Use by `eframe` web to show/hide mobile keyboard and IME agent.
+    pub mutable_text_under_cursor: bool,
+
+    /// Screen-space position of text edit cursor (used for IME).
     pub text_cursor_pos: Option<crate::Pos2>,
+
+    #[cfg(feature = "accesskit")]
+    pub accesskit_update: Option<accesskit::TreeUpdate>,
 }
 
-impl Output {
+impl PlatformOutput {
     /// Open the given url in a web browser.
     /// If egui is running in a browser, the same tab will be reused.
     pub fn open_url(&mut self, url: impl ToString) {
-        self.open_url = Some(OpenUrl::same_tab(url))
+        self.open_url = Some(OpenUrl::same_tab(url));
     }
 
     /// This can be used by a text-to-speech system to describe the events (if any).
@@ -47,6 +104,7 @@ impl Output {
             match event {
                 OutputEvent::Clicked(widget_info)
                 | OutputEvent::DoubleClicked(widget_info)
+                | OutputEvent::TripleClicked(widget_info)
                 | OutputEvent::FocusGained(widget_info)
                 | OutputEvent::TextSelectionChanged(widget_info)
                 | OutputEvent::ValueChanged(widget_info) => {
@@ -63,9 +121,11 @@ impl Output {
             cursor_icon,
             open_url,
             copied_text,
-            needs_repaint,
             mut events,
+            mutable_text_under_cursor,
             text_cursor_pos,
+            #[cfg(feature = "accesskit")]
+            accesskit_update,
         } = newer;
 
         self.cursor_icon = cursor_icon;
@@ -75,9 +135,16 @@ impl Output {
         if !copied_text.is_empty() {
             self.copied_text = copied_text;
         }
-        self.needs_repaint = needs_repaint; // if the last frame doesn't need a repaint, then we don't need to repaint
         self.events.append(&mut events);
+        self.mutable_text_under_cursor = mutable_text_under_cursor;
         self.text_cursor_pos = text_cursor_pos.or(self.text_cursor_pos);
+
+        #[cfg(feature = "accesskit")]
+        {
+            // egui produces a complete AccessKit tree for each frame,
+            // so overwrite rather than appending.
+            self.accesskit_update = accesskit_update;
+        }
     }
 
     /// Take everything ephemeral (everything except `cursor_icon` currently)
@@ -88,10 +155,12 @@ impl Output {
     }
 }
 
-#[derive(Clone, PartialEq)]
+/// What URL to open, and how.
+#[derive(Clone, PartialEq, Eq)]
 #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
 pub struct OpenUrl {
     pub url: String,
+
     /// If `true`, open the url in a new tab.
     /// If `false` open it in the same tab.
     /// Only matters when in a web browser.
@@ -118,10 +187,10 @@ impl OpenUrl {
 
 /// A mouse cursor icon.
 ///
-/// egui emits a [`CursorIcon`] in [`Output`] each frame as a request to the integration.
+/// egui emits a [`CursorIcon`] in [`PlatformOutput`] each frame as a request to the integration.
 ///
 /// Loosely based on <https://developer.mozilla.org/en-US/docs/Web/CSS/cursor>.
-#[derive(Clone, Copy, Debug, PartialEq)]
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
 #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
 pub enum CursorIcon {
     /// Normal cursor icon, whatever that is.
@@ -185,27 +254,67 @@ pub enum CursorIcon {
     Grabbing,
 
     // ------------------------------------
-    // Resizing and scrolling
     /// Something can be scrolled in any direction (panned).
     AllScroll,
 
+    // ------------------------------------
+    // Resizing in two directions:
     /// Horizontal resize `-` to make something wider or more narrow (left to/from right)
     ResizeHorizontal,
+
     /// Diagonal resize `/` (right-up to/from left-down)
     ResizeNeSw,
+
     /// Diagonal resize `\` (left-up to/from right-down)
     ResizeNwSe,
+
     /// Vertical resize `|` (up-down or down-up)
     ResizeVertical,
 
+    // ------------------------------------
+    // Resizing in one direction:
+    /// Resize something rightwards (e.g. when dragging the right-most edge of something)
+    ResizeEast,
+
+    /// Resize something down and right (e.g. when dragging the bottom-right corner of something)
+    ResizeSouthEast,
+
+    /// Resize something downwards (e.g. when dragging the bottom edge of something)
+    ResizeSouth,
+
+    /// Resize something down and left (e.g. when dragging the bottom-left corner of something)
+    ResizeSouthWest,
+
+    /// Resize something leftwards (e.g. when dragging the left edge of something)
+    ResizeWest,
+
+    /// Resize something up and left (e.g. when dragging the top-left corner of something)
+    ResizeNorthWest,
+
+    /// Resize something up (e.g. when dragging the top edge of something)
+    ResizeNorth,
+
+    /// Resize something up and right (e.g. when dragging the top-right corner of something)
+    ResizeNorthEast,
+
+    // ------------------------------------
+    /// Resize a column
+    ResizeColumn,
+
+    /// Resize a row
+    ResizeRow,
+
+    // ------------------------------------
+    // Zooming:
     /// Enhance!
     ZoomIn,
+
     /// Let's get a better overview
     ZoomOut,
 }
 
 impl CursorIcon {
-    pub const ALL: [CursorIcon; 25] = [
+    pub const ALL: [CursorIcon; 35] = [
         CursorIcon::Default,
         CursorIcon::None,
         CursorIcon::ContextMenu,
@@ -229,6 +338,16 @@ impl CursorIcon {
         CursorIcon::ResizeNeSw,
         CursorIcon::ResizeNwSe,
         CursorIcon::ResizeVertical,
+        CursorIcon::ResizeEast,
+        CursorIcon::ResizeSouthEast,
+        CursorIcon::ResizeSouth,
+        CursorIcon::ResizeSouthWest,
+        CursorIcon::ResizeWest,
+        CursorIcon::ResizeNorthWest,
+        CursorIcon::ResizeNorth,
+        CursorIcon::ResizeNorthEast,
+        CursorIcon::ResizeColumn,
+        CursorIcon::ResizeRow,
         CursorIcon::ZoomIn,
         CursorIcon::ZoomOut,
     ];
@@ -246,23 +365,44 @@ impl Default for CursorIcon {
 #[derive(Clone, PartialEq)]
 #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
 pub enum OutputEvent {
-    // A widget was clicked.
+    /// A widget was clicked.
     Clicked(WidgetInfo),
-    // A widget was double-clicked.
+
+    /// A widget was double-clicked.
     DoubleClicked(WidgetInfo),
+
+    /// A widget was triple-clicked.
+    TripleClicked(WidgetInfo),
+
     /// A widget gained keyboard focus (by tab key).
     FocusGained(WidgetInfo),
-    // Text selection was updated.
+
+    /// Text selection was updated.
     TextSelectionChanged(WidgetInfo),
-    // A widget's value changed.
+
+    /// A widget's value changed.
     ValueChanged(WidgetInfo),
 }
 
+impl OutputEvent {
+    pub fn widget_info(&self) -> &WidgetInfo {
+        match self {
+            OutputEvent::Clicked(info)
+            | OutputEvent::DoubleClicked(info)
+            | OutputEvent::TripleClicked(info)
+            | OutputEvent::FocusGained(info)
+            | OutputEvent::TextSelectionChanged(info)
+            | OutputEvent::ValueChanged(info) => info,
+        }
+    }
+}
+
 impl std::fmt::Debug for OutputEvent {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         match self {
             Self::Clicked(wi) => write!(f, "Clicked({:?})", wi),
             Self::DoubleClicked(wi) => write!(f, "DoubleClicked({:?})", wi),
+            Self::TripleClicked(wi) => write!(f, "TripleClicked({:?})", wi),
             Self::FocusGained(wi) => write!(f, "FocusGained({:?})", wi),
             Self::TextSelectionChanged(wi) => write!(f, "TextSelectionChanged({:?})", wi),
             Self::ValueChanged(wi) => write!(f, "ValueChanged({:?})", wi),
@@ -276,19 +416,26 @@ impl std::fmt::Debug for OutputEvent {
 pub struct WidgetInfo {
     /// The type of widget this is.
     pub typ: WidgetType,
-    // Whether the widget is enabled.
+
+    /// Whether the widget is enabled.
     pub enabled: bool,
+
     /// The text on labels, buttons, checkboxes etc.
     pub label: Option<String>,
-    /// The contents of some editable text (for `TextEdit` fields).
+
+    /// The contents of some editable text (for [`TextEdit`](crate::TextEdit) fields).
     pub current_text_value: Option<String>,
-    // The previous text value.
+
+    /// The previous text value.
     pub prev_text_value: Option<String>,
+
     /// The current value of checkboxes and radio buttons.
     pub selected: Option<bool>,
+
     /// The current value of sliders etc.
     pub value: Option<f64>,
-    // Selected range of characters in [`Self::current_text_value`].
+
+    /// Selected range of characters in [`Self::current_text_value`].
     pub text_selection: Option<std::ops::RangeInclusive<usize>>,
 }
 
@@ -423,9 +570,9 @@ impl WidgetInfo {
             text_selection: _,
         } = self;
 
-        // TODO: localization
+        // TODO(emilk): localization
         let widget_type = match typ {
-            WidgetType::Hyperlink => "link",
+            WidgetType::Link => "link",
             WidgetType::TextEdit => "text edit",
             WidgetType::Button => "button",
             WidgetType::Checkbox => "checkbox",

crates/egui/src/frame_state.rs

@@ -1,20 +1,36 @@
-use crate::*;
+use std::ops::RangeInclusive;
+
+use crate::{id::IdSet, *};
+
+#[derive(Clone, Copy, Debug)]
+pub(crate) struct TooltipFrameState {
+    pub common_id: Id,
+    pub rect: Rect,
+    pub count: usize,
+}
+
+#[cfg(feature = "accesskit")]
+#[derive(Clone)]
+pub(crate) struct AccessKitFrameState {
+    pub(crate) node_builders: IdMap<accesskit::NodeBuilder>,
+    pub(crate) parent_stack: Vec<Id>,
+}
 
 /// State that is collected during a frame and then cleared.
 /// Short-term (single frame) memory.
 #[derive(Clone)]
 pub(crate) struct FrameState {
-    /// All `Id`s that were used this frame.
-    /// Used to debug `Id` clashes of widgets.
+    /// All [`Id`]s that were used this frame.
+    /// Used to debug [`Id`] clashes of widgets.
     pub(crate) used_ids: IdMap<Rect>,
 
     /// Starts off as the screen_rect, shrinks as panels are added.
-    /// The `CentralPanel` does not change this.
+    /// The [`CentralPanel`] does not change this.
     /// This is the area available to Window's.
     pub(crate) available_rect: Rect,
 
     /// Starts off as the screen_rect, shrinks as panels are added.
-    /// The `CentralPanel` retracts from this.
+    /// The [`CentralPanel`] retracts from this.
     pub(crate) unused_rect: Rect,
 
     /// How much space is used by panels.
@@ -23,12 +39,24 @@ pub(crate) struct FrameState {
     /// If a tooltip has been shown this frame, where was it?
     /// This is used to prevent multiple tooltips to cover each other.
     /// Initialized to `None` at the start of each frame.
-    pub(crate) tooltip_rect: Option<(Id, Rect, usize)>,
+    pub(crate) tooltip_state: Option<TooltipFrameState>,
+
+    /// Set to [`InputState::scroll_delta`] on the start of each frame.
+    ///
+    /// Cleared by the first [`ScrollArea`] that makes use of it.
+    pub(crate) scroll_delta: Vec2, // TODO(emilk): move to `InputState` ?
 
-    /// Cleared by the first `ScrollArea` that makes use of it.
-    pub(crate) scroll_delta: Vec2, // TODO: move to a Mutex inside of `InputState` ?
     /// horizontal, vertical
-    pub(crate) scroll_target: [Option<(f32, Align)>; 2],
+    pub(crate) scroll_target: [Option<(RangeInclusive<f32>, Option<Align>)>; 2],
+
+    #[cfg(feature = "accesskit")]
+    pub(crate) accesskit_state: Option<AccessKitFrameState>,
+
+    /// Highlight these widgets this next frame. Read from this.
+    pub(crate) highlight_this_frame: IdSet,
+
+    /// Highlight these widgets the next frame. Write to this.
+    pub(crate) highlight_next_frame: IdSet,
 }
 
 impl Default for FrameState {
@@ -38,9 +66,13 @@ impl Default for FrameState {
             available_rect: Rect::NAN,
             unused_rect: Rect::NAN,
             used_by_panels: Rect::NAN,
-            tooltip_rect: None,
+            tooltip_state: None,
             scroll_delta: Vec2::ZERO,
-            scroll_target: [None; 2],
+            scroll_target: [None, None],
+            #[cfg(feature = "accesskit")]
+            accesskit_state: None,
+            highlight_this_frame: Default::default(),
+            highlight_next_frame: Default::default(),
         }
     }
 }
@@ -52,18 +84,29 @@ impl FrameState {
             available_rect,
             unused_rect,
             used_by_panels,
-            tooltip_rect,
+            tooltip_state,
             scroll_delta,
             scroll_target,
+            #[cfg(feature = "accesskit")]
+            accesskit_state,
+            highlight_this_frame,
+            highlight_next_frame,
         } = self;
 
         used_ids.clear();
         *available_rect = input.screen_rect();
         *unused_rect = input.screen_rect();
         *used_by_panels = Rect::NOTHING;
-        *tooltip_rect = None;
+        *tooltip_state = None;
         *scroll_delta = input.scroll_delta;
-        *scroll_target = [None; 2];
+        *scroll_target = [None, None];
+
+        #[cfg(feature = "accesskit")]
+        {
+            *accesskit_state = None;
+        }
+
+        *highlight_this_frame = std::mem::take(highlight_next_frame);
     }
 
     /// How much space is still available after panels has been added.
@@ -72,7 +115,7 @@ impl FrameState {
     pub(crate) fn available_rect(&self) -> Rect {
         crate::egui_assert!(
             self.available_rect.is_finite(),
-            "Called `available_rect()` before `CtxRef::begin_frame()`"
+            "Called `available_rect()` before `Context::run()`"
         );
         self.available_rect
     }

crates/egui/src/grid.rs

@@ -1,13 +1,23 @@
 use crate::*;
 
 #[derive(Clone, Debug, Default, PartialEq)]
-#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
 pub(crate) struct State {
     col_widths: Vec<f32>,
     row_heights: Vec<f32>,
 }
 
 impl State {
+    pub fn load(ctx: &Context, id: Id) -> Option<Self> {
+        ctx.data_mut(|d| d.get_temp(id))
+    }
+
+    pub fn store(self, ctx: &Context, id: Id) {
+        // We don't persist Grids, because
+        // A) there are potentially a lot of them, using up a lot of space (and therefore serialization time)
+        // B) if the code changes, the grid _should_ change, and not remember old sizes
+        ctx.data_mut(|d| d.insert_temp(id, self));
+    }
+
     fn set_min_col_width(&mut self, col: usize, width: f32) {
         self.col_widths
             .resize(self.col_widths.len().max(col + 1), 0.0);
@@ -37,10 +47,13 @@ impl State {
 // ----------------------------------------------------------------------------
 
 pub(crate) struct GridLayout {
-    ctx: CtxRef,
+    ctx: Context,
     style: std::sync::Arc<Style>,
     id: Id,
 
+    /// First frame (no previous know state).
+    is_first_frame: bool,
+
     /// State previous frame (if any).
     /// This can be used to predict future sizes of cells.
     prev_state: State,
@@ -61,10 +74,11 @@ pub(crate) struct GridLayout {
 }
 
 impl GridLayout {
-    pub(crate) fn new(ui: &Ui, id: Id) -> Self {
-        let prev_state = ui.memory().id_data.get_or_default::<State>(id).clone();
+    pub(crate) fn new(ui: &Ui, id: Id, prev_state: Option<State>) -> Self {
+        let is_first_frame = prev_state.is_none();
+        let prev_state = prev_state.unwrap_or_default();
 
-        // TODO: respect current layout
+        // TODO(emilk): respect current layout
 
         let initial_available = ui.placer().max_rect().intersect(ui.cursor());
         crate::egui_assert!(
@@ -72,10 +86,13 @@ impl GridLayout {
             "Grid not yet available for right-to-left layouts"
         );
 
+        ui.ctx().check_for_id_clash(id, initial_available, "Grid");
+
         Self {
             ctx: ui.ctx().clone(),
             style: ui.style().clone(),
             id,
+            is_first_frame,
             prev_state,
             curr_state: State::default(),
             initial_available,
@@ -98,6 +115,7 @@ impl GridLayout {
             .col_width(col)
             .unwrap_or(self.min_cell_size.x)
     }
+
     fn prev_row_height(&self, row: usize) -> f32 {
         self.prev_state
             .row_height(row)
@@ -112,12 +130,21 @@ impl GridLayout {
         let is_last_column = Some(self.col + 1) == self.num_columns;
 
         let width = if is_last_column {
-            (self.initial_available.right() - region.cursor.left()).at_most(self.max_cell_size.x)
+            // The first frame we don't really know the widths of the previous columns,
+            // so returning a big available width here can cause trouble.
+            if self.is_first_frame {
+                self.curr_state
+                    .col_width(self.col)
+                    .unwrap_or(self.min_cell_size.x)
+            } else {
+                (self.initial_available.right() - region.cursor.left())
+                    .at_most(self.max_cell_size.x)
+            }
         } else if self.max_cell_size.x.is_finite() {
-            // TODO: should probably heed `prev_state` here too
+            // TODO(emilk): should probably heed `prev_state` here too
             self.max_cell_size.x
         } else {
-            // If we want to allow width-filling widgets like `Separator` in one of the first cells
+            // If we want to allow width-filling widgets like [`Separator`] in one of the first cells
             // then we need to make sure they don't spill out of the first cell:
             self.prev_state
                 .col_width(self.col)
@@ -147,7 +174,7 @@ impl GridLayout {
 
     #[allow(clippy::unused_self)]
     pub(crate) fn align_size_within_rect(&self, size: Vec2, frame: Rect) -> Rect {
-        // TODO: allow this alignment to be customized
+        // TODO(emilk): allow this alignment to be customized
         Align2::LEFT_CENTER.align_size_within_rect(size, frame)
     }
 
@@ -213,10 +240,7 @@ impl GridLayout {
 
     pub(crate) fn save(&self) {
         if self.curr_state != self.prev_state {
-            self.ctx
-                .memory()
-                .id_data
-                .insert(self.id, self.curr_state.clone());
+            self.curr_state.clone().store(&self.ctx, self.id);
             self.ctx.request_repaint();
         }
     }
@@ -233,7 +257,7 @@ impl GridLayout {
 /// [`Ui::horizontal`], [`Ui::vertical`] etc.
 ///
 /// ```
-/// # let ui = &mut egui::Ui::__test();
+/// # egui::__run_test_ui(|ui| {
 /// egui::Grid::new("some_unique_id").show(ui, |ui| {
 ///     ui.label("First row, first column");
 ///     ui.label("First row, second column");
@@ -248,12 +272,13 @@ impl GridLayout {
 ///     ui.label("Third row, second column");
 ///     ui.end_row();
 /// });
+/// # });
 /// ```
 #[must_use = "You should call .show()"]
 pub struct Grid {
     id_source: Id,
     num_columns: Option<usize>,
-    striped: bool,
+    striped: Option<bool>,
     min_col_width: Option<f32>,
     min_row_height: Option<f32>,
     max_cell_size: Vec2,
@@ -267,7 +292,7 @@ impl Grid {
         Self {
             id_source: Id::new(id_source),
             num_columns: None,
-            striped: false,
+            striped: None,
             min_col_width: None,
             min_row_height: None,
             max_cell_size: Vec2::INFINITY,
@@ -285,9 +310,9 @@ impl Grid {
     /// If `true`, add a subtle background color to every other row.
     ///
     /// This can make a table easier to read.
-    /// Default: `false`.
+    /// Default is whatever is in [`crate::Visuals::striped`].
     pub fn striped(mut self, striped: bool) -> Self {
-        self.striped = striped;
+        self.striped = Some(striped);
         self
     }
 
@@ -319,7 +344,7 @@ impl Grid {
     }
 
     /// Change which row number the grid starts on.
-    /// This can be useful when you have a large `Grid` inside of [`ScrollArea::show_rows`].
+    /// This can be useful when you have a large [`Grid`] inside of [`ScrollArea::show_rows`].
     pub fn start_row(mut self, start_row: usize) -> Self {
         self.start_row = start_row;
         self
@@ -346,18 +371,22 @@ impl Grid {
             spacing,
             start_row,
         } = self;
+        let striped = striped.unwrap_or(ui.visuals().striped);
         let min_col_width = min_col_width.unwrap_or_else(|| ui.spacing().interact_size.x);
         let min_row_height = min_row_height.unwrap_or_else(|| ui.spacing().interact_size.y);
         let spacing = spacing.unwrap_or_else(|| ui.spacing().item_spacing);
 
+        let id = ui.make_persistent_id(id_source);
+        let prev_state = State::load(ui.ctx(), id);
+
         // Each grid cell is aligned LEFT_CENTER.
         // If somebody wants to wrap more things inside a cell,
         // then we should pick a default layout that matches that alignment,
         // which we do here:
         let max_rect = ui.cursor().intersect(ui.max_rect());
         ui.allocate_ui_at_rect(max_rect, |ui| {
+            ui.set_visible(prev_state.is_some()); // Avoid visible first-frame jitter
             ui.horizontal(|ui| {
-                let id = ui.make_persistent_id(id_source);
                 let grid = GridLayout {
                     num_columns,
                     striped,
@@ -365,7 +394,7 @@ impl Grid {
                     max_cell_size,
                     spacing,
                     row: start_row,
-                    ..GridLayout::new(ui, id)
+                    ..GridLayout::new(ui, id, prev_state)
                 };
 
                 ui.set_grid(grid);

crates/egui/src/gui_zoom.rs

@@ -0,0 +1,117 @@
+//! Helpers for zooming the whole GUI of an app (changing [`Context::pixels_per_point`].
+//!
+use crate::*;
+
+/// The suggested keyboard shortcuts for global gui zooming.
+pub mod kb_shortcuts {
+    use super::*;
+
+    pub const ZOOM_IN: KeyboardShortcut =
+        KeyboardShortcut::new(Modifiers::COMMAND, Key::PlusEquals);
+    pub const ZOOM_OUT: KeyboardShortcut = KeyboardShortcut::new(Modifiers::COMMAND, Key::Minus);
+    pub const ZOOM_RESET: KeyboardShortcut = KeyboardShortcut::new(Modifiers::COMMAND, Key::Num0);
+}
+
+/// Let the user scale the GUI (change `Context::pixels_per_point`) by pressing
+/// Cmd+Plus, Cmd+Minus or Cmd+0, just like in a browser.
+///
+/// When using [`eframe`](https://github.com/emilk/egui/tree/master/crates/eframe), you want to call this as:
+/// ```ignore
+/// // On web, the browser controls the gui zoom.
+/// if !frame.is_web() {
+///     egui::gui_zoom::zoom_with_keyboard_shortcuts(
+///         ctx,
+///         frame.info().native_pixels_per_point,
+///     );
+/// }
+/// ```
+pub fn zoom_with_keyboard_shortcuts(ctx: &Context, native_pixels_per_point: Option<f32>) {
+    if ctx.input_mut(|i| i.consume_shortcut(&kb_shortcuts::ZOOM_RESET)) {
+        if let Some(native_pixels_per_point) = native_pixels_per_point {
+            ctx.set_pixels_per_point(native_pixels_per_point);
+        }
+    } else {
+        if ctx.input_mut(|i| i.consume_shortcut(&kb_shortcuts::ZOOM_IN)) {
+            zoom_in(ctx);
+        }
+        if ctx.input_mut(|i| i.consume_shortcut(&kb_shortcuts::ZOOM_OUT)) {
+            zoom_out(ctx);
+        }
+    }
+}
+
+const MIN_PIXELS_PER_POINT: f32 = 0.2;
+const MAX_PIXELS_PER_POINT: f32 = 4.0;
+
+/// Make everything larger.
+pub fn zoom_in(ctx: &Context) {
+    let mut pixels_per_point = ctx.pixels_per_point();
+    pixels_per_point += 0.1;
+    pixels_per_point = pixels_per_point.clamp(MIN_PIXELS_PER_POINT, MAX_PIXELS_PER_POINT);
+    pixels_per_point = (pixels_per_point * 10.).round() / 10.;
+    ctx.set_pixels_per_point(pixels_per_point);
+}
+
+/// Make everything smaller.
+pub fn zoom_out(ctx: &Context) {
+    let mut pixels_per_point = ctx.pixels_per_point();
+    pixels_per_point -= 0.1;
+    pixels_per_point = pixels_per_point.clamp(MIN_PIXELS_PER_POINT, MAX_PIXELS_PER_POINT);
+    pixels_per_point = (pixels_per_point * 10.).round() / 10.;
+    ctx.set_pixels_per_point(pixels_per_point);
+}
+
+/// Show buttons for zooming the ui.
+///
+/// This is meant to be called from within a menu (See [`Ui::menu_button`]).
+///
+/// When using [`eframe`](https://github.com/emilk/egui/tree/master/crates/eframe), you want to call this as:
+/// ```ignore
+/// // On web, the browser controls the gui zoom.
+/// if !frame.is_web() {
+///     ui.menu_button("View", |ui| {
+///         egui::gui_zoom::zoom_menu_buttons(
+///             ui,
+///             frame.info().native_pixels_per_point,
+///         );
+///     });
+/// }
+/// ```
+pub fn zoom_menu_buttons(ui: &mut Ui, native_pixels_per_point: Option<f32>) {
+    if ui
+        .add_enabled(
+            ui.ctx().pixels_per_point() < MAX_PIXELS_PER_POINT,
+            Button::new("Zoom In").shortcut_text(ui.ctx().format_shortcut(&kb_shortcuts::ZOOM_IN)),
+        )
+        .clicked()
+    {
+        zoom_in(ui.ctx());
+        ui.close_menu();
+    }
+
+    if ui
+        .add_enabled(
+            ui.ctx().pixels_per_point() > MIN_PIXELS_PER_POINT,
+            Button::new("Zoom Out")
+                .shortcut_text(ui.ctx().format_shortcut(&kb_shortcuts::ZOOM_OUT)),
+        )
+        .clicked()
+    {
+        zoom_out(ui.ctx());
+        ui.close_menu();
+    }
+
+    if let Some(native_pixels_per_point) = native_pixels_per_point {
+        if ui
+            .add_enabled(
+                ui.ctx().pixels_per_point() != native_pixels_per_point,
+                Button::new("Reset Zoom")
+                    .shortcut_text(ui.ctx().format_shortcut(&kb_shortcuts::ZOOM_RESET)),
+            )
+            .clicked()
+        {
+            ui.ctx().set_pixels_per_point(native_pixels_per_point);
+            ui.close_menu();
+        }
+    }
+}

crates/egui/src/id.rs

@@ -1,16 +1,16 @@
-// TODO: have separate types `PositionId` and `UniqueId`. ?
+// TODO(emilk): have separate types `PositionId` and `UniqueId`. ?
 
-/// egui tracks widgets frame-to-frame using `Id`s.
+/// egui tracks widgets frame-to-frame using [`Id`]s.
 ///
 /// For instance, if you start dragging a slider one frame, egui stores
-/// the sliders `Id` as the current active id so that next frame when
+/// the sliders [`Id`] as the current active id so that next frame when
 /// you move the mouse the same slider changes, even if the mouse has
 /// moved outside the slider.
 ///
-/// For some widgets `Id`s are also used to persist some state about the
-/// widgets, such as Window position or wether not a collapsing header region is open.
+/// For some widgets [`Id`]s are also used to persist some state about the
+/// widgets, such as Window position or whether not a collapsing header region is open.
 ///
-/// This implies that the `Id`s must be unique.
+/// This implies that the [`Id`]s must be unique.
 ///
 /// For simple things like sliders and buttons that don't have any memory and
 /// doesn't move we can use the location of the widget as a source of identity.
@@ -19,7 +19,7 @@
 ///
 /// For things that need to persist state even after moving (windows, collapsing headers)
 /// the location of the widgets is obviously not good enough. For instance,
-/// a collapsing region needs to remember wether or not it is open even
+/// a collapsing region needs to remember whether or not it is open even
 /// if the layout next frame is different and the collapsing is not lower down
 /// on the screen.
 ///
@@ -30,22 +30,31 @@
 pub struct Id(u64);
 
 impl Id {
-    pub(crate) fn background() -> Self {
+    /// A special [`Id`], in particular as a key to [`crate::Memory::data`]
+    /// for when there is no particular widget to attach the data.
+    ///
+    /// The null [`Id`] is still a valid id to use in all circumstances,
+    /// though obviously it will lead to a lot of collisions if you do use it!
+    pub fn null() -> Self {
         Self(0)
     }
 
-    /// Generate a new `Id` by hashing some source (e.g. a string or integer).
+    pub(crate) fn background() -> Self {
+        Self(1)
+    }
+
+    /// Generate a new [`Id`] by hashing some source (e.g. a string or integer).
     pub fn new(source: impl std::hash::Hash) -> Id {
-        use std::hash::Hasher;
-        let mut hasher = epaint::ahash::AHasher::new_with_keys(123, 456);
+        use std::hash::{BuildHasher, Hasher};
+        let mut hasher = epaint::ahash::RandomState::with_seeds(1, 2, 3, 4).build_hasher();
         source.hash(&mut hasher);
         Id(hasher.finish())
     }
 
-    /// Generate a new `Id` by hashing the parent `Id` and the given argument.
+    /// Generate a new [`Id`] by hashing the parent [`Id`] and the given argument.
     pub fn with(self, child: impl std::hash::Hash) -> Id {
-        use std::hash::Hasher;
-        let mut hasher = epaint::ahash::AHasher::new_with_keys(123, 456);
+        use std::hash::{BuildHasher, Hasher};
+        let mut hasher = epaint::ahash::RandomState::with_seeds(1, 2, 3, 4).build_hasher();
         hasher.write_u64(self.0);
         child.hash(&mut hasher);
         Id(hasher.finish())
@@ -60,11 +69,31 @@ impl Id {
     pub(crate) fn value(&self) -> u64 {
         self.0
     }
+
+    #[cfg(feature = "accesskit")]
+    pub(crate) fn accesskit_id(&self) -> accesskit::NodeId {
+        std::num::NonZeroU64::new(self.0).unwrap().into()
+    }
 }
 
 impl std::fmt::Debug for Id {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        write!(f, "{:X}", self.0)
+        write!(f, "{:016X}", self.0)
+    }
+}
+
+/// Convenience
+impl From<&'static str> for Id {
+    #[inline]
+    fn from(string: &'static str) -> Self {
+        Self::new(string)
+    }
+}
+
+impl From<String> for Id {
+    #[inline]
+    fn from(string: String) -> Self {
+        Self::new(string)
     }
 }
 
@@ -76,41 +105,51 @@ pub struct IdHasher(u64);
 
 impl std::hash::Hasher for IdHasher {
     fn write(&mut self, _: &[u8]) {
-        unreachable!("Invalid use of IdHasher")
+        unreachable!("Invalid use of IdHasher");
     }
 
     fn write_u8(&mut self, _n: u8) {
-        unreachable!("Invalid use of IdHasher")
+        unreachable!("Invalid use of IdHasher");
     }
+
     fn write_u16(&mut self, _n: u16) {
-        unreachable!("Invalid use of IdHasher")
+        unreachable!("Invalid use of IdHasher");
     }
+
     fn write_u32(&mut self, _n: u32) {
-        unreachable!("Invalid use of IdHasher")
+        unreachable!("Invalid use of IdHasher");
     }
+
+    #[inline(always)]
     fn write_u64(&mut self, n: u64) {
-        self.0 = n
+        self.0 = n;
     }
+
     fn write_usize(&mut self, _n: usize) {
-        unreachable!("Invalid use of IdHasher")
+        unreachable!("Invalid use of IdHasher");
     }
 
     fn write_i8(&mut self, _n: i8) {
-        unreachable!("Invalid use of IdHasher")
-    }
-    fn write_i16(&mut self, _n: i16) {
-        unreachable!("Invalid use of IdHasher")
-    }
-    fn write_i32(&mut self, _n: i32) {
-        unreachable!("Invalid use of IdHasher")
-    }
-    fn write_i64(&mut self, _n: i64) {
-        unreachable!("Invalid use of IdHasher")
-    }
-    fn write_isize(&mut self, _n: isize) {
-        unreachable!("Invalid use of IdHasher")
+        unreachable!("Invalid use of IdHasher");
     }
 
+    fn write_i16(&mut self, _n: i16) {
+        unreachable!("Invalid use of IdHasher");
+    }
+
+    fn write_i32(&mut self, _n: i32) {
+        unreachable!("Invalid use of IdHasher");
+    }
+
+    fn write_i64(&mut self, _n: i64) {
+        unreachable!("Invalid use of IdHasher");
+    }
+
+    fn write_isize(&mut self, _n: isize) {
+        unreachable!("Invalid use of IdHasher");
+    }
+
+    #[inline(always)]
     fn finish(&self) -> u64 {
         self.0
     }
@@ -122,10 +161,15 @@ pub struct BuilIdHasher {}
 
 impl std::hash::BuildHasher for BuilIdHasher {
     type Hasher = IdHasher;
+
+    #[inline(always)]
     fn build_hasher(&self) -> IdHasher {
         IdHasher::default()
     }
 }
 
-/// `IdMap<V>` is a `HashMap<Id, V>` optimized by knowing that `Id` has good entropy, and doesn't need more hashing.
+/// `IdSet` is a `HashSet<Id>` optimized by knowing that [`Id`] has good entropy, and doesn't need more hashing.
+pub type IdSet = std::collections::HashSet<Id, BuilIdHasher>;
+
+/// `IdMap<V>` is a `HashMap<Id, V>` optimized by knowing that [`Id`] has good entropy, and doesn't need more hashing.
 pub type IdMap<V> = std::collections::HashMap<Id, V, BuilIdHasher>;

crates/egui/src/input_state.rs

@@ -9,13 +9,13 @@ pub use touch_state::MultiTouchInfo;
 use touch_state::TouchState;
 
 /// If the pointer moves more than this, it won't become a click (but it is still a drag)
-const MAX_CLICK_DIST: f32 = 6.0; // TODO: move to settings
+const MAX_CLICK_DIST: f32 = 6.0; // TODO(emilk): move to settings
 
 /// If the pointer is down for longer than this, it won't become a click (but it is still a drag)
-const MAX_CLICK_DURATION: f64 = 0.6; // TODO: move to settings
+const MAX_CLICK_DURATION: f64 = 0.6; // TODO(emilk): move to settings
 
 /// The new pointer press must come within this many seconds from previous pointer release
-const MAX_DOUBLE_CLICK_DELAY: f64 = 0.3; // TODO: move to settings
+const MAX_DOUBLE_CLICK_DELAY: f64 = 0.3; // TODO(emilk): move to settings
 
 /// Input state that egui updates each frame.
 ///
@@ -30,31 +30,80 @@ pub struct InputState {
     pub pointer: PointerState,
 
     /// State of touches, except those covered by PointerState (like clicks and drags).
-    /// (We keep a separate `TouchState` for each encountered touch device.)
+    /// (We keep a separate [`TouchState`] for each encountered touch device.)
     touch_states: BTreeMap<TouchDeviceId, TouchState>,
 
-    /// How many pixels the user scrolled.
+    /// How many points the user scrolled.
+    ///
+    /// The delta dictates how the _content_ should move.
+    ///
+    /// A positive X-value indicates the content is being moved right,
+    /// as when swiping right on a touch-screen or track-pad with natural scrolling.
+    ///
+    /// A positive Y-value indicates the content is being moved down,
+    /// as when swiping down on a touch-screen or track-pad with natural scrolling.
     pub scroll_delta: Vec2,
 
+    /// Zoom scale factor this frame (e.g. from ctrl-scroll or pinch gesture).
+    ///
+    /// * `zoom = 1`: no change.
+    /// * `zoom < 1`: pinch together
+    /// * `zoom > 1`: pinch spread
+    zoom_factor_delta: f32,
+
     /// Position and size of the egui area.
     pub screen_rect: Rect,
 
     /// Also known as device pixel ratio, > 1 for high resolution screens.
     pub pixels_per_point: f32,
 
+    /// Maximum size of one side of a texture.
+    ///
+    /// This depends on the backend.
+    pub max_texture_side: usize,
+
     /// Time in seconds. Relative to whatever. Used for animation.
     pub time: f64,
 
     /// Time since last frame, in seconds.
     ///
-    /// This can be very unstable in reactive mode (when we don't paint each frame)
-    /// so it can be smart to use e.g. `unstable_dt.min(1.0 / 30.0)`.
+    /// This can be very unstable in reactive mode (when we don't paint each frame).
+    /// For animations it is therefore better to use [`Self::stable_dt`].
     pub unstable_dt: f32,
 
+    /// Estimated time until next frame (provided we repaint right away).
+    ///
     /// Used for animations to get instant feedback (avoid frame delay).
     /// Should be set to the expected time between frames when painting at vsync speeds.
+    ///
+    /// On most integrations this has a fixed value of `1.0 / 60.0`, so it is not a very accurate estimate.
     pub predicted_dt: f32,
 
+    /// Time since last frame (in seconds), but gracefully handles the first frame after sleeping in reactive mode.
+    ///
+    /// In reactive mode (available in e.g. `eframe`), `egui` only updates when there is new input
+    /// or something is animating.
+    /// This can lead to large gaps of time (sleep), leading to large [`Self::unstable_dt`].
+    ///
+    /// If `egui` requested a repaint the previous frame, then `egui` will use
+    /// `stable_dt = unstable_dt;`, but if `egui` did not not request a repaint last frame,
+    /// then `egui` will assume `unstable_dt` is too large, and will use
+    /// `stable_dt = predicted_dt;`.
+    ///
+    /// This means that for the first frame after a sleep,
+    /// `stable_dt` will be a prediction of the delta-time until the next frame,
+    /// and in all other situations this will be an accurate measurement of time passed
+    /// since the previous frame.
+    ///
+    /// Note that a frame can still stall for various reasons, so `stable_dt` can
+    /// still be unusually large in some situations.
+    ///
+    /// When animating something, it is recommended that you use something like
+    /// `stable_dt.min(0.1)` - this will give you smooth animations when the framerate is good
+    /// (even in reactive mode), but will avoid large jumps when framerate is bad,
+    /// and will effectively slow down the animation when FPS drops below 10.
+    pub stable_dt: f32,
+
     /// Which modifier keys are down at the start of the frame?
     pub modifiers: Modifiers,
 
@@ -71,12 +120,15 @@ impl Default for InputState {
             raw: Default::default(),
             pointer: Default::default(),
             touch_states: Default::default(),
-            scroll_delta: Default::default(),
+            scroll_delta: Vec2::ZERO,
+            zoom_factor_delta: 1.0,
             screen_rect: Rect::from_min_size(Default::default(), vec2(10_000.0, 10_000.0)),
             pixels_per_point: 1.0,
+            max_texture_side: 2048,
             time: 0.0,
-            unstable_dt: 1.0 / 6.0,
-            predicted_dt: 1.0 / 6.0,
+            unstable_dt: 1.0 / 60.0,
+            predicted_dt: 1.0 / 60.0,
+            stable_dt: 1.0 / 60.0,
             modifiers: Default::default(),
             keys_down: Default::default(),
             events: Default::default(),
@@ -86,39 +138,72 @@ impl Default for InputState {
 
 impl InputState {
     #[must_use]
-    pub fn begin_frame(mut self, new: RawInput) -> InputState {
-        let time = new
-            .time
-            .unwrap_or_else(|| self.time + new.predicted_dt as f64);
+    pub fn begin_frame(
+        mut self,
+        mut new: RawInput,
+        requested_repaint_last_frame: bool,
+    ) -> InputState {
+        let time = new.time.unwrap_or(self.time + new.predicted_dt as f64);
         let unstable_dt = (time - self.time) as f32;
+
+        let stable_dt = if requested_repaint_last_frame {
+            // we should have had a repaint straight away,
+            // so this should be trustable.
+            unstable_dt
+        } else {
+            new.predicted_dt
+        };
+
         let screen_rect = new.screen_rect.unwrap_or(self.screen_rect);
         self.create_touch_states_for_new_devices(&new.events);
         for touch_state in self.touch_states.values_mut() {
             touch_state.begin_frame(time, &new, self.pointer.interact_pos);
         }
         let pointer = self.pointer.begin_frame(time, &new);
+
         let mut keys_down = self.keys_down;
-        for event in &new.events {
-            if let Event::Key { key, pressed, .. } = event {
-                if *pressed {
-                    keys_down.insert(*key);
-                } else {
-                    keys_down.remove(key);
+        let mut scroll_delta = Vec2::ZERO;
+        let mut zoom_factor_delta = 1.0;
+        for event in &mut new.events {
+            match event {
+                Event::Key {
+                    key,
+                    pressed,
+                    repeat,
+                    ..
+                } => {
+                    if *pressed {
+                        let first_press = keys_down.insert(*key);
+                        *repeat = !first_press;
+                    } else {
+                        keys_down.remove(key);
+                    }
                 }
+                Event::Scroll(delta) => {
+                    scroll_delta += *delta;
+                }
+                Event::Zoom(factor) => {
+                    zoom_factor_delta *= *factor;
+                }
+                _ => {}
             }
         }
+
         InputState {
             pointer,
             touch_states: self.touch_states,
-            scroll_delta: new.scroll_delta,
+            scroll_delta,
+            zoom_factor_delta,
             screen_rect,
             pixels_per_point: new.pixels_per_point.unwrap_or(self.pixels_per_point),
+            max_texture_side: new.max_texture_side.unwrap_or(self.max_texture_side),
             time,
             unstable_dt,
             predicted_dt: new.predicted_dt,
+            stable_dt,
             modifiers: new.modifiers,
             keys_down,
-            events: new.events.clone(), // TODO: remove clone() and use raw.events
+            events: new.events.clone(), // TODO(emilk): remove clone() and use raw.events
             raw: new,
         }
     }
@@ -136,11 +221,10 @@ impl InputState {
     pub fn zoom_delta(&self) -> f32 {
         // If a multi touch gesture is detected, it measures the exact and linear proportions of
         // the distances of the finger tips. It is therefore potentially more accurate than
-        // `raw.zoom_delta` which is based on the `ctrl-scroll` event which, in turn, may be
+        // `zoom_factor_delta` which is based on the `ctrl-scroll` event which, in turn, may be
         // synthesized from an original touch gesture.
         self.multi_touch()
-            .map(|touch| touch.zoom_delta)
-            .unwrap_or(self.raw.zoom_delta)
+            .map_or(self.zoom_factor_delta, |touch| touch.zoom_delta)
     }
 
     /// 2D non-proportional zoom scale factor this frame (e.g. from ctrl-scroll or pinch gesture).
@@ -160,34 +244,78 @@ impl InputState {
     pub fn zoom_delta_2d(&self) -> Vec2 {
         // If a multi touch gesture is detected, it measures the exact and linear proportions of
         // the distances of the finger tips.  It is therefore potentially more accurate than
-        // `raw.zoom_delta` which is based on the `ctrl-scroll` event which, in turn, may be
+        // `zoom_factor_delta` which is based on the `ctrl-scroll` event which, in turn, may be
         // synthesized from an original touch gesture.
-        self.multi_touch()
-            .map(|touch| touch.zoom_delta_2d)
-            .unwrap_or_else(|| Vec2::splat(self.raw.zoom_delta))
+        self.multi_touch().map_or_else(
+            || Vec2::splat(self.zoom_factor_delta),
+            |touch| touch.zoom_delta_2d,
+        )
     }
 
     pub fn wants_repaint(&self) -> bool {
         self.pointer.wants_repaint() || self.scroll_delta != Vec2::ZERO || !self.events.is_empty()
     }
 
+    /// Count presses of a key. If non-zero, the presses are consumed, so that this will only return non-zero once.
+    ///
+    /// Includes key-repeat events.
+    pub fn count_and_consume_key(&mut self, modifiers: Modifiers, key: Key) -> usize {
+        let mut count = 0usize;
+
+        self.events.retain(|event| {
+            let is_match = matches!(
+                event,
+                Event::Key {
+                    key: ev_key,
+                    modifiers: ev_mods,
+                    pressed: true,
+                    ..
+                } if *ev_key == key && ev_mods.matches(modifiers)
+            );
+
+            count += is_match as usize;
+
+            !is_match
+        });
+
+        count
+    }
+
+    /// Check for a key press. If found, `true` is returned and the key pressed is consumed, so that this will only return `true` once.
+    ///
+    /// Includes key-repeat events.
+    pub fn consume_key(&mut self, modifiers: Modifiers, key: Key) -> bool {
+        self.count_and_consume_key(modifiers, key) > 0
+    }
+
+    /// Check if the given shortcut has been pressed.
+    ///
+    /// If so, `true` is returned and the key pressed is consumed, so that this will only return `true` once.
+    ///
+    /// Includes key-repeat events.
+    pub fn consume_shortcut(&mut self, shortcut: &KeyboardShortcut) -> bool {
+        let KeyboardShortcut { modifiers, key } = *shortcut;
+        self.consume_key(modifiers, key)
+    }
+
     /// Was the given key pressed this frame?
+    ///
+    /// Includes key-repeat events.
     pub fn key_pressed(&self, desired_key: Key) -> bool {
         self.num_presses(desired_key) > 0
     }
 
-    /// How many times were the given key pressed this frame?
+    /// How many times was the given key pressed this frame?
+    ///
+    /// Includes key-repeat events.
     pub fn num_presses(&self, desired_key: Key) -> usize {
         self.events
             .iter()
             .filter(|event| {
                 matches!(
                     event,
-                    Event::Key {
-                        key,
-                        pressed: true,
-                        ..
-                    } if *key == desired_key
+                    Event::Key { key, pressed: true, .. }
+                    if *key == desired_key
                 )
             })
             .count()
@@ -228,7 +356,7 @@ impl InputState {
     /// Returns imprecision in points.
     #[inline(always)]
     pub fn aim_radius(&self) -> f32 {
-        // TODO: multiply by ~3 for touch inputs because fingers are fat
+        // TODO(emilk): multiply by ~3 for touch inputs because fingers are fat
         self.physical_pixel_size()
     }
 
@@ -237,18 +365,20 @@ impl InputState {
     ///
     /// ```
     /// # use egui::emath::Rot2;
-    /// # let ui = &mut egui::Ui::__test();
+    /// # egui::__run_test_ui(|ui| {
     /// let mut zoom = 1.0; // no zoom
     /// let mut rotation = 0.0; // no rotation
-    /// if let Some(multi_touch) = ui.input().multi_touch() {
+    /// let multi_touch = ui.input(|i| i.multi_touch());
+    /// if let Some(multi_touch) = multi_touch {
     ///     zoom *= multi_touch.zoom_delta;
     ///     rotation += multi_touch.rotation_delta;
     /// }
     /// let transform = zoom * Rot2::from_angle(rotation);
+    /// # });
     /// ```
     ///
     /// By far not all touch devices are supported, and the details depend on the `egui`
-    /// integration backend you are using. `egui_web` supports multi touch for most mobile
+    /// integration backend you are using. `eframe` web supports multi touch for most mobile
     /// devices, but not for a `Trackpad` on `MacOS`, for example. The backend has to be able to
     /// capture native touch events, but many browsers seem to pass such events only for touch
     /// _screens_, but not touch _pads._
@@ -272,7 +402,7 @@ impl InputState {
     }
 
     /// Scans `events` for device IDs of touch devices we have not seen before,
-    /// and creates a new `TouchState` for each such device.
+    /// and creates a new [`TouchState`] for each such device.
     fn create_touch_states_for_new_devices(&mut self, events: &[Event]) {
         for event in events {
             if let Event::Touch { device_id, .. } = event {
@@ -282,6 +412,33 @@ impl InputState {
             }
         }
     }
+
+    #[cfg(feature = "accesskit")]
+    pub fn accesskit_action_requests(
+        &self,
+        id: crate::Id,
+        action: accesskit::Action,
+    ) -> impl Iterator<Item = &accesskit::ActionRequest> {
+        let accesskit_id = id.accesskit_id();
+        self.events.iter().filter_map(move |event| {
+            if let Event::AccessKitActionRequest(request) = event {
+                if request.target == accesskit_id && request.action == action {
+                    return Some(request);
+                }
+            }
+            None
+        })
+    }
+
+    #[cfg(feature = "accesskit")]
+    pub fn has_accesskit_action_request(&self, id: crate::Id, action: accesskit::Action) -> bool {
+        self.accesskit_action_requests(id, action).next().is_some()
+    }
+
+    #[cfg(feature = "accesskit")]
+    pub fn num_accesskit_action_requests(&self, id: crate::Id, action: accesskit::Action) -> usize {
+        self.accesskit_action_requests(id, action).count()
+    }
 }
 
 // ----------------------------------------------------------------------------
@@ -290,9 +447,10 @@ impl InputState {
 #[derive(Clone, Debug, PartialEq)]
 pub(crate) struct Click {
     pub pos: Pos2,
-    pub button: PointerButton,
-    /// 1 or 2 (double-click)
+
+    /// 1 or 2 (double-click) or 3 (triple-click)
     pub count: u32,
+
     /// Allows you to check for e.g. shift-click
     pub modifiers: Modifiers,
 }
@@ -301,24 +459,36 @@ impl Click {
     pub fn is_double(&self) -> bool {
         self.count == 2
     }
+
+    pub fn is_triple(&self) -> bool {
+        self.count == 3
+    }
 }
 
 #[derive(Clone, Debug, PartialEq)]
 pub(crate) enum PointerEvent {
     Moved(Pos2),
-    Pressed(Pos2),
-    Released(Option<Click>),
+    Pressed {
+        position: Pos2,
+        button: PointerButton,
+    },
+    Released {
+        click: Option<Click>,
+        button: PointerButton,
+    },
 }
 
 impl PointerEvent {
     pub fn is_press(&self) -> bool {
-        matches!(self, PointerEvent::Pressed(_))
+        matches!(self, PointerEvent::Pressed { .. })
     }
+
     pub fn is_release(&self) -> bool {
-        matches!(self, PointerEvent::Released(_))
+        matches!(self, PointerEvent::Released { .. })
     }
+
     pub fn is_click(&self) -> bool {
-        matches!(self, PointerEvent::Released(Some(_click)))
+        matches!(self, PointerEvent::Released { click: Some(_), .. })
     }
 }
 
@@ -371,6 +541,10 @@ pub struct PointerState {
     /// Used to check for double-clicks.
     last_click_time: f64,
 
+    /// When did the pointer get click two clicks ago?
+    /// Used to check for triple-clicks.
+    last_last_click_time: f64,
+
     /// All button events that occurred this frame
     pub(crate) pointer_events: Vec<PointerEvent>,
 }
@@ -389,6 +563,7 @@ impl Default for PointerState {
             press_start_time: None,
             has_moved_too_much_for_a_click: false,
             last_click_time: std::f64::NEG_INFINITY,
+            last_last_click_time: std::f64::NEG_INFINITY,
             pointer_events: vec![],
         }
     }
@@ -443,20 +618,31 @@ impl PointerState {
                         self.press_origin = Some(pos);
                         self.press_start_time = Some(time);
                         self.has_moved_too_much_for_a_click = false;
-                        self.pointer_events.push(PointerEvent::Pressed(pos));
+                        self.pointer_events.push(PointerEvent::Pressed {
+                            position: pos,
+                            button,
+                        });
                     } else {
                         let clicked = self.could_any_button_be_click();
 
                         let click = if clicked {
                             let double_click =
                                 (time - self.last_click_time) < MAX_DOUBLE_CLICK_DELAY;
-                            let count = if double_click { 2 } else { 1 };
+                            let triple_click =
+                                (time - self.last_last_click_time) < (MAX_DOUBLE_CLICK_DELAY * 2.0);
+                            let count = if triple_click {
+                                3
+                            } else if double_click {
+                                2
+                            } else {
+                                1
+                            };
 
+                            self.last_last_click_time = self.last_click_time;
                             self.last_click_time = time;
 
                             Some(Click {
                                 pos,
-                                button,
                                 count,
                                 modifiers,
                             })
@@ -464,7 +650,8 @@ impl PointerState {
                             None
                         };
 
-                        self.pointer_events.push(PointerEvent::Released(click));
+                        self.pointer_events
+                            .push(PointerEvent::Released { click, button });
 
                         self.press_origin = None;
                         self.press_start_time = None;
@@ -592,6 +779,40 @@ impl PointerState {
         self.pointer_events.iter().any(|event| event.is_release())
     }
 
+    /// Was the button given pressed this frame?
+    pub fn button_pressed(&self, button: PointerButton) -> bool {
+        self.pointer_events
+            .iter()
+            .any(|event| matches!(event, &PointerEvent::Pressed{button: b, ..} if button == b))
+    }
+
+    /// Was the button given released this frame?
+    pub fn button_released(&self, button: PointerButton) -> bool {
+        self.pointer_events
+            .iter()
+            .any(|event| matches!(event, &PointerEvent::Released{button: b, ..} if button == b))
+    }
+
+    /// Was the primary button pressed this frame?
+    pub fn primary_pressed(&self) -> bool {
+        self.button_pressed(PointerButton::Primary)
+    }
+
+    /// Was the secondary button pressed this frame?
+    pub fn secondary_pressed(&self) -> bool {
+        self.button_pressed(PointerButton::Secondary)
+    }
+
+    /// Was the primary button released this frame?
+    pub fn primary_released(&self) -> bool {
+        self.button_released(PointerButton::Primary)
+    }
+
+    /// Was the secondary button released this frame?
+    pub fn secondary_released(&self) -> bool {
+        self.button_released(PointerButton::Secondary)
+    }
+
     /// Is any pointer button currently down?
     pub fn any_down(&self) -> bool {
         self.down.iter().any(|&down| down)
@@ -602,17 +823,48 @@ impl PointerState {
         self.pointer_events.iter().any(|event| event.is_click())
     }
 
-    // /// Was this button pressed (`!down -> down`) this frame?
-    // /// This can sometimes return `true` even if `any_down() == false`
-    // /// because a press can be shorted than one frame.
-    // pub fn button_pressed(&self, button: PointerButton) -> bool {
-    //     self.pointer_events.iter().any(|event| event.is_press())
-    // }
+    /// Was the button given clicked this frame?
+    pub fn button_clicked(&self, button: PointerButton) -> bool {
+        self.pointer_events
+            .iter()
+            .any(|event| matches!(event, &PointerEvent::Pressed { button: b, .. } if button == b))
+    }
 
-    // /// Was this button released (`down -> !down`) this frame?
-    // pub fn button_released(&self, button: PointerButton) -> bool {
-    //     self.pointer_events.iter().any(|event| event.is_release())
-    // }
+    /// Was the button given double clicked this frame?
+    pub fn button_double_clicked(&self, button: PointerButton) -> bool {
+        self.pointer_events.iter().any(|event| {
+            matches!(
+                &event,
+                PointerEvent::Released {
+                    click: Some(click),
+                    button: b,
+                } if *b == button && click.is_double()
+            )
+        })
+    }
+
+    /// Was the button given triple clicked this frame?
+    pub fn button_triple_clicked(&self, button: PointerButton) -> bool {
+        self.pointer_events.iter().any(|event| {
+            matches!(
+                &event,
+                PointerEvent::Released {
+                    click: Some(click),
+                    button: b,
+                } if *b == button && click.is_triple()
+            )
+        })
+    }
+
+    /// Was the primary button clicked this frame?
+    pub fn primary_clicked(&self) -> bool {
+        self.button_clicked(PointerButton::Primary)
+    }
+
+    /// Was the secondary button clicked this frame?
+    pub fn secondary_clicked(&self) -> bool {
+        self.button_clicked(PointerButton::Secondary)
+    }
 
     /// Is this button currently down?
     #[inline(always)]
@@ -666,17 +918,25 @@ impl InputState {
             pointer,
             touch_states,
             scroll_delta,
+            zoom_factor_delta,
             screen_rect,
             pixels_per_point,
+            max_texture_side,
             time,
             unstable_dt,
             predicted_dt,
+            stable_dt,
             modifiers,
             keys_down,
             events,
         } = self;
 
-        ui.style_mut().body_text_style = epaint::TextStyle::Monospace;
+        ui.style_mut()
+            .text_styles
+            .get_mut(&crate::TextStyle::Body)
+            .unwrap()
+            .family = crate::FontFamily::Monospace;
+
         ui.collapsing("Raw Input", |ui| raw.ui(ui));
 
         crate::containers::CollapsingHeader::new("🖱 Pointer")
@@ -687,26 +947,35 @@ impl InputState {
 
         for (device_id, touch_state) in touch_states {
             ui.collapsing(format!("Touch State [device {}]", device_id.0), |ui| {
-                touch_state.ui(ui)
+                touch_state.ui(ui);
             });
         }
 
         ui.label(format!("scroll_delta: {:?} points", scroll_delta));
+        ui.label(format!("zoom_factor_delta: {:4.2}x", zoom_factor_delta));
         ui.label(format!("screen_rect: {:?} points", screen_rect));
         ui.label(format!(
-            "{:?} physical pixels for each logical point",
+            "{} physical pixels for each logical point",
             pixels_per_point
         ));
+        ui.label(format!(
+            "max texture size (on each side): {}",
+            max_texture_side
+        ));
         ui.label(format!("time: {:.3} s", time));
         ui.label(format!(
             "time since previous frame: {:.1} ms",
             1e3 * unstable_dt
         ));
         ui.label(format!("predicted_dt: {:.1} ms", 1e3 * predicted_dt));
+        ui.label(format!("stable_dt:    {:.1} ms", 1e3 * stable_dt));
         ui.label(format!("modifiers: {:#?}", modifiers));
         ui.label(format!("keys_down: {:?}", keys_down));
-        ui.label(format!("events: {:?}", events))
-            .on_hover_text("key presses etc");
+        ui.scope(|ui| {
+            ui.set_min_height(150.0);
+            ui.label(format!("events: {:#?}", events))
+                .on_hover_text("key presses etc");
+        });
     }
 }
 
@@ -724,6 +993,7 @@ impl PointerState {
             press_start_time,
             has_moved_too_much_for_a_click,
             last_click_time,
+            last_last_click_time,
             pointer_events,
         } = self;
 
@@ -742,6 +1012,7 @@ impl PointerState {
             has_moved_too_much_for_a_click
         ));
         ui.label(format!("last_click_time: {:#?}", last_click_time));
+        ui.label(format!("last_last_click_time: {:#?}", last_last_click_time));
         ui.label(format!("pointer_events: {:?}", pointer_events));
     }
 }

crates/egui/src/input_state/touch_state.rs

@@ -7,6 +7,7 @@ use crate::{
 };
 
 /// All you probably need to know about a multi-touch gesture.
+#[derive(Clone, Copy, Debug, PartialEq)]
 pub struct MultiTouchInfo {
     /// Point in time when the gesture started.
     pub start_time: f64,
@@ -15,7 +16,7 @@ pub struct MultiTouchInfo {
     pub start_pos: Pos2,
 
     /// Number of touches (fingers) on the surface. Value is ≥ 2 since for a single touch no
-    /// `MultiTouchInfo` is created.
+    /// [`MultiTouchInfo`] is created.
     pub num_touches: usize,
 
     /// Proportional zoom factor (pinch gesture).
@@ -65,8 +66,9 @@ pub struct MultiTouchInfo {
 #[derive(Clone)]
 pub(crate) struct TouchState {
     /// Technical identifier of the touch device. This is used to identify relevant touch events
-    /// for this `TouchState` instance.
+    /// for this [`TouchState`] instance.
     device_id: TouchDeviceId,
+
     /// Active touches, if any.
     ///
     /// TouchId is the unique identifier of the touch. It is valid as long as the finger/pen touches the surface. The
@@ -74,6 +76,7 @@ pub(crate) struct TouchState {
     ///
     /// Refer to [`ActiveTouch`].
     active_touches: BTreeMap<TouchId, ActiveTouch>,
+
     /// If a gesture has been recognized (i.e. when exactly two fingers touch the surface), this
     /// holds state information
     gesture_state: Option<GestureState>,
@@ -93,10 +96,14 @@ struct GestureState {
 struct DynGestureState {
     /// used for proportional zooming
     avg_distance: f32,
+
     /// used for non-proportional zooming
     avg_abs_distance2: Vec2,
+
     avg_pos: Pos2,
+
     avg_force: f32,
+
     heading: f32,
 }
 
@@ -106,6 +113,7 @@ struct DynGestureState {
 struct ActiveTouch {
     /// Current position of this touch, in device coordinates (not necessarily screen position)
     pos: Pos2,
+
     /// Current force of the touch. A value in the interval [0.0 .. 1.0]
     ///
     /// Note that a value of 0.0 either indicates a very light touch, or it means that the device
@@ -285,7 +293,7 @@ impl TouchState {
 impl Debug for TouchState {
     // This outputs less clutter than `#[derive(Debug)]`:
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        for (id, touch) in self.active_touches.iter() {
+        for (id, touch) in &self.active_touches {
             f.write_fmt(format_args!("#{:?}: {:#?}\n", id, touch))?;
         }
         f.write_fmt(format_args!("gesture: {:#?}\n", self.gesture_state))?;

crates/egui/src/introspection.rs

@@ -0,0 +1,198 @@
+//! Showing UI:s for egui/epaint types.
+use crate::*;
+
+pub fn font_family_ui(ui: &mut Ui, font_family: &mut FontFamily) {
+    let families = ui.fonts(|f| f.families());
+    ui.horizontal(|ui| {
+        for alternative in families {
+            let text = alternative.to_string();
+            ui.radio_value(font_family, alternative, text);
+        }
+    });
+}
+
+pub fn font_id_ui(ui: &mut Ui, font_id: &mut FontId) {
+    let families = ui.fonts(|f| f.families());
+    ui.horizontal(|ui| {
+        ui.add(Slider::new(&mut font_id.size, 4.0..=40.0).max_decimals(1));
+        for alternative in families {
+            let text = alternative.to_string();
+            ui.radio_value(&mut font_id.family, alternative, text);
+        }
+    });
+}
+
+// Show font texture in demo Ui
+pub(crate) fn font_texture_ui(ui: &mut Ui, [width, height]: [usize; 2]) -> Response {
+    ui.vertical(|ui| {
+        let color = if ui.visuals().dark_mode {
+            Color32::WHITE
+        } else {
+            Color32::BLACK
+        };
+
+        ui.label(format!(
+            "Texture size: {} x {} (hover to zoom)",
+            width, height
+        ));
+        if width <= 1 || height <= 1 {
+            return;
+        }
+        let mut size = vec2(width as f32, height as f32);
+        if size.x > ui.available_width() {
+            size *= ui.available_width() / size.x;
+        }
+        let (rect, response) = ui.allocate_at_least(size, Sense::hover());
+        let mut mesh = Mesh::default();
+        mesh.add_rect_with_uv(rect, [pos2(0.0, 0.0), pos2(1.0, 1.0)].into(), color);
+        ui.painter().add(Shape::mesh(mesh));
+
+        let (tex_w, tex_h) = (width as f32, height as f32);
+
+        response
+            .on_hover_cursor(CursorIcon::ZoomIn)
+            .on_hover_ui_at_pointer(|ui| {
+                if let Some(pos) = ui.ctx().pointer_latest_pos() {
+                    let (_id, zoom_rect) = ui.allocate_space(vec2(128.0, 128.0));
+                    let u = remap_clamp(pos.x, rect.x_range(), 0.0..=tex_w);
+                    let v = remap_clamp(pos.y, rect.y_range(), 0.0..=tex_h);
+
+                    let texel_radius = 32.0;
+                    let u = u.at_least(texel_radius).at_most(tex_w - texel_radius);
+                    let v = v.at_least(texel_radius).at_most(tex_h - texel_radius);
+
+                    let uv_rect = Rect::from_min_max(
+                        pos2((u - texel_radius) / tex_w, (v - texel_radius) / tex_h),
+                        pos2((u + texel_radius) / tex_w, (v + texel_radius) / tex_h),
+                    );
+                    let mut mesh = Mesh::default();
+                    mesh.add_rect_with_uv(zoom_rect, uv_rect, color);
+                    ui.painter().add(Shape::mesh(mesh));
+                }
+            });
+    })
+    .response
+}
+
+impl Widget for &epaint::stats::PaintStats {
+    fn ui(self, ui: &mut Ui) -> Response {
+        ui.vertical(|ui| {
+            ui.label(
+                "egui generates intermediate level shapes like circles and text. \
+                These are later tessellated into triangles.",
+            );
+            ui.add_space(10.0);
+
+            ui.style_mut().override_text_style = Some(TextStyle::Monospace);
+
+            let epaint::stats::PaintStats {
+                shapes,
+                shape_text,
+                shape_path,
+                shape_mesh,
+                shape_vec,
+                num_callbacks,
+                text_shape_vertices,
+                text_shape_indices,
+                clipped_primitives,
+                vertices,
+                indices,
+            } = self;
+
+            ui.label("Intermediate:");
+            label(ui, shapes, "shapes").on_hover_text("Boxes, circles, etc");
+            ui.horizontal(|ui| {
+                label(ui, shape_text, "text");
+                ui.small("(mostly cached)");
+            });
+            label(ui, shape_path, "paths");
+            label(ui, shape_mesh, "nested meshes");
+            label(ui, shape_vec, "nested shapes");
+            ui.label(format!("{:6} callbacks", num_callbacks));
+            ui.add_space(10.0);
+
+            ui.label("Text shapes:");
+            label(ui, text_shape_vertices, "vertices");
+            label(ui, text_shape_indices, "indices")
+                .on_hover_text("Three 32-bit indices per triangles");
+            ui.add_space(10.0);
+
+            ui.label("Tessellated (and culled):");
+            label(ui, clipped_primitives, "primitives lists")
+                .on_hover_text("Number of separate clip rectangles");
+            label(ui, vertices, "vertices");
+            label(ui, indices, "indices").on_hover_text("Three 32-bit indices per triangles");
+            ui.add_space(10.0);
+
+            // ui.label("Total:");
+            // ui.label(self.total().format(""));
+        })
+        .response
+    }
+}
+
+fn label(ui: &mut Ui, alloc_info: &epaint::stats::AllocInfo, what: &str) -> Response {
+    ui.add(Label::new(alloc_info.format(what)).wrap(false))
+}
+
+impl Widget for &mut epaint::TessellationOptions {
+    fn ui(self, ui: &mut Ui) -> Response {
+        ui.vertical(|ui| {
+            let epaint::TessellationOptions {
+                feathering,
+                feathering_size_in_pixels,
+                coarse_tessellation_culling,
+                prerasterized_discs,
+                round_text_to_pixels,
+                debug_paint_clip_rects,
+                debug_paint_text_rects,
+                debug_ignore_clip_rects,
+                bezier_tolerance,
+                epsilon: _,
+            } = self;
+
+            ui.checkbox(feathering, "Feathering (antialias)")
+                .on_hover_text("Apply feathering to smooth out the edges of shapes. Turn off for small performance gain.");
+            let feathering_slider = crate::Slider::new(feathering_size_in_pixels, 0.0..=10.0)
+                .smallest_positive(0.1)
+                .logarithmic(true)
+                .text("Feathering size in pixels");
+            ui.add_enabled(*feathering, feathering_slider);
+
+            ui.checkbox(prerasterized_discs, "Speed up filled circles with pre-rasterization");
+
+            ui.add(
+                crate::widgets::Slider::new(bezier_tolerance, 0.0001..=10.0)
+                    .logarithmic(true)
+                    .show_value(true)
+                    .text("Spline Tolerance"),
+            );
+            ui.collapsing("debug", |ui| {
+                ui.checkbox(
+                    coarse_tessellation_culling,
+                    "Do coarse culling in the tessellator",
+                );
+                ui.checkbox(round_text_to_pixels, "Align text positions to pixel grid")
+                    .on_hover_text("Most text already is, so don't expect to see a large change.");
+
+                ui.checkbox(debug_ignore_clip_rects, "Ignore clip rectangles");
+                ui.checkbox(debug_paint_clip_rects, "Paint clip rectangles");
+                ui.checkbox(debug_paint_text_rects, "Paint text bounds");
+            });
+        })
+        .response
+    }
+}
+
+impl Widget for &memory::Interaction {
+    fn ui(self, ui: &mut Ui) -> Response {
+        ui.vertical(|ui| {
+            ui.label(format!("click_id: {:?}", self.click_id));
+            ui.label(format!("drag_id: {:?}", self.drag_id));
+            ui.label(format!("drag_is_window: {:?}", self.drag_is_window));
+            ui.label(format!("click_interest: {:?}", self.click_interest));
+            ui.label(format!("drag_interest: {:?}", self.drag_interest));
+        })
+        .response
+    }
+}

crates/egui/src/layers.rs

@@ -2,9 +2,7 @@
 //! are sometimes painted behind or in front of other things.
 
 use crate::{Id, *};
-use epaint::mutex::Mutex;
 use epaint::{ClippedShape, Shape};
-use std::sync::Arc;
 
 /// Different layer categories
 #[derive(Clone, Copy, Debug, Hash, Eq, PartialEq, Ord, PartialOrd)]
@@ -12,19 +10,25 @@ use std::sync::Arc;
 pub enum Order {
     /// Painted behind all floating windows
     Background,
+
     /// Special layer between panels and windows
     PanelResizeLine,
+
     /// Normal moveable windows that you reorder by click
     Middle,
+
     /// Popups, menus etc that should always be painted on top of windows
     /// Foreground objects can also have tooltips
     Foreground,
+
     /// Things floating on top of everything else, like tooltips.
     /// You cannot interact with these.
     Tooltip,
+
     /// Debug layer, always painted last / on top
     Debug,
 }
+
 impl Order {
     const COUNT: usize = 6;
     const ALL: [Order; Self::COUNT] = [
@@ -35,6 +39,7 @@ impl Order {
         Self::Tooltip,
         Self::Debug,
     ];
+    pub const TOP: Self = Self::Debug;
 
     #[inline(always)]
     pub fn allow_interaction(&self) -> bool {
@@ -105,7 +110,7 @@ impl LayerId {
 }
 
 /// A unique identifier of a specific [`Shape`] in a [`PaintList`].
-#[derive(Clone, Copy, PartialEq)]
+#[derive(Clone, Copy, PartialEq, Eq)]
 pub struct ShapeIdx(usize);
 
 /// A list of [`Shape`]s paired with a clip rectangle.
@@ -126,17 +131,20 @@ impl PaintList {
         idx
     }
 
-    pub fn extend(&mut self, clip_rect: Rect, mut shapes: Vec<Shape>) {
-        self.0
-            .extend(shapes.drain(..).map(|shape| ClippedShape(clip_rect, shape)))
+    pub fn extend<I: IntoIterator<Item = Shape>>(&mut self, clip_rect: Rect, shapes: I) {
+        self.0.extend(
+            shapes
+                .into_iter()
+                .map(|shape| ClippedShape(clip_rect, shape)),
+        );
     }
 
     /// Modify an existing [`Shape`].
     ///
     /// Sometimes you want to paint a frame behind some contents, but don't know how large the frame needs to be
-    /// until the contents have been added, and therefor also painted to the `PaintList`.
+    /// until the contents have been added, and therefor also painted to the [`PaintList`].
     ///
-    /// The solution is to allocate a `Shape` using `let idx = paint_list.add(cr, Shape::Noop);`
+    /// The solution is to allocate a [`Shape`] using `let idx = paint_list.add(cr, Shape::Noop);`
     /// and then later setting it using `paint_list.set(idx, cr, frame);`.
     #[inline(always)]
     pub fn set(&mut self, idx: ShapeIdx, clip_rect: Rect, shape: Shape) {
@@ -153,10 +161,10 @@ impl PaintList {
 }
 
 #[derive(Clone, Default)]
-pub(crate) struct GraphicLayers([IdMap<Arc<Mutex<PaintList>>>; Order::COUNT]);
+pub(crate) struct GraphicLayers([IdMap<PaintList>; Order::COUNT]);
 
 impl GraphicLayers {
-    pub fn list(&mut self, layer_id: LayerId) -> &Arc<Mutex<PaintList>> {
+    pub fn list(&mut self, layer_id: LayerId) -> &mut PaintList {
         self.0[layer_id.order as usize]
             .entry(layer_id.id)
             .or_default()
@@ -171,20 +179,20 @@ impl GraphicLayers {
             // If a layer is empty at the start of the frame
             // then nobody has added to it, and it is old and defunct.
             // Free it to save memory:
-            order_map.retain(|_, list| !list.lock().is_empty());
+            order_map.retain(|_, list| !list.is_empty());
 
             // First do the layers part of area_order:
             for layer_id in area_order {
                 if layer_id.order == order {
                     if let Some(list) = order_map.get_mut(&layer_id.id) {
-                        all_shapes.append(&mut list.lock().0);
+                        all_shapes.append(&mut list.0);
                     }
                 }
             }
 
             // Also draw areas that are missing in `area_order`:
             for shapes in order_map.values_mut() {
-                all_shapes.append(&mut shapes.lock().0);
+                all_shapes.append(&mut shapes.0);
             }
         }
 

crates/egui/src/layout.rs

@@ -7,16 +7,16 @@ use std::f32::INFINITY;
 /// It is what is used and updated by [`Layout`] when adding new widgets.
 #[derive(Clone, Copy, Debug)]
 pub(crate) struct Region {
-    /// This is the minimal size of the `Ui`.
+    /// This is the minimal size of the [`Ui`](crate::Ui).
     /// When adding new widgets, this will generally expand.
     ///
     /// Always finite.
     ///
     /// The bounding box of all child widgets, but not necessarily a tight bounding box
-    /// since `Ui` can start with a non-zero min_rect size.
+    /// since [`Ui`](crate::Ui) can start with a non-zero min_rect size.
     pub min_rect: Rect,
 
-    /// The maximum size of this `Ui`. This is a *soft max*
+    /// The maximum size of this [`Ui`](crate::Ui). This is a *soft max*
     /// meaning new widgets will *try* not to expand beyond it,
     /// but if they have to, they will.
     ///
@@ -74,10 +74,9 @@ impl Region {
 
 // ----------------------------------------------------------------------------
 
-/// Layout direction, one of `LeftToRight`, `RightToLeft`, `TopDown`, `BottomUp`.
-#[derive(Clone, Copy, Debug, PartialEq)]
+/// Layout direction, one of [`LeftToRight`](Direction::LeftToRight), [`RightToLeft`](Direction::RightToLeft), [`TopDown`](Direction::TopDown), [`BottomUp`](Direction::BottomUp).
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
 #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
-#[cfg_attr(feature = "serde", serde(rename_all = "snake_case"))]
 pub enum Direction {
     LeftToRight,
     RightToLeft,
@@ -108,99 +107,112 @@ impl Direction {
 /// The layout of a [`Ui`][`crate::Ui`], e.g. "vertical & centered".
 ///
 /// ```
-/// # let ui = &mut egui::Ui::__test();
-/// ui.with_layout(egui::Layout::right_to_left(), |ui| {
+/// # egui::__run_test_ui(|ui| {
+/// ui.with_layout(egui::Layout::right_to_left(egui::Align::TOP), |ui| {
 ///     ui.label("world!");
 ///     ui.label("Hello");
 /// });
+/// # });
 /// ```
-#[derive(Clone, Copy, Debug, PartialEq)]
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
 // #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
 pub struct Layout {
     /// Main axis direction
-    main_dir: Direction,
+    pub main_dir: Direction,
 
     /// If true, wrap around when reading the end of the main direction.
     /// For instance, for `main_dir == Direction::LeftToRight` this will
     /// wrap to a new row when we reach the right side of the `max_rect`.
-    main_wrap: bool,
+    pub main_wrap: bool,
 
     /// How to align things on the main axis.
-    main_align: Align,
+    pub main_align: Align,
 
     /// Justify the main axis?
-    main_justify: bool,
+    pub main_justify: bool,
 
     /// How to align things on the cross axis.
     /// For vertical layouts: put things to left, center or right?
     /// For horizontal layouts: put things to top, center or bottom?
-    cross_align: Align,
+    pub cross_align: Align,
 
     /// Justify the cross axis?
     /// For vertical layouts justify mean all widgets get maximum width.
     /// For horizontal layouts justify mean all widgets get maximum height.
-    cross_justify: bool,
+    pub cross_justify: bool,
 }
 
 impl Default for Layout {
     fn default() -> Self {
-        // TODO: Get from `Style` instead.
+        // TODO(emilk): Get from `Style` instead.
         Self::top_down(Align::LEFT) // This is a very euro-centric default.
     }
 }
 
 /// ## Constructors
 impl Layout {
+    /// Place elements horizontally, left to right.
+    ///
+    /// The `valign` parameter controls how to align elements vertically.
     #[inline(always)]
-    pub fn left_to_right() -> Self {
+    pub fn left_to_right(valign: Align) -> Self {
         Self {
             main_dir: Direction::LeftToRight,
             main_wrap: false,
             main_align: Align::Center, // looks best to e.g. center text within a button
             main_justify: false,
-            cross_align: Align::Center,
+            cross_align: valign,
             cross_justify: false,
         }
     }
 
+    /// Place elements horizontally, right to left.
+    ///
+    /// The `valign` parameter controls how to align elements vertically.
     #[inline(always)]
-    pub fn right_to_left() -> Self {
+    pub fn right_to_left(valign: Align) -> Self {
         Self {
             main_dir: Direction::RightToLeft,
             main_wrap: false,
             main_align: Align::Center, // looks best to e.g. center text within a button
             main_justify: false,
-            cross_align: Align::Center,
+            cross_align: valign,
             cross_justify: false,
         }
     }
 
+    /// Place elements vertically, top to bottom.
+    ///
+    /// Use the provided horizontal alignment.
     #[inline(always)]
-    pub fn top_down(cross_align: Align) -> Self {
+    pub fn top_down(halign: Align) -> Self {
         Self {
             main_dir: Direction::TopDown,
             main_wrap: false,
             main_align: Align::Center, // looks best to e.g. center text within a button
             main_justify: false,
-            cross_align,
+            cross_align: halign,
             cross_justify: false,
         }
     }
 
-    /// Top-down layout justifed so that buttons etc fill the full available width.
+    /// Top-down layout justified so that buttons etc fill the full available width.
     #[inline(always)]
-    pub fn top_down_justified(cross_align: Align) -> Self {
-        Self::top_down(cross_align).with_cross_justify(true)
+    pub fn top_down_justified(halign: Align) -> Self {
+        Self::top_down(halign).with_cross_justify(true)
     }
 
+    /// Place elements vertically, bottom up.
+    ///
+    /// Use the provided horizontal alignment.
     #[inline(always)]
-    pub fn bottom_up(cross_align: Align) -> Self {
+    pub fn bottom_up(halign: Align) -> Self {
         Self {
             main_dir: Direction::BottomUp,
             main_wrap: false,
             main_align: Align::Center, // looks best to e.g. center text within a button
             main_justify: false,
-            cross_align,
+            cross_align: halign,
             cross_justify: false,
         }
     }
@@ -217,6 +229,10 @@ impl Layout {
         }
     }
 
+    /// For when you want to add a single widget to a layout, and that widget
+    /// should use up all available space.
+    ///
+    /// Only one widget may be added to the inner `Ui`!
     #[inline(always)]
     pub fn centered_and_justified(main_dir: Direction) -> Self {
         Self {
@@ -229,11 +245,25 @@ impl Layout {
         }
     }
 
+    /// Wrap widgets when we overflow the main axis?
+    ///
+    /// For instance, for left-to-right layouts, setting this to `true` will
+    /// put widgets on a new row if we would overflow the right side of [`crate::Ui::max_rect`].
     #[inline(always)]
     pub fn with_main_wrap(self, main_wrap: bool) -> Self {
         Self { main_wrap, ..self }
     }
 
+    /// The alignment to use on the main axis.
+    #[inline(always)]
+    pub fn with_main_align(self, main_align: Align) -> Self {
+        Self { main_align, ..self }
+    }
+
+    /// The alignment to use on the cross axis.
+    ///
+    /// The "cross" axis is the one orthogonal to the main axis.
+    /// For instance: in left-to-right layout, the main axis is horizontal and the cross axis is vertical.
     #[inline(always)]
     pub fn with_cross_align(self, cross_align: Align) -> Self {
         Self {
@@ -242,6 +272,9 @@ impl Layout {
         }
     }
 
+    /// Justify widgets on the main axis?
+    ///
+    /// Justify here means "take up all available space".
     #[inline(always)]
     pub fn with_main_justify(self, main_justify: bool) -> Self {
         Self {
@@ -250,6 +283,12 @@ impl Layout {
         }
     }
 
+    /// Justify widgets along the cross axis?
+    ///
+    /// Justify here means "take up all available space".
+    ///
+    /// The "cross" axis is the one orthogonal to the main axis.
+    /// For instance: in left-to-right layout, the main axis is horizontal and the cross axis is vertical.
     #[inline(always)]
     pub fn with_cross_justify(self, cross_justify: bool) -> Self {
         Self {
@@ -473,7 +512,7 @@ impl Layout {
     }
 
     /// Returns where to put the next widget that is of the given size.
-    /// The returned `frame_rect` `Rect` will always be justified along the cross axis.
+    /// The returned `frame_rect` [`Rect`] will always be justified along the cross axis.
     /// This is what you then pass to `advance_after_rects`.
     /// Use `justify_and_align` to get the inner `widget_rect`.
     pub(crate) fn next_frame(&self, region: &Region, child_size: Vec2, spacing: Vec2) -> Rect {
@@ -772,32 +811,30 @@ impl Layout {
         let cursor = region.cursor;
         let next_pos = self.next_widget_position(region);
 
-        let align;
-
         let l = 64.0;
 
-        match self.main_dir {
+        let align = match self.main_dir {
             Direction::LeftToRight => {
                 painter.line_segment([cursor.left_top(), cursor.left_bottom()], stroke);
                 painter.arrow(next_pos, vec2(l, 0.0), stroke);
-                align = Align2([Align::LEFT, self.vertical_align()]);
+                Align2([Align::LEFT, self.vertical_align()])
             }
             Direction::RightToLeft => {
                 painter.line_segment([cursor.right_top(), cursor.right_bottom()], stroke);
                 painter.arrow(next_pos, vec2(-l, 0.0), stroke);
-                align = Align2([Align::RIGHT, self.vertical_align()]);
+                Align2([Align::RIGHT, self.vertical_align()])
             }
             Direction::TopDown => {
                 painter.line_segment([cursor.left_top(), cursor.right_top()], stroke);
                 painter.arrow(next_pos, vec2(0.0, l), stroke);
-                align = Align2([self.horizontal_align(), Align::TOP]);
+                Align2([self.horizontal_align(), Align::TOP])
             }
             Direction::BottomUp => {
                 painter.line_segment([cursor.left_bottom(), cursor.right_bottom()], stroke);
                 painter.arrow(next_pos, vec2(0.0, -l), stroke);
-                align = Align2([self.horizontal_align(), Align::BOTTOM]);
+                Align2([self.horizontal_align(), Align::BOTTOM])
             }
-        }
+        };
 
         painter.debug_text(next_pos, align, stroke.color, text);
     }

crates/egui/src/lib.rs

@@ -1,20 +1,20 @@
 //! `egui`:  an easy-to-use GUI in pure Rust!
 //!
-//! Try the live web demo: <https://emilk.github.io/egui/index.html>. Read more about egui at <https://github.com/emilk/egui>.
+//! Try the live web demo: <https://www.egui.rs/#demo>. Read more about egui at <https://github.com/emilk/egui>.
 //!
 //! `egui` is in heavy development, with each new version having breaking changes.
-//! You need to have rust 1.54.0 or later to use `egui`.
+//! You need to have rust 1.62.0 or later to use `egui`.
 //!
 //! To quickly get started with egui, you can take a look at [`eframe_template`](https://github.com/emilk/eframe_template)
 //! which uses [`eframe`](https://docs.rs/eframe).
 //!
-//! To create a GUI using egui you first need a [`CtxRef`] (by convention referred to by `ctx`).
+//! To create a GUI using egui you first need a [`Context`] (by convention referred to by `ctx`).
 //! Then you add a [`Window`] or a [`SidePanel`] to get a [`Ui`], which is what you'll be using to add all the buttons and labels that you need.
 //!
 //!
 //! # Using egui
 //!
-//! To see what is possible to build with egui you can check out the online demo at <https://emilk.github.io/egui/#demo>.
+//! To see what is possible to build with egui you can check out the online demo at <https://www.egui.rs/#demo>.
 //!
 //! If you like the "learning by doing" approach, clone <https://github.com/emilk/eframe_template> and get started using egui right away.
 //!
@@ -45,21 +45,21 @@
 //! get access to an [`Ui`] where you can put widgets. For example:
 //!
 //! ```
-//! # let mut ctx = egui::CtxRef::default();
-//! # ctx.begin_frame(Default::default());
+//! # egui::__run_test_ctx(|ctx| {
 //! egui::CentralPanel::default().show(&ctx, |ui| {
 //!     ui.add(egui::Label::new("Hello World!"));
 //!     ui.label("A shorter and more convenient way to add a label.");
 //!     if ui.button("Click me").clicked() {
-//!         /* take some action here */
+//!         // take some action here
 //!     }
 //! });
+//! # });
 //! ```
 //!
 //! ### Quick start
 //!
-//! ``` rust
-//! # let ui = &mut egui::Ui::__test();
+//! ```
+//! # egui::__run_test_ui(|ui| {
 //! # let mut my_string = String::new();
 //! # let mut my_boolean = true;
 //! # let mut my_f32 = 42.0;
@@ -74,7 +74,7 @@
 //!
 //! #[derive(PartialEq)]
 //! enum Enum { First, Second, Third }
-//! let mut my_enum = Enum::First;
+//! # let mut my_enum = Enum::First;
 //! ui.horizontal(|ui| {
 //!     ui.radio_value(&mut my_enum, Enum::First, "First");
 //!     ui.radio_value(&mut my_enum, Enum::Second, "Second");
@@ -89,6 +89,7 @@
 //! ui.collapsing("Click to see what is hidden!", |ui| {
 //!     ui.label("Not much, as it turns out");
 //! });
+//! # });
 //! ```
 //!
 //! ## Conventions
@@ -109,27 +110,26 @@
 //! To write your own integration for egui you need to do this:
 //!
 //! ``` no_run
-//! # fn handle_output(_: egui::Output) {}
-//! # fn paint(_: Vec<egui::ClippedMesh>) {}
+//! # fn handle_platform_output(_: egui::PlatformOutput) {}
 //! # fn gather_input() -> egui::RawInput { egui::RawInput::default() }
-//! let mut ctx = egui::CtxRef::default();
+//! # fn paint(textures_detla: egui::TexturesDelta, _: Vec<egui::ClippedPrimitive>) {}
+//! let mut ctx = egui::Context::default();
 //!
 //! // Game loop:
 //! loop {
 //!     let raw_input: egui::RawInput = gather_input();
-//!     ctx.begin_frame(raw_input);
 //!
-//!     egui::CentralPanel::default().show(&ctx, |ui| {
-//!         ui.label("Hello world!");
-//!         if ui.button("Click me").clicked() {
-//!             /* take some action here */
-//!         }
+//!     let full_output = ctx.run(raw_input, |ctx| {
+//!         egui::CentralPanel::default().show(&ctx, |ui| {
+//!             ui.label("Hello world!");
+//!             if ui.button("Click me").clicked() {
+//!                 // take some action here
+//!             }
+//!         });
 //!     });
-//!
-//!     let (output, shapes) = ctx.end_frame();
-//!     let clipped_meshes = ctx.tessellate(shapes); // create triangles to paint
-//!     handle_output(output);
-//!     paint(clipped_meshes);
+//!     handle_platform_output(full_output.platform_output);
+//!     let clipped_primitives = ctx.tessellate(full_output.shapes); // create triangles to paint
+//!     paint(full_output.textures_delta, clipped_primitives);
 //! }
 //! ```
 //!
@@ -141,10 +141,11 @@
 //! Here is an example to illustrate it:
 //!
 //! ```
-//! # let ui = &mut egui::Ui::__test();
+//! # egui::__run_test_ui(|ui| {
 //! if ui.button("click me").clicked() {
 //!     take_action()
 //! }
+//! # });
 //! # fn take_action() {}
 //! ```
 //!
@@ -156,27 +157,48 @@
 //! * check if the mouse is hovering or clicking that location
 //! * chose button colors based on if it is being hovered or clicked
 //! * add a [`Shape::Rect`] and [`Shape::Text`] to the list of shapes to be painted later this frame
-//! * return a [`Response`] with the `clicked` member so the user can check for interactions
+//! * return a [`Response`] with the [`clicked`](`Response::clicked`) member so the user can check for interactions
 //!
 //! There is no button being created and stored somewhere.
 //! The only output of this call is some colored shapes, and a [`Response`].
 //!
+//! Similarly, consider this code:
+//!
+//! ```
+//! # egui::__run_test_ui(|ui| {
+//! # let mut value: f32 = 0.0;
+//! ui.add(egui::Slider::new(&mut value, 0.0..=100.0).text("My value"));
+//! # });
+//! ```
+//!
+//! Here egui will read `value` to display the slider, then look if the mouse is dragging the slider and if so change the `value`.
+//! Note that `egui` does not store the slider value for you - it only displays the current value, and changes it
+//! by how much the slider has been dragged in the previous few milliseconds.
+//! This means it is responsibility of the egui user to store the state (`value`) so that it persists between frames.
+//!
+//! It can be useful to read the code for the toggle switch example widget to get a better understanding
+//! of how egui works: <https://github.com/emilk/egui/blob/master/crates/egui_demo_lib/src/demo/toggle_switch.rs>.
+//!
 //! Read more about the pros and cons of immediate mode at <https://github.com/emilk/egui#why-immediate-mode>.
 //!
+//! # Misc
+//!
 //! ## How widgets works
 //!
 //! ```
-//! # let ui = &mut egui::Ui::__test();
+//! # egui::__run_test_ui(|ui| {
 //! if ui.button("click me").clicked() { take_action() }
+//! # });
 //! # fn take_action() {}
 //! ```
 //!
 //! is short for
 //!
 //! ```
-//! # let ui = &mut egui::Ui::__test();
+//! # egui::__run_test_ui(|ui| {
 //! let button = egui::Button::new("click me");
 //! if ui.add(button).clicked() { take_action() }
+//! # });
 //! # fn take_action() {}
 //! ```
 //!
@@ -184,10 +206,11 @@
 //!
 //! ```
 //! # use egui::Widget;
-//! # let ui = &mut egui::Ui::__test();
+//! # egui::__run_test_ui(|ui| {
 //! let button = egui::Button::new("click me");
 //! let response = button.ui(ui);
 //! if response.clicked() { take_action() }
+//! # });
 //! # fn take_action() {}
 //! ```
 //!
@@ -209,147 +232,88 @@
 //! when you release the panel/window shrinks again.
 //! This is an artifact of immediate mode, and here are some alternatives on how to avoid it:
 //!
-//! 1. Turn of resizing with [`Window::resizable`], [`SidePanel::resizable`], [`TopBottomPanel::resizable`].
+//! 1. Turn off resizing with [`Window::resizable`], [`SidePanel::resizable`], [`TopBottomPanel::resizable`].
 //! 2. Wrap your panel contents in a [`ScrollArea`], or use [`Window::vscroll`] and [`Window::hscroll`].
 //! 3. Use a justified layout:
 //!
-//! ``` rust
-//! # let ui = &mut egui::Ui::__test();
+//! ```
+//! # egui::__run_test_ui(|ui| {
 //! ui.with_layout(egui::Layout::top_down_justified(egui::Align::Center), |ui| {
 //!     ui.button("I am becoming wider as needed");
 //! });
+//! # });
 //! ```
 //!
 //! 4. Fill in extra space with emptiness:
 //!
-//! ``` rust
-//! # let ui = &mut egui::Ui::__test();
+//! ```
+//! # egui::__run_test_ui(|ui| {
 //! ui.allocate_space(ui.available_size()); // put this LAST in your panel/window code
+//! # });
 //! ```
 //!
 //! ## Sizes
 //! You can control the size of widgets using [`Ui::add_sized`].
 //!
 //! ```
-//! # let ui = &mut egui::Ui::__test();
+//! # egui::__run_test_ui(|ui| {
 //! # let mut my_value = 0.0_f32;
 //! ui.add_sized([40.0, 20.0], egui::DragValue::new(&mut my_value));
+//! # });
 //! ```
 //!
 //! ## Code snippets
 //!
 //! ```
-//! # let ui = &mut egui::Ui::__test();
+//! # egui::__run_test_ui(|ui| {
 //! # let mut some_bool = true;
 //! // Miscellaneous tips and tricks
 //!
-//! ui.horizontal_wrapped(|ui|{
+//! ui.horizontal_wrapped(|ui| {
 //!     ui.spacing_mut().item_spacing.x = 0.0; // remove spacing between widgets
 //!     // `radio_value` also works for enums, integers, and more.
 //!     ui.radio_value(&mut some_bool, false, "Off");
 //!     ui.radio_value(&mut some_bool, true, "On");
 //! });
 //!
-//! ui.group(|ui|{
+//! ui.group(|ui| {
 //!     ui.label("Within a frame");
 //!     ui.set_min_height(200.0);
 //! });
 //!
 //! // A `scope` creates a temporary [`Ui`] in which you can change settings:
-//! ui.scope(|ui|{
+//! ui.scope(|ui| {
 //!     ui.visuals_mut().override_text_color = Some(egui::Color32::RED);
 //!     ui.style_mut().override_text_style = Some(egui::TextStyle::Monospace);
 //!     ui.style_mut().wrap = Some(false);
 //!
 //!     ui.label("This text will be red, monospace, and won't wrap to a new line");
 //! }); // the temporary settings are reverted here
+//! # });
 //! ```
+//!
+//! ## Feature flags
+#![cfg_attr(feature = "document-features", doc = document_features::document_features!())]
+//!
 
-// Forbid warnings in release builds:
-#![cfg_attr(not(debug_assertions), deny(warnings))]
-#![forbid(unsafe_code)]
-#![warn(
-    clippy::all,
-    clippy::await_holding_lock,
-    clippy::char_lit_as_u8,
-    clippy::checked_conversions,
-    clippy::dbg_macro,
-    clippy::debug_assert_with_mut_call,
-    clippy::doc_markdown,
-    clippy::empty_enum,
-    clippy::enum_glob_use,
-    clippy::exit,
-    clippy::expl_impl_clone_on_copy,
-    clippy::explicit_deref_methods,
-    clippy::explicit_into_iter_loop,
-    clippy::fallible_impl_from,
-    clippy::filter_map_next,
-    clippy::float_cmp_const,
-    clippy::fn_params_excessive_bools,
-    clippy::if_let_mutex,
-    clippy::imprecise_flops,
-    clippy::inefficient_to_string,
-    clippy::invalid_upcast_comparisons,
-    clippy::large_types_passed_by_value,
-    clippy::let_unit_value,
-    clippy::linkedlist,
-    clippy::lossy_float_literal,
-    clippy::macro_use_imports,
-    clippy::manual_ok_or,
-    clippy::map_err_ignore,
-    clippy::map_flatten,
-    clippy::match_on_vec_items,
-    clippy::match_same_arms,
-    clippy::match_wildcard_for_single_variants,
-    clippy::mem_forget,
-    clippy::mismatched_target_os,
-    clippy::missing_errors_doc,
-    clippy::missing_safety_doc,
-    clippy::mut_mut,
-    clippy::mutex_integer,
-    clippy::needless_borrow,
-    clippy::needless_continue,
-    clippy::needless_pass_by_value,
-    clippy::option_option,
-    clippy::path_buf_push_overwrite,
-    clippy::ptr_as_ptr,
-    clippy::ref_option_ref,
-    clippy::rest_pat_in_fully_bound_structs,
-    clippy::same_functions_in_if_condition,
-    clippy::string_add_assign,
-    clippy::string_add,
-    clippy::string_lit_as_bytes,
-    clippy::string_to_string,
-    clippy::todo,
-    clippy::trait_duplication_in_bounds,
-    clippy::unimplemented,
-    clippy::unnested_or_patterns,
-    clippy::unused_self,
-    clippy::useless_transmute,
-    clippy::verbose_file_reads,
-    clippy::zero_sized_map_values,
-    future_incompatible,
-    missing_crate_level_docs,
-    nonstandard_style,
-    rust_2018_idioms
-)]
 #![allow(clippy::float_cmp)]
 #![allow(clippy::manual_range_contains)]
 
 mod animation_manager;
-pub mod any;
 pub mod containers;
 mod context;
 mod data;
 mod frame_state;
 pub(crate) mod grid;
+pub mod gui_zoom;
 mod id;
 mod input_state;
-mod introspection;
+pub mod introspection;
 pub mod layers;
 mod layout;
 mod memory;
 pub mod menu;
+pub mod os;
 mod painter;
 pub(crate) mod placer;
 mod response;
@@ -357,47 +321,56 @@ mod sense;
 pub mod style;
 mod ui;
 pub mod util;
+pub mod widget_text;
 pub mod widgets;
 
+#[cfg(feature = "accesskit")]
+pub use accesskit;
+
 pub use epaint;
+pub use epaint::ecolor;
 pub use epaint::emath;
 
-// Can't add deprecation notice due to https://github.com/rust-lang/rust/issues/30827
-pub use epaint as paint; // historical reasons
-
-// Can't add deprecation notice due to https://github.com/rust-lang/rust/issues/30827
-pub use emath as math; // historical reasons
-
+#[cfg(feature = "color-hex")]
+pub use ecolor::hex_color;
+pub use ecolor::{Color32, Rgba};
 pub use emath::{lerp, pos2, remap, remap_clamp, vec2, Align, Align2, NumExt, Pos2, Rect, Vec2};
 pub use epaint::{
-    color, mutex,
-    text::{FontDefinitions, FontFamily, TextStyle},
-    ClippedMesh, Color32, Rgba, Shape, Stroke, Texture, TextureId,
+    mutex,
+    text::{FontData, FontDefinitions, FontFamily, FontId, FontTweak},
+    textures::{TextureFilter, TextureOptions, TexturesDelta},
+    ClippedPrimitive, ColorImage, FontImage, ImageData, Mesh, PaintCallback, PaintCallbackInfo,
+    Rounding, Shape, Stroke, TextureHandle, TextureId,
 };
 
 pub mod text {
-    pub use epaint::text::{Fonts, Galley, LayoutJob, LayoutSection, TextFormat, TAB_SIZE};
+    pub use crate::text_edit::CCursorRange;
+    pub use epaint::text::{
+        cursor::CCursor, FontData, FontDefinitions, FontFamily, Fonts, Galley, LayoutJob,
+        LayoutSection, TextFormat, TAB_SIZE,
+    };
 }
 
 pub use {
     containers::*,
-    context::{Context, CtxRef},
+    context::Context,
     data::{
         input::*,
-        output::{self, CursorIcon, Output, WidgetInfo},
+        output::{self, CursorIcon, FullOutput, PlatformOutput, WidgetInfo},
     },
     grid::Grid,
     id::{Id, IdMap},
     input_state::{InputState, MultiTouchInfo, PointerState},
     layers::{LayerId, Order},
     layout::*,
-    memory::Memory,
+    memory::{Memory, Options},
     painter::Painter,
     response::{InnerResponse, Response},
     sense::Sense,
-    style::{Style, Visuals},
+    style::{FontSelection, Margin, Style, TextStyle, Visuals},
     text::{Galley, TextFormat},
     ui::Ui,
+    widget_text::{RichText, WidgetText},
     widgets::*,
 };
 
@@ -406,10 +379,10 @@ pub use {
 /// Helper function that adds a label when compiling with debug assertions enabled.
 pub fn warn_if_debug_build(ui: &mut crate::Ui) {
     if cfg!(debug_assertions) {
-        ui.add(
-            crate::Label::new("‼ Debug build ‼")
+        ui.label(
+            RichText::new("⚠ Debug build ⚠")
                 .small()
-                .text_color(crate::Color32::RED),
+                .color(ui.visuals().warn_fg_color),
         )
         .on_hover_text("egui was compiled with debug assertions enabled.");
     }
@@ -420,28 +393,30 @@ pub fn warn_if_debug_build(ui: &mut crate::Ui) {
 /// Create a [`Hyperlink`](crate::Hyperlink) to the current [`file!()`] (and line) on Github
 ///
 /// ```
-/// # let ui = &mut egui::Ui::__test();
+/// # egui::__run_test_ui(|ui| {
 /// ui.add(egui::github_link_file_line!("https://github.com/YOUR/PROJECT/blob/master/", "(source code)"));
+/// # });
 /// ```
 #[macro_export]
 macro_rules! github_link_file_line {
     ($github_url: expr, $label: expr) => {{
         let url = format!("{}{}#L{}", $github_url, file!(), line!());
-        $crate::Hyperlink::new(url).text($label)
+        $crate::Hyperlink::from_label_and_url($label, url)
     }};
 }
 
 /// Create a [`Hyperlink`](crate::Hyperlink) to the current [`file!()`] on github.
 ///
 /// ```
-/// # let ui = &mut egui::Ui::__test();
+/// # egui::__run_test_ui(|ui| {
 /// ui.add(egui::github_link_file!("https://github.com/YOUR/PROJECT/blob/master/", "(source code)"));
+/// # });
 /// ```
 #[macro_export]
 macro_rules! github_link_file {
     ($github_url: expr, $label: expr) => {{
         let url = format!("{}{}", $github_url, file!());
-        $crate::Hyperlink::new(url).text($label)
+        $crate::Hyperlink::from_label_and_url($label, url)
     }};
 }
 
@@ -450,7 +425,7 @@ macro_rules! github_link_file {
 /// Show debug info on hover when [`Context::set_debug_on_hover`] has been turned on.
 ///
 /// ```
-/// # let ui = &mut egui::Ui::__test();
+/// # egui::__run_test_ui(|ui| {
 /// // Turn on tracing of widgets
 /// ui.ctx().set_debug_on_hover(true);
 ///
@@ -459,6 +434,7 @@ macro_rules! github_link_file {
 ///
 /// /// Show [`std::file`] and [`std::line`] on hover
 /// egui::trace!(ui);
+/// # });
 /// ```
 #[macro_export]
 macro_rules! trace {
@@ -488,7 +464,7 @@ macro_rules! egui_assert {
 
 // ----------------------------------------------------------------------------
 
-/// egui supports around 1216 emojis in total.
+/// The default egui fonts supports around 1216 emojis in total.
 /// Here are some of the most useful:
 /// ∞⊗⎗⎘⎙⏏⏴⏵⏶⏷
 /// ⏩⏪⏭⏮⏸⏹⏺■▶📾🔀🔁🔃
@@ -503,23 +479,29 @@ macro_rules! egui_assert {
 ///
 /// NOTE: In egui all emojis are monochrome!
 ///
-/// You can explore them all in the Font Book in [the online demo](https://emilk.github.io/egui/).
+/// You can explore them all in the Font Book in [the online demo](https://www.egui.rs/#demo).
 ///
 /// In addition, egui supports a few special emojis that are not part of the unicode standard.
 /// This module contains some of them:
 pub mod special_emojis {
     /// Tux, the Linux penguin.
     pub const OS_LINUX: char = '🐧';
+
     /// The Windows logo.
     pub const OS_WINDOWS: char = '';
+
     /// The Android logo.
     pub const OS_ANDROID: char = '';
+
     /// The Apple logo.
     pub const OS_APPLE: char = '';
 
     /// The Github logo.
     pub const GITHUB: char = '';
 
+    /// The Twitter bird.
+    pub const TWITTER: char = '';
+
     /// The word `git`.
     pub const GIT: char = '';
 
@@ -527,21 +509,34 @@ pub mod special_emojis {
 }
 
 /// The different types of built-in widgets in egui
-#[derive(Clone, Copy, Debug, PartialEq)]
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
 #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
 pub enum WidgetType {
-    Label, // TODO: emit Label events
-    Hyperlink,
+    Label, // TODO(emilk): emit Label events
+
+    /// e.g. a hyperlink
+    Link,
+
     TextEdit,
+
     Button,
+
     Checkbox,
+
     RadioButton,
+
     SelectableLabel,
+
     ComboBox,
+
     Slider,
+
     DragValue,
+
     ColorButton,
+
     ImageButton,
+
     CollapsingHeader,
 
     /// If you cannot fit any of the above slots.
@@ -549,3 +544,30 @@ pub enum WidgetType {
     /// If this is something you think should be added, file an issue.
     Other,
 }
+
+// ----------------------------------------------------------------------------
+
+/// For use in tests; especially doctests.
+pub fn __run_test_ctx(mut run_ui: impl FnMut(&Context)) {
+    let ctx = Context::default();
+    ctx.set_fonts(FontDefinitions::empty()); // prevent fonts from being loaded (save CPU time)
+    let _ = ctx.run(Default::default(), |ctx| {
+        run_ui(ctx);
+    });
+}
+
+/// For use in tests; especially doctests.
+pub fn __run_test_ui(mut add_contents: impl FnMut(&mut Ui)) {
+    let ctx = Context::default();
+    ctx.set_fonts(FontDefinitions::empty()); // prevent fonts from being loaded (save CPU time)
+    let _ = ctx.run(Default::default(), |ctx| {
+        crate::CentralPanel::default().show(ctx, |ui| {
+            add_contents(ui);
+        });
+    });
+}
+
+#[cfg(feature = "accesskit")]
+pub fn accesskit_root_id() -> Id {
+    Id::new("accesskit_root")
+}

crates/egui/src/memory.rs

@@ -1,52 +1,36 @@
-use epaint::ahash::AHashSet;
-
-use crate::{any, area, window, Id, IdMap, InputState, LayerId, Pos2, Rect, Style};
+use crate::{area, window, Id, IdMap, InputState, LayerId, Pos2, Rect, Style};
 
 // ----------------------------------------------------------------------------
 
 /// The data that egui persists between frames.
 ///
 /// This includes window positions and sizes,
-/// how far the user has scrolled in a `ScrollArea` etc.
+/// how far the user has scrolled in a [`ScrollArea`](crate::ScrollArea) etc.
 ///
-/// If you want this to persist when closing your app you should serialize `Memory` and store it.
+/// If you want this to persist when closing your app you should serialize [`Memory`] and store it.
+/// For this you need to enable the `persistence`.
 ///
-/// If you want to store data for your widgets, you should look at `data`/`data_temp` and
-/// `id_data`/`id_data_temp` fields, and read the documentation of [`any`] module.
+/// If you want to store data for your widgets, you should look at [`Memory::data`]
 #[derive(Clone, Debug, Default)]
-#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
-#[cfg_attr(feature = "serde", serde(default))]
+#[cfg_attr(feature = "persistence", derive(serde::Deserialize, serde::Serialize))]
+#[cfg_attr(feature = "persistence", serde(default))]
 pub struct Memory {
     pub options: Options,
 
-    // ------------------------------------------
-    /// This map stores current states for widgets that don't require `Id`.
+    /// This map stores some superficial state for all widgets with custom [`Id`]s.
+    ///
+    /// This includes storing if a [`crate::CollapsingHeader`] is open, how far scrolled a
+    /// [`crate::ScrollArea`] is, where the cursor in a [`crate::TextEdit`] is, etc.
+    ///
+    /// This is NOT meant to store any important data. Store that in your own structures!
+    ///
+    /// Each read clones the data, so keep your values cheap to clone.
+    /// If you want to store a lot of data you should wrap it in `Arc<Mutex<…>>` so it is cheap to clone.
+    ///
     /// This will be saved between different program runs if you use the `persistence` feature.
-    #[cfg(feature = "persistence")]
-    pub data: any::serializable::TypeMap,
-
-    /// This map stores current states for widgets that don't require `Id`.
-    /// This will be saved between different program runs if you use the `persistence` feature.
-    #[cfg(not(feature = "persistence"))]
-    pub data: any::TypeMap,
-
-    /// Same as `data`, but this data will not be saved between runs.
-    #[cfg_attr(feature = "serde", serde(skip))]
-    pub data_temp: any::TypeMap,
-
-    /// This map stores current states for all widgets with custom `Id`s.
-    /// This will be saved between different program runs if you use the `persistence` feature.
-    #[cfg(feature = "persistence")]
-    pub id_data: any::serializable::IdAnyMap,
-
-    /// This map stores current states for all widgets with custom `Id`s.
-    /// This will be saved between different program runs if you use the `persistence` feature.
-    #[cfg(not(feature = "persistence"))]
-    pub id_data: any::AnyMap<Id, crate::id::BuilIdHasher>,
-
-    /// Same as `id_data`, but this data will not be saved between runs.
-    #[cfg_attr(feature = "serde", serde(skip))]
-    pub id_data_temp: any::AnyMap<Id, crate::id::BuilIdHasher>,
+    ///
+    /// To store a state common for all your widgets (a singleton), use [`Id::null`] as the key.
+    pub data: crate::util::IdTypeMap,
 
     // ------------------------------------------
     /// Can be used to cache computations from one frame to another.
@@ -67,59 +51,87 @@ pub struct Memory {
     /// }
     /// type CharCountCache<'a> = FrameCache<usize, CharCounter>;
     ///
-    /// # let mut ctx = egui::CtxRef::default();
-    /// let mut memory = ctx.memory();
-    /// let cache = memory.caches.cache::<CharCountCache<'_>>();
-    /// assert_eq!(cache.get("hello"), 5);
+    /// # let mut ctx = egui::Context::default();
+    /// ctx.memory_mut(|mem| {
+    ///     let cache = mem.caches.cache::<CharCountCache<'_>>();
+    ///     assert_eq!(cache.get("hello"), 5);
+    /// });
     /// ```
-    #[cfg_attr(feature = "serde", serde(skip))]
+    #[cfg_attr(feature = "persistence", serde(skip))]
     pub caches: crate::util::cache::CacheStorage,
 
     // ------------------------------------------
     /// new scale that will be applied at the start of the next frame
+    #[cfg_attr(feature = "persistence", serde(skip))]
     pub(crate) new_pixels_per_point: Option<f32>,
 
     /// new fonts that will be applied at the start of the next frame
+    #[cfg_attr(feature = "persistence", serde(skip))]
     pub(crate) new_font_definitions: Option<epaint::text::FontDefinitions>,
 
-    #[cfg_attr(feature = "serde", serde(skip))]
+    #[cfg_attr(feature = "persistence", serde(skip))]
     pub(crate) interaction: Interaction,
 
-    #[cfg_attr(feature = "serde", serde(skip))]
+    #[cfg_attr(feature = "persistence", serde(skip))]
     pub(crate) window_interaction: Option<window::WindowInteraction>,
 
-    #[cfg_attr(feature = "serde", serde(skip))]
+    #[cfg_attr(feature = "persistence", serde(skip))]
     pub(crate) drag_value: crate::widgets::drag_value::MonoState,
 
     pub(crate) areas: Areas,
 
     /// Which popup-window is open (if any)?
     /// Could be a combo box, color picker, menu etc.
-    #[cfg_attr(feature = "serde", serde(skip))]
+    #[cfg_attr(feature = "persistence", serde(skip))]
     popup: Option<Id>,
 
-    #[cfg_attr(feature = "serde", serde(skip))]
+    #[cfg_attr(feature = "persistence", serde(skip))]
     everything_is_visible: bool,
 }
 
 // ----------------------------------------------------------------------------
 
 /// Some global options that you can read and write.
-#[derive(Clone, Debug, Default)]
+#[derive(Clone, Debug)]
 #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
 #[cfg_attr(feature = "serde", serde(default))]
 pub struct Options {
-    /// The default style for new `Ui`:s.
+    /// The default style for new [`Ui`](crate::Ui):s.
     #[cfg_attr(feature = "serde", serde(skip))]
     pub(crate) style: std::sync::Arc<Style>,
 
     /// Controls the tessellator.
     pub tessellation_options: epaint::TessellationOptions,
 
-    /// This does not at all change the behavior of egui,
-    /// but is a signal to any backend that we want the [`crate::Output::events`] read out loud.
+    /// This is a signal to any backend that we want the [`crate::PlatformOutput::events`] read out loud.
+    ///
+    /// The only change to egui is that labels can be focused by pressing tab.
+    ///
     /// Screen readers is an experimental feature of egui, and not supported on all platforms.
+    ///
+    /// `eframe` supports it only on web, using the `web_screen_reader` feature flag,
+    /// but you should consider using [AccessKit](https://github.com/AccessKit/accesskit) instead,
+    /// which `eframe` supports.
     pub screen_reader: bool,
+
+    /// If true, the most common glyphs (ASCII) are pre-rendered to the texture atlas.
+    ///
+    /// Only the fonts in [`Style::text_styles`] will be pre-cached.
+    ///
+    /// This can lead to fewer texture operations, but may use up the texture atlas quicker
+    /// if you are changing [`Style::text_styles`], of have a lot of text styles.
+    pub preload_font_glyphs: bool,
+}
+
+impl Default for Options {
+    fn default() -> Self {
+        Self {
+            style: Default::default(),
+            tessellation_options: Default::default(),
+            screen_reader: false,
+            preload_font_glyphs: true,
+        }
+    }
 }
 
 // ----------------------------------------------------------------------------
@@ -161,7 +173,7 @@ pub(crate) struct Interaction {
 #[derive(Clone, Debug, Default)]
 pub(crate) struct Focus {
     /// The widget with keyboard focus (i.e. a text input field).
-    id: Option<Id>,
+    pub(crate) id: Option<Id>,
 
     /// What had keyboard focus previous frame?
     id_previous_frame: Option<Id>,
@@ -169,6 +181,9 @@ pub(crate) struct Focus {
     /// Give focus to this widget next frame
     id_next_frame: Option<Id>,
 
+    #[cfg(feature = "accesskit")]
+    id_requested_by_accesskit: Option<accesskit::NodeId>,
+
     /// If set, the next widget that is interested in focus will automatically get it.
     /// Probably because the user pressed Tab.
     give_to_next: bool,
@@ -226,6 +241,11 @@ impl Focus {
             self.id = Some(id);
         }
 
+        #[cfg(feature = "accesskit")]
+        {
+            self.id_requested_by_accesskit = None;
+        }
+
         self.pressed_tab = false;
         self.pressed_shift_tab = false;
         for event in &new_input.events {
@@ -235,6 +255,7 @@ impl Focus {
                     key: crate::Key::Escape,
                     pressed: true,
                     modifiers: _,
+                    ..
                 }
             ) {
                 self.id = None;
@@ -246,6 +267,7 @@ impl Focus {
                 key: crate::Key::Tab,
                 pressed: true,
                 modifiers,
+                ..
             } = event
             {
                 if !self.is_focus_locked {
@@ -256,6 +278,18 @@ impl Focus {
                     }
                 }
             }
+
+            #[cfg(feature = "accesskit")]
+            {
+                if let crate::Event::AccessKitActionRequest(accesskit::ActionRequest {
+                    action: accesskit::Action::Focus,
+                    target,
+                    data: None,
+                }) = event
+                {
+                    self.id_requested_by_accesskit = Some(*target);
+                }
+            }
         }
     }
 
@@ -276,6 +310,17 @@ impl Focus {
     }
 
     fn interested_in_focus(&mut self, id: Id) {
+        #[cfg(feature = "accesskit")]
+        {
+            if self.id_requested_by_accesskit == Some(id.accesskit_id()) {
+                self.id = Some(id);
+                self.id_requested_by_accesskit = None;
+                self.give_to_next = false;
+                self.pressed_tab = false;
+                self.pressed_shift_tab = false;
+            }
+        }
+
         if self.give_to_next && !self.had_focus_last_frame(id) {
             self.id = Some(id);
             self.give_to_next = false;
@@ -288,9 +333,10 @@ impl Focus {
                 self.id_next_frame = self.last_interested; // frame-delay so gained_focus works
                 self.pressed_shift_tab = false;
             }
-        } else if self.pressed_tab && self.id == None && !self.give_to_next {
+        } else if self.pressed_tab && self.id.is_none() && !self.give_to_next {
             // nothing has focus and the user pressed tab - give focus to the first widgets that wants it:
             self.id = Some(id);
+            self.pressed_tab = false;
         }
 
         self.last_interested = Some(id);
@@ -322,6 +368,11 @@ impl Memory {
         self.areas.layer_id_at(pos, resize_interact_radius_side)
     }
 
+    /// An iterator over all layers. Back-to-front. Top is last.
+    pub fn layer_ids(&self) -> impl ExactSizeIterator<Item = LayerId> + '_ {
+        self.areas.order().iter().copied()
+    }
+
     pub(crate) fn had_focus_last_frame(&self, id: Id) -> bool {
         self.interaction.focus.id_previous_frame == Some(id)
     }
@@ -337,6 +388,11 @@ impl Memory {
     }
 
     /// Does this widget have keyboard focus?
+    ///
+    /// This function does not consider whether the UI as a whole (e.g. window)
+    /// has the keyboard focus. That makes this function suitable for deciding
+    /// widget state that should not be disrupted if the user moves away
+    /// from the window and back.
     #[inline(always)]
     pub fn has_focus(&self, id: Id) -> bool {
         self.interaction.focus.id == Some(id)
@@ -347,13 +403,16 @@ impl Memory {
         self.interaction.focus.id
     }
 
-    pub(crate) fn lock_focus(&mut self, id: Id, lock_focus: bool) {
+    /// Prevent keyboard focus from moving away from this widget even if users presses the tab key.
+    /// You must first give focus to the widget before calling this.
+    pub fn lock_focus(&mut self, id: Id, lock_focus: bool) {
         if self.had_focus_last_frame(id) && self.has_focus(id) {
             self.interaction.focus.is_focus_locked = lock_focus;
         }
     }
 
-    pub(crate) fn has_lock_focus(&mut self, id: Id) -> bool {
+    /// Is the keyboard focus locked on this widget? If so the focus won't move even if the user presses the tab key.
+    pub fn has_lock_focus(&self, id: Id) -> bool {
         if self.had_focus_last_frame(id) && self.has_focus(id) {
             self.interaction.focus.is_focus_locked
         } else {
@@ -381,12 +440,17 @@ impl Memory {
 
     /// Register this widget as being interested in getting keyboard focus.
     /// This will allow the user to select it with tab and shift-tab.
+    /// This is normally done automatically when handling interactions,
+    /// but it is sometimes useful to pre-register interest in focus,
+    /// e.g. before deciding which type of underlying widget to use,
+    /// as in the [`crate::DragValue`] widget, so a widget can be focused
+    /// and rendered correctly in a single frame.
     #[inline(always)]
-    pub(crate) fn interested_in_focus(&mut self, id: Id) {
+    pub fn interested_in_focus(&mut self, id: Id) {
         self.interaction.focus.interested_in_focus(id);
     }
 
-    /// Stop editing of active `TextEdit` (if any).
+    /// Stop editing of active [`TextEdit`](crate::TextEdit) (if any).
     #[inline(always)]
     pub fn stop_text_input(&mut self) {
         self.interaction.focus.id = None;
@@ -402,6 +466,11 @@ impl Memory {
         self.interaction.drag_id == Some(id)
     }
 
+    #[inline(always)]
+    pub fn set_dragged_id(&mut self, id: Id) {
+        self.interaction.drag_id = Some(id);
+    }
+
     /// Forget window positions, sizes etc.
     /// Can be used to auto-layout windows.
     pub fn reset_areas(&mut self) {
@@ -413,10 +482,14 @@ impl Memory {
 /// Popups are things like combo-boxes, color pickers, menus etc.
 /// Only one can be be open at a time.
 impl Memory {
-    pub fn is_popup_open(&mut self, popup_id: Id) -> bool {
+    pub fn is_popup_open(&self, popup_id: Id) -> bool {
         self.popup == Some(popup_id) || self.everything_is_visible()
     }
 
+    pub fn any_popup_open(&self) -> bool {
+        self.popup.is_some() || self.everything_is_visible()
+    }
+
     pub fn open_popup(&mut self, popup_id: Id) {
         self.popup = Some(popup_id);
     }
@@ -455,8 +528,8 @@ impl Memory {
 
 // ----------------------------------------------------------------------------
 
-/// Keeps track of `Area`s, which are free-floating `Ui`s.
-/// These `Area`s can be in any `Order`.
+/// Keeps track of [`Area`](crate::containers::area::Area)s, which are free-floating [`Ui`](crate::Ui)s.
+/// These [`Area`](crate::containers::area::Area)s can be in any [`Order`](crate::Order).
 #[derive(Clone, Debug, Default)]
 #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
 #[cfg_attr(feature = "serde", serde(default))]
@@ -464,15 +537,15 @@ pub struct Areas {
     areas: IdMap<area::State>,
     /// Back-to-front. Top is last.
     order: Vec<LayerId>,
-    visible_last_frame: AHashSet<LayerId>,
-    visible_current_frame: AHashSet<LayerId>,
+    visible_last_frame: ahash::HashSet<LayerId>,
+    visible_current_frame: ahash::HashSet<LayerId>,
 
     /// When an area want to be on top, it is put in here.
     /// At the end of the frame, this is used to reorder the layers.
     /// This means if several layers want to be on top, they will keep their relative order.
     /// So if you close three windows and then reopen them all in one frame,
     /// they will all be sent to the top, but keep their previous internal order.
-    wants_to_be_on_top: AHashSet<LayerId>,
+    wants_to_be_on_top: ahash::HashSet<LayerId>,
 }
 
 impl Areas {
@@ -506,9 +579,9 @@ impl Areas {
                     if state.interactable {
                         // Allow us to resize by dragging just outside the window:
                         rect = rect.expand(resize_interact_radius_side);
-                    }
-                    if rect.contains(pos) {
-                        return Some(*layer);
+                        if rect.contains(pos) {
+                            return Some(*layer);
+                        }
                     }
                 }
             }
@@ -524,11 +597,11 @@ impl Areas {
         self.visible_last_frame.contains(layer_id) || self.visible_current_frame.contains(layer_id)
     }
 
-    pub fn visible_layer_ids(&self) -> AHashSet<LayerId> {
+    pub fn visible_layer_ids(&self) -> ahash::HashSet<LayerId> {
         self.visible_last_frame
             .iter()
-            .cloned()
-            .chain(self.visible_current_frame.iter().cloned())
+            .copied()
+            .chain(self.visible_current_frame.iter().copied())
             .collect()
     }
 
@@ -558,7 +631,8 @@ impl Areas {
             ..
         } = self;
 
-        *visible_last_frame = std::mem::take(visible_current_frame);
+        std::mem::swap(visible_last_frame, visible_current_frame);
+        visible_current_frame.clear();
         order.sort_by_key(|layer| (layer.order, wants_to_be_on_top.contains(layer)));
         wants_to_be_on_top.clear();
     }
@@ -566,7 +640,6 @@ impl Areas {
 
 // ----------------------------------------------------------------------------
 
-#[cfg(test)]
 #[test]
 fn memory_impl_send_sync() {
     fn assert_send_sync<T: Send + Sync>() {}

crates/egui/src/menu.rs

@@ -0,0 +1,690 @@
+//! Menu bar functionality (very basic so far).
+//!
+//! Usage:
+//! ```
+//! fn show_menu(ui: &mut egui::Ui) {
+//!     use egui::{menu, Button};
+//!
+//!     menu::bar(ui, |ui| {
+//!         ui.menu_button("File", |ui| {
+//!             if ui.button("Open").clicked() {
+//!                 // …
+//!             }
+//!         });
+//!     });
+//! }
+//! ```
+
+use super::{
+    style::WidgetVisuals, Align, Context, Id, InnerResponse, PointerState, Pos2, Rect, Response,
+    Sense, TextStyle, Ui, Vec2,
+};
+use crate::{widgets::*, *};
+use epaint::mutex::RwLock;
+use std::sync::Arc;
+
+/// What is saved between frames.
+#[derive(Clone, Default)]
+pub(crate) struct BarState {
+    open_menu: MenuRootManager,
+}
+
+impl BarState {
+    fn load(ctx: &Context, bar_id: Id) -> Self {
+        ctx.data_mut(|d| d.get_temp::<Self>(bar_id).unwrap_or_default())
+    }
+
+    fn store(self, ctx: &Context, bar_id: Id) {
+        ctx.data_mut(|d| d.insert_temp(bar_id, self));
+    }
+
+    /// Show a menu at pointer if primary-clicked response.
+    /// Should be called from [`Context`] on a [`Response`]
+    pub fn bar_menu<R>(
+        &mut self,
+        response: &Response,
+        add_contents: impl FnOnce(&mut Ui) -> R,
+    ) -> Option<InnerResponse<R>> {
+        MenuRoot::stationary_click_interaction(response, &mut self.open_menu, response.id);
+        self.open_menu.show(response, add_contents)
+    }
+}
+
+impl std::ops::Deref for BarState {
+    type Target = MenuRootManager;
+
+    fn deref(&self) -> &Self::Target {
+        &self.open_menu
+    }
+}
+
+impl std::ops::DerefMut for BarState {
+    fn deref_mut(&mut self) -> &mut Self::Target {
+        &mut self.open_menu
+    }
+}
+
+fn set_menu_style(style: &mut Style) {
+    style.spacing.button_padding = vec2(2.0, 0.0);
+    style.visuals.widgets.active.bg_stroke = Stroke::NONE;
+    style.visuals.widgets.hovered.bg_stroke = Stroke::NONE;
+    style.visuals.widgets.inactive.weak_bg_fill = Color32::TRANSPARENT;
+    style.visuals.widgets.inactive.bg_stroke = Stroke::NONE;
+}
+
+/// The menu bar goes well in a [`TopBottomPanel::top`],
+/// but can also be placed in a [`Window`].
+/// In the latter case you may want to wrap it in [`Frame`].
+pub fn bar<R>(ui: &mut Ui, add_contents: impl FnOnce(&mut Ui) -> R) -> InnerResponse<R> {
+    ui.horizontal(|ui| {
+        set_menu_style(ui.style_mut());
+
+        // Take full width and fixed height:
+        let height = ui.spacing().interact_size.y;
+        ui.set_min_size(vec2(ui.available_width(), height));
+
+        add_contents(ui)
+    })
+}
+
+/// Construct a top level menu in a menu bar. This would be e.g. "File", "Edit" etc.
+///
+/// Responds to primary clicks.
+///
+/// Returns `None` if the menu is not open.
+pub fn menu_button<R>(
+    ui: &mut Ui,
+    title: impl Into<WidgetText>,
+    add_contents: impl FnOnce(&mut Ui) -> R,
+) -> InnerResponse<Option<R>> {
+    stationary_menu_impl(ui, title, Box::new(add_contents))
+}
+
+/// Construct a top level menu with an image in a menu bar. This would be e.g. "File", "Edit" etc.
+///
+/// Responds to primary clicks.
+///
+/// Returns `None` if the menu is not open.
+pub fn menu_image_button<R>(
+    ui: &mut Ui,
+    texture_id: TextureId,
+    image_size: impl Into<Vec2>,
+    add_contents: impl FnOnce(&mut Ui) -> R,
+) -> InnerResponse<Option<R>> {
+    stationary_menu_image_impl(ui, texture_id, image_size, Box::new(add_contents))
+}
+
+/// Construct a nested sub menu in another menu.
+///
+/// Opens on hover.
+///
+/// Returns `None` if the menu is not open.
+pub(crate) fn submenu_button<R>(
+    ui: &mut Ui,
+    parent_state: Arc<RwLock<MenuState>>,
+    title: impl Into<WidgetText>,
+    add_contents: impl FnOnce(&mut Ui) -> R,
+) -> InnerResponse<Option<R>> {
+    SubMenu::new(parent_state, title).show(ui, add_contents)
+}
+
+/// wrapper for the contents of every menu.
+pub(crate) fn menu_ui<'c, R>(
+    ctx: &Context,
+    menu_id: impl Into<Id>,
+    menu_state_arc: &Arc<RwLock<MenuState>>,
+    add_contents: impl FnOnce(&mut Ui) -> R + 'c,
+) -> InnerResponse<R> {
+    let pos = {
+        let mut menu_state = menu_state_arc.write();
+        menu_state.entry_count = 0;
+        menu_state.rect.min
+    };
+
+    let area = Area::new(menu_id)
+        .order(Order::Foreground)
+        .constrain(true)
+        .fixed_pos(pos)
+        .interactable(true)
+        .drag_bounds(ctx.screen_rect());
+    let inner_response = area.show(ctx, |ui| {
+        set_menu_style(ui.style_mut());
+
+        Frame::menu(ui.style())
+            .show(ui, |ui| {
+                const DEFAULT_MENU_WIDTH: f32 = 150.0; // TODO(emilk): add to ui.spacing
+                ui.set_max_width(DEFAULT_MENU_WIDTH);
+                ui.set_menu_state(Some(menu_state_arc.clone()));
+                ui.with_layout(Layout::top_down_justified(Align::LEFT), add_contents)
+                    .inner
+            })
+            .inner
+    });
+    menu_state_arc.write().rect = inner_response.response.rect;
+    inner_response
+}
+
+/// Build a top level menu with a button.
+///
+/// Responds to primary clicks.
+fn stationary_menu_impl<'c, R>(
+    ui: &mut Ui,
+    title: impl Into<WidgetText>,
+    add_contents: Box<dyn FnOnce(&mut Ui) -> R + 'c>,
+) -> InnerResponse<Option<R>> {
+    let title = title.into();
+    let bar_id = ui.id();
+    let menu_id = bar_id.with(title.text());
+
+    let mut bar_state = BarState::load(ui.ctx(), bar_id);
+
+    let mut button = Button::new(title);
+
+    if bar_state.open_menu.is_menu_open(menu_id) {
+        button = button.fill(ui.visuals().widgets.open.weak_bg_fill);
+        button = button.stroke(ui.visuals().widgets.open.bg_stroke);
+    }
+
+    let button_response = ui.add(button);
+    let inner = bar_state.bar_menu(&button_response, add_contents);
+
+    bar_state.store(ui.ctx(), bar_id);
+    InnerResponse::new(inner.map(|r| r.inner), button_response)
+}
+
+/// Build a top level menu with an image button.
+///
+/// Responds to primary clicks.
+fn stationary_menu_image_impl<'c, R>(
+    ui: &mut Ui,
+    texture_id: TextureId,
+    image_size: impl Into<Vec2>,
+    add_contents: Box<dyn FnOnce(&mut Ui) -> R + 'c>,
+) -> InnerResponse<Option<R>> {
+    let bar_id = ui.id();
+
+    let mut bar_state = BarState::load(ui.ctx(), bar_id);
+    let button_response = ui.add(ImageButton::new(texture_id, image_size));
+    let inner = bar_state.bar_menu(&button_response, add_contents);
+
+    bar_state.store(ui.ctx(), bar_id);
+    InnerResponse::new(inner.map(|r| r.inner), button_response)
+}
+
+/// Response to secondary clicks (right-clicks) by showing the given menu.
+pub(crate) fn context_menu(
+    response: &Response,
+    add_contents: impl FnOnce(&mut Ui),
+) -> Option<InnerResponse<()>> {
+    let menu_id = Id::new("__egui::context_menu");
+    let mut bar_state = BarState::load(&response.ctx, menu_id);
+
+    MenuRoot::context_click_interaction(response, &mut bar_state, response.id);
+    let inner_response = bar_state.show(response, add_contents);
+
+    bar_state.store(&response.ctx, menu_id);
+    inner_response
+}
+
+/// Stores the state for the context menu.
+#[derive(Clone, Default)]
+pub(crate) struct MenuRootManager {
+    inner: Option<MenuRoot>,
+}
+
+impl MenuRootManager {
+    /// Show a menu at pointer if right-clicked response.
+    /// Should be called from [`Context`] on a [`Response`]
+    pub fn show<R>(
+        &mut self,
+        response: &Response,
+        add_contents: impl FnOnce(&mut Ui) -> R,
+    ) -> Option<InnerResponse<R>> {
+        if let Some(root) = self.inner.as_mut() {
+            let (menu_response, inner_response) = root.show(response, add_contents);
+            if MenuResponse::Close == menu_response {
+                self.inner = None;
+            }
+            inner_response
+        } else {
+            None
+        }
+    }
+
+    fn is_menu_open(&self, id: Id) -> bool {
+        self.inner.as_ref().map(|m| m.id) == Some(id)
+    }
+}
+
+impl std::ops::Deref for MenuRootManager {
+    type Target = Option<MenuRoot>;
+
+    fn deref(&self) -> &Self::Target {
+        &self.inner
+    }
+}
+
+impl std::ops::DerefMut for MenuRootManager {
+    fn deref_mut(&mut self) -> &mut Self::Target {
+        &mut self.inner
+    }
+}
+
+/// Menu root associated with an Id from a Response
+#[derive(Clone)]
+pub(crate) struct MenuRoot {
+    pub menu_state: Arc<RwLock<MenuState>>,
+    pub id: Id,
+}
+
+impl MenuRoot {
+    pub fn new(position: Pos2, id: Id) -> Self {
+        Self {
+            menu_state: Arc::new(RwLock::new(MenuState::new(position))),
+            id,
+        }
+    }
+
+    pub fn show<R>(
+        &mut self,
+        response: &Response,
+        add_contents: impl FnOnce(&mut Ui) -> R,
+    ) -> (MenuResponse, Option<InnerResponse<R>>) {
+        if self.id == response.id {
+            let inner_response =
+                MenuState::show(&response.ctx, &self.menu_state, self.id, add_contents);
+            let mut menu_state = self.menu_state.write();
+            menu_state.rect = inner_response.response.rect;
+
+            if menu_state.response.is_close() {
+                return (MenuResponse::Close, Some(inner_response));
+            }
+        }
+        (MenuResponse::Stay, None)
+    }
+
+    /// Interaction with a stationary menu, i.e. fixed in another Ui.
+    ///
+    /// Responds to primary clicks.
+    fn stationary_interaction(
+        response: &Response,
+        root: &mut MenuRootManager,
+        id: Id,
+    ) -> MenuResponse {
+        if (response.clicked() && root.is_menu_open(id))
+            || response.ctx.input(|i| i.key_pressed(Key::Escape))
+        {
+            // menu open and button clicked or esc pressed
+            return MenuResponse::Close;
+        } else if (response.clicked() && !root.is_menu_open(id))
+            || (response.hovered() && root.is_some())
+        {
+            // menu not open and button clicked
+            // or button hovered while other menu is open
+            let mut pos = response.rect.left_bottom();
+            if let Some(root) = root.inner.as_mut() {
+                let menu_rect = root.menu_state.read().rect;
+                let screen_rect = response.ctx.input(|i| i.screen_rect);
+
+                if pos.y + menu_rect.height() > screen_rect.max.y {
+                    pos.y = screen_rect.max.y - menu_rect.height() - response.rect.height();
+                }
+
+                if pos.x + menu_rect.width() > screen_rect.max.x {
+                    pos.x = screen_rect.max.x - menu_rect.width();
+                }
+            }
+
+            return MenuResponse::Create(pos, id);
+        } else if response
+            .ctx
+            .input(|i| i.pointer.any_pressed() && i.pointer.primary_down())
+        {
+            if let Some(pos) = response.ctx.input(|i| i.pointer.interact_pos()) {
+                if let Some(root) = root.inner.as_mut() {
+                    if root.id == id {
+                        // pressed somewhere while this menu is open
+                        let menu_state = root.menu_state.read();
+                        let in_menu = menu_state.area_contains(pos);
+                        if !in_menu {
+                            return MenuResponse::Close;
+                        }
+                    }
+                }
+            }
+        }
+        MenuResponse::Stay
+    }
+
+    /// Interaction with a context menu (secondary clicks).
+    fn context_interaction(
+        response: &Response,
+        root: &mut Option<MenuRoot>,
+        id: Id,
+    ) -> MenuResponse {
+        let response = response.interact(Sense::click());
+        response.ctx.input(|input| {
+            let pointer = &input.pointer;
+            if pointer.any_pressed() {
+                if let Some(pos) = pointer.interact_pos() {
+                    let mut destroy = false;
+                    let mut in_old_menu = false;
+                    if let Some(root) = root {
+                        let menu_state = root.menu_state.read();
+                        in_old_menu = menu_state.area_contains(pos);
+                        destroy = root.id == response.id;
+                    }
+                    if !in_old_menu {
+                        if response.hovered() && pointer.secondary_down() {
+                            return MenuResponse::Create(pos, id);
+                        } else if (response.hovered() && pointer.primary_down()) || destroy {
+                            return MenuResponse::Close;
+                        }
+                    }
+                }
+            }
+            MenuResponse::Stay
+        })
+    }
+
+    fn handle_menu_response(root: &mut MenuRootManager, menu_response: MenuResponse) {
+        match menu_response {
+            MenuResponse::Create(pos, id) => {
+                root.inner = Some(MenuRoot::new(pos, id));
+            }
+            MenuResponse::Close => root.inner = None,
+            MenuResponse::Stay => {}
+        }
+    }
+
+    /// Respond to secondary (right) clicks.
+    pub fn context_click_interaction(response: &Response, root: &mut MenuRootManager, id: Id) {
+        let menu_response = Self::context_interaction(response, root, id);
+        Self::handle_menu_response(root, menu_response);
+    }
+
+    // Responds to primary clicks.
+    pub fn stationary_click_interaction(response: &Response, root: &mut MenuRootManager, id: Id) {
+        let menu_response = Self::stationary_interaction(response, root, id);
+        Self::handle_menu_response(root, menu_response);
+    }
+}
+
+#[derive(Copy, Clone, PartialEq)]
+pub(crate) enum MenuResponse {
+    Close,
+    Stay,
+    Create(Pos2, Id),
+}
+
+impl MenuResponse {
+    pub fn is_close(&self) -> bool {
+        *self == Self::Close
+    }
+}
+
+pub struct SubMenuButton {
+    text: WidgetText,
+    icon: WidgetText,
+    index: usize,
+}
+
+impl SubMenuButton {
+    /// The `icon` can be an emoji (e.g. `⏵` right arrow), shown right of the label
+    fn new(text: impl Into<WidgetText>, icon: impl Into<WidgetText>, index: usize) -> Self {
+        Self {
+            text: text.into(),
+            icon: icon.into(),
+            index,
+        }
+    }
+
+    fn visuals<'a>(
+        ui: &'a Ui,
+        response: &'_ Response,
+        menu_state: &'_ MenuState,
+        sub_id: Id,
+    ) -> &'a WidgetVisuals {
+        if menu_state.is_open(sub_id) {
+            &ui.style().visuals.widgets.open
+        } else {
+            ui.style().interact(response)
+        }
+    }
+
+    pub fn icon(mut self, icon: impl Into<WidgetText>) -> Self {
+        self.icon = icon.into();
+        self
+    }
+
+    pub(crate) fn show(self, ui: &mut Ui, menu_state: &MenuState, sub_id: Id) -> Response {
+        let SubMenuButton { text, icon, .. } = self;
+
+        let text_style = TextStyle::Button;
+        let sense = Sense::click();
+
+        let button_padding = ui.spacing().button_padding;
+        let total_extra = button_padding + button_padding;
+        let text_available_width = ui.available_width() - total_extra.x;
+        let text_galley =
+            text.into_galley(ui, Some(true), text_available_width, text_style.clone());
+
+        let icon_available_width = text_available_width - text_galley.size().x;
+        let icon_galley = icon.into_galley(ui, Some(true), icon_available_width, text_style);
+        let text_and_icon_size = Vec2::new(
+            text_galley.size().x + icon_galley.size().x,
+            text_galley.size().y.max(icon_galley.size().y),
+        );
+        let mut desired_size = text_and_icon_size + 2.0 * button_padding;
+        desired_size.y = desired_size.y.at_least(ui.spacing().interact_size.y);
+
+        let (rect, response) = ui.allocate_at_least(desired_size, sense);
+        response.widget_info(|| {
+            crate::WidgetInfo::labeled(crate::WidgetType::Button, text_galley.text())
+        });
+
+        if ui.is_rect_visible(rect) {
+            let visuals = Self::visuals(ui, &response, menu_state, sub_id);
+            let text_pos = Align2::LEFT_CENTER
+                .align_size_within_rect(text_galley.size(), rect.shrink2(button_padding))
+                .min;
+            let icon_pos = Align2::RIGHT_CENTER
+                .align_size_within_rect(icon_galley.size(), rect.shrink2(button_padding))
+                .min;
+
+            if ui.visuals().button_frame {
+                ui.painter().rect_filled(
+                    rect.expand(visuals.expansion),
+                    visuals.rounding,
+                    visuals.weak_bg_fill,
+                );
+            }
+
+            let text_color = visuals.text_color();
+            text_galley.paint_with_fallback_color(ui.painter(), text_pos, text_color);
+            icon_galley.paint_with_fallback_color(ui.painter(), icon_pos, text_color);
+        }
+        response
+    }
+}
+
+pub struct SubMenu {
+    button: SubMenuButton,
+    parent_state: Arc<RwLock<MenuState>>,
+}
+
+impl SubMenu {
+    fn new(parent_state: Arc<RwLock<MenuState>>, text: impl Into<WidgetText>) -> Self {
+        let index = parent_state.write().next_entry_index();
+        Self {
+            button: SubMenuButton::new(text, "⏵", index),
+            parent_state,
+        }
+    }
+
+    pub fn show<R>(
+        self,
+        ui: &mut Ui,
+        add_contents: impl FnOnce(&mut Ui) -> R,
+    ) -> InnerResponse<Option<R>> {
+        let sub_id = ui.id().with(self.button.index);
+        let button = self.button.show(ui, &self.parent_state.read(), sub_id);
+        self.parent_state
+            .write()
+            .submenu_button_interaction(ui, sub_id, &button);
+        let inner = self
+            .parent_state
+            .write()
+            .show_submenu(ui.ctx(), sub_id, add_contents);
+        InnerResponse::new(inner, button)
+    }
+}
+
+pub(crate) struct MenuState {
+    /// The opened sub-menu and its [`Id`]
+    sub_menu: Option<(Id, Arc<RwLock<MenuState>>)>,
+
+    /// Bounding box of this menu (without the sub-menu)
+    pub rect: Rect,
+
+    /// Used to check if any menu in the tree wants to close
+    pub response: MenuResponse,
+
+    /// Used to hash different [`Id`]s for sub-menus
+    entry_count: usize,
+}
+
+impl MenuState {
+    pub fn new(position: Pos2) -> Self {
+        Self {
+            rect: Rect::from_min_size(position, Vec2::ZERO),
+            sub_menu: None,
+            response: MenuResponse::Stay,
+            entry_count: 0,
+        }
+    }
+
+    /// Close menu hierarchy.
+    pub fn close(&mut self) {
+        self.response = MenuResponse::Close;
+    }
+
+    pub fn show<R>(
+        ctx: &Context,
+        menu_state: &Arc<RwLock<Self>>,
+        id: Id,
+        add_contents: impl FnOnce(&mut Ui) -> R,
+    ) -> InnerResponse<R> {
+        crate::menu::menu_ui(ctx, id, menu_state, add_contents)
+    }
+
+    fn show_submenu<R>(
+        &mut self,
+        ctx: &Context,
+        id: Id,
+        add_contents: impl FnOnce(&mut Ui) -> R,
+    ) -> Option<R> {
+        let (sub_response, response) = self.submenu(id).map(|sub| {
+            let inner_response = Self::show(ctx, sub, id, add_contents);
+            (sub.read().response, inner_response.inner)
+        })?;
+        self.cascade_close_response(sub_response);
+        Some(response)
+    }
+
+    /// Check if position is in the menu hierarchy's area.
+    pub fn area_contains(&self, pos: Pos2) -> bool {
+        self.rect.contains(pos)
+            || self
+                .sub_menu
+                .as_ref()
+                .map_or(false, |(_, sub)| sub.read().area_contains(pos))
+    }
+
+    fn next_entry_index(&mut self) -> usize {
+        self.entry_count += 1;
+        self.entry_count - 1
+    }
+
+    /// Sense button interaction opening and closing submenu.
+    fn submenu_button_interaction(&mut self, ui: &mut Ui, sub_id: Id, button: &Response) {
+        let pointer = ui.input(|i| i.pointer.clone());
+        let open = self.is_open(sub_id);
+        if self.moving_towards_current_submenu(&pointer) {
+            // ensure to repaint once even when pointer is not moving
+            ui.ctx().request_repaint();
+        } else if !open && button.hovered() {
+            let pos = button.rect.right_top();
+            self.open_submenu(sub_id, pos);
+        } else if open && !button.hovered() && !self.hovering_current_submenu(&pointer) {
+            self.close_submenu();
+        }
+    }
+
+    /// Check if `dir` points from `pos` towards left side of `rect`.
+    fn points_at_left_of_rect(pos: Pos2, dir: Vec2, rect: Rect) -> bool {
+        let vel_a = dir.angle();
+        let top_a = (rect.left_top() - pos).angle();
+        let bottom_a = (rect.left_bottom() - pos).angle();
+        bottom_a - vel_a >= 0.0 && top_a - vel_a <= 0.0
+    }
+
+    /// Check if pointer is moving towards current submenu.
+    fn moving_towards_current_submenu(&self, pointer: &PointerState) -> bool {
+        if pointer.is_still() {
+            return false;
+        }
+        if let Some(sub_menu) = self.current_submenu() {
+            if let Some(pos) = pointer.hover_pos() {
+                return Self::points_at_left_of_rect(pos, pointer.velocity(), sub_menu.read().rect);
+            }
+        }
+        false
+    }
+
+    /// Check if pointer is hovering current submenu.
+    fn hovering_current_submenu(&self, pointer: &PointerState) -> bool {
+        if let Some(sub_menu) = self.current_submenu() {
+            if let Some(pos) = pointer.hover_pos() {
+                return sub_menu.read().area_contains(pos);
+            }
+        }
+        false
+    }
+
+    /// Cascade close response to menu root.
+    fn cascade_close_response(&mut self, response: MenuResponse) {
+        if response.is_close() {
+            self.response = response;
+        }
+    }
+
+    fn is_open(&self, id: Id) -> bool {
+        self.sub_id() == Some(id)
+    }
+
+    fn sub_id(&self) -> Option<Id> {
+        self.sub_menu.as_ref().map(|(id, _)| *id)
+    }
+
+    fn current_submenu(&self) -> Option<&Arc<RwLock<MenuState>>> {
+        self.sub_menu.as_ref().map(|(_, sub)| sub)
+    }
+
+    fn submenu(&mut self, id: Id) -> Option<&Arc<RwLock<MenuState>>> {
+        self.sub_menu
+            .as_ref()
+            .and_then(|(k, sub)| if id == *k { Some(sub) } else { None })
+    }
+
+    /// Open submenu at position, if not already open.
+    fn open_submenu(&mut self, id: Id, pos: Pos2) {
+        if !self.is_open(id) {
+            self.sub_menu = Some((id, Arc::new(RwLock::new(MenuState::new(pos)))));
+        }
+    }
+
+    fn close_submenu(&mut self) {
+        self.sub_menu = None;
+    }
+}

crates/egui/src/os.rs

@@ -0,0 +1,76 @@
+#[derive(Clone, Copy, Debug, PartialEq, Eq, Hash)]
+pub enum OperatingSystem {
+    /// Unknown OS - could be wasm
+    Unknown,
+
+    /// Android OS.
+    Android,
+
+    /// Apple iPhone OS.
+    IOS,
+
+    /// Linux or Unix other than Android.
+    Nix,
+
+    /// MacOS.
+    Mac,
+
+    /// Windows.
+    Windows,
+}
+
+impl Default for OperatingSystem {
+    fn default() -> Self {
+        Self::from_target_os()
+    }
+}
+
+impl OperatingSystem {
+    pub const fn from_target_os() -> Self {
+        if cfg!(target_arch = "wasm32") {
+            Self::Unknown
+        } else if cfg!(target_os = "android") {
+            Self::Android
+        } else if cfg!(target_os = "ios") {
+            Self::IOS
+        } else if cfg!(target_os = "macos") {
+            Self::Mac
+        } else if cfg!(target_os = "windows") {
+            Self::Android
+        } else if cfg!(target_os = "linux")
+            || cfg!(target_os = "dragonfly")
+            || cfg!(target_os = "freebsd")
+            || cfg!(target_os = "netbsd")
+            || cfg!(target_os = "openbsd")
+        {
+            Self::Nix
+        } else {
+            Self::Unknown
+        }
+    }
+
+    /// Helper: try to guess from the user-agent of a browser.
+    pub fn from_user_agent(user_agent: &str) -> Self {
+        if user_agent.contains("Android") {
+            Self::Android
+        } else if user_agent.contains("like Mac") {
+            Self::IOS
+        } else if user_agent.contains("Win") {
+            Self::Windows
+        } else if user_agent.contains("Mac") {
+            Self::Mac
+        } else if user_agent.contains("Linux")
+            || user_agent.contains("X11")
+            || user_agent.contains("Unix")
+        {
+            Self::Nix
+        } else {
+            #[cfg(feature = "tracing")]
+            tracing::warn!(
+                "egui: Failed to guess operating system from User-Agent {:?}. Please file an issue at https://github.com/emilk/egui/issues",
+                user_agent);
+
+            Self::Unknown
+        }
+    }
+}

crates/egui/src/painter.rs

@@ -1,12 +1,14 @@
+use std::ops::RangeInclusive;
+use std::sync::Arc;
+
 use crate::{
     emath::{Align2, Pos2, Rect, Vec2},
     layers::{LayerId, PaintList, ShapeIdx},
-    Color32, CtxRef,
+    Color32, Context, FontId,
 };
 use epaint::{
-    mutex::Mutex,
-    text::{Fonts, Galley, TextStyle},
-    CircleShape, RectShape, Shape, Stroke, TextShape,
+    text::{Fonts, Galley},
+    CircleShape, RectShape, Rounding, Shape, Stroke,
 };
 
 /// Helper to paint shapes and text to a specific region on a specific layer.
@@ -15,14 +17,12 @@ use epaint::{
 #[derive(Clone)]
 pub struct Painter {
     /// Source of fonts and destination of shapes
-    ctx: CtxRef,
+    ctx: Context,
 
     /// Where we paint
     layer_id: LayerId,
 
-    paint_list: std::sync::Arc<Mutex<PaintList>>,
-
-    /// Everything painted in this `Painter` will be clipped against this.
+    /// Everything painted in this [`Painter`] will be clipped against this.
     /// This means nothing outside of this rectangle will be visible on screen.
     clip_rect: Rect,
 
@@ -32,33 +32,43 @@ pub struct Painter {
 }
 
 impl Painter {
-    pub fn new(ctx: CtxRef, layer_id: LayerId, clip_rect: Rect) -> Self {
-        let paint_list = ctx.graphics().list(layer_id).clone();
+    /// Create a painter to a specific layer within a certain clip rectangle.
+    pub fn new(ctx: Context, layer_id: LayerId, clip_rect: Rect) -> Self {
         Self {
             ctx,
             layer_id,
-            paint_list,
             clip_rect,
             fade_to_color: None,
         }
     }
 
+    /// Redirect where you are painting.
     #[must_use]
     pub fn with_layer_id(self, layer_id: LayerId) -> Self {
-        let paint_list = self.ctx.graphics().list(layer_id).clone();
         Self {
             ctx: self.ctx,
-            paint_list,
             layer_id,
             clip_rect: self.clip_rect,
             fade_to_color: None,
         }
     }
 
-    /// redirect
+    /// Create a painter for a sub-region of this [`Painter`].
+    ///
+    /// The clip-rect of the returned [`Painter`] will be the intersection
+    /// of the given rectangle and the `clip_rect()` of the parent [`Painter`].
+    pub fn with_clip_rect(&self, rect: Rect) -> Self {
+        Self {
+            ctx: self.ctx.clone(),
+            layer_id: self.layer_id,
+            clip_rect: rect.intersect(self.clip_rect),
+            fade_to_color: self.fade_to_color,
+        }
+    }
+
+    /// Redirect where you are painting.
     pub fn set_layer_id(&mut self, layer_id: LayerId) {
         self.layer_id = layer_id;
-        self.paint_list = self.ctx.graphics().list(self.layer_id).clone();
     }
 
     /// If set, colors will be modified to look like this
@@ -66,24 +76,20 @@ impl Painter {
         self.fade_to_color = fade_to_color;
     }
 
-    pub(crate) fn visible(&self) -> bool {
+    pub(crate) fn is_visible(&self) -> bool {
         self.fade_to_color != Some(Color32::TRANSPARENT)
     }
 
     /// If `false`, nothing added to the painter will be visible
     pub(crate) fn set_invisible(&mut self) {
-        self.fade_to_color = Some(Color32::TRANSPARENT)
+        self.fade_to_color = Some(Color32::TRANSPARENT);
     }
 
-    /// Create a painter for a sub-region of this `Painter`.
-    ///
-    /// The clip-rect of the returned `Painter` will be the intersection
-    /// of the given rectangle and the `clip_rect()` of this `Painter`.
+    #[deprecated = "Use Painter::with_clip_rect"] // Deprecated in 2022-04-18, before egui 0.18
     pub fn sub_region(&self, rect: Rect) -> Self {
         Self {
             ctx: self.ctx.clone(),
             layer_id: self.layer_id,
-            paint_list: self.paint_list.clone(),
             clip_rect: rect.intersect(self.clip_rect),
             fade_to_color: self.fade_to_color,
         }
@@ -92,16 +98,18 @@ impl Painter {
 
 /// ## Accessors etc
 impl Painter {
-    /// Get a reference to the parent [`CtxRef`].
+    /// Get a reference to the parent [`Context`].
     #[inline(always)]
-    pub fn ctx(&self) -> &CtxRef {
+    pub fn ctx(&self) -> &Context {
         &self.ctx
     }
 
-    /// Available fonts.
+    /// Read-only access to the shared [`Fonts`].
+    ///
+    /// See [`Context`] documentation for how locks work.
     #[inline(always)]
-    pub fn fonts(&self) -> &Fonts {
-        self.ctx.fonts()
+    pub fn fonts<R>(&self, reader: impl FnOnce(&Fonts) -> R) -> R {
+        self.ctx.fonts(reader)
     }
 
     /// Where we paint
@@ -110,14 +118,14 @@ impl Painter {
         self.layer_id
     }
 
-    /// Everything painted in this `Painter` will be clipped against this.
+    /// Everything painted in this [`Painter`] will be clipped against this.
     /// This means nothing outside of this rectangle will be visible on screen.
     #[inline(always)]
     pub fn clip_rect(&self) -> Rect {
         self.clip_rect
     }
 
-    /// Everything painted in this `Painter` will be clipped against this.
+    /// Everything painted in this [`Painter`] will be clipped against this.
     /// This means nothing outside of this rectangle will be visible on screen.
     #[inline(always)]
     pub fn set_clip_rect(&mut self, clip_rect: Rect) {
@@ -145,6 +153,11 @@ impl Painter {
 
 /// ## Low level
 impl Painter {
+    #[inline]
+    fn paint_list<R>(&self, writer: impl FnOnce(&mut PaintList) -> R) -> R {
+        self.ctx.graphics_mut(|g| writer(g.list(self.layer_id)))
+    }
+
     fn transform_shape(&self, shape: &mut Shape) {
         if let Some(fade_to_color) = self.fade_to_color {
             tint_shape_towards(shape, fade_to_color);
@@ -156,30 +169,30 @@ impl Painter {
     /// NOTE: all coordinates are screen coordinates!
     pub fn add(&self, shape: impl Into<Shape>) -> ShapeIdx {
         if self.fade_to_color == Some(Color32::TRANSPARENT) {
-            self.paint_list.lock().add(self.clip_rect, Shape::Noop)
+            self.paint_list(|l| l.add(self.clip_rect, Shape::Noop))
         } else {
             let mut shape = shape.into();
             self.transform_shape(&mut shape);
-            self.paint_list.lock().add(self.clip_rect, shape)
+            self.paint_list(|l| l.add(self.clip_rect, shape))
         }
     }
 
     /// Add many shapes at once.
     ///
     /// Calling this once is generally faster than calling [`Self::add`] multiple times.
-    pub fn extend(&self, mut shapes: Vec<Shape>) {
+    pub fn extend<I: IntoIterator<Item = Shape>>(&self, shapes: I) {
         if self.fade_to_color == Some(Color32::TRANSPARENT) {
             return;
         }
-        if !shapes.is_empty() {
-            if self.fade_to_color.is_some() {
-                for shape in &mut shapes {
-                    self.transform_shape(shape);
-                }
-            }
-
-            self.paint_list.lock().extend(self.clip_rect, shapes);
-        }
+        if self.fade_to_color.is_some() {
+            let shapes = shapes.into_iter().map(|mut shape| {
+                self.transform_shape(&mut shape);
+                shape
+            });
+            self.paint_list(|l| l.extend(self.clip_rect, shapes));
+        } else {
+            self.paint_list(|l| l.extend(self.clip_rect, shapes));
+        };
     }
 
     /// Modify an existing [`Shape`].
@@ -189,27 +202,32 @@ impl Painter {
         }
         let mut shape = shape.into();
         self.transform_shape(&mut shape);
-        self.paint_list.lock().set(idx, self.clip_rect, shape)
+        self.paint_list(|l| l.set(idx, self.clip_rect, shape));
     }
 }
 
 /// ## Debug painting
 impl Painter {
     #[allow(clippy::needless_pass_by_value)]
-    pub fn debug_rect(&mut self, rect: Rect, color: Color32, text: impl ToString) {
-        self.rect_stroke(rect, 0.0, (1.0, color));
-        let text_style = TextStyle::Monospace;
+    pub fn debug_rect(&self, rect: Rect, color: Color32, text: impl ToString) {
+        self.rect(
+            rect,
+            0.0,
+            color.additive().linear_multiply(0.015),
+            (1.0, color),
+        );
         self.text(
             rect.min,
             Align2::LEFT_TOP,
             text.to_string(),
-            text_style,
+            FontId::monospace(12.0),
             color,
         );
     }
 
     pub fn error(&self, pos: Pos2, text: impl std::fmt::Display) -> Rect {
-        self.debug_text(pos, Align2::LEFT_TOP, Color32::RED, format!("🔥 {}", text))
+        let color = self.ctx.style().visuals.error_fg_color;
+        self.debug_text(pos, Align2::LEFT_TOP, color, format!("🔥 {}", text))
     }
 
     /// text with a background
@@ -221,13 +239,13 @@ impl Painter {
         color: Color32,
         text: impl ToString,
     ) -> Rect {
-        let galley = self.layout_no_wrap(text.to_string(), TextStyle::Monospace, color);
+        let galley = self.layout_no_wrap(text.to_string(), FontId::monospace(12.0), color);
         let rect = anchor.anchor_rect(Rect::from_min_size(pos, galley.size()));
         let frame_rect = rect.expand(2.0);
         self.add(Shape::rect_filled(
             frame_rect,
             0.0,
-            Color32::from_black_alpha(240),
+            Color32::from_black_alpha(150),
         ));
         self.galley(rect.min, galley);
         frame_rect
@@ -236,6 +254,7 @@ impl Painter {
 
 /// # Paint different primitives
 impl Painter {
+    /// Paints a line from the first point to the second.
     pub fn line_segment(&self, points: [Pos2; 2], stroke: impl Into<Stroke>) {
         self.add(Shape::LineSegment {
             points,
@@ -243,6 +262,16 @@ impl Painter {
         });
     }
 
+    /// Paints a horizontal line.
+    pub fn hline(&self, x: RangeInclusive<f32>, y: f32, stroke: impl Into<Stroke>) {
+        self.add(Shape::hline(x, y, stroke));
+    }
+
+    /// Paints a vertical line.
+    pub fn vline(&self, x: f32, y: RangeInclusive<f32>, stroke: impl Into<Stroke>) {
+        self.add(Shape::vline(x, y, stroke));
+    }
+
     pub fn circle(
         &self,
         center: Pos2,
@@ -279,31 +308,41 @@ impl Painter {
     pub fn rect(
         &self,
         rect: Rect,
-        corner_radius: f32,
+        rounding: impl Into<Rounding>,
         fill_color: impl Into<Color32>,
         stroke: impl Into<Stroke>,
     ) {
         self.add(RectShape {
             rect,
-            corner_radius,
+            rounding: rounding.into(),
             fill: fill_color.into(),
             stroke: stroke.into(),
         });
     }
 
-    pub fn rect_filled(&self, rect: Rect, corner_radius: f32, fill_color: impl Into<Color32>) {
+    pub fn rect_filled(
+        &self,
+        rect: Rect,
+        rounding: impl Into<Rounding>,
+        fill_color: impl Into<Color32>,
+    ) {
         self.add(RectShape {
             rect,
-            corner_radius,
+            rounding: rounding.into(),
             fill: fill_color.into(),
             stroke: Default::default(),
         });
     }
 
-    pub fn rect_stroke(&self, rect: Rect, corner_radius: f32, stroke: impl Into<Stroke>) {
+    pub fn rect_stroke(
+        &self,
+        rect: Rect,
+        rounding: impl Into<Rounding>,
+        stroke: impl Into<Stroke>,
+    ) {
         self.add(RectShape {
             rect,
-            corner_radius,
+            rounding: rounding.into(),
             fill: Default::default(),
             stroke: stroke.into(),
         });
@@ -320,13 +359,23 @@ impl Painter {
         self.line_segment([tip, tip - tip_length * (rot * dir)], stroke);
         self.line_segment([tip, tip - tip_length * (rot.inverse() * dir)], stroke);
     }
+
+    /// An image at the given position.
+    ///
+    /// `uv` should normally be `Rect::from_min_max(pos2(0.0, 0.0), pos2(1.0, 1.0))`
+    /// unless you want to crop or flip the image.
+    ///
+    /// `tint` is a color multiplier. Use [`Color32::WHITE`] if you don't want to tint the image.
+    pub fn image(&self, texture_id: epaint::TextureId, rect: Rect, uv: Rect, tint: Color32) {
+        self.add(Shape::image(texture_id, rect, uv, tint));
+    }
 }
 
 /// ## Text
 impl Painter {
     /// Lay out and paint some text.
     ///
-    /// To center the text at the given position, use `anchor: (Center, Center)`.
+    /// To center the text at the given position, use `Align2::CENTER_CENTER`.
     ///
     /// To find out the size of text before painting it, use
     /// [`Self::layout`] or [`Self::layout_no_wrap`].
@@ -338,10 +387,10 @@ impl Painter {
         pos: Pos2,
         anchor: Align2,
         text: impl ToString,
-        text_style: TextStyle,
+        font_id: FontId,
         text_color: Color32,
     ) -> Rect {
-        let galley = self.layout_no_wrap(text.to_string(), text_style, text_color);
+        let galley = self.layout_no_wrap(text.to_string(), font_id, text_color);
         let rect = anchor.anchor_rect(Rect::from_min_size(pos, galley.size()));
         self.galley(rect.min, galley);
         rect
@@ -354,11 +403,11 @@ impl Painter {
     pub fn layout(
         &self,
         text: String,
-        text_style: TextStyle,
+        font_id: FontId,
         color: crate::Color32,
         wrap_width: f32,
-    ) -> std::sync::Arc<Galley> {
-        self.fonts().layout(text, text_style, color, wrap_width)
+    ) -> Arc<Galley> {
+        self.fonts(|f| f.layout(text, font_id, color, wrap_width))
     }
 
     /// Will line break at `\n`.
@@ -368,19 +417,19 @@ impl Painter {
     pub fn layout_no_wrap(
         &self,
         text: String,
-        text_style: TextStyle,
+        font_id: FontId,
         color: crate::Color32,
-    ) -> std::sync::Arc<Galley> {
-        self.fonts().layout(text, text_style, color, f32::INFINITY)
+    ) -> Arc<Galley> {
+        self.fonts(|f| f.layout(text, font_id, color, f32::INFINITY))
     }
 
     /// Paint text that has already been layed out in a [`Galley`].
     ///
-    /// You can create the `Galley` with [`Self::layout`].
+    /// You can create the [`Galley`] with [`Self::layout`].
     ///
     /// If you want to change the color of the text, use [`Self::galley_with_color`].
     #[inline(always)]
-    pub fn galley(&self, pos: Pos2, galley: std::sync::Arc<Galley>) {
+    pub fn galley(&self, pos: Pos2, galley: Arc<Galley>) {
         if !galley.is_empty() {
             self.add(Shape::galley(pos, galley));
         }
@@ -388,27 +437,19 @@ impl Painter {
 
     /// Paint text that has already been layed out in a [`Galley`].
     ///
-    /// You can create the `Galley` with [`Self::layout`].
+    /// You can create the [`Galley`] with [`Self::layout`].
     ///
     /// The text color in the [`Galley`] will be replaced with the given color.
     #[inline(always)]
-    pub fn galley_with_color(
-        &self,
-        pos: Pos2,
-        galley: std::sync::Arc<Galley>,
-        text_color: Color32,
-    ) {
+    pub fn galley_with_color(&self, pos: Pos2, galley: Arc<Galley>, text_color: Color32) {
         if !galley.is_empty() {
-            self.add(TextShape {
-                override_text_color: Some(text_color),
-                ..TextShape::new(pos, galley)
-            });
+            self.add(Shape::galley_with_color(pos, galley, text_color));
         }
     }
 }
 
 fn tint_shape_towards(shape: &mut Shape, target: Color32) {
     epaint::shape_transform::adjust_colors(shape, &|color| {
-        *color = crate::color::tint_color_towards(*color, target);
+        *color = crate::ecolor::tint_color_towards(*color, target);
     });
 }

crates/egui/src/placer.rs

@@ -70,7 +70,7 @@ impl Placer {
 
     #[inline(always)]
     pub(crate) fn set_cursor(&mut self, cursor: Rect) {
-        self.region.cursor = cursor
+        self.region.cursor = cursor;
     }
 }
 
@@ -106,6 +106,7 @@ impl Placer {
     /// This is what you then pass to `advance_after_rects`.
     /// Use `justify_and_align` to get the inner `widget_rect`.
     pub(crate) fn next_space(&self, child_size: Vec2, item_spacing: Vec2) -> Rect {
+        egui_assert!(child_size.is_finite() && child_size.x >= 0.0 && child_size.y >= 0.0);
         self.region.sanity_check();
         if let Some(grid) = &self.grid {
             grid.next_cell(self.region.cursor, child_size)
@@ -162,14 +163,14 @@ impl Placer {
         self.region.sanity_check();
 
         if let Some(grid) = &mut self.grid {
-            grid.advance(&mut self.region.cursor, frame_rect, widget_rect)
+            grid.advance(&mut self.region.cursor, frame_rect, widget_rect);
         } else {
             self.layout.advance_after_rects(
                 &mut self.region.cursor,
                 frame_rect,
                 widget_rect,
                 item_spacing,
-            )
+            );
         }
 
         self.expand_to_include_rect(frame_rect); // e.g. for centered layouts: pretend we used whole frame
@@ -181,9 +182,9 @@ impl Placer {
     /// Otherwise does nothing.
     pub(crate) fn end_row(&mut self, item_spacing: Vec2, painter: &Painter) {
         if let Some(grid) = &mut self.grid {
-            grid.end_row(&mut self.region.cursor, painter)
+            grid.end_row(&mut self.region.cursor, painter);
         } else {
-            self.layout.end_row(&mut self.region, item_spacing)
+            self.layout.end_row(&mut self.region, item_spacing);
         }
     }
 
@@ -272,7 +273,7 @@ impl Placer {
             painter.debug_text(align.pos_in_rect(&rect), align, stroke.color, text);
         } else {
             self.layout
-                .paint_text_at_cursor(painter, &self.region, stroke, text)
+                .paint_text_at_cursor(painter, &self.region, stroke, text);
         }
     }
 }

crates/egui/src/response.rs

@@ -1,29 +1,30 @@
 use crate::{
-    emath::{lerp, Align, Pos2, Rect, Vec2},
-    CursorIcon, PointerButton, NUM_POINTER_BUTTONS,
+    emath::{Align, Pos2, Rect, Vec2},
+    menu, Context, CursorIcon, Id, LayerId, PointerButton, Sense, Ui, WidgetText,
+    NUM_POINTER_BUTTONS,
 };
-use crate::{CtxRef, Id, LayerId, Sense, Ui};
 
 // ----------------------------------------------------------------------------
 
 /// The result of adding a widget to a [`Ui`].
 ///
-/// A `Response` lets you know whether or not a widget is being hovered, clicked or dragged.
+/// A [`Response`] lets you know whether or not a widget is being hovered, clicked or dragged.
 /// It also lets you easily show a tooltip on hover.
 ///
-/// Whenever something gets added to a `Ui`, a `Response` object is returned.
-/// [`ui.add`] returns a `Response`, as does [`ui.button`], and all similar shortcuts.
+/// Whenever something gets added to a [`Ui`], a [`Response`] object is returned.
+/// [`ui.add`] returns a [`Response`], as does [`ui.button`], and all similar shortcuts.
+// TODO(emilk): we should be using bit sets instead of so many bools
 #[derive(Clone)]
 pub struct Response {
     // CONTEXT:
     /// Used for optionally showing a tooltip and checking for more interactions.
-    pub ctx: CtxRef,
+    pub ctx: Context,
 
     // IN:
     /// Which layer the widget is part of.
     pub layer_id: LayerId,
 
-    /// The `Id` of the widget/area this response pertains.
+    /// The [`Id`] of the widget/area this response pertains.
     pub id: Id,
 
     /// The area of the screen we are talking about.
@@ -34,37 +35,54 @@ pub struct Response {
 
     /// Was the widget enabled?
     /// If `false`, there was no interaction attempted (not even hover).
-    pub(crate) enabled: bool,
+    #[doc(hidden)]
+    pub enabled: bool,
 
     // OUT:
     /// The pointer is hovering above this widget or the widget was clicked/tapped this frame.
-    pub(crate) hovered: bool,
+    #[doc(hidden)]
+    pub hovered: bool,
+
+    /// The widget is highlighted via a call to [`Self::highlight`] or [`Context::highlight_widget`].
+    #[doc(hidden)]
+    pub highlighted: bool,
 
     /// The pointer clicked this thing this frame.
-    pub(crate) clicked: [bool; NUM_POINTER_BUTTONS],
+    #[doc(hidden)]
+    pub clicked: [bool; NUM_POINTER_BUTTONS],
 
-    // TODO: `released` for sliders
+    // TODO(emilk): `released` for sliders
     /// The thing was double-clicked.
-    pub(crate) double_clicked: [bool; NUM_POINTER_BUTTONS],
+    #[doc(hidden)]
+    pub double_clicked: [bool; NUM_POINTER_BUTTONS],
+
+    /// The thing was triple-clicked.
+    pub triple_clicked: [bool; NUM_POINTER_BUTTONS],
 
     /// The widgets is being dragged
-    pub(crate) dragged: bool,
+    #[doc(hidden)]
+    pub dragged: bool,
 
     /// The widget was being dragged, but now it has been released.
-    pub(crate) drag_released: bool,
+    #[doc(hidden)]
+    pub drag_released: bool,
 
     /// Is the pointer button currently down on this widget?
     /// This is true if the pointer is pressing down or dragging a widget
-    pub(crate) is_pointer_button_down_on: bool,
+    #[doc(hidden)]
+    pub is_pointer_button_down_on: bool,
 
     /// Where the pointer (mouse/touch) were when when this widget was clicked or dragged.
     /// `None` if the widget is not being interacted with.
-    pub(crate) interact_pointer_pos: Option<Pos2>,
+    #[doc(hidden)]
+    pub interact_pointer_pos: Option<Pos2>,
 
     /// What the underlying data changed?
-    /// e.g. the slider was dragged, text was entered in a `TextEdit` etc.
-    /// Always `false` for something like a `Button`.
-    pub(crate) changed: bool,
+    ///
+    /// e.g. the slider was dragged, text was entered in a [`TextEdit`](crate::TextEdit) etc.
+    /// Always `false` for something like a [`Button`](crate::Button).
+    #[doc(hidden)]
+    pub changed: bool,
 }
 
 impl std::fmt::Debug for Response {
@@ -77,8 +95,10 @@ impl std::fmt::Debug for Response {
             sense,
             enabled,
             hovered,
+            highlighted,
             clicked,
             double_clicked,
+            triple_clicked,
             dragged,
             drag_released,
             is_pointer_button_down_on,
@@ -92,8 +112,10 @@ impl std::fmt::Debug for Response {
             .field("sense", sense)
             .field("enabled", enabled)
             .field("hovered", hovered)
+            .field("highlighted", highlighted)
             .field("clicked", clicked)
             .field("double_clicked", double_clicked)
+            .field("triple_clicked", triple_clicked)
             .field("dragged", dragged)
             .field("drag_released", drag_released)
             .field("is_pointer_button_down_on", is_pointer_button_down_on)
@@ -138,33 +160,45 @@ impl Response {
         self.double_clicked[PointerButton::Primary as usize]
     }
 
+    /// Returns true if this widget was triple-clicked this frame by the primary button.
+    pub fn triple_clicked(&self) -> bool {
+        self.triple_clicked[PointerButton::Primary as usize]
+    }
+
     /// Returns true if this widget was double-clicked this frame by the given button.
     pub fn double_clicked_by(&self, button: PointerButton) -> bool {
         self.double_clicked[button as usize]
     }
 
+    /// Returns true if this widget was triple-clicked this frame by the given button.
+    pub fn triple_clicked_by(&self, button: PointerButton) -> bool {
+        self.triple_clicked[button as usize]
+    }
+
     /// `true` if there was a click *outside* this widget this frame.
     pub fn clicked_elsewhere(&self) -> bool {
         // We do not use self.clicked(), because we want to catch all clicks within our frame,
         // even if we aren't clickable (or even enabled).
         // This is important for windows and such that should close then the user clicks elsewhere.
-        let pointer = &self.ctx.input().pointer;
+        self.ctx.input(|i| {
+            let pointer = &i.pointer;
 
-        if pointer.any_click() {
-            // We detect clicks/hover on a "interact_rect" that is slightly larger than
-            // self.rect. See Context::interact.
-            // This means we can be hovered and clicked even though `!self.rect.contains(pos)` is true,
-            // hence the extra complexity here.
-            if self.hovered() {
-                false
-            } else if let Some(pos) = pointer.interact_pos() {
-                !self.rect.contains(pos)
+            if pointer.any_click() {
+                // We detect clicks/hover on a "interact_rect" that is slightly larger than
+                // self.rect. See Context::interact.
+                // This means we can be hovered and clicked even though `!self.rect.contains(pos)` is true,
+                // hence the extra complexity here.
+                if self.hovered() {
+                    false
+                } else if let Some(pos) = pointer.interact_pos() {
+                    !self.rect.contains(pos)
+                } else {
+                    false // clicked without a pointer, weird
+                }
             } else {
-                false // clicked without a pointer, weird
+                false
             }
-        } else {
-            false
-        }
+        })
     }
 
     /// Was the widget enabled?
@@ -176,19 +210,34 @@ impl Response {
     }
 
     /// The pointer is hovering above this widget or the widget was clicked/tapped this frame.
+    ///
+    /// Note that this is slightly different from checking `response.rect.contains(pointer_pos)`.
+    /// For one, the hover rectangle is slightly larger, by half of the current item spacing
+    /// (to make it easier to click things). But `hovered` also checks that no other area
+    /// is covering this response rectangle.
     #[inline(always)]
     pub fn hovered(&self) -> bool {
         self.hovered
     }
 
+    /// The widget is highlighted via a call to [`Self::highlight`] or [`Context::highlight_widget`].
+    #[doc(hidden)]
+    pub fn highlighted(&self) -> bool {
+        self.highlighted
+    }
+
     /// This widget has the keyboard focus (i.e. is receiving key presses).
+    ///
+    /// This function only returns true if the UI as a whole (e.g. window)
+    /// also has the keyboard focus. That makes this function suitable
+    /// for style choices, e.g. a thicker border around focused widgets.
     pub fn has_focus(&self) -> bool {
-        self.ctx.memory().has_focus(self.id)
+        self.ctx.input(|i| i.raw.has_focus) && self.ctx.memory(|mem| mem.has_focus(self.id))
     }
 
     /// True if this widget has keyboard focus this frame, but didn't last frame.
     pub fn gained_focus(&self) -> bool {
-        self.ctx.memory().gained_focus(self.id)
+        self.ctx.memory(|mem| mem.gained_focus(self.id))
     }
 
     /// The widget had keyboard focus and lost it,
@@ -196,32 +245,33 @@ impl Response {
     /// or (in case of a [`crate::TextEdit`]) because the user pressed enter.
     ///
     /// ```
-    /// # let mut ui = egui::Ui::__test();
+    /// # egui::__run_test_ui(|ui| {
     /// # let mut my_text = String::new();
     /// # fn do_request(_: &str) {}
     /// let response = ui.text_edit_singleline(&mut my_text);
-    /// if response.lost_focus() && ui.input().key_pressed(egui::Key::Enter) {
+    /// if response.lost_focus() && ui.input(|i| i.key_pressed(egui::Key::Enter)) {
     ///     do_request(&my_text);
     /// }
+    /// # });
     /// ```
     pub fn lost_focus(&self) -> bool {
-        self.ctx.memory().lost_focus(self.id)
+        self.ctx.memory(|mem| mem.lost_focus(self.id))
     }
 
     /// Request that this widget get keyboard focus.
     pub fn request_focus(&self) {
-        self.ctx.memory().request_focus(self.id)
+        self.ctx.memory_mut(|mem| mem.request_focus(self.id));
     }
 
     /// Surrender keyboard focus for this widget.
     pub fn surrender_focus(&self) {
-        self.ctx.memory().surrender_focus(self.id)
+        self.ctx.memory_mut(|mem| mem.surrender_focus(self.id));
     }
 
     /// The widgets is being dragged.
     ///
     /// To find out which button(s), query [`crate::PointerState::button_down`]
-    /// (`ui.input().pointer.button_down(…)`).
+    /// (`ui.input(|i| i.pointer.button_down(…))`).
     ///
     /// Note that the widget must be sensing drags with [`Sense::drag`].
     /// [`crate::DragValue`] senses drags; [`crate::Label`] does not (unless you call [`crate::Label::sense`]).
@@ -233,12 +283,17 @@ impl Response {
     }
 
     pub fn dragged_by(&self, button: PointerButton) -> bool {
-        self.dragged() && self.ctx.input().pointer.button_down(button)
+        self.dragged() && self.ctx.input(|i| i.pointer.button_down(button))
     }
 
     /// Did a drag on this widgets begin this frame?
     pub fn drag_started(&self) -> bool {
-        self.dragged && self.ctx.input().pointer.any_pressed()
+        self.dragged && self.ctx.input(|i| i.pointer.any_pressed())
+    }
+
+    /// Did a drag on this widgets by the button begin this frame?
+    pub fn drag_started_by(&self, button: PointerButton) -> bool {
+        self.drag_started() && self.ctx.input(|i| i.pointer.button_pressed(button))
     }
 
     /// The widget was being dragged, but now it has been released.
@@ -246,10 +301,15 @@ impl Response {
         self.drag_released
     }
 
+    /// The widget was being dragged by the button, but now it has been released.
+    pub fn drag_released_by(&self, button: PointerButton) -> bool {
+        self.drag_released() && self.ctx.input(|i| i.pointer.button_released(button))
+    }
+
     /// If dragged, how many points were we dragged and in what direction?
     pub fn drag_delta(&self) -> Vec2 {
         if self.dragged() {
-            self.ctx.input().pointer.delta()
+            self.ctx.input(|i| i.pointer.delta())
         } else {
             Vec2::ZERO
         }
@@ -265,7 +325,7 @@ impl Response {
     /// None if the pointer is outside the response area.
     pub fn hover_pos(&self) -> Option<Pos2> {
         if self.hovered() {
-            self.ctx.input().pointer.hover_pos()
+            self.ctx.input(|i| i.pointer.hover_pos())
         } else {
             None
         }
@@ -280,14 +340,14 @@ impl Response {
 
     /// What the underlying data changed?
     ///
-    /// e.g. the slider was dragged, text was entered in a `TextEdit` etc.
-    /// Always `false` for something like a `Button`.
+    /// e.g. the slider was dragged, text was entered in a [`TextEdit`](crate::TextEdit) etc.
+    /// Always `false` for something like a [`Button`](crate::Button).
     ///
     /// Can sometimes be `true` even though the data didn't changed
     /// (e.g. if the user entered a character and erased it the same frame).
     ///
     /// This is not set if the *view* of the data was changed.
-    /// For instance, moving the cursor in a `TextEdit` does not set this to `true`.
+    /// For instance, moving the cursor in a [`TextEdit`](crate::TextEdit) does not set this to `true`.
     #[inline(always)]
     pub fn changed(&self) -> bool {
         self.changed
@@ -349,27 +409,36 @@ impl Response {
         self
     }
 
+    /// Was the tooltip open last frame?
+    pub fn is_tooltip_open(&self) -> bool {
+        crate::popup::was_tooltip_open_last_frame(&self.ctx, self.id.with("__tooltip"))
+    }
+
     fn should_show_hover_ui(&self) -> bool {
-        if self.ctx.memory().everything_is_visible() {
+        if self.ctx.memory(|mem| mem.everything_is_visible()) {
             return true;
         }
 
-        if !self.hovered || !self.ctx.input().pointer.has_pointer() {
+        if !self.hovered || !self.ctx.input(|i| i.pointer.has_pointer()) {
             return false;
         }
 
-        if self.ctx.style().interaction.show_tooltips_only_when_still
-            && !self.ctx.input().pointer.is_still()
-        {
-            // wait for mouse to stop
-            self.ctx.request_repaint();
-            return false;
+        if self.ctx.style().interaction.show_tooltips_only_when_still {
+            // We only show the tooltip when the mouse pointer is still,
+            // but once shown we keep showing it until the mouse leaves the parent.
+
+            if !self.ctx.input(|i| i.pointer.is_still()) && !self.is_tooltip_open() {
+                // wait for mouse to stop
+                self.ctx.request_repaint();
+                return false;
+            }
         }
 
         // We don't want tooltips of things while we are dragging them,
         // but we do want tooltips while holding down on an item on a touch screen.
-        if self.ctx.input().pointer.any_down()
-            && self.ctx.input().pointer.has_moved_too_much_for_a_click
+        if self
+            .ctx
+            .input(|i| i.pointer.any_down() && i.pointer.has_moved_too_much_for_a_click)
         {
             return false;
         }
@@ -377,6 +446,14 @@ impl Response {
         true
     }
 
+    /// Like `on_hover_text`, but show the text next to cursor.
+    #[doc(alias = "tooltip")]
+    pub fn on_hover_text_at_pointer(self, text: impl Into<WidgetText>) -> Self {
+        self.on_hover_ui_at_pointer(|ui| {
+            ui.add(crate::widgets::Label::new(text));
+        })
+    }
+
     /// Show this text if the widget was hovered (i.e. a tooltip).
     ///
     /// The text will not be visible if the widget is not enabled.
@@ -384,14 +461,25 @@ impl Response {
     ///
     /// If you call this multiple times the tooltips will stack underneath the previous ones.
     #[doc(alias = "tooltip")]
-    pub fn on_hover_text(self, text: impl ToString) -> Self {
+    pub fn on_hover_text(self, text: impl Into<WidgetText>) -> Self {
         self.on_hover_ui(|ui| {
             ui.add(crate::widgets::Label::new(text));
         })
     }
 
+    /// Highlight this widget, to make it look like it is hovered, even if it isn't.
+    ///
+    /// The highlight takes on frame to take effect if you call this after the widget has been fully rendered.
+    ///
+    /// See also [`Context::highlight_widget`].
+    pub fn highlight(mut self) -> Self {
+        self.ctx.highlight_widget(self.id);
+        self.highlighted = true;
+        self
+    }
+
     /// Show this text when hovering if the widget is disabled.
-    pub fn on_disabled_hover_text(self, text: impl ToString) -> Self {
+    pub fn on_disabled_hover_text(self, text: impl Into<WidgetText>) -> Self {
         self.on_disabled_hover_ui(|ui| {
             ui.add(crate::widgets::Label::new(text));
         })
@@ -400,23 +488,33 @@ impl Response {
     /// When hovered, use this icon for the mouse cursor.
     pub fn on_hover_cursor(self, cursor: CursorIcon) -> Self {
         if self.hovered() {
-            self.ctx.output().cursor_icon = cursor;
+            self.ctx.set_cursor_icon(cursor);
         }
         self
     }
 
-    /// Check for more interactions (e.g. sense clicks on a `Response` returned from a label).
+    /// When hovered or dragged, use this icon for the mouse cursor.
+    pub fn on_hover_and_drag_cursor(self, cursor: CursorIcon) -> Self {
+        if self.hovered() || self.dragged() {
+            self.ctx.set_cursor_icon(cursor);
+        }
+        self
+    }
+
+    /// Check for more interactions (e.g. sense clicks on a [`Response`] returned from a label).
     ///
     /// Note that this call will not add any hover-effects to the widget, so when possible
-    /// it is better to give the widget a `Sense` instead, e.g. using [`crate::Label::sense`].
+    /// it is better to give the widget a [`Sense`] instead, e.g. using [`crate::Label::sense`].
     ///
     /// ```
-    /// # let mut ui = egui::Ui::__test();
+    /// # egui::__run_test_ui(|ui| {
     /// let response = ui.label("hello");
     /// assert!(!response.clicked()); // labels don't sense clicks by default
     /// let response = response.interact(egui::Sense::click());
     /// if response.clicked() { /* … */ }
+    /// # });
     /// ```
+    #[must_use]
     pub fn interact(&self, sense: Sense) -> Self {
         self.ctx.interact_with_hovered(
             self.layer_id,
@@ -428,26 +526,29 @@ impl Response {
         )
     }
 
-    /// Move the scroll to this UI with the specified alignment.
+    /// Adjust the scroll position until this UI becomes visible.
+    ///
+    /// If `align` is `None`, it'll scroll enough to bring the UI into view.
+    ///
+    /// See also: [`Ui::scroll_to_cursor`], [`Ui::scroll_to_rect`]. [`Ui::scroll_with_delta`].
     ///
     /// ```
-    /// # use egui::Align;
-    /// # let mut ui = &mut egui::Ui::__test();
+    /// # egui::__run_test_ui(|ui| {
     /// egui::ScrollArea::vertical().show(ui, |ui| {
     ///     for i in 0..1000 {
-    ///         let response = ui.button(format!("Button {}", i));
+    ///         let response = ui.button("Scroll to me");
     ///         if response.clicked() {
-    ///             response.scroll_to_me(Align::Center);
+    ///             response.scroll_to_me(Some(egui::Align::Center));
     ///         }
     ///     }
     /// });
+    /// # });
     /// ```
-    pub fn scroll_to_me(&self, align: Align) {
-        let scroll_target = lerp(self.rect.x_range(), align.to_factor());
-        self.ctx.frame_state().scroll_target[0] = Some((scroll_target, align));
-
-        let scroll_target = lerp(self.rect.y_range(), align.to_factor());
-        self.ctx.frame_state().scroll_target[1] = Some((scroll_target, align));
+    pub fn scroll_to_me(&self, align: Option<Align>) {
+        self.ctx.frame_state_mut(|state| {
+            state.scroll_target[0] = Some((self.rect.x_range(), align));
+            state.scroll_target[1] = Some((self.rect.y_range(), align));
+        });
     }
 
     /// For accessibility.
@@ -459,6 +560,8 @@ impl Response {
             Some(OutputEvent::Clicked(make_info()))
         } else if self.double_clicked() {
             Some(OutputEvent::DoubleClicked(make_info()))
+        } else if self.triple_clicked() {
+            Some(OutputEvent::TripleClicked(make_info()))
         } else if self.gained_focus() {
             Some(OutputEvent::FocusGained(make_info()))
         } else if self.changed {
@@ -467,14 +570,135 @@ impl Response {
             None
         };
         if let Some(event) = event {
-            self.ctx.output().events.push(event);
+            self.output_event(event);
+        } else {
+            #[cfg(feature = "accesskit")]
+            self.ctx.accesskit_node_builder(self.id, |builder| {
+                self.fill_accesskit_node_from_widget_info(builder, make_info());
+            });
         }
     }
+
+    pub fn output_event(&self, event: crate::output::OutputEvent) {
+        #[cfg(feature = "accesskit")]
+        self.ctx.accesskit_node_builder(self.id, |builder| {
+            self.fill_accesskit_node_from_widget_info(builder, event.widget_info().clone());
+        });
+        self.ctx.output_mut(|o| o.events.push(event));
+    }
+
+    #[cfg(feature = "accesskit")]
+    pub(crate) fn fill_accesskit_node_common(&self, builder: &mut accesskit::NodeBuilder) {
+        builder.set_bounds(accesskit::Rect {
+            x0: self.rect.min.x.into(),
+            y0: self.rect.min.y.into(),
+            x1: self.rect.max.x.into(),
+            y1: self.rect.max.y.into(),
+        });
+        if self.sense.focusable {
+            builder.add_action(accesskit::Action::Focus);
+        }
+        if self.sense.click && builder.default_action_verb().is_none() {
+            builder.set_default_action_verb(accesskit::DefaultActionVerb::Click);
+        }
+    }
+
+    #[cfg(feature = "accesskit")]
+    fn fill_accesskit_node_from_widget_info(
+        &self,
+        builder: &mut accesskit::NodeBuilder,
+        info: crate::WidgetInfo,
+    ) {
+        use crate::WidgetType;
+        use accesskit::{CheckedState, Role};
+
+        self.fill_accesskit_node_common(builder);
+        builder.set_role(match info.typ {
+            WidgetType::Label => Role::StaticText,
+            WidgetType::Link => Role::Link,
+            WidgetType::TextEdit => Role::TextField,
+            WidgetType::Button | WidgetType::ImageButton | WidgetType::CollapsingHeader => {
+                Role::Button
+            }
+            WidgetType::Checkbox => Role::CheckBox,
+            WidgetType::RadioButton => Role::RadioButton,
+            WidgetType::SelectableLabel => Role::ToggleButton,
+            WidgetType::ComboBox => Role::PopupButton,
+            WidgetType::Slider => Role::Slider,
+            WidgetType::DragValue => Role::SpinButton,
+            WidgetType::ColorButton => Role::ColorWell,
+            WidgetType::Other => Role::Unknown,
+        });
+        if let Some(label) = info.label {
+            builder.set_name(label);
+        }
+        if let Some(value) = info.current_text_value {
+            builder.set_value(value);
+        }
+        if let Some(value) = info.value {
+            builder.set_numeric_value(value);
+        }
+        if let Some(selected) = info.selected {
+            builder.set_checked_state(if selected {
+                CheckedState::True
+            } else {
+                CheckedState::False
+            });
+        }
+    }
+
+    /// Associate a label with a control for accessibility.
+    ///
+    /// # Example
+    ///
+    /// ```
+    /// # egui::__run_test_ui(|ui| {
+    /// # let mut text = "Arthur".to_string();
+    /// ui.horizontal(|ui| {
+    ///     let label = ui.label("Your name: ");
+    ///     ui.text_edit_singleline(&mut text).labelled_by(label.id);
+    /// });
+    /// # });
+    /// ```
+    pub fn labelled_by(self, id: Id) -> Self {
+        #[cfg(feature = "accesskit")]
+        self.ctx.accesskit_node_builder(self.id, |builder| {
+            builder.push_labelled_by(id.accesskit_id());
+        });
+        #[cfg(not(feature = "accesskit"))]
+        {
+            let _ = id;
+        }
+
+        self
+    }
+
+    /// Response to secondary clicks (right-clicks) by showing the given menu.
+    ///
+    /// ```
+    /// # use egui::{Label, Sense};
+    /// # egui::__run_test_ui(|ui| {
+    /// let response = ui.add(Label::new("Right-click me!").sense(Sense::click()));
+    /// response.context_menu(|ui| {
+    ///     if ui.button("Close the menu").clicked() {
+    ///         ui.close_menu();
+    ///     }
+    /// });
+    /// # });
+    /// ```
+    ///
+    /// See also: [`Ui::menu_button`] and [`Ui::close_menu`].
+    pub fn context_menu(self, add_contents: impl FnOnce(&mut Ui)) -> Self {
+        menu::context_menu(&self, add_contents);
+        self
+    }
 }
 
 impl Response {
     /// A logical "or" operation.
     /// For instance `a.union(b).hovered` means "was either a or b hovered?".
+    ///
+    /// The resulting [`Self::id`] will come from the first (`self`) argument.
     pub fn union(&self, other: Self) -> Self {
         assert!(self.ctx == other.ctx);
         crate::egui_assert!(
@@ -489,15 +713,27 @@ impl Response {
             sense: self.sense.union(other.sense),
             enabled: self.enabled || other.enabled,
             hovered: self.hovered || other.hovered,
+            highlighted: self.highlighted || other.highlighted,
             clicked: [
                 self.clicked[0] || other.clicked[0],
                 self.clicked[1] || other.clicked[1],
                 self.clicked[2] || other.clicked[2],
+                self.clicked[3] || other.clicked[3],
+                self.clicked[4] || other.clicked[4],
             ],
             double_clicked: [
                 self.double_clicked[0] || other.double_clicked[0],
                 self.double_clicked[1] || other.double_clicked[1],
                 self.double_clicked[2] || other.double_clicked[2],
+                self.double_clicked[3] || other.double_clicked[3],
+                self.double_clicked[4] || other.double_clicked[4],
+            ],
+            triple_clicked: [
+                self.triple_clicked[0] || other.triple_clicked[0],
+                self.triple_clicked[1] || other.triple_clicked[1],
+                self.triple_clicked[2] || other.triple_clicked[2],
+                self.triple_clicked[3] || other.triple_clicked[3],
+                self.triple_clicked[4] || other.triple_clicked[4],
             ],
             dragged: self.dragged || other.dragged,
             drag_released: self.drag_released || other.drag_released,
@@ -509,6 +745,13 @@ impl Response {
     }
 }
 
+impl Response {
+    /// Returns a response with a modified [`Self::rect`].
+    pub fn with_new_rect(self, rect: Rect) -> Self {
+        Self { rect, ..self }
+    }
+}
+
 /// To summarize the response from many widgets you can use this pattern:
 ///
 /// ```
@@ -518,9 +761,10 @@ impl Response {
 /// }
 /// ```
 ///
-/// Now `draw_vec2(ui, foo).hovered` is true if either `DragValue` were hovered.
+/// Now `draw_vec2(ui, foo).hovered` is true if either [`DragValue`](crate::DragValue) were hovered.
 impl std::ops::BitOr for Response {
     type Output = Self;
+
     fn bitor(self, rhs: Self) -> Self {
         self.union(rhs)
     }
@@ -529,12 +773,13 @@ impl std::ops::BitOr for Response {
 /// To summarize the response from many widgets you can use this pattern:
 ///
 /// ```
-/// # let mut ui = egui::Ui::__test();
+/// # egui::__run_test_ui(|ui| {
 /// # let (widget_a, widget_b, widget_c) = (egui::Label::new("a"), egui::Label::new("b"), egui::Label::new("c"));
 /// let mut response = ui.add(widget_a);
 /// response |= ui.add(widget_b);
 /// response |= ui.add(widget_c);
 /// if response.hovered() { ui.label("You hovered at least one of the widgets"); }
+/// # });
 /// ```
 impl std::ops::BitOrAssign for Response {
     fn bitor_assign(&mut self, rhs: Self) {
@@ -548,17 +793,21 @@ impl std::ops::BitOrAssign for Response {
 /// the results of the inner function and the ui as a whole, e.g.:
 ///
 /// ```
-/// # let ui = &mut egui::Ui::__test();
+/// # egui::__run_test_ui(|ui| {
 /// let inner_resp = ui.horizontal(|ui| {
 ///     ui.label("Blah blah");
 ///     42
 /// });
 /// inner_resp.response.on_hover_text("You hovered the horizontal layout");
 /// assert_eq!(inner_resp.inner, 42);
+/// # });
 /// ```
 #[derive(Debug)]
 pub struct InnerResponse<R> {
+    /// What the user closure returned.
     pub inner: R,
+
+    /// The response of the area.
     pub response: Response,
 }
 

crates/egui/src/sense.rs

@@ -16,6 +16,7 @@ pub struct Sense {
 
 impl Sense {
     /// Senses no clicks or drags. Only senses mouse hover.
+    #[doc(alias = "none")]
     pub fn hover() -> Self {
         Self {
             click: false,
@@ -61,7 +62,7 @@ impl Sense {
         }
     }
 
-    /// The logical "or" of two `Sense`s.
+    /// The logical "or" of two [`Sense`]s.
     #[must_use]
     pub fn union(self, other: Self) -> Self {
         Self {

crates/egui/src/util/cache.rs

@@ -89,7 +89,7 @@ impl<Value: 'static + Send + Sync, Computer: 'static + Send + Sync> CacheTrait
     for FrameCache<Value, Computer>
 {
     fn update(&mut self) {
-        self.evice_cache()
+        self.evice_cache();
     }
 
     fn len(&self) -> usize {
@@ -119,7 +119,7 @@ impl<Value: 'static + Send + Sync, Computer: 'static + Send + Sync> CacheTrait
 /// ```
 #[derive(Default)]
 pub struct CacheStorage {
-    caches: ahash::AHashMap<std::any::TypeId, Box<dyn CacheTrait>>,
+    caches: ahash::HashMap<std::any::TypeId, Box<dyn CacheTrait>>,
 }
 
 impl CacheStorage {

crates/egui/src/util/fixed_cache.rs

@@ -2,7 +2,7 @@ use epaint::util::hash;
 
 const FIXED_CACHE_SIZE: usize = 1024; // must be small for web/WASM build (for unknown reason)
 
-/// Very stupid/simple key-value cache. TODO: improve
+/// Very stupid/simple key-value cache. TODO(emilk): improve
 #[derive(Clone)]
 pub(crate) struct FixedCache<K, V>([Option<(K, V)>; FIXED_CACHE_SIZE]);
 

crates/egui/src/util/id_type_map.rs

@@ -0,0 +1,720 @@
+// TODO(emilk): it is possible we can simplify `Element` further by
+// assuming everything is possibly serializable, and by supplying serialize/deserialize functions for them.
+// For non-serializable types, these simply return `None`.
+// This will also allow users to pick their own serialization format per type.
+
+use std::any::Any;
+use std::sync::Arc;
+
+// -----------------------------------------------------------------------------------------------
+
+/// Like [`std::any::TypeId`], but can be serialized and deserialized.
+#[derive(Clone, Copy, Debug, Eq, PartialEq, Hash)]
+#[cfg_attr(feature = "persistence", derive(serde::Deserialize, serde::Serialize))]
+pub struct TypeId(u64);
+
+impl TypeId {
+    #[inline]
+    pub fn of<T: Any + 'static>() -> Self {
+        std::any::TypeId::of::<T>().into()
+    }
+
+    #[inline(always)]
+    pub(crate) fn value(&self) -> u64 {
+        self.0
+    }
+}
+
+impl From<std::any::TypeId> for TypeId {
+    #[inline]
+    fn from(id: std::any::TypeId) -> Self {
+        Self(epaint::util::hash(id))
+    }
+}
+
+// -----------------------------------------------------------------------------------------------
+
+#[cfg(feature = "persistence")]
+pub trait SerializableAny:
+    'static + Any + Clone + serde::Serialize + for<'a> serde::Deserialize<'a> + Send + Sync
+{
+}
+
+#[cfg(feature = "persistence")]
+impl<T> SerializableAny for T where
+    T: 'static + Any + Clone + serde::Serialize + for<'a> serde::Deserialize<'a> + Send + Sync
+{
+}
+
+#[cfg(not(feature = "persistence"))]
+pub trait SerializableAny: 'static + Any + Clone + for<'a> Send + Sync {}
+
+#[cfg(not(feature = "persistence"))]
+impl<T> SerializableAny for T where T: 'static + Any + Clone + for<'a> Send + Sync {}
+
+// -----------------------------------------------------------------------------------------------
+
+#[cfg(feature = "persistence")]
+#[cfg_attr(feature = "persistence", derive(serde::Deserialize, serde::Serialize))]
+struct SerializedElement {
+    type_id: TypeId,
+    ron: Arc<str>,
+}
+
+#[cfg(feature = "persistence")]
+type Serializer = fn(&Box<dyn Any + 'static + Send + Sync>) -> Option<String>;
+
+enum Element {
+    /// A value, maybe serializable.
+    Value {
+        /// The actual value.
+        value: Box<dyn Any + 'static + Send + Sync>,
+
+        /// How to clone the value.
+        clone_fn: fn(&Box<dyn Any + 'static + Send + Sync>) -> Box<dyn Any + 'static + Send + Sync>,
+
+        /// How to serialize the value.
+        /// None if non-serializable type.
+        #[cfg(feature = "persistence")]
+        serialize_fn: Option<Serializer>,
+    },
+
+    /// A serialized value
+    Serialized {
+        /// The type of value we are storing.
+        type_id: TypeId,
+
+        /// The ron data we can deserialize.
+        ron: Arc<str>,
+    },
+}
+
+impl Clone for Element {
+    fn clone(&self) -> Self {
+        match &self {
+            Self::Value {
+                value,
+                clone_fn,
+                #[cfg(feature = "persistence")]
+                serialize_fn,
+            } => Self::Value {
+                value: clone_fn(value),
+                clone_fn: *clone_fn,
+                #[cfg(feature = "persistence")]
+                serialize_fn: *serialize_fn,
+            },
+
+            Self::Serialized { type_id, ron } => Self::Serialized {
+                type_id: *type_id,
+                ron: ron.clone(),
+            },
+        }
+    }
+}
+
+impl std::fmt::Debug for Element {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match &self {
+            Self::Value { value, .. } => f
+                .debug_struct("MaybeSerializable::Value")
+                .field("type_id", &value.type_id())
+                .finish_non_exhaustive(),
+            Self::Serialized { type_id, ron } => f
+                .debug_struct("MaybeSerializable::Serialized")
+                .field("type_id", &type_id)
+                .field("ron", &ron)
+                .finish(),
+        }
+    }
+}
+
+impl Element {
+    /// Create a value that won't be persisted.
+    #[inline]
+    pub(crate) fn new_temp<T: 'static + Any + Clone + Send + Sync>(t: T) -> Self {
+        Self::Value {
+            value: Box::new(t),
+            clone_fn: |x| {
+                let x = x.downcast_ref::<T>().unwrap(); // This unwrap will never panic, because we always construct this type using this `new` function and because we return &mut reference only with this type `T`, so type cannot change.
+                Box::new(x.clone())
+            },
+            #[cfg(feature = "persistence")]
+            serialize_fn: None,
+        }
+    }
+
+    /// Create a value that will be persisted.
+    #[inline]
+    pub(crate) fn new_persisted<T: SerializableAny>(t: T) -> Self {
+        Self::Value {
+            value: Box::new(t),
+            clone_fn: |x| {
+                let x = x.downcast_ref::<T>().unwrap(); // This unwrap will never panic, because we always construct this type using this `new` function and because we return &mut reference only with this type `T`, so type cannot change.
+                Box::new(x.clone())
+            },
+            #[cfg(feature = "persistence")]
+            serialize_fn: Some(|x| {
+                let x = x.downcast_ref::<T>().unwrap(); // This will never panic too, for same reason.
+                ron::to_string(x).ok()
+            }),
+        }
+    }
+
+    /// The type of the stored value.
+    #[inline]
+    pub(crate) fn type_id(&self) -> TypeId {
+        match self {
+            Self::Value { value, .. } => (**value).type_id().into(),
+            Self::Serialized { type_id, .. } => *type_id,
+        }
+    }
+
+    #[inline]
+    pub(crate) fn get_mut_temp<T: 'static>(&mut self) -> Option<&mut T> {
+        match self {
+            Self::Value { value, .. } => value.downcast_mut(),
+            Self::Serialized { .. } => None,
+        }
+    }
+
+    #[inline]
+    pub(crate) fn get_temp_mut_or_insert_with<T: 'static + Any + Clone + Send + Sync>(
+        &mut self,
+        insert_with: impl FnOnce() -> T,
+    ) -> &mut T {
+        match self {
+            Self::Value { value, .. } => {
+                if !value.is::<T>() {
+                    *self = Self::new_temp(insert_with());
+                }
+            }
+            Self::Serialized { .. } => {
+                *self = Self::new_temp(insert_with());
+            }
+        }
+
+        match self {
+            Self::Value { value, .. } => value.downcast_mut().unwrap(), // This unwrap will never panic because we already converted object to required type
+            Self::Serialized { .. } => unreachable!(),
+        }
+    }
+
+    #[inline]
+    pub(crate) fn get_persisted_mut_or_insert_with<T: SerializableAny>(
+        &mut self,
+        insert_with: impl FnOnce() -> T,
+    ) -> &mut T {
+        match self {
+            Self::Value { value, .. } => {
+                if !value.is::<T>() {
+                    *self = Self::new_persisted(insert_with());
+                }
+            }
+
+            #[cfg(feature = "persistence")]
+            Self::Serialized { ron, .. } => {
+                *self = Self::new_persisted(from_ron_str::<T>(ron).unwrap_or_else(insert_with));
+            }
+
+            #[cfg(not(feature = "persistence"))]
+            Self::Serialized { .. } => {
+                *self = Self::new_persisted(insert_with());
+            }
+        }
+
+        match self {
+            Self::Value { value, .. } => value.downcast_mut().unwrap(), // This unwrap will never panic because we already converted object to required type
+            Self::Serialized { .. } => unreachable!(),
+        }
+    }
+
+    pub(crate) fn get_mut_persisted<T: SerializableAny>(&mut self) -> Option<&mut T> {
+        match self {
+            Self::Value { value, .. } => value.downcast_mut(),
+
+            #[cfg(feature = "persistence")]
+            Self::Serialized { ron, .. } => {
+                *self = Self::new_persisted(from_ron_str::<T>(ron)?);
+
+                match self {
+                    Self::Value { value, .. } => value.downcast_mut(),
+                    Self::Serialized { .. } => unreachable!(),
+                }
+            }
+
+            #[cfg(not(feature = "persistence"))]
+            Self::Serialized { .. } => None,
+        }
+    }
+
+    #[cfg(feature = "persistence")]
+    fn to_serialize(&self) -> Option<SerializedElement> {
+        match self {
+            Self::Value {
+                value,
+                serialize_fn,
+                ..
+            } => {
+                if let Some(serialize_fn) = serialize_fn {
+                    let ron = serialize_fn(value)?;
+                    Some(SerializedElement {
+                        type_id: (**value).type_id().into(),
+                        ron: ron.into(),
+                    })
+                } else {
+                    None
+                }
+            }
+            Self::Serialized { type_id, ron } => Some(SerializedElement {
+                type_id: *type_id,
+                ron: ron.clone(),
+            }),
+        }
+    }
+}
+
+#[cfg(feature = "persistence")]
+fn from_ron_str<T: serde::de::DeserializeOwned>(ron: &str) -> Option<T> {
+    match ron::from_str::<T>(ron) {
+        Ok(value) => Some(value),
+        Err(_err) => {
+            #[cfg(feature = "tracing")]
+            tracing::warn!(
+                "egui: Failed to deserialize {} from memory: {}, ron error: {:?}",
+                std::any::type_name::<T>(),
+                _err,
+                ron
+            );
+            None
+        }
+    }
+}
+
+// -----------------------------------------------------------------------------------------------
+
+use crate::Id;
+
+// TODO(emilk): make IdTypeMap generic over the key (`Id`), and make a library of IdTypeMap.
+/// Stores values identified by an [`Id`] AND a the [`std::any::TypeId`] of the value.
+///
+/// In other words, it maps `(Id, TypeId)` to any value you want.
+///
+/// Values are cloned when read, so keep them small and light.
+/// If you want to store something bigger, wrap them in `Arc<Mutex<…>>`.
+///
+/// Values can either be "persisted" (serializable) or "temporary" (cleared when egui is shut down).
+///
+/// You can store state using the key [`Id::null`]. The state will then only be identified by its type.
+///
+/// ```
+/// # use egui::{Id, util::IdTypeMap};
+/// let a = Id::new("a");
+/// let b = Id::new("b");
+/// let mut map: IdTypeMap = Default::default();
+///
+/// // `a` associated with an f64 and an i32
+/// map.insert_persisted(a, 3.14);
+/// map.insert_temp(a, 42);
+///
+/// // `b` associated with an f64 and a `&'static str`
+/// map.insert_persisted(b, 13.37);
+/// map.insert_temp(b, "Hello World".to_owned());
+///
+/// // we can retrieve all four values:
+/// assert_eq!(map.get_temp::<f64>(a), Some(3.14));
+/// assert_eq!(map.get_temp::<i32>(a), Some(42));
+/// assert_eq!(map.get_temp::<f64>(b), Some(13.37));
+/// assert_eq!(map.get_temp::<String>(b), Some("Hello World".to_owned()));
+///
+/// // we can retrieve them like so also:
+/// assert_eq!(map.get_persisted::<f64>(a), Some(3.14));
+/// assert_eq!(map.get_persisted::<i32>(a), Some(42));
+/// assert_eq!(map.get_persisted::<f64>(b), Some(13.37));
+/// assert_eq!(map.get_temp::<String>(b), Some("Hello World".to_owned()));
+/// ```
+#[derive(Clone, Debug, Default)]
+// We store use `id XOR typeid` as a key, so we don't need to hash again!
+pub struct IdTypeMap(nohash_hasher::IntMap<u64, Element>);
+
+impl IdTypeMap {
+    /// Insert a value that will not be persisted.
+    #[inline]
+    pub fn insert_temp<T: 'static + Any + Clone + Send + Sync>(&mut self, id: Id, value: T) {
+        let hash = hash(TypeId::of::<T>(), id);
+        self.0.insert(hash, Element::new_temp(value));
+    }
+
+    /// Insert a value that will be persisted next time you start the app.
+    #[inline]
+    pub fn insert_persisted<T: SerializableAny>(&mut self, id: Id, value: T) {
+        let hash = hash(TypeId::of::<T>(), id);
+        self.0.insert(hash, Element::new_persisted(value));
+    }
+
+    /// Read a value without trying to deserialize a persisted value.
+    ///
+    /// The call clones the value (if found), so make sure it is cheap to clone!
+    #[inline]
+    pub fn get_temp<T: 'static + Clone>(&mut self, id: Id) -> Option<T> {
+        let hash = hash(TypeId::of::<T>(), id);
+        self.0
+            .get_mut(&hash)
+            .and_then(|x| x.get_mut_temp())
+            .cloned()
+    }
+
+    /// Read a value, optionally deserializing it if available.
+    ///
+    /// The call clones the value (if found), so make sure it is cheap to clone!
+    #[inline]
+    pub fn get_persisted<T: SerializableAny>(&mut self, id: Id) -> Option<T> {
+        let hash = hash(TypeId::of::<T>(), id);
+        self.0
+            .get_mut(&hash)
+            .and_then(|x| x.get_mut_persisted())
+            .cloned()
+    }
+
+    #[inline]
+    pub fn get_temp_mut_or<T: 'static + Any + Clone + Send + Sync>(
+        &mut self,
+        id: Id,
+        or_insert: T,
+    ) -> &mut T {
+        self.get_temp_mut_or_insert_with(id, || or_insert)
+    }
+
+    #[inline]
+    pub fn get_persisted_mut_or<T: SerializableAny>(&mut self, id: Id, or_insert: T) -> &mut T {
+        self.get_persisted_mut_or_insert_with(id, || or_insert)
+    }
+
+    #[inline]
+    pub fn get_temp_mut_or_default<T: 'static + Any + Clone + Send + Sync + Default>(
+        &mut self,
+        id: Id,
+    ) -> &mut T {
+        self.get_temp_mut_or_insert_with(id, Default::default)
+    }
+
+    #[inline]
+    pub fn get_persisted_mut_or_default<T: SerializableAny + Default>(&mut self, id: Id) -> &mut T {
+        self.get_persisted_mut_or_insert_with(id, Default::default)
+    }
+
+    pub fn get_temp_mut_or_insert_with<T: 'static + Any + Clone + Send + Sync>(
+        &mut self,
+        id: Id,
+        insert_with: impl FnOnce() -> T,
+    ) -> &mut T {
+        let hash = hash(TypeId::of::<T>(), id);
+        use std::collections::hash_map::Entry;
+        match self.0.entry(hash) {
+            Entry::Vacant(vacant) => vacant
+                .insert(Element::new_temp(insert_with()))
+                .get_mut_temp()
+                .unwrap(), // this unwrap will never panic, because we insert correct type right now
+            Entry::Occupied(occupied) => {
+                occupied.into_mut().get_temp_mut_or_insert_with(insert_with)
+            }
+        }
+    }
+
+    pub fn get_persisted_mut_or_insert_with<T: SerializableAny>(
+        &mut self,
+        id: Id,
+        insert_with: impl FnOnce() -> T,
+    ) -> &mut T {
+        let hash = hash(TypeId::of::<T>(), id);
+        use std::collections::hash_map::Entry;
+        match self.0.entry(hash) {
+            Entry::Vacant(vacant) => vacant
+                .insert(Element::new_persisted(insert_with()))
+                .get_mut_persisted()
+                .unwrap(), // this unwrap will never panic, because we insert correct type right now
+            Entry::Occupied(occupied) => occupied
+                .into_mut()
+                .get_persisted_mut_or_insert_with(insert_with),
+        }
+    }
+
+    /// Remove the state of this type an id.
+    #[inline]
+    pub fn remove<T: 'static>(&mut self, id: Id) {
+        let hash = hash(TypeId::of::<T>(), id);
+        self.0.remove(&hash);
+    }
+
+    /// Note all state of the given type.
+    pub fn remove_by_type<T: 'static>(&mut self) {
+        let key = TypeId::of::<T>();
+        self.0.retain(|_, e| {
+            let e: &Element = e;
+            e.type_id() != key
+        });
+    }
+
+    #[inline]
+    pub fn clear(&mut self) {
+        self.0.clear();
+    }
+
+    #[inline]
+    pub fn is_empty(&self) -> bool {
+        self.0.is_empty()
+    }
+
+    #[inline]
+    pub fn len(&self) -> usize {
+        self.0.len()
+    }
+
+    /// Count how many values are stored but not yet deserialized.
+    #[inline]
+    pub fn count_serialized(&self) -> usize {
+        self.0
+            .values()
+            .filter(|e| matches!(e, Element::Serialized { .. }))
+            .count()
+    }
+
+    /// Count the number of values are stored with the given type.
+    pub fn count<T: 'static>(&self) -> usize {
+        let key = TypeId::of::<T>();
+        self.0
+            .iter()
+            .filter(|(_, e)| {
+                let e: &Element = e;
+                e.type_id() == key
+            })
+            .count()
+    }
+}
+
+#[inline(always)]
+fn hash(type_id: TypeId, id: Id) -> u64 {
+    type_id.value() ^ id.value()
+}
+
+// ----------------------------------------------------------------------------
+
+/// How [`IdTypeMap`] is persisted.
+#[cfg(feature = "persistence")]
+#[cfg_attr(feature = "persistence", derive(serde::Deserialize, serde::Serialize))]
+struct PersistedMap(Vec<(u64, SerializedElement)>);
+
+#[cfg(feature = "persistence")]
+impl PersistedMap {
+    fn from_map(map: &IdTypeMap) -> Self {
+        // filter out the elements which cannot be serialized:
+        Self(
+            map.0
+                .iter()
+                .filter_map(|(&hash, element)| Some((hash, element.to_serialize()?)))
+                .collect(),
+        )
+    }
+
+    fn into_map(self) -> IdTypeMap {
+        IdTypeMap(
+            self.0
+                .into_iter()
+                .map(|(hash, SerializedElement { type_id, ron })| {
+                    (hash, Element::Serialized { type_id, ron })
+                })
+                .collect(),
+        )
+    }
+}
+
+#[cfg(feature = "persistence")]
+impl serde::Serialize for IdTypeMap {
+    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        S: serde::Serializer,
+    {
+        PersistedMap::from_map(self).serialize(serializer)
+    }
+}
+
+#[cfg(feature = "persistence")]
+impl<'de> serde::Deserialize<'de> for IdTypeMap {
+    fn deserialize<D>(deserializer: D) -> Result<Self, D::Error>
+    where
+        D: serde::Deserializer<'de>,
+    {
+        <PersistedMap>::deserialize(deserializer).map(PersistedMap::into_map)
+    }
+}
+
+// ----------------------------------------------------------------------------
+
+#[test]
+fn test_two_id_two_type() {
+    let a = Id::new("a");
+    let b = Id::new("b");
+
+    let mut map: IdTypeMap = Default::default();
+    map.insert_persisted(a, 13.37);
+    map.insert_temp(b, 42);
+    assert_eq!(map.get_persisted::<f64>(a), Some(13.37));
+    assert_eq!(map.get_persisted::<i32>(b), Some(42));
+    assert_eq!(map.get_temp::<f64>(a), Some(13.37));
+    assert_eq!(map.get_temp::<i32>(b), Some(42));
+}
+
+#[test]
+fn test_two_id_x_two_types() {
+    #![allow(clippy::approx_constant)]
+
+    let a = Id::new("a");
+    let b = Id::new("b");
+    let mut map: IdTypeMap = Default::default();
+
+    // `a` associated with an f64 and an i32
+    map.insert_persisted(a, 3.14);
+    map.insert_temp(a, 42);
+
+    // `b` associated with an f64 and a `&'static str`
+    map.insert_persisted(b, 13.37);
+    map.insert_temp(b, "Hello World".to_owned());
+
+    // we can retrieve all four values:
+    assert_eq!(map.get_temp::<f64>(a), Some(3.14));
+    assert_eq!(map.get_temp::<i32>(a), Some(42));
+    assert_eq!(map.get_temp::<f64>(b), Some(13.37));
+    assert_eq!(map.get_temp::<String>(b), Some("Hello World".to_owned()));
+
+    // we can retrieve them like so also:
+    assert_eq!(map.get_persisted::<f64>(a), Some(3.14));
+    assert_eq!(map.get_persisted::<i32>(a), Some(42));
+    assert_eq!(map.get_persisted::<f64>(b), Some(13.37));
+    assert_eq!(map.get_temp::<String>(b), Some("Hello World".to_owned()));
+}
+
+#[test]
+fn test_one_id_two_types() {
+    let id = Id::new("a");
+
+    let mut map: IdTypeMap = Default::default();
+    map.insert_persisted(id, 13.37);
+    map.insert_temp(id, 42);
+
+    assert_eq!(map.get_temp::<f64>(id), Some(13.37));
+    assert_eq!(map.get_persisted::<f64>(id), Some(13.37));
+    assert_eq!(map.get_temp::<i32>(id), Some(42));
+
+    // ------------
+    // Test removal:
+
+    // We can remove:
+    map.remove::<i32>(id);
+    assert_eq!(map.get_temp::<i32>(id), None);
+
+    // Other type is still there, even though it is the same if:
+    assert_eq!(map.get_temp::<f64>(id), Some(13.37));
+    assert_eq!(map.get_persisted::<f64>(id), Some(13.37));
+
+    // But we can still remove the last:
+    map.remove::<f64>(id);
+    assert_eq!(map.get_temp::<f64>(id), None);
+    assert_eq!(map.get_persisted::<f64>(id), None);
+}
+
+#[test]
+fn test_mix() {
+    #[cfg_attr(feature = "persistence", derive(serde::Deserialize, serde::Serialize))]
+    #[derive(Clone, Debug, PartialEq)]
+    struct Foo(i32);
+
+    #[derive(Clone, Debug, PartialEq)]
+    struct Bar(f32);
+
+    let id = Id::new("a");
+
+    let mut map: IdTypeMap = Default::default();
+    map.insert_persisted(id, Foo(555));
+    map.insert_temp(id, Bar(1.0));
+
+    assert_eq!(map.get_temp::<Foo>(id), Some(Foo(555)));
+    assert_eq!(map.get_persisted::<Foo>(id), Some(Foo(555)));
+    assert_eq!(map.get_temp::<Bar>(id), Some(Bar(1.0)));
+
+    // ------------
+    // Test removal:
+
+    // We can remove:
+    map.remove::<Bar>(id);
+    assert_eq!(map.get_temp::<Bar>(id), None);
+
+    // Other type is still there, even though it is the same if:
+    assert_eq!(map.get_temp::<Foo>(id), Some(Foo(555)));
+    assert_eq!(map.get_persisted::<Foo>(id), Some(Foo(555)));
+
+    // But we can still remove the last:
+    map.remove::<Foo>(id);
+    assert_eq!(map.get_temp::<Foo>(id), None);
+    assert_eq!(map.get_persisted::<Foo>(id), None);
+}
+
+#[cfg(feature = "persistence")]
+#[test]
+fn test_mix_serialize() {
+    use serde::{Deserialize, Serialize};
+
+    #[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
+    struct Serializable(i32);
+
+    #[derive(Clone, Debug, PartialEq)]
+    struct NonSerializable(f32);
+
+    let id = Id::new("a");
+
+    let mut map: IdTypeMap = Default::default();
+    map.insert_persisted(id, Serializable(555));
+    map.insert_temp(id, NonSerializable(1.0));
+
+    assert_eq!(map.get_temp::<Serializable>(id), Some(Serializable(555)));
+    assert_eq!(
+        map.get_persisted::<Serializable>(id),
+        Some(Serializable(555))
+    );
+    assert_eq!(
+        map.get_temp::<NonSerializable>(id),
+        Some(NonSerializable(1.0))
+    );
+
+    // -----------
+
+    let serialized = ron::to_string(&map).unwrap();
+
+    // ------------
+    // Test removal:
+
+    // We can remove:
+    map.remove::<NonSerializable>(id);
+    assert_eq!(map.get_temp::<NonSerializable>(id), None);
+
+    // Other type is still there, even though it is the same if:
+    assert_eq!(map.get_temp::<Serializable>(id), Some(Serializable(555)));
+    assert_eq!(
+        map.get_persisted::<Serializable>(id),
+        Some(Serializable(555))
+    );
+
+    // But we can still remove the last:
+    map.remove::<Serializable>(id);
+    assert_eq!(map.get_temp::<Serializable>(id), None);
+    assert_eq!(map.get_persisted::<Serializable>(id), None);
+
+    // --------------------
+    // Test deserialization:
+
+    let mut map: IdTypeMap = ron::from_str(&serialized).unwrap();
+    assert_eq!(map.get_temp::<Serializable>(id), None);
+    assert_eq!(
+        map.get_persisted::<Serializable>(id),
+        Some(Serializable(555))
+    );
+    assert_eq!(map.get_temp::<Serializable>(id), Some(Serializable(555)));
+}

crates/egui/src/util/mod.rs

@@ -2,9 +2,10 @@
 
 pub mod cache;
 pub(crate) mod fixed_cache;
-mod history;
+pub mod id_type_map;
 pub mod undoer;
 
-pub use history::History;
+pub use id_type_map::IdTypeMap;
 
+pub use epaint::emath::History;
 pub use epaint::util::{hash, hash_with};