Source: view/dimension_frame.js

import { Vector2, Vector3 } from '../../node_modules/three/build/three.module.js';
import { v4 as uuid } from '../../node_modules/uuid/dist/esm-browser/index.js';
import { ucFirst } from '../lib.js';
import { View } from './view.js';

/**
 * @class Marker
 * @event Marker#occlusionchange
 */
class DimensionFrame {

    constructor(configurator, view, lines = ['front', 'left']) {

        this.configurator = configurator;
        this.view = view;
        this.id = uuid();

        this.lines = lines;
        this.elems = {};

        for (let line of lines) {

            this.elems[line] = {};

            const elem = document.createElement('div');
            const innerLine = document.createElement('div');
            const innerLabel = document.createElement('div');

            elem.appendChild(innerLine);
            elem.appendChild(innerLabel);

            elem.id = `dimension-line-${this.id.substr(0, 5)}-${line}`;

            innerLine.classList.add('dimension-line');
            innerLine.classList.add(line);
            
            innerLabel.classList.add('dimension-label');
            innerLabel.classList.add(line);

            elem.style.position = 'absolute';

            elem.style.left = '0px';
            elem.style.top = '0px';
            elem.style.transformOrigin = 'top left';
            elem.style.zIndex = 10;

            this.elems[line] = elem;

            view.domElement.appendChild(elem);
        }

        this.onSceneUpdate();
    }

    onSceneUpdate() {
        this.configDims = this.configurator.configuration.dimensions;

        this.linePoints = this.lines.reduce(
            (obj, line) => {

                obj[line] = {
                    start: this.configDims[`dim${ucFirst(line)}`][0].start.clone(),
                    end: this.configDims[`dim${ucFirst(line)}`][0].end.clone()
                };

                console.log(line, obj[line])

                return obj;
            },
            {}
        );
    }


    update() {
        for (let line of this.lines) {
            // const startPos = this.view.project(this.configDims.dimFront[0].start.clone());
            // const endPos = this.view.project(this.configDims.dimFront[0].end.clone());

            const startPos = this.view.project(this.linePoints[line].start.clone());
            const endPos = this.view.project(this.linePoints[line].end.clone());

            const vectorStart = new Vector2(startPos.x, startPos.y);
            const vectorEnd = new Vector2(endPos.x, endPos.y);

            const vectorDiff = new Vector2().subVectors(vectorEnd, vectorStart);

            const angle = this.getAngle(vectorDiff.x, vectorDiff.y);

            this.elems[line].style.width = vectorDiff.length() + 'px';

            this.elems[line].style.transform = 'translate3d(' + startPos.x + 'px,' + startPos.y + 'px,0px) rotate(' + angle + 'deg)';
        }
    }

    getAngle = function (x, y) {
        var angle = Math.atan2(y, x);
        var degrees = 180 * angle / Math.PI;
        return (360 + degrees) % 360;
    }
}

export { DimensionFrame };