AykutSarac 3 лет назад
Родитель
Сommit
b37a45e6a7
1 измененных файлов с 7 добавлено и 9 удалено
  1. 7 9
      src/containers/LiveEditor/index.tsx

+ 7 - 9
src/containers/LiveEditor/index.tsx

@@ -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;