@geode/opengeodeweb-front 10.14.2-rc.2 → 10.15.0-rc.1

package/app/components/CameraOrientation.vue

@@ -0,0 +1,273 @@
+<script setup>
+import ToolPanel from "@ogw_front/components/ToolPanel";
+import { applyCameraOptions } from "@ogw_front/utils/hybrid_viewer";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { newInstance as vtkAnnotatedCubeActor } from "@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor";
+import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
+
+const { panel, width } = defineProps({
+  panel: { type: Boolean, default: false },
+  width: { type: Number, default: 400 },
+});
+
+const show = defineModel("show", { type: Boolean, default: false });
+const emit = defineEmits(["select"]);
+
+const orientations = [
+  {
+    label: "Z+",
+    value: "zplus",
+    face: "top",
+    vtkKey: "ZPlus",
+    rotation: 0,
+    position: { top: "15%", left: "50%" },
+  },
+  {
+    label: "Z-",
+    value: "zminus",
+    face: "bottom",
+    vtkKey: "ZMinus",
+    rotation: 0,
+    position: { top: "85%", left: "50%" },
+  },
+  {
+    label: "Y+",
+    value: "yplus",
+    face: "front",
+    vtkKey: "YPlus",
+    rotation: 180,
+    position: { top: "35%", left: "20%" },
+  },
+  {
+    label: "Y-",
+    value: "yminus",
+    face: "back",
+    vtkKey: "YMinus",
+    rotation: 0,
+    position: { top: "65%", left: "80%" },
+  },
+  {
+    label: "X+",
+    value: "xplus",
+    face: "right",
+    vtkKey: "XPlus",
+    rotation: 90,
+    position: { top: "35%", left: "80%" },
+  },
+  {
+    label: "X-",
+    value: "xminus",
+    face: "left",
+    vtkKey: "XMinus",
+    rotation: -90,
+    position: { top: "65%", left: "20%" },
+  },
+];
+
+const hoveredFace = ref(undefined);
+const hybridViewerStore = useHybridViewerStore();
+const cubeContainer = useTemplateRef("cubeContainer");
+
+let genericRenderWindow = undefined;
+let cubeActor = undefined;
+let isInteracting = false;
+
+function initVTK() {
+  if (genericRenderWindow) {
+    return;
+  }
+  genericRenderWindow = vtkGenericRenderWindow({
+    background: [0, 0, 0, 0],
+    listenWindowResize: false,
+  });
+
+  const interactor = genericRenderWindow.getInteractor();
+  interactor.onStartAnimation(() => {
+    isInteracting = true;
+  });
+
+  interactor.onEndAnimation(() => {
+    isInteracting = false;
+  });
+
+  cubeActor = vtkAnnotatedCubeActor();
+  cubeActor.setDefaultStyle({
+    fontFamily: "sans-serif",
+    fontStyle: "bold",
+    faceColor: "rgba(60, 60, 60, 1)",
+    fontColor: "white",
+    edgeColor: "rgba(255, 255, 255, 0.4)",
+    edgeThickness: 0.1,
+    resolution: 400,
+    fontSizeScale: (resolution) => resolution / 4,
+  });
+
+  for (const orientation of orientations) {
+    cubeActor[`set${orientation.vtkKey}FaceProperty`]({
+      text: orientation.label,
+      faceRotation: orientation.rotation,
+    });
+  }
+
+  cubeActor.getProperty().setBackfaceCulling(true);
+
+  const renderer = genericRenderWindow.getRenderer();
+
+  renderer.addActor(cubeActor);
+  renderer.resetCamera();
+}
+
+function syncCubeCamera() {
+  const options = hybridViewerStore.camera_options;
+  if (!genericRenderWindow || isInteracting || !options.position) {
+    return;
+  }
+  const camera = genericRenderWindow.getRenderer().getActiveCamera();
+  applyCameraOptions(camera, options);
+  genericRenderWindow.getRenderer().resetCamera();
+  genericRenderWindow.getRenderWindow().render();
+}
+
+watch(cubeContainer, (newContainer) => {
+  if (!newContainer || !import.meta.client) {
+    return;
+  }
+  initVTK();
+  genericRenderWindow.setContainer(newContainer);
+  const canvas = genericRenderWindow.getApiSpecificRenderWindow().getCanvas();
+  canvas.style.width = "100%";
+  canvas.style.height = "100%";
+  canvas.style.background = "transparent";
+  genericRenderWindow.resize();
+  syncCubeCamera();
+});
+
+onBeforeUnmount(() => genericRenderWindow?.delete());
+
+watch(() => hybridViewerStore.camera_options, syncCubeCamera, { deep: true });
+
+watch(hoveredFace, (newFace, oldFace) => {
+  if (!cubeActor) {
+    return;
+  }
+  function updateFace(face, active) {
+    const config = orientations.find((orientation) => orientation.face === face);
+    if (config) {
+      cubeActor[`set${config.vtkKey}FaceProperty`]({
+        faceColor: active ? "rgba(255, 255, 255, 0.95)" : "rgba(60, 60, 60, 1)",
+        fontColor: active ? "black" : "white",
+      });
+    }
+  }
+
+  updateFace(oldFace, false);
+  updateFace(newFace, true);
+  genericRenderWindow.getRenderWindow().render();
+});
+</script>
+
+<template>
+  <ToolPanel
+    v-if="panel"
+    v-model="show"
+    title="Camera Orientations"
+    :width="width"
+    style="z-index: 2; top: 90px; right: 55px"
+  >
+    <div
+      class="pa-0 overflow-hidden position-relative"
+      style="
+        height: 320px;
+        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent 70%);
+      "
+    >
+      <svg class="position-absolute fill-height w-100" style="pointer-events: none">
+        <line
+          v-for="orientation in orientations"
+          :key="orientation.value"
+          x1="50%"
+          y1="50%"
+          :x2="orientation.position.left"
+          :y2="orientation.position.top"
+          :stroke="hoveredFace === orientation.face ? 'white' : 'rgba(255,255,255,0.1)'"
+          :stroke-width="hoveredFace === orientation.face ? 2 : 1"
+          class="transition-all"
+          style="filter: drop-shadow(0 0 3px white)"
+        />
+      </svg>
+
+      <div
+        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>
+
+      <v-btn
+        v-for="orientation in orientations"
+        :key="orientation.value"
+        icon
+        variant="tonal"
+        size="44"
+        class="satellite-node position-absolute"
+        :style="orientation.position"
+        @mouseenter="hoveredFace = orientation.face"
+        @mouseleave="hoveredFace = undefined"
+        @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>
+      </v-btn>
+    </div>
+  </ToolPanel>
+
+  <v-list v-else density="compact" class="pa-4 orientation-menu rounded-lg" elevation="8">
+    <div class="d-flex flex-column align-center" style="gap: 16px">
+      <div
+        class="d-flex align-center justify-center"
+        style="width: 60px; height: 60px; border-radius: 8px; overflow: hidden"
+      >
+        <div ref="cubeContainer" class="w-100 h-100" style="pointer-events: none" />
+      </div>
+      <v-divider class="w-100" />
+      <div class="d-flex flex-wrap justify-center" style="max-width: 140px">
+        <v-btn
+          v-for="orientation in orientations"
+          :key="orientation.value"
+          icon
+          size="32"
+          variant="text"
+          class="ma-1"
+          @mouseenter="hoveredFace = orientation.face"
+          @mouseleave="hoveredFace = undefined"
+          @click.stop="emit('select', orientation.value)"
+        >
+          <v-tooltip activator="parent" location="top">{{ orientation.label }}</v-tooltip>
+          <span class="text-caption font-weight-black">{{ orientation.label }}</span>
+        </v-btn>
+      </div>
+    </div>
+  </v-list>
+</template>
+
+<style scoped>
+.satellite-node {
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.2) !important;
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  transition: all 0.2s ease;
+}
+.satellite-node:hover {
+  transform: translate(-50%, -50%) scale(1.1);
+  border-color: white !important;
+  background: rgba(255, 255, 255, 0.1) !important;
+}
+.transition-all {
+  transition: all 0.4s ease;
+}
+.orientation-menu {
+  min-width: 180px;
+  background: rgb(var(--v-theme-surface)) !important;
+}
+</style>

package/app/components/HybridRenderingView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import VeaseViewToolbar from "@ogw_front/components/VeaseViewToolbar";
+import ViewToolbar from "@ogw_front/components/ViewToolbar";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -47,7 +47,7 @@ function debounce(func, wait) {
 <template>
   <ClientOnly>
     <div data-testid="hybridViewer" class="fill-height" style="position: relative; height: 100%">
-      <VeaseViewToolbar />
+      <ViewToolbar />
       <slot name="ui"></slot>
       <v-col
         class="pa-0"

package/app/components/Screenshot.vue

@@ -1,15 +1,13 @@
 <script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
+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 { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-const emit = defineEmits(["close"]);
+const show = defineModel({ type: Boolean, default: false });
 
-const { show_dialog, width } = defineProps({
-  show_dialog: { type: Boolean, required: true },
-  width: { type: Number, required: false, default: 400 },
+const { width } = defineProps({
+  width: { type: Number, default: 400 },
 });
 
 const output_extensions =
@@ -33,7 +31,7 @@ async function takeScreenshot() {
       },
     },
   );
-  emit("close");
+  show.value = false;
 }
 
 watch(output_extension, (value) => {
@@ -42,58 +40,41 @@ watch(output_extension, (value) => {
   }
 });
 </script>
+
 <template>
-  <GlassCard
-    v-if="show_dialog"
-    @click.stop
+  <ToolPanel
+    v-model="show"
     title="Take a screenshot"
     :width="width"
-    :ripple="false"
-    variant="panel"
-    padding="pa-0"
-    class="position-absolute elevation-24"
-    style="z-index: 2; top: 90px; right: 55px"
+    close-label="Cancel"
+    action-label="Screenshot"
+    @action="takeScreenshot"
   >
-    <v-card-text class="pa-5">
-      <v-container>
-        <v-row>
-          <v-col cols="8" class="py-0">
-            <v-text-field v-model="filename" label="File name"></v-text-field>
-          </v-col>
-          <v-col cols="4" class="py-0">
-            <v-select
-              v-model="output_extension"
-              :items="output_extensions"
-              label="Extension"
-              required
-            />
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col cols="12" class="py-0">
-            <v-switch
-              v-model="include_background"
-              :disabled="output_extension !== 'png'"
-              label="Include background"
-              inset
-            ></v-switch>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-card-text>
+    <v-container class="pa-5">
+      <v-row>
+        <v-col cols="8" class="py-0">
+          <v-text-field v-model="filename" label="File name"></v-text-field>
+        </v-col>
+        <v-col cols="4" class="py-0">
+          <v-select
+            v-model="output_extension"
+            :items="output_extensions"
+            label="Extension"
+            required
+          />
+        </v-col>
+      </v-row>
 
-    <template #actions>
-      <v-card-actions class="justify-center pb-4">
-        <v-btn variant="text" color="primary" @click="emit('close')">Close</v-btn>
-        <v-btn
-          variant="outlined"
-          :disabled="!filename || !output_extension"
-          color="primary"
-          @click="takeScreenshot()"
-          >Screenshot</v-btn
-        >
-      </v-card-actions>
-    </template>
-  </GlassCard>
+      <v-row>
+        <v-col cols="12" class="py-0">
+          <v-switch
+            v-model="include_background"
+            :disabled="output_extension !== 'png'"
+            label="Include background"
+            inset
+          ></v-switch>
+        </v-col>
+      </v-row>
+    </v-container>
+  </ToolPanel>
 </template>

package/app/components/ToolPanel.vue

@@ -0,0 +1,62 @@
+<script setup>
+import GlassCard from "@ogw_front/components/GlassCard";
+
+const { title, width, closeLabel, actionLabel } = defineProps({
+  title: { type: String, default: "" },
+  width: { type: Number, default: 400 },
+  closeLabel: { type: String, default: "Close" },
+  actionLabel: { type: String, default: undefined },
+});
+
+const model = defineModel({ type: Boolean, default: false });
+const emit = defineEmits(["action"]);
+
+function close() {
+  model.value = false;
+}
+</script>
+
+<template>
+  <GlassCard
+    v-if="model"
+    v-click-outside="close"
+    :title="title"
+    :width="width"
+    :ripple="false"
+    variant="panel"
+    padding="pa-0"
+    class="position-absolute rounded-xl elevation-24 tool-panel"
+    v-bind="$attrs"
+  >
+    <v-card-text class="pa-0 overflow-hidden position-relative">
+      <slot />
+    </v-card-text>
+
+    <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">
+            {{ closeLabel }}
+          </v-btn>
+          <v-btn
+            v-if="actionLabel"
+            variant="outlined"
+            size="small"
+            color="white"
+            @click="emit('action')"
+          >
+            {{ actionLabel }}
+          </v-btn>
+        </v-card-actions>
+      </slot>
+    </template>
+  </GlassCard>
+</template>
+
+<style scoped>
+.tool-panel {
+  z-index: 2;
+  top: 90px;
+  right: 55px;
+}
+</style>

package/app/components/ViewToolbar.vue

@@ -2,19 +2,46 @@
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 import ActionButton from "@ogw_front/components/ActionButton.vue";
+import CameraOrientation from "@ogw_front/components/CameraOrientation.vue";
 import Screenshot from "@ogw_front/components/Screenshot";
+import ZScaling from "@ogw_front/components/ZScaling";
+
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
+const hybridViewerStore = useHybridViewerStore();
 const viewerStore = useViewerStore();
 const take_screenshot = ref(false);
+const showCameraOrientation = ref(false);
+const showZScaling = ref(false);
 const grid_scale = ref(false);
+const zScale = ref(hybridViewerStore.zScale);
+
+watch(
+  () => hybridViewerStore.zScale,
+  (newVal) => {
+    zScale.value = newVal;
+  },
+);
+
+async function handleZScalingClose() {
+  await hybridViewerStore.setZScaling(zScale.value);
+  showZScaling.value = false;
+}
 
 const camera_options = [
   {
     tooltip: "Reset camera",
     icon: "mdi-cube-scan",
     action: () => {
-      viewerStore.request(schemas.opengeodeweb_viewer.viewer.reset_camera);
+      hybridViewerStore.resetCamera();
+    },
+  },
+  {
+    tooltip: "Camera orientation",
+    icon: "mdi-rotate-3d",
+    action: () => {
+      showCameraOrientation.value = !showCameraOrientation.value;
     },
   },
   {
@@ -34,11 +61,19 @@ const camera_options = [
         {
           response_function: () => {
             grid_scale.value = !grid_scale.value;
+            hybridViewerStore.remoteRender();
           },
         },
       );
     },
   },
+  {
+    tooltip: "Z Scaling Control",
+    icon: "mdi-sort",
+    action: () => {
+      showZScaling.value = !showZScaling.value;
+    },
+  },
 ];
 </script>
 
@@ -47,15 +82,26 @@ const camera_options = [
     <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
       <v-col>
         <ActionButton
-          :tooltip="camera_option.tooltip"
           :icon="camera_option.icon"
+          :tooltip="camera_option.tooltip"
           tooltip-location="left"
-          @click="camera_option.action"
+          @click.stop="camera_option.action"
         />
       </v-col>
     </v-row>
   </v-container>
-  <Screenshot :show_dialog="take_screenshot" @close="take_screenshot = false" />
+  <CameraOrientation
+    v-model:show="showCameraOrientation"
+    panel
+    @select="hybridViewerStore.setCameraOrientation"
+  />
+  <Screenshot v-model="take_screenshot" />
+  <ZScaling
+    v-model:show="showZScaling"
+    v-model="zScale"
+    :width="400"
+    @apply="handleZScalingClose"
+  />
 </template>
 
 <style module>

package/app/components/Viewer/Generic/Mesh/EdgesOptions.vue

@@ -46,48 +46,6 @@ const color = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_name = computed({
-  get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesVertexAttributeName(id.value, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_range = computed({
-  get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesVertexAttributeRange(id.value, newValue[0], newValue[1]);
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_color_map = computed({
-  get: () => dataStyleStore.meshEdgesVertexAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesVertexAttributeColorMap(id.value, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-const edge_attribute_name = computed({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesEdgeAttributeName(id.value, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-const edge_attribute_range = computed({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesEdgeAttributeRange(id.value, newValue[0], newValue[1]);
-    hybridViewerStore.remoteRender();
-  },
-});
-const edge_attribute_color_map = computed({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesEdgeAttributeColorMap(id.value, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
 </script>
 
 <template>
@@ -110,12 +68,6 @@ const edge_attribute_color_map = computed({
               :id="id"
               v-model:coloring_style_key="coloring_style_key"
               v-model:color="color"
-              v-model:vertex_attribute_name="vertex_attribute_name"
-              v-model:vertex_attribute_range="vertex_attribute_range"
-              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-              v-model:edge_attribute_name="edge_attribute_name"
-              v-model:edge_attribute_range="edge_attribute_range"
-              v-model:edge_attribute_color_map="edge_attribute_color_map"
             />
           </v-col>
         </v-row>

package/app/components/Viewer/Generic/Mesh/PointsOptions.vue

@@ -95,6 +95,7 @@ const vertex_attribute_color_map = computed({
               v-model:vertex_attribute_name="vertex_attribute_name"
               v-model:vertex_attribute_range="vertex_attribute_range"
               v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+              :capabilities="{ vertex: { available: false } }"
             />
           </v-col>
         </v-row>