add hyperlink in ui and text example

crates/wasm/Cargo.toml

@@ -20,11 +20,14 @@ ambient_gpu = { path = "../gpu" }
 ambient_renderer = { path = "../renderer" }
 ambient_procedurals = { path = "../procedurals" }
 
+ambient_guest_bridge = { path = "../../shared_crates/guest_bridge", default-features = false, version = "0.3.0-dev" }
+
 ambient_project = { path = "../../shared_crates/project" }
 ambient_shared_types = { path = "../../shared_crates/shared_types", features = [
     "native",
 ] }
 
+
 anyhow = { workspace = true }
 async-trait = { workspace = true }
 byteorder = { workspace = true }
@@ -39,6 +42,7 @@ indoc = { workspace = true }
 itertools = { workspace = true }
 log = { workspace = true }
 once_cell = { workspace = true }
+open =  { workspace = true }
 parking_lot = { workspace = true }
 paste = { workspace = true }
 ambient_profiling = { workspace = true }

crates/wasm/src/client/mod.rs

@@ -1,6 +1,7 @@
 use crate::shared::{self, client_bytecode_from_url, module_bytecode, ModuleBytecode};
 use ambient_core::{asset_cache, async_ecs::async_run, runtime};
 use ambient_ecs::{query, EntityId, SystemGroup, World};
+use ambient_guest_bridge::components::text::hyperlink;
 use ambient_std::{
     asset_cache::AsyncAssetKeyExt, asset_url::AbsAssetUrl, download_asset::BytesFromUrl,
 };
@@ -27,6 +28,18 @@ pub fn systems() -> SystemGroup {
     SystemGroup::new(
         "core/wasm/client",
         vec![
+            query(hyperlink().changed()).to_system(move |q, world, qs, _| {
+                for (id, url) in q.collect_cloned(world, qs) {
+                    #[cfg(not(target_os = "unknown"))]
+                    match open::that(&url) {
+                        Ok(()) => log::info!("Opened '{}'", &url),
+                        Err(err) => {
+                            log::error!("An error occurred when opening '{}': {}", &url, err)
+                        }
+                    }
+                    world.despawn(id);
+                }
+            }),
             query(client_bytecode_from_url().changed()).to_system(move |q, world, qs, _| {
                 for (id, url) in q.collect_cloned(world, qs) {
                     let url = match AbsAssetUrl::from_str(&url) {

guest/rust/examples/ui/text/src/client.rs

@@ -14,6 +14,8 @@ fn App(_hooks: &mut Hooks) -> Element {
         Text::el("Custom size").with(font_size(), 40.),
         Text::el("Custom color").with(color(), vec4(1., 0., 0., 1.)),
         Text::el("Multi\n\nLine"),
+        Text::el("Hyperlink:"),
+        Hyperlink::el("https://ambient.run".to_string()),
     ])
     .with_padding_even(STREET)
     .with(space_between_items(), 10.)

shared_crates/schema/src/schema/text.toml

@@ -26,3 +26,14 @@ type = "String"
 name = "Text"
 description = "Create a text mesh on this entity."
 attributes = ["Debuggable", "Networked", "Store"]
+
+
+[components."core::text::hyperlink"]
+type = "String"
+name = "Hyperlink"
+description = """
+This is a hyperlink text. With this component, the entity is a special one.
+Once spawned, the system will open the URL String in the browser.
+Then the entity will be destroyed.
+"""
+attributes = ["Debuggable", "Networked", "Store"]

shared_crates/ui/src/text.rs

@@ -2,12 +2,15 @@
 
 use crate::{UIBase, UIElement};
 use ambient_element::{element_component, Element, ElementComponentExt, Hooks};
-use ambient_guest_bridge::components::{
-    app::{name, ui_scene},
-    layout::{height, width},
-    rendering::color,
-    text::{font_family, font_size, text},
-    transform::mesh_to_local,
+use ambient_guest_bridge::{
+    components::{
+        app::{name, ui_scene},
+        layout::{height, width},
+        rendering::color,
+        text::{font_family, font_size, hyperlink, text},
+        transform::mesh_to_local,
+    },
+    ecs::Entity,
 };
 use glam::{vec4, Mat4};
 
@@ -68,3 +71,18 @@ pub fn FontAwesomeIcon(
         .to_string(),
     )
 }
+
+#[element_component]
+/// Hyperlink to a URL. This will open browser when clicked.
+pub fn Hyperlink(
+    _hooks: &mut Hooks,
+    /// The URL to open
+    url: String,
+) -> Element {
+    crate::prelude::Button::new(&url.clone(), move |world| {
+        let link = Entity::new().with(hyperlink(), url.clone());
+        world.spawn(link);
+    })
+    .style(crate::prelude::ButtonStyle::Inline)
+    .el()
+}