@geode/opengeodeweb-front 10.2.1-rc.2 → 10.2.1-rc.4

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

@@ -1,12 +1,3 @@
-<template>
-  <v-select
-    v-model="vertex_attribute_name"
-    :items="vertex_attribute_names"
-    label="Select an attribute"
-    density="compact"
-  />
-</template>
-
 <script setup>
   import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
   import { useGeodeStore } from "@ogw_front/stores/geode"
@@ -50,3 +41,12 @@
     )
   }
 </script>
+
+<template>
+  <v-select
+    v-model="vertex_attribute_name"
+    :items="vertex_attribute_names"
+    label="Select an attribute"
+    density="compact"
+  />
+</template>

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

@@ -1,3 +1,7 @@
+<script setup>
+  const visibility = defineModel()
+</script>
+
 <template>
   <v-row class="pa-0" align="center">
     <v-col cols="auto" justify="center">
@@ -8,7 +12,3 @@
     </v-col>
   </v-row>
 </template>
-
-<script setup>
-  const visibility = defineModel()
-</script>

package/app/components/Viewer/PointSet/SpecificPointsOptions.vue

@@ -1,44 +1,3 @@
-<template>
-  <ViewerContextMenuItem
-    :itemProps="props.itemProps"
-    tooltip="Points options"
-    :btn_image="PointSetPoints"
-  >
-    <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
-      <template v-if="visibility">
-        <v-row class="pa-0" align="center">
-          <v-divider />
-          <v-col cols="auto" justify="center">
-            <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Size'" />
-          </v-col>
-          <v-col justify="center">
-            <v-slider
-              v-model="size"
-              hide-details
-              min="0"
-              max="20"
-              step="2"
-              thumb-color="black"
-              ticks
-            />
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <ViewerOptionsColoringTypeSelector
-              :id="id"
-              v-model:coloring_style_key="coloring_style_key"
-              v-model:color="color"
-              v-model:vertex_attribute="vertex_attribute"
-            />
-          </v-col>
-        </v-row>
-      </template>
-    </template>
-  </ViewerContextMenuItem>
-</template>
-
 <script setup>
   import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem"
   import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch"
@@ -93,3 +52,44 @@
     },
   })
 </script>
+
+<template>
+  <ViewerContextMenuItem
+    :itemProps="props.itemProps"
+    tooltip="Points options"
+    :btn_image="PointSetPoints"
+  >
+    <template #options>
+      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <template v-if="visibility">
+        <v-row class="pa-0" align="center">
+          <v-divider />
+          <v-col cols="auto" justify="center">
+            <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Size'" />
+          </v-col>
+          <v-col justify="center">
+            <v-slider
+              v-model="size"
+              hide-details
+              min="0"
+              max="20"
+              step="2"
+              thumb-color="black"
+              ticks
+            />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <ViewerOptionsColoringTypeSelector
+              :id="id"
+              v-model:coloring_style_key="coloring_style_key"
+              v-model:color="color"
+              v-model:vertex_attribute="vertex_attribute"
+            />
+          </v-col>
+        </v-row>
+      </template>
+    </template>
+  </ViewerContextMenuItem>
+</template>

package/app/components/Viewer/PolygonalSurface/EdgesOptions.vue

@@ -1,10 +1,3 @@
-<template>
-  <ViewerGenericMeshEdgesOptions
-    :itemProps="props.itemProps"
-    :btn_image="PolygonalSurfaceEdges"
-  />
-</template>
-
 <script setup>
   import ViewerGenericMeshEdgesOptions from "@ogw_front/components/Viewer/Generic/Mesh/EdgesOptions"
   import PolygonalSurfaceEdges from "@ogw_front/assets/viewer_svgs/surface_edges.svg"
@@ -13,3 +6,10 @@
     itemProps: { type: Object, required: true },
   })
 </script>
+
+<template>
+  <ViewerGenericMeshEdgesOptions
+    :itemProps="props.itemProps"
+    :btn_image="PolygonalSurfaceEdges"
+  />
+</template>

package/app/components/Viewer/PolygonalSurface/PointsOptions.vue

@@ -1,10 +1,3 @@
-<template>
-  <ViewerGenericMeshPointsOptions
-    :itemProps="props.itemProps"
-    :btn_image="PolygonalSurfacePoints"
-  />
-</template>
-
 <script setup>
   import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions"
   import PolygonalSurfacePoints from "@ogw_front/assets/viewer_svgs/surface_points.svg"
@@ -13,3 +6,10 @@
     itemProps: { type: Object, required: true },
   })
 </script>
+
+<template>
+  <ViewerGenericMeshPointsOptions
+    :itemProps="props.itemProps"
+    :btn_image="PolygonalSurfacePoints"
+  />
+</template>

package/app/components/Viewer/PolygonalSurface/SpecificPolygonsOptions.vue

@@ -1,25 +1,3 @@
-<template>
-  <ViewerContextMenuItem
-    :itemProps="props.itemProps"
-    :tooltip="props.tooltip"
-    :btn_image="PolygonalSurfacePolygons"
-  >
-    <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
-      <template v-if="visibility">
-        <ViewerOptionsColoringTypeSelector
-          :id="id"
-          v-model:coloring_style_key="coloring_style_key"
-          v-model:color="color"
-          v-model:textures="textures"
-          v-model:vertex_attribute="vertex_attribute"
-          v-model:polygon_attribute="polygon_attribute"
-        />
-      </template>
-    </template>
-  </ViewerContextMenuItem>
-</template>
-
 <script setup>
   import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem"
   import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch"
@@ -82,3 +60,25 @@
     },
   })
 </script>
+
+<template>
+  <ViewerContextMenuItem
+    :itemProps="props.itemProps"
+    :tooltip="props.tooltip"
+    :btn_image="PolygonalSurfacePolygons"
+  >
+    <template #options>
+      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <template v-if="visibility">
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+          v-model:textures="textures"
+          v-model:vertex_attribute="vertex_attribute"
+          v-model:polygon_attribute="polygon_attribute"
+        />
+      </template>
+    </template>
+  </ViewerContextMenuItem>
+</template>

package/app/components/Viewer/Solid/EdgesOptions.vue

@@ -1,10 +1,3 @@
-<template>
-  <ViewerGenericMeshEdgesOptions
-    :itemProps="props.itemProps"
-    :btn_image="SolidEdges"
-  />
-</template>
-
 <script setup>
   import ViewerGenericMeshEdgesOptions from "@ogw_front/components/Viewer/Generic/Mesh/EdgesOptions"
   import SolidEdges from "@ogw_front/assets/viewer_svgs/solid_edges.svg"
@@ -13,3 +6,10 @@
     itemProps: { type: Object, required: true },
   })
 </script>
+
+<template>
+  <ViewerGenericMeshEdgesOptions
+    :itemProps="props.itemProps"
+    :btn_image="SolidEdges"
+  />
+</template>

package/app/components/Viewer/Solid/PointsOptions.vue

@@ -1,10 +1,3 @@
-<template>
-  <ViewerGenericMeshPointsOptions
-    :itemProps="props.itemProps"
-    :btn_image="SolidPoints"
-  />
-</template>
-
 <script setup>
   import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions"
   import SolidPoints from "@ogw_front/assets/viewer_svgs/solid_points.svg"
@@ -13,3 +6,10 @@
     itemProps: { type: Object, required: true },
   })
 </script>
+
+<template>
+  <ViewerGenericMeshPointsOptions
+    :itemProps="props.itemProps"
+    :btn_image="SolidPoints"
+  />
+</template>

package/app/components/Viewer/Solid/PolygonsOptions.vue

@@ -1,10 +1,3 @@
-<template>
-  <ViewerGenericMeshPolygonsOptions
-    :itemProps="props.itemProps"
-    :btn_image="SolidFacets"
-  />
-</template>
-
 <script setup>
   import ViewerGenericMeshPolygonsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PolygonsOptions"
   import SolidFacets from "@ogw_front/assets/viewer_svgs/solid_facets.svg"
@@ -13,3 +6,10 @@
     itemProps: { type: Object, required: true },
   })
 </script>
+
+<template>
+  <ViewerGenericMeshPolygonsOptions
+    :itemProps="props.itemProps"
+    :btn_image="SolidFacets"
+  />
+</template>

package/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue

@@ -1,24 +1,3 @@
-<template>
-  <ViewerContextMenuItem
-    :itemProps="props.itemProps"
-    :tooltip="props.tooltip"
-    :btn_image="SolidPolyhedra"
-  >
-    <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
-      <template v-if="visibility">
-        <ViewerOptionsColoringTypeSelector
-          :id="id"
-          v-model:coloring_style_key="coloring_style_key"
-          v-model:color="color"
-          v-model:vertex_attribute="vertex_attribute"
-          v-model:polyhedron_attribute="polyhedron_attribute"
-        />
-      </template>
-    </template>
-  </ViewerContextMenuItem>
-</template>
-
 <script setup>
   import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem"
   import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch"
@@ -60,17 +39,38 @@
     },
   })
   const vertex_attribute = computed({
-    get: () => dataStyleStore.polyhedraVertexAttribute(id.value),
+    get: () => dataStyleStore.meshPolyhedraVertexAttribute(id.value),
     set: (newValue) => {
-      dataStyleStore.setPolyhedraVertexAttribute(id.value, newValue)
+      dataStyleStore.setMeshPolyhedraVertexAttribute(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const polyhedron_attribute = computed({
-    get: () => dataStyleStore.polyhedraPolyhedronAttribute(id.value),
+    get: () => dataStyleStore.meshPolyhedraPolyhedronAttribute(id.value),
     set: (newValue) => {
-      dataStyleStore.setPolyhedraPolyhedronAttribute(id.value, newValue)
+      dataStyleStore.setMeshPolyhedraPolyhedronAttribute(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
 </script>
+
+<template>
+  <ViewerContextMenuItem
+    :itemProps="props.itemProps"
+    :tooltip="props.tooltip"
+    :btn_image="SolidPolyhedra"
+  >
+    <template #options>
+      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <template v-if="visibility">
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+          v-model:vertex_attribute="vertex_attribute"
+          v-model:polyhedron_attribute="polyhedron_attribute"
+        />
+      </template>
+    </template>
+  </ViewerContextMenuItem>
+</template>

package/app/components/Viewer/TetrahedralSolid/TetrahedraOptions.vue

@@ -1,11 +1,3 @@
-<template>
-  <ViewerGenericMeshPolyhedraOptions
-    :itemProps="props.itemProps"
-    :btn_image="TetrahedralSolidTetrahedra"
-    tooltip="Tetrahedra options"
-  />
-</template>
-
 <script setup>
   import ViewerGenericMeshPolyhedraOptions from "@ogw_front/components/Viewer/Generic/Mesh/PolyhedraOptions"
   import TetrahedralSolidTetrahedra from "@ogw_front/assets/viewer_svgs/solid_polyhedra.svg"
@@ -14,3 +6,11 @@
     itemProps: { type: Object, required: true },
   })
 </script>
+
+<template>
+  <ViewerGenericMeshPolyhedraOptions
+    :itemProps="props.itemProps"
+    :btn_image="TetrahedralSolidTetrahedra"
+    tooltip="Tetrahedra options"
+  />
+</template>

package/app/components/Viewer/TetrahedralSolid/TrianglesOptions.vue

@@ -1,11 +1,3 @@
-<template>
-  <ViewerGenericMeshPolygonsOptions
-    :itemProps="props.itemProps"
-    :btn_image="TetrahedralSolidTriangles"
-    tooltip="Triangles options"
-  />
-</template>
-
 <script setup>
   import ViewerGenericMeshPolygonsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PolygonsOptions"
   import TetrahedralSolidTriangles from "@ogw_front/assets/viewer_svgs/solid_facets.svg"
@@ -14,3 +6,11 @@
     itemProps: { type: Object, required: true },
   })
 </script>
+
+<template>
+  <ViewerGenericMeshPolygonsOptions
+    :itemProps="props.itemProps"
+    :btn_image="TetrahedralSolidTriangles"
+    tooltip="Triangles options"
+  />
+</template>

package/app/components/Viewer/Tree/ObjectTree.vue

@@ -1,3 +1,42 @@
+<script setup>
+  import ViewerBreadCrumb from "@ogw_front/components/Viewer/BreadCrumb"
+  import ViewerTreeObject from "@ogw_front/components/Viewer/TreeObject"
+  import ViewerTreeComponent from "@ogw_front/components/Viewer/TreeComponent"
+  import { useTreeviewStore } from "@ogw_front/stores/treeview"
+
+  const treeviewStore = useTreeviewStore()
+  const emit = defineEmits(["show-menu"])
+
+  function handleTreeMenu({ event, itemId }) {
+    emit("show-menu", { event, itemId })
+  }
+
+  function onResizeStart(event) {
+    const startWidth = treeviewStore.panelWidth
+    const startX = event.clientX
+    const resize = (e) => {
+      const deltaX = e.clientX - startX
+      const newWidth = Math.max(
+        150,
+        Math.min(startWidth + deltaX, window.innerWidth),
+      )
+      treeviewStore.setPanelWidth(newWidth)
+      document.body.style.userSelect = "none"
+    }
+    const stopResize = () => {
+      document.removeEventListener("mousemove", resize)
+      document.removeEventListener("mouseup", stopResize)
+      document.body.style.userSelect = ""
+    }
+    document.addEventListener("mousemove", resize)
+    document.addEventListener("mouseup", stopResize)
+  }
+
+  onMounted(() => {})
+
+  onUnmounted(() => {})
+</script>
+
 <template>
   <v-container
     class="treeview-container"
@@ -38,45 +77,6 @@
   </v-container>
 </template>
 
-<script setup>
-  import ViewerBreadCrumb from "@ogw_front/components/Viewer/BreadCrumb"
-  import ViewerTreeObject from "@ogw_front/components/Viewer/TreeObject"
-  import ViewerTreeComponent from "@ogw_front/components/Viewer/TreeComponent"
-  import { useTreeviewStore } from "@ogw_front/stores/treeview"
-
-  const treeviewStore = useTreeviewStore()
-  const emit = defineEmits(["show-menu"])
-
-  function handleTreeMenu({ event, itemId }) {
-    emit("show-menu", { event, itemId })
-  }
-
-  function onResizeStart(event) {
-    const startWidth = treeviewStore.panelWidth
-    const startX = event.clientX
-    const resize = (e) => {
-      const deltaX = e.clientX - startX
-      const newWidth = Math.max(
-        150,
-        Math.min(startWidth + deltaX, window.innerWidth),
-      )
-      treeviewStore.setPanelWidth(newWidth)
-      document.body.style.userSelect = "none"
-    }
-    const stopResize = () => {
-      document.removeEventListener("mousemove", resize)
-      document.removeEventListener("mouseup", stopResize)
-      document.body.style.userSelect = ""
-    }
-    document.addEventListener("mousemove", resize)
-    document.addEventListener("mouseup", stopResize)
-  }
-
-  onMounted(() => {})
-
-  onUnmounted(() => {})
-</script>
-
 <style scoped>
   .treeview-container {
     position: absolute;

package/app/components/Viewer/TreeComponent.vue

@@ -1,24 +1,3 @@
-<template>
-  <v-treeview
-    v-model:selected="mesh_components_selection"
-    :items="items"
-    class="transparent-treeview"
-    item-value="id"
-    select-strategy="classic"
-    selectable
-  >
-    <template #title="{ item }">
-      <span
-        class="treeview-item"
-        @contextmenu.prevent.stop="
-          emit('show-menu', { event: $event, itemId: item })
-        "
-        >{{ item.title }}</span
-      >
-    </template>
-  </v-treeview>
-</template>
-
 <script setup>
   import { useDataStyleStore } from "@ogw_front/stores/data_style"
   import { useDataStore } from "@ogw_front/stores/data"
@@ -120,6 +99,27 @@
   }
 </script>
 
+<template>
+  <v-treeview
+    v-model:selected="mesh_components_selection"
+    :items="items"
+    class="transparent-treeview"
+    item-value="id"
+    select-strategy="classic"
+    selectable
+  >
+    <template #title="{ item }">
+      <span
+        class="treeview-item"
+        @contextmenu.prevent.stop="
+          emit('show-menu', { event: $event, itemId: item })
+        "
+        >{{ item.title }}</span
+      >
+    </template>
+  </v-treeview>
+</template>
+
 <style scoped>
   .treeview-item {
     white-space: nowrap;

package/app/components/Viewer/TreeObject.vue

@@ -1,40 +1,3 @@
-<template>
-  <v-treeview
-    v-model:selected="treeviewStore.selection"
-    :items="treeviewStore.items"
-    return-object
-    class="transparent-treeview"
-    item-value="id"
-    select-strategy="classic"
-    selectable
-  >
-    <template #title="{ item }">
-      <span
-        class="treeview-item"
-        @contextmenu.prevent.stop="
-          isLeafNode(item)
-            ? emit('show-menu', { event: $event, itemId: item.id })
-            : null
-        "
-      >
-        {{ item.title }}
-      </span>
-    </template>
-
-    <template #append="{ item }">
-      <v-btn
-        v-if="isModel(item)"
-        icon="mdi-magnify-expand"
-        size="medium"
-        class="ml-8"
-        variant="text"
-        v-tooltip="'Model\'s mesh components'"
-        @click.stop="treeviewStore.displayAdditionalTree(item.id)"
-      />
-    </template>
-  </v-treeview>
-</template>
-
 <script setup>
   import { useTreeviewStore } from "@ogw_front/stores/treeview"
   import { useDataStyleStore } from "@ogw_front/stores/data_style"
@@ -84,6 +47,43 @@
   })
 </script>
 
+<template>
+  <v-treeview
+    v-model:selected="treeviewStore.selection"
+    :items="treeviewStore.items"
+    return-object
+    class="transparent-treeview"
+    item-value="id"
+    select-strategy="classic"
+    selectable
+  >
+    <template #title="{ item }">
+      <span
+        class="treeview-item"
+        @contextmenu.prevent.stop="
+          isLeafNode(item)
+            ? emit('show-menu', { event: $event, itemId: item.id })
+            : null
+        "
+      >
+        {{ item.title }}
+      </span>
+    </template>
+
+    <template #append="{ item }">
+      <v-btn
+        v-if="isModel(item)"
+        icon="mdi-magnify-expand"
+        size="medium"
+        class="ml-8"
+        variant="text"
+        v-tooltip="'Model\'s mesh components'"
+        @click.stop="treeviewStore.displayAdditionalTree(item.id)"
+      />
+    </template>
+  </v-treeview>
+</template>
+
 <style scoped>
   .transparent-treeview {
     background-color: transparent;

package/app/components/Viewer/TriangulatedSurface/EdgesOptions.vue

@@ -1,10 +1,3 @@
-<template>
-  <ViewerGenericMeshEdgesOptions
-    :itemProps="props.itemProps"
-    :btn_image="SurfaceEdges"
-  />
-</template>
-
 <script setup>
   import ViewerGenericMeshEdgesOptions from "@ogw_front/components/Viewer/Generic/Mesh/EdgesOptions"
   import SurfaceEdges from "@ogw_front/assets/viewer_svgs/surface_edges.svg"
@@ -13,3 +6,10 @@
     itemProps: { type: Object, required: true },
   })
 </script>
+
+<template>
+  <ViewerGenericMeshEdgesOptions
+    :itemProps="props.itemProps"
+    :btn_image="SurfaceEdges"
+  />
+</template>

package/app/components/Viewer/TriangulatedSurface/PointsOptions.vue

@@ -1,10 +1,3 @@
-<template>
-  <ViewerGenericMeshPointsOptions
-    :itemProps="props.itemProps"
-    :btn_image="TriangulatedSurfaceEdgesPoints"
-  />
-</template>
-
 <script setup>
   import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions"
   import TriangulatedSurfaceEdgesPoints from "@ogw_front/assets/viewer_svgs/surface_points.svg"
@@ -13,3 +6,10 @@
     itemProps: { type: Object, required: true },
   })
 </script>
+
+<template>
+  <ViewerGenericMeshPointsOptions
+    :itemProps="props.itemProps"
+    :btn_image="TriangulatedSurfaceEdgesPoints"
+  />
+</template>