Source: utilities/drawDimensionsLine.js

import { Project } from '../project.js'
//import { View } from '../view/view.js'

import {
    Vector3,
	Group,
	PointsMaterial,
	Points,
	BufferGeometry,
	CanvasTexture,
	LineBasicMaterial,
	Line,
	Line3

} from '../../node_modules/three/build/three.module.js';


import { CSS2DObject } from '../../node_modules/three/examples/jsm/renderers/CSS2DRenderer.js';
import { CSS3DObject } from '../../node_modules/three/examples/jsm/renderers/CSS3DRenderer.js';

import { Marker } from '../view/marker.js';


/**
 * @param {Group} configuration
 * @param {Array} points -- array with vectors
 * @param {Number} offset 
 * @param {String} side 
 */
  

//console.log( dimLayer )

function drawDimensionsLine( configuration, points, offset, side ){

	const dimLayer = Project.layerMap.dimLines

	//SET OFFSET
	switch(side){
		case "left": 
			var offsetVector = new Vector3( -offset, -0.01, 0 )
			break;
		case "back": 
			var offsetVector = new Vector3( 0, -0.01, -offset )
			break;
		case "right": 
			var offsetVector = new Vector3( offset, -0.01, 0 )
			break;
		case "front": 
			var offsetVector = new Vector3( 0, -0.01, offset )
			break;
		case "height": 
			var offsetVector = new Vector3( -offset, -0.01, -offset )
			break;
	}

	//set points from objects
	var geoPoints = []
	//geoPoints.push( points[0].start )

	for( var i=0; i< points.length; i++ ){
		geoPoints.push( points[i].start )
		geoPoints.push( points[i].end )
	}


	var dimGroup = new Group();
	dimGroup.name = "dimLine"
	//dimGroup.layers.set( dimLayer )	//<- layers per groep werkt niet! Werkt alleen als je het direct op het object zet dat je wil uitzetten!


	var geometry = new BufferGeometry().setFromPoints( geoPoints );

	var size = 0.03;

	var canvas = document.createElement( 'canvas' );
		canvas.width = 128;
		canvas.height = 128;

	var context = canvas.getContext( '2d' );
		context.arc( 64, 64, 64, 0, 2 * Math.PI );
		context.fillStyle = "#000000";
		context.fill();

	var texture = new CanvasTexture( canvas );

	var pointMaterial = new PointsMaterial( { 
		size: size, 
		map: texture, 
		transparent: false, 
		alphaTest: 0.5 
	} );

	var dimPoints = new Points( geometry, pointMaterial ) ;

	//LINES
	var material = new LineBasicMaterial({ 
		color: 0x000000,
		linewidth: 1, 
	});
	var dimLine = new Line( geometry, material );
	

	dimLine.layers.set( dimLayer )	
	dimPoints.layers.set( dimLayer )

	dimGroup.add( dimLine );
	dimGroup.add( dimPoints );
	//dimGroup.visible = false;
	

	//MARKERS & POSITIONS

	const center = new Vector3();
	
	for( var i=0; i< points.length; i++ ){
		var line = new Line3( points[i].start, points[i].end )

		//CSS DIV
		var div = document.createElement( 'div' );
		div.className = 'label';
		div.textContent = Math.round( line.distance() * 100 ) + " cm"; // hiernog de waarde van de lengte invullen
		div.style.marginTop = '-1em';

		//MARKERS
		var label = new CSS2DObject( div );
		label.name = "dimLabel"
		label.visible = false;
		label.position.copy(  line.getCenter( center) ) 

		//var markerPosition = line.getCenter( center)
		//const marker = new Marker({ position: markerPosition, HTMLElement:div, view: view});

		label.layers.set( dimLayer ) //<- werkt ook niet met layers!
		
		dimGroup.add( label )
		//dimGroup.add( marker )
		configuration.add( dimGroup )
	
	}

	dimGroup.position.add( offsetVector ) // addthe dimensions to the 
	
	//return dimGroup;

}

function updateLabels( renderer, camera, objects  ) {


	for ( var i = 0; i < objects.length; i++){

		var labels = []

		//for each object check foro labels
		objects[i].traverse( ( child ) =>{
			if( child instanceof CSS2DObject ){
				labels.push( child )
			}
		})


		for ( var j = 0; j < labels.length; j++){
			const meshDistance = camera.position.distanceTo( objects[i].position );
			const labelDistance = camera.position.distanceTo( labels[j].position );
			let labelBehindObject = labelDistance > meshDistance;
			labels[j].element.style.opacity = labelBehindObject ? 0.25 : 1;
		}
	}

}

export{ drawDimensionsLine, updateLabels }