old/DebugTextRenderer.js at master · vfasteng/old · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import * as _ from './JSUtils';

export default class DebugTextRenderer {

    constructor() {

        this._drawCount = 0;
        this._divRecycleBuffer = [];

        this._lastDivMap = {};
        this._divMap = {};

        this.visible = false;

    }


    update() {

        // For everything we drew last frame.
        for(var key in this._lastDivMap) {

            // Did we not draw it this frame.
            if(!this._divMap[key]) {

                // Make it disapear because its no longer in frame.
                this._recycleDiv(this._lastDivMap[key])

            }

        }

        this._lastDivMap = this._divMap;
        this._divMap = {};
    }

    _recycleDiv(div) {

        div.innerHTML = "";
        div.style.hidden = true;
        this._divRecycleBuffer.push(div);

    }

    _freshDiv() {

        if(this._divRecycleBuffer.length) {
            const div =  this._divRecycleBuffer.pop();
            div.style.hidden = false;
            return div;
        }

        var div = document.createElement('div');
        div.style.position = 'absolute';
        div.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
        div.style.color = "rgba(255, 255, 255, 1)";
        div.style.maxWidth = 130 + 'px';
        div.style.pointerEvents = "none"
        div.style.fontSize = "9pt";
        div.style.fontWeight = "bold";
        document.body.appendChild(div);

        return div;
    }

    _draw(text, position, id) {

        // Did we already draw this last frame?
        let div = this._lastDivMap[id];

        if(!div) {
            // No we didn't, create a new div.
            div = this._freshDiv();
        }

        // Update the map for this frame.
        this._divMap[id] = div;

        const html = "<span>" + text.split(/\n/).join("</span><br/><span>")

        div.innerHTML = html;

        div.style.left = position.x + 'px';
        div.style.top = position.y + 'px';
    }

    toggleVisible() {
        this.visible = !this.visible;
    }

    drawObjInfo(obj) {

        if(this.visible) {

            let text =
            `   ${obj.name}
                x: ${obj.position.x.toFixed(4)}
                y: ${obj.position.y.toFixed(4)}
                z: ${obj.position.z.toFixed(4)}
            `;

            if(obj.userData.debugInfo) {
                text += obj.userData.debugInfo;
            }

            // @ts-ignore
            const pos = world.worldToScreen(obj);
            this._draw(text, pos, obj.id);

        }

    }


}