@geode/opengeodeweb-front 10.6.2 → 10.6.3-rc.1

package/app/components/Viewer/ContextMenu.vue

@@ -1,159 +1,156 @@
 <script setup>
-  import { useEventListener } from "@vueuse/core"
-  import { useMenuStore } from "@ogw_front/stores/menu"
-
-  const RADIUS = 80
-  const MARGIN_OFFSET = 40
-  const Z_INDEX_MENU = 1000
-  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()
-
-  const { id, x, y, containerWidth, containerHeight } = defineProps({
-    id: { type: String, required: true },
-    x: { type: Number, required: true },
-    y: { type: Number, required: true },
-    containerWidth: { type: Number, required: true },
-    containerHeight: { type: Number, required: true },
-  })
-
-  const meta_data = computed(() => menuStore.current_meta_data || {})
-
-  const show_menu = ref(true)
-  const isDragging = ref(false)
-  const dragStartX = ref(0)
-  const dragStartY = ref(0)
-  const menuX = ref(x)
-  const menuY = ref(y)
-
-  watch(
-    () => [x, y],
-    ([newX, newY]) => {
-      const { x: clampedX, y: clampedY } = clampPosition(newX, newY)
-      menuX.value = clampedX
-      menuY.value = clampedY
-      menuStore.setMenuPosition(clampedX, clampedY)
-    },
-    { immediate: true },
-  )
-
-  useEventListener(
-    globalThis,
-    "mousemove",
-    (event) => {
-      if (!isDragging.value) {
-        return
-      }
-      handleDrag(event)
-    },
-    { passive: true },
-  )
-
-  useEventListener(globalThis, "mouseup", (event) => {
+import { useEventListener } from "@vueuse/core";
+import { useMenuStore } from "@ogw_front/stores/menu";
+
+const RADIUS = 80;
+const MARGIN_OFFSET = 40;
+const Z_INDEX_MENU = 1000;
+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();
+
+const { id, x, y, containerWidth, containerHeight } = defineProps({
+  id: { type: String, required: true },
+  x: { type: Number, required: true },
+  y: { type: Number, required: true },
+  containerWidth: { type: Number, required: true },
+  containerHeight: { type: Number, required: true },
+});
+
+const meta_data = computed(() => menuStore.current_meta_data || {});
+
+const show_menu = ref(true);
+const isDragging = ref(false);
+const dragStartX = ref(0);
+const dragStartY = ref(0);
+const menuX = ref(x);
+const menuY = ref(y);
+
+watch(
+  () => [x, y],
+  ([newX, newY]) => {
+    const { x: clampedX, y: clampedY } = clampPosition(newX, newY);
+    menuX.value = clampedX;
+    menuY.value = clampedY;
+    menuStore.setMenuPosition(clampedX, clampedY);
+  },
+  { immediate: true },
+);
+
+useEventListener(
+  globalThis,
+  "mousemove",
+  (event) => {
     if (!isDragging.value) {
-      return
+      return;
     }
-    stopDrag(event)
-  })
-
-  const menu_items = shallowRef([])
-  watch(
-    () => [meta_data.value.viewer_type, meta_data.value.geode_object_type],
-    ([viewer_type, geode_object_type]) => {
-      menu_items.value = menuStore.getMenuItems(viewer_type, geode_object_type)
-    },
-    { immediate: true },
-  )
-
-  const menuItemCount = computed(() => menu_items.value.length)
-
-  function startDrag(event) {
-    isDragging.value = true
-    dragStartX.value = event.clientX - menuX.value
-    dragStartY.value = event.clientY - menuY.value
-    event.preventDefault()
+    handleDrag(event);
+  },
+  { passive: true },
+);
+
+useEventListener(globalThis, "mouseup", (event) => {
+  if (!isDragging.value) {
+    return;
   }
-
-  function clampPosition(posX, posY) {
-    const margin = RADIUS + MARGIN_OFFSET
-    return {
-      x: Math.min(Math.max(posX, margin), containerWidth - margin),
-      y: Math.min(Math.max(posY, margin), containerHeight - margin),
-    }
+  stopDrag(event);
+});
+
+const menu_items = shallowRef([]);
+watch(
+  () => [meta_data.value.viewer_type, meta_data.value.geode_object_type],
+  ([viewer_type, geode_object_type]) => {
+    menu_items.value = menuStore.getMenuItems(viewer_type, geode_object_type);
+  },
+  { immediate: true },
+);
+
+const menuItemCount = computed(() => menu_items.value.length);
+
+function startDrag(event) {
+  isDragging.value = true;
+  dragStartX.value = event.clientX - menuX.value;
+  dragStartY.value = event.clientY - menuY.value;
+  event.preventDefault();
+}
+
+function clampPosition(posX, posY) {
+  const margin = RADIUS + MARGIN_OFFSET;
+  return {
+    x: Math.min(Math.max(posX, margin), containerWidth - margin),
+    y: Math.min(Math.max(posY, margin), containerHeight - margin),
+  };
+}
+
+function handleDrag(event) {
+  const { x: clampedX, y: clampedY } = clampPosition(
+    event.clientX - dragStartX.value,
+    event.clientY - dragStartY.value,
+  );
+  menuX.value = clampedX;
+  menuY.value = clampedY;
+  menuStore.setMenuPosition(clampedX, clampedY);
+}
+
+function stopDrag(event) {
+  isDragging.value = false;
+  event.stopPropagation();
+  menuStore.setMenuPosition(menuX.value, menuY.value);
+}
+
+function getMenuStyle() {
+  return {
+    position: "fixed",
+    left: `${menuStore.containerLeft + menuX.value - RADIUS}px`,
+    top: `${menuStore.containerTop + menuY.value - RADIUS}px`,
+    zIndex: Z_INDEX_MENU,
+  };
+}
+
+function getTooltipLocation(index) {
+  const angle = (index / menuItemCount.value) * FULL_ANGLE;
+  if (angle < ANGLE_45 || angle >= ANGLE_315) {
+    return "right";
   }
-
-  function handleDrag(event) {
-    const { x: clampedX, y: clampedY } = clampPosition(
-      event.clientX - dragStartX.value,
-      event.clientY - dragStartY.value,
-    )
-    menuX.value = clampedX
-    menuY.value = clampedY
-    menuStore.setMenuPosition(clampedX, clampedY)
+  if (angle >= ANGLE_45 && angle < ANGLE_135) {
+    return "top";
   }
-
-  function stopDrag(event) {
-    isDragging.value = false
-    event.stopPropagation()
-    menuStore.setMenuPosition(menuX.value, menuY.value)
+  if (angle >= ANGLE_135 && angle < ANGLE_225) {
+    return "left";
   }
+  return "bottom";
+}
 
-  function getMenuStyle() {
-    return {
-      position: "fixed",
-      left: `${menuStore.containerLeft + menuX.value - RADIUS}px`,
-      top: `${menuStore.containerTop + menuY.value - RADIUS}px`,
-      zIndex: Z_INDEX_MENU,
-    }
+function getTooltipOrigin(index) {
+  const angle = (index / menuItemCount.value) * FULL_ANGLE;
+  if (angle < ANGLE_45 || angle >= ANGLE_315) {
+    return "left";
   }
-
-  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"
+  if (angle >= ANGLE_45 && angle < ANGLE_135) {
+    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,
-    }
+  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,
+  };
+}
 </script>
 
 <template>
@@ -191,38 +188,38 @@
 </template>
 
 <style scoped>
-  :deep(.circular-menu-container) {
-    overflow: visible !important;
-    box-shadow: none !important;
-    border: none !important;
-    background: transparent !important;
-    contain: none !important;
-  }
-
-  .circular-menu-drag-handle {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    cursor: grab;
-  }
-
-  .circular-menu-drag-handle:active {
-    cursor: grabbing;
-  }
-
-  .circular-menu-items {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    background-color: transparent;
-    border: none;
-  }
-
-  .menu-item-wrapper {
-    position: absolute;
-    transform-origin: center;
-    will-change: transform, opacity;
-  }
+:deep(.circular-menu-container) {
+  overflow: visible !important;
+  box-shadow: none !important;
+  border: none !important;
+  background: transparent !important;
+  contain: none !important;
+}
+
+.circular-menu-drag-handle {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  cursor: grab;
+}
+
+.circular-menu-drag-handle:active {
+  cursor: grabbing;
+}
+
+.circular-menu-items {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: transparent;
+  border: none;
+}
+
+.menu-item-wrapper {
+  position: absolute;
+  transform-origin: center;
+  will-change: transform, opacity;
+}
 </style>

package/app/components/Viewer/ContextMenuItem.vue

@@ -1,80 +1,68 @@
 <script setup>
-  import GlassCard from "@ogw_front/components/GlassCard"
-  import { useMenuStore } from "@ogw_front/stores/menu"
-  import { useTheme } from "vuetify"
-
-  const CARD_WIDTH = 320
-  const CARD_HEIGHT = 500
-  const MARGIN = 60
-  const RADIUS = 80
-  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 },
-    tooltip: { type: String, required: true },
-    btn_image: { type: String, required: true },
-  })
-
-  const is_active = computed(() => menuStore.active_item_index === index)
-  const optionsRef = ref(undefined)
-  const { height: optionsHeight } = useElementSize(optionsRef)
-
-  const maxCardHeight = computed(() =>
-    Math.min(CARD_HEIGHT, menuStore.containerHeight - OFFSET),
-  )
-
-  const optionsStyle = computed(() => {
-    if (!is_active.value || !optionsHeight.value) {
-      return {}
-    }
-    const angle = (index / itemProps.totalItems) * 2 * Math.PI
-    const radius = RADIUS
-    const absoluteButtonY = menuStore.menuY + Math.sin(angle) * radius
-    const height = optionsHeight.value
-    const margin = MARGIN
-    let offsetY = 0
-
-    if (absoluteButtonY - height / 2 < margin) {
-      offsetY = margin - (absoluteButtonY - height / 2)
-    } else if (
-      absoluteButtonY + height / 2 >
-      menuStore.containerHeight - margin
-    ) {
-      offsetY =
-        menuStore.containerHeight - margin - (absoluteButtonY + height / 2)
-    }
-    return { top: `calc(50% + ${offsetY}px)` }
-  })
-
-  const optionsClass = computed(() => {
-    const loc = itemProps.tooltip_location
-    const margin = MARGIN
-    const radius = RADIUS
-    if (loc === "right") {
-      return menuStore.menuX + radius + margin + CARD_WIDTH >
-        menuStore.containerWidth
-        ? "options-left"
-        : "options-right"
-    }
-    return menuStore.menuX - radius - margin - CARD_WIDTH < 0
-      ? "options-right"
-      : "options-left"
-  })
-
-  function toggleOptions() {
-    menuStore.toggleItemOptions(index)
+import GlassCard from "@ogw_front/components/GlassCard";
+import { useMenuStore } from "@ogw_front/stores/menu";
+import { useTheme } from "vuetify";
+
+const CARD_WIDTH = 320;
+const CARD_HEIGHT = 500;
+const MARGIN = 60;
+const RADIUS = 80;
+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 },
+  tooltip: { type: String, required: true },
+  btn_image: { type: String, required: true },
+});
+
+const is_active = computed(() => menuStore.active_item_index === index);
+const optionsRef = ref(undefined);
+const { height: optionsHeight } = useElementSize(optionsRef);
+
+const maxCardHeight = computed(() => Math.min(CARD_HEIGHT, menuStore.containerHeight - OFFSET));
+
+const optionsStyle = computed(() => {
+  if (!is_active.value || !optionsHeight.value) {
+    return {};
   }
+  const angle = (index / itemProps.totalItems) * 2 * Math.PI;
+  const radius = RADIUS;
+  const absoluteButtonY = menuStore.menuY + Math.sin(angle) * radius;
+  const height = optionsHeight.value;
+  const margin = MARGIN;
+  let offsetY = 0;
+
+  if (absoluteButtonY - height / 2 < margin) {
+    offsetY = margin - (absoluteButtonY - height / 2);
+  } else if (absoluteButtonY + height / 2 > menuStore.containerHeight - margin) {
+    offsetY = menuStore.containerHeight - margin - (absoluteButtonY + height / 2);
+  }
+  return { top: `calc(50% + ${offsetY}px)` };
+});
+
+const optionsClass = computed(() => {
+  const loc = itemProps.tooltip_location;
+  const margin = MARGIN;
+  const radius = RADIUS;
+  if (loc === "right") {
+    return menuStore.menuX + radius + margin + CARD_WIDTH > menuStore.containerWidth
+      ? "options-left"
+      : "options-right";
+  }
+  return menuStore.menuX - radius - margin - CARD_WIDTH < 0 ? "options-right" : "options-left";
+});
+
+function toggleOptions() {
+  menuStore.toggleItemOptions(index);
+}
 </script>
 <template>
   <v-sheet class="menu-item-container transition-swing" color="transparent">
-    <v-tooltip
-      :location="itemProps.tooltip_location"
-      :origin="itemProps.tooltip_origin"
-    >
+    <v-tooltip :location="itemProps.tooltip_location" :origin="itemProps.tooltip_origin">
       <template v-slot:activator="{ props: tooltipProps }">
         <v-btn
           icon
@@ -118,49 +106,49 @@
 </template>
 
 <style scoped>
-  .menu-item-container {
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition:
-      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-      opacity 0.3s ease;
-  }
-
-  .menu-btn {
-    transition: all 0.2s ease;
-    border-color: rgba(0, 0, 0, 0.1) !important;
-  }
-
-  .menu-btn:hover {
-    transform: scale(1.1);
-    background-color: #e3f2fd !important;
-  }
-
-  .menu-btn.v-btn--active {
-    background-color: v-bind(primaryColor) !important;
-    color: white !important;
-  }
-
-  .menu-btn.v-btn--active ::v-deep(.v-img__img) {
-    filter: invert(100%);
-  }
-
-  .menu-options {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1001;
-  }
-
-  .options-right {
-    left: 60px;
-  }
-
-  .options-left {
-    right: 60px;
-  }
+.menu-item-container {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.3s ease;
+}
+
+.menu-btn {
+  transition: all 0.2s ease;
+  border-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+.menu-btn:hover {
+  transform: scale(1.1);
+  background-color: #e3f2fd !important;
+}
+
+.menu-btn.v-btn--active {
+  background-color: v-bind(primaryColor) !important;
+  color: white !important;
+}
+
+.menu-btn.v-btn--active ::v-deep(.v-img__img) {
+  filter: invert(100%);
+}
+
+.menu-options {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1001;
+}
+
+.options-right {
+  left: 60px;
+}
+
+.options-left {
+  right: 60px;
+}
 </style>

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

@@ -1,15 +1,12 @@
 <script setup>
-  import EdgedCurvePoints from "@ogw_front/assets/viewer_svgs/edged_curve_points.svg"
-  import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions"
+import EdgedCurvePoints from "@ogw_front/assets/viewer_svgs/edged_curve_points.svg";
+import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions";
 
-  const { itemProps } = defineProps({
-    itemProps: { type: Object, required: true },
-  })
+const { itemProps } = defineProps({
+  itemProps: { type: Object, required: true },
+});
 </script>
 
 <template>
-  <ViewerGenericMeshPointsOptions
-    :itemProps="itemProps"
-    :btn_image="EdgedCurvePoints"
-  />
+  <ViewerGenericMeshPointsOptions :itemProps="itemProps" :btn_image="EdgedCurvePoints" />
 </template>