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

package/app/composables/use_overlapping_picker.js

@@ -0,0 +1,153 @@
+import { ref } from "vue";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+export function useOverlappingPicker() {
+  const dataStore = useDataStore();
+  const dataStyleStore = useDataStyleStore();
+  const viewerStore = useViewerStore();
+  const dataItems = dataStore.refAllItems();
+
+  const displayIntermediate = ref(false);
+  const intermediateItems = ref([]);
+  const intermediateMenuX = ref(0);
+  const intermediateMenuY = ref(0);
+  let resolveIntermediate = undefined;
+
+  function fetchProposedItems(pickedList) {
+    return Promise.all(
+      pickedList.map(async (pick) => {
+        try {
+          const item = await dataStore.item(pick.id);
+          return {
+            id: pick.id,
+            viewer_id: pick.viewer_id,
+            name: item.name || "Unnamed Object",
+            viewer_type: item.viewer_type,
+            geode_object_type: item.geode_object_type,
+          };
+        } catch {
+          return {
+            id: pick.id,
+            viewer_id: pick.viewer_id,
+            name: "Unnamed Object",
+            viewer_type: undefined,
+            geode_object_type: undefined,
+          };
+        }
+      }),
+    );
+  }
+
+  function getIntermediateMenuStyle() {
+    return {
+      position: "fixed",
+      left: `${intermediateMenuX.value}px`,
+      top: `${intermediateMenuY.value}px`,
+    };
+  }
+
+  function selectIntermediateItem(item) {
+    if (resolveIntermediate) {
+      resolveIntermediate(item);
+      resolveIntermediate = undefined;
+    }
+  }
+
+  function handleIntermediateMenuUpdate(val) {
+    if (!val && resolveIntermediate) {
+      resolveIntermediate(undefined);
+      resolveIntermediate = undefined;
+    }
+  }
+
+  async function get_viewer_id({ x, y, containerWidth, containerHeight, containerRect }) {
+    const activeIds = new Set(dataItems.value.map((item) => item.id));
+    const ids = Object.keys(dataStyleStore.styles).filter((styleId) => activeIds.has(styleId));
+
+    const result = { id: undefined, viewer_id: undefined };
+    let pickedResponse = undefined;
+
+    await viewerStore.request(
+      viewer_schemas.opengeodeweb_viewer.viewer.picked_ids,
+      { x, y, ids },
+      {
+        response_function: (response) => {
+          pickedResponse = response;
+        },
+      },
+    );
+
+    if (!pickedResponse || !pickedResponse.array_ids || pickedResponse.array_ids.length === 0) {
+      return result;
+    }
+
+    const { array_ids, viewer_id, picked_data } = pickedResponse;
+
+    const pickedList = [];
+    if (picked_data && picked_data.length > 0) {
+      pickedList.push(...picked_data);
+    } else {
+      for (const pickId of array_ids) {
+        pickedList.push({ id: pickId, viewer_id });
+      }
+    }
+
+    if (pickedList.length <= 1) {
+      return { id: pickedList[0]?.id, viewer_id: pickedList[0]?.viewer_id };
+    }
+
+    const proposedItems = await fetchProposedItems(pickedList);
+    intermediateItems.value = proposedItems;
+
+    const yUI = containerHeight - y;
+    const MENU_WIDTH = 340;
+    const MENU_BASE_HEIGHT = 55;
+    const MENU_ITEM_HEIGHT = 48;
+    const MENU_HEIGHT = MENU_BASE_HEIGHT + proposedItems.length * MENU_ITEM_HEIGHT;
+    const CLAMP_MARGIN = 10;
+    const clampedX = Math.min(
+      Math.max(x, CLAMP_MARGIN),
+      containerWidth - MENU_WIDTH - CLAMP_MARGIN,
+    );
+    let clampedY = yUI;
+    if (yUI + MENU_HEIGHT > containerHeight - CLAMP_MARGIN) {
+      clampedY = Math.max(yUI - MENU_HEIGHT, CLAMP_MARGIN);
+    } else {
+      clampedY = Math.max(yUI, CLAMP_MARGIN);
+    }
+    clampedY = Math.min(
+      Math.max(clampedY, CLAMP_MARGIN),
+      containerHeight - MENU_HEIGHT - CLAMP_MARGIN,
+    );
+
+    intermediateMenuX.value = containerRect.left + clampedX;
+    intermediateMenuY.value = containerRect.top + clampedY;
+    displayIntermediate.value = true;
+
+    /* eslint-disable-next-line promise/avoid-new */
+    return new Promise((resolve) => {
+      resolveIntermediate = (chosenResult) => {
+        displayIntermediate.value = false;
+        resolve(
+          chosenResult
+            ? { id: chosenResult.id, viewer_id: chosenResult.viewer_id }
+            : { id: undefined, viewer_id: undefined },
+        );
+      };
+    });
+  }
+
+  return {
+    displayIntermediate,
+    intermediateItems,
+    intermediateMenuX,
+    intermediateMenuY,
+    getIntermediateMenuStyle,
+    selectIntermediateItem,
+    handleIntermediateMenuUpdate,
+    get_viewer_id,
+  };
+}

package/app/stores/data.js

@@ -24,6 +24,10 @@ export const useDataStore = defineStore("data", () => {
     return data_item;
   }
 
+  async function allItems() {
+    return await data_db.toArray();
+  }
+
   function refItem(id) {
     return useObservable(
       liveQuery(() => data_db.get(id)),
@@ -276,6 +280,7 @@ export const useDataStore = defineStore("data", () => {
   return {
     refAllItems,
     item,
+    allItems,
     refItem,
     meshComponentType,
     formatedMeshComponents,

package/app/utils/local/microservices.js

@@ -37,11 +37,11 @@ async function runScript(
     command = path.join(executablePath(execPath), executableName(execName));
   }
   console.log("runScript", command, args);
-  const child = child_process.spawn(command, args, {
+
+  const child = child_process.spawn(process.platform === "win32" ? command : `"${command}"`, args, {
     encoding: "utf8",
     shell: true,
   });
-
   child.stdout.on("data", (data) => console.log(`[${execName}] ${data.toString()}`));
   child.stderr.on("data", (data) => console.log(`[${execName}] ${data.toString()}`));
 

package/app/utils/name_cleaner.js

@@ -0,0 +1,20 @@
+const DEFAULT_MAX_LENGTH = 16;
+const DEFAULT_SLICE_START = 8;
+const DEFAULT_SLICE_END_OFFSET = 8;
+
+function formatListId(
+  id,
+  maxLength = DEFAULT_MAX_LENGTH,
+  sliceStart = DEFAULT_SLICE_START,
+  sliceEndOffset = DEFAULT_SLICE_END_OFFSET,
+) {
+  if (!id) {
+    return "";
+  }
+  if (id.length <= maxLength) {
+    return id;
+  }
+  return `${id.slice(0, sliceStart)}...${id.slice(id.length - sliceEndOffset)}`;
+}
+
+export { formatListId };

package/internal/stores/hybrid_viewer.js

@@ -42,7 +42,13 @@ function computeAverageBrightness(rect, options) {
   if (!canvas) {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }
+  if (rect.width <= 0 || rect.height <= 0) {
+    return BACKGROUND_GREY_VALUE / RGB_MAX;
+  }
   const { relX, relY, relW, relH } = mapRect(rect, latestImage, canvas.getBoundingClientRect());
+  if (relW <= 0 || relH <= 0) {
+    return BACKGROUND_GREY_VALUE / RGB_MAX;
+  }
   offscreenCanvas.width = SAMPLE_SIZE;
   offscreenCanvas.height = SAMPLE_SIZE;
   try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.19.0",
+  "version": "10.20.0-rc.1",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {
@@ -34,8 +34,8 @@
     "build": ""
   },
   "dependencies": {
-    "@geode/opengeodeweb-back": "latest",
-    "@geode/opengeodeweb-viewer": "latest",
+    "@geode/opengeodeweb-back": "next",
+    "@geode/opengeodeweb-viewer": "next",
     "@google-cloud/run": "3.2.0",
     "@kitware/vtk.js": "33.3.0",
     "@mdi/font": "7.4.47",

package/tests/unit/composables/project_manager.nuxt.test.js

@@ -4,7 +4,6 @@
 // Third party imports
 import { beforeEach, describe, expect, test, vi } from "vitest";
 
-// Local imports
 import { exportProject, importProject } from "@ogw_front/composables/project_manager";
 import { appMode } from "@ogw_front/utils/local/app_mode";
 import { setupActivePinia } from "@ogw_tests/utils";