@geode/opengeodeweb-front 9.9.0-rc.3 → 9.10.0-rc.1

package/components/Options/ColorPicker.vue

@@ -0,0 +1,25 @@
+<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()
+  const { pressed } = useMousePressed({ target: el })
+
+  const color = ref(model)
+
+  watch(pressed, (value) => {
+    if (!value) {
+      model.value = color.value
+    }
+  })
+</script>

package/components/Options/ColoringTypeSelector.vue

@@ -0,0 +1,125 @@
+<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 === 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>
+  const coloring_style_key = defineModel("coloring_style_key")
+
+  const color = defineModel("color")
+  const textures = defineModel("textures")
+  const vertex_attribute = defineModel("vertex_attribute")
+  // const edge_attribute = defineModel("edge_attribute");
+  const polygon_attribute = defineModel("polygon_attribute")
+  const polyhedron_attribute = defineModel("polyhedron_attribute")
+
+  const props = defineProps({
+    id: { type: String, required: true },
+  })
+
+  const has_color = computed(() => (color.value !== undefined ? true : false))
+  const has_textures = computed(() =>
+    textures.value !== undefined ? true : false,
+  )
+  const has_vertex = computed(() =>
+    vertex_attribute.value !== undefined ? true : false,
+  )
+  const has_polygons = computed(() =>
+    polygon_attribute.value !== undefined ? true : false,
+  )
+  const has_polyhedra = computed(() =>
+    polyhedron_attribute.value !== undefined ? true : false,
+  )
+
+  const color_dict = { name: "Color", value: "color" }
+  const textures_dict = { name: "Textures", value: "textures" }
+  const vertex_dict = { name: "Vertex attribute", value: "vertex" }
+  // const edge_dict = { name: "Edge attribute", value: "edge" };
+  const polygon_dict = { name: "Polygon attribute", value: "polygon" }
+  const polyhedron_dict = {
+    name: "Polyhedron attribute",
+    value: "polyhedron",
+  }
+  const coloring_styles = computed(() => {
+    let array = []
+    if (has_color.value) array.push(color_dict)
+    if (has_textures.value) array.push(textures_dict)
+    if (has_vertex.value) array.push(vertex_dict)
+    // if (has_edges.value) array.push(edge_dict);
+    if (has_polygons.value) array.push(polygon_dict)
+    if (has_polyhedra.value) array.push(polyhedron_dict)
+
+    const labels = array.map((coloring) => {
+      return coloring.name
+    })
+    const values = array.map((coloring) => {
+      return coloring.value
+    })
+
+    return { labels, values }
+  })
+
+  const coloring_style_label = ref(
+    coloring_styles.value.labels[
+      coloring_styles.value.values.indexOf(coloring_style_key.value)
+    ],
+  )
+
+  watch(coloring_style_label, (value) => {
+    coloring_style_key.value =
+      coloring_styles.value.values[coloring_styles.value.labels.indexOf(value)]
+  })
+</script>

package/components/Options/PolygonAttributeSelector.vue

@@ -0,0 +1,59 @@
+<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"
+
+  const dataBaseStore = useDataBaseStore()
+
+  const props = defineProps({
+    id: { type: String, required: true },
+  })
+
+  const model = defineModel()
+  const polygon_attribute_name = ref("")
+  const polygon_attribute_names = ref([])
+  const polygon_attribute = reactive({ name: polygon_attribute_name.value })
+
+  const meta_data = computed(() => {
+    return dataBaseStore.itemMetaDatas(props.id)
+  })
+
+  onMounted(() => {
+    if (model.value != null) {
+      polygon_attribute_name.value = model.value.name
+    }
+  })
+
+  watch(polygon_attribute_name, (value) => {
+    polygon_attribute.name = value
+    model.value = polygon_attribute
+  })
+
+  onMounted(() => {
+    getVertexAttributes()
+  })
+
+  function getVertexAttributes() {
+    api_fetch(
+      {
+        schema: back_schemas.opengeodeweb_back.polygon_attribute_names,
+        params: {
+          input_geode_object: meta_data.value.geode_object,
+          filename: meta_data.value.native_filename,
+        },
+      },
+      {
+        response_function: (response) => {
+          polygon_attribute_names.value = response._data.polygon_attribute_names
+        },
+      },
+    )
+  }
+</script>

package/components/Options/PolyhedronAttributeSelector.vue

@@ -0,0 +1,63 @@
+<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"
+
+  const model = defineModel()
+
+  const polyhedron_attribute_name = ref("")
+
+  onMounted(() => {
+    if (model.value != null) {
+      polyhedron_attribute_name.value = model.value.name
+    }
+  })
+  const polyhedron_attribute = reactive({
+    name: polyhedron_attribute_name.value,
+  })
+
+  watch(polyhedron_attribute_name, (value) => {
+    polyhedron_attribute.name = value
+    model.value = polyhedron_attribute
+  })
+
+  const props = defineProps({
+    id: { type: String, required: true },
+  })
+
+  const dataBaseStore = useDataBaseStore()
+
+  const polyhedron_attribute_names = ref([])
+  const meta_data = computed(() => {
+    return dataBaseStore.itemMetaDatas(props.id)
+  })
+
+  onMounted(() => {
+    getVertexAttributes()
+  })
+
+  function getVertexAttributes() {
+    api_fetch(
+      {
+        schema: back_schemas.opengeodeweb_back.polyhedron_attribute_names,
+        params: {
+          input_geode_object: meta_data.value.geode_object,
+          filename: meta_data.value.native_filename,
+        },
+      },
+      {
+        response_function: (response) => {
+          polyhedron_attribute_names.value =
+            response._data.polyhedron_attribute_names
+        },
+      },
+    )
+  }
+</script>

package/components/Options/TextureItem.vue

@@ -0,0 +1,116 @@
+<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"
+
+  const dataBaseStore = useDataBaseStore()
+
+  const emit = defineEmits(["update_value"])
+
+  const props = defineProps({
+    id: { type: String, required: true },
+    texture_name: { type: String, required: true },
+    texture_file_name: { type: String, required: true },
+  })
+
+  const texture_name = ref("")
+  texture_name.value = props.texture_name
+
+  const texture_file_name = ref("")
+  texture_file_name.value = props.texture_file_name
+
+  const texture_coordinates = ref([])
+
+  const meta_data = computed(() => {
+    return dataBaseStore.itemMetaDatas(props.id)
+  })
+
+  onMounted(() => {
+    getTextureCoordinates()
+  })
+
+  function getTextureCoordinates() {
+    api_fetch(
+      {
+        schema: back_schemas.opengeodeweb_back.texture_coordinates,
+        params: {
+          input_geode_object: meta_data.value.geode_object,
+          filename: meta_data.value.native_filename,
+        },
+      },
+      {
+        response_function: (response) => {
+          texture_coordinates.value = response._data.texture_coordinates
+        },
+      },
+    )
+  }
+
+  async function files_uploaded_event(value) {
+    if (value.length) {
+      await api_fetch(
+        {
+          schema: back_schemas.opengeodeweb_back.save_viewable_file,
+          params: {
+            input_geode_object: "RasterImage2D",
+            filename: value[0].name,
+          },
+        },
+        {
+          response_function: async (response) => {
+            texture_file_name.value = response._data.viewable_file_name
+          },
+        },
+      )
+    }
+  }
+
+  watch(texture_name, (value) => {
+    emit("update_value", { key: "texture_name", value })
+  })
+
+  watch(texture_file_name, (value) => {
+    emit("update_value", { key: "texture_file_name", value })
+  })
+</script>
+
+<style>
+  .v-input__details {
+    display: none;
+  }
+</style>

package/components/Options/TexturesSelector.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-row
+    v-for="(texture, index) in internal_textures"
+    :key="texture"
+    align="center"
+  >
+    <br />
+
+    <v-col cols="1" class="pa-0">
+      <v-icon
+        v-if="internal_textures.length > 1"
+        icon="mdi-minus"
+        size="20"
+        v-tooltip:bottom="'Remove texture'"
+        @click="internal_textures.splice(index, 1)"
+      />
+    </v-col>
+    <ViewerOptionsTextureItem
+      :id="id"
+      :texture_name="internal_textures[index].texture_name"
+      :texture_file_name="internal_textures[index].texture_file_name"
+      @update_value="update_value_event($event, index)"
+    />
+  </v-row>
+  <v-row>
+    <v-spacer />
+    <v-col cols="3">
+      <v-icon
+        v-if="internal_textures.length < 4"
+        icon="mdi-plus"
+        v-tooltip:bottom="'Add a texture'"
+        size="20"
+        @click="
+          internal_textures.push({ texture_name: '', texture_file_name: '' })
+        "
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+  const textures = defineModel()
+
+  const internal_textures = ref([])
+
+  const props = defineProps({
+    id: { type: String, required: true },
+  })
+
+  onMounted(() => {
+    if (textures.value != null) {
+      internal_textures.value = textures.value
+    } else {
+      internal_textures.value = [{ texture_name: "", texture_file_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.texture_file_name != ""
+    })
+    if (filtered.length != 0) {
+      textures.value = filtered
+    }
+  }
+</script>

package/components/Options/VertexAttributeSelector.vue

@@ -0,0 +1,60 @@
+<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"
+
+  const model = defineModel()
+
+  const vertex_attribute_name = ref("")
+
+  onMounted(() => {
+    if (model.value != null) {
+      vertex_attribute_name.value = model.value.name
+    }
+  })
+  const vertex_attribute = reactive({ name: vertex_attribute_name.value })
+
+  watch(vertex_attribute_name, (value) => {
+    vertex_attribute.name = value
+    model.value = vertex_attribute
+  })
+
+  const props = defineProps({
+    id: { type: String, required: true },
+  })
+
+  const dataBaseStore = useDataBaseStore()
+
+  const vertex_attribute_names = ref([])
+  const meta_data = computed(() => {
+    return dataBaseStore.itemMetaDatas(props.id)
+  })
+
+  onMounted(() => {
+    getVertexAttributes()
+  })
+
+  function getVertexAttributes() {
+    api_fetch(
+      {
+        schema: back_schemas.opengeodeweb_back.vertex_attribute_names,
+        params: {
+          input_geode_object: meta_data.value.geode_object,
+          filename: meta_data.value.native_filename,
+        },
+      },
+      {
+        response_function: (response) => {
+          vertex_attribute_names.value = response._data.vertex_attribute_names
+        },
+      },
+    )
+  }
+</script>

package/components/Options/VisibilitySwitch.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-row class="pa-0" align="center">
+    <v-col cols="auto" justify="center">
+      <v-icon size="30" icon="mdi-eye" v-tooltip:left="'Visibility'" />
+    </v-col>
+    <v-col cols="auto" justify="center">
+      <v-switch v-model="visibility" inset hide-details />
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+  const visibility = defineModel()
+</script>

package/components/PointSet/PointsOptions.vue

@@ -0,0 +1,14 @@
+<template>
+  <ViewerPointSetSpecificPointsOptions
+    :itemProps="props.itemProps"
+    :btn_image="PointSetPoints"
+  />
+</template>
+
+<script setup>
+  import PointSetPoints from "@ogw_f/assets/viewer_svgs/point_set_points.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/components/PointSet/SpecificPointsOptions.vue

@@ -0,0 +1,74 @@
+<template>
+  <ContextMenuItem
+    :itemProps="props.itemProps"
+    tooltip="Points options"
+    :btn_image="props.btn_image"
+  >
+    <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>
+  </ContextMenuItem>
+</template>
+
+<script setup>
+  const dataStyleStore = useDataStyleStore()
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+    btn_image: { type: String, required: true },
+  })
+
+  const id = toRef(() => props.itemProps.id)
+
+  const visibility = computed({
+    get: () => dataStyleStore.pointsVisibility(id.value),
+    set: (newValue) => dataStyleStore.setPointsVisibility(id.value, newValue),
+  })
+  const size = computed({
+    get: () => dataStyleStore.pointsSize(id.value),
+    set: (newValue) => dataStyleStore.setPointsSize(id.value, newValue),
+  })
+  const coloring_style_key = computed({
+    get: () => dataStyleStore.pointsActiveColoring(id.value),
+    set: (newValue) =>
+      dataStyleStore.setPointsActiveColoring(id.value, newValue),
+  })
+  const color = computed({
+    get: () => dataStyleStore.pointsColor(id.value),
+    set: (newValue) => dataStyleStore.setPointsColor(id.value, newValue),
+  })
+  const vertex_attribute = computed({
+    get: () => dataStyleStore.pointsVertexAttribute(id.value),
+    set: (newValue) =>
+      dataStyleStore.setPointsVertexAttribute(id.value, newValue),
+  })
+</script>

package/components/PolygonalSurface/EdgesOptions.vue

@@ -0,0 +1,14 @@
+<template>
+  <ViewerGenericMeshEdgesOptions
+    :itemProps="props.itemProps"
+    :btn_image="PolygonalSurfaceEdges"
+  />
+</template>
+
+<script setup>
+  import PolygonalSurfaceEdges from "@ogw_f/assets/viewer_svgs/surface_edges.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/components/PolygonalSurface/PointsOptions.vue

@@ -0,0 +1,14 @@
+<template>
+  <ViewerGenericMeshPointsOptions
+    :itemProps="props.itemProps"
+    :btn_image="PolygonalSurfacePoints"
+  />
+</template>
+
+<script setup>
+  import PolygonalSurfacePoints from "@ogw_f/assets/viewer_svgs/surface_points.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/components/PolygonalSurface/PolygonsOptions.vue

@@ -0,0 +1,14 @@
+<template>
+  <ViewerGenericMeshPolygonsOptions
+    :itemProps="props.itemProps"
+    :btn_image="PolygonalSurfacePolygons"
+  />
+</template>
+
+<script setup>
+  import PolygonalSurfacePolygons from "@ogw_f/assets/viewer_svgs/surface_triangles.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/components/Solid/EdgesOptions.vue

@@ -0,0 +1,14 @@
+<template>
+  <ViewerGenericMeshEdgesOptions
+    :itemProps="props.itemProps"
+    :btn_image="SolidEdges"
+  />
+</template>
+
+<script setup>
+  import SolidEdges from "@ogw_f/assets/viewer_svgs/solid_edges.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>