highlight the selected annotation

This is related to #29.

Author: lueck

src/seed-text-view.ts

@@ -7,9 +7,10 @@ import { storeConsumerMixin } from './store-consumer-mixin';
 import { windowMixin, windowStyles } from './window-mixin';
 
 import { seedTextViewContext } from "./seed-context";
-import { addAppListener } from "./redux/seed-store";
+import { addAppListener, SeedState } from "./redux/seed-store";
 import { initText, setText, TextState } from "./redux/textsSlice";
 import { initTextView, setText as setTextViewText, scrolledTo, fetchAnnotationsPerSegment } from "./redux/textViewsSlice";
+import { annotationSelected } from './redux/annotationsSlice';
 import { selectAnnotationsAtSegmentThunk, passByAnnotationsAtSegmentThunk } from "./redux/selectAnnotations";
 import { CSSDefinition } from './redux/cssTypes';
 import { scrolled, syncOthers } from './redux/synopsisSlice';
@@ -18,8 +19,6 @@ import { setScrollTarget } from './redux/synopsisMiddleware';
 
 import log from "./logging";
 
-import { SeedState } from './redux/seed-store';
-
 
 
 // define the web component
@@ -47,6 +46,8 @@ export class SeedTextView extends windowMixin(storeConsumerMixin(LitElement)) {
     @state()
     doc: string | undefined;
 
+    protected annotationSelected: string | null = null;
+
     protected docLoaded: boolean = false;
 
     protected msgQueue: Array<any> = [];
@@ -117,6 +118,19 @@ export class SeedTextView extends windowMixin(storeConsumerMixin(LitElement)) {
 	    }
 	}));
 
+	this.store?.dispatch(addAppListener({
+	    actionCreator: annotationSelected,
+	    effect: (_action, listenerApi): void => {
+		// reset highlightning of priviously selected annotation
+		if (this.annotationSelected) {
+		    this.colorizeAnnotation(listenerApi.getState(), this.annotationSelected, { "border": "none"});
+		}
+		// highlight currently selected annotation
+		this.annotationSelected = listenerApi.getState().annotations.annotationSelected ?? "unknown";
+		this.colorizeAnnotation(listenerApi.getState(), this.annotationSelected, { "border": "1px solid red"});
+	    }
+	}));
+
 	// this.storeUnsubscribeListeners.push(subsc);
     }
 
@@ -147,7 +161,7 @@ export class SeedTextView extends windowMixin(storeConsumerMixin(LitElement)) {
     }
 
     /*
-     * A callback for scrolling the text to `scrollTarget` position. 
+     * A callback for scrolling the text to `scrollTarget` position.
      */
     scrollTextTo(scrollTarget: string): void {
 	if (this.iframe) {
@@ -308,6 +322,22 @@ export class SeedTextView extends windowMixin(storeConsumerMixin(LitElement)) {
 	}
     }
 
+    /*
+     * Get the text segements included in an annotation given by
+     * `annotId` and colorize them with the given CSS.
+     */
+    protected colorizeAnnotation(state: SeedState, annotId: string, css: CSSDefinition): void {
+	if (state.textViews[this.id].segmentsPerAnnotation.hasOwnProperty(annotId)) {
+	    log.debug("colorizing selected annotation in " + this.id + ": " + annotId);
+	    const segments: Array<string> = state.textViews[this.id].segmentsPerAnnotation[annotId];
+	    const cssPerSegments: { [segmentId: string]: CSSDefinition } = {};
+	    segments.forEach(seg => {
+		cssPerSegments[seg] = css;
+	    });
+	    this.colorizeText(cssPerSegments);
+	}
+    }
+
     static styles: CSSResultGroup = [
 	windowStyles,
 	css`