Fixed mouse leave event handling

src/renderer/main/MiddlePanelContainer.svelte

@@ -36,16 +36,27 @@
     const stickyRect = stickyContainer.getBoundingClientRect();
     const threshold = -15;
 
-    showFixedStickyContainer = !(
-      stickyRect.bottom <
-      contRect.bottom + threshold
-    );
+    showFixedStickyContainer =
+      stickyRect.bottom >= contRect.bottom + threshold ||
+      stickyRect.top <= contRect.top - threshold ||
+      stickyRect.left <= contRect.left - threshold ||
+      stickyRect.right >= contRect.right + threshold;
   }
 
   onMount(() => {
     window.addEventListener("resize", handleResize, true);
   });
 
+  function handleGridLayoutShift(vector) {
+    if (vector.x === 0 && vector.y === 0) {
+      return;
+    }
+
+    handleResize();
+  }
+
+  $: handleGridLayoutShift($appSettings.gridLayoutShift);
+
   let showModuleHangingDialog = false;
   let moduleHangingTimeout = undefined;
 

src/renderer/main/panels/configuration/components/ControlSurface.svelte

@@ -26,42 +26,58 @@
 
     switch (e.type) {
       case "keydown": {
-        trackMouse = true;
+        handleKeyDown(e);
         break;
       }
       case "keyup": {
-        trackMouse = false;
+        handleKeyUp(e);
         break;
       }
     }
   }
 
+  function handleKeyDown(e) {
+    trackMouse = true;
+  }
+
+  function handleKeyUp(e) {
+    trackMouse = false;
+  }
+
   function handleMouseEvent(e) {
     if (e.button !== 0) {
       return;
     }
 
     switch (e.type) {
       case "mousedown": {
-        if (!trackMouse) {
-          return;
-        }
-        startPoint = { x: e.screenX, y: e.screenY };
-        dragMouse = true;
-        const current = get(appSettings).gridLayoutShift;
-        if (current.x === 0 && current.y === 0) {
-          previousVector = current;
-        }
+        handleMouseDown(e);
         break;
       }
       case "mouseup": {
-        dragMouse = false;
-        previousVector = get(appSettings).gridLayoutShift;
+        handleMouseUp(e);
         break;
       }
     }
   }
 
+  function handleMouseDown(e) {
+    if (!trackMouse) {
+      return;
+    }
+    startPoint = { x: e.screenX, y: e.screenY };
+    dragMouse = true;
+    const current = get(appSettings).gridLayoutShift;
+    if (current.x === 0 && current.y === 0) {
+      previousVector = current;
+    }
+  }
+
+  function handleMouseUp(e) {
+    dragMouse = false;
+    previousVector = get(appSettings).gridLayoutShift;
+  }
+
   function handleMouseMove(e) {
     if (!dragMouse) {
       return;
@@ -101,11 +117,17 @@
     document.removeEventListener("mousemove", handleMouseMove);
     document.removeEventListener("mouseup", handleMouseEvent);
   });
+
+  function handleMouseLeave(e) {
+    handleKeyUp(e);
+    handleMouseUp(e);
+  }
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <container
   class="absolute w-full h-full z-[1]"
+  on:mouseleave={handleMouseLeave}
   class:pointer-events-none={!trackMouse}
   class:cursor-grab={trackMouse}
 />