按预览容器尺寸渲染 UI 树

移除设计图宽高计算与 aspect-ratio 约束

让树容器填充调用方父容器尺寸

整理组件渲染子模块路径

apps/ai-game-creator-shell/src-tauri/src/ui_editor/html_renderer/component/image.rs

@@ -1,12 +1,12 @@
-use super::assets::{finite_positive, trim_float};
 use crate::ui_editor::component::image::{
     FillMethod, HorizontalFillOrigin, ImageType, Radial180Origin, Radial360Origin, Radial90Origin,
     VerticalFillOrigin,
 };
+use crate::ui_editor::html_renderer::assets::{finite_positive, trim_float};
 
 const UI_SCALE: &str = "var(--ui-scale, 1)";
 
-pub(super) fn image_styles(
+pub(in crate::ui_editor::html_renderer) fn image_styles(
     image_type: &ImageType,
     sprite: &crate::ui_editor::resource::sprite::SpriteAsset,
     src: &str,

apps/ai-game-creator-shell/src-tauri/src/ui_editor/html_renderer/component/mod.rs

@@ -1,10 +1,13 @@
 use super::assets::{asset_url, hex_id};
-use super::image::image_styles;
-use super::text::text_style;
 use crate::ui_editor::component::text::FontSource;
 use crate::ui_editor::component::Component;
 use crate::ui_editor::state::State;
+use image::image_styles;
 use maud::{html, Markup};
+use text::text_style;
+
+mod image;
+mod text;
 
 pub(super) fn render_component(state: &State, component: &Component) -> Result<Markup, String> {
     match component {

apps/ai-game-creator-shell/src-tauri/src/ui_editor/html_renderer/component/text.rs

@@ -4,7 +4,7 @@ use crate::ui_editor::component::text::{
 
 const UI_SCALE: &str = "var(--ui-scale, 1)";
 
-pub(super) fn text_style(
+pub(in crate::ui_editor::html_renderer) fn text_style(
     font_style: FontStyle,
     alignment: TextAlignment,
     sizing: FontSizing,

apps/ai-game-creator-shell/src-tauri/src/ui_editor/html_renderer/mod.rs

@@ -1,11 +1,9 @@
 mod assets;
 mod component;
 mod container;
-mod image;
 mod node;
-mod text;
 
-use self::assets::{finite_positive, font_face_rule, hex_id, html_comment};
+use self::assets::{font_face_rule, hex_id, html_comment};
 use self::component::render_component;
 use self::container::{child_container_style, container_style};
 use self::node::{is_container, transform_style};
@@ -56,21 +54,15 @@ pub(crate) fn render_ui_design_state_html(state: &State) -> Result<String, Strin
 }
 
 fn render_tree(state: &State, tree: &UITree) -> Result<Markup, String> {
-    let image = state
+    state
         .ui_design_images
         .get(&tree.src_ui_design)
         .ok_or_else(|| format!("UITree 缺少 src_ui_design：{}", tree.src_ui_design.as_str()))?;
-    let width = finite_positive(image.pixel_size.x, "UI design width")?
-        / finite_positive(image.pixels_per_unit.get(), "UI design pixelsPerUnit")?;
-    let height = finite_positive(image.pixel_size.y, "UI design height")?
-        / finite_positive(image.pixels_per_unit.get(), "UI design pixelsPerUnit")?;
     let tree_comment = html_comment(
         "genarrative-ui-tree",
         json!({"srcUiDesign": tree.src_ui_design.as_str()}),
     );
-    let style = format!(
-        "position:relative;width:100%;height:auto;min-height:0;aspect-ratio:{width} / {height};"
-    );
+    let style = "position:relative;width:100%;height:100%;min-height:0;";
     Ok(html! {
         (tree_comment)
         div data-ui-tree=(tree.src_ui_design.as_str()) style=(style) {