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

package/app/components/Viewer/Grid/2D/EdgesOptions.vue

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

package/app/components/Viewer/Grid/2D/PointsOptions.vue

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

package/app/components/Viewer/Grid/3D/CellsOptions.vue

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

package/app/components/Viewer/Grid/3D/EdgesOptions.vue

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

package/app/components/Viewer/Grid/3D/FacetsOptions.vue

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

package/app/components/Viewer/Grid/3D/PointsOptions.vue

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

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

@@ -1,10 +1,3 @@
-<template>
-  <ViewerGenericMeshEdgesOptions
-    :itemProps="props.itemProps"
-    :btn_image="HybridSolidEdges"
-  />
-</template>
-
 <script setup>
   import ViewerGenericMeshEdgesOptions from "@ogw_front/components/Viewer/Generic/Mesh/EdgesOptions"
   import HybridSolidEdges 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="HybridSolidEdges"
+  />
+</template>

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

@@ -1,10 +1,3 @@
-<template>
-  <ViewerGenericMeshPointsOptions
-    :itemProps="props.itemProps"
-    :btn_image="HybridSolidPoints"
-  />
-</template>
-
 <script setup>
   import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions"
   import HybridSolidPoints 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="HybridSolidPoints"
+  />
+</template>

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

@@ -1,10 +1,3 @@
-<template>
-  <ViewerGenericMeshPolygonsOptions
-    :itemProps="props.itemProps"
-    :btn_image="HybridSolidPolygons"
-  />
-</template>
-
 <script setup>
   import ViewerGenericMeshPolygonsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PolygonsOptions"
   import HybridSolidPolygons 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="HybridSolidPolygons"
+  />
+</template>

package/app/components/Viewer/HybridSolid/PolyhedraOptions.vue

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

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

@@ -1,12 +1,3 @@
-<template>
-  <v-select
-    v-model="cell_attribute_name"
-    :items="cell_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="cell_attribute_name"
+    :items="cell_attribute_names"
+    label="Select an attribute"
+    density="compact"
+  />
+</template>

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

@@ -1,15 +1,3 @@
-<template>
-  <v-color-picker
-    ref="el"
-    v-model="color"
-    flat
-    canvas-height="100"
-    hide-inputs
-    width="100%"
-    mode="rgb"
-  />
-</template>
-
 <script setup>
   const el = useTemplateRef("el")
   const model = defineModel()
@@ -23,3 +11,15 @@
     }
   })
 </script>
+
+<template>
+  <v-color-picker
+    ref="el"
+    v-model="color"
+    flat
+    canvas-height="100"
+    hide-inputs
+    width="100%"
+    mode="rgb"
+  />
+</template>

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

@@ -1,69 +1,3 @@
-<template>
-  <v-row justify="center" align="center">
-    <v-divider />
-    <v-col>
-      <v-row justify="center" align="center">
-        <v-col cols="auto">
-          <v-icon
-            size="30"
-            icon="mdi-format-color-fill"
-            v-tooltip:left="'Coloring'"
-          />
-        </v-col>
-        <v-col>
-          <v-select
-            v-model="coloring_style_label"
-            :items="coloring_styles.labels"
-            label="Select a coloring style"
-            density="compact"
-          />
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-spacer />
-        <v-col cols="10">
-          <template v-if="coloring_style_key === color_dict['value']">
-            <ViewerOptionsColorPicker v-model="color" />
-          </template>
-          <template v-if="coloring_style_key === textures_dict['value']">
-            <ViewerOptionsTexturesSelector v-model="textures" :id="id" />
-          </template>
-          <template v-if="coloring_style_key === vertex_dict['value']">
-            <ViewerOptionsVertexAttributeSelector
-              v-model="vertex_attribute"
-              :id="id"
-            />
-          </template>
-          <template v-if="coloring_style_key === edge_dict['value']">
-            <ViewerOptionsEdgeAttributeSelector
-              v-model="edge_attribute"
-              :id="id"
-            />
-          </template>
-          <template v-if="coloring_style_key === cell_dict['value']">
-            <ViewerOptionsCellAttributeSelector
-              v-model="cell_attribute"
-              :id="id"
-            />
-          </template>
-          <template v-if="coloring_style_key === polygon_dict['value']">
-            <ViewerOptionsPolygonAttributeSelector
-              v-model="polygon_attribute"
-              :id="id"
-            />
-          </template>
-          <template v-if="coloring_style_key === polyhedron_dict['value']">
-            <ViewerOptionsPolyhedronAttributeSelector
-              v-model="polyhedron_attribute"
-              :id="id"
-            />
-          </template>
-        </v-col>
-      </v-row>
-    </v-col>
-  </v-row>
-</template>
-
 <script setup>
   import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker"
   import ViewerOptionsTexturesSelector from "@ogw_front/components/Viewer/Options/TexturesSelector"
@@ -148,3 +82,69 @@
       coloring_styles.value.values[coloring_styles.value.labels.indexOf(value)]
   })
 </script>
+
+<template>
+  <v-row justify="center" align="center">
+    <v-divider />
+    <v-col>
+      <v-row justify="center" align="center">
+        <v-col cols="auto">
+          <v-icon
+            size="30"
+            icon="mdi-format-color-fill"
+            v-tooltip:left="'Coloring'"
+          />
+        </v-col>
+        <v-col>
+          <v-select
+            v-model="coloring_style_label"
+            :items="coloring_styles.labels"
+            label="Select a coloring style"
+            density="compact"
+          />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-spacer />
+        <v-col cols="10">
+          <template v-if="coloring_style_key === color_dict['value']">
+            <ViewerOptionsColorPicker v-model="color" />
+          </template>
+          <template v-if="coloring_style_key === textures_dict['value']">
+            <ViewerOptionsTexturesSelector v-model="textures" :id="id" />
+          </template>
+          <template v-if="coloring_style_key === vertex_dict['value']">
+            <ViewerOptionsVertexAttributeSelector
+              v-model="vertex_attribute"
+              :id="id"
+            />
+          </template>
+          <template v-if="coloring_style_key === edge_dict['value']">
+            <ViewerOptionsEdgeAttributeSelector
+              v-model="edge_attribute"
+              :id="id"
+            />
+          </template>
+          <template v-if="coloring_style_key === cell_dict['value']">
+            <ViewerOptionsCellAttributeSelector
+              v-model="cell_attribute"
+              :id="id"
+            />
+          </template>
+          <template v-if="coloring_style_key === polygon_dict['value']">
+            <ViewerOptionsPolygonAttributeSelector
+              v-model="polygon_attribute"
+              :id="id"
+            />
+          </template>
+          <template v-if="coloring_style_key === polyhedron_dict['value']">
+            <ViewerOptionsPolyhedronAttributeSelector
+              v-model="polyhedron_attribute"
+              :id="id"
+            />
+          </template>
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>

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

@@ -1,24 +1,3 @@
-<template>
-  <v-row justify="center" align="center">
-    <v-col cols="auto">
-      <v-icon
-        size="30"
-        icon="mdi-ray-end-arrow"
-        v-tooltip:left="'Edge Attribute'"
-      />
-    </v-col>
-    <v-col>
-      <v-select
-        v-model="edge_attribute_name"
-        :items="edge_attribute_names"
-        label="Select an edge attribute"
-        density="compact"
-        hide-details
-      />
-    </v-col>
-  </v-row>
-</template>
-
 <script setup>
   import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
   import { useGeodeStore } from "@ogw_front/stores/geode"
@@ -70,3 +49,24 @@
     },
   )
 </script>
+
+<template>
+  <v-row justify="center" align="center">
+    <v-col cols="auto">
+      <v-icon
+        size="30"
+        icon="mdi-ray-end-arrow"
+        v-tooltip:left="'Edge Attribute'"
+      />
+    </v-col>
+    <v-col>
+      <v-select
+        v-model="edge_attribute_name"
+        :items="edge_attribute_names"
+        label="Select an edge attribute"
+        density="compact"
+        hide-details
+      />
+    </v-col>
+  </v-row>
+</template>

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

@@ -1,12 +1,3 @@
-<template>
-  <v-select
-    v-model="polygon_attribute_name"
-    :items="polygon_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="polygon_attribute_name"
+    :items="polygon_attribute_names"
+    label="Select an attribute"
+    density="compact"
+  />
+</template>

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

@@ -1,12 +1,3 @@
-<template>
-  <v-select
-    v-model="polyhedron_attribute_name"
-    :items="polyhedron_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"
@@ -52,3 +43,12 @@
     )
   }
 </script>
+
+<template>
+  <v-select
+    v-model="polyhedron_attribute_name"
+    :items="polyhedron_attribute_names"
+    label="Select an attribute"
+    density="compact"
+  />
+</template>

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

@@ -1,40 +1,3 @@
-<template>
-  <v-col cols="7" class="pa-1 ml-3">
-    <v-select
-      v-model="texture_name"
-      :items="texture_coordinates"
-      label="Select a texture"
-      density="compact"
-    />
-  </v-col>
-  <v-badge
-    :model-value="texture_file_name != ''"
-    color="white"
-    floating
-    dot
-    offset-x="10"
-    offset-y="10"
-  >
-    <v-col cols="1" class="ma-1" justify="center" align="center">
-      <FileUploader
-        @files_uploaded="files_uploaded_event($event, index)"
-        :accept="['image/png', 'image/jpeg', 'image/bmp']"
-        :auto_upload="true"
-        :multiple="true"
-        :mini="true"
-        class="mt-2"
-      />
-    </v-col>
-  </v-badge>
-  <v-col v-if="texture_name == '' || texture_file_name == ''" cols="1">
-    <v-icon
-      size="20"
-      icon="mdi-close-circle"
-      v-tooltip:bottom="'Invalid texture'"
-    />
-  </v-col>
-</template>
-
 <script setup>
   import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
   import FileUploader from "@ogw_front/components/FileUploader"
@@ -107,3 +70,40 @@
     display: none;
   }
 </style>
+
+<template>
+  <v-col cols="7" class="pa-1 ml-3">
+    <v-select
+      v-model="texture_name"
+      :items="texture_coordinates"
+      label="Select a texture"
+      density="compact"
+    />
+  </v-col>
+  <v-badge
+    :model-value="texture_file_name != ''"
+    color="white"
+    floating
+    dot
+    offset-x="10"
+    offset-y="10"
+  >
+    <v-col cols="1" class="ma-1" justify="center" align="center">
+      <FileUploader
+        @files_uploaded="files_uploaded_event($event, index)"
+        :accept="['image/png', 'image/jpeg', 'image/bmp']"
+        :auto_upload="true"
+        :multiple="true"
+        :mini="true"
+        class="mt-2"
+      />
+    </v-col>
+  </v-badge>
+  <v-col v-if="texture_name == '' || texture_file_name == ''" cols="1">
+    <v-icon
+      size="20"
+      icon="mdi-close-circle"
+      v-tooltip:bottom="'Invalid texture'"
+    />
+  </v-col>
+</template>

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

@@ -1,3 +1,33 @@
+<script setup>
+  import ViewerOptionsTextureItem from "@ogw_front/components/Viewer/Options/TextureItem"
+
+  const textures = defineModel()
+
+  const props = defineProps({
+    id: { type: String, required: true },
+  })
+
+  const internal_textures = ref([])
+
+  onMounted(() => {
+    if (textures.value != null) {
+      internal_textures.value = textures.value
+    } else {
+      internal_textures.value = [{ id: "", texture_name: "" }]
+    }
+  })
+
+  function update_value_event($event, index) {
+    internal_textures.value[index][$event.key] = $event.value
+    const filtered = internal_textures.value.filter((texture) => {
+      return texture.texture_name !== "" && texture.id !== ""
+    })
+    if (filtered.length !== 0) {
+      textures.value = filtered
+    }
+  }
+</script>
+
 <template>
   <v-row
     v-for="(texture, index) in internal_textures"
@@ -34,33 +64,3 @@
     </v-col>
   </v-row>
 </template>
-
-<script setup>
-  import ViewerOptionsTextureItem from "@ogw_front/components/Viewer/Options/TextureItem"
-
-  const textures = defineModel()
-
-  const props = defineProps({
-    id: { type: String, required: true },
-  })
-
-  const internal_textures = ref([])
-
-  onMounted(() => {
-    if (textures.value != null) {
-      internal_textures.value = textures.value
-    } else {
-      internal_textures.value = [{ id: "", texture_name: "" }]
-    }
-  })
-
-  function update_value_event($event, index) {
-    internal_textures.value[index][$event.key] = $event.value
-    const filtered = internal_textures.value.filter((texture) => {
-      return texture.texture_name !== "" && texture.id !== ""
-    })
-    if (filtered.length !== 0) {
-      textures.value = filtered
-    }
-  }
-</script>