From 445afead1d2d12784033fa50a12f4f0ff1948fd9 Mon Sep 17 00:00:00 2001
From: aranega <vincent.aranega@gmail.com>
Date: Fri, 8 Nov 2024 06:39:00 -0600
Subject: [PATCH] CC-158 PoC move color control from Annotation to Rendering
 for annotation layers

---
 src/layer/annotation/index.ts | 19 ++++++++++++++++++-
 src/ui/annotations.ts         | 16 ----------------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/layer/annotation/index.ts b/src/layer/annotation/index.ts
index 35c1a4e43..c6079a313 100644
--- a/src/layer/annotation/index.ts
+++ b/src/layer/annotation/index.ts
@@ -44,7 +44,7 @@ import { getWatchableRenderLayerTransform } from "#src/render_coordinate_transfo
 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 { ElementVisibilityFromTrackableBoolean, TrackableBooleanCheckbox } from "#src/trackable_boolean.js";
 import { makeCachedLazyDerivedWatchableValue } from "#src/trackable_value.js";
 import type {
   AnnotationLayerView,
@@ -67,6 +67,7 @@ import {
   verifyStringArray,
 } from "#src/util/json.js";
 import { NullarySignal } from "#src/util/signal.js";
+import { ColorWidget } from "#src/widget/color.js";
 import { DependentViewWidget } from "#src/widget/dependent_view_widget.js";
 import { makeHelpButton } from "#src/widget/help_button.js";
 import { LayerReferenceWidget } from "#src/widget/layer_reference.js";
@@ -776,6 +777,22 @@ class RenderingOptionsTab extends Tab {
         ),
       ).element,
     );
+
+    const colorPicker = this.registerDisposer(
+      new ColorWidget(layer.annotationDisplayState.color),
+    );
+    colorPicker.element.title = "Change annotation display color";
+    this.registerDisposer(
+      new ElementVisibilityFromTrackableBoolean(
+        makeCachedLazyDerivedWatchableValue(
+          (shader) => shader.match(/\bdefaultColor\b/) !== null,
+          layer.annotationDisplayState.shaderControls.processedFragmentMain,
+        ),
+        colorPicker.element,
+      ),
+    );
+    element.appendChild(colorPicker.element);
+
     const topRow = document.createElement("div");
     topRow.className =
       "neuroglancer-segmentation-dropdown-skeleton-shader-header";
diff --git a/src/ui/annotations.ts b/src/ui/annotations.ts
index c799c90be..10c28442f 100644
--- a/src/ui/annotations.ts
+++ b/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,