feat: Add border option to editor

Author: richiemcilroy

apps/desktop/src/routes/editor/ConfigSidebar.tsx

@@ -193,6 +193,15 @@ pub struct ShadowConfiguration {
     pub blur: f32,    // Shadow blur amount (0-100)
 }
 
+#[derive(Type, Serialize, Deserialize, Clone, Debug, PartialEq)]
+#[serde(rename_all = "camelCase")]
+pub struct BorderConfiguration {
+    pub enabled: bool,
+    pub width: f32,     // Border width in pixels
+    pub color: Color,   // Border color (RGB)
+    pub opacity: f32,   // Border opacity (0-100)
+}
+
 #[derive(Type, Serialize, Deserialize, Clone, Debug)]
 #[serde(rename_all = "camelCase")]
 pub struct BackgroundConfiguration {
@@ -206,6 +215,19 @@ pub struct BackgroundConfiguration {
     pub shadow: f32,
     #[serde(default)]
     pub advanced_shadow: Option<ShadowConfiguration>,
+    #[serde(default)]
+    pub border: Option<BorderConfiguration>,
+}
+
+impl Default for BorderConfiguration {
+    fn default() -> Self {
+        Self {
+            enabled: false,
+            width: 5.0,
+            color: [255, 255, 255], // White
+            opacity: 80.0,          // 80% opacity
+        }
+    }
 }
 
 impl Default for BackgroundConfiguration {
@@ -219,6 +241,7 @@ impl Default for BackgroundConfiguration {
             crop: None,
             shadow: 73.6,
             advanced_shadow: Some(ShadowConfiguration::default()),
+            border: None, // Border is disabled by default for backwards compatibility
         }
     }
 }

apps/desktop/src/utils/tauri.ts

@@ -58,9 +58,11 @@ impl From<BackgroundSource> for Background {
 pub struct BackgroundLayer {
     // Current background configuration
     current_background: Option<Background>,
+    current_border: Option<cap_project::BorderConfiguration>,
 
     // Track what we rendered last to detect changes
     last_rendered_background: Option<Background>,
+    last_rendered_border: Option<cap_project::BorderConfiguration>,
     last_rendered_size: (u32, u32),
 
     // For image backgrounds
@@ -72,7 +74,9 @@ impl BackgroundLayer {
     pub fn new() -> Self {
         Self {
             current_background: None,
+            current_border: None,
             last_rendered_background: None,
+            last_rendered_border: None,
             last_rendered_size: (0, 0),
             image_path: None,
             loaded_image: None,
@@ -102,6 +106,41 @@ impl BackgroundLayer {
         }
     }
 
+    fn render_border(
+        &self,
+        canvas: &Canvas,
+        bounds: Rect,
+        border: &cap_project::BorderConfiguration,
+    ) {
+        if !border.enabled || border.width <= 0.0 {
+            return;
+        }
+
+        let mut paint = Paint::default();
+        paint.set_style(skia_safe::PaintStyle::Stroke);
+        paint.set_stroke_width(border.width);
+        paint.set_anti_alias(true);
+
+        let alpha = ((border.opacity / 100.0).clamp(0.0, 1.0) * 255.0) as u8;
+        let border_color = Color::from_argb(
+            alpha,
+            (border.color[0] >> 8) as u8,
+            (border.color[1] >> 8) as u8,
+            (border.color[2] >> 8) as u8,
+        );
+        paint.set_color(border_color);
+
+        let inset = border.width / 2.0;
+        let border_rect = Rect::from_xywh(
+            bounds.left() + inset,
+            bounds.top() + inset,
+            bounds.width() - border.width,
+            bounds.height() - border.width,
+        );
+
+        canvas.draw_rect(border_rect, &paint);
+    }
+
     fn render_color(&self, canvas: &Canvas, color: &[u16; 3], _bounds: Rect) {
         // Convert from u16 (0-65535) to u8 (0-255)
         let skia_color = Color::from_argb(
@@ -121,7 +160,6 @@ impl BackgroundLayer {
         angle: u16,
         bounds: Rect,
     ) {
-        // Convert colors from u16 (0-65535) to u8 (0-255)
         let start_color = Color::from_argb(
             255, // Full opacity
             (from[0] >> 8) as u8,
@@ -208,19 +246,29 @@ impl RecordableLayer for BackgroundLayer {
         let canvas = recorder.begin_recording(bounds, None);
         self.render_background(canvas, bounds);
 
+        // Render border if enabled
+        if let Some(border) = &uniforms.border {
+            if border.enabled {
+                self.render_border(canvas, bounds, border);
+            }
+        }
+
         // Update what was last rendered
         self.last_rendered_background = self.current_background.clone();
+        self.last_rendered_border = self.current_border.clone();
         self.last_rendered_size = uniforms.output_size;
 
         recorder.finish_recording_as_picture(None)
     }
 
     fn needs_update(&self, uniforms: &SkiaProjectUniforms) -> bool {
         let new_background = Background::from(uniforms.background.clone());
+        let new_border = uniforms.border.clone();
         let new_size = uniforms.output_size;
 
         // Check against what was last rendered, not what's currently prepared
         self.last_rendered_background.as_ref() != Some(&new_background)
+            || self.last_rendered_border != new_border
             || self.last_rendered_size != new_size
     }
 
@@ -261,6 +309,7 @@ impl RecordableLayer for BackgroundLayer {
 
         // Update current state (but not last_rendered, that happens in record())
         self.current_background = Some(new_background);
+        self.current_border = frame_data.uniforms.border.clone();
 
         Ok(())
     }

crates/project/src/configuration.rs

@@ -11,6 +11,7 @@ pub use background::BackgroundLayer;
 pub struct SkiaProjectUniforms {
     pub output_size: (u32, u32),
     pub background: cap_project::BackgroundSource,
+    pub border: Option<cap_project::BorderConfiguration>,
     // Add more fields as needed
 }
 

crates/rendering-skia/src/layers/background.rs

@@ -26,7 +26,13 @@ pub struct CompositeVideoFrameUniforms {
     pub shadow_opacity: f32,
     pub shadow_blur: f32,
     pub opacity: f32,
-    pub _padding: [f32; 3],
+    pub border_enabled: f32,
+    pub border_width: f32,
+    pub _padding0: f32,
+    pub _padding1: [f32; 2],
+    pub _padding1b: [f32; 2],
+    pub border_color: [f32; 4],
+    pub _padding2: [f32; 4],
 }
 
 impl Default for CompositeVideoFrameUniforms {
@@ -47,7 +53,13 @@ impl Default for CompositeVideoFrameUniforms {
             shadow_opacity: Default::default(),
             shadow_blur: Default::default(),
             opacity: 1.0,
-            _padding: Default::default(),
+            border_enabled: 0.0,
+            border_width: 5.0,
+            _padding0: 0.0,
+            _padding1: [0.0; 2],
+            _padding1b: [0.0; 2],
+            border_color: [1.0, 1.0, 1.0, 0.8],
+            _padding2: [0.0; 4],
         }
     }
 }

crates/rendering-skia/src/layers/mod.rs

@@ -75,7 +75,13 @@ impl DisplayLayer {
             },
         );
 
-        queue.write_buffer(&self.uniforms_buffer, 0, bytemuck::cast_slice(&[uniforms]));
+        self.uniforms_buffer = uniforms.to_buffer(device);
+
+        self.bind_group = Some(self.pipeline.bind_group(
+            device,
+            &self.uniforms_buffer,
+            &self.frame_texture_view,
+        ));
     }
 
     pub fn render(&self, pass: &mut wgpu::RenderPass<'_>) {

crates/rendering/src/composite_frame.rs

@@ -636,7 +636,38 @@ impl ProjectUniforms {
                     .as_ref()
                     .map_or(50.0, |s| s.blur),
                 opacity: layout.screen_opacity as f32,
-                _padding: [0.0; 3],
+                border_enabled: if project
+                    .background
+                    .border
+                    .as_ref()
+                    .map_or(false, |b| b.enabled)
+                {
+                    1.0
+                } else {
+                    0.0
+                },
+                border_width: project.background.border.as_ref().map_or(5.0, |b| b.width),
+                _padding0: 0.0,
+                _padding1: [0.0; 2],
+                _padding1b: [0.0; 2],
+                border_color: {
+                    let border = project.background.border.as_ref().unwrap_or(
+                        &cap_project::BorderConfiguration {
+                            enabled: false,
+                            width: 5.0,
+                            color: [255, 255, 255],
+                            opacity: 80.0,
+                        },
+                    );
+
+                    [
+                        border.color[0] as f32 / 255.0,
+                        border.color[1] as f32 / 255.0,
+                        border.color[2] as f32 / 255.0,
+                        (border.opacity / 100.0).clamp(0.0, 1.0),
+                    ]
+                },
+                _padding2: [0.0; 4],
             }
         };
 
@@ -745,7 +776,13 @@ impl ProjectUniforms {
                         .as_ref()
                         .map_or(50.0, |s| s.blur),
                     opacity: layout.regular_camera_transition_opacity() as f32,
-                    _padding: [0.0; 3],
+                    border_enabled: 0.0,
+                    border_width: 0.0,
+                    _padding0: 0.0,
+                    _padding1: [0.0; 2],
+                    _padding1b: [0.0; 2],
+                    border_color: [0.0, 0.0, 0.0, 0.0],
+                    _padding2: [0.0; 4],
                 }
             });
 
@@ -808,7 +845,13 @@ impl ProjectUniforms {
                     shadow_opacity: 0.0,
                     shadow_blur: 0.0,
                     opacity: layout.camera_only_transition_opacity() as f32,
-                    _padding: [0.0; 3],
+                    border_enabled: 0.0,
+                    border_width: 0.0,
+                    _padding0: 0.0,
+                    _padding1: [0.0; 2],
+                    _padding1b: [0.0; 2],
+                    border_color: [0.0, 0.0, 0.0, 0.0],
+                    _padding2: [0.0; 4],
                 }
             });
 

crates/rendering/src/layers/display.rs

@@ -1,6 +1,6 @@
 struct Uniforms {
-		crop_bounds: vec4<f32>,
-		target_bounds: vec4<f32>,
+    crop_bounds: vec4<f32>,
+    target_bounds: vec4<f32>,
     output_size: vec2<f32>,
     frame_size: vec2<f32>,
     velocity_uv: vec2<f32>,
@@ -14,6 +14,11 @@ struct Uniforms {
     shadow_opacity: f32,
     shadow_blur: f32,
     opacity: f32,
+    border_enabled: f32,
+    border_width: f32,
+    _padding1: vec2<f32>,
+    border_color: vec4<f32>,
+    _padding2: vec4<f32>,
 };
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
@@ -49,9 +54,9 @@ fn fs_main(@builtin(position) frag_coord: vec4<f32>) -> @location(0) vec4<f32> {
     let p = frag_coord.xy;
     let center = (uniforms.target_bounds.xy + uniforms.target_bounds.zw) * 0.5;
     let size = (uniforms.target_bounds.zw - uniforms.target_bounds.xy) * 0.5;
+    
     let dist = sdf_rounded_rect(p - center, size, uniforms.rounding_px);
 
-    // Advanced shadow calculation
     let min_frame_size = min(size.x, size.y);
     let shadow_enabled = uniforms.shadow > 0.0;
 
@@ -77,7 +82,6 @@ fn fs_main(@builtin(position) frag_coord: vec4<f32>) -> @location(0) vec4<f32> {
         shadow_enabled
     );
 
-    // Calculate shadow with no offset
     let shadow_dist = sdf_rounded_rect(p - center, size, uniforms.rounding_px);
 
     // Apply blur and size to shadow
@@ -90,7 +94,24 @@ fn fs_main(@builtin(position) frag_coord: vec4<f32>) -> @location(0) vec4<f32> {
 
     let bg_color = vec4<f32>(0.0);
 
-    // If outside the target area, just blend shadow with intermediate
+    if (uniforms.border_enabled > 0.0) {
+        let border_outer_dist = sdf_rounded_rect(
+            p - center,
+            size + vec2<f32>(uniforms.border_width),
+            uniforms.rounding_px + uniforms.border_width
+        );
+        let border_inner_dist = sdf_rounded_rect(p - center, size, uniforms.rounding_px);
+
+        if (border_outer_dist <= 0.0 && border_inner_dist > 0.0) {
+            let inner_alpha = smoothstep(-0.5, 0.5, border_inner_dist);
+            let outer_alpha = 1.0 - smoothstep(-0.5, 0.5, border_outer_dist);
+            let edge_alpha = inner_alpha * outer_alpha;
+
+            let border_alpha = edge_alpha * uniforms.border_color.w;
+            return vec4<f32>(uniforms.border_color.xyz, border_alpha);
+        }
+    }
+    
     if target_uv.x < 0.0 || target_uv.x > 1.0 || target_uv.y < 0.0 || target_uv.y > 1.0 {
         return shadow_color;
     }
@@ -102,7 +123,6 @@ fn fs_main(@builtin(position) frag_coord: vec4<f32>) -> @location(0) vec4<f32> {
     let blur_amount = select(uniforms.motion_blur_amount, uniforms.camera_motion_blur_amount, uniforms.camera_motion_blur_amount > 0.0);
 
     if blur_amount < 0.01 {
-        // First blend shadow with intermediate, then blend result with base color
         return mix(shadow_color, base_color, base_color.a);
     }