GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-27 15:22:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

zoomToElement feature

Browse Source
This commit is contained in:
AykutSarac 2022-04-09 14:23:14 +03:00
parent 2d8dc7e0d1
commit 75850a7709
1 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/containers/LiveEditor/index.tsx
View File

@ -69,6 +69,26 @@ export const LiveEditor: React.FC = React.memo(() => {
wrapperRef.current?.resetTransform(); wrapperRef.current?.resetTransform();
}, [settings.transform]); }, [settings.transform]);
React.useEffect(() => {
const wrapperRect =
wrapperRef.current?.instance.wrapperComponent?.getBoundingClientRect();
const node = document.querySelector(
`span[data-key*='${settings.searchNode}' i]`
);
if (wrapperRect && node) {
const newScale = 0.8;
const x = Number(node.getAttribute("data-x"));
const y = Number(node.getAttribute("data-y"));
const newPositionX = (wrapperRect.left - x) * newScale;
const newPositionY = (wrapperRect.top - y) * newScale;
wrapperRef.current?.setTransform(newPositionX, newPositionY, newScale);
}
}, [settings.searchNode]);
if (pageLoaded) if (pageLoaded)
return ( return (
<StyledLiveEditor> <StyledLiveEditor>