-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
78 lines (63 loc) · 2.17 KB
/
index.js
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
import("./pkg")
.then((wasm) => {
const canvas = document.getElementById("nodes");
const ctx_nodes = canvas.getContext("2d");
const nodes_width = canvas.width;
const nodes_height = canvas.height;
wasm.init();
let dragging = false;
let selectedNode = undefined;
let initialMouseX, initialMouseY;
canvas.addEventListener("mousedown", (event) => {
console.log("mousedown");
const elemLeft = canvas.offsetLeft + canvas.clientLeft;
const elemTop = canvas.offsetTop + canvas.clientTop;
const x = event.pageX - elemLeft;
const y = event.pageY - elemTop;
wasm.canvas_click(ctx_nodes, x, y);
selectedNode = wasm.canvas_click_active();
if (selectedNode != undefined) {
dragging = true;
initialMouseX = x;
initialMouseY = y;
}
});
canvas.addEventListener("mousemove", (event) => {
console.log("mousemove");
if (dragging && selectedNode != undefined) {
const mouseX = event.clientX - canvas.getBoundingClientRect().left;
const mouseY = event.clientY - canvas.getBoundingClientRect().top;
console.log({
mouseX,
mouseY,
deltaX: mouseX - initialMouseX,
deltaY: mouseY - initialMouseY,
});
wasm.move_node(
selectedNode,
BigInt(mouseX - initialMouseX),
BigInt(mouseY - initialMouseY)
);
wasm.nodes(ctx_nodes, nodes_width, nodes_height);
initialMouseX = mouseX;
initialMouseY = mouseY;
}
});
canvas.addEventListener("mouseup", (event) => {
console.log("mouseup");
if (dragging && selectedNode != undefined) {
const mouseX = event.clientX - canvas.getBoundingClientRect().left;
const mouseY = event.clientY - canvas.getBoundingClientRect().top;
wasm.move_node(
selectedNode,
BigInt(mouseX - initialMouseX),
BigInt(mouseY - initialMouseY)
);
wasm.nodes(ctx_nodes, nodes_width, nodes_height);
}
dragging = false;
selectedNode = undefined;
});
wasm.nodes(ctx_nodes, nodes_width, nodes_height);
})
.catch(console.error);