feat(web): add story panel to plugin-playground (#1355)

reearth · Jan 16, 2025 · ae6b587 · ae6b587
1 parent 1e41e1c
commit ae6b587
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 11 deletions.
diff --git a/web/src/beta/features/PluginPlayground/Code/hook.ts b/web/src/beta/features/PluginPlayground/Code/hook.ts
@@ -3,7 +3,9 @@ import { useNotification } from "@reearth/services/state";
 import * as yaml from "js-yaml";
 import { ComponentProps, useCallback, useState } from "react";
 
+import { Story } from "../../Visualizer/Crust/StoryPanel/types";
 import { WidgetLocation } from "../../Visualizer/Crust/Widgets/types";
+import { DEFAULT_LAYERS_PLUGIN_PLAYGROUND } from "../LayerList/constants";
 import { FileType } from "../Plugins/constants";
 
 type Widgets = ComponentProps<typeof Visualizer>["widgets"];
@@ -37,6 +39,8 @@ type CustomInfoboxBlock = {
   pluginId: string;
 };
 
+type CustomStoryBlock = CustomInfoboxBlock;
+
 type Props = {
   files: FileType[];
 };
@@ -60,6 +64,7 @@ const getYmlJson = (file: FileType) => {
 
 export default ({ files }: Props) => {
   const [infoboxBlocks, setInfoboxBlocks] = useState<CustomInfoboxBlock[]>();
+  const [story, setStory] = useState<Story>();
   const [widgets, setWidgets] = useState<Widgets>();
   const [, setNotification] = useNotification();
 
@@ -158,11 +163,48 @@ export default ({ files }: Props) => {
     }, []);
 
     setInfoboxBlocks(infoboBlockFromExtension);
+
+    const storyBlocksFromExtension = ymlJson.extensions.reduce<
+      CustomStoryBlock[]
+    >((prv, cur) => {
+      if (cur.type !== "storyBlock") return prv;
+
+      const file = files.find((file) => file.title === `${cur.id}.js`);
+
+      if (!file) {
+        return prv;
+      }
+
+      prv.push({
+        id: cur.id,
+        name: cur.name,
+        description: cur.description,
+        __REEARTH_SOURCECODE: file.sourceCode,
+        extensionId: cur.id,
+        pluginId: cur.id
+      });
+      return prv;
+    }, []);
+
+    setStory({
+      id: "story",
+      title: "First Story",
+      position: "left",
+      bgColor: "#f0f0f0",
+      pages: [
+        {
+          id: "page",
+          blocks: storyBlocksFromExtension,
+          layerIds: DEFAULT_LAYERS_PLUGIN_PLAYGROUND.map((l) => l.id)
+        }
+      ]
+    });
   }, [files, setNotification]);
 
   return {
     executeCode,
     infoboxBlocks,
+    story,
     widgets
   };
 };
diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/custom/myPlugin.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/custom/myPlugin.ts
@@ -23,6 +23,9 @@ extensions:
   - id: demo-infobox-block-2
     type: infoboxBlock
     name: Demo Infobox Block 2
+  - id: demo-story-block
+    type: storyBlock
+    name: Demo Story Block
   `,
   disableEdit: true,
   disableDelete: true
@@ -61,8 +64,25 @@ const demoInfoboxBlock2File: FileType = {
 \`); `
 };
 
+const demoStoryFile: FileType = {
+  id: "custom-my-plugin-demo-story",
+  title: "demo-story.js",
+  sourceCode: `reearth.ui.show(\`
+  ${PRESET_PLUGIN_COMMON_STYLE}
+  <div id="wrapper">
+    <h2 style="text-align: center;">Demo Story</h2>
+  </div>  
+\`); `
+};
+
 export const myPlugin: PluginType = {
   id: "my-plugin",
   title: "My Plugin",
-  files: [widgetFile, demoInfoboxBlock1File, demoInfoboxBlock2File, yamlFile]
+  files: [
+    widgetFile,
+    demoInfoboxBlock1File,
+    demoInfoboxBlock2File,
+    demoStoryFile,
+    yamlFile
+  ]
 };
diff --git a/web/src/beta/features/PluginPlayground/SettingsList/index.tsx b/web/src/beta/features/PluginPlayground/SettingsList/index.tsx
@@ -5,8 +5,15 @@ import { FC } from "react";
 type Props = {
   infoboxEnabled: boolean;
   setInfoboxEnabled: (infoBoxEnabled: boolean) => void;
+  setShowStoryPanel: (showStoryPanel: boolean) => void;
+  showStoryPanel: boolean;
 };
-const SettingsList: FC<Props> = ({ infoboxEnabled, setInfoboxEnabled }) => {
+const SettingsList: FC<Props> = ({
+  infoboxEnabled,
+  setInfoboxEnabled,
+  setShowStoryPanel,
+  showStoryPanel
+}) => {
   return (
     <Wrapper>
       <Row>
@@ -18,12 +25,15 @@ const SettingsList: FC<Props> = ({ infoboxEnabled, setInfoboxEnabled }) => {
           Enable Infobox
         </Typography>
       </Row>
-      {/* <Row>
-        <CheckBox />
+      <Row>
+        <CheckBox
+          value={showStoryPanel}
+          onChange={() => setShowStoryPanel(!showStoryPanel)}
+        />
         <Typography size="body" otherProperties={{ paddingLeft: 4 }}>
           Enable Story Panel
         </Typography>
-      </Row> */}
+      </Row>
     </Wrapper>
   );
 };

diff --git a/web/src/beta/features/PluginPlayground/Viewer/index.tsx b/web/src/beta/features/PluginPlayground/Viewer/index.tsx
@@ -2,15 +2,25 @@ import Visualizer from "@reearth/beta/features/Visualizer";
 import { Layer, MapRef } from "@reearth/core";
 import { ComponentProps, FC, MutableRefObject } from "react";
 
+import { Story } from "../../Visualizer/Crust/StoryPanel";
+
 import useHooks from "./hooks";
 
 type Props = {
   layers: Layer[];
-  widgets: ComponentProps<typeof Visualizer>["widgets"];
+  showStoryPanel: boolean;
+  story: Story | undefined;
   visualizerRef: MutableRefObject<MapRef | null>;
+  widgets: ComponentProps<typeof Visualizer>["widgets"];
 };
 
-const Viewer: FC<Props> = ({ layers, widgets, visualizerRef }) => {
+const Viewer: FC<Props> = ({
+  layers,
+  showStoryPanel,
+  story,
+  visualizerRef,
+  widgets
+}) => {
   const { currentCamera, engineMeta, ready, setCurrentCamera, viewerProperty } =
     useHooks({ visualizerRef });
 
@@ -25,6 +35,8 @@ const Viewer: FC<Props> = ({ layers, widgets, visualizerRef }) => {
       currentCamera={currentCamera}
       onCameraChange={setCurrentCamera}
       widgets={widgets}
+      story={story}
+      showStoryPanel={showStoryPanel}
     />
   );
 };

diff --git a/web/src/beta/features/PluginPlayground/hooks.tsx b/web/src/beta/features/PluginPlayground/hooks.tsx
@@ -30,15 +30,16 @@ export default () => {
     sharedPlugin
   } = usePlugins();
 
-  const { infoboxBlocks, widgets, executeCode } = useCode({
+  const { executeCode, infoboxBlocks, story, widgets } = useCode({
     files: selectedPlugin.files
   });
 
+  const [infoboxEnabled, setInfoboxEnabled] = useState(true);
   const [selectedLayerId, setSelectedLayerId] = useState("");
+  const [showStoryPanel, setShowStoryPanel] = useState(false);
   const [visibleLayerIds, setVisibleLayerIds] = useState<string[]>(
     DEFAULT_LAYERS_PLUGIN_PLAYGROUND.map((l) => l.id)
   );
-  const [infoboxEnabled, setInfoboxEnabled] = useState(true);
 
   const layers = useMemo(() => {
     return DEFAULT_LAYERS_PLUGIN_PLAYGROUND.map((layer) => {
@@ -82,13 +83,15 @@ export default () => {
         children: (
           <Viewer
             layers={layers}
-            widgets={widgets}
+            story={story}
+            showStoryPanel={showStoryPanel}
             visualizerRef={visualizerRef}
+            widgets={widgets}
           />
         )
       }
     ],
-    [layers, widgets]
+    [layers, showStoryPanel, story, widgets]
   );
 
   const LayersPanel: FC = () => (
@@ -167,6 +170,8 @@ export default () => {
     <SettingsList
       infoboxEnabled={infoboxEnabled}
       setInfoboxEnabled={setInfoboxEnabled}
+      setShowStoryPanel={setShowStoryPanel}
+      showStoryPanel={showStoryPanel}
     />
   );