@geode/opengeodeweb-front 10.34.0-rc.13 → 10.34.0-rc.15

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import GlassCard from "@ogw_front/components/GlassCard.vue";
 import { middleTruncate } from "@ogw_front/utils/string";
-import { useClipboard } from "@vueuse/core";
+import { useCopyToClipboard } from "@ogw_front/composables/copy_to_clipboard";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useMenuStore } from "@ogw_front/stores/menu";
 
@@ -17,7 +17,6 @@ const emit = defineEmits<{
   "update:show": [value: boolean];
 }>();
 
-const COPIED_TIMEOUT = 1500;
 const MAX_SHORT_ID_LENGTH = 15;
 const ID_SLICE_START = 8;
 const ID_SLICE_END_OFFSET = 7;
@@ -25,7 +24,7 @@ const TRUNCATE_MAX_LENGTH = 22;
 const TRUNCATE_START_CHARS = 12;
 const TRUNCATE_END_CHARS = 7;
 
-const { copy, copied } = useClipboard({ copiedDuring: COPIED_TIMEOUT });
+const { copy, copied } = useCopyToClipboard();
 const copiedId = ref("");
 
 function isCopied(id: string | undefined): boolean {

package/app/components/Viewer/Options/ColorPicker.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-// oxlint-disable id-length
+// oxlint-disable id-length since vuetify require { r,g,b} format to work
+import { formatColorString, parseColorString } from "@ogw_front/utils/color_picker";
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import { useCopyToClipboard } from "@ogw_front/composables/copy_to_clipboard";
 
 interface Props {
   disabledAlpha?: boolean;
@@ -8,12 +10,15 @@ interface Props {
 
 const { disabledAlpha = false } = defineProps<Props>();
 
-// The useMousePressed composable only needs the underlying DOM element (it unwraps a component ref's $el at runtime); typing this as the actual Vuetify component instance produces a union too complex for TS to represent.
-const colorPickerRef = useTemplateRef<HTMLElement>("colorPickerRef");
+const colorPickerWrapperRef = useTemplateRef<HTMLElement>("colorPickerWrapperRef");
+const { pressed } = useMousePressed({ target: colorPickerWrapperRef });
+
 const model = defineModel<RGBAColor>();
-const { pressed } = useMousePressed({ target: colorPickerRef });
+const { copy, copied } = useCopyToClipboard();
+
+const currentMode = ref(disabledAlpha ? "rgb" : "rgba");
+const colorInputText = ref("");
 
-// The model is always bound by every current caller (ColoringTypeSelector.vue, AttributeSelector.vue); defineModel can't express that as a required prop without breaking its optional v-model contract, so this reads it as defined here.
 const initialColor = model.value as RGBAColor;
 const vuetifyColor = ref({
   r: initialColor.red,
@@ -22,69 +27,246 @@ const vuetifyColor = ref({
   a: initialColor.alpha,
 });
 
+function updateInputTextFromColor(red: number, green: number, blue: number, alpha: number) {
+  colorInputText.value =
+    disabledAlpha || currentMode.value === "rgb"
+      ? `${red}, ${green}, ${blue}`
+      : `${red}, ${green}, ${blue}, ${alpha}`;
+}
+
+interface VuetifyColor {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+function commitColorToModel() {
+  const { r: red, g: green, b: blue, a: alpha } = vuetifyColor.value;
+  model.value = { red, green, blue, alpha };
+}
+
+function onPickerUpdate(color: VuetifyColor) {
+  const red = Math.round(color.r);
+  const green = Math.round(color.g);
+  const blue = Math.round(color.b);
+  const alpha = disabledAlpha ? 1 : Number(color.a.toFixed(2));
+
+  vuetifyColor.value = { r: red, g: green, b: blue, a: alpha };
+  updateInputTextFromColor(red, green, blue, alpha);
+  if (!pressed.value) {
+    commitColorToModel();
+  }
+}
+
+function toggleMode() {
+  if (disabledAlpha) {
+    return;
+  }
+  currentMode.value = currentMode.value === "rgba" ? "rgb" : "rgba";
+  const { r: red, g: green, b: blue, a: alpha } = vuetifyColor.value;
+  updateInputTextFromColor(red, green, blue, alpha);
+}
+
+async function copyToClipboard() {
+  const { r: red, g: green, b: blue, a: alpha } = vuetifyColor.value;
+  await copy(formatColorString({ red, green, blue, alpha }, currentMode.value));
+}
+
+function parseAndApplyText(text: string) {
+  const parsed = parseColorString(text);
+  if (!parsed) {
+    return false;
+  }
+
+  const { red, green, blue, alpha: rawAlpha } = parsed;
+  const alpha = disabledAlpha ? 1 : rawAlpha;
+
+  if (!disabledAlpha && alpha < 1) {
+    currentMode.value = "rgba";
+  }
+
+  vuetifyColor.value = { r: red, g: green, b: blue, a: alpha };
+  model.value = { red, green, blue, alpha };
+  updateInputTextFromColor(red, green, blue, alpha);
+  return true;
+}
+
+function onInputPaste(event: ClipboardEvent) {
+  event.preventDefault();
+  const text = event.clipboardData!.getData("text/plain");
+  parseAndApplyText(text);
+}
+
+function onInputCommit() {
+  if (!parseAndApplyText(colorInputText.value)) {
+    const { r: red, g: green, b: blue, a: alpha } = vuetifyColor.value;
+    updateInputTextFromColor(red, green, blue, alpha);
+  }
+}
+
 watch(
   model,
   (newValue) => {
     if (!newValue) {
       return;
     }
-    const hasChanged =
-      newValue.red !== vuetifyColor.value.r ||
-      newValue.green !== vuetifyColor.value.g ||
-      newValue.blue !== vuetifyColor.value.b ||
-      newValue.alpha !== vuetifyColor.value.a;
-    if (!hasChanged) {
-      return;
+    const { red, green, blue, alpha } = newValue;
+    if (
+      vuetifyColor.value.r !== red ||
+      vuetifyColor.value.g !== green ||
+      vuetifyColor.value.b !== blue ||
+      vuetifyColor.value.a !== alpha
+    ) {
+      vuetifyColor.value = { r: red, g: green, b: blue, a: alpha };
     }
-    vuetifyColor.value = {
-      r: newValue.red,
-      g: newValue.green,
-      b: newValue.blue,
-      a: newValue.alpha,
-    };
+    updateInputTextFromColor(red, green, blue, alpha);
   },
-  { deep: true },
+  { deep: true, immediate: true },
 );
 
-watch(pressed, (value) => {
-  if (!value) {
-    model.value = {
-      red: vuetifyColor.value.r,
-      green: vuetifyColor.value.g,
-      blue: vuetifyColor.value.b,
-      alpha: vuetifyColor.value.a,
-    };
+watch(pressed, (isPressed) => {
+  if (!isPressed) {
+    commitColorToModel();
   }
 });
+
+watch(
+  () => disabledAlpha,
+  (disabled) => {
+    if (disabled) {
+      currentMode.value = "rgb";
+      if (model.value) {
+        model.value = { ...model.value, alpha: 1 };
+      }
+    }
+  },
+);
 </script>
 
 <template>
-  <v-color-picker
-    ref="colorPickerRef"
-    data-testid="colorPicker"
-    v-model="vuetifyColor"
-    flat
-    canvas-height="75"
-    hide-inputs
-    hide-eye-dropper
-    :disabled-alpha="disabledAlpha"
-    width="220"
-    :mode="disabledAlpha ? 'rgb' : 'rgba'"
-    class="mx-auto"
-  />
+  <div
+    ref="colorPickerWrapperRef"
+    class="color-picker-wrapper mx-auto rounded-lg overflow-hidden border"
+  >
+    <v-color-picker
+      data-testid="colorPicker"
+      :model-value="vuetifyColor"
+      @update:model-value="onPickerUpdate"
+      mode="rgba"
+      flat
+      canvas-height="75"
+      hide-eye-dropper
+      hide-inputs
+      :disabled-alpha="disabledAlpha"
+      width="220"
+      class="mx-auto bg-transparent"
+    />
+
+    <div class="color-picker-controls pa-2 pt-0">
+      <div class="d-flex align-center justify-space-between px-1 mb-1">
+        <div class="d-flex align-center ga-1">
+          <span
+            class="text-caption font-weight-medium text-uppercase text-medium-emphasis"
+            style="font-size: 0.68rem"
+          >
+            {{ currentMode }}
+          </span>
+          <v-btn
+            v-if="!disabledAlpha"
+            icon
+            density="compact"
+            variant="text"
+            size="small"
+            @click="toggleMode"
+            v-tooltip="'Swap mode (RGB / RGBA)'"
+          >
+            <v-icon icon="mdi-swap-horizontal" size="16" />
+          </v-btn>
+        </div>
+
+        <v-btn
+          data-testid="copyColorBtn"
+          icon
+          density="compact"
+          variant="text"
+          size="small"
+          @click="copyToClipboard"
+          v-tooltip="'Copy to clipboard'"
+        >
+          <v-icon
+            :icon="copied ? 'mdi-check' : 'mdi-content-copy'"
+            size="14"
+            :color="copied ? 'success' : undefined"
+          />
+        </v-btn>
+      </div>
+
+      <input
+        data-testid="colorInput"
+        v-model="colorInputText"
+        class="color-input-field"
+        type="text"
+        spellcheck="false"
+        autocomplete="off"
+        @paste="onInputPaste"
+        @change="onInputCommit"
+        @keydown.enter.prevent="onInputCommit"
+      />
+    </div>
+  </div>
 </template>
 
 <style scoped>
+.color-picker-wrapper {
+  width: 220px;
+  background-color: rgba(33, 33, 33, 0.95);
+  border: 1px solid rgba(255, 255, 255, 0.12) !important;
+  outline: none;
+}
+
+:deep(.v-color-picker) {
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+
+:deep(.v-color-picker-canvas),
+:deep(.v-color-picker__preview),
+:deep(.v-color-picker__controls) {
+  box-shadow: none !important;
+}
+
 :deep(.v-color-picker__controls) {
-  padding: 8px !important;
+  padding: 4px 8px 0 !important;
 }
 
 :deep(.v-color-picker__dot) {
   width: 18px !important;
   height: 18px !important;
+  box-shadow: none !important;
 }
 
 :deep(.v-color-picker__preview) {
   margin-bottom: 0 !important;
 }
+
+.color-input-field {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 10px;
+  background-color: rgba(255, 255, 255, 0.08);
+  border: 1px solid transparent;
+  border-radius: 6px;
+  outline: none;
+  color: inherit;
+  font-size: 0.82rem;
+  font-family: monospace;
+  letter-spacing: 0.5px;
+  text-align: center;
+  transition: border-color 0.15s ease;
+}
+
+.color-input-field:focus {
+  border-color: rgba(255, 255, 255, 0.3);
+}
 </style>

package/app/composables/copy_to_clipboard.ts

@@ -0,0 +1,7 @@
+import { useClipboard } from "@vueuse/core";
+
+const COPIED_FEEDBACK_TIMEOUT = 1500;
+
+export function useCopyToClipboard(): ReturnType<typeof useClipboard> {
+  return useClipboard({ copiedDuring: COPIED_FEEDBACK_TIMEOUT });
+}

package/app/stores/app.ts

@@ -140,14 +140,21 @@ export const useAppStore = defineStore("app", () => {
     getExtensionEnabled,
   } = useAppExtensions();
 
-  // oxlint-disable-next-line unicorn/consistent-function-scoping
-  async function upload(file: File, callbacks: RequestHandlers = {}): Promise<unknown> {
-    const store = useAppStore();
+  const request_counter = ref(0);
+  function start_request(): void {
+    request_counter.value += 1;
+  }
+  function stop_request(): void {
+    request_counter.value -= 1;
+  }
+  const is_busy = computed(() => request_counter.value > 0);
+
+  async function upload(file: Readonly<File>, callbacks: RequestHandlers = {}): Promise<unknown> {
     const schema = opengeodeweb_front_schemas.api.local.extensions.upload;
     const { PROJECT: projectName } = useRuntimeConfig().public;
     const params = { projectName };
     const result = await upload_file(
-      store,
+      { $id: "app", base_url: base_url.value, start_request, stop_request },
       { schema, file, params },
       {
         ...callbacks,
@@ -163,13 +170,13 @@ export const useAppStore = defineStore("app", () => {
 
   // `TResult` is asserted, not verified, at the single `return result as TResult` boundary below: the backend response is only checked against `schema` at runtime, so callers' `TResult` is a contract with the schema, not something this function can prove.
   // oxlint-disable-next-line unicorn/consistent-function-scoping
+  // oxlint-disable-next-line unicorn/consistent-function-scoping
   async function request<TResult = unknown>(
     { schema, params }: { schema: JsonRpcSchema; params?: Record<string, unknown> },
     callbacks: RequestHandlers = {},
   ): Promise<TResult> {
-    const store = useAppStore();
     const result = await api_fetch(
-      store,
+      { $id: "app", base_url: base_url.value, start_request, stop_request },
       // The app store is only ever used with HTTP ("front") schemas, which always carry `methods`; the wider JsonRpcSchema param above is kept as-is to match this action's public signature (e.g. relayed from get_version-style callers that only know about the shared, looser schema shape).
       // oxlint-disable-next-line no-unsafe-type-assertion -- narrowing optional `methods` to required is safe here; see comment above.
       { schema: schema as JsonRpcSchema & { methods: string[] }, params },
@@ -186,15 +193,6 @@ export const useAppStore = defineStore("app", () => {
     return result as TResult;
   }
 
-  const request_counter = ref(0);
-  function start_request(): void {
-    request_counter.value += 1;
-  }
-  function stop_request(): void {
-    request_counter.value -= 1;
-  }
-  const is_busy = computed(() => request_counter.value > 0);
-
   const projectFolderPath = ref("");
 
   async function createProjectFolder(): Promise<unknown> {

package/app/stores/viewer.ts

@@ -58,6 +58,12 @@ export const useViewerStore = defineStore(
       viewer_url += "/ws";
       return viewer_url;
     });
+    function start_request(): void {
+      request_counter.value += 1;
+    }
+    function stop_request(): void {
+      request_counter.value -= 1;
+    }
     const is_busy = computed(() => request_counter.value > 0);
     function toggle_picking_mode(value: boolean): void {
       picking_mode.value = value;
@@ -75,9 +81,15 @@ export const useViewerStore = defineStore(
       },
       callbacks: RequestHandlers = {},
     ): Promise<unknown> {
-      const store = useViewerStore();
+      const microservice = {
+        $id: "viewer",
+        client: client.value,
+        base_url: base_url.value,
+        start_request,
+        stop_request,
+      };
       const result = await viewer_call(
-        store,
+        microservice,
         {
           schema,
           params,
@@ -148,13 +160,7 @@ export const useViewerStore = defineStore(
         }
       });
     }
-    function start_request(): void {
-      request_counter.value += 1;
-    }
-    function stop_request(): void {
-      request_counter.value -= 1;
-    }
-    async function launch(args: { projectFolderPath?: string } = {}): Promise<unknown> {
+    async function launch(args: Readonly<{ projectFolderPath?: string }> = {}): Promise<unknown> {
       const appStore = useAppStore();
       const { COMMAND_VIEWER, NUXT_ROOT_PATH } = useRuntimeConfig().public;
       const schema = opengeodeweb_front_schemas.api.local.app.run_viewer;

package/app/utils/color_picker.js

@@ -0,0 +1,54 @@
+const RGB_MAX = 255;
+const PERCENT_MAX = 100;
+
+function parseComponent(val, max = RGB_MAX) {
+  if (val.endsWith("%")) {
+    return (Number(val.slice(0, -1)) / PERCENT_MAX) * max;
+  }
+  return Number(val);
+}
+
+function parseColorString(colorText) {
+  if (!colorText || typeof colorText !== "string") {
+    return undefined;
+  }
+
+  const numbersMatch = colorText.match(/[\d.]+%?/gu);
+  if (!numbersMatch || (numbersMatch.length !== 3 && numbersMatch.length !== 4)) {
+    return undefined;
+  }
+
+  const rawRed = parseComponent(numbersMatch[0]);
+  const rawGreen = parseComponent(numbersMatch[1]);
+  const rawBlue = parseComponent(numbersMatch[2]);
+
+  const red = Math.min(RGB_MAX, Math.max(0, Math.round(rawRed)));
+  const green = Math.min(RGB_MAX, Math.max(0, Math.round(rawGreen)));
+  const blue = Math.min(RGB_MAX, Math.max(0, Math.round(rawBlue)));
+
+  let alpha = 1;
+  if (numbersMatch.length === 4) {
+    const rawAlpha = parseComponent(numbersMatch[3], 1);
+    const calculatedAlpha = rawAlpha > 1 ? rawAlpha / RGB_MAX : rawAlpha;
+    const roundedAlpha = Number(calculatedAlpha.toFixed(2));
+    alpha = Math.min(1, Math.max(0, roundedAlpha));
+  }
+
+  if (Number.isNaN(red) || Number.isNaN(green) || Number.isNaN(blue) || Number.isNaN(alpha)) {
+    return undefined;
+  }
+
+  return { red, green, blue, alpha };
+}
+
+function formatColorString(color, mode) {
+  const { red, green, blue, alpha } = color;
+  const roundRed = Math.round(red);
+  const roundGreen = Math.round(green);
+  const roundBlue = Math.round(blue);
+  return mode === "rgb"
+    ? `rgb(${roundRed}, ${roundGreen}, ${roundBlue})`
+    : `rgba(${roundRed}, ${roundGreen}, ${roundBlue}, ${alpha})`;
+}
+
+export { parseColorString, formatColorString };

package/internal/utils/api_fetch.ts

@@ -57,6 +57,7 @@ function toFetchErrorResponseLike(response: unknown): FetchErrorResponseLike {
   };
 }
 
+// oxlint-disable-next-line max-lines-per-function
 async function api_fetch(
   microservice: Microservice,
   { schema, params = {}, headers = {} }: ApiFetchParams,
@@ -65,7 +66,8 @@ async function api_fetch(
     response_function,
     response_error_function,
     timeout,
-  }: RequestHandlersWithValidation & { timeout?: number } = {},
+    skip_feedback_error,
+  }: RequestHandlersWithValidation & { timeout?: number; skip_feedback_error?: boolean } = {},
 ): Promise<unknown> {
   console.log("[API] Fetching", microservice.base_url);
   const feedbackStore = useFeedbackStore();
@@ -84,12 +86,14 @@ async function api_fetch(
       request_error_function(error: unknown) {
         microservice.stop_request();
         const typedError = toFetchErrorLike(error);
-        feedbackStore.add_error(
-          typedError.code ?? 0,
-          schema.$id,
-          typedError.message ?? "",
-          typedError.stack ?? "",
-        );
+        if (!skip_feedback_error) {
+          feedbackStore.add_error(
+            typedError.code ?? 0,
+            schema.$id,
+            typedError.message ?? "",
+            typedError.stack ?? "",
+          );
+        }
         if (request_error_function) {
           request_error_function(error);
         }
@@ -104,12 +108,14 @@ async function api_fetch(
       response_error_function(response: unknown) {
         microservice.stop_request();
         const typedResponse = toFetchErrorResponseLike(response);
-        feedbackStore.add_error(
-          typedResponse.status ?? 0,
-          schema.$id,
-          typedResponse.name ?? "",
-          typedResponse.description ?? "",
-        );
+        if (!skip_feedback_error) {
+          feedbackStore.add_error(
+            typedResponse.status ?? 0,
+            schema.$id,
+            typedResponse.name ?? "",
+            typedResponse.description ?? "",
+          );
+        }
         if (response_error_function) {
           response_error_function(response);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.34.0-rc.13",
+  "version": "10.34.0-rc.15",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {

package/shared/utils/fetch_raw.ts

@@ -67,8 +67,8 @@ async function performFetch({
     },
     async onResponse({
       response,
-      // oxlint-disable-next-line eslint/id-length -- mirrors the real ofetch/vitest API field name (`ok`/`fn`)
     }: {
+      // oxlint-disable-next-line eslint/id-length -- mirrors the real ofetch/vitest API field name (`ok`/`fn`)
       response: { ok: boolean; _data?: unknown };
     }) {
       if (response.ok && response_function) {