smooth page transition flyTo func

reearth · Sep 21, 2023 · fca37ca · fca37ca
1 parent dcb6224
commit fca37ca
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 25 deletions.
diff --git a/web/src/beta/features/Editor/hooks.ts b/web/src/beta/features/Editor/hooks.ts
@@ -80,7 +80,6 @@ export default ({ tab }: { sceneId: string; tab: Tab }) => {
   const handleFlyTo: FlyTo = useCallback(
     (target, options) => {
       if (!isVisualizerReady) return;
-      console.log("FLY TO CALLBACK");
       visualizerRef.current?.engine.flyTo(target, options);
     },
     [isVisualizerReady],

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(

diff --git a/web/src/beta/lib/core/StoryPanel/PanelContent/index.tsx b/web/src/beta/lib/core/StoryPanel/PanelContent/index.tsx
@@ -93,7 +93,6 @@ const StoryContent: React.FC<Props> = ({
           const isScrollingUp = diff > 0;
 
           if (entry.isIntersecting) {
-            console.log("INTERSECTION OBVSERSERERER");
             onCurrentPageChange?.(id);
             scrollRef.current = panelContentElement?.scrollTop;
             return;
@@ -139,8 +138,6 @@ const StoryContent: React.FC<Props> = ({
     }
   }, [isAutoScrolling, onAutoScrollingChange]);
 
-  useEffect(() => console.log(pages), [pages]);
-
   return (
     <PagesWrapper id={PAGES_ELEMENT_ID} showingIndicator={showingIndicator} isEditable={isEditable}>
       {pages?.map(p => (