@geode/opengeodeweb-front 10.6.2 → 10.6.3-rc.1

package/app/components/Screenshot.vue

@@ -1,50 +1,46 @@
 <script setup>
-  import GlassCard from "@ogw_front/components/GlassCard"
-  import fileDownload from "js-file-download"
-  import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+import GlassCard from "@ogw_front/components/GlassCard";
+import fileDownload from "js-file-download";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-  import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useViewerStore } from "@ogw_front/stores/viewer";
 
-  const emit = defineEmits(["close"])
+const emit = defineEmits(["close"]);
 
-  const { show_dialog, width } = defineProps({
-    show_dialog: { type: Boolean, required: true },
-    width: { type: Number, required: false, default: 400 },
-  })
+const { show_dialog, width } = defineProps({
+  show_dialog: { type: Boolean, required: true },
+  width: { type: Number, required: false, default: 400 },
+});
 
-  const output_extensions =
-    viewer_schemas.opengeodeweb_viewer.viewer.take_screenshot.properties
-      .output_extension.enum
-  const filename = ref("")
-  const output_extension = ref("png")
-  const include_background = ref(true)
+const output_extensions =
+  viewer_schemas.opengeodeweb_viewer.viewer.take_screenshot.properties.output_extension.enum;
+const filename = ref("");
+const output_extension = ref("png");
+const include_background = ref(true);
 
-  async function takeScreenshot() {
-    const viewerStore = useViewerStore()
-    await viewerStore.request(
-      viewer_schemas.opengeodeweb_viewer.viewer.take_screenshot,
-      {
-        filename: filename.value,
-        output_extension: output_extension.value,
-        include_background: include_background.value,
+async function takeScreenshot() {
+  const viewerStore = useViewerStore();
+  await viewerStore.request(
+    viewer_schemas.opengeodeweb_viewer.viewer.take_screenshot,
+    {
+      filename: filename.value,
+      output_extension: output_extension.value,
+      include_background: include_background.value,
+    },
+    {
+      response_function: (response) => {
+        fileDownload(response.blob, `${filename.value}.${output_extension.value}`);
       },
-      {
-        response_function: (response) => {
-          fileDownload(
-            response.blob,
-            `${filename.value}.${output_extension.value}`,
-          )
-        },
-      },
-    )
-    emit("close")
-  }
+    },
+  );
+  emit("close");
+}
 
-  watch(output_extension, (value) => {
-    if (value !== "png") {
-      include_background.value = true
-    }
-  })
+watch(output_extension, (value) => {
+  if (value !== "png") {
+    include_background.value = true;
+  }
+});
 </script>
 <template>
   <GlassCard
@@ -89,9 +85,7 @@
 
     <template #actions>
       <v-card-actions class="justify-center pb-4">
-        <v-btn variant="text" color="primary" @click="emit('close')"
-          >Close</v-btn
-        >
+        <v-btn variant="text" color="primary" @click="emit('close')">Close</v-btn>
         <v-btn
           variant="outlined"
           :disabled="!filename || !output_extension"

package/app/components/SearchBar.vue

@@ -1,10 +1,10 @@
 <script setup>
-  const { modelValue, label } = defineProps({
-    modelValue: { type: String, default: "" },
-    label: { type: String, default: "Search..." },
-  })
+const { modelValue, label } = defineProps({
+  modelValue: { type: String, default: "" },
+  label: { type: String, default: "Search..." },
+});
 
-  const emit = defineEmits(["update:modelValue"])
+const emit = defineEmits(["update:modelValue"]);
 </script>
 
 <template>

package/app/components/Step.vue

@@ -1,49 +1,49 @@
 <script setup>
-  function truncate(text, maxLength) {
-    if (text.length > maxLength) {
-      return `${text.slice(0, maxLength)}...`
-    }
-    return text
+function truncate(text, maxLength) {
+  if (text.length > maxLength) {
+    return `${text.slice(0, maxLength)}...`;
   }
+  return text;
+}
 
-  const { step_index } = defineProps({
-    step_index: { type: Number, required: true },
-  })
+const { step_index } = defineProps({
+  step_index: { type: Number, required: true },
+});
 
-  const emit = defineEmits(["reset_values"])
+const emit = defineEmits(["reset_values"]);
 
-  const stepper_tree = inject("stepper_tree")
-  const { current_step_index, steps } = toRefs(stepper_tree)
+const stepper_tree = inject("stepper_tree");
+const { current_step_index, steps } = toRefs(stepper_tree);
 
-  watch(current_step_index, (newVal, oldVal) => {
-    if (newVal < oldVal) {
-      stepper_tree.navigating_back = true
-    }
-  })
-
-  function update_values_event(keys_values_object) {
-    for (const [key, value] of Object.entries(keys_values_object)) {
-      stepper_tree[key] = value
-    }
+watch(current_step_index, (newVal, oldVal) => {
+  if (newVal < oldVal) {
+    stepper_tree.navigating_back = true;
   }
+});
 
-  function increment_step() {
-    stepper_tree.current_step_index += 1
+function update_values_event(keys_values_object) {
+  for (const [key, value] of Object.entries(keys_values_object)) {
+    stepper_tree[key] = value;
   }
+}
 
-  function decrement_step() {
-    stepper_tree.current_step_index -= 1
-  }
+function increment_step() {
+  stepper_tree.current_step_index += 1;
+}
+
+function decrement_step() {
+  stepper_tree.current_step_index -= 1;
+}
 
-  const sortedChips = computed(() => {
-    const chips = steps.value[step_index]?.chips || []
-    return chips.toSorted((chipA, chipB) =>
-      chipA.localeCompare(chipB, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-    )
-  })
+const sortedChips = computed(() => {
+  const chips = steps.value[step_index]?.chips || [];
+  return chips.toSorted((chipA, chipB) =>
+    chipA.localeCompare(chipB, undefined, {
+      numeric: true,
+      sensitivity: "base",
+    }),
+  );
+});
 </script>
 
 <template>
@@ -54,18 +54,11 @@
     hide-actions
   >
     <template #title>
-      <v-sheet
-        color="transparent"
-        class="d-flex flex-column justify-center ps-2"
-      >
+      <v-sheet color="transparent" class="d-flex flex-column justify-center ps-2">
         <p
           tag="h3"
           class="text-subtitle-1 font-weight-bold mb-0 transition-swing"
-          :class="
-            current_step_index === step_index
-              ? 'text-primary'
-              : 'text-grey-darken-1'
-          "
+          :class="current_step_index === step_index ? 'text-primary' : 'text-grey-darken-1'"
         >
           {{ steps[step_index].step_title }}
         </p>

package/app/components/Stepper.vue

@@ -1,25 +1,19 @@
 <script setup>
-  import Step from "@ogw_front/components/Step"
+import Step from "@ogw_front/components/Step";
 
-  const emit = defineEmits(["reset_values", "close"])
-  const stepper_tree = inject("stepper_tree")
-  const { steps, current_step_index } = toRefs(stepper_tree)
+const emit = defineEmits(["reset_values", "close"]);
+const stepper_tree = inject("stepper_tree");
+const { steps, current_step_index } = toRefs(stepper_tree);
 </script>
 
 <template>
   <v-card-item class="flex-shrink-0 pa-0">
     <div class="px-8 pt-8 pb-4">
       <div class="d-flex align-center mb-2">
-        <v-icon
-          icon="mdi-file-upload-outline"
-          class="mr-3 title-text"
-          size="32"
-        />
+        <v-icon icon="mdi-file-upload-outline" class="mr-3 title-text" size="32" />
         <h2 class="title-text">Import Data</h2>
       </div>
-      <p class="text-white text-body-1">
-        Select and configure your files for a seamless import.
-      </p>
+      <p class="text-white text-body-1">Select and configure your files for a seamless import.</p>
     </div>
   </v-card-item>
 
@@ -40,31 +34,31 @@
 </template>
 
 <style scoped>
-  .custom-stepper :deep(.v-stepper-vertical-item) {
-    background: transparent !important;
-  }
+.custom-stepper :deep(.v-stepper-vertical-item) {
+  background: transparent !important;
+}
 
-  .custom-stepper :deep(.v-stepper-vertical-item__content) {
-    background: rgba(255, 255, 255, 0.03) !important;
-    border-radius: 12px;
-    margin: 8px 16px 16px 40px !important;
-    padding: 16px !important;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-  }
+.custom-stepper :deep(.v-stepper-vertical-item__content) {
+  background: rgba(255, 255, 255, 0.03) !important;
+  border-radius: 12px;
+  margin: 8px 16px 16px 40px !important;
+  padding: 16px !important;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
 
-  .custom-stepper :deep(.v-avatar) {
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    background: rgba(255, 255, 255, 0.1) !important;
-    color: white !important;
-  }
+.custom-stepper :deep(.v-avatar) {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.1) !important;
+  color: white !important;
+}
 
-  .custom-stepper :deep(.v-stepper-vertical-item--active .v-avatar) {
-    background: #3c9983 !important;
-    border-color: #3c9983;
-    color: #0a0f0e !important;
-  }
+.custom-stepper :deep(.v-stepper-vertical-item--active .v-avatar) {
+  background: #3c9983 !important;
+  border-color: #3c9983;
+  color: #0a0f0e !important;
+}
 
-  .custom-stepper :deep(.v-stepper-vertical-item__connector) {
-    border-color: rgba(255, 255, 255, 0.1) !important;
-  }
+.custom-stepper :deep(.v-stepper-vertical-item__connector) {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}
 </style>

package/app/components/VeaseViewToolbar.vue

@@ -1,84 +1,80 @@
 <script setup>
-  import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-  import Screenshot from "@ogw_front/components/Screenshot"
-  import ZScaling from "@ogw_front/components/ZScaling"
+import Screenshot from "@ogw_front/components/Screenshot";
+import ZScaling from "@ogw_front/components/ZScaling";
 
-  import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
-  import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useViewerStore } from "@ogw_front/stores/viewer";
 
-  const hybridViewerStore = useHybridViewerStore()
-  const viewerStore = useViewerStore()
-  const take_screenshot = ref(false)
-  const showZScaling = ref(false)
-  const grid_scale = ref(false)
-  const zScale = ref(hybridViewerStore.zScale)
+const hybridViewerStore = useHybridViewerStore();
+const viewerStore = useViewerStore();
+const take_screenshot = ref(false);
+const showZScaling = ref(false);
+const grid_scale = ref(false);
+const zScale = ref(hybridViewerStore.zScale);
 
-  watch(
-    () => hybridViewerStore.zScale,
-    (newVal) => {
-      zScale.value = newVal
-    },
-  )
+watch(
+  () => hybridViewerStore.zScale,
+  (newVal) => {
+    zScale.value = newVal;
+  },
+);
 
-  async function handleZScalingClose() {
-    await hybridViewerStore.setZScaling(zScale.value)
-    showZScaling.value = false
-  }
+async function handleZScalingClose() {
+  await hybridViewerStore.setZScaling(zScale.value);
+  showZScaling.value = false;
+}
 
-  const camera_options = [
-    {
-      tooltip: "Reset camera",
-      icon: "mdi-cube-scan",
-      action: () => {
-        const { genericRenderWindow } = storeToRefs(hybridViewerStore)
-        const renderWindow = genericRenderWindow.value.value.getRenderWindow()
-        const [renderer] = renderWindow.getRenderers()
-        renderer.resetCamera()
-        renderWindow.render()
-        hybridViewerStore.syncRemoteCamera()
-      },
+const camera_options = [
+  {
+    tooltip: "Reset camera",
+    icon: "mdi-cube-scan",
+    action: () => {
+      const { genericRenderWindow } = storeToRefs(hybridViewerStore);
+      const renderWindow = genericRenderWindow.value.value.getRenderWindow();
+      const [renderer] = renderWindow.getRenderers();
+      renderer.resetCamera();
+      renderWindow.render();
+      hybridViewerStore.syncRemoteCamera();
     },
-    {
-      tooltip: "Take a screenshot",
-      icon: "mdi-camera",
-      action: () => {
-        take_screenshot.value = !take_screenshot.value
-      },
+  },
+  {
+    tooltip: "Take a screenshot",
+    icon: "mdi-camera",
+    action: () => {
+      take_screenshot.value = !take_screenshot.value;
     },
-    {
-      tooltip: "Toggle grid scale",
-      icon: "mdi-ruler-square",
-      action: () => {
-        viewerStore.request(
-          schemas.opengeodeweb_viewer.viewer.grid_scale,
-          { visibility: !grid_scale.value },
-          {
-            response_function: () => {
-              grid_scale.value = !grid_scale.value
-              hybridViewerStore.remoteRender()
-            },
+  },
+  {
+    tooltip: "Toggle grid scale",
+    icon: "mdi-ruler-square",
+    action: () => {
+      viewerStore.request(
+        schemas.opengeodeweb_viewer.viewer.grid_scale,
+        { visibility: !grid_scale.value },
+        {
+          response_function: () => {
+            grid_scale.value = !grid_scale.value;
+            hybridViewerStore.remoteRender();
           },
-        )
-      },
+        },
+      );
     },
-    {
-      tooltip: "Z Scaling Control",
-      icon: "mdi-sort",
-      action: () => {
-        showZScaling.value = !showZScaling.value
-      },
+  },
+  {
+    tooltip: "Z Scaling Control",
+    icon: "mdi-sort",
+    action: () => {
+      showZScaling.value = !showZScaling.value;
     },
-  ]
+  },
+];
 </script>
 
 <template>
   <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
-    <v-row
-      v-for="camera_option in camera_options"
-      :key="camera_option.icon"
-      dense
-    >
+    <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
       <v-col>
         <v-btn
           density="comfortable"
@@ -92,20 +88,15 @@
     </v-row>
   </v-container>
   <Screenshot :show_dialog="take_screenshot" @close="take_screenshot = false" />
-  <ZScaling
-    v-if="showZScaling"
-    v-model="zScale"
-    :width="400"
-    @close="handleZScalingClose"
-  />
+  <ZScaling v-if="showZScaling" v-model="zScale" :width="400" @close="handleZScalingClose" />
 </template>
 
 <style module>
-  .floatToolbar {
-    position: absolute;
-    z-index: 2;
-    right: 20px;
-    top: 20px;
-    background-color: rgba(0, 0, 0, 0);
-  }
+.floatToolbar {
+  position: absolute;
+  z-index: 2;
+  right: 20px;
+  top: 20px;
+  background-color: rgba(0, 0, 0, 0);
+}
 </style>

package/app/components/ViewToolbar.vue

@@ -1,53 +1,49 @@
 <script setup>
-  import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-  import Screenshot from "@ogw_front/components/Screenshot"
-  import { useViewerStore } from "@ogw_front/stores/viewer"
+import Screenshot from "@ogw_front/components/Screenshot";
+import { useViewerStore } from "@ogw_front/stores/viewer";
 
-  const viewerStore = useViewerStore()
-  const take_screenshot = ref(false)
-  const grid_scale = ref(false)
+const viewerStore = useViewerStore();
+const take_screenshot = ref(false);
+const grid_scale = ref(false);
 
-  const camera_options = [
-    {
-      tooltip: "Reset camera",
-      icon: "mdi-cube-scan",
-      action: () => {
-        viewerStore.request(schemas.opengeodeweb_viewer.viewer.reset_camera)
-      },
+const camera_options = [
+  {
+    tooltip: "Reset camera",
+    icon: "mdi-cube-scan",
+    action: () => {
+      viewerStore.request(schemas.opengeodeweb_viewer.viewer.reset_camera);
     },
-    {
-      tooltip: "Take a screenshot",
-      icon: "mdi-camera",
-      action: () => {
-        take_screenshot.value = !take_screenshot.value
-      },
+  },
+  {
+    tooltip: "Take a screenshot",
+    icon: "mdi-camera",
+    action: () => {
+      take_screenshot.value = !take_screenshot.value;
     },
-    {
-      tooltip: "Toggle grid scale",
-      icon: "mdi-ruler-square",
-      action: () => {
-        viewerStore.request(
-          schemas.opengeodeweb_viewer.viewer.grid_scale,
-          { visibility: !grid_scale.value },
-          {
-            response_function: () => {
-              grid_scale.value = !grid_scale.value
-            },
+  },
+  {
+    tooltip: "Toggle grid scale",
+    icon: "mdi-ruler-square",
+    action: () => {
+      viewerStore.request(
+        schemas.opengeodeweb_viewer.viewer.grid_scale,
+        { visibility: !grid_scale.value },
+        {
+          response_function: () => {
+            grid_scale.value = !grid_scale.value;
           },
-        )
-      },
+        },
+      );
     },
-  ]
+  },
+];
 </script>
 
 <template>
   <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
-    <v-row
-      v-for="camera_option in camera_options"
-      :key="camera_option.icon"
-      dense
-    >
+    <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
       <v-col>
         <v-btn
           density="comfortable"
@@ -64,11 +60,11 @@
 </template>
 
 <style module>
-  .floatToolbar {
-    position: absolute;
-    z-index: 2;
-    right: 20px;
-    top: 20px;
-    background-color: rgba(0, 0, 0, 0);
-  }
+.floatToolbar {
+  position: absolute;
+  z-index: 2;
+  right: 20px;
+  top: 20px;
+  background-color: rgba(0, 0, 0, 0);
+}
 </style>

package/app/components/Viewer/BreadCrumb.vue

@@ -1,19 +1,19 @@
 <script setup>
-  import { useDataStore } from "@ogw_front/stores/data"
-  import { useTreeviewStore } from "@ogw_front/stores/treeview"
+import { useDataStore } from "@ogw_front/stores/data";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-  const dataStore = useDataStore()
-  const treeviewStore = useTreeviewStore()
+const dataStore = useDataStore();
+const treeviewStore = useTreeviewStore();
 
-  const selectedTree = computed(() => treeviewStore.selectedTree)
+const selectedTree = computed(() => treeviewStore.selectedTree);
 
-  function goBackToFileTree() {
-    treeviewStore.displayFileTree()
-  }
+function goBackToFileTree() {
+  treeviewStore.displayFileTree();
+}
 
-  const model_id = computed(() => treeviewStore.model_id)
+const model_id = computed(() => treeviewStore.model_id);
 
-  const metaDatas = dataStore.refItem(model_id.value)
+const metaDatas = dataStore.refItem(model_id.value);
 </script>
 
 <template>
@@ -21,22 +21,12 @@
     <div class="d-flex align-center gap-2 ml-2 mt-2 mb-1">
       <v-menu v-if="treeviewStore.isAdditionnalTreeDisplayed" offset-y>
         <template v-slot:activator="{ props }">
-          <v-btn
-            icon
-            variant="text"
-            size="medium"
-            v-bind="props"
-            @click="goBackToFileTree"
-          >
+          <v-btn icon variant="text" size="medium" v-bind="props" @click="goBackToFileTree">
             <v-icon size="large">mdi-file-tree</v-icon>
           </v-btn>
           <span class="text-h5 font-weight-bold">/</span>
           <v-icon size="x-large">
-            {{
-              selectedTree && selectedTree.icon
-                ? selectedTree.icon
-                : "mdi-shape-outline"
-            }}
+            {{ selectedTree && selectedTree.icon ? selectedTree.icon : "mdi-shape-outline" }}
           </v-icon>
           <span class="text-subtitle-1 font-weight-regular align-center mt-1">
             Model Explorer ({{ metaDatas.name }})
@@ -46,18 +36,16 @@
 
       <div v-else class="d-flex align-center gap-2">
         <v-icon size="large">mdi-file-tree</v-icon>
-        <span class="text-subtitle-1 font-weight-regular align-center mt-1">
-          Objects
-        </span>
+        <span class="text-subtitle-1 font-weight-regular align-center mt-1"> Objects </span>
       </div>
     </div>
   </v-breadcrumbs>
 </template>
 
 <style scoped>
-  .breadcrumb-container {
-    max-width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-  }
+.breadcrumb-container {
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+}
 </style>