feat: extend plugin API event with modalclose popupclose (#354)

feat: plugin api event modalclose popupclose
reearth · Nov 11, 2022 · 9be75ad · 9be75ad
1 parent 593780e
commit 9be75ad
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 9 deletions.
diff --git a/src/components/molecules/Visualizer/Plugin/hooks.ts b/src/components/molecules/Visualizer/Plugin/hooks.ts
@@ -61,15 +61,7 @@ export default function ({
   const popupVisible = useRef<boolean>(false);
   const externalRef = useRef<HTMLIFrameElement>(null);
 
-  useEffect(() => {
-    modalVisible.current = shownPluginModalInfo?.id === (widget?.id ?? block?.id);
-  }, [modalVisible, shownPluginModalInfo, pluginId, extensionId, widget?.id, block?.id]);
-
-  useEffect(() => {
-    popupVisible.current = shownPluginPopupInfo?.id === (widget?.id ?? block?.id);
-  }, [popupVisible, shownPluginPopupInfo, pluginId, extensionId, widget?.id, block?.id]);
-
-  const { staticExposed, isMarshalable, onPreInit, onDispose } =
+  const { staticExposed, isMarshalable, onPreInit, onDispose, onModalClose, onPopupClose } =
     useAPI({
       extensionId,
       extensionType,
@@ -87,6 +79,42 @@ export default function ({
       onResize,
     }) ?? [];
 
+  useEffect(() => {
+    const visible = shownPluginModalInfo?.id === (widget?.id ?? block?.id);
+    if (modalVisible.current !== visible) {
+      modalVisible.current = visible;
+      if (!modalVisible.current) {
+        onModalClose();
+      }
+    }
+  }, [
+    modalVisible,
+    shownPluginModalInfo,
+    pluginId,
+    extensionId,
+    widget?.id,
+    block?.id,
+    onModalClose,
+  ]);
+
+  useEffect(() => {
+    const visible = shownPluginPopupInfo?.id === (widget?.id ?? block?.id);
+    if (popupVisible.current !== visible) {
+      popupVisible.current = visible;
+      if (!popupVisible.current) {
+        onPopupClose();
+      }
+    }
+  }, [
+    popupVisible,
+    shownPluginPopupInfo,
+    pluginId,
+    extensionId,
+    widget?.id,
+    block?.id,
+    onPopupClose,
+  ]);
+
   const onError = useCallback(
     (err: any) => {
       console.error(`plugin error from ${pluginId}/${extensionId}: `, err);
@@ -160,6 +188,8 @@ export function useAPI({
   isMarshalable: Options["isMarshalable"] | undefined;
   onPreInit: () => void;
   onDispose: () => void;
+  onModalClose: () => void;
+  onPopupClose: () => void;
 } {
   const ctx = useContext();
   const getLayer = useGet(layer);
@@ -348,10 +378,20 @@ export function useAPI({
     event.current?.[1]("update");
   }, [block, layer, widget, ctx?.reearth.scene.property]);
 
+  const onModalClose = useCallback(() => {
+    event.current?.[1]("modalclose");
+  }, []);
+
+  const onPopupClose = useCallback(() => {
+    event.current?.[1]("popupclose");
+  }, []);
+
   return {
     staticExposed,
     isMarshalable,
     onPreInit,
     onDispose,
+    onModalClose,
+    onPopupClose,
   };
 }
diff --git a/src/components/molecules/Visualizer/Plugin/types.ts b/src/components/molecules/Visualizer/Plugin/types.ts
@@ -72,6 +72,8 @@ export type ReearthEventType = {
   wheel: [props: MouseEvent];
   tick: [props: Date];
   resize: [props: Viewport];
+  modalclose: [];
+  popupclose: [];
 };
 
 /** Access to the metadata of this plugin and extension currently executed. */