Merge branch 'main' of https://github.com/cmi-dair/brainviewer

childmindresearch · Aug 16, 2023 · 5911f31 · 5911f31
2 parents 538afb1 + 7ed6d7f
commit 5911f31
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 41 deletions.
diff --git 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/viewer.ts b/src/viewer.ts
@@ -1,12 +1,7 @@
 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 type SerializableViewerState = {
   map?: number[];
@@ -20,19 +15,13 @@ export class ViewerClient {
   public controls: CameraControls;
   public renderer: THREE.WebGLRenderer;
 
-  private elemViewer: HTMLElement;
+  private elem: HTMLElement;
   private scene: THREE.Scene;
   private camera: THREE.PerspectiveCamera;
   private raycaster: THREE.Raycaster;
 
-  private legend?: Legend;
-
-  public constructor(elemViewer: HTMLElement, elemLegend?: HTMLElement) {
-    if (elemLegend) {
-      this.legend = new Legend(elemLegend);
-    }
-
-    this.elemViewer = elemViewer;
+  public constructor(elem: HTMLElement) {
+    this.elem = elem;
 
     this.scene = new THREE.Scene();
     this.camera = new THREE.PerspectiveCamera(
@@ -46,12 +35,12 @@ export class ViewerClient {
     this.raycaster = new THREE.Raycaster();
 
     this.renderer = new THREE.WebGLRenderer();
-    this.elemViewer.innerHTML = "";
+    this.elem.innerHTML = "";
     this.renderer.setSize(
-      this.elemViewer.clientWidth,
-      this.elemViewer.clientHeight,
+      this.elem.clientWidth,
+      this.elem.clientHeight,
     );
-    this.elemViewer.appendChild(this.renderer.domElement);
+    this.elem.appendChild(this.renderer.domElement);
 
     CameraControls.install({ THREE: THREE });
     this.controls = new CameraControls(this.camera, this.renderer.domElement);
@@ -97,11 +86,11 @@ export class ViewerClient {
 
   public onWindowResize() {
     this.camera.aspect =
-      this.elemViewer.clientWidth / this.elemViewer.clientHeight;
+      this.elem.clientWidth / this.elem.clientHeight;
     this.camera.updateProjectionMatrix();
     this.renderer.setSize(
-      this.elemViewer.clientWidth,
-      this.elemViewer.clientHeight,
+      this.elem.clientWidth,
+      this.elem.clientHeight,
     );
     this.render();
   }
@@ -147,14 +136,14 @@ export class ViewerClient {
     const eventNameLower: string = eventName.toLowerCase();
 
     if (!(raycastEvents as unknown as string[]).includes(eventNameLower)) {
-      this.elemViewer.addEventListener(eventNameLower, callable, false);
+      this.elem.addEventListener(eventNameLower, callable, false);
       return;
     }
 
-    this.elemViewer.addEventListener(
+    this.elem.addEventListener(
       eventNameLower as (typeof raycastEvents)[number],
       (event: MouseEvent | TouchEvent) => {
-        const rect = this.elemViewer.getBoundingClientRect();
+        const rect = this.elem.getBoundingClientRect();
         const mice = getClicks(event, rect);
 
         const intersects = [];
@@ -184,22 +173,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);
   }