💄 Animated regenerating notebox in NONOTO

SonyCSLParis · Oct 27, 2022 · 9e417a4 · 9e417a4
1 parent e08732b
commit 9e417a4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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;