feat(annotation): added keybinds for iterating through active annotat…

…ion list, also pins and jumps to each annotation

src/layer/index.ts

@@ -99,7 +99,7 @@ import {
 } from "#src/util/json.js";
 import { MessageList } from "#src/util/message_list.js";
 import type { AnyConstructor } from "#src/util/mixin.js";
-import { NullarySignal } from "#src/util/signal.js";
+import { NullarySignal, Signal } from "#src/util/signal.js";
 import type { SignalBindingUpdater } from "#src/util/signal_binding_updater.js";
 import {
   addSignalBinding,
@@ -192,6 +192,27 @@ export class UserLayer extends RefCounted {
 
   messages = new MessageList();
 
+  layerEventListeners = new Map<string, Signal>();
+
+  dispatchLayerEvent(type: string) {
+    this.layerEventListeners.get(type)?.dispatch();
+  }
+
+  registerLayerEvent(type: string, handler: () => void) {
+    const { layerEventListeners } = this;
+    let existingSignal = layerEventListeners.get(type);
+    if (!existingSignal) {
+      existingSignal = new Signal();
+      layerEventListeners.set(type, existingSignal);
+    }
+    const unregister = existingSignal.add(handler);
+    return () => {
+      const res = unregister();
+      // TODO delete from map? currently handlers is private
+      return res;
+    };
+  }
+
   initializeSelectionState(state: this["selectionState"]) {
     state.generation = -1;
     state.localPositionValid = false;

src/ui/annotations.ts

@@ -455,11 +455,49 @@ export class AnnotationLayerView extends Tab {
     this.virtualList.element.addEventListener("mouseleave", () => {
       this.displayState.hoverState.value = undefined;
     });
-
+    const changeSelectedIndex = (offset: number) => {
+      const selectedIndex = this.getSelectedAnnotationIndex();
+      if (selectedIndex === undefined) return;
+      const nextAnnotation = this.listElements[selectedIndex + offset];
+      if (nextAnnotation) {
+        const { state, annotation } = nextAnnotation;
+        this.layer.selectAnnotation(state, annotation.id, true);
+        this.moveToAnnotation(annotation, state);
+      }
+    };
+    this.registerDisposer(
+      this.layer.registerLayerEvent("select-previous", () => {
+        // if (this.layer.panels.panels[0].selectedTab.value === "annotations") {
+        if (this.element.checkVisibility()) {
+          changeSelectedIndex(-1);
+        }
+      }),
+    );
+    this.registerDisposer(
+      this.layer.registerLayerEvent("select-next", () => {
+        if (this.element.checkVisibility()) {
+          changeSelectedIndex(1);
+        }
+      }),
+    );
+    // this.element.addEventListener("select-previous", (event) => {
+    //   event.stopPropagation();
+    //   event.preventDefault();
+    //   changeSelectedIndex(-1);
+    // });
+    // this.element.addEventListener("select-next", (event) => {
+    //   event.stopPropagation();
+    //   event.preventDefault();
+    //   changeSelectedIndex(1);
+    // });
     const bindings = getDefaultAnnotationListBindings();
     this.registerDisposer(
       new MouseEventBinder(this.virtualList.element, bindings),
     );
+    this.registerDisposer(
+      new KeyboardEventBinder(this.virtualList.element, bindings),
+    );
+    // this.virtualList.element.tabIndex = -1;
     this.virtualList.element.title = bindings.describe();
     this.registerDisposer(
       this.displayState.hoverState.changed.add(() => this.updateHoverView()),
@@ -486,6 +524,37 @@ export class AnnotationLayerView extends Tab {
     this.updateSelectionView();
   }
 
+  private getSelectedAnnotationIndex() {
+    const { previousSelectedState: state } = this;
+    if (state === undefined) return;
+    const { annotationLayerState, annotationId } = state;
+    const attached = this.attachedAnnotationStates.get(annotationLayerState);
+    if (attached === undefined) return;
+    const index = attached.idToIndex.get(annotationId);
+    if (index === undefined) return;
+    return attached.listOffset + index;
+  }
+
+  private moveToAnnotation(
+    annotation: Annotation,
+    state: AnnotationLayerState,
+  ) {
+    const chunkTransform = state.chunkTransform
+      .value as ChunkTransformParameters;
+    const { layerRank } = chunkTransform;
+    const chunkPosition = new Float32Array(layerRank);
+    const layerPosition = new Float32Array(layerRank);
+    getCenterPosition(chunkPosition, annotation);
+    matrix.transformPoint(
+      layerPosition,
+      chunkTransform.chunkToLayerTransform,
+      layerRank + 1,
+      chunkPosition,
+      layerRank,
+    );
+    setLayerPosition(this.layer, chunkTransform, layerPosition);
+  }
+
   private getRenderedAnnotationListElement(
     state: AnnotationLayerState,
     id: AnnotationId,
@@ -940,18 +1009,7 @@ export class AnnotationLayerView extends Tab {
     element.addEventListener("action:move-to-annotation", (event) => {
       event.stopPropagation();
       event.preventDefault();
-      const { layerRank } = chunkTransform;
-      const chunkPosition = new Float32Array(layerRank);
-      const layerPosition = new Float32Array(layerRank);
-      getCenterPosition(chunkPosition, annotation);
-      matrix.transformPoint(
-        layerPosition,
-        chunkTransform.chunkToLayerTransform,
-        layerRank + 1,
-        chunkPosition,
-        layerRank,
-      );
-      setLayerPosition(this.layer, chunkTransform, layerPosition);
+      this.moveToAnnotation(annotation, state);
     });
 
     const selectionState = this.selectedAnnotationState.value;
@@ -972,6 +1030,7 @@ export class AnnotationTab extends Tab {
   );
   constructor(public layer: Borrowed<UserLayerWithAnnotations>) {
     super();
+    console.log("create AnnotationTab");
     const { element } = this;
     element.classList.add("neuroglancer-annotations-tab");
     element.appendChild(this.layerView.element);

src/ui/default_input_event_bindings.ts

@@ -48,6 +48,9 @@ export function getDefaultGlobalBindings() {
     map.set("space", "toggle-layout");
     map.set("shift+space", "toggle-layout-alternative");
     map.set("backslash", "toggle-show-statistics");
+
+    map.set("alt+arrowup", "select-previous");
+    map.set("alt+arrowdown", "select-next");
     defaultGlobalBindings = map;
   }
   return defaultGlobalBindings;

src/ui/layer_side_panel.ts

@@ -138,6 +138,7 @@ class LayerSidePanel extends SidePanel {
     public panelState: UserLayerSidePanelState,
   ) {
     super(sidePanelManager, panelState.location);
+    console.log("new side panel");
     const layer = (this.layer = panelState.layer);
     const { element } = this;
     const { titleBar } = this.addTitleBar({});

src/viewer.ts

@@ -1027,6 +1027,30 @@ export class Viewer extends RefCounted implements ViewerState {
       });
     }
 
+    const sendEventToSelectedLayerTab = (type: string) => {
+      const elements = document.querySelectorAll(
+        '[data-neuroglancer-layer-panel-pinned="false"] .neuroglancer-stack-view > .neuroglancer-tab-content:not([style*="display: none"]):not([style*="display: none"]) > *',
+      );
+      for (const element of elements) {
+        const event = new Event(type);
+        console.log("sending", type, "to", element);
+        element.dispatchEvent(event);
+      }
+
+      const selectedLayer = this.selectedLayer.layer?.layer;
+      if (selectedLayer) {
+        selectedLayer.dispatchLayerEvent(type);
+      }
+    };
+
+    this.bindAction("select-previous", () => {
+      sendEventToSelectedLayerTab("select-previous");
+    });
+
+    this.bindAction("select-next", () => {
+      sendEventToSelectedLayerTab("select-next");
+    });
+
     for (const action of ["select", "star"]) {
       this.bindAction(action, () => {
         this.mouseState.updateUnconditionally();

src/widget/tab_view.ts

@@ -46,6 +46,7 @@ export class Tab extends RefCounted {
   ) {
     super();
     const { element } = this;
+    console.log("create tab");
     element.classList.add("neuroglancer-tab-content");
   }
 
@@ -226,6 +227,7 @@ export class StackView<TabId, TabType extends Tab = Tab> extends RefCounted {
   }
 
   private showTab(id: TabId) {
+    console.log("show tab", id);
     const { tabs } = this;
     let tab = tabs.get(id);
     if (tab === undefined) {