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

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

@@ -1,83 +1,272 @@
-<script setup>
-// oxlint-disable id-length
-defineProps({
-  disabledAlpha: {
-    type: Boolean,
-    default: false,
-  },
-});
+<script setup lang="ts">
+// 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;
+}
+
+const { disabledAlpha = false } = defineProps<Props>();
+
+const colorPickerWrapperRef = useTemplateRef<HTMLElement>("colorPickerWrapperRef");
+const { pressed } = useMousePressed({ target: colorPickerWrapperRef });
+
+const model = defineModel<RGBAColor>();
+const { copy, copied } = useCopyToClipboard();
 
-const colorPickerRef = useTemplateRef("colorPickerRef");
-const model = defineModel({ type: Object });
-const { pressed } = useMousePressed({ target: colorPickerRef });
+const currentMode = ref(disabledAlpha ? "rgb" : "rgba");
+const colorInputText = ref("");
 
+const initialColor = model.value as RGBAColor;
 const vuetifyColor = ref({
-  r: model.value.red,
-  g: model.value.green,
-  b: model.value.blue,
-  a: model.value.alpha,
+  r: initialColor.red,
+  g: initialColor.green,
+  b: initialColor.blue,
+  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) => {
-    const hasChanged =
-      newValue.red !== vuetifyColor.value.r ||
-      newValue.green !== vuetifyColor.value.g ||
-      newValue.blue !== vuetifyColor.value.b ||
-      newValue.alpha !== vuetifyColor.value.a;
-    if (!hasChanged) {
+    if (!newValue) {
       return;
     }
-    vuetifyColor.value = {
-      r: newValue.red,
-      g: newValue.green,
-      b: newValue.blue,
-      a: newValue.alpha,
-    };
+    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 };
+    }
+    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) {
-  padding: 8px !important;
+  box-shadow: none !important;
+}
+
+:deep(.v-color-picker__controls) {
+  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/components/Viewer/Options/ColoringTypeSelector.vue

@@ -1,68 +1,83 @@
-<script setup>
+<script setup lang="ts">
+import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsAttributeSelector from "@ogw_front/components/Viewer/Options/AttributeSelector.vue";
 import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
 import ViewerOptionsTexturesSelector from "@ogw_front/components/Viewer/Options/TexturesSelector.vue";
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 
-const coloring_style_key = defineModel("coloring_style_key", { type: String });
+interface Texture {
+  id: string;
+  texture_name: string;
+}
 
-const color = defineModel("color", { type: Object });
-const textures = defineModel("textures", { type: Array });
+interface CapabilityConfig {
+  available?: boolean;
+  hasColorMap?: boolean;
+}
 
-const vertex_attribute_name = defineModel("vertex_attribute_name", { type: String });
-const vertex_attribute_item = defineModel("vertex_attribute_item", { type: Number });
-const vertex_attribute_range = defineModel("vertex_attribute_range", { type: Array });
-const vertex_attribute_color_map = defineModel("vertex_attribute_color_map", { type: String });
-const vertex_attribute_no_data_color = defineModel("vertex_attribute_no_data_color", {
-  type: Object,
-});
+interface Schemas {
+  vertex?: JsonRpcSchema;
+  edge?: JsonRpcSchema;
+  cell?: JsonRpcSchema;
+  polygon?: JsonRpcSchema;
+  polyhedron?: JsonRpcSchema;
+}
 
-const edge_attribute_name = defineModel("edge_attribute_name", { type: String });
-const edge_attribute_item = defineModel("edge_attribute_item", { type: Number });
-const edge_attribute_range = defineModel("edge_attribute_range", { type: Array });
-const edge_attribute_color_map = defineModel("edge_attribute_color_map", { type: String });
-const edge_attribute_no_data_color = defineModel("edge_attribute_no_data_color", { type: Object });
+const coloring_style_key = defineModel<string>("coloring_style_key");
 
-const cell_attribute_name = defineModel("cell_attribute_name", { type: String });
-const cell_attribute_item = defineModel("cell_attribute_item", { type: Number });
-const cell_attribute_range = defineModel("cell_attribute_range", { type: Array });
-const cell_attribute_color_map = defineModel("cell_attribute_color_map", { type: String });
-const cell_attribute_no_data_color = defineModel("cell_attribute_no_data_color", { type: Object });
+const color = defineModel<RGBAColor>("color");
+const textures = defineModel<Texture[]>("textures");
 
-const polygon_attribute_name = defineModel("polygon_attribute_name", { type: String });
-const polygon_attribute_item = defineModel("polygon_attribute_item", { type: Number });
-const polygon_attribute_range = defineModel("polygon_attribute_range", { type: Array });
-const polygon_attribute_color_map = defineModel("polygon_attribute_color_map", { type: String });
-const polygon_attribute_no_data_color = defineModel("polygon_attribute_no_data_color", {
-  type: Object,
-});
+const vertex_attribute_name = defineModel<string>("vertex_attribute_name");
+const vertex_attribute_item = defineModel<number>("vertex_attribute_item");
+const vertex_attribute_range = defineModel<(number | undefined)[]>("vertex_attribute_range");
+const vertex_attribute_color_map = defineModel<string>("vertex_attribute_color_map");
+const vertex_attribute_no_data_color = defineModel<RGBAColor>("vertex_attribute_no_data_color");
 
-const polyhedron_attribute_name = defineModel("polyhedron_attribute_name", { type: String });
-const polyhedron_attribute_item = defineModel("polyhedron_attribute_item", { type: Number });
-const polyhedron_attribute_range = defineModel("polyhedron_attribute_range", { type: Array });
-const polyhedron_attribute_color_map = defineModel("polyhedron_attribute_color_map", {
-  type: String,
-});
-const polyhedron_attribute_no_data_color = defineModel("polyhedron_attribute_no_data_color", {
-  type: Object,
-});
+const edge_attribute_name = defineModel<string>("edge_attribute_name");
+const edge_attribute_item = defineModel<number>("edge_attribute_item");
+const edge_attribute_range = defineModel<(number | undefined)[]>("edge_attribute_range");
+const edge_attribute_color_map = defineModel<string>("edge_attribute_color_map");
+const edge_attribute_no_data_color = defineModel<RGBAColor>("edge_attribute_no_data_color");
 
-const { id, componentIds, capabilities, schemas, allowRandom } = defineProps({
-  id: { type: String, required: true },
-  componentIds: { type: Array, default: undefined },
-  capabilities: {
-    type: Object,
-    default: () => ({}),
-  },
-  schemas: {
-    type: Object,
-    default: () => ({}),
-  },
-  allowRandom: {
-    type: Boolean,
-    default: false,
-  },
-});
+const cell_attribute_name = defineModel<string>("cell_attribute_name");
+const cell_attribute_item = defineModel<number>("cell_attribute_item");
+const cell_attribute_range = defineModel<(number | undefined)[]>("cell_attribute_range");
+const cell_attribute_color_map = defineModel<string>("cell_attribute_color_map");
+const cell_attribute_no_data_color = defineModel<RGBAColor>("cell_attribute_no_data_color");
+
+const polygon_attribute_name = defineModel<string>("polygon_attribute_name");
+const polygon_attribute_item = defineModel<number>("polygon_attribute_item");
+const polygon_attribute_range = defineModel<(number | undefined)[]>("polygon_attribute_range");
+const polygon_attribute_color_map = defineModel<string>("polygon_attribute_color_map");
+const polygon_attribute_no_data_color = defineModel<RGBAColor>("polygon_attribute_no_data_color");
+
+const polyhedron_attribute_name = defineModel<string>("polyhedron_attribute_name");
+const polyhedron_attribute_item = defineModel<number>("polyhedron_attribute_item");
+const polyhedron_attribute_range = defineModel<(number | undefined)[]>(
+  "polyhedron_attribute_range",
+);
+const polyhedron_attribute_color_map = defineModel<string>("polyhedron_attribute_color_map");
+const polyhedron_attribute_no_data_color = defineModel<RGBAColor>(
+  "polyhedron_attribute_no_data_color",
+);
+
+interface Props {
+  id: string;
+  componentIds?: string[];
+  capabilities?: Record<string, CapabilityConfig>;
+  schemas?: Schemas;
+  allowRandom?: boolean;
+}
+
+const {
+  id,
+  componentIds = undefined,
+  capabilities = {},
+  schemas = {},
+  allowRandom = false,
+} = defineProps<Props>();
 
 const vertexSchema = schemas.vertex || back_schemas.opengeodeweb_back.vertex_attribute_names;
 const edgeSchema = schemas.edge || back_schemas.opengeodeweb_back.edge_attribute_names;
@@ -71,37 +86,39 @@ const polygonSchema = schemas.polygon || back_schemas.opengeodeweb_back.polygon_
 const polyhedronSchema =
   schemas.polyhedron || back_schemas.opengeodeweb_back.polyhedron_attribute_names;
 
-function isAvailable(key) {
+function isAvailable(key: string): boolean {
   if (capabilities[key] && capabilities[key].available === false) {
     return false;
   }
   return true;
 }
 
-function hasColorMap(key) {
+function hasColorMap(key: string): boolean {
   if (capabilities[key] && capabilities[key].hasColorMap === false) {
     return false;
   }
   return true;
 }
 
-const has_color = computed(() => color.value !== undefined && isAvailable("color"));
-const has_textures = computed(() => textures.value !== undefined && isAvailable("textures"));
-const has_vertex = computed(
+const has_color = computed<boolean>(() => color.value !== undefined && isAvailable("color"));
+const has_textures = computed<boolean>(
+  () => textures.value !== undefined && isAvailable("textures"),
+);
+const has_vertex = computed<boolean>(
   () =>
     vertex_attribute_range.value !== undefined && isAvailable("vertex") && hasColorMap("vertex"),
 );
-const has_edge = computed(
+const has_edge = computed<boolean>(
   () => edge_attribute_range.value !== undefined && isAvailable("edge") && hasColorMap("edge"),
 );
-const has_cells = computed(
+const has_cells = computed<boolean>(
   () => cell_attribute_range.value !== undefined && isAvailable("cell") && hasColorMap("cell"),
 );
-const has_polygons = computed(
+const has_polygons = computed<boolean>(
   () =>
     polygon_attribute_range.value !== undefined && isAvailable("polygon") && hasColorMap("polygon"),
 );
-const has_polyhedra = computed(
+const has_polyhedra = computed<boolean>(
   () =>
     polyhedron_attribute_range.value !== undefined &&
     isAvailable("polyhedron") &&
@@ -119,7 +136,7 @@ const polyhedron_dict = {
   name: "Polyhedron attribute",
   value: "polyhedron",
 };
-const coloring_styles = computed(() => {
+const coloring_styles = computed<{ labels: string[]; values: string[] }>(() => {
   const array = [];
   if (has_color.value) {
     array.push(color_dict);
@@ -152,9 +169,9 @@ const coloring_styles = computed(() => {
   return { labels, values };
 });
 
-const coloring_style_label = ref("");
+const coloring_style_label = ref<string>("");
 
-const active_key = computed(() => {
+const active_key = computed<string | undefined>(() => {
   const index = coloring_styles.value.labels.indexOf(coloring_style_label.value);
   return index === -1 ? coloring_style_key.value : coloring_styles.value.values[index];
 });
@@ -177,7 +194,7 @@ watch(
       polygon: polygon_attribute_name.value,
       polyhedron: polyhedron_attribute_name.value,
     };
-    if (!(key in names) || names[key]) {
+    if (key === undefined || !(key in names) || names[key as keyof typeof names]) {
       coloring_style_key.value = key;
     }
   },
@@ -186,9 +203,12 @@ watch(
 watch(
   coloring_style_key,
   (value) => {
+    if (value === undefined) {
+      return;
+    }
     const index = coloring_styles.value.values.indexOf(value);
     if (index !== -1) {
-      coloring_style_label.value = coloring_styles.value.labels[index];
+      coloring_style_label.value = coloring_styles.value.labels[index] ?? "";
     }
   },
   { immediate: true },

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

@@ -1,39 +1,43 @@
-<script setup>
+<script setup lang="ts">
 import AttributeRangeSelector from "@ogw_front/components/Viewer/Options/AttributeRangeSelector.vue";
 import ColorMapList from "@ogw_front/components/Viewer/Options/ColorMapList.vue";
 
 import { getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
 import { useGlobalAttributeStyle } from "@ogw_front/composables/global_attribute_style";
 
-const { dataId, x, y } = defineProps({
-  dataId: { required: false, type: String, default: undefined },
-  x: { required: true, type: Number },
-  y: { required: true, type: Number },
-});
+interface Props {
+  dataId?: string;
+  x: number;
+  y: number;
+}
+
+const { dataId = undefined, x, y } = defineProps<Props>();
 
-const show = defineModel("show", { type: Boolean, default: false });
+const show = defineModel<boolean>("show", { default: false });
 
-const dataIdRef = computed(() => dataId);
+const dataIdRef = computed<string>(() => dataId);
 const { currentColormap, currentRange, applyGlobalColormap, resetGlobalRange } =
   useGlobalAttributeStyle(dataIdRef);
 
-const minimum = computed({
+const minimum = computed<number>({
   get: () => currentRange.value[0],
   set: (val) => {
     currentRange.value = [val, currentRange.value[1]];
   },
 });
 
-const maximum = computed({
+const maximum = computed<number>({
   get: () => currentRange.value[1],
   set: (val) => {
     currentRange.value = [currentRange.value[0], val];
   },
 });
 
-const quickColormapPresets = computed(() => getPresetsWithCurrentAtTop(currentColormap.value));
+const quickColormapPresets = computed<{ Name: string }[]>(() =>
+  getPresetsWithCurrentAtTop(currentColormap.value),
+);
 
-async function onQuickColormapSelect(preset) {
+async function onQuickColormapSelect(preset: { Name: string }): Promise<void> {
   await applyGlobalColormap(preset.Name);
 }
 </script>

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

@@ -1,9 +1,11 @@
-<script setup>
-const { title } = defineProps({
-  title: { type: String, required: true },
-});
+<script setup lang="ts">
+interface Props {
+  title: string;
+}
+
+const { title } = defineProps<Props>();
 
-const isCollapsed = ref(false);
+const isCollapsed = ref<boolean>(false);
 </script>
 
 <template>

package/app/components/Viewer/Options/Sliders/Size.vue

@@ -1,7 +1,7 @@
-<script setup>
-import Slider from "./Slider";
+<script setup lang="ts">
+import Slider from "./Slider.vue";
 
-const size = defineModel({ type: Number });
+const size = defineModel<number>();
 </script>
 
 <template>

package/app/components/Viewer/Options/Sliders/Slider.vue

@@ -1,10 +1,13 @@
-<script setup>
-import BasicSlider from "@ogw_front/components/Basic/Slider";
+<script setup lang="ts">
+import BasicSlider from "@ogw_front/components/Basic/Slider.vue";
 
-const model = defineModel({ type: Number });
-const { tooltip } = defineProps({
-  tooltip: { type: String, required: true },
-});
+const model = defineModel<number>();
+
+interface Props {
+  tooltip: string;
+}
+
+const { tooltip } = defineProps<Props>();
 </script>
 
 <template>

package/app/components/Viewer/Options/Sliders/Width.vue

@@ -1,7 +1,7 @@
-<script setup>
-import Slider from "./Slider";
+<script setup lang="ts">
+import Slider from "./Slider.vue";
 
-const width = defineModel({ type: Number });
+const width = defineModel<number>();
 </script>
 
 <template>