@geode/opengeodeweb-front 10.34.0-rc.9 → 10.34.0

package/internal/stores/data_style/model/visibility.ts

@@ -8,7 +8,7 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 // The four per-component-type style composables (Surface/Line/Block/Corner) each expose a different, large set of methods (color, visibility, per-attribute-kind getters/setters...). This module only cares about looking a handful of them up dynamically by name, so a precise structural type for componentStyleFunctions isn't worth modelling here; `any` keeps the dynamic dispatch table honest about that.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line no-explicit-any
 type ComponentStyleFunctions = Record<"Surface" | "Line" | "Block" | "Corner", any>;
 
 interface ModelComponent {
@@ -16,8 +16,21 @@ interface ModelComponent {
   type: string;
 }
 
+async function callComponentStyleFunction(
+  // oxlint-disable-next-line no-explicit-any
+  target: any,
+  method: string,
+  ...args: unknown[]
+): Promise<unknown> {
+  // oxlint-disable-next-line no-unsafe-call, no-unsafe-member-access, no-unsafe-argument, no-unsafe-assignment -- ComponentStyleFunctions is deliberately dynamically typed; see comment above.
+  const result = await target[method](...args);
+  return result;
+}
+
 const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
-async function getModelComponentsMap(modelId: string) {
+async function getModelComponentsMap(
+  modelId: string,
+): Promise<{ allComponents: ModelComponent[]; componentsMap: Record<string, ModelComponent> }> {
   const dataStore = useDataStore();
   const results = await Promise.all(
     MESH_COMPONENT_TYPES.map(async (type) => {
@@ -42,7 +55,7 @@ async function dispatchToComponentTypes(
   action: string,
   { componentStyleFunctions }: { componentStyleFunctions: ComponentStyleFunctions },
   ...args: unknown[]
-) {
+): Promise<unknown[]> {
   const { componentsMap } = await getModelComponentsMap(modelId);
   const idsByComponent: { Block: string[]; Surface: string[]; Line: string[]; Corner: string[] } = {
     Block: [],
@@ -52,15 +65,17 @@ async function dispatchToComponentTypes(
   };
   for (const id of componentIds) {
     const type = componentsMap[id]?.type;
-    if (type && type in idsByComponent) {
-      (idsByComponent as Record<string, string[]>)[type]!.push(id);
+    if (type !== undefined && type in idsByComponent) {
+      (idsByComponent as Record<string, string[]>)[type]?.push(id);
     }
   }
   const promises: Promise<unknown>[] = [];
   if (action === "Visibility") {
     if (idsByComponent.Block.length > 0) {
       promises.push(
-        componentStyleFunctions.Block.setModelBlocksVisibility(
+        callComponentStyleFunction(
+          componentStyleFunctions.Block,
+          "setModelBlocksVisibility",
           modelId,
           idsByComponent.Block,
           ...args,
@@ -69,7 +84,9 @@ async function dispatchToComponentTypes(
     }
     if (idsByComponent.Surface.length > 0) {
       promises.push(
-        componentStyleFunctions.Surface.setModelSurfacesVisibility(
+        callComponentStyleFunction(
+          componentStyleFunctions.Surface,
+          "setModelSurfacesVisibility",
           modelId,
           idsByComponent.Surface,
           ...args,
@@ -78,12 +95,20 @@ async function dispatchToComponentTypes(
     }
     if (idsByComponent.Line.length > 0) {
       promises.push(
-        componentStyleFunctions.Line.setModelLinesVisibility(modelId, idsByComponent.Line, ...args),
+        callComponentStyleFunction(
+          componentStyleFunctions.Line,
+          "setModelLinesVisibility",
+          modelId,
+          idsByComponent.Line,
+          ...args,
+        ),
       );
     }
     if (idsByComponent.Corner.length > 0) {
       promises.push(
-        componentStyleFunctions.Corner.setModelCornersVisibility(
+        callComponentStyleFunction(
+          componentStyleFunctions.Corner,
+          "setModelCornersVisibility",
           modelId,
           idsByComponent.Corner,
           ...args,
@@ -93,12 +118,20 @@ async function dispatchToComponentTypes(
   } else if (action === "Color") {
     if (idsByComponent.Block.length > 0) {
       promises.push(
-        componentStyleFunctions.Block.setModelBlocksColor(modelId, idsByComponent.Block, ...args),
+        callComponentStyleFunction(
+          componentStyleFunctions.Block,
+          "setModelBlocksColor",
+          modelId,
+          idsByComponent.Block,
+          ...args,
+        ),
       );
     }
     if (idsByComponent.Surface.length > 0) {
       promises.push(
-        componentStyleFunctions.Surface.setModelSurfacesColor(
+        callComponentStyleFunction(
+          componentStyleFunctions.Surface,
+          "setModelSurfacesColor",
           modelId,
           idsByComponent.Surface,
           ...args,
@@ -107,12 +140,20 @@ async function dispatchToComponentTypes(
     }
     if (idsByComponent.Line.length > 0) {
       promises.push(
-        componentStyleFunctions.Line.setModelLinesColor(modelId, idsByComponent.Line, ...args),
+        callComponentStyleFunction(
+          componentStyleFunctions.Line,
+          "setModelLinesColor",
+          modelId,
+          idsByComponent.Line,
+          ...args,
+        ),
       );
     }
     if (idsByComponent.Corner.length > 0) {
       promises.push(
-        componentStyleFunctions.Corner.setModelCornersColor(
+        callComponentStyleFunction(
+          componentStyleFunctions.Corner,
+          "setModelCornersColor",
           modelId,
           idsByComponent.Corner,
           ...args,
@@ -122,8 +163,27 @@ async function dispatchToComponentTypes(
   }
   return Promise.all(promises);
 }
+interface UseModelVisibilityStyleReturn {
+  modelVisibility: (modelId: string) => boolean | undefined;
+  setModelVisibility: (modelId: string, visibility: boolean) => Promise<unknown>;
+  setModelComponentsVisibility: (
+    modelId: string,
+    componentIds: string[],
+    visibility: boolean,
+  ) => Promise<unknown[]>;
+  setModelComponentTypeVisibility: (
+    modelId: string,
+    componentType: string,
+    visibility: boolean,
+  ) => Promise<void>;
+  modelComponentVisibility: (modelId: string, componentId: string) => boolean;
+  modelComponentTypeVisibility: (modelId: string, componentType: string) => boolean;
+}
+
 // oxlint-disable-next-line max-lines-per-function
-function useModelVisibilityStyle(componentStyleFunctions: ComponentStyleFunctions) {
+function useModelVisibilityStyle(
+  componentStyleFunctions: ComponentStyleFunctions,
+): UseModelVisibilityStyleReturn {
   const dataStore = useDataStore();
   const dataStyleState = useDataStyleState();
   const hybridViewerStore = useHybridViewerStore();
@@ -132,20 +192,20 @@ function useModelVisibilityStyle(componentStyleFunctions: ComponentStyleFunction
   function modelVisibility(modelId: string): boolean | undefined {
     return dataStyleState.getStyle(modelId).visibility;
   }
-  function setModelVisibility(modelId: string, visibility: boolean) {
+  async function setModelVisibility(modelId: string, visibility: boolean): Promise<unknown> {
     const schema = model_schemas.visibility;
     const params = {
       id: modelId,
       visibility,
     };
-    return viewerStore.request(
+    const result = await viewerStore.request(
       {
         schema,
         params,
       },
       {
         response_function: async () => {
-          await hybridViewerStore.setVisibility(modelId, visibility);
+          hybridViewerStore.setVisibility(modelId, visibility);
           await dataStyleState.mutateStyle(modelId, {
             visibility,
           });
@@ -156,12 +216,13 @@ function useModelVisibilityStyle(componentStyleFunctions: ComponentStyleFunction
         },
       },
     );
+    return result;
   }
   async function setModelComponentTypeVisibility(
     modelId: string,
     componentType: string,
     visibility: boolean,
-  ) {
+  ): Promise<void> {
     await modelCommonStyle.mutateModelComponentTypeStyle(modelId, componentType, {
       visibility,
     });
@@ -183,7 +244,7 @@ function useModelVisibilityStyle(componentStyleFunctions: ComponentStyleFunction
     modelId: string,
     componentIds: string[],
     visibility: boolean,
-  ) {
+  ): Promise<unknown[]> {
     const typeIds = componentIds.filter((id) => MESH_COMPONENT_TYPES.includes(id));
     const individualIds = componentIds.filter((id) => !MESH_COMPONENT_TYPES.includes(id));
     const promises: Promise<unknown>[] = [];
@@ -203,7 +264,8 @@ function useModelVisibilityStyle(componentStyleFunctions: ComponentStyleFunction
         ),
       );
     }
-    return await Promise.all(promises);
+    const results = await Promise.all(promises);
+    return results;
   }
   function modelComponentVisibility(modelId: string, componentId: string): boolean {
     const selection = useModelSelection(modelId, dataStyleState);

package/internal/stores/data_style/state.ts

@@ -1,17 +1,14 @@
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
 import type {
   ModelComponentStyle,
   ModelComponentTypeStyle,
   ObjectStyle,
   StyleValues,
 } from "./types";
-import { database } from "@ogw_internal/database/database";
+import type { Observable as RxObservable } from "rxjs";
+import { getTable } from "@ogw_internal/database/database";
 import { liveQuery } from "dexie";
 import merge from "lodash/merge";
 import { useObservable } from "@vueuse/rxjs";
-import type { Ref } from "vue";
-import type { Observable as RxObservable } from "rxjs";
 
 interface SharedState {
   styles: Ref<Record<string, ObjectStyle>>;
@@ -25,11 +22,14 @@ interface SharedState {
   ) => void;
   bulkUpdateComponentStyleCache: (
     modelId: string,
-    componentStyleUpdates: { id_component: string; values: StyleValues }[],
+    componentStyleUpdates: readonly {
+      readonly id_component: string;
+      readonly values: StyleValues;
+    }[],
   ) => void;
   bulkUpdateComponentStylesCache: (
     modelId: string,
-    componentIds: string[],
+    componentIds: readonly string[],
     styleValues: StyleValues,
   ) => void;
   updateModelComponentTypeStyleCache: (
@@ -48,32 +48,37 @@ function getSharedState(): SharedState {
     return sharedState;
   }
 
-  const dataStyleTable = database.data_style!;
-  const modelComponentDataStyleTable = database.model_component_datastyle!;
-  const modelComponentTypeDataStyleTable = database.model_component_type_datastyle!;
+  const dataStyleTable = getTable<ObjectStyle>("data_style");
+  const modelComponentDataStyleTable = getTable<ModelComponentStyle>("model_component_datastyle");
+  const modelComponentTypeDataStyleTable = getTable<ModelComponentTypeStyle>(
+    "model_component_type_datastyle",
+  );
 
   // Dexie's `liveQuery` returns Dexie's own `Observable` type, structurally distinct
   // From rxjs's `Observable` that `useObservable` (from @vueuse/rxjs) expects, even
   // Though they're interoperable at runtime (both are plain subscribe-based streams).
+  const dataStyleLiveQuery = liveQuery(async () => {
+    const objectStyles = await dataStyleTable.toArray();
+    const stylesByObjectId: Record<string, ObjectStyle> = {};
+    for (const objectStyle of objectStyles) {
+      stylesByObjectId[objectStyle.id] = objectStyle;
+    }
+    return stylesByObjectId;
+  });
+
   const styles = useObservable<Record<string, ObjectStyle>, Record<string, ObjectStyle>>(
-    liveQuery(async () => {
-      const objectStyles = (await dataStyleTable.toArray()) as ObjectStyle[];
-      const stylesByObjectId: Record<string, ObjectStyle> = {};
-      for (const objectStyle of objectStyles) {
-        stylesByObjectId[objectStyle.id] = objectStyle;
-      }
-      return stylesByObjectId;
-    }) as unknown as RxObservable<Record<string, ObjectStyle>>,
+    // oxlint-disable-next-line no-unsafe-type-assertion
+    dataStyleLiveQuery as unknown as RxObservable<Record<string, ObjectStyle>>,
     { initialValue: {} },
   ) as Ref<Record<string, ObjectStyle>>;
 
   const modelComponentTypeStyles = ref<Record<string, ModelComponentTypeStyle>>({});
   const componentStyles = ref<Record<string, ModelComponentStyle>>({});
 
-  async function loadFromDatabase() {
+  async function loadFromDatabase(): Promise<void> {
     const [fetchedTypeStyles, fetchedComponentStyles] = await Promise.all([
-      modelComponentTypeDataStyleTable.toArray() as unknown as Promise<ModelComponentTypeStyle[]>,
-      modelComponentDataStyleTable.toArray() as unknown as Promise<ModelComponentStyle[]>,
+      modelComponentTypeDataStyleTable.toArray(),
+      modelComponentDataStyleTable.toArray(),
     ]);
     const typeStylesMap: Record<string, ModelComponentTypeStyle> = {};
     for (const typeStyle of fetchedTypeStyles) {
@@ -90,44 +95,43 @@ function getSharedState(): SharedState {
     componentStyles.value = componentStylesMap;
   }
 
-  loadFromDatabase();
+  void loadFromDatabase();
 
   function updateComponentStyleCache(
     modelId: string,
     componentId: string,
     styleValues: StyleValues,
-  ) {
+  ): void {
     const cacheKey = `${modelId}_${componentId}`;
     const existingStyle = componentStyles.value[cacheKey];
-    if (existingStyle) {
-      merge(existingStyle, styleValues);
-    } else {
+    if (existingStyle === undefined) {
       componentStyles.value[cacheKey] = merge(
         { id_model: modelId, id_component: componentId },
         styleValues,
       );
+    } else {
+      merge(existingStyle, styleValues);
     }
   }
 
   function bulkUpdateComponentStyleCache(
     modelId: string,
-    componentStyleUpdates: { id_component: string; values: StyleValues }[],
-  ) {
+    componentStyleUpdates: readonly {
+      readonly id_component: string;
+      readonly values: StyleValues;
+    }[],
+  ): void {
     const updatedComponentStyles = { ...componentStyles.value };
     for (const { id_component: componentId, values: styleValues } of componentStyleUpdates) {
       const cacheKey = `${modelId}_${componentId}`;
       const existingStyle = updatedComponentStyles[cacheKey];
-      if (existingStyle) {
-        updatedComponentStyles[cacheKey] = merge(
-          {},
-          existingStyle,
-          styleValues,
-        ) as ModelComponentStyle;
-      } else {
+      if (existingStyle === undefined) {
         updatedComponentStyles[cacheKey] = merge(
           { id_model: modelId, id_component: componentId },
           styleValues,
         );
+      } else {
+        updatedComponentStyles[cacheKey] = merge({}, existingStyle, styleValues);
       }
     }
     componentStyles.value = updatedComponentStyles;
@@ -135,24 +139,20 @@ function getSharedState(): SharedState {
 
   function bulkUpdateComponentStylesCache(
     modelId: string,
-    componentIds: string[],
+    componentIds: readonly string[],
     styleValues: StyleValues,
-  ) {
+  ): void {
     const updatedComponentStyles = { ...componentStyles.value };
     for (const componentId of componentIds) {
       const cacheKey = `${modelId}_${componentId}`;
       const existingStyle = updatedComponentStyles[cacheKey];
-      if (existingStyle) {
-        updatedComponentStyles[cacheKey] = merge(
-          {},
-          existingStyle,
-          styleValues,
-        ) as ModelComponentStyle;
-      } else {
+      if (existingStyle === undefined) {
         updatedComponentStyles[cacheKey] = merge(
           { id_model: modelId, id_component: componentId },
           styleValues,
         );
+      } else {
+        updatedComponentStyles[cacheKey] = merge({}, existingStyle, styleValues);
       }
     }
     componentStyles.value = updatedComponentStyles;
@@ -162,18 +162,14 @@ function getSharedState(): SharedState {
     modelId: string,
     componentType: string,
     styleValues: StyleValues,
-  ) {
+  ): void {
     const cacheKey = `${modelId}_${componentType}`;
-    if (!modelComponentTypeStyles.value[cacheKey]) {
-      modelComponentTypeStyles.value[cacheKey] = { id_model: modelId, type: componentType };
-    }
+    modelComponentTypeStyles.value[cacheKey] ??= { id_model: modelId, type: componentType };
     merge(modelComponentTypeStyles.value[cacheKey], styleValues);
   }
 
-  function updateStyleCache(objectId: string, styleValues: StyleValues) {
-    if (!styles.value[objectId]) {
-      styles.value[objectId] = { id: objectId };
-    }
+  function updateStyleCache(objectId: string, styleValues: StyleValues): void {
+    styles.value[objectId] ??= { id: objectId };
     merge(styles.value[objectId], styleValues);
   }
 
@@ -192,18 +188,30 @@ function getSharedState(): SharedState {
   return sharedState;
 }
 
+interface DataStyleStateApi extends SharedState {
+  getStyle: (objectId: string) => ObjectStyle;
+  getComponentStyle: (modelId: string, componentId: string) => ModelComponentStyle;
+  getModelComponentTypeStyle: (modelId: string, componentType: string) => ModelComponentTypeStyle;
+  mutateStyle: (objectId: string, styleValues: StyleValues) => Promise<string>;
+  objectVisibility: ComputedRef<(objectId: string) => boolean | undefined>;
+  selectedObjects: ComputedRef<string[]>;
+  clear: () => Promise<void>;
+}
+
 // oxlint-disable-next-line max-lines-per-function
-export function useDataStyleState() {
-  const dataStyleTable = database.data_style!;
-  const modelComponentDataStyleTable = database.model_component_datastyle!;
-  const modelComponentTypeDataStyleTable = database.model_component_type_datastyle!;
+export function useDataStyleState(): DataStyleStateApi {
+  const dataStyleTable = getTable<ObjectStyle>("data_style");
+  const modelComponentDataStyleTable = getTable<ModelComponentStyle>("model_component_datastyle");
+  const modelComponentTypeDataStyleTable = getTable<ModelComponentTypeStyle>(
+    "model_component_type_datastyle",
+  );
 
   const state = getSharedState();
   const { styles, modelComponentTypeStyles, componentStyles } = state;
 
   const objectVisibility = computed(() => (objectId: string): boolean | undefined => {
     const style = styles.value[objectId];
-    if (style) {
+    if (style !== undefined) {
       return style.visibility;
     }
     return false;
@@ -220,19 +228,26 @@ export function useDataStyleState() {
   });
 
   function getStyle(objectId: string): ObjectStyle {
-    return { ...toRaw(styles.value[objectId]) } as ObjectStyle;
+    const style = styles.value[objectId];
+    if (style === undefined) {
+      return { id: objectId };
+    }
+    return { ...toRaw(style) };
   }
 
-  function mutateStyle(objectId: string, styleValues: StyleValues) {
+  async function mutateStyle(objectId: string, styleValues: StyleValues): Promise<string> {
     state.updateStyleCache(objectId, styleValues);
     const currentStyle = getStyle(objectId);
     merge(currentStyle, styleValues);
-    return dataStyleTable.put(structuredClone({ ...toRaw(currentStyle), id: objectId }));
+    const savedId = await dataStyleTable.put(
+      structuredClone({ ...toRaw(currentStyle), id: objectId }),
+    );
+    return savedId;
   }
 
   function getComponentStyle(modelId: string, componentId: string): ModelComponentStyle {
     const cacheKey = `${modelId}_${componentId}`;
-    return merge({ coloring: {} }, componentStyles.value[cacheKey]) as ModelComponentStyle;
+    return merge({ coloring: {} }, componentStyles.value[cacheKey]);
   }
 
   function getModelComponentTypeStyle(
@@ -240,10 +255,7 @@ export function useDataStyleState() {
     componentType: string,
   ): ModelComponentTypeStyle {
     const cacheKey = `${modelId}_${componentType}`;
-    return merge(
-      { coloring: {} },
-      modelComponentTypeStyles.value[cacheKey],
-    ) as ModelComponentTypeStyle;
+    return merge({ coloring: {} }, modelComponentTypeStyles.value[cacheKey]);
   }
 
   async function clear(): Promise<void> {

package/internal/stores/hybrid_viewer/brightness.ts

@@ -1,9 +1,5 @@
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
 import { BACKGROUND_GREY_VALUE, RGB_MAX } from "./constants";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import type { Ref } from "vue";
-import type { HybridViewerStorePublic } from "./vtk_types";
+import { useHybridViewerCore } from "./core";
 
 const RGBA_CHANNELS = 4;
 const SAMPLE_SIZE = 10;
@@ -25,7 +21,14 @@ interface BrightnessOptions {
   offscreenCanvas: HTMLCanvasElement | undefined;
 }
 
-function mapRect(rect: Rect, latestImage: DrawableImage, canvasRect: DOMRect) {
+interface RelativeRect {
+  relX: number;
+  relY: number;
+  relW: number;
+  relH: number;
+}
+
+function mapRect(rect: Rect, latestImage: DrawableImage, canvasRect: DOMRect): RelativeRect {
   const scaleX = latestImage.width / canvasRect.width;
   const scaleY = latestImage.height / canvasRect.height;
   return {
@@ -35,46 +38,61 @@ function mapRect(rect: Rect, latestImage: DrawableImage, canvasRect: DOMRect) {
     relH: rect.height * scaleY,
   };
 }
+
+function sampleMinBrightness(
+  ctx: CanvasRenderingContext2D,
+  image: DrawableImage,
+  relRect: RelativeRect,
+): number {
+  ctx.drawImage(
+    image,
+    Math.max(0, relRect.relX),
+    Math.max(0, relRect.relY),
+    Math.min(image.width, relRect.relW),
+    Math.min(image.height, relRect.relH),
+    0,
+    0,
+    SAMPLE_SIZE,
+    SAMPLE_SIZE,
+  );
+  const { data } = ctx.getImageData(0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
+  let minBrightness = 1;
+  for (let i = 0; i < TOTAL_CHANNELS; i += RGBA_CHANNELS) {
+    const brightness = ((data[i] ?? 0) + (data[i + 1] ?? 0) + (data[i + 2] ?? 0)) / (3 * RGB_MAX);
+    if (brightness < minBrightness) {
+      minBrightness = brightness;
+    }
+  }
+  return minBrightness;
+}
+
 function computeAverageBrightness(rect: Rect, options: BrightnessOptions): number {
   const { latestImage, offscreenCtx, offscreenCanvas } = options;
-  const { genericRenderWindow } = useHybridViewerStore() as unknown as HybridViewerStorePublic;
+  const { genericRenderWindow } = useHybridViewerCore();
   if (!latestImage || !offscreenCtx || !offscreenCanvas || !genericRenderWindow.value) {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }
-  const canvas = genericRenderWindow.value.getApiSpecificRenderWindow().getCanvas();
-  if (!canvas) {
+  // oxlint-disable-next-line no-unsafe-assignment -- vtk.js has no types for getApiSpecificRenderWindow(); narrowed below.
+  const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
+  // oxlint-disable-next-line no-unsafe-type-assertion -- trusted vtk.js OpenGL render window API boundary.
+  const apiSpecificRenderWindow = webGLRenderWindow as unknown as {
+    getCanvas: () => HTMLCanvasElement | null | undefined;
+  };
+  const canvas = apiSpecificRenderWindow.getCanvas();
+  if (canvas === undefined || canvas === null) {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }
   if (rect.width <= 0 || rect.height <= 0) {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }
-  const { relX, relY, relW, relH } = mapRect(rect, latestImage, canvas.getBoundingClientRect());
-  if (relW <= 0 || relH <= 0) {
+  const relRect = mapRect(rect, latestImage, canvas.getBoundingClientRect());
+  if (relRect.relW <= 0 || relRect.relH <= 0) {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }
   offscreenCanvas.width = SAMPLE_SIZE;
   offscreenCanvas.height = SAMPLE_SIZE;
   try {
-    offscreenCtx.drawImage(
-      latestImage,
-      Math.max(0, relX),
-      Math.max(0, relY),
-      Math.min(latestImage.width, relW),
-      Math.min(latestImage.height, relH),
-      0,
-      0,
-      SAMPLE_SIZE,
-      SAMPLE_SIZE,
-    );
-    const { data } = offscreenCtx.getImageData(0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
-    let minBrightness = 1;
-    for (let i = 0; i < TOTAL_CHANNELS; i += RGBA_CHANNELS) {
-      const brightness = (data[i]! + data[i + 1]! + data[i + 2]!) / (3 * RGB_MAX);
-      if (brightness < minBrightness) {
-        minBrightness = brightness;
-      }
-    }
-    return minBrightness;
+    return sampleMinBrightness(offscreenCtx, latestImage, relRect);
   } catch {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }