@geode/opengeodeweb-front 10.30.0-rc.2 → 10.30.0-rc.4

package/app/components/ClippingPlaneCard.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { getPlaneCssColor } from "@ogw_front/utils/clipping_planes";
+
+const { plane, index } = defineProps({
+  plane: {
+    type: Object,
+    required: true,
+  },
+  index: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["remove", "flipNormal"]);
+</script>
+
+<template>
+  <v-card
+    data-testid="planeCard"
+    variant="outlined"
+    class="pa-2 mb-3 rounded-lg border-opacity-50"
+    :style="{ borderColor: getPlaneCssColor(index) }"
+  >
+    <v-row align="center" justify="space-between" no-gutters class="mb-1">
+      <v-col cols="auto" class="d-flex align-center">
+        <v-chip
+          size="x-small"
+          variant="flat"
+          :style="{
+            backgroundColor: getPlaneCssColor(index),
+            color: 'white',
+          }"
+          class="font-weight-bold"
+        >
+          Plane #{{ index + 1 }}
+        </v-chip>
+      </v-col>
+      <v-col cols="auto">
+        <v-btn
+          data-testid="removePlaneButton"
+          icon="mdi-trash-can-outline"
+          size="x-small"
+          variant="text"
+          color="error"
+          @click="emit('remove')"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row no-gutters class="mb-1">
+      <v-col class="text-caption text-medium-emphasis">Origin [X, Y, Z]</v-col>
+    </v-row>
+    <v-row v-if="plane.origin" dense class="mb-2">
+      <v-col v-for="axis in 3" :key="'orig-' + axis" cols="4">
+        <v-text-field
+          v-model.number="plane.origin[axis - 1]"
+          data-testid="planeOriginInput"
+          type="number"
+          variant="outlined"
+          density="compact"
+          hide-details
+          step="any"
+          class="text-caption"
+        />
+      </v-col>
+    </v-row>
+    <v-row v-else dense class="mb-2">
+      <v-col v-for="axis in 3" :key="'orig-placeholder-' + axis" cols="4">
+        <v-text-field
+          placeholder="—"
+          variant="outlined"
+          density="compact"
+          hide-details
+          disabled
+          class="text-caption"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row align="center" justify="space-between" no-gutters class="mb-1">
+      <v-col class="text-caption text-medium-emphasis">Normal [X, Y, Z]</v-col>
+      <v-col cols="auto">
+        <v-btn
+          data-testid="invertNormalButton"
+          size="x-small"
+          variant="text"
+          color="primary"
+          prepend-icon="mdi-swap-horizontal"
+          class="text-none text-caption px-1"
+          @click="emit('flipNormal')"
+        >
+          Invert Normal
+        </v-btn>
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col v-for="axis in 3" :key="'norm-' + axis" cols="4">
+        <v-text-field
+          v-model.number="plane.normal[axis - 1]"
+          data-testid="planeNormalInput"
+          type="number"
+          variant="outlined"
+          density="compact"
+          hide-details
+          step="any"
+          class="text-caption"
+        />
+      </v-col>
+    </v-row>
+  </v-card>
+</template>

package/app/components/ClippingPlanes.vue

@@ -0,0 +1,238 @@
+<script setup>
+import { DEBOUNCE_DELAY, DEFAULT_NORMALS } from "@ogw_front/utils/clipping_planes";
+import ClippingPlaneCard from "@ogw_front/components/ClippingPlaneCard";
+import ToolPanel from "@ogw_front/components/ToolPanel";
+import { useClippingPlanesWidget } from "@ogw_front/composables/clipping_planes_widget";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDebounceFn } from "@vueuse/core";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const show = defineModel("show", { type: Boolean, default: false });
+const dataStore = useDataStore();
+const hybridViewerStore = useHybridViewerStore();
+const targetAllVisible = ref(true);
+const selectedDatasetIds = ref([]);
+const planes = ref([{ origin: undefined, normal: [1, 0, 0] }]);
+const allItems = dataStore.refAllItems();
+const availableDatasets = computed(() =>
+  allItems.value.map((item) => ({ title: item.name || item.id, value: item.id })),
+);
+const widgetContainer = useTemplateRef("widgetContainer");
+const debouncedApply = useDebounceFn(() => applyClippingPlanes(), DEBOUNCE_DELAY);
+const {
+  getSceneCenter,
+  syncWidgets,
+  syncLocalCamera,
+  cleanupLocalWidget,
+  initLocalWidget,
+  updateWidgetPlacement,
+  isFromWidget,
+  setFromWidget,
+} = useClippingPlanesWidget({
+  planes,
+  targetAllVisible,
+  selectedDatasetIds,
+  allItems,
+  hybridViewerStore,
+  debouncedApply,
+});
+
+function addPlane() {
+  const normal = DEFAULT_NORMALS[planes.value.length % DEFAULT_NORMALS.length];
+  planes.value.push({ origin: getSceneCenter(), normal });
+}
+
+function removePlane(index) {
+  planes.value.splice(index, 1);
+}
+
+function flipNormal(plane) {
+  plane.normal = plane.normal.map((component) => -component);
+  syncWidgets();
+  applyClippingPlanes();
+}
+
+async function applyClippingPlanes() {
+  const allIds = allItems.value.map((item) => item.id);
+  if (allIds.length === 0) {
+    return;
+  }
+  const center = getSceneCenter();
+  const targetIds = targetAllVisible.value ? allIds : selectedDatasetIds.value;
+  const untargetedIds = allIds.filter((id) => !targetIds.includes(id));
+  const planesData = planes.value.map((plane) => ({
+    origin: (plane.origin || center).map(Number),
+    normal: plane.normal.map(Number),
+  }));
+
+  if (targetIds.length > 0) {
+    await hybridViewerStore.setClippingPlanes(targetIds, planesData);
+  }
+  if (untargetedIds.length > 0) {
+    await hybridViewerStore.setClippingPlanes(untargetedIds, []);
+  }
+}
+
+async function resetClippingPlanes() {
+  setFromWidget(true);
+  planes.value = [{ origin: undefined, normal: [1, 0, 0] }];
+  updateWidgetPlacement({ isReset: true });
+  setFromWidget(false);
+  await applyClippingPlanes();
+}
+
+async function removeClippingPlanes() {
+  const allIds = allItems.value.map((item) => item.id);
+  await hybridViewerStore.setClippingPlanes(allIds, []);
+}
+
+watch(widgetContainer, (container) => {
+  if (container) {
+    initLocalWidget(container.$el || container);
+  }
+});
+
+watch(
+  planes,
+  () => {
+    if (isFromWidget()) {
+      return;
+    }
+    syncWidgets();
+    debouncedApply();
+  },
+  { deep: true },
+);
+
+watch(show, (visible) => {
+  if (visible) {
+    updateWidgetPlacement({ isReset: true });
+    applyClippingPlanes();
+  }
+});
+
+watch(
+  [targetAllVisible, selectedDatasetIds],
+  () => {
+    if (show.value) {
+      updateWidgetPlacement({ isReset: true });
+      applyClippingPlanes();
+    }
+  },
+  { deep: true },
+);
+
+watch(allItems, () => {
+  if (show.value) {
+    updateWidgetPlacement({ isReset: true });
+    applyClippingPlanes();
+  }
+});
+
+watch(
+  () => Object.values(hybridViewerStore.hybridDb).filter((entry) => entry && entry.actor).length,
+  (actorCount) => {
+    if (show.value && actorCount > 0) {
+      updateWidgetPlacement({ isReset: true });
+      applyClippingPlanes();
+    }
+  },
+);
+
+watch(() => hybridViewerStore.camera_options, syncLocalCamera, { deep: true });
+
+onBeforeUnmount(cleanupLocalWidget);
+</script>
+
+<template>
+  <ToolPanel v-model="show" title="Clipping Planes" :width="360" :click-outside="false">
+    <v-card-text class="pa-3 max-panel-height overflow-y-auto">
+      <v-sheet
+        ref="widgetContainer"
+        height="180"
+        color="transparent"
+        class="rounded-lg mb-3 overflow-hidden"
+      />
+      <v-switch
+        v-model="targetAllVisible"
+        data-testid="targetAllVisibleSwitch"
+        label="Apply to all visible datasets"
+        color="primary"
+        density="compact"
+        hide-details
+        class="mb-2 text-caption"
+      />
+
+      <v-select
+        v-if="!targetAllVisible"
+        v-model="selectedDatasetIds"
+        data-testid="selectedDatasetsSelect"
+        :items="availableDatasets"
+        label="Select datasets"
+        multiple
+        chips
+        closable-chips
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="mb-3 text-caption"
+      />
+
+      <v-divider class="my-2" />
+
+      <v-row align="center" justify="space-between" no-gutters class="mb-2">
+        <v-col class="text-caption font-weight-bold">Planes ({{ planes.length }})</v-col>
+        <v-col cols="auto">
+          <v-btn
+            data-testid="addPlaneButton"
+            size="x-small"
+            variant="tonal"
+            color="primary"
+            icon="mdi-plus"
+            @click="addPlane"
+          />
+        </v-col>
+      </v-row>
+
+      <ClippingPlaneCard
+        v-for="(plane, idx) in planes"
+        :key="idx"
+        :plane="plane"
+        :index="idx"
+        @remove="removePlane(idx)"
+        @flip-normal="flipNormal(plane)"
+      />
+    </v-card-text>
+
+    <template #actions>
+      <v-card-actions class="justify-space-between px-3 pb-3 pt-0">
+        <v-btn
+          data-testid="removeClippingPlanesButton"
+          variant="text"
+          size="small"
+          color="error"
+          class="text-caption text-none"
+          @click="removeClippingPlanes"
+        >
+          Remove Clipping
+        </v-btn>
+        <v-btn
+          data-testid="resetClippingPlanesButton"
+          variant="tonal"
+          size="small"
+          color="secondary"
+          class="text-caption text-none"
+          @click="resetClippingPlanes"
+        >
+          Reset
+        </v-btn>
+      </v-card-actions>
+    </template>
+  </ToolPanel>
+</template>
+
+<style scoped>
+.max-panel-height {
+  max-height: 520px;
+}
+</style>

package/app/components/ToolPanel.vue

@@ -1,11 +1,12 @@
 <script setup>
 import GlassCard from "@ogw_front/components/GlassCard";
 
-const { title, width, closeLabel, actionLabel } = defineProps({
+const { title, width, closeLabel, actionLabel, clickOutside } = defineProps({
   title: { type: String, default: "" },
   width: { type: Number, default: 260 },
   closeLabel: { type: String, default: "Close" },
   actionLabel: { type: String, default: undefined },
+  clickOutside: { type: Boolean, default: true },
 });
 
 const model = defineModel({ type: Boolean, default: false });
@@ -19,7 +20,7 @@ function close() {
 <template>
   <GlassCard
     v-if="model"
-    v-click-outside="close"
+    v-click-outside="{ handler: close, closeConditional: () => clickOutside }"
     :title="title"
     :width="width"
     :ripple="false"

package/app/components/ViewToolbar.vue

@@ -3,6 +3,7 @@ import ActionButton from "@ogw_front/components/ActionButton";
 import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.svg";
 import CameraManager from "@ogw_front/components/CameraManager";
 import CameraOrientation from "@ogw_front/components/CameraOrientation";
+import ClippingPlanes from "@ogw_front/components/ClippingPlanes";
 import Screenshot from "@ogw_front/components/Screenshot";
 import ZScaling from "@ogw_front/components/ZScaling";
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
@@ -15,6 +16,7 @@ const take_screenshot = ref(false);
 const show_camera_manager = ref(false);
 const showCameraOrientation = ref(false);
 const showZScaling = ref(false);
+const showClippingPlanes = ref(false);
 const grid_scale = ref(false);
 const zScale = ref(hybridViewerStore.zScale);
 
@@ -151,6 +153,15 @@ const camera_options = computed(() => [
       showZScaling.value = !showZScaling.value;
     },
   },
+  {
+    testId: "clippingPlanesButton",
+    tooltip: "Clipping Planes",
+    icon: "mdi-content-cut",
+    color: showClippingPlanes.value ? "primary" : undefined,
+    action: () => {
+      showClippingPlanes.value = !showClippingPlanes.value;
+    },
+  },
 ]);
 </script>
 
@@ -223,6 +234,7 @@ const camera_options = computed(() => [
     :width="260"
     @apply="handleZScalingClose"
   />
+  <ClippingPlanes v-model:show="showClippingPlanes" />
 </template>
 
 <style module>

package/app/components/Viewer/ObjectTree/Base/TreeRow.vue

@@ -1,4 +1,8 @@
 <script setup>
+import { useDataStore } from "@ogw_front/stores/data";
+
+const dataStore = useDataStore();
+
 const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps({
   item: { type: Object, required: true },
   itemProps: { type: Object, required: true },
@@ -7,13 +11,34 @@ const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps
   getIndeterminate: { type: Function, required: true },
 });
 
-defineEmits(["toggle-open", "toggle-select", "hover-eye-enter", "hover-eye-leave"]);
+const emit = defineEmits(["toggle-open", "toggle-select", "hover-eye-enter", "hover-eye-leave"]);
 
 const INDENT_STEP = 10;
+
+function triggerHorizonStackModal(rawItem) {
+  globalThis.dispatchEvent(new CustomEvent("open-horizon-stack-modal", { detail: rawItem }));
+}
+const isHorizonStack = computed(() => item.raw.geode_object_type === "HorizonStack3D");
+const isViewable = computed(() => dataStore.isItemViewable(item.raw));
+const showEyeButton = computed(
+  () => !isHorizonStack.value && item.raw.title !== "HorizonStack3D" && isViewable.value,
+);
+
+function handleRowClick(event) {
+  if (isHorizonStack.value) {
+    if (!item.isLeaf) {
+      return;
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+    triggerHorizonStackModal(item.raw);
+  }
+}
 </script>
 
 <template>
-  <div class="tree-row-content d-flex align-center px-2 ps-2 w-100">
+  <div class="tree-row-content d-flex align-center px-2 ps-2 w-100" @click="handleRowClick">
     <div
       v-if="item.depth > 0"
       class="flex-shrink-0"
@@ -30,24 +55,37 @@ const INDENT_STEP = 10;
       />
       <div v-else class="icon-placeholder" />
 
-      <v-btn
-        v-if="selection.selectable"
-        :icon="
-          getIndeterminate(item.raw)
-            ? 'mdi-eye-minus-outline'
-            : isSelected(item.raw)
-              ? 'mdi-eye'
-              : 'mdi-eye-off-outline'
-        "
-        variant="text"
-        density="compact"
-        color="black"
-        class="flex-shrink-0"
-        @click.stop="$emit('toggle-select', item.raw)"
-        @mousedown.stop
-        @mouseenter="$emit('hover-eye-enter', item.raw)"
-        @mouseleave="$emit('hover-eye-leave', item.raw)"
-      />
+      <template v-if="selection.selectable">
+        <v-btn
+          v-if="isHorizonStack && item.isLeaf"
+          icon="mdi-layers-triple"
+          variant="text"
+          density="compact"
+          color="black"
+          class="flex-shrink-0"
+          style="z-index: 4"
+          @click.stop="triggerHorizonStackModal(item.raw)"
+          @mousedown.stop
+        />
+        <v-btn
+          v-else-if="showEyeButton"
+          :icon="
+            getIndeterminate(item.raw)
+              ? 'mdi-eye-minus-outline'
+              : isSelected(item.raw)
+                ? 'mdi-eye'
+                : 'mdi-eye-off-outline'
+          "
+          variant="text"
+          density="compact"
+          color="black"
+          class="flex-shrink-0"
+          @click.stop="$emit('toggle-select', item.raw)"
+          @mousedown.stop
+          @mouseenter="$emit('hover-eye-enter', item.raw)"
+          @mouseleave="$emit('hover-eye-leave', item.raw)"
+        />
+      </template>
     </div>
 
     <div class="tree-title flex-grow-1 overflow-hidden d-flex align-center ms-1 pt-1">

package/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue

@@ -179,46 +179,48 @@ function expandAll() {
       </template>
 
       <template #append="{ item }">
-        <v-btn
-          v-if="item.viewer_type"
-          icon="mdi-target"
-          size="medium"
-          variant="text"
-          v-tooltip="'Focus camera on object'"
-          @click.stop="hybridViewerStore.focusCameraOnObject(item.id)"
-        />
-        <v-btn
-          v-if="isModel(item)"
-          icon="mdi-magnify-expand"
-          size="medium"
-          class="ml-2"
-          variant="text"
-          v-tooltip="'Model\'s mesh components'"
-          @click.stop="
-            treeviewStore.displayAdditionalTree(
-              item.id,
-              item.title,
-              item.geode_object_type,
-              'model_components',
-            )
-          "
-        />
-        <v-btn
-          v-if="isModel(item) && hasCollectionsMap[item.id]"
-          icon="mdi-format-list-group"
-          size="medium"
-          class="ml-2"
-          variant="text"
-          v-tooltip="'Model\'s collections'"
-          @click.stop="
-            treeviewStore.displayAdditionalTree(
-              item.id,
-              item.title,
-              item.geode_object_type,
-              'model_collections',
-            )
-          "
-        />
+        <template v-if="item.geode_object_type !== 'HorizonStack3D'">
+          <v-btn
+            v-if="item.viewer_type"
+            icon="mdi-target"
+            size="medium"
+            variant="text"
+            v-tooltip="'Focus camera on object'"
+            @click.stop="hybridViewerStore.focusCameraOnObject(item.id)"
+          />
+          <v-btn
+            v-if="isModel(item)"
+            icon="mdi-magnify-expand"
+            size="medium"
+            class="ml-2"
+            variant="text"
+            v-tooltip="'Model\'s mesh components'"
+            @click.stop="
+              treeviewStore.displayAdditionalTree(
+                item.id,
+                item.title,
+                item.geode_object_type,
+                'model_components',
+              )
+            "
+          />
+          <v-btn
+            v-if="isModel(item) && hasCollectionsMap[item.id]"
+            icon="mdi-format-list-group"
+            size="medium"
+            class="ml-2"
+            variant="text"
+            v-tooltip="'Model\'s collections'"
+            @click.stop="
+              treeviewStore.displayAdditionalTree(
+                item.id,
+                item.title,
+                item.geode_object_type,
+                'model_collections',
+              )
+            "
+          />
+        </template>
       </template>
     </CommonTreeView>
   </div>