Worked connection in dioxus

studio-frontend/src/dioxus-machine.ts

@@ -117,9 +117,11 @@ function apply_muts(
                 var many = edit["m"];
 
                 var target_node = nodes[id];
+
+                let append_nodes = element_stack.splice(element_stack.length - many);
+
                 for (var i = 0; i < many; i++) {
-                    var current_element = element_stack.pop();
-                    target_node.appendChild(current_element);
+                    target_node.appendChild(append_nodes[i]);
                 }
             } else if (type == "HydrateText") {
                 // var child_path = edit["path"];
@@ -155,9 +157,14 @@ function apply_muts(
                     var el = element_stack.pop();
                     els.push(el);
                 }
+                els.reverse();
                 var target_node = load_child(element_stack, child_path);
                 target_node.replaceWith(...els); 
                 console.log("")
+            } else if (type == "CreateTextNode") {
+                var text_node : any = document.createTextNode(edit["value"]);
+                nodes[edit["id"]] = text_node;
+                element_stack.push(text_node);
             }
         }
 
@@ -210,6 +217,15 @@ function recursive_render(
         new_element.id = element.id.toString();
     }
 
+    //set attrs
+    if (element.attrs != undefined) {
+        for (const attr of element.attrs) {
+            var name = attr["name"];
+            var value = attr["value"];
+            new_element.setAttribute(name, value);
+        }
+    }
+
     //parent to root
     if (root != null) {
         root.appendChild(new_element);

studio/src/interaction/selection.rs

@@ -50,7 +50,7 @@ pub struct Selectable;
 pub struct Selected;
 
 #[derive(Resource, Deref, DerefMut, Debug)]
-pub struct Selection(Entity);
+pub struct Selection(pub Entity);
 
 fn sync_editor_selected(
     mut cmd: Commands,

studio/src/ui/inspector.rs

@@ -1,6 +1,6 @@
 use std::sync::{Arc, Mutex, RwLock};
 
-use bevy::{ecs::world::unsafe_world_cell::{UnsafeEntityCell, UnsafeWorldCell}, prelude::*, reflect::TypeData, utils::hashbrown::HashMap, window::PrimaryWindow};
+use bevy::{ecs::world::unsafe_world_cell::{UnsafeEntityCell, UnsafeWorldCell}, prelude::*, reflect::TypeData, utils::{hashbrown::HashMap, tracing::field}, window::PrimaryWindow};
 use dioxus::{prelude::*, rsx::*};
 use serde::{Deserialize, Serialize};
 use space_editor::{prelude::Selected, space_editor_ui::inspector::inspect};
@@ -20,8 +20,8 @@ impl Plugin for InspectorPlugin {
 
         app.add_systems(Update, show_selected);
 
-        app.world.resource_mut::<InspectorFunctions>().add_simple::<Transform>();
         app.world.resource_mut::<InspectorFunctions>().add_simple::<Name>();
+        app.world.resource_mut::<InspectorFunctions>().add_simple::<Transform>();
     }
 }
 
@@ -85,16 +85,41 @@ fn web_inspector(cx: Scope<InspectedEntity>) -> dioxus::core::Element {
 }
 
 fn web_reflect(cx: Scope<ComponentProp>) -> dioxus::core::Element {
+
+    //registered components
+    if cx.props.component.represents::<Name>() {
+        let name = <Name as FromReflect>::from_reflect(cx.props.component.as_ref()).unwrap();
+        return render! {
+            div {
+                p { name.as_str() }
+            }
+        };
+    }else if cx.props.component.represents::<Transform>() {
+        let transform = <Transform as FromReflect>::from_reflect(cx.props.component.as_ref()).unwrap();
+        let euler = transform.rotation.to_euler(EulerRot::XYZ);
+        return render! {
+            div {
+                "style" : "flex-direction: column;  display: flex; ",
+                "Transform\n",
+                format!("pos: {:.2} {:.2} {:.2}\n", transform.translation.x, transform.translation.y, transform.translation.z),
+                format!("rot: {:.2} {:.2} {:.2}\n", euler.0, euler.1, euler.2),
+                format!("scale: {:.2} {:.2} {:.2}\n", transform.scale.x, transform.scale.y, transform.scale.z)
+            }
+        };
+    }
+
     let res = match cx.props.component.reflect_ref() {
         
         bevy::reflect::ReflectRef::Struct(v) => {
             let field_count = v.field_len();
+            
             render! {
                 div {
-                    v.type_name().split("::").last().unwrap(),
+                    p { v.type_name().split("::").last().unwrap() },
                     (0..field_count).map(|i| {
                         let field = v.field_at(i).unwrap();
                         render! {
+                            format!("{}: ", v.name_at(i).unwrap()),
                             web_reflect { component: field.clone_value() } 
                             
                         }
@@ -103,10 +128,17 @@ fn web_reflect(cx: Scope<ComponentProp>) -> dioxus::core::Element {
                 }
             }
         },
-        bevy::reflect::ReflectRef::TupleStruct(_) => {
+        bevy::reflect::ReflectRef::TupleStruct(v) => {
+            let field_count = v.field_len();
+            
             render! {
                 div {
-
+                    p { v.type_name().split("::").last().unwrap(), },
+                    v.iter_fields().map(|field| {
+                        render! {
+                            web_reflect { component: field.clone_value() } 
+                        }
+                    })
                 }
             }
         },
@@ -145,10 +177,84 @@ fn web_reflect(cx: Scope<ComponentProp>) -> dioxus::core::Element {
                 }
             }
         },
-        bevy::reflect::ReflectRef::Value(_) => {
-            render! {
-                div {
-                    
+        bevy::reflect::ReflectRef::Value(v) => {
+            if let Some(v) = v.downcast_ref::<String>() {
+                render! {
+                    div {
+                        format!("{}", v)
+                    }
+                }
+            } else if let Some(v) = v.downcast_ref::<f32>() {
+                render! {
+                    div {
+                        format!("{:?}", v)
+                    }
+                }
+            } else if let Some(v) = v.downcast_ref::<f64>() {
+                render! {
+                    div {
+                        format!("{:?}", v)
+                    }
+                }
+            } else if let Some(v) = v.downcast_ref::<bool>() {
+                render! {
+                    div {
+                        format!("{:?}", v)
+                    }
+                }
+            } else if let Some(v) = v.downcast_ref::<i32>() {
+                render! {
+                    div {
+                        format!("{:?}", v)
+                    }
+                }
+            } else if let Some(v) = v.downcast_ref::<i64>() {
+                render! {
+                    div {
+                        format!("{:?}", v)
+                    }
+                }
+            } else if let Some(v) = v.downcast_ref::<u32>() {
+                render! {
+                    div {
+                        format!("{:?}", v)
+                    }
+                }
+            } else if let Some(v) = v.downcast_ref::<u64>() {
+                render! {
+                    div {
+                        format!("{:?}", v)
+                    }
+                }
+            } else if let Some(v) = v.downcast_ref::<u8>() {
+                render! {
+                    div {
+                        format!("{:?}", v)
+                    }
+                }
+            } else if let Some(v) = v.downcast_ref::<u16>() {
+                render! {
+                    div {
+                        format!("{:?}", v)
+                    }
+                }
+            } else if let Some(v) = v.downcast_ref::<i8>() {
+                render! {
+                    div {
+                        format!("{:?}", v)
+                    }
+                }
+            } else if let Some(v) = v.downcast_ref::<i16>() {
+                render! {
+                    div {
+                        format!("{:?}", v)
+                    }
+                }
+            } else {
+                render! {
+                    div {
+                       "Not implemented reflect type" 
+                    }
                 }
             }
         },
@@ -163,10 +269,12 @@ fn show_selected(
     unsafe {
         let cell = world.as_unsafe_world_cell();
         
-        let Ok(selected_entity) = cell.world_mut().query_filtered::<Entity, With<Selected>>().get_single(cell.world()) else {
+        let Some(selection) = cell.get_resource::<crate::interaction::Selection>() else {
             return;
         };
 
+        let selected_entity = selection.0;
+
         let mut functions = cell.get_resource_mut::<InspectorFunctions>().unwrap();
 
         let e = cell.get_entity(selected_entity).unwrap();