From 9e417a4cbcd21498bca286f2b90e036fbb55cbd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9is=20Bazin?= <theis.bazin@outlook.com>
Date: Thu, 27 Oct 2022 18:24:16 +0200
Subject: [PATCH] :lipstick: Animated regenerating notebox in NONOTO

---
 .../src/sheet/sheetInpainterGraphicalView.ts  | 19 ++++++++++++-------
 .../styles/mixins/_colors.module.scss         |  4 ++++
 packages/renderer/styles/overlays.scss        |  6 +++++-
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/renderer/src/sheet/sheetInpainterGraphicalView.ts b/packages/renderer/src/sheet/sheetInpainterGraphicalView.ts
index dceef16e..3fe93409 100644
--- a/packages/renderer/src/sheet/sheetInpainterGraphicalView.ts
+++ b/packages/renderer/src/sheet/sheetInpainterGraphicalView.ts
@@ -127,7 +127,7 @@ class SheetInpainterGraphicalViewBase extends InpainterGraphicalView<
   protected onClickTimestampBoxFactory(
     timeStart: Fraction,
     timeEnd: Fraction
-  ): (event: PointerEvent) => void {
+  ): (this: HTMLElement, event?: PointerEvent | MouseEvent) => Promise<void> {
     // FIXME(theis) hardcoded 4/4 time-signature
     const [timeRangeStart_quarter, timeRangeEnd_quarter] = [
       timeStart,
@@ -139,14 +139,19 @@ class SheetInpainterGraphicalViewBase extends InpainterGraphicalView<
       `time_range_end_quarter=${timeRangeEnd_quarter}`,
     ]
 
-    return () => {
-      const metadata = this.getMetadata()
-      // TODO(theis, 2021-08-10): use inpainter.inpaint method
-      void this.inpainter.inpaint(
-        [...this.queryParameters, ...timerangeQueryParameters],
+    const self = this
+    return async function (
+      this: HTMLElement,
+      event?: PointerEvent | MouseEvent
+    ) {
+      this.classList.add('selected')
+      const metadata = self.getMetadata()
+      await self.inpainter.inpaint(
+        [...self.queryParameters, ...timerangeQueryParameters],
         undefined,
         metadata
       )
+      this.classList.remove('selected')
     }
   }
 
@@ -341,7 +346,7 @@ class SheetInpainterGraphicalViewBase extends InpainterGraphicalView<
   protected createTimeContainer(
     divId: string,
     duration_quarters: number,
-    onclick: (event?: PointerEvent) => void,
+    onclick: (this: HTMLElement, event?: PointerEvent | MouseEvent) => void,
     timestamps: [Fraction, Fraction]
   ): HTMLElement {
     // container for positioning the timestamp box and attached boxes
diff --git a/packages/renderer/styles/mixins/_colors.module.scss b/packages/renderer/styles/mixins/_colors.module.scss
index 6e918c6c..aa5ae609 100644
--- a/packages/renderer/styles/mixins/_colors.module.scss
+++ b/packages/renderer/styles/mixins/_colors.module.scss
@@ -672,6 +672,10 @@ $lighter-darkgray: color.scale(black, $lightness: +5%);
         }
       }
 
+      &.selected {
+        background-color: color.scale($accent-color, $alpha: -80%);
+      }
+
       &.dragover::after {
         background-color: $accent-color;
       }
diff --git a/packages/renderer/styles/overlays.scss b/packages/renderer/styles/overlays.scss
index d3ac53a3..c619979a 100644
--- a/packages/renderer/styles/overlays.scss
+++ b/packages/renderer/styles/overlays.scss
@@ -40,10 +40,14 @@ $chords-font-stack: 'Boogaloo', cursive;
     position: absolute;
     opacity: 0;
   }
+  &.selected {
+    animation: pulsing 0.5s alternate infinite;
+    opacity: 0.5;
+  }
 
   &.active {
-    display: block;
     opacity: 1;
+    display: block;
     z-index: 1;
     pointer-events: all;