CC-163 Add annotation color as a tool in the layer's render tab

src/layer/annotation/index.ts

@@ -45,7 +45,7 @@ import { RenderLayerRole } from "#src/renderlayer.js";
 import type { SegmentationDisplayState } from "#src/segmentation_display_state/frontend.js";
 import type { TrackableBoolean } from "#src/trackable_boolean.js";
 import { TrackableBooleanCheckbox } from "#src/trackable_boolean.js";
-import { makeCachedLazyDerivedWatchableValue } from "#src/trackable_value.js";
+import { makeCachedLazyDerivedWatchableValue, observeWatchable } from "#src/trackable_value.js";
 import type {
   AnnotationLayerView,
   MergedAnnotationStates,
@@ -69,6 +69,8 @@ import {
 import { NullarySignal } from "#src/util/signal.js";
 import { DependentViewWidget } from "#src/widget/dependent_view_widget.js";
 import { makeHelpButton } from "#src/widget/help_button.js";
+import { addLayerControlToOptionsTab, type LayerControlDefinition, registerLayerControl } from "#src/widget/layer_control.js";
+import { colorLayerControl } from "#src/widget/layer_control_color.js";
 import { LayerReferenceWidget } from "#src/widget/layer_reference.js";
 import { makeMaximizeButton } from "#src/widget/maximize_button.js";
 import { RenderScaleWidget } from "#src/widget/render_scale_widget.js";
@@ -87,6 +89,7 @@ const CROSS_SECTION_RENDER_SCALE_JSON_KEY = "crossSectionAnnotationSpacing";
 const PROJECTION_RENDER_SCALE_JSON_KEY = "projectionAnnotationSpacing";
 const SHADER_JSON_KEY = "shader";
 const SHADER_CONTROLS_JSON_KEY = "shaderControls";
+const ANNOTATION_COLOR_JSON_KEY = "annotationColor";
 
 function addPointAnnotations(annotations: LocalAnnotationSource, obj: any) {
   if (obj === undefined) {
@@ -455,6 +458,9 @@ export class AnnotationUserLayer extends Base {
     this.annotationDisplayState.shaderControls.restoreState(
       specification[SHADER_CONTROLS_JSON_KEY],
     );
+    this.annotationDisplayState.color.restoreState(
+      specification[ANNOTATION_COLOR_JSON_KEY],
+    )
   }
 
   getLegacyDataSourceSpecifications(
@@ -709,6 +715,8 @@ export class AnnotationUserLayer extends Base {
     x[SHADER_JSON_KEY] = this.annotationDisplayState.shader.toJSON();
     x[SHADER_CONTROLS_JSON_KEY] =
       this.annotationDisplayState.shaderControls.toJSON();
+    x[ANNOTATION_COLOR_JSON_KEY] =
+      this.annotationDisplayState.color.toJSON();
     Object.assign(x, this.linkedSegmentationLayers.toJSON());
     return x;
   }
@@ -740,6 +748,24 @@ class RenderingOptionsTab extends Tab {
     super();
     const { element } = this;
     element.classList.add("neuroglancer-annotation-rendering-tab");
+
+    const colorControlToolWidget = element.appendChild(
+      addLayerControlToOptionsTab(this, layer, this.visibility, LAYER_CONTROLS[ANNOTATION_COLOR_JSON_KEY])
+    );
+    this.registerDisposer(
+      observeWatchable((hasDefaultColor) => {
+        if (hasDefaultColor) {
+          colorControlToolWidget.style.display = "";
+        } else {
+          colorControlToolWidget.style.display = "none";
+          this.layer.toolBinder.removeJsonString(ANNOTATION_COLOR_JSON_KEY);
+        }
+      }, makeCachedLazyDerivedWatchableValue(
+        (shader) => shader.match(/\bdefaultColor\b/) !== null,
+        layer.annotationDisplayState.shaderControls.processedFragmentMain
+      ))
+    )
+
     element.appendChild(
       this.registerDisposer(
         new DependentViewWidget(
@@ -776,6 +802,7 @@ class RenderingOptionsTab extends Tab {
         ),
       ).element,
     );
+
     const topRow = document.createElement("div");
     topRow.className =
       "neuroglancer-segmentation-dropdown-skeleton-shader-header";
@@ -813,6 +840,21 @@ class RenderingOptionsTab extends Tab {
   }
 }
 
+const LAYER_CONTROLS: Record<string, LayerControlDefinition<AnnotationUserLayer>> = {
+  [ANNOTATION_COLOR_JSON_KEY]: {
+    label: "Annotation default color",
+    title: "Annotation shader default color (enabled with 'defaultColor()' in the shader code)",
+    toolJson: ANNOTATION_COLOR_JSON_KEY,
+    ...colorLayerControl(
+      (layer: AnnotationUserLayer) => layer.annotationDisplayState.color,
+    ),
+  },
+};
+
+for (const control of Object.values(LAYER_CONTROLS)) {
+  registerLayerControl(AnnotationUserLayer, control);
+}
+
 registerLayerType(AnnotationUserLayer);
 registerLayerType(AnnotationUserLayer, "pointAnnotation");
 registerLayerTypeDetector((subsource) => {

src/ui/annotations.ts

@@ -63,7 +63,6 @@ import {
   registerCallbackWhenSegmentationDisplayStateChanged,
   SegmentWidgetFactory,
 } from "#src/segmentation_display_state/frontend.js";
-import { ElementVisibilityFromTrackableBoolean } from "#src/trackable_boolean.js";
 import type { WatchableValueInterface } from "#src/trackable_value.js";
 import {
   AggregateWatchableValue,
@@ -101,7 +100,6 @@ import { NullarySignal, Signal } from "#src/util/signal.js";
 import { Uint64 } from "#src/util/uint64.js";
 import * as vector from "#src/util/vector.js";
 import { makeAddButton } from "#src/widget/add_button.js";
-import { ColorWidget } from "#src/widget/color.js";
 import { makeCopyButton } from "#src/widget/copy_button.js";
 import { makeDeleteButton } from "#src/widget/delete_button.js";
 import type { DependentViewContext } from "#src/widget/dependent_view_widget.js";
@@ -394,20 +392,6 @@ export class AnnotationLayerView extends Tab {
     toolbox.className = "neuroglancer-annotation-toolbox";
 
     layer.initializeAnnotationLayerViewTab(this);
-    const colorPicker = this.registerDisposer(
-      new ColorWidget(this.displayState.color),
-    );
-    colorPicker.element.title = "Change annotation display color";
-    this.registerDisposer(
-      new ElementVisibilityFromTrackableBoolean(
-        makeCachedLazyDerivedWatchableValue(
-          (shader) => shader.match(/\bdefaultColor\b/) !== null,
-          displayState.shaderControls.processedFragmentMain,
-        ),
-        colorPicker.element,
-      ),
-    );
-    toolbox.appendChild(colorPicker.element);
     const { mutableControls } = this;
     const pointButton = makeIcon({
       text: annotationTypeHandlers[AnnotationType.POINT].icon,

src/ui/tool.ts

@@ -443,7 +443,7 @@ export class LocalToolBinder<
   }
 
   removeJsonString(toolJsonString: string) {
-    const key = this.jsonToKey.get(toolJsonString);
+    const key = this.jsonToKey.get(toolJsonString) || this.jsonToKey.get(JSON.stringify(toolJsonString));
     if (key === undefined) return;
     this.set(key, undefined);
   }