feat(viewer): extra overlay capabilities + better selection logic (fixes dupe selection)

packages/frontend/src/main/components/viewer/Bubbles.vue

@@ -45,7 +45,7 @@
     >
       <!-- <v-icon class="primary--text" style="position: relative; right: -90%">mdi-arrow-right</v-icon> -->
       <!-- <v-icon class="primary--text" style="position: relative; right: -90%">mdi-pan-right</v-icon> -->
-      <v-icon class="primary--text" large style="position: relative; right: -77%; font-size: 3em">
+      <v-icon class="primary--text" large style="position: relative; right: -77%; font-size: 4em">
         mdi-menu-right
       </v-icon>
     </div>
@@ -95,6 +95,8 @@ export default {
             user.filter = data.userCommentActivity.filter
             user.selectionLocation = data.userCommentActivity.selectionLocation
             user.selection = data.userCommentActivity.selection
+            user.selectionCenter = data.userCommentActivity.selectionCenter
+            user.sectionBox = data.userCommentActivity.sectionBox
             user.lastUpdate = Date.now()
             if (Math.random() < 0.5) user.status = 'writing'
             else user.status = 'viewing'
@@ -118,6 +120,7 @@ export default {
       uuid: uuid(),
       selectedIds: [],
       selectionLocation: null,
+      selectionCenter: null,
       users: []
     }
   },
@@ -138,6 +141,7 @@ export default {
       debounce((selectionInfo) => {
         this.selectedIds = selectionInfo.userData.map((o) => o.id)
         this.selectionLocation = selectionInfo.location
+        this.selectionCenter = selectionInfo.selectionCenter
         this.sendUpdateAndPrune()
       }, 50)
     )
@@ -164,6 +168,7 @@ export default {
       else this.$store.commit('resetFilter')
     },
     async sendUpdateAndPrune() {
+      if (!this.$route.params.resourceId) return
       for (let user of this.users) {
         let delta = Date.now() - user.lastUpdate
         if (delta > 20000) {
@@ -191,6 +196,8 @@ export default {
         filter: this.$store.state.appliedFilter,
         selection: this.selectedIds,
         selectionLocation: this.selectionLocation,
+        sectionBox: window.__viewer.sectionBox.getCurrentBox(),
+        selectionCenter: this.selectionCenter,
         camera: c,
         userId: this.$userId(),
         uuid: this.uuid,

packages/viewer/src/app.js

@@ -32,16 +32,12 @@ window.loadData = async function LoadData( url ) {
   console.log(`Finished loading in: ${(Date.now() - t0) / 1000}`)
 } 
 
-v.on( 'select', (objects, point) => {
-  console.info( `Selection event. Current selection count: ${objects.length}.` )
-  console.log( objects )
-  console.log( point )
+v.on( 'select', (info) => {
+  console.info( `Selection event.` )
 } )
 
-v.on( 'object-doubleclicked', (obj, point) => {
-  console.info( 'Object double click event.' )
-  console.log( obj ? obj : 'nothing was doubleckicked.' )
-  console.log( point )
+v.on( 'object-doubleclicked', (info) => {
+  console.info( `Object double click event.` )
 } )
 
 v.on( 'section-box', status => {

packages/viewer/src/modules/InteractionHandler.js

@@ -26,7 +26,7 @@ export default class InteractionHandler {
     this.selectionBox = new THREE.Group()
     this.viewer.scene.add( this.selectionBox )
 
-    this.overlayMeshMaterial = new THREE.MeshLambertMaterial( { color: 0x57f7ff, side: THREE.DoubleSide, wireframe:false, transparent: true, opacity: 0.5 } )
+    this.overlayMeshMaterial = new THREE.MeshLambertMaterial( { color: 0x57f7ff, side: THREE.DoubleSide, wireframe:false, transparent: true, opacity: 0.7 } )
     this.overlayMeshMaterial.clippingPlanes = this.viewer.sectionBox.planes
     this.overlaidObjects = new THREE.Group()
     this.viewer.scene.add( this.overlaidObjects )
@@ -105,38 +105,54 @@ export default class InteractionHandler {
       rootBlock = this.getParentBlock( objs[0].object.parent )
     }
 
+    let objId = selType === 'Block' ? rootBlock.userData.id : objs[0].object.userData.id
+    let objIdIndexCheck = this.selectedObjectsUserData.findIndex( o => o.id === objId )
+    if( objIdIndexCheck !== -1 ) {
+      if( this.selectionHelper.multiSelect ) {
+        // TODO: deselect if in multiple selection mode
+        this.selectedObjectsUserData.splice( objIdIndexCheck, 1 )
+        this.deselectObj( rootBlock ? rootBlock.userData.id : objs[0].object.userData.id )
+      }
+      return
+    }
+
     switch ( selType ) {
       case 'Block': {
         let blockObjs = this.getBlockObjectsCloned( rootBlock )
-        for( let child of blockObjs ) {          
+        for( let child of blockObjs ) {       
+          child.userData = { id: rootBlock.userData.id }
           child.material = this.selectionMeshMaterial
           this.selectedObjects.add( child )
           //this.viewer.outlinePass.selectedObjects.push( child )
         }
         break
       }
-      case 'Mesh':
-        this.selectedObjects.add( new THREE.Mesh( objs[0].object.geometry, this.selectionMeshMaterial ) )
+      case 'Mesh': {
+        let m = new THREE.Mesh( objs[0].object.geometry, this.selectionMeshMaterial )
+        m.userData = { id: objs[0].object.userData.id }
+        this.selectedObjects.add( m )
         //this.viewer.outlinePass.selectedObjects.push( new THREE.Mesh( objs[0].object.geometry, this.selectionMeshMaterial ) )
         break
-      case 'Line':
-        this.selectedObjects.add( new THREE.Line( objs[0].object.geometry, this.selectionMeshMaterial ) )
+        }
+      case 'Line': {
+        let l = new THREE.Line( objs[0].object.geometry, this.selectionMeshMaterial )
+        l.userData = { id: objs[0].object.userData.id }
+        this.selectedObjects.add( l )
         //this.viewer.outlinePass.selectedObjects.push( new THREE.Line( objs[0].object.geometry, this.selectionMeshMaterial ) )
         break
+
+      }
       case 'Point':
         console.warn( 'Point selection not implemented.' )
         return // exit the whole func here, points cause all sorts of trouble when being selected (ie, bbox stuff)
     }
 
-    // let box 
     if ( selType === 'Block' ) {
       this.selectedObjectsUserData.push( rootBlock.userData )
       this.selectedRawObjects.push( rootBlock )
-      // box = new THREE.BoxHelper( rootBlock, 0x23F3BD )
     } else {
       this.selectedObjectsUserData.push( objs[0].object.userData )
       this.selectedRawObjects.push( objs[0] )
-      // box = new THREE.BoxHelper( objs[0].object, 0x23F3BD )
     }
     
     let box = new THREE.Box3().setFromObject( this.selectedObjects )
@@ -176,6 +192,20 @@ export default class InteractionHandler {
     return objects
   }
 
+  deselectObj( id ) {
+    let objToRemove = this.selectedObjects.children.filter( o => o.userData.id === id )
+    for( const o of objToRemove )
+      this.selectedObjects.remove( o )
+      
+    this.selectionBox.clear()
+    if( this.selectedObjects.children.length !== 0 ) {
+      let box = new THREE.Box3().setFromObject( this.selectedObjects )
+      let boxHelper = new THREE.Box3Helper( box, 0x047EFB )
+      this.selectionBox.add( boxHelper )
+    }
+    this.viewer.needsRender = true
+  }
+
   deselectObjects() {
     this.selectedObjects.clear()
     this.selectionBox.clear()