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

package/app/components/ViewToolbar.vue

@@ -135,7 +135,7 @@ const camera_options = computed(() => [
 </script>
 
 <template>
-  <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
+  <v-container :class="[$style.floatToolbar, 'pa-0', 'view-toolbar']" width="auto">
     <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
       <v-col>
         <v-menu v-if="camera_option.menu" location="start" :close-on-content-click="false">

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

@@ -0,0 +1,119 @@
+<script setup>
+import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
+import { useMenuStore } from "@ogw_front/stores/menu";
+
+const { isOverTreeview, isOverToolbar } = defineProps({
+  isOverTreeview: { type: Boolean, required: true },
+  isOverToolbar: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["drag", "click"]);
+
+const ADAPTIVE_BLUR_VAL = "15px";
+const ADAPTIVE_OPACITY_VAL = 0.85;
+const ADAPTIVE_BRIGHTNESS_VAL = 1.15;
+const dragThreshold = 3;
+
+const menuStore = useMenuStore();
+
+const centerButtonCoords = computed(() => {
+  const size = 52;
+  return {
+    x: menuStore.containerLeft + menuStore.menuX - size / 2,
+    y: menuStore.containerTop + menuStore.menuY - size / 2,
+    width: size,
+    height: size,
+  };
+});
+
+const { adaptiveStyles } = useAdaptiveStyles(centerButtonCoords, {
+  minOpacity: 0.35,
+  maxOpacity: 1,
+});
+
+const computedItemStyles = computed(() => {
+  if (isOverTreeview || isOverToolbar) {
+    return {
+      "--adaptive-blur": ADAPTIVE_BLUR_VAL,
+      "--adaptive-opacity": ADAPTIVE_OPACITY_VAL,
+      "--adaptive-brightness": ADAPTIVE_BRIGHTNESS_VAL,
+    };
+  }
+  return adaptiveStyles.value;
+});
+
+let dragMoved = false;
+let dragStartClientX = 0;
+let dragStartClientY = 0;
+
+function onMouseDown(event) {
+  dragMoved = false;
+  dragStartClientX = event.clientX;
+  dragStartClientY = event.clientY;
+  emit("drag", event);
+}
+
+function onMouseUp(event) {
+  const deltaX = event.clientX - dragStartClientX;
+  const deltaY = event.clientY - dragStartClientY;
+  if (Math.hypot(deltaX, deltaY) > dragThreshold) {
+    dragMoved = true;
+  }
+}
+
+function onCenterClick(event) {
+  event.stopPropagation();
+  if (!dragMoved) {
+    emit("click", event);
+  }
+}
+</script>
+
+<template>
+  <v-btn
+    icon
+    variant="outlined"
+    class="central-selector-btn elevation-6"
+    style="width: 52px; height: 52px; z-index: 5"
+    :style="computedItemStyles"
+    @mousedown="onMouseDown"
+    @mouseup="onMouseUp"
+    @click.stop="onCenterClick"
+  >
+    <v-icon icon="mdi-information-outline" size="28" color="primary" style="pointer-events: none" />
+  </v-btn>
+</template>
+
+<style scoped>
+.central-selector-btn {
+  background: transparent !important;
+  border: 2px solid rgba(var(--v-theme-primary), 0.35) !important;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.2s ease;
+}
+
+.central-selector-btn::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, var(--adaptive-opacity));
+  backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  -webkit-backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  z-index: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  transition:
+    background-color 0.2s ease,
+    backdrop-filter 0.2s ease;
+}
+
+.central-selector-btn:hover {
+  transform: scale(1.08);
+  border-color: rgba(var(--v-theme-primary), 0.85) !important;
+}
+
+.central-selector-btn:hover::before {
+  background: rgba(255, 255, 255, calc(var(--adaptive-opacity, 0.15) + 0.15));
+}
+</style>

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

@@ -0,0 +1,86 @@
+<script setup>
+import { useMenuStore } from "@ogw_front/stores/menu";
+
+const { menuItems, id, metaData, menuItemCount } = defineProps({
+  menuItems: { type: Array, required: true },
+  id: { type: String, required: true },
+  metaData: { type: Object, required: true },
+  menuItemCount: { type: Number, required: true },
+});
+
+const RADIUS = 80;
+const Z_INDEX_ACTIVE_ITEM = 10;
+const Z_INDEX_BASE_ITEM = 1;
+const FULL_ANGLE = 360;
+const ANGLE_45 = 45;
+const ANGLE_135 = 135;
+const ANGLE_225 = 225;
+const ANGLE_315 = 315;
+
+const menuStore = useMenuStore();
+
+function getItemStyle(index) {
+  const angle = (index / menuItemCount) * 2 * Math.PI;
+  return {
+    transform: `translate(${Math.cos(angle) * RADIUS}px, ${Math.sin(angle) * RADIUS}px)`,
+    transition: "opacity 0.2s ease, transform 0.2s ease",
+    position: "absolute",
+    zIndex: menuStore.active_item_index === index ? Z_INDEX_ACTIVE_ITEM : Z_INDEX_BASE_ITEM,
+  };
+}
+
+function getTooltipLocation(index) {
+  const angle = (index / menuItemCount) * FULL_ANGLE;
+  if (angle < ANGLE_45 || angle >= ANGLE_315) {
+    return "right";
+  }
+  if (angle >= ANGLE_45 && angle < ANGLE_135) {
+    return "top";
+  }
+  if (angle >= ANGLE_135 && angle < ANGLE_225) {
+    return "left";
+  }
+  return "bottom";
+}
+
+function getTooltipOrigin(index) {
+  const angle = (index / menuItemCount) * FULL_ANGLE;
+  if (angle < ANGLE_45 || angle >= ANGLE_315) {
+    return "left";
+  }
+  if (angle >= ANGLE_45 && angle < ANGLE_135) {
+    return "bottom";
+  }
+  if (angle >= ANGLE_135 && angle < ANGLE_225) {
+    return "right";
+  }
+  return "top";
+}
+</script>
+
+<template>
+  <component
+    v-for="(item, index) in menuItems"
+    :is="item"
+    :key="index"
+    :index="index"
+    :itemProps="{
+      id: id,
+      meta_data: metaData,
+      tooltip_location: getTooltipLocation(index),
+      tooltip_origin: getTooltipOrigin(index),
+      totalItems: menuItemCount,
+    }"
+    class="menu-item-wrapper"
+    :style="getItemStyle(index)"
+    @mousedown.stop
+  />
+</template>
+
+<style scoped>
+.menu-item-wrapper {
+  position: absolute;
+  transform-origin: center;
+  will-change: transform, opacity;
+}
+</style>

package/app/components/Viewer/{ContextMenu.vue → ContextMenu/ContextMenu.vue}

@@ -1,19 +1,10 @@
 <script setup>
+import CenterButton from "@ogw_front/components/Viewer/ContextMenu/CenterButton";
+import CircularItems from "@ogw_front/components/Viewer/ContextMenu/CircularItems";
+import InfoCard from "@ogw_front/components/Viewer/ContextMenu/InfoCard";
 import { useEventListener } from "@vueuse/core";
 import { useMenuStore } from "@ogw_front/stores/menu";
-
-const RADIUS = 80;
-const MARGIN_OFFSET = 40;
-const Z_INDEX_ACTIVE_ITEM = 10;
-const Z_INDEX_BASE_ITEM = 1;
-const FULL_ANGLE = 360;
-const ANGLE_45 = 45;
-const ANGLE_135 = 135;
-const ANGLE_225 = 225;
-const ANGLE_315 = 315;
-const CLOSE_DELAY = 100;
-
-const menuStore = useMenuStore();
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 const { id, x, y, containerWidth, containerHeight } = defineProps({
   id: { type: String, required: true },
@@ -23,9 +14,22 @@ const { id, x, y, containerWidth, containerHeight } = defineProps({
   containerHeight: { type: Number, required: true },
 });
 
+const RADIUS = 80;
+const MARGIN_OFFSET = 40;
+const CLOSE_DELAY = 100;
+const TREEVIEW_MARGIN_LEFT = 10;
+const TREEVIEW_ICON_WIDTH = 48;
+const TREEVIEW_MARGIN_RIGHT = 20;
+const CENTER_BUTTON_SIZE = 52;
+const CENTER_BUTTON_HALF_SIZE = 26;
+
+const menuStore = useMenuStore();
+const treeviewStore = useTreeviewStore();
+
 const meta_data = computed(() => menuStore.current_meta_data || {});
 
 const show_menu = ref(true);
+const showName = ref(false);
 const isDragging = ref(false);
 const dragStartX = ref(0);
 const dragStartY = ref(0);
@@ -73,11 +77,42 @@ watch(
 
 const menuItemCount = computed(() => menu_items.value.length);
 
+const isOverTreeview = computed(() => {
+  const hasAdditional = treeviewStore.opened_views.some((view) => view.id !== "main");
+  const hasMain = treeviewStore.opened_views.some((view) => view.id === "main");
+  const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
+  const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
+  const treeviewWidth =
+    TREEVIEW_MARGIN_LEFT +
+    TREEVIEW_ICON_WIDTH +
+    firstColWidth +
+    secondColWidth +
+    TREEVIEW_MARGIN_RIGHT;
+  return menuX.value < treeviewWidth;
+});
+
+const isOverToolbar = computed(() => {
+  const toolbarEl = document.querySelector(".view-toolbar");
+  if (!toolbarEl) {
+    return false;
+  }
+  const rect = toolbarEl.getBoundingClientRect();
+  const btnX = menuStore.containerLeft + menuX.value - CENTER_BUTTON_HALF_SIZE;
+  const btnY = menuStore.containerTop + menuY.value - CENTER_BUTTON_HALF_SIZE;
+  const btnWidth = CENTER_BUTTON_SIZE;
+  const btnHeight = CENTER_BUTTON_SIZE;
+  return (
+    btnX < rect.right &&
+    btnX + btnWidth > rect.left &&
+    btnY < rect.bottom &&
+    btnY + btnHeight > rect.top
+  );
+});
+
 function startDrag(event) {
   isDragging.value = true;
   dragStartX.value = event.clientX - menuX.value;
   dragStartY.value = event.clientY - menuY.value;
-  event.preventDefault();
 }
 
 function clampPosition(posX, posY) {
@@ -112,42 +147,8 @@ function getMenuStyle() {
   };
 }
 
-function getTooltipLocation(index) {
-  const angle = (index / menuItemCount.value) * FULL_ANGLE;
-  if (angle < ANGLE_45 || angle >= ANGLE_315) {
-    return "right";
-  }
-  if (angle >= ANGLE_45 && angle < ANGLE_135) {
-    return "top";
-  }
-  if (angle >= ANGLE_135 && angle < ANGLE_225) {
-    return "left";
-  }
-  return "bottom";
-}
-
-function getTooltipOrigin(index) {
-  const angle = (index / menuItemCount.value) * FULL_ANGLE;
-  if (angle < ANGLE_45 || angle >= ANGLE_315) {
-    return "left";
-  }
-  if (angle >= ANGLE_45 && angle < ANGLE_135) {
-    return "bottom";
-  }
-  if (angle >= ANGLE_135 && angle < ANGLE_225) {
-    return "right";
-  }
-  return "top";
-}
-
-function getItemStyle(index) {
-  const angle = (index / menuItemCount.value) * 2 * Math.PI;
-  return {
-    transform: `translate(${Math.cos(angle) * RADIUS}px, ${Math.sin(angle) * RADIUS}px)`,
-    transition: "opacity 0.2s ease, transform 0.2s ease",
-    position: "absolute",
-    zIndex: menuStore.active_item_index === index ? Z_INDEX_ACTIVE_ITEM : Z_INDEX_BASE_ITEM,
-  };
+function toggleShowName() {
+  showName.value = !showName.value;
 }
 </script>
 
@@ -165,22 +166,21 @@ function getItemStyle(index) {
         class="circular-menu-items"
         :style="{ width: `${RADIUS * 2}px`, height: `${RADIUS * 2}px` }"
       >
-        <component
-          v-for="(item, index) in menu_items"
-          :is="item"
-          :key="index"
-          :index="index"
-          :itemProps="{
-            id: id,
-            meta_data,
-            tooltip_location: getTooltipLocation(index),
-            tooltip_origin: getTooltipOrigin(index),
-            totalItems: menuItemCount,
-          }"
-          class="menu-item-wrapper"
-          :style="getItemStyle(index)"
-          @mousedown.stop
+        <CircularItems
+          :menu-items="menu_items"
+          :id="id"
+          :meta-data="meta_data"
+          :menu-item-count="menuItemCount"
+        />
+
+        <CenterButton
+          :is-over-treeview="isOverTreeview"
+          :is-over-toolbar="isOverToolbar"
+          @drag="startDrag"
+          @click="toggleShowName"
         />
+
+        <InfoCard v-model:show="showName" :meta-data="meta_data" />
       </div>
     </div>
   </v-menu>
@@ -200,6 +200,8 @@ function getItemStyle(index) {
   height: 100%;
   border-radius: 50%;
   cursor: grab;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .circular-menu-drag-handle:active {
@@ -215,10 +217,4 @@ function getItemStyle(index) {
   background-color: transparent;
   border: none;
 }
-
-.menu-item-wrapper {
-  position: absolute;
-  transform-origin: center;
-  will-change: transform, opacity;
-}
 </style>

package/app/components/Viewer/{ContextMenuItem.vue → ContextMenu/ContextMenuItem.vue}

@@ -1,7 +1,9 @@
 <script setup>
 import GlassCard from "@ogw_front/components/GlassCard";
+import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTheme } from "vuetify";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 const CARD_WIDTH = 320;
 const CARD_HEIGHT = 500;
@@ -12,6 +14,7 @@ const OFFSET = 40;
 const menuStore = useMenuStore();
 const theme = useTheme();
 const primaryColor = computed(() => theme.current.value.colors.primary);
+
 const { index, itemProps, tooltip, btn_image } = defineProps({
   index: { type: Number, required: true },
   itemProps: { type: Object, required: true },
@@ -19,6 +22,69 @@ const { index, itemProps, tooltip, btn_image } = defineProps({
   btn_image: { type: String, required: true },
 });
 
+const buttonCoords = computed(() => {
+  const angle = (index / itemProps.totalItems) * 2 * Math.PI;
+  const deltaX = Math.cos(angle) * RADIUS;
+  const deltaY = Math.sin(angle) * RADIUS;
+  const size = 40;
+  return {
+    x: menuStore.containerLeft + menuStore.menuX + deltaX - size / 2,
+    y: menuStore.containerTop + menuStore.menuY + deltaY - size / 2,
+    width: size,
+    height: size,
+  };
+});
+
+const { adaptiveStyles } = useAdaptiveStyles(buttonCoords, {
+  minOpacity: 0.35,
+  maxOpacity: 1,
+});
+
+const TREEVIEW_MARGIN_LEFT = 10;
+const TREEVIEW_MARGIN_RIGHT = 20;
+const TREEVIEW_ICON_WIDTH = 48;
+
+const treeviewStore = useTreeviewStore();
+const isOverTreeview = computed(() => {
+  const hasAdditional = treeviewStore.opened_views.some((view) => view.id !== "main");
+  const hasMain = treeviewStore.opened_views.some((view) => view.id === "main");
+  const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
+  const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
+  const treeviewWidth =
+    TREEVIEW_MARGIN_LEFT +
+    TREEVIEW_ICON_WIDTH +
+    firstColWidth +
+    secondColWidth +
+    TREEVIEW_MARGIN_RIGHT;
+  return buttonCoords.value.x < treeviewWidth;
+});
+
+const isOverToolbar = computed(() => {
+  const toolbarEl = document.querySelector(".view-toolbar");
+  if (!toolbarEl) {
+    return false;
+  }
+  const rect = toolbarEl.getBoundingClientRect();
+  const btn = buttonCoords.value;
+  return (
+    btn.x < rect.right &&
+    btn.x + btn.width > rect.left &&
+    btn.y < rect.bottom &&
+    btn.y + btn.height > rect.top
+  );
+});
+
+const computedItemStyles = computed(() => {
+  if (isOverTreeview.value || isOverToolbar.value) {
+    return {
+      "--adaptive-blur": "15px",
+      "--adaptive-opacity": 0.85,
+      "--adaptive-brightness": 1.15,
+    };
+  }
+  return adaptiveStyles.value;
+});
+
 const is_active = computed(() => menuStore.active_item_index === index);
 const optionsRef = ref(undefined);
 const { height: optionsHeight } = useElementSize(optionsRef);
@@ -66,13 +132,20 @@ function toggleOptions() {
       <template v-slot:activator="{ props: tooltipProps }">
         <v-btn
           icon
+          variant="outlined"
           :active="is_active"
           @click.stop="toggleOptions"
           v-bind="tooltipProps"
-          class="menu-btn bg-white border"
+          class="menu-btn"
           elevation="2"
+          :style="computedItemStyles"
         >
-          <v-img :src="btn_image" height="28" width="28" />
+          <v-img
+            :src="btn_image"
+            height="28"
+            width="28"
+            style="pointer-events: none; object-fit: contain"
+          />
         </v-btn>
       </template>
       <span>{{ tooltip }}</span>
@@ -120,13 +193,34 @@ function toggleOptions() {
 }
 
 .menu-btn {
+  background: transparent !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  position: relative;
+  overflow: hidden;
   transition: all 0.2s ease;
-  border-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+.menu-btn::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, var(--adaptive-opacity));
+  backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  -webkit-backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  z-index: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  transition:
+    background-color 0.2s ease,
+    backdrop-filter 0.2s ease;
 }
 
 .menu-btn:hover {
   transform: scale(1.1);
-  background-color: #e3f2fd !important;
+}
+
+.menu-btn:hover::before {
+  background: rgba(255, 255, 255, calc(var(--adaptive-opacity, 0.15) + 0.15));
 }
 
 .menu-btn.v-btn--active {
@@ -134,6 +228,12 @@ function toggleOptions() {
   color: white !important;
 }
 
+.menu-btn.v-btn--active::before {
+  background: transparent !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+
 .menu-btn.v-btn--active ::v-deep(.v-img__img) {
   filter: invert(100%);
 }