@geode/opengeodeweb-front 10.41.1-rc.1 → 10.42.0-rc.2

package/app/components/FileUploader.vue

@@ -176,7 +176,7 @@ watch(
     @folders-ignored="warnFoldersIgnored"
   />
 
-  <v-card-text v-if="internal_files.length" class="mt-6 pa-0">
+  <v-card-text v-if="!mini && internal_files.length" class="mt-6 pa-0">
     <v-sheet class="d-flex align-center mb-4" color="transparent">
       <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
       <span class="text-subtitle-1 font-weight-bold text-white"> Selected files </span>

package/app/components/Screenshot.vue

@@ -2,10 +2,14 @@
 import viewer_schemas, {
   type ViewerTakeScreenshotParams,
 } from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
+import { BACKGROUND_GREY_VALUE } from "@ogw_internal/stores/hybrid_viewer/constants";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ToolPanel from "@ogw_front/components/ToolPanel.vue";
+import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
 import fileDownload from "js-file-download";
 import { useClipboardItems } from "@vueuse/core";
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const DEFAULT_PANEL_WIDTH = 260;
@@ -24,14 +28,54 @@ const output_extensions =
 const filename = ref<string>("");
 const output_extension = ref<ViewerTakeScreenshotParams["output_extension"]>("png");
 const include_background = ref<boolean>(true);
+const include_ui = ref<boolean>(false);
 const screenshot_type = ref<string>("file");
+const DEFAULT_BACKGROUND_COLOR: RGBAColor = {
+  red: BACKGROUND_GREY_VALUE,
+  green: BACKGROUND_GREY_VALUE,
+  blue: BACKGROUND_GREY_VALUE,
+  alpha: 1,
+};
+const background_color = ref<RGBAColor>({ ...DEFAULT_BACKGROUND_COLOR });
+let is_capturing = false;
 
 const { copy } = useClipboardItems();
 
-async function takeScreenshot(): Promise<void> {
-  const viewerStore = useViewerStore();
+function applyBackgroundColor(color: RGBAColor): Promise<void> {
+  const hybridViewerStore = useHybridViewerStore();
+  // oxlint-disable-next-line id-length -- the viewer schema requires { r, g, b }
+  return hybridViewerStore.setBackgroundColor({ r: color.red, g: color.green, b: color.blue });
+}
+
+async function restoreBackgroundColor(): Promise<void> {
+  background_color.value = { ...DEFAULT_BACKGROUND_COLOR };
+  await applyBackgroundColor(DEFAULT_BACKGROUND_COLOR);
+}
+
+async function deliverScreenshot(blob: Blob | Uint8Array, current_filename: string): Promise<void> {
   const feedbackStore = useFeedbackStore();
-  const current_filename = screenshot_type.value === "file" ? filename.value : "screenshot";
+  if (screenshot_type.value === "file") {
+    fileDownload(blob, `${current_filename}.${output_extension.value}`);
+    feedbackStore.add_success("Screenshot downloaded");
+    return;
+  }
+  try {
+    const pngBlob = new Blob([blob], { type: "image/png" });
+    await copy([new ClipboardItem({ "image/png": pngBlob })]);
+    feedbackStore.add_success("Screenshot copied to clipboard");
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    feedbackStore.add_error(
+      0,
+      "",
+      "Clipboard Error",
+      `Failed to copy screenshot to clipboard: ${message}`,
+    );
+  }
+}
+
+async function takeSceneScreenshot(current_filename: string): Promise<void> {
+  const viewerStore = useViewerStore();
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.take_screenshot;
   const params = {
     filename: current_filename,
@@ -46,32 +90,92 @@ async function takeScreenshot(): Promise<void> {
     {
       // `blob` is the image file content, received as binary (Uint8Array) through wslink
       response_function: async ({ blob }) => {
-        if (screenshot_type.value === "file") {
-          fileDownload(blob, `${current_filename}.${output_extension.value}`);
-          feedbackStore.add_success("Screenshot downloaded");
-        } else {
-          try {
-            const pngBlob = new Blob([blob], { type: "image/png" });
-            await copy([new ClipboardItem({ "image/png": pngBlob })]);
-            feedbackStore.add_success("Screenshot copied to clipboard");
-          } catch (error) {
-            const message = error instanceof Error ? error.message : String(error);
-            feedbackStore.add_error(
-              0,
-              "",
-              "Clipboard Error",
-              `Failed to copy screenshot to clipboard: ${message}`,
-            );
-          }
-        }
+        await deliverScreenshot(blob, current_filename);
       },
     },
   );
-  show.value = false;
 }
 
-watch(output_extension, (value) => {
-  if (value !== "png") {
+// `preferCurrentTab` is not yet part of the TypeScript DOM lib
+interface TabCaptureOptions extends DisplayMediaStreamOptions {
+  preferCurrentTab: boolean;
+}
+
+// Captures the whole browser tab (scene and web UI) through the native screen capture API
+async function captureTab(mime_type: string): Promise<Blob> {
+  const options: TabCaptureOptions = { video: true, audio: false, preferCurrentTab: true };
+  const stream = await navigator.mediaDevices.getDisplayMedia(options);
+  try {
+    const video = document.createElement("video");
+    video.srcObject = stream;
+    video.muted = true;
+    await video.play();
+    const canvas = document.createElement("canvas");
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    canvas.getContext("2d")?.drawImage(video, 0, 0);
+    // oxlint-disable-next-line promise/avoid-new
+    return await new Promise((resolve, reject) => {
+      canvas.toBlob((blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error("Failed to encode the captured frame"));
+        }
+      }, mime_type);
+    });
+  } finally {
+    for (const track of stream.getTracks()) {
+      track.stop();
+    }
+  }
+}
+
+async function takeUiScreenshot(current_filename: string): Promise<void> {
+  const feedbackStore = useFeedbackStore();
+  const mime_type = output_extension.value === "jpg" ? "image/jpeg" : "image/png";
+  try {
+    const blob = await captureTab(mime_type);
+    await deliverScreenshot(blob, current_filename);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    feedbackStore.add_error(0, "", "Screenshot Error", `Failed to capture the page: ${message}`);
+  }
+}
+
+async function takeScreenshot(): Promise<void> {
+  const current_filename = screenshot_type.value === "file" ? filename.value : "screenshot";
+  is_capturing = true;
+  try {
+    if (include_ui.value) {
+      // Close the panel first so it does not appear on the captured page
+      show.value = false;
+      await nextTick();
+      await takeUiScreenshot(current_filename);
+    } else {
+      await takeSceneScreenshot(current_filename);
+      show.value = false;
+    }
+  } finally {
+    await restoreBackgroundColor();
+    is_capturing = false;
+  }
+}
+
+watch(background_color, async (color) => {
+  if (show.value) {
+    await applyBackgroundColor(color);
+  }
+});
+
+watch(show, async (value) => {
+  if (!value && !is_capturing) {
+    await restoreBackgroundColor();
+  }
+});
+
+watch([output_extension, include_ui], ([extension, with_ui]) => {
+  if (extension !== "png" || with_ui) {
     include_background.value = true;
   }
 });
@@ -161,11 +265,22 @@ function handleClose(): void {
       </v-row>
 
       <v-row dense>
+        <v-col cols="12" class="py-1">
+          <v-switch
+            data-testid="screenshotIncludeUiSwitch"
+            v-model="include_ui"
+            label="Include UI"
+            density="compact"
+            hide-details
+            inset
+            class="text-caption"
+          ></v-switch>
+        </v-col>
         <v-col cols="12" class="py-1">
           <v-switch
             data-testid="screenshotIncludeBackgroundSwitch"
             v-model="include_background"
-            :disabled="screenshot_type === 'file' && output_extension !== 'png'"
+            :disabled="(screenshot_type === 'file' && output_extension !== 'png') || include_ui"
             label="Include background"
             density="compact"
             hide-details
@@ -173,6 +288,14 @@ function handleClose(): void {
             class="text-caption"
           ></v-switch>
         </v-col>
+        <v-col v-if="include_background" cols="12" class="py-1">
+          <span class="text-caption">Background color</span>
+          <ViewerOptionsColorPicker
+            data-testid="screenshotBackgroundColorPicker"
+            v-model="background_color"
+            disabled-alpha
+          />
+        </v-col>
       </v-row>
     </v-container>
 

package/app/components/Viewer/Options/TextureItem.vue

@@ -95,8 +95,9 @@ watch(textureId, (value) => {
 </style>
 
 <template>
-  <v-col cols="8" class="pa-1">
+  <v-col class="pa-1">
     <v-select
+      data-testid="textureNameSelector"
       v-model="textureName"
       :items="textureCoordinates"
       label="Select a texture"
@@ -104,7 +105,7 @@ watch(textureId, (value) => {
       hide-details
     />
   </v-col>
-  <v-col cols="1" class="ma-1 d-flex justify-center align-center">
+  <v-col cols="auto" class="pa-1 d-flex justify-center align-center">
     <v-badge :model-value="textureId !== ''" color="white" floating dot offset-x="10" offset-y="10">
       <FileUploader
         @files_uploaded="files_uploaded_event($event)"
@@ -116,7 +117,7 @@ watch(textureId, (value) => {
       />
     </v-badge>
   </v-col>
-  <v-col v-if="textureName === '' || textureId === ''" cols="1">
+  <v-col v-if="textureName === '' || textureId === ''" cols="auto">
     <v-icon size="20" icon="mdi-close-circle" v-tooltip:bottom="'Invalid texture'" />
   </v-col>
 </template>

package/app/utils/default_styles/meshes.ts

@@ -1,3 +1,5 @@
+import type { MeshApplyTexturesParams } from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
+
 import {
   type AttributeConfig,
   CELLS_DEFAULT_COLOR,
@@ -32,13 +34,11 @@ interface MeshEdgesColoring extends MeshComponentColoring {
 
 interface MeshCellsColoring extends MeshComponentColoring {
   cell: AttributeConfig;
-  // oxlint-disable-next-line unicorn/no-null
-  textures: null;
+  textures: MeshApplyTexturesParams["textures"];
 }
 
 interface MeshPolygonsColoring extends MeshComponentColoring {
-  // oxlint-disable-next-line unicorn/no-null
-  textures: null;
+  textures: MeshApplyTexturesParams["textures"];
   polygon: AttributeConfig;
 }
 
@@ -157,8 +157,7 @@ function meshCellsDefaultStyle(
       active: MESH_DEFAULT_ACTIVE_COLORING,
       cell: emptyAttributeConfig(),
       constant,
-      // oxlint-disable-next-line unicorn/no-null
-      textures: null,
+      textures: [],
       vertex: emptyAttributeConfig(),
     },
   };
@@ -173,8 +172,7 @@ function meshPolygonsDefaultStyle(
     coloring: {
       active: MESH_DEFAULT_ACTIVE_COLORING,
       constant,
-      // oxlint-disable-next-line unicorn/no-null
-      textures: null,
+      textures: [],
       polygon: emptyAttributeConfig(),
       vertex: emptyAttributeConfig(),
     },

package/internal/stores/data_style/mesh/cells/index.ts

@@ -68,10 +68,12 @@ async function setMeshCellsActiveColoring(
     return result;
   }
   if (type === "textures") {
-    const result = await whenDefined(deps.texturesStyle.meshCellsTextures(id), async (value) => {
-      const applied = await deps.texturesStyle.setMeshCellsTextures(id, value);
-      return applied;
-    });
+    const textures = deps.texturesStyle.meshCellsTextures(id);
+    // The viewer requires at least one texture: nothing to apply until one is picked.
+    if (textures === undefined || textures.length === 0) {
+      return undefined;
+    }
+    const result = await deps.texturesStyle.setMeshCellsTextures(id, textures);
     return result;
   }
   if (type === "vertex") {

package/internal/stores/data_style/mesh/polygons/index.ts

@@ -78,10 +78,12 @@ async function setMeshPolygonsActiveColoring(
     return result;
   }
   if (type === "textures") {
-    const result = await whenDefined(deps.texturesStyle.meshPolygonsTextures(id), async (value) => {
-      const applied = await deps.texturesStyle.setMeshPolygonsTextures(id, value);
-      return applied;
-    });
+    const textures = deps.texturesStyle.meshPolygonsTextures(id);
+    // The viewer requires at least one texture: nothing to apply until one is picked.
+    if (textures === undefined || textures.length === 0) {
+      return undefined;
+    }
+    const result = await deps.texturesStyle.setMeshPolygonsTextures(id, textures);
     return result;
   }
   if (type === "vertex") {

package/internal/stores/hybrid_viewer/scene.ts

@@ -1,15 +1,35 @@
+import { ACTOR_COLOR, RGB_MAX } from "./constants";
 import type { HybridDb, vtkActor as VtkActorInstance } from "./vtk_types";
 import { requireRenderWindow, useHybridViewerCore } from "./core";
-import { ACTOR_COLOR } from "./constants";
+import viewer_schemas, {
+  type ViewerSetBackgroundColorParams,
+} from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 import { base64ToArrayBuffer } from "./base64";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useViewerStore } from "@ogw_front/stores/viewer";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
 import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
 import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper";
 import type vtkPolyData from "@kitware/vtk.js/Common/DataModel/PolyData";
 import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
 
+async function setBackgroundColor(color: ViewerSetBackgroundColorParams["color"]): Promise<void> {
+  const { genericRenderWindow, remoteRender } = useHybridViewerCore();
+  const renderer = requireRenderWindow(genericRenderWindow).getRenderer();
+  renderer.setBackground([color.r / RGB_MAX, color.g / RGB_MAX, color.b / RGB_MAX]);
+  const renderWindow = requireRenderWindow(genericRenderWindow).getRenderWindow();
+  renderWindow.render();
+  const viewerStore = useViewerStore();
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.set_background_color;
+  const params = {
+    color,
+  };
+  await viewerStore.request({
+    schema,
+    params,
+  });
+  await remoteRender();
+}
+
 // Shared via createSharedComposable (rather than merged into the parent hybridViewer store) so sibling slices, e.g. camera.ts and ruler.ts, can read hybridDb/setZScaling directly without importing the parent store and creating a cycle. A Pinia store would work too but its $id/$patch/... properties would leak into the composed store's spread and collapse its inferred type.
 const useHybridViewerScene = createSharedComposable(() => {
   const hybridDb = reactive<HybridDb>({});
@@ -122,6 +142,7 @@ const useHybridViewerScene = createSharedComposable(() => {
     removeItem,
     setVisibility,
     setZScaling,
+    setBackgroundColor,
     clear,
   };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.41.1-rc.1",
+  "version": "10.42.0-rc.2",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {

package/server/api/microservice/app/set_is_app_ready.post.ts

@@ -1,6 +1,5 @@
 // Third party imports
 import { consola } from "consola";
-import { createError } from "h3";
 
 // Local imports
 import { setIsAppReady } from "@geode/opengeodeweb-front/server/utils/server_config.ts";
@@ -11,9 +10,6 @@ import schemas from "@geode/opengeodeweb-front/opengeodeweb_front_typed_schemas.
 export default defineTypedEventHandler(
   schemas.api.microservice.app.set_is_app_ready,
   ({ isReady }) => {
-    if (!isReady) {
-      throw createError({ statusCode: 400, statusMessage: "isReady is required" });
-    }
     setIsAppReady(isReady);
     consola.info(`Updated IS_APP_READY to ${isReady}`);
     return { statusCode: 200, isReady };