@geode/opengeodeweb-front 10.32.3-rc.1 → 10.33.0-rc.2

package/app/components/CameraManager.vue

@@ -11,6 +11,14 @@ const { showDialog, width, escapeFunction } = defineProps({
   escapeFunction: { type: Function, default: undefined },
 });
 
+function handleClose() {
+  if (escapeFunction) {
+    escapeFunction();
+  } else {
+    emit("close");
+  }
+}
+
 const show = computed({
   get: () => showDialog,
   set: (val) => {
@@ -19,25 +27,10 @@ const show = computed({
     }
   },
 });
-
-function handleClose() {
-  if (escapeFunction) {
-    escapeFunction();
-  } else {
-    emit("close");
-  }
-}
 </script>
 
 <template>
-  <ToolPanel
-    v-model="show"
-    title="Camera Positions"
-    :width="width"
-    :escapeFunction="handleClose"
-    style="top: 90px; right: 55px"
-    z-index="1"
-  >
+  <ToolPanel v-model="show" title="Camera Positions" :width="width" :escapeFunction="handleClose">
     <v-card-text class="pa-0">
       <Saver />
       <v-divider />

package/app/components/CameraOrientation.vue

@@ -174,8 +174,6 @@ watch(hoveredFace, (newFace, oldFace) => {
     title="Camera Orientations"
     :width="width"
     :escapeFunction="escapeFunction"
-    style="top: 90px; right: 55px"
-    z-index="1"
   >
     <div
       class="pa-0 overflow-hidden position-relative"

package/app/components/ClippingPlanes.vue

@@ -22,7 +22,8 @@ const availableDatasets = computed(() =>
   allItems.value.map((item) => ({ title: item.name || item.id, value: item.id })),
 );
 const widgetContainer = useTemplateRef("widgetContainer");
-const debouncedApply = useDebounceFn(() => applyClippingPlanes(), DEBOUNCE_DELAY);
+let debouncedApply = undefined;
+
 const {
   getSceneCenter,
   syncWidgets,
@@ -38,24 +39,9 @@ const {
   selectedDatasetIds,
   allItems,
   hybridViewerStore,
-  debouncedApply,
+  debouncedApply: () => debouncedApply(),
 });
 
-function addPlane() {
-  const normal = DEFAULT_NORMALS[planes.value.length % DEFAULT_NORMALS.length];
-  planes.value.push({ origin: getSceneCenter(), normal });
-}
-
-function removePlane(index) {
-  planes.value.splice(index, 1);
-}
-
-function flipNormal(plane) {
-  plane.normal = plane.normal.map((component) => -component);
-  syncWidgets();
-  applyClippingPlanes();
-}
-
 async function applyClippingPlanes() {
   const allIds = allItems.value.map((item) => item.id);
   if (allIds.length === 0) {
@@ -77,6 +63,23 @@ async function applyClippingPlanes() {
   }
 }
 
+debouncedApply = useDebounceFn(() => applyClippingPlanes(), DEBOUNCE_DELAY);
+
+function addPlane() {
+  const normal = DEFAULT_NORMALS[planes.value.length % DEFAULT_NORMALS.length];
+  planes.value.push({ origin: getSceneCenter(), normal });
+}
+
+function removePlane(index) {
+  planes.value.splice(index, 1);
+}
+
+function flipNormal(plane) {
+  plane.normal = plane.normal.map((component) => -component);
+  syncWidgets();
+  applyClippingPlanes();
+}
+
 async function resetClippingPlanes() {
   setFromWidget(true);
   planes.value = [{ origin: undefined, normal: [1, 0, 0] }];

package/app/components/CrsSelector.vue

@@ -18,6 +18,14 @@ const selected_crs = ref([]);
 const toggle_loading = useToggle(data_table_loading);
 const backStore = useBackStore();
 
+function get_selected_crs(crs_code) {
+  for (let i = 0; i <= crs_list.value.length; i += 1) {
+    if (crs_list.value[i]["code"] === crs_code) {
+      return crs_list.value[i];
+    }
+  }
+}
+
 watch(selected_crs, (new_value) => {
   const crs = get_selected_crs(new_value[0]);
   const keys_values_object = {
@@ -27,14 +35,6 @@ watch(selected_crs, (new_value) => {
   emit("increment_step");
 });
 
-function get_selected_crs(crs_code) {
-  for (let i = 0; i <= crs_list.value.length; i += 1) {
-    if (crs_list.value[i]["code"] === crs_code) {
-      return crs_list.value[i];
-    }
-  }
-}
-
 async function get_crs_table() {
   const params = { geode_object_type: geodeObjectType };
   toggle_loading();

package/app/components/HybridRenderingView.vue

@@ -22,6 +22,18 @@ const dataStore = useDataStore();
 const { width: elementWidth, height: elementHeight } = useElementSize(container);
 const { width: windowWidth, height: windowHeight } = useWindowSize();
 
+function debounce(func, wait) {
+  let timeout = undefined;
+  return function executedFunction(...args) {
+    function later() {
+      clearTimeout(timeout);
+      func(...args);
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
 const debouncedResize = debounce(() => {
   hybridViewerStore.resize(elementWidth.value, elementHeight.value);
 }, DEFAULT_ELEMENT_HEIGHT);
@@ -41,18 +53,6 @@ onMounted(async () => {
 
 const { pickColormap, quickColormap } = useQuickColormap();
 
-function debounce(func, wait) {
-  let timeout = undefined;
-  return function executedFunction(...args) {
-    function later() {
-      clearTimeout(timeout);
-      func(...args);
-    }
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-
 async function handleClick(event) {
   const { offsetX, offsetY, clientX, clientY } = event;
   if (hybridViewerStore.is_ruler_active) {

package/app/components/ObjectSelector.vue

@@ -29,6 +29,13 @@ async function fetchAllowedObjectsList() {
   return responses.map((response) => response.allowed_objects);
 }
 
+function setGeodeObject(geode_object_type) {
+  if (geode_object_type) {
+    emit("update_values", { geode_object_type });
+    emit("increment_step");
+  }
+}
+
 async function getAllowedGeodeObjects() {
   toggleLoading();
   allowedGeodeObjects.value = {};
@@ -44,13 +51,6 @@ async function getAllowedGeodeObjects() {
   }
   toggleLoading();
 }
-
-function setGeodeObject(geode_object_type) {
-  if (geode_object_type) {
-    emit("update_values", { geode_object_type });
-    emit("increment_step");
-  }
-}
 // oxlint-disable-next-line no-top-level-await
 await getAllowedGeodeObjects();
 </script>

package/app/components/RemoteRenderingView.vue

@@ -71,6 +71,17 @@ watch([width, height], () => {
   resize();
 });
 
+function connect() {
+  if (viewerStore.status !== Status.CONNECTED) {
+    return;
+  }
+  const session = viewerStore.client.getConnection().getSession();
+  view.setSession(session);
+  view.setViewId(props.viewId);
+  connected.value = true;
+  view.render();
+}
+
 watch(
   () => viewerStore.client,
   () => {
@@ -88,17 +99,6 @@ watch(
   },
 );
 
-function connect() {
-  if (viewerStore.status !== Status.CONNECTED) {
-    return;
-  }
-  const session = viewerStore.client.getConnection().getSession();
-  view.setSession(session);
-  view.setViewId(props.viewId);
-  connected.value = true;
-  view.render();
-}
-
 onMounted(async () => {
   if (import.meta.client) {
     window.addEventListener("resize", resize);

package/app/components/ShrinkFilter.vue

@@ -24,8 +24,6 @@ const availableDatasets = computed(() =>
   allItems.value.map((item) => ({ title: item.name || item.id, value: item.id })),
 );
 
-const debouncedApply = useDebounceFn(() => applyShrink(), DEBOUNCE_DELAY);
-
 async function applyShrink() {
   const allIds = allItems.value.map((item) => item.id);
   if (allIds.length === 0) {
@@ -42,6 +40,8 @@ async function applyShrink() {
   }
 }
 
+const debouncedApply = useDebounceFn(() => applyShrink(), DEBOUNCE_DELAY);
+
 async function resetShrink() {
   shrinkFactor.value = DEFAULT_SHRINK_VALUE;
   await applyShrink();

package/app/components/ToolPanel.vue

@@ -71,7 +71,7 @@ function close() {
 .tool-panel {
   z-index: 1;
   top: 90px;
-  right: 55px;
+  right: 70px;
 }
 :deep(.v-card-title) {
   font-size: 0.9rem !important;

package/app/components/ViewToolbar.vue

@@ -15,14 +15,14 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const hybridViewerStore = useHybridViewerStore();
 const viewerStore = useViewerStore();
-const take_screenshot = ref(false);
-const show_camera_manager = ref(false);
+const showScreenshot = ref(false);
+const showCameraManager = ref(false);
 const showCameraOrientation = ref(false);
 const showZScaling = ref(false);
 const showClippingPlanes = ref(false);
 const showShrinkFilter = ref(false);
 const showRuler = ref(false);
-const grid_scale = ref(false);
+const gridScale = ref(false);
 const zScale = ref(hybridViewerStore.zScale);
 const openSubMenus = ref({});
 
@@ -47,6 +47,28 @@ onKeyStroke("Escape", () => {
   }
 });
 
+function closeAllToolsExcept(toolRef) {
+  const tools = [
+    showCameraOrientation,
+    showCameraManager,
+    showScreenshot,
+    showZScaling,
+    showClippingPlanes,
+    showShrinkFilter,
+    showRuler,
+  ];
+  for (const tool of tools) {
+    if (tool !== toolRef) {
+      tool.value = false;
+    }
+  }
+}
+
+function toggleTool(toolRef) {
+  closeAllToolsExcept(toolRef);
+  toolRef.value = !toolRef.value;
+}
+
 const camera_options = computed(() => [
   {
     testId: "resetCameraButton",
@@ -118,7 +140,7 @@ const camera_options = computed(() => [
     tooltip: "Camera orientation",
     icon: "mdi-rotate-3d",
     action: () => {
-      showCameraOrientation.value = !showCameraOrientation.value;
+      toggleTool(showCameraOrientation);
     },
   },
   {
@@ -127,7 +149,7 @@ const camera_options = computed(() => [
     icon: CameraBookmarkIcon,
     iconSize: 34,
     action: () => {
-      show_camera_manager.value = !show_camera_manager.value;
+      toggleTool(showCameraManager);
     },
   },
   {
@@ -135,17 +157,17 @@ const camera_options = computed(() => [
     tooltip: "Take a screenshot",
     icon: "mdi-camera",
     action: () => {
-      take_screenshot.value = !take_screenshot.value;
+      toggleTool(showScreenshot);
     },
   },
   {
     testId: "gridScaleButton",
     tooltip: "Toggle grid scale",
     icon: "mdi-ruler-square",
-    color: grid_scale.value ? "primary" : undefined,
+    color: gridScale.value ? "primary" : undefined,
     action: () => {
       const schema = schemas.opengeodeweb_viewer.viewer.grid_scale;
-      const params = { visibility: !grid_scale.value };
+      const params = { visibility: !gridScale.value };
       viewerStore.request(
         {
           schema,
@@ -153,7 +175,7 @@ const camera_options = computed(() => [
         },
         {
           response_function: () => {
-            grid_scale.value = !grid_scale.value;
+            gridScale.value = !gridScale.value;
             hybridViewerStore.remoteRender();
           },
         },
@@ -165,7 +187,7 @@ const camera_options = computed(() => [
     tooltip: "Z Scaling Control",
     icon: "mdi-sort",
     action: () => {
-      showZScaling.value = !showZScaling.value;
+      toggleTool(showZScaling);
     },
   },
   {
@@ -174,7 +196,7 @@ const camera_options = computed(() => [
     icon: "mdi-content-cut",
     color: showClippingPlanes.value ? "primary" : undefined,
     action: () => {
-      showClippingPlanes.value = !showClippingPlanes.value;
+      toggleTool(showClippingPlanes);
     },
   },
   {
@@ -183,7 +205,7 @@ const camera_options = computed(() => [
     icon: "mdi-arrow-collapse-all",
     color: showShrinkFilter.value ? "primary" : undefined,
     action: () => {
-      showShrinkFilter.value = !showShrinkFilter.value;
+      toggleTool(showShrinkFilter);
     },
   },
   {
@@ -192,7 +214,7 @@ const camera_options = computed(() => [
     icon: "mdi-ruler",
     color: showRuler.value ? "primary" : undefined,
     action: () => {
-      showRuler.value = !showRuler.value;
+      toggleTool(showRuler);
     },
   },
 ]);
@@ -260,8 +282,8 @@ const camera_options = computed(() => [
     panel
     @select="hybridViewerStore.setCameraOrientation"
   />
-  <Screenshot v-model="take_screenshot" :escapeFunction="() => (take_screenshot = false)" />
-  <CameraManager :showDialog="show_camera_manager" @close="show_camera_manager = false" />
+  <Screenshot v-model="showScreenshot" :escapeFunction="() => (showScreenshot = false)" />
+  <CameraManager :showDialog="showCameraManager" @close="showCameraManager = false" />
   <ZScaling
     v-model:show="showZScaling"
     v-model="zScale"

package/app/components/Viewer/ContextMenu/ContextMenu.vue

@@ -36,6 +36,36 @@ const dragStartY = ref(0);
 const menuX = ref(x);
 const menuY = ref(y);
 
+function clampPosition(posX, posY) {
+  const margin = RADIUS + MARGIN_OFFSET;
+  return {
+    x: Math.min(Math.max(posX, margin), containerWidth - margin),
+    y: Math.min(Math.max(posY, margin), containerHeight - margin),
+  };
+}
+
+function startDrag(event) {
+  isDragging.value = true;
+  dragStartX.value = event.clientX - menuX.value;
+  dragStartY.value = event.clientY - menuY.value;
+}
+
+function handleDrag(event) {
+  const { x: clampedX, y: clampedY } = clampPosition(
+    event.clientX - dragStartX.value,
+    event.clientY - dragStartY.value,
+  );
+  menuX.value = clampedX;
+  menuY.value = clampedY;
+  menuStore.setMenuPosition(clampedX, clampedY);
+}
+
+function stopDrag(event) {
+  isDragging.value = false;
+  event.stopPropagation();
+  menuStore.setMenuPosition(menuX.value, menuY.value);
+}
+
 watch(show_menu, (newVal) => {
   if (!newVal) {
     menuStore.closeMenu();
@@ -115,36 +145,6 @@ const isOverToolbar = computed(() => {
   );
 });
 
-function startDrag(event) {
-  isDragging.value = true;
-  dragStartX.value = event.clientX - menuX.value;
-  dragStartY.value = event.clientY - menuY.value;
-}
-
-function clampPosition(posX, posY) {
-  const margin = RADIUS + MARGIN_OFFSET;
-  return {
-    x: Math.min(Math.max(posX, margin), containerWidth - margin),
-    y: Math.min(Math.max(posY, margin), containerHeight - margin),
-  };
-}
-
-function handleDrag(event) {
-  const { x: clampedX, y: clampedY } = clampPosition(
-    event.clientX - dragStartX.value,
-    event.clientY - dragStartY.value,
-  );
-  menuX.value = clampedX;
-  menuY.value = clampedY;
-  menuStore.setMenuPosition(clampedX, clampedY);
-}
-
-function stopDrag(event) {
-  isDragging.value = false;
-  event.stopPropagation();
-  menuStore.setMenuPosition(menuX.value, menuY.value);
-}
-
 function getMenuStyle() {
   return {
     position: "fixed",

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

@@ -99,7 +99,7 @@ const modelComponentsActiveColoring = computed({
     await dataStyleStore.setModelComponentsColor(
       modelId.value,
       selection.value,
-      modelComponentsColor.value,
+      dataStyleStore.getModelColor(modelId.value),
       coloringType,
     );
     hybridViewerStore.remoteRender();
@@ -116,7 +116,7 @@ const modelComponentsColor = computed({
       modelId.value,
       selection.value,
       color,
-      modelComponentsActiveColoring.value,
+      dataStyleStore.getModelActiveColoring(modelId.value),
     );
     hybridViewerStore.remoteRender();
   },

package/app/components/Viewer/ObjectTree/Base/CommonTreeView.vue

@@ -53,6 +53,7 @@ const { virtualScrollRef, stickyHeader, handleScroll, scrollToIndex } = useTreeS
 );
 
 const lastActiveIndex = ref(-1);
+const focusedIndex = ref(-1);
 
 function handleItemClick(item, index, event) {
   if (index !== undefined) {
@@ -101,12 +102,13 @@ function handleItemClick(item, index, event) {
   }
 }
 
-const { focusedIndex, handleKeyDown } = useTreeKeyboardNav(
+const { handleKeyDown } = useTreeKeyboardNav(
   displayItems,
   emit,
   scrollToIndex,
   toggleOpen,
   handleItemClick,
+  focusedIndex,
 );
 </script>
 

package/app/components/Viewer/ObjectTree/Views/ModelCollections.vue

@@ -96,6 +96,16 @@ function showContextMenu(event, item) {
   });
 }
 
+function extractIds(node) {
+  if (node.children) {
+    return node.children.flatMap((child) => extractIds(child));
+  }
+  if (Number.isInteger(node.viewer_id)) {
+    return [node.viewer_id];
+  }
+  return [];
+}
+
 function handleHoverEnter({ item, immediate = false }) {
   const actualItem = item.raw || item;
 
@@ -126,16 +136,6 @@ function expandAll() {
   opened.value = allIds;
 }
 
-function extractIds(node) {
-  if (node.children) {
-    return node.children.flatMap((child) => extractIds(child));
-  }
-  if (Number.isInteger(node.viewer_id)) {
-    return [node.viewer_id];
-  }
-  return [];
-}
-
 function getLeafViewerIds(item) {
   const actualItem = item.raw || item;
   return extractIds(actualItem);

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

@@ -35,10 +35,6 @@ watch(
 const textureCoordinates = ref([]);
 const backStore = useBackStore();
 
-onMounted(() => {
-  getTextureCoordinates();
-});
-
 function getTextureCoordinates() {
   const schema = back_schemas.opengeodeweb_back.texture_coordinates;
   const params = { id };
@@ -52,6 +48,10 @@ function getTextureCoordinates() {
   );
 }
 
+onMounted(() => {
+  getTextureCoordinates();
+});
+
 async function files_uploaded_event(value) {
   if (value.length > 0) {
     const schema = back_schemas.opengeodeweb_back.save_viewable_file;

package/app/components/csv-preview/CsvPreviewer.vue

@@ -54,27 +54,6 @@ function autoDetectSeparator(content) {
   return best;
 }
 
-function readAndParse() {
-  if (!file) {
-    return;
-  }
-  toggleLoading(true);
-
-  const reader = new FileReader();
-  reader.addEventListener("load", (event) => {
-    rawContent.value = event.target.result;
-    if (!separator.value || separator.value === ",") {
-      separator.value = autoDetectSeparator(rawContent.value);
-    }
-    parseContent();
-    toggleLoading(false);
-  });
-  reader.addEventListener("error", () => {
-    toggleLoading(false);
-  });
-  reader.readAsText(file, "utf8");
-}
-
 function parseContent() {
   if (!rawContent.value) {
     return;
@@ -124,6 +103,27 @@ function parseContent() {
     return obj;
   });
 }
+
+function readAndParse() {
+  if (!file) {
+    return;
+  }
+  toggleLoading(true);
+
+  const reader = new FileReader();
+  reader.addEventListener("load", (event) => {
+    rawContent.value = event.target.result;
+    if (!separator.value || separator.value === ",") {
+      separator.value = autoDetectSeparator(rawContent.value);
+    }
+    parseContent();
+    toggleLoading(false);
+  });
+  reader.addEventListener("error", () => {
+    toggleLoading(false);
+  });
+  reader.readAsText(file, "utf8");
+}
 const computedResult = computed(() => {
   const xIndex = previewHeaders.value.findIndex((header) => header.key === xColumn.value);
   const yIndex = previewHeaders.value.findIndex((header) => header.key === yColumn.value);