@geode/opengeodeweb-front 10.34.0-rc.2 → 10.34.0-rc.21

package/app/utils/clipping_planes.ts

@@ -0,0 +1,222 @@
+import type { Bounds } from "@kitware/vtk.js/types";
+import type vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
+import type { vtkCamera } from "@kitware/vtk.js/Rendering/Core/Camera";
+
+const AXIS_SCALE = 0.45;
+const SIZE_RATIO = 0.1;
+const DEBOUNCE_DELAY = 200;
+const CHANGE_THRESHOLD = 1e-4;
+// oxlint-disable no-magic-numbers
+const COLOR_BLUE = [0.12, 0.53, 0.9];
+const COLOR_GREEN = [0.26, 0.63, 0.28];
+const COLOR_ORANGE = [0.98, 0.55, 0];
+const COLOR_PURPLE = [0.55, 0.14, 0.67];
+const COLOR_RED = [0.9, 0.22, 0.21];
+// oxlint-enable no-magic-numbers
+const PLANE_COLORS = [COLOR_BLUE, COLOR_GREEN, COLOR_ORANGE, COLOR_PURPLE, COLOR_RED];
+const NORMAL_X = [1, 0, 0];
+const NORMAL_Y = [0, 1, 0];
+const NORMAL_Z = [0, 0, 1];
+const DEFAULT_NORMALS = [NORMAL_X, NORMAL_Y, NORMAL_Z];
+const RGB_MAX_VALUE = 255;
+
+function getPlaneCssColor(index: number): string {
+  const rgb = PLANE_COLORS[index % PLANE_COLORS.length] ?? COLOR_BLUE;
+  return `rgb(${rgb.map((channel) => Math.round(channel * RGB_MAX_VALUE)).join(",")})`;
+}
+
+function hasPlaneChanged(
+  origin: readonly number[],
+  normal: readonly number[],
+  currentOrigin: readonly number[] | undefined,
+  currentNormal: readonly number[] | undefined,
+): boolean {
+  if (!currentOrigin) {
+    return true;
+  }
+  return (
+    origin.some((val, idx) => Math.abs(val - (currentOrigin[idx] ?? 0)) > CHANGE_THRESHOLD) ||
+    normal.some((val, idx) => Math.abs(val - (currentNormal?.[idx] ?? 0)) > CHANGE_THRESHOLD)
+  );
+}
+
+interface PlaneVisualState {
+  readonly plane: { readonly opacity: number; readonly color: readonly number[] };
+  readonly normal: { readonly opacity: number; readonly color: readonly number[] };
+  readonly origin: { readonly opacity: number; readonly color: readonly number[] };
+}
+
+interface PlaneStyle {
+  readonly active: PlaneVisualState;
+  readonly inactive: PlaneVisualState;
+  readonly static: {
+    readonly display2D: { readonly representation: number };
+    readonly outline: {
+      readonly color: readonly number[];
+      readonly opacity: number;
+      readonly representation: number;
+      readonly interpolation: number;
+    };
+  };
+}
+
+function getPlaneStyle(rgb: readonly number[]): PlaneStyle {
+  return {
+    active: {
+      plane: { opacity: 1, color: rgb },
+      normal: { opacity: 1, color: rgb },
+      origin: { opacity: 1, color: rgb },
+    },
+    inactive: {
+      plane: { opacity: 0.5, color: rgb },
+      normal: { opacity: 1, color: rgb },
+      origin: { opacity: 1, color: rgb },
+    },
+    static: {
+      display2D: { representation: 0 },
+      outline: { color: [1, 1, 1], opacity: 1, representation: 1, interpolation: 0 },
+    },
+  };
+}
+
+function computeSceneBounds(actors: readonly vtkActor[]): Bounds {
+  let bounds: Bounds = [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity];
+  for (const actor of actors) {
+    const boundsOfActor = actor.getBounds();
+    bounds = [
+      Math.min(bounds[0], boundsOfActor[0]),
+      Math.max(bounds[1], boundsOfActor[1]),
+      Math.min(bounds[2], boundsOfActor[2]),
+      Math.max(bounds[3], boundsOfActor[3]),
+      Math.min(bounds[4], boundsOfActor[4]),
+      Math.max(bounds[5], boundsOfActor[5]),
+    ];
+  }
+  return bounds;
+}
+
+interface SceneBoundsInfo {
+  readonly center: readonly number[];
+  readonly cubicBounds: readonly number[];
+}
+
+function computeSceneBoundsInfo(actors: readonly vtkActor[]): SceneBoundsInfo {
+  if (actors.length === 0) {
+    return { center: [0, 0, 0], cubicBounds: [-1, 1, -1, 1, -1, 1] };
+  }
+  const [xmin, xmax, ymin, ymax, zmin, zmax] = computeSceneBounds(actors);
+  const center = [
+    Number(((xmin + xmax) / 2).toFixed(4)),
+    Number(((ymin + ymax) / 2).toFixed(4)),
+    Number(((zmin + zmax) / 2).toFixed(4)),
+  ];
+
+  const maxActorExtent = Math.max(
+    ...actors.map((actor: vtkActor) => {
+      const bounds = actor.getBounds();
+      return Math.max(bounds[1] - bounds[0], bounds[3] - bounds[2], bounds[5] - bounds[4]);
+    }),
+  );
+  const halfExtent = maxActorExtent / 2;
+  const [centerX = 0, centerY = 0, centerZ = 0] = center;
+  const cubicBounds = [
+    centerX - halfExtent,
+    centerX + halfExtent,
+    centerY - halfExtent,
+    centerY + halfExtent,
+    centerZ - halfExtent,
+    centerZ + halfExtent,
+  ];
+  return { center, cubicBounds };
+}
+
+interface ActorEntry {
+  readonly actor: vtkActor;
+}
+
+interface MainCameraOptions {
+  readonly focal_point?: readonly number[];
+  readonly position?: readonly number[];
+  readonly view_up?: readonly number[];
+}
+
+function resolveActiveActors(
+  targetAllVisible: boolean,
+  allItems: readonly { readonly id: string }[],
+  selectedDatasetIds: readonly string[],
+  hybridDb: Record<string, ActorEntry | undefined>,
+): vtkActor[] {
+  const targetIds = targetAllVisible
+    ? allItems.map((item: { id: string }) => item.id)
+    : selectedDatasetIds;
+  const targeted = targetIds
+    .map((id) => hybridDb[id]?.actor)
+    .filter((actor: vtkActor | undefined): actor is vtkActor => actor !== undefined);
+  if (targeted.length > 0) {
+    return targeted;
+  }
+  return Object.values(hybridDb)
+    .filter((entry: ActorEntry | undefined): entry is ActorEntry => entry !== undefined)
+    .map((entry: ActorEntry) => entry.actor);
+}
+
+function computeNormalizedViewDirection(
+  focalPoint: readonly number[],
+  position: readonly number[],
+): readonly number[] | undefined {
+  const dir = [
+    (position[0] ?? 0) - (focalPoint[0] ?? 0),
+    (position[1] ?? 0) - (focalPoint[1] ?? 0),
+    (position[2] ?? 0) - (focalPoint[2] ?? 0),
+  ];
+  const dirLen = Math.hypot(...dir);
+  if (dirLen === 0) {
+    return undefined;
+  }
+  return dir.map((component) => component / dirLen);
+}
+
+// Aligns the local clipping-plane preview camera onto the same viewing direction as the
+// Main viewer camera, re-centered on the clipped scene's bounds.
+function alignCameraToMainCamera(
+  camera: vtkCamera,
+  mainCam: MainCameraOptions,
+  center: readonly number[],
+): void {
+  if (!mainCam.focal_point || !mainCam.position) {
+    return;
+  }
+  const normDir = computeNormalizedViewDirection(mainCam.focal_point, mainCam.position);
+  if (!normDir) {
+    return;
+  }
+  const distance = camera.getDistance();
+  camera.setFocalPoint(center[0] ?? 0, center[1] ?? 0, center[2] ?? 0);
+  camera.setPosition(
+    (center[0] ?? 0) + (normDir[0] ?? 0) * distance,
+    (center[1] ?? 0) + (normDir[1] ?? 0) * distance,
+    (center[2] ?? 0) + (normDir[2] ?? 0) * distance,
+  );
+  if (mainCam.view_up) {
+    const [viewUpX = 0, viewUpY = 0, viewUpZ = 0] = mainCam.view_up;
+    camera.setViewUp(viewUpX, viewUpY, viewUpZ);
+  }
+}
+
+export {
+  AXIS_SCALE,
+  SIZE_RATIO,
+  DEBOUNCE_DELAY,
+  CHANGE_THRESHOLD,
+  PLANE_COLORS,
+  DEFAULT_NORMALS,
+  getPlaneCssColor,
+  hasPlaneChanged,
+  getPlaneStyle,
+  computeSceneBounds,
+  computeSceneBoundsInfo,
+  resolveActiveActors,
+  alignCameraToMainCamera,
+};
+
+export type { SceneBoundsInfo, MainCameraOptions };

package/app/utils/color_picker.js

@@ -0,0 +1,54 @@
+const RGB_MAX = 255;
+const PERCENT_MAX = 100;
+
+function parseComponent(val, max = RGB_MAX) {
+  if (val.endsWith("%")) {
+    return (Number(val.slice(0, -1)) / PERCENT_MAX) * max;
+  }
+  return Number(val);
+}
+
+function parseColorString(colorText) {
+  if (!colorText || typeof colorText !== "string") {
+    return undefined;
+  }
+
+  const numbersMatch = colorText.match(/[\d.]+%?/gu);
+  if (!numbersMatch || (numbersMatch.length !== 3 && numbersMatch.length !== 4)) {
+    return undefined;
+  }
+
+  const rawRed = parseComponent(numbersMatch[0]);
+  const rawGreen = parseComponent(numbersMatch[1]);
+  const rawBlue = parseComponent(numbersMatch[2]);
+
+  const red = Math.min(RGB_MAX, Math.max(0, Math.round(rawRed)));
+  const green = Math.min(RGB_MAX, Math.max(0, Math.round(rawGreen)));
+  const blue = Math.min(RGB_MAX, Math.max(0, Math.round(rawBlue)));
+
+  let alpha = 1;
+  if (numbersMatch.length === 4) {
+    const rawAlpha = parseComponent(numbersMatch[3], 1);
+    const calculatedAlpha = rawAlpha > 1 ? rawAlpha / RGB_MAX : rawAlpha;
+    const roundedAlpha = Number(calculatedAlpha.toFixed(2));
+    alpha = Math.min(1, Math.max(0, roundedAlpha));
+  }
+
+  if (Number.isNaN(red) || Number.isNaN(green) || Number.isNaN(blue) || Number.isNaN(alpha)) {
+    return undefined;
+  }
+
+  return { red, green, blue, alpha };
+}
+
+function formatColorString(color, mode) {
+  const { red, green, blue, alpha } = color;
+  const roundRed = Math.round(red);
+  const roundGreen = Math.round(green);
+  const roundBlue = Math.round(blue);
+  return mode === "rgb"
+    ? `rgb(${roundRed}, ${roundGreen}, ${roundBlue})`
+    : `rgba(${roundRed}, ${roundGreen}, ${roundBlue}, ${alpha})`;
+}
+
+export { parseColorString, formatColorString };

package/app/utils/colormap.ts

@@ -0,0 +1,102 @@
+// oxlint-disable unicorn/prefer-export-from
+import colormaps from "@ogw_front/assets/colormaps.json";
+
+import { newInstance as vtkColorTransferFunction } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
+
+interface ColormapPreset {
+  readonly Name: string;
+  readonly RGBPoints: readonly number[];
+}
+
+interface ColormapCategory {
+  readonly Name: string;
+  readonly Children: readonly ColormapPreset[];
+}
+
+const typedColormaps = colormaps as readonly ColormapCategory[];
+
+function getPresetByName(presetName: string): ColormapPreset | undefined {
+  return typedColormaps
+    .flatMap((category: ColormapCategory) => category.Children)
+    .find((preset: ColormapPreset) => preset.Name === presetName);
+}
+
+function getRGBPointsFromPreset(presetName: string): readonly number[] {
+  return getPresetByName(presetName)?.RGBPoints ?? [];
+}
+
+function getPresetsWithCurrentAtTop(
+  presetName: string,
+): readonly (ColormapPreset | ColormapCategory)[] {
+  const currentPreset = getPresetByName(presetName);
+  return [currentPreset, ...typedColormaps].filter(
+    (preset: ColormapPreset | ColormapCategory | undefined): preset is NonNullable<typeof preset> =>
+      Boolean(preset),
+  );
+}
+
+const LAST_POINT_OFFSET = 4;
+const THREE = 3;
+
+function buildColorTable(rgbPoints: readonly number[], width: number): Float32Array {
+  const lut = vtkColorTransferFunction();
+  for (let pointIdx = 0; pointIdx < rgbPoints.length; pointIdx += 4) {
+    lut.addRGBPoint(
+      rgbPoints[pointIdx] ?? 0,
+      rgbPoints[pointIdx + 1] ?? 0,
+      rgbPoints[pointIdx + 2] ?? 0,
+      rgbPoints[pointIdx + THREE] ?? 0,
+    );
+  }
+  return lut.getUint8Table(rgbPoints[0] ?? 0, rgbPoints.at(-LAST_POINT_OFFSET) ?? 0, width, true);
+}
+
+function fillImageDataFromTable(
+  // ImageData can't satisfy prefer-readonly-parameter-types since lib.dom.d.ts types are inherently mutable, so this finding is left unfixed (same pattern as app/plugins/auto_store_register.ts).
+  imageData: ImageData,
+  // Float32Array's numeric index signature is inherently mutable and can't satisfy prefer-readonly-parameter-types, so this finding is left unfixed (same pattern as app/plugins/auto_store_register.ts).
+  table: Float32Array,
+  width: number,
+  height: number,
+): void {
+  for (let xCoord = 0; xCoord < width; xCoord += 1) {
+    const alpha = table[xCoord * 4 + THREE] ?? 0;
+    const blue = table[xCoord * 4 + 2] ?? 0;
+    const green = table[xCoord * 4 + 1] ?? 0;
+    const red = table[xCoord * 4] ?? 0;
+    for (let yCoord = 0; yCoord < height; yCoord += 1) {
+      const pixelIdx = (yCoord * width + xCoord) * 4;
+      imageData.data[pixelIdx] = red;
+      imageData.data[pixelIdx + 1] = green;
+      imageData.data[pixelIdx + 2] = blue;
+      imageData.data[pixelIdx + THREE] = alpha;
+    }
+  }
+}
+
+function drawCanvasForPreset(
+  presetName: string,
+  // HTMLCanvasElement can't satisfy prefer-readonly-parameter-types since lib.dom.d.ts types are inherently mutable, so this finding is left unfixed (same pattern as app/plugins/auto_store_register.ts).
+  canvas: HTMLCanvasElement | undefined | null,
+): void {
+  if (!canvas) {
+    return;
+  }
+  const rgbPoints = getRGBPointsFromPreset(presetName);
+  if (rgbPoints.length === 0) {
+    return;
+  }
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+  const { height, width } = canvas;
+  const table = buildColorTable(rgbPoints, width);
+  const imageData = ctx.createImageData(width, height);
+  fillImageDataFromTable(imageData, table, width, height);
+  ctx.putImageData(imageData, 0, 0);
+}
+
+export { drawCanvasForPreset, getRGBPointsFromPreset, getPresetByName, getPresetsWithCurrentAtTop };
+
+export { default as colormaps } from "@ogw_front/assets/colormaps.json";

package/app/utils/default_styles/{constants.js → constants.ts}

@@ -1,46 +1,59 @@
+interface RGBAColor {
+  red: number;
+  green: number;
+  blue: number;
+  alpha: number;
+}
+
+interface AttributeConfig {
+  name: string | undefined;
+  storedConfigs: Record<string, unknown>;
+}
+
 // Mesh
 const MESH_DEFAULT_ACTIVE_COLORING = "constant";
 const POINTS_DEFAULT_VISIBILITY = true;
 const POINTS_DEFAULT_SIZE = 10;
-const POINTS_DEFAULT_COLOR = { red: 20, green: 20, blue: 20, alpha: 1 };
+const POINTS_DEFAULT_COLOR: RGBAColor = { red: 20, green: 20, blue: 20, alpha: 1 };
 const EDGES_DEFAULT_VISIBILITY = true;
 const EDGES_DEFAULT_WIDTH = 2;
-const EDGES_DEFAULT_COLOR = { red: 20, green: 20, blue: 20, alpha: 1 };
+const EDGES_DEFAULT_COLOR: RGBAColor = { red: 20, green: 20, blue: 20, alpha: 1 };
 const CELLS_DEFAULT_VISIBILITY = true;
-const CELLS_DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1 };
+const CELLS_DEFAULT_COLOR: RGBAColor = { red: 255, green: 255, blue: 255, alpha: 1 };
 const POLYGONS_DEFAULT_VISIBILITY = true;
-const POLYGONS_DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1 };
+const POLYGONS_DEFAULT_COLOR: RGBAColor = { red: 255, green: 255, blue: 255, alpha: 1 };
 const POLYHEDRA_DEFAULT_VISIBILITY = true;
-const POLYHEDRA_DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1 };
+const POLYHEDRA_DEFAULT_COLOR: RGBAColor = { red: 255, green: 255, blue: 255, alpha: 1 };
 
 // Model
-const MODEL_DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1 };
+const MODEL_DEFAULT_COLOR: RGBAColor = { red: 255, green: 255, blue: 255, alpha: 1 };
 const MODEL_DEFAULT_ACTIVE_COLORING = "constant";
 
 const CORNERS_DEFAULT_VISIBILITY = true;
-const CORNERS_DEFAULT_COLOR = { red: 20, green: 20, blue: 20, alpha: 1 };
+const CORNERS_DEFAULT_COLOR: RGBAColor = { red: 20, green: 20, blue: 20, alpha: 1 };
 const CORNERS_DEFAULT_ACTIVE_COLORING = "constant";
 const LINES_DEFAULT_VISIBILITY = true;
-const LINES_DEFAULT_COLOR = { red: 20, green: 20, blue: 20, alpha: 1 };
+const LINES_DEFAULT_COLOR: RGBAColor = { red: 20, green: 20, blue: 20, alpha: 1 };
 const LINES_DEFAULT_ACTIVE_COLORING = "constant";
 const SURFACES_DEFAULT_VISIBILITY = true;
-const SURFACES_DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1 };
+const SURFACES_DEFAULT_COLOR: RGBAColor = { red: 255, green: 255, blue: 255, alpha: 1 };
 const SURFACES_DEFAULT_ACTIVE_COLORING = "constant";
 const BLOCKS_DEFAULT_VISIBILITY = true;
-const BLOCKS_DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1 };
+const BLOCKS_DEFAULT_COLOR: RGBAColor = { red: 255, green: 255, blue: 255, alpha: 1 };
 const BLOCKS_DEFAULT_ACTIVE_COLORING = "constant";
 
 const MESH_COMPONENT_TYPES = ["Corner", "Line", "Surface", "Block"];
 
-const DEFAULT_MODEL_COMPONENT_TYPE_COLORS = {
+const DEFAULT_MODEL_COMPONENT_TYPE_COLORS: Record<string, RGBAColor> = {
   Corner: CORNERS_DEFAULT_COLOR,
   Line: LINES_DEFAULT_COLOR,
   Surface: SURFACES_DEFAULT_COLOR,
   Block: BLOCKS_DEFAULT_COLOR,
 };
 
-const DEFAULT_NO_DATA_COLOR = { red: 128, green: 128, blue: 128, alpha: 1 };
+const DEFAULT_NO_DATA_COLOR: RGBAColor = { red: 128, green: 128, blue: 128, alpha: 1 };
 
+export type { RGBAColor, AttributeConfig };
 export {
   POINTS_DEFAULT_VISIBILITY,
   POINTS_DEFAULT_SIZE,

package/app/utils/default_styles/{index.js → index.ts}

@@ -15,7 +15,7 @@ import {
   surfaceDefaultStyle,
 } from "./meshes";
 
-function default_styles() {
+function default_styles(): Record<string, unknown> {
   return {
     BRep: brepDefaultStyle(),
     CrossSection: crossSectionDefaultStyle(),
@@ -45,8 +45,9 @@ function default_styles() {
   };
 }
 
-function getDefaultStyle(type) {
-  return default_styles()[type];
+function getDefaultStyle(type: string): unknown {
+  const styles: Record<string, unknown> = default_styles();
+  return styles[type];
 }
 
 export { DEFAULT_MODEL_COMPONENT_TYPE_STYLES } from "./models";