From ebb6f710d9de1605e057288d5d13d5f381e83856 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Sat, 19 Mar 2022 21:18:56 +0100 Subject: [PATCH] [Perf] Get rid of slow `body.no-selection` --- .../middle/composer/EmojiTooltip.tsx | 11 --------- .../middle/composer/StickerTooltip.tsx | 11 --------- src/hooks/useContextMenuHandlers.ts | 4 +--- src/hooks/useResize.ts | 24 ++++++++++--------- src/util/captureEvents.ts | 6 +++-- 5 files changed, 18 insertions(+), 38 deletions(-) diff --git a/src/components/middle/composer/EmojiTooltip.tsx b/src/components/middle/composer/EmojiTooltip.tsx index d54f93bda..28ea5c86d 100644 --- a/src/components/middle/composer/EmojiTooltip.tsx +++ b/src/components/middle/composer/EmojiTooltip.tsx @@ -2,7 +2,6 @@ import React, { FC, memo, useCallback, useEffect, useRef, } from '../../../lib/teact/teact'; -import { IS_TOUCH_ENV } from '../../../util/environment'; import buildClassName from '../../../util/buildClassName'; import findInViewport from '../../../util/findInViewport'; import isFullyVisible from '../../../util/isFullyVisible'; @@ -90,14 +89,6 @@ const EmojiTooltip: FC = ({ setItemVisible(selectedIndex, containerRef); }, [selectedIndex]); - const handleMouseEnter = () => { - document.body.classList.add('no-select'); - }; - - const handleMouseLeave = () => { - document.body.classList.remove('no-select'); - }; - const className = buildClassName( 'EmojiTooltip composer-tooltip custom-scroll-x', transitionClassNames, @@ -107,8 +98,6 @@ const EmojiTooltip: FC = ({
{shouldRender && listEmojis ? ( listEmojis.map((emoji, index) => ( diff --git a/src/components/middle/composer/StickerTooltip.tsx b/src/components/middle/composer/StickerTooltip.tsx index 8482c0f2b..7dfeae409 100644 --- a/src/components/middle/composer/StickerTooltip.tsx +++ b/src/components/middle/composer/StickerTooltip.tsx @@ -6,7 +6,6 @@ import { getDispatch, withGlobal } from '../../../lib/teact/teactn'; import { ApiSticker } from '../../../api/types'; import { STICKER_SIZE_PICKER } from '../../../config'; -import { IS_TOUCH_ENV } from '../../../util/environment'; import buildClassName from '../../../util/buildClassName'; import captureEscKeyListener from '../../../util/captureEscKeyListener'; import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver'; @@ -54,18 +53,10 @@ const StickerTooltip: FC = ({ useEffect(() => (isOpen ? captureEscKeyListener(clearStickersForEmoji) : undefined), [isOpen, clearStickersForEmoji]); - const handleMouseEnter = () => { - document.body.classList.add('no-select'); - }; - const handleMouseMove = () => { sendMessageAction({ type: 'chooseSticker' }); }; - const handleMouseLeave = () => { - document.body.classList.remove('no-select'); - }; - const className = buildClassName( 'StickerTooltip composer-tooltip custom-scroll', transitionClassNames, @@ -76,8 +67,6 @@ const StickerTooltip: FC = ({
{shouldRender && displayedStickers ? ( diff --git a/src/hooks/useContextMenuHandlers.ts b/src/hooks/useContextMenuHandlers.ts index e67acaf46..f6a8bb6ab 100644 --- a/src/hooks/useContextMenuHandlers.ts +++ b/src/hooks/useContextMenuHandlers.ts @@ -56,10 +56,9 @@ const useContextMenuHandlers = ( const handleContextMenuHide = useCallback(() => { setContextMenuPosition(undefined); - document.body.classList.remove('no-selection'); }, []); - // Support context menu on touch-devices + // Support context menu on touch devices useEffect(() => { if (isMenuDisabled || !IS_TOUCH_ENV || shouldDisableOnLongTap) { return undefined; @@ -102,7 +101,6 @@ const useContextMenuHandlers = ( }, true); } - document.body.classList.add('no-selection'); setIsContextMenuOpen(true); setContextMenuPosition({ x: clientX, y: clientY }); }; diff --git a/src/hooks/useResize.ts b/src/hooks/useResize.ts index 489b40858..5a607292f 100644 --- a/src/hooks/useResize.ts +++ b/src/hooks/useResize.ts @@ -2,12 +2,12 @@ import { RefObject } from 'react'; import { useState, useEffect } from '../lib/teact/teact'; import useFlag from './useFlag'; -export const useResize = ( +export function useResize( elementRef: RefObject, onResize: (width: number) => void, onReset: NoneToVoidFunction, initialWidth?: number, -) => { +) { const [isActive, markIsActive, unmarkIsActive] = useFlag(); const [initialMouseX, setInitialMouseX] = useState(); const [initialElementWidth, setInitialElementWidth] = useState(); @@ -21,19 +21,21 @@ export const useResize = ( }, [elementRef, initialWidth]); function handleMouseUp() { - document.body.classList.remove('no-selection', 'cursor-ew-resize'); + document.body.classList.remove('cursor-ew-resize'); } - function initResize(event: React.MouseEvent) { - document.body.classList.add('no-selection', 'cursor-ew-resize'); + function initResize(e: React.MouseEvent) { + e.preventDefault(); - setInitialMouseX(event.clientX); + document.body.classList.add('cursor-ew-resize'); + + setInitialMouseX(e.clientX); setInitialElementWidth(elementRef.current!.offsetWidth); markIsActive(); } - function resetResize(event: React.MouseEvent) { - event.preventDefault(); + function resetResize(e: React.MouseEvent) { + e.preventDefault(); elementRef.current!.style.width = ''; onReset(); } @@ -41,8 +43,8 @@ export const useResize = ( useEffect(() => { if (!isActive) return undefined; - const handleMouseMove = (event: MouseEvent) => { - const newWidth = Math.ceil(initialElementWidth + event.clientX - initialMouseX); + const handleMouseMove = (e: MouseEvent) => { + const newWidth = Math.ceil(initialElementWidth + e.clientX - initialMouseX); elementRef.current!.style.width = `${newWidth}px`; }; @@ -67,4 +69,4 @@ export const useResize = ( }, [initialElementWidth, initialMouseX, elementRef, onResize, isActive, unmarkIsActive]); return { initResize, resetResize, handleMouseUp }; -}; +} diff --git a/src/util/captureEvents.ts b/src/util/captureEvents.ts index f90bb3e8e..7ea44413d 100644 --- a/src/util/captureEvents.ts +++ b/src/util/captureEvents.ts @@ -94,6 +94,10 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) { captureEvent = e; if (e.type === 'mousedown') { + if (options.onDrag) { + e.preventDefault(); + } + document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onRelease); } else if (e.type === 'touchstart') { @@ -120,7 +124,6 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) { } } - document.body.classList.add('no-selection'); if (options.withCursor) { document.body.classList.add('cursor-grabbing'); } @@ -135,7 +138,6 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) { if (options.withCursor) { document.body.classList.remove('cursor-grabbing'); } - document.body.classList.remove('no-selection'); document.removeEventListener('mouseup', onRelease); document.removeEventListener('mousemove', onMove);