potree-sdk/src/custom/modules/panoEdit/panoEditor.js

import * as THREE from "../../../../libs/three.js/build/three.module.js";
 
import math from "../../utils/math.js"
import Common from '../../utils/Common.js'
import {LineDraw, MeshDraw} from "../../utils/DrawUtil.js";
import {ExtendView} from "../../../viewer/ExtendView.js";
import Viewport from "../../viewer/Viewport.js";
import Sprite from "../../objects/Sprite.js";
import {transitions, easing, lerp} from '../../utils/transitions.js'
import {TransformControls} from "../../objects/tool/TransformControls.js";
import SplitScreen from "../../utils/SplitScreen.js"



let clickPanoToDisLink = false;//是否在编辑漫游点连接时，通过点击漫游点能断开连接
let images360, Alignment,  SiteModel 

const texLoader = new THREE.TextureLoader() 
    texLoader.crossOrigin = "anonymous" 
const rotQua = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,0,1), Math.PI)    
const lineMats = {}
const circleMats = {}
 
const renderOrders = {
    circleSelected:3,
    circle:2,
    line:1,
}
const pointColor = {
    /* selected:"#c80",
    default:'#1ac' */
    selected:"#c60",
    default:'#17c'
}
const opacitys = {
    default:1.3,
    selected: 2.0
}
const cameraProps = [ 
    { 
        name : 'top',    
        axis:["x","y"],  
        direction : new THREE.Vector3(0,0,-1), //镜头朝向
        openCount:0,
    },
    { 
        name : 'right', 
        axis:["y","z"], 
        direction : new THREE.Vector3(1,0,0), 
        openCount:0,
    }  
]   




class PanoEditor extends THREE.EventDispatcher{
    
    constructor(){
        super()
        this.panoGroup = [], //分组
        this.viewports = {},
        this.panoLink = {}, 
        this.panoMeshs = new THREE.Object3D,
        this.lineMeshes = new THREE.Object3D 
        this.views = {}
        this.cameras = {}
        this.orthoCamera = new THREE.OrthographicCamera(-100, 100, 100, 100, 0.01, 10000)
        this.orthoCamera.up.set(0,0,1)
        this.selectedPano;
        this.selectedGroup;
        this.operation; 
        this.visiblePanos = []
    }
     
    init(){ 
    
        {//init lineMats
            lineMats.default = LineDraw.createFatLineMat({
                color: '#eeeeee',
                lineWidth: 2,   
                depthTest:false  
            })
            lineMats.hovered = LineDraw.createFatLineMat({
                color: '#00c8af', 
                lineWidth: 2,   
                depthTest:false   
            })             
            lineMats.selected = LineDraw.createFatLineMat({
                color: '#00c8af', 
                lineWidth: 3,   
                depthTest:false   
            }) 
             
        }
    
        
        
        this.initViews()
        
        
        viewer.addEventListener('allLoaded',()=>{
            images360 = viewer.images360 
            Alignment = viewer.modules.Alignment 
            SiteModel = viewer.modules.SiteModel
            

            this.panoMeshs.name = 'panoMeshs'
            viewer.scene.scene.add(this.panoMeshs)
            this.lineMeshes.name = 'lineMeshes'
            viewer.scene.scene.add(this.lineMeshes)
            
            
            
            {
                this.transformControls = new TransformControls(viewer.mainViewport.camera, viewer.renderArea,{
                    dontHideWhenFaceCamera: true,
                    rotFullCircle:true
                }); 
                this.transformControls.setSize(1.5)
                viewer.scene.scene.add(this.transformControls)
                this.transformControls._gizmo.hideAxis = {translate:['x','y'], rotate:['x','y','e'] }
                this.transformControls.setRotateMethod(2)
                
                this.fakeMarkerForTran = new THREE.Mesh(new THREE.BoxBufferGeometry(0.3,0.3,0.3) , new THREE.MeshBasicMaterial({
                    color:"#FFFFFF",  opacity:0.4,  transparent:true, visible:false
                }));//一个看不见的mesh，只是为了让transformControls移动点云
                viewer.scene.scene.add(this.fakeMarkerForTran)
                
                
           
                let afterMoveCircle = (type)=>{
                      
                    if(type == 'position'){
                        let moveVec = new THREE.Vector3().subVectors(this.fakeMarkerForTran.position, this.fakeMarkerForTran.oldState.position)
                        this.selectedClouds.forEach(cloud=>Alignment.translate(cloud, moveVec))
                    }else{
                        let center = this.selectedPano.position;
                        let forward = new THREE.Vector3(0,1,0);
                        let vec1 = forward.clone().applyQuaternion(this.fakeMarkerForTran.oldState.quaternion)
                        let vec2 = forward.clone().applyQuaternion(this.fakeMarkerForTran.quaternion)
                         
                        let diffAngle = math.getAngle(vec1,vec2,'z')    
                            
                        this.selectedClouds.forEach(cloud=>{ 
                            Alignment.rotateAround(center, cloud, null, diffAngle)    
                        })
                    }
                    
                    
                    this.fakeMarkerForTran.oldState = {
                        position: this.fakeMarkerForTran.position.clone(),
                        quaternion: this.fakeMarkerForTran.quaternion.clone(),
                    }
                    Alignment.writeToHistory( this.selectedClouds ) 
                
                }
                 
                this.fakeMarkerForTran.addEventListener('position_changed', afterMoveCircle.bind(this,'position')) 
                this.fakeMarkerForTran.addEventListener("rotation_changed", afterMoveCircle.bind(this,'rotation') )
              
                this.transformControls.addEventListener('transform_end',()=>{
                    Alignment.prepareRecord = true
                })
                
                Alignment.history.addEventListener('undo',()=>{
                    this.updateTranCtl()
                })
            }
            
            
            
            
            
            
            
            this.initPanoLink() 
            
            this.addPanoMesh()
            
            
            viewer.scene.pointclouds.forEach(e=>{
                e.material.color = pointColor.default 
                 
            })
            
            
            
            
            this.switchView('top')
            
            SiteModel.bus.addEventListener('initDataDone',()=>{ 
                let floor = SiteModel.entities.find(e=>e.buildType == 'floor' && e.panos.length) //选择有漫游点的一层
                if(!floor){
                    floor = 'all'  //SiteModel.entities.find(e=>e.buildType == 'floor')
                    console.log('没有一层有漫游点？！')
                }
                this.gotoFloor(floor)  
            })
             
            
            Alignment.bus.addEventListener('switchHandle', this.updateCursor.bind(this))
            
            
            viewer.addEventListener('global_click',(e)=>{
                if(e.button === THREE.MOUSE.RIGHT){//取消旋转和平移
                     console.log('right click',e)
                     this.setLinkOperateState('addLink',false)
                     this.setLinkOperateState('removeLink',false)
                }else if(this.clickToZoomInEnabled){
                    if(this.activeViewName == 'mainView'){
                        viewer.controls.zoomToLocation(e.mouse)
                    }else{
                        this.zoomIn(e.intersect.orthoIntersect, e.pointer)
                    }
                     
                     
                    this.setZoomInState(false)
                }
            })
            
            
             
            /* {//旋转时的辅助线--绕某个点旋转的版本
                this.rotGuideLine = LineDraw.createLine([], {color:'#aaffee'})
                this.rotGuideLine.visible = false
                this.rotGuideLine.name = 'rotGuideLine'
                this.rotGuideLine.renderOrder = renderOrders.line
                viewer.scene.scene.add(this.rotGuideLine)

                let startPoint
                Alignment.bus.addEventListener('rotateStart', (e)=>{
                    startPoint = e.startPoint 
                })
                Alignment.bus.addEventListener('rotate', (e)=>{
                    LineDraw.updateLine(this.rotGuideLine, [startPoint, e.endPoint] ) 
                    this.rotGuideLine.visible = true
                }) 
                viewer.fpControls.addEventListener("end",(e)=>{ 
                    startPoint = null
                    this.rotGuideLine.visible = false
                })
            } */
            
            {//连接时的辅助线
                this.linkGuideLine = LineDraw.createLine([], {color:'#aaa', deshed:true, dashSize:0.1,gapSize:0.1,})
                this.linkGuideLine.visible = false
                this.linkGuideLine.name = 'linkGuideLine'
                viewer.scene.scene.add(this.linkGuideLine)
                this.linkGuideLine.renderOrder = renderOrders.line
                let update = (e)=>{
                    if(this.operation != 'addLink' || this.activeViewName != 'top' && this.activeViewName != 'mainView' ||!this.selectedPano){
                        return this.linkGuideLine.visible = false
                    }
                    let endPos
                    if(this.activeViewName == 'top' ){
                        endPos = e.intersect.orthoIntersect.clone().setZ(this.selectedPano.position.z)
                    }else if(this.activeViewName == 'mainView' ){
                        if(!e.intersect.point)return
                        endPos = e.intersect.point.position
                    }
                    
                    LineDraw.updateLine(this.linkGuideLine, [this.selectedPano.position, endPos] ) 
                    this.linkGuideLine.visible = true
                }
                
                viewer.addEventListener('global_mousemove', (e)=>{
                    update(e)  
                })
                 
                this.addEventListener('updateLinkGuideLine', update)
                //为何打开调试时移动很卡
            }
            
            /* 
            viewer.inputHandler.addEventListener('keydown', (e)=>{
                if(e.event.key == "r" ){ 
                    this.setTranMode('rotate') 
                }else if(e.event.key == "t"){
                    this.setTranMode('translate') 
                }
            }) */      
            
        }) 
    }
    
    
    setTranMode(mode){//rotate or translate 
        this.tranMode = mode
        if(this.activeViewName == 'mainView'){
            mode && this.transformControls.setMode(mode)
            this.updateTranCtl() 
        }else{
            Alignment.switchHandle(mode) 
        } 
    }
    
    updateTranCtl(){// 设置3D页面的transformControls相关
        if(!this.tranMode || !this.selectedPano || this.activeViewName != 'mainView' ) {
            return this.transformControls.detach() 
        }else if(this.checkIfAllLinked({group:this.selectedGroup})){
            this.dispatchEvent('needToDisConnect')
            return this.transformControls.detach()
        }
        this.transformControls.attach(this.fakeMarkerForTran)
        let {position, quaternion} = this.getPanoPose(this.selectedPano);
        this.fakeMarkerForTran.position.copy(position)
        this.fakeMarkerForTran.quaternion.copy(quaternion)
        this.fakeMarkerForTran.oldState = {
            position: position.clone(),
            quaternion: quaternion.clone(),
        }
    }
    
    
     
    //////////////////////////////////
    initViews(){
        this.splitScreenTool = new SplitScreen
        this.targetPlane = viewer.mainViewport.targetPlane = new THREE.Plane()
        this.shiftTarget = viewer.mainViewport.shiftTarget = new THREE.Vector3 //project在targetPlane上的位置
         
        
        for(let i=0;i<2;i++){
            let prop = cameraProps[i];
            let view = new ExtendView()  
            this.views[prop.name] = view 
            this.cameras[prop.name] = this.orthoCamera
             
            view.direction = prop.direction
        }
        this.views.mainView = viewer.mainViewport.view
        this.cameras.mainView = viewer.mainViewport.camera
         
        
    } 
    
    switchView(name){//替换view和camera到mainViewport
        let view = this.views[name]
        let camera = this.cameras[name]
        let prop = cameraProps.find(e=>e.name == name)
         
        let {boundSize, center} = viewer.bound
        this.lastViewName = this.activeViewName
        this.activeViewName = name 
        let lastView = this.views[this.lastViewName]
        let lastCamera = this.cameras[this.lastViewName]
        viewer.mainViewport.view = view
        viewer.mainViewport.camera = camera 
        if(lastCamera)lastView.zoom = lastCamera.zoom
        
        this.targetPlane.setFromNormalAndCoplanarPoint( view.direction.clone(), center )  
        this.targetPlane.projectPoint(view.position, this.shiftTarget )  //target转换到过模型中心的平面，以保证镜头一定在模型外
        view.position.copy(this.splitScreenTool.getPosOutOfModel(viewer.mainViewport))
        if(view.zoom)camera.zoom = view.zoom//恢复上次的zoom
         
        
        viewer.updateScreenSize({forceUpdateSize:true})//更新camera aspect  left等
        this.updateCursor()
        
        
        
        
        if(name == 'mainView'){ 
            viewer.mainViewport.alignment =  null
            viewer.scene.pointclouds.forEach(e=>{
                e.material.activeAttributeName = 'rgba' 
                e.material.useFilterByNormal = false  
                e.changePointOpacity(1,true)
                 
            })
            viewer.updateVisible(viewer.reticule, 'force', true)
             
            if(lastView){//2d->3d
                
                view.copy(lastView)
                 
                let direction = view.direction
                let panos = images360.panos.filter(e=>e.circle.visible)
                let nearestPano = Common.sortByScore(panos , [], [(pano)=>{
                    let vec = new THREE.Vector3().subVectors(pano.position,  view.position);
                    return -vec.dot(direction); 
                }], true);
                
                //console.log('最近',nearestPano )
                
                if(nearestPano && nearestPano[0] ){ //尽量不变画面范围，使pano点保持原位，转换到mainView
                    let halfHeight = lastCamera.top/lastCamera.zoom 
                    let dis = halfHeight / Math.tan( THREE.Math.degToRad(camera.fov/2)) 
                    view.position.add(direction.clone().multiplyScalar(-nearestPano[0].score - dis))
                    //console.log('getCloser', -nearestPano[0].score - dis)
                    this.lastDisToPano = dis //记录一下
                }
                
            }
            
            viewer.fpControls.lockKey = false
            
        }else{ 
             
            if(this.lastViewName == 'mainView'){//3d->2d
                let direction = lastView.direction
                let panos = images360.panos.filter(e=>e.circle.visible)
                
                //尽量靠近画布中心，且距离相机较近
                let nearestPano = Common.sortByScore(panos , [], [(pano)=>{
                    let vec = new THREE.Vector3().subVectors(pano.position,  lastView.position);
                    let dis = vec.dot(direction);  
                    return dis < 0 ? dis * 10 : - dis 
                },(pano)=>{
                    let vec = new THREE.Vector3().subVectors(pano.position,  lastView.position);
                    let angle = vec.angleTo(direction)
                    return  - angle * 70 
                }], true);  
                //目前还存在的问题就是不知selectedPano和最近点的取舍
                //console.log('panos',nearestPano )
                if(nearestPano && nearestPano[0] ){
                    //console.log('nearestPano',nearestPano[0].item.id )                    
                    let pos1 = nearestPano[0].item.position.clone()
                    let pos2 = pos1.clone()
                    let dis = new THREE.Vector3().subVectors(nearestPano[0].item.position,  lastView.position).dot(direction)   //-nearestPano[0].score
                    
                    //根据2d->3d的式子逆求zoom
                    let halfHeight = Math.abs(dis) * Math.tan( THREE.Math.degToRad(lastCamera.fov/2)) 
                    camera.zoom = camera.top / halfHeight
                    camera.updateProjectionMatrix()
                    
                    if(name == 'right'){//侧视图
                        view.direction = direction.clone().setZ(0) //水平方向设定为3d的方向
                        this.targetPlane.setFromNormalAndCoplanarPoint( view.direction.clone(), center )  
                        this.targetPlane.projectPoint(view.position, this.shiftTarget )  //target转换到过模型中心的平面，以保证镜头一定在模型外
                        view.position.copy(this.splitScreenTool.getPosOutOfModel(viewer.mainViewport))
                    }
                    
                    view.applyToCamera(camera)//update
                    
                    pos1.project(lastCamera) 
                    pos2.project(camera)
                    
                    
                    //目标是找到画面上最接近中心的一点（最好是漫游点，不然就是点云），让其在转换画面后在画面上的位置不变。万一找到的点不在屏幕中(比如当屏幕中没点云时)，就默认让那个点移动到屏幕中央，也就是假设当前它pos1在屏幕中央位置。
                     
                    //
                    if(pos1.z>1){
                        console.warn('选取的点在相机背后了！？')
                    }
                    //如果最近点超出屏幕范围 (-1,1)， 最好将其拉到边缘，甚至居中 。这样屏幕上就不会没有漫游点了
                    let bound = 0.9
                    pos1.x = THREE.Math.clamp(pos1.x, -bound, bound)
                    pos1.y = THREE.Math.clamp(pos1.y, -bound, bound)
                    
                   
                    
                    let vecOnscreen = new THREE.Vector3().subVectors(pos1,pos2) 
                    let moveVec = Potree.Utils.getOrthoCameraMoveVec(vecOnscreen, camera )
                    
                    //console.log('pos1',    pos1)
                    
                    view.position.sub(moveVec)
                }
            
            }else{
                if(prop.openCount == 0){//至多执行一次
                    this.viewportFitBound(name,  boundSize, center)
                } 
            }
             
            prop.openCount ++;
            
            
            
            viewer.scene.pointclouds.forEach(e=>{
                e.material.activeAttributeName = 'color' 
                e.material.useFilterByNormal = true  //defines :  use_filter_by_normal  attenuated_opacity
                      
                
                if(this.selectedPano && this.selectedClouds.includes(e) /* this.selectedPano.pointcloud == e */){
                    e.changePointOpacity(opacitys.selected,true)
                }else{
                    e.changePointOpacity(opacitys.default,true)
                }
                
            })
            viewer.updateVisible(viewer.reticule, 'force', false)      
            
            if(name == 'top') viewer.mainViewport.alignment = {rotate:true,translate:true};
            if(name == 'right'){
                viewer.mainViewport.alignment = {translate:true, rotateSide:true, translateVec:new THREE.Vector3(0,0,1)}; //只能上下移动
                viewer.mainViewport.rotateSide = true
            }else{
                viewer.mainViewport.rotateSide = false
            }
            viewer.fpControls.lockKey = true
             
        } 
        
        
        this.updateTranCtl()
        this.setTranMode(this.tranMode) // update
        this.setZoomInState(false) //取消放大模式
        this.updatePointLevels()
    }
    
    
    
    viewportFitBound(){  //使一个viewport聚焦在某个范围
      
        if(viewer.mainViewport.resolution.x == 0 || viewer.mainViewport.resolution.y == 0){
            return setTimeout(()=>{
                this.viewportFitBound()
            },10)
        }
         
        this.gotoFloor(this.currentFloor, true, 0, null, true)
        
    } 
    
    
    rotateSideCamera(angle){//侧视图绕模型中心水平旋转
        this.splitScreenTool.rotateSideCamera(viewer.mainViewport, angle) 
    }
    
    
    zoomIn(intersect, pointer){ 
        let camera = viewer.mainViewport.camera
        let endZoom = 200
        //this.moveFit(intersect, {endZoom:viewer.mainViewport.camera.zoom < aimZoom ? aimZoom : null}  , 300) 
        let startZoom = camera.zoom
        if(startZoom >= endZoom){return}
        
        viewer.mainViewport.view.zoomOrthoCamera(camera, endZoom, pointer, 300) 
    
    }
   
    moveFit(pos, info, duration){  
        var margin = {x:200, y:230}      
        this.splitScreenTool.viewportFitBound(viewer.mainViewport,  info.bound,  pos, duration, margin )
         
    }
    
    setZoomInState(state, informinformBy2d){//是否点击后可放大
        //if(state && this.activeViewName == 'mainView')return console.log('3D不可放大')
        this.clickToZoomInEnabled = !!state
    
    
        if(state){
            viewer.dispatchEvent({type : "CursorChange", action : "add",  name:"zoomInCloud"} )
        }else{
            viewer.dispatchEvent({type : "CursorChange", action : "remove",  name:"zoomInCloud" })
        }
    
        if(!state && !informinformBy2d){
            this.dispatchEvent({type:'operationCancel', operation: 'zoomIn'})
        }
         
        
    }
     
     
    gotoFloor(floor, force, duration = 600, informBy2d, fitBound){// 选择不同楼层, 切换点位显示。   'all'为全部显示
        
        floor = floor || 'all' 
   
        if(this.currentFloor == floor && !force)return
        
        //let pointclouds = viewer.findPointcloudsAtFloor(floor)
        let panos = floor == 'all' ? viewer.images360.panos : floor.panos  
       
        viewer.images360.panos.forEach(pano=>{
            let v = panos.includes(pano)
            this.switchPanoVisible(pano,v) 
        })
        
        
        this.updateLinesVisible() 
        
        
        //切换楼层时清空选择状态
        if(this.selectedPano && floor != 'all' && !floor.panos.includes(this.selectedPano)){ 
            this.selectedPano.circle.dispatchEvent('click')
        }
        
        if(this.selectedLine){
            this.selectedLine.dispatchEvent('click') 
        }
        
        
        
        let bound, center 
        if(floor == 'all'){ 
            bound = viewer.images360.bound.bounding
            center = viewer.images360.bound.center 
        }else{ 
            bound = this.getPanosBound(floor)
            center = bound.getCenter(new THREE.Vector3()) 
            if(floor.panos.length == 0)console.log(floor.name, 'floor无漫游点'  )
        } 
        
        if(this.activeViewName != 'mainView'   ){ 
            fitBound && this.moveFit(center, {bound},  duration)
        }else if(this.activeViewName == 'mainView'){
            if(floor != 'all'){ //切换一下位置，因为原处点云会消失
                 viewer.scene.view.setView({position:center,  duration })
            }   
        }
        
        this.currentFloor = floor
        
        if(!informBy2d){
            this.dispatchEvent({type:'changeFloor', floor})
        }
    }
     
    getPanosBound(floor){
        if(!floor.panosBound){ 
            if(floor.panos.length == 0){
                floor.panosBound = viewer.images360.bound.bounding.clone()
            }else{  
                let minSize = new THREE.Vector3(5,5,5)
                let bound = math.getBoundByPoints(floor.panos.map(e=>e.position), minSize)
                floor.panosBound = bound.bounding
            }
        }
        
        return floor.panosBound
    }
    
    
    
    switchPanoVisible(pano, v, informBy2d){ 
        pano.circle.visible = v   
        viewer.updateVisible(pano, 'panoEditor', v)
        viewer.updateVisible(pano.pointcloud, 'panoEditor', v)
        if(v){
            this.visiblePanos.includes(pano) || this.visiblePanos.push(pano)
        }else{
            let index = this.visiblePanos.indexOf(pano);
            index>-1 && this.visiblePanos.splice(index,1)
        }
        
        if(informBy2d){
            this.updateLinesVisible()
        }
         
        informBy2d || this.dispatchEvent({type:"switchPanoVisible", pano, v})
        this.updatePointLevels()
    } 
     
    
    updateLinesVisible(){ 
        this.lineMeshes.children.forEach(line=>{
            let names = line.name.split('-')  
            var pano0 = images360.getPano(names[0])
            var pano1 = images360.getPano(names[1])
            line.visible = this.visiblePanos.includes(pano0) || this.visiblePanos.includes(pano1) 
        }) 
    }
     
    updateCursor(){
        let cursor
        
        
        if(this.activeViewName == 'mainView' || !this.selectedPano){ 
            cursor = null  
        }else{ 
            cursor = Alignment.handleState
        }
         
        if(cursor == 'rotate'){
            viewer.dispatchEvent({
                type : "CursorChange", action : "add",  name:"rotatePointcloud" 
            })
            viewer.dispatchEvent({
                type : "CursorChange", action : "remove",  name:"movePointcloud" 
            })
            
        }else if(cursor == 'translate'){
            viewer.dispatchEvent({
                type : "CursorChange", action : "add",  name:"movePointcloud" 
            })
            viewer.dispatchEvent({
                type : "CursorChange", action : "remove",  name:"rotatePointcloud" 
            }) 
        }else{
            viewer.dispatchEvent({
                type : "CursorChange", action : "remove",  name:"movePointcloud" 
            })
            viewer.dispatchEvent({
                type : "CursorChange", action : "remove",  name:"rotatePointcloud" 
            }) 
        }
        //this.cursorState = cursor
    }
    
     
     
    setLinkOperateState(name, state, informinformBy2d){
        
        if(state && name == this.operation || !state && name != this.operation)return
        
        let old = this.operation
        this.operation = state ? name : null
        
        if(this.operation == 'removeLink'){
            if(this.selectedLine){
                this.selectedLine.dispatchEvent('click')//删除 
            } 
            if(this.selectedPano && clickPanoToDisLink){
                this.selectedPano.circle.dispatchEvent('click')//删除 
            }
        }
        
        if(this.operation != 'addLink'){
            this.linkGuideLine.visible = false
        }
        if(!state && !informinformBy2d){
            this.dispatchEvent({type: "operationCancel", operation: old})
            
        }
        
        if(this.operation == 'addLink'){
            viewer.dispatchEvent({type : "CursorChange", action : "add",  name:"connectPano"} )
        }else{
            viewer.dispatchEvent({type : "CursorChange", action : "remove",  name:"connectPano"} )
        }
        if(this.operation == 'removeLink'){
            viewer.dispatchEvent({type : "CursorChange", action : "add",  name:"disconnectPano"} )
        }else{
            viewer.dispatchEvent({type : "CursorChange", action : "remove",  name:"disconnectPano"} )
        }
        
    } 
     
      
    
     
    /////////////////////////////////
    
    initPanoLink(){
        images360.panos.forEach((pano)=>{
            this.panoLink[pano.id] = {}
        })
         
        images360.panos.forEach((pano)=>{
            pano.visibles.forEach(index=>{//visibles中存的是下标!
                this.linkChange(pano, images360.getPano(index,'index'), 'add')
            })
        })
        
        console.log('panoLink',this.panoLink)
    }
     
    
     
    groupChange(pano0, pano1, type){//修改group （type == 'remove'时，pano1可以为空）
        if(type == 'add'){
            Common.pushToGroupAuto([pano0, pano1], this.panoGroup  )
        }else{ 
            let atGroup = this.panoGroup.find(e=>e.includes(pano0) && (e.includes(pano1) || !pano1));//所在组
            
            if(!atGroup){
                if(pano1){
                    console.log('这两个pano原本就不在一个组', pano0.id, pano1.id)
                }else{
                    console.log('pano0不在任何组', pano0)
                }
                return 
            }
            
            //断开连接时，因为组内没有其他成员的连接信息，所以需要清除整组，并将剩余的一个个重新连接
            this.panoGroup.splice(this.panoGroup.indexOf(atGroup),1) //删除
            
            
            atGroup.forEach(pano=>{//然后再重新生成这两个和组的关系，各自分组
                if(pano == pano0 || pano == pano1)return
                for(let id in this.panoLink[pano.id]){
                    if(this.panoLink[pano.id][id]){
                        let pano_ = images360.getPano(id)
                        Common.pushToGroupAuto([pano, pano_], this.panoGroup  )
                    } 
                } 
            })
            
            
            
        }
    } 
    
    linkChange(pano0, pano1, type){//修改link  （type == 'remove'时，pano1可以为空）
        
    
        let temp = []
        
        if(type == 'add'){
            if(!pano1)return console.error('不支持add时pano1为空')
            this.panoLink[pano0.id][pano1.id] = this.panoLink[pano0.id][pano1.id] || {}
            this.panoLink[pano1.id][pano0.id] = this.panoLink[pano1.id][pano0.id] || {}
        }else{  
            if(!pano1){
                for(let id in this.panoLink[pano0.id]){
                    if(this.panoLink[pano0.id][id]){
                        this.panoLink[id][pano0.id] = false
                        temp.push(id)
                    }
                }
                this.panoLink[pano0.id] = {} //全部断连
            }else{
                this.panoLink[pano0.id][pano1.id] = false
                this.panoLink[pano1.id][pano0.id] = false 
            }
        }
        
        if(!pano1){ //全部断连
            temp.forEach(id=>{
                this.lineChange(pano0, images360.getPano(id) , type)
            }) 
        }else{
            this.lineChange(pano0, pano1, type)  
        }
        
        this.groupChange(pano0, pano1, type)
        
        //this.updateSelectGroup()
        this.selectPano(this.selectedPano, false,true) //更新选中点云显示
    } 
    
    
    
    lineChange(pano0, pano1, type){//修改line
        if(type == 'add'){
            if(this.panoLink[pano0.id][pano1.id].line) return 
            let line = LineDraw.createFatLine([pano0.position, pano1.position], {material:lineMats.default})
            line.name = `${pano0.id}-${pano1.id}`
            line.renderOrder = line.pickOrder = renderOrders.line
            this.lineMeshes.add(line) 
            this.panoLink[pano0.id][pano1.id].line = this.panoLink[pano1.id][pano0.id].line = line
            
            
            line.addEventListener('mouseover', ()=>{
                if(this.clickToZoomInEnabled)return
                //if(this.activeViewName == 'mainView')return                
                if(this.selectedLine != line)line.material = lineMats.hovered 
                viewer.dispatchEvent({
                    type : "CursorChange", action : "add",  name:"hoverLine"
                });
            });  
            line.addEventListener('mouseleave', ()=>{
                if(this.clickToZoomInEnabled)return
                //if(this.activeViewName == 'mainView')return
                if(this.selectedLine != line)line.material = lineMats.default
                viewer.dispatchEvent({
                    type : "CursorChange", action : "remove",  name:"hoverLine"
                });
            }); 
            line.addEventListener('click', (e)=>{
                if(this.clickToZoomInEnabled)return
                //if(this.activeViewName == 'mainView')return
                if(this.operation == 'removeLink'){
                    if(this.selectedLine == line) this.selectLine(null)
                    return this.linkChange(pano0, pano1, 'remove')
                }
                this.selectLine(line)
            })
        }else{ 
            let line = this.lineMeshes.children.find(e=>e.name == `${pano0.id}-${pano1.id}` || e.name == `${pano1.id}-${pano0.id}`  )
            if(line){ 
                this.lineMeshes.remove(line)
                line.geometry.dispose()
            }
            
        }
        
    } 
    
    
    
    
    selectLine(line){
        if(this.selectedLine == line)return
        if(this.selectedLine){
            this.selectedLine.material = lineMats.default;
        }
        if(line){
            line.material = lineMats.selected
        }
        this.selectedLine = line
    }
    
    
    
                
             
    
    addPanoMesh(){ 
        let map = texLoader.load(Potree.resourcePath+'/textures/correct_n.png' )  
        circleMats.default_normal = new THREE.MeshBasicMaterial({
            map,
            color: 0xffffff,
            transparent: true,
            depthTest: false,
            depthWrite: false,  
        })
        circleMats.default_rtk_on = circleMats.default_normal.clone();
        circleMats.default_rtk_on.map = texLoader.load(Potree.resourcePath+'/textures/rtk-y-n.png' )  
        circleMats.default_rtk_off = circleMats.default_normal.clone();
        circleMats.default_rtk_off.map = texLoader.load(Potree.resourcePath+'/textures/rtk-f-n.png' )  
        circleMats.selected_normal = circleMats.default_normal.clone();
        circleMats.selected_normal.map = texLoader.load(Potree.resourcePath+'/textures/correct_s.png' ) 
        circleMats.selected_rtk_on = circleMats.default_normal.clone();
        circleMats.selected_rtk_on.map = texLoader.load(Potree.resourcePath+'/textures/rtk-y-s.png' ) 
        circleMats.selected_rtk_off = circleMats.default_normal.clone();
        circleMats.selected_rtk_off.map = texLoader.load(Potree.resourcePath+'/textures/rtk-f-s.png' ) 
        
        circleMats.hovered_normal = circleMats.default_normal.clone();
        circleMats.hovered_normal.color.set(0x00ff00)
        circleMats.hovered_rtk_on = circleMats.default_rtk_on.clone();
        circleMats.hovered_rtk_on.color.set(0x00ff00) 
        circleMats.hovered_rtk_off = circleMats.default_rtk_off.clone();
        circleMats.hovered_rtk_off.color.set(0x00ff00)
        
         
        
        
        
        let setPos = (circle)=>{
             circle.position.copy(circle.pano.position)
              
             for(let id in this.panoLink[circle.pano.id]){
                 let linkInfo = this.panoLink[circle.pano.id][id]
                 if(linkInfo){ 
                      LineDraw.updateLine(linkInfo.line, [circle.pano.position, images360.getPano(id).position] )  
                 } 
             }
             
             circle.update() //update sprite Matrix
             
        }
        
         
        
        images360.panos.forEach(pano=>{
            var circle = new Sprite({mat: circleMats['default' + '_'+ this.getPanoRtkState(pano) ] , sizeInfo:{
                    minSize : 50 ,  maxSize : 120,   nearBound : 2, farBound : 10, 
                },
                renderOrder : renderOrders.circle,
                pickOrder: renderOrders.circle
            })    
            
            circle.name = 'panoCircle'
            circle.sid = pano.id
            circle.pano = pano;
            pano.circle = circle;
            
            this.panoMeshs.add(circle)
            
            
            setPos(circle) 
            pano.addEventListener('rePos', setPos.bind(this,circle))
               
            let drag = ()=>{
                /* if(this.activeViewName == 'mainView' && this.tranMode == 'translate'){//如果3d页不禁止xy的话，这段打开
                    this.transformControls.dispatchEvent('dragging')//触发拖拽
                    return
                } */
                if(this.tranMode != 'translate' || this.activeViewName == 'mainView')return
                this.selectPano(circle.pano)                    //为了方便拖拽点云，拖动circle就直接选中
              
                viewer.inputHandler.drag.object = null  //取消拖拽状态，否则不触发点云拖动
            }
            circle.addEventListener('drag', drag)
                                 
                
            
            circle.addEventListener('mouseover', ()=>{ 
                this.hoverPano(pano,true) 
            })
            circle.addEventListener('mouseleave', ()=>{  
                this.hoverPano(pano,false) 
            })
            circle.addEventListener('click', ()=>{ 
                //if(this.activeViewName == 'mainView')return
                if(this.clickToZoomInEnabled)return
                if(clickPanoToDisLink && this.operation == 'removeLink'){ 
                    this.linkChange(pano, null, 'remove')  //删除所有连接
                } 
                
                if(this.selectedPano == circle.pano) return this.selectPano(null)
                if(this.operation == 'addLink' && this.selectedPano){
                    this.linkChange(this.selectedPano, circle.pano, 'add')
                    //this.setLinkOperateState('addLink',false)
                    return
                }
                //if(this.operation == 'removeLink' && this.selectedPano){ //和选择中心点冲突
                //    this.linkChange(this.selectedPano, circle.pano, 'remove')
                //    //this.setLinkOperateState('removeLink',false)
                //    return
                // } 
                
                
                this.selectPano(circle.pano)
            })
            
            
        })  
    } 
    
    
    hoverPano(pano, state){
        if(this.clickToZoomInEnabled)return
        if(pano && state){ //在hover一个pano之前，一定会先取消已经hover的pano, 最多存在一个hovered的pano
            if(this.hoveredPano == pano)return
             
            if(this.hoveredPano){
                this.hoverPano(this.hoveredPano,false)
            }
            
            this.hoveredPano = pano
            pano.hovered = true  
            
             
            if(/* this.activeViewName == 'mainView' ||  */Alignment.handleState && this.selectedPano && this.selectedPano == pano)return
              
            if(this.operation != 'addLink' || !this.selectedPano || this.selectedPano == pano){ // this.selectedPano == pano?
                viewer.dispatchEvent({
                    type : "CursorChange", action : "add",  name:"hoverPano"
                });
            } 
            if(this.selectedPano != pano)  pano.circle.material = circleMats['hovered' + '_'+ this.getPanoRtkState(pano) ] 
             
        }else if(pano && !state){//unhover
            if(this.hoveredPano != pano)return
            pano.hovered = false 
            viewer.dispatchEvent({
                type : "CursorChange", action : "remove",  name:"hoverPano"
            });
            if(this.selectedPano != pano)  pano.circle.material = circleMats['default' + '_'+ this.getPanoRtkState(pano) ] 
            this.hoveredPano = null;
        }else{//unhover any
            if(this.hoveredPano){
                this.hoverPano(this.hoveredPano, false) 
            } 
        } 
    }
    
    selectPano(pano, informinformBy2d, force){
        if(this.selectedPano == pano && !force)return
        
        let lastSeletedPano = this.selectedPano
        if(this.selectedPano){ 
            
            this.selectedPano.circle.material = circleMats['default' + '_'+ this.getPanoRtkState(this.selectedPano) ] 
            this.selectedPano.circle.renderOrder = renderOrders.circle 

            if(this.activeViewName == 'mainView'){
                 
            }else{
                this.selectedClouds.forEach(e=>{
                    e.changePointOpacity(opacitys.default,true)
                    e.material.color = pointColor.default;  
                })
            }
             
        }
     
        this.selectedPano = pano || null
        
        this.updateSelectGroup();
        
        if(pano){
            this.selectedPano.circle.material = circleMats['selected' + '_'+ this.getPanoRtkState(this.selectedPano) ] 
            this.selectedPano.circle.renderOrder = this.selectedPano.circle.pickOrder = renderOrders.circleSelected //侧视图能显示在最前
             
            if(this.activeViewName == 'mainView'){
                
            }else{
                this.selectedClouds.forEach(e=>{
                    e.changePointOpacity(opacitys.selected,true)
                    e.material.color = pointColor.selected;  
                })
            }
            
            
            
            
            {//自动切换楼层
               
                let atFloor = SiteModel.entities.find(e=>e.buildType == 'floor' && e.panos.includes(pano))
                if(!atFloor){
                    atFloor = 'all'  
                }else{
                    
                }
                
                this.gotoFloor(atFloor, false, 600   ) 
            }
                
            
        }
        
        
        this.updateCursor() 
        this.updateTranCtl()


        if(informinformBy2d){
            if(this.selectedPano){
                if(this.activeViewName == 'mainView'){ //平移，focus选中的pano
                    let distance = this.lastDisToPano || 5; 
                    if(lastSeletedPano){
                        distance = viewer.mainViewport.camera.position.distanceTo(lastSeletedPano.position)
                    }
                    viewer.focusOnObject({ position:this.selectedPano.position}, 'point', null, {distance })
                }else{
                    this.moveFit(this.selectedPano.position, {}, 500)
                }
            } 
        }else{
            this.dispatchEvent({type:'panoSelect', pano })
        } 
    }
    
    
    updatePointLevels(){
        let percent = 1
        if(this.activeViewName == 'mainView'){
            //假设每个pointcloud所带的点个数大致相同，那么当可见点云个数越多，所能展示的level越低，否则因总个数超过budget的话密度会参差不齐。
            let visiCount = viewer.scene.pointclouds.filter(e=>e.visible).length
            let maxCount = 70, minCount = 1,  minPer = 0.4, maxPer = 1
            percent = maxPer - ( maxPer - minPer) * THREE.Math.clamp((visiCount - minCount)  / (maxCount - minCount),0,1) //dis2d越大，角度要越小  
            //pointcloud.changePointSize()
            //console.log('updatePointLevels', percent, visiCount) 
        
        }else{
            percent = null
        }
        
        
        Potree.settings.UserDensityPercent = percent 
        viewer.setPointLevels()
             
    }
    
    getPanoRtkState(pano){
        return pano.panosData.has_rtk ? pano.rtkState ? 'rtk_on' : 'rtk_off' : 'normal'
    } 
    
    setPanoRtkState(pano,state){ 
        pano.rtkState = state 
        pano.circle.material = circleMats[(this.selectedPano == pano ? 'selected' : 'default') + '_'+ this.getPanoRtkState(pano) ]
    }
    
    updateSelectGroup(){//更新选中的组
        this.selectedGroup = this.panoGroup.find(e=>e.includes(this.selectedPano))  
        if(this.selectedGroup){
            this.selectedGroup = [this.selectedPano, ...this.selectedGroup.filter(e=>e != this.selectedPano)];//将选中的放第一个，便于旋转时绕其旋转。
        }
        
        this.selectedClouds = this.selectedPano ? (this.selectedGroup || [this.selectedPano]).map(e=>e.pointcloud) : []
    
        
    }
                
    
    checkIfCanSave(){//如果未全部相连，不能保存 
        for(let datasetId in Potree.settings.datasetsPanos ) {
            if(!this.checkIfAllLinked({datasetId})){
                console.log('没有全部连通，不能保存。其中一个：', datasetId)
                return 
            }
        }
        return true  
        
    }
    
    
    
    checkIfAllLinked(o){//某个（or组所在的）数据集是否全部连通
        
        let datasetId, group
        
        if(o.group){
            group = o.group
            let pano = o.group[0]
            if(!pano)return  //会有没有漫游点的点云来编辑吗
            datasetId = pano.pointcloud.dataset_id
        }else if(o.datasetId){ 
            datasetId = o.datasetId  
            group = this.panoGroup.find(panos=>panos[0].pointcloud.dataset_id == datasetId )
            if(!group)return //要找的数据集的pano全部都孤立了
        }
        if(!datasetId)return
        let panos = Potree.settings.datasetsPanos[datasetId].panos
        return panos.length == group.length
    }
    
   
    
    getPanoPose(pano){
        let pose = {
            position:  pano.position.clone(),
            quaternion:  new THREE.Quaternion().setFromRotationMatrix(pano.panoMatrix).premultiply(rotQua)  ,
        }
        return pose
        
    }
    
    exportSavingData(){//输出漫游点新的坐标和朝向、以及连接信息
        let sweepLocations = {}
        
        for(let datasetId in Potree.settings.datasetsPanos ) {
            let {panos} = Potree.settings.datasetsPanos[datasetId]
            let data = panos.map(pano=>{
                let visibles = []
                for(let id in this.panoLink[pano.id]){
                    if(this.panoLink[pano.id][id]){
                        visibles.push(viewer.images360.getPano(id).index)
                    }
                }
                let {position, quaternion} = this.getPanoPose(pano);
                return Object.assign({},  pano.panosData,  {
                    uuid: pano.uuid, 
                    /* pose:{
                        translation: dealData(pano.position.clone() ),
                        rotation: dealData(new THREE.Quaternion().setFromRotationMatrix(pano.panoMatrix).premultiply(rotQua)  ),
                    }, */
                    pose : { 
                        translation : dealData(position), 
                        rotation : dealData(quaternion) 
                    },
                    
                    visibles,
                    use_rtk : !!pano.rtkState   
                    //subgroup: 0,group: 1, "id_view":..
                })
            })
            
            sweepLocations[datasetId] = {sweepLocations:data}
            
        }            
        
        
         
             
        /* this.lineMeshes.children.forEach(e=>{//从line中搜集连接信息，而不从linkInfo,这样visibles不会重复一次
            let names = e.name.split('-') //是不是该转成数字
            var pano0 = names[0]
            var pano1 = names[1]
            sweepLocations.find(s=>s.uuid == pano0).visibles.push(pano1) 
        }) */
        
        
        function dealData(value){
            let v = math.toPrecision(value, 6)
            if(v instanceof THREE.Quaternion){
                return {x:v.x,  y:v.y,  z:v.z,  w:v.w}
            }else if(v instanceof THREE.Vector3){
                return {x:v.x,  y:v.y,  z:v.z}
            }
        }
        
        console.log(sweepLocations)
        return sweepLocations
    }
}


/* 

    不同数据集之间不能连线
    不同楼层可能也不能
    如果楼层在不同建筑物怎么办？ 楼层切换按钮只能在一个建筑内切换。

    全部相连时不能移动和旋转
    
    如果未全部相连，不能保存
    
 */

export default new PanoEditor()