-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
87 lines (72 loc) · 3.56 KB
/
index.html
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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=PT+Serif&family=Roboto+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./wwwroot/dist/libmodule.css">
<title></title>
</head>
<body>
<div id="cursor" class="cursor-default"></div>
<h1 class="heading">OIS</h1>
<div class="container mx-auto grid">
<div id="playground">
<div class="sidebar grid md:grid-cols-2 xl:gap-10 xl:px-10 xl:py-10">
<p class="content">x: <span id="x">0</span></p>
<p class="content">y: <span id="y">0</span></p>
</div>
</div>
</div>
<script type="module">
import create_core_module from"./wwwroot/dist/module_ois_wasm_web_async.js";
function InputDeviceManager(module) {
this._mod = module;
this.addr = module._createInputDeviceManager();
this.registerMouseDevice();
}
InputDeviceManager.prototype = Object.create(Object.prototype);
InputDeviceManager.prototype.constructor = InputDeviceManager;
InputDeviceManager.prototype["registerMouseDevice"] = InputDeviceManager.prototype.registerMouseDevice = /** @suppress {undefinedVars, duplicate} */function() {
const self = this.addr;
this._mod._registerMouseDevice(self);
}
window.addEventListener("DOMContentLoaded", (event) => {
let instance = create_core_module({
locateFile: function(path) {
const baseURL = window.location.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf( "/" ));
return baseURL + '/wwwroot/dist/' + path;
}
});
instance.then((module) => {
let inputDeviceManager = new InputDeviceManager(module);
let mouseDevice = module._getMouseDevice(inputDeviceManager.addr);
const canvasElmName = "playground";
module._setMouseCanvasId(mouseDevice, (function(str) {
var lengthBytes = module.lengthBytesUTF8(str) + 1;
var stringOnWasmHeap = module._malloc(lengthBytes);
module.stringToUTF8(str, stringOnWasmHeap, lengthBytes);
return stringOnWasmHeap;
})("#" + canvasElmName));
let canvasElm = document.getElementById(canvasElmName);
module._setMouseBoundingBox(mouseDevice, canvasElm.clientWidth, canvasElm.clientHeight);
module._registerMouseEventHandlers(mouseDevice);
module._onMotionCallback(mouseDevice, module.addFunction(function(x, y) {
let cursorHalfSize = 8;
let cursorElm = document.getElementById("cursor");
cursorElm.style.transform = `translate(${canvasElm.offsetLeft + x - cursorHalfSize}px, ${canvasElm.offsetTop - document.documentElement.scrollTop + y - cursorHalfSize}px)`
cursorElm.style.backgroundColor = "var(--body-bg)"
let xElm = document.getElementById("x");
let yElm = document.getElementById("y");
xElm.innerHTML = x;
yElm.innerHTML = y;
}, "vii"));
// module._unregisterMouseEventHandlers(mouseDevice);
});
});
</script>
</body>
</html>