@geode/opengeodeweb-front 10.41.0 → 10.42.0-rc.1

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/Generic/Mesh/EdgesOptions.vue

@@ -18,13 +18,19 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const { applyBatchStyle } = useBatchStyle();
 
+interface CapabilityConfig {
+  available?: boolean;
+  hasColorMap?: boolean;
+}
+
 interface Props {
   itemProps: ItemProps & { index?: number };
   btnImage: string;
   tooltip?: string;
+  capabilities?: Record<string, CapabilityConfig>;
 }
 
-const { itemProps, btnImage, tooltip = "Edges options" } = defineProps<Props>();
+const { itemProps, btnImage, tooltip = "Edges options", capabilities = {} } = defineProps<Props>();
 
 const id = toRef(() => itemProps.id);
 
@@ -251,6 +257,7 @@ async function setEdgeAttributeRangesPerData(ranges: RangesPerData): Promise<voi
           v-model:edge_attribute_color_map="edge_attribute_color_map"
           v-model:edge_attribute_no_data_color="edge_attribute_no_data_color"
           v-model:edge_attribute_time_step="edge_attribute_time_step"
+          :capabilities="capabilities"
         />
       </template>
     </template>

package/app/components/Viewer/Generic/Model/ComponentEdgesOptions.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width.vue";
+import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+interface EdgesTarget {
+  componentType: "Surface" | "Block";
+  componentIds: string[];
+}
+
+interface Props {
+  modelId: string;
+  targets: EdgesTarget[];
+  referenceComponentId?: string;
+}
+
+const { modelId, targets, referenceComponentId = undefined } = defineProps<Props>();
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+
+// Each component type exposes its own edges functions in the data style store
+const EDGES_STYLES = {
+  Surface: {
+    visibility: dataStyleStore.modelSurfaceEdgesVisibility,
+    width: dataStyleStore.modelSurfaceEdgesWidth,
+    color: dataStyleStore.modelSurfaceEdgesColor,
+    activeColoring: dataStyleStore.modelSurfaceEdgesActiveColoring,
+    vertexAttributeName: dataStyleStore.modelSurfaceEdgesVertexAttributeName,
+    vertexAttributeItem: dataStyleStore.modelSurfaceEdgesVertexAttributeItem,
+    vertexAttributeRange: dataStyleStore.modelSurfaceEdgesVertexAttributeRange,
+    vertexAttributeColorMap: dataStyleStore.modelSurfaceEdgesVertexAttributeColorMap,
+    vertexAttributeNoDataColor: dataStyleStore.modelSurfaceEdgesVertexAttributeNoDataColor,
+    setVisibility: dataStyleStore.setModelSurfacesEdgesVisibility,
+    setWidth: dataStyleStore.setModelSurfacesEdgesWidth,
+    setColor: dataStyleStore.setModelSurfacesEdgesColor,
+    setActiveColoring: dataStyleStore.setModelSurfacesEdgesActiveColoring,
+    setVertexAttributeName: dataStyleStore.setModelSurfacesEdgesVertexAttributeName,
+    setVertexAttributeItem: dataStyleStore.setModelSurfacesEdgesVertexAttributeItem,
+    setVertexAttributeRange: dataStyleStore.setModelSurfacesEdgesVertexAttributeRange,
+    setVertexAttributeColorMap: dataStyleStore.setModelSurfacesEdgesVertexAttributeColorMap,
+    setVertexAttributeNoDataColor: dataStyleStore.setModelSurfacesEdgesVertexAttributeNoDataColor,
+  },
+  Block: {
+    visibility: dataStyleStore.modelBlockEdgesVisibility,
+    width: dataStyleStore.modelBlockEdgesWidth,
+    color: dataStyleStore.modelBlockEdgesColor,
+    activeColoring: dataStyleStore.modelBlockEdgesActiveColoring,
+    vertexAttributeName: dataStyleStore.modelBlockEdgesVertexAttributeName,
+    vertexAttributeItem: dataStyleStore.modelBlockEdgesVertexAttributeItem,
+    vertexAttributeRange: dataStyleStore.modelBlockEdgesVertexAttributeRange,
+    vertexAttributeColorMap: dataStyleStore.modelBlockEdgesVertexAttributeColorMap,
+    vertexAttributeNoDataColor: dataStyleStore.modelBlockEdgesVertexAttributeNoDataColor,
+    setVisibility: dataStyleStore.setModelBlocksEdgesVisibility,
+    setWidth: dataStyleStore.setModelBlocksEdgesWidth,
+    setColor: dataStyleStore.setModelBlocksEdgesColor,
+    setActiveColoring: dataStyleStore.setModelBlocksEdgesActiveColoring,
+    setVertexAttributeName: dataStyleStore.setModelBlocksEdgesVertexAttributeName,
+    setVertexAttributeItem: dataStyleStore.setModelBlocksEdgesVertexAttributeItem,
+    setVertexAttributeRange: dataStyleStore.setModelBlocksEdgesVertexAttributeRange,
+    setVertexAttributeColorMap: dataStyleStore.setModelBlocksEdgesVertexAttributeColorMap,
+    setVertexAttributeNoDataColor: dataStyleStore.setModelBlocksEdgesVertexAttributeNoDataColor,
+  },
+};
+type EdgesStyle = (typeof EDGES_STYLES)[EdgesTarget["componentType"]];
+
+// Values are read from the first target, changes are applied to every target
+const edgesStyle = computed<EdgesStyle | undefined>(() => {
+  const [reference] = targets;
+  return reference === undefined ? undefined : EDGES_STYLES[reference.componentType];
+});
+const allComponentIds = computed<string[]>(() => targets.flatMap((target) => target.componentIds));
+
+async function applyEdgesStyle(
+  setter: (style: EdgesStyle, componentIds: string[]) => Promise<unknown>,
+): Promise<void> {
+  await Promise.all(
+    targets.map(async (target) => {
+      await setter(EDGES_STYLES[target.componentType], target.componentIds);
+    }),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+const visibility = computed<boolean | undefined>({
+  get: () => edgesStyle.value?.visibility(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyEdgesStyle((style, ids) => style.setVisibility(modelId, ids, newValue));
+  },
+});
+
+const width = computed<number | undefined>({
+  get: () => edgesStyle.value?.width(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyEdgesStyle((style, ids) => style.setWidth(modelId, ids, newValue));
+  },
+});
+
+const activeColoring = computed<string | undefined>({
+  get: () => edgesStyle.value?.activeColoring(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyEdgesStyle((style, ids) => style.setActiveColoring(modelId, ids, newValue));
+  },
+});
+
+const color = computed<RGBAColor | undefined>({
+  get: () => edgesStyle.value?.color(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyEdgesStyle((style, ids) => style.setColor(modelId, ids, newValue));
+  },
+});
+
+const vertexAttributeName = computed<string | undefined>({
+  get: () => edgesStyle.value?.vertexAttributeName(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyEdgesStyle((style, ids) => style.setVertexAttributeName(modelId, ids, newValue));
+  },
+});
+
+const vertexAttributeItem = computed<number | undefined>({
+  get: () => edgesStyle.value?.vertexAttributeItem(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyEdgesStyle((style, ids) => style.setVertexAttributeItem(modelId, ids, newValue));
+  },
+});
+
+const vertexAttributeRange = computed<(number | undefined)[] | undefined>({
+  get: () => edgesStyle.value?.vertexAttributeRange(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyEdgesStyle((style, ids) =>
+      style.setVertexAttributeRange(modelId, ids, minimum, maximum),
+    );
+  },
+});
+
+const vertexAttributeColorMap = computed<string | undefined>({
+  get: () => edgesStyle.value?.vertexAttributeColorMap(modelId, referenceComponentId),
+  set: async (newValue) => {
+    await applyEdgesStyle((style, ids) => style.setVertexAttributeColorMap(modelId, ids, newValue));
+  },
+});
+
+const vertexAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () => edgesStyle.value?.vertexAttributeNoDataColor(modelId, referenceComponentId),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyEdgesStyle((style, ids) =>
+      style.setVertexAttributeNoDataColor(modelId, ids, newValue),
+    );
+  },
+});
+
+const capabilities = {
+  color: { available: true },
+  textures: { available: false },
+  vertex: { available: true },
+  edge: { available: false },
+  cell: { available: false },
+  polygon: { available: false },
+  polyhedron: { available: false },
+};
+
+const backSchemas = back_schemas.opengeodeweb_back;
+const attributeSchemas = {
+  vertex: {
+    names: backSchemas.model_component_vertex_attribute_names,
+    range: backSchemas.model_component_vertex_attribute_range,
+  },
+};
+</script>
+
+<template>
+  <div class="mt-2" data-testid="modelComponentEdgesOptions">
+    <VisibilitySwitch data-testid="modelComponentEdgesVisibilitySwitch" v-model="visibility" />
+    <template v-if="visibility">
+      <ViewerOptionsWidthSlider data-testid="modelComponentEdgesWidthSlider" v-model="width" />
+      <ViewerOptionsColoringTypeSelector
+        :id="modelId"
+        :componentIds="allComponentIds"
+        v-model:coloring_style_key="activeColoring"
+        v-model:color="color"
+        v-model:vertex_attribute_name="vertexAttributeName"
+        v-model:vertex_attribute_item="vertexAttributeItem"
+        v-model:vertex_attribute_range="vertexAttributeRange"
+        v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+        v-model:vertex_attribute_no_data_color="vertexAttributeNoDataColor"
+        :capabilities="capabilities"
+        :schemas="attributeSchemas"
+      />
+    </template>
+  </div>
+</template>

package/app/components/Viewer/Generic/Model/EdgesOptions.vue

@@ -2,36 +2,14 @@
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
+import ModelEdgesCard from "./ModelEdgesCard.vue";
 import SurfaceEdges from "@ogw_front/assets/viewer_svgs/surface_edges.svg";
-import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
-import { useBatchStyle } from "@ogw_front/composables/batch_style";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-
-const dataStyleStore = useDataStyleStore();
-const hybridViewerStore = useHybridViewerStore();
-const { applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index: number };
 }
 
 const { itemProps } = defineProps<Props>();
-
-const id = computed(() => (itemProps.meta_data.modelId as string | undefined) || itemProps.id);
-
-const visibility = computed({
-  get: () => dataStyleStore.modelEdgesVisibility(id.value),
-  set: async (newValue) => {
-    if (newValue === undefined) {
-      return;
-    }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      dataStyleStore.setModelEdgesVisibility(targetId, newValue),
-    );
-    hybridViewerStore.remoteRender();
-  },
-});
 </script>
 
 <template>
@@ -43,10 +21,7 @@ const visibility = computed({
     :btnImage="SurfaceEdges"
   >
     <template #options>
-      <ViewerOptionsVisibilitySwitch
-        data-testid="modelEdgesVisibilitySwitch"
-        v-model="visibility"
-      />
+      <ModelEdgesCard :itemProps="itemProps" />
     </template>
   </ViewerContextMenuItem>
 </template>

package/app/components/Viewer/Generic/Model/ModelEdgesCard.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import {
+  type ModelMenuItemProps,
+  useModelMenuContext,
+} from "@ogw_front/composables/model_menu_context";
+import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
+import ViewerGenericModelComponentEdgesOptions from "@ogw_front/components/Viewer/Generic/Model/ComponentEdgesOptions.vue";
+import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width.vue";
+import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+// Lines are edges themselves and corners have none: no edges options for them
+const EDGES_TYPE_TITLES = {
+  Surface: "Surfaces Edges Options",
+  Block: "Blocks Edges Options",
+} as const;
+type EdgesComponentType = keyof typeof EDGES_TYPE_TITLES;
+const EDGES_COMPONENT_TYPES: EdgesComponentType[] = ["Surface", "Block"];
+
+function isEdgesComponentType(type: string | undefined): type is EdgesComponentType {
+  return type !== undefined && type in EDGES_TYPE_TITLES;
+}
+
+interface Props {
+  itemProps: ModelMenuItemProps;
+}
+
+const { itemProps } = defineProps<Props>();
+
+const dataStore = useDataStore();
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+const { applyBatchStyle } = useBatchStyle();
+
+const { modelId, componentId, componentType, collections, targetComponentIds } =
+  useModelMenuContext(() => itemProps);
+
+const modelEdgesVisibility = computed<boolean | undefined>({
+  get: () => dataStyleStore.modelEdgesVisibility(modelId.value),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(modelId.value, (targetId: string) =>
+      dataStyleStore.setModelEdgesVisibility(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const modelEdgesWidth = computed<number | undefined>({
+  get: () => dataStyleStore.modelEdgesWidth(modelId.value),
+  set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(modelId.value, (targetId: string) =>
+      dataStyleStore.setModelEdgesWidth(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const edgesComponentType = computed<EdgesComponentType | undefined>(() =>
+  isEdgesComponentType(componentType.value) ? componentType.value : undefined,
+);
+
+const allComponentsTargets = ref<{ componentType: EdgesComponentType; componentIds: string[] }[]>(
+  [],
+);
+watch(
+  modelId,
+  async (currentModelId) => {
+    const targets = await Promise.all(
+      EDGES_COMPONENT_TYPES.map(async (type) => ({
+        componentType: type,
+        componentIds: await dataStore.getMeshComponentGeodeIds(currentModelId, type),
+      })),
+    );
+    if (modelId.value === currentModelId) {
+      allComponentsTargets.value = targets.filter((target) => target.componentIds.length > 0);
+    }
+  },
+  { immediate: true },
+);
+
+const typeTargets = computed(() =>
+  edgesComponentType.value === undefined
+    ? []
+    : [{ componentType: edgesComponentType.value, componentIds: targetComponentIds.value }],
+);
+const typeReferenceId = computed<string | undefined>(() =>
+  collections.value ? targetComponentIds.value[0] : undefined,
+);
+
+const componentTargets = computed(() =>
+  edgesComponentType.value === undefined || componentId.value === undefined
+    ? []
+    : [{ componentType: edgesComponentType.value, componentIds: [componentId.value] }],
+);
+</script>
+
+<template>
+  <v-sheet class="model-edges-card" color="transparent">
+    <OptionsSection title="Model Edges Options">
+      <VisibilitySwitch data-testid="modelEdgesVisibilitySwitch" v-model="modelEdgesVisibility" />
+      <ViewerOptionsWidthSlider
+        v-if="modelEdgesVisibility"
+        data-testid="modelEdgesWidthSlider"
+        v-model="modelEdgesWidth"
+      />
+    </OptionsSection>
+
+    <OptionsSection
+      v-if="!componentType && !componentId && allComponentsTargets.length > 0"
+      title="Components Edges Options"
+      data-testid="modelEdgesComponentsOptions"
+      class="mt-4"
+    >
+      <ViewerGenericModelComponentEdgesOptions :modelId="modelId" :targets="allComponentsTargets" />
+    </OptionsSection>
+
+    <OptionsSection
+      v-if="edgesComponentType"
+      :title="EDGES_TYPE_TITLES[edgesComponentType]"
+      data-testid="modelEdgesComponentTypeOptions"
+      class="mt-4"
+    >
+      <ViewerGenericModelComponentEdgesOptions
+        :modelId="modelId"
+        :targets="typeTargets"
+        :referenceComponentId="typeReferenceId"
+      />
+    </OptionsSection>
+
+    <OptionsSection
+      v-if="edgesComponentType && componentId"
+      title="Component Edges Options"
+      data-testid="modelEdgesComponentOptions"
+      class="mt-4"
+    >
+      <ViewerGenericModelComponentEdgesOptions
+        :modelId="modelId"
+        :targets="componentTargets"
+        :referenceComponentId="componentId"
+      />
+    </OptionsSection>
+  </v-sheet>
+</template>
+
+<style scoped>
+.model-edges-card {
+  padding-top: 12px;
+  overflow-x: hidden;
+}
+</style>