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

package/components/Solid/PointsOptions.vue

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

package/components/Solid/PolygonsOptions.vue

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

package/components/Solid/PolyhedraOptions.vue

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

package/components/TetrahedralSolid/TetrahedraOptions.vue

@@ -0,0 +1,15 @@
+<template>
+  <ViewerGenericMeshPolyhedraOptions
+    :itemProps="props.itemProps"
+    :btn_image="TetrahedralSolidTetrahedra"
+    tooltip="Tetrahedra options"
+  />
+</template>
+
+<script setup>
+  import TetrahedralSolidTetrahedra from "@ogw_f/assets/viewer_svgs/solid_polyhedra.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/components/TetrahedralSolid/TrianglesOptions.vue

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

package/components/TriangulatedSurface/EdgesOptions.vue

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

package/components/TriangulatedSurface/PointsOptions.vue

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

package/components/TriangulatedSurface/TrianglesOptions.vue

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

package/components/VeaseViewToolbar.vue

@@ -0,0 +1,107 @@
+<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-col>
+        <v-btn
+          density="comfortable"
+          icon
+          @click.stop="camera_option.action"
+          v-tooltip:left="camera_option.tooltip"
+        >
+          <v-icon :icon="camera_option.icon" size="32" />
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+  <Screenshot :show_dialog="take_screenshot" @close="take_screenshot = false" />
+  <ZScaling
+    v-if="showZScaling"
+    v-model="zScale"
+    :width="400"
+    @close="handleZScalingClose"
+  />
+</template>
+
+<script setup>
+  import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+  const hybridViewerStore = useHybridViewerStore()
+  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
+    },
+  )
+
+  const handleZScalingClose = async () => {
+    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()[0]
+        renderer.resetCamera()
+        renderWindow.render()
+        hybridViewerStore.syncRemoteCamera()
+      },
+    },
+    {
+      tooltip: "Take a screenshot",
+      icon: "mdi-camera",
+      action: () => {
+        take_screenshot.value = !take_screenshot.value
+      },
+    },
+    {
+      tooltip: "Toggle grid scale",
+      icon: "mdi-ruler-square",
+      action: () => {
+        viewer_call(
+          {
+            schema: schemas.opengeodeweb_viewer.viewer.grid_scale,
+            params: {
+              visibility: !grid_scale.value,
+            },
+          },
+          {
+            response_function: () => {
+              grid_scale.value = !grid_scale.value
+            },
+          },
+        )
+      },
+    },
+    {
+      tooltip: "Z Scaling Control",
+      icon: "mdi-sort",
+      action: () => {
+        showZScaling.value = !showZScaling.value
+      },
+    },
+  ]
+</script>
+
+<style module>
+  .floatToolbar {
+    position: absolute;
+    z-index: 2;
+    right: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0);
+  }
+</style>

package/components/Viewer/BreadCrumb.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-breadcrumbs class="mb-n10 breadcrumb-container">
+    <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-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"
+            }}
+          </v-icon>
+          <span class="text-subtitle-1 font-weight-regular align-center mt-1">
+            Model Explorer ({{ metaDatas.displayed_name }})
+          </span>
+        </template>
+      </v-menu>
+
+      <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>
+      </div>
+    </div>
+  </v-breadcrumbs>
+</template>
+
+<script setup>
+  const treeviewStore = use_treeview_store()
+
+  const selectedTree = computed(() => treeviewStore.selectedTree)
+
+  const goBackToFileTree = () => {
+    treeviewStore.displayFileTree()
+  }
+
+  const model_id = computed(() => treeviewStore.model_id)
+
+  const metaDatas = computed(() =>
+    useDataBaseStore().itemMetaDatas(model_id.value),
+  )
+</script>
+
+<style scoped>
+  .breadcrumb-container {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+</style>

package/components/Viewer/Tree/ObjectTree.vue

@@ -0,0 +1,170 @@
+<template>
+  <v-container
+    class="treeview-container"
+    :style="{ width: `${treeviewStore.panelWidth}px` }"
+  >
+    <v-row
+      class="resizable-panel"
+      :style="{ width: `${treeviewStore.panelWidth}px` }"
+    >
+      <div class="scrollable-wrapper">
+        <v-sheet
+          style="max-height: calc(90vh)"
+          class="transparent-treeview scrollbar-hover"
+        >
+          <v-row v-if="treeviewStore.items.length > 0">
+            <v-col>
+              <ViewerBreadCrumb
+                :selectedTree="selectedTree"
+                :treeOptions="treeOptions"
+                @update:selectedTree="selectedTree = $event"
+              />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <ViewerTreeObject
+                v-if="!treeviewStore.isAdditionnalTreeDisplayed"
+                @show-menu="handleTreeMenu"
+              />
+              <ViewerTreeComponent
+                v-else
+                @show-menu="handleTreeMenu"
+                :id="treeviewStore.model_id"
+              />
+            </v-col>
+          </v-row>
+        </v-sheet>
+      </div>
+      <div class="resizer" @mousedown="onResizeStart"></div>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+  const treeviewStore = use_treeview_store()
+  const menuStore = useMenuStore()
+  const cardContainer = useTemplateRef("cardContainer")
+  const containerWidth = ref(window.innerWidth)
+  const containerHeight = ref(window.innerHeight)
+
+  const menuX = ref(0)
+  const menuY = ref(0)
+  const id = ref(null)
+
+  const emit = defineEmits(["show-menu", "position-menu"])
+
+  function handleTreeMenu({ event, itemId }) {
+    menuX.value = event.clientX
+    menuY.value = event.clientY
+    id.value = itemId
+
+    menuStore.openMenu(itemId, event.clientX, event.clientY)
+  }
+
+  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(() => {
+    containerWidth.value = window.innerWidth
+    containerHeight.value = window.innerHeight
+
+    window.addEventListener("resize", () => {
+      containerWidth.value = window.innerWidth
+      containerHeight.value = window.innerHeight
+    })
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener("resize")
+  })
+</script>
+
+<style scoped>
+  .treeview-container {
+    position: absolute;
+    z-index: 2;
+    left: 0;
+    top: 0;
+    background-color: transparent;
+    border-radius: 16px;
+    padding: 8px;
+    display: flex;
+    box-sizing: border-box;
+  }
+
+  .resizable-panel {
+    display: flex;
+    height: 100%;
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  .scrollable-wrapper {
+    overflow-y: auto;
+    padding-right: 6px;
+    flex: 1;
+  }
+
+  .resizer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 6px;
+    height: 100%;
+    cursor: ew-resize;
+    background-color: transparent;
+    z-index: 15;
+  }
+
+  .resizer:hover {
+    background-color: #999;
+  }
+
+  .resizer:active {
+    background-color: #666;
+  }
+
+  .transparent-treeview {
+    background-color: transparent;
+    margin: 4px 0;
+  }
+
+  .scrollbar-hover {
+    overflow-x: hidden;
+  }
+
+  .scrollbar-hover::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  .scrollbar-hover::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  .scrollbar-hover:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+  }
+</style>

package/components/Viewer/TreeComponent.vue

@@ -0,0 +1,93 @@
+<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">{{ item.title }}</span>
+    </template>
+  </v-treeview>
+</template>
+
+<script setup>
+  const dataStyleStore = useDataStyleStore()
+  const dataBaseStore = useDataBaseStore()
+
+  const props = defineProps({ id: { type: String, required: true } })
+
+  const items = dataBaseStore.formatedMeshComponents(props.id)
+  const mesh_components_selection = ref(
+    dataStyleStore.visibleMeshComponents(props.id),
+  )
+
+  watch(
+    mesh_components_selection,
+    (current, previous) => {
+      if (!previous) previous = []
+      else {
+        const { added, removed } = compareSelections(current, previous)
+
+        const [added_corners, added_lines, added_surfaces, added_blocks] =
+          sortMeshComponents(added)
+        const [
+          removed_corners,
+          removed_lines,
+          removed_surfaces,
+          removed_blocks,
+        ] = sortMeshComponents(removed)
+        if (added_corners.length > 0)
+          dataStyleStore.setCornerVisibility(props.id, added_corners, true)
+        if (added_lines.length > 0)
+          dataStyleStore.setLineVisibility(props.id, added_lines, true)
+        if (added_surfaces.length > 0)
+          dataStyleStore.setSurfaceVisibility(props.id, added_surfaces, true)
+        if (added_blocks.length > 0)
+          dataStyleStore.setBlockVisibility(props.id, added_blocks, true)
+
+        if (removed_corners.length > 0)
+          dataStyleStore.setCornerVisibility(props.id, removed_corners, false)
+        if (removed_lines.length > 0)
+          dataStyleStore.setLineVisibility(props.id, removed_lines, false)
+        if (removed_surfaces.length > 0)
+          dataStyleStore.setSurfaceVisibility(props.id, removed_surfaces, false)
+        if (removed_blocks.length > 0)
+          dataStyleStore.setBlockVisibility(props.id, removed_blocks, false)
+      }
+    },
+    { immediate: true, deep: true },
+  )
+
+  function sortMeshComponents(items) {
+    var corner_ids = [],
+      line_ids = [],
+      surface_ids = [],
+      block_ids = []
+    for (const item of items) {
+      const item_type = dataBaseStore.meshComponentType(props.id, item)
+      if (item_type === "corner") corner_ids.push(item)
+      else if (item_type === "line") line_ids.push(item)
+      else if (item_type === "surface") surface_ids.push(item)
+      else if (item_type === "block") block_ids.push(item)
+    }
+    return [corner_ids, line_ids, surface_ids, block_ids]
+  }
+</script>
+
+<style scoped>
+  .treeview-item {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    display: inline-block;
+  }
+
+  .transparent-treeview {
+    background-color: transparent;
+    margin: 4px 0;
+  }
+</style>

package/components/Viewer/TreeObject.vue

@@ -0,0 +1,100 @@
+<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"
+        @click.right.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>
+  const treeviewStore = use_treeview_store()
+  const dataStyleStore = useDataStyleStore()
+  const dataBaseStore = useDataBaseStore()
+  const emit = defineEmits(["show-menu"])
+
+  function isLeafNode(item) {
+    return !item.children || item.children.length === 0
+  }
+
+  watch(
+    () => treeviewStore.selection,
+    (current, previous) => {
+      if (!previous) previous = []
+      const { added, removed } = compareSelections(current, previous)
+
+      added.forEach((item) => {
+        dataStyleStore.setVisibility(item.id, true)
+      })
+
+      removed.forEach((item) => {
+        dataStyleStore.setVisibility(item.id, false)
+
+        const objectMeta = dataBaseStore.itemMetaDatas(item.id)
+        if (objectMeta.object_type === "mesh") {
+          if (dataBaseStore.db[item.id]?.mesh_components_selection) {
+            dataBaseStore.db[item.id].mesh_components_selection = []
+          }
+          if (dataStyleStore.visibleMeshComponentIds?.[item.id]) {
+            dataStyleStore.updateVisibleMeshComponents(item.id, [])
+          }
+        }
+      })
+    },
+    { immediate: true },
+  )
+
+  function isModel(item) {
+    return item.object_type === "model"
+  }
+
+  onMounted(() => {
+    const savedSelection = treeviewStore.selection
+    if (savedSelection && savedSelection.length > 0) {
+      treeviewStore.selection = savedSelection
+    }
+  })
+</script>
+
+<style scoped>
+  .transparent-treeview {
+    background-color: transparent;
+    margin: 4px 0;
+  }
+
+  .treeview-item {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    display: inline-block;
+  }
+</style>

package/internal_stores/data_style_state.js

@@ -0,0 +1,18 @@
+import { reactive, computed } from "vue"
+
+export default function useDataStyleState() {
+  const styles = reactive({})
+
+  const objectVisibility = computed(() => (id) => styles[id]?.visibility)
+  const selectedObjects = computed(() => {
+    const selection = []
+    for (const [id, value] of Object.entries(styles)) {
+      if (value.visibility === true) {
+        selection.push(id)
+      }
+    }
+    return selection
+  })
+
+  return { styles, objectVisibility, selectedObjects }
+}