Add a safe mode button to Diopser's GUI

plugins/diopser/src/editor.rs

@@ -21,8 +21,11 @@ use nih_plug_vizia::{assets, create_vizia_editor, ViziaState, ViziaTheming};
 use std::sync::atomic::AtomicBool;
 use std::sync::Arc;
 
+use self::button::SafeModeButton;
 use crate::DiopserParams;
 
+mod button;
+
 /// VIZIA uses points instead of pixels for text
 const POINT_SCALE: f32 = 0.75;
 
@@ -86,13 +89,7 @@ fn top_bar(cx: &mut Context) {
                 .border_color(Color::rgb(0x0a, 0x0a, 0x0a))
                 .border_width(Pixels(1.0));
 
-            Element::new(cx)
+            SafeModeButton::new(cx, Data::safe_mode, "Safe mode").left(Pixels(10.0));
-                .width(Pixels(110.0))
-                .height(Pixels(30.0))
-                .left(Pixels(10.0))
-                .background_color(Color::rgb(0xff, 0xf2, 0x80))
-                .border_color(Color::rgb(0x0a, 0x0a, 0x0a))
-                .border_width(Pixels(1.0));
 
             ParamButton::new(cx, Data::params, |params| &params.bypass)
                 .for_bypass()

plugins/diopser/src/editor/button.rs

@@ -0,0 +1,50 @@
+use nih_plug_vizia::vizia::prelude::*;
+use std::sync::atomic::{AtomicBool, Ordering};
+use std::sync::Arc;
+
+/// A custom toggleable button coupled to an `Arc<AtomicBool`. Otherwise this is very similar to the
+/// param button.
+#[derive(Lens)]
+pub struct SafeModeButton<L: Lens<Target = Arc<AtomicBool>>> {
+    lens: L,
+}
+
+impl<L: Lens<Target = Arc<AtomicBool>>> SafeModeButton<L> {
+    /// Creates a new button bound to the `Arc<AtomicBool>`.
+    pub fn new<T>(cx: &mut Context, lens: L, label: impl Res<T>) -> Handle<Self>
+    where
+        T: ToString,
+    {
+        Self { lens: lens.clone() }
+            .build(cx, move |cx| {
+                Label::new(cx, label);
+            })
+            .checked(lens.map(|v| v.load(Ordering::Relaxed)))
+            // We'll pretend this is a param-button, so this class is used for assigning a unique
+            // color
+            .class("safe-mode")
+    }
+}
+
+impl<L: Lens<Target = Arc<AtomicBool>>> View for SafeModeButton<L> {
+    fn element(&self) -> Option<&'static str> {
+        // Reuse the styling from param-button
+        Some("param-button")
+    }
+
+    fn event(&mut self, cx: &mut EventContext, event: &mut Event) {
+        event.map(|window_event, meta| match window_event {
+            WindowEvent::MouseDown(MouseButton::Left)
+            // We don't need special double and triple click handling
+            | WindowEvent::MouseDoubleClick(MouseButton::Left)
+            | WindowEvent::MouseTripleClick(MouseButton::Left) => {
+                // We can just unconditionally toggle the boolean here
+                let atomic = self.lens.get(cx);
+                atomic.fetch_xor(true, Ordering::AcqRel);
+
+                meta.consume();
+            }
+            _ => {}
+        });
+    }
+}

plugins/diopser/src/theme.css

@@ -3,3 +3,17 @@
   height: 50px;
   width: 100%;
 }
+
+/* The safe mode button reuses the param-button element's style with a different class */
+param-button.safe-mode {
+  background-color: #fff28000;
+  transition: background-color 0.1 0;
+}
+param-button.safe-mode:hover {
+  background-color: #fff28020;
+  transition: background-color 0.1 0;
+}
+param-button.safe-mode:checked {
+  background-color: #fff280;
+  transition: background-color 0.1 0;
+}