@geode/opengeodeweb-front 10.19.0 → 10.20.0-rc.1

package/app/components/Viewer/ContextMenu/InfoCard.vue

@@ -0,0 +1,184 @@
+<script setup>
+import GlassCard from "@ogw_front/components/GlassCard";
+import { middleTruncate } from "@ogw_front/utils/string";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useMenuStore } from "@ogw_front/stores/menu";
+
+const { show, metaData } = defineProps({
+  show: { type: Boolean, required: true },
+  metaData: { type: Object, required: true },
+});
+
+const emit = defineEmits(["update:show"]);
+
+const COPIED_TIMEOUT = 1500;
+const MAX_SHORT_ID_LENGTH = 15;
+const ID_SLICE_START = 8;
+const ID_SLICE_END_OFFSET = 7;
+const TRUNCATE_MAX_LENGTH = 22;
+const TRUNCATE_START_CHARS = 12;
+const TRUNCATE_END_CHARS = 7;
+
+const menuStore = useMenuStore();
+const dataStore = useDataStore();
+
+const componentName = ref("");
+
+watch(
+  () => menuStore.current_meta_data,
+  async (newMeta) => {
+    componentName.value = "";
+    if (!newMeta) {
+      return;
+    }
+
+    if (newMeta.viewer_type === "model_component" && newMeta.modelId && newMeta.pickedComponentId) {
+      try {
+        const comp = await dataStore.getComponentByViewerId(
+          newMeta.modelId,
+          newMeta.pickedComponentId,
+        );
+        if (comp && comp.name) {
+          componentName.value = comp.name;
+        } else {
+          componentName.value = newMeta.pickedComponentId;
+        }
+      } catch {
+        componentName.value = newMeta.pickedComponentId;
+      }
+    }
+  },
+  { immediate: true },
+);
+
+const cleanName = computed(() => {
+  const meta = menuStore.current_meta_data;
+  if (!meta) {
+    return "Unnamed Object";
+  }
+  if (componentName.value) {
+    return componentName.value;
+  }
+  return meta.name || "Unnamed Object";
+});
+
+const displayTitle = computed(() => {
+  const name = cleanName.value;
+  if (!name) {
+    return "";
+  }
+  return middleTruncate(name, TRUNCATE_MAX_LENGTH, TRUNCATE_START_CHARS, TRUNCATE_END_CHARS);
+});
+
+const copied = ref(false);
+async function copyId(targetId) {
+  if (!targetId) {
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(targetId);
+    copied.value = true;
+    setTimeout(() => {
+      copied.value = false;
+    }, COPIED_TIMEOUT);
+  } catch (error) {
+    console.error("Failed to copy ID:", error);
+  }
+}
+
+const formattedId = computed(() => {
+  const metaId = metaData?.id;
+  if (!metaId) {
+    return "";
+  }
+  if (metaId.length <= MAX_SHORT_ID_LENGTH) {
+    return metaId;
+  }
+  return `${metaId.slice(0, ID_SLICE_START)}...${metaId.slice(metaId.length - ID_SLICE_END_OFFSET)}`;
+});
+</script>
+
+<template>
+  <v-fade-transition>
+    <v-sheet v-if="show" class="object-name-popover bg-transparent" @mousedown.stop @click.stop>
+      <GlassCard
+        variant="panel"
+        padding="pa-2 px-3"
+        rounded="lg"
+        class="elevation-12 text-center border-thin"
+        min-width="140"
+        max-width="250"
+      >
+        <v-row no-gutters class="flex-column align-center">
+          <v-col
+            class="text-subtitle-2 font-weight-bold text-truncate text-white w-100 pa-0"
+            cols="auto"
+            style="line-height: 1.3"
+          >
+            {{ displayTitle }}
+          </v-col>
+          <v-col
+            class="text-caption font-weight-black text-uppercase text-secondary pa-0"
+            style="font-size: 0.68rem; line-height: 1.2"
+          >
+            {{ metaData.geode_object_type }}
+          </v-col>
+          <v-col
+            v-if="metaData.id"
+            class="id-badge-container mt-1 d-inline-flex align-center px-2 py-0.5"
+            @click.stop="copyId(metaData.id)"
+          >
+            <span class="id-text">
+              {{ copied ? "COPIED!" : formattedId }}
+            </span>
+            <v-icon
+              :icon="copied ? 'mdi-check' : 'mdi-content-copy'"
+              size="10"
+              :color="copied ? 'success' : 'white'"
+              class="ml-1"
+            />
+          </v-col>
+        </v-row>
+      </GlassCard>
+    </v-sheet>
+  </v-fade-transition>
+</template>
+
+<style scoped>
+.id-badge-container {
+  font-family: monospace;
+  font-size: 0.6rem;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s ease;
+  opacity: 0.8;
+}
+
+.id-badge-container:hover {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.35);
+  opacity: 1;
+  transform: scale(1.03);
+}
+
+.id-badge-container:active {
+  transform: scale(0.97);
+}
+
+.id-text {
+  letter-spacing: 0.5px;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.object-name-popover {
+  position: absolute;
+  bottom: 110px; /* Positions it beautifully above the circular menu */
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  pointer-events: auto;
+}
+</style>

package/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -1,6 +1,6 @@
 <script setup>
 import EdgedCurveEdges from "@ogw_front/assets/viewer_svgs/edged_curve_edges.svg";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width";

package/app/components/Viewer/Generic/Mesh/CellsOptions.vue

@@ -1,5 +1,5 @@
 <script setup>
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 

package/app/components/Viewer/Generic/Mesh/EdgesOptions.vue

@@ -1,5 +1,5 @@
 <script setup>
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width";

package/app/components/Viewer/Generic/Mesh/PointsOptions.vue

@@ -1,5 +1,5 @@
 <script setup>
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";

package/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue

@@ -1,5 +1,5 @@
 <script setup>
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 

package/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue

@@ -1,5 +1,5 @@
 <script setup>
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 

package/app/components/Viewer/Generic/Model/EdgesOptions.vue

@@ -1,6 +1,6 @@
 <script setup>
 import SurfaceEdges from "@ogw_front/assets/viewer_svgs/surface_edges.svg";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
 import { useDataStyleStore } from "@ogw_front/stores/data_style";

package/app/components/Viewer/Generic/Model/ModelStyleOptions.vue

@@ -1,7 +1,7 @@
 <script setup>
 import ModelColor from "@ogw_front/assets/viewer_svgs/model_component_color.svg";
 import ModelStyleCard from "./ModelStyleCard.vue";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 
 const { itemProps } = defineProps({
   itemProps: { type: Object, required: true },

package/app/components/Viewer/Generic/Model/PointsOptions.vue

@@ -1,6 +1,6 @@
 <script setup>
 import SurfacePoints from "@ogw_front/assets/viewer_svgs/surface_points.svg";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 

package/app/components/Viewer/OverlappingObjectsPicker.vue

@@ -0,0 +1,96 @@
+<script setup>
+import GlassCard from "@ogw_front/components/GlassCard";
+import { formatListId } from "@ogw_front/utils/name_cleaner";
+import { geode_objects } from "@ogw_front/assets/geode_objects";
+
+const { displayIntermediate, intermediateItems, menuStyle } = defineProps({
+  displayIntermediate: { type: Boolean, required: true },
+  intermediateItems: { type: Array, required: true },
+  menuStyle: { type: Object, required: true },
+});
+
+const emit = defineEmits(["select", "update:displayIntermediate"]);
+
+function selectItem(item) {
+  emit("select", item);
+}
+
+function handleUpdate(val) {
+  emit("update:displayIntermediate", val);
+}
+</script>
+
+<template>
+  <v-menu
+    :model-value="displayIntermediate"
+    :close-on-content-click="true"
+    :style="menuStyle"
+    :overlay="false"
+    @update:model-value="handleUpdate"
+  >
+    <GlassCard
+      variant="panel"
+      padding="pa-0"
+      rounded="lg"
+      class="elevation-12"
+      min-width="260"
+      max-width="340"
+    >
+      <v-card-title
+        class="d-flex align-center py-2 px-3 text-caption text-uppercase font-weight-black text-medium-emphasis"
+      >
+        <v-icon icon="mdi-layers-triple" size="small" class="mr-2" color="secondary" />
+        Overlapping objects
+      </v-card-title>
+
+      <v-divider />
+
+      <v-list class="py-1 bg-transparent" density="compact">
+        <v-list-item
+          v-for="item in intermediateItems"
+          :key="`${item.id}-${item.viewer_id}`"
+          class="intermediate-picker-item px-3 py-2"
+          @click="selectItem(item)"
+        >
+          <template #prepend>
+            <v-img
+              v-if="geode_objects[item.geode_object_type]?.image"
+              :src="geode_objects[item.geode_object_type].image"
+              height="24"
+              width="24"
+              max-width="24"
+              class="mr-3"
+              style="object-fit: contain; filter: brightness(0) invert(1)"
+            />
+            <v-icon v-else icon="mdi-cube-outline" size="24" color="white" class="mr-3" />
+          </template>
+
+          <v-list-item-title class="font-weight-bold text-body-2 text-truncate text-white">
+            {{ item.name }}
+          </v-list-item-title>
+          <v-list-item-subtitle
+            class="text-caption text-truncate text-medium-emphasis mt-0.5 d-flex align-center"
+          >
+            <span class="font-weight-medium mr-1">{{ item.geode_object_type }}</span>
+            <span style="font-family: monospace; opacity: 0.65; font-size: 0.72rem"
+              >&middot; {{ formatListId(item.id) }}</span
+            >
+          </v-list-item-subtitle>
+        </v-list-item>
+      </v-list>
+    </GlassCard>
+  </v-menu>
+</template>
+
+<style scoped>
+.intermediate-picker-item {
+  transition: all 0.2s ease;
+  border-radius: 8px !important;
+  margin: 2px 6px;
+}
+
+.intermediate-picker-item:hover {
+  background: rgba(var(--v-theme-secondary), 0.1) !important;
+  transform: translateX(4px);
+}
+</style>

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

@@ -1,6 +1,6 @@
 <script setup>
 import PointSetPoints from "@ogw_front/assets/viewer_svgs/point_set_points.svg";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 

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

@@ -1,6 +1,6 @@
 <script setup>
 import SolidPolyhedra from "@ogw_front/assets/viewer_svgs/solid_polyhedra.svg";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 

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

@@ -1,6 +1,6 @@
 <script setup>
 import PolygonalSurfacePolygons from "@ogw_front/assets/viewer_svgs/surface_triangles.svg";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 

package/app/components/Viewer/Ui.vue

@@ -1,11 +1,11 @@
 <script setup>
-import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu";
+import OverlappingObjectsPicker from "@ogw_front/components/Viewer/OverlappingObjectsPicker";
+import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu/ContextMenu";
 import ViewerObjectTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout";
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { getCurrentInstance } from "vue";
 import { useMenuStore } from "@ogw_front/stores/menu";
+import { useOverlappingPicker } from "@ogw_front/composables/use_overlapping_picker";
 import { useViewerStore } from "@ogw_front/stores/viewer";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const { displayMenu, containerWidth, containerHeight } = defineProps({
   displayMenu: { type: Boolean, required: true },
@@ -14,29 +14,35 @@ const { displayMenu, containerWidth, containerHeight } = defineProps({
 });
 
 const emit = defineEmits(["show-menu"]);
-const dataStore = useDataStore();
-const dataStyleStore = useDataStyleStore();
-const viewerStore = useViewerStore();
 const menuStore = useMenuStore();
-const dataItems = dataStore.refAllItems();
+const viewerStore = useViewerStore();
+
+const {
+  displayIntermediate,
+  intermediateItems,
+  getIntermediateMenuStyle,
+  selectIntermediateItem,
+  handleIntermediateMenuUpdate,
+  get_viewer_id: trigger_picker,
+} = useOverlappingPicker();
 
-async function get_viewer_id(x, y) {
-  const activeIds = new Set(dataItems.value.map((item) => item.id));
-  const ids = Object.keys(dataStyleStore.styles).filter((styleId) => activeIds.has(styleId));
+function get_viewer_id(x, y) {
+  const instance = getCurrentInstance();
+  const containerRect = instance?.proxy?.$el
+    ?.closest?.('[data-testid="hybridViewer"]')
+    ?.getBoundingClientRect() ||
+    document.querySelector('[data-testid="hybridViewer"]')?.getBoundingClientRect() || {
+      left: 0,
+      top: 0,
+    };
 
-  let result = { id: undefined, viewer_id: undefined };
-  await viewerStore.request(
-    viewer_schemas.opengeodeweb_viewer.viewer.picked_ids,
-    { x, y, ids },
-    {
-      response_function: (response) => {
-        const { array_ids, viewer_id } = response;
-        const [first_id] = array_ids;
-        result = { id: first_id, viewer_id };
-      },
-    },
-  );
-  return result;
+  return trigger_picker({
+    x,
+    y,
+    containerWidth,
+    containerHeight,
+    containerRect,
+  });
 }
 
 defineExpose({ get_viewer_id });
@@ -56,6 +62,14 @@ defineExpose({ get_viewer_id });
     :container-height="containerHeight"
   />
 
+  <OverlappingObjectsPicker
+    :display-intermediate="displayIntermediate"
+    :intermediate-items="intermediateItems"
+    :menu-style="getIntermediateMenuStyle()"
+    @select="selectIntermediateItem"
+    @update:display-intermediate="handleIntermediateMenuUpdate"
+  />
+
   <v-fade-transition>
     <div
       v-if="viewerStore.picking_mode"

package/app/composables/project_manager.js

@@ -29,7 +29,7 @@ async function exportProject() {
   return { result };
 }
 
-async function importProject(project) {
+async function importProject(file) {
   const geodeStore = useGeodeStore();
   const dataStyleStore = useDataStyleStore();
   const viewerStore = useViewerStore();
@@ -56,11 +56,11 @@ async function importProject(project) {
 
   const schemaImport = back_schemas.opengeodeweb_back.import_project;
   const form = new FormData();
-  const originalFileName = project && project.name ? project.name : "project.vease";
+  const originalFileName = file && file.name ? file.name : "project.vease";
   if (!originalFileName.toLowerCase().endsWith(".vease")) {
     throw new Error("Uploaded file must be a .vease");
   }
-  form.append("file", project, originalFileName);
+  form.append("file", file, originalFileName);
 
   const result = await $fetch(schemaImport.$id, {
     baseURL: geodeStore.base_url,

package/app/composables/use_adaptive_styles.js

@@ -15,9 +15,54 @@ const MIN_BOOST = 1;
 const MAX_BOOST = 1.2;
 const ADAPTIVE_REFRESH_RATE = 150;
 
-export function useAdaptiveStyles(targetRef) {
+function getValue(val) {
+  if (typeof val === "object" && val !== null && val.value !== undefined) {
+    return val.value;
+  }
+  return val ?? 0;
+}
+
+export function useAdaptiveStyles(target, options = {}) {
   const hybridViewerStore = useHybridViewerStore();
-  const { x, y, width, height } = useElementBounding(targetRef);
+
+  const isCoordinates =
+    target &&
+    (typeof target === "function" ||
+      (target.value !== undefined && target.value !== null && target.value.x !== undefined) ||
+      (target.x !== undefined && target.value === undefined));
+
+  const bounding = useElementBounding(isCoordinates ? undefined : target);
+
+  const unwrapped = computed(() => {
+    if (isCoordinates) {
+      let val = undefined;
+      if (typeof target === "function") {
+        val = target();
+      } else if (target.value === undefined) {
+        val = target;
+      } else {
+        val = target.value;
+      }
+      return {
+        x: getValue(val?.x),
+        y: getValue(val?.y),
+        width: getValue(val?.width),
+        height: getValue(val?.height),
+      };
+    }
+    return {
+      x: bounding.x.value,
+      y: bounding.y.value,
+      width: bounding.width.value,
+      height: bounding.height.value,
+    };
+  });
+
+  const x = computed(() => unwrapped.value.x);
+  const y = computed(() => unwrapped.value.y);
+  const width = computed(() => unwrapped.value.width);
+  const height = computed(() => unwrapped.value.height);
+
   const brightness = ref(LUMINANCE_THRESHOLD);
 
   const updateBrightness = useThrottleFn(() => {
@@ -38,7 +83,9 @@ export function useAdaptiveStyles(targetRef) {
     const darkFactor = (1 - normalized) ** ADAPTIVE_EXPONENT;
 
     const blur = MIN_BLUR + darkFactor * (MAX_BLUR - MIN_BLUR);
-    const opacity = MIN_OPACITY + darkFactor * (MAX_OPACITY - MIN_OPACITY);
+    const minOpacity = options.minOpacity ?? MIN_OPACITY;
+    const maxOpacity = options.maxOpacity ?? MAX_OPACITY;
+    const opacity = minOpacity + darkFactor * (maxOpacity - minOpacity);
     const brightnessBoost = MIN_BOOST + darkFactor * (MAX_BOOST - MIN_BOOST);
 
     return {