potree-sdk/src/custom/objects/tool/Measure.js

import * as THREE from "../../../../libs/three.js/build/three.module.js";
import {TextSprite} from "../TextSprite.js"; 
import {Utils} from "../../../utils.js";
import  Label  from "../Label.js";
import {LineDraw} from "../../utils/DrawUtil.js";
import math from "../../utils/math.js"; 
import DepthBasicMaterial from "../../materials/DepthBasicMaterial.js";
import Sprite from '../Sprite.js'
import {config} from '../../settings.js'

import {ctrlPolygon} from './ctrlPolygon.js' 

 
let texLoader = new THREE.TextureLoader()  
let defaultColor = new THREE.Color(config.measure.default.color);
let highlightColor = new THREE.Color(config.measure.highlight.color);

let color = new THREE.Color(config.measure.color)
let textColor = new THREE.Color(config.measure.textColor) 
var markerMats = {}  
var lineMats   ;  
var planeMats 
 
 
 
const lineDepthInfo = {
    clipDistance :  4,//消失距离
    occlusionDistance:  1,//变为backColor距离 
}
const planeDepthInfo = {
    clipDistance :  30,//消失距离
    occlusionDistance:  4,//变为backColor距离 
    maxOcclusionFactor:0.3,
    maxClipFactor:0.1
}  
 
const textSizeRatio = math.linearClamp(window.innerWidth * window.innerHeight , 360*720,   1920*1080, 0.75, 1)  //pc字显示大一些
 

const markerSizeInfo = {
    minSize : 30*2 ,  maxSize : 60*2,   nearBound : 0.2, farBound : 4,
}
const labelSizeInfo = {width2d:190}
const mainLabelProp = { 
    //backgroundColor: {r: defaultColor.r*255, g: defaultColor.g*255, b: defaultColor.b*255, a:config.measure.default.opacity},
    backgroundColor: {r: 0, g: 0, b: 0, a:0}, 
    textColor: {r: textColor.r*255, g: textColor.g*255, b: textColor.b*255, a: 1.0},
    textBorderColor: {r:255, g: 255, b:255, a: 1.0},
    textBorderThick:3,
    fontsize: 15 * textSizeRatio,  
    borderRadius : 12, margin:{x:20,y:4},
    renderOrder : Potree.config.renderOrders.measureLabel, 
    pickOrder:Potree.config.renderOrders.measureLabel, 
    disToLine:-0.15,
    
    useDepth : true , 
    // 2023.10 尽量不让数字被挡住
    clipDistance : 50,//消失距离
    occlusionDistance: 10,//变为backColor距离 
    maxOcclusionFactor:0.2,
    maxClipFactor:0.1
    
}
  
 

const subLabelProp = { 
    backgroundColor: {r: 255, g: 255, b: 255, a:config.measure.default.opacity},
    textColor: {r: 0.3, g: 0.3, b:0.3, a: 1.0},
    fontsize:15 * textSizeRatio,   borderRadius : 12,  margin:{x:20,y:4},
    renderOrder : Potree.config.renderOrders.measureLabelSub, 
    pickOrder:Potree.config.renderOrders.measureLabelSub, 
}


const angle = THREE.Math.degToRad(5);//显示水平垂直辅助线的最小角度
const guideShowMinAngle = {min: angle, max: Math.PI/2 - angle}

   

    
 

export class Measure extends ctrlPolygon{
	constructor (prop) {
        prop.dimension = '2d'
        
		super('measure',prop);
		this.constructor.counter = (this.constructor.counter === undefined) ? 0 : this.constructor.counter + 1;
        
        
        this.name = this.measureType + this.constructor.counter  //'Measure_' + this.constructor.counter;
        //this.color = '#FF4399'   
        this.color = new THREE.Color(this.color)
		
		this.markerLabels = [];
		this.edgeLabels = [];
		this.angleLabels = [];
		this.coordinateLabels = [];
        this.area = {value:0,string:''}
         
        
        if( this.showArea  ){
            this.areaLabel = this.createAreaLabel(); 
            this.add(this.areaLabel) 
        }
        
		 
        //add:
        if(this.atPlane || this.faceDirection){ //是一个平面上的话
            if(this.guideLinePoints){
                this.createGuideLines()
            }else{
                this.createGuideLine(); 
            } 
        }
        if(this.measureType == 'Distance' /* || this.measureType.includes('MulDistance') */){
            this.createHorVerGuideLine()
        }
        
         
        
        this.selectStates = {}
        
        this.setUnitSystem(prop.unit || viewer.unitConvert.UnitService.defaultSystem)
        Potree.Utils.setObjectLayers(this, 'measure' )
        
        //addMarkers:
       
        this.initData(prop)
        this.pointsPos2d = new Map //屏幕上的二维坐标
         
        this.points_datasets || (this.points_datasets = []) //存每个点是哪个数据集


        
        //这版应该没多数据集，不需要更新这个：
        /* this.addEventListener('marker_dropped',(e)=>{ 
            this.updateDatasetBelong(e.index)
        }) */ 

  
        this.addEventListener('isVisible', ()=>{
            viewer.mapViewer && viewer.mapViewer.dispatchEvent({type:'content_changed'})
        })
         
	}
 
 
 
    initData(prop){
        let makeIt = super.initData(prop)
        if(makeIt){
            this.edges.forEach(edge=>{edge.dispatchEvent('addHoverEvent') })
            if(this.measureType == 'MulDistance_shape'){
                this.markers.forEach(e=>e.visible = false)
            }
        }else{
            this.failBuilded = true
        }
    }
 
     
    updateDatasetBelong(changeIndex){//更新所属数据集
     
        if(Potree.settings.editType == "merge"){//无地图
            /* this.dataset_points = this.points.map((e,i)=>{ 
                return Potree.Utils.datasetPosTransform({toDataset:true, datasetId:this.points_datasets[i], position:e.clone()})
            }) */
            this.dataset_points[changeIndex] = Potree.Utils.datasetPosTransform({toDataset:true, datasetId:this.points_datasets[changeIndex], position:this.points[changeIndex].clone()})
            
            
            return
        }
    
    
    
    
        let old = this.datasetId
        
        let maxCount = {id:null,count:0}
        let datasets = {}
        
        this.points_datasets.forEach(e=>{
            if(e == void 0)return
            if(datasets[e]){
                datasets[e] ++ 
            }else{
                datasets[e] = 1
            } 
        })
        for(let i in datasets) {
            if(datasets[i]>maxCount.count){
                maxCount = {id:i, count:datasets[i]}
            }
        }
        this.datasetId = maxCount.count > 0 ?  maxCount.id : null
         
        //if(this.datasetId != old){
            //this.dispatchEvent({type:'changeDatasetId'})
            if(this.datasetId == void 0){
                this.dataset_points = null //可能为空或[null,null...]
            }else{
                 
                this.dataset_points = this.points.map(e=>{ 
                    return Potree.Utils.datasetPosTransform({toDataset:true,datasetId:this.datasetId, position:e.clone()})
                }) 
            }  
        //}
    }
    
    
     

    
    transformByPointcloud(){//每次移动点云 or 加载测量线时要获取一下当前position  //有地图时
        if(this.datasetId == void 0)return 
        this.points = this.dataset_points.map(e=>{   
            return Potree.Utils.datasetPosTransform({fromDataset:true, datasetId:this.datasetId, position:e.clone()})
        })
         
        this.getPoint2dInfo(this.points)
        this.update({ifUpdateMarkers:true})
        this.setSelected(false)//隐藏edgelabel
         
    }
 
	update(options={}) { 
        super.update(options)
      
        if(this.showCoordinates && this.points.length>0){
            let position = this.points[0];
       
            this.markers[0].position.copy(position);

            { // coordinate labels
                let coordinateLabel = this.coordinateLabels[0];
                
                let lonlat = viewer.transform.lonlatToLocal.inverse(position.toArray())
                let EPSG4550 = viewer.transform.lonlatTo4550.forward(lonlat)
                let pos = [
                    position.toArray(),
                    lonlat,
                    EPSG4550
                ] 
                //let msg = position.toArray().map(p => Utils.addCommas(p.toFixed(2))).join(" / ");
                let msg = pos.map(a=> 
                     a.map(p => Utils.addCommas(p.toFixed(10))).join(", ") 
                ).join("<br>") 
                coordinateLabel.setText(msg);
                coordinateLabel.setPos(position)
                coordinateLabel.setVisible(true)//this.showCoordinates;
            }
            return 
        }
        
         
        /* viewer.addEventListener('camera_changed',(e)=>{
            if(e.changeInfo.positionChanged){
                setLabelPos()
            } 
        }) */
         
         
        let setEdgeLabel = (label,p1,p2,distance)=>{//设置label位置和字
            this.setEdgeLabelPos(label,p1,p2)
 
            distance = distance == void 0 ? p1.distanceTo(p2) : distance; 
            var text = this.labelText || viewer.unitConvert.convert(distance, 'distance',  Potree.settings.precision , this.unitSystem, 0.001 , true, true)//distance要传0.1 这个factor
            label.setText(text)
          
        }
         
         
        let lastIndex = this.points.length - 1; 
        for (let index = 0; index <= lastIndex; index++) {
            
            let nextIndex = (index + 1 > lastIndex) ? 0 : index + 1;
            let previousIndex = (index === 0) ? lastIndex : index - 1;
            //if(!this.closed && nextIndex == 0  )break; //add
            
            let point = this.points[index];
            let nextPoint = this.points[nextIndex];
            let previousPoint = this.points[previousIndex];

          
            if(this.showDistances || this.labelText){ // edge labels
                let edgeLabel = this.edgeLabels[index]; 
                let distance = point.distanceTo(nextPoint)
                let text = this.labelText || distance
                edgeLabel.shouldVisi = distance>0 && (index < lastIndex || this.isRect || this.closed && !this.isNew ) 
                /* this.closed || */edgeLabel.setVisible(edgeLabel.shouldVisi)  
                if(edgeLabel.shouldVisi){
                    this.lineDir = new THREE.Vector3().subVectors(point,nextPoint).normalize() //[point,nextPoint]
                    
                    setEdgeLabel(edgeLabel,point,nextPoint,text)
                    
                }
                
            }
        }  
        
        
        if(this.measureType == 'Distance' && this.points.length>1){//设置水平垂直辅助线
            var pTop, pBtm
            if(this.points[0].z > this.points[1].z ){
                pTop = this.points[0];
                pBtm = this.points[1];
            }else{
                pTop = this.points[1];
                pBtm = this.points[0];
            }
            let projectPos = new THREE.Vector3(pTop.x, pTop.y, pBtm.z);//两条guideline的交点
            
            {//倾斜角度太小的时候不显示
                let tan = pTop.distanceTo(projectPos) / pBtm.distanceTo(projectPos)
                let angle = Math.atan(tan);
           
                this.shouldShowHorVerGuide = angle > guideShowMinAngle.min && angle < guideShowMinAngle.max    
            }
            
            
            LineDraw.updateLine(this.verGuideEdge, [pTop, projectPos]) 
            LineDraw.updateLine(this.horGuideEdge, [pBtm, projectPos]) 
            setEdgeLabel(this.verEdgeLabel,pTop,projectPos) 
            setEdgeLabel(this.horEdgeLabel,pBtm,projectPos)  
            
            this.verGuideEdge.visible = this.horGuideEdge.visible = this.shouldShowHorVerGuide
            this.verEdgeLabel.visible = this.horEdgeLabel.visible = this.shouldShowHorVerGuide
        }
         
        
        if(this.showArea && this.point2dInfo){ // update area 
           /*  if(this.points.length>2){
                this.area = {value:0};
                this.areaLabel.setVisible(false)
            }else{ */
                let area = Math.abs(math.getArea(this.point2dInfo.points2d))//this.getArea();
                let msg = viewer.unitConvert.convert(area, 'area', Potree.settings.precision, this.unitSystem/* , 0.1 */ )
                this.area = {value:area, string:msg}
                
                this.areaLabel.setPos(this.center);
                this.areaLabel.setText(msg);
                this.areaLabel.setVisible(true)
            //}  
        }  
		
	};






    setEdgeLabelPos(label,p1,p2){ //调整label的位置，使倾斜后看起来在线的中心，而不要挡住端点
        let center = new THREE.Vector3().addVectors(p1,p2).multiplyScalar(0.5);  
        
        if(this.lineDir && this.lineDir.length() > 0){
            if(viewer.mainViewport.camera.type == 'OrthographicCamera'){
                label.setPos(center) 
            }else{
                //根据视线和线的夹角（后又加入相机和两个端点距离差）来决定标签偏移位置。+
                let eyePos = viewer.mainViewport.camera.position;
                let dir = viewer.mainViewport.view.direction //new THREE.Vector3().subVectors(center,eyePos).normalize()
                 
                /*let centerDir = new THREE.Vector3().subVectors(center,eyePos).normalize()
                if(centerDir.dot(dir)<0){//中点在相机后方，就不设置
                    label.setPos(center)
                    return
                } */
                let cos = dir.dot(this.lineDir) 
                let nearPoint = cos > 0 ? p2 : p1 //近端点。 
                let far = cos > 0 ? p1 : p2 //远端点。 
                let nearPointDir = new THREE.Vector3().subVectors(nearPoint,eyePos)//.normalize()
                //使label在中点和近端点中变化, 近端点可能到了相机后方，需要投影到相机所在平面上
                if(nearPointDir.dot(dir)<0){//近端点到了相机后方，前移。 
                //let hfov = cameraLight.getHFOVForCamera(viewer.mainViewport.camera , true  ); //暂且只看水平fov 
                //if(nearPointDir.dot(dir)<Math.cos(hfov/2)){//近端点在镜头外，前移。    --但是这个就得把点转化成在镜头边缘而非左右两边（camDirPlane上）
                    let ray = new THREE.Raycaster()
                    ray.set(nearPoint, cos>0?this.lineDir:this.lineDir.clone().negate())
                    let camDirPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(dir,  eyePos) 
                    nearPoint = ray.ray.intersectPlane(camDirPlane, new THREE.Vector3()) 
                    if(!nearPoint){//线是垂直的，视线是水平的时候 
                        return label.setPos(center) 
                    } 
                } 
                  
                  
                //防止离远了之后也偏移很多，但远了之后相机到端点vec和到中点的vec的夹角接近，不需要怎么偏移的。  
                let dis1 = nearPoint.distanceToSquared(eyePos)
                let dis2 = far.distanceToSquared(eyePos)
                let diff = Math.abs(dis1/dis2)
                diff<1 && (diff = 1/diff)
                diff = math.linearClamp(diff,0, 30,    0,1 ) 
                  
                  
                  
                let efficiency = 0.7; // 0-1  数值越高，r越容易接近1或-1，label越容易在倾斜后靠近近端点。 
                //let r = 0.5*efficiency*cos + 0.5  
                let r = 0.5*efficiency*diff*cos + 0.5
                r = THREE.Math.clamp(r,0.1,0.9)
                
                //视线越接近线的方向，标签应该越往近端点偏移，防止看起来几乎在远端。
                if(cos > 0){
                    center = p1.clone().multiplyScalar(1-r).add(nearPoint.clone().multiplyScalar(r)); //label在线上滑动，使尽量保持在视觉中心
                }else{
                    center = nearPoint.clone().multiplyScalar(1-r).add(p2.clone().multiplyScalar(r)); //label在线上滑动，使尽量保持在视觉中心
                }
                
                label.setPos(center)
            }
             
            
            //归零
            this.orient2dInfo = null
            this.markers.forEach(e=>e.needsUpdate=true)
        }else{
            
            label.setPos(center)   
        }
     
            
    }

    
      
	addMarker (o={}) {
         
        let marker = new Sprite({mat:this.getMarkerMaterial('default'), sizeInfo: markerSizeInfo, name:"measure_point"} )
        
        if(this.measureType != 'MulDistance_shape')marker.posShift = new THREE.Vector3(0.2,0,0);//使箭头中心对准端点位置（因贴图里箭头不在中心，如果单纯改贴图会导致raycaster热区偏移，所以修改mesh位置）
         
        Potree.Utils.setObjectLayers(marker, 'measure' )
        marker.pickOrder = marker.renderOrder = Potree.config.renderOrders.measureMarker;
        
        marker.markerSelectStates = {} 
        marker.addEventListener('startDragging',(e)=>{
            console.log('marker startdragging')
            viewer.inputHandler.dispatchEvent( {type: 'measuring',v:true, cause:'startDragging', situation:'dragging', object:this})
        })
        marker.addEventListener('drop',(e)=>{
            console.log('marker drop')
            this.lastDropTime = Date.now()
            viewer.inputHandler.dispatchEvent({type: 'measuring',  v:false, cause:'stopDragging', situation:'dragging', object:this}  )
            
            if(Potree.settings.adsorption){
                this.isNew || viewer.viewports.forEach((viewport)=>{
                    this.getPointsPos2d(viewport, true )//forceUpdate
                })  
            }
        })
        marker.measure = this
        let edge
		{ // edges 
            edge = LineDraw.createFatLine( [ ],{material: this.getLineMat(this.clickSelected?'edgeSelect':'edgeDefault')} ) 
            edge.pickOrder = 0
            Potree.Utils.setObjectLayers(edge, 'measure' ) 


                        
            let addHoverEvent = ()=>{ //当非isNew时才添加事件 
            
                let mouseover = (e) => {this.setSelected(true, 'edge')};
                let mouseleave = (e) => {this.setSelected(false, 'edge')};
                
                edge.addEventListener('mouseover', mouseover);
                edge.addEventListener('mouseleave', mouseleave); 
                edge.removeEventListener('addHoverEvent', addHoverEvent);
                
                //2023.10.25add: 
                edge.addEventListener('click',()=>{ 
                    let now = Date.now()
                    if(now-this.lastDropTime < 50)return ;//点击到marker了
                    if(!this.isNew) this.focus()
                })
            }
            edge.addEventListener('addHoverEvent', addHoverEvent);
		}
        
        super.addMarker({point:o.point, marker:marker,  edge})
        
        
		if(this.showEdges){ // edge labels  
            const edgeLabel = this.createEdgeLabel('edgeLabel', !this.closed) 
            edgeLabel.measure = this
			this.edgeLabels.push(edgeLabel); 
			 
		}

		

		if(this.showCoordinates){ // coordinate labels 
            let coordinateLabel = new Label({
                className:'measure_pointPos', 
                camera: viewer.scene.getActiveCamera() 
            })
            coordinateLabel.setVisible(false)
            this.coordinateLabels.push(coordinateLabel);
            
		}
        
        
        
        
		

		let event = {
			type: 'marker_added',
			measurement: this,
			marker: marker
		};
		this.dispatchEvent(event);

		//this.setMarker(this.points.length - 1, point);
        this.update()//更新一下倒数第二条线   
        return marker;//add
	};



       

     




    editStateChange(state){ //主要针对edgeLabels显示切换，编辑时显示
        super.editStateChange(state)
        if(!state){
            this.editStateTimer = setTimeout(()=>{
                if(!this.isEditing){
                    this.dispatchEvent({type:'editStateChange',state:false})   
                    this.setEdgesDisplay(false)
                    this.areaPlane && Potree.Utils.updateVisible(this.areaPlane, 'intersectLastLine',  true)
                    this.areaLabel && Potree.Utils.updateVisible(this.areaLabel, 'intersectLastLine',  true) 
                }
            },100)
        }else{
            if(!this.isEditing){
                this.dispatchEvent({type:'editStateChange',state:true})   
                this.setEdgesDisplay(true)
                clearTimeout(this.editStateTimer)
            } 
        }
        this.isEditing = state  
        viewer.dispatchEvent({type:'MeasureDragChange',state})
    }
    





    
    setMarkerSelected(marker, state, hoverObject){
        
        //console.warn(marker.id , state, hoverObject)
         
        marker.markerSelectStates[hoverObject] = state
        let absoluteState = false
        for(var i in marker.markerSelectStates){
            if(marker.markerSelectStates[i] == 'hover'){
                absoluteState = true; break;
            }
        }
        
        
        if(this.measureType == 'MulDistance_shape'){ 
            if(state == 'hover' && hoverObject == 'single'){
                marker.material = this.getMarkerMaterial('select') 
            }else{
                marker.material = this.getMarkerMaterial('default') //路径选中后marker是非选中状态， 但是颜色一样
            }  
             
        }else{
            if(absoluteState){
                marker.material = this.getMarkerMaterial('select')
            }else{
                marker.material = this.getMarkerMaterial('default')
            } 
        } 
        
        
        if(absoluteState){
            marker.renderOrder = marker.pickOrder = Potree.config.renderOrders.measureMarker+1
        }else{
            marker.renderOrder = marker.pickOrder = Potree.config.renderOrders.measureMarker
        }
        
         
        marker.selected = absoluteState
        
        viewer.mapViewer && viewer.mapViewer.dispatchEvent('content_changed') 
        viewer.dispatchEvent('content_changed')
    }
    
    
    
    setEdgesDisplay(state, ignoreGuideLine){
        this.closed && this.edgeLabels.forEach(e=>e.setVisible(!!(state && e.shouldVisi))  )
         
        if(!ignoreGuideLine && this.measureType == 'Distance'){
            this.horEdgeLabel.visible = this.verEdgeLabel.visible = this.horGuideEdge.visible = this.verGuideEdge.visible = !!(state && this.shouldShowHorVerGuide)
        }
    }
    
    
    setSelected(state, hoverObject){//add
        //console.log('setSelected', state, hoverObject)
        hoverObject && (this.selectStates[hoverObject] = state)
        let absoluteState = false
        for(var i in this.selectStates){
            if(this.selectStates[i]){
                absoluteState = true; break;
            }
        }
        
        
        if(absoluteState){
            this.markers.forEach(e=>this.setMarkerSelected(e, 'hover', 'selectAll' ) )
            
            this.edges.forEach(e=>{
                e.renderOrder = Potree.config.renderOrders.lines + 1
                e.material = this.getLineMat('edgeSelect')   
            })
			 
			this.areaPlane && (this.areaPlane.material = planeMats.selected)
             
            
            //this.areaLabel && this.areaLabel.elem.addClass('highLight')
            //this.closed || this.edgeLabels.forEach(e=>e.elem.addClass('highLight')  )
            this.setEdgesDisplay(true, hoverObject=="screenshot")
            
            this.areaLabel && this.setLabelHightState(this.areaLabel, true) 
            this.closed || this.edgeLabels.forEach(e=>this.setLabelHightState(e, true)  )
              
        }else{
            this.markers.forEach(e=>this.setMarkerSelected(e, 'unhover', 'selectAll' ))
            this.edges.forEach(e=>{
                e.renderOrder = Potree.config.renderOrders.lines 
                e.material = this.getLineMat('edgeDefault') 
            })
            this.areaPlane && (this.areaPlane.material = planeMats.default)
            this.setEdgesDisplay(false, hoverObject=="screenshot")
            //this.areaLabel && this.areaLabel.elem.removeClass('highLight')
            //this.closed || this.edgeLabels.forEach(e=>e.elem.removeClass('highLight')  )
            this.areaLabel && this.setLabelHightState(this.areaLabel, false) 
            this.closed || this.edgeLabels.forEach(e=>this.setLabelHightState(e, false)  )
            
        }
           
        this.selected = absoluteState
        
        if(hoverObject != 'byList'){
            //this.bus && this.bus.emit('highlight', this.selected)
            this.dispatchEvent({type:'highlight',state:this.selected})//列表高亮
        }
        
        viewer.dispatchEvent('content_changed')
        viewer.mapViewer && viewer.mapViewer.dispatchEvent('content_changed')
    }
    
    
    
    
    setLabelHightState(label, state){ 
        if(state){  
            let color = new THREE.Color(Potree.config.measure.highlight.color) 
            //label.sprite.material.opacity = config.measure.highlight.opacity
            
            //label.setBackgroundColor({r:255*color.r, g:255*color.g, b:255*color.b, a:config.measure.highlight.opacity})
          
            label.sprite.material.useDepth = false;
            //label.textColor = {r: this.color.r*255, g:  this.color.g*255, b:  this.color.b*255, a: 1} 
        }else{
            //label.setBackgroundColor({r: this.color.r*255, g:  this.color.g*255, b:  this.color.b*255, a:config.measure.default.opacity})
            
            label.sprite.material.useDepth = true
            //label.sprite.material.opacity = 0.98
            //label.textColor = {r: 255, g: 255, b: 255, a: 1} 
            
        }  
        label.updateTexture()  
    }

    
    
    
    
    
    
    
	removeMarker(index ){  
        super.removeMarker(index)
        
        this.points_datasets.splice(index, 1);
        this.dataset_points && this.dataset_points.splice(index, 1)
        this.coordinateLabels.splice(index, 1);
         
        let edgeIndex = index//(index === 0) ? 0 : (index - 1);
        if(this.edgeLabels[edgeIndex]){ 
            this.edgeLabels[edgeIndex].dispose() 
            this.edgeLabels.splice(edgeIndex, 1);
        }
         
        this.update(); 
        this.dispatchEvent({type: 'marker_removed', measurement: this});
    }
    
    setPosition(index, position) {
        super.setPosition(index, position)
        
        //相连的点的箭头也要更新方向 
        this.markers[(index + this.points.length - 1) % this.points.length].waitUpdate()
        this.markers[(index + this.points.length + 1) % this.points.length].waitUpdate()
        
        let event = {
			type: 'marker_moved',
			measure:	this,
			index:	index,
			position: position.clone()
		};
		this.dispatchEvent(event); 
         
    }
    
    dispose(){//add
        var labels = this.edgeLabels.concat(this.coordinateLabels)
        this.areaLabel && labels.push(this.areaLabel)
        labels.forEach(e=>e.dispatchEvent({type:'dispose'}))
        super.dispose()
    }
    
     
	getTotalDistance () {
		if (this.points.length === 0) {
			return 0;
		}

		let distance = 0;

		for (let i = 1; i < this.points.length; i++) {
			let prev = this.points[i - 1];
			let curr = this.points[i];
			let d = prev.distanceTo(curr);

			distance += d;
		}

		if (this.closed && this.points.length > 1) {
			let first = this.points[0];
			let last = this.points[this.points.length - 1];
			let d = last.distanceTo(first);

			distance += d;
		}

		return distance;
	}

	getAngleBetweenLines (cornerPoint, point1, point2) {
		let v1 = new THREE.Vector3().subVectors(point1, cornerPoint);
		let v2 = new THREE.Vector3().subVectors(point2, cornerPoint);

		// avoid the error printed by threejs if denominator is 0
		const denominator = Math.sqrt( v1.lengthSq() * v2.lengthSq() );
		if(denominator === 0){
			return 0;
		}else{
			return v1.angleTo(v2);
		}
	};

	getAngle (index) {
		if (this.points.length < 3 || index >= this.points.length) {
			return 0;
		}

		let previous = (index === 0) ? this.points[this.points.length - 1] : this.points[index - 1];
		let point = this.points[index];
		let next = this.points[(index + 1) % (this.points.length)];

		return this.getAngleBetweenLines(point, previous, next);
	}
    
    getCenter(/* update */){ 
        if(this.closed){
            return this.center.clone()
        }else{  
            let center = this.points.reduce(function(total, currentValue ){
                return total.add(currentValue)
            }, new THREE.Vector3 ) 
            
            center.multiplyScalar(1/this.points.length)
            return center //求不出重心呜呜
        } 
        
    }
    
	// updateAzimuth(){
	// 	// if(this.points.length !== 2){
	// 	// 	return;
	// 	// }

	// 	// const azimuth = this.azimuth;

	// 	// const [p0, p1] = this.points;

	// 	// const r = p0.distanceTo(p1);
		
	// }
    
 
     
    
    createGuideLine(){//add 辅助线 
        var guideLine = LineDraw.createFatLine([ ],{material:this.getLineMat('guide')} )
        guideLine.visible = false 
        this.guideLine = guideLine
        this.add(guideLine);
    }
    createHorVerGuideLine(){//创建水平与垂直辅助线，仅距离测量有。
        var verGuideEdge = LineDraw.createFatLine([ ],{material:this.getLineMat('guide')} )
        verGuideEdge.visible = false 
        this.verGuideEdge = verGuideEdge
        verGuideEdge.name = 'verGuideEdge'
        
        var horGuideEdge = LineDraw.createFatLine([ ],{material:this.getLineMat('guide')} )
        horGuideEdge.visible = false 
        horGuideEdge.name = 'horGuideEdge'
        this.horGuideEdge = horGuideEdge
        
        this.add(this.verGuideEdge);
        this.add(this.horGuideEdge);
        
        
        //label:
        this.verEdgeLabel = this.createEdgeLabel('verGuideEdge')  
        this.horEdgeLabel = this.createEdgeLabel('horGuideEdge')  
    }
    
    
    createGuideLines(){//add 固定点垂线的辅助线  可以多段
        var guideLine = LineDraw.createFatLine(this.guideLinePoints ,{material:this.getLineMat('guide2'), renderOrderShift:-1, uncontinuous:true} )
        this.guideLine = guideLine  //暂时也叫这个名字
        this.add(guideLine);
    }
    updateGuideLines(){
        LineDraw.updateLine(this.guideLine, this.guideLinePoints)
    }
    
    
    focus({dontMoveCamera=false, dontEmit}={}){ 
        
        if(Potree.settings.displayMode == 'showPanos')dontMoveCamera = true  //2023.10.24 新需求：点击后不移动,否则经常跳到别的点。且在app上会反应一秒才选中。
        if(!dontMoveCamera){
            let dontChangeCamDir = viewer.mainViewport.camera.type == 'OrthographicCamera' /* && math.closeTo( viewer.mainViewport.view.pitch , -1.57079632)  */ // 不改角度
            viewer.focusOnObject(this, 'measure', null, {dontChangeCamDir})
        }
        if(this.clickSelected)return    
        this.setSelected(true, 'focus')
        
        this.clickSelected = true
        dontEmit || this.dispatchEvent({type:'selected', state:true})
        
        
        if(this.measureType == 'MulDistance_shape'){
            this.markers.forEach(e=>e.visible = true)
        }
        
        //viewer.dispatchEvent({type:'selectMeasure', measure:this})
        let cancelSelect = ()=>{
            if(this.isNew)return;//添加过程中保持选中  主要for多路径
            this.clickSelected = false
            if(this.measureType == 'MulDistance_shape'){
                this.markers.forEach(e=>e.visible = false)
            }
            this.removeEventListener('cancelSelect', cancelSelect) 
            this.setSelected(false, 'focus') 
            dontEmit || this.dispatchEvent({type:'selected', state:false}) 
        }
        setTimeout(()=>{
            this.addEventListener('cancelSelect', cancelSelect) 
        },10)
    }
     
    
    
    createEdgeLabel(name, hasHoverEvent){
        
        //mainLabelProp.backgroundColor = {r: this.color.r*255, g: this.color.g*255, b: this.color.b*255, a:config.measure.default.opacity} 
            
        
        const edgeLabel = new TextSprite(
            $.extend(hasHoverEvent ? mainLabelProp : subLabelProp,{
                sizeInfo: labelSizeInfo,  name:name||'edgeLabel', 
                
            })
        )
        if(hasHoverEvent){
            edgeLabel.addEventListener('mouseover',()=>{
                this.setSelected(true, 'edgeLabel')
            }) 
            edgeLabel.addEventListener('mouseleave',()=>{
                this.setSelected(false, 'edgeLabel')
            })  
            edgeLabel.addEventListener('click',()=>{ 
                if(!this.isNew) this.focus()
            })
            //edgeLabel.sprite.material.opacity = config.measure.default.opacity
        }
        edgeLabel.visible = false
        edgeLabel.sprite.material.depthTestWhenPick = true
        
       
        
        Potree.Utils.setObjectLayers(edgeLabel, 'measure' )
        this.add(edgeLabel)
        return edgeLabel
    }
    
    createAreaLabel(){ 
        /* const areaLabel = new Label({
            className:'measure_area', 
            
        })
        areaLabel.elem.on('mouseover',()=>{
            this.setSelected(true, 'areaLabel')
        })
        areaLabel.elem.on('mouseout',()=>{
            this.setSelected(false, 'areaLabel')
        }) */
        
        
        const areaLabel = new TextSprite(
            $.extend({}, mainLabelProp,{sizeInfo: labelSizeInfo, name:'areaLabel', fontsize:16*textSizeRatio} )
        )
        
        areaLabel.addEventListener('mouseover',()=>{
            this.setSelected(true, 'areaLabel')
        })
        areaLabel.addEventListener('mouseleave',()=>{
            this.setSelected(false, 'areaLabel')
        }) 
        areaLabel.addEventListener('click',()=>{
            if(!this.isNew) this.focus()
        })
        Potree.Utils.setObjectLayers(areaLabel, 'measure' )
        areaLabel.setVisible(false) 
        
        return areaLabel;
        
        
    }

    
    getMarkerMaterial(type){ 
        let color = this.color.getHexString() 
        let name   
        if(this.measureType == 'MulDistance_shape'){//多线段路径
             name = type + '_circle_' + color
        }else{
             name = type + '_arrow_' + color
        }
        
        if(!markerMats[name]){
            
            markerMats['default_circle_' + color] = new DepthBasicMaterial($.extend({},lineDepthInfo,{ 
                transparent: !0,
                opacity: 1,
                map: texLoader.load(Potree.resourcePath+'/textures/pic_point_s32.png' ),  
                useDepth:true,
                replaceColor:new THREE.Color(Potree.config.measure.highlight.color),
                beReplacedRed: 0.184,  //0.18431372
                mapColorReplace:true,
                mapScale:0.7
            })),
            markerMats['select_circle_' + color] = new DepthBasicMaterial($.extend({},lineDepthInfo,{ 
                transparent: !0,
                opacity: 1,
                map: texLoader.load(Potree.resourcePath+'/textures/pic_point32.png' ), 
                //useDepth:true ,
                replaceColor:  new THREE.Color(Potree.config.measure.highlight.color) ,
                beReplacedRed: 0.184,   //0.18431372
                mapColorReplace:true,
                mapScale:0.7
            })) 
            markerMats['default_arrow_' + color] = new DepthBasicMaterial($.extend({},lineDepthInfo,{ 
                transparent: !0,
                opacity: 1, 
                map: texLoader.load(Potree.resourcePath+'/textures/arrows_l_32.png' ),
                useDepth:true,
                replaceColor:this.color,
                beReplacedRed: 0.184,  //0.18431372
                mapColorReplace:true,
            })),
            markerMats['select_arrow_' + color] = new DepthBasicMaterial($.extend({},lineDepthInfo,{ 
                transparent: !0,
                opacity: 1,
                map: texLoader.load(Potree.resourcePath+'/textures/arrows_l_32.png' ), 
                //useDepth:true ,
                replaceColor:  new THREE.Color(Potree.config.measure.highlight.color) ,
                beReplacedRed: 0.184,   //0.18431372
                mapColorReplace:true
            })) 
          
            
        }  
        
       
        return markerMats[name]
        
         
        
    }
    
    
    
    
    getLineMat(type) { 
    
        if(!lineMats) Measure.lineMats = lineMats = {
            guide:   LineDraw.createFatLineMat({
                color:config.measure.guide.color, 
                dashSize: 0.1, 
                gapSize: 0.02,
                dashed: true,
                lineWidth: 2 
            }),
            guide2:   LineDraw.createFatLineMat(Object.assign({}, lineDepthInfo,{
                color:config.measure.guide.color, 
                dashSize: 0.1, 
                gapSize: 0.02,
                dashed: true,
                lineWidth: 2,
                useDepth :true,                
            })) 

            
        }
    
    
    
    
        let color = this.color.getHexString()
        if(!lineMats['edgeDefault'+color]){
            lineMats['edgeDefault'+color] = LineDraw.createFatLineMat(Object.assign({}, lineDepthInfo, {
                color: this.color, 
                lineWidth: config.measure.lineWidth,
                useDepth :true,
                dashWithDepth :true,  // 只在被遮住的部分显示虚线，因为实线容易挡住label 
                dashed :true,   
                dashSize : 0.04,
                gapSize: 0.04,    
                transparent: true,
                opacity: config.measure.default.opacity,
                depthTestWhenPick:true,
            }))
            lineMats['edgeSelect'+color] = LineDraw.createFatLineMat(Object.assign({}, lineDepthInfo,{
                color:  Potree.config.measure.highlight.color ,
                dashSize: 0.5, 
                gapSize: 0.2, 
                lineWidth: config.measure.lineWidth  ,
                transparent: true,
                opacity: config.measure.highlight.opacity
            })) 
        }
    
    
        if(!type.includes('guide')){
            return Measure.lineMats[type+color] 
        }else return Measure.lineMats[type]
        
         
         
        
    }
    
    
    createAreaPlane(){
        planeMats || (planeMats = { 
            default: new DepthBasicMaterial( $.extend({},planeDepthInfo,{
                color:color,
                side:THREE.DoubleSide,
                opacity:0.2,
                transparent:true,
                useDepth:true 
            })), 
            selected: new THREE.MeshBasicMaterial({
                color:  color ,
                side:THREE.DoubleSide,
                opacity:0.3,
                transparent:true, 
            })
        },Measure.planeMats = planeMats)
        return super.createAreaPlane(planeMats.default)
    }
    
     
	raycast (raycaster, intersects) {
		for (let i = 0; i < this.points.length; i++) {
			let marker = this.markers[i];

			marker.raycast(raycaster, intersects);
		}

		// recalculate distances because they are not necessarely correct
		// for scaled objects.
		// see https://github.com/mrdoob/three.js/issues/5827
		// TODO: remove this once the bug has been fixed
		for (let i = 0; i < intersects.length; i++) {
			let I = intersects[i];
			I.distance = raycaster.ray.origin.distanceTo(I.point);
		}
		intersects.sort(function (a, b) { return a.distance - b.distance; });
	};

    getPointsPos2d(viewport, update){//获取屏幕上的二维坐标
        let ps = this.pointsPos2d.get(viewport) 
        if(update || !ps){
            let points = this.points.slice()
            if(this.measureType == 'MulDistance_shape'){
                points.push(this.getCenter()) //中心点吸附
            }
            points = points.map(e=>{
                let p = Potree.Utils.getPos2d(e,  viewport, viewer.renderArea )
                p.pos3d = e.clone(),  p.object = this
                return p
            }); 
            
            
            this.pointsPos2d.set(viewport, points)
            //console.log('updatePointsPos2d',this.uuid,viewport.name)
        }
        
        return this.pointsPos2d.get(viewport) 
    }
    
    
    transformData(prop){
        if(prop.measureType == 'Point'){ 
            prop.showCoordinates = true, 
            prop.closed = true, 
            prop.maxMarkers = 1,
            prop.minMarkers = 1 
        }else if(prop.measureType == 'Distance'){
            prop.showDistances = true,   
            prop.showEdges = true,
            prop.maxMarkers = 2,
            prop.minMarkers = 2 
        }else if(prop.measureType == 'MulDistance' ){//new 
            prop.showDistances = true,  
            prop.showEdges = true, 
            prop.minMarkers = 2 
        }else if(prop.measureType == 'MulDistance_shape' ){//new 
            prop.showEdges = true, 
            prop.minMarkers = 2 
        }else if(prop.measureType == 'Ver MulDistance'){ 
            prop.showDistances = true,
            prop.atPlane = true,                
            prop.showEdges = true, 
            prop.minMarkers = 2 
            prop.faceDirection = "vertical" 
            prop.unableDragAtMap = true
        }else if(prop.measureType == 'Hor MulDistance'){
            prop.showDistances = true,
            prop.atPlane = true,
            prop.showEdges = true, 
            prop.minMarkers = 2 
            prop.faceDirection = "horizontal"  
        }else if(prop.measureType == 'Ver Distance'){
            prop.showDistances = true,  
            prop.showEdges = true,
            prop.maxMarkers = 2,
            prop.minMarkers = 2,
            prop.faceDirection = "vertical" 
            prop.unableDragAtMap = true
        }else if(prop.measureType == 'Hor Distance'){
            prop.showDistances = true, 
            prop.showEdges = true,
            prop.maxMarkers = 2,
            prop.minMarkers = 2,
            prop.faceDirection = "horizontal"  
        }else if(prop.measureType == "Hor LINE with Text"){ //add 
            prop.showEdges = true,
            prop.maxMarkers = 2,
            prop.minMarkers = 2,
            prop.faceDirection = "horizontal"  
                 
        }else if(prop.measureType == 'Area'){
            prop.showDistances = true,  
            prop.atPlane = true,                
            prop.showEdges = true,
            prop.closed = true, 
            prop.minMarkers = 3  
        }else if(prop.measureType == 'Hor Area'){
            prop.showDistances = true,  
            prop.atPlane = true,  
            prop.showEdges = true,
            prop.closed = true, 
            prop.minMarkers = 3  
            prop.faceDirection = "horizontal"
             
        }else if(prop.measureType == 'Ver Area'){
            prop.showDistances = true,  
            prop.atPlane = true,  
            prop.showEdges = true,
            prop.closed = true, 
            prop.minMarkers = 3 
            prop.faceDirection = "vertical"   
            prop.unableDragAtMap = true            
        }else if(prop.measureType == 'Rect Area'){
            prop.showDistances = true,  
            prop.atPlane = true,  
            prop.showEdges = true,
            prop.closed = true, 
            prop.minMarkers = 4 
            prop.maxMarkers = 4            
        }else if(prop.measureType == 'Hor Rect Area'){
            prop.showDistances = true,  
            prop.atPlane = true,  
            prop.showEdges = true,
            prop.closed = true, 
            prop.minMarkers = 4 
            prop.maxMarkers = 4 
            prop.isRect = true 
            prop.faceDirection = "horizontal" 
        }else if(prop.measureType == 'Ver Rect Area'){
            prop.showDistances = true,  
            prop.atPlane = true,  
            prop.showEdges = true,
            prop.closed = true, 
            prop.minMarkers = 4 
            prop.maxMarkers = 4 
            prop.isRect = true 
            prop.faceDirection = "vertical"  
            prop.unableDragAtMap = true
        } 
        if(prop.atPlane && prop.closed){ //atPlane在同一平面上
            prop.showArea = true
        }
        
        
        super.transformData(prop)
        
        
        
    }



    setUnitSystem(unitSystem){
        //console.log(this.name +':' +this.unitSystem)
        if(unitSystem != this.unitSystem){
            if(unitSystem == "metric"){
                
            }else if(unitSystem == 'imperial'){
                
            }
            this.unitSystem = unitSystem
            this.update()
        }
    }


    reDraw(restMarkerCount=0){//重新开始画 
        super.reDraw(restMarkerCount)
        if(this.measureType == 'Distance'){
            this.shouldShowHorVerGuide = false
            this.setEdgesDisplay(false)
        }
        if(this.showArea){ 
            this.area = {value:0};
            this.areaLabel && this.areaLabel.setVisible(false)
        }
        viewer.inputHandler.dispatchEvent( {type:'measuring', v:true, cause:'reDraw',object:this, situation:'dragging'}  )
	             
    }
    


	/* get showCoordinates () {
		return this._showCoordinates;
	}

	set showCoordinates (value) {
		this._showCoordinates = value;
		this.update();
	}

	get showAngles () {
		return this._showAngles;
	}

	set showAngles (value) {
		this._showAngles = value;
		this.update();
	}

	get showCircle () {
		return this._showCircle;
	}

	set showCircle (value) {
		this._showCircle = value;
		this.update();
	}

	get showAzimuth(){
		return this._showAzimuth;
	}

	set showAzimuth(value){
		this._showAzimuth = value;
		this.update();
	}

	get showEdges () {
		return this._showEdges;
	}

	set showEdges (value) {
		this._showEdges = value;
		this.update();
	}

	get showHeight () {
		return this._showHeight;
	}

	set showHeight (value) {
		this._showHeight = value;
		this.update();
	}

	get showArea () {
		return this._showArea;
	}

	set showArea (value) {
		this._showArea = value;
		this.update();
	}

	get closed () {
		return this._closed;
	}

	set closed (value) {
		this._closed = value;
		this.update();
	}

	get showDistances () {
		return this._showDistances;
	}

	set showDistances (value) {
		this._showDistances = value;
		this.update();
	} */

}










function createCircleRadiusLabel(){
	const circleRadiusLabel = new TextSprite("");

	circleRadiusLabel.setTextColor({r: 140, g: 250, b: 140, a: 1.0});
	circleRadiusLabel.setBorderColor({r: 0, g: 0, b: 0, a: 1.0});
	circleRadiusLabel.setBackgroundColor({r: 0, g: 0, b: 0, a: 1.0});
	circleRadiusLabel.fontsize = 16;
	circleRadiusLabel.material.depthTest = false;
	circleRadiusLabel.material.opacity = 1;
	circleRadiusLabel.visible = false;
	
	return circleRadiusLabel;
}

function createCircleRadiusLine(){
	/* const lineGeometry = new LineGeometry();

	lineGeometry.setPositions([
		0, 0, 0,
		0, 0, 0,
	]);

	const lineMaterial = new LineMaterial({ 
		color: 0xff0000, 
		lineWidth: 2, 
		resolution:  new THREE.Vector2(1000, 1000),
		gapSize: 1,
		dashed: true,
	});

	lineMaterial.depthTest = false;

	const circleRadiusLine = new Line2(lineGeometry, lineMaterial);*/
	
    var circleRadiusLine = LineDraw.createFatLine([ ],{
        color:0xff0000,   
        dashSize: 0.5, 
		gapSize: 0.2, 
		lineWidth: config.measure.lineWidth  
    })
    circleRadiusLine.visible = false; 
	return circleRadiusLine;
}

function createCircleLine(){
	const coordinates = [];

	let n = 128;
	for(let i = 0; i <= n; i++){
		let u0 = 2 * Math.PI * (i / n);
		let u1 = 2 * Math.PI * (i + 1) / n;

		let p0 = new THREE.Vector3(
			Math.cos(u0), 
			Math.sin(u0), 
			0
		);

		let p1 = new THREE.Vector3(
			Math.cos(u1), 
			Math.sin(u1), 
			0
		);

		coordinates.push(
			 p0, 
			 p1 
		);
	}

	/* const geometry = new LineGeometry();
	geometry.setPositions(coordinates);

	const material = new LineMaterial({ 
		color: 0xff0000, 
		dashSize: 5, 
		gapSize: 2,
		lineWidth: 2, 
		resolution:  new THREE.Vector2(1000, 1000),
	}); 

	material.depthTest = false;

	const circleLine = new Line2(geometry, material);
	circleLine.visible = false;
	circleLine.computeLineDistances();*/

    var circleLine = LineDraw.createFatLine(coordinates,{
        color: 0xff0000,
        dashSize: 0.5, 
		gapSize: 0.2, 
		lineWidth: config.measure.lineWidth  
    })


	return circleLine;
}

/* function createCircleCenter(){
	const sg = new THREE.markerGeometry(1, 32, 32);
	const sm = new THREE.MeshNormalMaterial();
	
	const circleCenter = new THREE.Mesh(sg, sm);
	circleCenter.visible = false;

	return circleCenter;
} */

function createLine(){
	 
    const line = LineDraw.createFatLine([ ],{
        color: 0xff0000,
        dashSize: 0.5, 
		gapSize: 0.2, 
		lineWidth: config.measure.lineWidth  
    })
    
    
    
	return line;
}

function createCircle(){

	const coordinates = [];

	let n = 128;
	for(let i = 0; i <= n; i++){
		let u0 = 2 * Math.PI * (i / n);
		let u1 = 2 * Math.PI * (i + 1) / n;

		let p0 = new THREE.Vector3(
			Math.cos(u0), 
			Math.sin(u0), 
			0
		);

		let p1 = new THREE.Vector3(
			Math.cos(u1), 
			Math.sin(u1), 
			0
		);

		coordinates.push(
			 p0, 
			 p1 
		);
	}

 
    var line = LineDraw.createFatLine(coordinates,{
        color: 0xff0000,
        dashSize: 0.5, 
		gapSize: 0.2, 
		lineWidth: config.measure.lineWidth  
    })
	return line;

}
Measure.markerMats = markerMats;
/* function createAzimuth(){

	const azimuth = {
		label: null,
		center: null,
		target: null,
		north: null,
		centerToNorth: null,
		centerToTarget: null,
		centerToTargetground: null,
		targetgroundToTarget: null,
		circle: null,

		node: null,
	};

	const sg = new THREE.markerGeometry(1, 32, 32);
	const sm = new THREE.MeshNormalMaterial();

	{
		const label = new TextSprite("");

		label.setTextColor({r: 140, g: 250, b: 140, a: 1.0});
		label.setBorderColor({r: 0, g: 0, b: 0, a: 1.0});
		label.setBackgroundColor({r: 0, g: 0, b: 0, a: 1.0});
		label.fontsize = 16;
		label.material.depthTest = false;
		label.material.opacity = 1;

		azimuth.label = label;
	}

	azimuth.center = new THREE.Mesh(sg, sm);
	azimuth.target = new THREE.Mesh(sg, sm);
	azimuth.north = new THREE.Mesh(sg, sm);
	azimuth.centerToNorth = createLine();
	azimuth.centerToTarget = createLine();
	azimuth.centerToTargetground = createLine();
	azimuth.targetgroundToTarget = createLine();
	azimuth.circle = createCircle();

	azimuth.node = new THREE.Object3D();
	azimuth.node.add(
		azimuth.centerToNorth,
		azimuth.centerToTarget,
		azimuth.centerToTargetground,
		azimuth.targetgroundToTarget,
		azimuth.circle,
		azimuth.label,
		azimuth.center,
		azimuth.target,
		azimuth.north,
	);

	return azimuth;
} */









/* 
     

 */