GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-20 05:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix search node

Browse Source
This commit is contained in:
AykutSarac 2022-04-15 23:39:05 +03:00
parent 6ab2bff032
commit b37a45e6a7
1 changed files with 7 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,9 +36,6 @@ export const LiveEditor: React.FC = React.memo(function LiveEditor() {
dispatch, dispatch,
} = useConfig(); } = useConfig();
const pageLoaded = useLoading(); const pageLoaded = useLoading();
const wrapperRef = React.useRef<ReactZoomPanPinchRef | null>(
settings.zoomPanPinch
);
const [data, setData] = React.useState({ const [data, setData] = React.useState({
nodes: [], nodes: [],
edges: [], edges: [],
@ -51,7 +48,8 @@ export const LiveEditor: React.FC = React.memo(function LiveEditor() {
}, [json, settings.expand]); }, [json, settings.expand]);
React.useEffect(() => { React.useEffect(() => {
const wrapperRect = wrapperRef.current?.instance.wrapperComponent; if (!settings.zoomPanPinch) return;
const zoomPanPinch = settings.zoomPanPinch.instance.wrapperComponent;
const node = document.querySelector( const node = document.querySelector(
`span[data-key*='${settings.searchNode}' i]` `span[data-key*='${settings.searchNode}' i]`
@ -61,25 +59,25 @@ export const LiveEditor: React.FC = React.memo(function LiveEditor() {
.querySelector("foreignObject.searched") .querySelector("foreignObject.searched")
?.classList.remove("searched"); ?.classList.remove("searched");
if (wrapperRect && node && node.parentElement) { if (zoomPanPinch && node && node.parentElement) {
const newScale = 1; const newScale = 1;
const x = Number(node.getAttribute("data-x")); const x = Number(node.getAttribute("data-x"));
const y = Number(node.getAttribute("data-y")); const y = Number(node.getAttribute("data-y"));
const newPositionX = const newPositionX =
(wrapperRect.offsetLeft - x) * newScale + (zoomPanPinch.offsetLeft - x) * newScale +
node.getBoundingClientRect().width; node.getBoundingClientRect().width;
const newPositionY = const newPositionY =
(wrapperRect.offsetTop - y) * newScale + (zoomPanPinch.offsetTop - y) * newScale +
node.getBoundingClientRect().height; node.getBoundingClientRect().height;
node.parentElement.parentElement node.parentElement.parentElement
?.closest("foreignObject") ?.closest("foreignObject")
?.classList.toggle("searched"); ?.classList.toggle("searched");
wrapperRef.current?.setTransform(newPositionX, newPositionY, newScale); settings.zoomPanPinch?.setTransform(newPositionX, newPositionY, newScale);
} }
}, [settings.searchNode]); }, [settings.searchNode, settings.zoomPanPinch]);
const onCanvasClick = () => { const onCanvasClick = () => {
const input = document.querySelector("input:focus") as HTMLInputElement; const input = document.querySelector("input:focus") as HTMLInputElement;