Add more custom UI

Author: Avarel

libs/silica/src/file.rs

@@ -29,7 +29,6 @@ pub struct ProcreateFile {
     pub composite: Option<SilicaLayer>,
     pub layers: SilicaGroup,
     pub size: Size<u32>,
-    pub layer_count: u32,
 }
 
 pub struct ProcreateFileMetadata {
@@ -67,4 +66,8 @@ impl ProcreateFile {
     ) -> Result<(Self, ProcreateFileMetadata), SilicaError> {
         ProcreateUnloadedFile::from_ns(&archive, &nka)?.load(dispatch)
     }
+
+    pub fn layer_count(&self) -> u32 {
+        self.layers.layer_count()
+    }
 }

libs/silica/src/ir/mod.rs

@@ -57,8 +57,6 @@ pub struct ProcreateUnloadedFile<'a> {
     //     videoDuration: String? = "Calculating..."
     pub tile_size: u32,
 
-    pub layer_count: u32,
-
     info: IRData<'a>,
 
     layers: Vec<SilicaIRHierarchy<'a>>,
@@ -98,8 +96,6 @@ impl<'a> ProcreateUnloadedFile<'a> {
             atlas: AtlasTextureTiling::compute_atlas_size(chunk_count, tile_size),
         };
 
-        let layer_count = layers.iter().map(|ir| ir.count_layer()).sum::<u32>() + 1;
-
         Ok(Self {
             info: IRData {
                 archive,
@@ -132,7 +128,6 @@ impl<'a> ProcreateUnloadedFile<'a> {
                 vertically: nka.fetch::<bool>(root, "flippedVertically")?,
             },
             tile_size,
-            layer_count,
             composite: nka.fetch::<SilicaIRLayer>(root, "composite")?,
             layers,
         })
@@ -177,7 +172,6 @@ impl<'a> ProcreateUnloadedFile<'a> {
                 flipped: self.flipped,
                 tile_size: self.tile_size,
                 size: self.info.size,
-                layer_count: self.layer_count,
             },
             ProcreateFileMetadata {
                 atlas_texture,

libs/silica/src/layers.rs

@@ -92,6 +92,15 @@ pub enum SilicaHierarchy {
     Group(SilicaGroup),
 }
 
+impl SilicaHierarchy {
+    pub fn layer_count(&self) -> u32 {
+        match self {
+            SilicaHierarchy::Layer(_) => 1,
+            SilicaHierarchy::Group(silica_group) => silica_group.layer_count(),
+        }
+    }
+}
+
 #[derive(Debug, Clone, PartialEq)]
 pub struct SilicaGroup {
     pub hidden: bool,
@@ -102,6 +111,12 @@ pub struct SilicaGroup {
     pub id: u32,
 }
 
+impl SilicaGroup {
+    pub fn layer_count(&self) -> u32 {
+        self.children.iter().map(|hier| hier.layer_count()).sum()
+    }
+}
+
 #[derive(Debug, Clone, PartialEq)]
 pub struct SilicaChunk {
     pub col: u32,

src/gui/custom/blend_radio.rs

@@ -0,0 +1,81 @@
+use egui::*;
+use silicate_compositor::blend::BlendingMode;
+
+pub struct BlendModeRadio<'a> {
+    value: &'a mut BlendingMode,
+}
+
+#[derive(Clone, Copy, Debug)]
+pub struct BlendModeRadioLoaded;
+
+impl BlendModeRadioLoaded {
+    pub fn load(ctx: &Context, id: Id) -> Option<Self> {
+        ctx.data_mut(|d| d.get_persisted(id))
+    }
+
+    pub fn store(self, ctx: &Context, id: Id) {
+        ctx.data_mut(|d| d.insert_persisted(id, self));
+    }
+}
+
+impl<'a> BlendModeRadio<'a> {
+    pub fn new(value: &'a mut BlendingMode) -> Self {
+        Self { value }
+    }
+
+    fn layout_scroll_area(&mut self, ui: &mut Ui) {
+        let min_y = ui.min_rect().min.y;
+        let mut scroll_to_value = 0.0;
+        let mut scroll = ScrollArea::vertical().max_height(70.0).show(ui, |ui| {
+            ui.set_width(ui.available_width());
+
+            for b in BlendingMode::all() {
+                let mut frame = egui::Frame::NONE
+                    .inner_margin(Margin::symmetric(10, 3))
+                    .begin(ui);
+                {
+                    let ui = &mut frame.content_ui;
+                    ui.set_width(ui.available_width());
+                    Label::new(RichText::new(b.as_str()).color(Color32::WHITE))
+                        .selectable(false)
+                        .ui(ui);
+                }
+                let response = ui.allocate_rect(frame.content_ui.min_rect(), Sense::click());
+
+                if b == self.value {
+                    scroll_to_value = response.rect.min.y - min_y;
+                    frame.frame.fill = super::ACCENT_COLOR;
+                } else if response.hovered() {
+                    frame.frame.fill = Color32::from_rgb(50, 50, 50)
+                }
+
+                if response.clicked() {
+                    *self.value = *b;
+                }
+                frame.end(ui);
+            }
+        });
+
+        let loaded = BlendModeRadioLoaded::load(ui.ctx(), ui.id()).is_some();
+        if !loaded {
+            scroll.state.offset = vec2(0.0, scroll_to_value);
+            scroll.state.store(ui.ctx(), scroll.id);
+        }
+        BlendModeRadioLoaded.store(ui.ctx(), ui.id());
+    }
+
+    pub fn ui(mut self, ui: &mut Ui) -> Response {
+        let old_value = *self.value;
+
+        let mut response = egui::Frame::default()
+            .inner_margin(Margin::symmetric(0, 5))
+            .corner_radius(4)
+            .fill(Color32::from_rgb(20, 20, 20))
+            .show(ui, |ui| self.layout_scroll_area(ui)).response;
+
+        if old_value != *self.value {
+            response.mark_changed();
+        }
+        response
+    }
+}

src/gui/custom/mod.rs

@@ -1 +1,6 @@
-pub mod slider;
+use egui::Color32;
+
+pub mod opacity_slider;
+pub mod blend_radio;
+
+const ACCENT_COLOR: Color32 = Color32::from_rgb(48, 116, 243);

src/gui/custom/slider.rs src/gui/custom/opacity_slider.rssrc/gui/custom/slider.rs renamed to src/gui/custom/opacity_slider.rs

@@ -1,6 +1,6 @@
 use egui::*;
 
-const FILL_COLOR: Color32 = Color32::from_rgb(48, 116, 243);
+const FILL_COLOR: Color32 = super::ACCENT_COLOR;
 const HANDLE_RADIUS: f32 = 5.0;
 
 #[must_use = "You should put this widget in a ui with `ui.add(widget);`"]

src/gui/layout.rs

@@ -2,14 +2,16 @@ use egui::load::SizedTexture;
 use egui::*;
 use egui_dock::{NodeIndex, SurfaceIndex};
 use silica::layers::{SilicaGroup, SilicaHierarchy, SilicaLayer};
-use silicate_compositor::blend::BlendingMode;
 use std::collections::HashMap;
 use std::sync::Arc;
 use tokio::sync::mpsc::Receiver;
 
 use crate::app::{App, Instance, InstanceKey, UserEvent};
 
-use super::{canvas::CanvasView, custom::slider::OpacitySlider};
+use super::{
+    canvas::CanvasView,
+    custom::{blend_radio::BlendModeRadio, opacity_slider::OpacitySlider},
+};
 
 struct ControlsGui<'a> {
     app: &'a Arc<App>,
@@ -38,7 +40,7 @@ impl ControlsGui<'_> {
                 ui.label(file.stroke_count.to_string());
                 ui.end_row();
                 ui.label("Layer Count");
-                ui.label(file.layer_count.to_string());
+                ui.label(file.layer_count().to_string());
                 ui.end_row();
                 ui.label("Canvas Size");
 
@@ -80,9 +82,14 @@ impl ControlsGui<'_> {
                     .write()
                     .get_mut(&self.active_canvas)
                 {
-                    let mut degree = instance.rotation.to_degrees();
-                    ui.add(Slider::new(&mut degree, 0.0..=360.0).suffix(" deg"));
-                    instance.rotation = degree.to_radians();
+                    ui.add(
+                        Slider::new(&mut instance.rotation, 0.0..=std::f32::consts::TAU)
+                            .custom_formatter(|v, _| {
+                                let degree = v.to_degrees();
+                                format!("{degree:.0}")
+                            })
+                            .suffix(" deg"),
+                    );
                 } else {
                     ui.label("No file loaded...");
                 }
@@ -154,20 +161,14 @@ impl ControlsGui<'_> {
 
     fn layout_layer_control(ui: &mut Ui, l: &mut SilicaLayer, changed: &mut bool) {
         *changed |= OpacitySlider::new(&mut l.opacity).ui(ui).changed();
-
-        ui.style_mut().spacing.combo_width = ui.available_width();
-        ComboBox::from_id_salt(0)
-            .selected_text(l.blend.as_str())
-            .show_ui(ui, |ui| {
-                for b in BlendingMode::all() {
-                    *changed |= ui.selectable_value(&mut l.blend, *b, b.as_str()).changed();
-                }
-            });
+        ui.add_space(10.0);
+        *changed |= BlendModeRadio::new(&mut l.blend).ui(ui).changed();
 
         Grid::new(l.id).show(ui, |ui| {
             ui.label("Clipped");
             *changed |= Checkbox::without_text(&mut l.clipped).ui(ui).changed();
         });
+        ui.add_space(10.0);
     }
 
     fn layout_layers_sub(ui: &mut Ui, layers: &mut SilicaGroup, changed: &mut bool) {
@@ -200,13 +201,20 @@ impl ControlsGui<'_> {
             );
 
             let header_res = ui.horizontal(|ui| {
-                let mut frame = egui::Frame::default()
-                    .corner_radius(2.5)
-                    .inner_margin(5.0)
+                let mut frame = egui::Frame::new()
+                    .corner_radius(3)
+                    .inner_margin(5)
                     .begin(ui);
                 {
                     let ui = &mut frame.content_ui;
-                    if ui.strong(layer_name).clicked() {
+                    if ui
+                        .add(
+                            Label::new(layer_name)
+                                .selectable(false)
+                                .sense(Sense::click()),
+                        )
+                        .clicked()
+                    {
                         state.toggle(ui);
                     }
                     ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
@@ -224,17 +232,18 @@ impl ControlsGui<'_> {
                 }
                 frame.end(ui);
             });
-
-            state.show_body_indented(&header_res.response, ui, |ui| {
-                match layer {
-                    SilicaHierarchy::Layer(layer) => {
+            match layer {
+                SilicaHierarchy::Layer(layer) => {
+                    state.show_body_unindented(ui, |ui| {
                         Self::layout_layer_control(ui, layer, changed);
-                    }
-                    SilicaHierarchy::Group(layer) => {
+                    });
+                }
+                SilicaHierarchy::Group(layer) => {
+                    state.show_body_indented(&header_res.response, ui, |ui| {
                         Self::layout_layers_sub(ui, layer, changed);
-                    }
-                };
-            });
+                    });
+                }
+            };
         });
     }
 
@@ -260,12 +269,25 @@ impl ControlsGui<'_> {
                 ui.end_row();
                 ui.label("Background Color");
 
-                // Safety: This is trivially safe. The underlying container is of 4 elements.
-                // This does the same thing as split_array_mut except that is not stabilized yet.
-                let bg = unsafe { &mut *(file.background_color.as_mut_ptr() as *mut [f32; 3]) };
+                // Safety: this is trivially safe, N=3 < 4
+                let bg = unsafe {
+                    file.background_color
+                        .first_chunk_mut::<3>()
+                        .unwrap_unchecked()
+                };
                 changed |= ui.color_edit_button_rgb(bg).changed();
             });
 
+            // let bg = &mut file.background_color;
+            // let rgb = Rgba::from_rgb(bg[0], bg[1], bg[2]);
+            // let mut color = Color32::from(rgb);
+            // let old_value = color;
+            // color_picker::color_picker_color32(ui, &mut color, color_picker::Alpha::Opaque);
+            // if old_value != color {
+            //     *bg = Rgba::from(color).to_rgba_unmultiplied();
+            //     changed = true;
+            // }
+
             instance.tick_change(changed);
         } else {
             ui.label("No file hierachy.");
@@ -382,6 +404,7 @@ impl ViewerGui {
                 .style(egui_dock::Style::from_egui(ui.style()))
                 .show_add_buttons(true)
                 .show_leaf_close_all_buttons(false)
+                .show_leaf_collapse_buttons(false)
                 .show_inside(
                     ui,
                     &mut CanvasGui {