From 69763b75b2519943b4d597c221c55727feab47c3 Mon Sep 17 00:00:00 2001
From: Florian Rupprecht <floruppr@gmail.com>
Date: Tue, 15 Aug 2023 15:30:30 -0400
Subject: [PATCH] Modularize legend

---
 src/colormaps/legend.ts | 25 ++++++++++++++++++++++++-
 src/index.ts            | 24 +++---------------------
 2 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/colormaps/legend.ts b/src/colormaps/legend.ts
index 6a9208e..6b47d13 100644
--- a/src/colormaps/legend.ts
+++ b/src/colormaps/legend.ts
@@ -1,6 +1,9 @@
 import * as d3 from "d3";
 
 
+/**
+ * Create a canvas element with a color gradient based on a D3 scale.
+ */
 function ramp(
   color: d3.ScaleSequential<string, never>,
   n = 256,
@@ -19,6 +22,9 @@ function ramp(
   return canvas;
 }
 
+/**
+ * HTML legend for use with the Brain Viewer.
+ */
 export class Legend {
   private elem: HTMLElement;
 
@@ -36,6 +42,12 @@ export class Legend {
   public tickValues = undefined;
   public title: string = "Intensity";
 
+  /**
+   * Create a new legend.
+   * Call `update(...)` to initialize or update the DOM after.
+   * 
+   * @param elem DOM element to attach legend to.
+   */
   constructor(elem: HTMLElement) {
     this.elem = elem;
   }
@@ -123,10 +135,21 @@ export class Legend {
       );
   }
 
-  public remove() {
+  /**
+   * Remove legend from DOM.
+   */
+  public dispose() {
     this.elem.innerHTML = "";
   }
 
+  /**
+   * Update legend with new color scale.
+   * 
+   * @param minVal Scale minimum.
+   * @param maxVal Scale maximum.
+   * @param colorFun Color scale. Can be `colorInterpolates[name]`.
+   * @param title Legend title.
+   */
   public update(
     minVal: number,
     maxVal: number,
diff --git a/src/index.ts b/src/index.ts
index ec07bf0..14fa68c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,9 +1,9 @@
 import * as THREE from "three";
 import CameraControls from "camera-controls";
-import { Legend } from "./colormaps/legend";
 import { Surface } from "./surfaceModels";
 import { surfaceToMesh } from "./utils";
-import { ColorInterpolateName, colorInterpolates } from "./colormaps/d3ColorSchemes";
+
+export { Legend } from "./colormaps/legend";
 
 export type SerializableViewerState = {
   map?: number[];
@@ -22,13 +22,7 @@ export class ViewerClient {
   private camera: THREE.PerspectiveCamera;
   private raycaster: THREE.Raycaster;
 
-  private legend?: Legend;
-
-  public constructor(elemViewer: HTMLElement, elemLegend?: HTMLElement) {
-    if (elemLegend) {
-      this.legend = new Legend(elemLegend);
-    }
-
+  public constructor(elemViewer: HTMLElement) {
     this.elemViewer = elemViewer;
 
     this.scene = new THREE.Scene();
@@ -181,18 +175,6 @@ export class ViewerClient {
     this.scene.remove(surface);
   }
 
-  public updateLegend(
-    colorMapName: ColorInterpolateName,
-    colorLimits: [number, number],
-    title?: string,
-  ): void {
-
-    if (!this.legend) {
-      return;
-    }
-    this.legend.update(colorLimits[0], colorLimits[1], colorInterpolates[colorMapName], title);
-  }
-
   public dispose(): void {
     window.removeEventListener("resize", this.onWindowResize);
   }