keep selection when dragging outside page

Author: wooorm

src/display/draw_layer.js

@@ -215,6 +215,9 @@ class DrawLayer {
   /** @type {Set<HTMLDivElement>} */
   static #selections = new Set();
 
+  /** @type {boolean} */
+  static #isSelectingWithMouse = false;
+
   /** @type {Set<Element>} */
   static #textLayerSet = new Set();
 
@@ -245,15 +248,38 @@ class DrawLayer {
       DrawLayer.#textLayers.set(textLayer, { drawLayer: this });
       DrawLayer.#textLayerSet.add(textLayer);
       this.#textLayer = textLayer;
-      if (
-        DrawLayer.#textLayerSet.size === 1 &&
-        DrawLayer.#selectionChangeAC === null
-      ) {
+      if (DrawLayer.#selectionChangeAC === null) {
         DrawLayer.#selectionChangeAC = new AbortController();
+        const { signal } = DrawLayer.#selectionChangeAC;
         document.addEventListener(
           "selectionchange",
           DrawLayer.#selectionChange.bind(DrawLayer),
-          { signal: DrawLayer.#selectionChangeAC.signal }
+          { signal }
+        );
+        // Track mouse selection state to preserve selections during
+        // cross-boundary drags.
+        document.addEventListener(
+          "mousedown",
+          () => {
+            DrawLayer.#isSelectingWithMouse = true;
+          },
+          { signal }
+        );
+        document.addEventListener(
+          "mouseup",
+          () => {
+            DrawLayer.#isSelectingWithMouse = false;
+          },
+          { signal }
+        );
+        // If the mouse is released outside the window, we may not get a
+        // corresponding `mouseup` event.
+        window.addEventListener(
+          "blur",
+          () => {
+            DrawLayer.#isSelectingWithMouse = false;
+          },
+          { signal }
         );
       }
     }
@@ -325,6 +351,15 @@ class DrawLayer {
       let { startContainer, startOffset, endContainer, endOffset } = range;
       let startTextLayer = getTextLayer(startContainer);
       let endTextLayer = getTextLayer(endContainer);
+      const startMissing = startTextLayer === null;
+      const endMissing = endTextLayer === null;
+
+      // XOR case: exactly one boundary is outside tracked text layers.
+      // In Firefox/Safari this can happen transiently while dragging outside
+      // the page. Preserve the current overlay and exit early.
+      if (this.#isSelectingWithMouse && startMissing !== endMissing) {
+        return;
+      }
 
       if (selection.rangeCount === 1) {
         const { anchorNode, anchorOffset, focusNode, focusOffset } = selection;
@@ -356,6 +391,7 @@ class DrawLayer {
       }
 
       if (!startTextLayer || !endTextLayer) {
+        // Any remaining partial/outside range can be ignored.
         continue;
       }
       if (endContainer.nodeType === Node.ELEMENT_NODE) {
@@ -769,6 +805,7 @@ class DrawLayer {
         if (DrawLayer.#textLayerSet.size === 0) {
           DrawLayer.#selectionChangeAC?.abort();
           DrawLayer.#selectionChangeAC = null;
+          DrawLayer.#isSelectingWithMouse = false;
         }
       }
       this.#textLayer = null;