refactor DrawioModal

packages/app/src/components/PageEditor/DrawioCommunicationHelper.ts

@@ -3,18 +3,27 @@ export type DrawioConfig = {
   customFonts: string[],
 }
 
+export type DrawioCommunicationCallbackOptions = {
+  onClose?: () => void;
+  onSave?: (drawioData: string) => void;
+}
+
 export class DrawioCommunicationHelper {
 
   drawioUri: string;
 
   drawioConfig: DrawioConfig;
 
-  constructor(drawioUri: string, drawioConfig: DrawioConfig) {
+  callbackOpts?: DrawioCommunicationCallbackOptions;
+
+
+  constructor(drawioUri: string, drawioConfig: DrawioConfig, callbackOpts?: DrawioCommunicationCallbackOptions) {
     this.drawioUri = drawioUri;
     this.drawioConfig = drawioConfig;
+    this.callbackOpts = callbackOpts;
   }
 
-  onReceiveMessage(event: MessageEvent, drawioMxFile: string, onClose: () => void): void {
+  onReceiveMessage(event: MessageEvent, drawioMxFile: string): void {
 
     // check origin
 
@@ -52,18 +61,16 @@ export class DrawioCommunicationHelper {
         * https://redmine.weseek.co.jp/issues/104507
         */
 
-        // if (props.onSave != null) {
-        //   props.onSave(drawioData);
-        // }
+        this.callbackOpts?.onSave?.(drawioData);
       }
 
-      onClose();
+      this.callbackOpts?.onClose?.();
 
       return;
     }
 
     if (typeof event.data === 'string' && event.data.length === 0) {
-      onClose();
+      this.callbackOpts?.onClose?.();
       return;
     }
 

packages/app/src/components/PageEditor/DrawioModal.tsx

@@ -46,14 +46,6 @@ export const DrawioModal = (props: Props): JSX.Element => {
   const { data: drawioModalData, close: closeDrawioModal } = useDrawioModal();
   const isOpened = drawioModalData?.isOpened ?? false;
 
-  const drawioCommunicationHelper = useMemo(() => {
-    if (drawioUri == null) {
-      return undefined;
-    }
-
-    return new DrawioCommunicationHelper(drawioUri, drawioConfig);
-  }, [drawioUri]);
-
   const drawioUriWithParams = useMemo(() => {
     if (drawioUri == null) {
       return undefined;
@@ -71,13 +63,25 @@ export const DrawioModal = (props: Props): JSX.Element => {
     return url;
   }, [drawioUri, personalSettingsInfo?.lang]);
 
+  const drawioCommunicationHelper = useMemo(() => {
+    if (drawioUri == null) {
+      return undefined;
+    }
+
+    return new DrawioCommunicationHelper(
+      drawioUri,
+      drawioConfig,
+      { onClose: closeDrawioModal },
+    );
+  }, [closeDrawioModal, drawioUri]);
+
   const receiveMessageHandler = useCallback((event: MessageEvent) => {
     if (drawioModalData == null) {
       return;
     }
 
-    drawioCommunicationHelper?.onReceiveMessage(event, drawioModalData.drawioMxFile, closeDrawioModal);
-  }, [closeDrawioModal, drawioCommunicationHelper, drawioModalData]);
+    drawioCommunicationHelper?.onReceiveMessage(event, drawioModalData.drawioMxFile);
+  }, [drawioCommunicationHelper, drawioModalData]);
 
   useEffect(() => {
     if (isOpened) {