Fix slice preview panning and file dropdown width

docs/getting_started.md

@@ -1,9 +1,23 @@
+# Getting Started
+
 Welcome to mslicer!
 
 Currently, mslicer can only output `.goo` files, which is a format spsific to [ELEGOO](https://www.elegoo.com) resin printers. In the future I plan to add support for other formats, but in the meantime you can use [UVTools](https://github.com/sn4k3/UVtools) to convert between formats.
 
-If you are using mslicer for the first time, in order for the sliced results to be loadable by your printer, you will first need to configure the platform resolution and build volume in the `Slice Config` panel on the left. The defaults are for the ElEGOO [Saturn 3 Ultra](https://us.elegoo.com/products/elegoo-saturn-3-ultra-resin-3d-printer-12k). If these values are wrong, your printer may fail to load the sliced .goo file without even showing an error message.
+## Setup
 
-mslicer can load `.stl` and `.obj` models, either by finding the `Import Model` button under the File menu, or by dragging the files onto the window. For now you can load the built in test model (it's the [Utah Teapot](https://en.wikipedia.org/wiki/Utah_teapot)) by pressing `Ctrl+T`.
+In order for the sliced output to be loadable by your printer, you will first need to configure the platform resolution and build volume in the `Slice Config` panel on the left. The defaults are for the [ElEGOO Saturn 3 Ultra](https://us.elegoo.com/products/elegoo-saturn-3-ultra-resin-3d-printer-12k). If these values are wrong, your printer may fail to load the output without even showing an error message.
 
-To be continued
+## Models
+
+mslicer can load `.stl` and `.obj` models. Add one by going to File  Import Model or drag and drop a model file into the workspace. For now you can load the built in test model (it's the [Utah Teapot](https://en.wikipedia.org/wiki/Utah_teapot)) by pressing `Ctrl+T`.
+
+You can move around the viewport by scrolling on it to move towards or away from the target point, dragging with left click to orbit the target point, and dragging with right click to move the target point.
+
+Each model in your project is listed in the `Models` panel. By clicking the arrow button next to a model, you can access all it's properties, including size, position, rotation as well as run actions like deleting the model, or aligning it to the bed.
+
+If you're unfamiliar with normals, they are vectors at each vertex of a model that are perpendicular to the surface and point outward. Normals are crucial for the slicer to determine whether it is entering or exiting a model, especially when models intersect themselves or other models. Incorrect normals from imported `.stl` or `.obj` files can result in artifacts in the output. For this reason, under the `Normals` action you can either flip or recalculate the normals of a model.
+
+## Slicing
+
+After starting a slice operation, a new panel will open showing the operation progress. It shouldnt be open for long though because  (as far as I know) mslicer is the fastest MSLA slicer currently available. :p You will then be presented with a slice preview, you can drag to pan, scroll to zoom, and scrub through the the slider on the left to look through each layer.

mslicer/src/app/mod.rs

@@ -108,7 +108,7 @@ impl App {
             const NO_MODELS_ERROR: &str = concatcp!(
                 "There are no models to slice. Add one by going to File ",
                 CARET_RIGHT,
-                " Open Model or drag and drop a model file into the workspace."
+                " Import Model or drag and drop a model file into the workspace."
             );
             self.popup.open(Popup::simple(
                 "Slicing Error",

mslicer/src/shaders/solid_line.wgsl

@@ -4,25 +4,25 @@ struct Context {
     transform: mat4x4<f32>,
 }
 
+struct VertexInput {
+    @location(0) position: vec4<f32>,
+    @location(1) color: vec3<f32>
+}
+
 struct VertexOutput {
-    @builtin(position)
+    @builtin(position) position: vec4<f32>,
-    position: vec4<f32>,
+    @location(0) color: vec3<f32>,
-    @location(0)
-    color: vec3<f32>,
 };
 
 @vertex
-fn vert(
+fn vert(in: VertexInput) -> VertexOutput {
-    @location(0) position: vec4<f32>,
-    @location(1) color: vec3<f32>
-) -> VertexOutput {
     var out: VertexOutput;
-    out.position = context.transform * position;
+    out.position = context.transform * in.position;
-    out.color = color;
+    out.color = in.color;
     return out;
 }
 
 @fragment
 fn frag(in: VertexOutput) -> @location(0) vec4<f32> {
     return vec4<f32>(in.color, 1.0);
-}
+}

mslicer/src/windows/about.rs

@@ -29,6 +29,7 @@ pub fn ui(app: &mut App, ui: &mut Ui, _ctx: &Context) {
         ui.label(".");
     });
 
+    ui.add_space(8.0);
     ui.horizontal(|ui| {
         ui.selectable_value(
             &mut app.state.docs_page,
@@ -42,5 +43,7 @@ pub fn ui(app: &mut App, ui: &mut Ui, _ctx: &Context) {
         );
     });
 
+    ui.separator();
+
     CompiledMarkdown::compile(include_str!("../../../docs/getting_started.md")).render(ui);
 }

mslicer/src/windows/slice_operation.rs

@@ -174,8 +174,9 @@ fn slice_preview(ui: &mut egui::Ui, result: &mut SliceResult) {
 
             let preview_scale = result.preview_scale.exp2();
             let drag = response.drag_delta();
-            result.preview_offset.x -= drag.x / rect.width() * width as f32 / preview_scale
+            let aspect = rect.width() / rect.height() * height as f32 / width as f32;
-                * (info.resolution.x as f32 / info.resolution.y as f32);
+            result.preview_offset.x -=
+                drag.x / rect.width() * width as f32 / preview_scale * aspect;
             result.preview_offset.y += drag.y / rect.height() * height as f32 / preview_scale;
 
             if response.hovered() {

mslicer/src/windows/top_bar.rs

@@ -38,7 +38,7 @@ pub fn ui(app: &mut App, ctx: &Context) {
 
             ui.menu_button("🖹 File", |ui| {
                 ui.style_mut().visuals.button_frame = false;
-                ui.set_width(160.0);
+                ui.set_width(170.0);
 
                 let import_model_button = ui.add(
                     Button::new("Import Model")