@geode/opengeodeweb-front 10.20.0 → 10.20.1-rc.2

package/app/components/CameraManager/List.vue

@@ -39,11 +39,11 @@ async function saveRename() {
 </script>
 
 <template>
-  <v-list v-if="savedPositions.length > 0" class="bg-transparent pa-2">
+  <v-list v-if="savedPositions.length > 0" class="bg-transparent pa-1">
     <v-list-item
       v-for="position in savedPositions"
       :key="position.id"
-      class="rounded-lg mb-1"
+      class="rounded-lg mb-1 px-2"
       :active="editingId === position.id"
       active-color="primary"
     >
@@ -52,16 +52,16 @@ async function saveRename() {
           icon
           variant="tonal"
           color="success"
-          size="small"
-          class="mr-2"
+          size="x-small"
+          class="mr-1"
           @click="restorePosition(position.id)"
         >
-          <v-icon size="20">mdi-play</v-icon>
+          <v-icon size="14">mdi-play</v-icon>
           <v-tooltip activator="parent" location="top">Restore</v-tooltip>
         </v-btn>
       </template>
 
-      <v-list-item-title class="font-weight-bold">
+      <v-list-item-title class="font-weight-semibold text-caption">
         <v-text-field
           v-if="editingId === position.id"
           v-model="editingName"
@@ -69,6 +69,7 @@ async function saveRename() {
           variant="underlined"
           hide-details
           autofocus
+          class="text-caption"
           @keyup.enter="saveRename"
           @blur="saveRename"
         ></v-text-field>
@@ -76,39 +77,42 @@ async function saveRename() {
       </v-list-item-title>
 
       <template #append>
-        <div class="d-flex g-1">
+        <div class="d-flex ga-1">
           <v-btn
             icon
             variant="text"
-            size="small"
+            size="x-small"
             color="grey-darken-1"
             @click="startEditing(position)"
           >
-            <v-icon size="18">mdi-pencil</v-icon>
+            <v-icon size="14">mdi-pencil</v-icon>
             <v-tooltip activator="parent" location="top">Rename</v-tooltip>
           </v-btn>
           <v-btn
             icon
             variant="text"
-            size="small"
+            size="x-small"
             color="error"
             @click="deletePosition(position.id)"
           >
-            <v-icon size="18">mdi-delete</v-icon>
+            <v-icon size="14">mdi-delete</v-icon>
             <v-tooltip activator="parent" location="top">Delete</v-tooltip>
           </v-btn>
         </div>
       </template>
     </v-list-item>
   </v-list>
-  <div v-else class="text-center text-grey-lighten-1 py-8 italic">
-    <v-icon size="48" class="mb-2 d-block mx-auto opacity-20">mdi-camera-off</v-icon>
+  <div v-else class="text-center text-grey-lighten-1 py-4 italic text-caption">
+    <v-icon size="32" class="mb-1 d-block mx-auto opacity-20">mdi-camera-off</v-icon>
     No saved positions yet.
   </div>
 </template>
 
 <style scoped>
 :deep(.v-list-item__prepend) {
-  margin-inline-end: 12px !important;
+  margin-inline-end: 6px !important;
+}
+:deep(.v-list-item__append) {
+  margin-inline-start: 6px !important;
 }
 </style>

package/app/components/CameraManager/Saver.vue

@@ -20,7 +20,7 @@ async function saveCurrentPosition() {
 </script>
 
 <template>
-  <v-container class="pa-5 pb-2 bg-surface-variant-lighten-5">
+  <v-container class="pa-3 pb-1 bg-surface-variant-lighten-5">
     <v-row dense>
       <v-col cols="12">
         <v-text-field
@@ -30,7 +30,7 @@ async function saveCurrentPosition() {
           density="compact"
           variant="outlined"
           hide-details
-          class="mb-3"
+          class="mb-2 text-caption"
         ></v-text-field>
       </v-col>
       <v-col cols="12" class="d-flex align-center">
@@ -38,9 +38,11 @@ async function saveCurrentPosition() {
           color="primary"
           variant="elevated"
           block
+          size="small"
           :disabled="!newPositionName"
           @click="saveCurrentPosition"
-          height="40"
+          height="32"
+          class="text-caption font-weight-bold"
         >
           Save
         </v-btn>

package/app/components/CameraManager.vue

@@ -7,7 +7,7 @@ const emit = defineEmits(["close"]);
 
 const { show_dialog, width } = defineProps({
   show_dialog: { type: Boolean, required: true },
-  width: { type: Number, required: false, default: 450 },
+  width: { type: Number, required: false, default: 260 },
 });
 </script>
 
@@ -31,9 +31,24 @@ const { show_dialog, width } = defineProps({
 
     <v-divider></v-divider>
 
-    <v-card-actions class="pa-4">
+    <v-card-actions class="pa-2">
       <v-spacer></v-spacer>
-      <v-btn variant="text" color="grey-darken-1" @click="emit('close')">Close</v-btn>
+      <v-btn
+        variant="text"
+        size="small"
+        color="white"
+        class="text-caption text-none"
+        @click="emit('close')"
+        >Close</v-btn
+      >
     </v-card-actions>
   </GlassCard>
 </template>
+
+<style scoped>
+:deep(.v-card-title) {
+  font-size: 0.95rem !important;
+  font-weight: bold !important;
+  padding: 10px 14px 6px 14px !important;
+}
+</style>

package/app/components/CameraOrientation.vue

@@ -7,7 +7,7 @@ import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering
 
 const { panel, width } = defineProps({
   panel: { type: Boolean, default: false },
-  width: { type: Number, default: 400 },
+  width: { type: Number, default: 260 },
 });
 
 const show = defineModel("show", { type: Boolean, default: false });
@@ -36,7 +36,7 @@ const orientations = [
     face: "front",
     vtkKey: "YPlus",
     rotation: 180,
-    position: { top: "35%", left: "20%" },
+    position: { top: "35%", left: "22%" },
   },
   {
     label: "Y-",
@@ -44,7 +44,7 @@ const orientations = [
     face: "back",
     vtkKey: "YMinus",
     rotation: 0,
-    position: { top: "65%", left: "80%" },
+    position: { top: "65%", left: "78%" },
   },
   {
     label: "X+",
@@ -52,7 +52,7 @@ const orientations = [
     face: "right",
     vtkKey: "XPlus",
     rotation: 90,
-    position: { top: "35%", left: "80%" },
+    position: { top: "35%", left: "78%" },
   },
   {
     label: "X-",
@@ -60,7 +60,7 @@ const orientations = [
     face: "left",
     vtkKey: "XMinus",
     rotation: -90,
-    position: { top: "65%", left: "20%" },
+    position: { top: "65%", left: "22%" },
   },
 ];
 
@@ -177,7 +177,7 @@ watch(hoveredFace, (newFace, oldFace) => {
     <div
       class="pa-0 overflow-hidden position-relative"
       style="
-        height: 320px;
+        height: 220px;
         background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent 70%);
       "
     >
@@ -200,7 +200,7 @@ watch(hoveredFace, (newFace, oldFace) => {
         class="position-absolute d-flex align-center justify-center"
         style="top: 50%; left: 50%; transform: translate(-50%, -50%)"
       >
-        <div ref="cubeContainer" style="width: 100px; height: 100px; pointer-events: none" />
+        <div ref="cubeContainer" style="width: 70px; height: 70px; pointer-events: none" />
       </div>
 
       <v-btn
@@ -208,7 +208,7 @@ watch(hoveredFace, (newFace, oldFace) => {
         :key="orientation.value"
         icon
         variant="tonal"
-        size="44"
+        size="32"
         class="satellite-node position-absolute"
         :style="orientation.position"
         @mouseenter="hoveredFace = orientation.face"
@@ -216,7 +216,9 @@ watch(hoveredFace, (newFace, oldFace) => {
         @click.stop="emit('select', orientation.value)"
       >
         <v-tooltip activator="parent" location="top">{{ orientation.value }} View</v-tooltip>
-        <span class="text-caption font-weight-black">{{ orientation.label }}</span>
+        <span class="text-caption font-weight-black" style="font-size: 0.7rem !important">{{
+          orientation.label
+        }}</span>
       </v-btn>
     </div>
   </ToolPanel>

package/app/components/Screenshot.vue

@@ -9,7 +9,7 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 const show = defineModel({ type: Boolean, default: false });
 
 const { width } = defineProps({
-  width: { type: Number, default: 400 },
+  width: { type: Number, default: 260 },
 });
 
 const output_extensions =
@@ -77,55 +77,92 @@ watch(screenshot_type, (value) => {
     action-label="Screenshot"
     @action="takeScreenshot"
   >
-    <v-container class="pa-5">
-      <v-row justify="center">
+    <v-container class="pa-3 py-1">
+      <v-row justify="center" dense>
         <v-col cols="12" class="py-0 d-flex justify-center">
           <v-btn-toggle
             v-model="screenshot_type"
             mandatory
             color="primary"
             variant="outlined"
-            class="mb-4"
-            density="comfortable"
+            class="mb-2"
+            density="compact"
           >
-            <v-btn value="file" prepend-icon="mdi-file-download-outline"> File </v-btn>
-            <v-btn value="clipboard" prepend-icon="mdi-content-copy"> Clipboard </v-btn>
+            <v-btn
+              value="file"
+              prepend-icon="mdi-file-download-outline"
+              size="small"
+              class="text-caption text-none"
+            >
+              File
+            </v-btn>
+            <v-btn
+              value="clipboard"
+              prepend-icon="mdi-content-copy"
+              size="small"
+              class="text-caption text-none"
+            >
+              Clipboard
+            </v-btn>
           </v-btn-toggle>
         </v-col>
       </v-row>
 
-      <v-row v-if="screenshot_type === 'file'">
-        <v-col cols="8" class="py-0">
-          <v-text-field v-model="filename" label="File name"></v-text-field>
+      <v-row dense v-if="screenshot_type === 'file'">
+        <v-col cols="12" class="py-1">
+          <v-text-field
+            v-model="filename"
+            label="File name"
+            variant="outlined"
+            density="compact"
+            hide-details
+            class="text-caption"
+          ></v-text-field>
         </v-col>
-        <v-col cols="4" class="py-0">
+        <v-col cols="12" class="py-1">
           <v-select
             v-model="output_extension"
             :items="output_extensions"
             label="Extension"
+            variant="outlined"
+            density="compact"
+            hide-details
             required
+            class="text-caption"
           />
         </v-col>
       </v-row>
 
-      <v-row>
-        <v-col cols="12" class="py-0">
+      <v-row dense>
+        <v-col cols="12" class="py-1">
           <v-switch
             v-model="include_background"
             :disabled="screenshot_type === 'file' && output_extension !== 'png'"
             label="Include background"
+            density="compact"
+            hide-details
             inset
+            class="text-caption"
           ></v-switch>
         </v-col>
       </v-row>
     </v-container>
 
     <template #actions>
-      <v-card-actions class="justify-center pb-6" style="gap: 12px">
-        <v-btn variant="text" size="small" color="white" @click="show = false"> Cancel </v-btn>
+      <v-card-actions class="justify-center pb-3 pt-0" style="gap: 8px">
+        <v-btn
+          variant="text"
+          size="small"
+          color="white"
+          class="text-caption text-none"
+          @click="show = false"
+        >
+          Cancel
+        </v-btn>
         <v-btn
           variant="outlined"
           size="small"
+          class="text-caption text-none"
           :disabled="(screenshot_type === 'file' && !filename) || !output_extension"
           color="white"
           @click="takeScreenshot()"

package/app/components/ToolPanel.vue

@@ -3,7 +3,7 @@ import GlassCard from "@ogw_front/components/GlassCard";
 
 const { title, width, closeLabel, actionLabel } = defineProps({
   title: { type: String, default: "" },
-  width: { type: Number, default: 400 },
+  width: { type: Number, default: 260 },
   closeLabel: { type: String, default: "Close" },
   actionLabel: { type: String, default: undefined },
 });
@@ -34,8 +34,14 @@ function close() {
 
     <template #actions>
       <slot name="actions">
-        <v-card-actions class="justify-center pb-6" style="gap: 12px">
-          <v-btn variant="text" size="small" color="white" @click="close">
+        <v-card-actions class="justify-center pb-3 pt-0" style="gap: 8px">
+          <v-btn
+            variant="text"
+            size="small"
+            color="white"
+            class="text-caption text-none"
+            @click="close"
+          >
             {{ closeLabel }}
           </v-btn>
           <v-btn
@@ -43,6 +49,7 @@ function close() {
             variant="outlined"
             size="small"
             color="white"
+            class="text-caption text-none"
             @click="emit('action')"
           >
             {{ actionLabel }}
@@ -59,4 +66,9 @@ function close() {
   top: 90px;
   right: 55px;
 }
+:deep(.v-card-title) {
+  font-size: 0.9rem !important;
+  font-weight: bold !important;
+  padding: 8px 12px 4px 12px !important;
+}
 </style>

package/app/components/ViewToolbar.vue

@@ -203,7 +203,7 @@ const camera_options = computed(() => [
   <ZScaling
     v-model:show="showZScaling"
     v-model="zScale"
-    :width="400"
+    :width="260"
     @apply="handleZScalingClose"
   />
 </template>

package/app/components/Viewer/Generic/Model/ModelStyleCard.vue

@@ -119,17 +119,68 @@ const colorModes = [
 const modelComponentTypeLabel = computed(() =>
   componentType.value ? `${componentType.value}s Options` : "",
 );
+
+const modelComponentsColorMode = ref("constant");
+
+const modelComponentsColor = computed({
+  get: () => {
+    if (selection.value.length > 0) {
+      return dataStyleStore.getModelComponentColor(modelId.value, selection.value[0]);
+    }
+    return { red: 255, green: 255, blue: 255 };
+  },
+  set: async (color) => {
+    if (selection.value.length > 0) {
+      await dataStyleStore.setModelComponentsColor(
+        modelId.value,
+        selection.value,
+        color,
+        modelComponentsColorMode.value,
+      );
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
+
+watch(modelComponentsColorMode, async (colorMode) => {
+  if (colorMode === "random" && selection.value.length > 0) {
+    await dataStyleStore.setModelComponentsColor(
+      modelId.value,
+      selection.value,
+      undefined,
+      colorMode,
+    );
+    hybridViewerStore.remoteRender();
+  }
+});
 </script>
 
 <template>
-  <div class="model-style-card">
+  <v-sheet class="model-style-card" color="transparent">
     <OptionsSection title="Model Options">
       <VisibilitySwitch v-model="modelVisibility" />
     </OptionsSection>
 
+    <OptionsSection v-if="!componentType && !componentId" title="Components Options" class="mt-6">
+      <v-label class="text-caption mb-1 mt-2">Color Mode</v-label>
+      <v-select
+        v-model="modelComponentsColorMode"
+        :items="colorModes"
+        density="compact"
+        hide-details
+        class="mb-3"
+        variant="outlined"
+      />
+
+      <template v-if="modelComponentsColorMode === 'constant'">
+        <v-label class="text-caption mb-1">Color</v-label>
+        <ViewerOptionsColorPicker v-model="modelComponentsColor" />
+      </template>
+    </OptionsSection>
+
     <OptionsSection v-if="componentType" :title="modelComponentTypeLabel" class="mt-6">
       <VisibilitySwitch v-model="modelComponentTypeVisibility" />
-      <div class="text-caption mb-1 mt-2">Color Mode</div>
+      <v-label class="text-caption mb-1 mt-2">Color Mode</v-label>
       <v-select
         v-model="modelComponentTypeColorMode"
         :items="colorModes"
@@ -140,14 +191,14 @@ const modelComponentTypeLabel = computed(() =>
       />
 
       <template v-if="modelComponentTypeColorMode === 'constant'">
-        <div class="text-caption mb-1">Color</div>
+        <v-label class="text-caption mb-1">Color</v-label>
         <ViewerOptionsColorPicker v-model="modelComponentTypeColor" />
       </template>
     </OptionsSection>
 
     <OptionsSection v-if="componentId" title="Component Options" class="mt-6">
       <VisibilitySwitch v-model="componentVisibility" />
-      <div class="text-caption mb-1 mt-2">Color Mode</div>
+      <v-label class="text-caption mb-1 mt-2">Color Mode</v-label>
       <v-select
         v-model="componentColorMode"
         :items="colorModes"
@@ -158,11 +209,11 @@ const modelComponentTypeLabel = computed(() =>
       />
 
       <template v-if="componentColorMode === 'constant'">
-        <div class="text-caption mb-1">Color</div>
+        <v-label class="text-caption mb-1">Color</v-label>
         <ViewerOptionsColorPicker v-model="componentColor" />
       </template>
     </OptionsSection>
-  </div>
+  </v-sheet>
 </template>
 
 <style scoped>

package/app/components/ZScaling.vue

@@ -5,7 +5,7 @@ const zScale = defineModel({ type: Number, default: 1 });
 const show = defineModel("show", { type: Boolean, default: false });
 
 const { width } = defineProps({
-  width: { type: Number, default: 400 },
+  width: { type: Number, default: 260 },
 });
 
 const emit = defineEmits(["apply"]);
@@ -24,23 +24,34 @@ function apply() {
     action-label="Apply"
     @action="apply"
   >
-    <v-container class="pa-5">
-      <v-row>
-        <v-col cols="12" class="py-2">
-          <v-slider v-model="zScale" :min="1" :max="10" :step="0.2" label="Z Scale" thumb-label />
+    <v-container class="pa-3 py-1">
+      <v-row dense>
+        <v-col cols="12" class="py-1">
+          <v-slider
+            v-model="zScale"
+            :min="1"
+            :max="10"
+            :step="0.2"
+            label="Z Scale"
+            density="compact"
+            hide-details
+            thumb-label
+            class="text-caption"
+          />
         </v-col>
       </v-row>
-      <v-row>
-        <v-col cols="12" class="py-2">
+      <v-row dense>
+        <v-col cols="12" class="py-1">
           <v-text-field
             v-model.number="zScale"
             type="number"
             label="Z Scale Value"
-            outlined
-            dense
+            variant="outlined"
+            density="compact"
             hide-details
             step="0.1"
             :min="1"
+            class="text-caption"
           />
         </v-col>
       </v-row>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.20.0",
+  "version": "10.20.1-rc.2",
   "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",