diff --git a/ts/sveltelib/event-store.ts b/ts/sveltelib/event-store.ts index 0930919f4..74e31d810 100644 --- a/ts/sveltelib/event-store.ts +++ b/ts/sveltelib/event-store.ts @@ -34,7 +34,40 @@ function eventStore>( 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 { + const initEvent = new MouseEvent("click"); + + return readable( + initEvent, + (set: Subscriber): 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 };