Add proper button function

docs/frontend.js

@@ -76,11 +76,7 @@ function js_gui(input) {
     });
     return commands;
 }
-function paint_gui(canvas, mouse_pos) {
-    var input = {
-        mouse_pos: mouse_pos,
-        screen_size: { x: canvas.width, y: canvas.height }
-    };
+function paint_gui(canvas, input) {
     var commands = rust_gui(input);
     for (var _i = 0, commands_1 = commands; _i < commands_1.length; _i++) {
         var cmd = commands_1[_i];
@@ -88,6 +84,15 @@ function paint_gui(canvas, mouse_pos) {
     }
 }
 // ----------------------------------------------------------------------------
+var g_mouse_pos = { x: -1000.0, y: -1000.0 };
+var g_mouse_down = false;
+function get_input(canvas) {
+    return {
+        mouse_down: g_mouse_down,
+        mouse_pos: g_mouse_pos,
+        screen_size: { x: canvas.width, y: canvas.height }
+    };
+}
 function mouse_pos_from_event(canvas, evt) {
     var rect = canvas.getBoundingClientRect();
     return {
@@ -98,12 +103,22 @@ function mouse_pos_from_event(canvas, evt) {
 function initialize() {
     var canvas = document.getElementById("canvas");
     canvas.addEventListener("mousemove", function (evt) {
-        var mouse_pos = mouse_pos_from_event(canvas, evt);
-        paint_gui(canvas, mouse_pos);
+        g_mouse_pos = mouse_pos_from_event(canvas, evt);
+        paint_gui(canvas, get_input(canvas));
+    }, false);
+    canvas.addEventListener("mouseleave", function (evt) {
+        g_mouse_pos = { x: -1000.0, y: -1000.0 };
+        paint_gui(canvas, get_input(canvas));
     }, false);
     canvas.addEventListener("mousedown", function (evt) {
-        var mouse_pos = mouse_pos_from_event(canvas, evt);
-        paint_gui(canvas, mouse_pos);
+        g_mouse_pos = mouse_pos_from_event(canvas, evt);
+        g_mouse_down = true;
+        paint_gui(canvas, get_input(canvas));
     }, false);
-    paint_gui(canvas, { x: 0, y: 0 });
+    canvas.addEventListener("mouseup", function (evt) {
+        g_mouse_pos = mouse_pos_from_event(canvas, evt);
+        g_mouse_down = false;
+        paint_gui(canvas, get_input(canvas));
+    }, false);
+    paint_gui(canvas, get_input(canvas));
 }

docs/frontend.ts

@@ -104,10 +104,16 @@ function paintCommand(canvas, cmd: PaintCmd) {
 
 // ----------------------------------------------------------------------------
 
-interface Input {
+/// What the integration gives to the gui.
+interface RawInput {
+  /// Is the button currently down?
+  mouse_down: boolean;
+
+  /// Current position of the mouse in points.
   mouse_pos: Vec2;
+
+  /// Size of the screen in points.
   screen_size: Vec2;
-  // TODO: mouse down etc
 }
 
 // ----------------------------------------------------------------------------
@@ -127,13 +133,13 @@ wasm_bindgen("./emgui_bg.wasm")
   .then(wasm_loaded)
   .catch(console.error);
 
-function rust_gui(input: Input): PaintCmd[] {
+function rust_gui(input: RawInput): PaintCmd[] {
   return JSON.parse(wasm_bindgen.show_gui(JSON.stringify(input)));
 }
 
 // ----------------------------------------------------------------------------
 
-function js_gui(input: Input): PaintCmd[] {
+function js_gui(input: RawInput): PaintCmd[] {
   const commands = [];
 
   commands.push({
@@ -152,11 +158,7 @@ function js_gui(input: Input): PaintCmd[] {
   return commands;
 }
 
-function paint_gui(canvas, mouse_pos) {
-  const input = {
-    mouse_pos,
-    screen_size: { x: canvas.width, y: canvas.height },
-  };
+function paint_gui(canvas, input: RawInput) {
   const commands = rust_gui(input);
 
   for (const cmd of commands) {
@@ -166,6 +168,17 @@ function paint_gui(canvas, mouse_pos) {
 
 // ----------------------------------------------------------------------------
 
+let g_mouse_pos = { x: -1000.0, y: -1000.0 };
+let g_mouse_down = false;
+
+function get_input(canvas): RawInput {
+  return {
+    mouse_down: g_mouse_down,
+    mouse_pos: g_mouse_pos,
+    screen_size: { x: canvas.width, y: canvas.height },
+  };
+}
+
 function mouse_pos_from_event(canvas, evt): Vec2 {
   const rect = canvas.getBoundingClientRect();
   return {
@@ -180,8 +193,17 @@ function initialize() {
   canvas.addEventListener(
     "mousemove",
     (evt) => {
-      const mouse_pos = mouse_pos_from_event(canvas, evt);
-      paint_gui(canvas, mouse_pos);
+      g_mouse_pos = mouse_pos_from_event(canvas, evt);
+      paint_gui(canvas, get_input(canvas));
+    },
+    false,
+  );
+
+  canvas.addEventListener(
+    "mouseleave",
+    (evt) => {
+      g_mouse_pos = { x: -1000.0, y: -1000.0 };
+      paint_gui(canvas, get_input(canvas));
     },
     false,
   );
@@ -189,11 +211,22 @@ function initialize() {
   canvas.addEventListener(
     "mousedown",
     (evt) => {
-      const mouse_pos = mouse_pos_from_event(canvas, evt);
-      paint_gui(canvas, mouse_pos);
+      g_mouse_pos = mouse_pos_from_event(canvas, evt);
+      g_mouse_down = true;
+      paint_gui(canvas, get_input(canvas));
     },
     false,
   );
 
-  paint_gui(canvas, { x: 0, y: 0 });
+  canvas.addEventListener(
+    "mouseup",
+    (evt) => {
+      g_mouse_pos = mouse_pos_from_event(canvas, evt);
+      g_mouse_down = false;
+      paint_gui(canvas, get_input(canvas));
+    },
+    false,
+  );
+
+  paint_gui(canvas, get_input(canvas));
 }

docs/index.html

@@ -41,4 +41,3 @@
     <canvas id="canvas" width="1024" height="768"></canvas>
   </body>
 </html>
-