feat: add button to switch between designer and code view

f

3 files changed, 45 insertions, 12 deletions

diff --git a/iced_builder/src/codegen/mod.rs b/iced_builder/src/codegen/mod.rs
index 20a2e65..923ef99 100644
--- a/iced_builder/src/codegen/mod.rs
+++ b/iced_builder/src/codegen/mod.rs
@@ -138,7 +138,7 @@ impl RenderedElement {
         Ok(rustfmt.format_str(app_code)?)
     }
 
-    pub fn test() -> String {
+    pub fn test() -> RenderedElement {
         let mut text1 = RenderedElement::new(ElementName::Text("wow"));
         text1.set_property("height", "120.5");
         text1.set_property("width", "230");
@@ -154,6 +154,6 @@ impl RenderedElement {
             ],
         ));
 
-        element.app_code("new app", None).unwrap()
+        element
     }
 }
diff --git a/iced_builder/src/main.rs b/iced_builder/src/main.rs
index 2633e6c..42ea627 100644
--- a/iced_builder/src/main.rs
+++ b/iced_builder/src/main.rs
@@ -37,6 +37,7 @@ struct App {
 enum Message {
     ToggleTheme,
     CopyCode,
+    SwitchPage(DesignerPage),
     EditorAction(text_editor::Action),
     Drop(types::ElementName, iced::Point, iced::Rectangle),
     HandleZones(
@@ -75,11 +76,11 @@ impl Application for App {
                 pane_state: state,
                 focus: None,
                 designer_state: DesignerState {
-                    designer_content: vec![],
+                    designer_content: Some(RenderedElement::test()),
                     designer_page: DesignerPage::Designer,
                 },
                 element_list: types::ElementName::ALL.to_vec(),
-                editor_content: text_editor::Content::with_text(&RenderedElement::test()),
+                editor_content: text_editor::Content::new(),
             },
             Command::none(),
         )
@@ -89,7 +90,16 @@ impl Application for App {
         let saved_state = if self.is_saved { "" } else { " *" };
 
         let project_name = match &self.current_project {
-            Some(n) => format!(" - {n}"),
+            Some(n) => {
+                format!(
+                    " - {}",
+                    if n.len() > 60 {
+                        format!("...{}", &n[n.len() - 40..])
+                    } else {
+                        n.to_owned()
+                    }
+                )
+            }
             None => "".to_owned(),
         };
 
@@ -108,6 +118,7 @@ impl Application for App {
         match message {
             Message::ToggleTheme => self.dark_theme = !self.dark_theme,
             Message::CopyCode => return clipboard::write(self.editor_content.text()),
+            Message::SwitchPage(page) => self.designer_state.designer_page = page,
             Message::EditorAction(action) => {
                 if let text_editor::Action::Scroll { lines: _ } = action {
                     self.editor_content.perform(action);
@@ -130,6 +141,19 @@ impl Application for App {
             }
             Message::HandleZones(name, zones) => {
                 println!("{:?}\n{name}", zones);
+                println!("{:?}\n{name}\n{:?}", zones, self.title());
+                if let Some(el) = &self.designer_state.designer_content {
+                    self.editor_content = text_editor::Content::with_text(
+                        &el.app_code(
+                            match &self.current_project {
+                                Some(title) => &title,
+                                None => "New App",
+                            },
+                            None,
+                        )
+                        .unwrap(),
+                    );
+                }
             }
             Message::PaneDragged(pane_grid::DragEvent::Dropped { pane, target }) => {
                 self.pane_state.drop(pane, target);
@@ -154,11 +178,16 @@ impl Application for App {
                             .id(iced::widget::container::Id::new("drop_zone"))
                             .height(Length::Fill)
                             .width(Length::Fill);
-                        let title = text("Designer").style(if is_focused {
-                            PANE_ID_COLOR_FOCUSED
-                        } else {
-                            PANE_ID_COLOR_UNFOCUSED
-                        });
+                        let title = row![
+                            text("Designer").style(if is_focused {
+                                PANE_ID_COLOR_FOCUSED
+                            } else {
+                                PANE_ID_COLOR_UNFOCUSED
+                            }),
+                            Space::with_width(Length::Fill),
+                            button("Switch to Code view")
+                                .on_press(Message::SwitchPage(DesignerPage::CodeView)),
+                        ];
                         let title_bar = pane_grid::TitleBar::new(title)
                             .padding(10)
                             .style(style::title_bar);
@@ -189,7 +218,10 @@ impl Application for App {
                                 .on_press(Message::CopyCode),
                                 "Copy code to clipboard",
                                 tooltip::Position::Left
-                            )
+                            ),
+                            Space::with_width(20),
+                            button("Switch to Designer view")
+                                .on_press(Message::SwitchPage(DesignerPage::Designer))
                         ];
                         let title_bar = pane_grid::TitleBar::new(title)
                             .padding(10)
diff --git a/iced_builder/src/types/mod.rs b/iced_builder/src/types/mod.rs
index db06ffa..eaf1686 100644
--- a/iced_builder/src/types/mod.rs
+++ b/iced_builder/src/types/mod.rs
@@ -3,7 +3,7 @@ pub mod rendered_element;
 use rendered_element::RenderedElement;
 
 pub struct DesignerState {
-    pub designer_content: Vec<RenderedElement>,
+    pub designer_content: Option<RenderedElement>,
     pub designer_page: DesignerPage,
 }
 
@@ -48,6 +48,7 @@ impl std::fmt::Display for ElementName {
     }
 }
 
+#[derive(Debug, Clone)]
 pub enum DesignerPage {
     Designer,
     CodeView,