potree-sdk/src/utils/MeasuringTool.js

import * as THREE from "../../libs/three.js/build/three.module.js";
import {Measure} from "./Measure.js";
import {Utils} from "../utils.js"; 
import math from "./math.js";
import {CameraMode} from "../defines.js";
import { EventDispatcher } from "../EventDispatcher.js";
 
function updateAzimuth(viewer, measure){
    if(!measure.showAzimuth)return
	const azimuth = measure.azimuth;

	const isOkay = measure.points.length === 2;

	azimuth.node.visible = isOkay  

	if(!azimuth.node.visible){
		return;
	}

	const camera = viewer.scene.getActiveCamera();
	const renderAreaSize = viewer.renderer.getSize(new THREE.Vector2());
	const width = renderAreaSize.width;
	const height = renderAreaSize.height;
	
	const [p0, p1] = measure.points;
	const r = p0.position.distanceTo(p1.position);
	const northVec = Utils.getNorthVec(p0.position, r, viewer.getProjection());
	const northPos = p0.position.clone().add(northVec);

	azimuth.center.position.copy(p0.position);
	azimuth.center.scale.set(2, 2, 2);
	
	azimuth.center.visible = false;
	// azimuth.target.visible = false;


	{ // north
		azimuth.north.position.copy(northPos);
		azimuth.north.scale.set(2, 2, 2);

		let distance = azimuth.north.position.distanceTo(camera.position);
		let pr = Utils.projectedRadius(1, camera, distance, width, height);

		let scale = (5 / pr);
		azimuth.north.scale.set(scale, scale, scale);
	}

	{ // target
		azimuth.target.position.copy(p1.position);
		azimuth.target.position.z = azimuth.north.position.z;

		let distance = azimuth.target.position.distanceTo(camera.position);
		let pr = Utils.projectedRadius(1, camera, distance, width, height);

		let scale = (5 / pr);
		azimuth.target.scale.set(scale, scale, scale);
	}

 
	azimuth.circle.position.copy(p0.position);
	azimuth.circle.scale.set(r, r, r);
	azimuth.circle.material.resolution.set(width, height);

	// to target
	azimuth.centerToTarget.geometry.setPositions([
		0, 0, 0,
		...p1.position.clone().sub(p0.position).toArray(),
	]);
	azimuth.centerToTarget.position.copy(p0.position);
	azimuth.centerToTarget.geometry.verticesNeedUpdate = true;
	azimuth.centerToTarget.geometry.computeBoundingSphere();
	azimuth.centerToTarget.computeLineDistances();
	azimuth.centerToTarget.material.resolution.set(width, height);

	// to target ground
	azimuth.centerToTargetground.geometry.setPositions([
		0, 0, 0,
		p1.position.x - p0.position.x,
		p1.position.y - p0.position.y,
		0,
	]);
	azimuth.centerToTargetground.position.copy(p0.position);
	azimuth.centerToTargetground.geometry.verticesNeedUpdate = true;
	azimuth.centerToTargetground.geometry.computeBoundingSphere();
	azimuth.centerToTargetground.computeLineDistances();
	azimuth.centerToTargetground.material.resolution.set(width, height);

	// to north
	azimuth.centerToNorth.geometry.setPositions([
		0, 0, 0,
		northPos.x - p0.position.x,
		northPos.y - p0.position.y,
		0,
	]);
	azimuth.centerToNorth.position.copy(p0.position);
	azimuth.centerToNorth.geometry.verticesNeedUpdate = true;
	azimuth.centerToNorth.geometry.computeBoundingSphere();
	azimuth.centerToNorth.computeLineDistances();
	azimuth.centerToNorth.material.resolution.set(width, height);

	// label
	const radians = Utils.computeAzimuth(p0.position, p1.position, viewer.getProjection());
	let degrees = THREE.Math.radToDeg(radians);
	if(degrees < 0){
		degrees = 360 + degrees;
	}
	const txtDegrees = `${degrees.toFixed(2)}°`;
	const labelDir = northPos.clone().add(p1.position).multiplyScalar(0.5).sub(p0.position);
	if(labelDir.length() > 0){
		labelDir.z = 0;
		labelDir.normalize();
		const labelVec = labelDir.clone().multiplyScalar(r);
		const labelPos = p0.position.clone().add(labelVec);
		azimuth.label.position.copy(labelPos);
	}
	azimuth.label.setText(txtDegrees);
	let distance = azimuth.label.position.distanceTo(camera.position);
	let pr = Utils.projectedRadius(1, camera, distance, width, height);
	let scale = (70 / pr);
	azimuth.label.scale.set(scale, scale, scale);
}

export class MeasuringTool extends EventDispatcher{
	constructor (viewer) {
		super();

		this.viewer = viewer;
		this.renderer = viewer.renderer;

		this.viewer.addEventListener('start_inserting_measurement', e => {
			this.viewer.dispatchEvent({
				type: 'cancel_insertions'
			});
		});

		this.showLabels = true;
        this.scene = new THREE.Scene();
		this.scene.name = 'scene_measurement';
		//this.light = new THREE.PointLight(0xffffff, 1.0);
		//this.scene.add(this.light);  
		this.viewer.inputHandler.registerInteractiveScene(this.scene);
		  
        
        //this.scene = viewer.overlay//
        
        
		this.onRemove = (e) => { e.measurement.dispose()/* this.scene.remove(e.measurement); */};
		this.onAdd = e => {this.scene.add(e.measurement);};

		for(let measurement of viewer.scene.measurements){
			this.onAdd({measurement: measurement});
		}
		 
        viewer.addEventListener('camera_changed',(e)=>{ 
            if(e.viewport == viewer.mainViewport ) this.update()
        })
        
        
		//viewer.addEventListener("update", this.update.bind(this));
		viewer.addEventListener("render.pass.perspective_overlay", this.render.bind(this));
		viewer.addEventListener("scene_changed", this.onSceneChange.bind(this));

		viewer.scene.addEventListener('measurement_added', this.onAdd);
		viewer.scene.addEventListener('measurement_removed', this.onRemove);
        
        viewer.addEventListener('resize',this.setSize.bind(this))
        
	}

	onSceneChange(e){
		if(e.oldScene){
			e.oldScene.removeEventListener('measurement_added', this.onAdd);
			e.oldScene.removeEventListener('measurement_removed', this.onRemove);
		}

		e.scene.addEventListener('measurement_added', this.onAdd);
		e.scene.addEventListener('measurement_removed', this.onRemove);
	}


    


    
    createMeasureFromData(data){//add
        const measure = new Measure(data);
        
        viewer.scene.addMeasurement(measure);
        
        if(measure.guideLine)measure.guideLine.visible = false
        return  measure       
    }
    
    
	update(){
        return;
        
        
        
        
		let camera = this.viewer.scene.getActiveCamera();
		let domElement = this.renderer.domElement;
		let measurements = this.viewer.scene.measurements;

	 
		// make size independant of distance
        let mainLabels = [], subLabels = [];
        
      
        
		for (let measure of measurements) {
			measure.lengthUnit = this.viewer.lengthUnit;
			measure.lengthUnitDisplay = this.viewer.lengthUnitDisplay;
			//measure.update();

			updateAzimuth(this.viewer, measure);

			 
            /*  [...measure.markers, ...measure.edgeLabels, measure.areaLabel].forEach(e=>{
                e && e.update() 
            }); */
             

			// labels
			/* let labels = measure.edgeLabels.concat(measure.angleLabels);
			for(let label of labels){ 
                label.update()
                if(label.elem.hasClass('sub')){
                    subLabels.push(label)
                }else{ 
                    mainLabels.push(label)
                }
			}

			// coordinate labels
			for (let j = 0; j < measure.coordinateLabels.length; j++) { 
				let label = measure.coordinateLabels[j]; 
                label.update() 
                mainLabels.push(label)
			} 
 

			if(measure.showArea){ // area label
				let label = measure.areaLabel; 
                label.update()
                mainLabels.push(label)
			} */
             
            

			/* if(measure.showCircle){ // radius label
				let label = measure.circleRadiusLabel;
				let distance = label.position.distanceTo(camera.position);
				let pr = Utils.projectedRadius(1, camera, distance, clientWidth, clientHeight);

				let scale = (70 / pr);
				label.scale.set(scale, scale, scale);
			} */ 
			if(!this.showLabels){ 
				const labels = [
					...measure.sphereLabels,  
					...measure.angleLabels,  
					measure.circleRadiusLabel,
				]; 
				for(const label of labels){
					label.visible = false;
				}
			}
		}
        //this.updateLabelZIndex([{labels:subLabels},{labels:mainLabels}])
        
	}
    setSize(e){ //e.resolution
        /* if(Measure.lineMats){
            for(var m in Measure.lineMats){
                Measure.lineMats[m].resolution.set(e.canvasWidth, e.canvasHeight);
            }  
        }  
        if(Measure.sphereMats){
            for(var s in Measure.sphereMats){
                Measure.sphereMats[s].uniforms.resolution.value.set(e.canvasWidth, e.canvasHeight);
            }
        }
        for (let measure of this.viewer.scene.measurements) { 
            measure.edgeLabels.concat(measure.areaLabel).forEach(label=>{ 
                label.sprite.material.uniforms.resolution.value.set(e.canvasWidth, e.canvasHeight);
            })
        } */
    }
    
    updateLabelZIndex(group){//[{labels:[]},{}] 顺序按照z-index低到高
        
        group.forEach((e,i)=>{
            e.base = group[i-1] ? group[i-1].base + group[i-1].labels.length : 0
         
            var labels = e.labels.sort((a,b)=>{
                return b.pos2d.z - a.pos2d.z
            }) 
            labels.forEach((label,index)=>{
                $(label.elem).css('z-index', e.base+index) 
            }) 
        }) 
        
    }
    
    
    
    
    editStateChange(e){
        //console.log("editStateChange" , e.state)
        let state = e.state
        if(!state){
            state = viewer.scene.measurements.some(e=>e.isEditing)
        }
        
        if(state){
            viewer.dispatchEvent({type:"measureMovePoint"})
        }else{
            viewer.dispatchEvent({type:"endMeasureMove"})
        }
        
        
        //this.editing = 
    }
    
    
    
	startInsertion (args = {}, callback, cancelFun) {
        
        
		let domElement = this.viewer.renderer.domElement;

		

		const pick = (defaul, alternative) => {
			if(defaul != null){
				return defaul;
			}else{
				return alternative;
			}
		};

		args.showDistances = (args.showDistances === null) ? true : args.showDistances;

		args.showArea = pick(args.showArea, false);
		args.showAngles = pick(args.showAngles, false);
		args.showCoordinates = pick(args.showCoordinates, false);
		args.showHeight = pick(args.showHeight, false);
		args.showCircle = pick(args.showCircle, false);
		args.showAzimuth = pick(args.showAzimuth, false);
		args.showEdges = pick(args.showEdges, true);
		args.closed = pick(args.closed, false);
		args.maxMarkers = pick(args.maxMarkers, Infinity);
        args.direction = args.direction//add
		args.type = args.type    /*  || 'Measurement'; */
        args.showGuideLine = pick(args.showGuideLine, false);  
        args.isRect = pick(args.isRect, false);
        
 
        let measure = new Measure(args);
        this.scene.add(measure);
        measure.isNew = true
        
        
		this.viewer.dispatchEvent({
			type: 'start_inserting_measurement',
			measure: measure
		});
         
        measure.addEventListener('editStateChange', this.editStateChange.bind(this))
        measure.editStateChange(true)
        
        let timer;

 

		let endDragFun = (e) => { 
            let length = measure.points.length
			if (e.button == THREE.MOUSE.LEFT || e.isTouch) { 
				if (length >= measure.maxMarkers) {
                    end({finish:true});
				}else{ 
                     
                    
                    
                    var marker = measure.addMarker({point:measure.points[length - 1].clone()})
                     
                    if(args.isRect && measure.markers.length == 3){//marker全可见
                        measure.addMarker({point:measure.points[0].clone()})
                        
                    }else{ 
                        measure.markers[length].visible = false
                        measure.edges[length].visible = false 
                    }
                    measure.edges[length-1].visible = true 
                    
                    measure.markers[length-1].visible = true;
                    
                    measure.editStateChange(true) //重新激活reticule状态
                    measure.continueDrag(marker, e)    
                } 
				 
			} else if (e.button === THREE.MOUSE.RIGHT ) { //触屏怎么取消？
				if(e.pressDistance < Potree.config.clickMaxDragDis )end(e);//非拖拽的话
                else measure.continueDrag(null, e)     
                 
			}
		};

		let end = (e={}) => {//确定、结束
            if(!measure.isNew)return
            if(args.minMarkers != void 0){
                if(!e.finish && measure.markers.length<=args.minMarkers){//右键  当个数不够时取消
                    //this.viewer.scene.removeMeasurement(measure)
                    //cancelFun && cancelFun()
                    //重新开始画
                    measure.markers[0].removeEventListener('mousedown',end)
                    measure.reDraw()
                    
                    
                    this.viewer.addEventListener('global_click', click, 10)
                   
                    measure.editStateChange(true)
                    return
                    
                    /* if(!Potree.settings.isOfficial) this.viewer.scene.removeMeasurement(measure)
                    else if(e.drag){ //正式版本不允许右键退出, 继续
                        continueDrag(e.drag.object)
                        measure.editStateChange(true)
                        return
                    } */
                } 
            }
            if (!e.finish && measure.markers.length > 3) {
				measure.removeMarker(measure.points.length - 1); 
                measure.markers[0].removeEventListener('mouseover', mouseover);
                measure.markers[0].removeEventListener('mouseleave', mouseleave);
                measure.markers[0].removeEventListener('mousedown',Exit) 
			}
            measure.isNew = false
            let length = measure.points.length 
            if(length){
                measure.markers[length-1].visible = true; 
                measure.edges[length-1].visible = true   
                
                measure.addHoverEvent()
            }
            clearTimeout(timer) 
			this.viewer.removeEventListener('cancel_insertions', Exit);
            //pressExit && this.viewer.inputHandler.removeEventListener('keydown', pressExit);
            this.viewer.removeEventListener('global_click', click)
            this.viewer.removeEventListener('global_mousemove', ifAtWrongPlace) 
            viewer.dispatchEvent({
                type : "CursorChange", action : "remove",  name:"polygon_AtWrongPlace"
            });
            
           
            e.remove || callback && callback()  
            /* this.viewer.dispatchEvent({
                type: 'finish_inserting_measurement',
                measure: measure
            }); */
		};

        
        let Exit = (e)=>{//强制退出
        
            if(e.measure && e.measure != measure){
                return;//若指定了退出的measure但和该measure不一致，就返回
            }
            console.log('Exit: ' +  measure.id)
            if(e.remove){
                viewer.scene.removeMeasurement(measure)  
            }
            if(this.viewer.inputHandler.drag && !e.remove){//还未触发drop的话
                this.viewer.inputHandler.drag.object.dispatchEvent({
                    type: 'drop',
                    drag: this.viewer.inputHandler.drag, 
                    viewer: this.viewer,
                    pressDistance:0,
                    button : THREE.MOUSE.RIGHT  
                });
                
            }else{
                end({finish:true, remove:e.remove})  //未结束时添加新的measure时会触发
            }
            this.viewer.inputHandler.drag = null 
            measure.editStateChange(false)
        }
        this.viewer.addEventListener('cancel_insertions', Exit);
        
        /*let pressExit
         if(!Potree.settings.isOfficial){
            pressExit = (e)=>{ 
                if(e.keyCode == 27){//Esc
                    //Exit()
                    //怎么模拟右键？？？//现由前端发出
                }
            } 
            this.viewer.inputHandler.addEventListener('keydown', pressExit) 
        } */ 
		let mouseover = (e) => { 
            measure.setMarkerSelected(e.object, true, 'single'); 
              
        };
        let mouseleave = (e) => { 
            measure.setMarkerSelected(e.object, false, 'single'); 
        }  
          
                 
        let click = (e)=>{//一旦点击就立刻增加两marker  
        
            if(ifAtWrongPlace(e))return  
            
             
            
            if(e.button === THREE.MOUSE.RIGHT)return 
            
            console.log('measure clicked33', !!e.intersectPoint)
             
            var I = e.intersectPoint && (e.intersectPoint.orthoIntersect || e.intersectPoint.location)
            if(!I)return
            
            
            
             
            var marker = measure.addMarker({point:new THREE.Vector3(0, 0, 0)})
            this.viewer.inputHandler.startDragging(marker , {endDragFun, notPressMouse:true} ); //notPressMouse代表不是通过按下鼠标来拖拽
            e.drag = this.viewer.inputHandler.drag
            e.drag.endDragFun = endDragFun
            e.drag.notPressMouse = true
            
            //if(!measure.dragMarker(e) || !measure.dropMarker(e))return
             
            measure.dragMarker(e) 
            measure.dropMarker(e)
            
            measure.markers[1].visible = false
            measure.edges[1].visible = false
            
            if(measure.maxMarkers>2 && !measure.isRect){ 
                measure.markers[0].addEventListener('mouseover', mouseover);
                measure.markers[0].addEventListener('mouseleave', mouseleave);
                measure.markers[0].addEventListener('mousedown',Exit) //点击到第一个marker就结束 
            }
            
            
            this.viewer.removeEventListener('global_click', click)///* global_drop */
            
            
            
            //console.log('measure clicked')
            
            
            return {stopContinue:true}//防止继续执行别的侦听，如flytopano
        }
        
        //点击第n下拥有n+1个marker, n>0
        
        
        this.viewer.addEventListener('global_click', click, 10)//add importance:10
            
        let ifAtWrongPlace = (e)=>{
            if(measure.unableDragAtMap && e.hoverViewport.name == 'mapViewport' ){ 
                if(e.isTouch){
                    viewer.emit('reticule_forbit', true)
                }else{
                    viewer.dispatchEvent({
                        type : "CursorChange", action : "add",  name:"polygon_AtWrongPlace"
                    });
                } 
                return true
            }else{ 
                if(e.isTouch){
                    viewer.emit('reticule_forbit', false)
                }else{
                    viewer.dispatchEvent({
                        type : "CursorChange", action : "remove",  name:"polygon_AtWrongPlace"
                    });
                }
            }
        }
        
        
        
        if(measure.unableDragAtMap){ 
            this.viewer.addEventListener('global_mousemove', ifAtWrongPlace) 
        }
        
        
		this.viewer.scene.addMeasurement(measure);
        
		return measure;
	}
	
    
	render(o={}){
        viewer.setCameraLayers(o.camera, ['measure'])
		this.viewer.renderer.render(this.scene, o.camera/* this.viewer.scene.getActiveCamera() */);
	}
};