feat: extend plugin API supports close widget (#355)

* feat: add plugin API ui.close * refactor: clean up * refactor: remove unnecessary function * refactor: clean up viewoprt api * refactor: use visible instead of enabled * refactor: rename
reearth · Nov 18, 2022 · d025787 · d025787
1 parent 2257586
commit d025787
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 11 deletions.
diff --git a/src/components/atoms/Plugin/PluginIFrame/useIFrame.ts b/src/components/atoms/Plugin/PluginIFrame/useIFrame.ts
@@ -61,6 +61,10 @@ export default function useIFrame({
     [iframeCanBeVisible, onRender, postMessage],
   );
 
+  useEffect(() => {
+    setIFrameState(([html, options]) => [html, { ...options, visible: !!iframeCanBeVisible }]);
+  }, [iframeCanBeVisible]);
+
   useEffect(() => {
     if (!ready) setIFrameLoaded(false);
   }, [ready]);

diff --git a/src/components/atoms/Plugin/index.stories.tsx b/src/components/atoms/Plugin/index.stories.tsx
@@ -16,7 +16,7 @@ let cb: (message: any) => void | undefined;
 
 Default.args = {
   src: `/plugins/plugin.js`,
-  canBeVisible: true,
+  uiVisible: true,
   iFrameProps: {
     style: {
       width: "300px",
@@ -50,7 +50,7 @@ export const HiddenIFrame: Story<Props> = args => <Component {...args} />;
 
 HiddenIFrame.args = {
   src: `/plugins/hidden.js`,
-  canBeVisible: true,
+  uiVisible: true,
   iFrameProps: {
     style: {
       width: "300px",
@@ -132,6 +132,6 @@ AutoResize.args = {
     onmessage = msg => { resize(msg.width, msg.height); };
   `,
   autoResize: "both",
-  canBeVisible: true,
+  uiVisible: true,
   exposed: ({ main: { render, resize } }) => ({ render, resize }),
 };
diff --git a/src/components/atoms/Plugin/index.tsx b/src/components/atoms/Plugin/index.tsx
@@ -11,7 +11,7 @@ export type { API, IFrameType, Ref } from "./hooks";
 
 export type Props = {
   className?: string;
-  canBeVisible?: boolean;
+  uiVisible?: boolean;
   skip?: boolean;
   src?: string;
   sourceCode?: string;
@@ -36,7 +36,7 @@ export type Props = {
 const Plugin: ForwardRefRenderFunction<Ref, Props> = (
   {
     className,
-    canBeVisible,
+    uiVisible,
     modalVisible,
     popupVisible,
     skip,
@@ -78,7 +78,7 @@ const Plugin: ForwardRefRenderFunction<Ref, Props> = (
         type="main"
         ref={mainIFrameRef}
         ready={loaded}
-        visible={canBeVisible}
+        visible={uiVisible}
         enabled
         className={className}
         iFrameProps={iFrameProps}

diff --git a/src/components/molecules/Visualizer/Plugin/api.ts b/src/components/molecules/Visualizer/Plugin/api.ts
@@ -14,7 +14,6 @@ import type {
   Plugin,
   Tag,
   PopupPosition,
-  Viewport,
 } from "./types";
 
 export type CommonReearth = Omit<
@@ -24,6 +23,7 @@ export type CommonReearth = Omit<
 
 export function exposed({
   render,
+  closeUI,
   postMessage,
   resize,
   renderModal,
@@ -51,6 +51,7 @@ export function exposed({
       extended?: boolean;
     },
   ) => void;
+  closeUI: Reearth["ui"]["close"];
   postMessage: Reearth["ui"]["postMessage"];
   resize: Reearth["ui"]["resize"];
   renderModal: (
@@ -91,7 +92,6 @@ export function exposed({
             };
           },
         }),
-        viewport: commonReearth.viewport as Viewport,
         layers: merge(commonReearth.layers, {
           get add() {
             return (layer: Layer, parentId?: string) =>
@@ -115,6 +115,7 @@ export function exposed({
           },
           postMessage,
           resize,
+          close: closeUI,
         },
         modal: {
           show: (
@@ -324,7 +325,7 @@ export function commonReearth({
       getLocationFromScreen,
     },
     get viewport() {
-      return viewport?.();
+      return viewport();
     },
     engineName,
     camera: {

diff --git a/src/components/molecules/Visualizer/Plugin/hooks.ts b/src/components/molecules/Visualizer/Plugin/hooks.ts
@@ -1,5 +1,5 @@
 import { Options } from "quickjs-emscripten-sync";
-import { useCallback, useEffect, useMemo, useRef, MutableRefObject } from "react";
+import { useCallback, useEffect, useMemo, useRef, MutableRefObject, useState } from "react";
 import type { RefObject } from "react";
 
 import type { API as IFrameAPI } from "@reearth/components/atoms/Plugin";
@@ -19,6 +19,7 @@ export default function ({
   extensionId,
   pluginBaseUrl,
   extensionType,
+  visible,
   block,
   layer,
   widget,
@@ -34,6 +35,7 @@ export default function ({
   extensionId?: string;
   pluginBaseUrl?: string;
   extensionType?: string;
+  visible?: boolean;
   layer?: Layer;
   widget?: Widget;
   block?: Block;
@@ -61,6 +63,8 @@ export default function ({
   const popupVisible = useRef<boolean>(false);
   const externalRef = useRef<HTMLIFrameElement>(null);
 
+  const [uiVisible, setUIVisibility] = useState<boolean>(!!visible);
+
   const { staticExposed, isMarshalable, onPreInit, onDispose, onModalClose, onPopupClose } =
     useAPI({
       extensionId,
@@ -75,6 +79,7 @@ export default function ({
       externalRef,
       onPluginModalShow,
       onPluginPopupShow,
+      setUIVisibility,
       onRender,
       onResize,
     }) ?? [];
@@ -131,6 +136,7 @@ export default function ({
     skip: !staticExposed,
     src,
     isMarshalable,
+    uiVisible,
     modalVisible: modalVisible.current,
     popupVisible: popupVisible.current,
     externalRef,
@@ -154,6 +160,7 @@ export function useAPI({
   externalRef,
   onPluginModalShow,
   onPluginPopupShow,
+  setUIVisibility,
   onRender,
   onResize,
 }: {
@@ -169,6 +176,7 @@ export function useAPI({
   externalRef: RefObject<HTMLIFrameElement> | undefined;
   onPluginModalShow?: (modalInfo?: PluginModalInfo) => void;
   onPluginPopupShow?: (popupInfo?: PluginPopupInfo) => void;
+  setUIVisibility: (visible: boolean) => void;
   onRender?: (
     options:
       | {
@@ -294,6 +302,10 @@ export function useAPI({
           onRender?.(
             typeof extended !== "undefined" || options ? { extended, ...options } : undefined,
           );
+          setUIVisibility(true);
+        },
+        closeUI: () => {
+          setUIVisibility(false);
         },
         renderModal: (html, { ...options } = {}) => {
           modal.render(html, options);
@@ -370,6 +382,7 @@ export function useAPI({
     getWidget,
     onPluginModalShow,
     onPluginPopupShow,
+    setUIVisibility,
     onRender,
     onResize,
   ]);

diff --git a/src/components/molecules/Visualizer/Plugin/index.tsx b/src/components/molecules/Visualizer/Plugin/index.tsx
@@ -86,6 +86,7 @@ export default function Plugin({
     skip,
     src,
     isMarshalable,
+    uiVisible,
     modalVisible,
     popupVisible,
     externalRef,
@@ -98,6 +99,7 @@ export default function Plugin({
     extensionId,
     extensionType,
     pluginBaseUrl,
+    visible,
     layer,
     widget,
     block,
@@ -117,7 +119,7 @@ export default function Plugin({
       sourceCode={sourceCode}
       autoResize={autoResize}
       iFrameProps={iFrameProps}
-      canBeVisible={visible}
+      uiVisible={uiVisible}
       modalVisible={modalVisible}
       popupVisible={popupVisible}
       modalContainer={pluginModalContainer}

diff --git a/src/components/molecules/Visualizer/Plugin/types.ts b/src/components/molecules/Visualizer/Plugin/types.ts
@@ -268,6 +268,7 @@ export type UI = {
     /** Overrides whether the iframe is extended. This option is only available for widgets on an extendable area on the widget align system. */
     extended?: boolean | undefined,
   ) => void;
+  readonly close: () => void;
 };
 
 export type Modal = {