feat: add per-object hide and show-all-objects

src/components/layout/ObjectInfo.vue

@@ -33,6 +33,12 @@
         >
           FUNCTIONS
         </h1>
+        <div v-if="selectedObjectGuid.value" class="single_data">
+          <Button variant="outline" class="w-full" @click="handleHide">
+            <EyeOff class="size-4" />
+            Hide
+          </Button>
+        </div>
         <div
           v-for="action in objectActionsState"
           :key="action.guid"
@@ -110,16 +116,28 @@ import {
 } from "@/components/ui/select";
 import { useHover } from "@/composables/useHover";
 import { ref, watchEffect } from "vue";
-import { ArrowBigLeftDash, ArrowBigRightDash } from "lucide-vue-next";
+import { ArrowBigLeftDash, ArrowBigRightDash, EyeOff } from "lucide-vue-next";
 import { useViewerRuntime } from "@/viewer/viewer_context";
 import type { ObjectAction } from "@/viewer/viewer_store";
 
 const runtime = useViewerRuntime();
-const { objectActionsState, objectBarData, blockPicker, theme } = runtime.store;
+const {
+  objectActionsState,
+  objectBarData,
+  blockPicker,
+  theme,
+  selectedObjectGuid,
+} = runtime.store;
 const handleObjectAction = (action: ObjectAction, value?: unknown) =>
   runtime.handleObjectAction({ ...action }, value);
 const infoPanel = ref<HTMLElement | null>(null);
 
+function handleHide() {
+  if (!selectedObjectGuid.value) return;
+  runtime.hideObjectByGuid(selectedObjectGuid.value);
+  runtime.deselectObject();
+}
+
 const { isHovered } = useHover(infoPanel);
 
 watchEffect(() => {

src/components/tools/display/DisplayGroup.vue

@@ -12,6 +12,7 @@
         @delete="deleteSavedView"
       />
       <SaveScreenshotButton />
+      <ShowAllObjectsButton />
     </div>
   </div>
 </template>
@@ -25,6 +26,7 @@ import {
   SaveViewButton,
   SavedViewsButton,
   SaveScreenshotButton,
+  ShowAllObjectsButton,
 } from "./index";
 
 const SAVED_VIEWS_STORAGE_KEY = "compas_threejs_saved_views";

src/components/tools/display/ShowAllObjectsButton.vue

@@ -0,0 +1,37 @@
+<template>
+  <TooltipProvider :delay-duration="600">
+    <Tooltip>
+      <TooltipTrigger>
+        <Button
+          variant="secondary"
+          size="icon"
+          class="toolbar-button"
+          @click="handleClick"
+        >
+          <Eye />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent class="z-1000" side="bottom">
+        <p>Show all objects</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>
+
+<script setup lang="ts">
+import { Eye } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider,
+} from "@/components/ui/tooltip";
+import { useViewerRuntime } from "@/viewer/viewer_context";
+
+const runtime = useViewerRuntime();
+
+function handleClick() {
+  runtime.showAllObjects();
+}
+</script>

src/components/tools/display/index.ts

@@ -1,3 +1,4 @@
 export { default as SaveViewButton } from "./SaveViewButton.vue";
 export { default as SavedViewsButton } from "./SavedViewsButton.vue";
 export { default as SaveScreenshotButton } from "./SaveScreenshotButton.vue";
+export { default as ShowAllObjectsButton } from "./ShowAllObjectsButton.vue";

src/viewer/viewer_runtime.ts

@@ -126,6 +126,7 @@ export class ViewerRuntime {
   private disposed = false;
   private pickedObject: THREE.Object3D | null = null;
   private pickedMaterial: THREE.Material | THREE.Material[] | null = null;
+  private readonly hiddenGuids = new Set<string>();
   private readonly highlightMaterial = new THREE.MeshStandardMaterial({
     color: "orange",
     emissive: "yellow",
@@ -279,6 +280,25 @@ export class ViewerRuntime {
     this.store.objectBarData.isVisible = false;
   }
 
+  hideObjectByGuid(guid: string): void {
+    const object = this.geometries.get(guid);
+    if (!object) return;
+    object.visible = false;
+    this.hiddenGuids.add(guid);
+  }
+
+  showAllObjects(): void {
+    for (const guid of this.hiddenGuids) {
+      const object = this.geometries.get(guid);
+      if (object) object.visible = true;
+    }
+    this.hiddenGuids.clear();
+  }
+
+  deselectObject(): void {
+    this.clearPickedObject();
+  }
+
   setTransformMode(mode: "translate" | "rotate" | "scale"): void {
     this.store.pickerMode.value = mode;
     this.transformControls.setMode(mode);
@@ -360,6 +380,7 @@ export class ViewerRuntime {
       this.disposeObject(object);
     }
     this.geometries.clear();
+    this.hiddenGuids.clear();
     this.clearLights();
     for (const entry of this.materials.values()) entry.material.dispose();
     this.materials.clear();
@@ -695,7 +716,10 @@ export class ViewerRuntime {
     }
     this.transformControls.attach(picked);
     const guid = this.findGeometryGuid(picked);
-    if (guid) this.sendData({ dispatch: "object_picked", guid });
+    if (guid) {
+      this.store.selectedObjectGuid.value = guid;
+      this.sendData({ dispatch: "object_picked", guid });
+    }
   }
 
   private clearPickedObject(): void {
@@ -711,6 +735,7 @@ export class ViewerRuntime {
     this.transformControls.detach();
     this.store.objectBarData.data = null;
     this.store.objectActionsState.splice(0);
+    this.store.selectedObjectGuid.value = null;
   }
 
   private findGeometryGuid(object: THREE.Object3D): string | undefined {
@@ -813,6 +838,7 @@ export class ViewerRuntime {
       this.disposeObject(object);
       this.geometries.delete(guid);
       this.geometryMaterials.delete(guid);
+      this.hiddenGuids.delete(guid);
     } else if (data.type === "set_visibility") {
       object.visible = data.visible;
     } else if (data.type === "toggle_visibility") {
@@ -1021,6 +1047,7 @@ export class ViewerRuntime {
   private resetAfterDispose(): void {
     for (const object of this.geometries.values()) this.disposeObject(object);
     this.geometries.clear();
+    this.hiddenGuids.clear();
     this.clearLights();
     for (const entry of this.materials.values()) entry.material.dispose();
     this.materials.clear();

src/viewer/viewer_store.ts

@@ -85,6 +85,7 @@ export interface ViewerStore {
   blockPicker: { value: boolean };
   showEdges: { value: boolean };
   theme: { value: "light" | "dark" };
+  selectedObjectGuid: { value: string | null };
 }
 
 export function createViewerStore(): ViewerStore {
@@ -106,5 +107,6 @@ export function createViewerStore(): ViewerStore {
     blockPicker: reactive({ value: false }),
     showEdges: reactive({ value: false }),
     theme: reactive({ value: "light" as const }),
+    selectedObjectGuid: reactive({ value: null as string | null }),
   };
 }