last known pen pressure is now used on mouseleave

Author: Bios-Marcel

internal/frontend/lobby.js

@@ -1468,6 +1468,8 @@ function onMouseDown(event) {
 }
 
 function pressureToLineWidth(event) {
+    //event.button === 0 could be wrong, as it can also be the uninitialized state.
+    //Therefore we use event.buttons, which works differently.
     if (event.buttons !== 1 || event.pressure === 0 || event.pointerType === "touch") {
         return 0;
     }
@@ -1477,11 +1479,32 @@ function pressureToLineWidth(event) {
     return Math.ceil(event.pressure * 32);
 }
 
+// Previously the onMouseMove handled leave, but we do this separately now for
+// proper pen support. Otherwise leave leads to a loss of the pen pressure, as
+// we are handling that with mouseleave instead of pointerleave. pointerlave
+// is not triggered until the pen is let go.
+function onMouseLeave(event) {
+    if (allowDrawing
+        && lastLineWidth
+        && localTool !== fillBucket) {
+
+        // calculate the offset coordinates based on client mouse position and drawing board client origin
+        const clientRect = drawingBoard.getBoundingClientRect();
+        const offsetX = (event.clientX - clientRect.left);
+        const offsetY = (event.clientY - clientRect.top);
+
+        // drawing functions must check for context boundaries
+        drawLineAndSendEvent(context, lastX, lastY, offsetX, offsetY, lastLineWidth);
+        lastX = offsetX;
+        lastY = offsetY;
+    }
+}
+
+let lastLineWidth;
 function onMouseMove(event) {
     const pressureLineWidth = pressureToLineWidth(event);
+    lastLineWidth = pressureLineWidth;
 
-    //event.button === 0 could be wrong, as it can also be the uninitialized state.
-    //Therefore we use event.buttons, which works differently.
     if (allowDrawing
         && pressureLineWidth
         && localTool !== fillBucket) {
@@ -1513,7 +1536,7 @@ function onMouseClick(event) {
 
 drawingBoard.addEventListener('pointerdown', onMouseDown)
 drawingBoard.addEventListener('pointermove', onMouseMove);
-drawingBoard.addEventListener('mouseleave', onMouseMove);
+drawingBoard.addEventListener('mouseleave', onMouseLeave);
 drawingBoard.addEventListener('click', onMouseClick);
 
 function onGlobalMouseMove(event) {