diff --git a/src/hooks/useResize.ts b/src/hooks/useResize.ts index c8a6d2c5a..bd4d2c06e 100644 --- a/src/hooks/useResize.ts +++ b/src/hooks/useResize.ts @@ -20,23 +20,23 @@ export const useResize = ( elementRef.current.style.width = `${initialWidth}px`; }, [elementRef, initialWidth]); - const handleMouseUp = () => { + function handleMouseUp() { document.body.classList.remove('no-selection', 'cursor-ew-resize'); - }; + } - const initResize = (event: React.MouseEvent) => { + function initResize(event: React.MouseEvent) { document.body.classList.add('no-selection', 'cursor-ew-resize'); setInitialMouseX(event.clientX); setInitialElementWidth(elementRef.current!.offsetWidth); markIsActive(); - }; + } - const resetResize = (event: React.MouseEvent) => { + function resetResize(event: React.MouseEvent) { event.preventDefault(); elementRef.current!.style.width = ''; onReset(); - }; + } useEffect(() => { if (!isActive) return; @@ -46,18 +46,24 @@ export const useResize = ( elementRef.current!.style.width = `${newWidth}px`; }; - const stopDrag = () => { + function stopDrag() { + cleanup(); + onResize(elementRef.current!.offsetWidth); + } + + function cleanup() { handleMouseUp(); document.removeEventListener('mousemove', handleMouseMove, false); document.removeEventListener('mouseup', stopDrag, false); document.removeEventListener('blur', stopDrag, false); - onResize(elementRef.current!.offsetWidth); unmarkIsActive(); - }; + } document.addEventListener('mousemove', handleMouseMove, false); document.addEventListener('mouseup', stopDrag, false); document.addEventListener('blur', stopDrag, false); + + return cleanup; }, [initialElementWidth, initialMouseX, elementRef, onResize, isActive, unmarkIsActive]); return { initResize, resetResize, handleMouseUp }; diff --git a/src/hooks/useSelectWithEnter.ts b/src/hooks/useSelectWithEnter.ts index 100061780..e2488a6ec 100644 --- a/src/hooks/useSelectWithEnter.ts +++ b/src/hooks/useSelectWithEnter.ts @@ -18,7 +18,7 @@ const useSendWithEnter = ( useEffect(() => { window.addEventListener('keydown', handleKeyDown, false); - return () => window.removeEventListener('keydown', handleKeyDown); + return () => window.removeEventListener('keydown', handleKeyDown, false); }, [handleKeyDown]); return buttonRef; diff --git a/src/util/captureEvents.ts b/src/util/captureEvents.ts index 4e8693f3b..f90bb3e8e 100644 --- a/src/util/captureEvents.ts +++ b/src/util/captureEvents.ts @@ -130,7 +130,7 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) { } } - function onRelease(e: MouseEvent | TouchEvent) { + function onRelease(e?: MouseEvent | TouchEvent) { if (captureEvent) { if (options.withCursor) { document.body.classList.remove('cursor-grabbing'); @@ -149,20 +149,22 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) { }); } - if (hasMoved) { - if (options.onRelease) { - options.onRelease(e); + if (e) { + if (hasMoved) { + if (options.onRelease) { + options.onRelease(e); + } + } else if (e.type === 'mouseup') { + if (options.onDoubleClick && Date.now() - lastClickTime < 300) { + options.onDoubleClick(e, { + centerX: captureEvent!.pageX!, + centerY: captureEvent!.pageY!, + }); + } else if (options.onClick && (!('button' in e) || e.button === 0)) { + options.onClick(e); + } + lastClickTime = Date.now(); } - } else if (e.type === 'mouseup') { - if (options.onDoubleClick && Date.now() - lastClickTime < 300) { - options.onDoubleClick(e, { - centerX: captureEvent!.pageX!, - centerY: captureEvent!.pageY!, - }); - } else if (options.onClick && (!('button' in e) || e.button === 0)) { - options.onClick(e); - } - lastClickTime = Date.now(); } } @@ -276,8 +278,10 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) { element.addEventListener('touchstart', onCapture, { passive: !options.isNotPassive }); return () => { - element.removeEventListener('mousedown', onCapture); + onRelease(); + element.removeEventListener('touchstart', onCapture); + element.removeEventListener('mousedown', onCapture); }; }