Merge pull request #8314 from weseek/imprv/refactor-drawio-viewer

imprv: Refactor DrawioViewer re-rendering by the resizing trigger

packages/remark-drawio/src/components/DrawioViewer.module.scss

@@ -2,11 +2,4 @@
   margin: 20px 0;
   border: 1px solid transparent;
   border-radius: 4px;
-
-  .geDiagramContainer {
-    // centering
-    margin-right: auto;
-    margin-left: auto;
-  }
-
 }

packages/remark-drawio/src/components/DrawioViewer.tsx

@@ -43,7 +43,6 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
   const drawioContainerRef = useRef<HTMLDivElement>(null);
 
   const [error, setError] = useState<Error>();
-  const [elementWidth, setElementWidth] = useState(0);
 
   const renderDrawio = useCallback(() => {
     if (drawioContainerRef.current == null) {
@@ -71,8 +70,8 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
         try {
           GraphViewer.useResizeSensor = false;
           GraphViewer.prototype.checkVisibleState = false;
-          GraphViewer.prototype.lightboxZIndex = 1200;
-          GraphViewer.prototype.toolbarZIndex = 1200;
+          GraphViewer.prototype.lightboxZIndex = 1055; // set $zindex-modal
+          GraphViewer.prototype.toolbarZIndex = 1055; // set $zindex-modal
           GraphViewer.createViewerForElement(div);
         }
         catch (err) {
@@ -80,16 +79,6 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
         }
       }
     }
-
-    const observer = new ResizeObserver((entries) => {
-      entries.forEach((el) => {
-        setElementWidth(el.contentRect.width);
-      });
-    });
-    observer.observe(drawioContainerRef.current);
-    return () => {
-      observer.disconnect();
-    };
   }, []);
 
   const renderDrawioWithDebounce = useMemo(() => debounce(200, renderDrawio), [renderDrawio]);
@@ -123,7 +112,7 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
       onRenderingStart?.();
       renderDrawioWithDebounce();
     }
-  }, [mxgraphHtml, onRenderingStart, renderDrawioWithDebounce, elementWidth]);
+  }, [mxgraphHtml, onRenderingStart, renderDrawioWithDebounce]);
 
   useEffect(() => {
     if (error != null) {
@@ -156,6 +145,26 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
   }, [onRenderingUpdated]);
   // *******************************  end  *******************************
 
+  // *******************  detect container is resized  *******************
+  useEffect(() => {
+    if (drawioContainerRef.current == null) {
+      return;
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      entries.forEach(() => {
+        // setElementWidth(el.contentRect.width);
+        onRenderingStart?.();
+        renderDrawioWithDebounce();
+      });
+    });
+    observer.observe(drawioContainerRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [onRenderingStart, renderDrawioWithDebounce]);
+  // *******************************  end  *******************************
+
   return (
     <div
       key={`drawio-viewer-${diagramIndex}`}