chore(web): Story page camera transition (#699)

reearth · Sep 21, 2023 · 4afa473 · 4afa473
1 parent bb362bb
commit 4afa473
Show file tree

Hide file tree

Showing 14 changed files with 97 additions and 119 deletions.
diff --git a/web/src/beta/features/Editor/Visualizer/hooks.ts b/web/src/beta/features/Editor/Visualizer/hooks.ts
@@ -31,18 +31,15 @@ export default ({
   sceneId,
   isBuilt,
   storyId,
-  pageId,
 }: {
   sceneId?: string;
   isBuilt?: boolean;
   storyId?: string;
-  pageId?: string;
 }) => {
   const { useUpdateWidget, useUpdateWidgetAlignSystem } = useWidgetsFetcher();
   const { useGetLayersQuery } = useLayersFetcher();
   const { useSceneQuery } = useSceneFetcher();
-  const { useInstalledStoryBlocksQuery, useCreateStoryBlock, useDeleteStoryBlock } =
-    useStorytellingFetcher();
+  const { useCreateStoryBlock, useDeleteStoryBlock } = useStorytellingFetcher();
   const { useUpdatePropertyValue } = usePropertyFetcher();
 
   const { nlsLayers } = useGetLayersQuery({ sceneId });
@@ -195,15 +192,8 @@ export default ({
     [sceneId, useUpdateWidgetAlignSystem],
   );
 
-  const { installedStoryBlocks } = useInstalledStoryBlocksQuery({
-    sceneId,
-    lang: undefined,
-    storyId,
-    pageId,
-  });
-
   const handleStoryBlockCreate = useCallback(
-    (index?: number) => async (extensionId?: string, pluginId?: string) => {
+    (index?: number) => async (pageId?: string, extensionId?: string, pluginId?: string) => {
       if (!extensionId || !pluginId || !storyId || !pageId) return;
       await useCreateStoryBlock({
         pluginId,
@@ -213,15 +203,15 @@ export default ({
         index,
       });
     },
-    [storyId, pageId, useCreateStoryBlock],
+    [storyId, useCreateStoryBlock],
   );
 
   const handleStoryBlockDelete = useCallback(
-    async (blockId?: string) => {
+    async (pageId?: string, blockId?: string) => {
       if (!blockId || !storyId || !pageId) return;
       await useDeleteStoryBlock({ blockId, pageId, storyId });
     },
-    [storyId, pageId, useDeleteStoryBlock],
+    [storyId, useDeleteStoryBlock],
   );
 
   const handlePropertyValueUpdate = useCallback(
@@ -272,7 +262,6 @@ export default ({
     useExperimentalSandbox,
     isVisualizerReady,
     selectWidgetArea: selectedWidgetAreaVar,
-    installedStoryBlocks,
     handleStoryBlockCreate,
     handleStoryBlockDelete,
     handlePropertyValueUpdate,

diff --git a/web/src/beta/features/Editor/Visualizer/index.tsx b/web/src/beta/features/Editor/Visualizer/index.tsx
@@ -5,7 +5,7 @@ import type { MapRef } from "@reearth/beta/lib/core/Map/ref";
 import StoryPanel, { type InstallableStoryBlock } from "@reearth/beta/lib/core/StoryPanel";
 import CoreVisualizer, { type Props as VisualizerProps } from "@reearth/beta/lib/core/Visualizer";
 import type { Camera } from "@reearth/beta/utils/value";
-import type { Page, Story } from "@reearth/services/api/storytellingApi/utils";
+import type { Story } from "@reearth/services/api/storytellingApi/utils";
 import { config } from "@reearth/services/config";
 import { styled } from "@reearth/services/theme";
 
@@ -20,7 +20,7 @@ export type Props = {
   // storytelling
   showStoryPanel?: boolean;
   selectedStory?: Story;
-  currentPage?: Page;
+  currentPageId?: string;
   isAutoScrolling?: boolean;
   installableBlocks?: InstallableStoryBlock[];
   onAutoScrollingChange: (isScrolling: boolean) => void;
@@ -36,7 +36,7 @@ const Visualizer: React.FC<Props> = ({
   currentCamera,
   showStoryPanel,
   selectedStory,
-  currentPage,
+  currentPageId,
   isAutoScrolling,
   installableBlocks,
   onAutoScrollingChange,
@@ -61,7 +61,6 @@ const Visualizer: React.FC<Props> = ({
     layerSelectionReason,
     useExperimentalSandbox,
     isVisualizerReady: _isVisualizerReady,
-    installedStoryBlocks,
     handleStoryBlockCreate,
     handleStoryBlockDelete,
     handlePropertyValueUpdate,
@@ -77,7 +76,7 @@ const Visualizer: React.FC<Props> = ({
     handleDropLayer,
     zoomToLayer,
     handleMount,
-  } = useHooks({ sceneId, isBuilt, storyId: selectedStory?.id, pageId: currentPage?.id });
+  } = useHooks({ sceneId, isBuilt, storyId: selectedStory?.id });
 
   const renderInfoboxInsertionPopUp = useCallback<
     NonNullable<VisualizerProps["renderInfoboxInsertionPopup"]>
@@ -134,10 +133,9 @@ const Visualizer: React.FC<Props> = ({
         {showStoryPanel && (
           <StoryPanel
             selectedStory={selectedStory}
-            currentPage={currentPage}
+            currentPageId={currentPageId}
             isAutoScrolling={isAutoScrolling}
             installableBlocks={installableBlocks}
-            installedBlocks={installedStoryBlocks}
             isEditable={!!inEditor}
             onBlockCreate={handleStoryBlockCreate}
             onBlockDelete={handleStoryBlockDelete}

diff --git a/web/src/beta/features/Editor/hooks.ts b/web/src/beta/features/Editor/hooks.ts
@@ -30,13 +30,9 @@ export default ({ tab }: { sceneId: string; tab: Tab }) => {
 
   const [showDataSourceManager, setShowDataSourceManager] = useState(false);
 
-  const handleDataSourceManagerCloser = useCallback(() => {
-    setShowDataSourceManager(false);
-  }, []);
+  const handleDataSourceManagerCloser = useCallback(() => setShowDataSourceManager(false), []);
 
-  const handleDataSourceManagerOpener = useCallback(() => {
-    setShowDataSourceManager(true);
-  }, []);
+  const handleDataSourceManagerOpener = useCallback(() => setShowDataSourceManager(true), []);
 
   const [showWidgetEditor, setWidgetEditor] = useWidgetAlignEditorActivated();
 

diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx
@@ -72,7 +72,7 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
     nlsLayers,
     selectedStory,
     selectedLayerId: selectedLayer?.id,
-    currentPage,
+    currentPageId: currentPage?.id,
     selectedSceneSetting,
     onCurrentPageChange: handleCurrentPageChange,
     onPageDuplicate: handlePageDuplicate,
@@ -137,7 +137,7 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
                 sceneId={sceneId}
                 showStoryPanel={selectedProjectType === "story"}
                 selectedStory={selectedStory}
-                currentPage={currentPage}
+                currentPageId={currentPage?.id}
                 isAutoScrolling={isAutoScrolling}
                 installableBlocks={installableStoryBlocks}
                 currentCamera={currentCamera}

diff --git a/web/src/beta/features/Editor/tabs/story/LeftPanel/ContentPage/index.stories.tsx b/web/src/beta/features/Editor/tabs/story/LeftPanel/ContentPage/index.stories.tsx
@@ -30,6 +30,6 @@ export const Default: Story = {
   args: {
     // need API mock
     storyPages: dummyPages,
-    selectedPage: dummyPages[1],
+    selectedPageId: dummyPages[1].id,
   },
 };
diff --git a/web/src/beta/features/Editor/tabs/story/LeftPanel/ContentPage/index.tsx b/web/src/beta/features/Editor/tabs/story/LeftPanel/ContentPage/index.tsx
@@ -12,7 +12,7 @@ import { styled } from "@reearth/services/theme";
 
 type Props = {
   storyPages: Page[];
-  selectedPage?: Page;
+  selectedPageId?: string;
   onPageSelect: (id: string) => void;
   onPageAdd: (isSwipeable: boolean) => void;
   onPageDuplicate: (id: string) => void;
@@ -21,7 +21,7 @@ type Props = {
 };
 const ContentPage: React.FC<Props> = ({
   storyPages,
-  selectedPage,
+  selectedPageId,
   onPageSelect,
   onPageAdd,
   // onPageDuplicate,
@@ -69,7 +69,7 @@ const ContentPage: React.FC<Props> = ({
                   key={i}
                   border
                   actionPlacement="bottom-start"
-                  isSelected={selectedPage?.id === storyPage.id}
+                  isSelected={selectedPageId === storyPage.id}
                   isOpenAction={openedPageId === storyPage.id}
                   onItemClick={() => onPageSelect(storyPage.id)}
                   onActionClick={() => setOpenedPageId(old => (old ? undefined : storyPage.id))}

diff --git a/web/src/beta/features/Editor/tabs/story/LeftPanel/index.tsx b/web/src/beta/features/Editor/tabs/story/LeftPanel/index.tsx
@@ -1,11 +1,11 @@
 import SidePanelCommon from "@reearth/beta/features/Editor/SidePanel";
 import ContentPage from "@reearth/beta/features/Editor/tabs/story/LeftPanel/ContentPage";
-import { Page, Story } from "@reearth/services/api/storytellingApi/utils";
+import type { Story } from "@reearth/services/api/storytellingApi/utils";
 import { useT } from "@reearth/services/i18n";
 
 type Props = {
   selectedStory?: Story;
-  selectedPage?: Page;
+  selectedPageId?: string;
   onPageSelect: (id: string) => void;
   onPageDuplicate: (id: string) => void;
   onPageDelete: (id: string) => void;
@@ -15,7 +15,7 @@ type Props = {
 
 const StoryLeftPanel: React.FC<Props> = ({
   selectedStory,
-  selectedPage,
+  selectedPageId,
   onPageSelect,
   onPageDuplicate,
   onPageDelete,
@@ -41,7 +41,7 @@ const StoryLeftPanel: React.FC<Props> = ({
           children: (
             <ContentPage
               storyPages={selectedStory?.pages ?? []}
-              selectedPage={selectedPage}
+              selectedPageId={selectedPageId}
               onPageAdd={onPageAdd}
               onPageSelect={onPageSelect}
               onPageDuplicate={onPageDuplicate}

diff --git a/web/src/beta/features/Editor/useLeftPanel.tsx b/web/src/beta/features/Editor/useLeftPanel.tsx
@@ -4,7 +4,7 @@ import MapSidePanel from "@reearth/beta/features/Editor/tabs/map/LeftPanel";
 import StorySidePanel from "@reearth/beta/features/Editor/tabs/story/LeftPanel";
 import { Tab } from "@reearth/beta/features/Navbar";
 import type { NLSLayer } from "@reearth/services/api/layersApi/utils";
-import type { Page, Story } from "@reearth/services/api/storytellingApi/utils";
+import type { Story } from "@reearth/services/api/storytellingApi/utils";
 
 import type { LayerNameUpdateProps } from "./useLayers";
 
@@ -14,7 +14,7 @@ type Props = {
 
   // storytelling
   selectedStory?: Story;
-  currentPage?: Page;
+  currentPageId?: string;
   onCurrentPageChange: (id: string) => void;
   onPageDuplicate: (id: string) => void;
   onPageDelete: (id: string) => void;
@@ -39,7 +39,7 @@ export default ({
   selectedStory,
   selectedLayerId,
   selectedSceneSetting,
-  currentPage,
+  currentPageId,
   onCurrentPageChange,
   onPageDuplicate,
   onPageDelete,
@@ -70,7 +70,7 @@ export default ({
         return (
           <StorySidePanel
             selectedStory={selectedStory}
-            selectedPage={currentPage}
+            selectedPageId={currentPageId}
             onPageSelect={onCurrentPageChange}
             onPageDuplicate={onPageDuplicate}
             onPageDelete={onPageDelete}
@@ -89,7 +89,7 @@ export default ({
     selectedStory,
     selectedLayerId,
     selectedSceneSetting,
-    currentPage,
+    currentPageId,
     onLayerDelete,
     onLayerNameUpdate,
     onLayerSelect,

diff --git a/web/src/beta/features/Editor/useStorytelling.ts b/web/src/beta/features/Editor/useStorytelling.ts
@@ -1,9 +1,9 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
-import { FlyTo } from "@reearth/beta/lib/core/types";
-import { Camera } from "@reearth/beta/utils/value";
+import type { FlyTo } from "@reearth/beta/lib/core/types";
+import type { Camera } from "@reearth/beta/utils/value";
 import useStorytellingAPI from "@reearth/services/api/storytellingApi";
-import { Page } from "@reearth/services/api/storytellingApi/utils";
+import type { Page } from "@reearth/services/api/storytellingApi/utils";
 import { useT } from "@reearth/services/i18n";
 
 type Props = {
@@ -29,31 +29,31 @@ export default function ({ sceneId, onFlyTo }: Props) {
   const { stories } = useStoriesQuery({ sceneId });
 
   const { installableStoryBlocks } = useInstallableStoryBlocksQuery({ sceneId });
-  const [currentPageId, setCurrentPageId] = useState<string | undefined>(undefined);
+  const [currentPage, setCurrentPage] = useState<Page | undefined>(undefined);
   const [isAutoScrolling, setAutoScrolling] = useState(false);
 
   const selectedStory = useMemo(() => {
     return stories?.length ? stories[0] : undefined;
   }, [stories]);
 
-  const currentPage = useMemo(() => {
-    if (!currentPageId && selectedStory?.pages?.length) {
-      return selectedStory?.pages[0];
-    }
-
-    return getPage(currentPageId, selectedStory?.pages);
-  }, [currentPageId, selectedStory?.pages]);
-
   const handleAutoScrollingChange = useCallback(
     (isScrolling: boolean) => setAutoScrolling(isScrolling),
     [],
   );
 
+  useEffect(() => {
+    if (!currentPage) {
+      setCurrentPage(selectedStory?.pages?.[0]);
+    }
+  }, [currentPage, selectedStory?.pages]);
+
   const handleCurrentPageChange = useCallback(
     (pageId: string, disableScrollIntoView?: boolean) => {
       const newPage = getPage(pageId, selectedStory?.pages);
       if (!newPage) return;
-      setCurrentPageId(pageId);
+
+      setCurrentPage(newPage);
+
       if (!disableScrollIntoView) {
         const element = document.getElementById(newPage.id);
         setAutoScrolling(true);
@@ -65,10 +65,6 @@ export default function ({ sceneId, onFlyTo }: Props) {
         if (!destination) return;
 
         const duration = camera.fields.find(f => f.id === "cameraDuration")?.value as number;
-        // const delay = camera.fields.find(f => f.id === "cameraDelay")?.value as number;
-        // console.log(destination);
-        // console.log(duration);
-        // console.log(delay);
         onFlyTo({ ...destination }, { duration });
       }
     },
@@ -91,11 +87,11 @@ export default function ({ sceneId, onFlyTo }: Props) {
         storyId: selectedStory.id,
         pageId,
       });
-      if (pageId === currentPageId) {
-        setCurrentPageId(pages[deletedPageIndex + 1]?.id ?? pages[deletedPageIndex - 1]?.id);
+      if (pageId === currentPage?.id) {
+        setCurrentPage(pages[deletedPageIndex + 1] ?? pages[deletedPageIndex - 1]);
       }
     },
-    [useDeleteStoryPage, sceneId, currentPageId, selectedStory],
+    [sceneId, currentPage?.id, selectedStory, useDeleteStoryPage],
   );
 
   const handlePageAdd = useCallback(