@geode/opengeodeweb-front 10.34.0-rc.2 → 10.34.0-rc.21

package/app/components/ViewToolbar.vue

@@ -1,13 +1,13 @@
-<script setup>
-import ActionButton from "@ogw_front/components/ActionButton";
+<script setup lang="ts">
+import ActionButton from "@ogw_front/components/ActionButton.vue";
 import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.svg";
-import CameraManager from "@ogw_front/components/CameraManager";
-import CameraOrientation from "@ogw_front/components/CameraOrientation";
-import ClippingPlanes from "@ogw_front/components/ClippingPlanes";
-import Ruler from "@ogw_front/components/Ruler";
-import Screenshot from "@ogw_front/components/Screenshot";
-import ShrinkFilter from "@ogw_front/components/ShrinkFilter";
-import ZScaling from "@ogw_front/components/ZScaling";
+import CameraManager from "@ogw_front/components/CameraManager.vue";
+import CameraOrientation from "@ogw_front/components/CameraOrientation.vue";
+import ClippingPlanes from "@ogw_front/components/ClippingPlanes.vue";
+import Ruler from "@ogw_front/components/Ruler.vue";
+import Screenshot from "@ogw_front/components/Screenshot.vue";
+import ShrinkFilter from "@ogw_front/components/ShrinkFilter.vue";
+import ZScaling from "@ogw_front/components/ZScaling.vue";
 import { onKeyStroke } from "@vueuse/core";
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -15,16 +15,27 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const hybridViewerStore = useHybridViewerStore();
 const viewerStore = useViewerStore();
-const showScreenshot = ref(false);
-const showCameraManager = ref(false);
-const showCameraOrientation = ref(false);
-const showZScaling = ref(false);
-const showClippingPlanes = ref(false);
-const showShrinkFilter = ref(false);
-const showRuler = ref(false);
-const gridScale = ref(false);
-const zScale = ref(hybridViewerStore.zScale);
-const openSubMenus = ref({});
+const showScreenshot = ref<boolean>(false);
+const showCameraManager = ref<boolean>(false);
+const showCameraOrientation = ref<boolean>(false);
+const showZScaling = ref<boolean>(false);
+const showClippingPlanes = ref<boolean>(false);
+const showShrinkFilter = ref<boolean>(false);
+const showRuler = ref<boolean>(false);
+const gridScale = ref<boolean>(false);
+const zScale = ref<number>(hybridViewerStore.zScale);
+const openSubMenus = ref<Record<string, boolean>>({});
+
+interface CameraOptionAction {
+  title?: string;
+  testId: string;
+  tooltip?: string;
+  icon: string;
+  iconSize?: number;
+  color?: string;
+  action?: () => void;
+  menu?: CameraOptionAction[];
+}
 
 watch(
   () => hybridViewerStore.zScale,
@@ -33,7 +44,7 @@ watch(
   },
 );
 
-async function handleZScalingClose() {
+async function handleZScalingClose(): Promise<void> {
   await hybridViewerStore.setZScaling(zScale.value);
   showZScaling.value = false;
 }
@@ -47,7 +58,7 @@ onKeyStroke("Escape", () => {
   }
 });
 
-function closeAllToolsExcept(toolRef) {
+function closeAllToolsExcept(toolRef: Ref<boolean>): void {
   const tools = [
     showCameraOrientation,
     showCameraManager,
@@ -64,17 +75,17 @@ function closeAllToolsExcept(toolRef) {
   }
 }
 
-function toggleTool(toolRef) {
+function toggleTool(toolRef: Ref<boolean>): void {
   closeAllToolsExcept(toolRef);
   toolRef.value = !toolRef.value;
 }
 
-const camera_options = computed(() => [
+const camera_options = computed<CameraOptionAction[]>(() => [
   {
     testId: "resetCameraButton",
     tooltip: "Reset camera",
     icon: "mdi-cube-scan",
-    action: () => {
+    action: (): void => {
       hybridViewerStore.resetCamera();
     },
   },
@@ -83,7 +94,7 @@ const camera_options = computed(() => [
     tooltip: "Center on click",
     icon: "mdi-crosshairs-question",
     color: hybridViewerStore.is_picking ? "primary" : undefined,
-    action: () => {
+    action: (): void => {
       hybridViewerStore.is_picking = !hybridViewerStore.is_picking;
     },
   },
@@ -93,7 +104,7 @@ const camera_options = computed(() => [
     icon: "mdi-cursor-default-click",
     color: hybridViewerStore.is_hover_highlight ? "primary" : undefined,
     action: hybridViewerStore.is_hover_highlight
-      ? () => {
+      ? (): void => {
           hybridViewerStore.is_hover_highlight = false;
           hybridViewerStore.clearHoverHighlight();
         }
@@ -103,7 +114,7 @@ const camera_options = computed(() => [
         title: "Cells",
         testId: "highlightOnHoverCellsButton",
         icon: "mdi-select-all",
-        action: () => {
+        action: (): void => {
           if (
             hybridViewerStore.is_hover_highlight &&
             hybridViewerStore.hover_highlight_field_type === "CELL"
@@ -120,7 +131,7 @@ const camera_options = computed(() => [
         title: "Points",
         testId: "highlightOnHoverPointsButton",
         icon: "mdi-select-drag",
-        action: () => {
+        action: (): void => {
           if (
             hybridViewerStore.is_hover_highlight &&
             hybridViewerStore.hover_highlight_field_type === "POINT"
@@ -139,7 +150,7 @@ const camera_options = computed(() => [
     testId: "cameraOrientationButton",
     tooltip: "Camera orientation",
     icon: "mdi-rotate-3d",
-    action: () => {
+    action: (): void => {
       toggleTool(showCameraOrientation);
     },
   },
@@ -148,7 +159,7 @@ const camera_options = computed(() => [
     tooltip: "Manage camera positions",
     icon: CameraBookmarkIcon,
     iconSize: 34,
-    action: () => {
+    action: (): void => {
       toggleTool(showCameraManager);
     },
   },
@@ -156,7 +167,7 @@ const camera_options = computed(() => [
     testId: "screenshotButton",
     tooltip: "Take a screenshot",
     icon: "mdi-camera",
-    action: () => {
+    action: (): void => {
       toggleTool(showScreenshot);
     },
   },
@@ -165,7 +176,7 @@ const camera_options = computed(() => [
     tooltip: "Toggle grid scale",
     icon: "mdi-ruler-square",
     color: gridScale.value ? "primary" : undefined,
-    action: () => {
+    action: (): void => {
       const schema = schemas.opengeodeweb_viewer.viewer.grid_scale;
       const params = { visibility: !gridScale.value };
       viewerStore.request(
@@ -186,7 +197,7 @@ const camera_options = computed(() => [
     testId: "zScalingButton",
     tooltip: "Z Scaling Control",
     icon: "mdi-sort",
-    action: () => {
+    action: (): void => {
       toggleTool(showZScaling);
     },
   },
@@ -195,7 +206,7 @@ const camera_options = computed(() => [
     tooltip: "Clipping Planes",
     icon: "mdi-content-cut",
     color: showClippingPlanes.value ? "primary" : undefined,
-    action: () => {
+    action: (): void => {
       toggleTool(showClippingPlanes);
     },
   },
@@ -204,7 +215,7 @@ const camera_options = computed(() => [
     tooltip: "Shrink Filter",
     icon: "mdi-arrow-collapse-all",
     color: showShrinkFilter.value ? "primary" : undefined,
-    action: () => {
+    action: (): void => {
       toggleTool(showShrinkFilter);
     },
   },
@@ -213,7 +224,7 @@ const camera_options = computed(() => [
     tooltip: "Ruler",
     icon: "mdi-ruler",
     color: showRuler.value ? "primary" : undefined,
-    action: () => {
+    action: (): void => {
       toggleTool(showRuler);
     },
   },
@@ -234,10 +245,8 @@ const camera_options = computed(() => [
             <ActionButton
               v-bind="props"
               :data-testid="camera_option.testId"
-              :icon="
-                typeof camera_option.icon === 'function' ? camera_option.icon() : camera_option.icon
-              "
-              :tooltip="camera_option.tooltip"
+              :icon="camera_option.icon"
+              :tooltip="camera_option.tooltip ?? ''"
               :color="camera_option.color"
               :icon-size="camera_option.iconSize"
               tooltip-location="left"
@@ -249,16 +258,16 @@ const camera_options = computed(() => [
                 <ActionButton
                   :data-testid="item.testId"
                   :icon="item.icon"
-                  :tooltip="item.title"
+                  :tooltip="item.title ?? ''"
                   :color="
                     hybridViewerStore.is_hover_highlight &&
                     hybridViewerStore.hover_highlight_field_type ===
-                      item.title.toUpperCase().slice(0, -1)
+                      item.title?.toUpperCase().slice(0, -1)
                       ? 'primary'
                       : undefined
                   "
                   tooltip-location="top"
-                  @click="item.action"
+                  @click="item.action?.()"
                 />
               </v-col>
             </v-row>
@@ -268,7 +277,7 @@ const camera_options = computed(() => [
           v-else
           :data-testid="camera_option.testId"
           :icon="camera_option.icon"
-          :tooltip="camera_option.tooltip"
+          :tooltip="camera_option.tooltip ?? ''"
           :color="camera_option.color"
           :icon-size="camera_option.iconSize"
           tooltip-location="left"

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

@@ -1,13 +1,20 @@
-<script setup>
+<script setup lang="ts">
 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 },
-});
+interface Props {
+  isOverTreeview: boolean;
+  isOverToolbar?: boolean;
+}
+
+const { isOverTreeview, isOverToolbar = false } = defineProps<Props>();
+
+interface Emits {
+  drag: [event: MouseEvent];
+  click: [event: MouseEvent];
+}
 
-const emit = defineEmits(["drag", "click"]);
+const emit = defineEmits<Emits>();
 
 const ADAPTIVE_BLUR_VAL = "15px";
 const ADAPTIVE_OPACITY_VAL = 0.85;
@@ -46,14 +53,14 @@ let dragMoved = false;
 let dragStartClientX = 0;
 let dragStartClientY = 0;
 
-function onMouseDown(event) {
+function onMouseDown(event: MouseEvent): void {
   dragMoved = false;
   dragStartClientX = event.clientX;
   dragStartClientY = event.clientY;
   emit("drag", event);
 }
 
-function onMouseUp(event) {
+function onMouseUp(event: MouseEvent): void {
   const deltaX = event.clientX - dragStartClientX;
   const deltaY = event.clientY - dragStartClientY;
   if (Math.hypot(deltaX, deltaY) > dragThreshold) {
@@ -61,7 +68,7 @@ function onMouseUp(event) {
   }
 }
 
-function onCenterClick(event) {
+function onCenterClick(event: MouseEvent): void {
   event.stopPropagation();
   if (!dragMoved) {
     emit("click", event);

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

@@ -1,12 +1,15 @@
-<script setup>
+<script setup lang="ts">
+import type { Component } from "vue";
 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 },
-});
+interface Props {
+  menuItems: Component[];
+  id: string;
+  metaData: Record<string, unknown>;
+  menuItemCount: number;
+}
+
+const { menuItems, id, metaData, menuItemCount } = defineProps<Props>();
 
 const RADIUS = 80;
 const Z_INDEX_ACTIVE_ITEM = 10;
@@ -19,7 +22,7 @@ const ANGLE_315 = 315;
 
 const menuStore = useMenuStore();
 
-function getItemStyle(index) {
+function getItemStyle(index: number): Record<string, string> {
   const angle = (index / menuItemCount) * 2 * Math.PI;
   return {
     transform: `translate(${Math.cos(angle) * RADIUS}px, ${Math.sin(angle) * RADIUS}px)`,
@@ -29,7 +32,7 @@ function getItemStyle(index) {
   };
 }
 
-function getTooltipLocation(index) {
+function getTooltipLocation(index: number): string {
   const angle = (index / menuItemCount) * FULL_ANGLE;
   if (angle < ANGLE_45 || angle >= ANGLE_315) {
     return "right";
@@ -43,7 +46,7 @@ function getTooltipLocation(index) {
   return "bottom";
 }
 
-function getTooltipOrigin(index) {
+function getTooltipOrigin(index: number): string {
   const angle = (index / menuItemCount) * FULL_ANGLE;
   if (angle < ANGLE_45 || angle >= ANGLE_315) {
     return "left";

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

@@ -1,18 +1,21 @@
-<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";
+<script setup lang="ts">
+import CenterButton from "@ogw_front/components/Viewer/ContextMenu/CenterButton.vue";
+import CircularItems from "@ogw_front/components/Viewer/ContextMenu/CircularItems.vue";
+import type { Component } from "vue";
+import InfoCard from "@ogw_front/components/Viewer/ContextMenu/InfoCard.vue";
 import { useEventListener } from "@vueuse/core";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-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 },
-});
+interface Props {
+  id: string;
+  x: number;
+  y: number;
+  containerWidth: number;
+  containerHeight: number;
+}
+
+const { id, x, y, containerWidth, containerHeight } = defineProps<Props>();
 
 const RADIUS = 80;
 const MARGIN_OFFSET = 40;
@@ -28,15 +31,20 @@ 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);
-const menuX = ref(x);
-const menuY = ref(y);
+const show_menu = ref<boolean>(true);
+const showName = ref<boolean>(false);
+const isDragging = ref<boolean>(false);
+const dragStartX = ref<number>(0);
+const dragStartY = ref<number>(0);
+const menuX = ref<number>(x);
+const menuY = ref<number>(y);
+
+interface Position {
+  x: number;
+  y: number;
+}
 
-function clampPosition(posX, posY) {
+function clampPosition(posX: number, posY: number): Position {
   const margin = RADIUS + MARGIN_OFFSET;
   return {
     x: Math.min(Math.max(posX, margin), containerWidth - margin),
@@ -44,13 +52,13 @@ function clampPosition(posX, posY) {
   };
 }
 
-function startDrag(event) {
+function startDrag(event: MouseEvent): void {
   isDragging.value = true;
   dragStartX.value = event.clientX - menuX.value;
   dragStartY.value = event.clientY - menuY.value;
 }
 
-function handleDrag(event) {
+function handleDrag(event: MouseEvent): void {
   const { x: clampedX, y: clampedY } = clampPosition(
     event.clientX - dragStartX.value,
     event.clientY - dragStartY.value,
@@ -60,7 +68,7 @@ function handleDrag(event) {
   menuStore.setMenuPosition(clampedX, clampedY);
 }
 
-function stopDrag(event) {
+function stopDrag(event: MouseEvent): void {
   isDragging.value = false;
   event.stopPropagation();
   menuStore.setMenuPosition(menuX.value, menuY.value);
@@ -73,7 +81,7 @@ watch(show_menu, (newVal) => {
 });
 
 watch(
-  () => [x, y, containerWidth, containerHeight],
+  () => [x, y, containerWidth, containerHeight] as const,
   ([newX, newY]) => {
     const { x: clampedX, y: clampedY } = clampPosition(newX, newY);
     menuX.value = clampedX;
@@ -86,7 +94,7 @@ watch(
 useEventListener(
   globalThis,
   "mousemove",
-  (event) => {
+  (event: MouseEvent) => {
     if (!isDragging.value) {
       return;
     }
@@ -95,14 +103,14 @@ useEventListener(
   { passive: true },
 );
 
-useEventListener(globalThis, "mouseup", (event) => {
+useEventListener(globalThis, "mouseup", (event: MouseEvent) => {
   if (!isDragging.value) {
     return;
   }
   stopDrag(event);
 });
 
-const menu_items = shallowRef([]);
+const menu_items = shallowRef<Component[]>([]);
 watch(
   () => [meta_data.value.viewer_type, meta_data.value.geode_object_type],
   ([viewer_type, geode_object_type]) => {
@@ -111,9 +119,9 @@ watch(
   { immediate: true },
 );
 
-const menuItemCount = computed(() => menu_items.value.length);
+const menuItemCount = computed<number>(() => menu_items.value.length);
 
-const isOverTreeview = computed(() => {
+const isOverTreeview = computed<boolean>(() => {
   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;
@@ -127,7 +135,7 @@ const isOverTreeview = computed(() => {
   return menuX.value < treeviewWidth;
 });
 
-const isOverToolbar = computed(() => {
+const isOverToolbar = computed<boolean>(() => {
   const toolbarEl = document.querySelector(".view-toolbar");
   if (!toolbarEl) {
     return false;
@@ -145,15 +153,15 @@ const isOverToolbar = computed(() => {
   );
 });
 
-function getMenuStyle() {
+function getMenuStyle(): Record<string, string> {
   return {
-    position: "fixed",
+    position: "fixed" as const,
     left: `${menuStore.containerLeft + menuX.value - RADIUS}px`,
     top: `${menuStore.containerTop + menuY.value - RADIUS}px`,
   };
 }
 
-function toggleShowName() {
+function toggleShowName(): void {
   showName.value = !showName.value;
 }
 </script>

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

@@ -1,5 +1,5 @@
-<script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
+<script setup lang="ts">
+import GlassCard from "@ogw_front/components/GlassCard.vue";
 import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTheme } from "vuetify";
@@ -15,12 +15,22 @@ const menuStore = useMenuStore();
 const theme = useTheme();
 const primaryColor = computed(() => theme.current.value.colors.primary);
 
-const { index, itemProps, tooltip, btnImage } = defineProps({
-  index: { type: Number, required: true },
-  itemProps: { type: Object, required: true },
-  tooltip: { type: String, required: true },
-  btnImage: { type: String, required: true },
-});
+interface ItemProps {
+  id: string;
+  meta_data: Record<string, unknown>;
+  tooltip_location: "right" | "top" | "left" | "bottom";
+  tooltip_origin: "right" | "top" | "left" | "bottom";
+  totalItems: number;
+}
+
+interface Props {
+  index: number;
+  itemProps: ItemProps;
+  tooltip: string;
+  btnImage: string;
+}
+
+const { index, itemProps, tooltip, btnImage } = defineProps<Props>();
 
 const buttonCoords = computed(() => {
   const angle = (index / itemProps.totalItems) * 2 * Math.PI;
@@ -45,7 +55,7 @@ const TREEVIEW_MARGIN_RIGHT = 20;
 const TREEVIEW_ICON_WIDTH = 48;
 
 const treeviewStore = useTreeviewStore();
-const isOverTreeview = computed(() => {
+const isOverTreeview = computed<boolean>(() => {
   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;
@@ -59,7 +69,7 @@ const isOverTreeview = computed(() => {
   return buttonCoords.value.x < treeviewWidth;
 });
 
-const isOverToolbar = computed(() => {
+const isOverToolbar = computed<boolean>(() => {
   const toolbarEl = document.querySelector(".view-toolbar");
   if (!toolbarEl) {
     return false;
@@ -74,7 +84,7 @@ const isOverToolbar = computed(() => {
   );
 });
 
-const computedItemStyles = computed(() => {
+const computedItemStyles = computed<Record<string, string>>(() => {
   if (isOverTreeview.value || isOverToolbar.value) {
     return {
       "--adaptive-blur": "15px",
@@ -85,13 +95,15 @@ const computedItemStyles = computed(() => {
   return adaptiveStyles.value;
 });
 
-const is_active = computed(() => menuStore.active_item_index === index);
-const optionsRef = ref(undefined);
+const is_active = computed<boolean>(() => menuStore.active_item_index === index);
+const optionsRef = ref<HTMLElement | undefined>(undefined);
 const { height: optionsHeight } = useElementSize(optionsRef);
 
-const maxCardHeight = computed(() => Math.min(CARD_HEIGHT, menuStore.containerHeight - OFFSET));
+const maxCardHeight = computed<number>(() =>
+  Math.min(CARD_HEIGHT, menuStore.containerHeight - OFFSET),
+);
 
-const optionsStyle = computed(() => {
+const optionsStyle = computed<Record<string, string>>(() => {
   if (!is_active.value || !optionsHeight.value) {
     return {};
   }
@@ -110,7 +122,7 @@ const optionsStyle = computed(() => {
   return { top: `calc(50% + ${offsetY}px)` };
 });
 
-const optionsClass = computed(() => {
+const optionsClass = computed<string>(() => {
   const loc = itemProps.tooltip_location;
   const margin = MARGIN;
   const radius = RADIUS;
@@ -122,9 +134,11 @@ const optionsClass = computed(() => {
   return menuStore.menuX - radius - margin - CARD_WIDTH < 0 ? "options-right" : "options-left";
 });
 
-function toggleOptions() {
+function toggleOptions(): void {
   menuStore.toggleItemOptions(index);
 }
+
+export type { ItemProps };
 </script>
 <template>
   <v-sheet class="menu-item-container transition-swing" color="transparent">