ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Custom Emoji: Fix position when animating scale (#6146)

Browse Source
This commit is contained in:
zubiden 2025-08-29 08:57:54 +02:00 committed by Alexander Zinchuk
parent 452929ad35
commit fd4bf1797e
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/hooks/useCoordsInSharedCanvas.ts
View File

@ -5,6 +5,7 @@ import {
} from '../lib/teact/teact'; } from '../lib/teact/teact';
import { round } from '../util/math'; import { round } from '../util/math';
import getOffsetToContainer from '../util/visibility/getOffsetToContainer';
import useLastCallback from './useLastCallback'; import useLastCallback from './useLastCallback';
import useResizeObserver from './useResizeObserver'; import useResizeObserver from './useResizeObserver';
import useSharedIntersectionObserver from './useSharedIntersectionObserver'; import useSharedIntersectionObserver from './useSharedIntersectionObserver';
@ -38,12 +39,15 @@ export default function useCoordsInSharedCanvas(
return; return;
} }
const targetBounds = target.getBoundingClientRect(); const { left: targetLeftOffset, top: targetTopOffset } = getOffsetToContainer(target, canvas.parentElement!);
const canvasBounds = canvas.getBoundingClientRect(); const { left: canvasLeftOffset, top: canvasTopOffset } = getOffsetToContainer(canvas, canvas.parentElement!);
const left = targetLeftOffset - canvasLeftOffset;
const top = targetTopOffset - canvasTopOffset;
// Factor coords are used to support rendering while being rescaled (e.g. message appearance animation) // Factor coords are used to support rendering while being rescaled (e.g. message appearance animation)
setX(round((targetBounds.left - canvasBounds.left) / canvasBounds.width, 4) || 0); setX(round(left / canvas.clientWidth, 4) || 0);
setY(round((targetBounds.top - canvasBounds.top) / canvasBounds.height, 4) || 0); setY(round(top / canvas.clientHeight, 4) || 0);
}); });
useEffect(recalculate, [recalculate]); useEffect(recalculate, [recalculate]);