@geode/opengeodeweb-front 10.6.2 → 10.6.3-rc.1

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

@@ -1,127 +1,117 @@
 <script setup>
-  import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps"
-  import { newInstance as vtkColorTransferFunction } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction"
+import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps";
+import { newInstance as vtkColorTransferFunction } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
 
-  const LAST_POINT_OFFSET = 4
-  const THREE = 3
-  const CHUNK_SIZE = 5
+const LAST_POINT_OFFSET = 4;
+const THREE = 3;
+const CHUNK_SIZE = 5;
 
-  const { presets } = defineProps({
-    presets: { type: Array, required: true },
-  })
+const { presets } = defineProps({
+  presets: { type: Array, required: true },
+});
 
-  const emit = defineEmits(["select"])
+const emit = defineEmits(["select"]);
 
-  const filterText = ref("")
-  const canvasRefs = ref({})
-  const loading = ref(true)
-  const renderJobId = ref(0)
+const filterText = ref("");
+const canvasRefs = ref({});
+const loading = ref(true);
+const renderJobId = ref(0);
 
-  function setCanvasRef(presetName, element, id) {
-    if (element) {
-      canvasRefs.value[id] = { element, presetName }
-    } else {
-      delete canvasRefs.value[id]
-    }
+function setCanvasRef(presetName, element, id) {
+  if (element) {
+    canvasRefs.value[id] = { element, presetName };
+  } else {
+    delete canvasRefs.value[id];
   }
+}
 
-  const filteredPresets = computed(() => {
-    if (!filterText.value) {
-      return presets
-    }
-    const term = filterText.value.toLowerCase()
-
-    const result = []
-    for (const item of presets) {
-      if (item.Children) {
-        const children = item.Children.filter((child) =>
-          child.Name.toLowerCase().includes(term),
-        )
-        if (children.length > 0) {
-          result.push({ ...item, Children: children })
-        }
-      } else if (item.Name.toLowerCase().includes(term)) {
-        result.push(item)
-      }
-    }
-    return result
-  })
-
-  function drawPresetCanvas(presetName, canvas) {
-    if (!canvas) {
-      return
-    }
-    const preset = vtkColorMaps.getPresetByName(presetName)
-    if (!preset || !preset.RGBPoints) {
-      return
-    }
-    const ctx = canvas.getContext("2d")
-    const { height, width } = canvas
-    const lut = vtkColorTransferFunction()
-    const rgbPoints = preset.RGBPoints
-    for (let pointIdx = 0; pointIdx < rgbPoints.length; pointIdx += 4) {
-      lut.addRGBPoint(
-        rgbPoints[pointIdx],
-        rgbPoints[pointIdx + 1],
-        rgbPoints[pointIdx + 2],
-        rgbPoints[pointIdx + THREE],
-      )
-    }
-    const table = lut.getUint8Table(
-      rgbPoints[0],
-      rgbPoints.at(-LAST_POINT_OFFSET),
-      width,
-      true,
-    )
-    const imageData = ctx.createImageData(width, height)
-    for (let xCoord = 0; xCoord < width; xCoord += 1) {
-      const alpha = table[xCoord * 4 + THREE],
-        blue = table[xCoord * 4 + 2],
-        green = table[xCoord * 4 + 1],
-        red = table[xCoord * 4]
-      for (let yCoord = 0; yCoord < height; yCoord += 1) {
-        const pixelIdx = (yCoord * width + xCoord) * 4
-        imageData.data[pixelIdx] = red
-        imageData.data[pixelIdx + 1] = green
-        imageData.data[pixelIdx + 2] = blue
-        imageData.data[pixelIdx + THREE] = alpha
+const filteredPresets = computed(() => {
+  if (!filterText.value) {
+    return presets;
+  }
+  const term = filterText.value.toLowerCase();
+
+  const result = [];
+  for (const item of presets) {
+    if (item.Children) {
+      const children = item.Children.filter((child) => child.Name.toLowerCase().includes(term));
+      if (children.length > 0) {
+        result.push({ ...item, Children: children });
       }
+    } else if (item.Name.toLowerCase().includes(term)) {
+      result.push(item);
     }
-    ctx.putImageData(imageData, 0, 0)
   }
+  return result;
+});
 
-  function processChunk(entries, index, jobId) {
-    if (jobId !== renderJobId.value || index >= entries.length) {
-      if (jobId === renderJobId.value) {
-        loading.value = false
-      }
-      return
+function drawPresetCanvas(presetName, canvas) {
+  if (!canvas) {
+    return;
+  }
+  const preset = vtkColorMaps.getPresetByName(presetName);
+  if (!preset || !preset.RGBPoints) {
+    return;
+  }
+  const ctx = canvas.getContext("2d");
+  const { height, width } = canvas;
+  const lut = vtkColorTransferFunction();
+  const rgbPoints = preset.RGBPoints;
+  for (let pointIdx = 0; pointIdx < rgbPoints.length; pointIdx += 4) {
+    lut.addRGBPoint(
+      rgbPoints[pointIdx],
+      rgbPoints[pointIdx + 1],
+      rgbPoints[pointIdx + 2],
+      rgbPoints[pointIdx + THREE],
+    );
+  }
+  const table = lut.getUint8Table(rgbPoints[0], rgbPoints.at(-LAST_POINT_OFFSET), width, true);
+  const imageData = ctx.createImageData(width, height);
+  for (let xCoord = 0; xCoord < width; xCoord += 1) {
+    const alpha = table[xCoord * 4 + THREE],
+      blue = table[xCoord * 4 + 2],
+      green = table[xCoord * 4 + 1],
+      red = table[xCoord * 4];
+    for (let yCoord = 0; yCoord < height; yCoord += 1) {
+      const pixelIdx = (yCoord * width + xCoord) * 4;
+      imageData.data[pixelIdx] = red;
+      imageData.data[pixelIdx + 1] = green;
+      imageData.data[pixelIdx + 2] = blue;
+      imageData.data[pixelIdx + THREE] = alpha;
     }
+  }
+  ctx.putImageData(imageData, 0, 0);
+}
 
-    const end = Math.min(index + CHUNK_SIZE, entries.length)
-    for (let i = index; i < end; i += 1) {
-      const [unusedKey, refValue] = entries[i]
-      drawPresetCanvas(refValue.presetName, refValue.element)
+function processChunk(entries, index, jobId) {
+  if (jobId !== renderJobId.value || index >= entries.length) {
+    if (jobId === renderJobId.value) {
+      loading.value = false;
     }
-    const ZERO = 0
-    setTimeout(() => processChunk(entries, end, jobId), ZERO)
+    return;
   }
 
-  function drawAllCanvases() {
-    renderJobId.value += 1
-    const jobId = renderJobId.value
-    loading.value = true
-    nextTick(() => {
-      const WAIT_MS = 50
-      setTimeout(
-        () => processChunk(Object.entries(canvasRefs.value), 0, jobId),
-        WAIT_MS,
-      )
-    })
+  const end = Math.min(index + CHUNK_SIZE, entries.length);
+  for (let i = index; i < end; i += 1) {
+    const [unusedKey, refValue] = entries[i];
+    drawPresetCanvas(refValue.presetName, refValue.element);
   }
-
-  onMounted(drawAllCanvases)
-  watch(filteredPresets, drawAllCanvases)
+  const ZERO = 0;
+  setTimeout(() => processChunk(entries, end, jobId), ZERO);
+}
+
+function drawAllCanvases() {
+  renderJobId.value += 1;
+  const jobId = renderJobId.value;
+  loading.value = true;
+  nextTick(() => {
+    const WAIT_MS = 50;
+    setTimeout(() => processChunk(Object.entries(canvasRefs.value), 0, jobId), WAIT_MS);
+  });
+}
+
+onMounted(drawAllCanvases);
+watch(filteredPresets, drawAllCanvases);
 </script>
 
 <template>
@@ -166,11 +156,7 @@
       <template v-for="(item, index) in filteredPresets" :key="index">
         <v-list-group v-if="item.Children" :value="item.Name">
           <template #activator="{ props: gProps }">
-            <v-list-item
-              v-bind="gProps"
-              :title="item.Name"
-              class="text-white font-weight-bold"
-            />
+            <v-list-item v-bind="gProps" :title="item.Name" class="text-white font-weight-bold" />
           </template>
 
           <v-list-item
@@ -181,13 +167,9 @@
             rounded="md"
           >
             <div class="d-flex flex-column py-1">
-              <span class="text-caption text-grey-lighten-1 mb-1">{{
-                child.Name
-              }}</span>
+              <span class="text-caption text-grey-lighten-1 mb-1">{{ child.Name }}</span>
               <canvas
-                :ref="
-                  (el) => setCanvasRef(child.Name, el, `g-${index}-${cIdx}`)
-                "
+                :ref="(el) => setCanvasRef(child.Name, el, `g-${index}-${cIdx}`)"
                 width="200"
                 height="18"
                 class="w-100 rounded-xs border-thin"
@@ -196,16 +178,9 @@
           </v-list-item>
         </v-list-group>
 
-        <v-list-item
-          v-else
-          @click="emit('select', item)"
-          class="px-2 mb-1"
-          rounded="md"
-        >
+        <v-list-item v-else @click="emit('select', item)" class="px-2 mb-1" rounded="md">
           <div class="d-flex flex-column py-1">
-            <span class="text-caption text-grey-lighten-1 mb-1">{{
-              item.Name
-            }}</span>
+            <span class="text-caption text-grey-lighten-1 mb-1">{{ item.Name }}</span>
             <canvas
               :ref="(el) => setCanvasRef(item.Name, el, `s-${index}`)"
               width="200"
@@ -220,18 +195,18 @@
 </template>
 
 <style scoped>
-  .blur-card {
-    background-color: rgba(35, 35, 35, 0.8) !important;
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-    border-color: rgba(255, 255, 255, 0.1) !important;
-  }
-
-  .border-thin {
-    border: 1px solid rgba(255, 255, 255, 0.15) !important;
-  }
-
-  .v-list-item {
-    background-color: rgba(255, 255, 255, 0.1) !important;
-  }
+.blur-card {
+  background-color: rgba(35, 35, 35, 0.8) !important;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+.border-thin {
+  border: 1px solid rgba(255, 255, 255, 0.15) !important;
+}
+
+.v-list-item {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+}
 </style>

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

@@ -1,131 +1,122 @@
 <script setup>
-  import ColorMapList from "./ColorMapList.vue"
-  import { newInstance } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction"
-  import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps"
-
-  const LAST_POINT_OFFSET = 4
-  const THREE = 3
-
-  const { max, min, modelValue } = defineProps({
-    modelValue: { type: String, default: "Cool to Warm" },
-    min: { type: Number, required: true },
-    max: { type: Number, required: true },
-  })
-
-  const emit = defineEmits(["update:modelValue"])
-
-  const menuOpen = ref(false)
-  const lutCanvas = ref()
-  const selectedPresetName = ref(modelValue)
-
-  const presets = computed(() => {
-    const allPresets = vtkColorMaps.rgbPresetNames.map((name) =>
-      vtkColorMaps.getPresetByName(name),
-    )
-
-    const defaultPreset = vtkColorMaps.getPresetByName("Cool to Warm")
-
-    const paraviewNames = [
-      "Cool to Warm",
-      "Warm to Cool",
-      "rainbow",
-      "Grayscale",
-      "X Ray",
-      "Black-Body Radiation",
-      "erdc_rainbow_bright",
-    ]
-    const matplotlibNames = [
-      "Viridis (matplotlib)",
-      "Plasma (matplotlib)",
-      "Inferno (matplotlib)",
-      "Magma (matplotlib)",
-    ]
-
-    const paraviewPresets = paraviewNames
-      .map((name) => vtkColorMaps.getPresetByName(name))
-      .filter(Boolean)
-    const matplotlibPresets = matplotlibNames
-      .map((name) => vtkColorMaps.getPresetByName(name))
-      .filter(Boolean)
-    const otherPresets = allPresets.filter(
-      (preset) =>
-        !paraviewNames.includes(preset.Name) &&
-        !matplotlibNames.includes(preset.Name),
-    )
-
-    return [
-      defaultPreset,
-      { Name: "ParaView", Children: paraviewPresets },
-      { Name: "Matplotlib", Children: matplotlibPresets },
-      { Name: "Others", Children: otherPresets },
-    ]
-  })
-
-  function drawLutCanvas() {
-    if (!lutCanvas.value) {
-      return
-    }
-    const preset = vtkColorMaps.getPresetByName(selectedPresetName.value)
-    if (!preset || !preset.RGBPoints) {
-      return
-    }
-
-    const canvas = lutCanvas.value
-    const ctx = canvas.getContext("2d")
-    const { height, width } = canvas
+import ColorMapList from "./ColorMapList.vue";
+import { newInstance } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
+import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps";
+
+const LAST_POINT_OFFSET = 4;
+const THREE = 3;
+
+const { max, min, modelValue } = defineProps({
+  modelValue: { type: String, default: "Cool to Warm" },
+  min: { type: Number, required: true },
+  max: { type: Number, required: true },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const menuOpen = ref(false);
+const lutCanvas = ref();
+const selectedPresetName = ref(modelValue);
+
+const presets = computed(() => {
+  const allPresets = vtkColorMaps.rgbPresetNames.map((name) => vtkColorMaps.getPresetByName(name));
+
+  const defaultPreset = vtkColorMaps.getPresetByName("Cool to Warm");
+
+  const paraviewNames = [
+    "Cool to Warm",
+    "Warm to Cool",
+    "rainbow",
+    "Grayscale",
+    "X Ray",
+    "Black-Body Radiation",
+    "erdc_rainbow_bright",
+  ];
+  const matplotlibNames = [
+    "Viridis (matplotlib)",
+    "Plasma (matplotlib)",
+    "Inferno (matplotlib)",
+    "Magma (matplotlib)",
+  ];
+
+  const paraviewPresets = paraviewNames
+    .map((name) => vtkColorMaps.getPresetByName(name))
+    .filter(Boolean);
+  const matplotlibPresets = matplotlibNames
+    .map((name) => vtkColorMaps.getPresetByName(name))
+    .filter(Boolean);
+  const otherPresets = allPresets.filter(
+    (preset) => !paraviewNames.includes(preset.Name) && !matplotlibNames.includes(preset.Name),
+  );
+
+  return [
+    defaultPreset,
+    { Name: "ParaView", Children: paraviewPresets },
+    { Name: "Matplotlib", Children: matplotlibPresets },
+    { Name: "Others", Children: otherPresets },
+  ];
+});
+
+function drawLutCanvas() {
+  if (!lutCanvas.value) {
+    return;
+  }
+  const preset = vtkColorMaps.getPresetByName(selectedPresetName.value);
+  if (!preset || !preset.RGBPoints) {
+    return;
+  }
 
-    const lut = newInstance()
-    const rgbPoints = preset.RGBPoints
+  const canvas = lutCanvas.value;
+  const ctx = canvas.getContext("2d");
+  const { height, width } = canvas;
 
-    for (let pointIdx = 0; pointIdx < rgbPoints.length; pointIdx += 4) {
-      lut.addRGBPoint(
-        rgbPoints[pointIdx],
-        rgbPoints[pointIdx + 1],
-        rgbPoints[pointIdx + 2],
-        rgbPoints[pointIdx + THREE],
-      )
-    }
+  const lut = newInstance();
+  const rgbPoints = preset.RGBPoints;
 
-    const table = lut.getUint8Table(
-      rgbPoints[0],
-      rgbPoints.at(-LAST_POINT_OFFSET),
-      width,
-      true,
-    )
-    const imageData = ctx.createImageData(width, height)
-
-    for (let xCoord = 0; xCoord < width; xCoord += 1) {
-      const red = table[xCoord * 4]
-      const green = table[xCoord * 4 + 1]
-      const blue = table[xCoord * 4 + 2]
-      const alpha = table[xCoord * 4 + THREE]
-      for (let yCoord = 0; yCoord < height; yCoord += 1) {
-        const pixelIdx = (yCoord * width + xCoord) * 4
-        imageData.data[pixelIdx] = red
-        imageData.data[pixelIdx + 1] = green
-        imageData.data[pixelIdx + 2] = blue
-        imageData.data[pixelIdx + THREE] = alpha
-      }
-    }
-    ctx.putImageData(imageData, 0, 0)
+  for (let pointIdx = 0; pointIdx < rgbPoints.length; pointIdx += 4) {
+    lut.addRGBPoint(
+      rgbPoints[pointIdx],
+      rgbPoints[pointIdx + 1],
+      rgbPoints[pointIdx + 2],
+      rgbPoints[pointIdx + THREE],
+    );
   }
 
-  function onSelectPreset(preset) {
-    selectedPresetName.value = preset.Name
-    emit("update:modelValue", preset.Name)
-    menuOpen.value = false
+  const table = lut.getUint8Table(rgbPoints[0], rgbPoints.at(-LAST_POINT_OFFSET), width, true);
+  const imageData = ctx.createImageData(width, height);
+
+  for (let xCoord = 0; xCoord < width; xCoord += 1) {
+    const red = table[xCoord * 4];
+    const green = table[xCoord * 4 + 1];
+    const blue = table[xCoord * 4 + 2];
+    const alpha = table[xCoord * 4 + THREE];
+    for (let yCoord = 0; yCoord < height; yCoord += 1) {
+      const pixelIdx = (yCoord * width + xCoord) * 4;
+      imageData.data[pixelIdx] = red;
+      imageData.data[pixelIdx + 1] = green;
+      imageData.data[pixelIdx + 2] = blue;
+      imageData.data[pixelIdx + THREE] = alpha;
+    }
   }
-
-  onMounted(() => nextTick(drawLutCanvas))
-  watch([lutCanvas, selectedPresetName, () => min, () => max], drawLutCanvas)
-  watch(
-    () => modelValue,
-    (newValue) => {
-      if (newValue !== selectedPresetName.value) {
-        selectedPresetName.value = newValue
-      }
-    },
-  )
+  ctx.putImageData(imageData, 0, 0);
+}
+
+function onSelectPreset(preset) {
+  selectedPresetName.value = preset.Name;
+  emit("update:modelValue", preset.Name);
+  menuOpen.value = false;
+}
+
+onMounted(() => nextTick(drawLutCanvas));
+watch([lutCanvas, selectedPresetName, () => min, () => max], drawLutCanvas);
+watch(
+  () => modelValue,
+  (newValue) => {
+    if (newValue !== selectedPresetName.value) {
+      selectedPresetName.value = newValue;
+    }
+  },
+);
 </script>
 
 <template>
@@ -142,12 +133,7 @@
         <span class="text-caption text-white font-weight-medium">
           {{ selectedPresetName }}
         </span>
-        <canvas
-          ref="lutCanvas"
-          width="200"
-          height="18"
-          class="w-100 rounded-xs border-thin"
-        />
+        <canvas ref="lutCanvas" width="200" height="18" class="w-100 rounded-xs border-thin" />
       </v-card>
     </template>
 
@@ -156,19 +142,19 @@
 </template>
 
 <style scoped>
-  .blur-picker {
-    background-color: rgba(40, 40, 40, 0.7) !important;
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border-color: rgba(255, 255, 255, 0.2) !important;
-    transition: background-color 0.2s;
-  }
-
-  .blur-picker {
-    background-color: rgba(60, 60, 60, 0.9) !important;
-  }
-
-  .border-thin {
-    border: 1px solid rgba(255, 255, 255, 0.15) !important;
-  }
+.blur-picker {
+  background-color: rgba(40, 40, 40, 0.7) !important;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-color: rgba(255, 255, 255, 0.2) !important;
+  transition: background-color 0.2s;
+}
+
+.blur-picker {
+  background-color: rgba(60, 60, 60, 0.9) !important;
+}
+
+.border-thin {
+  border: 1px solid rgba(255, 255, 255, 0.15) !important;
+}
 </style>

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

@@ -1,15 +1,15 @@
 <script setup>
-  const colorPickerRef = useTemplateRef("colorPickerRef")
-  const model = defineModel()
-  const { pressed } = useMousePressed({ target: colorPickerRef })
+const colorPickerRef = useTemplateRef("colorPickerRef");
+const model = defineModel();
+const { pressed } = useMousePressed({ target: colorPickerRef });
 
-  const color = ref(model)
+const color = ref(model);
 
-  watch(pressed, (value) => {
-    if (!value) {
-      model.value = color.value
-    }
-  })
+watch(pressed, (value) => {
+  if (!value) {
+    model.value = color.value;
+  }
+});
 </script>
 
 <template>