Fix/clipping

app/components/VeaseViewToolbar.vue

@@ -8,6 +8,8 @@ import ZScaling from "@ogw_front/components/ZScaling";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
+import vtkCubeAxesActor from "@kitware/vtk.js/Rendering/Core/CubeAxesActor";
+
 const hybridViewerStore = useHybridViewerStore();
 const viewerStore = useViewerStore();
 const take_screenshot = ref(false);
@@ -52,6 +54,12 @@ const camera_options = [
         {
           response_function: () => {
             grid_scale.value = !grid_scale.value;
+            const renderer = hybridViewerStore.genericRenderWindow.value.getRenderer();
+            const cubeAxes = vtkCubeAxesActor.newInstance();
+            const bounds = renderer.computeVisiblePropBounds();
+            cubeAxes.setDataBounds(bounds);
+            cubeAxes.setCamera(renderer.getActiveCamera());
+            renderer.addActor(cubeAxes);
             hybridViewerStore.remoteRender();
           },
         },

app/stores/hybrid_viewer.js

@@ -24,119 +24,132 @@
   ACTOR_DARK_VALUE / RGB_MAX,
 ];
 const WHEEL_TIME_OUT_MS = 600;
+const CLIPPING_RANGE_EXPANSION = 0.05;
+const NEAR_CLIPPING_PLANE_TOLERANCE = 0.01;
 
 export const useHybridViewerStore = defineStore("hybridViewer", () => {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const hybridDb = reactive({});
   const status = ref(Status.NOT_CREATED);
   const camera_options = reactive({});
   const genericRenderWindow = reactive({});
   const is_moving = ref(false);
   const zScale = ref(1);
   let viewStream = undefined;
   const gridActor = undefined;
 
   async function initHybridViewer() {
     if (status.value !== Status.NOT_CREATED) {
       return;
     }
     status.value = Status.CREATING;
     genericRenderWindow.value = vtkGenericRenderWindow({
       background: BACKGROUND_COLOR,
       listenWindowResize: false,
     });
 
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
     const imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
     imageStyle.transition = "opacity 0.1s ease-in";
     imageStyle.zIndex = 1;
 
     await viewerStore.ws_connect();
     viewStream = viewerStore.client.getImageStream().createViewStream("-1");
     viewStream.onImageReady((event) => {
       if (is_moving.value) {
         return;
       }
       webGLRenderWindow.setBackgroundImage(event.image);
       imageStyle.opacity = 1;
     });
 
+    const renderer = genericRenderWindow.value.getRenderer();
+    renderer.setClippingRangeExpansion(CLIPPING_RANGE_EXPANSION);
+    renderer.setNearClippingPlaneTolerance(NEAR_CLIPPING_PLANE_TOLERANCE);
+
     status.value = Status.CREATED;
   }
 
   async function addItem(id) {
     if (!genericRenderWindow.value) {
       return;
     }
     const value = await dataStore.item(id);
     const reader = vtkXMLPolyDataReader();
     const textEncoder = new TextEncoder();
     await reader.parseAsArrayBuffer(textEncoder.encode(value.binary_light_viewable));
     const polydata = reader.getOutputData(0);
     const mapper = vtkMapper();
     mapper.setInputData(polydata);
     const actor = vtkActor();
     actor.getProperty().setColor(ACTOR_COLOR);
     actor.setMapper(mapper);
     const renderer = genericRenderWindow.value.getRenderer();
     const isFirst = renderer.getActors().length === 0;
     renderer.addActor(actor);
     if (isFirst) {
       renderer.resetCamera();
     }
     hybridDb[id] = { actor, polydata, mapper };
   }
 
   function removeItem(id) {
     if (!hybridDb[id]) {
       return;
     }
     const renderer = genericRenderWindow.value.getRenderer();
     renderer.removeActor(hybridDb[id].actor);
     genericRenderWindow.value.getRenderWindow().render();
     delete hybridDb[id];
   }
 
-  function setVisibility(id, visibility) {
+  async function setVisibility(id, visibility) {
     if (!hybridDb[id]) {
       return;
     }
     hybridDb[id].actor.setVisibility(visibility);
-    const renderWindow = genericRenderWindow.value.getRenderWindow();
-    renderWindow.render();
+    const renderer = genericRenderWindow.value.getRenderer();
+    renderer.resetCameraClippingRange();
+    genericRenderWindow.value.getRenderWindow().render();
+    const item = await dataStore.item(id);
+    const schema = viewer_schemas?.opengeodeweb_viewer?.[item.viewer_type]?.visibility;
+    if (schema) {
+      await viewerStore.request(schema, { id, visibility });
+    }
+    syncRemoteCamera();
   }
   async function setZScaling(z_scale) {
     zScale.value = z_scale;
     const renderer = genericRenderWindow.value.getRenderer();
     const actors = renderer.getActors();
     for (const actor of actors) {
       if (actor !== gridActor) {
         const scale = actor.getScale();
         actor.setScale(scale[0], scale[1], z_scale);
       }
     }
     renderer.resetCamera();
     genericRenderWindow.value.getRenderWindow().render();
     const schema = viewer_schemas?.opengeodeweb_viewer?.viewer?.set_z_scaling;
     if (!schema) {
       return;
     }
     await viewerStore.request(schema, {
       z_scale,
     });
     remoteRender();
   }
 
   function resetCamera() {
     const renderer = genericRenderWindow.value.getRenderer();
     renderer.resetCamera();
     genericRenderWindow.value.getRenderWindow().render();
     syncRemoteCamera();
   }
 
   function syncRemoteCamera() {
     console.log("syncRemoteCamera");
     const renderer = genericRenderWindow.value.getRenderer();
     const camera = renderer.getActiveCamera();
     const params = {
@@ -149,6 +162,7 @@
         distance: camera.getDistance(),
       },
     };
+    console.log({ params });
     viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, params, {
       response_function: () => {
         remoteRender();
@@ -173,12 +187,12 @@
     imageStyle.transition = "opacity 0.1s ease-in";
     imageStyle.zIndex = 1;
     resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
     console.log("setContainer", container.value.$el);
 
     useMousePressed({
       target: container,
       onPressed: (event) => {
         console.log("onPressed");
         if (event.button === 0) {
           is_moving.value = true;
           event.stopPropagation();
@@ -190,7 +204,7 @@
           return;
         }
         is_moving.value = false;
         console.log("onReleased");
         syncRemoteCamera();
       },
     });
@@ -241,7 +255,7 @@
 
   async function importStores(snapshot) {
     if (!snapshot) {
       console.warn("importStores called with undefined snapshot");
       return;
     }
     const z_scale = snapshot.zScale;