feat: enhance extended field of widget in plugin API (#90)

reearth · Sep 30, 2021 · 06cb14e · 06cb14e
1 parent 97f74e9
commit 06cb14e
Show file tree

Hide file tree

Showing 18 changed files with 93 additions and 59 deletions.
diff --git a/src/components/atoms/Plugin/IFrame/hooks.ts b/src/components/atoms/Plugin/IFrame/hooks.ts
@@ -1,9 +1,11 @@
 import {
+  IframeHTMLAttributes,
   Ref,
   RefObject,
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -17,20 +19,23 @@ export default function useHook({
   html,
   ref,
   autoResize,
+  visible,
+  iFrameProps,
   onLoad,
   onMessage,
 }: {
   autoResizeMessageKey?: string;
   html?: string;
   ref?: Ref<RefType>;
   autoResize?: boolean;
+  visible?: boolean;
+  iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
   onLoad?: () => void;
   onMessage?: (message: any) => void;
 } = {}): {
   ref: RefObject<HTMLIFrameElement>;
+  props: IframeHTMLAttributes<HTMLIFrameElement>;
   onLoad?: () => void;
-  width?: string;
-  height?: string;
 } {
   const loaded = useRef(false);
   const iFrameRef = useRef<HTMLIFrameElement>(null);
@@ -86,7 +91,7 @@ export default function useHook({
             horizontalMargin = parseInt(st.getPropertyValue("margin-left")) + parseInt(st.getPropertyValue("margin-right"));
             verticalMargin = parseInt(st.getPropertyValue("margin-top")) + parseInt(st.getPropertyValue("margin-bottom"));
             const resize = {
-              width: el.offsetWidth + horizontalMargin, 
+              width: el.offsetWidth + horizontalMargin,
               height: el.offsetHeight + verticalMargin,
             };
             parent.postMessage({
@@ -126,10 +131,23 @@ export default function useHook({
     onLoad?.();
   }, [autoResizeMessageKey, html, onLoad]);
 
+  const props = useMemo<IframeHTMLAttributes<HTMLIFrameElement>>(
+    () => ({
+      style: {
+        display: visible ? undefined : "none",
+        width: visible ? (autoResize ? iFrameSize?.[0] : "100%") : "0px",
+        height: visible ? (autoResize ? iFrameSize?.[1] : "100%") : "0px",
+        minWidth: "100%",
+        ...iFrameProps?.style,
+      },
+      ...iFrameProps,
+    }),
+    [autoResize, iFrameProps, iFrameSize, visible],
+  );
+
   return {
     ref: iFrameRef,
-    width: iFrameSize?.[0],
-    height: iFrameSize?.[1],
+    props,
     onLoad: onIframeLoad,
   };
 }
diff --git a/src/components/atoms/Plugin/IFrame/index.stories.tsx b/src/components/atoms/Plugin/IFrame/index.stories.tsx
@@ -31,9 +31,11 @@ export const Default: Story<Props> = args => {
 Default.args = {
   autoResize: false,
   visible: true,
-  style: {
-    width: "400px",
-    height: "300px",
+  iFrameProps: {
+    style: {
+      width: "400px",
+      height: "300px",
+    },
   },
   html: `<h1>iframe</h1><script>
   window.addEventListener("message", ev => {

diff --git a/src/components/atoms/Plugin/IFrame/index.tsx b/src/components/atoms/Plugin/IFrame/index.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, IframeHTMLAttributes } from "react";
+import React, { IframeHTMLAttributes } from "react";
 
 import useHook, { RefType } from "./hooks";
 
@@ -8,23 +8,23 @@ export type Props = {
   autoResize?: boolean;
   className?: string;
   html?: string;
-  style?: CSSProperties;
   visible?: boolean;
   iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
   onLoad?: () => void;
   onMessage?: (message: any) => void;
 };
 
 const IFrame: React.ForwardRefRenderFunction<Ref, Props> = (
-  { autoResize, className, html, style, visible, iFrameProps, onLoad, onMessage },
+  { autoResize, className, html, visible, iFrameProps, onLoad, onMessage },
   ref,
 ) => {
   const {
     ref: iFrameRef,
-    width,
-    height,
+    props,
     onLoad: onIFrameLoad,
   } = useHook({
+    visible,
+    iFrameProps,
     autoResize,
     html,
     ref,
@@ -40,16 +40,9 @@ const IFrame: React.ForwardRefRenderFunction<Ref, Props> = (
       srcDoc=""
       key={html}
       ref={iFrameRef}
-      style={{
-        display: visible ? undefined : "none",
-        width: visible ? (autoResize ? width : "100%") : "0px",
-        height: visible ? (autoResize ? height : "100%") : "0px",
-        minWidth: "100%",
-        ...style,
-      }}
       className={className}
       onLoad={onIFrameLoad}
-      {...iFrameProps}
+      {...props}
     />
   ) : null;
 };

diff --git a/src/components/atoms/Plugin/index.stories.tsx b/src/components/atoms/Plugin/index.stories.tsx
@@ -17,10 +17,12 @@ let cb: (message: any) => void | undefined;
 Default.args = {
   src: `${process.env.PUBLIC_URL}/plugins/plugin.js`,
   canBeVisible: true,
-  style: {
-    width: "300px",
-    height: "300px",
-    backgroundColor: "#fff",
+  iFrameProps: {
+    style: {
+      width: "300px",
+      height: "300px",
+      backgroundColor: "#fff",
+    },
   },
   exposed: ({ render, postMessage }) => ({
     console: {
@@ -49,10 +51,12 @@ export const HiddenIFrame: Story<Props> = args => <Component {...args} />;
 HiddenIFrame.args = {
   src: `${process.env.PUBLIC_URL}/plugins/hidden.js`,
   canBeVisible: true,
-  style: {
-    width: "300px",
-    height: "300px",
-    backgroundColor: "#fff",
+  iFrameProps: {
+    style: {
+      width: "300px",
+      height: "300px",
+      backgroundColor: "#fff",
+    },
   },
   exposed: ({ render, postMessage }) => ({
     console: {

diff --git a/src/components/atoms/Plugin/index.tsx b/src/components/atoms/Plugin/index.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, IframeHTMLAttributes, ReactNode } from "react";
+import React, { IframeHTMLAttributes, ReactNode } from "react";
 
 import useHook, { IFrameAPI as IFrameAPIType } from "./hooks";
 import IFrame from "./IFrame";
@@ -9,10 +9,10 @@ export type Props = {
   className?: string;
   canBeVisible?: boolean;
   skip?: boolean;
-  style?: CSSProperties;
   src?: string;
   sourceCode?: string;
   renderPlaceholder?: ReactNode;
+  filled?: boolean;
   iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
   isMarshalable?: boolean | "json" | ((target: any) => boolean | "json");
   exposed?: ((api: IFrameAPI) => { [key: string]: any }) | { [key: string]: any };
@@ -26,10 +26,10 @@ const Plugin: React.FC<Props> = ({
   className,
   canBeVisible,
   skip,
-  style,
   src,
   sourceCode,
   renderPlaceholder,
+  filled,
   iFrameProps,
   isMarshalable,
   exposed,
@@ -52,9 +52,8 @@ const Plugin: React.FC<Props> = ({
 
   return iFrameHtml ? (
     <IFrame
-      autoResize
+      autoResize={!filled}
       className={className}
-      style={style}
       html={iFrameHtml}
       ref={iFrameRef}
       visible={iFrameVisible}

diff --git a/src/components/molecules/Visualizer/Plugin/hooks.ts b/src/components/molecules/Visualizer/Plugin/hooks.ts
@@ -1,7 +1,7 @@
 import { Options } from "quickjs-emscripten-sync";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 
-import { IFrameAPI } from "@reearth/components/atoms/Plugin/hooks";
+import { IFrameAPI } from "@reearth/components/atoms/Plugin";
 import events, { EventEmitter, Events, mergeEvents } from "@reearth/util/event";
 
 import { exposed } from "./api";

diff --git a/src/components/molecules/Visualizer/Plugin/index.tsx b/src/components/molecules/Visualizer/Plugin/index.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties } from "react";
+import React from "react";
 
 import P, { Props as PluginProps } from "@reearth/components/atoms/Plugin";
 
@@ -19,7 +19,6 @@ export type { Props as ProviderProps, Context } from "./context";
 
 export type Props = {
   className?: string;
-  style?: CSSProperties;
   sourceCode?: string;
   pluginId?: string;
   extensionId?: string;
@@ -36,7 +35,6 @@ export type Props = {
 
 export default function Plugin({
   className,
-  style,
   sourceCode,
   pluginId,
   extensionId,
@@ -63,9 +61,9 @@ export default function Plugin({
   return !skip && (src || sourceCode) ? (
     <P
       className={className}
-      style={style}
       src={src}
       sourceCode={sourceCode}
+      filled={!!widget?.extended}
       iFrameProps={iFrameProps}
       canBeVisible={visible}
       isMarshalable={isMarshalable}

diff --git a/src/components/molecules/Visualizer/Plugin/types.ts b/src/components/molecules/Visualizer/Plugin/types.ts
@@ -113,7 +113,10 @@ export type Widget<P = any> = {
   extensionId?: string;
   property?: P;
   propertyId?: string;
-  extended: boolean;
+  extended?: {
+    horizontally: boolean;
+    vertically: boolean;
+  };
   layout?: WidgetLayout;
 };
 
@@ -238,7 +241,7 @@ export type LookAtDestination = {
 };
 
 export type CameraOptions = {
-  /** Expressed in milliseconds. Default is zero. */
+  /** Expressed in seconds. Default is zero. */
   duration?: number;
   /** Easing function. */
   easing?: (time: number) => number;

diff --git a/src/components/molecules/Visualizer/Widget/Button/index.stories.tsx b/src/components/molecules/Visualizer/Widget/Button/index.stories.tsx
@@ -21,7 +21,6 @@ export const Default: Story<Props> = args => (
 Default.args = {
   widget: {
     id: "",
-    extended: false,
     property: {
       buttons: [
         {

diff --git a/src/components/molecules/Visualizer/Widget/Button/index.tsx b/src/components/molecules/Visualizer/Widget/Button/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import { styled } from "@reearth/theme";
 
-import { Props as WidgetProps } from "../../Widget";
+import { ComponentProps as WidgetProps } from "../../Widget";
 
 import MenuButton, { Button as ButtonType, MenuItem as MenuItemType } from "./MenuButton";
 

diff --git a/src/components/molecules/Visualizer/Widget/Menu/index.stories.tsx b/src/components/molecules/Visualizer/Widget/Menu/index.stories.tsx
@@ -21,7 +21,6 @@ export const Default: Story<Props> = args => (
 Default.args = {
   widget: {
     id: "",
-    extended: false,
     property: {
       buttons: [
         {

diff --git a/src/components/molecules/Visualizer/Widget/Menu/index.tsx b/src/components/molecules/Visualizer/Widget/Menu/index.tsx
@@ -3,7 +3,7 @@ import React, { useMemo } from "react";
 
 import { styled } from "@reearth/theme";
 
-import { Props as WidgetProps } from "../../Widget";
+import { ComponentProps as WidgetProps } from "../../Widget";
 
 import MenuButton, {
   Button as ButtonType,

diff --git a/src/components/molecules/Visualizer/Widget/SplashScreen/index.stories.tsx b/src/components/molecules/Visualizer/Widget/SplashScreen/index.stories.tsx
@@ -21,7 +21,6 @@ export const Default: Story<Props> = args => (
 Default.args = {
   widget: {
     id: "",
-    extended: false,
     property: {
       overlay: {
         overlayEnabled: true,

diff --git a/src/components/molecules/Visualizer/Widget/SplashScreen/index.tsx b/src/components/molecules/Visualizer/Widget/SplashScreen/index.tsx
@@ -6,7 +6,7 @@ import { styled } from "@reearth/theme";
 import { Camera } from "@reearth/util/value";
 
 import { useContext } from "../../Plugin";
-import { Props as WidgetProps } from "../../Widget";
+import { ComponentProps as WidgetProps } from "../../Widget";
 
 export type Props = WidgetProps<Property>;
 

diff --git a/src/components/molecules/Visualizer/Widget/Storytelling/index.stories.tsx b/src/components/molecules/Visualizer/Widget/Storytelling/index.stories.tsx
@@ -21,7 +21,6 @@ export const Default = Template.bind({});
 
 Default.args = {
   widget: {
-    extended: false,
     id: "",
     property: {
       stories: [
@@ -39,7 +38,6 @@ export const AutoStart = Template.bind({});
 
 AutoStart.args = {
   widget: {
-    extended: false,
     id: "",
     property: {
       stories: [

diff --git a/src/components/molecules/Visualizer/Widget/Storytelling/index.tsx b/src/components/molecules/Visualizer/Widget/Storytelling/index.tsx
@@ -8,7 +8,7 @@ import { styled, usePublishTheme, PublishTheme, css } from "@reearth/theme";
 import { metricsSizes } from "@reearth/theme/metrics";
 import { Camera as CameraValue } from "@reearth/util/value";
 
-import { Props as WidgetProps } from "../../Widget";
+import { ComponentProps as WidgetProps } from "../../Widget";
 
 import useHooks, { Story as StoryType } from "./hooks";
 
@@ -92,8 +92,8 @@ const Storytelling = ({ widget, sceneProperty }: Props): JSX.Element | null => {
       </Menu>
       <Wrapper
         publishedTheme={publishedTheme}
-        extended={widget?.extended}
-        floating={!widget?.layout}>
+        extended={!!widget.extended?.horizontally}
+        floating={!widget.layout}>
         <ArrowButton
           publishedTheme={publishedTheme}
           disabled={!selected?.index}