Added a visible option to the mesurements options which turns the visibility and pickable state for measurements on or off (#1882)

packages/viewer-sandbox/src/Sandbox.ts

@@ -101,6 +101,7 @@ export default class Sandbox {
 
   public measurementsParams = {
     enabled: false,
+    visible: true,
     type: MeasurementType.POINTTOPOINT,
     vertexSnap: true,
     units: 'm',
@@ -1071,7 +1072,13 @@ export default class Sandbox {
       .on('change', () => {
         this.viewer.enableMeasurements(this.measurementsParams.enabled)
       })
-
+    container
+      .addInput(this.measurementsParams, 'visible', {
+        label: 'Visible'
+      })
+      .on('change', () => {
+        this.viewer.setMeasurementOptions(this.measurementsParams)
+      })
     container
       .addInput(this.measurementsParams, 'type', {
         label: 'Type',

packages/viewer/src/modules/SpeckleRenderer.ts

@@ -62,6 +62,7 @@ import SpecklePointMaterial from './materials/SpecklePointMaterial'
 import SpeckleLineMaterial from './materials/SpeckleLineMaterial'
 import { Measurements } from './measurements/Measurements'
 import { MaterialOptions } from './materials/Materials'
+import { BaseSpecklePass } from './pipeline/SpecklePass'
 
 export enum ObjectLayers {
   STREAM_CONTENT_MESH = 10,
@@ -966,7 +967,7 @@ export default class SpeckleRenderer {
 
   private onObjectClick(e) {
     const measurement = this._measurements.pickMeasurement(e)
-    if (measurement) {
+    if (measurement && this._measurements.visible) {
       this._measurements.selectMeasurement(measurement, true)
       return
     }
@@ -1490,4 +1491,13 @@ export default class SpeckleRenderer {
   public markTransformsDirty(batchId: string) {
     ;(this.batcher.batches[batchId] as MeshBatch).mesh.transformsDirty = true
   }
+
+  public enableLayers(layers: ObjectLayers[], value: boolean) {
+    this.pipeline.composer.passes.forEach((pass: BaseSpecklePass) => {
+      if (!(pass instanceof BaseSpecklePass)) return
+      layers.forEach((layer: ObjectLayers) => {
+        pass.enableLayer(layer, value)
+      })
+    })
+  }
 }

packages/viewer/src/modules/measurements/Measurements.ts

@@ -16,6 +16,7 @@ export enum MeasurementType {
 }
 
 export interface MeasurementOptions {
+  visible: boolean
   type?: MeasurementType
   vertexSnap?: boolean
   units?: string
@@ -23,6 +24,7 @@ export interface MeasurementOptions {
 }
 
 const DefaultMeasurementsOptions = {
+  visible: true,
   type: MeasurementType.POINTTOPOINT,
   vertexSnap: true,
   units: 'm',
@@ -61,6 +63,10 @@ export class Measurements {
     return this._enabled
   }
 
+  public get visible(): boolean {
+    return this._options.visible
+  }
+
   public set enabled(value: boolean) {
     this._enabled = value
     if (this.measurement) {
@@ -375,6 +381,7 @@ export class Measurements {
         value.update()
       }
     })
+    this.renderer.enableLayers([ObjectLayers.MEASUREMENTS], this._options.visible)
     this.renderer.needsRender = true
     this.renderer.resetPipeline()
   }

packages/viewer/src/modules/pipeline/SpecklePass.ts

@@ -29,6 +29,11 @@ export interface SpeckleProgressivePass extends SpecklePass {
 
 export abstract class BaseSpecklePass extends Pass implements SpecklePass {
   protected layers: ObjectLayers[] = null
+  protected _enabledLayers: ObjectLayers[] = []
+
+  public get enabledLayers(): ObjectLayers[] {
+    return this._enabledLayers
+  }
 
   constructor() {
     super()
@@ -43,6 +48,15 @@ export abstract class BaseSpecklePass extends Pass implements SpecklePass {
 
   public setLayers(layers: ObjectLayers[]) {
     this.layers = layers
+    this._enabledLayers = layers.slice()
+  }
+
+  public enableLayer(layer: ObjectLayers, value: boolean) {
+    if (this._enabledLayers.includes(layer)) {
+      if (!value) this._enabledLayers.splice(this._enabledLayers.indexOf(layer), 1)
+    } else {
+      if (value) this._enabledLayers.push(layer)
+    }
   }
 
   protected applyLayers(camera: Camera) {
@@ -52,7 +66,7 @@ export abstract class BaseSpecklePass extends Pass implements SpecklePass {
     }
     camera.layers.disableAll()
     this.layers.forEach((layer) => {
-      camera.layers.enable(layer)
+      if (this._enabledLayers.includes(layer)) camera.layers.enable(layer)
     })
   }
 }