whitebophir/client-data/tools/pointer/pointer.js at 17516e040d8a2ceb51324f58ba8e3b986b7aedd3 · lovasoa/whitebophir · 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
const uid = Tools.generateUID("f"); // f for finger
let lastTime = performance.now();

const pointer = document.createElement("div");
pointer.classList.add("pointer");
pointer.innerHTML = "👆";

Tools.board.appendChild(pointer);

function movePointer(x, y) {
    pointer.style.left = `${x * Tools.scale}px`;
    pointer.style.top = `${y * Tools.scale}px`;

    // TODO: Could find a better solution for JIP
    if (!pointer.classList.contains("visible")) {
        showPointer(true, false);
    }
}

function move(x, y) {
    movePointer(x, y);

    if (performance.now() - lastTime > 70) {
        Tools.send({
            id: uid,
            type: "update",
            action: "move",
            x,
            y
        }, "Pointer");
        lastTime = performance.now();
    }
}

function draw(msg) {
    switch (msg.action) {
        case "move":
            movePointer(msg.x, msg.y);
            break;
        case "show":
            showPointer(true, false);
            break;
        case "hide":
            showPointer(false, false);
            break;
        case "highlight":
            highlightPointer(true, false);
            break;
        case "noHighlight":
            highlightPointer(false, false);
            break;
    }
}

function highlightPointer(highlight, self) {
    pointer.classList.toggle("highlight", highlight);

    if (self) {
        Tools.send({
            id: uid,
            type: "update",
            action: highlight ? "highlight" : "noHighlight"
        }, "Pointer");
    }
}

function showPointer(show, self) {
    pointer.classList.toggle("visible", show);

    if (self) {
        Tools.send({
            id: uid,
            type: "update",
            action: show ? "show" : "hide"
        }, "Pointer");
    }
}

Tools.add({
    "name": "Pointer",
    "icon": "👆",
    "shortcut": "f",
    "listeners": {
        "press": () => highlightPointer(true, true),
        "move": move,
        "release": () => highlightPointer(false, true)
    },
    "draw": draw,
    "onstart": () => showPointer(true, true),
    "onquit": () => showPointer(false, true),
    "mouseCursor": "none",
    "stylesheet": "tools/pointer/pointer.css"
});