diff --git a/packages/renderer/src/sheet/sheetInpainterGraphicalView.ts b/packages/renderer/src/sheet/sheetInpainterGraphicalView.ts index dceef16..3fe9340 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 { // 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 6e918c6..aa5ae60 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 d3ac53a..c619979 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;