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

package/app/utils/color_picker.ts

@@ -0,0 +1,57 @@
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+
+const RGB_MAX = 255;
+const PERCENT_MAX = 100;
+
+function parseComponent(val: string, max = RGB_MAX): number {
+  if (val.endsWith("%")) {
+    return (Number(val.slice(0, -1)) / PERCENT_MAX) * max;
+  }
+  return Number(val);
+}
+
+function parseColorString(colorText: string): RGBAColor | undefined {
+  if (colorText === "") {
+    return undefined;
+  }
+
+  const numbersMatch = colorText.match(/[\d.]+%?/gu);
+  if (!numbersMatch || (numbersMatch.length !== 3 && numbersMatch.length !== 4)) {
+    return undefined;
+  }
+
+  const [redText = "", greenText = "", blueText = "", alphaText] = numbersMatch;
+  const rawRed = parseComponent(redText);
+  const rawGreen = parseComponent(greenText);
+  const rawBlue = parseComponent(blueText);
+
+  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 (alphaText !== undefined) {
+    const rawAlpha = parseComponent(alphaText, 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: RGBAColor, mode: string): string {
+  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

@@ -3,46 +3,43 @@ import colormaps from "@ogw_front/assets/colormaps.json";
 
 import { newInstance as vtkColorTransferFunction } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
 
-type ColormapPreset = (typeof colormaps)[number]["Children"][number];
+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 colormaps
-    .flatMap((category) => category.Children)
-    .find((preset) => preset.Name === presetName);
+  return typedColormaps
+    .flatMap((category: ColormapCategory) => category.Children)
+    .find((preset: ColormapPreset) => preset.Name === presetName);
 }
 
-function getRGBPointsFromPreset(presetName: string): number[] {
+function getRGBPointsFromPreset(presetName: string): readonly number[] {
   return getPresetByName(presetName)?.RGBPoints ?? [];
 }
 
-function getPresetsWithCurrentAtTop(presetName: string) {
+function getPresetsWithCurrentAtTop(
+  presetName: string,
+): readonly (ColormapPreset | ColormapCategory)[] {
   const currentPreset = getPresetByName(presetName);
-  return [currentPreset, ...colormaps].filter((preset): preset is NonNullable<typeof preset> =>
-    Boolean(preset),
+  return [currentPreset, ...typedColormaps].filter(
+    (preset: ColormapPreset | ColormapCategory | undefined): preset is NonNullable<typeof preset> =>
+      Boolean(preset),
   );
 }
 
-function drawCanvasForPreset(
-  presetName: string,
-  canvas: HTMLCanvasElement | undefined | null,
-): void {
-  if (!canvas) {
-    return;
-  }
-  const rgbPoints = getRGBPointsFromPreset(presetName);
-  if (!rgbPoints || rgbPoints.length === 0) {
-    return;
-  }
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    return;
-  }
-  const { height, width } = canvas;
-  const lut = vtkColorTransferFunction();
-
-  const LAST_POINT_OFFSET = 4;
-  const THREE = 3;
+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,
@@ -51,13 +48,17 @@ function drawCanvasForPreset(
       rgbPoints[pointIdx + THREE] ?? 0,
     );
   }
-  const table = lut.getUint8Table(
-    rgbPoints[0] ?? 0,
-    rgbPoints.at(-LAST_POINT_OFFSET) ?? 0,
-    width,
-    true,
-  );
-  const imageData = ctx.createImageData(width, height);
+  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;
@@ -71,6 +72,28 @@ function drawCanvasForPreset(
       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);
 }
 

package/app/utils/default_styles/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,7 +45,7 @@ function default_styles() {
   };
 }
 
-function getDefaultStyle(type: string) {
+function getDefaultStyle(type: string): unknown {
   const styles: Record<string, unknown> = default_styles();
   return styles[type];
 }

package/app/utils/default_styles/meshes.ts

@@ -1,4 +1,5 @@
 import {
+  type AttributeConfig,
   CELLS_DEFAULT_COLOR,
   CELLS_DEFAULT_VISIBILITY,
   EDGES_DEFAULT_COLOR,
@@ -12,19 +13,112 @@ import {
   POLYGONS_DEFAULT_VISIBILITY,
   POLYHEDRA_DEFAULT_COLOR,
   POLYHEDRA_DEFAULT_VISIBILITY,
+  type RGBAColor,
 } from "./constants";
-// oxlint-disable-next-line eslint/no-duplicate-imports
-import type { AttributeConfig, RGBAColor } from "./constants";
 
 function emptyAttributeConfig(): AttributeConfig {
   return { name: undefined, storedConfigs: {} };
 }
 
+interface MeshComponentColoring {
+  active: string;
+  constant: RGBAColor;
+  vertex: AttributeConfig;
+}
+
+interface MeshEdgesColoring extends MeshComponentColoring {
+  edge: AttributeConfig;
+}
+
+interface MeshCellsColoring extends MeshComponentColoring {
+  cell: AttributeConfig;
+  // oxlint-disable-next-line unicorn/no-null
+  textures: null;
+}
+
+interface MeshPolygonsColoring extends MeshComponentColoring {
+  // oxlint-disable-next-line unicorn/no-null
+  textures: null;
+  polygon: AttributeConfig;
+}
+
+interface MeshPolyhedraColoring extends MeshComponentColoring {
+  polyhedron: AttributeConfig;
+}
+
+interface MeshPointsStyle {
+  visibility: boolean;
+  coloring: MeshComponentColoring;
+  size: number;
+}
+
+interface MeshEdgesStyle {
+  visibility: boolean;
+  coloring: MeshEdgesColoring;
+  width: number;
+}
+
+interface MeshCellsStyle {
+  visibility: boolean;
+  coloring: MeshCellsColoring;
+}
+
+interface MeshPolygonsStyle {
+  visibility: boolean;
+  coloring: MeshPolygonsColoring;
+}
+
+interface MeshPolyhedraStyle {
+  visibility: boolean;
+  coloring: MeshPolyhedraColoring;
+}
+
+interface PointSetStyle {
+  visibility: boolean;
+  points: MeshPointsStyle;
+}
+
+interface EdgedCurveStyle {
+  visibility: boolean;
+  points: MeshPointsStyle;
+  edges: MeshEdgesStyle;
+}
+
+interface Grid2dStyle {
+  visibility: boolean;
+  points: MeshPointsStyle;
+  edges: MeshEdgesStyle;
+  cells: MeshCellsStyle;
+}
+
+interface Grid3dStyle {
+  visibility: boolean;
+  points: MeshPointsStyle;
+  edges: MeshEdgesStyle;
+  cells: MeshCellsStyle;
+  polyhedra: MeshPolyhedraStyle;
+}
+
+interface SurfaceStyle {
+  visibility: boolean;
+  points: MeshPointsStyle;
+  edges: MeshEdgesStyle;
+  polygons: MeshPolygonsStyle;
+}
+
+interface SolidStyle {
+  visibility: boolean;
+  points: MeshPointsStyle;
+  edges: MeshEdgesStyle;
+  polygons: MeshPolygonsStyle;
+  polyhedra: MeshPolyhedraStyle;
+}
+
 function meshPointsDefaultStyle(
   visibility: boolean = POINTS_DEFAULT_VISIBILITY,
   size: number = POINTS_DEFAULT_SIZE,
   constant: RGBAColor = POINTS_DEFAULT_COLOR,
-) {
+): MeshPointsStyle {
   return {
     visibility,
     coloring: {
@@ -40,7 +134,7 @@ function meshEdgesDefaultStyle(
   visibility: boolean = EDGES_DEFAULT_VISIBILITY,
   width: number = EDGES_DEFAULT_WIDTH,
   constant: RGBAColor = EDGES_DEFAULT_COLOR,
-) {
+): MeshEdgesStyle {
   return {
     visibility,
     coloring: {
@@ -56,7 +150,7 @@ function meshEdgesDefaultStyle(
 function meshCellsDefaultStyle(
   visibility: boolean = CELLS_DEFAULT_VISIBILITY,
   constant: RGBAColor = CELLS_DEFAULT_COLOR,
-) {
+): MeshCellsStyle {
   return {
     visibility,
     coloring: {
@@ -73,7 +167,7 @@ function meshCellsDefaultStyle(
 function meshPolygonsDefaultStyle(
   visibility: boolean = POLYGONS_DEFAULT_VISIBILITY,
   constant: RGBAColor = POLYGONS_DEFAULT_COLOR,
-) {
+): MeshPolygonsStyle {
   return {
     visibility,
     coloring: {
@@ -90,7 +184,7 @@ function meshPolygonsDefaultStyle(
 function meshPolyhedraDefaultStyle(
   visibility: boolean = POLYHEDRA_DEFAULT_VISIBILITY,
   constant: RGBAColor = POLYHEDRA_DEFAULT_COLOR,
-) {
+): MeshPolyhedraStyle {
   return {
     visibility,
     coloring: {
@@ -102,14 +196,14 @@ function meshPolyhedraDefaultStyle(
   };
 }
 
-function pointSetDefaultStyle() {
+function pointSetDefaultStyle(): PointSetStyle {
   return {
     visibility: true,
     points: meshPointsDefaultStyle(),
   };
 }
 
-function edgedCurveDefaultStyle() {
+function edgedCurveDefaultStyle(): EdgedCurveStyle {
   return {
     visibility: true,
     points: meshPointsDefaultStyle(),
@@ -117,7 +211,7 @@ function edgedCurveDefaultStyle() {
   };
 }
 
-function grid2dDefaultStyle() {
+function grid2dDefaultStyle(): Grid2dStyle {
   return {
     visibility: true,
     points: meshPointsDefaultStyle(false),
@@ -126,7 +220,7 @@ function grid2dDefaultStyle() {
   };
 }
 
-function grid3dDefaultStyle() {
+function grid3dDefaultStyle(): Grid3dStyle {
   return {
     visibility: true,
     points: meshPointsDefaultStyle(false),
@@ -136,7 +230,7 @@ function grid3dDefaultStyle() {
   };
 }
 
-function surfaceDefaultStyle() {
+function surfaceDefaultStyle(): SurfaceStyle {
   return {
     visibility: true,
     points: meshPointsDefaultStyle(false),
@@ -145,7 +239,7 @@ function surfaceDefaultStyle() {
   };
 }
 
-function solidDefaultStyle() {
+function solidDefaultStyle(): SolidStyle {
   return {
     visibility: true,
     points: meshPointsDefaultStyle(false),

package/app/utils/default_styles/models.ts

@@ -1,4 +1,5 @@
 import {
+  type AttributeConfig,
   BLOCKS_DEFAULT_ACTIVE_COLORING,
   BLOCKS_DEFAULT_COLOR,
   BLOCKS_DEFAULT_VISIBILITY,
@@ -14,21 +15,89 @@ import {
   MODEL_DEFAULT_COLOR,
   POINTS_DEFAULT_SIZE,
   POINTS_DEFAULT_VISIBILITY,
+  type RGBAColor,
   SURFACES_DEFAULT_ACTIVE_COLORING,
   SURFACES_DEFAULT_COLOR,
   SURFACES_DEFAULT_VISIBILITY,
 } from "./constants";
-// oxlint-disable-next-line eslint/no-duplicate-imports
-import type { AttributeConfig, RGBAColor } from "./constants";
 
 function emptyAttributeConfig(): AttributeConfig {
   return { name: undefined, storedConfigs: {} };
 }
 
+interface ModelComponentColoring {
+  active: string;
+  constant: RGBAColor;
+  vertex: AttributeConfig;
+}
+
+interface ModelLinesColoring extends ModelComponentColoring {
+  edge: AttributeConfig;
+}
+
+interface ModelSurfacesColoring extends ModelComponentColoring {
+  polygon: AttributeConfig;
+}
+
+interface ModelBlocksColoring extends ModelComponentColoring {
+  polyhedron: AttributeConfig;
+}
+
+interface ModelCornersStyle {
+  visibility: boolean;
+  coloring: ModelComponentColoring;
+}
+
+interface ModelLinesStyle {
+  visibility: boolean;
+  coloring: ModelLinesColoring;
+}
+
+interface ModelSurfacesStyle {
+  visibility: boolean;
+  coloring: ModelSurfacesColoring;
+}
+
+interface ModelBlocksStyle {
+  visibility: boolean;
+  coloring: ModelBlocksColoring;
+}
+
+interface ModelPointsStyle {
+  visibility: boolean;
+  size: number;
+}
+
+interface ModelEdgesStyle {
+  visibility: boolean;
+  width: number;
+}
+
+interface ModelWithBlocksStyle {
+  visibility: boolean;
+  coloring: { active: string; constant: RGBAColor };
+  corners: ModelCornersStyle;
+  lines: ModelLinesStyle;
+  surfaces: ModelSurfacesStyle;
+  blocks: ModelBlocksStyle;
+  points: ModelPointsStyle;
+  edges: ModelEdgesStyle;
+}
+
+interface ModelWithoutBlocksStyle {
+  visibility: boolean;
+  coloring: { active: string; constant: RGBAColor };
+  corners: ModelCornersStyle;
+  lines: ModelLinesStyle;
+  surfaces: ModelSurfacesStyle;
+  points: ModelPointsStyle;
+  edges: ModelEdgesStyle;
+}
+
 function modelCornersDefaultStyle(
   visibility: boolean = CORNERS_DEFAULT_VISIBILITY,
   constant: RGBAColor = CORNERS_DEFAULT_COLOR,
-) {
+): ModelCornersStyle {
   return {
     visibility,
     coloring: {
@@ -42,7 +111,7 @@ function modelCornersDefaultStyle(
 function modelLinesDefaultStyle(
   visibility: boolean = LINES_DEFAULT_VISIBILITY,
   constant: RGBAColor = LINES_DEFAULT_COLOR,
-) {
+): ModelLinesStyle {
   return {
     visibility,
     coloring: {
@@ -57,7 +126,7 @@ function modelLinesDefaultStyle(
 function modelSurfacesDefaultStyle(
   visibility: boolean = SURFACES_DEFAULT_VISIBILITY,
   constant: RGBAColor = SURFACES_DEFAULT_COLOR,
-) {
+): ModelSurfacesStyle {
   return {
     visibility,
     coloring: {
@@ -72,7 +141,7 @@ function modelSurfacesDefaultStyle(
 function modelBlocksDefaultStyle(
   visibility: boolean = BLOCKS_DEFAULT_VISIBILITY,
   constant: RGBAColor = BLOCKS_DEFAULT_COLOR,
-) {
+): ModelBlocksStyle {
   return {
     visibility,
     coloring: {
@@ -87,14 +156,14 @@ function modelBlocksDefaultStyle(
 function modelPointsDefaultStyle(
   visibility: boolean = POINTS_DEFAULT_VISIBILITY,
   size: number = POINTS_DEFAULT_SIZE,
-) {
+): ModelPointsStyle {
   return { visibility, size };
 }
 
 function modelEdgesDefaultStyle(
   visibility: boolean = EDGES_DEFAULT_VISIBILITY,
   width: number = EDGES_DEFAULT_WIDTH,
-) {
+): ModelEdgesStyle {
   return { visibility, width };
 }
 
@@ -105,7 +174,7 @@ const DEFAULT_MODEL_COMPONENT_TYPE_STYLES = {
   Block: modelBlocksDefaultStyle(),
 };
 
-function brepDefaultStyle() {
+function brepDefaultStyle(): ModelWithBlocksStyle {
   return {
     visibility: true,
     coloring: {
@@ -121,7 +190,7 @@ function brepDefaultStyle() {
   };
 }
 
-function crossSectionDefaultStyle() {
+function crossSectionDefaultStyle(): ModelWithoutBlocksStyle {
   return {
     visibility: true,
     coloring: {
@@ -136,7 +205,7 @@ function crossSectionDefaultStyle() {
   };
 }
 
-function structuralModelDefaultStyle() {
+function structuralModelDefaultStyle(): ModelWithBlocksStyle {
   return {
     visibility: true,
     coloring: {
@@ -152,7 +221,7 @@ function structuralModelDefaultStyle() {
   };
 }
 
-function sectionDefaultStyle() {
+function sectionDefaultStyle(): ModelWithoutBlocksStyle {
   return {
     visibility: true,
     coloring: {
@@ -167,7 +236,7 @@ function sectionDefaultStyle() {
   };
 }
 
-function implicitCrossSectionDefaultStyle() {
+function implicitCrossSectionDefaultStyle(): ModelWithoutBlocksStyle {
   return {
     visibility: true,
     coloring: {
@@ -182,7 +251,7 @@ function implicitCrossSectionDefaultStyle() {
   };
 }
 
-function implicitStructuralModelDefaultStyle() {
+function implicitStructuralModelDefaultStyle(): ModelWithBlocksStyle {
   return {
     visibility: true,
     coloring: {