diff --git a/packages/frontend/src/main/components/viewer/Bubbles.vue b/packages/frontend/src/main/components/viewer/Bubbles.vue index 1561f48b5..d33bc3fcb 100644 --- a/packages/frontend/src/main/components/viewer/Bubbles.vue +++ b/packages/frontend/src/main/components/viewer/Bubbles.vue @@ -45,7 +45,7 @@ > - + mdi-menu-right @@ -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, diff --git a/packages/viewer/src/app.js b/packages/viewer/src/app.js index c362407aa..bdd18cceb 100644 --- a/packages/viewer/src/app.js +++ b/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 => { diff --git a/packages/viewer/src/modules/InteractionHandler.js b/packages/viewer/src/modules/InteractionHandler.js index 4edd17acf..3243bad28 100644 --- a/packages/viewer/src/modules/InteractionHandler.js +++ b/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()