GPUI

[dependencies]gpui = { package = "gpui-pre", version = "0.3.11" }gpui_platform = { package = "gpui-pre-platform", version = "0.3.11", features = ["font-kit"] }limu = "0.2"limu-gpui = "0.2"

use std::sync::Arc;use gpui::{    App, Bounds, Context, Pixels, Window, WindowBounds, WindowOptions, canvas, div, prelude::*,    px, rgba, size,};use limu::scene::Scene;use limu::scene::style::{Color, Look, Theme};use limu_gpui::{Fonts, Options, TextMeasurer, paint};const SOURCE: &str = "flowchart LR  text[Mermaid text] --> layout[Layout] --> scene[Scene]";struct Diagram {    scene: Arc<Scene>,    look: Look,}impl Diagram {    fn new(window: &Window) -> Diagram {        // 用窗口的文本系统测量文本，字体与绘制时相同。        let measurer = TextMeasurer::new(window, Fonts::default());        let layout = limu::layout::Options {            measurer: &measurer,            ..Default::default()        };        let scene = limu::layout(SOURCE, &layout).expect("a diagram");        Diagram {            scene: Arc::new(scene),            look: Look::new(Theme::KOHU),        }    }}impl Render for Diagram {    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {        let scene = self.scene.clone();        let look = self.look.clone();        div().size_full().p(px(16.0)).bg(color(look.theme.bg)).child(            canvas(                |_, _, _| {},                move |bounds: Bounds<Pixels>, _, window, cx| {                    let o = Options {                        look,                        ..Options::default()                    };                    paint(&scene, &o, bounds.origin, 1.0, window, cx);                },            )            .size_full(),        )    }}/// 把 limu 的颜色转换成 GPUI 的颜色。fn color(c: Color) -> gpui::Rgba {    rgba(u32::from_be_bytes([c.r, c.g, c.b, c.a]))}fn main() {    gpui_platform::application().run(|cx: &mut App| {        let bounds = Bounds::centered(None, size(px(640.0), px(360.0)), cx);        cx.open_window(            WindowOptions {                window_bounds: Some(WindowBounds::Windowed(bounds)),                ..Default::default()            },            |window, cx| cx.new(|_| Diagram::new(window)),        )        .expect("a window");        cx.activate(true);    });}

window.on_mouse_event(move |e: &MouseDownEvent, phase, _, cx| {    if phase != DispatchPhase::Bubble || e.button != MouseButton::Left {        return;    }    // 指针在场景单位下的位置。    let at = Point::new(        f64::from(e.position.x - bounds.origin.x) / f64::from(scale),        f64::from(e.position.y - bounds.origin.y) / f64::from(scale),    );    let Some(i) = scene.item_at(at, 4.0 / f64::from(scale)) else {        return;    };    let it = &scene.items[i];    let clicked = format!("{} {}", it.role, it.id.as_deref().unwrap_or(""));    this.update(cx, |d, cx| {        d.clicked = clicked;        cx.notify();    });});

let fonts = Fonts {    sans: "Inter".into(),    mono: "JetBrains Mono".into(),};let measurer = TextMeasurer::new(window, fonts.clone());// 用这个测量器布局，并用 Options { fonts, .. } 绘制。

let o = Options {    fonts,    icons: Some(Box::new(icon)),    // images 是已加载图片的 HashMap<String, Arc<RenderImage>>。    images: Some(Box::new(move |src| images.get(src).cloned())),    ..Options::default()};

use gpui::{Bounds, fill, point, px, size};use limu::scene::Kind;use limu_gpui::paint_with;paint_with(&scene, &o, origin, scale, window, cx, |p, it, s| {    if !matches!(it.kind, Kind::Node) {        p.item(it, s);        return;    }    // 把节点画成 GPUI 的 quad，标签按默认方式绘制。    let b = it.bounds;    let r = Bounds::new(        point(origin.x + px(b.x as f32 * scale), origin.y + px(b.y as f32 * scale)),        size(px(b.w as f32 * scale), px(b.h as f32 * scale)),    );    let (window, _) = p.canvas().window();    window.paint_quad(fill(r, color(s.fill.color)).corner_radii(px(8.0 * scale)));    p.label(it, s);});