Avoid firing click event in floatables when user drags the mouse

Alternative approach at fixing #2484

Author: dae

ts/sveltelib/event-store.ts

@@ -34,7 +34,40 @@ function eventStore<T extends EventTarget, K extends keyof EventTargetToMap<T>>(
 
 export default eventStore;
 
-const documentClick = eventStore(document, "click", MouseEvent);
+/**
+ * A click event that fires only if the mouse has not appreciably moved since the button
+ * was pressed down. This was added so that if the user clicks inside a floating area and
+ * drags the mouse outside the area while selecting text, it doesn't end up closing the
+ * floating area.
+ */
+function mouseClickWithoutDragStore(): Readable<MouseEvent> {
+    const initEvent = new MouseEvent("click");
+
+    return readable(
+        initEvent,
+        (set: Subscriber<MouseEvent>): Callback => {
+            let startingX: number;
+            let startingY: number;
+            function onMouseDown(evt: MouseEvent): void {
+                startingX = evt.clientX;
+                startingY = evt.clientY;
+            }
+            function onClick(evt: MouseEvent): void {
+                if (Math.abs(startingX - evt.clientX) < 5 && Math.abs(startingY - evt.clientY) < 5) {
+                    set(evt);
+                }
+            }
+            document.addEventListener("mousedown", onMouseDown);
+            document.addEventListener("click", onClick);
+            return () => {
+                document.removeEventListener("click", onClick);
+                document.removeEventListener("mousedown", onMouseDown);
+            };
+        },
+    );
+}
+
+const documentClick = mouseClickWithoutDragStore();
 const documentKeyup = eventStore(document, "keyup", KeyboardEvent);
 
 export { documentClick, documentKeyup };