From 0b1a3e5f82aed23827570bd8d31aa8db5a009fa9 Mon Sep 17 00:00:00 2001 From: Bart Brouns Date: Thu, 12 Dec 2024 17:48:44 +0100 Subject: [PATCH] draw ActionTrigger outline as Element for glow --- src/editor.rs | 95 +++++++++++++++++++++++++++++++++++++++------------ src/style.css | 28 ++++++++++----- 2 files changed, 94 insertions(+), 29 deletions(-) diff --git a/src/editor.rs b/src/editor.rs index 72b7db9..8d54b3d 100644 --- a/src/editor.rs +++ b/src/editor.rs @@ -541,14 +541,6 @@ impl DelayGraph { Label::new(cx, params.map(Self::create_tap_length_text)).class("tap-length-label"); }) - .bind( - params.map(|v| v.current_time.load(Ordering::SeqCst)), - |mut handle, _| handle.needs_redraw(), - ) - .bind( - input_meter.map(|v| v.load(Ordering::SeqCst)), - |mut handle, _| handle.needs_redraw(), - ) } fn create_tap_length_text(params: &Arc) -> String { const TOTAL_DIGITS: usize = 3; @@ -1279,6 +1271,7 @@ impl ActionTrigger { own_index, } .build(cx, move |cx| { + Element::new(cx).class("trigger-element").hoverable(true); Label::new( cx, learned_notes.map(move |notes| { @@ -1292,6 +1285,7 @@ impl ActionTrigger { })) .class("action-label"); }) + .hoverable(true) } pub fn start_learning(&self) { @@ -1374,8 +1368,16 @@ impl ActionTrigger { // Adjust bounds for borders let x = border_width.mul_add(0.5, bounds.x); let y = border_width.mul_add(0.5, bounds.y); - let w = bounds.w - border_width; - let h = bounds.h - border_width; + // let w = bounds.w - border_width; + // let h = bounds.h - border_width; + // let x = border_width.mul_add(-0.5, bounds.x); + // let y = border_width.mul_add(-0.5, bounds.y); + // let w = bounds.w + border_width; + // let h = bounds.h + border_width; + // let x = bounds.x; + // let y = bounds.y; + let w = bounds.w; + let h = bounds.h; // Drawing the background rectangle let mut path = vg::Path::new(); @@ -1421,16 +1423,69 @@ impl ActionTrigger { canvas.draw_path(&path, &paint); // Drawing the border around the rectangle - let mut path = vg::Path::new(); - path.add_rect(vg::Rect::from_xywh(x, y, w, h), None); + // let mut path = vg::Path::new(); + // path.add_rect(vg::Rect::from_xywh(x, y, w, h), None); - let mut paint = vg::Paint::default(); - paint.set_color(border_color); - paint.set_anti_alias(true); - paint.set_stroke_width(border_width); - paint.set_style(vg::PaintStyle::Stroke); + // let mut paint = vg::Paint::default(); + // paint.set_color(border_color); + // paint.set_anti_alias(true); + // paint.set_stroke_width(border_width); + // paint.set_style(vg::PaintStyle::Stroke); - canvas.draw_path(&path, &paint); + // canvas.draw_path(&path, &paint); + } + + // clippy's suggestion doesn't work, cause we need the early exit + // #[allow(clippy::match_same_arms)] + // fn OLD_get_action_class() -> String { + // let class = match ( + // self.is_learning(), + // self.params.global.mute_is_toggle.value(), + // self.is_enabled(), + // self.is_playing(), + // self.own_index == CLEAR_TAPS, + // ) { + // (true, _, _, _, _) => "learning", + // (_, _, _, true, true) => "muted", + // (_, true, true, _, _) => "muted", + // (_, true, false, _, _) => "default", + // (_, _, true, _, _) => "muted", + // (_, _, _, true, _) => "live", + // _ => "default", // Default: paint with background color + // }; + // class + // } + #[allow(clippy::match_same_arms)] + fn get_action_class( + params: &Arc, + is_learning: Arc, + learned_notes: Arc, + last_played_notes: Arc, + enabled_actions: Arc, + own_index: usize, + ) -> &str { + let is_learning = + is_learning.load(Ordering::SeqCst) && learned_notes.load(own_index) == LEARNING; + let is_playing = last_played_notes.is_playing(learned_notes.load(own_index)); + let is_enabled = enabled_actions.load(own_index); + + // Determine the paint color based on the state + match ( + // true,true,true,true,true, + is_learning, + params.global.mute_is_toggle.value(), + is_enabled, + is_playing, + own_index == CLEAR_TAPS, + ) { + (true, _, _, _, _) => "learning", + (_, _, _, true, true) => "muted", + (_, true, true, _, _) => "muted", + (_, true, false, _, _) => "default", + (_, _, true, _, _) => "muted", + (_, _, _, true, _) => "live", + _ => "default", // Default: paint with background color + } } } @@ -1440,7 +1495,7 @@ impl View for ActionTrigger { Some("action-trigger") } - fn event(&mut self, cx: &mut EventContext, event: &mut Event) { + fn event(&mut self, _cx: &mut EventContext, event: &mut Event) { event.map(|window_event, meta| match window_event { // We don't need special double and triple click handling WindowEvent::MouseDown(MouseButton::Left) @@ -1451,7 +1506,6 @@ impl View for ActionTrigger { } else { self.start_learning(); } - cx.needs_redraw(); meta.consume(); } _ => {} @@ -1466,7 +1520,6 @@ impl View for ActionTrigger { let outline_color: vg::Color = draw_context.outline_color().into(); let selection_color: vg::Color = draw_context.selection_color().into(); let border_width = draw_context.border_width(); - // let outline_width = draw_context.outline_width(); self.draw_background( canvas, diff --git a/src/style.css b/src/style.css index e698300..068b3ba 100644 --- a/src/style.css +++ b/src/style.css @@ -126,8 +126,6 @@ param-slider .value-entry .selection { .slider-label { left: 1s; right: 9px; - top: 1s; - bottom: 1s; shadow: 0px 0px 13px #e0ce9109; background-color: #e0ce9106; } @@ -161,28 +159,42 @@ delay-graph { shadow: 0px 0px 13px #e0ce9109; background-color: #e0ce9106; } - action-trigger { width: 210px; height: 30px; top: 0px; bottom: 0px; + border-width: 1px; + background-color: #4e4e4e; border-color: #5879af; outline-color: #e0ce91; selection-color: #fabdf0; +} + +.trigger-element { + width: 210px; + height: 30px; + border-width: 1px; - shadow: 0px 0px 5px #fabdf0; - transition: background-color 240ms; + border-color: #fabdf0; + shadow: 0px 0px 13px #fabdf03f; } -action-trigger:hover { - /* background-color: #292929; */ +.action-label { + right: 1s; + bottom: 3px; transition: background-color 120ms; + transition: shadow 120ms; +} +.action-label:hover { + shadow: 0px 0px 13px #e0ce9129; + background-color: #e0ce9110; + transition: background-color 420ms; + transition: shadow 420ms; } .action-name { right: 9px; - top: 1s; bottom: 4px; shadow: 0px 0px 13px #e0ce9109; background-color: #e0ce9106;