Added workaround for memory leak when unmounting WV in Mendix

Author: S0ulDrag0n

package.json

@@ -1,7 +1,7 @@
 {
   "name": "webviewer",
   "widgetName": "WebViewer",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "My widget description",
   "copyright": "2022 PDFTron",
   "author": "Andrey Safonov",

src/WebViewer.editorPreview.tsx

@@ -22,6 +22,7 @@ export class preview extends Component<WebViewerPreviewProps> {
             enabledElements: this.props.enabledElements,
             disabledElements: this.props.disabledElements,
             selectAnnotationOnCreation: this.props.selectAnnotationOnCreation,
+            isVisible: this.props.isVisible === "true",
             enableDarkMode: this.props.enableDarkMode,
             enableFullAPI: this.props.enableFullAPI,
             customCss: this.props.customCss,

src/WebViewer.tsx

@@ -23,6 +23,7 @@ export default class WebViewer extends Component<WebViewerContainerProps> {
             enabledElements: this.props.enabledElements,
             disabledElements: this.props.disabledElements,
             selectAnnotationOnCreation: this.props.selectAnnotationOnCreation,
+            isVisible: this.props.isVisible?.value,
             enableDarkMode: this.props.enableDarkMode,
             enableFullAPI: this.props.enableFullAPI,
             customCss: this.props.customCss,

src/WebViewer.xml

@@ -73,6 +73,13 @@
             </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="UI">
+            <property key="isVisible" type="attribute">
+                <caption>Is visible</caption>
+                <description>A flag to toggle the visibility of WebViewer. Please use this option to hide WebViewer over the one in Common.</description>
+                <attributeTypes>
+                    <attributeType name="Boolean"/>
+                </attributeTypes>
+            </property>
             <property key="containerHeight" type="string" required="true" defaultValue="100vh">
                 <caption>Container height</caption>
                 <description>The height of the container, in CSS, that WebViewer mounts to. Ultimately, the height of WebViewer as well.</description>

src/components/PDFViewer.tsx

@@ -1,4 +1,5 @@
 import { createElement, useRef, useEffect, useState } from "react";
+import { unmountComponentAtNode } from "react-dom";
 import viewer, { WebViewerInstance } from "@pdftron/webviewer";
 import WebViewerModuleClient from "../clients/WebViewerModuleClient";
 
@@ -18,6 +19,7 @@ export interface InputProps {
     enabledElements: string;
     disabledElements: string;
     selectAnnotationOnCreation?: boolean;
+    isVisible?: boolean;
     enableDarkMode?: boolean;
     enableFullAPI?: boolean;
     customCss?: string;
@@ -30,6 +32,25 @@ const PDFViewer: React.FC<InputProps> = props => {
     const viewerRef = useRef<HTMLDivElement>(null);
     const [wvInstance, setInstance] = useState<null | WebViewerInstance>(null);
 
+    // Perform clean-up of WV when unmounted forcibly.
+    useEffect(() => {
+        const topWindow = window.top;
+        return () => {
+            if (wvInstance) {
+                // Disposing WV events
+                wvInstance.UI.dispose();
+                const element = wvInstance.UI.iframeWindow.document.getElementById("app") as Element;
+                // Further remove React component
+                unmountComponentAtNode(element);
+                // This part is necessary as a page refresh is the only way everything gets cleared.
+                // However, the page will show a reload post navigation.
+                if (topWindow) {
+                    topWindow.location.reload();
+                }
+            }
+        };
+    }, [wvInstance]);
+
     useEffect(() => {
         viewer(
             {
@@ -118,7 +139,17 @@ const PDFViewer: React.FC<InputProps> = props => {
         }
     }, [wvInstance, props.file]);
 
-    return <div className="webviewer" style={{ height: props.containerHeight }} ref={viewerRef}></div>;
+    return (
+        <div
+            className="webviewer"
+            style={{
+                height: props.containerHeight,
+                visibility:
+                    props.isVisible || props.isVisible === undefined || props.isVisible === null ? "visible" : "hidden"
+            }}
+            ref={viewerRef}
+        ></div>
+    );
 };
 
 export default PDFViewer;

src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="WebViewer" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="WebViewer" version="1.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="WebViewer.xml"/>
         </widgetFiles>

typings/WebViewerProps.d.ts

@@ -44,6 +44,7 @@ export interface WebViewerContainerProps {
     enableMeasurement: boolean;
     enableRedaction: boolean;
     selectAnnotationOnCreation: boolean;
+    isVisible: EditableValue<boolean>;
     containerHeight: string;
     enableDarkMode: boolean;
     defaultLanguage: DefaultLanguageEnum;
@@ -73,6 +74,7 @@ export interface WebViewerPreviewProps {
     enableMeasurement: boolean;
     enableRedaction: boolean;
     selectAnnotationOnCreation: boolean;
+    isVisible: string;
     containerHeight: string;
     enableDarkMode: boolean;
     defaultLanguage: DefaultLanguageEnum;