@geode/opengeodeweb-front 10.32.1 → 10.32.2-rc.2

package/app/components/DragAndDrop.vue

@@ -6,7 +6,7 @@ import DragAndDropOverlay from "./DragAndDropInternal/DragAndDropOverlay.vue";
 const { multiple, accept, loading, showExtensions, fullscreen, inline, showOverlay, texts } =
   defineProps({
     multiple: { type: Boolean, default: false },
-    accept: { type: String, default: "" },
+    accept: { type: [String, Array], default: "" },
     loading: { type: Boolean, default: false },
     showExtensions: { type: Boolean, default: true },
     fullscreen: { type: Boolean, default: false },
@@ -29,6 +29,52 @@ const isInternalDrag = ref(false);
 const dragCounter = ref(0);
 const fileInput = ref(undefined);
 
+const WILDCARD_SUFFIX_LENGTH = 2;
+
+function isFileAccepted(file, acceptValue) {
+  const fileName = (file.name || "").toLowerCase();
+  const fileType = (file.type || "").toLowerCase();
+  const isVext = fileName.endsWith(".vext");
+
+  if (!acceptValue) {
+    return !isVext;
+  }
+  let rules = [];
+  if (Array.isArray(acceptValue)) {
+    rules = acceptValue;
+  } else if (typeof acceptValue === "string") {
+    rules = acceptValue.split(",");
+  }
+  rules = rules.map((rule) => String(rule).trim()).filter(Boolean);
+  if (rules.length === 0) {
+    return !isVext;
+  }
+
+  return rules.some((rule) => {
+    let cleanRule = rule.toLowerCase();
+    if (!cleanRule) {
+      return !isVext;
+    }
+    if (cleanRule === "*" || cleanRule === "*.*") {
+      return !isVext;
+    }
+    if (cleanRule.startsWith("*.")) {
+      cleanRule = cleanRule.slice(1);
+    }
+    if (cleanRule.startsWith(".")) {
+      return fileName.endsWith(cleanRule);
+    }
+    if (cleanRule.includes("/")) {
+      if (cleanRule.endsWith("/*")) {
+        const typeGroup = cleanRule.slice(0, -WILDCARD_SUFFIX_LENGTH);
+        return fileType.startsWith(typeGroup);
+      }
+      return fileType === cleanRule;
+    }
+    return fileName.endsWith(`.${cleanRule}`);
+  });
+}
+
 function triggerFileDialog() {
   fileInput.value?.click();
 }
@@ -58,7 +104,7 @@ function onDrop(event) {
   event.preventDefault();
   dragCounter.value = 0;
   isDragging.value = false;
-  const files = [...event.dataTransfer.files];
+  const files = [...event.dataTransfer.files].filter((file) => isFileAccepted(file, accept));
   if (files.length > 0) {
     emit("files-selected", files);
   }

package/app/components/DragAndDropInternal/DragAndDropInline.vue

@@ -12,7 +12,7 @@ const { isDragging, loading, texts, accept, showExtensions } = defineProps({
       loading: "Loading...",
     }),
   },
-  accept: { type: String, default: "" },
+  accept: { type: [String, Array], default: "" },
   showExtensions: { type: Boolean, required: true },
 });
 
@@ -51,7 +51,7 @@ const emit = defineEmits(["click"]);
           v-if="accept && showExtensions"
           class="text-body-2 text-white opacity-60 bg-transparent"
         >
-          {{ accept }}
+          {{ Array.isArray(accept) ? accept.join(", ") : accept }}
         </v-sheet>
       </v-card-text>
     </GlassCard>

package/app/components/DragAndDropInternal/DragAndDropOverlay.vue

@@ -14,7 +14,7 @@ const { isDragging, showOverlay, fullscreen, loading, texts, multiple, accept, s
       }),
     },
     multiple: { type: Boolean, required: true },
-    accept: { type: String, default: "" },
+    accept: { type: [String, Array], default: "" },
     showExtensions: { type: Boolean, required: true },
   });
 </script>
@@ -76,7 +76,7 @@ const { isDragging, showOverlay, fullscreen, loading, texts, multiple, accept, s
                 :size="fullscreen ? 'x-large' : 'large'"
                 class="px-8 glow-chip"
               >
-                Accepted formats: {{ accept }}
+                Accepted formats: {{ Array.isArray(accept) ? accept.join(", ") : accept }}
               </v-chip>
 
               <v-sheet

package/app/components/FileUploader.vue

@@ -8,7 +8,7 @@ const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"]);
 
 const { multiple, accept, files, autoUpload, showOverlay, mini } = defineProps({
   multiple: { type: Boolean, default: false },
-  accept: { type: String, default: "" },
+  accept: { type: [String, Array], default: "" },
   files: { type: Array, default: () => [] },
   autoUpload: { type: Boolean, default: true },
   showOverlay: { type: Boolean, default: false },

package/app/components/Screenshot.vue

@@ -1,10 +1,10 @@
 <script setup>
 import ToolPanel from "@ogw_front/components/ToolPanel";
 import fileDownload from "js-file-download";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
+import { useClipboardItems } from "@vueuse/core";
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
 import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const show = defineModel({ type: Boolean, default: false });
 
@@ -19,6 +19,8 @@ const output_extension = ref("png");
 const include_background = ref(true);
 const screenshot_type = ref("file");
 
+const { copy } = useClipboardItems();
+
 async function takeScreenshot() {
   const viewerStore = useViewerStore();
   const feedbackStore = useFeedbackStore();
@@ -42,7 +44,7 @@ async function takeScreenshot() {
         } else {
           try {
             const pngBlob = new Blob([response.blob], { type: "image/png" });
-            await navigator.clipboard.write([new ClipboardItem({ "image/png": pngBlob })]);
+            await copy([new ClipboardItem({ "image/png": pngBlob })]);
             feedbackStore.add_success("Screenshot copied to clipboard");
           } catch (error) {
             feedbackStore.add_error(

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

@@ -1,6 +1,7 @@
 <script setup>
 import GlassCard from "@ogw_front/components/GlassCard";
 import { middleTruncate } from "@ogw_front/utils/string";
+import { useClipboard } from "@vueuse/core";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useMenuStore } from "@ogw_front/stores/menu";
 
@@ -19,6 +20,8 @@ const TRUNCATE_MAX_LENGTH = 22;
 const TRUNCATE_START_CHARS = 12;
 const TRUNCATE_END_CHARS = 7;
 
+const { copy, copied } = useClipboard({ copiedDuring: COPIED_TIMEOUT });
+
 const menuStore = useMenuStore();
 const dataStore = useDataStore();
 
@@ -78,17 +81,12 @@ const displayComponentTitle = computed(() => {
   );
 });
 
-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);
+    await copy(targetId);
   } catch (error) {
     console.error("Failed to copy ID:", error);
   }

package/app/components/Viewer/ObjectTree/Base/ItemLabel.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { middleTruncate } from "@ogw_front/utils/string";
+import { useClipboard } from "@vueuse/core";
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
 
 const feedbackStore = useFeedbackStore();
+const { copy } = useClipboard();
 
 const { item, isLeaf } = defineProps({
   item: { type: Object, required: true },
@@ -52,7 +54,7 @@ const tooltipDisabled = computed(() => {
 });
 
 async function copyToClipboard(text, label) {
-  await navigator.clipboard.writeText(text);
+  await copy(text);
   feedbackStore.add_success(`${label} copied to clipboard`);
 }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.32.1",
+  "version": "10.32.2-rc.2",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {
@@ -39,8 +39,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/components/DragAndDrop.nuxt.test.js

@@ -0,0 +1,89 @@
+// Third party imports
+import { describe, expect, test } from "vitest";
+import { flushPromises } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+
+// Local imports
+import { setupActivePinia, vuetify } from "@ogw_tests/utils";
+import DragAndDrop from "@ogw_front/components/DragAndDrop";
+
+describe("drag and drop", () => {
+  const pinia = setupActivePinia();
+
+  test("ignores dropped files that do not match accept prop", async () => {
+    const wrapper = await mountSuspended(DragAndDrop, {
+      global: {
+        plugins: [vuetify, pinia],
+      },
+      props: {
+        accept: ".vtp,.vts",
+      },
+    });
+
+    const dropEvent = new Event("drop", { bubbles: true, cancelable: true });
+    Object.defineProperty(dropEvent, "dataTransfer", {
+      value: {
+        files: [new File(["extension_data"], "plugin.vext")],
+        types: ["Files"],
+      },
+    });
+
+    globalThis.dispatchEvent(dropEvent);
+    await flushPromises();
+
+    expect(wrapper.emitted("files-selected")).toBeUndefined();
+  });
+
+  test("emits files-selected when dropped file matches accept prop", async () => {
+    const wrapper = await mountSuspended(DragAndDrop, {
+      global: {
+        plugins: [vuetify, pinia],
+      },
+      props: {
+        accept: ".vtp,.vts",
+      },
+    });
+
+    const validFile = new File(["mesh_data"], "model.vtp");
+    const dropEvent = new Event("drop", { bubbles: true, cancelable: true });
+    Object.defineProperty(dropEvent, "dataTransfer", {
+      value: {
+        files: [validFile],
+        types: ["Files"],
+      },
+    });
+
+    globalThis.dispatchEvent(dropEvent);
+    await flushPromises();
+
+    expect(wrapper.emitted("files-selected")).toBeDefined();
+    expect(wrapper.emitted("files-selected")[0][0]).toStrictEqual([validFile]);
+  });
+
+  test("accepts general files but excludes .vext when accept prop is empty", async () => {
+    const wrapper = await mountSuspended(DragAndDrop, {
+      global: {
+        plugins: [vuetify, pinia],
+      },
+      props: {
+        accept: "",
+      },
+    });
+
+    const dataFile = new File(["any_data"], "data_file.txt");
+    const extensionFile = new File(["extension_data"], "plugin.vext");
+    const dropEvent = new Event("drop", { bubbles: true, cancelable: true });
+    Object.defineProperty(dropEvent, "dataTransfer", {
+      value: {
+        files: [dataFile, extensionFile],
+        types: ["Files"],
+      },
+    });
+
+    globalThis.dispatchEvent(dropEvent);
+    await flushPromises();
+
+    expect(wrapper.emitted("files-selected")).toBeDefined();
+    expect(wrapper.emitted("files-selected")[0][0]).toStrictEqual([dataFile]);
+  });
+});