threejs-viewer-29

class SensorManager {
    constructor(viewer) {
        this.viewer = viewer;
    }

    guid(format = 'xxxxxxxxxx') {
        let d = new Date().getTime();
        return format.replace(
             /[xy]/g,
             function (c) {
                 let r = (d + Math.random() * 16) % 16 | 0;
                 d = Math.floor(d / 16);
                 return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
             });
    }

    getModifiedWorldBoundingBox(objectId) {
        const mesh = this.viewer.scene.getObjectById(objectId);
        if (!mesh.geometry.boundingBox)
            mesh.geometry.computeBoundingBox();

        return mesh.geometry.boundingBox.clone().applyMatrix4(mesh.matrixWorld);
    }

    async addSensorAsync(objectId) {
         const data = { objectId, code: this.guid() };
        //fetch POST sensors
        this.drawSensorMarkup(data);
    }

    async removeSensorAsync(objectId) {
        //fetch DELETE sensors
        this.removeSensorMarkup(objectId);
    }

    async showAllMarkups() {
        this.clearAllMarkups();
       //fetch GET sensors
        for (let sensor of sensors) {
            this.drawSensorMarkup(sensor);
        }
    }

    removeSensorMarkup(objectId) {
        const markup = document.querySelector(`label.markup[data-objectId="${objectId}"]`);
        if (!markup) return;
        this.viewer.container.removeChild(markup);
    }


    clearAllMarkups() {
        const markups = document.querySelectorAll(`#${this.viewer.container.id} label.markup.update`);

        for (let markup of markups)
            this.viewer.container.removeChild(markup);
    }

    drawSensorMarkup(data) {
        if (!data || !data.objectId) return;
        const markup = document.createElement('label');
        let guid = data.code || this.guid();
        data.code = guid;
        data.label = 'Nan';
        console.log('Markup created:', data);

        markup.id = `sensor-markup-${guid}`;
        markup.classList.add('markup', 'update');
        markup.setAttribute('data-code', guid);
        markup.setAttribute('data-dbId', data.dbId);
        markup.setAttribute('data-objectId', data.objectId);
        markup.style.display = 'block';
        this.viewer.container.appendChild(markup);
        const markupContent = document.createElement('span');
        markupContent.classList.add('temperatureBorder', 'temperatureOk', 'fas', 'fa-thermometer-empty');
        markupContent.innerHTML = data.label;//'450°C';
        markup.appendChild(markupContent);
    }


    calibrateSensorMakeups() {
        const markups = document.querySelectorAll(`#${this.viewer.container.id} label.markup.update`);

        for (let markup of markups) {
            const objectId = parseInt(markup.getAttribute('data-objectId'));
            const bounds = this.getModifiedWorldBoundingBox(objectId);
            const pos = new THREE.Vector3();
            bounds.getCenter(pos);

           const markupPos = this.viewer.worldToClient(pos);

           markup.style.left = `${Math.floor(markupPos.x - markup.offsetWidth / 2)}px`;
           markup.style.top = `${Math.floor(markupPos.y - markup.offsetHeight / 2)}px`;
        }
    }
}